/* Hallmark · macrostructure: custom-minimal-gate (kein Katalog-Shape passt auf ein reines Auth-Gate) * theme: elftipp-Markenkit, Markenslot auf Lux-Blau getauscht · paper: #0B0B0D neutral · Marke: #4B93FF * display: Archivo · body: Inter (beide markenvorgegeben, selbst gehostet) · axes: dark / geometric-sans / cool * studied: no · context: explicit · v2 (Inhaber-Entscheidung: elftipp-Kit komplett übernehmen) */ /* ============================================================ Lux Ligensystem Prognosetool — Design-Tokens (SSOT) ------------------------------------------------------------ Eine Stelle ändern ⇒ ganze App reskinnt. Komponenten und Views lesen AUSSCHLIESSLICH diese Variablen, nie rohe Farbwerte. HERKUNFT (Inhaber-Entscheidung, diese Sitzung) Das Farb- und Typo-System ist das elftipp-Markenkit (elftipp2/web/css/tokens.css) — komplett übernommen, weil es nicht nur Werte festlegt, sondern WOFÜR jede Farbe steht, samt drei harten Regeln für Grün. Eine Sache ist getauscht: elftipp Lux ─────── ─────────────────────────────────────────────── GOLD → BLAU Die Marke ist hier Lux-Blau, nicht das Flutlicht-Gold. Rolle identisch: Marke, primäre Knöpfe, Rang 1, aktiver Reiter. LILA → LILA Unverändert. Bei elftipp "Manager und Spielfeld" — hier Managertabelle und das Managerduell, das dasselbe Spielfeld benutzen soll (Inhaber-Vorgabe). Die Zuordnung passt eins zu eins. GRÜN/ROT/ORANGE Unverändert. Funktionsfarben sind Bedeutung, nicht Marke. ============================================================ FARBSEMANTIK — verbindlich, kein Screen darf sie brechen ------------------------------------------------------------ Blau Marke, Prognose, Knöpfe, aktiver Reiter, Rang 1 Lila Manager, Spielfeld, Managerduell, Managertabelle Grün AUSSCHLIESSLICH verdiente Punkte Rot Fehler und Live-Indikator Orange Warnungen (damit Blau eindeutig Marke bleibt) Die drei Grün-Regeln (aus elftipp, gelten hier genauso): 1. Grün nur für schon VERDIENTE Punkte. Mögliche Punkte sind grau — eine noch offene Prognose ist nicht grün. 2. Null ist nie grün. 3. Höchstens eine grüne Zahl pro Tabellenzeile. Blau und Lila färben NIE Zahlen. Sie sagen, WO man ist, nicht WAS man hat. Noch offen (bewusst, nicht vergessen): Hot/Superhot im Challenge-Reiter bekommt KEINE sechste Farbe, sondern die Orange-Familie in zwei Stufen (Hot = Kontur, Superhot = Fläche + Schein). Wird beim Bau des Reiters festgeschrieben. BEWUSSTE ABWEICHUNG von elftipp: dort ist die Grundfläche strikt neutral ("KEIN Blaustich"), weil ein Blaustich gegen Gold gearbeitet hätte. Hier IST Blau die Marke — trotzdem bleibt die Grundfläche neutral schwarz. Das Blau kommt ausschliesslich aus den Lichtflächen (siehe --licht-* unten), nicht aus dem Papier. Schwarzer Platz, blaues Flutlicht darüber — das trägt die Atmosphäre, ohne die Fläche einzufärben, auf der später 18 bunte Wappen liegen. ============================================================ */ /* ── Schriften: selbst gehostet (kein Google-CDN) ── Variable Fonts, 1:1 aus dem elftipp-Markenkit: Archivo (Display/Headlines/Zahlen), Inter (Fließtext/UI). */ @font-face { font-family: "Archivo"; src: url("../fonts/archivo-var.woff2") format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../fonts/inter-var.woff2") format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } :root { color-scheme: dark; /* ---------- Grundflächen (neutral, siehe Abweichungs-Hinweis oben) ---------- */ --bg-0: #0B0B0D; /* Seite/Hintergrund */ --bg-1: #141417; /* Karten, Tabellen-Container */ --bg-2: #1C1C21; /* Erhöht: Modals, Dropdowns, Sticky-Nav */ --line: #2A2A31; /* Hairlines, Tabellen-Trenner */ --line-strong: rgba(255,255,255,.16); /* Betonte Trenner, Eingaberahmen */ /* ---------- Text ---------- */ --text-1: #FFFFFF; /* Primär */ --text-2: #C4C4CC; /* Sekundär */ --text-3: #8A8A94; /* Gedämpft: Metadaten, Platzhalter */ /* ---------- Marke: Lux-Blau ---------- Ersetzt elftipps Gold in derselben Rolle. Hell genug, um wie eine LEUCHTENDE Fläche zu wirken (Flutlicht-Gedanke) — deshalb steht darauf DUNKLER Text, nicht weißer. Nachgerechnet (WCAG-Kontrastformel): --blau-ink auf --blau = 6,0:1, weißer Text auf --blau nur 3,0:1 und damit für Fließtextgrößen zu schwach. Gleiche Logik wie elftipps --gold-ink auf --gold. */ --blau: #4B93FF; /* Marke, Knöpfe, aktiver Reiter, Rang 1 */ --blau-strong: #2E7BF0; /* Hover/Aktiv */ --blau-ink: #06142E; /* Text AUF Blau-Flächen (nie Schwarz/Weiß) */ --blau-tint: rgba(75,147,255,.14); /* Flächen-Tint: Rang-1-Zeile, aktive Karte */ /* ---------- Manager: Lila ---------- 1:1 aus elftipp. Markiert den Manager-Bereich und das Spielfeld — nie eine Zahl. Für Managertabelle und das Managerduell (Phase 2), das elftipps .pitch-Spielfeld wiederverwenden soll. */ --lila: #A87CF7; --lila-strong: #9463F0; --lila-ink: #16062E; --lila-tint: rgba(168,124,247,.14); /* ---------- Funktionsfarben (konkurrieren nie mit der Marke) ---------- */ --live: #F0736A; /* Live-Indikator, Fehler */ --up: #3ED598; /* VERDIENTE Punkte — siehe die drei Regeln oben */ --down: #F0736A; /* Falsch, Absteiger (teilt Rot mit Live) */ --warn: #FF7A45; /* Warnungen; später auch Hot/Superhot-Familie */ /* ---------- Fokus ---------- Eigener, hellerer Ton als --blau: der Ring muss sich auch AUF einer blauen Fläche abheben, sonst verschwindet er genau auf dem wichtigsten Knopf. */ --focus: #8FBAFF; /* ---------- Flutlicht ---------- Die Atmosphäre des Einstiegs-Screens. Bewusst als Token, nicht im Screen hart verdrahtet: dieselben Lichtflächen sollen später sparsam auf anderen Screens auftauchen dürfen (Sieger-Momente, Reveal), und dann aus EINER Quelle. */ --licht-kern: rgba(75,147,255,.30); /* Kern des Lichtkegels */ --licht-hof: rgba(75,147,255,.10); /* Weicher Hof darum */ --licht-fern: rgba(168,124,247,.09); /* Gegenlicht in Lila, Tiefe */ /* ---------- Typografie (elftipp-Markenkit, unverändert) ---------- */ --font-display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --fs-display: clamp(40px, 8vw, 72px); /* Hero · Archivo 700 · lh 1.05 · ls -.02em */ --fs-score-lg: clamp(48px, 9vw, 80px);/* Große Zahl · tabular-nums · lh 1 */ --fs-h1: 32px; /* Archivo 700 · ls -.01em */ --fs-h2: 24px; /* Archivo 700 */ --fs-h3: 18px; /* Archivo 500 */ --fs-body: 16px; /* Inter 400 · lh 1.6 */ --fs-small: 14.5px; /* Inter 400/500 · Tabellen 500 + tabular-nums */ --fs-table-pts: 16px; /* Punkte in Tabelle · Archivo 700 · tabular-nums */ --fs-caption: 12.5px; /* Inter 400 · --text-3 */ --fs-btn: 15px; /* Inter 500 · keine Versalien */ /* ---------- Raster: 8pt ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; /* ---------- Radius ---------- */ --r-ctl: 8px; /* Controls */ --r-card: 12px; /* Karten */ --r-modal: 16px; /* Modals */ --r-pill: 999px; /* Pills/Badges */ /* ---------- Bewegung: sparsam, nur bedeutungsvoll ---------- */ --dur-fast: .18s; --dur-med: .32s; --dur-rank: .55s; /* Tabellen-Rangwechsel = Kernerlebnis */ --dur-licht: 26s; /* Flutlicht-Drift: sehr langsam, kaum bewusst */ --ease: cubic-bezier(.2, .7, .2, 1); --ease-out: cubic-bezier(.2, .7, .2, 1); --ease-in: cubic-bezier(.5, 0, .9, .4); --ease-in-out: cubic-bezier(.5, 0, .2, 1); /* ---------- Schatten ---------- Auch Schatten sind Farbe und gehören deshalb hierher, nicht roh ins Stylesheet. Karten liegen tief über schwarzem Grund; der Knopf-Schein ist blau, damit er zum Flutlicht gehört statt nur ein grauer Schlagschatten zu sein. */ --schatten-karte: 0 24px 60px rgba(0,0,0,.55); --schatten-knopf: 0 6px 22px rgba(75,147,255,.34); /* ---------- Signatur & Ergonomie ---------- */ --edge-marke: 2px solid var(--blau); /* Blaue Kante links, Rang 1 */ --touch-min: 44px; /* Handy in einer Hand, unterwegs */ /* ---------- Tabellenprognose: Vereinsfarben-Badges ---------- ECHT neue Tokens (Begründung, nicht nur Wertänderung): die 18 Vereinsfarben selbst sind KEINE Interface-Tokens (siehe mock.js, dort als eigener, klar benannter Datensatz je Verein geführt) — die zwei Werte hier SIND es, weil sie für JEDES Wappen-Badge gleich bleiben, unabhängig von der jeweiligen Vereinsfarbe: eine feste Schriftfarbe und ein fester Schatten. Kein Bedeutungsträger wie Blau/Lila/Grün/Rot, rein technischer Kontrast-/Tiefenwert für eine Bilddaten-Fläche. */ --crest-ink: #FFFFFF; --schatten-crest: 0 4px 14px rgba(0,0,0,.35); } /* Barrierefreiheit: Bewegung respektieren. Der Flutlicht-Drift wird in app.css unter derselben Abfrage GANZ abgeschaltet — eine Dauer von 0 würde die Animation nicht anhalten, sondern unendlich schnell laufen lassen. */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0s; --dur-med: 0s; --dur-rank: 0s; } } body { background: var(--bg-0); color: var(--text-1); font-family: var(--font-body); }