/** * Design tokens (D-85, 05-UI-SPEC "Token plumbing"). * * The ONLY file allowed to contain colour/font literals (D-85). The client-gated wave changes * palette values in StorefrontSettingsRegistrar::PALETTE (plus the three fixed colour tokens below), * not in component CSS. */ /* * Brand webfonts (05-19, subset in quick-261007-tra): self-hosted WOFF2, SIL OFL 1.1 * (assets/fonts/OFL-*.txt). Self-hosting keeps visitors' IPs away from Google (GDPR). One subset * file per family (Basic Latin, Latin-1, Polish letters, typographic punctuation); the rebuild * recipe is in assets/fonts/FONTS.md and the files are preloaded from inc/assets.php (D-119: late * font discovery cost Lighthouse LCP). Jost is a variable font, so its one file covers the 400 and * 600 weights; Cormorant Garamond ships the 600 heading weight only (bolder requests resolve to * it, no synthetic bold). */ /* * Metric-matched fallback for Jost (D-119, 2026-10-16). system-ui is about 18% wider than Jost on Linux * and Android, so the product breadcrumb wrapped to two lines until the webfont arrived and pushed the * whole product block up by 20 px (CLS 0.23). Arial/Liberation Sans/Helvetica/Roboto scaled to Jost's * measured width and vertical metrics (width ratio 50.27 / 52.40, ascent 1.07 em, descent 0.375 em) * keep the line breaks identical before and after the swap. local() only: no extra request. */ @font-face { font-family: "Jost Fallback"; src: local("Arial"), local("Liberation Sans"), local("Helvetica"), local("Roboto"); size-adjust: 95.9%; ascent-override: 111.6%; descent-override: 39.1%; line-gap-override: 0%; } @font-face { font-family: "Jost"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/jost-pl.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0104-0107, U+0118-0119, U+0141-0144, U+015A-015B, U+0179-017C, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; } @font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/cormorant-garamond-600-pl.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0104-0107, U+0118-0119, U+0141-0144, U+015A-015B, U+0179-017C, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; } :root { /* Palette slots follow Blocksy's roles (05-18): 1 link/primary, 2 hover, 3 text, 4 headings, 5 border, 6 light background, 7 site background, 8 white surface. */ --materli-color-text: var(--theme-palette-color-3); --materli-color-accent: var(--theme-palette-color-1); --materli-color-border: var(--theme-palette-color-5); --materli-color-surface-alt: var(--theme-palette-color-6); --materli-color-surface: var(--theme-palette-color-7); /* No Blocksy slot for these: fixed brand values (05-19, 2026-10-06; contrast proven by bin/verify/check-contrast.sh). Mauve grey, a red kept apart from the burgundy accent, and a deep wine panel (2026-10-29). */ --materli-color-text-muted: #6E5A5C; --materli-color-danger: #B42318; --materli-color-panel: #4A0F1F; --materli-color-control-border: #97806B; --materli-color-focus: var(--materli-color-text); --materli-swatch-fallback: #CFCFCF; /* Brand typography (05-19): Jost for text, Cormorant Garamond for headings, self-hosted below. */ --materli-font-body: "Jost", "Jost Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --materli-font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif; --materli-space-xs: 4px; --materli-space-sm: 8px; --materli-space-md: 16px; --materli-space-lg: 24px; --materli-space-xl: 32px; --materli-space-2xl: 48px; --materli-space-3xl: 64px; --materli-text-label: 14px; --materli-text-body: 16px; --materli-text-heading: 24px; --materli-text-display: 32px; /* Hero editorial split (quick-261008-fjy). */ --materli-text-hero: clamp(34px, 5.6vw, 104px); --materli-text-kicker: clamp(12px, 1vw, 15px); --materli-text-lead: clamp(16px, 1.15vw, 19px); --materli-weight-regular: 400; --materli-weight-strong: 600; --materli-leading-body: 1.5; --materli-leading-heading: 1.2; --materli-radius: 4px; --materli-shadow-raised: 0 -2px 8px rgba(0, 0, 0, 0.08); /* cookie banner (07-UI-SPEC) */ --materli-hit: 44px; /* UI-SPEC "Icon library": in-house icon box. */ --materli-icon-size: 24px; --materli-backdrop: rgba(0, 0, 0, 0.5); --materli-scrim: rgba(0, 0, 0, 0.45); --materli-motion: 200ms ease-out; /* Hover motion (05-19): slow, decelerating ease for image zoom; quick ease for underlines. */ --materli-motion-zoom: 600ms cubic-bezier(0.2, 0.7, 0.2, 1); --materli-motion-quick: 180ms ease-out; --materli-motion-stagger: 40ms; /* Announcement bar presets (quick-261008-kim). Locked pairs (bg/fg): Espresso = #4E1020/#F3E7D8, Mocha = #6B1A2B/#FFFFFF, Cream = #F3E7D8/#2E1A1E (palette slots 2/6, 1/8, 6/3), proven by bin/verify/check-contrast.sh. Palette-slot references keep the client palette the single source. */ --materli-announce-espresso-bg: var(--theme-palette-color-2); --materli-announce-espresso-fg: var(--theme-palette-color-6); --materli-announce-mocha-bg: var(--theme-palette-color-1); --materli-announce-mocha-fg: var(--theme-palette-color-8); --materli-announce-cream-bg: var(--theme-palette-color-6); --materli-announce-cream-fg: var(--theme-palette-color-3); --materli-text-announce: clamp(13px, 1.05vw, 15px); --materli-tracking-announce: 0.1em; --materli-motion-crossfade: 400ms ease-in-out; } /* * Hand the brand families to Blocksy (05-19). Blocksy reads every font from --theme-font-family, * which its global.css sets on :root and its heading rules leave untouched, so redefining it here * brands Blocksy and WooCommerce markup without touching component CSS (D-85). Headings, product * titles included (WooCommerce prints them as h1/h2), take the heading family; the footer column * labels are 14px label-style headings and stay in the text family (the serif is weak that small). */ body { --theme-font-family: var(--materli-font-body); /* Blocksy borders select2 dropdowns and checkboxes/radios with palette 5 (gold since 2026-10-29), which fails 3:1 non-text contrast on the ivory page; match them to the text fields' control border. */ --theme-form-field-border-initial-color: var(--materli-color-control-border); --theme-form-selection-field-initial-color: var(--materli-color-control-border); } :where(h1, h2, h3, h4, h5, h6):not(.materli-footer__heading) { --theme-font-family: var(--materli-font-heading); }