is injected at top by header-system.js and toggled .is-active whenever any top-level disclosure is open. z sits ONE below --z--header so the whole header + the open Moss card stay crisp above the dim while everything below darkens. DESKTOP ONLY: the mobile Moss overlay already covers the page opaquely, so a scrim there is unnecessary (and would sit wrongly under the full-screen overlay). Clicking the dim closes the menu (JS + click-outside). */ .cfc-scrim { position: fixed; inset: 0; z-index: calc(var(--wp--custom--z--header) - 1); /* below header (100), above page */ background: hsla(0, 0%, 0%, 0.4); opacity: 0; visibility: hidden; pointer-events: none; display: none; /* stays hidden unless the :has() z-lift is available (below) */ } @media (prefers-reduced-motion: no-preference) { .cfc-scrim { transition: opacity var(--wp--custom--transition--base), visibility var(--wp--custom--transition--base); } } /* Reveal ONLY where :has() is supported. The two rules that lift the header ABOVE the scrim (§3) are :has()-gated; without :has() the scrim would paint OVER the header + open dropdown and swallow nav clicks. Tying the scrim's visibility to the SAME capability keeps old browsers safe: no :has() -> no dim (the menus still open + dismiss, just no page-darken). */ @supports selector(:has(*)) { @media screen and (min-width: 1024px) { .cfc-scrim { display: block; } } .cfc-scrim.is-active { opacity: 1; visibility: visible; pointer-events: auto; } } /* Forced-colors: the wash is forced to an opaque system colour (hides the page) or transparent (an invisible click-catcher). Remove the scrim entirely — the menus still dismiss via the document click-outside + Escape handlers. */ @media (forced-colors: active) { .cfc-scrim { display: none; } } /* ============ §8 Search (events-style icon, hover-expand overlay) ============ */ /* Ported from the Events Library search (blocks/events-library/events-library.css + events-library.js — Jose 2026-07-23): rests as a 44px BORDERLESS icon square at its spot in the bar; hover/focus expands it and draws a 2px ring in clockwise (the .cfc-search__ring SVG stroke below). The expansion is FLOW-NEUTRAL: the width growth is cancelled by an equal negative margin-right, so the open field OVERLAYS the nav links to its right (z-lift below) and never pushes the row — width and margin ride the SAME transition, so the 44px footprint holds mid-animation too. header-system.js toggles .is-open (hover, no focus steal) and .has-text (Fresh border hint on the resting square — unlike events, text does NOT hold the overlay open, it would block the links under it — Jose 2026-07-23); :focus-within covers keyboard entry with zero JS. */ .cfc-search { display: flex; align-items: center; flex: 0 0 auto; position: relative; /* keeps the collapsing box painting above the links it uncovers */ z-index: var(--wp--custom--z--base); width: var(--wp--custom--button--min-height--sm); height: var(--wp--custom--button--min-height--sm); overflow: hidden; /* clips the field while the box animates */ /* BORDERLESS at rest (Jose 2026-07-23) — the ring is drawn by the .cfc-search__ring SVG below; 2px padding stands in for the old 2px border so the icon's geometry is byte-identical. */ border: 0; padding: 2px; /* token-exception: component-internal geometry — replaces the old 2px border box */ background: var(--wp--preset--color--quaternary); border-radius: var(--wp--custom--radius--sm); } @media (prefers-reduced-motion: no-preference) { .cfc-search { transition: var(--wp--custom--transition--base); transition-property: width, margin, padding; } } /* Open (desktop only — the <=1023 bar twin keeps its own focus overlay, §11): hover (.is-open) or focus widen the box in place. */ @media screen and (min-width: 1024px) { .cfc-search.is-open, .cfc-search:focus-within { width: 260px; /* token-exception: component-internal geometry — the open span, ported 1:1 from the events search */ margin-right: calc(var(--wp--custom--button--min-height--sm) - 260px); /* token-exception: negative margins — cancels the width growth so the row never shifts */ padding: 4px calc(1.25em + 2px) 2px 2px; /* token-exception: optical text centering — the events search's asymmetric padding, +2px each side standing in for its border */ } } /* The ring: an SVG rect stroke replacing the real border, drawn in with the stroke-dash technique (dashoffset len -> 0 = a SINGLE constant-speed front, clockwise from just past the top-left corner). pathLength=100 normalises the path, so the drawn FRACTION stays stable while the box widens underneath it — this replaces the round-3 conic sweep, whose centre-anchored origin slid sideways during the width animation and read as two fronts (Jose 2026-07-23). Browsers that can't transition it just show the ring instantly (the agreed fallback). Ring colour: Moss on hover-open, Co-op Fresh once focused or holding a query — colour only, the 2px weight never changes. */ .cfc-search__ring { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .cfc-search__ring rect { x: 1px; /* token-exception: component-internal geometry — the 2px stroke is centred 1px in, so its outer edge kisses the box edge exactly like the old border */ y: 1px; /* token-exception: component-internal geometry — see x above */ width: calc(100% - 2px); /* token-exception: component-internal geometry — see x above */ height: calc(100% - 2px); /* token-exception: component-internal geometry — see x above */ rx: calc(var(--wp--custom--radius--sm) - 1px); /* token-exception: component-internal geometry — the box radius minus the stroke-centre inset */ fill: none; stroke: var(--cfc-search-ring, var(--wp--preset--color--primary)); stroke-width: 2px; /* token-exception: component-internal geometry — the ring's band = the old 2px border */ stroke-dasharray: 100; /* pathLength="100" in the markup — dash = the whole path */ stroke-dashoffset: 100; /* fully undrawn at rest */ } @media (prefers-reduced-motion: no-preference) { .cfc-search__ring rect { transition: var(--wp--custom--transition--base); transition-property: stroke-dashoffset; } } .cfc-search.is-open .cfc-search__ring rect, .cfc-search.has-text .cfc-search__ring rect, .cfc-search:focus-within .cfc-search__ring rect { stroke-dashoffset: 0; } .cfc-search:focus-within, .cfc-search.has-text { --cfc-search-ring: var(--wp--preset--color--secondary); } /* Forced colors: a permanently drawn system-colour ring beats a hidden one. */ @media (forced-colors: active) { .cfc-search__ring rect { stroke: CanvasText; stroke-dashoffset: 0; } } /* No submit button (Jose 2026-07-16) — Enter submits the form; the label's magnifier is the only icon. It fills the collapsed square (borders excluded), so the icon never shifts as the field animates open next to it. */ .cfc-search__label { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 40px; /* = the 44px control minus its 2px borders */ min-height: 40px; padding: 0; background: transparent; border: 0; cursor: pointer; color: var(--wp--preset--color--primary); } .cfc-search__icon { width: 25px; height: 25px; fill: currentColor; } /* Collapsed: faded out (opacity only, the events pattern — display/visibility would break focusing the field mid-opening). flex:1 fills whatever width the animating box currently has; overflow (above) clips the rest. */ .cfc-search__input { flex: 1; min-width: 0; opacity: 0; appearance: none; -webkit-appearance: none; background: transparent; border: 0; outline: 0; padding-inline: 0; color: var(--wp--preset--color--primary); font-family: var(--wp--preset--font-family--gill-sans); font-weight: 600; /* matches the events search / nav links */ font-size: var(--wp--preset--font-size--small); text-transform: uppercase; letter-spacing: var(--wp--custom--tracking--eyebrow); transition: opacity var(--wp--custom--transition--base); } .cfc-search.is-open .cfc-search__input, .cfc-search:focus-within .cfc-search__input { opacity: 1; } /* Return/submit affordance: hidden at rest (faded + clipped by the wrapper's overflow), fades in once the field opens. Enter submits too — this is the visible cue (Jose 2026-07-23). */ .cfc-search__submit { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 40px; /* = the label's square, so the two icons bookend the field */ height: 100%; padding: 0; background: none; border: 0; color: var(--wp--preset--color--primary); cursor: pointer; opacity: 0; transition: opacity var(--wp--custom--transition--base); } .cfc-search.is-open .cfc-search__submit, .cfc-search:focus-within .cfc-search__submit { opacity: 1; } .cfc-search.is-open .cfc-search__submit:hover, .cfc-search:focus-within .cfc-search__submit:hover { opacity: 0.7; } .cfc-search__submit:focus-visible { outline: 3px solid var(--wp--preset--color--secondary); outline-offset: -4px; /* inside the control — the wrapper's overflow:hidden would clip an outer ring */ } /* Chrome/Safari draw their own clear x inside type=search — hide it (events parity; appearance:none alone doesn't reliably reach the pseudo). */ .cfc-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } .cfc-search__input::placeholder { color: color-mix(in srgb, var(--wp--preset--color--primary) var(--wp--custom--alpha--scrim), transparent); } /* ============ §9 CTA (reuse Phase-2c Primary button) ============ */ /* Header-scoped neutralise of the global .wp-block-button{margin-inline:0.7rem} so it doesn't disturb the Phase-2c global-margin decision elsewhere. */ .cfc-header .cfc-cta.wp-block-button { margin: 0; flex: 0 0 auto; } /* ============ §10 Burger + scroll lock ============ */ .cfc-burger { display: none; /* mobile-only; each variant's MQ reveals it */ align-items: center; justify-content: center; min-width: var(--wp--custom--button--min-height--sm); min-height: var(--wp--custom--button--min-height--sm); padding: 0; background: transparent; border: 0; cursor: pointer; color: var(--wp--preset--color--primary); border-radius: var(--wp--custom--radius--sm); } .cfc-burger svg { width: 26px; height: 26px; fill: currentColor; } .cfc-burger:focus-visible { outline: 2px solid transparent; outline-offset: var(--wp--custom--button--focus--offset); box-shadow: 0 0 0 var(--wp--custom--button--focus--outer-width) var(--wp--preset--color--primary); } .cfc-overlay__close { display: none; } /* revealed in A's mobile overlay */ /* Body scroll lock while a mobile overlay is open (toggled by JS). */ body.cfc-scroll-lock { overflow: hidden; } /* ===================================================================== §10b COMPACT desktop stage (1024–1199, both variants — Jose 2026-07-16) The graceful step between the full bar (>=1200) and the mobile overlay (<=1023): the row tightens so the nav NEVER overflows before the mobile jump. (The search needs no delta here anymore — see the note below.) ===================================================================== */ @media screen and (min-width: 1024px) and (max-width: 1199px) { .cfc-header__inner { gap: var(--wp--preset--spacing--40); /* 16 -> 8px */ padding-inline: var(--wp--preset--spacing--50); /* 24 -> 16px */ } .cfc-nav__link, .cfc-nav__trigger { padding: var(--wp--preset--spacing--40) 0.4rem; } /* sides 0.6 -> 0.4rem */ /* Search: no compact-stage delta anymore — §8's events-style icon + flow-neutral hover overlay is already the behavior at every desktop width (2026-07-23; this block used to swap in an icon-only search with an absolutely-anchored focus pill). */ } /* ===================================================================== §11 FINALIST A — "Static Centered Logo" (.cfc-header--a) 84px sticky Almond band; inner capped + centered. L->R: search + ABOUT SALES SHOP grouped at the LEFT edge · centered logo · CLASSES EVENTS + JOIN grouped at the RIGHT edge. Dropdowns = Moss, radius sm (8px). ===================================================================== */ .cfc-header--a { --cfc-a-band: 84px; display: block; /* Self-sufficient Almond bg so A looks right even on Woo/product templates, which render the header part with NO sticky wrapper. */ background-color: var(--wp--preset--color--quaternary); } .cfc-header--a .cfc-header__inner { min-height: var(--cfc-a-band); } /* Dead-centred logo (Jose 2026-07-16 — was a 3-left/2-right split that sat right of centre): .cfc-menu unwraps (display:contents) and the two .cfc-half wrappers become EQUAL flex columns (flex:1 1 0 -> identical width regardless of content) flanking the logo, so the logo sits at the exact centre of the bar at every width. Each half's content hugs ITS OWN edge (Jose 2026-07-16 review — was space-between, which pressed both navs against the logo): left half = search + primary nav grouped at the left edge; right half = secondary nav + CTA grouped at the right edge; free space frames the logo. */ .cfc-header--a .cfc-menu { display: contents; } .cfc-header--a .cfc-half { display: flex; align-items: center; gap: var(--wp--preset--spacing--50); flex: 1 1 0; min-width: 0; } .cfc-header--a .cfc-half--left { order: 1; justify-content: flex-start; } .cfc-header--a .cfc-logo { order: 2; } .cfc-header--a .cfc-half--right { order: 3; justify-content: flex-end; } /* The bar's mobile search twin exists only below 1024 (its desktop sibling lives inside the left half). */ @media screen and (min-width: 1024px) { .cfc-search--mobile { display: none; } } /* A dropdowns = crisp 8px corners. */ .cfc-header--a .cfc-dropdown { border-radius: var(--wp--custom--radius--sm); } /* Right-side (secondary) group opens right-aligned so EVENTS can't overflow the CTA. */ .cfc-header--a .cfc-nav--secondary .cfc-dropdown { left: auto; right: 0; } /* --------- A mobile (<=1023px, was 781 — raised so the bar jumps to the overlay BEFORE the inline nav can ever overflow, Jose 2026-07-16): search left · logo centre · burger right (sides inverted 2026-07-16) --------- */ @media screen and (max-width: 1023px) { .cfc-header--a .cfc-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--wp--preset--spacing--40); min-height: 64px; } /* grid-row:1 stays pinned on all three as a GUARD: sparse auto-placement can't move backwards, so any DOM/column reorder that puts a later item in an earlier column silently wraps the logo to row 2 (a ~2x-tall bar). */ .cfc-header--a .cfc-burger { display: inline-flex; grid-row: 1; grid-column: 3; justify-self: end; } .cfc-header--a .cfc-logo { grid-row: 1; grid-column: 2; justify-self: center; } .cfc-header--a .cfc-logo__svg { width: 118px; } /* The desktop halves unwrap so the overlay's children stack flat (exactly the pre-halves structure); the desktop search twin inside the left half is hidden — the bar's .cfc-search--mobile twin serves mobile. */ .cfc-header--a .cfc-half { display: contents; } .cfc-header--a .cfc-menu .cfc-search { display: none; } /* Bar search twin collapses to its icon (LEFT); on focus it expands into a pill anchored at its own spot — capped before the centred logo on tablet (50% - 90px = logo half-width 59 + breathing room), FULL bar width only on phones (<=600, below). */ .cfc-header--a .cfc-search--mobile { grid-row: 1; grid-column: 1; justify-self: start; width: var(--wp--custom--button--min-height--sm); background: transparent; /* naked icon at rest; the SVG ring is undrawn */ } .cfc-header--a .cfc-search--mobile:focus-within { position: absolute; grid-area: auto; /* REQUIRED: with a definite grid cell, an abs-pos child resolves left/% against the CELL, not the bar — the pill would sit +24px in and graze the logo. auto -> containing block = the whole inner. */ top: 50%; left: var(--wp--preset--spacing--60); transform: translateY(-50%); width: min(20rem, calc(50% - 90px)); padding-inline: 0.35rem; background: var(--wp--preset--color--quaternary); /* ring colour + sweep come from the base §8 :focus-within rules */ } @media screen and (max-width: 600px) { .cfc-header--a .cfc-search--mobile:focus-within { right: var(--wp--preset--spacing--60); width: auto; justify-self: stretch; /* the rest state's `start` would pin the auto-width box at shrink-to-fit instead of stretching left inset -> right inset */ } } .cfc-header--a .cfc-search--mobile .cfc-search__input { width: 0; } .cfc-header--a .cfc-search--mobile:focus-within .cfc-search__input { width: 100%; flex: 1; } /* .cfc-menu becomes the full-screen Moss overlay (JS toggles .is-open). */ .cfc-header--a .cfc-menu { display: flex; flex-direction: column; gap: 0.25rem; position: fixed; inset: 0; z-index: calc(var(--wp--custom--z--header) + 1); padding: var(--wp--preset--spacing--60); overflow-y: auto; background: var(--wp--preset--color--primary); /* Moss overlay */ /* closed — non-focusable */ transform: translateX(100%); visibility: hidden; } @media (prefers-reduced-motion: no-preference) { .cfc-header--a .cfc-menu { transition: transform var(--wp--custom--transition--slow), visibility var(--wp--custom--transition--slow); } } .cfc-header--a .cfc-menu.is-open { transform: none; visibility: visible; } .cfc-header--a .cfc-overlay__close { display: inline-flex; align-items: center; justify-content: center; align-self: flex-end; min-width: var(--wp--custom--button--min-height--sm); min-height: var(--wp--custom--button--min-height--sm); margin-bottom: var(--wp--preset--spacing--40); background: transparent; border: 0; cursor: pointer; color: var(--wp--preset--color--quaternary); border-radius: var(--wp--custom--radius--sm); } .cfc-header--a .cfc-overlay__close svg { width: 26px; height: 26px; fill: currentColor; } .cfc-header--a .cfc-overlay__close:focus-visible { outline: 2px solid transparent; outline-offset: var(--wp--custom--button--focus--offset); box-shadow: 0 0 0 var(--wp--custom--button--focus--outer-width) var(--wp--preset--color--tertiary); } /* Nav stacks; items go Almond-on-Moss; dropdowns become tap-accordions. */ .cfc-header--a .cfc-nav { width: 100%; margin: 0; } .cfc-header--a .cfc-nav--primary, .cfc-header--a .cfc-nav--secondary, .cfc-header--a .cfc-cta { margin-left: 0; } .cfc-header--a .cfc-nav__list { flex-direction: column; align-items: stretch; gap: 0; } .cfc-header--a .cfc-nav__item { width: 100%; } /* Overlay type refined (Jose 2026-07-16 — large/24 "too big for the screen"): top level = medium/17 uppercase 600; sub-links keep the dropdown's base medium (Jose: small read as too small). */ .cfc-header--a .cfc-nav__link, .cfc-header--a .cfc-nav__trigger { width: 100%; justify-content: space-between; min-height: var(--wp--custom--button--min-height--md); color: var(--wp--preset--color--quaternary); /* Almond on Moss */ font-size: var(--wp--preset--font-size--medium); } .cfc-header--a .cfc-nav__link:hover, .cfc-header--a .cfc-nav__trigger:hover { color: var(--wp--preset--color--tertiary); } .cfc-header--a .cfc-nav__link:focus-visible, .cfc-header--a .cfc-nav__trigger:focus-visible { box-shadow: 0 0 0 var(--wp--custom--button--focus--outer-width) var(--wp--preset--color--tertiary); } /* Dropdown -> in-flow accordion, collapsed unless aria-expanded. */ .cfc-header--a .cfc-dropdown { position: static; display: none; min-width: 0; max-width: none; opacity: 1; visibility: visible; transform: none; pointer-events: auto; box-shadow: none; background: transparent; padding: 0 0 var(--wp--preset--spacing--40) var(--wp--preset--spacing--50); transition: none; } .cfc-header--a .cfc-nav__trigger[aria-expanded="true"] + .cfc-dropdown { display: block; } .cfc-header--a .cfc-dropdown__link:focus-visible { box-shadow: inset 0 0 0 var(--wp--custom--button--focus--outer-width) var(--wp--preset--color--tertiary); } .cfc-header--a .cfc-cta { margin-top: var(--wp--preset--spacing--50); } .cfc-header--a .cfc-cta .wp-block-button__link { width: 100%; } /* Outline CTA on the Moss overlay: Moss-on-Moss is invisible -> repoint the variant's vars to Almond (hover = Almond fill + Moss text, Honeysuckle ring). */ .cfc-header--a .cfc-menu .cfc-cta .wp-block-button__link { --btn-text: var(--wp--preset--color--quaternary); --btn-hover-bg: var(--wp--preset--color--quaternary); --btn-hover-text: var(--wp--preset--color--primary); --btn-ring: var(--wp--preset--color--tertiary); border-color: var(--wp--preset--color--quaternary); } }