/* * Aurora Glass — die eine Farbquelle der Website. * * Jeder Wert hier steht so in `constants/theme.ts` bzw. `constants/areaJourney.ts` * der App. Nichts ist umgerechnet, nichts gemischt, nichts erfunden. Wo die * Website etwas braucht, das die App nicht hat, steht das unten ausdrücklich * dabei — mit Begründung, nicht als stiller Zusatz. * * KEINE Seite definiert eigene Farben. Fehlt ein Wert, ist das eine Rückfrage * (`RUECKFRAGEN.md`), kein `:root`-Block in der Datei. */ :root { /* ── Die Farbreise ──────────────────────────────────────────────────────── * Die drei Stopps des Bandes. Waagerecht, immer in dieser Reihenfolge. * Senkrecht ist die Farbreise verboten — sie gehört dem Band. * Quelle: theme.ts AURORA_VIOLET / AURORA_INDIGO / AURORA_BLUE. */ --band-start: #7c3aed; /* violet-600 · Weiß 5,70:1 */ --band-mid: #4f46e5; /* indigo-600 · Weiß 6,29:1 · feste Naht */ --band-end: #1d4ed8; /* blue-700 · Weiß 6,70:1 */ /* ── Boden ──────────────────────────────────────────────────────────────── * indigo-800, aus theme.ts `toolGround` (T15). * * T15 kennt vier Böden: drei Reise-Böden je Bereich und diesen einen für * alles, was nicht auf der Reise liegt. Die Website hat keine Bereiche — * und gemessen trägt nur dieser Boden 70-%-Sekundärtext über 4,5:1 * (5,70:1; die drei Reise-Böden liefern 3,83 / 4,00 / 4,10). Auf einer * Seite, die aus Fließtext besteht, entscheidet das. * * Weiß 9,93:1 · --text-secondary 5,70:1 */ --ground: #3730a3; /* ── Flächen ────────────────────────────────────────────────────────────── * * > **Eine Fläche entfernt sich vom Grund — in die Richtung, in die Platz ist.** * * Das ist eine Regel, keine zwei. Auf dem **Band** ist der Grund hell, also * geht die Fläche nach dunkel (`--surface-on-band`); eine weiße Füllung hellt * dort auf und nimmt dem Text genau den Kontrast, den die Trennung sichern * soll. Auf dem **Boden** ist der Grund schon dunkel, ein dunkler Tint brächte * keine Trennung — dort bleibt die Füllung hell und die **Kante** trägt * (`--border-default`, 1,77:1 gegen die Karte, gegen 1,41 mit `--border-subtle`). * * Text auf Glas ist weiß. Nicht weil „Fließtext flach auf ground liegt" — * eine Meta-Zeile auf einer Karte ist kein Fließtext —, sondern weil 70 % * dort nur 4,20:1 hält: **eine Farbstufe, die nur auf einer Fläche * funktioniert, ist keine Rolle.** Deshalb gibt es keine dritte Stufe * zwischen 70 % und Weiß; die zweite Ebene trägt Größe und Gewicht. */ --surface-card: rgba(255, 255, 255, 0.15); --surface-raised: rgba(255, 255, 255, 0.25); --surface-inline: rgba(255, 255, 255, 0.10); /* Eine Fläche, die AUF dem Band liegt, ist dunkel — nicht weiß. * * `groundAlpha(0.60)`; die App führt denselben Wert zweimal, als * `surface.deck` und als `surface.tabBar`. Der Grund steht in theme.ts (T20): * "Eine Glasfläche hebt sich ab, sie ist nicht weiß." Auf einem hellen Grund * hellt jede weiße Fläche auf und nimmt dem Text darauf genau den Kontrast, * den die Trennung sichern sollte. * * Gemessen über dem Band: weiß 7,99–8,57:1 statt 3,39–4,34:1 mit weißer * Fläche, und die Kante ist sichtbar, statt bei 1,58:1 zu verschwinden. */ --surface-on-band: color-mix(in srgb, var(--ground) 60%, transparent); /* ── Ränder ───────────────────────────────────────────────────────────── */ --border-default: rgba(255, 255, 255, 0.25); --border-subtle: rgba(255, 255, 255, 0.15); /* violet-200. Trägt den Fokus-Ring — und Links, aber nur auf dem Boden: * dort hält sie 7,15:1, auf Glas nur 3,82:1. Auf Glas ist Text weiß (§ Flächen). * Die Unterstreichung trägt die Auszeichnung, deshalb hängt sie nie an der Farbe. */ --border-selected: #ddd6fe; /* ── Text ───────────────────────────────────────────────────────────────── * Zwei Sekundärstufen, weil es zwei Untergründe gibt. Das ist keine dritte * Stufe aus Bequemlichkeit: 70 % hält auf dem Band nur 3,58–4,10:1, 85 % * erreicht 4,53–5,28:1. Die App führt beide aus demselben Grund * (`text.onGlassSecondary` / `text.onBandSecondary`). */ --text-primary: #ffffff; --text-secondary: rgba(255, 255, 255, 0.70); /* auf Boden + Glas */ --text-on-band: #ffffff; --text-on-band-secondary: rgba(255, 255, 255, 0.85); /* nur auf dem Band */ --text-on-accent: #4c1d95; /* violet-900 auf --border-selected */ /* Dunkler Text auf der EINEN hellen Fläche. In der App heißt die Rolle * `text.onPartner` und trägt denselben Wert wie der Boden. Auf Weiß 95 % * hält sie 9,4:1. */ --text-on-light: var(--ground); /* ── Akzentfamilien ─────────────────────────────────────────────────────── * Vier Familien, je drei Stufen (15 / 30 / 60 %). Kein fünftes System. * Sky, Teal, Pink, Green, Orange sind gelöscht und haben keinen Nachfolger. */ --accent-brand: #8b5cf6; /* violet-500 */ --accent-positive: #10b981; /* emerald-500 */ --accent-attention: #f59e0b; /* amber-500 */ --accent-danger: #ef4444; /* red-500 */ --accent-brand-soft: rgba(139, 92, 246, 0.15); --accent-brand-medium: rgba(139, 92, 246, 0.30); --accent-brand-strong: rgba(139, 92, 246, 0.60); --accent-positive-soft: rgba(16, 185, 129, 0.15); --accent-positive-medium: rgba(16, 185, 129, 0.30); --accent-danger-soft: rgba(239, 68, 68, 0.15); --accent-danger-medium: rgba(239, 68, 68, 0.30); /* Schatten. `shadow.glass` der App: indigo-500 bei 15 %. Ein Akzent-Glow bei * 45 % war keine Stufe der Leiter — die Leiter kennt 15 / 30 / 60. */ --shadow-glass: rgba(99, 102, 241, 0.15); /* Die weißen Orbs. 7 %, nur auf dem Band. */ --orb-white: rgba(255, 255, 255, 0.07); /* Die EINE helle Fläche — der Rückfall-Knopf in go.html, wenn der Store * nicht öffnet. In der App ist das `surface.partner`; sie hat eine Aufgabe, * die dunkel nicht lösbar ist, und bleibt so klein wie diese Aufgabe. */ --surface-light: rgba(255, 255, 255, 0.95); --border-on-light: rgba(248, 250, 252, 0.25); /* ── Abstände ─────────────────────────────────────────────────────────── */ --space-xxs: 2px; --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 20px; --space-xxl: 24px; --space-xxxl: 32px; /* ── Radien ───────────────────────────────────────────────────────────── */ --radius-xs: 8px; --radius-sm: 12px; --radius-md: 16px; --radius-lg: 20px; --radius-xl: 28px; --radius-full: 999px; /* ── Blur ─────────────────────────────────────────────────────────────── */ --blur-soft: 20px; --blur-regular: 30px; --blur-strong: 40px; /* ── Bewegung ───────────────────────────────────────────────────────────── * Wird von `prefers-reduced-motion` vollständig auf 0 gesetzt. */ --motion-fast: 120ms; --motion-base: 220ms; --motion-slow: 400ms; /* ── Typografie ─────────────────────────────────────────────────────────── * Die acht Stufen der App, unverändert. Bold (700) ist das Maximum. * Negatives Tracking ab --type-title-m, positives nur bei --type-micro. */ --font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Die Wortmarke — und NUR die Wortmarke. * * Luckiest Guy ist das Schriftlogo der Marke. Die App nutzt es nirgends, sie * hat kein ausgeschriebenes Logo; die Website hat eines, im Kopf und in der * Fußzeile. Das ist keine zweite Textskala und keine neunte Stufe: es ist ein * Logo, und es unterliegt wie das Ornament keiner Typo-Stufe. * * Es ersetzt den Verlauf, der bisher über den Buchstaben lag. Die Regel * "wenn eine Hervorhebung nötig ist, trägt sie das Gewicht oder eine eigene * Zeile, nicht eine Farbe" gilt weiter — hier trägt sie die Form. * * Gehört als Eintrag nach AUSNAHMEN.md; siehe RUECKFRAGEN.md § N-8. */ --font-wordmark: 'Luckiest Guy', 'Nunito', cursive; --type-micro-size: 11px; --type-micro-line: 15px; --type-caption-size: 13px; --type-caption-line: 18px; --type-body-size: 15px; --type-body-line: 22px; --type-emphasis-size: 16px; --type-emphasis-line: 22px; --type-title-s-size: 18px; --type-title-s-line: 24px; --type-title-m-size: 24px; --type-title-m-line: 30px; --type-title-l-size: 28px; --type-title-l-line: 34px; --type-display-size: 34px; --type-display-line: 40px; /* Die drei Web-Verlängerungen derselben Skala — keine zweite Skala. * Die acht App-Stufen sind für 390 pt gerechnet; auf 1080 px Textbreite * ist `display` mit 34 px kein Hero. Darunter gelten die App-Stufen * unverändert weiter. */ --type-display-xl-size: 56px; --type-display-xl-line: 58px; --type-display-l-size: 42px; --type-display-l-line: 46px; --type-body-l-size: 17px; --type-body-l-line: 28px; --tracking-title-m: -0.24px; --tracking-title-l: -0.5px; --tracking-display: -0.85px; --tracking-display-l: -1.0px; --tracking-display-xl: -1.4px; --tracking-micro: 0.2px; } /* ── Die drei Hintergrund-Rollen ─────────────────────────────────────────── * Mehr als drei gibt es nicht. Ein vierter Verlauf ist verboten. */ /* 2 — Kopfverlauf, senkrecht. * * Auf der Website ohne Anwendungsfall, und das ist eine Entscheidung, keine * Auslassung. Auftrag B § 3.2 gibt Datenschutz, Impressum, Kontakt und * Nutzungsbedingungen einen Kopfverlauf. T15 ordnet dieselben Screens * ausdrücklich anders ein: Rechtstexte liegen NICHT auf der Reise, sie tragen * flachen `toolGround` — "hell heißt unterwegs, dunkel heißt verwalten". * * Bei Widerspruch gilt die Spezifikation, nicht der Auftrag. Die Rechtsseiten * bekommen deshalb `.bg-ground`. Die Regel bleibt hier dokumentiert, falls ein * Unterbereich entsteht, der sie braucht: EINE Bandfarbe, gehalten bis 42 %, * dann über den berechneten Mischpunkt auf den Boden — niemals violet → indigo * → blue von oben nach unten. Der Widerspruch ist in RUECKFRAGEN.md § N-4 * gemeldet. * * background: linear-gradient(180deg, * 0%, 42%, rgb(66, 58, 193) 72%, var(--ground) 100%); * (der Mischpunkt gilt für --band-mid; andere Bandfarbe = anderer Mischpunkt) */ /* ── Fokus ───────────────────────────────────────────────────────────────── * Sichtbar auf jedem interaktiven Element. Wird nicht entfernt. */ :where(a, button, summary, [tabindex]):focus-visible { outline: 2px solid var(--border-selected); outline-offset: 2px; border-radius: var(--radius-xs); } /* ── Bewegung anhalten ───────────────────────────────────────────────────── * Die App respektiert `ReduceMotion.System` überall; hier das Gegenstück. */ @media (prefers-reduced-motion: reduce) { :root { --motion-fast: 0ms; --motion-base: 0ms; --motion-slow: 0ms; } html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }