/* ============================================================ LOAF & LINK — FARBSYSTEM v1.0 Einzige Quelle der Wahrheit für Farbe. Kein Hex-Wert wird irgendwo sonst hart kodiert. 90 % Fundament → fix, wird nie pro Kunde geändert 10 % Signal → ein austauschbarer Slot (Preset) 0 % Rest → die restliche Farbe liefern die Produktfotos ============================================================ */ :root { /* ── Fundament — fix ────────────────────────────────────── */ --ink: #101215; /* Headlines, Body, Nav, Footer-Grund */ --paper: #F1F1EE; /* Seitengrund */ --paper-2: #E7E8E4; /* Alternierende Sektionen, Cards */ --muted: #5E646A; /* Sekundärtext, Captions, Meta */ --steel: #9DA2A6; /* Icons, deaktivierte Zustände — KEIN Textton */ --rule: #DCDDD9; /* Haarlinien, Border, Divider */ /* ── Elevation ────────────────────────────────────────────── Neutral, nie in Signal- oder Markenfarbe (Spec §8). Schatten sind Hoehe, nicht Farbe. ────────────────────────────────────────────────────────── */ --shadow-1: rgba(16, 18, 21, 0.06); /* Haarschatten, Ruhe */ --shadow-2: rgba(16, 18, 21, 0.12); /* Karte, Hover */ --shadow-3: rgba(16, 18, 21, 0.20); /* Overlay, Modal */ --shadow-4: rgba(16, 18, 21, 0.38); /* abgehobene Karte */ /* Lesbarkeit von Text auf Foto und Video. Neutrales Schwarz ist hier korrekt — es ist kein Dekor, sondern Kontrast. */ --shadow-text: rgba(0, 0, 0, 0.55); /* ── Cursor ───────────────────────────────────────────────── Der eigene Mauszeiger liegt per mix-blend-mode: difference ueber der Seite und invertiert, was unter ihm liegt. Dafuer braucht es reines Weiss — das ist keine Palettenfarbe, sondern die Invertierung selbst. Nur so bleibt der Zeiger auf --paper, auf der dunklen Zone UND auf Fotos sichtbar. ────────────────────────────────────────────────────────── */ --cursor-ink: #FFFFFF; /* ── Signal — Preset A: enamel (Default) ────────────────── */ --signal: #1B3FD1; /* CTA-Fill, Links, aktive Zustände */ --signal-deep: #12277F; /* Hover, Pressed, Focus-Ring */ --signal-tint: #E6EAFA; /* Badges, Highlight-Flächen */ --signal-on: #FFFFFF; /* Text auf --signal */ } /* ── Preset B — ──────────────── */ [data-signal="oxblood"] { --signal: #7A1420; --signal-deep: #4E0C15; --signal-tint: #F3E4E5; --signal-on: #FFFFFF; } /* ── Preset C — ─────────────────── */ [data-signal="mono"] { --signal: #101215; --signal-deep: #000000; --signal-tint: #E7E8E4; --signal-on: #F1F1EE; } /* ── Invertierte Zone ───────────────────────────────────────── Dunkler Grund auf heller Seite: Hero, Nav, Footer. Spec §7 schreibt den Footer als "--ink Grund, --paper Text" fest — das ist genau diese Inversion, hier als Scope. Die Rollen kippen, die Namen bleiben: --paper ist der Grund, --ink der Text. Jede Regel im Stylesheet funktioniert unveraendert weiter. --signal wechselt mit: #1B3FD1 haelt auf --ink nur ~2,4:1. Die Werte stammen aus dem geprueften Dark-Set unten. ──────────────────────────────────────────────────────────── */ .zone-invert, .ll-hero, .showcase-bridge, .ll-nav, .ll-footer { --ink: #E9EAE7; --paper: #0B0D10; --paper-2: #14171B; --muted: #9BA1A7; --steel: #5A6066; --rule: #23272C; --signal: #5B7DFF; /* 5,39:1 auf --paper */ --signal-deep: #8AA3FF; --signal-tint: #16203C; --signal-on: #0B0D10; } /* Das Signal der dunklen Zone muss dem Preset folgen — sonst bliebe die Nav blau, waehrend die Seite auf oxblood steht, und §10 ("ein Preset-Token tauschen") waere gebrochen. Die Spec gibt Dark-Werte nur fuer enamel vor. Die beiden folgenden sind daraus abgeleitet und gegen --paper (#0B0D10) gerechnet — Ratios im Kommentar. */ [data-signal="oxblood"] :is(.zone-invert, .ll-hero, .showcase-bridge, .ll-nav, .ll-footer), [data-signal="oxblood"]:is(.zone-invert) { --signal: #CF5F6A; /* 5,09:1 auf --paper */ --signal-deep: #D97781; /* 6,40:1 */ --signal-tint: #2A1114; --signal-on: #0B0D10; } [data-signal="mono"] :is(.zone-invert, .ll-hero, .showcase-bridge, .ll-nav, .ll-footer), [data-signal="mono"]:is(.zone-invert) { --signal: #E9EAE7; /* 16,11:1 auf --paper */ --signal-deep: #FFFFFF; --signal-tint: #14171B; --signal-on: #0B0D10; } /* ── Dark ───────────────────────────────────────────────────── Spec §5 konditioniert diesen Block auf "nur falls das Template einen Dark-Modus ausliefert". Loaf & Link liefert keinen: die Seite ist hell mit dunklem Hero-Rahmen. Aktiv würde jeder Besucher mit OS-Dark-Mode ungefragt umgeschaltet. Werte sind geprüft und einsatzbereit. Zum Aktivieren die Kommentarklammern entfernen. @media (prefers-color-scheme: dark) { :root { --ink: #E9EAE7; --paper: #0B0D10; --paper-2: #14171B; --muted: #9BA1A7; --steel: #5A6066; --rule: #23272C; --signal: #5B7DFF; --signal-deep: #8AA3FF; --signal-tint: #16203C; --signal-on: #0B0D10; } } ──────────────────────────────────────────────────────────── */