/* AeroVox — shared responsive navigation. * * Every page previously hid its nav links outright below 780px * (`.nav-links a:not(.nav-cta){display:none}`) with nothing to replace them, * so on a phone the only reachable page was the CTA. This file restores the * links behind an accessible disclosure menu. * * Progressive enhancement: the collapse is gated on html[data-js="1"], set by a * one-line inline script in . With JS off the links simply stay visible * and wrap, which is worse-looking but never unreachable. Gating in * (rather than waiting for nav.js) also means the panel is never painted open * and then yanked shut. * * Tokens (--border, --cyan, …) are defined per page; fallbacks keep this * stylesheet self-sufficient if it is ever loaded somewhere they are not. */ /* Injected by nav.js, so it is absent — not merely hidden — without JS. */ .nav-toggle{ display:none; width:42px;height:42px;padding:0; align-items:center;justify-content:center; background:var(--ink2,#0d1018); border:1px solid var(--border2,rgba(255,255,255,.14)); border-radius:11px; color:var(--text-hi,#f0f2f8); cursor:pointer; -webkit-tap-highlight-color:transparent; } .nav-toggle:hover{border-color:var(--cyan-bdr,rgba(14,165,233,.28))} .nav-toggle-bars{display:block;width:18px;height:12px;position:relative} .nav-toggle-bars i{ position:absolute;left:0;right:0;height:2px;border-radius:2px; background:currentColor; transition:transform .2s ease,opacity .15s ease; } .nav-toggle-bars i:nth-child(1){top:0} .nav-toggle-bars i:nth-child(2){top:5px} .nav-toggle-bars i:nth-child(3){top:10px} /* Bars morph into an X while the panel is open. */ nav[data-open="true"] .nav-toggle-bars i:nth-child(1){transform:translateY(5px) rotate(45deg)} nav[data-open="true"] .nav-toggle-bars i:nth-child(2){opacity:0} nav[data-open="true"] .nav-toggle-bars i:nth-child(3){transform:translateY(-5px) rotate(-45deg)} @media(max-width:780px){ .nav-toggle{display:inline-flex} /* nav is position:sticky, so it is the containing block for the panel. */ html[data-js="1"] nav .nav-links{ display:none; position:absolute;top:100%;left:0;right:0; flex-direction:column;align-items:stretch;gap:0; padding:6px 20px 14px; /* Solid, not translucent: this panel overlays arbitrary page content, and a nested backdrop-filter (the sticky nav above already establishes a backdrop root) composites unreliably, letting hero text bleed through and wreck contrast. An opaque surface keeps the menu legible anywhere. */ background:var(--ink,#07090f); border-bottom:1px solid var(--border,rgba(255,255,255,.07)); box-shadow:0 18px 40px -20px rgba(0,0,0,.9); /* A long menu on a short phone must still reach its last item. */ max-height:calc(100vh - 66px); overflow-y:auto; -webkit-overflow-scrolling:touch; } html[data-js="1"] nav[data-open="true"] .nav-links{ display:flex; animation:navDrop .18s ease both; } /* 48px rows — comfortably above the 44px touch-target floor (WCAG 2.5.5). */ html[data-js="1"] nav .nav-links a{ display:flex;align-items:center; min-height:48px;padding:0 4px; font-size:15px; border-bottom:1px solid var(--border,rgba(255,255,255,.07)); } html[data-js="1"] nav .nav-links a:last-child{border-bottom:0} /* The CTA keeps its button treatment, set apart from the plain rows. */ html[data-js="1"] nav .nav-links a.nav-cta{ justify-content:center; margin-top:12px;padding:0 17px; border:1px solid var(--cyan-bdr,rgba(14,165,233,.28)); border-radius:10px; background:var(--cyan-dim,rgba(14,165,233,.12)); } } @keyframes navDrop{ from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} } @media(prefers-reduced-motion:reduce){ html[data-js="1"] nav[data-open="true"] .nav-links{animation:none} .nav-toggle-bars i{transition:none} }