/* ========================================================================== YOPROFX / 01 — TOKENS -------------------------------------------------------------------------- The single source of truth for the design system. Nothing in this file paints anything; it only declares. Every other stylesheet reads from here. HOUSE RULE #1 The house has no color. Only the work has color. Chrome, type, nav and CTAs are bone-on-graphite forever. Hue belongs exclusively to the five territories. HOUSE RULE #2 Light is the interaction verb. Hover = RAKING, focus/selection = SPOTLIGHT, scroll entry = EXPOSURE. ========================================================================== */ :root { color-scheme: dark; /* --- SURFACE ----------------------------------------------------------- Four depths only. Depth means distance from the light, never a shadow. */ --c-vault: #08080a; /* the page — deepest dark */ --c-floor: #101013; /* sections — the lit plane */ --c-plinth: #17171b; /* cards — raised objects */ --c-vitrine: #1e1e23; /* the one surface allowed to hold media */ /* --- INK --------------------------------------------------------------- */ --c-bone: #efeae1; /* primary type — warm white, never #fff */ --c-chalk: #a39f97; /* secondary type, metadata values */ /* 4.9:1 on vault, 4.4:1 on plinth. The previous value (#56565d) looked better and failed WCAG AA at 2.75:1 — and it carries every label, count and caption on the site, which is a lot of real content to make unreadable for the sake of a mood. */ --c-graphite: #85858d; /* labels, captions, counts */ /* --- LINE -------------------------------------------------------------- */ --c-line-soft: rgba(239, 234, 225, 0.055); /* the drafting grid */ --c-line: rgba(239, 234, 225, 0.12); /* default hairline */ --c-line-lit: rgba(239, 234, 225, 0.42); /* hairline under light */ /* --- TERRITORY --------------------------------------------------------- The complete colour inventory of the site. Five values, no more. */ --t-transform: #d8642a; /* KILN — oxide, heat, change */ --t-play: #ff3d6e; /* ARCADE — coin-op magenta */ --t-make: #45e0b0; /* SOLDER — flux green, bench light */ --t-tell: #f2ce8a; /* PROJECTOR — warm bulb, pale gold */ --t-think: #8fa8c0; /* SLATE — cold reading light */ /* Ambient territory. Sections set it; components read it. Defaults to colourless so any component dropped anywhere stays in the house style. */ --territory: var(--c-bone); /* --- TYPE FAMILIES ----------------------------------------------------- Three voices, three jobs: the story, the structure, the record. System stacks by default — zero network requests, instant first paint. To upgrade to the intended faces (Redaction / Archivo / Commit Mono), drop the .woff2 files into /assets/fonts/, uncomment the @font-face block at the bottom of this file, and prepend the family names here. Nothing else in the codebase needs to change. */ --font-display: "Iowan Old Style", "Hoefler Text", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif; --font-structure: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Inter, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace; /* --- TYPE SCALE -------------------------------------------------------- Fluid, and deliberately gapped: there is no "slightly bigger" step. Editorial (display/lede/prose) and laboratory (label/meta) are two different registers and must never be confused for one another. */ --t-hero: clamp(2.75rem, 8.2vw, 8.5rem); /* 44 → 136 px */ --t-display: clamp(2.125rem, 5.2vw, 4.5rem); /* 34 → 72 px */ --t-title: clamp(1.375rem, 2.6vw, 2.125rem); /* 22 → 34 px */ --t-signage: clamp(1.5rem, 4.6vw, 3.25rem); /* 24 → 52 px */ --t-lede: clamp(1.125rem, 1.45vw, 1.4375rem); /* 18 → 23 px */ --t-body: 1.0625rem; /* 17 px */ --t-small: 0.9375rem; /* 15 px */ --t-label: 0.75rem; /* 12 px */ --t-meta: 0.6875rem; /* 11 px */ --lh-tight: 1.02; --lh-display: 1.08; --lh-title: 1.18; --lh-body: 1.65; --lh-mono: 1.5; --ls-hero: -0.022em; --ls-display: -0.014em; --ls-signage: 0.075em; /* uppercase museum signage */ --ls-label: 0.13em; /* section headers */ --ls-meta: 0.085em; /* catalogue IDs, readouts */ /* --- SPACE ------------------------------------------------------------- One scale. Components never invent a value outside it. */ --sp-3xs: 0.25rem; /* 4 */ --sp-2xs: 0.5rem; /* 8 */ --sp-xs: 0.75rem; /* 12 */ --sp-sm: 1rem; /* 16 */ --sp-md: 1.5rem; /* 24 */ --sp-lg: 2.5rem; /* 40 */ --sp-xl: 4rem; /* 64 */ --sp-2xl: 6rem; /* 96 */ --sp-3xl: 9rem; /* 144 */ /* Generous negative space is a requirement, so section rhythm is fluid. */ --sp-section: clamp(4.5rem, 11vh, 10.5rem); --gutter: clamp(1.25rem, 5vw, 4rem); /* --- MEASURE ----------------------------------------------------------- */ --w-text: 64ch; /* reading measure — hard ceiling */ --w-editorial: 46rem; /* 736px — essays, ledes */ --w-wide: 74rem; /* 1184px — the working column */ --w-full: 98rem; /* 1568px — full-bleed compositions */ /* --- GEOMETRY ---------------------------------------------------------- Museum corners. 0 is the default; 2px is the only concession. */ --r-none: 0; --r-sm: 2px; --hair: 1px; /* --- MOTION ------------------------------------------------------------ Dimmer and dolly curves only. Nothing bounces, nothing overshoots. */ --dur-fast: 160ms; --dur-base: 240ms; --dur-slow: 420ms; --dur-reveal: 640ms; --dur-open: 1600ms; /* the cold open — once per session */ --ease-dimmer: cubic-bezier(0.4, 0, 0.2, 1); /* state changes */ --ease-dolly: cubic-bezier(0.16, 1, 0.3, 1); /* entrances */ --ease-gate: cubic-bezier(0.65, 0, 0.35, 1); /* shutters, sweeps */ --lift: -2px; /* the only translate a card may perform */ --reveal-shift: 8px; /* the only translate an entrance may use */ /* --- LAYERS ------------------------------------------------------------ */ --z-grain: 60; --z-instrument: 70; --z-skip: 100; /* --- COMPONENT CHROME -------------------------------------------------- */ --instrument-h: 1.75rem; /* the readout strip */ --masthead-h: 3.5rem; --chrome-h: calc(var(--instrument-h) + var(--masthead-h)); --grain-opacity: 0.035; } /* Longer measure earns a larger reading size. */ @media (min-width: 60rem) { :root { --t-body: 1.125rem; /* 18px */ --grain-opacity: 0.04; } } /* Honour explicit contrast preference by removing the low-alpha grid and pushing secondary ink up toward primary. */ @media (prefers-contrast: more) { :root { --c-chalk: #d6d1c8; --c-graphite: #8f8f97; --c-line-soft: rgba(239, 234, 225, 0.14); --c-line: rgba(239, 234, 225, 0.32); --grain-opacity: 0; } } /* Film grain is decoration; it is the first thing to go. */ @media (prefers-reduced-transparency: reduce) { :root { --grain-opacity: 0; } } /* ========================================================================== WEBFONT UPGRADE PATH — uncomment once the .woff2 files are in place. Subset to latin + latin-ext. Three files total, ~70KB combined. -------------------------------------------------------------------------- @font-face { font-family: "Redaction 35"; src: url("../assets/fonts/redaction-35.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Archivo"; src: url("../assets/fonts/archivo-var.woff2") format("woff2-variations"); font-weight: 400 700; font-stretch: 75% 125%; font-style: normal; font-display: swap; } @font-face { font-family: "Commit Mono"; src: url("../assets/fonts/commit-mono.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; } :root { --font-display: "Redaction 35", "Iowan Old Style", Georgia, serif; --font-structure: "Archivo", -apple-system, "Segoe UI", Arial, sans-serif; --font-mono: "Commit Mono", ui-monospace, "SF Mono", Menlo, monospace; } ========================================================================== */