/* ============================================================================= Sustainable Ply — Header Source: 02-UI-SPEC.md §Header Pattern Spec (lines 211-388). Desktop: centred-logo split nav using CSS grid (1fr auto 1fr). Mobile (<900px): hamburger button + right-anchored off-canvas drawer with focus trap (JS in assets/js/header.js) and ESC close. Sticky: position: sticky with frosted-glass tint when [data-scrolled="true"]. ============================================================================= */ /* --------------------------------------------------------------------------- */ /* Sticky header — base state */ /* --------------------------------------------------------------------------- */ /* The outer WordPress template-part wrapper (

) establishes its own containing block, which constrains where the inner .site-header can stick to. Making the wrapper `display: contents` removes it from layout — .site-header then inherits its containing block from , and position:sticky can pin to the viewport across the whole page. Without this, sticky only pinned within the ~144px height of the wrapper, then scrolled away. Verified live via agent-browser. */ header.wp-block-template-part { display: contents; } .site-header { position: sticky; top: 0; z-index: 100; /* Same colorized cardboard stack as body so header → page transition is seamless. Tint overlay → texture → solid cream base. */ background: linear-gradient(rgba(247, 247, 241, 0.55), rgba(247, 247, 241, 0.55)), url("/wp-content/themes/sustainable-ply/images/texture-cardboard.avif") repeat fixed, var(--color-bg); /* Allow the logo to extend below the header into the hero (cradle). */ overflow: visible; } /* Sticky reveal behavior (R4 simplified): At top (no data-scrolled): header is in flow, transparent, no frosted glass. Past 200px threshold (data-scrolled="true"): header is pinned via position:sticky (which it already is), gets the frosted glass treatment, AND animates from translateY(-100%) -> translateY(0) for a clear "pop-down" reveal. After the one-shot animation, header just stays visible. We dropped the directional auto-hide — it was fragile and not what the user wanted. They asked for "popping down", which is the entrance. */ .site-header { will-change: transform; transform: translateY(0); } @media (prefers-reduced-motion: no-preference) { .site-header { transition: background 240ms ease-out, border-color 240ms ease-out, box-shadow 240ms ease-out; } /* Past threshold: frosted + animate the pop-down entrance. */ .site-header[data-scrolled="true"] { background: rgba(247, 247, 241, 0.94); backdrop-filter: saturate(1.4) blur(8px); -webkit-backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--color-border); box-shadow: 0 1px 0 rgba(28, 26, 23, 0.04), 0 12px 28px rgba(28, 26, 23, 0.06); animation: sp-header-popdown 360ms cubic-bezier(0.22, 1, 0.36, 1) both; } } @keyframes sp-header-popdown { from { transform: translateY(-100%); } to { transform: translateY(0); } } /* Reduced motion: same frosted end state, no slide, no transition. */ @media (prefers-reduced-motion: reduce) { .site-header[data-scrolled="true"] { background: rgba(247, 247, 241, 0.96); border-bottom: 1px solid var(--color-border); } } /* --------------------------------------------------------------------------- */ /* Desktop layout (>= 900px) — centred-logo split nav */ /* --------------------------------------------------------------------------- */ .site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-lg); padding-inline: var(--sp-2xl); padding-block: var(--sp-md); max-width: var(--layout-wide-size); margin-inline: auto; } /* Safari fix: WP's is-layout-flow block-gap rule targets .site-header__inner's grid children with margin-block-start (via the 2xl/3xl var alias shim), which Safari applies inside grid cells and knocks nav items out of vertical centre — left nav ends up higher than the right nav. Zero margins on grid items and force centre alignment so both nav clusters + the logo line up. Reported 2026-07-04. */ .site-header__inner > * { margin-block-start: 0 !important; margin-block-end: 0 !important; align-self: center; } .site-header, .site-header > * { margin-block-start: 0 !important; margin-block-end: 0 !important; } /* Explicit grid placement on all three columns. Without this, the cart anchor's explicit grid-column:3/grid-row:1 (below) is processed first by the grid auto-placement algorithm and OCCUPIES (3,1). The right-nav (auto-placed) then skips (3,1) as occupied and wraps to (1,2) — visually dropping below the header. Pinning all three nav cells explicitly keeps them on row 1. */ .site-header__nav--left { grid-column: 1; grid-row: 1; display: flex; justify-content: flex-end; align-items: center; gap: var(--sp-lg); } .site-header__logo { grid-column: 2; grid-row: 1; } .site-header__nav--right { grid-column: 3; grid-row: 1; display: flex; justify-content: flex-start; align-items: center; gap: var(--sp-lg); } /* WP injects layout-gap via wp-container-* dynamic classes for navigation, but the inline rule is unreliable when the layout setting is overridden by theme groups. Set the gap explicitly on the nav container itself. */ .site-header__nav .wp-block-navigation__container { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--sp-lg); margin: 0; padding: 0; list-style: none; } /* WC auto-injects the customer-account block into every wp:navigation inside the site header. We only want it in the right nav (FINDING-005). */ .site-header__nav--left .wp-block-woocommerce-customer-account { display: none; } /* Account icon styling — make the icon align with the nav baseline. */ .site-header .wc-block-customer-account__link { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--color-text); text-decoration: none; } .site-header .wc-block-customer-account__account-icon { width: 22px; height: 22px; } /* --------------------------------------------------------------------------- */ /* Mini-cart icon — custom inline SVG anchor, matching the account-icon */ /* visual language (32×32 hit area, 22px icon, ink stroke, accent on hover). */ /* */ /* The cart anchor lives OUTSIDE the right nav so it survives the mobile */ /* `display:none !important` rules. On desktop it overlays into the right grid */ /* column via grid-column:3 + justify-self:end. The right nav uses */ /* padding-inline-end on its container to leave room for the cart icon. */ /* */ /* Count badge: populated client-side by assets/js/cart-badge.js (reads the */ /* `woocommerce_items_in_cart` cookie). Hidden when empty via :empty selector. */ /* --------------------------------------------------------------------------- */ .site-header__cart { display: flex; align-items: center; justify-content: center; grid-column: 3; grid-row: 1; justify-self: end; z-index: 3; /* above right-nav links so the badge isn't clipped */ color: var(--color-text); text-decoration: none; } .site-header__cart-button { display: inline-flex; align-items: center; justify-content: center; position: relative; width: 32px; height: 32px; color: inherit; transition: color 200ms ease-out; } .site-header__cart:hover .site-header__cart-button, .site-header__cart:focus-visible .site-header__cart-button { color: var(--color-accent); } .site-header__cart:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 4px; } .site-header__cart-icon { width: 22px; height: 22px; display: block; } /* Count badge — cream-on-ink pill anchored to the icon's top-right. */ .site-header__cart-badge { position: absolute; top: -4px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--color-text); color: var(--color-bg); font-family: var(--wp--preset--font-family--inter, system-ui, sans-serif); font-size: 10px; font-weight: 600; line-height: 18px; text-align: center; letter-spacing: 0.02em; box-shadow: 0 0 0 2px var(--color-bg); pointer-events: none; } /* Empty badge → hidden (no items, or pre-cookie first visit). */ .site-header__cart-badge:empty { display: none; } /* Visually-hidden text for screen readers — announces cart count. */ .site-header__cart .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Make room in the right grid column so the cart icon doesn't overlap the last nav link. Right nav justifies flex-start (sits next to logo), so push inward 48px to clear the absolutely-positioned cart icon. */ .site-header__nav--right { padding-inline-end: 48px; } /* Logo cradle: the SP roundel is enlarged and offset downward so its lower third sits into the hero section. A cream-coloured circular "puck" pseudo- element behind the logo continues the header background outward, creating the visual impression that the nav bar cradles the logo from above. When the header is scroll-stuck (frosted) the puck is suppressed so the sticky appearance is uncluttered. */ .site-header__logo { display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; transform: translateY(28%); } .site-header__logo::before { content: ''; position: absolute; inset: -18px; border-radius: 50%; background: linear-gradient(rgba(247, 247, 241, 0.55), rgba(247, 247, 241, 0.55)), url("/wp-content/themes/sustainable-ply/images/texture-cardboard.avif") repeat fixed, var(--color-bg); z-index: -1; transition: opacity 200ms ease-out; } /* When the header is stuck/scrolled, hide the puck so the sticky bar is flat. */ .site-header[data-scrolled="true"] .site-header__logo { transform: translateY(0); } .site-header[data-scrolled="true"] .site-header__logo::before { opacity: 0; } .site-header__logo a { display: flex; align-items: center; justify-content: center; } .site-header__logo img, .site-header__logo svg { height: 112px !important; width: 112px !important; transition: transform 200ms ease-out; } /* Logo intro — one-shot stamp-in on page load (R4 Move Q). */ @media (prefers-reduced-motion: no-preference) { .site-header__logo { animation: sp-logo-stamp 920ms cubic-bezier(0.22, 1, 0.36, 1) 120ms both; } .site-header__logo::before { animation: sp-logo-puck-stamp 920ms cubic-bezier(0.22, 1, 0.36, 1) 80ms both; } } @keyframes sp-logo-stamp { from { opacity: 0; transform: translateY(28%) scale(0.78) rotate(-6deg); } 60% { opacity: 1; } to { opacity: 1; transform: translateY(28%) scale(1) rotate(0); } } @keyframes sp-logo-puck-stamp { from { opacity: 0; transform: scale(0.72); } to { opacity: 1; transform: scale(1); } } /* Shrink the logo when scrolled — it returns to the header line. */ .site-header[data-scrolled="true"] .site-header__logo img, .site-header[data-scrolled="true"] .site-header__logo svg { height: 48px !important; width: 48px !important; } /* --------------------------------------------------------------------------- */ /* Nav link style — animated underline */ /* --------------------------------------------------------------------------- */ .site-header__nav a, .site-header .wp-block-navigation-item__content { font-size: var(--wp--preset--font-size--sm); font-weight: 500; color: var(--color-text); text-decoration: none; padding-block: var(--sp-xs); position: relative; } @media (prefers-reduced-motion: no-preference) { .site-header__nav a::after, .site-header .wp-block-navigation-item__content::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--color-accent); transition: width 200ms ease-out; } .site-header__nav a:hover::after, .site-header__nav a:focus-visible::after, .site-header__nav a[aria-current="page"]::after, .site-header .wp-block-navigation-item__content:hover::after, .site-header .wp-block-navigation-item[aria-current="page"] .wp-block-navigation-item__content::after { width: 100%; } } /* Active state — static underline (no motion needed) */ .site-header__nav a[aria-current="page"]::after, .site-header .wp-block-navigation-item[aria-current="page"] .wp-block-navigation-item__content::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: var(--color-accent); } /* --------------------------------------------------------------------------- */ /* Hamburger button — hidden on desktop, shown <900px */ /* --------------------------------------------------------------------------- */ .site-header__hamburger { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: none; cursor: pointer; color: var(--color-text); padding: 0; } .site-header__hamburger:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* --------------------------------------------------------------------------- */ /* Mobile nav — full-screen takeover (R3 Move O) */ /* Replaces the right-edge slide drawer. Reasons: the old drawer leaked into */ /* horizontal scroll on desktop because position:fixed + transform:translateX */ /* (100%) put it off-screen but still rendered. The new full-bleed overlay */ /* is display:none on desktop entirely — no leak surface. */ /* --------------------------------------------------------------------------- */ .site-header__drawer { display: none; /* hidden on desktop; (max-width:899px) media query enables */ position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; background: var(--color-bg); z-index: 200; flex-direction: column; align-items: center; justify-content: center; padding: clamp(24px, 6vw, 56px); opacity: 0; pointer-events: none; visibility: hidden; transform: scale(0.98); } /* Centered SP logo at the top of the overlay. Injected via JS in header.js if not already present; falls back gracefully if JS missing. */ .site-header__drawer-logo { position: absolute; top: clamp(24px, 5vh, 56px); left: 50%; transform: translateX(-50%); width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; } .site-header__drawer-logo img, .site-header__drawer-logo svg { width: 80px; height: 80px; } @media (prefers-reduced-motion: no-preference) { .site-header__drawer { transition: opacity 280ms cubic-bezier(0.22, 1, 0.36, 1), transform 280ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0ms 280ms; } } .site-header__drawer[aria-hidden="false"] { opacity: 1; pointer-events: auto; visibility: visible; transform: scale(1); transition: opacity 280ms cubic-bezier(0.22, 1, 0.36, 1), transform 280ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0ms 0ms; } .site-header__drawer-close { position: absolute; top: clamp(20px, 4vh, 40px); right: clamp(20px, 4vw, 40px); width: 56px; height: 56px; background: none; border: 1px solid var(--color-border); border-radius: 50%; cursor: pointer; color: var(--color-text); display: flex; align-items: center; justify-content: center; transition: background 200ms ease-out; } .site-header__drawer-close:hover, .site-header__drawer-close:focus-visible { background: var(--color-surface); } .site-header__drawer-close:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; } .site-header__drawer nav, .site-header__drawer > a { width: 100%; max-width: 640px; } .site-header__drawer nav a, .site-header__drawer > a { display: block; font-family: var(--wp--preset--font-family--fraunces); font-size: clamp(40px, 10vw, 72px); font-weight: 400; font-variation-settings: 'opsz' 144, 'SOFT' 30, 'wght' 400; letter-spacing: -0.025em; line-height: 1.0; color: var(--color-text); text-decoration: none; padding-block: clamp(12px, 1.5vh, 20px); text-align: center; border-bottom: 1px solid var(--color-border); opacity: 0; transform: translateY(16px); } .site-header__drawer nav a:last-child, .site-header__drawer > a:last-child { border-bottom: 0; } /* Staggered entrance — each link delayed progressively after open. */ @media (prefers-reduced-motion: no-preference) { .site-header__drawer[aria-hidden="false"] nav a, .site-header__drawer[aria-hidden="false"] > a { opacity: 1; transform: translateY(0); transition: opacity 360ms cubic-bezier(0.22, 1, 0.36, 1), transform 360ms cubic-bezier(0.22, 1, 0.36, 1); } .site-header__drawer[aria-hidden="false"] > a:nth-of-type(1), .site-header__drawer[aria-hidden="false"] nav a:nth-child(1) { transition-delay: 120ms; } .site-header__drawer[aria-hidden="false"] > a:nth-of-type(2), .site-header__drawer[aria-hidden="false"] nav a:nth-child(2) { transition-delay: 180ms; } .site-header__drawer[aria-hidden="false"] > a:nth-of-type(3), .site-header__drawer[aria-hidden="false"] nav a:nth-child(3) { transition-delay: 240ms; } .site-header__drawer[aria-hidden="false"] > a:nth-of-type(4), .site-header__drawer[aria-hidden="false"] nav a:nth-child(4) { transition-delay: 300ms; } .site-header__drawer[aria-hidden="false"] > a:nth-of-type(5), .site-header__drawer[aria-hidden="false"] nav a:nth-child(5) { transition-delay: 360ms; } .site-header__drawer[aria-hidden="false"] > a:nth-of-type(6), .site-header__drawer[aria-hidden="false"] nav a:nth-child(6) { transition-delay: 420ms; } } @media (prefers-reduced-motion: reduce) { .site-header__drawer[aria-hidden="false"] nav a, .site-header__drawer[aria-hidden="false"] > a { opacity: 1; transform: none; } } /* Hover state on overlay link items. */ .site-header__drawer a:hover, .site-header__drawer a:focus-visible { color: var(--color-accent); } /* --------------------------------------------------------------------------- */ /* Overlay (kept as visual scrim under the takeover — but the takeover is */ /* full-bleed so the scrim is no longer required for the visual.) */ /* --------------------------------------------------------------------------- */ .site-header__overlay { display: none; } /* --------------------------------------------------------------------------- */ /* Mobile layout (<900px) */ /* --------------------------------------------------------------------------- */ @media (max-width: 899px) { /* 3-column layout: hamburger (left) | logo (centre) | cart (right). Cart sits where the thumb naturally rests for primary commerce action; hamburger sits opposite. Both are 44px tap targets; the logo stays optically centred between them. */ .site-header__inner { grid-template-columns: 44px 1fr 44px; padding-inline: var(--sp-md); } /* Hard-hide the desktop nav columns on mobile — !important guards against WP block layout inline styles that can reassert display:flex. */ .site-header__nav--left, .site-header__nav--right, .site-header__nav--left nav, .site-header__nav--right nav { display: none !important; } /* Right-nav padding-end isn't needed when the nav is hidden — reset so it doesn't influence any inherited box. */ .site-header__nav--right { padding-inline-end: 0; } /* Cart icon — right tap target on mobile (primary commerce action belongs under the thumb). Override desktop grid-column:3/justify-self:end is re-asserted here so cart sits flush with the right edge of the 44px column rather than overlapping the logo. */ .site-header__cart { grid-column: 3; grid-row: 1; justify-self: center; width: 44px; height: 44px; } /* Hamburger — left tap target on mobile. */ .site-header__hamburger { display: flex; grid-column: 1; grid-row: 1; justify-self: center; } .site-header__logo { grid-column: 2; grid-row: 1; transform: translateY(20%); } .site-header__logo img, .site-header__logo svg { height: 64px !important; width: 64px !important; } /* Texture puck stretches on mobile because the logo container has no fixed dimensions — simpler to drop it at this breakpoint. */ .site-header__logo::before { display: none; } /* Enable the full-screen takeover nav on mobile only. */ .site-header__drawer { display: flex; } } /* Lock body scroll while the overlay is open. JS toggles .sp-nav-open on when the drawer is active. */ body.sp-nav-open { overflow: hidden; } /* NOTE: The previous html/body overflow-x rule (R3 Move N) was removed in R4 debug — it broke position:sticky throughout the page because browsers resolve `overflow-x: X` with `overflow-y: visible` to `overflow: X auto`, which makes the body a scroll container, which prevents sticky from binding to the html viewport. The original horizontal-scroll concern was the mobile drawer leaking on desktop. That's solved structurally: the drawer is now display:none on desktop (R3 Move O). No leak surface = no belt-and-braces rule needed. */