/* ===================================================================== ANTIQUA — colors_and_type.css The low-level visual foundation: color tokens + type system. Product: "Antiqua" — a cozy iOS hex-grid puzzle game that reassembles public-domain paintings, hex by hex. Solo build under Rooted Heart. "Art, for the people. A curated gallery, one puzzle at a time." Source of truth: AntiquaMasterDossier.docx §5 (Design System), main-menu-redesign.md §8 (Tokens), Antiqua_Workplan.md (Brand Voice — locked). NOTE ON FONTS — read before using: Antiqua ships on iOS and uses Apple SYSTEM faces. We render the REAL faces wherever they exist (every Apple device) by putting them FIRST in each stack, and fall back to genuine, redistributable equivalents — never to an AI-cliché like Playfair. • Didot italic → display / titles / pack names / taglines stack: 'Didot' (real, on Apple) → 'Bodoni Moda' (true high-contrast Didone w/ real italic, Google) → 'GFS Didot' → Georgia. (Playfair Display has been REMOVED — wrong shape + overused.) • SF Pro → UI / functional text stack: -apple-system / SF Pro Text (real, on Apple) → 'Lexend'. • SF Pro Rounded → numbers / data / progress stack: ui-rounded / SF Pro Rounded (real, on Apple) → 'Lexend'. • mono → ui-monospace / SF Mono (eyebrows, counts, labels). The ONLY fonts the team actually bundles (AntiquaFonts.zip) are Lexend (the "Easier-to-Read" accessibility face) and OpenDyslexic (dyslexia face). Both live in /fonts and are loaded below. THEME DISPLAY FONTS: every theme uses the Didot/Bodoni display stack. The four CANONICAL app themes (Noir, Vellum, Nocturne, Verdigris) are defined from the V1.2 source tokens; three optional STUDIO EXTENSIONS (Sanguine, Lapis, Foxglove) each carry a distinct display face and are clearly marked as non-canonical. ===================================================================== */ /* Display fallbacks (real Didot/SF Pro render on Apple) + per-theme faces. Bodoni Moda = Didot stand-in · EB Garamond / Cormorant / Spectral = theme faces. */ @import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..700;1,6..96,400..700&family=Cormorant:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Spectral:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500&display=swap'); /* Bundled accessibility / fallback faces — the real shipped fonts */ @font-face { font-family: 'Lexend'; src: url('fonts/Lexend-Variable.ttf') format('truetype-variations'); font-weight: 100 900; font-display: swap; } @font-face { font-family: 'OpenDyslexic'; src: url('fonts/OpenDyslexic-Regular.otf') format('opentype'); font-weight: 400; font-display: swap; } @font-face { font-family: 'OpenDyslexic'; src: url('fonts/OpenDyslexic-Bold.otf') format('opentype'); font-weight: 700; font-display: swap; } :root { /* --------------------------------------------------------------- CORE TOKENS — NOIR (the default theme; `original` id in V1.2 source, display name "Noir": the Met's lobby at 9 PM. Exact hex from tokens.json.) A museum-at-night — Vault-black ground, Hour-Gold gilt, Vellum-ink text. --------------------------------------------------------------- */ --black: #0A0907; /* backgrounds. NEVER pure #000 */ --gold: #D4B16A; /* primary borders, frames, active states */ --gold-bright: #F2D896; /* highlight — completion + active selection ONLY */ --parchment: #F4ECDA; /* body text. NEVER pure #FFF */ --parchment-dim: #9C8E70; /* secondary text, captions, metadata */ /* Menu / card chrome runs a slightly warmer cream for primary text, and a true-black ground for the catalogue surfaces. */ --cream: #F4ECDA; /* painting titles, card text */ --bg-true: #000000; /* catalogue / image surfaces */ /* --------------------------------------------------------------- GOLD RAMP (main-menu-redesign.md §8 — pack tiles, hairlines, borders) A single hue stepped from bright accent down to near-ground. --------------------------------------------------------------- */ --gold-mid: #9C8E70; /* secondary text, locked-pack titles */ --gold-dim: #8A6E35; /* tertiary text, section labels, current-pack hint */ --gold-deep: #5A4620; /* default pack-cover stroke, hairlines, faint borders */ --gold-border: #28240E; /* locked-pack borders (darker than free) */ /* --------------------------------------------------------------- VERDIGRIS — the secondary accent (Weekly Challenge card, Verdigris theme) An aged-copper green; used sparingly for "limited time" / live surfaces. --------------------------------------------------------------- */ --verdigris-1: #3E5A4E; --verdigris-2: #23362E; --verdigris-3: #0E1814; --verdigris-ink: #8FE6C4; /* on-verdigris accent text (from companion diagrams) */ /* --------------------------------------------------------------- SEMANTIC ROLES (map components to the ramp — use THESE in UIs) --------------------------------------------------------------- */ --bg: var(--black); --surface: #15120D; /* raised card on the near-black ground */ --surface-2: #241E16; /* hover / nested surface */ --text-1: var(--cream); /* primary text on dark */ --text-2: var(--parchment-dim);/* secondary text */ --text-3: var(--gold-mid); /* tertiary / muted-on-dark */ --accent: var(--gold); --accent-strong: var(--gold-bright); --rule: var(--gold-deep); /* hairline rules + default strokes */ --rule-faint: var(--gold-border); /* Status (kept muted + museum-toned, derived from companion diagram inks) */ --ok: #8CC24F; --warn: #D9912F; --danger: #D4604F; /* --------------------------------------------------------------- TYPE FAMILIES --------------------------------------------------------------- */ --font-display: 'Didot', 'Bodoni Moda', 'GFS Didot', Georgia, serif; /* real Didot on Apple; Bodoni Moda fallback */ --font-ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Lexend', 'Segoe UI', system-ui, sans-serif; --font-rounded: ui-rounded, 'SF Pro Rounded', -apple-system, 'Lexend', system-ui, sans-serif; --font-mono: ui-monospace, 'SF Mono', 'Menlo', 'Roboto Mono', monospace; --font-dyslexic:'OpenDyslexic', var(--font-ui); /* --------------------------------------------------------------- TYPE SCALE (mobile-first; the app is iPhone-only, portrait) Display = Didot italic. UI/body = SF Pro. Labels/counts = mono caps. --------------------------------------------------------------- */ --fs-hero: 34px; /* wordmark-scale display */ --fs-h1: 28px; /* screen titles */ --fs-h2: 22px; /* featured painting title */ --fs-h3: 18px; /* card / pack titles */ --fs-body: 16px; /* body text */ --fs-sm: 14px; /* secondary body, fun facts */ --fs-meta: 12px; /* metadata, attribution */ --fs-label: 10px; /* mono eyebrows, counts, section labels */ --lh-tight: 1.05; --lh-snug: 1.25; --lh-body: 1.55; /* Letter-spacing for the mono caps "museum label" voice */ --ls-eyebrow: 0.28em; --ls-section: 0.42em; --ls-count: 0.15em; /* --------------------------------------------------------------- RADII / ELEVATION / MOTION (see Spacing foundations) --------------------------------------------------------------- */ --r-tile: 9px; /* pack cover tiles */ --r-card: 14px; /* featured / weekly cards */ --r-pill: 20px; /* pills, chips, CTAs */ --r-sm: 6px; /* Frame shadow: a gilt-frame lift, never a soft web drop shadow */ --shadow-card: 0 1px 2px rgba(0,0,0,.5), 0 18px 40px -16px rgba(0,0,0,.7); --shadow-frame: 0 0 0 1px var(--gold-deep), 0 24px 60px -24px rgba(0,0,0,.85); --glow-gold: 0 0 0 1px var(--gold), 0 0 24px -6px rgba(212,177,106,.45); /* Motion — "tactile, not toy": weighted spring settling, NO elastic overshoot */ --ease-settle: cubic-bezier(.22,.61,.36,1); --ease-soft: cubic-bezier(.4,0,.2,1); --dur-fast: 140ms; --dur-base: 240ms; --dur-slow: 420ms; } /* ===================================================================== THE FOUR CANONICAL THEMES (verified against V1.2 source — GameViewController.swift `AntiquaThemePalette`, from tokens.json) Noir (default, = the `original` id) · Vellum · Nocturne · Verdigris. Themes drive menu + card chrome only — never the art. Hex below are the exact shipped values. Token roles map: bg→--bg/--black, surface→--surface, surface2→--surface-2, ink→--cream/--text-1, inkDim→--parchment-dim/--text-2, accent→--gold/--accent, accentBright→--gold-bright, accentSoft→--gold-mid, rule→--rule. ===================================================================== */ /* VELLUM — the light theme. "Old-library bronze on cream." Accent is the WCAG-AA-darkened bronze #6E5A28 (5.4:1 on cream), not a bright gilt. */ [data-theme="vellum"] { --black: #EFE6D2; /* paper ground (bg) */ --bg: #EFE6D2; --bg-true: #F5EDDA; --surface: #F5EDDA; /* surface */ --surface-2: #E6DAC0; /* surface2 */ --cream: #2C2218; /* ink */ --parchment: #2C2218; --parchment-dim: #6B5B45; /* inkDim */ --text-1: #2C2218; --text-2: #6B5B45; --text-3: #7E6326; --gold: #6E5A28; /* accent — old-library bronze, AA on cream */ --gold-bright: #D3BC72; /* accentBright — lightened ochre */ --gold-mid: #7E6326; /* accentSoft */ --gold-dim: #7E6326; --accent: #6E5A28; --accent-strong: #D3BC72; --rule: #C8B58F; /* rule */ --rule-faint: #E6DAC0; --gold-deep: #C8B58F; --shadow-card: 0 1px 2px rgba(40,32,18,.06), 0 14px 34px -14px rgba(40,32,18,.20); } /* NOCTURNE — special edition. Silver-on-deep-blue: a planetarium at night. The accent is SILVER (#C2C8D6), the only non-gold canonical accent. */ [data-theme="nocturne"] { --black: #0C1422; --bg: #0C1422; --bg-true: #070C16; --surface: #161F31; --surface-2: #070C16; --cream: #E0E0D8; --parchment: #E0E0D8; --parchment-dim: #6F778A; --text-1: #E0E0D8; --text-2: #6F778A; --text-3: #C2C8D6; --gold: #C2C8D6; /* accent — silver */ --gold-bright: #E8ECF3; --gold-mid: #6F778A; --gold-dim: #6F778A; --accent: #C2C8D6; --accent-strong: #E8ECF3; --rule: #222B40; --rule-faint: #161F31; --gold-deep: #222B40; --shadow-frame: 0 0 0 1px #222B40, 0 24px 60px -24px rgba(0,0,0,.85); --glow-gold: 0 0 0 1px #C2C8D6, 0 0 24px -6px rgba(194,200,214,.5); } /* VERDIGRIS — special edition. Gilt-on-aged-copper: a bronze in a green courtyard. Brass accent (#C19A56) on a deep verdigris ground. */ [data-theme="verdigris"] { --black: #0E2A22; --bg: #0E2A22; --bg-true: #061712; --surface: #163A2F; --surface-2: #061712; --cream: #F2E9CE; --parchment: #F2E9CE; --parchment-dim: #D9CFB1; --text-1: #F2E9CE; --text-2: #D9CFB1; --text-3: #C19A56; --gold: #C19A56; /* accent — brass */ --gold-bright: #E2BC72; --gold-mid: #6F5A30; --gold-dim: #6F5A30; --accent: #C19A56; --accent-strong: #E2BC72; --rule: #1E3F33; --rule-faint: #163A2F; --gold-deep: #1E3F33; --shadow-frame: 0 0 0 1px #1E3F33, 0 24px 60px -24px rgba(0,0,0,.85); --glow-gold: 0 0 0 1px #C19A56, 0 0 24px -6px rgba(193,154,86,.5); } /* ===================================================================== PUZZLE BORDER COLORS (V1.2 — independent of theme) The puzzle surface (piece edges, cluster outline, snap hint, perimeter glow) is recolored by a 4-way border picker, NOT the theme accent. Brass is the default for every theme. --border-brass: #C19A56 (default) --border-silver: #C2C8D6 --border-rose: #C28A8E --border-vermilion: #C2402F ===================================================================== */ :root { --border-brass: #C19A56; --border-silver: #C2C8D6; --border-rose: #C28A8E; --border-vermilion: #C2402F; } /* ===================================================================== STUDIO EXTENSIONS — three EXTRA themes beyond the four canonical app themes, designed on request as un-generic alternates (each a distinct display face + palette). NOT in the shipping app — clearly separated so no one mistakes them for canonical. Apply via [data-theme="…"]. ===================================================================== */ /* SANGUINE — "the red gallery." A Pompeii-fresco theme: oxblood ground, aged-ivory ink, terracotta-gilt. Display face: EB Garamond — a warm, humanist old-style, the opposite of Didot's cold high contrast. */ [data-theme="sanguine"] { --font-display: 'EB Garamond', 'Didot', Georgia, serif; --black: #2A1416; --bg: #2A1416; --bg-true: #1E0E10; --surface: #3A1E1F; --surface-2: #4A2826; --cream: #EFDFC6; --parchment: #E7D6BC; --parchment-dim: #B79A86; --text-1: #EFDFC6; --text-2: #B79A86; --text-3: #C77E54; --gold: #C77E54; /* terracotta-gilt */ --gold-bright: #E8A86C; --gold-mid: #B07A52; --gold-dim: #9A5E3A; --gold-deep: #5E3328; --gold-border: #3A1E1B; --accent: #C77E54; --accent-strong: #E8A86C; --rule: #5E3328; --rule-faint: #3A1E1B; --shadow-frame: 0 0 0 1px #5E3328, 0 24px 60px -24px rgba(0,0,0,.9); --glow-gold: 0 0 0 1px #C77E54, 0 0 24px -6px rgba(199,126,84,.5); } /* LAPIS — "the illuminated manuscript." Deep ultramarine ground, vellum ink, gilt with a lapis-blue secondary. Display face: Cormorant — airy, high-waisted, ecclesiastical; more delicate than Didot. */ [data-theme="lapis"] { --font-display: 'Cormorant', 'Didot', Georgia, serif; --black: #16213E; --bg: #16213E; --bg-true: #0E1730; --surface: #1E2C4E; --surface-2: #29395F; --cream: #ECE3CC; --parchment: #E2D8BE; --parchment-dim: #9AA6C0; --text-1: #ECE3CC; --text-2: #9AA6C0; --text-3: #D4B16A; --gold: #D4B16A; --gold-bright: #F0D58A; --gold-mid: #9C8FB0; /* drifts toward periwinkle in this theme */ --gold-dim: #6E97C9; /* lapis highlight */ --gold-deep: #2E3E68; --gold-border: #1B2747; --accent: #D4B16A; --accent-strong: #7FA8D8; /* lapis blue for active/selected */ --rule: #2E3E68; --rule-faint: #1B2747; --shadow-frame: 0 0 0 1px #2E3E68, 0 24px 60px -24px rgba(0,0,0,.85); --glow-gold: 0 0 0 1px #7FA8D8, 0 0 24px -6px rgba(127,168,216,.5); } /* FOXGLOVE — "the herbarium." A second LIGHT theme, distinct from Vellum: a sage-grey pressed-paper ground, sepia ink, botanical green + rust. Display face: Spectral — a calm literary serif with true italics. */ [data-theme="foxglove"] { --font-display: 'Spectral', 'Didot', Georgia, serif; --black: #E7E5D4; --bg: #E7E5D4; --bg-true: #F2F0E2; --surface: #F2F0E2; --surface-2: #DBDAC6; --cream: #33352A; /* ink */ --parchment: #3C3E31; --parchment-dim: #6E6F59; --text-1: #33352A; --text-2: #6E6F59; --text-3: #5E6E47; --gold: #5E6E47; /* botanical green carries the accent role */ --gold-bright: #7B8C5C; --gold-mid: #8A7B4F; --gold-dim: #A8693E; /* dusty rust */ --gold-deep: #C2C0A8; --gold-border: #D2D0BA; --accent: #5E6E47; --accent-strong: #A8693E; --rule: #CFCDB8; --rule-faint: #DCDAC6; --shadow-card: 0 1px 2px rgba(40,42,28,.06), 0 14px 34px -14px rgba(40,42,28,.20); --shadow-frame: 0 0 0 1px #C2C0A8, 0 20px 48px -22px rgba(40,42,28,.30); --glow-gold: 0 0 0 1px #5E6E47, 0 0 22px -8px rgba(94,110,71,.4); } /* ===================================================================== SEMANTIC ELEMENT DEFAULTS Opt in by adding class="antiqua" to a root container, OR copy these rules. Kept low-specificity so component styles can override. ===================================================================== */ .antiqua { background: var(--bg); color: var(--text-1); font-family: var(--font-ui); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Display — Didot italic is the brand's signature voice for names + titles */ .antiqua h1, .a-display { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: .005em; color: var(--text-1); margin: 0; } .a-hero { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: var(--fs-hero); line-height: var(--lh-tight); } .a-title { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: var(--fs-h2); line-height: var(--lh-snug); color: var(--cream); } .a-pack { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: var(--fs-h3); color: var(--cream); } /* Body */ .antiqua p, .a-body { font-family: var(--font-ui); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-1); } .a-fact { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--text-2); } /* curator "fun fact" */ .a-meta { font-family: var(--font-ui); font-size: var(--fs-meta); color: var(--text-2); } /* Mono "museum label" voice — eyebrows, counts, countdowns, section headers */ .a-eyebrow { font-family: var(--font-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--accent); font-weight: 600; } .a-section { font-family: var(--font-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: var(--ls-section); color: var(--gold-dim); } .a-count { font-family: var(--font-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: var(--ls-count); color: var(--gold-dim); } /* Attribution line: ARTIST · YEAR in gold mono caps */ .a-attr { font-family: var(--font-mono); font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: .1em; color: var(--gold); } /* Numbers / progress — SF Pro Rounded */ .a-num { font-family: var(--font-rounded); font-weight: 600; font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { .antiqua * { animation-duration: .001ms !important; transition-duration: .001ms !important; } }