/** * H4YF Skin — component layer (header, drawer, shop grid, PDP). * Loaded AFTER Astra so tokens + layout win by cascade order. */ /* ------------------------------------------------------------------ */ /* Kill Astra header leakage (red-bar safety — our markup replaces it) */ /* ------------------------------------------------------------------ */ #masthead, .ast-mobile-header-wrap, .ast-primary-header-bar, .ast-builder-grid-row, .main-header-bar, .main-header-menu-toggle, .ast-menu-toggle, .ast-header-break-point .main-header-bar-wrap, .ast-mobile-popup-drawer, #astra-mobile-cart-drawer, .astra-mobile-cart-overlay { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; } /* Site-wide charcoal + crimson-gradient wash (Josh punch list 2026-08-05: full site wallpaper, not just the homepage — moved here from `.h4yf-home` below, which carried it alone before). Same D16 formula, still fixed attachment so it reads as one continuous surface behind every template. Alphas raised ~2.7x 2026-08-30 (#746): the 0.09-0.12 originals rendered as flat near-black live — every product image container already sits on its own opaque charcoal card (grid tiles, PDP gallery), so the wash only ever touches page chrome/margins and can run stronger without competing with photography. Text contrast is unaffected — --h4yf-ink stays near-white regardless of how saturated the dark-red wash beneath it gets. */ body.h4yf-skin { background: radial-gradient(120% 60% at 50% 0%, rgba(168, 18, 58, 0.25), transparent 52%), radial-gradient(100% 55% at 85% 55%, rgba(168, 18, 58, 0.20), transparent 54%), radial-gradient(140% 70% at 50% 115%, rgba(168, 18, 58, 0.27), transparent 52%), linear-gradient(180deg, var(--h4yf-charcoal) 0%, var(--h4yf-charcoal-2) 50%, var(--h4yf-charcoal) 100%); background-attachment: fixed; color: var(--h4yf-ink); } /* ------------------------------------------------------------------ */ /* Headings on charcoal (Sprint 6.6 RC1) */ /* ------------------------------------------------------------------ */ /* Astra's global palette sets h1-h6 to --ast-global-color-2 (#1E293B, a light-background value) at specificity (0,0,1). On charcoal that is 1.16:1 — invisible. Its inline customizer CSS prints after our stylesheet, so an equal-specificity rule loses on source order: :root lifts us to (0,1,0) and wins without !important. Kept first in this file so component rules (also (0,1,0)) still win their ties. Written out longhand on purpose — LiteSpeed's UCSS pass drops every rule whose selector uses :is()/:where(), so the grouped form silently never reaches the browser on this site. */ :root h1, :root h2, :root h3, :root h4, :root h5, :root h6 { color: var(--h4yf-ink); } /* ------------------------------------------------------------------ */ /* Sticky header */ /* ------------------------------------------------------------------ */ .h4yf-header { position: sticky; top: 0; z-index: var(--h4yf-z-sticky); background: var(--h4yf-charcoal); border-bottom: 1px solid var(--h4yf-charcoal-2); } .h4yf-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1280px; margin: 0 auto; padding: 12px 16px; min-height: 56px; } .h4yf-logo { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; line-height: 0; /* Mobile audit 2026-07-31: measured 40x40, under the 44px floor. */ min-width: var(--h4yf-tap-floor, 44px); min-height: var(--h4yf-tap-floor, 44px); } .h4yf-logo img { display: block; height: 40px; width: auto; max-width: 160px; object-fit: contain; } .h4yf-logo--text { color: var(--h4yf-ink); font-family: var(--h4yf-display); font-weight: 400; font-size: 18px; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1; } .h4yf-header__nav { flex: 1; display: none; justify-content: center; } @media (min-width: 921px) { .h4yf-header__nav { display: flex; } /* `!important`, not a descendant scope — and that is deliberate. Bare `.h4yf-nav-toggle` is (0,1,0) and ties `.h4yf-icon-btn { display: inline-flex }` at line ~163; a media query adds no specificity, so the tie went to source order and the LATER rule won — the hamburger rendered 48x48 beside the full inline nav at every desktop width (6.6 punch-list P2-11). The obvious fix, `.h4yf-header .h4yf-nav-toggle` at (0,2,0), SHIPPED AND FAILED on 0.9.37: **LiteSpeed UCSS rewrites selectors and dropped the `.h4yf-header ` ancestor**, collapsing it straight back to (0,1,0) and re-creating the tie. Verified in the served bundle — the hide sat at char 20,412 and `.h4yf-icon-btn` at 21,043, so order decided it again. `!important` is the only form here that survives a selector rewrite, because it does not depend on the selector at all. */ .h4yf-nav-toggle { display: none !important; } } .h4yf-nav, .h4yf-drawer-nav { list-style: none; margin: 0; padding: 0; } .h4yf-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 20px; } .h4yf-nav a, .h4yf-drawer-nav a { color: var(--h4yf-ink); text-decoration: none; font-family: var(--h4yf-body); font-weight: 700; /* 15px = the legacy canon nav floor (h4yf_custom_css 2026-06-30 "PRIMARY NAV 5-PILLAR LEGIBILITY FIX") — was 13px, below floor. Ported sprint 7.2-r2. */ font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; transition: opacity 0.2s ease, color 0.2s ease; } .h4yf-nav a:hover, .h4yf-nav a:focus-visible, .h4yf-drawer-nav a:hover, .h4yf-drawer-nav a:focus-visible { color: var(--h4yf-hover); opacity: 1; } /* ---------------------- desktop dropdowns (#369) ---------------------- Astra injects an arrow span into EVERY item, childless or not, and its own dropdown CSS/JS keys off `.main-header-menu` — which this markup is not. The skin owns the submenu outright. `!important` on both states, not a cleverer selector: UCSS rewrites selectors on this site (see the .h4yf-nav-toggle note above), and a media query adds no specificity. The open rule still carries a full class more than the closed rule, so it survives a dropped ancestor. */ .h4yf-nav > li { position: relative; } /* Astra stamps an `.ast-icon.icon-arrow` chevron into EVERY `.menu-link`, including leaf items with no children, plus a `.dropdown-menu-toggle` span on each parent. The desktop bar has hidden them since Sprint 1.2 — the DRAWER never was, so 34 chevrons rendered down the mobile menu (measured on slate 2026-08-04). They were noise in every case: the drawer does not accordion, `.h4yf-drawer-nav .sub-menu` is an always-expanded indented list, so nothing was ever behind a toggle. Josh 2026-08-04: "Remove carrots from mobile hamburger menu". `.ast-menu-toggle` is already killed globally at the top of this file. */ .h4yf-nav .ast-icon, .h4yf-nav .dropdown-menu-toggle, .h4yf-drawer-nav .ast-icon, .h4yf-drawer-nav .dropdown-menu-toggle { display: none !important; } .h4yf-nav > li > a { display: inline-flex; align-items: center; gap: 6px; min-height: var(--h4yf-tap-floor, 44px); } .h4yf-nav .menu-item-has-children > a::after { content: ''; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); } .h4yf-nav .sub-menu { display: none !important; position: absolute; top: 100%; left: 0; z-index: 1; min-width: 220px; margin: 0; padding: 6px 0; list-style: none; background: var(--h4yf-charcoal); border: 1px solid var(--h4yf-charcoal-2); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); } .h4yf-nav .menu-item-has-children:hover > .sub-menu, .h4yf-nav .menu-item-has-children:focus-within > .sub-menu { display: block !important; } /* Escape has to beat :hover, which CSS alone cannot undo while the pointer is still over the item. skin.js sets this class and clears it on the next pointerenter/focusin. Same specificity as the open rule, so it must stay AFTER it. */ .h4yf-nav.is-suppressed .menu-item-has-children > .sub-menu { display: none !important; } .h4yf-nav .sub-menu a { display: flex; align-items: center; min-height: var(--h4yf-tap-floor, 44px); padding: 8px 16px; font-size: 14.5px; font-weight: 500; letter-spacing: 0.04em; white-space: nowrap; } .h4yf-header__actions { display: flex; align-items: center; gap: 4px; } .h4yf-icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--h4yf-ink); cursor: pointer; transition: background 0.2s ease; } .h4yf-icon-btn:hover, .h4yf-icon-btn:focus-visible { background: var(--h4yf-charcoal-2); } /* `outline: none` used to sit in the rule above, i.e. on `:focus-visible` too — it stripped the keyboard ring off every icon button and only looked fine because premier.css re-added an outline further down the cascade. That premier block is gone (2026-08-02), so the suppression goes with it: the background fill is the HOVER feedback, and the sitewide focus blanket supplies the #EE6730 ring + glow for keyboard users. */ .h4yf-icon-btn:hover { outline: none; } /* Chromium collapses an inline flex child to 0 width when it's only sized via width/height attributes (no CSS width) — explicit CSS is required. */ .h4yf-icon-btn svg { width: 22px; height: 22px; flex-shrink: 0; } .h4yf-cart-count { position: absolute; top: 6px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--h4yf-crimson); color: var(--h4yf-ink); font-family: var(--h4yf-body); font-weight: 700; font-size: 10px; line-height: 18px; text-align: center; } .h4yf-cart-count:empty, .h4yf-cart-count[data-count="0"] { display: none; } /* ------------------------------------------------------------------ */ /* Off-canvas drawers — rebuilt 2026-07-31 (Josh: elevated aesthetic + */ /* quantified thumb-zone canon + custom lazy cart, no wc-cart-fragments)*/ /* */ /* THUMB ZONE (canon: docs/brand/H4YF_THUMB_ZONE.md). Reference device */ /* 390x844. Measured from the BOTTOM edge: */ /* natural 0-280px | stretch 280-560px | hard 560-844px */ /* Everything a user taps repeatedly lives in the bottom third. That is */ /* why the nav list is bottom-weighted (margin-top:auto) and the CTAs */ /* sit in a footer above the home indicator, not at the top of the */ /* panel where a right-thumb reach has to cross the whole screen. */ /* ------------------------------------------------------------------ */ /* Semantic z-index scale. Replaces the old 9998/9999 pair — arbitrary four-digit values are how stacking wars start. Anything overlaying the page picks a rung here rather than inventing a bigger number. */ :root { --h4yf-z-sticky: 500; /* Product image plate — ONE aspect for every product photo on the site. Every catalogue photo comes out of sneaker-suite's `square()` on a SQUARE transparent canvas with the shoe centered. A sneaker is a wide, short subject, so live-measured across a 61-image sample the shoe fills ~85% of that canvas horizontally but only ~40-55% of it vertically. Rendered in a 1:1 tile, that dead space is half the tile and the product reads tiny (Josh 2026-08-29: "essentially shrank to where the shoe image was rendered drastically smaller, unreadable"). 4:3 + `cover` crops the middle 75% of the source's HEIGHT, which is transparent padding on every pipeline image — the tallest content in that sample was 57.2% of canvas height (spanning 21.4%-78.6%), so the crop has ~4.7% clearance and never reaches the shoe. Net: the shoe renders ~1.35x larger in the same tile footprint. This REPLACES the 4:5 plate the drops/radar/heat/grail cards carried. 4:5 is TALLER than the square source, so `cover` there cropped ~20% off the WIDTH — straight through the toe and heel of a shoe occupying 85% of it. That is the zoomed-in/cut-off rendering Josh flagged on /drops/. The PDP hero is deliberately NOT on this plate: a detail page must never crop the product. See the `contain` block on the gallery below. */ --h4yf-plate: 4 / 3; --h4yf-z-bottombar: 600; --h4yf-z-overlay: 700; --h4yf-z-drawer: 710; --h4yf-z-toast: 800; --h4yf-z-sheet: 810; /* Ease-out only — nothing on this surface eases IN. A panel that accelerates away from the finger reads as lag. */ --h4yf-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --h4yf-drawer-dur: 380ms; /* Tap-target floor (WCAG 2.5.5 AAA / Apple HIG 44pt) and the comfortable target (Material 48dp). Never ship below the floor. */ --h4yf-tap-floor: 44px; --h4yf-tap: 48px; /* Basketball orange — the focus / selection / highlight signal (Josh 2026-08-01). [AMENDED 2026-08-04, Josh: "I mean sitewide; crimson is the brand color to use." `--h4yf-orange` (#D4571A, the hover carve-out) is RETIRED and all 20 of its declarations are now crimson. This token is the ONE orange left, and it is deliberately NOT swapped: it is not a brand colour, it is a WCAG 1.4.11 non-text indicator, and it is the only thing telling a keyboard user where they are. Crimson measures 2.88:1 on the charcoal floor — BELOW the 3:1 that a focus indicator has to clear — so swapping it would trade a visible focus ring for an invisible one and turn `scripts/a11y/a11y_check.py` red on two committed pairs. Flagged to Josh 2026-08-04; swap it only if he confirms after seeing that number.] Crimson stays the brand accent and CTA fill. Brighter than #D4571A on purpose — a focus ring has to read instantly against charcoal, and it measures 4.94:1 on the #232326 floor and 4.39:1 on the #2C2C2E card (re-derived 2026-08-02 when the floor lifted from #1C1C1E, where it had been 5.36:1 — still far past the 3:1 floor) (WCAG 1.4.11 needs 3:1 for a non-text indicator; all three pairs, selection included, are checked by a11y_check.py). Never use it as a fill or a text colour; it means "this is the thing you're on", nothing else. */ --h4yf-bball: #ee6730; --h4yf-bball-glow: rgba(238, 103, 48, 0.42); --h4yf-bball-halo: rgba(238, 103, 48, 0.22); } /* Text selection carries the same signal. */ body.h4yf-skin ::selection { background: var(--h4yf-bball); color: #1c1c1e; } .h4yf-drawer-overlay { position: fixed; inset: 0; z-index: var(--h4yf-z-overlay); background: rgba(10, 10, 11, 0.62); opacity: 0; transition: opacity var(--h4yf-drawer-dur) var(--h4yf-ease-out-expo); /* Blur is earned here: it separates an overlaid surface from the page beneath it. Not decorative glass — the drawer is the one truly overlaid surface in the system (DESIGN.md elevation rule). */ backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .h4yf-drawer-overlay.is-open { opacity: 1; } .h4yf-drawer { position: fixed; top: 0; right: 0; z-index: var(--h4yf-z-drawer); display: flex; flex-direction: column; width: min(92vw, 400px); max-width: 100%; /* top/bottom inset rather than `height: 100dvh` — measured 2026-07-31, dvh resolved to 1087px against an 844px visible viewport, which pushes bottom-anchored content below the fold. Insets are always exactly the visual viewport. */ bottom: 0; background: var(--h4yf-charcoal); border-left: 1px solid var(--h4yf-border); transform: translateX(100%); transition: transform var(--h4yf-drawer-dur) var(--h4yf-ease-out-expo); /* The system's only real shadow (DESIGN.md): two layers, tight contact + wide ambient, so the panel reads as lifted rather than outlined. */ box-shadow: -1px 0 0 rgba(255, 255, 255, 0.04), -24px 0 60px rgba(0, 0, 0, 0.55); will-change: transform; } .h4yf-drawer.is-open { transform: translateX(0); } /* A closed drawer parks at translateX(100%) — flush with the right edge — so its 60px ambient shadow painted a dark band down the right side of every page at every width (2026-09-30 audit). The shadow belongs to the open state only. `:not(.is-open)` rather than a rule on `.is-open`, because the :not() form matches at UCSS crawl time and survives the shredder (see paintOpen() in assets/skin.js). */ .h4yf-drawer:not(.is-open) { box-shadow: none; } /* Head sits in the HARD zone by construction (top of a 844px panel), so it carries identity and the close affordance — never a primary action. */ .h4yf-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: max(18px, env(safe-area-inset-top)) 18px 14px; border-bottom: 1px solid var(--h4yf-charcoal-2); } .h4yf-drawer__title { color: var(--h4yf-ink); font-family: var(--h4yf-display); font-weight: 400; font-size: 22px; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; } .h4yf-drawer__body { flex: 1; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; padding: 18px; -webkit-overflow-scrolling: touch; } /* THUMB ZONE, load-bearing: push a SHORT nav list to the bottom of the panel so the items land in the natural arc. `margin-top: auto` on the LIST — never `justify-content: flex-end` on the scroll container. Measured 2026-07-31 on the live menu (5 top-level + 19 sub-items = 1139px of list in a 767px box): flex-end put the list 390px ABOVE the scroll box, `scrollHeight` didn't count it, and the top items were permanently unreachable — you cannot scroll to content that overflows the START of a flex container. `margin-top: auto` collapses to 0 once the content is taller than the box, so a long menu scrolls normally. */ .h4yf-drawer__body--nav > .h4yf-drawer-nav, .h4yf-drawer__body--nav > div > .h4yf-drawer-nav { margin-top: auto; } .h4yf-drawer-nav { display: flex; flex-direction: column; gap: 2px; } .h4yf-drawer-nav a { display: flex; align-items: center; min-height: var(--h4yf-tap); padding: 12px 2px; font-family: var(--h4yf-body); font-size: 16px; font-weight: 600; letter-spacing: 0.01em; border-bottom: 1px solid var(--h4yf-charcoal-2); position: relative; transition: color 160ms var(--h4yf-ease-out-expo), padding-left 220ms var(--h4yf-ease-out-expo); } /* Crimson as a scalpel: a 2px rule that grows from the leading edge on hover/focus. Not a fill, not a side-stripe at rest — it only exists while the item is engaged. */ .h4yf-drawer-nav a::before { content: ""; position: absolute; left: 0; top: 50%; width: 0; height: 2px; background: var(--h4yf-crimson); transform: translateY(-50%); transition: width 220ms var(--h4yf-ease-out-expo); } .h4yf-drawer-nav a:hover, .h4yf-drawer-nav a:focus-visible { color: var(--h4yf-ink); padding-left: 18px; } .h4yf-drawer-nav a:hover::before, .h4yf-drawer-nav a:focus-visible::before { width: 12px; } /* Top-level only (`>` on the outer list) — Bug found 2026-08-09 live on /shop/: "Shop Sneakers" and its child "Heat (All)" both link to /shop/, so WordPress's own current-menu-item detection (URL match, not depth) marks BOTH current, and this rule used to fire on `.current-menu-item` at any depth — the dash rendered on the top-level title AND bled onto the sub-item directly beneath it, colliding with its label. Menu titles get the indicator; sub-items never do, regardless of how many share a URL with their parent. */ .h4yf-drawer-nav > .current-menu-item > a { color: var(--h4yf-ink); padding-left: 18px; } .h4yf-drawer-nav > .current-menu-item > a::before { width: 12px; } .h4yf-drawer-nav .sub-menu { list-style: none; margin: 0; padding: 0 0 0 14px; } /* Sub-links: >=46px tap height per legacy canon (h4yf_custom_css 2026-06-30 "MOBILE NAV LEGIBILITY + TAP TARGETS spec 1.2/1.3") — was 13px/41px, below floor. Ported sprint 7.2-r2, kept above the 44px floor. */ .h4yf-drawer-nav .sub-menu a { display: flex; align-items: center; min-height: 46px; font-size: 14.5px; font-weight: 500; color: var(--h4yf-body-color, var(--h4yf-ink)); opacity: 0.82; border-bottom: 0; padding: 8px 2px; } /* Staggered entrance — one list, items arriving in sequence. Legitimate stagger (a single list), not a uniform reflex applied to every section. Default state is VISIBLE: the transform only applies while the drawer is closed, so a headless render or a paused tab can never ship it blank. */ .h4yf-drawer:not(.is-open) .h4yf-drawer-nav > li { opacity: 0; transform: translateX(12px); } .h4yf-drawer-nav > li { opacity: 1; transform: none; transition: opacity 260ms var(--h4yf-ease-out-expo) var(--h4yf-stagger, 0ms), transform 260ms var(--h4yf-ease-out-expo) var(--h4yf-stagger, 0ms); } /* --------------------------- cart drawer --------------------------- */ .h4yf-cart-lines { list-style: none; margin: 0; padding: 0; } .h4yf-cart-line { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--h4yf-charcoal-2); } .h4yf-cart-line img { width: 56px; height: 56px; object-fit: cover; border-radius: 4px; background: var(--h4yf-charcoal-2); } .h4yf-cart-line__name { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--h4yf-ink); } .h4yf-cart-line__meta { font-size: 12.5px; color: var(--h4yf-gray); margin-top: 2px; } /* Quiet at rest, crimson when engaged — the same treatment the cart page's remove control gets, so the two surfaces read as one action. Muted, not ink: nothing in a cart should compete with Checkout, and a destructive control least of all. Inline-flex with the 44px floor because this is a real tap target on the surface most of the traffic uses. */ .h4yf-cart-line__remove { display: inline-flex; align-items: center; min-height: var(--h4yf-tap-floor, 44px); margin-top: 2px; padding: 0; background: none; border: 0; color: var(--h4yf-muted); font-family: var(--h4yf-body); font-weight: 700; font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; transition: color 160ms var(--h4yf-ease-out-expo); } .h4yf-cart-line__remove:hover, .h4yf-cart-line__remove:focus-visible { color: var(--h4yf-hover); } .h4yf-cart-line__remove[disabled] { opacity: 0.55; cursor: default; text-decoration: none; } .h4yf-cart-line__price { font-family: var(--h4yf-display); font-size: 17px; letter-spacing: 0.04em; color: var(--h4yf-ink); white-space: nowrap; align-self: start; } /* Empty + loading states are real states, not afterthoughts. */ .h4yf-cart-state { margin: auto 0; text-align: center; padding: 32px 8px; color: var(--h4yf-gray); font-size: 14px; } .h4yf-cart-state__title { font-family: var(--h4yf-display); font-size: 20px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--h4yf-ink); margin-bottom: 6px; } .h4yf-cart-skeleton { height: 56px; border-radius: 4px; background: linear-gradient(90deg, var(--h4yf-charcoal-2) 25%, #34343a 50%, var(--h4yf-charcoal-2) 75%); background-size: 200% 100%; animation: h4yf-shimmer 1.4s ease-in-out infinite; margin-bottom: 10px; } @keyframes h4yf-shimmer { to { background-position: -200% 0; } } .h4yf-cart-subtotal { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 0 2px; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--h4yf-gray); } .h4yf-cart-subtotal strong { font-family: var(--h4yf-display); font-size: 22px; letter-spacing: 0.04em; color: var(--h4yf-ink); } /* THUMB ZONE: the foot is the natural-arc band. Primary action (Checkout) goes on the RIGHT because ~90% of one-handed use is right-thumb, and the safe-area pad keeps it clear of the home indicator. */ .h4yf-drawer__foot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 18px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--h4yf-charcoal-2); background: var(--h4yf-charcoal); } .h4yf-drawer__foot .h4yf-btn { min-height: var(--h4yf-tap); } /* Reduced motion: the panel still needs to arrive, but it crossfades in place instead of sliding, and the stagger is dropped entirely. */ @media (prefers-reduced-motion: reduce) { .h4yf-drawer { transition: opacity 120ms linear; transform: none; opacity: 0; pointer-events: none; } .h4yf-drawer.is-open { opacity: 1; pointer-events: auto; } .h4yf-drawer:not(.is-open) .h4yf-drawer-nav > li, .h4yf-drawer-nav > li { opacity: 1; transform: none; transition: none; } .h4yf-drawer-nav a, .h4yf-drawer-nav a::before { transition: none; } .h4yf-cart-skeleton { animation: none; } } .h4yf-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 16px; border-radius: 6px; background: var(--h4yf-crimson); color: var(--h4yf-ink); text-decoration: none; font-family: var(--h4yf-display); font-weight: 400; font-size: var(--h4yf-fs-cta); letter-spacing: 0.08em; text-transform: uppercase; text-align: center; border: 0; cursor: pointer; transition: opacity 0.2s ease, color 160ms var(--h4yf-ease-out-expo, ease-out), box-shadow 160ms var(--h4yf-ease-out-expo, ease-out); } /* HOVER TEXT GOES ORANGE, and the button picks up the same glow focus already uses (Josh 2026-08-20: "all hover/focus color is the basketball orange glow, including text on buttons when hovering"). The old rule was `opacity: 0.9` and nothing else, which on a crimson fill is a change you have to look for — the button got very slightly darker and the ink label did not move at all. On the ghost variant it did even less, because fading a transparent background is fading nothing. Orange-on-crimson measures 3.3:1, which clears the 3:1 large-text floor the CTA type sits above (Bebas at `--h4yf-fs-cta`, 16px+ and heavy). The glow is what carries the state at a glance; the colour shift is what confirms it once you look. Both are the same pair of tokens the focus ring uses, so pointing at a button and tabbing to it now say the same thing in the same language. */ .h4yf-btn:hover { opacity: 1; color: var(--h4yf-hover); box-shadow: 0 0 0 3px var(--h4yf-bball-halo), 0 0 16px 1px var(--h4yf-bball-glow); } /* A glow is an appearance change, not motion, but it still must not animate for anyone who asked for less — same treatment the focus ring already gets. */ @media (prefers-reduced-motion: reduce) { .h4yf-btn, .h4yf-btn:hover { transition: none; } } /* [FIXED 2026-08-04, impeccable polish pass] The border was `--h4yf-charcoal-2` (#2C2C2E) — nine steps off the `--h4yf-charcoal` (#232326) page it sits on, i.e. an outline you effectively cannot see. Live at 390px the hero's secondary CTA ("Watch the Channel — 194 Videos") read as loose floating text rather than a button; the token block's own comment says `--h4yf-border` (#3A3A3C) exists because it "reads on BOTH charcoal and charcoal-2 surfaces", which is exactly this case. */ .h4yf-btn--ghost { background: transparent; border: 1px solid var(--h4yf-border); } /* AFTER the base rule on purpose: `.h4yf-btn--ghost` sets the `border` SHORTHAND, which resets border-color. Declared above it, this rule loses to a later shorthand at equal specificity and the ghost button's only hover change would be its label. */ .h4yf-btn--ghost:hover, .h4yf-btn--ghost:focus-visible { border-color: var(--h4yf-hover); } /* YouTube-branded ghost buttons (Josh punch list: match the real YouTube icon/color) — red border instead of the generic --h4yf-border gray, paired with h4yf_youtube_glyph_brand()'s hardcoded red/white icon in front-page.php. */ .h4yf-btn--yt.h4yf-btn--ghost { border-color: #FF0000; } /* Shop-loop pagination fallback (sprint 6.6-fix P1-5) — canon CTA, not the WooCommerce/Astra default blue button. */ .h4yf-load-more { display: block; margin: 16px auto; padding: 0 16px; min-height: 48px; background: var(--h4yf-crimson); color: var(--h4yf-ink); border: 0; border-radius: 6px; font-family: var(--h4yf-display); font-weight: 400; font-size: var(--h4yf-fs-cta); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: opacity 0.2s ease; } .h4yf-load-more:hover { opacity: 0.9; } body.h4yf-drawer-open { overflow: hidden; } /* ------------------------------------------------------------------ */ /* Shop archive — edge-to-edge 2-col mobile grid */ /* ------------------------------------------------------------------ */ @media (max-width: 768px) { .post-type-archive-product .site-content > .ast-container, .tax-product_cat .site-content > .ast-container, .tax-product_tag .site-content > .ast-container { padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; } .woocommerce ul.products { display: flex !important; flex-wrap: wrap !important; margin: 0 !important; padding: 0 !important; gap: 2px !important; } /* De-framed cards: transparent surface + crimson hairline only — continuous charcoal scroll, no boxed frames. Ported from h4yf_custom_css 2026-06-30 de-frame block ("PREMIER MOBILE STORE"), sprint 7.2-r2. */ .woocommerce ul.products li.product { width: calc(50% - 1px) !important; margin: 0 !important; padding: 0 0 14px !important; background: transparent !important; border: none !important; border-bottom: 2px solid rgba(196, 30, 30, 0.16) !important; border-radius: 0 !important; } /* [REVERSED 2026-08-20, Josh: "ensure the crimson 'add to cart' button needs to be uniform across site inventory."] This block used to read "Grid add-to-cart hidden — drive to PDP (Bill)" and hid the button below 768px, which removed the primary buying action from the surface carrying ~85% of the traffic. Bill's original call is preserved here rather than deleted, because it was a deliberate decision and this is a deliberate reversal of it, not a bug fix. `.added_to_cart` (the "View cart →" link WooCommerce appends after an AJAX add) stays hidden: the header badge and the cart drawer already report the add, and a third confirmation inside a 2-up mobile grid pushes the next card off the fold. */ .woocommerce ul.products li.product .added_to_cart { display: none !important; } } /* ---- The shop-loop CTA (2026-08-20) -------------------------------------- ONE button, one look, both stages, every viewport — Josh: "ensure the crimson 'add to cart' button needs to be uniform across site inventory." `inc/inventory-lifecycle.php` renders it and decides which it is: Add to Cart on a live pair, Request This Pair on an upcoming or placed one. Both carry `.h4yf-btn`, so they inherit the site's button — including the new orange hover glow — instead of being a fourth thing that looks nearly like a button. The old rule sized Astra's `.ast-on-card-button` and applied on desktop only, because the button was hidden on mobile. Both of those are gone. Astra's selectors are kept in the list: its markup still renders on any loop this theme has not taken over (a shortcode grid, a block), and the point of this pass is that they all look the same. */ .woocommerce ul.products li.product .h4yf-loop-cta, .woocommerce ul.products li.product .ast-on-card-button, .woocommerce ul.products li.product a[class*="add_to_cart_button"] { display: flex; align-items: center; justify-content: center; width: 100%; min-height: var(--h4yf-tap-floor, 44px); margin-top: 10px; background: var(--h4yf-crimson); color: var(--h4yf-ink); border: 0; border-radius: 6px; font-family: var(--h4yf-display); font-weight: 400; font-size: var(--h4yf-fs-cta); letter-spacing: 0.06em; text-transform: uppercase; text-align: center; text-decoration: none; } /* Request This Pair is the same button, not a lesser one. A placed pair is still the strongest lead on the page — somebody wanted exactly that shoe — so demoting its CTA to a ghost would be optimising the wrong way. */ .woocommerce ul.products li.product .h4yf-loop-cta--request { background: var(--h4yf-crimson); } /* The 2-up mobile grid is edge-to-edge with a 2px gutter, so the button needs the card's own inset rather than the full cell width. */ @media (max-width: 768px) { .woocommerce ul.products li.product .h4yf-loop-cta { width: calc(100% - 16px); margin-inline: 8px; font-size: 13px; letter-spacing: 0.04em; } } .woocommerce ul.products li.product .price, .woocommerce ul.products li.product .price span { color: var(--h4yf-ink) !important; font-family: var(--h4yf-body); font-weight: 700; font-variant-numeric: tabular-nums; } .woocommerce ul.products li.product .woocommerce-loop-product__title { color: var(--h4yf-ink); font-family: var(--h4yf-display); font-weight: 400; /* [RAISED 2026-08-02, Josh directive: the title should read as the card's HEADER.] Was a flat 15px — a legibility floor ported from h4yf_custom_css 2026-06-30, which is a floor, not a design decision, and it left the strongest thing on the card (the shoe's name) smaller than the price beneath it. Bebas is condensed, so 20px here occupies roughly the width of 15px in a normal-width sans: the card gains hierarchy without gaining rows. Still px, not rem — Astra shrinks the mobile root (see style.css), and a card title is exactly the kind of thing that must not silently shrink 8.8% on phones. The vw term is safe; it never depended on the root. */ font-size: clamp(18px, 0.5vw + 16px, 21px); letter-spacing: 0.035em; text-transform: uppercase; } /* Infinite scroll sentinel — pagination stays in DOM for crawlers */ .h4yf-infinite-sentinel { height: 1px; width: 100%; pointer-events: none; } .woocommerce-pagination.h4yf-infinite-active { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .h4yf-infinite-status { text-align: center; padding: 20px 16px; color: #9a9a9a; font-family: var(--h4yf-body); font-weight: 600; font-size: 13px; } /* ------------------------------------------------------------------ */ /* PDP — dark summary, white price, crimson CTAs only */ /* ------------------------------------------------------------------ */ /* [FIXED 2026-07-23, Sprint 6.3: same wrong `.woocommerce`-ancestor assumption as the ATC button below — these 2 rules never matched live either. Price rendered dark-slate-on-charcoal (rgb(51,65,85), ~22px) instead of white/28px; summary panel never got its charcoal-2 background. Live-confirmed via getComputedStyle before AND after this fix.] */ .single-product .summary.entry-summary { background: var(--h4yf-charcoal) !important; color: var(--h4yf-ink) !important; padding: 16px; } .single-product p.price, .single-product span.price { color: var(--h4yf-ink) !important; font-family: var(--h4yf-body) !important; font-weight: 700 !important; font-size: 28px !important; font-variant-numeric: tabular-nums; } /* ---- Sale price: struck regular vs live sale (#746) -------------------- WooCommerce renders a discounted price as `` + `` inside the same `.price` container. Until now the file had NO `del`/`ins` rule at all, so a marked-down pair rendered both numbers identically — same ink, same 700 weight — and the discount, the strongest conversion signal on a resale catalog, was invisible. `!important` is required, not decorative: the loop rule at :1015 and the PDP rule at :1107 both paint `.price span` with `color: var(--h4yf-ink) !important`, and Woo nests the amount in a `` inside the ``, so an unflagged rule here loses to them. Selectors are also written long enough to out-specify those two — `.woocommerce ul.products li.product .price span` is (0,4,3), so the loop pair below must match or beat it. Crimson is deliberately NOT used: it is 2.88:1 on charcoal (style.css:18), below the 4.5:1 AA floor for text, and it is already the CTA fill — a second crimson number next to a crimson Add-to-Cart competes with the click. `--h4yf-gray` (#8C8C8C, 5.1:1) recedes the old price instead, which is what makes the new one read as the discount. No `:is()`/`:where()` — LiteSpeed's UCSS pass silently drops those on this site (see the note at the top of this file). ------------------------------ */ .woocommerce ul.products li.product .price del, .woocommerce ul.products li.product .price del span, .single-product .entry-summary .price del, .single-product .entry-summary .price del span, .single-product p.price del, .single-product p.price del span { color: var(--h4yf-gray) !important; font-weight: 400 !important; text-decoration: line-through; text-decoration-thickness: 1px; } .woocommerce ul.products li.product .price ins, .woocommerce ul.products li.product .price ins span, .single-product .entry-summary .price ins, .single-product .entry-summary .price ins span, .single-product p.price ins, .single-product p.price ins span { color: var(--h4yf-ink) !important; font-weight: 700 !important; /* Browsers underline `` by default — on a price that reads as a typo. */ text-decoration: none; background: transparent; } /* [FIXED 2026-07-23, Sprint 6.3: same wrong `.woocommerce`-ancestor bug — `.woocommerce` is a body class here, not a wrapper div, so a descendant selector requiring it as an ancestor of `.quantity` can never match (both live on/under the same body element). Live-confirmed broken: transparent bg, rgb(128,130,133) gray text instead of charcoal-2/ink.] */ .single-product .quantity .qty { background: var(--h4yf-charcoal-2) !important; color: var(--h4yf-ink) !important; border: 1px solid var(--h4yf-charcoal-2) !important; height: 52px !important; width: 60px !important; } /* [FIXED 2026-07-23, Sprint 6.3: prior selector required a `.woocommerce` ancestor div that doesn't exist in this theme's actual single-product DOM (Astra renders the product wrapper directly under .content-area, no .woocommerce class anywhere in the chain) — rule never matched live, button rendered stock WooCommerce blue this whole time. body.single-product scoping is enough; no other button on this template shares these classes.] */ body.single-product .button.single_add_to_cart_button, body.single-product .h4yf-btn, .h4yf-vault-alert-btn { background: var(--h4yf-crimson) !important; color: var(--h4yf-ink) !important; font-family: var(--h4yf-display); font-weight: 400; font-size: var(--h4yf-fs-cta); letter-spacing: 0.08em; text-transform: uppercase; border-radius: 6px; } /* Zero default blue: neither rule above sets `border-color`, so it fell through to the initial `currentcolor` at (0,1,0) — Astra's own giant button-reset selector list carries `.woocommerce-js a.button` at (0,2,1), which does win a border-color fight and pins it to var(--ast-global-color-0). Live-measured 2026-08-17 on a PDP with an in-stock item (add-to-cart) and one showing the vault-alert swap-in (out of stock): both borders were default blue. [ROUND 2 FIX, same day] The first pass wrote `a.single_add_to_cart_button` on the assumption both buttons were anchors, matching `h4yf-vault-alert-btn` — checked live afterward and WooCommerce actually renders the real add-to-cart control as `