/* Mobile navigation (D6) — the off-canvas menu that replaces the scroll strip. * * The bundle turns .nav-main into a horizontally scrolling strip with the * scrollbar hidden and kills the mega menus outright with * `.nav-group .mega{display:none!important}`. The top-level links survive; * every sub-destination behind a mega menu becomes unreachable from the nav, * and the two dropdown triggers render 14px tall. * * THE BAND IS 1050px, NOT 980px, and that is measured rather than read. The * brief names assets/header-universal-v2.css:125-134, whose @media is * max-width:980px. A SECOND copy of the same treatment lives at * assets/v093.css:228 under @media(max-width:1050px), it loads on all 52 pages, * and its `.mega{display:none!important}` is what actually governs. Hovering a * nav group at 1000px and at 1024px opens nothing; at 1051px it opens. So an * iPad in landscape has no mega menus today, and a drawer that handed over at * 981px would have left a 70px-wide band with no way to reach them at all. * That near-duplicate pair is exactly what Set B's 1050/1051 sweep exists for. * * Rule 1: the bundle file is never touched. This stylesheet is layered on at * build time (stage 3 copies it, stage 5 injects the last in ), so * it re-applies cleanly on top of whatever the next zip ships. * * The drawer is scoped to `max-width:1050px` — the exact band the bundle hides * the mega menus in — and desktop SIZING is deliberately untouched. One rule at * the end of this file applies above the band instead, and it is here rather * than in responsive-fixes.css because it is the other half of the same * question: can the navigation be reached. See R-52 below. * * The drawer markup is built at runtime by mobile-nav.js from the nav that is * already in the page, so a new destination in a later zip appears here without * anyone remembering to update a second copy of the menu. */ /* ---------------------------------------------------------------- the toggle */ .na-mnav-toggle{ display:none; align-items:center; gap:8px; /* 44px is the floor for a thumb target, not a rounded-up 40. */ min-height:44px; min-width:44px; margin-left:12px; padding:0 12px; border:1px solid rgba(24,58,47,.28); border-radius:6px; background:transparent; color:#183a2f; font-family:inherit; font-size:12px; font-weight:700; line-height:1; letter-spacing:.02em; cursor:pointer; } .na-mnav-toggle:focus-visible{outline:2px solid #183a2f;outline-offset:2px} .na-mnav-bars{position:relative;display:block;width:17px;height:11px} .na-mnav-bars::before, .na-mnav-bars::after, .na-mnav-bars span{ content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;border-radius:2px; } .na-mnav-bars::before{top:0} .na-mnav-bars span{top:5px} .na-mnav-bars::after{bottom:0} /* ----------------------------------------------------------------- the panel */ /* Set on while the drawer is open, so the page behind it does not scroll under the panel. Mirrors what the bundle's own modal does with .doc-gate-open-v1, for the same reason. */ .na-mnav-open{overflow:hidden} .na-mnav{position:fixed;inset:0;z-index:9990} .na-mnav[hidden]{display:none} .na-mnav-backdrop{position:absolute;inset:0;background:rgba(12,29,24,.62);backdrop-filter:blur(5px)} .na-mnav-panel{ position:absolute;top:0;right:0;bottom:0; display:flex;flex-direction:column; width:min(370px,88vw); /* Short landscape viewports (844x390) are the case this has to survive: the panel never grows past the screen, its body scrolls, and the quote CTA is pinned to the bottom of the panel rather than to the end of the list. */ max-height:100%; background:#fbfaf6; color:#0b100d; box-shadow:-18px 0 60px rgba(5,17,13,.34); overflow:hidden; } .na-mnav-head{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:12px 14px 12px 20px; border-bottom:1px solid #d8dcd5; } .na-mnav-title{ font:10px ui-monospace,SFMono-Regular,Menlo,monospace; text-transform:uppercase;letter-spacing:.11em;color:#66756b; } .na-mnav-close{ display:grid;place-items:center; width:44px;height:44px; padding:0;border:1px solid #aab2aa;border-radius:50%; background:transparent;color:#183a2f; font-family:inherit;font-size:20px;font-weight:400;line-height:1; cursor:pointer; } .na-mnav-close:focus-visible{outline:2px solid #183a2f;outline-offset:2px} .na-mnav-body{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 0 10px} .na-mnav-section{border-bottom:1px solid #e4e6e0} .na-mnav-section:last-child{border-bottom:0} .na-mnav-body a{ display:flex;align-items:center; min-height:44px; padding:11px 20px; color:#1b2a23; font-size:15px;font-weight:600;line-height:1.25;letter-spacing:-.01em; text-decoration:none; } .na-mnav-body a:focus-visible{outline:2px solid #183a2f;outline-offset:-2px} .na-mnav-top{font-size:16px!important;font-weight:700!important;color:#0f2821!important} .na-mnav-sub{ padding-left:32px!important; font-size:14px!important;font-weight:500!important;color:#465248!important; } .na-mnav-sub::before{ content:"";flex:0 0 auto;width:6px;height:1px;margin-right:10px;background:#9fb0a5; } .na-mnav-cta{ display:flex;align-items:center;justify-content:center; min-height:48px;margin:0; padding:12px 16px; border-top:1px solid #d8dcd5; background:#183a2f;color:#fff; font-size:14px;font-weight:700;line-height:1.2; text-decoration:none; } .na-mnav-cta:focus-visible{outline:2px solid #0f2821;outline-offset:-4px} /* ------------------------------------------------- the band the bundle breaks */ @media(max-width:1050px){ /* The scroll strip goes; the drawer replaces it. Leaving both would keep the 14px dropdown triggers on the page and give two competing navigations. */ .site-nav .nav-main{display:none!important} .na-mnav-toggle{display:inline-flex} /* With the strip gone the header is a single row again, so the padding the bundle zeroed for the second row has to come back. */ .site-nav{padding-bottom:10px!important;row-gap:0!important;flex-wrap:nowrap!important} /* Tap targets in the header itself. The logo keeps its drawn size; only the hit area grows. */ .site-nav .brand{display:flex;align-items:center;min-height:44px} .site-nav .nav-cta{ display:inline-flex!important;align-items:center!important; min-height:44px!important;margin-left:auto!important; } } @media(max-width:520px){ /* At 320px the CTA label and the toggle label compete for the same row. The toggle keeps its icon and its 44px box; the word goes. */ .na-mnav-toggle-text{display:none} .na-mnav-toggle{margin-left:8px;padding:0 11px} .site-nav .nav-cta{font-size:11px!important;padding:8px 10px!important} } /* Above the band the drawer must not exist at all — no stray toggle, no panel left open by a resize. mobile-nav.js closes it; this is the belt to that brace, and it is what the 1051px assertion in verify-responsive.mjs checks. */ @media(min-width:1051px){ .na-mnav-toggle{display:none!important} .na-mnav{display:none!important} } @media(prefers-reduced-motion:reduce){ .na-mnav-panel{transition:none!important} } /* ------------------------------------------- R-52: the keyboard above 1050px * * assets/style.css:6 opens a mega menu with `.nav-group:hover .mega{display:grid}` * and nothing else. There is no `:focus-within`, so the menu answers a mouse * and not a keyboard. * * Below 1050px that does not matter, because the drawer above replaces the mega * menus entirely and is reachable by keyboard. Above 1050px there is no drawer, * and hover is the only way in. So a keyboard user has NO route to any * mega-menu sub-destination at any viewport width: the drawer covers them * below, the mouse covers them above, and nothing covers a keyboard above. * * That is not an improvement being smuggled into a mobile pass. The gate's own * assertion is that primary navigation is reachable at every size in both sets, * and above 1050px, for someone tabbing, it is not. One declaration, no visual * change to any state the mouse can produce, and the site is already shipping * the defect today, so this declines to carry it forward rather than changing * the approved design. tools/verify-responsive.mjs asserts it on every run, so * the next zip cannot quietly take it back. */ @media(min-width:1051px){ .site-nav .nav-group:focus-within .mega{display:grid} }