/* ========================================================================== Vista City — Design Tokens --------------------------------------------------------------------------- Aufbau in drei Schichten: 1. Marke — aus dem Logo abgeleitet, in beiden Themes identisch 2. Semantik — Flächen und Text, je Theme umdefiniert 3. Struktur — Typografie, Raster, Bewegung, themeunabhängig Außerhalb dieser Datei wird keine Farbe hart kodiert. ========================================================================== */ :root { color-scheme: dark light; /* ===================================================================== 1. MARKE — Fuchsia/Violett direkt aus dem VC-Logo abgenommen ===================================================================== */ --brand-fuchsia: oklch(62% 0.26 322); --brand-fuchsia-hi: oklch(76% 0.24 330); --brand-violet: oklch(56% 0.27 300); --brand-violet-deep: oklch(44% 0.25 296); --brand-plum: oklch(34% 0.19 300); /* Statusfarben — ausschließlich für Zustände, nie dekorativ. */ --state-live: oklch(80% 0.19 150); --state-warn: oklch(82% 0.16 78); --state-info: oklch(78% 0.14 230); --state-crit: oklch(65% 0.24 20); /* Kategorieakzent. Jede Seite setzt data-page am , wodurch --accent und die davon abgeleiteten Verläufe im selben Kontext aufgelöst werden. Säße data-page am , wären die Verläufe bereits mit den Standardwerten berechnet und jede Seite bliebe fuchsia. */ --accent: var(--brand-fuchsia); --accent-2: var(--brand-violet); /* Bewusst KEIN Farbverlauf auf Flächen und Schrift: durchgehende Violett-Pink-Verläufe sind das Erkennungszeichen generischer Vorlagen. Der Akzent wird als Vollton gesetzt, Tiefe kommt aus Kontrast, Kante und den Höhenlinien in pattern.css. */ /* ===================================================================== 2. SEMANTIK — Standard: Dark ===================================================================== */ /* Neutrale, fast farblose Graustufen. Der Akzent wirkt nur dort, wo er bewusst gesetzt wird — nicht flächendeckend als Farbschleier. */ --bg: oklch(12% 0.008 300); /* Farbe, in der die Hero-Bühne endet und der Abschnitt darunter beginnt. Beide Seiten MUESSEN denselben Wert nutzen, sonst entsteht an der Naht eine sichtbare Kante. */ --fade: oklch(6% 0.004 300); --bg-deep: oklch(8% 0.006 300); --surface: oklch(16% 0.010 300); --surface-hi: oklch(21% 0.012 300); --surface-glass: oklch(10% 0.008 300 / 0.82); --line: oklch(100% 0 0 / 0.1); --line-hi: oklch(100% 0 0 / 0.2); --ink: oklch(98% 0.002 300); --ink-soft: oklch(76% 0.006 300); --ink-mute: oklch(56% 0.008 300); --ink-on-accent: oklch(100% 0 0); --ghost-stroke: oklch(100% 0 0 / 0.16); --shadow-lift: 0 0.75rem 2rem oklch(0% 0 0 / 0.45); /* Farbschleier über Fotos: stark reduziert. Vorher lag ein violetter Filter über jedem Bild — Fotos sollen wie Fotos aussehen. */ --media-veil: 0.12; --media-dim: 1; /* ===================================================================== 3. STRUKTUR ===================================================================== */ --font-display: 'Archivo Black', 'Arial Black', 'Helvetica Neue', sans-serif; --font-ui: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace; --text-xs: 0.6875rem; --text-sm: 0.8125rem; --text-base: clamp(0.95rem, 0.9rem + 0.25vw, 1.0625rem); --text-lg: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem); --text-h3: clamp(1.25rem, 1rem + 1.1vw, 2rem); --text-h2: clamp(2rem, 1.2rem + 3.4vw, 4.25rem); --text-hero: clamp(3.4rem, 1rem + 10.5vw, 11.5rem); --track-wide: 0.34em; --track-tight: -0.035em; --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 4.5rem); --space-section: clamp(5rem, 3rem + 7vw, 11rem); --maxw: 108rem; --maxw-text: 46rem; /* Kleine, gleichmäßige Radien. Weiche 24px-Rundungen überall lassen jede Oberfläche nach derselben Vorlage aussehen. */ --r-sm: 0.25rem; --r-btn: 0.5rem; /* Bedienelemente dürfen runder sein als Flächen */ --r-md: 0.625rem; /* Karten: sichtbar gerundet, ohne weich zu wirken */ --r-lg: 0.875rem; --r-pill: 100rem; --dur-fast: 180ms; --dur-mid: 420ms; --dur-slow: 900ms; --dur-slide: 1150ms; --stagger: 62ms; --kenburns: 11s; --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1); --ease-snap: cubic-bezier(0.34, 1.4, 0.44, 1); --slices: 7; --autoplay: 7800ms; } /* ========================================================================== LIGHT — warmes Off-White mit Violettstich, nicht steril weiß. Greift bei Systemeinstellung hell (sofern nicht explizit dark gewählt) und bei manuell gesetztem data-theme="light". ========================================================================== */ @media (prefers-color-scheme: light) { :root:not([data-theme='dark']) { color-scheme: light; --bg: oklch(97% 0.002 300); --bg-deep: oklch(93.5% 0.004 300); --surface: oklch(100% 0 0); --surface-hi: oklch(98% 0.003 300); --surface-glass: oklch(98% 0.002 300 / 0.86); --line: oklch(20% 0.01 300 / 0.14); --line-hi: oklch(20% 0.01 300 / 0.3); --ink: oklch(17% 0.012 300); --ink-soft: oklch(38% 0.010 300); --ink-mute: oklch(54% 0.010 300); --ghost-stroke: oklch(20% 0.02 300 / 0.14); --shadow-lift: 0 0.5rem 1.5rem oklch(25% 0.02 300 / 0.12); --media-veil: 0.08; --media-dim: 0.97; } } :root[data-theme='light'] { color-scheme: light; --bg: oklch(97% 0.002 300); --bg-deep: oklch(93.5% 0.004 300); --surface: oklch(100% 0 0); --surface-hi: oklch(98% 0.003 300); --surface-glass: oklch(98% 0.002 300 / 0.86); --line: oklch(20% 0.01 300 / 0.14); --line-hi: oklch(20% 0.01 300 / 0.3); --ink: oklch(17% 0.012 300); --ink-soft: oklch(38% 0.010 300); --ink-mute: oklch(54% 0.010 300); --ghost-stroke: oklch(20% 0.02 300 / 0.14); --shadow-lift: 0 0.5rem 1.5rem oklch(25% 0.02 300 / 0.12); --media-veil: 0.08; --media-dim: 0.97; } /* Explizit dunkel gewählt, obwohl das System hell steht. */ :root[data-theme='dark'] { color-scheme: dark; } /* ========================================================================== KATEGORIEAKZENTE — gleiche Helligkeit und Sättigung, nur der Farbton wandert. Dadurch wirkt jede Seite eigenständig, aber aus einer Familie. ========================================================================== */ [data-page='home'] { --accent: var(--brand-fuchsia); --accent-2: var(--brand-violet); } [data-page='features'] { --accent: oklch(62% 0.27 310); --accent-2: oklch(52% 0.25 288); } [data-page='wiki'] { --accent: oklch(64% 0.24 285); --accent-2: oklch(54% 0.24 268); } [data-page='gallery'] { --accent: oklch(68% 0.29 342); --accent-2: oklch(56% 0.27 312); } [data-page='rules'] { --accent: oklch(74% 0.17 72); --accent-2: oklch(58% 0.20 40); } [data-page='roadmap'] { --accent: oklch(72% 0.16 215); --accent-2: oklch(58% 0.22 268); } [data-page='changelog'] { --accent: oklch(76% 0.19 152); --accent-2: oklch(60% 0.20 190); } /* Weniger Bewegung: Dauern kollabieren, Zustandswechsel bleiben sichtbar. */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur-mid: 1ms; --dur-slow: 1ms; --dur-slide: 1ms; --stagger: 0ms; --kenburns: 0s; } }