/* ============================================================ VORA – DESIGN-TOKENS Richtung „Flutlicht“: Abendspiel unter Flutlicht, Oberfläche wie eine Taktik-Analyse im Fernsehen. Nachtgrün, hartes Weiss, feine Linien, ein einziges Signal (Limette). Begründung: docs/DESIGN.md. Regeln (docs/ARCHITECTURE.md): - Nur Custom Properties, keine Selektoren ausser :root. - Schicht 1 (--vr-raw-*) wird NUR in Schicht 2 verwendet. - Komponenten, Seiten und Spiele verwenden nur Schicht 2 ff. - color-scheme steht in vora-ui.css (nur mit .vora-page), damit alte Seiten keine dunklen Scrollbalken/Formulare bekommen. ============================================================ */ :root { /* -------------------------------------------------------- 1. ROHWERTE – die Palette -------------------------------------------------------- */ /* Nacht: der Rasen im Dunkeln, ausserhalb des Lichtkegels */ --vr-raw-night: #06110c; /* Seitengrund */ --vr-raw-night-2: #0a1812; /* Tafel, Feld, Modal */ --vr-raw-night-3: #102219; /* Hover, Einschub */ /* Kreide und Flutlicht */ --vr-raw-flood: #ffffff; /* Titel, Zahlen, Fokus: das harte Licht */ --vr-raw-chalk: #eef5f0; /* Text, 17:1 */ --vr-raw-haze: #93a89b; /* Nebentext, 7.5:1 */ --vr-raw-post: #5f7368; /* Feldrahmen, 3.7:1 (UI-Grenze) */ /* Linien der Analyse-Grafik (auf Nacht, rein optisch) */ --vr-raw-line: rgb(222 245 230 / 0.13); --vr-raw-line-strong: rgb(222 245 230 / 0.32); /* Das eine Signal: Limette wie Markierungen in der TV-Analyse */ --vr-raw-lime: #c5f24b; /* 14:1 auf Nacht */ --vr-raw-lime-hover: #d6ff66; --vr-raw-lime-ink: #0b1405; /* Text auf Limette, 14:1 */ --vr-raw-lime-tint: rgb(197 242 75 / 0.12); /* Zustände */ --vr-raw-red: #ff6b61; /* falsch, 7:1 auf Nacht */ --vr-raw-red-hover: #ff867e; --vr-raw-red-tint: rgb(255 95 87 / 0.12); --vr-raw-amber: #ffc23d; /* höher/tiefer, knapp, 12:1 */ --vr-raw-amber-tint: rgb(255 194 61 / 0.12); /* -------------------------------------------------------- 2. SEMANTISCHE FARBEN – nur diese in Komponenten verwenden -------------------------------------------------------- */ --vr-color-bg: var(--vr-raw-night); --vr-color-surface: var(--vr-raw-night-2); --vr-color-surface-2: var(--vr-raw-night-3); --vr-color-inverse: var(--vr-raw-chalk); --vr-color-inverse-text: var(--vr-raw-night); --vr-color-line: var(--vr-raw-line); --vr-color-line-strong: var(--vr-raw-line-strong); --vr-color-field-border: var(--vr-raw-post); --vr-color-text: var(--vr-raw-chalk); --vr-color-text-strong: var(--vr-raw-flood); --vr-color-text-muted: var(--vr-raw-haze); --vr-color-accent: var(--vr-raw-lime); --vr-color-accent-hover: var(--vr-raw-lime-hover); --vr-color-accent-contrast: var(--vr-raw-lime-ink); --vr-color-accent-bg: var(--vr-raw-lime-tint); --vr-color-focus: var(--vr-raw-flood); --vr-color-overlay: rgb(3 8 5 / 0.8); --vr-color-correct: var(--vr-raw-lime); --vr-color-correct-bg: var(--vr-raw-lime-tint); --vr-color-wrong: var(--vr-raw-red); --vr-color-wrong-text: var(--vr-raw-red); --vr-color-wrong-bg: var(--vr-raw-red-tint); --vr-color-near: var(--vr-raw-amber); --vr-color-near-bg: var(--vr-raw-amber-tint); --vr-color-hint: var(--vr-raw-haze); --vr-color-hint-bg: var(--vr-raw-night-3); --vr-color-warning: var(--vr-raw-amber); --vr-color-warning-bg: var(--vr-raw-amber-tint); --vr-color-danger: var(--vr-raw-red); --vr-color-danger-text: var(--vr-raw-red); --vr-color-danger-hover: var(--vr-raw-red-hover); --vr-color-danger-bg: var(--vr-raw-red-tint); --vr-color-success: var(--vr-raw-lime); --vr-color-success-bg: var(--vr-raw-lime-tint); /* -------------------------------------------------------- 3. TYPOGRAFIE Barlow Semi Condensed: Titel, Labels, Navigation, Buttons. Barlow: Text. JetBrains Mono: alle Zahlen und Messwerte. Google-Fonts-Block: docs/DESIGN.md §5. -------------------------------------------------------- */ --vr-font-display: "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif; --vr-font-ui: "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif; --vr-font-text: "Barlow", "Segoe UI", Arial, sans-serif; --vr-font-num: "JetBrains Mono", ui-monospace, Consolas, monospace; --vr-font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace; /* Skala: fluide, Verhältnis wächst nach oben */ --vr-step--2: 0.75rem; /* 12 */ --vr-step--1: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem); /* 13–14 */ --vr-step-0: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); /* 16–17 */ --vr-step-1: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); /* 18–21 */ --vr-step-2: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem); /* 22–30 */ --vr-step-3: clamp(1.75rem, 1.35rem + 1.8vw, 2.75rem); /* 28–44 */ --vr-step-4: clamp(2.25rem, 1.5rem + 3vw, 3.75rem); /* 36–60 */ --vr-step-5: clamp(2.5rem, 1.3rem + 4.6vw, 4.5rem); /* 40–72 */ --vr-weight-text: 400; --vr-weight-medium: 500; --vr-weight-strong: 600; --vr-weight-bold: 700; --vr-track-tight: -0.015em; /* grosse Titel */ --vr-track-label: 0.14em; /* Versalien-Labels */ --vr-track-button: 0.1em; --vr-track-mark: 0.32em; /* Wortmarke VORA */ --vr-leading-headline: 0.98; --vr-leading-tight: 1.12; --vr-leading-ui: 1.3; --vr-leading-text: 1.55; /* -------------------------------------------------------- 4. ABSTÄNDE – Kontrast zwischen den Stufen 1–3: innerhalb einer Komponente · 4–5: zwischen Elementen 6–7: zwischen Blöcken · 8–9: Abschnittswechsel -------------------------------------------------------- */ --vr-space-1: 0.25rem; /* 4 */ --vr-space-2: 0.5rem; /* 8 */ --vr-space-3: 0.75rem; /* 12 */ --vr-space-4: 1rem; /* 16 */ --vr-space-5: 1.5rem; /* 24 */ --vr-space-6: 2.5rem; /* 40 */ --vr-space-7: 4rem; /* 64 */ --vr-space-8: 6rem; /* 96 */ --vr-space-9: 8rem; /* 128 */ --vr-gutter: clamp(1rem, 0.5rem + 2.4vw, 2.75rem); /* Raster der Analyse-Grafik (Seiteneinstieg der Hub-Seiten) */ --vr-grid-cell: 3rem; /* -------------------------------------------------------- 5. RADIUS NACH ROLLE Flächen gerade wie Linien auf dem Bildschirm, Bedienelemente 2 px, rund nur Punkte (Live-/Status-Punkt). -------------------------------------------------------- */ --vr-radius-block: 0; --vr-radius-control: 2px; --vr-radius-chip: 2px; --vr-radius-round: 999px; --vr-rule-hair: 1px; --vr-rule-field: 1px; --vr-rule-mark: 2px; /* Zustandsstreifen, Eckmarken */ --vr-rule-heavy: 3px; /* Aufmacher-Kante */ --vr-tick: 14px; /* Länge der Eckmarken */ --vr-shadow-float: 0 12px 28px rgb(0 0 0 / 0.5); --vr-shadow-modal: 0 28px 60px rgb(0 0 0 / 0.6); /* -------------------------------------------------------- 6. MOTION -------------------------------------------------------- */ --vr-dur-fast: 120ms; --vr-dur-base: 200ms; --vr-dur-slow: 320ms; --vr-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); --vr-ease-in-out: cubic-bezier(0.6, 0, 0.3, 1); /* -------------------------------------------------------- 7. EBENEN (Werte aus dem bestehenden Code übernommen) -------------------------------------------------------- */ --vr-z-header: 1000; --vr-z-report-button: 9998; --vr-z-badge: 9999; --vr-z-report-modal: 9999; --vr-z-welcome: 10000; --vr-z-auth-overlay: 99999; /* -------------------------------------------------------- 8. LAYOUT -------------------------------------------------------- */ --vr-masthead-h: 4rem; --vr-dateline-h: 2rem; --vr-header-h: calc(var(--vr-masthead-h) + var(--vr-dateline-h) + var(--vr-rule-hair) * 2); --vr-content-w: 72rem; --vr-measure: 36rem; /* -------------------------------------------------------- 9. LEGACY-ALIASE (temporär, Löschung in M5) Style.css, VoraGames.css und die Inline-Blöcke von Game8/10 definieren diese Namen selbst neu und gewinnen, solange sie geladen sind. -------------------------------------------------------- */ --vora-bg: var(--vr-color-bg); --vora-surface: var(--vr-color-surface); --vora-surface-strong: var(--vr-color-surface-2); --vora-border: var(--vr-color-line); --vora-text: var(--vr-color-text); --vora-muted: var(--vr-color-text-muted); --vora-accent: var(--vr-color-accent); --vora-accent-2: var(--vr-color-accent); --vora-accent-soft: var(--vr-color-accent-bg); --vora-accent-dark: var(--vr-color-accent-contrast); --vora-danger: var(--vr-color-danger); } @media (prefers-reduced-motion: reduce) { :root { --vr-dur-fast: 0.01ms; --vr-dur-base: 0.01ms; --vr-dur-slow: 0.01ms; } }