/* ========================================================================== 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. */ .itv-site-header > .itv-utility, .itv-site-header > .itv-sticky-wrap, .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; } .itv-utility { background: var(--c-charcoal); color: rgba(255,255,255,.75); 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: var(--c-yellow); } .itv-utility .icon { width: 14px; height: 14px; } /* 0.1.31: single sticky wrapper around BOTH .itv-header and .itv-navbar — confirmed live on itechvalley.ma as the same technique (one sticky header element, not two independently-sticky rows needing an offset calculated between them). .itv-header itself is no longer sticky on its own; .itv-utility (outside this wrapper) is never sticky and scrolls away normally. Shadow is unconditional rather than scroll-triggered, so no JS scroll listener is needed — at scroll position 0 there's nothing above the header for it to visibly float over anyway. */ .itv-sticky-wrap { position: sticky; top: 0; z-index: 500; box-shadow: 0 4px 14px rgba(0,0,0,.12); } .itv-header { background: var(--c-black); color: var(--c-white); border-bottom: 1px solid var(--c-border-dark); } /* 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 — set directly to land the full row (with its 1px border) in the requested ~100–110px range, without shrinking the 46px logo or the search bar. */ .itv-header-row { display: flex; align-items: center; gap: 20px; min-height: 100px; 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; } .itv-logo img { height: 46px; 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; } .itv-search { flex: 1 1 auto; max-width: 640px; display: flex; align-items: stretch; border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius-btn); overflow: hidden; background: rgba(255,255,255,.04); } .itv-search input { flex: 1 1 auto; border: 0; background: transparent; color: #fff; padding: 0 16px; font-size: 14.5px; font-family: var(--font-body); } .itv-search input::placeholder { color: rgba(255,255,255,.45); } .itv-search input:focus { outline: none; } .itv-search button { flex: 0 0 auto; width: 52px; border: 0; background: var(--c-yellow); color: var(--c-black); display: flex; align-items: center; justify-content: center; cursor: pointer; } .itv-header-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .itv-action { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 10px; border-radius: 8px; position: relative; color: #fff; background: none; border: 0; font-family: var(--font-body); cursor: pointer; } .itv-action:hover { background: rgba(255,255,255,.06); } .itv-action .icon { width: 21px; height: 21px; } .itv-action .lbl { font-size: 10.5px; font-weight: 600; color: rgba(255,255,255,.7); } .itv-action .count { position: absolute; top: 0; right: 4px; background: var(--c-yellow); color: var(--c-black); font-family: var(--font-head); font-weight: 800; font-size: 10px; width: 17px; height: 17px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .itv-navbar { background: var(--c-charcoal); } .itv-navbar .itv-navbar-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: 1320px; margin-inline: auto; padding-inline: var(--pad-inline); } .itv-nav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; } .itv-nav a { display: inline-flex; align-items: center; padding: 15px 14px; font-family: var(--font-head); font-weight: 600; font-size: 14px; color: rgba(255,255,255,.88); border-bottom: 2px solid transparent; text-decoration: none; } .itv-nav a:hover { color: var(--c-yellow); } .itv-nav a[aria-current="page"] { color: var(--c-yellow); border-bottom-color: var(--c-yellow); } /* 0.1.31: the "Request a Quote" button that used to live in .itv-navbar (styled via ".itv-navbar .btn") moved to the main header row — see .itv-header-quote-cta above. Nothing with class .btn remains inside .itv-navbar now. */ .itv-burger { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: transparent; color: #fff; cursor: pointer; } /* Hides at the exact same breakpoint the hamburger/mobile search appears (782px, immediately below) — not a wider one. A gap between these two values would leave a range with no visible way to search at all. */ @media (max-width: 782px) { .itv-search { display: none; } } @media (max-width: 782px) { .itv-header-row { min-height: 68px; gap: 10px; } .itv-logo img { height: 34px; } .itv-navbar { display: none; } .itv-utility { display: none; } .itv-burger { display: inline-flex; order: -1; } /* Visually hidden, not display:none — the icon has aria-hidden="true", so this label is each link's only accessible name. Hiding it with display:none removed it from the accessibility tree too, leaving these three header links with no discernible name on mobile. */ .itv-action .lbl { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .itv-header-actions { gap: 2px; } } /* ---- mobile overlay menu ---- */ .itv-mobile-menu { position: fixed; inset: 0; background: var(--c-black); color: #fff; z-index: 1000; display: none; flex-direction: column; padding: 18px clamp(20px, 6vw, 40px) 32px; overflow-y: auto; } .itv-mobile-menu.is-open { display: flex; } .itv-mobile-menu .mm-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; } .itv-mobile-menu .mm-close { background: none; border: 0; color: #fff; width: 40px; height: 40px; cursor: pointer; } .itv-mobile-menu .mm-search { display: flex; border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius-btn); margin-bottom: 24px; background: rgba(255,255,255,.04); } .itv-mobile-menu .mm-search input { flex: 1; background: none; border: 0; color: #fff; padding: 12px 14px; } .itv-mobile-menu .mm-search button { border: 0; background: var(--c-yellow); width: 48px; color: var(--c-black); cursor: pointer; } .itv-mobile-menu ul { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; } .itv-mobile-menu li { border-bottom: 1px solid rgba(255,255,255,.08); } .itv-mobile-menu a { display: flex; align-items: center; justify-content: space-between; padding: 16px 2px; font-family: var(--font-head); font-weight: 700; font-size: 17px; color: #fff; text-decoration: none; } .itv-mobile-menu a .icon { color: var(--c-yellow); width: 18px; height: 18px; } .itv-mobile-menu .mm-actions { display: flex; gap: 10px; margin-top: 24px; } .itv-mobile-menu .mm-actions .btn { flex: 1; } /* Body scroll lock while the mobile menu is open — applied/removed by JS. */ body.itv-menu-open { overflow: hidden; }