/* themes.css — theme variables for Landing v3. * Applied via . * Each theme defines: bg, text, dim, faint, rule, accent, accent-dim. * --bright is the max-contrast colour against that theme's bg (white on the * dark themes, near-black on the light ones) — used for nav and hero chrome. * Fluid palette is JS-side in landing.js, keyed off the same data-theme. */ :root { --f-d: 'Cormorant SC', serif; --f-s: 'Cormorant', serif; --f-m: 'DM Mono', monospace; } /* ── GOLD (original Direction 3) ─────────────────────────────── */ body[data-theme="gold"] { --bg: #0e0b06; --text: #f1ead8; --bright: #ffffff; --dim: rgba(241,234,216,.78); --faint: rgba(241,234,216,.42); --rule: rgba(241,234,216,.12); --accent: #d7a54a; --accent-d: rgba(215,165,74,.55); --accent-g: rgba(215,165,74,.18); --reveal: #7dd6f4; /* cyan — cool pop vs warm gold */ --reveal-glow: rgba(125,214,244,.45); --vignette: rgba(14,11,6,.55); --vignette2: rgba(14,11,6,.88); --grain-blend: overlay; --grain-opacity: .4; --canvas-opacity: .62; } /* ── PAPER (Monastic paper) ──────────────────────────────────── */ /* Warm off-white background, deep ink, deep burgundy accent. The fluid sim runs in "invert" mode — dark ink on paper. */ body[data-theme="paper"] { --bg: #f4ede0; --text: #1a1612; --bright: #17130f; --dim: rgba(26,22,18,.78); --faint: rgba(26,22,18,.42); --rule: rgba(26,22,18,.16); --accent: #6e2430; /* deep burgundy */ --accent-d: rgba(110,36,48,.60); --accent-g: rgba(110,36,48,.18); --reveal: #0e5d58; /* ink teal — cool contrast vs burgundy */ --reveal-glow: rgba(14,93,88,.30); --vignette: rgba(244,237,224,.35); --vignette2: rgba(244,237,224,.80); --grain-blend: multiply; --grain-opacity: .28; --canvas-opacity: .38; } /* ── IRON (Stone & iron) ─────────────────────────────────────── */ /* Cool near-black, muted bronze/patina accent — not polished. */ body[data-theme="iron"] { --bg: #0c0e10; --text: #d9dde2; --bright: #ffffff; --dim: rgba(217,221,226,.74); --faint: rgba(217,221,226,.40); --rule: rgba(217,221,226,.11); --accent: #a8c7d4; /* pale cool steel — was the reveal colour */ --accent-d: rgba(168,199,212,.55); --accent-g: rgba(168,199,212,.18); --reveal: #e87a3e; /* bright amber — bold warm pop */ --reveal-glow: rgba(232,122,62,.45); --vignette: rgba(12,14,16,.55); --vignette2: rgba(12,14,16,.88); --grain-blend: overlay; --grain-opacity: .32; --canvas-opacity: .50; } /* ── VELLUM (Vellum & graphite) ──────────────────────────────── */ /* Warm cream paper, graphite grey, a single thin cyan hairline. */ body[data-theme="vellum"] { --bg: #ede5d3; --text: #2a2622; --bright: #201c18; --dim: rgba(42,38,34,.74); --faint: rgba(42,38,34,.40); --rule: rgba(42,38,34,.15); --accent: #3d4b55; /* graphite */ --accent-d: rgba(61,75,85,.55); --accent-g: rgba(61,75,85,.16); --reveal: #a84a1e; /* burnt sienna — warm pop vs cool graphite */ --reveal-glow: rgba(168,74,30,.28); --hair: rgba(110,160,180,.55); /* muted cyan hairline */ --vignette: rgba(237,229,211,.35); --vignette2: rgba(237,229,211,.78); --grain-blend: multiply; --grain-opacity: .22; --canvas-opacity: .36; }