/* ========================================================================== BULLEZ METER — DESIGN TOKENS Einzige Quelle der Wahrheit fuer Farben, Typo und die wiederkehrenden Masse. Alle Werte stammen 1:1 aus der Prototyp-Referenz (Abschnitt 9). Niemals Hex-Werte direkt in overlay.css schreiben — immer ueber diese Tokens, sonst driftet das Overlay beim naechsten Design-Update auseinander. ========================================================================== */ :root { /* ---------- BUEHNE ------------------------------------------------------- Das Design ist auf 1190px Breite gezeichnet und wird als Ganzes skaliert, statt ~70 px-Werte einzeln hochzurechnen. Ausschlaggebend ist die LED-Segmentmaske des Meters: ein px-Raster ueber einer prozentualen Fuellbreite — beim Umrechnen kippt die Segmentzahl sichtbar. --scale hier (oder per ) ueberschreiben, dann laeuft dieselbe Szene ohne Layout-Aenderung auf 1440p oder 900p. */ --stage-w: 1190px; --stage-h: 669.375px; /* 1190 x 9/16 */ --scale: 1.61345; /* 1920 / 1190 */ /* ---------- FARBEN: GOLD ------------------------------------------------ Gold ist die Grundfarbe des Systems: Rahmen, Ranking, Brand-Block. */ --gold: #F5B71A; --gold-lt: #FFD264; --gold-dk: #C98A00; /* dunkles Ende der Fuell-Verlaeufe */ --gold-deep: #D89A05; /* dunkles Ende des Brand-Verlaufs */ --on-gold: #1A1002; /* Schrift/Kontur auf Gold */ /* ---------- FARBEN: ORANGE ---------------------------------------------- Orange ist ausschliesslich der Ausnahmezustand: BULLEZ MODE, Streak, Fuehrungswechsel. Wird es zur Deko, verliert der Sting seine Wirkung. */ --orange: #FF6A1F; --orange-lt: #FF8A1F; --on-orange: #1A0B02; /* ---------- FARBEN: FLAECHEN -------------------------------------------- Durchweg halbtransparent, damit das Gameplay unter dem Overlay lebt. Die Abstufungen .86/.9/.92/.94 sind bewusst verschieden: je wichtiger die Flaeche, desto deckender. */ --panel: rgba(6, 4, 11, .9); /* Ranking-Panel */ --panel-solid: rgba(6, 4, 11, .92); /* Spotlight */ --chip-bg: rgba(6, 4, 11, .86); /* Chips, am durchlaessigsten */ --bar-bg: rgba(5, 4, 10, .9); /* Scoreboard-Leiste */ --sting-bg: rgba(8, 6, 14, .94); /* Sting-Karte, am deckendsten */ --badge-bg: #05040A; /* Phasen-Badge, voll deckend */ /* ---------- FARBEN: TRACKS UND LINIEN ----------------------------------- */ --track: #0D0914; /* Meter-Grund, zugleich Farbe der Segmentmaske */ --track-rank: #120D1B; /* Ranking-Balken-Grund */ --line: #241C33; /* Standard-Rahmen */ --line-panel: #2B2138; /* Rahmen des Ranking-Panels, minimal heller */ /* ---------- FARBEN: SCHRIFT --------------------------------------------- */ --ink: #F6F1E7; /* warmes Off-White, kein reines Weiss */ --ink-dim: #8E86A0; --ink-faint: #6F6883; /* ---------- FARBEN: BALL ------------------------------------------------ */ --ball-white: #FBF9F4; /* ---------- FARBEN: FLAGGEN-KANTEN -------------------------------------- Flaggen brauchen eine helle Kante, sonst verschwimmt Schwarz-Rot-Gold auf dem dunklen Panel. */ --flag-line: rgba(255, 255, 255, .35); --flag-line-lg: rgba(255, 255, 255, .4); --chip-line: rgba(245, 183, 26, .5); /* ---------- PHASEN ------------------------------------------------------ Vier Stufen, vom lauwarmen Anpfiff bis zum Orange des BULLEZ MODE. --phase-color wird vom JS auf .bz-stage gesetzt und faerbt Badge, Punkt und Prozentzahl gemeinsam — ein Hebel statt fuenf inline-styles. */ --phase-anpfiff: #C9814F; /* 0 – 39 % */ --phase-angriff: #CFD6DE; /* 40 – 69 % */ --phase-matchball: #F5B71A; /* 70 – 99 % */ --phase-bullezmode: #FF6A1F; /* 100 % */ /* ---------- VERLAEUFE --------------------------------------------------- */ --fill-meter: linear-gradient(90deg, #C98A00, #F5B71A); --fill-meter-peak: linear-gradient(90deg, #FF8A1F, #FF6A1F); /* ab 100 % */ --fill-rank: linear-gradient(90deg, #C98A00, #F5B71A); --brand-bg: linear-gradient(100deg, #F5B71A, #D89A05); --shine: linear-gradient(100deg, transparent 0%, rgba(255, 240, 200, .22) 50%, transparent 100%); /* ---------- TYPOGRAFIE -------------------------------------------------- Drei Familien, lokal gebuendelt (fonts/fonts.css). Anton traegt alle Zahlen und Namen, Barlow Condensed alle gesperrten Versal-Label, Barlow nur die eine Fliesstext-Zeile im Spotlight. */ --font-display: Anton, sans-serif; /* 400, einziger Schnitt */ --font-cond: 'Barlow Condensed', sans-serif; /* 600 + 700 */ --font-body: Barlow, system-ui, sans-serif; /* 500 + 700 */ /* ---------- MASSE ------------------------------------------------------- Nur die Werte, bei denen px und % zusammenspielen oder die an mehreren Stellen gleich sein muessen. Alles Uebrige steht direkt am Bauteil. */ --side-w: 246px; /* linke Spalte */ --rank-rows-h: 132px; /* 5 Zeilen a 20px + 4 x 8px Abstand — fest, damit das Panel bei weniger als 5 Nationen nicht springt */ --rank-row-h: 20px; --pct-min-w: 78px; /* haelt die Leiste bei 9 % / 99 % ruhig */ --sting-art-w: 250px; /* Border-Radius ist im ganzen System 0. Einzige Ausnahme sind echte Kreise (Phasen-Punkt, im Ball). Deshalb gibt es hier bewusst kein Radius-Token — ein solches lädt nur dazu ein, Ecken zu runden. */ /* ---------- BEWEGUNG ---------------------------------------------------- Zweckgebunden: Meter und Ranking-Balken fahren, Farben blenden. Kein Dauer-Wabern. */ --dur-meter: .35s; --dur-color: .3s; --ease-meter: cubic-bezier(.3, 1, .4, 1); }