/* ============================================================ NAV + MOBILE MENU — v4 reference design (Grothendieck House) Sources: evolved-home-v3.html lines 115–141 + 357–365, nav.js css string lines 60–113. All body.light / body:not(.light) selectors translated to :root.light / :root:not(.light) — .light lives on . ============================================================ */ /* ---------- sticky frosted bar ---------- */ .nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: var(--hair) solid var(--hair-color); transition: background .45s ease, border-color .45s ease; } .nav__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 82px; /* v4: 82px (reference override; baseline was 78px) */ max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); } /* ---------- wordmark lockup ---------- */ .mark { font-family: var(--wordmark); line-height: .98; text-align: center; white-space: nowrap; transform: translateY(4pt); /* v4: logo nudged 4pt lower — no layout shift */ } .mark__name { display: block; font-size: var(--logo); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text); } /* .mark__sub removed — wordmark is one line ("HOW LANGUAGE WORKS"); see hlw.css .mark */ /* ---------- desktop nav links ---------- */ .nav__links { display: flex; gap: 32px; } .nav__links a { font-family: var(--ui); font-size: 14px; /* v4: 14px */ font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); transition: color .2s; position: relative; } .nav__links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 1px; background: var(--accent); transition: right .25s ease; } .nav__links a:hover, .nav__links a[aria-current] { color: var(--text); } .nav__links a:hover::after { right: 0; } /* ---------- right rail: toggle + burger ---------- */ .nav__right { display: flex; align-items: center; gap: 16px; } /* theme toggle button — class .invert, id themeToggle (desktop) / themeToggleMobile (mobile) */ .invert { font-family: var(--ui); font-size: 14px; /* v4: 14px */ font-weight: 500; letter-spacing: .1em; /* v4 */ text-transform: uppercase; color: var(--text-2); background: none; border: 1px solid var(--line-2); padding: 8px 14px; cursor: pointer; transition: color .2s, border-color .2s; } .invert:hover { color: var(--text); border-color: var(--text); } /* burger button */ .burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 6px; } .burger span { width: 24px; height: 1.5px; background: var(--text); transition: transform .32s cubic-bezier(.4, 0, .2, 1), opacity .2s ease; } /* burger → X morph when nav is open */ .nav.open .burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav.open .burger span:nth-child(2) { opacity: 0; } .nav.open .burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* mobile drawer — hidden by default; shown via .nav.open at ≤860px */ .mobile { display: none; } /* ---------- dimming overlay ---------- */ /* Deliberately NO backdrop-filter on the overlay — on iOS Safari a backdrop-filtered element is composited and ignores z-index, painting OVER the sticky header + menu. */ .nav-overlay { position: fixed; inset: 0; z-index: 48; background: rgba(8, 6, 4, .66); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .28s ease, visibility .28s ease; } .nav.open ~ .nav-overlay { opacity: 1; visibility: visible; pointer-events: auto; } /* overlay is never needed on desktop */ @media (min-width: 861px) { .nav-overlay { display: none; } } /* ---------- scroll lock ---------- */ /* position:fixed preserves scrollY on iOS; overflow:hidden alone does not. JS sets body.style.top = -scrollY before adding this class, restores on remove. */ body.nav-locked { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; } /* ---------- mobile breakpoint (≤860px) ---------- */ @media (max-width: 860px) { /* Drop backdrop-filter on mobile — the header's filter makes it the containing block for the fixed .mobile drawer (iOS bug), which renders it off-screen when scrolled. Solid bg keeps the bar clean without the blur. */ .nav { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg); } /* Pin header while menu is open — a sticky header de-sticks the moment scroll is locked (loses its scroll container), so the open-menu shows only the overlay. */ .nav.open { position: fixed; top: 0; left: 0; right: 0; } .nav__links, .invert.desk { display: none; } .burger { display: flex; } .mobile { display: none; position: fixed; inset: 78px 0 auto 0; flex-direction: column; background: var(--bg); border-bottom: 1px solid var(--line); padding: 14px var(--pad) 26px; gap: 4px; z-index: 49; } .nav.open .mobile { display: flex; } .mobile a { font-family: var(--ui); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--text); padding: 14px 0; border-bottom: 1px solid var(--line); } .mobile .invert { display: inline-flex; align-self: flex-start; margin-top: 16px; } } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .burger span, .nav-overlay { transition: none; } }