/* ───────────────────────────────────────────────────────────────────── SvarKlar - design tokens (single source of truth) Edit values here and they propagate across every page in the site. Loaded BEFORE every page-specific stylesheet. Layers: 1. @font-face - self-hosted Switzer (3 weights) + Tanker 2. :root tokens - brand, surface, ink, type, spacing, radii, shadows 3. Resets - margins, box-sizing, body baseline ───────────────────────────────────────────────────────────────────── */ /* ── 1. Self-hosted fonts ─────────────────────────────────────────── */ @font-face { font-family: 'Switzer'; src: url('/fonts/Switzer-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Switzer'; src: url('/fonts/Switzer-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Switzer'; src: url('/fonts/Switzer-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Tanker'; src: url('/fonts/Tanker-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } /* Caveat (handwritten accent) loaded from Google Fonts via in . */ /* ── 2. Tokens ────────────────────────────────────────────────────── */ :root { /* ── Brand ─────────────────────────────────────────── */ --gold: #e8c459; /* primary brand accent */ --gold-deep: #c9a84c; /* hover, on-cream emphasis */ --gold-soft: #f0d97e; /* highlights, gradients */ --gold-ink: #6b5212; /* dark bronze, Caveat accent on cream + light arc surfaces (arc-1 to arc-5). Site-wide em default 2026-05-19, 00b F. */ --gold-wash: rgba(232, 196, 89, 0.14); /* ── Cream surfaces (light backgrounds) ────────────── */ --cream: #f4f2ec; /* page default */ --cream-2: #ecebe4; /* alternating block */ --cream-3: #dedcd2; /* deeper cream */ --paper: #fafaf6; /* lifted card surface */ /* ── Page palette arc (light → dark drift across sections) ── Used by homepage to walk the eye from cream into espresso. */ --arc-1: #f4f2ec; /* block 1 - neutral cream */ --arc-2: #ede5d3; /* block 2 - warm cream */ --arc-3: #e6dcc4; /* block 3 - deeper warm */ --arc-4: #ddcfb0; /* block 4 - tan */ --arc-5: #c8b893; /* pricing - warm-tan */ --arc-6: #6b5e44; /* founder - espresso (cream text) */ /* ── Ink ramp (dark text + dark surfaces) ──────────── */ --ink: #0c0d0f; /* default text on light (body + headings) */ --ink-2: #1a1c20; /* dark surface, CTA fill */ --ink-mute: #2a2a2a; /* captions, meta, fine print, form chrome (lighter than --ink) */ /* Used by FAQ + Founder backgrounds - deep ink with a warm cast. */ --ink-warm: #2c2925; /* ── Body text on dark surfaces (cream ramp) ───────── Inverse pair of --ink / --ink-mute. Use these on pricing card, FAQ, founder, final CTA, footer, and any other dark surface where cream body text sits. Replaces the rgba(245, 240, 230, X) hardcodes that drifted across pages (2026-05-18, 00b C). */ --body-on-dark: rgba(245, 240, 230, 0.95); /* main body tier */ --body-on-dark-mute: rgba(245, 240, 230, 0.75); /* meta, captions, fine print */ /* ── Mock surfaces (dark cards used inside sections) ─ Hub dashboard, hero inbox, etc. Promoted to tokens so other pages (services, about) can reuse the same dark-card palette. */ --mock-ink: #1d1b16; --mock-ink-2: #232017; --mock-cream: #e6e0c9; --mock-mute: #8a8470; /* ── Borders ───────────────────────────────────────── */ --border: #dedcd2; --border-strong: #d6cdb0; /* ── Semantic status (brand-aligned) ──────────────── */ --positive: #5a4a14; --positive-bg: rgba(232, 196, 89, 0.22); --info: #2e4a6b; --info-bg: #e6ebf2; --negative: #4a4a4a; --negative-bg: #e0ddd5; /* ── Type ─────────────────────────────────────────── */ --font-display: 'Tanker', Georgia, serif; --font-sans: 'Switzer', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-accent: 'Caveat', 'Bradley Hand', cursive; --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; /* Convenience aliases (used across stylesheets) */ --body-font: var(--font-sans); --heading-font: var(--font-sans); /* ── H1 (canonical, every page) ──────────────────── Hero variant picked as canon (00b C, 2026-05-18). Used by: hero pages (/, /services, /about, /contact, /start), document-head (legal, resources), thanks + 404. One H1 rule for the whole site. */ --h1-size: clamp(2.2rem, 4.4vw, 3.6rem); --h1-weight: 700; --h1-lh: 1.05; --h1-ls: -0.022em; /* ── Section-H2 (landing pages) ────────────────────── One source of truth for the 3 canon bands. Used via media-query-stepped CSS (no clamp). Shrunk 2026-05-18 (00b C) to give a cleaner step from H1 (3.6rem max). Article + legal + form-card H2s keep their own scales. */ --h2-size-d: 2.5rem; /* 40px - desktop section H2 on landing pages */ --h2-size-t: 2.1rem; /* 34px - tablet 641-1100 */ --h2-size-m: 1.6rem; /* 26px - mobile <=640 */ --h2-weight: 500; --h2-lh: 1.1; --h2-ls: -0.02em; /* ── H3 (card + section sub-heading canon) ─────────── Used on about cards + next-article card. Prose H3s inside articles + legal pages keep their own smaller scale (1.06-1.12rem) for prose rhythm. */ --h3-size: 1.2rem; --h3-weight: 600; --h3-lh: 1.25; --h3-ls: -0.012em; /* ── Spacing ──────────────────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --sp-32: 128px; /* ── Radii ────────────────────────────────────────── */ --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-xl: 22px; --r-card: 18px; --r-pill: 999px; /* ── Shadows (6-step ramp) ────────────────────────── */ --shadow-xs: 0 1px 2px rgba(28, 24, 12, 0.06); --shadow-sm: 0 2px 6px rgba(28, 24, 12, 0.06); --shadow-md: 0 8px 22px rgba(28, 24, 12, 0.08); --shadow-lg: 0 24px 60px rgba(28, 24, 12, 0.10); --shadow-card: 0 1px 0 rgba(28, 24, 12, 0.05), 0 12px 30px rgba(28, 24, 12, 0.07); --shadow-press: 0 1px 0 rgba(28, 24, 12, 0.18) inset; /* ── Motion ───────────────────────────────────────── */ --ease-standard: cubic-bezier(.2, .8, .2, 1); --ease-pulse: cubic-bezier(.4, 0, .2, 1); --dur-quick: 120ms; --dur-form: 150ms; --dur-default: 180ms; --dur-slow: 300ms; --dur-spin: 0.8s; --dur-pulse: 2.2s; --dur-blink: 1s; } /* ── 3. Resets + body baseline ────────────────────────────────────── */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--cream); color: var(--ink); font-family: var(--body-font); font-size: 16px; line-height: 1.6; font-synthesis: style; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } /* Universal focus ring (gold, accessible) */ a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; border-radius: 4px; } /* ── 4. Reduced motion (a11y baseline) ──────────────────────────────── Lifted from the retired legacy style.css (2026-05-17, 00b B4). Applies site-wide so every page honors the OS-level pref. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }