/* * deck.tokens.css — the token layer. The ONLY file that defines raw values. * * Direction: THE TABLE. Photographs are physical prints lying on a lit surface — * rotated, overlapping, piled. Nothing is aligned to anything, because a grid of * pictures reads as a slideshow no matter how it is painted, and not looking * like PowerPoint is the one hard brief this deck has (spec/60-design-direction). * * ── Authoring unit ────────────────────────────────────────────────────────── * DESIGN PIXELS on a 1920×1080 canvas. reveal.js scales the whole canvas to the * display (deck.js CANVAS), so a px here is stable across the laptop and the TV. * Never write vw/vh/% of viewport — that breaks the fixed-canvas contract (D-06). * * ── Two rules that are not style choices ──────────────────────────────────── * 1. Sizes are set for a room, not a desk. The audience is 3–5 metres away * (spec/60). Anything under ~28px is decoration, not information. * 2. No token may be redefined per unit. Units are position-independent (M10, * D-22) — a unit that retunes a global token breaks its neighbours when the * deck is re-cut, and this deck WILL be re-cut. */ :root { /* ── Typeface — CHOSEN: Syne + Epilogue ─────────────────────────────────── * Faces come from deck-fonts.css, base64-inlined (C5/M8). * * The pairing carries its own optical tuning, and it is not incidental: Syne * is a WIDE display face, so it takes a smaller size and tighter tracking * than a narrow one would. Swapping the family without re-tuning these three * values is what makes a substituted typeface look wrong rather than * different. * * The runner-up (Gabarito + Newsreader) is still wired under * html[data-type="gabarito"] for second-guessing on the TV. Deleting it — * here and from deck-fonts.css — saves ~46 KB and is a pre-ship task, not an * urgent one. */ --font-display: "Syne", system-ui, sans-serif; --font-body: "Epilogue", system-ui, sans-serif; --disp-weight: 700; --disp-track: -0.026em; --disp-scale: 0.88; /* multiplier applied to every display size */ --disp-leading: 1.00; /* ── Surface ────────────────────────────────────────────────────────────── * A pool of light falling on a dark table. Deliberately NOT a flat fill: a * flat dark background reads as "black slide", which is the failure mode the * whole direction exists to avoid. Also safer on an uncalibrated TV in a lit * room than a low-contrast gradient would be. */ --table-lit: #2A241C; --table-mid: #191510; --table-edge: #0D0B08; --grain: 0.24; /* ── Ink (on the table) ─────────────────────────────────────────────────── * Warm off-white, never pure #fff — pure white on near-black glares at TV * brightness and haloes the type at distance. */ --ink: #F4EEE3; --ink-soft: #B3A897; --ink-faint: #6E6555; /* ── Paper (the prints themselves) ──────────────────────────────────────── * Prints carry their own ink because they are light objects on a dark ground. */ --paper: #EFE8DA; --paper-back: #E2D9C8; --paper-ink: #2B241B; --paper-ink-soft: #6B6052; /* ── The one accent ─────────────────────────────────────────────────────── * A red pencil. Used for exactly two things: the expired countdown, and the * single "this one / now" mark in a unit. It means nothing if it is * everywhere — one accent per unit, maximum. */ --mark: #C0522F; /* ── Print physics ──────────────────────────────────────────────────────── * The mat and the shadow are what make a print read as an OBJECT rather than * a rectangle with a border. The three-layer shadow is doing real work: * contact, lift, and ambient. One layer looks like a sticker. */ --mat: 15px; --mat-card: 18px 22px 20px; --lift: 0 1px 1px rgba(0,0,0,0.55), 0 9px 18px rgba(0,0,0,0.46), 0 26px 52px rgba(0,0,0,0.40); --lift-sm: 0 1px 1px rgba(0,0,0,0.55), 0 8px 16px rgba(0,0,0,0.44), 0 20px 40px rgba(0,0,0,0.36); /* Light falls from the upper left, matching the table's own light pool. Without this every print is a flat cutout and a pile looks like clip-art. */ --sheen: linear-gradient(147deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0) 34%, rgba(0,0,0,0.14) 100%); /* ── Type scale (design px, tuned for 3–5 m) ──────────────────────────── */ --fs-hero: 150px; /* a number or a single word carrying a whole unit */ --fs-display: 104px; /* the standard unit headline */ --fs-display-sm: 74px; /* headline for a unit whose surface is already full */ --fs-lede: 40px; /* the supporting line */ --fs-lede-sm: 36px; --fs-print: 34px; /* type ON a print or card */ --fs-detail: 21px; /* the optional second line on a card */ --fs-tick: 21px; /* the countdown */ --lh-tight: 1.06; --lh-body: 1.34; /* ── Layout ─────────────────────────────────────────────────────────────── * A generous safe margin. TVs overscan, and a 1920-wide canvas that pushes * content to 40px from the edge can lose it entirely on unknown hardware. */ --edge: 96px; --edge-tight: 68px; /* ── Motion ─────────────────────────────────────────────────────────────── * One orchestrated moment per unit — prints landing, staggered — rather than * scattered micro-animation. Everything animates transform and opacity only. */ --ease-land: cubic-bezier(.20,.72,.26,1); --ease-rise: cubic-bezier(.22,.68,.28,1); --dur-land: 720ms; --dur-rise: 620ms; --stagger: 55ms; --crossfade: 1100ms; /* pile image change — slow, so it never reads as a cut */ --z-art: 10; --z-spine: 5; --z-say: 20; --z-tick: 40; } /* Runner-up, kept for comparison on the real display. Delete before ship. */ html[data-type="gabarito"] { --font-display: "Gabarito", system-ui, sans-serif; --font-body: "Newsreader", Georgia, serif; --disp-weight: 700; --disp-track: -0.024em; --disp-scale: 0.98; --disp-leading: 0.98; } /* * N6: motion respects the OS setting, with ONE recorded exemption — the * countdown's expiry flash (deck.css), which is the entire point of the * instrument and runs only on the owner's own machine. */ @media (prefers-reduced-motion: reduce) { :root { --dur-land: 1ms; --dur-rise: 1ms; --stagger: 0ms; } }