header { position: sticky; top: 0; z-index: 1000; /* contain off-screen mobile-nav items so they don't add a horizontal scrollbar during fly in animation of mobile nav*/ overflow-x: clip; } /* The mobile nav is position:fixed (escapes the header's containing block), so the header's overflow-x:clip alone doesn't catch off-screen items in Firefox. Clip at the body level too. */ body { overflow-x: clip; } /* Lock background scrolling while the mobile nav is open. Lock html too: with body { overflow-x: clip } above, the document scroll container moves to , so locking only body isn't enough. */ html.mobile-nav-open, body.mobile-nav-open { overflow: hidden !important; } /* --- Top Header Row --- */ .row-nav { background-color: var(--gray-bg); border-bottom: 1px solid var(--text-color); padding: var(--pill-gap) 0; } .desktop-nav { display: flex; align-items: center; gap: var(--medium-gap); justify-content: space-between; } .desktop-nav > a.header-login { display: flex; align-items: center; gap: var(--pill-gap); } .desktop-nav > a.header-login > img { width: var(--medium-gap); height: var(--medium-gap); } .desktop-nav-left { display: flex; align-items: center; gap: var(--medium-gap); } .desktop-nav-left > a { height: auto !important; } .header-brand-link { display: flex; align-items: center; gap: var(--medium-gap); } .header-logo { width: 6.9rem; height: 6.9rem; } .nav-trigger { /* remove default button and bootsrtap styles */ appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 0; margin: 0; height: auto !important; font: inherit; color: inherit; letter-spacing: inherit; text-align: inherit; line-height: inherit; } /* --- Mega Header Row --- */ .mega-nav { position: absolute; top: 100%; /* sit directly below the first row */ left: 0; right: 0; z-index: 100; /* above main content */ background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); /*border-bottom: 1px solid var(--text-color);*/ display: grid; height: 0; /* height is calculated via JS */ overflow: hidden; transition: height 300ms ease-in-out; } .mega-nav.is-open { /* is_open hieght is calculated in JS */ border-bottom: 1px solid var(--text-color); } .mega-panel { grid-column: 1; grid-row: 1; margin-top: var(--medium-gap); margin-bottom: var(--large-gap); margin-left: var(--panel-x, 0); /* computed via JS */ margin-right: auto; display: flex; flex-direction: column; justify-content: start; align-items: start; gap: var(--pill-gap); background-color: var(--gray-bg); border: 1px solid var(--text-color); padding: var(--medium-gap); width: max-content; height: max-content; /* All panels render but hidden ones are invisible and not clickable */ opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(calc(-1 * var(--medium-gap))); transition: opacity 200ms ease-out, transform 200ms ease-out; } .mega-panel.is-active { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .mega-panel > a{ height: auto; } .mega-panel > a:first-child { font-weight: 700; } @media (prefers-reduced-motion: reduce) { .mega-nav, .mega-panel { transition: none; } } @media (max-width: 1400px) { .row-nav { padding: var(--pill-gap); } } /* --- Mobile Nav --- */ .nav-hamburger-btn { /* reset button styles */ /*appearance: none; -webkit-appearance: none; background: none;*/ border: 0; margin: 0; font: inherit; color: inherit; line-height: 0; display: none; /* shown only at the mobile breakpoint */ align-items: center; justify-content: center; padding: var(--pill-gap); cursor: pointer; z-index: 1001; } .header-icon { width: calc(var(--pill-h) / 2.3); height: calc(var(--pill-h) / 2.3); } .mobile-nav-marketing-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.35); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; z-index: 999; } .mobile-nav-marketing-backdrop.is-open { opacity: 1; pointer-events: auto; } .mobile-nav-marketing { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000; padding: calc(6.9rem + var(--pill-gap) * 3) var(--pill-gap) var(--medium-gap); pointer-events: none; /* Scroll container for tall menus; clip the off-screen slide-in items. */ overflow-y: auto; overflow-x: clip; /* Don't bleed scroll to the page when the inner scroll hits an edge. */ overscroll-behavior: contain; } /* Open state needs pointer-events on the nav itself so it can scroll and so children receive clicks. JS handles closing when the click lands on the empty wrapper regions instead of an interactive item. */ .mobile-nav-marketing.is-open { pointer-events: auto; } .mobile-nav-items { display: flex; flex-direction: column; align-items: end; gap: var(--pill-gap); } .mobile-nav-item { /* reset button styles + share with anchor variant */ appearance: none; -webkit-appearance: none; background-color: var(--gray-bg); color: inherit; font: inherit; text-align: right; display: flex; align-items: center; justify-content: end; gap: var(--pill-gap); padding: var(--pill-gap) var(--medium-gap); border-radius: calc(var(--pill-h) / 2); min-height: var(--pill-h); cursor: pointer; /* slide-in from right */ opacity: 0; transform: translateX(120%); filter: blur(6px); transition: opacity 0.25s ease, transform 0.25s ease, filter 0.25s ease; transition-delay: calc(var(--i, 0) * 0.06s); will-change: transform, opacity, filter; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .mobile-nav-marketing.is-open .mobile-nav-item { opacity: 1; transform: translateX(0); filter: blur(0); } .mobile-nav-chevron { width: calc(var(--pill-h) / 3); height: calc(var(--pill-h) / 3); transform: rotate(90deg); transition: transform 0.25s ease; } .mobile-nav-accordion-btn[aria-expanded="true"] .mobile-nav-chevron { transform: rotate(-90deg); } .mobile-nav-submenu { /* slide-in from right (same stagger as items) */ opacity: 0; transform: translateX(120%); filter: blur(6px); transition: opacity 0.25s ease, transform 0.25s ease, filter 0.25s ease, max-height 0.25s ease, margin-top 0.25s ease; transition-delay: calc(var(--i, 0) * 0.06s); will-change: transform, opacity, filter, max-height; /* accordion collapse */ max-height: 0; /* set via JS */ overflow: hidden; width: max-content; max-width: 100%; /* When collapsed the submenu is still a flex item between the button and the next item, so the parent's gap is applied on both sides — that reads as a double gap. Pull the submenu up by one gap to cancel it. */ margin-top: calc(-1 * var(--pill-gap)); display: flex; flex-direction: column; align-items: end; gap: var(--pill-gap); } .mobile-nav-marketing.is-open .mobile-nav-submenu { opacity: 1; transform: translateX(0); filter: blur(0); } .mobile-nav-submenu.is-expanded { padding: var(--pill-gap) 0; margin-top: 0; } .mobile-nav-submenu > a { background-color: var(--gray-bg); border-radius: calc(var(--pill-h) / 2); padding: var(--pill-gap) var(--medium-gap); margin-right: var(--medium-gap); min-height: var(--pill-h); display: flex; align-items: center; justify-content: end; text-align: right; } .mobile-nav-submenu > a:first-child { font-weight: 700; } .mobile-nav-login { position: absolute; left: var(--pill-gap); /* align with the top of the first right-side item */ top: calc(6.9rem + var(--pill-gap) * 3); display: flex; align-items: center; gap: var(--pill-gap); /* slide-in from left, lands after the right stack */ opacity: 0; transform: translateX(-120%); filter: blur(6px); transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease; transition-delay: 0.3s; will-change: transform, opacity, filter; } .mobile-nav-login > img { width: var(--medium-gap); height: var(--medium-gap); } .mobile-nav-marketing.is-open .mobile-nav-login { opacity: 1; transform: translateX(0); filter: blur(0); } @media (max-width: 850px) { /* hide nav items but keep the brand/logo visible */ .desktop-nav-left > .nav-trigger, .desktop-nav-left > a:not(.header-brand-link), .desktop-nav > a.header-login, .mega-nav { display: none; } .desktop-nav { justify-content: space-between; } .nav-hamburger-btn { display: flex; } } @media (prefers-reduced-motion: reduce) { .mobile-nav-marketing-backdrop, .mobile-nav-item, .mobile-nav-submenu, .mobile-nav-login, .mobile-nav-chevron { transition: none !important; } .mobile-nav-item, .mobile-nav-submenu, .mobile-nav-login { transform: none !important; filter: none !important; } }