/* ============================================================================ MUGGER CITY — DESIGN TOKENS Phase 02 · the visual foundation ---------------------------------------------------------------------------- Load order matters: tokens.css → style.css → premium.css Nothing in this file styles an element. It only declares the system. The raw palette (--cream, --pond, --ochre …) lives in style.css and is kept intact so the existing pages keep working. This file adds the *semantic* layer on top: components should reach for --color-text-muted, not --ink-muted, so the palette can move without touching components. ========================================================================== */ :root { /* ========================================================================== 01 · TYPE FAMILIES — three layers, three jobs -------------------------------------------------------------------------- DISPLAY the brand voice. Headlines and emotional statements only. BODY everything a person actually reads at length. DATA the scientific register: labels, measurements, taxonomy, records. Cheffiy is the Mugger City wordmark face and is deliberately isolated to --font-display alone, so it can be swapped in exactly one place. Its fallback is Cormorant Garamond — the serif already used by the museum galleries in vc2/ — so the site degrades into a sibling system, not Georgia. ======================================================================== */ --font-display: "Cheffiy", "Cormorant Garamond", "Fraunces", Georgia, serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-data: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* ========================================================================== 02 · TYPE SCALE Display sizes are reserved for moments that earn emphasis. Most of the page should sit at --text-body and --text-label. ======================================================================== */ --text-display-xl: clamp(3.4rem, 8.5vw, 7.5rem); /* hero wordmark */ --text-display-l: clamp(2.4rem, 5.2vw, 4.4rem); /* section titles */ --text-display-m: clamp(1.9rem, 3.4vw, 2.9rem); /* sub-chapters, closers */ --text-heading-l: clamp(1.28rem, 2vw, 1.6rem); --text-heading-m: clamp(1.02rem, 1.4vw, 1.16rem); --text-body-lg: clamp(1.02rem, 1.5vw, 1.18rem); /* leads */ --text-body: 1rem; --text-body-sm: 0.9rem; --text-label: 0.75rem; /* 12px field label */ --text-data: 0.8125rem; /* 13px measurements */ --text-data-xl: clamp(2.6rem, 6vw, 5rem); /* oversized field figure */ --leading-tight: 1.04; --leading-snug: 1.28; --leading-normal: 1.55; --leading-relaxed: 1.78; --tracking-display: -0.015em; --tracking-body: 0; --tracking-label: 0.28em; /* field labels are spaced like specimen tags */ --tracking-data: 0.06em; --measure: 58ch; /* comfortable reading column */ --measure-narrow: 46ch; --measure-wide: 68ch; /* ========================================================================== 03 · SPACING — 4px base, no arbitrary values ======================================================================== */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 56px; --space-9: 72px; --space-10: 96px; --space-11: 128px; --space-12: 160px; /* Vertical rhythm between major sections — the page's breathing */ --section-y: clamp(70px, 9vw, 120px); --section-y-lg: clamp(80px, 11vw, 150px); --section-y-sm: clamp(56px, 8vw, 100px); /* Horizontal frame. Editorial margins, not a 12-col SaaS gutter. */ --container: min(1280px, 92vw); --container-narrow: min(1040px, 90vw); --container-text: min(760px, 88vw); --gutter: clamp(20px, 4vw, 64px); /* ========================================================================== 04 · RADIUS — a museum has straight edges Rounded rectangles are the fastest way to look like a generic web app. Nothing here is decorative; the pill is reserved for genuine chips. ======================================================================== */ --radius-none: 0; --radius-sm: 2px; /* photographic plates, field records */ --radius-md: 4px; /* larger surfaces */ --radius-pill: 999px; /* specimen chips and badges only */ --radius-round: 50%; /* ========================================================================== 05 · RULES & BORDERS — survey lines, not card outlines ======================================================================== */ --hairline: 1px; --rule-weight: 1px; --rule-heavy: 1.5px; --color-rule: rgba(14, 31, 19, 0.16); /* on paper */ --color-rule-strong: rgba(14, 31, 19, 0.34); --color-rule-inverse: rgba(236, 232, 221, 0.18); /* on dark */ --color-rule-inverse-strong: rgba(236, 232, 221, 0.38); --rule: var(--rule-weight) solid var(--color-rule); --rule-strong: var(--rule-weight) solid var(--color-rule-strong); --rule-inverse: var(--rule-weight) solid var(--color-rule-inverse); /* ========================================================================== 06 · SEMANTIC COLOUR Two environments — PAPER (archival light) and DEEP (the river at night). Every text value below meets WCAG AA (>= 4.5:1) on its own surface. ======================================================================== */ /* -- surfaces: paper ---------------------------------------------------- */ --color-bg-paper: #ece8dd; /* --cream */ --color-bg-paper-deep: #ded9c9; /* --cream-deep */ --color-surface: #f4f1e9; /* --ivory: raised specimen card */ --color-surface-sunk: #dad5c4; /* --bone */ /* -- surfaces: deep ----------------------------------------------------- */ --color-bg-deep: #051c12; /* --pond-darker */ --color-bg-dark: #0f3e26; /* --pond-deep */ --color-bg-mid: #1d5c3c; /* --pond */ /* -- text on paper ------------------------------------------------------ */ --color-text-primary: #0e1f13; /* 14.0:1 */ --color-text-secondary: #243a29; /* 10.0:1 */ --color-text-muted: #4f6155; /* 5.4:1 */ --color-text-faint: #5c6858; /* 4.8:1 — was #788474 at 3.2:1 (failed) */ /* -- text on deep ------------------------------------------------------- */ --color-text-inverse: #ece8dd; /* 14.5:1 */ --color-text-inverse-muted: #c9c9ba; /* 10.6:1 */ --color-text-inverse-faint: #a4ab98; /* 7.5:1 */ /* -- the accent --------------------------------------------------------- One family, two values. Ochre is the discovered warmth in a green-and- paper world: a survey pin, a rule under a label, a figure that matters. --color-accent is for graphics and for text on DEEP surfaces. --color-accent-text is the darkened variant legible on PAPER. ---------------------------------------------------------------------- */ --color-accent: #cd9847; /* --ochre · 11.7:1 on deep */ --color-accent-bright: #ebc875; /* --sun · highlight */ --color-accent-text: #7a4f16; /* AA on every paper tone: ivory 6.3, cream 5.8, cream-deep 5.0, bone 4.8 (was #a26d2c at 3.6) */ /* -- states ------------------------------------------------------------- */ --color-focus: #ebc875; --focus-ring: 2px solid var(--color-focus); --focus-offset: 3px; /* ========================================================================== 07 · ELEVATION — a field guide is printed, not floating Shadows describe paper lifting off paper, never a glow. ======================================================================== */ --shadow-none: none; --shadow-plate: 0 1px 2px rgba(5, 28, 18, 0.10), 0 8px 24px rgba(5, 28, 18, 0.08); --shadow-lift: 0 2px 4px rgba(5, 28, 18, 0.12), 0 18px 44px rgba(5, 28, 18, 0.14); --shadow-inset-rule: inset 0 -1px 0 var(--color-rule); /* ========================================================================== 08 · MOTION — four tiers, three curves. The river is the reference: water, sediment, drifting, surveying. Nothing here bounces, springs or overshoots. FAST small UI feedback — a link, a chip, a hover MEDIUM a component changing state SLOW a section arriving; something being revealed AMBIENT continuous environmental drift, measured in seconds Use these tokens. Do not hand-write durations in components. ======================================================================== */ /* -- curves ------------------------------------------------------------- STANDARD general easing, gentle in and out EXIT strong ease-out — things settling into place, the default for anything entering the viewport DRIFT near-linear, for environmental movement that should read as a current rather than an animation ---------------------------------------------------------------------- */ --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-exit: cubic-bezier(0.16, 1, 0.3, 1); --ease-drift: cubic-bezier(0.4, 0.0, 0.6, 1.0); --duration-fast: 0.18s; --duration-normal: 0.32s; --duration-medium: 0.55s; --duration-slow: 0.9s; --duration-cinematic: 1.4s; --duration-ambient: 18s; /* Stagger step for sequences — field points, specimen chips, records. Deliberately slow enough to read as "one after another", not a ripple. */ --stagger: 90ms; /* ========================================================================== 09 · IMAGE TREATMENT Documentary, not graded. Contrast is nudged, never stylised. ======================================================================== */ --img-treatment: contrast(1.02) saturate(0.98); --img-treatment-archive: sepia(0.24) contrast(1.02); /* historical plates only */ --img-aspect-plate: 4 / 4.8; /* portrait specimen plate */ --img-aspect-wide: 16 / 9; --img-aspect-field: 3 / 2; } /* ============================================================================ BASE — the smallest amount of global styling the system needs to hold ========================================================================== */ /* Field labels, data figures and paragraphs get their families here so that every component inherits the right register without restating it. */ body { font-family: var(--font-body); font-size: var(--text-body); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis-weight: none; } /* ---------------------------------------------------------------------------- FOCUS — the site was shipping with almost no visible focus state. One ring, everywhere, in the accent. Never removed. -------------------------------------------------------------------------- */ /* Outline only. This rule previously also set border-radius, which meant focusing any element reshaped it — including the locked hero card buttons. A focus state must never change a component's geometry. */ :focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); } /* Only suppress the ring for pointer users, never for keyboard */ :focus:not(:focus-visible) { outline: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }