/* ============================================================ Tiempo — design tokens The single :root for the whole site. Loaded first on every page, before any other stylesheet, so everything downstream can rely on it. Rules for this file: - :root and media-query :root only. No component selectors, ever. - A value that appears in more than one place belongs here. - Names are stable. The legacy aliases at the bottom are load-bearing across index.html, the 7 service pages and the shared components, so they stay even though the brand names are preferred for new work. ============================================================ */ :root { /* ── Brand ──────────────────────────────────────────────── The eight names from the brand guide, unchanged. */ --crema: #FFF8E1; /* primary light surface, text on dark */ --media: #230600; /* nav, dark section backgrounds */ --clockwork: #933B2A; /* primary CTA, section headings */ --ciruela: #4A1A2A; /* deep plum card backgrounds */ --tierrita: #6D3426; /* body text on cream */ --golden: #8A633F; /* muted / secondary text */ --siesta: #933B2A; /* historical alias of clockwork; kept */ --honey: #BF6D01; /* accent */ /* ── Brand as RGB triplets ──────────────────────────────── With no build step this is the only way to compose alpha variants from a single source of truth: rgba(var(--crema-rgb), 0.12) Before this, the same colour was retyped as a literal rgba() 167 different ways across the site. */ --crema-rgb: 255, 248, 225; --media-rgb: 35, 6, 0; --clockwork-rgb: 147, 59, 42; --ciruela-rgb: 74, 26, 42; --tierrita-rgb: 109, 52, 38; --golden-rgb: 138, 99, 63; --honey-rgb: 191, 109, 1; --sand-rgb: 149, 107, 68; /* #956B44 — only ever existed as an rgba triplet */ /* ── Extended surfaces ──────────────────────────────────── Real colours that were in use but never named. */ --media-deep: #120200; /* footer ground; darker than --media */ --media-mid: #1A0400; /* mid-dark bands */ --media-warm: #2C0B04; /* warm dark, avatar backfill */ --bark: #3A1E14; /* icon discs */ --terracotta: #C49166; /* tan accent (Siesta Sand in the brand guide) */ --cream-700: #F0E4C8; /* cream one step down */ /* ── Interaction states ─────────────────────────────────── "Darken the CTA on hover" was spelled four different ways across the site. These are the two that survive. */ --clockwork-hover: #A5432F; --clockwork-press: #7F3122; --honey-hover: #D47F0C; --alert: #D62817; /* ── Ink and lines ──────────────────────────────────────── Composed from the triplets above. Anything within ±0.04 of one of these alphas should use the token rather than a new literal. */ --on-dark-1: rgba(255, 248, 225, 0.90); --on-dark-2: rgba(255, 248, 225, 0.72); --on-dark-3: rgba(255, 248, 225, 0.58); --on-dark-4: rgba(255, 248, 225, 0.42); --on-light-1: rgba( 35, 6, 0, 0.72); --on-light-2: rgba( 35, 6, 0, 0.60); --on-light-3: rgba( 35, 6, 0, 0.38); --line-dark: rgba(255, 248, 225, 0.12); --line-dark-soft: rgba(255, 248, 225, 0.08); --line-light: rgba( 35, 6, 0, 0.12); --fill-dark: rgba(255, 248, 225, 0.06); --fill-dark-2: rgba(255, 248, 225, 0.12); --fill-light: rgba( 35, 6, 0, 0.04); --scrim: rgba( 0, 0, 0, 0.45); /* ── Typography ─────────────────────────────────────────── Nine literal font stacks collapse to three. Note --font-display falls back to a serif: 44 declarations previously fell back to 'DM Sans', a sans, which is wrong for a display serif. */ --font-body: 'DM Sans', "Helvetica Neue", Helvetica, Arial, sans-serif; --font-display: 'F37 Bobby', Georgia, 'Times New Roman', serif; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; /* Type scale — the seven original sizes, unchanged, plus --fs-sm, which four pages already defined at this exact value and index.html referenced without ever defining. */ --fs-hero: 3.25rem; --fs-h1: 2.5rem; --fs-h2: 1.75rem; --fs-h3: 1.375rem; --fs-body: 1rem; --fs-sm: 0.875rem; --fs-xs: 0.75rem; --fs-micro: 0.625rem; --lh-flat: 1; --lh-tight: 1.1; --lh-snug: 1.2; --lh-normal: 1.5; --lh-relaxed: 1.6; --lh-prose: 1.85; --ls-tight: -0.02em; --ls-snug: -0.01em; --ls-wide: 0.01em; --ls-caps: 0.08em; --ls-caps-lg: 0.12em; /* ── Spacing ────────────────────────────────────────────── A 4px grid. The number is px / 4. */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 28px; --s-8: 32px; --s-9: 36px; --s-10: 40px; --s-12: 48px; --s-14: 56px; --s-16: 64px; --s-18: 72px; --s-20: 80px; --s-24: 96px; --s-30: 120px; /* Section bands — the closed set of vertical section padding. Nothing outside this list may appear in `padding: N var(--pad-x)`. --band (28px) is the house rhythm: 28 top + 28 bottom gives the 56px inter-section gap used on the homepage and /product. */ --band-flush: 0; --band-xs: var(--s-4); /* 16 */ --band-sm: var(--s-5); /* 20 */ --band: var(--s-7); /* 28 — default */ --band-md: var(--s-10); /* 40 */ --band-lg: var(--s-12); /* 48 */ --band-xl: var(--s-14); /* 56 */ --band-2xl: var(--s-16); /* 64 */ --band-3xl: var(--s-20); /* 80 */ --band-4xl: var(--s-24); /* 96 */ /* ── Radius ─────────────────────────────────────────────── 34 literals collapse to 8; nothing moves more than 2px. --r-pill absorbs both spellings of a pill (100px and 999px). */ --r-xxs: 2px; --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-3xl: 44px; --r-pill: 100px; --r-circle: 50%; /* ── Elevation ──────────────────────────────────────────── 40 distinct shadows, 33 of them used exactly once, become a 5-step ladder plus 3 signature effects. Art-directed layered shadows (the dashboard stage, the offer diagrams) stay literal in their own component files. */ --shadow-xs: 0 1px 6px rgba(35, 6, 0, 0.25); --shadow-sm: 0 8px 18px rgba(35, 6, 0, 0.14); --shadow-md: 0 10px 22px rgba(35, 6, 0, 0.18); --shadow-lg: 0 18px 50px rgba(35, 6, 0, 0.28); --shadow-xl: 0 24px 70px rgba(35, 6, 0, 0.40); --shadow-glow-honey: 0 4px 14px rgba(191, 109, 1, 0.35); --shadow-glow-rust: 0 8px 22px rgba(147, 59, 42, 0.35); --ring-focus: 0 0 0 3px rgba(191, 109, 1, 0.35); /* ── Motion ─────────────────────────────────────────────── Six durations and five curves, down from 95 and 13. Keyframe choreography (marquees, the process ring) keeps its own literal timings; these are for `transition:` only. */ --dur-1: 0.15s; --dur-2: 0.2s; /* the default hover */ --dur-3: 0.3s; --dur-4: 0.45s; --dur-5: 0.7s; --ease-out-expo: cubic-bezier(0.16, 1, 0.30, 1); --ease-out-quart: cubic-bezier(0.33, 1, 0.68, 1); --ease-std: cubic-bezier(0.40, 0, 0.20, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-back: cubic-bezier(0.34, 1.2, 0.64, 1); /* ── Reveal ─────────────────────────────────────────────── Five kinds of thing arrive on this site and they do not want the same motion. One row each, so tuning cards never moves headlines. Text is the only kind that carries blur: it is the one where an out-of-focus arrival reads as depth rather than as a dropped frame, and it is cheap on a line of type in a way it is not on a video panel. `--reveal-dur`, `--reveal-shift`, `--reveal-scale` and `--reveal-blur` stay free as per-element escape hatches; a single stubborn element can override one without a new kind. */ --reveal-text-dur: 1s; --reveal-text-shift: 20px; --reveal-text-blur: 6px; --reveal-text-ease: var(--ease-out-expo); --reveal-media-dur: 1.3s; /* photos, video, the two embeds */ --reveal-media-shift: 12px; --reveal-media-scale: 0.96; --reveal-media-ease: var(--ease-out-expo); --reveal-box-dur: 1.15s; /* cards, panels, bands */ --reveal-box-shift: 28px; --reveal-box-scale: 0.985; --reveal-box-ease: var(--ease-out-expo); --reveal-diagram-dur: 1.3s; /* process ring, calculator, simulators */ --reveal-diagram-shift: 24px; --reveal-diagram-scale: 0.98; --reveal-diagram-ease: var(--ease-out-expo); /* Phase two: the contents arriving into a block that has already landed. Shorter and shallower than any reveal kind, because the block has done the travelling and this is only the contents catching up. */ --fill-dur: 0.55s; --fill-shift: 14px; --fill-step: 0.07s; --fill-ease: var(--ease-out-expo); /* How far into a block's own reveal its content is allowed to start. Not 1: ease-out-expo has covered 91% of its travel by here and reads as landed, so waiting for the animation to technically end left the content sitting still for most of a second after the block had stopped moving. */ --reveal-handoff: 0.35; --reveal-control-dur: 0.6s; /* CTAs and filter bars, crisp on purpose */ --reveal-control-shift: 10px; --reveal-control-ease: var(--ease-out-quart); /* ── Depth ──────────────────────────────────────────────── The nav stack (98/99/100) was retyped in 8 files. These name the numbers already in use rather than rescaling them: the homepage matcher widget sits at 900 precisely so it clears the nav at 100, and renumbering the nav upward would silently bury it. */ --z-below: -1; --z-base: 0; --z-raised: 1; --z-content: 2; --z-lifted: 3; --z-local: 5; --z-sticky: 30; --z-section: 50; --z-scrim: 98; --z-drawer: 99; --z-nav: 100; --z-overlay: 140; --z-page: 200; --z-widget: 900; --z-modal: 1000; /* ── Layout ─────────────────────────────────────────────── 26 ad-hoc max-widths collapse to 8. `ch`-based measures stay as `ch` in component files: it is the correct unit for a reading measure and should not be frozen to px. */ --content-max: 1560px; --w-wide: 1360px; --w-page: 1200px; --w-grid: 1064px; --w-text: 900px; --w-read: 720px; --w-narrow: 560px; --w-card: 420px; --read-max: var(--w-read); /* Horizontal page gutter. Collapses to a fixed value below the content max so small screens are not driven by the max() arm. */ --pad-x: max(60px, calc((100vw - var(--content-max)) / 2)); /* Height of a full-bleed hero. Five page modules each carried their own copy of this number and /about had drifted to 480, so the site opened two different ways. Stepped in the gutter ladder below, the same way --pad-x is. A page that needs its hero to grow with its copy uses this as a min-height; the rest set height outright. */ --hero-h: 576px; /* ── Legacy aliases ─────────────────────────────────────── Still referenced by index.html, the 7 service pages and the shared component sheet. Keep. Prefer the brand names above for anything new. */ --white: var(--crema); --cream-500: var(--crema); --red: var(--clockwork); --dark-grey-500: var(--clockwork); --dark-grey-300: var(--ciruela); --grey-500: var(--tierrita); --grey-300: var(--golden); --grey-400: var(--siesta); --grey-200: rgba(149, 107, 68, 0.28); } /* ── Gutter ladder ─────────────────────────────────────────── Six breakpoints site-wide, down from 23. Only --pad-x changes here; component reflow lives with the components. */ @media (min-width: 768px) and (max-width: 1024px) { :root { --pad-x: 32px; } } @media (max-width: 767px) { :root { --pad-x: 20px; --hero-h: 360px; } } @media (max-width: 430px) { :root { --pad-x: 16px; } }