/* ========================================================================= MOCKUP-03-IMAGE — homepage-only transparent header override ------------------------------------------------------------------------- Loaded ONLY on the root index.html, AFTER the shared styles.css, so these rules win by source order without needing extra specificity hacks. Nothing here is referenced by MOCKUP-01-LIGHT or MOCKUP-02-DARK — this file lives exclusively inside MOCKUP-03-IMAGE and those two mockups are untouched. MECHANISM: on load the header sits ABSOLUTE over the hero (transparent, dark-theme tokens, dark logo) so the hero photo shows through the bar. home-header.js toggles a ".is-scrolled" class on once the user scrolls past 50px; that class switches the header back to its normal sticky/solid/light presentation (white bg, dark logo->light logo, dark nav text). All colour/position changes transition together so the swap never looks like a hard cut. ========================================================================= */ /* Local fallback for the header's real rendered height, scoped to this page only (does NOT touch the shared --header-height token in styles.css, so MOCKUP-01-LIGHT/02-DARK are unaffected). --header-height is 72px but is only a min-height on .header-inner — .header-inner's own vertical padding (--sp-2, 8px top+bottom) pushes the header's ACTUAL rendered height to 89px. This is a measured value (Playwright getBoundingClientRect(), not an estimate), so first paint already lands in the right place before home-header.js's runtime measurement (--actual-header-height) even runs — there is no fallback-then-correct flicker on load. The JS measurement still runs afterwards purely as defense-in-depth, in case styles.css ever changes the header's padding/content and 89px stops being accurate. */ .home-transparent-header{ --home-header-height-fallback:89px; } /* ---- Base (top-of-page) state: header floats transparently over the hero ---- */ .home-transparent-header .site-header{ position:absolute; top:0; left:0; right:0; background:transparent; border-bottom-color:transparent; transition:background-color .3s ease, border-color .3s ease, box-shadow .3s ease; } /* Hero needs to sit behind the header now that the header floats over it instead of pushing it down — but ONLY the background photo should visually extend that far up; .hero-inner (headline/tagline/CTA) must keep the exact same distance from the header that MOCKUP-01-LIGHT/02-DARK use (.hero's own padding:var(--sp-7) var(--sp-4), untouched). The maths: 1. .site-header switches to position:absolute above, which takes it OUT of normal flow — .hero--home therefore already starts at true y=0 with no margin-top needed here. (An earlier version of this rule added a redundant -H margin-top "to pull the hero up under the header" — the hero was already there once the header left the flow, so that extra shift pulled it PAST y=0 and under-shot the intended gap; do not reintroduce a margin-top here.) 2. .hero-slides (the photo layer, position:absolute, inset:0 relative to .hero--home's own box, which starts at y=0) therefore ALREADY paints from y=0 with no extra offset — it already covers the area behind the floating header by default. No rule needed here either. 3. .hero-inner gets padding-top equal to one header-height H, ADDED ON TOP of .hero--home's own existing padding-top (--sp-7/64px, untouched). Since .hero--home starts at y=0, .hero-inner's text begins at y = 64px (original) + H (this rule) = 64+H. The header (absolute, height H) ends at y=H. Gap between them = (64+H) - H = 64px, matching MOCKUP-01-LIGHT/02-DARK's spacing regardless of the header's real height H — this is the actual fix (a prior attempt also added an offset to .hero-slides/.hero--home, which cancelled out this gap; see point 1). HEIGHT SOURCE for H: --header-height (72px, from styles.css) is only a min-height on .header-inner — the header's REAL rendered height is taller once .header-inner's own padding is added (measured 89px). --actual- header-height (measured live by home-header.js) is read first, falling back to the accurate 89px --home-header-height-fallback (declared above) if JS hasn't run yet — e.g. the instant of first paint, before DOMContentLoaded. Because that fallback is itself the correct measured value, first paint already lands in the right place with no fallback-then-correct flicker. */ .home-transparent-header .hero--home .hero-inner{ padding-top:var(--actual-header-height, var(--home-header-height-fallback)); } /* Logo crossfade: both images already ship in the markup (brand-logo-img--light / --dark). Instead of the shared styles.css hard "display:none" swap, this file fades between them with opacity so the header transition feels smooth rather than an instant cut. */ .home-transparent-header .brand-mark{position:relative;} .home-transparent-header .brand-logo-img{ transition:opacity .3s ease; } .home-transparent-header .brand-logo-img--light{ display:block; opacity:0; position:absolute; inset:0; } .home-transparent-header .brand-logo-img--dark{ display:block; opacity:1; } /* Nav text stays legible over the photo via the same --header-text tokens the dark theme already defines (white text, white hover) — see styles.css [data-header-theme="dark"] block. Reusing those tokens (rather than inventing new ones) is what keeps this override small. */ /* ---- Extra top-of-hero overlay, ONLY for the header zone ---------------- styles.css already layers a red overlay on .hero-slides::after that goes LIGHT-at-top -> DARK-at-bottom (to protect the headline text lower down). That overlay is untouched here. This adds a SEPARATE charcoal layer on top of it that runs the opposite way — DARK-at-top -> transparent by the time it reaches .hero-inner — purely so the logo/nav sitting in the transparent header zone keep AA contrast against a bright photo. It fades out well before the headline text, so it never fights the scroll-header logic (position/background swap in the rules above) or the existing red overlay's own contrast job. Contrast check: worst case is a near-white photo region. White nav text (.nav-trigger, --header-text:#fff) needs >=4.5:1. rgba(38,39,41,0.55) (charcoal @ 55%) over near-white composites to a base dark enough that, combined with the red overlay already underneath, white text clears 4.5:1 across the full header band; alpha fades to 0 well above the header's own height (see --actual-header-height note above), so it never intrudes on the headline. Gradient stops are expressed relative to --actual-header-height (falling back to --home-header-height-fallback, 89px measured) rather than a hardcoded px value, so they track the header's real height too. */ .home-transparent-header .hero--home .hero-slides::before{ content:""; position:absolute; inset:0; /* No explicit z-index needed: both this and .hero-slides::after are translucent and sit inside the same .hero-slides stacking context (z-index:0), above the photo layers and below .hero-inner (z-index:2) — paint order between the two overlays doesn't matter since both are see- through and only ever darken, never fully occlude, what's beneath. */ background-image:linear-gradient( to bottom, rgba(38,39,41,0.55) 0, rgba(38,39,41,0.30) var(--actual-header-height, var(--home-header-height-fallback)), rgba(38,39,41,0) calc(var(--actual-header-height, var(--home-header-height-fallback)) * 2) ); pointer-events:none; transition:opacity .3s ease; } /* Once scrolled, the header is solid white and no longer sits over the photo, so this darkening layer is no longer doing any job — fade it out to avoid an unnecessary dark band lingering under a header that has already left. */ .home-transparent-header.is-scrolled .hero--home .hero-slides::before{ opacity:0; } /* ---- Scrolled state: solid white bar, light-theme tokens, light logo ---- */ .home-transparent-header.is-scrolled .site-header{ position:sticky; background:#fff; border-bottom-color:var(--color-gray-200); box-shadow:var(--shadow-sm); /* Re-declare the light-theme header tokens locally: --header-theme stays "dark" on (it still governs mobile drawer background etc.), so without this override the scrolled bar would keep dark-theme colours on a white background and fail contrast. */ --header-text:var(--color-charcoal); --header-text-hover:var(--color-primary); --header-badge-bg:var(--color-primary); --header-badge-text:#fff; --header-search-bg:var(--color-gray-50); --header-search-border:var(--color-gray-200); --header-search-text:var(--color-text); --header-search-icon:var(--color-gray-600); } .home-transparent-header.is-scrolled .brand-logo-img--light{opacity:1;} .home-transparent-header.is-scrolled .brand-logo-img--dark{opacity:0;} /* Mobile hamburger drawer already opens as an opaque panel (--header-mobile-bg), so no extra rule is needed there: once .nav-open is toggled the icon sits on a solid surface regardless of scroll state. Only the collapsed bar's own background/logo/text need the transparent<->solid swap above. */ @media (prefers-reduced-motion: reduce){ .home-transparent-header .site-header, .home-transparent-header .brand-logo-img, .home-transparent-header .hero-slides::before{ transition:none; } } /* ========================================================================= MOCKUP-03-IMAGE-ONLY: hero slider photos + 3-zone overlay gradient ------------------------------------------------------------------------- Overrides styles.css's .hero-slide--1/--2 background-image and .hero-slides::after overlay, scoped under .home-transparent-header (a class that only ever appears on this page's ). styles.css itself is NOT edited, so MOCKUP-01-LIGHT and MOCKUP-02-DARK (which both load that same physical file) keep their original two skyline photos and two-stop red/deep-red overlay untouched. Photos: see assets/img/hero/_credits-mockup-03.txt for source/license. url() below resolves relative to THIS file (assets/), matching the img/hero/ convention styles.css already uses. OVERLAY: replaces the inherited 2-stop vertical red wash with a 3-zone multi-stop gradient per client request: 1. TOP — near-black, highest opacity (0.92 at the very top): keeps the floating header's logo/nav text at WCAG AA over a bright photo (same job the pre-existing .hero-slides::before charcoal layer already does for the header band specifically; this ::after zone reinforces it for the rest of the upper hero). 2. MIDDLE — no longer near-0: carries a deliberate dark wash (0.45-0.55) so headline/tagline/CTA text (.hero-inner sits across this vertical band) stays legible over ANY photo, not just calm ones. Photo is still visible through the wash, just no longer "undimmed" — text readability now wins over showing the photo at full/true colour here. 3. BOTTOM — brand red (#7A232E / --color-primary-deep), raised to a heavier wash (0.60 at the very bottom) per client request, still short of the inherited 0.80-alpha solid red block so it reads as a strong accent rather than a flat block. Third pass (client asked to raise opacity across ALL THREE zones, including a middle zone that was previously left "nearly 0" specifically so the photo would dominate there — that requirement is now superseded by "text legibility above all else"): top 0.88->0.92, middle 0->0.45/0.55, bottom 0.46->0.60. All stops re-checked visually so black->dark-middle and dark-middle->red handoffs stay smooth ramps with no visible seam; the photo remains visible (never fully opaque) at every stop. */ .home-transparent-header .hero-slide--1{ background-image:url("img/hero/hero-03.jpg"); } .home-transparent-header .hero-slide--2{ background-image:url("img/hero/hero-04.jpg"); } .home-transparent-header .hero-slides::after{ background-image:linear-gradient( to bottom, rgba(20,20,22,0.92) 0%, rgba(20,20,22,0.62) 18%, rgba(20,20,22,0.45) 38%, rgba(30,18,20,0.55) 58%, rgba(122,35,46,0.48) 82%, rgba(122,35,46,0.60) 100% ); }