/** * H4YF self-hosted type — Sprint 1.2 (docs/brand/H4YF_TYPOGRAPHY_PLAN.md §4). * Replaces the Google Fonts CDN enqueue (Playfair Display + Inter) with * locally-served, latin-subset woff2 — no third-party render-blocking request. * font-display: swap on every face; the two above-the-fold-critical faces * (Bebas Neue 400, Montserrat 400) are preloaded from functions.php. */ @font-face { font-family: 'Bebas Neue'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/bebasneue-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/montserrat-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/montserrat-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/montserrat-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/montserrat-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/montserrat-900.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Theme Name: H4YF Skin Theme URI: https://heat4yafeat.com Description: HEAT4YAFEAT premium presentation layer. Astra Pro child theme that OWNS header, nav, infinite scroll, slide-out drawer, and the product grid instead of overriding Astra's Customizer-generated CSS. Source of truth = this git repo. Deploy = SFTP (port 65002, hostinger_deploy_key) to wp-content/themes/h4yf-skin/. Author: Ubiquitous Solutions (Aure / Verus / Cursor) Template: astra Version: 0.7.1 */ /* ------------------------------------------------------------------ DESIGN TOKENS (canon - h4yf_global_invariants, locked 2026-06-22; crimson-as-foreground-text ban LIFTED 2026-07-26, Josh directive — crimson is a main brand color and is now available as text wherever it's the best fit, no contrast carve-out. Still never a full-width bar. The one standing restriction: no blue text anywhere, for consistency.) ------------------------------------------------------------------ */ :root { /* [CHANGED 2026-08-02, Josh directive: "make whole site wallpaper/background charcoal - not black w/charcoal boxes".] The floor was #1C1C1E, which reads as black rather than charcoal, and every panel sat on it at #2C2C2E — a 16-step jump that made the page look like a black backdrop with charcoal boxes floating on it instead of one charcoal material. The floor is now #232326, which is not a new colour: DESIGN.md already names it "Vault Mid", so the ladder tightens rather than gaining a hex. Floor-to-wall drops from 16 steps to 9, which is the luxury move — fewer, quieter tonal steps with hairlines doing the separating, per the Flat-Floor rule. Contrast re-derived at the new floor, not assumed: ink #FAFAFA 15.01:1 (was 14.83) AA/AAA muted #8C8C8C 4.66:1 (was 5.06) AA body text — still passes crimson-as-TEXT 2.65:1 (was 2.88) ALREADY FAILING — this is D22, an open decision with Josh, and the lift makes it modestly worse. CTA FILLS are unaffected (ink-on-crimson, 5.66:1) because they do not depend on the page background. Flagged, not silently absorbed. */ --h4yf-charcoal: #232326; /* base surface — the site's charcoal wallpaper */ --h4yf-charcoal-2: #2C2C2E; /* one step up: cards, panels, drawer */ --h4yf-ink: #FAFAFA; /* primary text on charcoal */ --h4yf-crimson: #C41E1E; /* CTAs + accents + text, wherever it's the best fit (Josh directive 2026-07-26, supersedes the old fill-only/2.9:1 restriction — H4YF_TYPOGRAPHY_PLAN.md §1) */ /* --h4yf-orange (#D4571A) RETIRED 2026-08-04, Josh directive: "I mean sitewide; crimson is the brand color to use." It carried the hover state on links, chips, nav, category tiles and trust links — 20 declarations, all now var(--h4yf-crimson). The token is deleted rather than aliased so a new `var(--h4yf-orange)` fails loudly instead of silently resolving to crimson. [SUPERSEDES the D3 "hover/focus/selector states ONLY" carve-out and the 2026-08-01 correction in DESIGN.md/PRODUCT.md that reinstated orange as sanctioned. Both are amended in place.] The ONE orange left on the site is `--h4yf-bball` (#EE6730), the focus / selection ring in assets/skin.css — see the note there. It is not a brand colour choice; it is a WCAG 1.4.11 indicator with committed contrast pairs, and crimson measures 2.88:1 against the 3:1 floor it has to clear. */ /* HOVER + FOCUS = BASKETBALL ORANGE (Josh directive 2026-08-20: "Confirm DoD all hover/focus color is the basketball orange glow, including text on buttons when hovering"). This REVERSES the 2026-08-04 amendment recorded immediately below, which retired orange from hover and made hover crimson everywhere. Josh's reason is the stronger one and it is the same reason `--h4yf-bball` already owns focus: crimson is the brand's RESTING accent — it marks CTAs, badges and active nav — so using it for hover too means the colour that says "this matters" and the colour that says "you are pointing at this" are the same colour, and neither reads. Orange was already the "this is the thing you're on" signal for focus and selection; hover is the same statement made with a mouse. A named token, not 31 hand-edited declarations: hover was already changed wholesale once (2026-08-04) and changing it back by hand a second time is how a few sites get missed. One definition, one future edit. Contrast: #EE6730 measures 5.36:1 on the charcoal floor and 4.39:1 on the card surface — it clears AA as text, which crimson (2.88:1, the named D22 exception) never did. Hover legibility improves as a side effect. */ --h4yf-hover: var(--h4yf-bball); --h4yf-crimson-accent: #A8123A; /* D16 (it7): gradient wash / hairlines / callout accents ONLY — never text, never a CTA fill (canon crimson stays the CTA) */ --h4yf-gray: #9A9A9A; /* muted metadata — 5.57:1 on floor, 4.95:1 on the card wall (#8C8C8C was 4.14:1 there, 2026-09-30) */ --h4yf-border: #3A3A3C; /* Sprint 6.6 RC3: card/box hairline. Reads on BOTH charcoal and charcoal-2 surfaces, which charcoal-2 itself cannot (cards use it as their background). Separators on a charcoal canvas stay charcoal-2. */ /* Sprint 1.2 (D1, resolved 2026-07-08): two-font system, self-hosted (assets/fonts.css). */ --h4yf-display: "Bebas Neue", Impact, "Arial Narrow", sans-serif; /* display — H1-H3, product titles, CTAs, stat callouts. Uppercase only, never body/UI chrome. */ --h4yf-body: "Montserrat", system-ui, sans-serif; /* body/utility — paragraphs, nav, SKUs/sizes, checkout, inputs, labels. */ /* Mobile-first fluid type scale — H4YF_TYPOGRAPHY_PLAN.md §2. Each clamp() hits the raw spec's mobile value exactly at 390px and its desktop value at 1280px; no separate breakpoint overrides for sizing. BOUNDS ARE px, NOT rem (fixed 2026-08-02, measured on slate). Astra sets the root font-size to 91.2% below its tablet breakpoint — 14.592px, not 16 — so every rem in this block rendered 8.8% under spec at phone widths while reading correctly at desktop, which is why it survived review for weeks: body 12.8px against an intended 14, meta 11.0 against 12, CTA 14.6 against 16. The px values below are the SAME spec numbers the rem values were meant to express (1rem = 16px); nothing was re-tuned to compensate, because compensating would have hidden the cause. The vw term is unaffected — it never depended on the root size. */ --h4yf-fs-h1: clamp(36px, 20.22px + 4.05vw, 72px); --h4yf-fs-h2: clamp(28px, 21.87px + 1.57vw, 42px); --h4yf-fs-h3: clamp(20px, 16.5px + 0.9vw, 28px); --h4yf-fs-subhead: clamp(13px, 11.68px + 0.34vw, 16px); --h4yf-fs-body: clamp(14px, 13.12px + 0.22vw, 16px); --h4yf-fs-meta: clamp(12px, 11.12px + 0.22vw, 14px); --h4yf-fs-cta: clamp(16px, 14.24px + 0.45vw, 20px); --h4yf-fs-trust-stat: clamp(26px, 21.62px + 1.12vw, 36px); --h4yf-fs-trust-label: clamp(10px, 9.12px + 0.22vw, 12px); /* Z-Index Semantic Ladder (Issue #750 P1-7) */ --h4yf-z-scroll-top: 99; --h4yf-z-header: 500; --h4yf-z-bottombar: 600; --h4yf-z-toolbar: 610; --h4yf-z-overlay: 700; --h4yf-z-drawer: 710; --h4yf-z-toast: 800; --h4yf-z-sheet: 810; } /* Actual component CSS lives in assets/skin.css (enqueued in functions.php AFTER Astra so it wins the cascade by load-order, not by !important wars). Keep this file to the theme header + tokens. */