/* ============================================================================= theme.css · TAXI LAKIS (Ebene 2 von 3: Foundation → Theme → Site) ----------------------------------------------------------------------------- Färbt Kitty für Taxi Lakis ein. AUSSCHLIESSLICH Token-Überschreibungen — keine Komponentenstruktur (die bleibt in styles.css), keine Kompositionen (die stehen in site.css). Lädt NACH styles.css und VOR site.css. Quellen: Colors_TakiLakis.pdf (CI-Farben), taxi-lakis-landing-page-spec.md §1.1/§1.2 (Farben, Typografie) und der freigegebene Entwurf 260811_taxilakis_idea.html (Radien, Rhythmus, Schatten). BEWUSSTE PROJEKTENTSCHEIDUNGEN (begründet in PROJECT.md): 1. Nur HELL. Die Marke besteht aus Navy/Gelb/Softblau auf Weiß; ein zweites dunkles Farbset existiert nicht. Statt light-dark() setzen wir hier literale Werte und color-scheme: light. Der Theme-Umschalter entfällt; an seiner Stelle steht der Textgrößen-Umschalter (Spec §12). 2. --text-size-adjust startet bei 0 (Kitty-Default: 1px), damit die Stufen A− / A / A+ symmetrisch um die freigegebene Basisgröße liegen. ============================================================================= */ :root { /* Marke ist hell. Kein Dark-Set vorhanden -> System-Dark nicht mitdrehen. */ color-scheme: light; /* === 1. CI-Primärwerte =================================================== */ /* Die einzigen „rohen" Farbwerte im Projekt. Alles darunter referenziert nur noch diese fünf plus zwei Hilfstöne. */ --tl-navy: #070331; /* primär dunkel — Header, Hero, Footer, Text */ --tl-navy-2: #141043; /* Fläche in Navy — Karten auf Navy */ --tl-navy-3: #241F58; /* Hover auf Navy */ --tl-yellow: #FFED00; /* Akzent — Primary-Button, Signatur */ --tl-yellow-2: #FFF56B; /* Hover auf Gelb */ --tl-soft: #DFEFF7; /* Akzent hell — Hinweisboxen, Infoflächen */ --tl-soft-2: #EFF7FB; /* getöntes Band — ganze Sections */ --tl-white: #FFFFFF; --tl-muted: #57547A; /* Sekundärtext auf Hell (7,4:1 auf Weiß) */ --tl-line: #DDE3EF; /* ruhige Kante */ /* --- Fehlerfarben ------------------------------------------------------ --tl-error ist der vom Kunden gesetzte Wert (#FF4D00). Er steht überall dort, wo die Farbe eine FLÄCHE oder eine KANTE ist: Feldrahmen, der Balken am Hinweiskasten, Symbole. Dafür verlangt WCAG 3 : 1, und mit 3,33 : 1 auf Weiß ist das erfüllt. Für kleine Schrift auf hellem Grund reicht er NICHT: dort verlangt WCAG 4,5 : 1. Deshalb --tl-error-ink, derselbe Farbton eine Spur dunkler (4,87 : 1). Fehlermeldungen sind der eine Text, den wirklich jeder lesen können muss — dort geht Lesbarkeit vor Farbtreue. Auf Navy ist der helle Wert mit 5,92 : 1 dagegen bestens lesbar und wird auch dort verwendet. */ --tl-error: #FF4D00; /* Kanten, Balken, Symbole, Text auf Navy */ --tl-error-ink: #D13A00; /* kleine Schrift auf Hell */ --tl-error-soft: #FFF4F0; /* getönte Fläche des Hinweiskastens */ /* === 2. Schriftfamilien ================================================== */ /* Selbst gehostet (fonts/), keine Google Fonts — Kitty-Prinzip „Datenschutz by default". @font-face steht in site.css. */ --font-heading: "Jost", "Avenir Next", "Segoe UI", system-ui, sans-serif; --font-display: var(--font-heading); --font-body: "Inter", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; --font-ui: var(--font-body); /* === 3. Typografische Skala ============================================= */ /* Basisgröße des freigegebenen Entwurfs: 17px. --text-size-adjust ist der einzige Wert, den der A−/A/A+-Umschalter anfasst; alle Stufen leiten sich daraus ab (Spec §12). */ --text-base-source: 1.0625rem; /* 17px */ --text-size-adjust: 0rem; /* A− = -0.0625rem · A+ = +0.125rem */ --text-h1: clamp(2.15rem, 5.6vw, 4rem); --text-h2: clamp(1.8rem, 3.6vw, 2.7rem); --text-h3: 1.5rem; --text-h4: 1.18rem; --text-h5: 1.05rem; --text-lead: clamp(1.02rem, 1.4vw, 1.18rem); --text-logo: 1.25rem; --leading-h1: 1.08; --leading-h2: 1.08; --leading-h3: 1.12; --leading-h4: 1.2; --leading-h5: 1.3; --leading-body: 1.6; --leading-ui: 1.35; --tracking-h1: -0.015em; --tracking-h2: -0.015em; --tracking-h3: -0.015em; --tracking-h4: -0.01em; --tracking-h5: -0.01em; --tracking-button: 0.01em; --tracking-wide: 0.2em; /* Eyebrows in Versalien */ /* === 4. Farbrollen (Kitty-Semantik -> CI) ================================ Literale Zuweisungen statt color-mix(): die CI gibt die Töne exakt vor, eine Ableitung würde sie verfälschen. */ /* Marken-Identität */ --color-brand: var(--tl-yellow); /* Signalfarbe, Primary */ --color-brand-2: var(--tl-navy); /* zweite Marke, Secondary */ --color-brand-complement: var(--tl-soft); /* ruhiger Kontrast */ --color-brand-hover: var(--tl-yellow-2); --color-brand-2-hover: var(--tl-navy-3); --color-brand-strong: var(--tl-navy); --color-brand-ink: var(--tl-navy); /* Marke ALS Text auf Hell */ /* Text auf gefüllten Markenflächen — Kontrast geprüft: Navy auf Gelb 13,9:1 · Weiß auf Navy 18,4:1 · Navy auf Softblau 15,7:1 */ --color-on-brand: var(--tl-navy); --color-on-brand-2: var(--tl-white); --color-on-brand-complement: var(--tl-navy); /* Interne Tinte: hier fix dunkel, weil es kein Dark-Theme gibt. */ --_ink: var(--tl-navy); --tint-strength: 0%; /* CI-Grautöne sind bereits getönt */ /* Flächen */ --color-surface: var(--tl-white); --color-surface-dim: var(--tl-white); --color-surface-tint: var(--tl-soft-2); --color-surface-container: var(--tl-white); --color-surface-inset: var(--tl-soft-2); --color-surface-brand: var(--tl-soft); --color-surface-brand-2: var(--tl-navy); --color-surface-complement: var(--tl-soft); /* Kanten */ --color-outline: var(--tl-line); --color-outline-strong: var(--tl-navy); /* Text */ --color-text-primary: var(--tl-navy); --color-text-secondary: var(--tl-muted); --color-text-tertiary: var(--tl-muted); --color-text-disabled: #9C9AB4; /* Immer-dunkles Band (Footer, Navy-Sections) */ --color-inverse: var(--tl-navy); --color-on-inverse: var(--tl-white); --color-scrim: rgba(7, 3, 49, 0.62); /* Fokus: gelbe Kontur, wie im freigegebenen Entwurf. Auf gelbem Grund dreht site.css sie auf Navy. */ --color-focus-outline: var(--tl-yellow); --color-focus-glow: rgba(7, 3, 49, 0.12); --link-highlight: var(--tl-soft); /* === 5. Radien, Rhythmus, Tiefe ========================================== */ /* Werte 1:1 aus dem freigegebenen Entwurf (--r-btn / --r-card / --r-field). */ --radius-small: 10px; /* Formularfelder */ --radius-control: 12px; /* Buttons */ --radius-container: 18px; /* Karten */ --radius-large: 22px; /* Modal */ --content-max: 1180px; --pad-inline: 20px; --measure: 62ch; --section-padding-block: clamp(56px, 7vw, 96px); /* ACHTUNG, zwei verschiedene Dinge: --header-height wird von main.js bei JEDER Größenänderung auf die GEMESSENE Header-Höhe gesetzt. Nur für Anker-Versatz und Slider-Höhen gedacht — niemals für die Größe des Headers selbst, sonst misst sich der Header endlos selbst nach. --tl-header-min ist der Entwurfswert für die Mindesthöhe der Kopfzeile. */ --header-height: 72px; /* Fallback ohne JS; main.js überschreibt */ --tl-header-min: 72px; /* Entwurfswert, von main.js unberührt */ --scroll-offset: calc(var(--header-height) + 12px); --shadow-card: 0 2px 8px rgba(7, 3, 49, 0.06), 0 12px 32px rgba(7, 3, 49, 0.12); --shadow-focus: 0 0 0 3px rgba(7, 3, 49, 0.12); --dur: 180ms; --ease: cubic-bezier(0.2, 0.6, 0.2, 1); } /* --- Textgrößen-Umschalter A− / A / A+ (Spec §12) -------------------------- Der Umschalter setzt data-text-size auf . ER SKALIERT DIE WURZEL-SCHRIFTGRÖSSE, nicht nur --text-size-adjust. Grund: dieses Theme legt die Überschriften-Skala mit eigenen clamp()-Werten fest und site.css enthält viele feste rem-Größen. Über --text-size-adjust allein wäre nur der Fließtext gewandert — Überschriften, Buttons, Karten und Formular wären gleich geblieben, der Umschalter also praktisch wirkungslos. Über die Wurzelgröße wächst und schrumpft ALLES, was in rem oder em bemessen ist, gemeinsam und im richtigen Verhältnis. 100 % = 16 px Browser-Standard. Wer im Browser eine größere Grundschrift eingestellt hat, behält deren Verhältnis — deshalb Prozent und nicht px. */ :root[data-text-size="s"] { font-size: 91%; } :root[data-text-size="m"] { font-size: 100%; } :root[data-text-size="l"] { font-size: 115%; }