/* ============================================================ RETRIVA TOKENS: "Glas am Tag" Marketing-Website. Statisch, kein Build-Step. Heller Himmel-Grundton mit Aurora-Farbflecken, Frosted-Glass- Karten, Teal als Primaerakzent, Iris als Sekundaerakzent. Dunkle Kontrast-Sektionen ("Nacht-Baender") nutzen Void + Glas mit hellen Akzenten. Fonts: Outfit (Display), Inter (Body), JetBrains Mono (Daten). Geladen via Google-Fonts-Link in den HTML-Seiten. ============================================================ */ :root { /* ---- Tag: heller Grundton ---- */ --sky: #EDF1F7; /* Seitenhintergrund hell */ --ink: #1C2230; /* Foreground auf hell */ --ink-dim: #5A6478; /* Sekundaertext auf hell */ --ink-faint: #97A0B2; /* Meta, Labels auf hell */ /* ---- Glas auf hellem Grund ---- */ --glass: rgba(255, 255, 255, 0.62); --glass-hi: rgba(255, 255, 255, 0.85); --glass-deep: rgba(237, 241, 247, 0.72); /* abgesetzte Innenflaechen */ --edge: rgba(255, 255, 255, 0.95); /* Glas-Kanten */ --edge-soft: rgba(28, 34, 48, 0.08); /* Trennlinien auf hell */ --edge-strong: rgba(28, 34, 48, 0.16); /* ---- Nacht: dunkle Kontrast-Baender ---- */ --void: #0A0D16; --night-glass: rgba(255, 255, 255, 0.05); --night-glass-2: rgba(255, 255, 255, 0.09); --night-edge: rgba(255, 255, 255, 0.11); --night-edge-hi: rgba(255, 255, 255, 0.22); /* ---- Teal: Primaerakzent (CTAs, Haekchen, Links) ---- */ --teal: #0E9384; --teal-deep: #0B6E63; --teal-soft: rgba(14, 147, 132, 0.10); --teal-line: rgba(14, 147, 132, 0.30); --teal-glow: rgba(14, 147, 132, 0.35); --teal-night: #3ED3C0; /* helle Variante auf Nacht-Baendern */ --teal-night-soft: rgba(62, 211, 192, 0.12); --teal-night-line: rgba(62, 211, 192, 0.32); /* ---- Iris: Sekundaerakzent (Gradienten teal -> iris) ---- */ --iris: #6E62E5; --iris-deep: #5448C8; --iris-soft: rgba(110, 98, 229, 0.10); --iris-line: rgba(110, 98, 229, 0.30); --iris-glow: rgba(110, 98, 229, 0.35); --iris-night: #8F8AFF; --iris-night-soft: rgba(143, 138, 255, 0.14); --iris-night-line: rgba(143, 138, 255, 0.35); /* ---- Peach: Detailakzent ---- */ --peach: #F4A26B; --peach-ink: #C9762F; /* lesbare Peach-Variante auf hell */ --peach-soft: rgba(244, 162, 107, 0.18); /* ---- Status ---- */ --ok: var(--teal); --warn: var(--peach-ink); --error: #DE5B47; /* ---- Text auf Nacht ---- */ --fg-night: #F4F5F9; --fg-night-soft: rgba(238, 242, 250, 0.62); --fg-night-muted: rgba(238, 242, 250, 0.38); /* ---- Effekte ---- */ --blur: blur(26px) saturate(1.4); /* ---- Schatten: weich, kalt getoent ---- */ --shadow-card: 0 2px 4px rgba(28, 34, 48, 0.04), 0 18px 44px rgba(28, 34, 48, 0.10); --shadow-card-hover: 0 4px 8px rgba(28, 34, 48, 0.05), 0 24px 56px rgba(28, 34, 48, 0.14); --shadow-big: 0 8px 16px rgba(28, 34, 48, 0.06), 0 32px 72px rgba(28, 34, 48, 0.14); --shadow-night: 0 24px 60px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08); --shadow-night-hover: 0 30px 70px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12); --shadow-cta: 0 12px 26px rgba(14, 147, 132, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.40); --shadow-cta-hover: 0 16px 34px rgba(14, 147, 132, 0.45), 0 0 48px rgba(110, 98, 229, 0.18), inset 0 1px 1px rgba(255, 255, 255, 0.40); --shadow-nav: 0 2px 4px rgba(28, 34, 48, 0.05), 0 18px 44px rgba(28, 34, 48, 0.14); /* ---- Typografie ---- */ --font-display: "Outfit", "Avenir Next", "Segoe UI", sans-serif; --font-body: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif; --font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, monospace; --text-xs: 0.8125rem; /* 13px Meta, Pills */ --text-sm: 0.9375rem; /* 15px Sekundaertext */ --text-base: 1.0625rem; /* 17px Body */ --text-lg: 1.25rem; /* 20px Leads */ --text-xl: 1.5rem; /* 24px Kartentitel */ --text-2xl: 2rem; /* 32px Sektionstitel mobil */ --text-3xl: 2.75rem; /* 44px Sektionstitel */ --text-4xl: 3.5rem; /* 56px Hero mobil-gross */ --text-5xl: 4.5rem; /* 72px Hero Desktop */ --leading-body: 1.7; --leading-tight: 1.08; --tracking-display: -0.03em; /* Display ab 28px */ --tracking-wide: 0.08em; /* Eyebrows, Labels */ /* ---- Spacing-Tokens (bewusst, nicht zufaellig) ---- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4.5rem; --space-9: 6.5rem; --space-10: 9rem; /* ---- Radii ---- */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-pill: 999px; /* ---- Motion ---- */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Buttons, Karten */ --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1); /* Reveals */ --dur-fast: 160ms; --dur-base: 280ms; --dur-slow: 600ms; /* ---- Layout ---- */ --container: 72rem; /* 1152px */ --container-wide: 80rem; /* 1280px */ --nav-height: 4.25rem; --nav-offset: 0.75rem; /* Abstand der schwebenden Glas-Leiste */ } /* ------------------------------------------------------------ Band-Scoping: Sektionen wechseln zwischen Tag (Aurora-Glas, Default-Look) und Nacht (Void + Glas + helle Akzente). Komponenten lesen nur die --s-* Variablen und funktionieren dadurch auf beiden Untergruenden. ------------------------------------------------------------ */ .band--paper { --s-bg: transparent; /* Sky + Aurora liegen auf body */ --s-bg-soft: var(--glass-deep); --s-card: var(--glass); --s-card-hi: var(--glass-hi); --s-card-hover: var(--glass-hi); --s-card-line: var(--edge); --s-fg: var(--ink); --s-fg-soft: var(--ink-dim); --s-fg-muted: var(--ink-faint); --s-line: var(--edge-soft); --s-line-hover: var(--edge-strong); --s-accent: var(--teal); --s-accent-strong: var(--teal-deep); --s-accent-soft: var(--teal-soft); --s-accent-line: var(--teal-line); --s-flieder: var(--iris); --s-flieder-soft: var(--iris-soft); --s-flieder-line: var(--iris-line); --s-warn: var(--peach-ink); --s-warn-soft: var(--peach-soft); --s-shadow: var(--shadow-card); --s-shadow-hover: var(--shadow-card-hover); } .band--midnight { --s-bg: var(--void); --s-bg-soft: rgba(10, 13, 22, 0.50); --s-card: var(--night-glass); --s-card-hi: var(--night-glass-2); --s-card-hover: var(--night-glass-2); --s-card-line: var(--night-edge); --s-fg: var(--fg-night); --s-fg-soft: var(--fg-night-soft); --s-fg-muted: var(--fg-night-muted); --s-line: var(--night-edge); --s-line-hover: var(--night-edge-hi); --s-accent: var(--teal-night); --s-accent-strong: var(--teal-night); --s-accent-soft: var(--teal-night-soft); --s-accent-line: var(--teal-night-line); --s-flieder: var(--iris-night); --s-flieder-soft: var(--iris-night-soft); --s-flieder-line: var(--iris-night-line); --s-warn: var(--peach); --s-warn-soft: rgba(244, 162, 107, 0.16); --s-shadow: var(--shadow-night); --s-shadow-hover: var(--shadow-night-hover); }