/* ============================================================================ RASANIX · DESIGN TOKENS v1.0 ---------------------------------------------------------------------------- Quelle der Wahrheit fuer alle Design-Entscheidungen. Keine Komponente sollte Farben, Radien, Fonts oder Spacings hartkodiert haben — alles via var(--...). Entscheidungen (22.04.2026, Jan): Q1-B Background: #0A0D14 Blau-Stich (statt Pitch-Black) Q2-A Neon-Orb: Orb IST die Marke, kein Logo drin Q3-C Font-Stack: Inter (UI) + Instrument Serif (Editorial) + Space Mono Q4-A Icons: Phosphor Fill (CDN) Q5-A Theme: Dark immer, Auto-Switch nur opt-in Q6-B Editorial: 2-3 Hero-Screens mit Bloomberg-Opinion-Layout Q7-B Fussball-DNA: Match-ID + Rasen-Grid + Stadion-Namen Load-Order: index.html (laedt NACH inline FOUC-Block, gewinnt durch Kaskade) ============================================================================ */ /* ============================================================================ LAYER 1 · PRIMITIVES ---------------------------------------------------------------------------- Roh-Werte. NICHT in Komponenten direkt benutzen — nutze Layer 2 (semantic). ============================================================================ */ :root { /* --- Brand: Rasanix Green (primary, USP "Edge") --------------- */ --rx-green-300: #3ce49c; --rx-green-400: #10d982; /* Brand-Green · Hauptfarbe */ --rx-green-500: #0ec472; --rx-green-600: #0bb067; --rx-green-a08: rgba(16, 217, 130, 0.08); --rx-green-a12: rgba(16, 217, 130, 0.12); --rx-green-a22: rgba(16, 217, 130, 0.22); --rx-green-a35: rgba(16, 217, 130, 0.35); /* --- Brand: Rasanix Indigo (secondary accent) ----------------- */ --rx-indigo-300: #a5b0fb; --rx-indigo-400: #818cf8; /* Accent (Text, Borders, Highlights) */ --rx-indigo-500: #6366f1; --rx-indigo-600: #4f46e5; --rx-indigo-a08: rgba(129, 140, 248, 0.08); --rx-indigo-a12: rgba(129, 140, 248, 0.12); --rx-indigo-a22: rgba(129, 140, 248, 0.22); /* --- Ink: Background Layers (Q1-B · Blau-Stich) --------------- */ --rx-ink-000: #0A0D14; /* App shell · tiefster Layer */ --rx-ink-050: #0F131C; /* Elevation 1 · Card base */ --rx-ink-100: #141926; /* Elevation 2 · Card hover / Surface-2 */ --rx-ink-150: #1A2038; /* Elevation 3 · Modals, Menus */ --rx-ink-200: #222949; /* Elevation 4 · Elevated overlays */ /* --- Text: Ink scale (cool white, nicht pure white) ----------- */ --rx-text-100: #E8ECF5; /* Primary text */ --rx-text-200: #9EA5BF; /* Secondary text */ --rx-text-300: #636A86; /* Tertiary / muted */ --rx-text-400: #3D4259; /* Dim / disabled */ --rx-text-500: #262A3A; /* Barely visible / dividers */ /* --- Border: Indigo-tinted alpha ------------------------------ */ --rx-border-subtle: rgba(129, 140, 248, 0.08); --rx-border-default: rgba(129, 140, 248, 0.16); --rx-border-strong: rgba(129, 140, 248, 0.30); --rx-border-accent: rgba(16, 217, 130, 0.35); /* --- Status colors -------------------------------------------- */ --rx-amber-400: #F59E0B; --rx-amber-a12: rgba(245, 158, 11, 0.12); --rx-red-400: #F43F5E; --rx-red-a12: rgba(244, 63, 94, 0.12); /* --- Rasanix Edge (USP-Farbe · leicht goldener Ton) ----------- */ /* Bewusst abgesetzt von Amber (Warn) — Edge ist positiv, nicht Warnung. */ --rx-edge-400: #F0B64D; --rx-edge-a10: rgba(240, 182, 77, 0.10); --rx-edge-a22: rgba(240, 182, 77, 0.22); } /* ============================================================================ LAYER 2 · SEMANTIC TOKENS (Dark-First · Q5-A "Dark immer") ---------------------------------------------------------------------------- DAS hier ist was Komponenten benutzen. Primitives (Layer 1) bleiben privat. ============================================================================ */ :root { /* --- Backgrounds ---------------------------------------------- */ --bg: var(--rx-ink-000); --bg2: var(--rx-ink-050); --bg3: var(--rx-ink-100); --surface: var(--rx-ink-050); --surface2: var(--rx-ink-100); --surface3: var(--rx-ink-150); /* --- Text ----------------------------------------------------- */ --text: var(--rx-text-100); --text2: var(--rx-text-200); --text3: var(--rx-text-300); --text4: var(--rx-text-400); /* --- Accent (Indigo) ------------------------------------------ */ --accent: var(--rx-indigo-400); --accent2: var(--rx-indigo-500); --accent-bg: var(--rx-indigo-a12); /* --- Brand (Green) -------------------------------------------- */ --green: var(--rx-green-400); --green-bg: var(--rx-green-a12); /* --- Status --------------------------------------------------- */ --amber: var(--rx-amber-400); --amber-bg: var(--rx-amber-a12); --red: var(--rx-red-400); --red-bg: var(--rx-red-a12); --gold: var(--rx-amber-400); /* Legacy alias */ --purple: var(--rx-indigo-400); /* Legacy alias */ --purple-bg: var(--rx-indigo-a12); /* Legacy alias */ /* --- Edge (Rasanix-Edge USP) ---------------------------------- */ --edge: var(--rx-edge-400); --edge-bg: var(--rx-edge-a10); /* --- Borders -------------------------------------------------- */ --border: var(--rx-border-subtle); --border2: var(--rx-border-default); --border3: var(--rx-border-strong); } /* Optional-Fallback Light-Mode (Q5-A: standardmaessig NICHT aktiv, nur erreichbar wenn jemand data-theme="light" setzt. Bewusst drin fuer spaetere Opt-in-Option. Nicht in Default-Flow einbinden.) */ [data-theme="light"] { --bg: #F7F8FC; --bg2: #EEF0F8; --bg3: #DFE3F0; --surface: #FFFFFF; --surface2: #F7F8FC; --surface3: #EEF0F8; --text: #0B0E18; --text2: #3D4259; --text3: #6F7488; --text4: #9DA3B4; --accent: var(--rx-indigo-500); --accent-bg: rgba(99, 102, 241, 0.08); --border: rgba(99, 102, 241, 0.10); --border2: rgba(99, 102, 241, 0.20); } /* ============================================================================ LAYER 3 · ELEVATION (Q1-B konform · Schatten cool-blau, nicht pure schwarz) ============================================================================ */ :root { /* Flat · keine Lift, nur 1px Hairline */ --elev-flat: 0 0 0 1px var(--rx-border-subtle); /* Lifted · Cards, Sheets */ --elev-lifted: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 16px rgba(0, 0, 0, 0.28); /* Floating · Modals, Menus, Popovers */ --elev-floating: 0 2px 8px rgba(0, 0, 0, 0.45), 0 12px 32px rgba(0, 0, 0, 0.38), 0 0 0 1px var(--rx-border-subtle); /* Hero · Top-Level Highlights */ --elev-hero: 0 4px 16px rgba(0, 0, 0, 0.50), 0 20px 48px rgba(0, 0, 0, 0.45); /* Legacy-Aliases (rueckwaerts-kompatibel zu style.css bis Rollout) */ --shadow: var(--elev-lifted); --shadow-md: var(--elev-floating); --shadow-lg: var(--elev-hero); } /* ============================================================================ LAYER 4 · SPACING (8px base grid · iOS/Native-konform) ============================================================================ */ :root { --sp-0: 0; --sp-1: 4px; --sp-2: 8px; /* base unit */ --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; } /* ============================================================================ LAYER 5 · RADIUS (iOS-Radius-Harmonie) ============================================================================ */ :root { --r-sm: 6px; /* Small pills, chip interior */ --r-md: 8px; /* Buttons */ --r-lg: 12px; /* Cards default */ --r-xl: 16px; /* Hero cards, large modules */ --r-2xl: 22px; /* Bottom-sheets, modals */ --r-pill: 99px; /* Pills, badges */ /* Legacy-Aliases */ --radius: var(--r-lg); --radius-lg: var(--r-xl); } /* ============================================================================ LAYER 6 · TYPOGRAPHY (Q3-C · Inter + Instrument Serif + Space Mono) ---------------------------------------------------------------------------- Fonts werden in index.html via Google-Fonts-Link geladen. Strategie: Inter = UI, Body, Buttons, Card-Titles, Navigation Instrument Serif = Editorial-Hero-Headlines (Q6-B), grosse Display-Zahlen Space Mono = Zahlen, Labels, Meta, Match-IDs, Timestamps ============================================================================ */ :root { /* --- Font Families -------------------------------------------- */ --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif; --font-display: 'Inter', -apple-system, 'SF Pro Display', system-ui, sans-serif; --font-editorial: 'Instrument Serif', 'Iowan Old Style', Georgia, serif; --font-mono: 'Space Mono', ui-monospace, 'SF Mono', 'JetBrains Mono', monospace; /* Legacy aliases (Rollout-Phase wird diese nach und nach ersetzen) */ --font: var(--font-ui); --font-head: var(--font-display); --mono: var(--font-mono); /* --- Font Sizes ----------------------------------------------- */ --fs-9: 9px; /* Mono-Micro-Labels */ --fs-10: 10px; /* Meta, Badges */ --fs-11: 11px; /* Small UI text */ --fs-12: 12px; /* Secondary body */ --fs-13: 13px; /* Body default */ --fs-14: 14px; /* Emphasised body */ --fs-15: 15px; /* Modal inputs */ --fs-17: 17px; /* Card title */ --fs-20: 20px; /* Greeting mobile */ --fs-24: 24px; /* Greeting desktop */ --fs-32: 32px; /* Hero number */ --fs-40: 40px; /* Editorial headline */ --fs-56: 56px; /* Editorial display */ /* --- Font Weights --------------------------------------------- */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* --- Letter Spacing ------------------------------------------- */ --ls-tightest: -0.03em; /* Editorial Display */ --ls-tight: -0.02em; /* Big numbers, greeting */ --ls-snug: -0.01em; /* Titles */ --ls-normal: 0; --ls-wide: 0.04em; /* Mono-Labels klein */ --ls-widest: 0.08em; /* Caps-Eyebrows */ /* --- Line Heights --------------------------------------------- */ --lh-none: 1; --lh-tight: 1.15; /* Hero headlines, big numbers */ --lh-snug: 1.35; /* Titles, card headers */ --lh-normal: 1.5; /* Body */ --lh-relaxed: 1.65; /* Editorial prose (Q6-B) */ } /* ============================================================================ LAYER 7 · MOTION (Native iOS-konforme Timing-Kurven) ============================================================================ */ :root { /* --- Easing --------------------------------------------------- */ --ease-out: cubic-bezier(0.2, 0.8, 0.3, 1); /* iOS standard ease-out */ --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1); /* Standard transitions */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Gentle overshoot */ /* --- Duration ------------------------------------------------- */ --dur-instant: 80ms; --dur-fast: 160ms; --dur-base: 220ms; --dur-slow: 320ms; --dur-slower: 480ms; } /* ============================================================================ LAYER 8 · Q7-B · FUSSBALL-DNA ---------------------------------------------------------------------------- Subtile Domain-Signale. Nur dort anwenden wo sie Wert bringen (Hero-Screens, Top-of-Funnel). NICHT als Tapete ueber alles druecken. ============================================================================ */ /* --- Rasen-Grid als Hintergrund-Layer (4% Opacity, 32px raster) --- */ .rx-pitch-grid { position: relative; } .rx-pitch-grid::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(16, 217, 130, 0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(16, 217, 130, 0.04) 1px, transparent 1px); background-size: 32px 32px; pointer-events: none; z-index: 0; } .rx-pitch-grid > * { position: relative; z-index: 1; } /* --- Match-ID (Bloomberg-Ticker-Style) ---------------------------- */ /* Usage: BL·2425·M34·05 */ .rx-match-id { font-family: var(--font-mono); font-size: var(--fs-10); font-weight: var(--fw-regular); letter-spacing: var(--ls-wide); color: var(--text3); text-transform: uppercase; } /* ============================================================================ LAYER 9 · Q6-B · EDITORIAL HELPERS (Bloomberg-Opinion Hero-Momente) ---------------------------------------------------------------------------- Fuer die 2-3 Hero-Screens: Tipp des Tages, Rasanix Edge Top-Pick, Meine Analyse Monthly Report. ============================================================================ */ .rx-eyebrow { font-family: var(--font-mono); font-size: var(--fs-10); font-weight: var(--fw-semibold); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--text3); } .rx-headline-editorial { font-family: var(--font-editorial); font-weight: var(--fw-regular); /* Instrument Serif ist schon elegant, braucht keine Bold-Version */ font-size: var(--fs-40); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); color: var(--text); font-style: normal; } .rx-headline-editorial--display { font-size: var(--fs-56); letter-spacing: var(--ls-tightest); } .rx-pull-quote { font-family: var(--font-editorial); font-style: italic; font-size: var(--fs-20); line-height: var(--lh-relaxed); color: var(--text2); border-left: 2px solid var(--green); padding-left: var(--sp-4); margin: var(--sp-5) 0; } .rx-stats-footer { display: flex; gap: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--border); font-family: var(--font-mono); font-size: var(--fs-11); color: var(--text3); } .rx-edge-badge { display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 10px; border-radius: var(--r-pill); background: var(--edge-bg); border: 1px solid var(--rx-edge-a22); color: var(--edge); font-family: var(--font-ui); font-size: var(--fs-11); font-weight: var(--fw-semibold); letter-spacing: var(--ls-snug); } .rx-edge-badge__label { font-size: var(--fs-10); opacity: 0.78; } .rx-edge-badge__value { font-family: var(--font-mono); font-weight: var(--fw-bold); } /* ============================================================================ LAYER 10 · LAYOUT CONSTANTS ============================================================================ */ :root { --sidebar-w: 210px; --bottom-nav-h: 60px; --topbar-h: 52px; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --modal-max-w: 760px; --content-max-w: 1200px; } /* ============================================================================ META · Token-Versioning ---------------------------------------------------------------------------- Bei Breaking-Changes: Version hoch, Cache-Buster in index.html hoch, und in CLAUDE_KONTEXT.md dokumentieren. ============================================================================ */ :root { --rx-tokens-version: "1.0"; }