/* Hallmark · macrostructure: Split Studio (lean: Narrative Workflow band) · tone: grounded, direct, dignified · anchor hue: brick 29° * theme: studied-DNA (source: ./mockup/ — Siotek's own September 2026 mockup) · paper oklch(97.3% 0.007 89) · accent oklch(46.4% 0.164 29) * display: Bitter (roman slab serif, 600–800) · body: Atkinson Hyperlegible Next (humanist sans, 400–700) · no mono * studied: yes · DNA-source: local files + rendered capture (rhythm read from a 1280px render) * Hallmark · pre-emit critique: P4 H4 E4 S5 R5 V4 * * SOURCE OF TRUTH for colour, type, space, radius, motion. Pages reference these by name only. * Phase 4 maps each group 1:1 onto theme.json presets (→ --wp--preset--{category}--{slug}); hex * equivalents are noted because the WordPress colour picker stores hex. * Contrast notes are WCAG 2.x ratios measured against the ground named. */ /* Self-hosted fonts (OFL-1.1, licences in /assets/fonts). Latin subset, variable weight. */ @font-face { font-family: "Bitter"; src: url("../fonts/bitter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Atkinson Hyperlegible Next"; src: url("../fonts/atkinson-next-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Atkinson Hyperlegible Next"; src: url("../fonts/atkinson-next-latin-wght-italic.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { color-scheme: light; /* single deliberate light world (portal-style), every colour painted from tokens */ /* ── Grounds ─────────────────────────────────────────────── */ --color-paper: oklch(97.3% 0.007 89); /* #F8F6F1 limestone — default ground */ --color-paper-2: oklch(94.1% 0.012 85); /* #EFEBE3 — alternate band */ --color-paper-3: oklch(90.8% 0.017 85); /* #E6E0D4 — trust strip, pressed states */ --color-field: oklch(99.4% 0.005 89); /* #FEFDFB — form fields; tinted, never pure white */ --color-ink: oklch(21.5% 0.005 68); /* #1B1917 — text; also the dark band ground */ --color-ink-2: oklch(27.5% 0.007 68); /* #2A2724 — raised surface on the dark band */ /* ── Text ────────────────────────────────────────────────── */ --color-text: var(--color-ink); /* 16.2:1 on paper */ --color-text-2: oklch(33.6% 0.009 68); /* #3A3632 — ledes, secondary prose. 11.1:1 paper · 10.1:1 paper-2 */ --color-text-muted: oklch(47.8% 0.013 72); /* #625C55 "stone" — meta, captions. 6.1:1 paper · 5.0:1 paper-3 */ --color-on-ink: oklch(95.3% 0.011 85); /* #F3EFE7 — 15.3:1 on ink */ --color-on-ink-muted: oklch(76.4% 0.019 78); /* #B9B1A5 — 8.3:1 on ink · 7.0:1 ink-2 */ /* ── Accent (brick — the logo's red family). Small footprint: CTAs, links, the offset plate ── */ --color-accent: oklch(46.4% 0.164 29); /* #A1221B — 7.0:1 on paper; white text on it 7.6:1 */ --color-accent-deep: oklch(38.0% 0.134 29); /* #7A1812 — hover/pressed; form errors (with icon + text) */ --color-accent-soft: oklch(92.8% 0.018 26); /* #F3E3E1 — tinted callout ground (accent text 6.1:1) */ --color-on-accent: oklch(99.2% 0.005 89); /* near-white on brick: 7.5:1 */ /* ── Signal (gold). ON INK ONLY: stage markers, labels, focus ring. Never text on paper (2.1:1) ── */ --color-signal: oklch(74.4% 0.147 83); /* #D9A21B — 7.6:1 on ink · 6.5:1 ink-2 */ /* ── Semantic (not brand) ───────────────────────────────── */ --color-success: oklch(47.7% 0.088 154); /* #2F6B45 — form confirmation. 5.9:1 on paper */ --color-success-soft: oklch(94.1% 0.017 154); /* #E3EFE6 */ --color-error: var(--color-accent-deep); /* 9.9:1 on paper; always paired with icon + words */ /* ── Rules & boundaries ─────────────────────────────────── */ --color-rule: oklch(86.9% 0.016 83); /* #D9D3C8 — hairlines, decorative only (1.4:1) */ --color-rule-ink: oklch(37.2% 0.012 62); /* #453F3A — hairlines on the dark band */ --color-control: var(--color-text-muted);/* input/checkbox borders: 6.1:1 — meets 3:1 non-text */ --color-focus: var(--color-ink); /* focus ring on light grounds (16:1) */ --color-focus-on-ink: var(--color-signal); /* focus ring on the dark band (7.6:1) */ /* ── Type ────────────────────────────────────────────────── */ --font-display: "Bitter", Georgia, "Times New Roman", serif; --font-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif; /* Scale: 18px body, ~1.25 steps. Nothing a stressed reader must READ goes below --text-sm. */ --text-xs: 0.875rem; /* 14px — badge/legal micro-labels only */ --text-sm: 1rem; /* 16px — captions, meta, footer, form help */ --text-base: 1.125rem; /* 18px — body (brief minimum) */ --text-md: 1.375rem; /* 22px — ledes, h4 */ --text-lg: clamp(1.5rem, 1.3rem + 0.8vw, 1.75rem); /* 24→28 — h3 */ --text-xl: clamp(1.875rem, 1.45rem + 1.8vw, 2.75rem); /* 30→44 — h2 */ --text-display: clamp(2.5rem, 1.45rem + 4.4vw, 4.25rem); /* 40→68 — h1, ≤ 7 words */ --text-page: clamp(2.25rem, 1.5rem + 3.2vw, 3.5rem); /* 36→56 — inner-page h1 */ --text-phone: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); /* the phone number as a typographic object */ --weight-body: 400; --weight-ui: 500; --weight-strong: 700; --weight-display: 700; --weight-display-heavy: 800; --weight-h3: 600; --leading-body: 1.6; --leading-snug: 1.3; --leading-tight: 1.06; --tracking-display: -0.012em; --tracking-label: 0.08em; /* the 1–2 permitted labels per page */ --measure: 62ch; /* ── Space: 4-pt scale ──────────────────────────────────── */ --space-3xs: 0.25rem; /* 4 */ --space-2xs: 0.5rem; /* 8 */ --space-xs: 0.75rem; /* 12 */ --space-sm: 1rem; /* 16 */ --space-md: 1.5rem; /* 24 */ --space-lg: 2rem; /* 32 */ --space-xl: 3rem; /* 48 */ --space-2xl: 4rem; /* 64 */ --space-3xl: clamp(4rem, 2.6rem + 5.6vw, 6.5rem); /* 64→104 — section padding */ --space-4xl: clamp(5rem, 3rem + 8vw, 9rem); /* 80→144 — one big break per page */ /* ── Layout ─────────────────────────────────────────────── */ --width-max: 73.75rem; /* 1180px */ --width-narrow: 51.25rem; /* 820px — articles, forms */ --gutter: clamp(1rem, 4vw, 2.5rem); --plate-offset: clamp(0.75rem, 1.6vw, 1.25rem); /* the brick plate behind feature photos */ --header-h: 4.5rem; --callbar-h: 4rem; /* mobile sticky tap-to-call bar */ --tap-min: 2.75rem; /* 44px minimum target; primary CTAs use 3.25rem */ --tap-cta: 3.25rem; /* 52px */ /* ── Shape: square. Corners are a signature, not an oversight ── */ --radius-card: 0; --radius-input: 0; --radius-pill: 0; --rule-hair: 1px; --rule-strong: 2px; --focus-width: 3px; --focus-offset: 3px; --shadow-float: 0 8px 24px oklch(21.5% 0.005 68 / 0.12); /* the one floating badge only */ --shadow-bar: 0 -6px 20px oklch(21.5% 0.005 68 / 0.2); /* mobile call bar */ /* ── Layers: six named levels, no ad-hoc numbers ── */ --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-modal: 400; --z-toast: 500; /* ── Motion: nearly cut. One hero entrance; state colour changes only ── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 150ms; --dur-base: 240ms; --dur-slow: 600ms; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 150ms; } }