/* LIBERYX Design System, gebündelt aus css/. Nicht von Hand ändern. Quelle und Reihenfolge stehen in tools/build.py. */ /* ===== tokens.css ======================================================== */ /* ============================================================================ LIBERYX Design System · TOKENS ---------------------------------------------------------------------------- Einzige Quelle für Farben, Schrift, Abstände, Radien, Schatten. Werte stammen aus LIBERYX.fig (Canvas «WEB DESIGN»), maschinell extrahiert. Aufbau in zwei Ebenen: 1. PALETTE rohe Markenwerte, unveränderlich, nie direkt im CSS verwenden 2. SEMANTIK Rollen wie --lx-bg oder --lx-text, die je Theme umschalten Es gibt zwei Themes: dunkel (Standard) Auftritt nach aussen, Marketing, Landingpages hell eingeloggte Anwendung, Druck, E-Mail Theme setzen: oder
========================================================================== */ :root, [data-theme="dark"] { /* == 1. PALETTE ========================================================== */ /* Markenblau, der einzige Akzent. 445 Vorkommen im Figma. */ --lx-c-blue-100: #b8d9ff; --lx-c-blue-500: #0173e6; /* Primär */ --lx-c-blue-600: #005cb9; /* Hover */ --lx-c-navy-800: #0b1f4a; --lx-c-navy-900: #02143d; /* Neutrale Stufen */ --lx-c-white: #ffffff; --lx-c-paper: #f9fbff; /* helle Fläche mit Blaustich */ --lx-c-sand: #f0ede4; /* Druck, Briefpapier, Visitenkarte */ --lx-c-grey-100: #e6e6e6; --lx-c-grey-200: #d2d2d2; /* Hover des sekundären Buttons im Figma */ --lx-c-grey-300: #a3a3a3; --lx-c-grey-500: #767676; --lx-c-grey-700: #3a3a3a; --lx-c-grey-800: #252525; /* Kartenfläche dunkel */ --lx-c-grey-850: #1b1b1b; /* Footer-Karte im Figma, Radius 30 */ --lx-c-grey-900: #171717; /* Seitengrund dunkel */ --lx-c-black: #000000; /* Signalfarben. Blau und Orange stammen aus dem Figma, Grün und Rot sind ergänzt, weil das Figma keine Status-Zustände kennt. */ /* Orange ist kein Statusrot, sondern der belegte Sekundärakzent aus dem Figma: dritte Lage im Glow-Dreiklang und Endpunkt der Bildkachel-Verläufe. */ --lx-c-orange-500: #ff8c32; --lx-c-green-500: #1a9e5f; --lx-c-red-500: #d33a2c; --lx-c-amber-500: #d9930a; /* == 2. SEMANTIK · dunkel (Standard) ===================================== */ --lx-bg: var(--lx-c-grey-900); --lx-bg-sunken: #101010; --lx-surface: var(--lx-c-grey-800); --lx-surface-hover: #303030; --lx-surface-raised: #2e2e2e; --lx-text: var(--lx-c-white); --lx-text-muted: rgba(255, 255, 255, 0.6); --lx-text-faint: rgba(255, 255, 255, 0.38); --lx-text-inverse: var(--lx-c-black); --lx-border: rgba(255, 255, 255, 0.2); --lx-border-strong: rgba(255, 255, 255, 0.35); --lx-border-faint: rgba(255, 255, 255, 0.1); --lx-accent: var(--lx-c-blue-500); --lx-accent-hover: var(--lx-c-blue-600); --lx-accent-soft: rgba(1, 115, 230, 0.16); --lx-accent-border: rgba(1, 115, 230, 0.6); --lx-on-accent: var(--lx-c-white); /* Akzent als TEXT. Das Markenblau erreicht auf dem dunklen Grund nur 3,9:1 und verfehlt damit die geforderten 4,5:1 für kleinen Text. Für Flächen bleibt --lx-accent, für farbigen Text gilt dieser Wert. Beide Stufen stammen aus der Figma-Palette. */ --lx-accent-text: var(--lx-c-blue-100); --lx-success: var(--lx-c-green-500); --lx-warning: var(--lx-c-amber-500); --lx-danger: var(--lx-c-red-500); --lx-success-soft: rgba(26, 158, 95, 0.16); --lx-warning-soft: rgba(217, 147, 10, 0.16); --lx-danger-soft: rgba(211, 58, 44, 0.16); --lx-focus: var(--lx-c-blue-100); /* == 3. TYPOGRAFIE ======================================================= */ /* Eine Familie: Inter. Im Figma 212x Bold, 135x Medium, 108x Regular, 97x Semi Bold. Andere Familien sind Altlasten. */ --lx-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Elf Textknoten im Master tragen Axiforma Bold statt Inter, darunter die Hero-Überschrift der Startseite (als Style-Override, in der Knotenebene nicht sichtbar). Die Schrift liegt nicht lizenziert vor, deshalb zeigt diese Rolle auf Inter. Wer Axiforma beschafft, ändert nur diese Zeile. */ --lx-font-display: var(--lx-font); --lx-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --lx-w-regular: 400; --lx-w-medium: 500; --lx-w-semibold: 600; --lx-w-bold: 700; /* Geschlossene Skala. Was hier nicht steht, gibt es nicht. */ --lx-fs-hero: 80px; --lx-lh-hero: 1.0; --lx-fs-h1: 60px; --lx-lh-h1: 1.08; --lx-fs-h2: 45px; --lx-lh-h2: 1.44; --lx-fs-h3: 30px; --lx-lh-h3: 1.0; --lx-fs-h4: 25px; --lx-lh-h4: 1.2; --lx-fs-h5: 20px; --lx-lh-h5: 1.5; --lx-fs-lead: 18px; --lx-lh-lead: 1.4; --lx-fs-body: 16px; --lx-lh-body: 1.25; --lx-fs-eyebrow: 14px; --lx-lh-eyebrow: 1.43; --lx-fs-label: 14px; --lx-lh-label: 1.43; /* Tabellenkopf, Feldbeschriftung */ --lx-fs-small: 12px; --lx-lh-small: 1.4; --lx-tracking-eyebrow: 0.1em; /* 10 % aus dem Figma */ --lx-tracking-tight: -0.01em; /* == 4. ABSTÄNDE ========================================================= */ /* Aus den Auto-Layout-Paddings und Gaps im Figma. */ --lx-space-xs: 6px; /* Feinabstand: Symbol zu Text, Preis zu Periode */ --lx-space-1: 10px; --lx-space-2: 15px; --lx-space-3: 20px; --lx-space-4: 30px; --lx-space-5: 40px; --lx-space-6: 60px; --lx-space-7: 100px; /* == 5. RADIEN =========================================================== */ --lx-r-xs: 5px; --lx-r-sm: 8px; /* Nav-Pill */ --lx-r-md: 10px; /* Button, häufigster Wert im Figma (274 Knoten) */ --lx-r-lg: 20px; /* Karte, Preisbox */ --lx-r-xl: 30px; --lx-r-pill: 999px; /* == 6. SCHATTEN UND GLOW =============================================== */ --lx-shadow-btn: 0 2px 5px rgba(1, 115, 230, 0.6); --lx-shadow-btn-light: 0 2px 5px rgba(255, 255, 255, 0.6); --lx-shadow-card: 0 0 5px rgba(0, 0, 0, 0.1); --lx-shadow-raised: 0 4px 16px rgba(0, 0, 0, 0.35); --lx-shadow-overlay: 0 20px 60px rgba(0, 0, 0, 0.5); --lx-shadow-featured: 0 0 20px rgba(1, 115, 230, 0.8); --lx-glow-blur: 120px; /* Abdunkelung hinter Overlays. Bewusst schwarz, unabhaengig vom Theme. */ --lx-scrim: rgba(0, 0, 0, 0.5); --lx-backdrop: rgba(0, 0, 0, 0.6); /* == 7. LAYOUT =========================================================== */ --lx-page: 1512px; /* Artboard-Breite im Figma */ --lx-content: 1312px; /* Inhaltsbreite, ergibt 100 px Rand */ --lx-gutter: 20px; --lx-header-h: 80px; /* Marketing-Kopf */ --lx-topbar-h: 64px; /* Kopfleiste der Anwendung */ --lx-sidebar-w: 260px; --lx-measure: 720px; /* maximale Zeilenlänge für Fliesstext */ /* == 8. BEWEGUNG ========================================================= */ --lx-ease: cubic-bezier(0.2, 0, 0.2, 1); --lx-dur-fast: 0.12s; --lx-dur: 0.18s; --lx-dur-slow: 0.3s; /* == 9. EBENEN =========================================================== */ --lx-z-base: 0; --lx-z-sticky: 20; --lx-z-drawer: 30; --lx-z-overlay: 40; --lx-z-toast: 50; /* Laufwert, kein Gestaltungstoken: 0 bis 1, wie weit die Seite gescrollt ist. Wird von js/liberyx.js gesetzt, wenn der Browser keine scroll-getriebenen Animationen kennt. Siehe .lx-scrollbar in css/layout.css. */ --lx-scroll: 0; /* Laufwert: Seitenverhältnis einer Fläche mit .lx-media. */ --lx-ratio: 16 / 9; color-scheme: dark; } /* ============================================================================ SEMANTIK · hell Für die eingeloggte Anwendung, Druck und E-Mail. Palette und Skalen bleiben identisch, es wechseln nur die Rollen. ========================================================================== */ [data-theme="light"] { --lx-bg: var(--lx-c-paper); --lx-bg-sunken: #eef2f9; --lx-surface: var(--lx-c-white); --lx-surface-hover: #f2f5fb; --lx-surface-raised: var(--lx-c-white); --lx-text: var(--lx-c-black); --lx-text-muted: rgba(0, 0, 0, 0.6); /* gleiche 60 % wie im dunklen Theme */ --lx-text-faint: rgba(0, 0, 0, 0.38); --lx-text-inverse: var(--lx-c-white); --lx-border: rgba(0, 0, 0, 0.2); /* gespiegelte 20 % aus dem Figma */ --lx-border-strong: rgba(0, 0, 0, 0.35); --lx-border-faint: rgba(0, 0, 0, 0.1); --lx-accent-soft: rgba(1, 115, 230, 0.1); --lx-accent-border: rgba(1, 115, 230, 0.5); --lx-accent-text: var(--lx-c-blue-600); --lx-success-soft: rgba(26, 158, 95, 0.12); --lx-warning-soft: rgba(217, 147, 10, 0.12); --lx-danger-soft: rgba(211, 58, 44, 0.1); --lx-focus: var(--lx-c-blue-500); --lx-shadow-card: 0 0 5px rgba(0, 0, 0, 0.1); /* Figma-Kartenschatten */ --lx-shadow-raised: 0 4px 16px rgba(0, 0, 0, 0.1); --lx-shadow-overlay: 0 20px 60px rgba(0, 0, 0, 0.18); --lx-shadow-btn-light: 0 2px 5px rgba(0, 0, 0, 0.15); color-scheme: light; } /* ============================================================================ RESPONSIVE TOKENS Das Figma kennt nur Desktop (1512). Die kleineren Stufen sind Adaption: dieselben Variablen, andere Werte. Nie neue Handy-Tokens erfinden. ========================================================================== */ @media (max-width: 1100px) { :root { --lx-fs-hero: 56px; --lx-lh-hero: 1.05; --lx-fs-h1: 44px; --lx-lh-h1: 1.1; --lx-fs-h2: 34px; --lx-lh-h2: 1.25; --lx-space-7: 72px; } } @media (max-width: 900px) { :root { --lx-header-h: 64px; --lx-fs-hero: 38px; --lx-lh-hero: 1.1; --lx-fs-h1: 30px; --lx-lh-h1: 1.15; --lx-fs-h2: 26px; --lx-lh-h2: 1.25; --lx-fs-h3: 26px; --lx-lh-h3: 1.2; --lx-fs-h4: 20px; --lx-lh-h4: 1.25; --lx-fs-lead: 16px; --lx-space-7: 56px; --lx-space-6: 40px; } } /* ===== base.css ========================================================== */ /* ============================================================================ LIBERYX Design System · BASE Reset, Grundtypografie, Fokus, Textklassen, Hilfsklassen. Setzt css/tokens.css voraus. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; /* Der Kopf klebt, also müssen Sprungziele darunter Platz lassen. Sonst verschwindet jeder angesprungene Titel hinter der Kopfleiste. */ scroll-padding-top: calc(var(--lx-header-h) + var(--lx-space-3)); } body { margin: 0; background: var(--lx-bg); color: var(--lx-text); font-family: var(--lx-font); font-size: var(--lx-fs-body); line-height: var(--lx-lh-body); font-weight: var(--lx-w-medium); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg, video, canvas { display: block; max-width: 100%; height: auto; } /* Jede Komponente, die display setzt, schlaegt sonst die Browser-Regel fuer das Attribut hidden. Deshalb hier einmal zentral und mit Vorrang. */ [hidden] { display: none !important; } button, input, select, textarea { font: inherit; color: inherit; } a { color: inherit; text-decoration: none; } hr { border: 0; } /* Tastaturfokus ist überall sichtbar, Mausklicks bleiben ruhig. */ :focus-visible { outline: 2px solid var(--lx-focus); outline-offset: 2px; border-radius: var(--lx-r-xs); } ::selection { background: var(--lx-accent); color: var(--lx-on-accent); } /* --- Textklassen ---------------------------------------------------------- */ /* Immer diese Klassen verwenden, nie roh auf h1..h6 stylen. So bleibt die Dokumentstruktur frei wählbar, ohne dass sich das Aussehen ändert. */ .lx-hero-title { margin: 0; font-family: var(--lx-font-display); font-size: var(--lx-fs-hero); line-height: var(--lx-lh-hero); font-weight: var(--lx-w-bold); letter-spacing: var(--lx-tracking-tight); } .lx-h1 { margin: 0; font-family: var(--lx-font-display); font-size: var(--lx-fs-h1); line-height: var(--lx-lh-h1); font-weight: var(--lx-w-bold); } .lx-h2 { margin: 0; font-size: var(--lx-fs-h2); line-height: var(--lx-lh-h2); font-weight: var(--lx-w-bold); } .lx-h3 { margin: 0; font-size: var(--lx-fs-h3); line-height: var(--lx-lh-h3); font-weight: var(--lx-w-bold); } .lx-h4 { margin: 0; font-size: var(--lx-fs-h4); line-height: var(--lx-lh-h4); font-weight: var(--lx-w-bold); } .lx-h5 { margin: 0; font-size: var(--lx-fs-h5); line-height: var(--lx-lh-h5); font-weight: var(--lx-w-bold); } /* Kurzes Wort in Grossbuchstaben über jedem Sektionstitel. */ .lx-eyebrow { margin: 0; font-size: var(--lx-fs-eyebrow); line-height: 1; font-weight: var(--lx-w-semibold); letter-spacing: var(--lx-tracking-eyebrow); text-transform: uppercase; color: var(--lx-accent-text); } /* Wie Eyebrow, aber fett und als eigenständige Zeile über dem Hero. */ .lx-kicker { margin: 0; font-size: var(--lx-fs-eyebrow); line-height: var(--lx-lh-eyebrow); font-weight: var(--lx-w-bold); letter-spacing: var(--lx-tracking-eyebrow); text-transform: uppercase; color: var(--lx-accent-text); } .lx-lead { margin: 0; max-width: var(--lx-measure); font-size: var(--lx-fs-lead); line-height: var(--lx-lh-lead); font-weight: var(--lx-w-medium); } .lx-body { margin: 0; font-size: var(--lx-fs-body); line-height: 1.6; max-width: var(--lx-measure); } .lx-small { font-size: var(--lx-fs-small); line-height: var(--lx-lh-small); } .lx-muted { color: var(--lx-text-muted); } .lx-faint { color: var(--lx-text-faint); } .lx-accent-text { color: var(--lx-accent-text); } .lx-link { color: var(--lx-accent-text); text-decoration: underline; text-underline-offset: 3px; } .lx-link:hover { color: var(--lx-accent-hover); } .lx-code { font-family: var(--lx-font-mono); font-size: 0.9em; padding: 2px 6px; border-radius: var(--lx-r-xs); background: var(--lx-accent-soft); color: var(--lx-accent-text); } /* --- Hilfsklassen --------------------------------------------------------- */ .lx-center { text-align: center; } .lx-nowrap { white-space: nowrap; } .lx-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Nur für Screenreader, optisch entfernt aber vorlesbar. */ .lx-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .lx-hide { display: none !important; } /* Liste ohne Punkte und Einzug, wenn die Semantik
    /