/* ========================================================================= LE LIVE SHOW 2026 — Design Tokens Colors + type, base and semantic. ========================================================================= */ /* ---- Webfonts ---- Display serif (BRAND): Castio — the editorial high-contrast serif used for slogans and body display. Loaded from fonts/CASTIO_EAVERSION.otf. Display stamp (logo): the distressed stamp face for "LE LIVE SHOW" is rendered from the logo PNG; for supporting headlines we substitute Rubik Dirt (flagged). Always use the logo image for the wordmark itself. UI/body sans: Inter for small UI labels — NOT shown in marketing, only for web/app chrome. */ @font-face { font-family: 'Castio'; src: url('fonts/CASTIO_EAVERSION.otf') format('opentype'); font-weight: 100 900; font-style: normal; font-display: swap; } @import url('https://fonts.googleapis.com/css2?family=Rubik+Dirt&family=Inter:wght@400;500;600;700&display=swap'); :root { /* ============ CORE PALETTE ============ */ --lls-black: #000000; /* stage black, dominant background */ --lls-cream: #fff7f7; /* off-white / warm white for body text on black */ --lls-pink: #f78ea7; /* hero pink — used for the logo block */ --lls-pink-soft: #fdc3ca; /* light pink — secondary block, accents */ /* Derived neutrals */ --lls-ink: #111111; /* near-black for elevated surfaces on black bg */ --lls-ink-2: #1a1a1a; /* card surface on black */ --lls-line: #2a2a2a; /* hairline on black */ --lls-mute: rgba(255, 247, 247, 0.64); /* dimmed body on dark */ --lls-mute-2: rgba(255, 247, 247, 0.38); /* captions on dark */ /* Derived pinks */ --lls-pink-deep: #e46a87; /* hover on pink */ --lls-pink-tint: #fde7eb; /* background wash */ /* ============ SEMANTIC COLOR TOKENS ============ */ --bg: var(--lls-black); --bg-elevated: var(--lls-ink); --surface: var(--lls-ink-2); --fg: var(--lls-cream); --fg-muted: var(--lls-mute); --fg-subtle: var(--lls-mute-2); --accent: var(--lls-pink); --accent-soft: var(--lls-pink-soft); --accent-deep: var(--lls-pink-deep); --border: var(--lls-line); --on-accent: var(--lls-cream); /* text sitting ON pink block */ --on-cream: var(--lls-black); /* ============ TYPE FAMILIES ============ */ --font-display: 'Rubik Dirt', 'Rubik Mono One', 'Impact', system-ui, sans-serif; --font-serif: 'Castio', 'Cormorant Garamond', 'Playfair Display', Georgia, serif; --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* ============ TYPE SCALE (marketing 1920 / mobile story 1080) ============ */ --fs-display-xl: clamp(72px, 10vw, 180px); /* LE LIVE SHOW hero */ --fs-display-l: clamp(56px, 7vw, 120px); --fs-display-m: 48px; --fs-h1: 44px; --fs-h2: 32px; --fs-h3: 24px; --fs-body-lg: 22px; --fs-body: 18px; --fs-body-sm: 15px; --fs-caption: 13px; --fs-overline: 12px; --lh-display: 0.92; --lh-heading: 1.12; --lh-body: 1.45; --ls-display: 0.01em; --ls-overline: 0.22em; /* generous tracking for ALL CAPS labels */ /* ============ RADII ============ */ --r-xs: 4px; --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-pill: 999px; --r-stamp: 2px; /* the ever-so-slightly rounded logo block */ /* ============ SPACING (4pt grid) ============ */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; /* ============ SHADOWS (designed for black bg) ============ */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.35); --shadow-md: 0 10px 30px rgba(0,0,0,0.55); --shadow-lg: 0 24px 60px rgba(0,0,0,0.7); --shadow-pink: 0 12px 36px rgba(247,142,167,0.35); --shadow-inner: inset 0 1px 0 rgba(255,255,255,0.04); /* ============ MOTION ============ */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1); --ease-exit: cubic-bezier(0.4, 0, 1, 1); --dur-fast: 140ms; --dur-base: 240ms; --dur-slow: 420ms; /* ============ TILT (a signature motif) ============ */ --tilt-left: -3deg; --tilt-right: 2deg; } /* ============ BASE ELEMENT STYLES ============ */ html, body { background: var(--bg); color: var(--fg); font-family: var(--font-serif); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 600; line-height: var(--lh-heading); margin: 0; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } p { margin: 0 0 var(--s-4); color: var(--fg); } small, .caption { font-size: var(--fs-caption); color: var(--fg-subtle); } /* Display / logo-like treatments */ .display { font-family: var(--font-display); font-size: var(--fs-display-xl); line-height: var(--lh-display); letter-spacing: var(--ls-display); text-transform: uppercase; color: var(--fg); } /* The signature "stamp block": pink background with cream distressed text, slightly tilted */ .stamp { display: inline-block; background: var(--accent); color: var(--on-accent); font-family: var(--font-display); text-transform: uppercase; padding: 0.08em 0.18em 0.02em; border-radius: var(--r-stamp); transform: rotate(var(--tilt-left)); line-height: 0.95; } .stamp--soft { background: var(--accent-soft); } /* Overline — the "LE 13 JUIN 2026 À LYON" treatment */ .overline { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: var(--ls-overline); font-weight: 700; font-size: var(--fs-overline); color: var(--on-cream); } /* Pill — the black rounded body-text container over imagery */ .pill { display: inline-block; background: var(--lls-black); color: var(--fg); padding: var(--s-3) var(--s-5); border-radius: var(--r-lg); font-family: var(--font-serif); font-style: italic; } /* Italic serif quote — the "Le plus grand rassemblement..." */ .quote-serif { font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-body-lg); color: var(--fg); text-wrap: balance; }