/* While the window is actively resizing (navigation.js toggles .is-resizing on ), kill the mobile nav panel's fade so it doesn't flash when the layout crosses the desktop/mobile breakpoint. */ .is-resizing .site-navigation, .is-resizing .site-navigation * { transition: none !important; } /* Sticky (not fixed) so it never leaves the document flow — no layout jump when scrolling starts. It sticks to the top from the very first pixel. */ .site-header { position: sticky; top: 0; z-index: 1000; width: 100%; background: var(--color-white); transition: box-shadow var(--transition), transform 420ms cubic-bezier(0.22, 1, 0.36, 1), background-color var(--transition); } /* Shadow appears only after scrolling a little (toggled in navigation.js). */ .site-header.is-sticky { box-shadow: 0 15px 38px rgba(0, 0, 0, 0.1); } /* Slide up out of view while scrolling down; eases back in on scroll up. */ .site-header.is-sticky.is-hidden { transform: translateY(-100%); } /* Sit below the WordPress admin bar when logged in (desktop). */ @media screen and (min-width: 783px) { .admin-bar .site-header { top: 32px; } } .site-header__inner { display: flex; align-items: stretch; width: 100%; margin-inline: auto; padding-inline: 20px; } .site-header__branding { display: flex; flex: 0 0 auto; align-items: center; padding: 34px 0; } .site-header__branding .custom-logo-link { display: block; line-height: 0; } .site-header__branding .custom-logo { display: block; width: 191px; max-width: 100%; height: auto; } .site-navigation { display: flex; flex: 1; align-items: stretch; justify-content: center; margin-inline: 40px; } .site-navigation__menu, .site-navigation__menu ul { padding: 0; margin: 0; list-style: none; } .site-navigation__menu { display: flex; align-items: stretch; /* No flex gap — the spacing lives inside each link as horizontal padding so the items sit edge-to-edge with no dead zones between them (moving a bit left/right of the text still keeps the dropdown open). The negative inline margin cancels the outermost links' padding so the text stays put. */ gap: 0; margin-inline: -25px; } .site-navigation__menu > li { position: relative; display: flex; align-items: stretch; } .site-navigation__menu > li > a { position: relative; display: flex; align-items: center; padding: 40px 25px; color: var(--color-black); font-family: var(--font-heading); font-size: var(--nav-font-size); font-weight: var(--nav-font-weight); line-height: var(--nav-line-height); text-decoration: none; text-transform: uppercase; transition: color var(--transition); } .site-navigation__menu > li:hover > a, .site-navigation__menu > li > a:hover, .site-navigation__menu > li > a:focus-visible, .site-navigation__menu > .current-menu-item > a, .site-navigation__menu > .current-menu-ancestor > a { color: var(--color-primary); } /* Dropdown indicator on top-level items that have a sub-menu. A CSS-drawn chevron (square with two borders, rotated 45deg = points down). Uses currentColor so it tracks the link's hover color. */ .site-navigation__arrow { display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; /* Pivot around the chevron's ink centroid (~66% 66%), not the box center. That point is the rotation's fixed point, so the glyph stays vertically put when it flips instead of swinging below/above the text. */ transform-origin: 66% 66%; transform: translateY(-1.3px) rotate(45deg); transition: transform 250ms ease; } /* Rotate 180deg (45 -> 225) so the chevron points up while the dropdown is open — on hover/focus (desktop) and when the mobile accordion is toggled. */ .site-navigation__menu > li:hover > a .site-navigation__arrow, .site-navigation__menu > li:focus-within > a .site-navigation__arrow, .site-navigation__menu > li.is-open > a .site-navigation__arrow { transform: translateY(-1.3px) rotate(225deg); } /* Dropdown shell — shared by both the mega (Services) and split (Industries/Resources) layouts. Centered card capped at the container width (1380px) so the page shows on either side; anchored to the bottom of the header via --mcc-header-bottom (set in navigation.js). */ .site-navigation__menu .sub-menu { position: fixed; z-index: 20; /* Anchored to the header's bottom edge, not its height — otherwise the admin bar (which shifts the header down) makes the panel overlap it. */ top: var(--mcc-header-bottom, 96px); left: 0; right: 0; width: 100%; max-width: var(--container); margin-inline: auto; padding: 40px; /* Floored to the tallest dropdown (measured in navigation.js) so the overlay keeps a consistent height when hovering between menu items. */ min-height: var(--mcc-submenu-height, auto); /* Transparent: the shared .site-navigation__panel frame behind these provides the background + shadow on desktop, so switching items never makes the panel itself flash. (On mobile these are stacked accordions, already transparent.) */ background: transparent; box-shadow: none; opacity: 0; visibility: hidden; /* Content-only cross-fade; the persistent frame handles the panel's own open/close, so this just swaps what's inside it. */ transition: opacity 130ms ease, visibility 130ms ease; } /* The active panel's content is shown via a JS-managed class (not :hover) so it stays in sync with the shared frame — content and frame open and close together rather than the content vanishing while the frame is still up. */ .site-navigation__menu .sub-menu.is-active { opacity: 1; visibility: visible; /* Sits above the frame (19) and any sibling still fading out (20). */ z-index: 21; transition: opacity 120ms ease, visibility 120ms ease; } /* --- Shared dropdown frame ------------------------------------------------- One persistent panel background that stays mounted while any dropdown is open (JS keeps .is-submenu-open on the nav across item-to-item moves). The transparent per-item panels above swap their content over it, so the panel never disappears and reappears. Hidden on mobile (accordion mode). */ .site-navigation__panel { display: none; } @media (min-width: 1025px) { .site-navigation__panel { display: block; position: fixed; z-index: 19; top: var(--mcc-header-bottom, 96px); left: 0; right: 0; width: 100%; max-width: var(--container); margin-inline: auto; min-height: var(--mcc-submenu-height, auto); background: var(--menu-panel-bg); box-shadow: var(--shadow-sm); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 200ms ease, visibility 200ms ease; } .site-navigation.is-submenu-open .site-navigation__panel { opacity: 1; visibility: visible; transition: opacity 160ms ease, visibility 160ms ease; } } /* CSS-only full page fuzzy overlay, shown behind the dropdown while a submenu parent is open. Sits above the page (z-index: 1) but below the header/dropdown (z-index: 1000), so the page beneath blurs and tints blue while the header and overlay stay sharp. */ body::before { content: ""; position: fixed; inset: 0; background: rgba(0, 105, 203, 0.10); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 1; opacity: 0; visibility: hidden; pointer-events: none; /* Close lingers so the blur doesn't flicker while the cursor crosses the small gap between two menu items during a switch. */ transition: opacity 220ms ease, visibility 220ms ease; } /* Reveal it (desktop only) when a top-level item with a dropdown is hovered or keyboard-focused. */ @media (min-width: 1025px) { body:has(.site-navigation.is-submenu-open)::before { opacity: 1; visibility: visible; /* Open transition stays smooth (a touch quicker than before). */ transition: opacity 0.2s ease, visibility 0.2s ease; } } /* Split dropdowns (Industries/Resources): two-tone full-bleed background — warm panel on the left half, grey promo panel on the right. The 50% hard stop lines up with the container centre (where the promo column begins), because the shell's horizontal padding is symmetric. */ .site-navigation__menu .sub-menu--split { background: linear-gradient( to right, var(--menu-panel-bg) 50%, var(--menu-promo-bg) 50% ); } .sub-menu__eyebrow { padding-bottom: 12px; margin-bottom: 24px; color: var(--color-muted); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border-bottom: 1px solid rgb(145, 145, 145); } /* --- Mega layout (Services): full-width equal columns, no promo panel --- */ .mega-columns { display: flex; /* Spacing between columns. */ gap: 180px; /* Center the column group within the overlay instead of stretching it edge-to-edge; columns keep their content width (see .mega-column). */ justify-content: center; } .mega-column { /* Don't grow to fill; size to content so the group stays centered. */ flex: 0 1 auto; min-width: 180px; } .mega-column__heading { display: block; /* 7px + the first link's 7px top padding = 14px, matching the link-to-link gap. */ margin-bottom: 7px; color: #1f1f1f; font-size: 13px; font-weight: 700; text-decoration: none; text-transform: uppercase; } .mega-column__heading:hover, .mega-column__heading:focus-visible { color: var(--color-primary); } .mega-column__links { padding: 0; margin: 0; list-style: none; } .mega-column__links a { display: block; /* 7px top + 7px bottom = 14px between adjacent items. */ padding: 7px 0; color: #1f1f1f; font-size: 13px; font-weight: 600; text-decoration: none; text-transform: none; } .mega-column__links a:hover, .mega-column__links a:focus-visible { color: var(--color-primary); } /* --- Split layout (Industries/Resources): two-column flat links + promo panel --- */ .sub-menu__split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; } /* Keep the left links clear of the vertical colour split. */ .sub-menu__split-links { padding-right: 48px; } /* Industries/Resources links reuse the Services sub-item styling (.mega-column__links); here they're just flowed into two columns. */ /* Both classes are on the