/* ═══════════════════════════════════════════════════════════════════════════ MARBLELENS · DESIGN TOKENS The single source of truth for the whole experience. Nothing downstream invents a raw value — everything references a token. Figma-grade discipline (§16): one grid, one type scale, one spacing scale, one color system. The palette is deliberately small: a persistent MarbleLens BASE (ivory / graphite / soft-graphite) plus ONE section accent at a time (§5, §6). The accent is a runtime variable (--accent-*) that each chapter sets locally, so at any scroll position the eye reads BASE + ONE ACCENT, never a rainbow. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ---- BASE SURFACE · warm bone / ivory (never sterile pure white) -------- */ --paper: #ece6da; /* dominant surface */ --paper-hi: #f1ece2; /* lifted sheet / raised card */ --paper-lo: #e2daca; /* recessed / shadow side of a fold */ --paper-deep: #d8cfbc; /* deepest recess, torn underside */ /* ---- INK · graphite structure & type (softer than pure black) ---------- */ --ink: #1f1f1c; --ink-2: #34332e; /* body copy */ --graphite: #6e6a63; /* secondary type, pencil construction, labels */ --graphite-2: #928d83; /* quiet / inactive */ --line: rgba(31, 31, 28, 0.14); /* hairline structure */ --line-2: rgba(31, 31, 28, 0.08); /* faintest grid line */ /* ---- SECTION ACCENTS · exactly one owns the viewport at a time (§7) ----- */ --brass: #9c7a42; /* OPENING + CREATE — the brand loop */ --ochre: #c48732; /* AI CONTENT — creative activation */ --blue: #37556b; /* BUILD YOUR WEBSITE — architectural */ --oxblood: #743f3b; /* HEADSHOTS / PORTRAIT — photographic */ --olive: #69705a; /* STORY / VIDEO — archival */ --clay: #a15f45; /* SELECTED WORK — presentation room */ --red: #a64d3d; /* PROCESS — stamps & markers only */ --forest: #304b3f; /* PRICING / ENGAGEMENT — quiet & serious */ /* live accent — the scroll orchestrator rewrites these as chapters change. Shared furniture (progress rail, active nav, CREATE spark) reads them so the whole page agrees on the one colour currently in play. */ --accent: var(--brass); --accent-ink: #6f5222; /* accent, darkened for text on paper */ --accent-wash: rgba(156, 122, 66, 0.10); /* ---- TYPE FAMILIES ----------------------------------------------------- */ --serif: "Playfair Display", Georgia, "Times New Roman", serif; /* display */ --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; /* labels */ --pencil: "Caveat", ui-sans-serif, cursive; /* sparing hand annotation */ /* ---- MODULAR TYPE SCALE · fluid, clamp()-driven ------------------------ */ /* display sizes travel with the viewport but never below a readable floor */ --t-hero: clamp(2.6rem, 1.1rem + 6.4vw, 6.5rem); --t-h1: clamp(2.1rem, 1.2rem + 4.2vw, 4.4rem); --t-h2: clamp(1.7rem, 1.1rem + 2.9vw, 3.1rem); --t-h3: clamp(1.24rem, 0.95rem + 1.3vw, 1.7rem); --t-lede: clamp(1.02rem, 0.9rem + 0.6vw, 1.3rem); --t-body: clamp(0.98rem, 0.93rem + 0.22vw, 1.08rem); --t-small: clamp(0.84rem, 0.8rem + 0.16vw, 0.94rem); --t-label: clamp(0.66rem, 0.62rem + 0.16vw, 0.76rem); /* mono kickers */ --lh-tight: 1.04; --lh-head: 1.12; --lh-body: 1.62; --ls-label: 0.26em; /* mono label tracking */ --ls-head: 0.005em; /* ---- SPACING SCALE · 8pt base, geometric for rhythm -------------------- */ --s-1: 0.5rem; --s-2: 0.75rem; --s-3: 1rem; --s-4: 1.5rem; --s-5: 2rem; --s-6: 3rem; --s-7: 4rem; --s-8: 6rem; --s-9: 8rem; --s-10: 11rem; /* section vertical rhythm — chapters breathe, scaled down on small screens */ /* pacing pass: 9.5rem of air above and below every chapter was ~2.5 screens of nothing across the page. Trimmed ~28% at the top end. */ --sec-pad-y: clamp(3.6rem, 2.2rem + 5.8vw, 6.8rem); --sec-gap: clamp(2rem, 1rem + 3vw, 4rem); /* ---- LAYOUT · container + editorial grid ------------------------------ */ --container: 1240px; /* max content width */ --container-wide: 1480px; /* full-bleed presentation width */ --gutter: clamp(1.25rem, 0.6rem + 3vw, 4rem); --col-gap: clamp(1rem, 0.5rem + 1.6vw, 2rem); /* ---- MATERIAL · shadows read as real depth, not CSS glow -------------- */ --sh-mount: 0 1px 0 rgba(255,255,255,0.5) inset, 0 22px 44px -26px rgba(28, 20, 10, 0.55), 0 6px 14px -10px rgba(28, 20, 10, 0.4); --sh-lift: 0 30px 60px -30px rgba(28, 20, 10, 0.62), 0 10px 22px -14px rgba(28, 20, 10, 0.42); --sh-press: 0 1px 3px rgba(28, 20, 10, 0.28) inset; --sh-pin: 0 3px 8px -3px rgba(28, 20, 10, 0.5); --radius: 10px; --radius-sm: 6px; /* ---- MOTION · stop-motion cadence, weighted easing (§10) --------------- */ --ease-settle: cubic-bezier(0.22, 0.7, 0.2, 1); /* lands with weight */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-mount: cubic-bezier(0.34, 1.16, 0.44, 1); /* slight settle overshoot */ /* PACING PASS. Live UI wants 150-300ms; 0.6s for an ordinary state change reads as lag, and 1.1s reads as a broken page. --dur-slow is kept only for genuinely cinematic moments and is now 0.6s, which is where --dur used to be. Raise one of these back only for a specific named moment. */ --dur-fast: 0.2s; --dur: 0.32s; --dur-slow: 0.6s; color-scheme: light; --grain-opacity: 0.5; /* paper fibre strength; reduced-motion lowers it */ } /* ── ACCENT MAP ──────────────────────────────────────────────────────────── Applied to a
via [data-accent]. Sets the local accent triple that the section's own elements use, AND is what the orchestrator reads to drive the shared --accent when this chapter owns the viewport. */ [data-accent="brass"] { --accent: var(--brass); --accent-ink:#6f5222; --accent-wash: rgba(156,122,66,0.10); } [data-accent="ochre"] { --accent: var(--ochre); --accent-ink:#8a5c18; --accent-wash: rgba(196,135,50,0.12); } [data-accent="blue"] { --accent: var(--blue); --accent-ink:#274050; --accent-wash: rgba(55,85,107,0.11); } [data-accent="oxblood"] { --accent: var(--oxblood); --accent-ink:#5a2e2b; --accent-wash: rgba(116,63,59,0.10); } [data-accent="olive"] { --accent: var(--olive); --accent-ink:#4c5241; --accent-wash: rgba(105,112,90,0.12); } [data-accent="clay"] { --accent: var(--clay); --accent-ink:#7c432e; --accent-wash: rgba(161,95,69,0.11); } [data-accent="red"] { --accent: var(--red); --accent-ink:#83382a; --accent-wash: rgba(166,77,61,0.10); } [data-accent="forest"] { --accent: var(--forest); --accent-ink:#233a30; --accent-wash: rgba(48,75,63,0.11); }