/* ============================================================ DESIGN TOKENS — einzige Quelle für Farbe, Typo, Raum, Timing. Komponenten verwenden ausschließlich diese Variablen. ============================================================ */ :root { /* ---- Farbe ------------------------------------------------- Prinzip: Farbe in Stufen, immer als harte Fläche, nie als Verlauf oder Dekor. Stufe 0: Papier + Tinte (Grundrauschen) Stufe 1: Flieder-Tint für ganze Sektionsflächen Stufe 2: Kobalt = Leitfarbe (Interaktion, Akzentwort, darf auch Fläche werden) Stufe 3: EIN Signalton (Orange) — nur in Case-Karten und gezielten Momenten; dunkle Ink-Flächen ergänzen */ --paper: #F2EFE9; /* warmes Off-White, kein reines Weiß */ --ink: #141310; /* warmes Fast-Schwarz, kein reines Schwarz */ --ink-soft: #55524B; /* Fließtext auf Papier, AA-konform */ --tint: #E6E0F3; /* Flieder — Sektionsflächen */ --accent: #0131FD; /* Kobalt — Leitfarbe (exakt aus dem Logo) */ --accent-ink: #F2EFE9; /* Text auf Kobaltfläche */ --signal-hot: #FF4D1F; /* Signalton: heißes Orange */ } :root { /* abgeleitete Flächen/Linien — nie direkt neue Hexwerte in Komponenten */ --line: rgba(20, 19, 16, 0.16); --line-strong: rgba(20, 19, 16, 0.55); --paper-raise: #EAE6DD; /* Platzhalterflächen für Bilder */ /* Akzentwort als TEXT — getrennt von --accent, das auch Flächen füllt. Eine Fläche in Kobalt funktioniert auf jedem Grund, ein kobaltfarbenes Wort auf dunklem Grund nicht (2,5:1). Deshalb hat der Akzent als Text einen eigenen Token, den dunkle Welten und dunkle Bänder auf den Signalton umlegen. Ausgenommen ist bewusst der Claim: Er trägt auf jedem Grund das Logo-Kobalt und benutzt weiterhin --accent direkt. */ --accent-text: var(--accent); /* invertierte Sektionen (Ink-Flächen) */ --inv-paper: #141310; --inv-ink: #F2EFE9; --inv-ink-soft: #A5A199; --inv-line: rgba(242, 239, 233, 0.22); /* ---- Typografie ------------------------------------------- Zwei Stimmen: Display = Archivo (breit + schwer) — trägt den Charakter. Fließtext = Hanken Grotesk (humanistische Grotesk) — sachlich wie Archivo, aber wärmer; entspricht dem OK-ROGER-Sheet. Meta/Labels = System-Monospace, keine dritte Schriftdatei. */ --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif; --font-body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace; /* Vierte Stimme, streng rationiert: nur die englischen Claims als handschriftliche Randnotiz (.hand-note). Nie für Fließtext, nie für Überschriften. PRODUKTION: idealerweise durch echtes Handlettering als SVG ersetzen — dann diesen Token auf var(--font-display) zurück- stellen, die Komponente bleibt unverändert nutzbar. */ --font-hand: "Caveat", "Segoe Script", "Bradley Hand", cursive; /* Alias für Altbestand — zeigt auf den Fließtext */ --font-sans: var(--font-body); /* Fluide Skala — bewusst wenige Stufen, harte Sprünge */ --text-xs: 0.75rem; /* Meta, mono */ --text-sm: clamp(0.875rem, 0.8rem + 0.3vw, 1rem); /* Captions */ --text-base: clamp(1rem, 0.95rem + 0.35vw, 1.1875rem); --text-lg: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem); /* Lead */ --text-xl: clamp(1.75rem, 1.3rem + 2vw, 3rem); /* H2/H3 */ --text-2xl: clamp(2.5rem, 1.6rem + 4.4vw, 5.5rem); /* H1/Hero */ /* Typo als Bild: die Wortmarke läuft als Laufband von Kante zu Kante — „OK ROGER OK ROGER …" dicht an dicht, ohne Trennzeichen (Abstand: `gap` an `.bleed-word__track`), nie eine leere Fläche am Rand. Die Größe steuert direkt den Bewegungsweg: main.js bewegt das Band nur so weit, wie neben EINER Kopie Platz bleibt (Weg = Flächenbreite − Wortbreite). Damit ist immer mindestens ein vollständiges „OK ROGER" im Bild. größer → mehr Wucht, kürzerer Weg kleiner → mehr Bewegung, weniger Wucht Gerechnet auf Archivo 780 / 118 % (Wortmarke ≈ 6,37 em breit): 11vw × 6,37 ≈ 70vw Wortbreite, also ~30vw Weg. */ --text-bleed: clamp(2rem, 11vw, 15rem); --text-hand: clamp(1.5rem, 1.05rem + 2.1vw, 2.9rem); /* Randnotiz */ --leading-tight: 0.95; --leading-snug: 1.15; --leading-body: 1.55; --tracking-tight: -0.03em; --tracking-mono: 0.08em; --w-display: 780; /* font-weight Display */ --w-medium: 520; --w-body: 420; /* ---- Raum -------------------------------------------------- Basis 8px, große Sprünge oben — Leerraum ist Werkzeug. */ --sp-1: 0.5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2.5rem; --sp-5: 4rem; --sp-6: clamp(4rem, 3rem + 5vw, 8rem); --sp-7: clamp(6rem, 4rem + 9vw, 13rem); /* Sektionsabstand */ --gutter: clamp(1.25rem, 3.5vw, 3.5rem); --container: 1680px; /* ---- Kanten ------------------------------------------------ Prinzip harte Kante. Radius existiert nur als Pille. */ --radius: 0px; --radius-pill: 999px; /* ---- Bewegung --------------------------------------------- EIN Easing, zwei Dauern. Überall. */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 0.35s; --dur-slow: 0.9s; --stagger: 70ms; } /* ============================================================ FARBWELTEN ("Mood") — die Entscheidung des Besuchers. Der Hero behauptet, Wirkung sei eine Entscheidung. Hier wird sie eine: Die Farbwahl unter der H1 setzt data-mood auf — und weil jede Komponente ausschließlich Tokens benutzt, zieht die komplette Website mit. Ein Mood tauscht NUR Farbwerte, nie Layout, nie Typografie. Markenlogik: Das Kobalt der Bildmarke bleibt in drei von vier Welten unangetastet. Die Marke ist die Konstante, die Wirkung ist die Variable — genau das ist die Aussage. Regel: Sonderregeln pro Mood gehören NICHT hierher. Die wenigen unvermeidbaren stehen gesammelt in components.css unter „FARBWELTEN — Korrekturen". Wächst diese Liste, stimmt etwas mit den Tokens nicht. „flieder" ist der Standard und steht bereits oben in :root — deshalb hat sie hier bewusst keinen eigenen Block. ============================================================ */ :root { /* Das Gesicht jeder Welt — nur für die Farbfelder im Hero. Bewusste Dopplung der vier Leitwerte von unten: Die Felder müssen die ANDEREN Welten zeigen, können deren Tokens also nicht lesen. Ändert sich unten ein Leitwert, hier mitziehen. */ --mood-flieder: #E6E0F3; --mood-ivory: #E4DED2; --mood-kobalt: #0131FD; --mood-ink: #141310; /* Die invertierten Bänder brauchen dieselben Stufen wie die Grundfläche, sonst kann eine dunkle Welt sie nicht umdrehen. */ --inv-paper-raise: #23211D; --inv-line-strong: rgba(242, 239, 233, 0.65); } /* ---- Ivory — warm, ruhig, ohne Flieder --------------------- Die zurückhaltendste Welt: Papier bleibt Papier, nur der Fliederton weicht einem warmen Sand. Für alle, die die Marke ohne Zwischenton sehen wollen. */ :root[data-mood="ivory"] { --paper: #F1EEE8; --tint: #E4DED2; --paper-raise: #E9E4DA; } /* ---- Kobalt — die Marke wird zur Fläche -------------------- Die lauteste Welt. Weil das Kobalt hier der Grund ist, kann es nicht gleichzeitig der Akzent sein — diese Rolle übernimmt der Signalton. Die Sektionsfläche geht eine Stufe tiefer ins Blau, damit der Signalton auf ihr trägt (3,6:1). */ :root[data-mood="kobalt"] { --paper: #0131FD; --ink: #F2EFE9; --ink-soft: #C9D2FE; --tint: #011FA8; --accent: #FF4D1F; --accent-ink: #141310; /* Gemessen: Der Signalton als WORT auf der Kobaltfläche liegt bei 2,2:1 — auch für Displaygrößen zu wenig (nötig sind 3:1). Als FLÄCHE (Buttons, Panels) trägt er unverändert; nur als Text wird er so weit aufgehellt, bis er steht: 3,4:1 auf Kobalt, 5,5:1 auf der tieferen Blaustufe. Einziger Ort, an dem eine Welt einen eigenen Farbwert braucht — die Fläche ist hier das Logo-Kobalt und kann nicht ausweichen. */ --accent-text: #FF9466; --line: rgba(242, 239, 233, 0.28); --line-strong: rgba(242, 239, 233, 0.60); --paper-raise: #011FA8; /* Die dunklen Bänder bleiben dunkel — sie sind der Gegenpol zur Fläche und geben ihr erst den Halt. */ --inv-paper: #141310; --inv-ink: #F2EFE9; --inv-ink-soft: #A5A199; --inv-line: rgba(242, 239, 233, 0.22); --inv-paper-raise: #23211D; --inv-line-strong: rgba(242, 239, 233, 0.65); } /* ---- Ink — dunkel ------------------------------------------ Papier und Tinte tauschen die Plätze. Der Fliederton bleibt als DNA erhalten, nur ins Dunkle gezogen. Der Kniff: Auch die INVERTIERTEN Bänder drehen sich um. Das Claim-Band und der Footer werden hier hell — der Wechsel der Flächen bleibt damit erhalten, statt im Dunkel zu verschwinden. */ :root[data-mood="ink"] { --paper: #141310; --ink: #F2EFE9; --ink-soft: #A5A199; --tint: #1E1B29; --accent-ink: #F2EFE9; /* --accent bleibt das Logo-Kobalt: als FLÄCHE (Buttons, Panels) trägt es auch hier. Nur als Wort auf dunklem Grund nicht. */ --accent-text: var(--signal-hot); --line: rgba(242, 239, 233, 0.20); --line-strong: rgba(242, 239, 233, 0.50); --paper-raise: #23211D; --inv-paper: #F2EFE9; --inv-ink: #141310; --inv-ink-soft: #55524B; --inv-line: rgba(20, 19, 16, 0.16); --inv-paper-raise: #EAE6DD; --inv-line-strong: rgba(20, 19, 16, 0.55); }