/* ── Mobile navigation (canonical) ── Loaded last in so it wins on source order over each page's inline nav CSS. */ /* Chevron replaces the literal "▾" glyph so it can rotate. Injected by mobile-nav.js. */ .nav-caret{ display:inline-block; width:8px; height:8px; margin:-3px 0 0 5px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; border-radius:1px; transform:rotate(45deg); transition:transform .3s cubic-bezier(.16,1,.3,1); opacity:.6; vertical-align:middle; } @media (min-width:961px){ .nav-drop:hover .nav-caret{transform:rotate(-135deg);margin-top:2px;opacity:1} } @media (max-width:960px){ /* Full-screen drawer sitting under the 64px bar */ .nav-links{ display:flex; position:fixed; /* .nav uses backdrop-filter, so it is the containing block for this fixed panel. Size by height rather than bottom:0, which would resolve against the 64px bar. */ top:64px; left:0; right:0; bottom:auto; height:calc(100vh - 64px); height:calc(100dvh - 64px); max-height:none; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:6px; padding:26px 22px calc(34px + env(safe-area-inset-bottom,0px)); background:#fff; border-top:1px solid var(--gray-200,#e5e7eb); box-shadow:none; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; z-index:98; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-16px); transition:opacity .22s ease, transform .34s cubic-bezier(.16,1,.3,1), visibility 0s linear .34s; } .nav-links.open{ opacity:1; visibility:visible; pointer-events:auto; transform:none; transition:opacity .2s ease, transform .44s cubic-bezier(.16,1,.3,1), visibility 0s; } /* Auto margins centre the stack but collapse to 0 once it overflows, so a tall open submenu is never clipped the way justify-content:center clips it. */ .nav-links>*:first-child{margin-top:auto} .nav-links>*:last-child{margin-bottom:auto} /* Items settle in one after another */ .nav-links>*{ opacity:0; transform:translateY(12px); transition:opacity .28s ease, transform .38s cubic-bezier(.16,1,.3,1); } .nav-links.open>*{opacity:1;transform:none} .nav-links.open>*:nth-child(1){transition-delay:.05s} .nav-links.open>*:nth-child(2){transition-delay:.09s} .nav-links.open>*:nth-child(3){transition-delay:.13s} .nav-links.open>*:nth-child(4){transition-delay:.17s} .nav-links.open>*:nth-child(5){transition-delay:.21s} .nav-links.open>*:nth-child(6){transition-delay:.25s} .nav-links.open>*:nth-child(7){transition-delay:.29s} .nav-links.open>*:nth-child(8){transition-delay:.33s} .nav-links.open>*:nth-child(9){transition-delay:.37s} .nav-links.open>*:nth-child(10){transition-delay:.41s} /* Every row is the same shape, centered */ .nav-links>a, .nav-drop-trig{ display:flex; align-items:center; justify-content:center; text-align:center; width:100%; min-height:52px; padding:14px 18px; border-radius:12px; font-size:17px; font-weight:600; letter-spacing:-.01em; line-height:1.2; color:var(--gray-700,#374151); transition:background .15s, color .15s; } .nav-drop{width:100%} .nav-drop-trig{gap:9px} .nav-links>a.active, .nav-drop-trig.active{color:var(--blue,#4070f5)} .nav-caret{width:9px;height:9px;margin:-3px 0 0 0} .nav-drop.open .nav-caret{transform:rotate(-135deg);margin-top:3px;opacity:1} .nav-drop.open .nav-drop-trig{color:var(--blue,#4070f5)} /* Submenu */ .nav-drop.open .nav-drop-menu{ display:flex; position:static; transform:none; box-shadow:none; border:0; min-width:0; background:var(--gray-50,#f9fafb); border-radius:12px; margin:4px 0 8px; padding:8px; gap:2px; animation:navDropIn .3s cubic-bezier(.16,1,.3,1) both; } .nav-drop-menu a{ display:flex; align-items:center; justify-content:center; text-align:center; white-space:normal; min-height:46px; padding:12px 14px; border-radius:9px; font-size:15px; font-weight:500; } @keyframes navDropIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} /* Start Now */ .nav-links>a.nav-mobile-cta{ color:#fff; background:var(--blue,#4070f5); margin-top:20px; min-height:56px; font-size:17px; font-weight:700; border-radius:12px; box-shadow:0 8px 22px rgba(64,112,245,.26); } .nav-links>a.nav-mobile-cta:hover, .nav-links>a.nav-mobile-cta:active{color:#fff;background:var(--blue-dark,#2f5ae0)} /* Burger → X, in two stages. translate/rotate/scale are used as independent properties rather than one transform list so each stage can carry its own delay: opening converges the bars, then crosses them; closing uncrosses first, then spreads them apart. transform is forced to none because the per-page CSS sets one, and transform composes on top of these properties instead of replacing them. */ .nav-burger{ display:flex; position:relative; width:44px; height:44px; align-items:center; justify-content:center; gap:0; padding:0; border-radius:10px; rotate:0deg; -webkit-tap-highlight-color:transparent; transition:rotate .55s cubic-bezier(.16,1,.3,1), background .15s; } .nav-burger.open{rotate:180deg} .nav-burger span{ position:absolute; top:50%; left:50%; width:22px; height:2px; margin:-1px 0 0 -11px; border-radius:2px; background:var(--gray-700,#374151); transform:none; rotate:0deg; scale:1 1; opacity:1; /* closing order: uncross, then spread, then the middle bar returns */ transition:rotate .3s cubic-bezier(.16,1,.3,1) 0s, translate .28s cubic-bezier(.16,1,.3,1) .2s, width .28s ease .2s, scale .24s cubic-bezier(.16,1,.3,1) .3s, opacity .16s ease .34s, background .15s; } .nav-burger span:nth-child(1){translate:0 -6.5px} .nav-burger span:nth-child(2){translate:0 0} .nav-burger span:nth-child(3){translate:0 6.5px} /* opening order: middle bar clears, bars converge, then they cross */ .nav-burger.open span{ transition:translate .26s cubic-bezier(.16,1,.3,1) 0s, scale .18s cubic-bezier(.16,1,.3,1) 0s, opacity .14s ease 0s, rotate .34s cubic-bezier(.16,1,.3,1) .2s, width .32s ease .2s, background .15s; } .nav-burger.open span:nth-child(1){transform:none;translate:0 0;rotate:45deg;width:20px} .nav-burger.open span:nth-child(2){transform:none;opacity:0;scale:0 1} .nav-burger.open span:nth-child(3){transform:none;translate:0 0;rotate:-45deg;width:20px} /* Tap highlight must not stick on touch devices */ @media (hover:none){ .nav-burger:hover{background:transparent} .nav-links>a:hover,.nav-drop-trig:hover,.nav-drop-menu a:hover{background:transparent} .nav-links>a.nav-mobile-cta:hover{background:var(--blue,#4070f5)} } /* No overflow:hidden lock on body here: it re-parents the scroll container, which unsticks the sticky .nav and drags this panel off the viewport edge. overscroll-behavior:contain above stops scroll chaining instead. */ } @media (max-width:960px) and (prefers-reduced-motion:reduce){ .nav-links,.nav-links>*,.nav-caret, .nav-burger,.nav-burger span,.nav-burger.open span{transition-duration:.01ms;transition-delay:0s} .nav-links.open>*{transition-delay:0s} .nav-burger.open{rotate:0deg} .nav-drop.open .nav-drop-menu{animation:none} }