/* ============================================================================ KÉVIN MAILLOT — DESIGN SYSTEM colors_and_type.css — foundational + semantic tokens ---------------------------------------------------------------------------- Direction: sobre, affirmé, distinctif. Fond sombre quasi-noir, texte blanc chaud, gris désaturé en secondaire. UN seul accent fort : l'or #F5C518. Lisibilité filmée prioritaire (contenu capturé en vidéo). ========================================================================== */ /* --- Webfonts : AUTO-HEBERGEES dans fonts/. Aucun appel reseau. --- */ /* Un @import distant BLOQUE le rendu headless (Chrome attend le reseau indefiniment) et, quand il echoue, fait retomber en serif — interdit par le systeme. Les trois familles sont donc servies en local depuis fonts/. Ne pas reintroduire d'import Google ici. */ @import url('fonts/fonts.css'); :root { /* ========================================================================== 1. COLOR — RAW PALETTE Warm near-blacks (slight yellow-red cast, very low chroma) so the gold reads as belonging to the same world rather than floating on cold gray. ========================================================================== */ /* Grounds — warm charcoal blacks */ --ink-950: #0A0907; /* deepest well — letterbox, image wells */ --ink-900: #121110; /* PAGE BACKGROUND — default canvas */ --ink-850: #1A1815; /* raised panel */ --ink-800: #221F1A; /* card / surface */ --ink-700: #2C2922; /* elevated surface, strong hairline */ --line: #2A2722; /* hairline border on dark */ --line-soft: rgba(244, 239, 228, 0.08); /* subtle divider */ /* Foreground — warm whites & desaturated grays */ --fg-1: #F4EFE4; /* primary text — warm white */ --fg-2: #A7A097; /* secondary text — desaturated warm gray */ --fg-3: #8A857A; /* tertiary — captions, disabled, schematic strokes (WCAG AA ≈4.6:1) */ --fg-on-gold: #14120A;/* text/icon sitting ON a gold fill */ /* Brand — gold (LOCKED. Do not alter --gold.) */ --gold: #F5C518; /* THE brand accent. One strong accent only. */ --gold-bright: #FFD740; /* hover state on dark / highlight tick */ --gold-deep: #C99E0F; /* pressed / underline / depth */ --gold-wash: rgba(245, 197, 24, 0.12); /* subtle fill behind labels */ --gold-line: rgba(245, 197, 24, 0.32); /* gold hairline */ /* Alert — discreet terracotta. Critical elements only, used sparingly. */ --alert: #D9614D; --alert-dim: rgba(217, 97, 77, 0.16); /* ========================================================================== 2. COLOR — SEMANTIC ALIASES ========================================================================== */ --bg: var(--ink-900); --bg-deep: var(--ink-950); --surface: var(--ink-800); --surface-raised:var(--ink-850); --surface-elev: var(--ink-700); --border: var(--line); --text: var(--fg-1); --text-muted: var(--fg-2); --text-faint: var(--fg-3); --accent: var(--gold); --accent-hover: var(--gold-bright); --accent-press: var(--gold-deep); --focus-ring: var(--gold); --danger: var(--alert); /* ========================================================================== 3. TYPOGRAPHY — FAMILIES Display : Archivo (expanded, black) — bold editorial, films well. Body : Bricolage Grotesque — police variable (opsz/wght), identité hybride. Mono : Spline Sans Mono — eyebrows, labels, schematic annotations, code. ========================================================================== */ --font-display: 'Archivo Expanded', 'Archivo', 'Arial Narrow', sans-serif; --font-sans: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif; --font-mono: 'Spline Sans Mono', ui-monospace, 'SFMono-Regular', monospace; /* Weights */ --w-regular: 400; /* @kind font */ --w-medium: 500; /* @kind font */ --w-semibold:600; /* @kind font */ --w-bold: 700; /* @kind font */ --w-black: 900; /* @kind font */ /* ========================================================================== 4. TYPOGRAPHY — MODULAR SCALE (≈1.25 major third) rem-based for documents/web. Slides use the px helpers further down. ========================================================================== */ --t-2xs: 0.72rem; /* 11.5px — micro labels */ --t-xs: 0.8rem; /* 12.8px — eyebrow, caption */ --t-sm: 0.9rem; /* 14.4px */ --t-base:1rem; /* 16px — body */ --t-md: 1.125rem; /* 18px */ --t-lg: 1.5rem; /* 24px */ --t-xl: 2rem; /* 32px */ --t-2xl: 2.75rem; /* 44px */ --t-3xl: 3.75rem; /* 60px */ --t-4xl: 5rem; /* 80px — hero */ --lh-tight: 1.04; /* @kind font */ /* display headlines */ --lh-snug: 1.18; /* @kind font */ /* subheads */ --lh-normal: 1.5; /* @kind font */ /* body */ --lh-loose: 1.65; /* @kind font */ /* long-form pedagogical text */ --ls-display: -0.02em; /* tighten big display */ --ls-tight: -0.01em; --ls-normal: 0em; --ls-label: 0.18em; /* mono eyebrows / overlines — wide tracking */ /* ========================================================================== 5. SPACING — 4px base ========================================================================== */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; /* ========================================================================== 6. RADII — sober / editorial. Small or sharp by default. ========================================================================== */ --r-0: 0px; /* hard editorial edge */ --r-1: 3px; /* default control / card */ --r-2: 6px; /* larger cards */ --r-3: 10px; /* media wells */ --r-pill: 999px;/* tags / mono chips only */ /* ========================================================================== 7. ELEVATION — on dark, depth comes from value + hairline, not big blur. ========================================================================== */ --elev-1: 0 1px 0 0 rgba(244,239,228,0.04) inset, 0 1px 2px rgba(0,0,0,0.4); --elev-2: 0 1px 0 0 rgba(244,239,228,0.05) inset, 0 8px 24px -8px rgba(0,0,0,0.6); --elev-3: 0 12px 48px -12px rgba(0,0,0,0.7); --glow-gold: 0 0 0 1px var(--gold-line), 0 6px 28px -10px rgba(245,197,24,0.35); --focus: 0 0 0 2px var(--ink-900), 0 0 0 4px var(--gold); /* ========================================================================== 8. SLIDE SCALE — px helpers for 1920×1080. Floor for filmed legibility: nothing on a slide below 24px. ========================================================================== */ --s-eyebrow: 26px; --s-body: 34px; --s-lead: 44px; --s-h3: 56px; --s-h2: 88px; --s-h1: 136px; --s-hero: 200px; } /* ============================================================================ 9. SEMANTIC ELEMENT DEFAULTS Include this file and these base styles apply to plain HTML. ========================================================================== */ .ds-root, body.ds { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--t-base); line-height: var(--lh-normal); font-weight: var(--w-regular); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Display headings — Archivo expanded black */ .h1, .h2, .h3 { font-family: var(--font-display); font-weight: var(--w-black); } .h1 { font-size: var(--t-3xl); line-height: var(--lh-tight); letter-spacing: var(--ls-display); } .h2 { font-size: var(--t-2xl); line-height: var(--lh-tight); letter-spacing: var(--ls-display); } .h3 { font-size: var(--t-xl); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); font-weight: var(--w-bold); } .lead { font-size: var(--t-md); line-height: var(--lh-normal); color: var(--text); } .p { font-size: var(--t-base); line-height: var(--lh-normal); color: var(--text); } .small{ font-size: var(--t-sm); color: var(--text-muted); } .caption { font-size: var(--t-xs); color: var(--text-faint); } /* Eyebrow / overline — mono, wide tracking, often gold */ .eyebrow { font-family: var(--font-mono); font-weight: var(--w-medium); font-size: var(--t-xs); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--gold); } /* Inline code / technical token */ .code, code, kbd, .mono { font-family: var(--font-mono); font-size: 0.92em; color: var(--fg-1); } a { color: var(--gold); text-decoration: none; } a:hover { color: var(--gold-bright); } ::selection { background: var(--gold); color: var(--fg-on-gold); }