Red Ralf Mode: komplettes Kompass-Design (dunkles Rot + Gold)
Build & Deploy / deploy (push) Successful in 18s
Build & Deploy / deploy (push) Successful in 18s
- CSS-Variablen auf Rot/Gold umgestellt, Fokus-Ringe gold - Gradient-Umleitung: Pink/Violett -> Rot-Toene, Blau -> Gold - Gold-Creme Texte, Gold-Rand auf Glass-Karten, Maroon-Navigation - Glow-Schatten warm, Kategorien + Chips + Ringe angeglichen
This commit is contained in:
Kimi Work
@@ -6,7 +6,7 @@ export function useRedMode(aktiv: boolean) {
|
||||
document.body.classList.toggle('red-mode', aktiv)
|
||||
const meta = document.querySelector('meta[name="theme-color"]')
|
||||
const vorher = meta?.getAttribute('content')
|
||||
if (meta) meta.setAttribute('content', aktiv ? '#1f060b' : '#170a2e')
|
||||
if (meta) meta.setAttribute('content', aktiv ? '#16040a' : '#170a2e')
|
||||
|
||||
const icon = document.querySelector<HTMLLinkElement>('link[rel="icon"]')
|
||||
const iconOriginal = icon?.getAttribute('href') ?? ''
|
||||
|
||||
+95
-14
@@ -136,28 +136,109 @@
|
||||
animation: glanzen 3.5s linear infinite;
|
||||
}
|
||||
|
||||
/* ── Red Mode (FSK 18): rote Design-Welt ────────────────── */
|
||||
/* ── Red Ralf Mode (FSK 18): Kompass-Design – dunkles Rot + Gold ── */
|
||||
body.red-mode {
|
||||
/* shadcn/CSS-Variablen auf die Rot-Gold-Welt umstellen */
|
||||
--background: 345 65% 6%;
|
||||
--foreground: 36 45% 94%;
|
||||
--card: 346 50% 11%;
|
||||
--card-foreground: 36 45% 94%;
|
||||
--popover: 346 50% 10%;
|
||||
--popover-foreground: 36 45% 94%;
|
||||
--primary: 350 80% 42%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--secondary: 346 35% 16%;
|
||||
--secondary-foreground: 36 45% 92%;
|
||||
--muted: 346 30% 15%;
|
||||
--muted-foreground: 30 15% 68%;
|
||||
--accent: 40 90% 50%;
|
||||
--accent-foreground: 28 60% 10%;
|
||||
--destructive: 0 84% 55%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--border: 30 35% 24%;
|
||||
--input: 30 35% 24%;
|
||||
--ring: 40 90% 55%;
|
||||
|
||||
background-image:
|
||||
radial-gradient(ellipse 80% 50% at 50% -10%, rgba(239, 68, 68, 0.32), transparent),
|
||||
radial-gradient(ellipse 60% 40% at 100% 0%, rgba(244, 63, 94, 0.22), transparent),
|
||||
radial-gradient(ellipse 60% 40% at 0% 100%, rgba(190, 18, 60, 0.2), transparent),
|
||||
linear-gradient(180deg, #1f060b 0%, #2a0710 55%, #1a0409 100%);
|
||||
radial-gradient(ellipse 80% 50% at 50% -10%, rgba(220, 38, 38, 0.28), transparent),
|
||||
radial-gradient(ellipse 60% 40% at 100% 0%, rgba(245, 158, 11, 0.10), transparent),
|
||||
radial-gradient(ellipse 70% 50% at 0% 100%, rgba(136, 19, 55, 0.28), transparent),
|
||||
linear-gradient(180deg, #16040a 0%, #220710 55%, #120308 100%);
|
||||
}
|
||||
|
||||
/* Goldener Glanz für Überschriften und der Code */
|
||||
body.red-mode .text-gradient {
|
||||
background-image: linear-gradient(to right, #f87171, #fb7185, #f472b6);
|
||||
}
|
||||
body.red-mode nav.fixed {
|
||||
background-color: rgb(38 8 14 / 0.88);
|
||||
border-color: rgba(248, 113, 113, 0.18);
|
||||
}
|
||||
body.red-mode .glanz {
|
||||
background-image: linear-gradient(90deg, #ef4444, #e11d48, #be123c, #e11d48, #ef4444) !important;
|
||||
background-image: linear-gradient(to right, #fde68a, #fbbf24, #d97706);
|
||||
}
|
||||
|
||||
/* Glass-Karten: dunkles Rot mit Gold-Saum */
|
||||
body.red-mode .glass-card {
|
||||
border-color: rgba(248, 113, 113, 0.14);
|
||||
background: rgba(48, 10, 18, 0.55);
|
||||
border-color: rgba(251, 191, 36, 0.16);
|
||||
}
|
||||
|
||||
/* Bottom Navigation: Maroon mit Gold-Akzent */
|
||||
body.red-mode nav.fixed {
|
||||
background-color: rgb(30 6 12 / 0.9);
|
||||
border-color: rgba(251, 191, 36, 0.15);
|
||||
}
|
||||
body.red-mode .text-pink-400 { color: #fbbf24; }
|
||||
body.red-mode .bg-pink-400\/15 { background-color: rgba(251, 191, 36, 0.14); }
|
||||
body.red-mode [class*="244,114,182"] { box-shadow: 0 0 16px rgba(251, 191, 36, 0.3) !important; }
|
||||
|
||||
/* Schimmernde CTA-Flächen: dunkelrot mit goldenem Streifen */
|
||||
body.red-mode .glanz {
|
||||
background-image: linear-gradient(90deg, #7f1d1d, #b91c1c, #d97706, #b91c1c, #7f1d1d) !important;
|
||||
}
|
||||
|
||||
/* Violette/fuchsia Texte -> Gold-Creme */
|
||||
body.red-mode .text-violet-300 { color: #fcd34d; }
|
||||
body.red-mode .text-violet-200 { color: #fde68a; }
|
||||
body.red-mode .text-fuchsia-400 { color: #fbbf24; }
|
||||
body.red-mode .bg-violet-400\/10 { background-color: rgba(251, 191, 36, 0.08); }
|
||||
body.red-mode .bg-violet-400\/15 { background-color: rgba(251, 191, 36, 0.12); }
|
||||
body.red-mode .border-violet-400\/25 { border-color: rgba(251, 191, 36, 0.2); }
|
||||
body.red-mode .border-violet-400\/30 { border-color: rgba(251, 191, 36, 0.25); }
|
||||
|
||||
/* Glow-Schatten der CTA-Buttons -> warmes Rot */
|
||||
body.red-mode [class*="217,70,239"] { box-shadow: 0 10px 30px rgba(190, 18, 60, 0.45) !important; }
|
||||
body.red-mode [class*="139,92,246"] { box-shadow: 0 10px 30px rgba(136, 19, 55, 0.5) !important; }
|
||||
|
||||
/* Gradient-Umleitung: Pink/Violett-Welt -> Rot, Blau -> Gold, Kartenrueckseite */
|
||||
body.red-mode .from-pink-500 { --tw-gradient-from: #dc2626; }
|
||||
body.red-mode .to-rose-500 { --tw-gradient-to: #991b1b; }
|
||||
body.red-mode .to-rose-600 { --tw-gradient-to: #7f1d1d; }
|
||||
body.red-mode .from-pink-400 { --tw-gradient-from: #fb7185; }
|
||||
body.red-mode .to-pink-600 { --tw-gradient-to: #881337; }
|
||||
body.red-mode .from-violet-500 { --tw-gradient-from: #be123c; }
|
||||
body.red-mode .from-violet-400 { --tw-gradient-from: #f43f5e; }
|
||||
body.red-mode .to-violet-500 { --tw-gradient-to: #881337; }
|
||||
body.red-mode .to-purple-600 { --tw-gradient-to: #4c0519; }
|
||||
body.red-mode .from-fuchsia-400 { --tw-gradient-from: #e11d48; }
|
||||
body.red-mode .to-fuchsia-500 { --tw-gradient-to: #9f1239; }
|
||||
body.red-mode .to-fuchsia-600 { --tw-gradient-to: #881337; }
|
||||
body.red-mode .from-sky-500 { --tw-gradient-from: #f59e0b; }
|
||||
body.red-mode .from-sky-400 { --tw-gradient-from: #fbbf24; }
|
||||
body.red-mode .to-blue-600 { --tw-gradient-to: #78350f; }
|
||||
body.red-mode .to-blue-500 { --tw-gradient-to: #92400e; }
|
||||
body.red-mode .from-yellow-300 { --tw-gradient-from: #fde68a; }
|
||||
body.red-mode .to-amber-400 { --tw-gradient-to: #f59e0b; }
|
||||
body.red-mode .from-\[\#2a1550\] { --tw-gradient-from: #3d0a16; }
|
||||
body.red-mode .to-\[\#1b0f38\] { --tw-gradient-to: #20050d; }
|
||||
body.red-mode .from-emerald-400 { --tw-gradient-from: #ca8a04; }
|
||||
body.red-mode .to-teal-600 { --tw-gradient-to: #713f12; }
|
||||
|
||||
/* Kategorie-Chips und Ringe in die Gold-Welt ziehen */
|
||||
body.red-mode .text-sky-300 { color: #fde68a; }
|
||||
body.red-mode .text-emerald-300 { color: #fcd34d; }
|
||||
body.red-mode .bg-sky-400\/15 { background-color: rgba(251, 191, 36, 0.12); }
|
||||
body.red-mode .bg-emerald-400\/15 { background-color: rgba(202, 138, 4, 0.14); }
|
||||
body.red-mode .border-sky-400\/30 { border-color: rgba(251, 191, 36, 0.25); }
|
||||
body.red-mode .border-emerald-400\/30 { border-color: rgba(202, 138, 4, 0.28); }
|
||||
body.red-mode .ring-sky-400\/40 { --tw-ring-color: rgb(251 191 36 / 0.4); }
|
||||
body.red-mode .ring-violet-400\/40 { --tw-ring-color: rgb(245 158 11 / 0.4); }
|
||||
body.red-mode .ring-emerald-400\/40 { --tw-ring-color: rgb(217 119 6 / 0.4); }
|
||||
|
||||
/* Zahlen-Chips der Hero-Sektion */
|
||||
.zahlen-chip {
|
||||
@apply flex h-9 w-9 items-center justify-center rounded-xl font-display text-lg font-semibold shadow-lg;
|
||||
|
||||
Reference in New Issue
Block a user