/* ═══════════════════════════════════════════════════════════════════════════ Midnight Garage — Aufsatz auf den geteilten Compass-Stylesheet. style.css sagt es selbst: „keep using var(--gold) / var(--red), not raw hex … remapping the values restyles the whole site coherently". Genau das passiert hier. Die ~2100 Regeln bleiben unangetastet; nur die Werte wechseln von Gold auf Werkstatt-Bernstein. Deshalb heissen die Variablen weiterhin --gold: sie umzubenennen hiesse, den geteilten Stylesheet zu forken. ⚠️ Die Werte sind DIESELBEN wie in der App (midnight_garage/lib/core/theme/app_palette.dart, kPaletteForge). Aendert sich dort einer, gehoert er hier nachgezogen — sonst sieht derselbe Mensch in App und Browser zwei verschiedene Produkte. Reihenfolge im : fonts.css → style.css → garage.css ═══════════════════════════════════════════════════════════════════════════ */ :root { /* Nacht bleibt Nacht — das ist die Familie. Der Akzent wandert vom Uhrmacher-Gold auf das Bernstein einer Werkstattlampe. Bewusst deutlich oranger als Compass-Gold (#C9A227): die beiden Seiten stehen im selben Menue nebeneinander. */ --gold: #E8913C; --gold-soft: #F4B571; --blue: #E8913C; --blue-dim: rgba(232,145,60,0.14); --blue-glow: rgba(232,145,60,0.30); --purple: #B96A22; /* gedaempft, fuer Sekundaerflaechen */ --orange: #F4B571; --green: #EFE7DC; /* „positiv" liest sich hier als warmes Weiss */ --red: #A3182A; /* bleibt: Fehler und Loeschen sollen nicht warm sein */ /* Die Flaechen tragen einen warmen Stich, damit das Bernstein nicht auf kaltem Grau steht. Gleich der App-Palette. */ --surface: #120F0C; --surface-2: #1B1611; --surface-3: #251E17; --card-bg: #120F0C; --text: #F7F3EE; --text-2: #9C9186; --text-muted: #9C9186; --text-3: #4C443C; --border: rgba(232,145,60,0.13); --border-2: rgba(232,145,60,0.24); } /* ── Lecks im geteilten Stylesheet ────────────────────────────────────────── Stellen in style.css, die ihre Farbe als rohes Hex tragen und damit an den Variablen vorbeigehen. Ohne diese Korrekturen leuchtet auf einer bernstein- farbenen Seite ein blauer Schein und ein goldener Sprachschalter. ⚠️ Die Liste in quests.css ist UNVOLLSTAENDIG — dort fehlen die vier hero-Glows, weshalb die gruene Quests-Seite bis heute blau leuchtet. Hier stehen sie mit. */ .btn-primary:hover { background: var(--gold-soft); box-shadow: 0 4px 16px var(--blue-glow); } .btn-primary { color: #140C05; } /* dunkle Schrift auf hellem Akzent */ .lang-btn.lang-active { background: rgba(232,145,60,.18) !important; } .lang-btn.lang-active::after { background: rgba(232,145,60,.16); } .footer-mark { filter: drop-shadow(0 0 18px rgba(232,145,60,.30)); } /* Die vier, die quests.css uebersehen hat (style.css:213, 218, 230, 280). */ .hero-glow-1 { background: radial-gradient(circle, rgba(232,145,60,0.12), transparent 70%); } .hero-glow-2 { background: radial-gradient(circle, rgba(185,106,34,0.10), transparent 70%); } .hero-badge { border-color: rgba(232,145,60,0.25); } .hero-dial { border-color: rgba(232,145,60,0.2); } /* ── Teile, die style.css nicht kennt ─────────────────────────────────────── */ .mg-mark { width: 1.15em; height: 1.15em; color: var(--gold); } .hero-logo-svg { width: 68px; height: 68px; margin: 0 auto 18px; display: block; } .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; } .feature-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; } .feature-icon { font-size: 26px; margin-bottom: 10px; } .feature-title { font-size: 17px; font-weight: 800; margin: 0 0 8px; color: var(--text); } .feature-text { font-size: 14px; line-height: 1.6; color: var(--text-2); margin: 0; } /* Die drei Rollen nebeneinander. */ .mg-roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; } .mg-role { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 8px; } .mg-role .g { font-size: 26px; } .mg-role b { color: var(--text); font-size: 16px; } .mg-role span { color: var(--text-2); font-size: 14px; line-height: 1.55; } /* Der Hinweiskasten, der ehrlich sagt, dass es die App noch nicht gibt. */ .mg-soon { background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius-lg); padding: 22px 24px; margin-top: 28px; } .mg-soon h3 { margin: 0 0 10px; font-size: 16px; color: var(--gold); } .mg-soon p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--text-2); } .mg-note { color: var(--text-3); font-size: 13px; line-height: 1.6; margin-top: 18px; } .mg-note a { color: var(--text-2); } /* Der Status-Streifen unter dem Titel. */ .mg-status { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px; border-radius: 999px; background: var(--blue-dim); border: 1px solid var(--border-2); color: var(--gold); font-size: 13px; font-weight: 700; letter-spacing: .04em; } .mg-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--blue-glow); }