/*========================= SITE HEADER =========================*/ /* Search panel — slides down from header when toggle is clicked */ .site-header__search-panel { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-top: 1px solid rgba(0,0,0,0.08); box-shadow: 0 4px 16px rgba(0,0,0,0.1); overflow: hidden; max-height: 0; opacity: 0; transition: max-height .3s ease, opacity .3s ease; z-index: 99; } .site-header__search-panel.is-open { max-height: 100px; opacity: 1; } .site-header__search-inner { display: flex; align-items: center; gap: 16px; padding: 16px 32px; } .site-header__search-inner .c-header-search { flex: 1; } .site-header__search-inner .c-header-search__input { display: flex; align-items: center; gap: 12px; border-bottom: 2px solid var(--color-n-black, #282829); padding-bottom: 8px; } .site-header__search-inner .c-header-search__input .c-icon { width: 20px; height: 20px; flex-shrink: 0; } .site-header__search-inner .c-header-search__input .c-icon svg { width: 100%; height: 100%; } .site-header__search-inner input { flex: 1; border: none; outline: none; font-size: 1.6rem; background: transparent; color: var(--color-n-black, #282829); } .site-header__search-close { background: none; border: none; cursor: pointer; padding: 4px; display: flex; align-items: center; color: var(--color-n-black, #282829); flex-shrink: 0; } .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: var(--color-n-white, #ffffff); border-bottom: 1px solid transparent; transition: background .25s cubic-bezier(.4,0,0,1), box-shadow .2s ease, border-color .2s ease; } /* Push page content down so it doesn't sit beneath the fixed header — the offset MUST match the header's real height at each breakpoint, or the gap shows as empty space above the breadcrumb (too big) or hides it (too small). MEASURED heights: >=1200px 112px; 768-1199px ~143px; <768px the header was tightened to ~91px (min-height 64 + space-3 padding), James 2026-07-16. */ body { padding-top: 111px; } @media (max-width: 1199.98px) { body { padding-top: 143px; } } @media (max-width: 767.98px) { body { padding-top: 91px; } } /* When logged in, the WP admin bar is fixed at top:0 — drop the fixed header below it so it isn't hidden underneath. (WP already offsets page content via its own html margin-top.) */ body.admin-bar .site-header { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar .site-header { top: 46px; } } /* WP core makes #wpadminbar position:absolute below 600px so it scrolls away with the page — but our header is FIXED at top:46, so scrolling opened a 46px hole above the header with page content showing through (and the bar sat mid-page instead of on top). Keep the bar fixed above the header (its z-index 99999 already beats the header's 100). James, 2026-07-16. */ @media screen and (max-width: 600px) { body.admin-bar #wpadminbar { position: fixed !important; top: 0; } } /* When megamenu is open, header + drawer share the same off-white bg */ .site-header.is-menu-open, body.has-megamenu-open .site-header, body.has-megamenu-open .site-header__megamenu { background: #f6f6f8; } .site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-3, 16px); max-width: none; width: 100%; margin: 0; padding-top: var(--space-2, 12px); padding-bottom: var(--space-2, 12px); padding-left: var(--container-px); padding-right: var(--container-px); min-height: 111px; } .site-header__col--left { justify-self: start; } .site-header__col--center { justify-self: center; } .site-header__col--right { justify-self: end; } /* ---------- Menu toggle (hamburger) ---------- */ .site-header__menu-toggle { display: inline-flex; align-items: center; gap: 12px; background: transparent; border: 0; padding: 8px 0; cursor: pointer; color: var(--color-n-black, #282829); font: inherit; } .site-header__menu-toggle:focus-visible { outline: 2px solid var(--color-p, #ff6e33); outline-offset: 4px; border-radius: 4px; } /* Live-site hamburger: 3 lines + 2 crosses, animated open/close */ .hamburger { position: relative; display: inline-block; width: 35px; height: 21px; /* 3 lines × 3px + 2 gaps × 6px */ margin-right: 1rem; } .hamburger__line { display: block; width: 100%; height: 3px; margin-top: 6px; margin-bottom: 0; background: currentColor; animation-fill-mode: forwards; } .hamburger__line:first-child { margin-top: 0; } .hamburger__line:last-of-type { margin-bottom: 0; } .hamburger__line3 { width: 50%; transition: width .3s cubic-bezier(.4,0,0,1); } .hamburger__cross { position: absolute; left: 0; top: 50%; width: 35px; height: 3px; background: currentColor; opacity: 0; transform: translateY(-50%); animation-fill-mode: forwards; } /* ---- Open state: run forward animations ---- */ .site-header.is-menu-open .hamburger__line1 { animation: hamburgerShuffleDown .5s forwards; } .site-header.is-menu-open .hamburger__line2 { animation: hamburgerOpacityOut .5s forwards; } .site-header.is-menu-open .hamburger__line3 { animation: hamburgerShuffleUp .5s forwards; width: 100%; } .site-header.is-menu-open .hamburger__cross1 { animation: hamburgerCrossLeft .5s forwards; animation-delay: .4s; } .site-header.is-menu-open .hamburger__cross2 { animation: hamburgerCrossRight .5s forwards; animation-delay: .4s; } .site-header.is-menu-open .hamburger__text-open { display: none; } .site-header.is-menu-open .hamburger__text-close { display: inline; } /* ---- Close state defaults ---- */ .hamburger__text-open { display: inline; } .hamburger__text-close { display: none; } /* ---- Keyframes (mirror live header.css) ---- */ @keyframes hamburgerShuffleDown { 0% { transform: translateY(0); opacity: 1; } 99.9%{ opacity: 1; } 100% { opacity: 0; transform: translateY(.9rem); } } @keyframes hamburgerShuffleUp { 0% { transform: translateY(0); opacity: 1; } 99.9%{ opacity: 1; } 100% { opacity: 0; transform: translateY(-.9rem); } } @keyframes hamburgerOpacityOut { 0% { opacity: 1; } 99.9%{ opacity: 1; } 100% { opacity: 0; } } @keyframes hamburgerCrossLeft { 0% { opacity: 0; transform: translateY(-50%) rotate(0deg); } 0.1% { opacity: 1; } 100% { opacity: 1; transform: translateY(-50%) rotate(45deg); } } @keyframes hamburgerCrossRight { 0% { opacity: 0; transform: translateY(-50%) rotate(0deg); } 0.1% { opacity: 1; } 100% { opacity: 1; transform: translateY(-50%) rotate(-45deg); } } @keyframes hamburgerShuffleDownReverse { 0% { opacity: 0; transform: translateY(.9rem); } 0.1% { opacity: 1; } 100% { opacity: 1; transform: translateY(0); } } @keyframes hamburgerShuffleUpReverse { 0% { opacity: 0; transform: translateY(-.9rem); } 0.1% { opacity: 1; } 100% { opacity: 1; transform: translateY(0); } } @keyframes hamburgerOpacityIn { 0% { opacity: 0; } 99.9%{ opacity: 0; } 100% { opacity: 1; } } @keyframes hamburgerCrossLeftReverse { 0% { opacity: 1; transform: translateY(-50%) rotate(45deg); } 99.9%{ opacity: 1; } 100% { opacity: 0; transform: translateY(-50%) rotate(0deg); } } @keyframes hamburgerCrossRightReverse { 0% { opacity: 1; transform: translateY(-50%) rotate(-45deg); } 99.9%{ opacity: 1; } 100% { opacity: 0; transform: translateY(-50%) rotate(0deg); } } .site-header__menu-text { font-size: 2.6rem; font-weight: 700; letter-spacing: 0.01em; color: var(--color-n-black, #282829); } .site-header__menu-text .is-open-text { display: inline; } .site-header__menu-text .is-close-text { display: none; } .site-header.is-menu-open .site-header__menu-text .is-open-text { display: none; } .site-header.is-menu-open .site-header__menu-text .is-close-text { display: inline; } /* ---------- Center logo ---------- */ .site-header__logo { display: inline-flex; align-items: center; color: var(--color-n-black, #282829); } .site-header__logo img { display: block; width: 255px; height: auto; } /* LIVE'S ACTUAL LOTTIE LOGO (James, 2026-07-16): braille-logo-black-gda.json sideloaded from live (fractal/dev/icons/), played by lottie-web — once on load, replayed on hover (global/js/logo-lottie.js). Replaces the old CSS draw-on approximation. The static horizontal stays as the no-JS fallback and hides once the Lottie has loaded; the stacked MOBILE mark stays a static (the Lottie is the horizontal wordmark). */ .site-header__logo-lottie { display: none; width: 255px; /* same slot as the static wordmark */ line-height: 0; } .site-header__logo-lottie svg { display: block; width: 100%; height: auto; } @media (min-width: 768px) { .site-header__logo.has-lottie .site-header__logo-lottie { display: block; } .site-header__logo.has-lottie .site-header__logo-img--horizontal { display: none; } } @media (prefers-reduced-motion: reduce) { .site-header__logo.has-lottie .site-header__logo-lottie { display: none; } .site-header__logo.has-lottie .site-header__logo-img--horizontal { display: block; } } /* Stacked logo for mobile only — hidden by default, swapped in below 768px. Selector includes .site-header__logo to outrank the generic .site-header__logo img height override at max-width:768px. */ .site-header__logo .site-header__logo-img--stacked { display: none; } @media (max-width: 767.98px) { .site-header__logo .site-header__logo-img--horizontal { display: none; } .site-header__logo .site-header__logo-img--stacked { display: block; height: 60px; width: auto; } /* Hide the arrow on the donate button at mobile */ .site-header__donate .c-btn__icon { display: none !important; } /* Hide the "Menu"/"Close" word on the hamburger toggle at mobile */ .site-header__menu-text { display: none !important; } } /* ---------- Donate button ---------- */ /* ========================================================= Button system (mirrors live site: c-btn / c-btn--primary / c-btn--icon-right / c-btn--hover-sweep-out) ========================================================= */ /* Button sizes, measured off live (James, 2026-07-14: "fix the button styling for all blocks"): BOTH sizes use 20px/600 text — the only difference is padding. Default (section CTAs like IGDD 2026's "Click here to find out more") = 20px 36px; the SMALL variant (c-btn--sm, e.g. card "Learn more" links and the header Donate) = 14px 32px. Our base was 18px with no --sm rule, so every button rendered a size live doesn't use. */ .c-btn { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; text-decoration: none; font-size: 2rem; font-weight: 400; line-height: 1.3; text-align: center; color: var(--color-n-black, #282829); padding: 20px 36px; border-radius: 100px; position: relative; overflow: hidden; vertical-align: top; transition: all .3s cubic-bezier(.4,0,0,1), background 0s cubic-bezier(.4,0,0,1) .3s; } .c-btn--sm { padding: 14px 32px; } /* All buttons are 66px tall, except those in the site header. */ .c-btn { height: 66px; box-sizing: border-box; } .site-header .c-btn { height: auto; } /* Primary + Secondary share the same variable system. Primary : filled at rest, recedes on hover (use with c-btn--hover-sweep-out). Secondary: transparent at rest, fills in on hover (use with c-btn--hover-sweep-in). */ .c-btn--primary, .c-btn--secondary { --c-btn-color: var(--color-p, #ff6e33); /* fill (the sweep) */ --c-btn-ring: var(--c-btn-color); /* border ring */ --c-btn-text: var(--color-n-black, #282829); /* text at rest */ --c-btn-text-hover: var(--color-n-black, #282829); /* text when fill recedes */ --c-btn-bg-hover: var(--color-n-white, #fff); /* color revealed on hover */ color: var(--c-btn-text); border: 2px solid var(--c-btn-ring); box-shadow: none; } .c-btn--primary { /* Rest bg matches the sweep color so any sub-pixel bleed at the rounded corners is invisible. On hover the bg transitions to the reveal color in sync with the ::before sweep receding. background-clip stays as the default (border-box) so the bg paints under the border with no anti-aliased boundary between them. */ background-color: var(--c-btn-color); transition: background-color .3s cubic-bezier(.4,0,0,1); } .c-btn--primary:hover:not([disabled]), .c-btn--primary:focus-visible:not([disabled]) { background-color: var(--c-btn-bg-hover); } .c-btn--secondary { /* Outline default — transparent so the underlying section shows through. */ background: transparent; } /* DEFAULT outline button (NO colour chosen): live's standard is a BLACK ring at rest with an ORANGE sweep on hover (James, 2026-07-14). Only apply when the block sets no `--c-btn-color` — a button WITH a chosen colour must keep its colour for the ring + sweep (the earlier blanket rule forced black on every secondary, so a chosen colour never showed — James: "button styling is not working for colors"). */ .c-btn--secondary:not([style*="--c-btn-color"]) { --c-btn-ring: var(--color-n-black, #282829); --c-btn-bg-hover: transparent; --c-btn-text-hover: var(--color-n-black, #282829); } /* Black fill → white text at rest, transparent bg + black text on hover */ .c-btn--primary[style*="--color-n-black"], .c-btn--secondary[style*="--color-n-black"] { --c-btn-text: var(--color-n-white, #fff); --c-btn-ring: var(--color-n-black, #282829); } .c-btn--primary[style*="--color-n-black"] { --c-btn-text-hover: var(--color-n-black, #282829); --c-btn-bg-hover: transparent; } /* Secondary (outline) black: transparent at rest, so the text must be BLACK, turning white once the black fill sweeps in on hover. Keep the hover background TRANSPARENT (not white) so only the black ::before slides in — no white flash behind it, and the slide stays visible. */ .c-btn--secondary[style*="--color-n-black"] { --c-btn-text: var(--color-n-black, #282829); --c-btn-text-hover: var(--color-n-white, #fff); --c-btn-bg-hover: transparent; } /* White: black border ring on both variants. */ .c-btn--primary[style*="--color-n-white"], .c-btn--secondary[style*="--color-n-white"] { --c-btn-ring: var(--color-n-black, #282829); } /* Primary white (filled white) inverts to black-on-white-text on hover. */ .c-btn--primary[style*="--color-n-white"] { --c-btn-bg-hover: var(--color-n-black, #282829); --c-btn-text-hover: var(--color-n-white, #fff); } /* Secondary (outline) white: the WHITE fill slides in with BLACK text. Keep the hover bg transparent so only the white ::before slides (no flash); the ::before uses --c-btn-color (white), so no black override here. */ .c-btn--secondary[style*="--color-n-white"] { --c-btn-text-hover: var(--color-n-black, #282829); --c-btn-bg-hover: transparent; } /* Secondary (outline) orange/primary: the orange fill slides in with black text. Transparent hover bg so only the orange ::before slides (no white flash). The "--color-p)" match (with the closing paren) avoids matching --color-peach. */ .c-btn--secondary[style*="--color-p)"] { --c-btn-text-hover: var(--color-n-black, #282829); --c-btn-bg-hover: transparent; } .c-btn--primary:focus-visible:not(:active, [disabled]), .c-btn--secondary:focus-visible:not(:active, [disabled]) { outline: 2px solid var(--c-btn-ring); outline-offset: 2px; text-decoration: underline; } .c-btn--primary:focus:not(:focus-visible), .c-btn--secondary:focus:not(:focus-visible) { outline: none; text-decoration: none; } /* Hover-sweep — colored ::before sweeps out left→right on hover. Extends -2px in all directions to cover the button's 2px border so the underlying background doesn't show through at the rounded corners. */ .c-btn[class*="c-btn--hover-sweep"]::before { content: ""; position: absolute; top: -2px; bottom: -2px; z-index: 0; transition: width .3s cubic-bezier(.4,0,0,1); } .c-btn--primary[class*="c-btn--hover-sweep"]::before, .c-btn--secondary[class*="c-btn--hover-sweep"]::before { background: var(--c-btn-color); } .c-btn--hover-sweep-out::before { right: -2px; width: calc(100% + 4px); } .c-btn--hover-sweep-out:hover:not([disabled])::before, .c-btn--hover-sweep-out:focus:not([disabled])::before { width: 0; } /* The hover-out variant inverse exists too (right→left fill) */ .c-btn--hover-sweep-in::before { left: -2px; width: 0; } .c-btn--hover-sweep-in:hover:not([disabled])::before, .c-btn--hover-sweep-in:focus:not([disabled])::before { width: calc(100% + 4px); } /* Label + icon sit above the ::before */ .c-btn__label, .c-btn__icon { position: relative; z-index: 1; } /* Match label height to icon height so buttons with and without arrows are the same height */ .c-btn__label { display: inline-flex; align-items: center; min-height: 1.9rem; } /* Size modifier — live's small button is 14px 32px (set above with the base sizes). */ /* Icon-right: icon on the right, slides 8px on hover */ .c-btn--icon-right .c-btn__icon { margin-left: .8em; margin-right: 1rem; order: 2; display: inline-flex; align-items: center; } .c-btn__icon svg { width: 1.9rem; height: 1.9rem; transition: transform .3s cubic-bezier(.4,0,0,1), color 0s cubic-bezier(.4,0,0,1); } .c-btn--icon-right:hover:not([disabled]) .c-btn__icon svg, .c-btn--icon-right:focus:not([disabled]) .c-btn__icon svg { transform: translateX(8px); } /* On hover/focus the fill state flips */ .c-btn--primary:hover:not([disabled]), .c-btn--primary:focus:not([disabled]), .c-btn--secondary:hover:not([disabled]), .c-btn--secondary:focus:not([disabled]) { background: var(--c-btn-bg-hover); color: var(--c-btn-text-hover); transition: all .3s cubic-bezier(.4,0,0,1), background 0s cubic-bezier(.4,0,0,1); } /* Site-header donate kept as a positioning hook, no longer a full button skin */ .site-header__donate { /* purely a scoping class — the visuals come from .c-btn--primary etc. */ } /* ---------- Responsive ---------- */ @media only screen and (max-width: 1199.98px) { .site-header__inner { padding-top: var(--space-5) !important; padding-bottom: var(--space-5) !important; } } @media only screen and (max-width: 767.98px) { .site-header__inner { min-height: 64px; padding-top: var(--space-3) !important; padding-bottom: var(--space-3) !important; } .site-header__logo img { height: 28px; } .site-header__menu-text { display: none; /* icon-only on mobile */ } } /* ========================================================= MEGAMENU drawer (mirrors live navigation-header) ========================================================= */ .site-header__megamenu { position: fixed; top: 111px; /* matches .site-header__inner min-height */ left: 0; right: 0; bottom: 0; height: calc(100vh - 111px); background: #f6f6f8; color: var(--color-n-black, #282829); z-index: 90; overflow-x: hidden; overflow-y: hidden; display: block !important; /* override [hidden]'s display:none so transition can run */ transform: translateY(-100%); pointer-events: none; will-change: transform; transition: transform .4s cubic-bezier(.4,0,0,1); } body.has-megamenu-open .site-header__megamenu { transform: translateY(0); pointer-events: auto; } /* The megamenu must start exactly at the header's bottom edge at every breakpoint (same measured heights as the body padding-top offsets: 112 desktop / 143 tablet / 91 mobile — James, 2026-07-16). A stale 64px mobile value left the drawer tucked 27px under the taller header. */ @media (max-width: 1199.98px) { .site-header__megamenu { top: 143px; height: calc(100vh - 143px); } } @media (max-width: 767.98px) { .site-header__megamenu { top: 91px; height: calc(100vh - 91px); /* The stacked mobile menu is taller than the viewport (accordion + nav + mark + feature + bottom row). The base overflow-y:hidden clipped it with no way to reach the lower items — let it scroll. */ overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } } body.has-megamenu-open { overflow: hidden; } /* body{overflow:hidden} alone doesn't lock the viewport here: html carries overflow-x:clip, which stops the body's overflow propagating to the root — the page kept scrolling BEHIND the open menu. Lock the root directly. */ html:has(body.has-megamenu-open) { overflow: hidden; } .site-header__megamenu-inner { max-width: 100%; width: 100%; margin: 0 auto 0; padding-top: 0; padding-bottom: 0; padding-left: var(--container-px); padding-right: var(--container-px); min-height: 100%; display: flex; flex-direction: column; box-sizing: border-box; /* Contents fade in once the white background has finished sliding down */ opacity: 0; transition: opacity .25s ease-out; } body.has-megamenu-open .site-header__megamenu .site-header__megamenu-inner { opacity: 1; transition: opacity .3s ease-out .35s; } /* Mobile: nudge the open menu content down from the header. */ @media (max-width: 767.98px) { body.has-megamenu-open .site-header__megamenu .site-header__megamenu-inner { margin-top: 30px; } } /* push the bottom row to the floor of the viewport */ .site-header__megamenu-cols, .site-header__megamenu-tabbed { flex: 1 1 auto; } .site-header__megamenu-bottom { margin-top: auto; } /* ---- Top row: horizontal nav + a11y controls ---- */ .site-header__megamenu-top { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: 5rem; padding-bottom: 3rem; border-bottom: 1px solid #e9e9e7; } .nav-horizontal__list { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; gap: 0; align-items: center; } .nav-horizontal__item { display: inline-flex; align-items: center; white-space: nowrap; } /* Pipe divider between items (matches footer-bottom style — fixed-height white-ish bar) */ .nav-horizontal__item:not(:last-child)::after { content: ""; display: inline-block; width: 1px; height: 1.8rem; background: var(--color-n-black, #282829); opacity: .35; margin: 0 1.6rem; user-select: none; pointer-events: none; } .nav-horizontal__link { color: #282829; font-size: 15px; line-height: 1.3em; font-weight: 100; text-decoration: none; } .nav-horizontal__link.is-cta { background: var(--color-p, #ff6e33); border-radius: 999px; padding: .6em 1.4em; font-weight: 700; } /* ── Accessibility controls — styling copied 1:1 from live core.css ── */ .accessibility-controls { align-items: center; display: inline-flex; font-size: 1rem; margin: 0; padding: 0; list-style: none; } .accessibility-controls li { position: relative; flex: 0 0 auto; width: auto; max-width: none; margin: 0 16px 0 0; /* live: 16px, NOT 25px */ padding: 0 16px 0 0; text-align: center; } .accessibility-controls li::before { content: none; } .accessibility-controls li::after { /* 1px × 1.6rem black divider */ content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 1.6rem; background: #000; } .accessibility-controls li:last-child { margin-right: 0; padding-right: 0; } .accessibility-controls li:last-child::after { content: none; } .accessibility-controls__btn, .accessibility-controls button { background: none; border: none; padding: 0; font-size: 1rem; vertical-align: middle; color: var(--color-n-black, #282829); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color 0.2s cubic-bezier(0.4, 0, 0, 1); } .accessibility-controls .c-icon { display: inline-flex; align-items: center; justify-content: center; font-size: 4rem; flex-shrink: 0; overflow: visible; } .accessibility-controls button i, .accessibility-controls .c-icon { height: 2rem; } .accessibility-controls .c-icon svg { height: 2rem; width: auto; max-width: none; flex-shrink: 0; display: block; } /* contrast icon is square — be explicit so the right edge isn't clipped */ .accessibility-controls__contrast .c-icon, .accessibility-controls__contrast i { width: 2rem; height: 2rem; min-width: 2rem; } .accessibility-controls__contrast .c-icon svg { width: 2rem; height: 2rem; min-width: 2rem; } /* Live: colour flips to orange on BOTH hover and focus. LITERAL #ff6e33 (not var(--color-p)) so it STAYS orange in high-contrast mode, where --color-p is overridden to black — matches live. */ .accessibility-controls__btn:hover, .accessibility-controls__btn:focus, .accessibility-controls button:hover, .accessibility-controls button:focus { color: #ff6e33; outline: 0; } /* Live global :focus-visible ring, scoped to these buttons */ .accessibility-controls button:focus-visible { outline: 3px solid #282829; outline-offset: 2px; } /* Live: disabled stays grey even on hover/focus */ .accessibility-controls__btn[disabled], .accessibility-controls__btn.disabled, .accessibility-controls button.disabled, .accessibility-controls button[disabled], .accessibility-controls button.disabled:hover, .accessibility-controls button.disabled:focus, .accessibility-controls button[disabled]:hover, .accessibility-controls button[disabled]:focus { color: #69696a; cursor: not-allowed; } /* Divider flips white on dark bg contexts (live) — high-contrast does NOT flip it */ .bg-color--black .accessibility-controls li::after, .bg-color--charcoal .accessibility-controls li::after { background: #fff; } /* Visually-hidden helper for the label spans (live .u-visuallyhidden) */ .u-visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* ---- 4-column vertical menus ---- */ .site-header__megamenu-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3.2rem; } /* Tablet (768-1200px): 2-col megamenu grid and the nav + accessibility row stacks vertically below the logo */ @media (max-width: 1199.98px) { .site-header__megamenu-cols { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-6); } } @media (max-width: 479.98px) { .site-header__megamenu-cols { grid-template-columns: 1fr; } } /* ============================================================ Tabbed megamenu (mirrors live .c-tabbed-nav) Layout: [ tabs | active panel ] ............... [ feature panel ] ============================================================ */ .site-header__megamenu-tabbed { display: flex; align-items: flex-start; gap: 4rem; } /* Tablet (992-1199): space the tabbed area down from the row above (James, 2026-07-16) */ @media (min-width: 992px) { .site-header__megamenu-tabbed { padding-top: 80px; } /* …but not while the searchbox is open — its own 60px margins provide the gap */ .site-header__megamenu-inner:has(#navigation-search.is-open) .site-header__megamenu-tabbed, .site-header__megamenu-inner:has(.nav-horizontal__search.is-open) .site-header__megamenu-tabbed { padding-top: 0; } } /* tabs + interleaved panels live inside .nav-tabbed; panels are absolutely positioned on desktop so the tabs stack cleanly in the left column. */ .nav-tabbed { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; gap: 40px; /* min-height: 36rem; */ } .nav-tabbed__tab { position: relative; } .nav-tabbed__tab-link { display: flex; align-items: center; justify-content: space-between; width: 350px; gap: 1.6rem; background: none; border: 0; padding: 0 0 40px; margin: 0; font-family: inherit; font-size: 28px; font-weight: 700; line-height: 1.1; text-align: left; color: var(--color-n-black, #282829); cursor: pointer; position: relative; } /* accent underline — grey tick at rest; turns the tab's accent colour and sweeps to full width on hover / when active. */ .nav-tabbed__tab-link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 160px; height: 4px; background: #c9c9c7; transition: width .35s cubic-bezier(.4,0,0,1), background .25s ease; } .nav-tabbed__tab-link:hover::after, .nav-tabbed__tab-link:focus-visible::after, .nav-tabbed__tab-link.is-active::after { width: 100%; background: var(--tab-accent, var(--color-p, #ff6e33)); } .nav-tabbed__tab-link:focus-visible { outline: none; } .nav-tabbed__tab-text { display: block; } /* mobile-only chevron on each tab */ .nav-tabbed__chevron { display: none; flex: 0 0 auto; width: 4rem; height: 4rem; border-radius: 999px; background: var(--color-s, #01b483); color: #fff; align-items: center; justify-content: center; transition: transform .3s cubic-bezier(.4,0,0,1); } .nav-tabbed__chevron svg { width: 1.4rem; height: auto; display: block; } /* ---- Panels ---- */ .nav-tabbed__panel { position: absolute; top: 0; left: 430px; right: 0; display: none; } /* Tablet (992-1199, James's definition): tab/title column = 35%, panel content takes the rest — the fixed 430px offset read as a 50/50 split at these widths, and titles were butting into the panel links (James, 2026-07-16). The panel gets a 3.2rem gutter so wrapped titles never touch the content. */ @media (min-width: 992px) and (max-width: 1199.98px) { .nav-tabbed__panel { left: 35%; padding-left: 60px; } .nav-tabbed__tab-link { width: 35%; padding-right: 1.6rem; } } .nav-tabbed__panel.is-active { display: block; } .nav-tabbed__link-list { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: flex; flex-direction: column; gap: 20px; } .nav-tabbed__viewall { text-decoration: none; } /* ---- Feature panel (right column) ---- */ .site-header__feature-panel { flex: 0 0 25%; border-left: 1px solid #e1e1df; padding-left: 40px; align-self: stretch; } .site-header__feature-img { aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: 2.4rem; } .site-header__feature-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .site-header__feature-card { margin-bottom: 2.4rem; } .site-header__feature-divider { display: block; width: 60px; height: 5px; background: var(--card-accent, var(--color-p, #ff6e33)); margin-bottom: 20px; } /* Measured off live's desktop drawer (2026-07-16): title h3.u-h6 = 22px/600, copy = 20px/500 lh1.35 (was 19px/700 + 16px). */ .site-header__feature-panel .site-header__feature-title { font-size: 22px !important; font-weight: 600; line-height: 1.18; margin: 0 0 .6rem; } .site-header__feature-title a { display: inline-flex; align-items: center; gap: .8rem; color: var(--color-n-black, #282829); text-decoration: none; } .site-header__feature-arrow { display: inline-flex; } .site-header__feature-arrow svg { width: 1.5rem; height: auto; display: block; } .site-header__feature-copy { margin: 0; font-size: 20px; font-weight: 500; line-height: 1.35; color: var(--color-n-black, #282829); } /* ---- Tablet / mobile: accordion — ≤991 ONLY (James, 2026-07-16: 992-1199 was rendering a half-way accordion structure; keep the DESKTOP tabbed layout from 992px up) ---- */ @media (max-width: 991.98px) { .site-header__megamenu-tabbed { flex-direction: column; gap: 2.4rem; } .nav-tabbed { min-height: 0; gap: 0; } .nav-tabbed__tab-link { width: 100%; padding: 2rem 0; } .nav-tabbed__tab-link::after { display: none; } .nav-tabbed__chevron { display: inline-flex; } .nav-tabbed__tab-link.is-open .nav-tabbed__chevron { transform: rotate(180deg); } .nav-tabbed__panel { position: static; left: auto; right: auto; display: none; padding: 0 0 2rem; } .nav-tabbed__panel.is-open { display: block; } .site-header__feature-panel { flex: 1 1 auto; max-width: 100%; border-left: 0; border-top: 1px solid #e1e1df; padding-left: 0; padding-top: 2.4rem; } } /* Mobile: no top border on the feature panel (tablet keeps it). */ @media (max-width: 767.98px) { .site-header__feature-panel { border-top: 0; } } .nav-vertical { display: flex; flex-direction: column; gap: 1.6rem; } .nav-vertical__link-main { display: block; font-size: 28px; font-weight: 700; line-height: 2rem; margin: 0 0 2.5rem; color: var(--color-n-black, #282829); position: relative; padding-bottom: 3.5rem; text-decoration: none; cursor: pointer; } /* Chevron toggle button only visible at mobile */ .nav-vertical__toggle { display: none; } .nav-vertical__chevron { display: none; } /* Fixed-width colored bar at rest → expands to 100% on hover (mirrors live c-link-highlight) */ .c-link-highlight__elem { display: block; position: absolute; left: 0; bottom: 0; width: 35%; height: 4px; background: var(--col-accent, var(--color-p)); transition: width .35s cubic-bezier(.4,0,0,1); } .nav-vertical-wrap:hover .c-link-highlight__elem, .nav-vertical__link-main:hover .c-link-highlight__elem, .nav-vertical__link-main:focus-visible .c-link-highlight__elem, .nav-vertical__link-main.is-active .c-link-highlight__elem, .nav-vertical__link-main[aria-current="page"] .c-link-highlight__elem { width: 80%; } .nav-vertical__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.2rem; } .nav-vertical__link { color: var(--color-n-black, #282829); font-size: 18px; line-height: 1.3em; text-decoration: none; transition: color .2s cubic-bezier(.4,0,0,1); } /* Header sub-links: text stays black on hover/focus — only the underline sweeps in (no colour change). */ .nav-vertical__link:hover, .nav-vertical__link:focus-visible { color: var(--color-n-black, #282829); } /* Main column link: text stays black on hover/focus — only the underline slides out to 100% (see .c-link-highlight__elem above). */ .nav-vertical-wrap:hover .nav-vertical__link-main, .nav-vertical__link-main:hover, .nav-vertical__link-main:focus-visible { color: var(--color-n-black, #282829); } /* border-bot-sweep — thin BLACK underline that slides IN from the left on hover and OUT to the right on mouse-out. Only background-size transitions; the background-position flips instantly between right (rest) and left (hover), which is what gives the in-from-left / out-to-right direction. The link text colour never changes. */ .nav-horizontal__link.border-bot-sweep .border-bot-sweep__elem, .nav-vertical__link.border-bot-sweep .border-bot-sweep__elem, .nav-vertical__link-main.border-bot-sweep .border-bot-sweep__elem { display: inline; background-image: linear-gradient(var(--color-n-black, #282829), var(--color-n-black, #282829)); background-repeat: no-repeat; background-position: 100% 100%; /* rest: anchored right */ background-size: 0% 1px; transition: background-size .35s cubic-bezier(.4,0,0,1); padding-bottom: 2px; } .nav-horizontal__link.border-bot-sweep:hover .border-bot-sweep__elem, .nav-horizontal__link.border-bot-sweep:focus-visible .border-bot-sweep__elem, .nav-vertical__link.border-bot-sweep:hover .border-bot-sweep__elem, .nav-vertical__link.border-bot-sweep:focus-visible .border-bot-sweep__elem { background-position: 0% 100%; /* hover: anchored left, grows rightward */ background-size: 100% 1px; } /* ========================================================= ACCESSIBILITY — text size scaling ========================================================= */ html.is-text-sm { font-size: 56.25%; } /* default skelly is 62.5%, this drops ~10% */ html.is-text-lg { font-size: 68.75%; } html.is-text-xl { font-size: 75%; } /* ========================================================= ACCESSIBILITY — high-contrast mode Copied 1:1 from live (core.css + header.css externals + helpers.css) — see REPLICATEhighcontrast.md. NOT an inverted/yellow theme: the light background stays; orange accents go black and coloured sections go light grey. `high-contrast` sits on ; persisted via the `high-contrast` cookie (mirrors live core.js). ========================================================= */ /* Live turns every brand accent BLACK. The --color-p/s/t/a vars drive accent-color-p card bars, chevron circles, is-cta pills, accordion toggles etc.; the --accent-* vars drive card bars / top-title ticks / steps dots / slider accents across all blocks. Overriding them here de-colorises everything at once (national/skelly mapping of live's per-class rules). Dark sections stay dark; white stays white. */ html.high-contrast { --color-p: #000; --color-s: #000; --color-t: #000; --color-a: #000; --accent-green: #000; --accent-pink: #000; --accent-peach: #000; --accent-light-blue: #000; --accent-grey: #f1f1f3; } /* Skip link (live core.css) — inert until a skip link exists locally */ .high-contrast .u-skip-link__link { background-color: #fff; border-color: #282829; color: #282829; } /* Tertiary/text-button underline: orange normally, charcoal in high contrast (live) */ html:not(.high-contrast) .c-btn--tertiary.border-bot-sweep .border-bot-sweep__elem { background-image: linear-gradient(transparent calc(100% - 0.08em), #ff6e33 0.08em); } .high-contrast .c-btn--tertiary.border-bot-sweep .border-bot-sweep__elem { background-image: linear-gradient(transparent calc(100% - 0.08em), #282829 0.08em); } /* Megamenu column highlight bar → black (live: border-color:#000!important; SKELLY paints the bar with background instead of border-top) */ .high-contrast .c-link-highlight__elem { background: #000 !important; border-color: #000 !important; } /* Megamenu tab accent underlines + feature-card dividers get their colour from INLINE custom props (--tab-accent / --card-accent) — !important in a stylesheet beats a non-important inline declaration. */ html.high-contrast .nav-tabbed__tab { --tab-accent: #000 !important; } html.high-contrast .site-header__feature-card { --card-accent: #000 !important; } /* Utility-nav CTA pill: bg goes black via --color-p, so the label flips white */ html.high-contrast .nav-horizontal__link.is-cta { color: #fff; } /* SKELLY — primary buttons → solid black, white text; hover: black recedes, black text on the underlying bg (live: background:#000; ring #000; color:#fff; hover background:none color:#000). Mapped onto skelly's --c-btn-* variable system so the sweep animation behaves identically. !important so the vars beat the [style*=…] colour-variant selectors and inline styles. */ html.high-contrast .c-btn--primary { --c-btn-color: #000 !important; --c-btn-ring: #000 !important; --c-btn-text: #fff !important; --c-btn-text-hover: #000 !important; --c-btn-bg-hover: transparent !important; } /* SKELLY — secondary (outline) buttons → black ring/text; hover: black fill sweeps in with white text (live .high-contrast .c-btn--secondary) */ html.high-contrast .c-btn--secondary { --c-btn-color: #000 !important; --c-btn-ring: #000 !important; --c-btn-text: #000 !important; --c-btn-text-hover: #fff !important; --c-btn-bg-hover: transparent !important; } /* Form buttons (Gravity Forms / legacy) — live selector list, verbatim */ .high-contrast .gform_footer .button, .high-contrast .gform_page_footer .button, .high-contrast .contact-form .actions .primaryAction, .high-contrast .contact-form .btn-primary, .high-contrast .contact-form .wfPageNextButton, .high-contrast .contact-form .wfPagePreviousButton { background: #000; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #000; color: #fff; } .high-contrast .gform_footer .button:hover:not([disabled]), .high-contrast .gform_footer .button:focus:not([disabled]), .high-contrast .gform_page_footer .button:hover:not([disabled]), .high-contrast .gform_page_footer .button:focus:not([disabled]) { background: none; color: #000; } .high-contrast .gform_footer .button:focus:not(:active, [disabled]), .high-contrast .gform_page_footer .button:focus:not(:active, [disabled]) { box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #000; } /* Circle buttons — every colour variant goes black w/ white icon; inside a dark section they invert to white w/ black icon (live, verbatim; national dark-section class bg-color-n-black added alongside live's --charcoal). NOTE: html.high-contrast prefix (not just .high-contrast) so these OUTRANK footer.css contact-icon colour rules of equal specificity. */ html.high-contrast .c-btn-circle--black, html.high-contrast .c-btn-circle--charcoal, html.high-contrast .c-btn-circle--orange, html.high-contrast .c-btn-circle--green, html.high-contrast .c-btn-circle--blue-light, html.high-contrast .c-btn-circle--blue-mid, html.high-contrast .c-btn-circle--blue-dark, html.high-contrast .c-btn-circle--pink, html.high-contrast .c-btn-circle--peach, html.high-contrast .c-btn-circle--grey-light, html.high-contrast .c-btn-circle--grey, html.high-contrast .c-btn-circle--grey-dark, html.high-contrast .c-btn-circle--white, html.high-contrast .c-btn-circle--apricot, html.high-contrast .c-btn-circle--light-peach { background: #000; border-color: #000; color: #fff; } html.high-contrast .bg-color--charcoal .c-btn-circle--black, html.high-contrast .bg-color--charcoal .c-btn-circle--charcoal, html.high-contrast .bg-color--charcoal .c-btn-circle--orange, html.high-contrast .bg-color--charcoal .c-btn-circle--green, html.high-contrast .bg-color--charcoal .c-btn-circle--blue-light, html.high-contrast .bg-color--charcoal .c-btn-circle--blue-mid, html.high-contrast .bg-color--charcoal .c-btn-circle--blue-dark, html.high-contrast .bg-color--charcoal .c-btn-circle--pink, html.high-contrast .bg-color--charcoal .c-btn-circle--peach, html.high-contrast .bg-color--charcoal .c-btn-circle--grey-light, html.high-contrast .bg-color--charcoal .c-btn-circle--grey, html.high-contrast .bg-color--charcoal .c-btn-circle--grey-dark, html.high-contrast .bg-color--charcoal .c-btn-circle--white, html.high-contrast .bg-color--charcoal .c-btn-circle--apricot, html.high-contrast .bg-color--charcoal .c-btn-circle--light-peach, html.high-contrast .bg-color-n-black [class*="c-btn-circle--"] { background: #fff; border-color: #000; color: #000; } /* Card accent strip → black (live) */ html.high-contrast .c-card__highlight { background: #000 !important; } /* ── Coloured SECTION BACKGROUNDS → light grey #f1f1f3 (live helpers.css) ── Every coloured section goes light grey; WHITE sections and DARK (bg-color-n-black) sections unchanged (dark stays dark). NOTE: .bg-color-grey (#e2dedd sand) is deliberately NOT neutralised — on live the equivalent sections (e.g. homepage services-module "Ready, set, goals") are tagged bg-color--white with the sand grey painted by module CSS, so they KEEP #e2dedd in high-contrast mode. Verified vs live 2026-07. !important: the classes resolve their bg from the overridden --color-* vars (which are now #000) and inline styles exist on some sections. */ html.high-contrast .bg-color-p, html.high-contrast .bg-color-s, html.high-contrast .bg-color-t, html.high-contrast .bg-color-a, html.high-contrast .bg-color-light-blue, html.high-contrast .bg-color-light-grey, html.high-contrast .bg-color-peach, html.high-contrast .bg-color-pink { background-color: #f1f1f3 !important; } /* White text sitting on a NEUTRALISED (formerly coloured) background flips to black so it stays readable — live drops its u-color--* utilities entirely in high contrast; dark sections keep their white text (bg stays dark there). */ html.high-contrast .bg-color-p.font-color-n-white, html.high-contrast .bg-color-s.font-color-n-white, html.high-contrast .bg-color-t.font-color-n-white, html.high-contrast .bg-color-a.font-color-n-white, html.high-contrast .bg-color-light-blue.font-color-n-white, html.high-contrast .bg-color-light-grey.font-color-n-white, html.high-contrast .bg-color-peach.font-color-n-white, html.high-contrast .bg-color-pink.font-color-n-white { color: var(--color-n-black, #282829); } /* Coloured TEXT utilities fall back to the inherited colour in high contrast (live: u-color--* / text-color--orange only apply on html:not(.high-contrast)) */ html.high-contrast .font-color-p, html.high-contrast .font-color-s, html.high-contrast .font-color-t, html.high-contrast .font-color-a { color: inherit; } /* Coloured divider / top-title accent bar → black (live: .high-contrast .coloured-divider{border-color:#000}). !important outranks the per-accent double-class rules in style.css. */ html.high-contrast .top-title::after { background-color: #000 !important; } /* Footer column accents → white in high contrast (live drops the u-color-hover-focus--{pink|blue-light|peach|green} utilities, so headings and links fall back to white on the dark footer) */ html.high-contrast .site-footer [class*="site-footer__col--"] { --col-accent: #fff; } /* Footer social icons: live marks these up as c-btn-circle--{colour} inside the charcoal footer, so in high contrast they go WHITE with a black glyph. Skelly markup uses --social-bg per platform — force it white. */ html.high-contrast .site-footer__social-item { --social-bg: #fff; } /* Live-style double-dash grey panels (e.g. footer contact info bg-color--grey) → #f1f1f3 like every other coloured background */ html.high-contrast .bg-color--grey { background-color: #f1f1f3; } /* Decorative shape/squiggle images (zig-zags, half-circles, chevrons) are coloured SVG s — they can't inherit currentColor, so strip their colour instead (national addition; live has no img decorations) */ html.high-contrast .header-decoration img, html.high-contrast img[src*="zig-zag"], html.high-contrast img[src*="half-circle"], html.high-contrast img[src*="chevron"], html.high-contrast img[src*="circles"], html.high-contrast img[src*="wave"] { filter: grayscale(1); } /* ========================================================= AUX header content (replaces logo when menu open) ========================================================= */ .site-header__aux { display: flex; align-items: center; gap: 3.2rem; flex-wrap: wrap; justify-content: center; } .site-header__aux-slot { display: flex; justify-content: center; width: 100%; } /* Logo slides UP and out when menu opens, aux content slides DOWN and in */ .site-header__logo { transition: transform .35s cubic-bezier(.4,0,0,1), opacity .25s ease; will-change: transform, opacity; } .site-header.is-menu-open .site-header__logo { transform: translateY(-150%); opacity: 0; pointer-events: none; } .site-header__aux-slot { transform: translateY(150%); opacity: 0; transition: transform .35s cubic-bezier(.4,0,0,1) .05s, opacity .25s ease .05s; pointer-events: none; } .site-header.is-menu-open .site-header__aux-slot { transform: translateY(0); opacity: 1; pointer-events: auto; } /* Tablet only (768px–1199.98px): logo stays steady when the megamenu opens; the aux-slot (used by desktop) is hidden so the main nav stays inside the megamenu above the search bar. Placed after the desktop slide rules so the cascade wins (same specificity, later declaration takes precedence). Below 768px the STACKED logo stays put too — live keeps its #logo-gda-stacked in the mobile header at all times (James, 2026-07-16: "768px below, this should be the header logo — right now no header logo"). */ @media (max-width: 1199.98px) { .site-header.is-menu-open .site-header__logo { transform: none; opacity: 1; pointer-events: auto; } .site-header.is-menu-open .site-header__aux-slot { display: none; } } /* Mobile (< 768px): aux-slot stays hidden since the main nav lives inside the megamenu */ @media (max-width: 767.98px) { .site-header.is-menu-open .site-header__aux-slot { display: none; } } /* Stack logo + aux in the same grid cell so they overlap during the swap */ .site-header__col--center { display: grid; align-items: center; justify-items: center; grid-template-areas: "stack"; /* No overflow clipping — would cut the rightmost a11y icon. Logo slide-up is hidden via opacity + pointer-events while it travels above. */ } .site-header__col--center > * { grid-area: stack; } /* ========================================================= Megamenu search — mirrors live .c-header-search styling ========================================================= */ #navigation-search, .nav-horizontal__search { margin: 0 auto; width: 670px; max-width: 100%; /* Hidden by default; slides down when the search icon is clicked (mirrors live) */ max-height: 0; overflow: hidden; opacity: 0; visibility: hidden; transition: max-height .4s cubic-bezier(.4,0,0,1), opacity .3s ease, margin-bottom .4s ease, visibility 0s linear .4s; } #navigation-search.is-open, .nav-horizontal__search.is-open { max-height: 200px; opacity: 1; visibility: visible; margin-bottom: 60px; margin-top: 60px; transition: max-height .4s cubic-bezier(.4,0,0,1), opacity .3s ease .08s, margin-bottom .4s ease, visibility 0s; } .c-header-search { position: relative; } .c-header-search__input { position: relative; display: block; } .c-header-search__input .c-icon { font-size: 110%; color: var(--color-n-black, #282829); display: inline-flex; align-items: center; left: 2.75rem; pointer-events: none; position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; } .c-header-search__input .c-icon svg { width: 2.4rem; height: 2.4rem; } .c-header-search__input input { width: 100%; background: #fff; background-image: none; background-clip: padding-box; border: 2px solid #fff; border-radius: 5px; color: var(--color-n-black, #282829); font-size: 22px; padding: 35px 100px; outline: none; box-shadow: none; -webkit-box-shadow: none; appearance: none; -webkit-appearance: none; -moz-appearance: none; box-sizing: border-box; margin: 0; filter: none; transition: border-color .2s cubic-bezier(.4,0,0,1); } /* Kill any inner shadow Safari / iOS adds on inputs */ .c-header-search__input input, .c-header-search__input input:focus { -webkit-box-shadow: 0 0 0 0 transparent !important; box-shadow: 0 0 0 0 transparent !important; } .c-header-search__input .c-icon { left: 5rem; } .c-header-search__input input::placeholder { color: #69696a; opacity: 1; } .c-header-search__input input:hover, .c-header-search__input input:focus { border: 2px solid var(--color-n-black, #282829); box-shadow: none; } /* ========================================================= Megamenu bottom row (GD initials + feature) ========================================================= */ .site-header__megamenu-bottom { margin-top: 6rem; padding-top: 3rem; display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 2rem; } /* Bottom row: half-circle feature on the LEFT (col 1), GD mark on the RIGHT (col 2). The half-circle is hidden on mobile (see the ≤767 rule); the GD mark stays at all breakpoints. */ .site-header__megamenu-mark { display: flex; justify-content: flex-end; padding-bottom: 4rem; } .site-header__megamenu-mark svg { width: 16rem; height: auto; color: var(--color-n-black, #282829); display: block; } .site-header__megamenu-feature { display: flex; justify-content: flex-start; } .site-header__megamenu-feature .c-icon, .site-header__megamenu-feature svg { display: block; width: 100%; max-width: 90%; height: auto; color: var(--color-n-black, #282829); } @media (max-width: 767.98px) { .site-header__megamenu-bottom { grid-template-columns: 1fr; } .site-header__megamenu-feature { justify-content: flex-start; } } /* ========================================================================== MOBILE MEGAMENU LAYOUT (≤ 991.98px) Layout/ordering lives in the DRAWER block at the end of this file (James, 2026-07-16: [utility nav | a11y] two columns on top of the search). This block keeps the mobile COSMETICS only. ========================================================================== */ @media (max-width: 991.98px) { /* Remove pipe dividers between accessibility buttons on mobile */ .site-header__megamenu-inner .accessibility-controls li::after { display: none !important; } .site-header__megamenu-inner .accessibility-controls { gap: 10px; } .site-header__megamenu-inner .accessibility-controls li { margin: 0; padding: 0; } /* Larger a11y icons on mobile */ .site-header__megamenu-inner .accessibility-controls .c-icon, .site-header__megamenu-inner .accessibility-controls button i { height: 2.5rem; } .site-header__megamenu-inner .accessibility-controls .c-icon svg { height: 2.5rem; } .site-header__megamenu-inner .accessibility-controls__contrast .c-icon, .site-header__megamenu-inner .accessibility-controls__contrast i, .site-header__megamenu-inner .accessibility-controls__contrast .c-icon svg { width: 2.5rem; } /* Search input shrinks to 65px tall on mobile */ .c-header-search__input input { padding: 2rem 2rem 2rem 5.5rem; font-size: 18px; } .c-header-search__input .c-icon { left: 2rem; } .c-header-search__input .c-icon svg { width: 2rem; height: 2rem; } .site-header__megamenu-inner .site-header__megamenu-cols { grid-template-columns: 1fr; row-gap: var(--space-1); /* Don't let the cols container grab extra flex space — accordion expansion should push siblings down, not redistribute rows within the cols grid */ flex: 0 0 auto; align-content: start; } .site-header__megamenu-inner .site-header__megamenu-cols .nav-vertical-wrap:first-child { margin-top: 0; } .site-header__megamenu-bottom { order: 5; display: block; margin-top: auto; padding-top: var(--space-5); padding-bottom: var(--space-4); } /* Half-circle feature shows on the left through tablet (hidden only on mobile). */ .site-header__megamenu-feature { display: flex; } /* ---- Accordion sections ---- */ /* Header row that holds title + chevron toggle side by side */ .nav-vertical-wrap .nav-vertical__header { position: relative; display: block; } .nav-vertical-wrap .nav-vertical__link-main { display: block; cursor: pointer; position: relative; padding: 36px 64px 36px 0; margin: 0; font-size: 22px !important; line-height: 1.2; color: var(--color-n-black, #282829); text-decoration: none; user-select: none; } /* Match nav-horizontal links to mobile scale */ .site-header__megamenu .nav-horizontal__link { font-size: 18px; } /* Accordion sections sit closer together: collapse .nav-vertical's flex gap */ .nav-vertical-wrap .nav-vertical { gap: 0; } /* Toggle button: 44px circle on the right of the title row */ .nav-vertical-wrap .nav-vertical__toggle { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; background: transparent; border: 2px solid currentColor; border-radius: 50%; cursor: pointer; color: inherit; transition: background .2s ease, border-color .2s ease, color .2s ease; } /* SVG chevron centered inside the toggle */ .nav-vertical-wrap .nav-vertical__toggle .nav-vertical__chevron { display: block; position: static; transform: none; width: 20px; height: 12px; } .nav-vertical-wrap.is-open .nav-vertical__toggle { background: #000; border-color: var(--color-p, #ff6e33); color: #fff; } .nav-vertical-wrap .nav-vertical__list { display: flex; max-height: 0; overflow: hidden; opacity: 0; margin-top: 0; gap: 1.8rem; transition: max-height .35s cubic-bezier(.4,0,0,1), opacity .2s ease, margin-top .35s cubic-bezier(.4,0,0,1); } .nav-vertical-wrap.is-open .nav-vertical__list { max-height: 800px; opacity: 1; margin-top: var(--space-4); } .nav-vertical-wrap .nav-vertical__link { font-size: 2rem; } /* Rest state: shorter line on mobile, pulled back up so the extra heading padding doesn't push the line away from the title */ .nav-vertical-wrap .c-link-highlight__elem { width: 32% !important; bottom: 10px; } /* Line grows to 50% ONLY when the title itself is hovered/pressed (opening the accordion via chevron does NOT animate the line) */ .nav-vertical__link-main:hover .c-link-highlight__elem, .nav-vertical__link-main:active .c-link-highlight__elem, .nav-vertical__link-main:focus-visible .c-link-highlight__elem { width: 50% !important; } /* Section heading stays black at all times on mobile — hover, focus, and .is-open */ .nav-vertical-wrap:hover .nav-vertical__link-main, .nav-vertical-wrap.is-open .nav-vertical__link-main, .nav-vertical__link-main, .nav-vertical__link-main:hover, .nav-vertical__link-main:focus-visible, .nav-vertical__link-main:active { color: var(--color-n-black, #282829); } } /* ── Search autocomplete — Awesomplete, EXACT live overrides ── */ .c-header-search { position: relative; } .awesomplete { display: block; position: relative; width: 100%; } .awesomplete mark { background: none; font-weight: 700; } .awesomplete.has-value { border-color: #ff6e33; } .awesomplete > ul { background: #fff; border: none; border-radius: 10px; } /* kill Awesomplete's default caret/arrow at the top of the dropdown. !important so it wins over awesomplete.css regardless of enqueue order. */ .awesomplete > ul:before { content: none !important; display: none !important; border: 0 !important; } .awesomplete > ul li { margin: 0; padding: 12px 40px; } .awesomplete > ul li:before { content: none; } .awesomplete > ul li[aria-selected="true"] { background: rgba(0,0,0,.08); } .awesomplete > ul li[aria-selected="true"], .awesomplete > ul li[aria-selected="true"] mark { color: #282829; } .awesomplete > ul li[aria-selected="true"] mark { background: none; } /* keep input full-width since Awesomplete wraps it inside the flex search input */ .c-header-search__input .awesomplete { flex: 1 1 auto; min-width: 0; } .c-header-search__input .awesomplete > input { width: 100%; } /* the header search panel clips its own box (overflow:hidden for the open/close slide); let the suggestions dropdown escape it when the panel is open, and stack above the megamenu content below. */ .nav-horizontal__search.is-open { overflow: visible !important; } .c-header-search .awesomplete > ul { z-index: 200; } /* ── ACCORDION-MODE megamenu type + toggles (≤991, mobile AND tablet) ── */ @media (max-width: 991.98px) { .nav-tabbed__chevron { width: 44px; height: 44px; background: transparent; border: 2px solid var(--color-n-black, #282829); color: var(--color-n-black, #282829); } .nav-tabbed__tab-link { font-size: 26px; } .nav-horizontal__link { font-size: 20px; font-weight: 300; } .c-header-search__input input { font-size: 22px; font-weight: 300; } } /* ── MOBILE drawer (≤991) — James, 2026-07-16. Order: [utility nav | a11y controls] in TWO COLUMNS above the search field, then the search, then the section accordion, then text-only promo cards (the dog photo doesn't render). The aux wrapper stays a flex box (wrap) so nav + a11y share the top row and the search drops to a full-width second row; the tabbed wrapper flattens for ordering. 992-1199 = desktop structure. ── */ @media (max-width: 991.98px) { .site-header__megamenu-inner .site-header__megamenu-tabbed { display: contents; } .site-header__megamenu-inner .site-header__aux { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 2.4rem; margin-bottom: 1.6rem; } /* No utility menu in the mobile drawer (James, 2026-07-16) */ .site-header__megamenu-inner .nav-horizontal { display: none; } /* a11y buttons top-RIGHT, above the search; the search TOGGLE icon goes — the search box is permanently visible instead */ .site-header__megamenu-inner .site-header__aux .accessibility-controls { order: 2; } .site-header__megamenu-inner .accessibility-controls li:has(.accessibility-controls__search), .site-header__megamenu-inner .accessibility-controls li:has([data-js-search]) { display: none; } .site-header__megamenu-inner #navigation-search, .site-header__megamenu-inner .nav-horizontal__search { max-height: none; overflow: visible; opacity: 1; visibility: visible; } /* the search is a DIRECT child of the inner (not inside aux) */ .site-header__megamenu-inner .site-header__aux { order: 1; } .site-header__megamenu-inner > #navigation-search, .site-header__megamenu-inner > .nav-horizontal__search { order: 2; } .site-header__megamenu-inner .nav-tabbed { order: 3; } .site-header__megamenu-inner .site-header__megamenu-cols { order: 3; } .site-header__megamenu-inner .site-header__feature-panel { order: 4; margin-top: 2.4rem; } .site-header__megamenu-bottom { order: 5; } .site-header__feature-img { display: none; } } /* ── PHONE drawer (≤767) — James, 2026-07-16 ("768px below"): the utility menu comes BACK, stacked vertically BELOW the accordion (Events → Contact), before the promo cards. a11y buttons stay top-right above the always-visible search. aux flattens so its children can be ordered independently. ── */ @media (max-width: 767.98px) { .site-header__megamenu-inner .site-header__aux { display: contents; } /* Live parity: the accessibility controls are NOT shown on mobile at all (live: @media (max-width:47.99em){ .nav-horizontal-with-aux .accessibility-controls{display:none} }). The search box stays permanently visible on mobile, so losing the search-toggle icon in this