/* ============================================================================ Airlift — announcement bar, header and mobile drawer (concept/top-of-page). ONE source of truth for every page. Loaded last in , after the page's own CSS, so its :root tokens and the root scroll-padding win the older copies. Two header heights, two tokens: --nav-h the header at the TOP of the page: 18px + 54px logo + 18px = 90px (76px under 900px, where the logo is 40px). The homepage hero pulls itself up by this much so the transparent header sits over the image. --nav-h-compact the header once scrolled: 10px + 40px + 10px + 1px border = 61px, on every viewport (pills, logo, CTA and menu button are all 40px tall in that state). This is the height an in-page jump lands under, so the root scroll-padding and every sticky offset that used to read --nav-h read this instead. THE SHRINK IS A TRANSFORM, NOT A HEIGHT CHANGE. The header is sticky and in flow, so if its box shrank from 90px to 61px on scroll, everything below it would move up 29px — and every in-page anchor would land 29px under the bar (_anchor_test.mjs went 2/19 the first time). The box therefore stays --nav-h tall for the life of the page; in the compact state the bar inside it collapses to 61px, sits at the bottom of the box, and the whole header slides up by the difference. Layout never moves; the visible bar is exactly --nav-h-compact tall and flush with the top of the viewport. getBoundingClientRect() reports the translated box, so nav.bottom is the number every test reads. Keep the arithmetic and the CSS in step: the test measures all three heights. ========================================================================== */ :root { --nav-h: 90px; --nav-h-compact: 61px; } @media (max-width: 900px) { :root { --nav-h: 76px; } } html { scroll-padding-top: var(--nav-h-compact); } /* Drawer scroll lock. On , not : html { overflow-x: clip } stops the body's overflow propagating to the viewport (see the .rd-locked note in shop/index.html), and body-level overflow:hidden un-sticks the header on iOS. */ html.nav-locked { overflow: hidden; } /* ---------- announcement bar: one line, brand gradient, not sticky ---------- The gradient is the live CTA accent (#02f2aa → #26d2e2), written out rather than read from --accent because sub-pages don't define that token. */ .al-topbar { position: relative; z-index: 20; background: linear-gradient(270deg, #02f2aa 30%, #26d2e2 70%); color: #0d1512; font-size: 13px; font-weight: 500; line-height: 1.4; text-align: center; padding: 9px 16px; } .al-topbar strong { font-weight: 700; } /* One line on every width. The full sentence is ~507px at 13px, so phones swap the middle clause for a shorter one (.al-bar-d desktop / .al-bar-m mobile; both stay in the DOM so the text is the same for assistive tech and the tests) and step the type down: ~343px at 12px fits a 390px phone's 358px inner width, and ~314px at 11px fits a 360px one. */ .al-bar-m { display: none; } @media (max-width: 640px) { .al-topbar { font-size: 12px; white-space: nowrap; padding-left: 12px; padding-right: 12px; } .al-bar-d { display: none; } .al-bar-m { display: inline; } } @media (max-width: 380px) { .al-topbar { font-size: 11px; } } .al-topbar a { color: inherit; text-decoration: underline; text-underline-offset: 2px; border-radius: 3px; } .al-topbar a:hover { text-decoration-thickness: 2px; } .al-topbar a:active { opacity: 0.75; } .al-topbar a:focus-visible { outline: 2px solid #0d1512; outline-offset: 2px; } /* ---------- header ---------- */ #nav.al-nav { position: sticky; top: 0; z-index: 50; height: var(--nav-h); display: flex; flex-direction: column; justify-content: flex-end; background: transparent; transition: background 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); } #nav.al-nav.compact { background: rgba(13, 21, 18, 0.74); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); transform: translateY(calc(var(--nav-h-compact) - var(--nav-h))); } .al-bar { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding-top: 18px; padding-bottom: 18px; border-bottom: 1px solid transparent; transition: padding 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.35s ease; } .compact .al-bar { padding-top: 10px; padding-bottom: 10px; border-bottom-color: rgba(252, 252, 252, 0.1); } /* The top state's bar is 18 + 54 + 18 + 1px border = 91px inside a 90px box; the transparent border is the odd pixel, so it overhangs the box bottom rather than the header growing. */ .al-nav:not(.compact) .al-bar { margin-bottom: -1px; } .al-left { justify-self: start; display: flex; align-items: center; gap: 12px; min-width: 0; } .al-logo { justify-self: center; display: flex; align-items: center; border-radius: 6px; } .al-logo img { display: block; height: 54px; width: auto; transition: height 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); } .compact .al-logo img { height: 40px; } .al-right { justify-self: end; display: flex; align-items: center; gap: 16px; } /* pills */ .al-pills { display: flex; gap: 2px; padding: 4px; border: 1px solid rgba(252, 252, 252, 0.1); border-radius: 999px; background: rgba(252, 252, 252, 0.03); } /* line-height 1: 14 + 8 + 8 = 30px link, + 4px group padding each side + 1px border each side = 40px, the same as the logo, CTA and menu button, so the compact bar is 10 + 40 + 10 + 1. */ .al-pills a { display: inline-block; padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 500; line-height: 1; color: rgba(252, 252, 252, 0.68); text-decoration: none; white-space: nowrap; transition: background 0.2s ease, color 0.2s ease; } .al-pills a:hover, .al-pills a.on { background: rgba(252, 252, 252, 0.1); color: #fcfcfc; } .al-pills a:active { background: rgba(252, 252, 252, 0.16); } /* right cluster */ .al-quiet { font-size: 14px; font-weight: 500; color: rgba(252, 252, 252, 0.68); text-decoration: none; border-radius: 4px; transition: color 0.2s ease; } .al-quiet:hover { color: #fcfcfc; } .al-quiet:active { opacity: 0.8; } .al-cta { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px; background: linear-gradient(270deg, #02f2aa 30%, #26d2e2 70%); color: #0d1512; font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap; text-decoration: none; transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1); } .al-cta:hover { background: linear-gradient(270deg, #4efaff 0%, #20ffc8 100%); transform: translateY(-1px); } .al-cta:active { transform: translateY(0); } .al-cta .al-cta-s { display: none; } /* menu button (phones only; the drawer's close button reuses the class and is always shown) */ .al-menu { display: none; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid rgba(252, 252, 252, 0.1); background: transparent; color: #fcfcfc; cursor: pointer; align-items: center; justify-content: center; transition: border-color 0.2s ease, background 0.2s ease; } .al-menu svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; fill: none; } .al-menu:hover { border-color: rgba(252, 252, 252, 0.3); } .al-menu:active { background: rgba(252, 252, 252, 0.08); } #menu-close.al-menu { display: flex; } /* visible focus on every control: 2px mint, 3px offset */ .al-nav a:focus-visible, .al-menu:focus-visible, .al-drawer a:focus-visible { outline: 2px solid var(--mint, #04efae); outline-offset: 3px; } .al-cta:focus-visible { outline-color: #fcfcfc; } /* ---------- mobile drawer ---------- A SIBLING of the header, not a child: the compact header carries backdrop-filter, which makes it the containing block for any position:fixed descendant, and the drawer would have been pinned inside a 60px bar. */ .al-drawer { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; background: #0d1512; color: #fcfcfc; padding-bottom: calc(32px + env(safe-area-inset-bottom)); transform: translateY(-8px); opacity: 0; pointer-events: none; overflow-y: auto; transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); } .al-drawer.open { opacity: 1; transform: none; pointer-events: auto; } .al-drawer-top { width: 100%; display: flex; justify-content: space-between; align-items: center; padding-top: 18px; padding-bottom: 18px; } .al-drawer-top .al-logo img { height: 40px; } .al-drawer-nav { width: 100%; margin-top: 24px; display: grid; } .al-drawer-nav a { font-size: 32px; letter-spacing: -0.025em; font-weight: 500; line-height: 1.15; padding: 14px 0; border-bottom: 1px solid rgba(252, 252, 252, 0.1); color: #fcfcfc; text-decoration: none; } .al-drawer-nav a:active { color: rgba(252, 252, 252, 0.7); } .al-drawer-nav a.on { color: var(--mint, #04efae); } .al-drawer-foot { width: 100%; margin-top: auto; padding-top: 24px; display: grid; gap: 14px; } .al-drawer-foot .al-cta { height: 52px; font-size: 16px; justify-content: center; } .al-drawer-foot .al-quiet { font-size: 15px; text-align: center; } /* ---------- phones (≤900px) ---------- */ @media (max-width: 900px) { .al-pills, .al-right .al-quiet { display: none; } .al-menu { display: flex; } .al-logo img { height: 40px; } .al-right { gap: 10px; } .al-cta { padding: 0 14px; font-size: 13px; } .al-cta .al-cta-l { display: none; } .al-cta .al-cta-s { display: inline; } } @media (prefers-reduced-motion: reduce) { #nav.al-nav, .al-bar, .al-logo img, .al-cta, .al-drawer, .al-pills a { transition: none; } } /* Sub-pages have no full-bleed hero: their first section sits under a header that is transparent over the page's own ink, so no offset is needed there. The only page that pulls content up under the header is the homepage (#lb-hero), and it reads --nav-h itself. */