/* -- NAV -- */ nav { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 200; display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 2.5rem; background: rgba(248, 246, 243, 0.87); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(31, 35, 41, 0.07); } .nav-logo { font-family: "Processity", serif; font-size: 1.4rem; font-weight: 900; color: var(--ink); letter-spacing: -0.04em; text-decoration: none; user-select: none; } .nav-logo span { color: var(--accent); } .nav-links { display: flex; gap: 2rem; list-style: none; } .nav-links a { font-size: 0.875rem; font-weight: 500; color: var(--ink-soft); text-decoration: none; transition: color 0.2s; } .nav-links a:hover { color: var(--ink); } .nav-cta { padding: 0.55rem 1.35rem; background: var(--accent); color: #fff; border: none; border-radius: 999px; font-family: "Outfit", sans-serif; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: background 0.2s, transform 0.15s; } .nav-cta:hover { background: var(--teal-700); transform: translateY(-1px); } .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 38px; height: 38px; padding: 0; background: transparent; border: none; cursor: pointer; } .nav-toggle span { display: block; width: 22px; height: 2px; margin: 0 auto; background: var(--ink); border-radius: 1px; transition: transform 0.25s ease, opacity 0.2s ease; } .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* -- MEGA DROPDOWN -- */ .nav-dropdown { position: relative; } .nav-mega { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px); margin-top: 0.6rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; width: 540px; max-width: calc(100vw - 3rem); background: #fff; border: 1px solid rgba(31, 35, 41, 0.07); border-radius: 16px; box-shadow: 0 20px 50px rgba(31, 35, 41, 0.14); padding: 0.6rem; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease; } .nav-mega::before { content: ""; position: absolute; top: -0.6rem; left: 0; right: 0; height: 0.6rem; } @media (min-width: 841px) { .nav-dropdown:hover .nav-mega, .nav-mega:hover { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } } /* Prevent stale :hover (cursor left over the nav from the previous page) from popping the mega menu open right after a full page navigation. */ body.nav-suppress-hover .nav-dropdown:hover .nav-mega, body.nav-suppress-hover .nav-mega:hover { opacity: 0; visibility: hidden; pointer-events: none; transition: none; } .nav-mega-item { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.85rem; border-radius: 12px; text-decoration: none; transition: background 0.15s ease; } .nav-mega-item:hover { background: var(--gray-50); } .nav-mega-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--icon-bg); color: var(--icon-fg); } .nav-mega-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .nav-mega-title { font-size: 0.85rem; font-weight: 600; color: var(--ink); line-height: 1.3; } .nav-mega-desc { font-size: 0.75rem; font-weight: 400; color: var(--ink-soft); line-height: 1.4; } /* -- MOBILE NAV -- Kept here (not css/responsive.css) so this always loads after the base rules above: component-loader.js injects this stylesheet at runtime, landing after the static css/responsive.css in . An unconditional .nav-links{display:flex} placed later in the cascade would otherwise always beat responsive.css's media-scoped display:none, regardless of viewport width. */ @media (max-width: 840px) { .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; padding: 0.5rem 1.5rem 1rem; background: rgba(248, 246, 243, 0.98); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(31, 35, 41, 0.07); } .nav-links.open { display: flex; max-height: calc(100vh - 4rem); overflow-y: auto; } .nav-links li { width: 100%; } .nav-links a { display: block; padding: 0.75rem 0; border-bottom: 1px solid rgba(31, 35, 41, 0.06); } .nav-dropdown > a { position: relative; } .nav-dropdown > a::after { content: ""; position: absolute; right: 0.35rem; top: 50%; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-70%) rotate(45deg); transition: transform 0.2s ease; } .nav-dropdown.mega-open > a::after { transform: translateY(-30%) rotate(-135deg); } .nav-mega { position: static; opacity: 1; visibility: visible; pointer-events: auto; transform: none; box-shadow: none; border: none; border-radius: 0; margin: 0; padding: 0 0 0 0.5rem; background: transparent; width: 100%; grid-template-columns: 1fr; gap: 0; display: none; } .nav-dropdown.mega-open .nav-mega { display: grid; } .nav-mega::before { display: none; } .nav-mega-item { padding: 0.6rem 0; border-bottom: 1px solid rgba(31, 35, 41, 0.06); border-radius: 0; } .nav-mega-item:hover { background: transparent; } .nav-mega-icon { width: 32px; height: 32px; } .nav-cta { display: none; } .nav-toggle { display: flex; } }