/* ============================================================ GLOBAL NAV — COMPONENTS MEGA FLYOUT Shared by every page that renders .gnav. Paired with nav-mega.js, which builds the panel markup, so the flyout exists in exactly one place instead of being copied into each page's . THEMING: every colour here comes from a semantic token (--surface, --border, --fg, --fg-muted). Those tokens are already flipped for the dark pages by styles.css, so this file needs no dark variant and — importantly — no `body.landing-dark` selectors. That matters because index-v2.html carries `landing-dark` as a structural hook while rendering light; keying off the class there would paint the panel dark on a light page. Tokens can't get that wrong. ============================================================ */ /* the hover wash, derived from the foreground so it inverts with the theme on its own. --ink-25 would have been wrong: it is not theme-flipped, so it stays near-white and would wash a dark nav. */ .gnav { --nav-mega-wash: color-mix(in oklab, var(--fg) 6%, transparent); /* Contrast-checked greys for the flyout's secondary type. Measured on the panel's white surface: --dim 6.4:1, --quiet 5.2:1. Both clear WCAG AA for body text; the pair keeps a visible step between a disabled row's title and its "Coming soon" note. */ --nav-mega-dim: rgb(90, 90, 85); --nav-mega-quiet: rgb(110, 110, 104); } /* On genuinely dark pages the same roles invert — light greys on the dark panel. `:not(.landing-light)` keeps index-v2 out of it: that page wears landing-dark as a structural hook while rendering light. */ body.landing-dark:not(.landing-light) .gnav { --nav-mega-dim: rgb(200, 200, 194); --nav-mega-quiet: rgb(170, 170, 163); } /* ── THE NAV BAR ITSELF ── styles.css builds the bar from --bg (#fbfbfa, a warm off-white) at 84%, while the flyout sheet below it is --surface (pure white). Those are two different colours, so on every page except the landing one the panel dropped out of a slightly grey bar and the seam showed. Both now come from the SAME token, so the bar and the sheet cannot disagree: --surface is white on the light pages and #100e1c on the dark ones, and the border is derived from --fg rather than the fixed #dcdcd5, which read heavy against white. Specificity is a plain `.gnav`, matching styles.css, and this file loads after it — so it wins on the light pages while `body.landing-dark .gnav` (two classes) still wins on the dark ones and keeps them dark. */ .gnav { /* Solid, not translucent. At 88% the page tinted the bar as content scrolled under it, so the bar drifted away from the flyout sheet — which is opaque --surface — and the seam came back in motion even though the two matched at rest. Opaque on both sides means they are the same white at every scroll position. */ background: var(--surface); border-bottom: 1px solid color-mix(in oklab, var(--fg) 8%, transparent); /* the blur has nothing left to sample through an opaque bar, and dropping it also drops a needless full-width compositing pass */ -webkit-backdrop-filter: none; backdrop-filter: none; } /* ── positioning ─────────────────────────────────────────── The panel spans the viewport, so it cannot be positioned against .gnav__item (a ~100px box). The item is set to `static` so the panel's containing block becomes .gnav itself — `position: sticky`, therefore a positioned ancestor, full width, no overflow clipping and already z-index 60. left:0/right:0 then reaches both edges with no 100vw hack and no scrollbar overshoot. The panel stays a DOM child of .gnav__item even though it lays out against .gnav: :hover propagates up the DOM, not the layout tree, so pointing at the panel keeps the item hovered. No JS, no timers. */ /* Scoped through .gnav on purpose. `position: static` has to beat `.gnav__item--has-flyout { position: relative }` in styles.css AND a page-local `.gnav__item { position: relative }` in an inline