/* ───────────────────────────────────────────────────────────────────────── anchor / web tokens Drop-in CSS custom properties for get-anchor.app. Matches the iOS theme (HANDOFF/ios/AnchorTheme.swift) — keep them in sync. Three palettes (clay / sage / ochre) × two surfaces (paper / cream). The default is clay on paper. To swap palettes for a campaign or A/B, override the accent block on `:root`. Light mode is the source of truth. Dark mode is opt-in via `[data-theme="dark"]` on . ───────────────────────────────────────────────────────────────────────── */ :root { /* ── Type ─────────────────────────────────────────── */ --font-serif: 'Bitter', 'Georgia', serif; --font-sans: 'Karla', system-ui, -apple-system, 'Helvetica Neue', sans-serif; /* ── Surface (light, paper default) ───────────────── */ --bg: #FAF8F3; /* page background */ --surface: #F3ECE1; /* cards, sheet content */ --surface-raised: #FFFFFF; /* floating sheets, popovers */ /* ── Ink ──────────────────────────────────────────── */ --ink: #3A2C22; /* primary text, headlines */ --ink-soft: #5C4B3E; /* body, secondary text */ --muted: #8A7B6E; /* eyebrows, metadata, hints */ /* ── Hairlines ────────────────────────────────────── */ --hair: #E2D9C8; --hair-strong: #D5C9B3; /* ── Accent (clay — default) ──────────────────────── */ --accent: #B5562F; --accent-deep: #8E3F20; --accent-soft: #F4E3DA; --accent-ink: #8E3F20; /* text on accent-soft */ --on-accent: #FAF8F3; /* text on accent fill */ /* ── Sage (completion only — never primary action) ── */ --sage: #6E7B53; --sage-deep: #4F5A3C; /* ── Radii ────────────────────────────────────────── */ --r-chip: 100px; /* buttons, pill chips */ --r-tile: 9px; --r-card: 14px; /* task rows */ --r-card-lg: 16px; /* starter cards */ --r-surface: 18px; /* hero cards */ --r-section: 28px; /* the big editorial blocks on the site */ /* ── Layout ───────────────────────────────────────── */ --site-maxw: 1180px; --site-maxw-tx: 720px; /* text columns (FAQ answers, editorial) */ --nav-h: 68px; --section-pad-y: 96px; --section-pad-y-sm: 64px; --edge-x: 24px; --edge-x-md: 40px; /* ── Motion ───────────────────────────────────────── */ --ease-soft: cubic-bezier(.2, .8, .2, 1); --dur-fade: 200ms; --dur-up: 300ms; --dur-rise: 800ms; } /* ── Cream surface variant ─────────────────────────── */ :root[data-surface="cream"] { --bg: #F3ECE1; --surface: #FAF8F3; } /* ── Sage accent variant ───────────────────────────── */ :root[data-accent="sage"] { --accent: #6E7B53; --accent-deep: #4F5A3C; --accent-soft: #E4E8D6; --accent-ink: #4F5A3C; } /* ── Ochre accent variant ──────────────────────────── */ :root[data-accent="ochre"] { --accent: #B7903B; --accent-deep: #8A6B23; --accent-soft: #F1E6CC; --accent-ink: #8A6B23; } /* ── Dark mode ─────────────────────────────────────── */ :root[data-theme="dark"] { --bg: #1B140F; --surface: #251C16; --surface-raised: #2F2419; --ink: #F3ECE1; --ink-soft: #C8B8A6; --muted: #8A7B6E; --hair: rgba(243, 236, 225, 0.10); --hair-strong: rgba(243, 236, 225, 0.16); --accent-soft: rgba(181, 86, 47, 0.15); --on-accent: #1B140F; } /* ── Base resets ───────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* All numerals that change should be tabular */ .tnum, time, [data-timer] { font-variant-numeric: tabular-nums; } /* ── Type ramp (utility classes — use sparingly; prefer semantic tags) ── */ .display-l { font-family: var(--font-serif); font-weight: 500; font-size: 42px; line-height: 1.12; letter-spacing: -0.015em; } .display-m { font-family: var(--font-serif); font-weight: 500; font-size: 36px; line-height: 1.12; letter-spacing: -0.015em; } .display-s { font-family: var(--font-serif); font-weight: 500; font-size: 32px; line-height: 1.15; letter-spacing: -0.015em; } .title { font-family: var(--font-serif); font-weight: 500; font-size: 22px; line-height: 1.15; letter-spacing: -0.005em; } .object { font-family: var(--font-serif); font-weight: 500; font-size: 19px; line-height: 1.15; letter-spacing: -0.005em; } .body { font-family: var(--font-sans); font-weight: 400; font-size: 15.5px; line-height: 1.55; } .body-s { font-family: var(--font-sans); font-weight: 400; font-size: 13.5px; line-height: 1.5; } .label { font-family: var(--font-sans); font-weight: 500; font-size: 14px; line-height: 1.3; letter-spacing: 0.01em; } .caption { font-family: var(--font-sans); font-weight: 400; font-size: 12.5px; line-height: 1.4; } .eyebrow { font-family: var(--font-sans); font-weight: 500; font-size: 11px; line-height: 1; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } /* ── Buttons ───────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-sans); font-weight: 500; letter-spacing: 0.01em; border: 0; cursor: pointer; text-decoration: none; transition: transform .15s ease, filter .15s ease; } .btn:active { transform: scale(.985); } .btn-primary { background: var(--accent); color: var(--on-accent); padding: 18px 28px; border-radius: var(--r-card); font-size: 16.5px; box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 8px 24px rgba(181, 86, 47, 0.22); } .btn-primary:hover { filter: brightness(1.04); } .btn-pill { background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: var(--r-chip); font-size: 14px; } .btn-ghost { background: transparent; color: var(--muted); padding: 12px 16px; font-size: 15px; } /* ── Cards ─────────────────────────────────────────── */ .card { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-surface); padding: 18px; } .card-lg { padding: 28px; border-radius: 22px; } /* ── Motion ────────────────────────────────────────── */ @keyframes anchor-fade { from { opacity: 0 } to { opacity: 1 } } @keyframes anchor-slide-up { from { transform: translateY(100%) } to { transform: translateY(0) } } @keyframes anchor-rise { from { transform: translateY(12px); opacity: 0 } to { transform: translateY(0); opacity: 1 } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }