/* === Speloosh — Design Tokens ========================================== Source de vérité du design system. Importée par chaque page : --------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Archivo+Narrow:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,800&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap'); /* ===== Reset minimal ===== */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } button { font: inherit; cursor: pointer; } a { color: inherit; text-decoration: none; } /* ===== Base / shared ===== */ .he-root { --font-display: "Archivo Narrow", "Archivo", system-ui, sans-serif; --font-body: "Manrope", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; font-family: var(--font-body); color: var(--ink); background: var(--bg); letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; min-height: 100vh; } /* ===== COURT (light, editorial sport) ===== */ .he-court { --bg: oklch(96.5% 0.012 75); /* warm paper */ --bg-2: oklch(93% 0.016 75); /* tinted card surface */ --bg-3: oklch(99% 0.005 80); /* paper-white */ --bg-ink: oklch(16% 0.018 260); /* deep slate — slab strips */ --line: oklch(86% 0.014 75); --line-strong: oklch(70% 0.02 75); --ink: oklch(16% 0.018 260); --ink-2: oklch(32% 0.014 260); --ink-3: oklch(50% 0.012 260); --mute: oklch(62% 0.01 75); --accent: oklch(60% 0.215 30); /* rich athletic red-orange */ --accent-ink: oklch(98% 0.01 75); --accent-soft: oklch(91% 0.07 38); --pos: oklch(54% 0.16 152); --neg: oklch(56% 0.21 22); --warn: oklch(72% 0.16 80); /* Holographic foil — used SPARINGLY */ --foil-gradient: linear-gradient(110deg, transparent 0%, color-mix(in oklch, oklch(82% 0.14 320), transparent 60%) 18%, color-mix(in oklch, oklch(80% 0.12 200), transparent 55%) 35%, color-mix(in oklch, oklch(86% 0.14 100), transparent 60%) 52%, color-mix(in oklch, oklch(78% 0.14 30), transparent 50%) 70%, transparent 100% ); --shadow-card: 0 1px 0 rgba(20,15,10,.05), 0 10px 28px -16px rgba(20,15,10,.20); --halftone: radial-gradient(circle at 1px 1px, oklch(72% 0.015 75) 1px, transparent 1.5px); } /* ===== STADIUM (dark, prêt mais non utilisé en prod) ===== */ .he-stadium { --bg: oklch(16% 0.012 260); --bg-2: oklch(20% 0.014 260); --bg-3: oklch(24% 0.014 260); --line: oklch(28% 0.014 260); --line-strong: oklch(40% 0.018 260); --ink: oklch(96% 0.008 80); --ink-2: oklch(82% 0.012 80); --ink-3: oklch(64% 0.014 260); --mute: oklch(52% 0.016 260); --accent: oklch(88% 0.20 110); --accent-ink: oklch(16% 0.014 260); --accent-soft: oklch(32% 0.10 110); --pos: oklch(80% 0.18 152); --neg: oklch(72% 0.20 22); --warn: oklch(82% 0.16 80); --shadow-card: 0 1px 0 rgba(0,0,0,.4), 0 18px 32px -20px rgba(0,0,0,.6); --halftone: radial-gradient(circle at 1px 1px, oklch(34% 0.014 260) 1px, transparent 1.4px); } /* ===== Type ===== */ .he-root .display { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; line-height: 0.92; font-stretch: 75%; text-transform: none; } .he-root .display-tight { letter-spacing: -0.035em; line-height: 0.88; } .he-root .eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); } .he-root .mono { font-family: var(--font-mono); } .he-root .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* ===== Buttons ===== */ .he-root .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--r-sm); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; border: 1px solid transparent; transition: transform .12s, background .12s, color .12s, border-color .12s, filter .12s; white-space: nowrap; text-decoration: none; color: var(--ink); } .he-root .btn:active { transform: translateY(1px); } .he-root .btn:disabled { opacity: .5; cursor: not-allowed; } .he-root .btn-primary { background: var(--accent); color: var(--accent-ink); } .he-root .btn-primary:hover { filter: brightness(1.05); } .he-root .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); } .he-root .btn-ghost:hover { background: var(--bg-2); } .he-root .btn-dark { background: var(--ink); color: var(--bg); } .he-root .btn-dark:hover { filter: brightness(1.1); } .he-root .btn-sm { padding: 7px 10px; font-size: 10px; } /* ===== Surfaces ===== */ .he-root .card { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-card); } .he-root .surface { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-md); } /* ===== Tag / badge ===== */ .he-root .tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 8px; border-radius: 4px; background: var(--bg-2); color: var(--ink-2); border: 1px solid var(--line); } .he-root .tag-live { background: var(--accent); color: var(--accent-ink); border-color: transparent; } .he-root .tag-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: he-pulse 1.4s ease-in-out infinite; } @keyframes he-pulse { 50% { opacity: 0.3; } } .he-root .tag-pos { background: color-mix(in oklch, var(--pos), transparent 85%); color: var(--pos); border-color: color-mix(in oklch, var(--pos), transparent 70%); } .he-root .tag-neg { background: color-mix(in oklch, var(--neg), transparent 85%); color: var(--neg); border-color: color-mix(in oklch, var(--neg), transparent 70%); } /* ===== Image placeholder (mood-board style) ===== */ .he-root .photo { position: relative; overflow: hidden; background: repeating-linear-gradient(45deg, transparent 0 12px, rgba(0,0,0,.03) 12px 13px), var(--bg-2); color: var(--ink-3); } .he-stadium .photo { background: repeating-linear-gradient(45deg, transparent 0 12px, rgba(255,255,255,.03) 12px 13px), var(--bg-2); } .he-root .photo .photo-label { position: absolute; bottom: 8px; left: 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); } /* ===== Form ===== */ .he-root .field { display: flex; flex-direction: column; gap: 6px; } .he-root .field-label { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); } .he-root .input, .he-root .select, .he-root .textarea { font-family: var(--font-body); font-size: 14px; color: var(--ink); background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 11px 12px; outline: none; transition: border-color .12s, box-shadow .12s; width: 100%; } .he-root .input:focus, .he-root .select:focus, .he-root .textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent), transparent 80%); } .he-root .input::placeholder, .he-root .textarea::placeholder { color: var(--mute); } .he-root .select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 32px; } /* ===== Logo ===== */ .he-root .logo { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 900; font-size: 20px; letter-spacing: -0.01em; line-height: 1; color: var(--ink); text-decoration: none; font-stretch: 75%; } .he-root .logo .dot { /* kept for legacy pages */ width: 8px; height: 8px; background: var(--accent); border-radius: 2px; align-self: center; } .he-root .logo small { font-family: var(--font-mono); font-weight: 500; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); } /* ===== Nav ===== */ .he-root .nav { display: flex; align-items: center; justify-content: space-between; padding: 16px 28px; background: var(--bg); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 100; } .he-root .nav-links { display: flex; gap: 4px; align-items: center; } .he-root .nav-link { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); padding: 8px 12px; border-radius: 6px; text-decoration: none; cursor: pointer; transition: color .12s, background .12s; } .he-root .nav-link:hover { color: var(--ink); background: var(--bg-2); } .he-root .nav-link.is-active { color: var(--ink); background: var(--bg-2); } .he-root .nav-sep { width: 1px; height: 18px; background: var(--line); margin: 0 6px; } /* ===== Divider ===== */ .he-root .hr { height: 1px; background: var(--line); width: 100%; border: 0; } /* ===== Helpers ===== */ .he-root .pos { color: var(--pos); } .he-root .neg { color: var(--neg); } .he-root .mute { color: var(--mute); } .he-root .ink-2 { color: var(--ink-2); } .he-root .ink-3 { color: var(--ink-3); } .he-root .deltas .up { color: var(--pos); } .he-root .deltas .down { color: var(--neg); }