/* ========================================================================== Sticky Hero Header - Core Styles ========================================================================== */ :root { --shh-transition: 300ms; --shh-vh: 1vh; } /* FOUC Prevention — ABSOLUTELY FIRST -------------------------------------------------------------------------- 1. PHP injects `.hero-header.hero-transparent-xxx` directly into the server-rendered

class attribute, so the browser has the correct skin from paint 0. 2. Safety net — if ANY element is tagged `.hero-header` but does NOT yet have its transparency variant class applied (e.g. the user is in manual mode and is applying classes via FSE editor, or a cached HTML snapshot from before the render_block filter ran), we hide it completely until JS applies the skin. 3. `body.shh-hero-pending` — PHP sets this on hero pages. While it exists, the above safety-net rule is strengthened with pointer-events so the user can't click a half-styled header. ========================================================================== */ .hero-header:not(.hero-transparent-fully):not(.hero-transparent-contents) { opacity: 0 !important; visibility: hidden; pointer-events: none; } .hero-header:not(.hero-transparent-fully):not(.hero-transparent-contents).hero-active, body:not(.shh-hero-pending) .hero-header:not(.hero-transparent-fully):not(.hero-transparent-contents) { opacity: 1 !important; visibility: visible; pointer-events: auto; } /* Sticky Header Base ========================================================================== */ .sticky-header, .peek-a-boo-header { position: sticky; top: 0; z-index: 999; transition: transform var(--shh-transition) ease-in-out, background-color var(--shh-transition) ease, box-shadow var(--shh-transition) ease, opacity var(--shh-transition) ease; will-change: transform; } /* Peek-a-Boo: Hidden state when scrolling down */ .peek-a-boo-header.peek-a-boo-hidden { transform: translateY(-100%); } /* Peek-A-Boo: Visible state when scrolling up */ .peek-a-boo-header.peek-a-boo-visible { transform: translateY(0); } /* Hero Header Base -------------------------------------------------------------------------- The Hero Header is position:fixed and stays fixed for ALL time (before and after the trigger point). This means it NEVER participates in the document flow, so page content below it occupies the exact same vertical position whether the hero is transparent or opaque. INITIAL LOAD — ZERO TRANSITION PHP adds the `shh-hero-no-transition` class to on hero pages. While that class is present (below), all transition durations on the hero and its children are overridden to 0 ms. This means: • The transparent header renders instantly on load. • No flash of solid header, no 400 ms "fade INTO transparent". • Opaque/visible children in `contents_visible` mode draw correctly from frame 0 — they are never "faded in". AFTER THE FIRST TRIGGER — USER-CONFIGURED TRANSITION SPEED `triggerHeroState()` in JS removes `shh-hero-no-transition` from . From that point on, removing/adding the transparency class (trigger or scroll-back above trigger) animates background-color, opacity, box-shadow, border-color, and transform at exactly the user's configured Trigger Transition Speed. ========================================================================== */ .hero-header { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 999; transition: background-color var(--shh-transition) ease, opacity var(--shh-transition) ease, transform var(--shh-transition) ease, box-shadow var(--shh-transition) ease, border-color var(--shh-transition) ease; } /* Every block INSIDE the hero header (wp-block-group, wp-block-column, wp-block-row, buttons, search, decorative separators, etc.) also needs a transition declaration on the exact properties that the Contents-Visible transparent-state rules neutralize. Without this, at trigger time the inner blocks would snap from transparent back to their editor/theme native styles instead of fading in. This rule matches all descendants (`.hero-header *`) and covers the same property set that is later reset by `.hero-header.hero-transparent-contents * { property: transparent !important; }`. Because the `!important` override is removed (trigger removes the class) at the EXACT same tick that the `shh-hero-no-transition` body guard (below) is lifted, the browser sees a before/after value pair for each property and animates it over `var(--shh-transition)` ms — i.e. exactly the user's Trigger Transition Speed setting. */ .hero-header * { transition: background-color var(--shh-transition) ease, background-image var(--shh-transition) ease, background var(--shh-transition) ease, box-shadow var(--shh-transition) ease, text-shadow var(--shh-transition) ease, border-color var(--shh-transition) ease, border-top-color var(--shh-transition) ease, border-right-color var(--shh-transition) ease, border-bottom-color var(--shh-transition) ease, border-left-color var(--shh-transition) ease, outline var(--shh-transition) ease, filter var(--shh-transition) ease, backdrop-filter var(--shh-transition) ease, opacity var(--shh-transition) ease; } /* While the initial-load "no transition" guard is on , override every transition anywhere on the hero and its descendant subtree to 0 duration. Nothing fades — everything is at its final transparent value from the very first paint. */ body.shh-hero-no-transition .hero-header, body.shh-hero-no-transition .hero-header * { transition: none 0s !important; animation: none 0s !important; } /* Hero Header: Transparent mode - header and contents fully transparent. Everything — the header wrapper, any inner group blocks, logo, nav, title, you name it — fades to zero opacity. The user literally sees nothing in the header position until the trigger reveals it. */ .hero-header.hero-transparent-fully { background-color: transparent !important; background-image: none !important; opacity: 0; pointer-events: none; box-shadow: none !important; border: none !important; border-color: transparent !important; outline: none !important; } .hero-header.hero-transparent-fully * { opacity: 0 !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; border-color: transparent !important; outline: none !important; } /* Hero Header: Transparent mode — CONTENTS VISIBLE. -------------------------------------------------------------------- User setting = "Header contents visible". Semantics: only these three specific content families are opaque: 1. Site Title (.wp-block-site-title, its anchor child) 2. Site Logo (.wp-block-site-logo, its img, any inner wrapper) 3. Navigation (.wp-block-navigation, .wp-block-navigation-item, .wp-block-page-list, .wp-block-navigation-submenu — everything inside the menu) Everything ELSE inside the hero header is 100 % transparent: - The

element itself (no background/shadow/border) - Inner wp-block-group / wp-block-column / wp-block-row wrappers - Any wp-block-social-links, wp-block-search, wp-block-buttons - Background images, gradients, separators, decorative elements - Borders, outlines, shadows, rings, filters, backgrounds At the trigger point (.hero-transparent-contents is REMOVED and .hero-active is ADDED) ALL of the above chrome fades in at the user-configured --shh-transition speed, via the transitions that are already declared on the base .hero-header rule. -------------------------------------------------------------------- */ /* First pass: make EVERYTHING inside the transparent hero header transparent. Star selector catches every wp-block-group, column, decorative separator, button, search form, spacer, etc. that a user may have dropped into the header template-part in the FSE. */ .hero-header.hero-transparent-contents { background-color: transparent !important; background-image: none !important; background: transparent !important; box-shadow: none !important; border: none !important; border-color: transparent !important; border-top-color: transparent !important; border-right-color: transparent !important; border-bottom-color: transparent !important; border-left-color: transparent !important; outline: none !important; text-shadow: none !important; filter: none !important; backdrop-filter: none !important; } .hero-header.hero-transparent-contents * { background-color: transparent !important; background-image: none !important; background: transparent !important; box-shadow: none !important; text-shadow: none !important; border-color: transparent !important; border-top-color: transparent !important; border-right-color: transparent !important; border-bottom-color: transparent !important; border-left-color: transparent !important; outline: none !important; filter: none !important; backdrop-filter: none !important; } /* Second pass: explicit whitelist. The 3 content families the user DOES want to see opaque on initial load. Keep their background / borders / shadows / opacity / text color as inherited from theme (so a logo img shows, site title has theme color, nav links have hover/focus styling when appropriate, etc.) We deliberately use a broader set of selectors than the pre-1.0.1 code to catch nav submenus, page-lists, columns inside nav that hold an inline logo, etc. */ .hero-header.hero-transparent-contents .wp-block-site-title, .hero-header.hero-transparent-contents .wp-block-site-title *, .hero-header.hero-transparent-contents .wp-block-site-title a, .hero-header.hero-transparent-contents .wp-block-site-logo, .hero-header.hero-transparent-contents .wp-block-site-logo *, .hero-header.hero-transparent-contents .wp-block-site-logo img, .hero-header.hero-transparent-contents .wp-block-site-logo a, .hero-header.hero-transparent-contents .wp-block-site-tagline, .hero-header.hero-transparent-contents .wp-block-site-tagline *, .hero-header.hero-transparent-contents .wp-block-navigation, .hero-header.hero-transparent-contents .wp-block-navigation *, .hero-header.hero-transparent-contents .wp-block-navigation a, .hero-header.hero-transparent-contents .wp-block-navigation-item, .hero-header.hero-transparent-contents .wp-block-navigation-item *, .hero-header.hero-transparent-contents .wp-block-navigation-item a, .hero-header.hero-transparent-contents .wp-block-navigation-link, .hero-header.hero-transparent-contents .wp-block-navigation-link *, .hero-header.hero-transparent-contents .wp-block-navigation-submenu, .hero-header.hero-transparent-contents .wp-block-navigation-submenu *, .hero-header.hero-transparent-contents .wp-block-page-list, .hero-header.hero-transparent-contents .wp-block-page-list *, .hero-header.hero-transparent-contents .wp-block-page-list a, .hero-header.hero-transparent-contents .wp-block-home-link, .hero-header.hero-transparent-contents .wp-block-home-link *, .hero-header.hero-transparent-contents .wp-block-home-link a { background-color: inherit !important; background-image: inherit !important; background: inherit !important; box-shadow: inherit !important; border-color: inherit !important; border-top-color: inherit !important; border-right-color: inherit !important; border-bottom-color: inherit !important; border-left-color: inherit !important; outline: inherit !important; text-shadow: inherit !important; filter: inherit !important; backdrop-filter: inherit !important; opacity: 1 !important; visibility: visible !important; color: inherit; } /* Hero Header: Active (triggered) state. Removes the transparent overlay look; the header now simply "looks solid" (inherits theme background-color, box-shadow, etc.) while remaining position:fixed. Page content below does not move. */ .hero-header.hero-active { /* Position: fixed is retained (inherited from .hero-header base). No layout changes — only transparency classes are removed. */ z-index: 999; } /* Hero + Sticky combined (auto applied): keep fixed positioning */ .hero-header.sticky-header.hero-active { position: fixed; } /* Hero + Peek-a-Boo combined: show/hide still works on the fixed element */ .hero-header.peek-a-boo-header.hero-active.peek-a-boo-hidden { transform: translateY(-100%); } .hero-header.peek-a-boo-header.hero-active.peek-a-boo-visible { transform: translateY(0); } /* Fix for admin bar offset When WP admin bar is visible, we need to adjust the top position */ .admin-bar .sticky-header, .admin-bar .peek-a-boo-header, .admin-bar .hero-header { top: 32px; } @media screen and (max-width: 782px) { .admin-bar .sticky-header, .admin-bar .peek-a-boo-header, .admin-bar .hero-header { top: 46px; } } /* Hero active state with admin bar – keep correct top offset while fixed */ .admin-bar .hero-header.hero-active { top: 32px; } @media screen and (max-width: 782px) { .admin-bar .hero-header.hero-active { top: 46px; } } /* Mobile Menu Transitions ========================================================================== */ .wp-block-navigation__responsive-container.is-menu-open { transition: opacity calc(var(--shh-transition) * 0.8) ease, transform calc(var(--shh-transition) * 0.8) ease; } .wp-block-navigation__responsive-container.is-menu-open.shh-closing { opacity: 0; transform: translateY(-10px); pointer-events: none; } /* Smooth transitions for all header interactions ========================================================================== */ .shh-header-transitioning { transition: all var(--shh-transition) ease-in-out !important; } /* Ensure header covers full width in block themes */ .wp-block-template-part:has(.sticky-header), .wp-block-template-part:has(.peek-a-boo-header), .wp-block-template-part:has(.hero-header) { margin: 0; padding: 0; width: 100%; } /* When the

itself has the hero classes applied (render_block filter does this), the header element is position:fixed which removes it from flow. The wrapper element must not collapse in a way that causes a subtle FOUC — keep 0-height (it has no rendered children in flow), but allow overflow visible so the fixed child paints on top of the rest of the content. */ header.wp-block-template-part.hero-header, .wp-block-template-part:has(.hero-header) { height: 0; min-height: 0; overflow: visible; transform-origin: 0 0; }