/* ============================================ COMMON HEADER STYLES — Premium Light Blue 2026 ============================================ */ /* `.nav-outer-wrap` carries Bootstrap's `.fixed-top`, which means position:fixed plus z-index:1030 — and that combination opens a stacking context. Every z-index inside the header (the drawer at 1200, the toggler at 1300) is resolved WITHIN that context, so none of them can rise above a sibling of . Stating the wrapper's own level explicitly is what actually keeps the header above the mobile backdrop. */ .nav-outer-wrap { z-index: 1200; } /* ============================================ HEADER SURFACE ============================================ The white bar and its hairline are gone. Both were painting an independent rectangle on top of the page, which is exactly what produced the visible seam above the hero. Nothing replaces them at rest: the header is transparent, so the page canvas (.mesh-gradient — fixed, full viewport) shows straight through and the navigation simply sits ON the hero background. One surface, no second background to keep in sync. */ .navbar-premium { position: relative; padding: 1.375rem 0; transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1000; background: transparent; } /* Once content scrolls underneath, the bar needs to separate from it — but with a veil drawn from the hero's own palette, not white. Tinted with #F4F7FB at 72%, it reads as the same surface densifying rather than a different panel arriving. */ .navbar-premium.scrolled { padding: 0.7rem 0; background: rgba(244, 247, 251, 0.72); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); /* Very soft and wide: enough to lift the bar, not enough to read as an edge. */ box-shadow: 0 10px 30px -22px rgba(6, 58, 120, 0.30); } /* A rule that fades out at both ends instead of a full-width border — the separation registers without drawing a line across the composition. */ .navbar-premium.scrolled::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(6, 58, 120, .12) 22%, rgba(6, 58, 120, .12) 78%, transparent 100%); pointer-events: none; } /* Brand */ .navbar-brand-custom { position: relative; display: flex; align-items: center; /* Tightened from 14px to 8px so the mark and the wordmark read as a single lockup. Gap only — mark size, wordmark, tagline and every other property in the lockup are unchanged. */ gap: 0.5rem; text-decoration: none; /* Breathing room to the right of the lockup, so the brand owns a defined zone rather than butting into the navigation. */ padding-right: 2rem; } /* Subtle separation between the brand and the navigation. A hairline, not a border — it appears only where there is width to justify it, and never on mobile where the drawer toggler sits alongside. */ @media (min-width: 1200px) { .navbar-brand-custom::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 30px; background: linear-gradient(180deg, transparent 0%, var(--color-border, #DCE5F0) 22%, var(--color-border, #DCE5F0) 78%, transparent 100%); } } @media (max-width: 1199.98px) { .navbar-brand-custom { padding-right: 1rem; } } /* ============================================ HEADER LOGO PRESENTATION ============================================ No container chrome. The previous versions wrapped the mark in a disc — first glass, then a luminous ring — and both were effects applied ON the logo rather than presentation AROUND it. A brand this considered does not need a badge behind it; Apple, Stripe and IBM all present their mark on bare ground. The artwork is left completely untouched: transparent PNG, square canvas, 1:1 ratio preserved by sizing height only. HEIGHT BUDGET — the header total is held at exactly 92px so that nothing below it moves: before 24px pad + 44px logo + 24px pad = 92px after 22px pad + 48px logo + 22px pad = 92px The mark gains 9% of presence and the page does not shift a pixel. */ .brand-logo-taamsi { position: relative; width: 48px; height: 48px; flex: none; display: flex; align-items: center; justify-content: center; /* Optical, not mathematical. A circular emblem set beside a text block reads fractionally high when centred by geometry — this half-pixel settles it against the cap height of "Taamsi". */ transform: translateY(0.5px); transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1); } /* Subtle and restrained: the mark lifts very slightly, nothing else. No glow, no shadow, no scale on the container. */ .navbar-brand-custom:hover .brand-logo-taamsi, .navbar-brand-custom:focus-visible .brand-logo-taamsi { transform: translateY(-1px); } @media (prefers-reduced-motion: reduce) { .brand-logo-taamsi, .navbar-brand-custom:hover .brand-logo-taamsi { transform: translateY(0.5px); transition: none; } } /* Shared base — left at the original 46px because the hero ecosystem core on index.html (.tt-core .tt-hexagon) uses this same class. Only the two badge contexts below override it. */ .brand-logo-img { height: 46px; width: auto; display: block; object-fit: contain; transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1); transform: scale(1); } /* A 46px mark inside a 50px circle clipped at the corners of the artwork. Inset to 34px so it sits in the circle's safe area with an even margin. */ /* Height only. Width stays auto so the original aspect ratio is preserved by the browser and can never be squashed by a fixed pair. */ .brand-logo-taamsi .brand-logo-img { height: 48px; width: auto; max-width: 100%; transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1); } .navbar-premium.scrolled .brand-logo-taamsi { width: 42px; height: 42px; } .navbar-premium.scrolled .brand-logo-taamsi .brand-logo-img { height: 42px; } /* The badge now scales as a single object on hover, so the mark no longer scales independently — two nested scales read as a wobble. */ .brand-text { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-weight: 800; font-size: 1.15rem; color: var(--color-text, #172033); line-height: 1.2; letter-spacing: -0.2px; } .brand-tagline { font-size: 0.68rem; color: var(--color-text-muted, #5B6B82); font-weight: 600; letter-spacing: 0.6px; } /* Nav Links */ .nav-link-custom { font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif); font-weight: 600; font-size: 0.92rem; color: var(--color-text, #172033) !important; padding: 0.6rem 1.1rem !important; border-radius: 10px; transition: all 0.3s ease; position: relative; margin: 0 0.15rem; } .nav-link-custom::after { content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: #A71501; transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 2px; } /* Hover is the accent, active stays navy — so the current page and the pointer target never read as the same state. */ .nav-link-custom:hover { color: #A71501 !important; background: rgba(167, 21, 1, 0.05); } .nav-link-custom:hover::after { width: 55%; } .nav-link-custom.active { color: #0D4A96 !important; } .nav-link-custom.active::after { width: 55%; background: #063A78; } /* ============================================ DIVISIONS DROPDOWN — Compact Premium (2026) Apple / Stripe / Linear / Vercel inspired ============================================ */ .mega-menu-wrapper { position: relative; } .mega-menu { position: absolute; left: 50%; top: 100%; width: 280px; margin-top: 14px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 18px; box-shadow: 0 20px 60px rgba(6, 58, 120, 0.15); padding: 12px; opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(-10px) scale(0.97); transform-origin: top center; transition: opacity 250ms ease-out, transform 250ms ease-out, visibility 250ms; z-index: 1100; } /* Wide grid variant: 2-column division list + live image preview panel */ .mega-menu.mega-menu-grid { width: 700px; max-width: calc(100vw - 40px); padding: 20px; display: flex; gap: 20px; align-items: stretch; } .mega-menu-columns { display: flex; gap: 6px; flex: 1 1 auto; min-width: 0; } .mega-menu-col { display: flex; flex-direction: column; gap: 4px; flex: 1 1 50%; min-width: 0; } .mega-menu-preview { width: 230px; flex-shrink: 0; background: linear-gradient(160deg, var(--color-light-blue, #F4F7FB), rgba(6, 58, 120, 0.08)); border: 1px solid rgba(6, 58, 120, 0.12); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; } .mega-menu-preview-img { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; background-size: cover; background-position: center; background-color: rgba(6, 58, 120, 0.12); display: flex; align-items: center; justify-content: center; color: var(--color-primary, #063A78); font-size: 2.2rem; transition: opacity 0.25s ease; margin-bottom: 14px; overflow: hidden; } /* ------------------------------------------------------------------ DEFAULT PREVIEW ARTWORK Shown when no division is hovered, while a division photo is still downloading, and permanently if that photo fails. The panel used to be an empty tinted box in all three of those states. Drawn rather than photographed: it restates the ecosystem idea (seven satellites, one shared core) at any size, costs no network request, and cannot 404. ------------------------------------------------------------------ */ .mega-preview-art { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 1; transition: opacity 0.3s ease; } /* Once a real division photo is behind the panel, fade the drawing out. */ .mega-menu-preview-img.has-image .mega-preview-art { opacity: 0; } .mega-preview-art .mp-rings circle { fill: none; stroke: rgba(6, 58, 120, 0.22); stroke-width: 1; stroke-dasharray: 3 5; } .mega-preview-art .mp-links line { stroke: rgba(6, 58, 120, 0.3); stroke-width: 1; } .mega-preview-art .mp-nodes circle { fill: #FFFFFF; stroke: rgba(6, 58, 120, 0.28); stroke-width: 1; } .mega-preview-art .mp-nodes .dot { fill: var(--color-primary, #063A78); stroke: none; } .mega-preview-art .mp-core { filter: drop-shadow(0 6px 14px rgba(6, 58, 120, 0.35)); } /* Satellites breathe in sequence, one full cycle spread across all seven, so the graphic reads as a live system rather than a static diagram. */ @media (prefers-reduced-motion: no-preference) { .mega-preview-art .mp-nodes g { transform-box: fill-box; transform-origin: center; animation: mpNodePulse 4.2s ease-in-out infinite; animation-delay: calc(var(--i) * 0.24s); } @keyframes mpNodePulse { 0%, 100% { opacity: 0.75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } } } .mega-menu-preview-text h4 { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-weight: 800; font-size: 1.02rem; color: #172033; margin: 0 0 4px; transition: opacity 0.2s ease; } .mega-menu-preview-text p { font-size: 0.82rem; color: var(--color-text-muted, #5B6B82); line-height: 1.5; margin: 0; transition: opacity 0.2s ease; } /* Tablet-landscape / small-desktop windows (still above the 992px mobile breakpoint, so they keep the hover dropdown, but 700px is too wide) — drop the preview panel and keep just the compact 2-column list. */ @media (min-width: 992px) and (max-width: 1240px) { .mega-menu.mega-menu-grid { width: 460px; } .mega-menu-preview { display: none; } } /* Small arrow indicator at top, aligned with trigger */ .mega-menu::before { content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 12px; height: 12px; background: rgba(255, 255, 255, 0.95); border-left: 1px solid rgba(255, 255, 255, 0.6); border-top: 1px solid rgba(255, 255, 255, 0.6); border-radius: 3px 0 0 0; } /* MENU-STICK FIX. This was `:focus-within`, which is true for MOUSE focus as well as keyboard. After clicking "Divisions" the toggle keeps DOM focus, so the rule stayed true and pinned the menu open over the hero — and site.js removing the .open class could not override it, because a CSS pseudo-class is not something JS can switch off. `:focus-visible` is the correct primitive: the browser applies it for keyboard navigation but NOT for a plain mouse click. Keyboard access is fully preserved — tabbing in still opens the menu — while clicking no longer wedges it open. The .open class (hover, click-toggle, outside-click and Escape, all handled in site.js) keeps working exactly as before. :has() lets the wrapper react to a focus-visible descendant. Browsers without :has() simply fall back to the .open class, which already covers every interaction path. */ .mega-menu-wrapper.open .mega-menu, .mega-menu-wrapper:has(:focus-visible) .mega-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0) scale(1); } /* :hover must be gated behind a hover-capable pointer. On a touch screen a tap leaves a sticky :hover on the wrapper, and because mouseleave never fires the dropdown stays open until something else is tapped. This bit the iPad and Android-tablet range in particular, where the width is above the mobile breakpoint but the input is touch. */ @media (hover: hover) and (pointer: fine) { .mega-menu-wrapper:hover .mega-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0) scale(1); } } .mega-menu-list { display: flex; flex-direction: column; gap: 5px; } .mega-menu-item { display: flex; align-items: center; gap: 0.7rem; min-height: 50px; padding: 7px 10px; border-radius: 12px; text-decoration: none; transition: background 0.3s ease, box-shadow 0.3s ease; box-shadow: inset 0 0 0 0 var(--color-primary, #063A78); cursor: pointer; } .mega-menu-item:hover, .mega-menu-item:focus-visible { background: var(--color-light-blue, #F4F7FB); box-shadow: inset 4px 0 0 0 var(--color-primary, #063A78); outline: none; } .mega-menu-item:hover .mega-menu-title, .mega-menu-item:focus-visible .mega-menu-title, .mega-menu-item:hover .mega-menu-subtitle, .mega-menu-item:focus-visible .mega-menu-subtitle { transform: translateX(4px); } .mega-menu-icon { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #0D4A96, #2C6FC4); display: flex; align-items: center; justify-content: center; color: #FFFFFF; font-size: 1.05rem; flex-shrink: 0; transition: transform 0.3s ease; } .mega-menu-item:hover .mega-menu-icon, .mega-menu-item:focus-visible .mega-menu-icon { transform: scale(1.1); } .mega-menu-text { display: flex; flex-direction: column; min-width: 0; } .mega-menu-title { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-weight: 600; font-size: 15px; color: #172033; line-height: 1.25; transition: transform 0.3s ease; } .mega-menu-subtitle { font-size: 12px; color: var(--color-text-muted, #5B6B82); font-weight: 500; margin-top: 1px; transition: transform 0.3s ease; } /* Category group labels ("CORE DIVISIONS", etc.) only exist for the mobile accordion's grouped layout — the desktop 2-column + preview panel has no room/need for them, so they're hidden by default here and switched on inside the mobile media query below. */ .mega-group-label { display: none; } .nav-link-custom.dropdown-toggle::after { display: none; } .mega-caret { font-size: 0.7rem; margin-left: 0.3rem; transition: transform 0.3s ease; display: inline-block; } .mega-menu-wrapper.open .mega-caret { transform: rotate(180deg); } @media (hover: hover) and (pointer: fine) { .mega-menu-wrapper:hover .mega-caret { transform: rotate(180deg); } } @media (prefers-reduced-motion: reduce) { .mega-menu { transition: opacity 0.01ms !important; transform: translateX(-50%) translateY(0) scale(1) !important; } } /* ============================================ CTA — Magnetic Button ============================================ */ .nav-cta-group { margin-left: 1rem; } .nav-cta-group .btn-amber { height: 48px; padding: 0 1.5rem; font-size: 0.9rem; } /* ============================================ HEADER CTA — "Call Us" ============================================ Previously had its own hover: the phone icon lifted and scaled instead of sliding, since it leads the label rather than trailing it and a phone has nowhere to "advance" to the way an arrow does. Removed on request so Call Us now falls back to the shared .btn-amber/.btn-primary-premium rule (in base.css) and matches "Get a Quote" exactly — same lift, same gradient shift, same translateX(5px) icon slide. The one trade-off: a phone icon sliding rightward no longer has the arrow's "forward motion" logic behind it, but the two buttons now read as one consistent system rather than two different hover languages. */ /* ============================================ MOBILE TOGGLER ============================================ */ .navbar-toggler { padding: 0.5rem; border-radius: 10px; transition: all 0.3s ease; z-index: 1300; } .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(6, 58, 120, 0.25); } /* Animated hamburger: 3 real bars that morph into an X, rather than swapping between two static SVG icons. */ .hamburger-icon { width: 24px; height: 17px; position: relative; display: inline-flex; flex-direction: column; justify-content: space-between; pointer-events: none; } .hamburger-bar { display: block; width: 100%; height: 2.5px; border-radius: 2px; background: #172033; transform-origin: center; transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease 100ms; } .navbar-toggler[aria-expanded="true"] { z-index: 1300; position: relative; } .navbar-toggler[aria-expanded="true"] .hamburger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .navbar-toggler[aria-expanded="true"] .hamburger-bar:nth-child(2) { opacity: 0; transform: scaleX(0); } .navbar-toggler[aria-expanded="true"] .hamburger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ============================================ MOBILE MENU — Slide from Right ============================================ */ @media (max-width: 991.98px) { /* Bootstrap only hides the toggler at min-width:992px, and only forces the collapse open above that. Stating both sides explicitly here means the drawer and the toggler can never both be wrong at the same width. */ .navbar-toggler { display: flex !important; } /* DRAWER STARTS BELOW THE HEADER. Previously top:0 with height:100dvh — the panel spanned the whole viewport and slid UNDER the header, with 6.5rem of dead top padding faking the clearance. That meant the header appeared to sit on top of the menu rather than the menu opening beneath it, and the padding was a magic number with no relationship to the real header height. Now anchored to --header-h (the same token the body padding uses), so the drawer begins exactly where the header ends and its height is the remaining viewport. Top padding drops to a normal value because the clearance is now structural, not faked. */ .navbar-collapse { position: fixed; top: var(--header-h); right: -100%; width: min(360px, 88vw); height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h)); background: #FFFFFF; box-shadow: -20px 0 60px rgba(23, 32, 51, 0.18); border-left: 1px solid var(--border, #DCE5F0); border-top: 1px solid var(--border, #DCE5F0); padding: 1.5rem 1.75rem 2rem; display: block !important; /* Closed drawers were still in the tab order and still exposed to screen readers — the panel was merely parked off-screen at right:-100%. */ visibility: hidden; transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.4s; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; z-index: 1200; isolation: isolate; } .navbar-collapse.show { right: 0; visibility: visible; transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s; } /* Bootstrap's .navbar-expand-lg .navbar-nav{flex-direction:row} lives in a min-width query, but stating the column direction here protects the drawer from ever inheriting a horizontal row at a fractional boundary width. */ .navbar-nav { flex-direction: column !important; align-items: stretch; } /* Solid dim overlay only — no backdrop-filter here. Stacking a second blur layer under the (already opaque) panel is what causes mobile WebKit to bleed blur across the whole viewport. z-index is 1100, deliberately BELOW the header. `.nav-outer-wrap` is `.fixed-top`, so it has its own stacking context; the drawer's z-index:1200 and the toggler's z-index:1300 are scoped INSIDE that context and cannot lift them above a sibling of . At the old 1150 the overlay therefore painted on top of the whole header — dimming the menu it was supposed to sit behind, and swallowing taps on the close button. visibility is not used: opacity plus pointer-events does the same job without a second property to keep in sync. */ .mobile-menu-backdrop { position: fixed; /* Starts below the header too, so the header stays fully visible and un-dimmed while the drawer is open — matching the new drawer position. Previously inset:0 covered the whole viewport including behind the header. */ top: var(--header-h); right: 0; bottom: 0; left: 0; background: rgba(23, 32, 51, 0.5); opacity: 0; transition: opacity 0.35s ease; z-index: 1100; pointer-events: none; } .mobile-menu-backdrop.show { opacity: 1; pointer-events: auto; } .navbar-nav { margin-bottom: 1.5rem; } .navbar-nav .nav-item { opacity: 0; transform: translateX(24px); transition: opacity 0.4s ease, transform 0.4s ease; } .navbar-collapse.show .navbar-nav .nav-item { opacity: 1; transform: translateX(0); } .navbar-collapse.show .navbar-nav .nav-item:nth-child(1) { transition-delay: 0.08s; } .navbar-collapse.show .navbar-nav .nav-item:nth-child(2) { transition-delay: 0.14s; } .navbar-collapse.show .navbar-nav .nav-item:nth-child(3) { transition-delay: 0.2s; } .navbar-collapse.show .navbar-nav .nav-item:nth-child(4) { transition-delay: 0.26s; } .nav-link-custom { padding: 0.95rem 1rem !important; margin: 0; display: block; border-left: 3px solid transparent; border-bottom: 1px solid var(--color-border, #DCE5F0); border-radius: 0; } /* The centered underline (::after, width:55% of the link) is sized for the compact desktop pill nav. On mobile the link becomes a full-width block, so that same 55% turns into a long stray line under the text instead of a neat underline — disable it and use a left-border accent instead, which reads correctly at full list-item width. */ .nav-link-custom::after, .nav-link-custom:hover::after, .nav-link-custom.active::after { display: none; } .nav-link-custom:hover { border-left-color: #A71501; background: rgba(167, 21, 1, 0.04); } .nav-link-custom.active { border-left-color: #0D4A96; background: rgba(6, 58, 120, 0.06); } .nav-link-custom.dropdown-toggle { display: flex; align-items: center; justify-content: space-between; } /* Divisions collapses inline as an accordion on mobile — redesigned as a clean grouped list (category labels + flat icon tiles) rather than a dense 2-column grid, since there's no hover/preview affordance to lean on at touch sizes. */ .mega-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; background: #FFFFFF; width: 100%; margin-top: 0; padding: 0 4px; max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s ease, margin 0.4s ease; } /* The 2-column grid + image preview is a desktop hover pattern. In the mobile accordion there's no room (and no hover) for a side preview panel, so flatten everything into one ordered, grouped list instead. */ .mega-menu.mega-menu-grid { display: block; max-width: 100%; } .mega-menu-columns { display: flex; flex-direction: column; gap: 0; } /* Removing the column boxes from layout (while keeping the DOM structure intact for desktop) lets flexbox `order` resequence every division — regardless of which of the two desktop columns it originally lived in — into the grouped mobile sequence below. */ .mega-menu-col { display: contents; } .mega-menu-item { order: var(--mobile-order, 0); padding: 10px 10px; border-radius: 12px; } .mega-menu-item .mega-menu-icon { background: rgba(6, 58, 120, 0.1) !important; color: var(--color-primary, #063A78); box-shadow: none; } .mega-menu-item .mega-menu-icon i { color: var(--color-primary, #063A78); } .mega-group-label { order: var(--mobile-order, 0); display: block; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 0.7rem; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--color-text-muted, #5B6B82); padding: 16px 12px 8px; } .mega-group-label:first-child { padding-top: 10px; } .mega-menu-preview { display: none; } .mega-menu::before { display: none; } .mega-menu-wrapper.open .mega-menu { max-height: 1200px; padding: 6px 4px; margin-top: 0.5rem; border-top: 1px solid var(--color-border, #DCE5F0); border-bottom: 1px solid var(--color-border, #DCE5F0); } /* The desktop rules `.mega-menu-wrapper.open .mega-menu` and `.mega-menu-wrapper:focus-within .mega-menu` live outside any media query and carry specificity (0,2,1), which beats the plain `.mega-menu` (0,1,0) reset above. So the moment Divisions was opened — or merely focused — on mobile, the desktop `translateX(-50%)` came back and shifted the panel half its own width to the left, straight out of the drawer. Restate the reset at matching specificity. */ .mega-menu-wrapper.open .mega-menu, .mega-menu-wrapper:has(:focus-visible) .mega-menu, .mega-menu-wrapper:hover .mega-menu { position: static; left: auto; top: auto; width: 100%; max-width: 100%; transform: none; opacity: 1; visibility: visible; box-shadow: none; border-radius: 0; } /* Closed accordion must contribute no height, or the collapsed panel keeps pushing Contact and the CTA down the drawer. */ .mega-menu-wrapper:not(.open) .mega-menu { max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; border-top: 0; border-bottom: 0; } .mega-caret { transform: rotate(0deg); } .mega-menu-wrapper.open .mega-caret { transform: rotate(180deg); } .nav-cta-group { margin-left: 0; margin-top: 1.25rem; } .nav-cta-group .btn-amber { width: 100%; justify-content: center; } } @media (max-width: 575.98px) { .brand-logo-taamsi { width: 36px; height: 36px; } .brand-logo-taamsi .brand-logo-img { height: 36px; } .brand-tagline { display: none; } .brand-text { font-size: 1.05rem; } .brand-logo { width: 40px; height: 40px; font-size: 1.1rem; } /* 19px x2 + 40px logo = the same 78px total the body offset expects */ .navbar-premium { padding: 1.1875rem 0; } .brand-logo-taamsi { width: 40px; height: 40px; } .brand-logo-taamsi .brand-logo-img { height: 40px; } .navbar-brand-custom { gap: 0.375rem; } .navbar-collapse { width: 100vw; border-left: none; } } /* ------------------------------------------------------------------ DESKTOP RESET If the drawer was open when the viewport crossed the breakpoint — a rotation, a resized window, a browser-zoom change — the .show class can still be sitting on the collapse and the backdrop. Above 992px none of the mobile positioning should survive, whatever classes remain. ------------------------------------------------------------------ */ @media (min-width: 992px) { .navbar-toggler { display: none !important; } .navbar-collapse, .navbar-collapse.show { position: static; right: auto; width: auto; height: auto; background: none; box-shadow: none; border-left: 0; padding: 0; visibility: visible; overflow: visible; z-index: auto; } .navbar-nav .nav-item { opacity: 1; transform: none; } .mobile-menu-backdrop, .mobile-menu-backdrop.show { display: none !important; opacity: 0; pointer-events: none; } } /* Page-specific body padding to prevent content hiding under fixed header */ body { padding-top: 0; } /* Header height as a single token. The mobile drawer positions itself from this same value, so the two can never drift apart if the header is ever resized. */ :root { --header-h: 92px; } @media (max-width: 991.98px) { :root { --header-h: 78px; } } body.has-header { padding-top: var(--header-h); } @media (prefers-reduced-motion: reduce) { .navbar-premium, .brand-logo, .nav-link-custom, .mega-menu, .navbar-collapse, .navbar-nav .nav-item { transition-duration: 0.01ms !important; } }