/* ═══════════════════════════════════════════════════════════════════ THAMES 2026 — Header V2 + Mega Menu + Mobile Overlay Ported from the Figma mockup (_mockups/thames-header-menu-build-mock.html). Enqueued standalone (see functions.php: thames_enqueue_header_v2) — independent of the legacy assets/css/sass/screen.scss pipeline. ═══════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,600;0,700;1,400&display=swap'); :root { --navy: #4B6079; --navy-dark: #33445A; --steel: #7891A4; --gold: #A7754D; --gold-light: #C79D74; --cream: #F5F0ED; --white: #ffffff; --font-header: 'Source Sans Pro', -apple-system, sans-serif; --bp-desktop: 992px; } /* screen.css sets `body { overflow-x: hidden; }` — body is #deskHeader's direct parent, and having ANY non-visible overflow on a sticky element's ancestor neutralizes position:sticky in browsers (it silently falls back to behaving like static — computed style still reports "sticky", but it never actually pins to the viewport as you scroll). html already has the same overflow-x:hidden, so it still clips horizontal overflow at the true document root — removing the redundant one on body is safe and unblocks sticky for its children. */ body { overflow-x: visible !important; } /* screen.css also has a bare `section { padding-top: 20vw; }` — matches ANY
, including the page-content wrapper (
, opened in header.php, closed in footer.php), creating a large blank gap below the header. That gap compensated for the OLD theme's fixed- position header; our V2 header is sticky-in-flow so it's not needed. Do NOT strip the "pad" class or swap the tag to fix this (tried that — pod-global-styling.css has dozens of legitimate rules scoped to `section.pad` — headings, paragraphs, buttons, and critically the accreditation-logo badge sizing `section.pad .images img { height:50px }` — killing the class broke all of that). `section.pad` (element+class) naturally outranks the bare `section` (element-only) selector on specificity alone, so this alone is enough — no other section.pad content styling is touched. */ section.pad { padding-top: 0 !important; } /* Root cause of the ~15px white gap under #deskNav (confirmed via injected getComputedStyle measurements, not guesswork): sections/global/global.css has a bare `.section{width:100%;clear:both;display:block;float:left}` — every flexible-content block from page-main.php (section.section-hero, section.section-usps, etc.) carries the literal class "section", so ALL of them are floated. The
wrapper page-main.php puts around each one is a plain display:block box with overflow:visible, which does NOT establish a block-formatting-context — so it never contains its floated child and collapses to zero height (confirmed: section.hero measured top=234/bottom=234/height=0 while its floated .section.section-hero child rendered a full 720px starting at that same top). That collapse is what created the gap, and it happens between EVERY stacked section on EVERY page, not just under the nav. Fix: give each wrapper its own block-formatting-context so it contains the float, without touching the shared legacy `.section{float:left}` rule itself (removing that would ripple across every section-based page on the site). */ main#primary > section { display: flow-root !important; } /* Legacy sections/global/global.css has a bare `a:hover { text-decoration: underline; }` (specificity beats our unqualified base link rules since it also matches during hover) that put an underline on every header/ mega-menu/mobile-overlay link on hover, alongside its own steel color. */ .d-header a:hover, .m-header a:hover, .mob-overlay a:hover { text-decoration: none !important; } /* base.css also has a bare `a:hover, a:focus, a:active { color: #191970; }` (navy-blue). Our own class-based :hover rules already beat it on specificity for properties we declare — but several of ours never declared a hover color at all, so it fell straight through unopposed (e.g. .d-cta's white text would flip to navy-on-navy = invisible on hover; .mob-book-btn/.mob-phone-link the same). Likewise pod-global- styling.css/base.css have `button:hover { background: #5a7b99 }` and `button:hover, ...:hover { border-color: #ccc #bbb #aaa }` with NO :not() exclusions at all (unlike the base-state button resets), so even .mega-tab — otherwise safe via [role="tab"] — picks up a stray blue-grey hover background. Covering every hover/focus/active state explicitly here, not just the base state. */ #deskNav .d-nav-item:hover, #deskNav .d-nav-item:focus, #deskNav .d-nav-item:active, #hamBtn:hover, #hamBtn:focus, #hamBtn:active, #mobOverlay .mob-cat-btn:hover, #mobOverlay .mob-cat-btn:focus, #mobOverlay .mob-cat-btn:active, button.mega-tab:hover, button.mega-tab:focus, button.mega-tab:active { background: none !important; border: none !important; } #mobCloseBtn:hover, #mobCloseBtn:focus, #mobCloseBtn:active { background: transparent !important; border: 1px solid rgba(75,96,121,0.3) !important; } .d-cta:hover, .d-cta:focus, .d-cta:active { color: var(--white) !important; } .mob-book-btn:hover, .mob-book-btn:focus, .mob-book-btn:active { color: #fff !important; } .mob-phone-link:hover, .mob-phone-link:focus { color: #fff !important; } .mob-link-row:hover, .mob-link-row:focus { color: var(--gold) !important; } .mob-sec-row:hover, .mob-sec-row:focus { color: var(--gold) !important; } /* sections/global/global.css also has a bare `a, a:visited { color: #476179; text-decoration: none; font-size: 1.6rem; }` for the BASE (non-hover) state. Every real nav/menu link already declares its own color+font-size via a more specific class rule, so those are unaffected — confirmed via computed styles at both desktop and mobile widths (this theme's root font-size is set in vw units, so rem-based legacy sizing swings wildly by viewport; ours are all fixed px, immune either way). The one actual leak: .d-logo/.m-logo/.mob-hd-logo never declare a color at all (they only wrap an , so it's invisible today) — closing it anyway so it doesn't show legacy blue-grey text if the logo image ever fails to load. */ .d-logo, .mob-hd-logo { color: var(--navy); } .m-logo { color: #fff; } /* `a:visited` (element + pseudo-class) has HIGHER specificity than a bare class like .d-nav-sec (element+pseudo-class beats a single class on the b-tier: 0,1,1 vs 0,1,0) — so once a link has actually been visited, `a, a:visited { color: #476179; }` wins outright over our class rules, regardless of any of the fixes above. Browsers deliberately hide :visited styling from getComputedStyle()/JS (privacy protection against history-sniffing), so this can't be verified via Playwright the way everything else has been — fixing from specificity math alone. */ .d-nav-sec:visited { color: rgba(255,255,255,0.92); } .d-phone:visited { color: var(--navy); } .d-cta:visited { color: var(--white); } .mega-link:visited { color: var(--navy); } .mob-link-row:visited { color: var(--navy); } .mob-sec-row:visited { color: var(--navy); } .mob-book-btn:visited { color: #fff; } .mob-phone-link:visited { color: #fff; } .d-logo:visited, .mob-hd-logo:visited { color: var(--navy); } .m-logo:visited { color: #fff; } /* ═══════════════════════════════════════════════════════════════════ AWARD RIBBON — non-sticky, scrolls away with the page ═══════════════════════════════════════════════════════════════════ */ .d-ribbon { display: none; position: relative; background: var(--cream) url('../img/ageing-pink.jpg') repeat-x left center; background-size: auto 100%; height: 55px; align-items: center; justify-content: center; font-family: var(--font-header); overflow: hidden; } @media (min-width: 992px) { .d-ribbon { display: flex; } } /* Message stack: each row is absolutely stacked on the others and crossfades in/out — RibbonRotator (header-v2.js) toggles .is-active every few seconds. A single message just sits there, permanently active. */ .d-ribbon-text { position: absolute; left: 0; right: 0; padding: 0 60px; text-align: center; font-size: 16px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gold); opacity: 0; transform: translateY(6px); transition: opacity 0.5s ease, transform 0.5s ease; pointer-events: none; } .d-ribbon-text.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; } /* ═══════════════════════════════════════════════════════════════════ DESKTOP HEADER — logo bar + nav bar, sticky in-flow ─────────────────────────────────────────────────────────────────── #deskHeader / #deskNav / #mHeader (element+ID, not just a class) — the legacy `header { position:fixed; ... }` and `nav:not(.woocommerce-MyAccount-navigation) { position:fixed; width:65vw/ 83vw/70vw at various breakpoints; ... }` rules in screen.css and pod-global-styling.css style ANY
/