.header-section { display: block; position: sticky; top: calc(-1 * var(--announcement-bar-height, 34px)); z-index: 1000; transition: background-color 0.3s ease-in-out; } .header-section::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; transition: background-color 0.3s ease-in-out; } .header-section.is-scrolled::before { background-color: var(--white); } .header-wrapper { position: relative; z-index: 1; border-bottom: 1px solid transparent; transition: border-bottom 0.3s ease-in-out; } .header-section.is-scrolled .header-wrapper { border-bottom: 1px solid var(--light-silver); } .announcement-bar { display: flex; position: relative; overflow: hidden; background: linear-gradient( 90deg, #f96c36 -6.32%, #fcf5f2 33.61%, #fcf5f2 73.55%, #f96c36 107.78% ); width: 100%; height: 34px; @media (max-width: 767px) { height: unset; } } .announcement-bar__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .announcement-bar__bg img { width: 100%; height: 100%; object-fit: cover; display: block; mix-blend-mode: overlay; } .announcement-bar__content { position: relative; z-index: 2; padding: 4px 20px; margin: 0 auto; text-align: left; color: var(--off-black); font: var(--body-b5); } .announcement-brand, .announcement-plus, .read-more-link { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; white-space: nowrap; } .announcement-plus { margin: 0 8px; } .read-more-link { margin-left: 8px; } .announcement-brand__icon, .announcement-plus { display: inline-flex; align-items: center; line-height: 0; } .announcement-brand__icon svg, .announcement-plus svg { display: block; width: auto; } .announcement-text { color: var(--off-black); font: var(--body-b5); vertical-align: middle; } .announcement-brand__name { color: var(--off-black); font: var(--body-b5); } .read-more-link { color: var(--off-black); font: var(--body-b5); text-decoration: none; } .read-more-link svg { margin-top: 3px; transition: transform 0.3s ease-in-out; } .read-more-link:hover svg { transform: rotate(-45deg); } .read-more-link:hover, .read-more-link:focus { color: var(--off-black); } .main-header { max-width: 1440px; margin: 0 auto; padding: 0 72px; @media (max-width: 1179px) { padding: 0 20px; } } .header-content { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 0; } .header-content a { display: flex; } .nav-menu-wrapper { position: relative; @media (max-width: 1179px) { display: none; } } /* Logo Swap & Smooth Transition */ .logo-link { position: relative; display: flex; align-items: center; } .nav-logo { width: 209px; height: 26px; transition: opacity 0.3s ease-in-out; } .nav-logo--dark { position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none; } .nav-logo--light { opacity: 1; } .header-section:is(.is-scrolled, .is-light) .nav-logo--light { opacity: 0; pointer-events: none; } .header-section:is(.is-scrolled, .is-light) .nav-logo--dark { opacity: 1; pointer-events: auto; } /* Nav menu pill — the fill and border live here, but the blur CANNOT: the header's sticky + z-index:1000 stacking context leaves a backdrop-filter with no page content to sample. nav-blur-portal.js appends .nav-menu-blur to and tracks this element's rect. Keep this rule free of anything that forms a stacking context (z-index, isolation, opacity, transform) — that would also trap the dropdown's own backdrop-filter. */ .nav-menu-section { display: flex; align-items: center; padding: 5px; border-radius: var(--radius-8); border: 1px solid rgba(255, 255, 255, 0.4); /* padding-box keeps the fill off the border, matching the old ::before, which was inset:0 against the padding box. */ background: rgba(255, 255, 255, 0.1); background-clip: padding-box; position: relative; isolation: auto; } /* Portaled to by nav-blur-portal.js and positioned over the pill. z-index sits below the header so the nav links paint on top of it. */ .nav-menu-blur { position: fixed; z-index: 999; border-radius: var(--radius-8); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); pointer-events: none; } .nav-menu-list { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; } .nav-item { position: relative; } .nav-link { display: flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 6px; color: var(--gray); font: var(--link); text-decoration: none; cursor: pointer; transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out; white-space: nowrap; } .header-section:is(.is-scrolled, .is-light) .nav-link { color: var(--dark); } .header-section:is(.is-scrolled, .is-light) .nav-link svg path { fill: var(--dark); transition: fill 0.3s ease-in-out; } .header-section:is(.is-scrolled, .is-light) .nav-link:hover, .header-section:is(.is-scrolled, .is-light) .nav-link:focus, .header-section:is(.is-scrolled, .is-light) .nav-item.has-dropdown:hover .nav-link, .header-section:is(.is-scrolled, .is-light) .nav-item.active .nav-link { color: var(--off-black); background: var(--pearl); } /* Header Button Morph (Secondary to Primary) */ .header-cta-btn { transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out !important; } .header-section:is(.is-scrolled, .is-light) .header-cta-btn { background-color: var(--burnt-orange) !important; color: var(--white) !important; } .header-section:is(.is-scrolled, .is-light) .header-cta-btn .btn-text { color: var(--white) !important; } .nav-link:hover, .nav-link:focus, .nav-item.has-dropdown:hover .nav-link, .nav-item.active .nav-link { color: var(--white); background: #ffffff29; } .nav-link svg { width: 20px; height: 20px; transition: transform 0.3s ease-in-out; display: inline-block; } .nav-link:hover svg, .nav-item.has-dropdown:hover .nav-link svg, .nav-item.active .nav-link svg { transform: rotate(180deg); } /* Dropdown Card Outer & Glassmorphism Styling (Restored) */ .nav-item.has-dropdown { position: relative; } /* Dropdown portal — JS moves these elements to at runtime so they escape the header's stacking context and can backdrop-blur page content */ /* IMPORTANT: never animate opacity on .nav-dropdown-outer. An ancestor with opacity < 1 becomes a "backdrop root", so the child's backdrop-filter has no page content left to sample and the blur pops in only when the fade reaches opacity: 1 — that is the jerk. The panel therefore stays fully opaque and the blur itself is what animates. */ .nav-dropdown-outer { position: fixed; /* set by JS portal via inline style, but fixed as base */ opacity: 1; visibility: hidden; pointer-events: none; z-index: 9999; transition: visibility 0s linear 0.3s; padding-top: 18px; } .nav-dropdown-outer.is-visible { visibility: visible; pointer-events: auto; transition: visibility 0s linear 0s; } .nav-dropdown { border-radius: var(--radius-8); padding: 6px; background-color: #ffffff00; -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px); border: 1px solid #ffffff00; transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, -webkit-backdrop-filter 0.3s ease-in-out, backdrop-filter 0.3s ease-in-out; } .nav-dropdown-outer.is-visible .nav-dropdown { background-color: #ffffff4d; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border-color: #ffffff1a; } /* Safe to fade: the inner card is a descendant of the blurred element, not an ancestor, so it cannot break the backdrop root */ .nav-dropdown-inner { background-color: var(--pearl); border-radius: var(--radius-4); padding: 18px 28px; opacity: 0; transition: opacity 0.25s ease-in-out; } .nav-dropdown-outer.is-visible .nav-dropdown-inner { opacity: 1; } .nav-dropdown-inner { max-height: calc(var(--dropdown-available-height, 100dvh) - 100px); overflow-y: auto; scrollbar-width: none; } .nav-dropdown-inner::-webkit-scrollbar { display: none; } /* Services panel only — the other dropdowns keep the tighter 18px 28px. */ .nav-dropdown--services .nav-dropdown-inner { padding: 32px; min-height: 320px; } /* Panel Widths — JS portal reads these via offsetWidth for centering */ .nav-dropdown--services { width: 1276px; @media (max-width: 1300px) { width: calc(100vw - 40px); } } .nav-dropdown--single { width: 100%; } /* Services Tabbed Mega Menu — desktop only A left rail of Define / Deliver / Drive tabs, and one panel per tab holding that stage's featured cards with the compact wedge list beside them. Below 1179px .nav-menu-wrapper is display:none and the responsive menu renders from the .mobile-* markup instead, so none of this reaches it. */ .services-menu { display: flex; align-items: flex-start; } .services-tablist { display: flex; flex-direction: column; gap: 4px; width: 167px; flex-shrink: 0; margin-right: 32px; @media (max-width: 1300px) { margin-right: 28px; width: 142px; } } .services-tab { display: block; width: 100%; padding: 10px 14px; border: none; border-radius: var(--radius-8); background-color: transparent !important; color: var(--graphite); font: var(--body-b4); text-align: left; cursor: pointer; box-shadow: none !important; transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; } .services-tab:hover, .services-tab:focus-visible { background-color: transparent !important; color: var(--graphite) !important; } /* Both blocks carry !important to clear Astra's own button styling, and an !important declaration beats a non-important one whatever the specificity — so the active state has to be !important too, or hovering the active tab would repaint its label with the --graphite above. */ .services-tab.is-active, .services-tab.is-active:hover, .services-tab.is-active:focus-visible { background-color: var(--white) !important; color: var(--burnt-orange) !important; } .services-panels { flex: 1; min-width: 0; border-left: 1px solid var(--stone); padding-left: 32px; @media (max-width: 1300px) { padding-left: 28px; } } /* Inactive panels also carry the `hidden` attribute, so the menu degrades to the first stage rather than to everything at once if the script never runs. */ .services-panel { display: none; gap: 40px; align-items: flex-start; @media (max-width: 1300px) { gap: 28px; } @media (max-width: 1280px) { gap: 20px; } } .services-panel.is-active { display: flex; } .services-cards { display: flex; gap: 40px; flex-shrink: 0; @media (max-width: 1300px) { gap: 28px; } @media (max-width: 1280px) { gap: 20px; } } /* Featured service card — image, then icon + title, then description. */ .services-card { display: block; max-width: 296px; width: 100%; text-decoration: none; } .services-card-media { display: block; margin-bottom: 20px; border-radius: var(--radius-4); overflow: hidden; } .services-card-media img { display: block; width: 100%; height: 150px; object-fit: cover; } .services-card-head { display: flex; align-items: center; gap: 12px; } .services-card-icon { display: flex; flex-shrink: 0; } .services-card-icon svg { display: block; width: 24px; height: 24px; } .services-card-title { font: var(--body-b2); color: var(--off-black); transition: color 0.3s ease-in-out; flex: 1; } .services-card-arrow { display: flex; color: var(--burnt-orange); opacity: 0; transition: opacity 0.3s ease-in-out; margin-top: 2px; } .services-card-arrow svg { display: block; width: 20px; height: 20px; } .services-card:hover .services-card-arrow { opacity: 1; } .services-card-description { display: block; margin-top: 6px; font: var(--body-b4); color: var(--graphite); } .services-item-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; flex: 1; min-width: 0; } /* Drop the first row's leading padding so the list starts level with the top of the card image instead of half a row below it. */ .services-item-list > li:first-child .services-item-link { padding-top: 0; } .services-item-link { display: flex; gap: 12px; color: var(--off-black); font: var(--body-b3); text-decoration: none; transition: color 0.3s ease-in-out; padding: 14px 0; width: max-content; } /* Leading icon — always visible. Scoped separately from the direct-child arrow below, which only appears on hover. */ .services-item-icon { display: flex; flex-shrink: 0; margin-top: 1px; } .services-item-icon svg { display: block; width: 24px; height: 24px; } .services-item-link > svg { min-width: 20px; height: 20px; color: var(--burnt-orange); opacity: 0; transition: opacity 0.3s ease-in-out; margin-top: 4px; } .services-item-link:hover > svg, .services-item-link.active > svg { opacity: 1; } .services-item-text { color: var(--off-black); font: var(--body-b3); flex: 1; } /* Single Column Dropdown Menu Items (Industries & Resources) */ .dropdown-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .dropdown-link { display: flex; align-items: center; gap: 12px; color: var(--off-black); font: var(--body-b3); text-decoration: none; transition: color 0.3s ease-in-out; white-space: nowrap; padding: 14px 0; width: max-content; } /* Leading menu icon — always visible, unlike the trailing hover arrow. The icon partials carry their own orange fill. */ .dropdown-link-icon { display: flex; flex-shrink: 0; } .dropdown-link-icon svg { display: block; width: 24px; height: 24px; } .dropdown-link-text { flex: 1; font: var(--body-b3); color: var(--off-black); } /* Direct child only, so this matches the trailing hover arrow and not the leading icon, which is nested inside .dropdown-link-icon. */ .dropdown-link > svg { width: 20px; height: 20px; color: var(--burnt-orange); opacity: 0; transition: opacity 0.3s ease-in-out; } .dropdown-link:hover > svg, .dropdown-link.active > svg { opacity: 1; transform: translateX(0); } @media (max-width: 1179px) { .header-content .header-cta-btn { display: none !important; } } .menu-toggle { display: none; border: none; outline: none; cursor: pointer; @media (max-width: 1179px) { display: flex; position: relative; border-radius: var(--radius-8); background-color: var(--white); width: 40px; height: 40px; align-items: center; justify-content: center; padding: 0; transition: background-color 0.3s ease-in-out; box-shadow: none; &:hover, &:focus { background-color: var(--white); } } @media (max-width: 767px) { width: 32px; height: 32px; svg { width: 20px; height: 20px; } } } /* Scroll state (responsive only) — mirrors the header CTA morph */ @media (max-width: 1179px) { .menu-toggle svg path { fill: var(--dark); transition: fill 0.3s ease-in-out; } .header-section:is(.is-scrolled, .is-light) .menu-toggle, .header-section:is(.is-scrolled, .is-light) .menu-toggle:hover, .header-section:is(.is-scrolled, .is-light) .menu-toggle:focus { background-color: var(--burnt-orange); } .header-section:is(.is-scrolled, .is-light) .menu-toggle svg path { fill: var(--white); } } .menu-toggle .icon-open, .menu-toggle .icon-close { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; transition: opacity 0.3s ease-in-out; } .menu-toggle .icon-open { opacity: 1; } .menu-toggle .icon-close { opacity: 0; } .menu-toggle.is-active .icon-open, .menu-toggle.is-open .icon-open { opacity: 0; } .menu-toggle.is-active .icon-close, .menu-toggle.is-open .icon-close { opacity: 1; } .mobile-nav-menu { display: none; @media (max-width: 1179px) { display: block; position: absolute; top: 100%; left: 0; right: 0; z-index: 999; background-color: var(--pearl); /* Collapsed by default — height is measured & set inline by header.js */ height: 0; overflow: hidden; opacity: 0; visibility: hidden; -webkit-overflow-scrolling: touch; &::-webkit-scrollbar { display: none; } transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease-in-out, visibility 0s linear 0.4s; &.is-open { opacity: 1; visibility: visible; transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease-in-out, visibility 0s linear 0s; } /* Once the open animation has finished, allow inner scrolling */ &.is-open.is-expanded { overflow-y: auto; } } } .mobile-nav-menu-wrapper { display: flex; flex-direction: column; gap: 48px; align-items: center; padding: 20px 20px 64px; @media (max-width: 767px) { padding: 20px 20px 48px; gap: 40px; } } @media (max-width: 1179px) { .mobile-accordion-list { list-style: none; margin: 0; padding: 0; width: 100%; } .mobile-accordion-item { border-bottom: 1px solid var(--stone); overflow: hidden; } .mobile-accordion-item:first-child .mobile-accordion-btn { padding-top: 0; } /* ── Accordion Button Row ── */ .mobile-accordion-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 20px 0; background: none; border: none; cursor: pointer; text-align: left; gap: 12px; text-decoration: none; box-shadow: none !important; } .mobile-accordion-btn:focus, .mobile-accordion-btn:hover, .mobile-accordion-btn.focus-visible { background-color: transparent !important; outline: none !important; border: none !important; } .mobile-accordion-btn--link { display: flex; align-items: center; padding: 18px 0; } .mobile-accordion-title { color: var(--off-black); font: var(--link); flex: 1; transition: color 0.3s ease-in-out; } .mobile-accordion-chevron { display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.3s ease-in-out; } .mobile-accordion-chevron svg { width: 20px; height: 20px; transition: fill 0.3s ease-in-out; path { fill: var(--black); } } .mobile-accordion-item.is-open .mobile-accordion-chevron { transform: rotate(180deg); } .mobile-accordion-item.is-open .mobile-accordion-title { color: var(--burnt-orange); } .mobile-accordion-item.is-open .mobile-accordion-chevron svg path { fill: var(--burnt-orange); } /* ── Accordion Panel Collapse/Expand ── */ .mobile-accordion-panel { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out; opacity: 0; } .mobile-accordion-item.is-open .mobile-accordion-panel { max-height: var(--panel-height); opacity: 1; } .mobile-accordion-panel-inner { padding: 0 0 20px; display: flex; flex-direction: column; gap: 0; } /* ── Column Title (Define / Deliver / Drive) ── */ .mobile-column-title { color: var(--slate); font: var(--link); padding-top: 4px; padding-bottom: 16px; } /* ── Mega Column List (Services) ── Each column is one flat list: core offerings carry a description, wedge offerings are a bare icon + title row. The anchor stacks so the description can sit under the head instead of beside the icon. */ .mobile-link-list--mega { padding-bottom: 8px; padding-top: 0; } .mobile-link-list--mega:last-child { padding-bottom: 0; } .mobile-link-list--mega + .mobile-column-title { padding-top: 20px; } .mobile-link-list--mega .mobile-nav-link { flex-direction: column; align-items: flex-start; gap: 6px; } .mobile-nav-link-head { display: flex; align-items: center; gap: 12px; } .mobile-nav-link--featured .mobile-nav-link-title { font: var(--body-b2); } .mobile-nav-link--featured { padding-top: 0 !important; } li:has(> .mobile-nav-link--featured) + li > .mobile-nav-link--featured { padding-top: 12px !important; } .mobile-link-list--mega:last-child .mobile-nav-link--featured { padding-bottom: 0; } .mobile-nav-link-desc { color: var(--graphite); font: var(--body-b4); } /* ── Link Lists ── */ .mobile-link-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .mobile-nav-link { display: block; padding-left: 20px; color: var(--off-black); font: var(--body-b3); text-decoration: none; transition: color 0.3s ease-in-out; display: flex; align-items: center; gap: 12px; padding: 12px 0; } .mobile-accordion-panel-inner > .mobile-link-list:not(.mobile-link-list--mega) { padding-top: 4px; } /* Single dropdown — tighter bottom padding */ .mobile-accordion-panel-inner:has( > .mobile-link-list:not(.mobile-link-list--mega) ) { padding-bottom: 14px; } /* Single dropdown (Industries / Resources) — no group indent */ .mobile-accordion-panel-inner > .mobile-link-list:not(.mobile-link-list--mega) .mobile-nav-link { padding-left: 0; } .mobile-nav-link:hover, .mobile-nav-link:focus, .mobile-nav-link:active, .mobile-nav-link.active, .mobile-nav-link[aria-current="page"] { color: var(--burnt-orange); } /* Top-level links without a submenu (Careers) */ .mobile-accordion-btn--link.active .mobile-accordion-title, .mobile-accordion-btn--link[aria-current="page"] .mobile-accordion-title { color: var(--burnt-orange); } /* ── Mega / non-mega flat lists (industries etc.) ── */ .mobile-accordion-item:not(.has-submenu) .mobile-accordion-btn { justify-content: flex-start; } } .hero-spacing { margin-top: calc(-1 * var(--header-height, 0px)); }