/* Mobile navigation — hamburger + full-screen menu (nav-mobile.js may move #primary-nav to on small screens) */ .nav-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; margin: 0; border: none; border-radius: 8px; background: transparent; color: rgba(255, 255, 255, 0.88); cursor: pointer; -webkit-tap-highlight-color: transparent; } .nav-toggle:focus-visible { outline: 2px solid #f5a623; outline-offset: 2px; } .nav-toggle .nav-icon-close { display: none; } .site-nav.nav-open .nav-toggle .nav-icon-menu { display: none; } .site-nav.nav-open .nav-toggle .nav-icon-close { display: block; } @media (max-width: 768px) { /* * backdrop-filter on

makes fixed descendants use the nav as their containing block * in Chrome — blur disabled on small screens as a safety net. */ nav.site-nav { overflow: visible; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .nav-toggle { display: inline-flex; flex-shrink: 0; position: relative; z-index: 320; } nav.site-nav.nav-open { z-index: 500; } .site-nav .nav-logo { position: relative; z-index: 320; } .site-nav .nav-inner .nav-logo { min-width: 0; flex: 1 1 auto; } /* #primary-nav may be reparented to — selectors must not require .site-nav ancestor */ #primary-nav.nav-links { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 300; margin: 0; box-sizing: border-box; width: 100%; min-height: 0; padding-top: calc(3.75rem + env(safe-area-inset-top, 0px)); padding-left: 1.25rem; padding-right: 1.25rem; padding-bottom: max(0.75rem, calc(env(safe-area-inset-bottom, 0px) + 0.5rem)); display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; list-style: none; background: rgba(15, 31, 61, 0.98); overflow-x: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s ease, visibility 0.2s ease; /* Promote compositing — helps WebKit (incl. Chrome on iPhone) paint the overlay */ transform: translateZ(0); -webkit-backface-visibility: hidden; } body.nav-menu-open #primary-nav.nav-links { opacity: 1 !important; visibility: visible !important; pointer-events: auto; touch-action: pan-y; transition: none; } #primary-nav.nav-links li { display: list-item !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } #primary-nav.nav-links li:last-child { border-bottom: none; padding-top: 0.35rem; } #primary-nav.nav-links a { display: block; padding: 0.72rem 0; font-size: 0.98rem; font-weight: 500; color: rgba(255, 255, 255, 0.78); text-decoration: none; } #primary-nav.nav-links a:hover, #primary-nav.nav-links a:active { color: #fff; } #primary-nav.nav-links a.nav-cta, #primary-nav.nav-links a.cta { display: inline-flex !important; align-items: center; justify-content: center; align-self: stretch; margin-top: 0.35rem; padding: 0.7rem 1.2rem !important; border-radius: 6px; background: #f5a623 !important; color: #0f1f3d !important; font-weight: 600 !important; } /* examples.html: div#primary-nav with direct anchors */ #primary-nav.nav-links > a:not(.cta) { border-bottom: 1px solid rgba(255, 255, 255, 0.08); } #primary-nav.nav-links > a.cta { border-bottom: none; margin-top: 0.35rem; } } body.nav-menu-open { overflow: hidden; }