/* ========================================================================== ITV STORE — HEADER (loaded on every template; header is a global part) ========================================================================== */ /* 0.1.27/0.1.28: two white horizontal gaps were visible — between .itv-utility and .itv-header, and between .itv-header and .itv-navbar. ROOT CAUSE, confirmed directly against the live DOM's actual matched CSS rules (not assumed): WordPress's global-styles engine injects ":root :where(.is-layout-flow) > * { margin-block: 1.75rem 0px; }" (theme.json's sitewide styles.spacing.blockGap) into an inline stylesheet printed in . ".itv-site-header" (parts/header.html) is a "layout":{"type":"default"} (flow) group with no blockGap override, so its three children — .itv-utility, .itv-header, .itv-navbar — each get margin-block-start: 1.75rem (28px) from that rule. The visible "white" is the page's own background showing through that margin, not a colored element. 0.1.27 ATTEMPTED TWO FIXES, BOTH CONFIRMED INEFFECTIVE ON LIVE, WITH THE EXACT REASON WHY: 1. parts/header.html's outer group was given "style":{"spacing":{"blockGap":"0"}}, expected to render as an inline style="--wp--style--block-gap:0" on
. Confirmed via live DOM inspection: that inline style attribute is simply absent from the rendered markup — WordPress's block-supports style engine did not apply it the way a hand-authored static block template part apparently needed it to (unlike blocks placed through the actual block editor, which get this generated for them). 2. This file's own ".itv-site-header, .itv-utility, .itv-header, .itv-navbar { margin: 0; }" WAS confirmed present and loading correctly (verified via a cache-bypassed fetch of the live, deployed CSS bundle) — it simply LOST the cascade. ":root :where(.is-layout- flow) > *" and a plain ".itv-header" selector have the EXACT SAME specificity (0,1,0) — :root counts as one pseudo-class, :where() always contributes zero, and a single class also equals one. With equal specificity, whichever rule is later in the merged/bundled stylesheet order wins, and WordPress's rule was winning that coin flip. This was a genuine specificity tie, not a deployment failure — confirmed by matching the live element against every stylesheet rule that touches its margin. REAL FIX below: a selector with deliberately HIGHER specificity — two classes via a direct child combinator — that beats WordPress's rule outright regardless of stylesheet order, with no !important needed. 0.1.31: .itv-header and .itv-navbar are no longer DIRECT children of .itv-site-header — they're now wrapped in .itv-sticky-wrap (added this release for the single-sticky-wrapper behavior below), so ".itv-site-header > .itv-header" no longer matches anything and would have silently let the exact same white-gap bug back in. Updated to match the new nesting, and .itv-sticky-wrap itself — now the second direct child of .itv-site-header, after .itv-utility — needs the same treatment, since it's just as subject to the sitewide blockGap rule as .itv-header/.itv-navbar were. 0.1.34: .itv-sticky-placeholder (new this release, see the fixed-on- scroll rule further down) is a third direct child of .itv-site-header and needs the exact same treatment — without it, the sitewide blockGap rule would give it a 28px top margin, reintroducing this same white-gap bug on the new element. */ .itv-site-header > .itv-utility, .itv-site-header > .itv-sticky-wrap, .itv-site-header > .itv-sticky-placeholder, .itv-sticky-wrap > .itv-header, .itv-sticky-wrap > .itv-navbar { margin: 0; } /* 0.1.29: a second, separate white gap remained — between the header template part and the page's own content — after 0.1.28 fixed the three gaps *inside* the header. Same underlying mechanism (WordPress's sitewide theme.json blockGap, this time applied one level up: every direct child of
after the first gets margin-block-start via ":where(.wp-site-blocks) > * { margin-block: 1.75rem 0px; }" — confirmed by walking the live stylesheet rules that matched the actual next element on each page type). That "first content element after the header" is NOT the same element on every page type — confirmed live on all three requested page types: - Homepage (templates/front-page.html / index.html):
- Product page (WooCommerce's classic single-product template):
, which sits BEFORE #main - Category archive (WooCommerce's ClassicTemplate archive render, which never uses a
wrapper at all — see the 0.1.17 admin-safety-audit.md finding):
Naming each of those three specifically would be fragile (a future WooCommerce or plugin change could introduce yet another first element). Targeting the ADJACENCY itself instead is general and correct regardless of what that first element turns out to be: */ .wp-site-blocks > header.wp-block-template-part + * { margin-block-start: 0; } /* 0.1.36: white/light theme replacing black/dark — see CHANGELOG.md 0.1.36. Yellow is used as an underline/background accent throughout this file, never as text color on a light background: solid #FEDC23 text on white is roughly 1.6:1 contrast, well under WCAG's 4.5:1 (text) / 3:1 (UI component) minimums. Where the approved design calls for a yellow hover accent, it's paired with dark text plus an underline, or replaced with #B89B00 (a darker, accessible yellow) — same technique used throughout footer.css. */ .itv-utility { background: #F5F5F5; color: #333333; border-bottom: 1px solid #E6E6E6; font-size: 12.5px; } .itv-utility .itv-utility-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 36px; max-width: 1320px; margin-inline: auto; padding-inline: var(--pad-inline); } .itv-utility .u-left, .itv-utility .u-right { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .itv-utility a { color: inherit; } .itv-utility a:hover { color: #0B0B0B; text-decoration: underline; text-decoration-color: var(--c-yellow); text-decoration-thickness: 2px; } .itv-utility .icon { width: 14px; height: 14px; color: #555555; } /* 0.1.34: position:sticky is no longer used at all. 0.1.31-0.1.33 each confirmed the theme's OWN sticky CSS was correct on the origin server, but production repeatedly served it from a stale cached copy — first Hostinger's hCDN, then a database-level template-part override, then LiteSpeed's separate CSS Combine/Minify optimizer cache (see CHANGELOG.md 0.1.28/0.1.32/0.1.33) — three different caching layers, each requiring its own workaround. Rather than keep chasing a fourth possible cache layer, .itv-sticky-wrap is now fixed-on-scroll instead: plain position:relative at rest, switched to position:fixed by assets/js/itv-sticky-header-v2.js once the user has scrolled past the utility bar, with a placeholder element holding its vacated space so the page never jumps. This has no dependency on how any layer chooses to cache the CSS. Normal (in-flow) state — no ancestor of this element has any transform, filter, perspective, or contain property (re-verified 0.1.33; nothing in base.css/style.css touches an ancestor of .itv-site-header), so a later position:fixed on .itv-is-fixed is guaranteed relative to the viewport, not a transformed ancestor. */ .itv-sticky-wrap { position: relative; width: 100%; } /* Fixed state — added by JS only, never by CSS alone. Shadow lightened 0.1.34's rgba(0,0,0,.14) -> rgba(0,0,0,.08) for the white theme, per instruction — a shadow tuned for a dark header read as too heavy once the header itself turned white. */ .itv-sticky-wrap.itv-is-fixed { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 9999; box-shadow: 0 4px 14px rgba(0,0,0,.08); } /* Admin bar: only relevant once .itv-is-fixed is applied — in normal flow the wrapper is already correctly positioned below the admin bar via WordPress's own "html { margin-top }" push, same as every other in-flow element on the page. 782px matches WordPress core's own admin-bar breakpoint (wp-admin/css/admin-bar.min.css), not an arbitrary value. */ body.admin-bar .itv-sticky-wrap.itv-is-fixed { top: 32px; } @media (max-width: 782px) { body.admin-bar .itv-sticky-wrap.itv-is-fixed { top: 46px; } } /* Spacer that takes over the wrapper's vacated in-flow space the instant it goes position:fixed, so nothing below it jumps upward. Height is set by JS (measured from the real, rendered header) — 0 whenever the header is not fixed. */ .itv-sticky-placeholder { height: 0; } /* Normal, non-fixed children of the wrapper — explicit so neither can independently acquire its own position:sticky/fixed again. Only .itv-sticky-wrap.itv-is-fixed owns fixed positioning. */ .itv-header, .itv-navbar { position: relative; } .itv-header { background: #FFFFFF; color: #0B0B0B; border-bottom: 1px solid #E7E7E7; } /* 0.1.31: reduced from min-height:86px — that value, combined with a bug in itv_store_shortcode_header_actions() (stray
tags from wpautop inflating .itv-header-actions to ~120px, fixed this release in inc/shortcodes.php), was producing a ~120px-tall row in practice. With that bug fixed, .itv-header-actions/.itv-logo/.itv-search naturally sit well under 100px, so min-height is now the actual controlling value. 0.1.37: 100px -> 92px — density pass (measured combined header+nav at 156px live; target ~142px). Logo/search/actions aren't cramped by this — none of their own intrinsic heights (62px logo, 44px search after the change below) are close to 92px. */ .itv-header-row { display: flex; align-items: center; gap: 20px; min-height: 92px; max-width: 1320px; margin-inline: auto; padding-inline: var(--pad-inline); } .itv-logo { flex: 0 0 auto; display: inline-flex; align-items: center; line-height: 0; } /* 0.1.36: itv-logo-black.avif is 400x146 intrinsic (2.74:1) — 62px height lands desktop visual width at ~170px, the middle of the requested 150-190px range. width:auto preserves the ratio exactly; the aspect ratio is never set explicitly in pixels so it can't be distorted. */ .itv-logo img { height: 62px; width: auto; } /* Request a Quote — moved from the category nav into the main header row, far right (spec: #FEDC23 bg, #0B0B0B text, ~45px height, 7px radius, 800 weight). Hidden below 782px — same breakpoint the mobile burger already appears at — since the mobile menu overlay has its own Request a Quote button (.mm-actions .btn-primary, inc/shortcodes.php's itv_store_shortcode_mobile_menu(), unchanged) so the mobile header itself never has to fit both a hamburger and a full CTA button. */ .itv-header-quote-cta { display: inline-flex; align-items: center; justify-content: center; height: 45px; padding: 0 20px; flex: 0 0 auto; background: var(--c-yellow); color: var(--c-black); font-family: var(--font-head); font-weight: 800; font-size: 14px; border-radius: 7px; text-decoration: none; white-space: nowrap; transition: background .15s ease; } .itv-header-quote-cta:hover { background: #ffe666; } @media (max-width: 782px) { .itv-header-quote-cta { display: none; } } /* Reserve space so the sticky header never causes layout shift once JS/ images settle — matches the "no CLS" requirement in the Phase 4 brief. */ .itv-header, .itv-utility { contain: layout; } /* 0.1.37: explicit height:44px added — measured live at 64-65px before this change, despite no explicit height rule anywhere; align-items: stretch on an unconstrained /