From f56621ac7731d776cc41943ec90178d06d4b9a2b Mon Sep 17 00:00:00 2001 From: qcigano Date: Tue, 4 Aug 2026 17:25:56 +0200 Subject: [PATCH] =?UTF-8?q?Zugangsseite:=20Gold=20durch=20kr=C3=A4ftiges?= =?UTF-8?q?=20Lila=20ersetzt=20(Badge,=20Kopf-Kiste,=20VanVan-Fenster)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Neue Farbvariablen --c-lila/--c-lila-hover (sattes, kräftiges Violett) ersetzen das bisherige Gold/Gelb überall dort, wo es verwendet wurde: "Noch nicht öffentlich"-Badge, Verlaufsrand der Kopf-Kiste, sowie komplett das VanVan-Fenster (Rand, Avatar-Glow, Name, Eingabefeld-Fokus, Button). Gelbes Herz-Emoji im VanVan-Button ebenfalls zu einem violetten Herz gewechselt, damit nichts mehr gold/gelb übrig bleibt. Dogis Cyan-Fenster bleibt unverändert. Per Build + Browsertest verifiziert: neue Farbe korrekt angezeigt, Login-Funktion unverändert. --- public/gate.html | 34 +++++++++++++++++++--------------- 1 file changed, 19 insertions(+), 15 deletions(-) diff --git a/public/gate.html b/public/gate.html index 41d5f4a..981c36e 100644 --- a/public/gate.html +++ b/public/gate.html @@ -16,8 +16,12 @@ --c-accent: #5fd3ec; --c-accent-hover: #3ca9c2; --c-purple-glow: #9b7fd6; - --c-gold: #e3b23c; - --c-gold-hover: #c99527; + /* 04.08.2026, auf ausdrücklichen Wunsch ("geiles spezielles lila"): ersetzt das vorherige + Gold/Gelb (VanVan-Fenster + Badge/Kopf-Kiste) durch ein kräftigeres, sattes Violett — im + Gegensatz zu --c-purple-glow (heller, für Verlaufsränder/Deko gedacht) hier bewusst + satter/dunkler gewählt, damit Text/Buttons in Vollfarbe genug Kontrast und "Wumms" haben. */ + --c-lila: #a875f5; + --c-lila-hover: #7c3aed; --radius-l: 22px; --radius-m: 16px; --ease: cubic-bezier(0.22, 1, 0.36, 1); @@ -92,7 +96,7 @@ qciga, eins für VanVan — im Stil einer anderen, bereits bestehenden Zwei-Personen-Zugangsseite, aber komplett an Van's eigene Marke angepasst (Farben/Schrift/Wasserzeichen unverändert, siehe Branding.md: kein Babyblau/Rot-Look von anderen Projekten, sondern die eigene Lila/Anthrazit/ - Hellblau/Gold-Welt). Technisch ändert sich nichts: /gate-auth erkennt die Rolle ohnehin selbst + Hellblau/Lila-Welt). Technisch ändert sich nichts: /gate-auth erkennt die Rolle ohnehin selbst anhand DES CODES, nicht danach, welches Fenster benutzt wurde — die Aufteilung ist rein dafür da, dass jede/r sofort das eigene Feld findet, statt raten zu müssen. */ .gate-wrap { @@ -115,7 +119,7 @@ border: 1.5px solid transparent; background: linear-gradient(165deg, var(--c-anthracite-light), var(--c-anthracite)) padding-box, - linear-gradient(120deg, var(--c-accent), var(--c-purple-glow), var(--c-gold), var(--c-accent)) border-box; + linear-gradient(120deg, var(--c-accent), var(--c-purple-glow), var(--c-lila), var(--c-accent)) border-box; background-size: 100% 100%, 300% 100%; animation: gate-border-shift 9s ease-in-out infinite; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.7); @@ -141,9 +145,9 @@ font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; - color: var(--c-gold); - background: color-mix(in srgb, var(--c-gold) 16%, transparent); - border: 1px solid color-mix(in srgb, var(--c-gold) 40%, transparent); + color: var(--c-lila); + background: color-mix(in srgb, var(--c-lila) 16%, transparent); + border: 1px solid color-mix(in srgb, var(--c-lila) 40%, transparent); border-radius: 999px; padding: 0.3rem 0.9rem; margin-bottom: 1rem; @@ -187,7 +191,7 @@ .gate-card-vanvan { background: linear-gradient(165deg, var(--c-anthracite-light), var(--c-anthracite)) padding-box, - linear-gradient(120deg, var(--c-gold), var(--c-purple-glow), var(--c-accent), var(--c-gold)) border-box; + linear-gradient(120deg, var(--c-lila), var(--c-purple-glow), var(--c-accent), var(--c-lila)) border-box; } @keyframes gate-border-shift { 0%, 100% { background-position: 0 0, 0% 50%; } @@ -233,7 +237,7 @@ animation: gate-avatar-pulse 3.2s ease-in-out infinite; } .gate-card-qciga .gate-avatar-glow { background: radial-gradient(circle, color-mix(in srgb, var(--c-accent) 70%, transparent), transparent 72%); } - .gate-card-vanvan .gate-avatar-glow { background: radial-gradient(circle, color-mix(in srgb, var(--c-gold) 70%, transparent), transparent 72%); } + .gate-card-vanvan .gate-avatar-glow { background: radial-gradient(circle, color-mix(in srgb, var(--c-lila) 70%, transparent), transparent 72%); } @keyframes gate-avatar-pulse { 0%, 100% { opacity: 0.45; transform: scale(1); } 50% { opacity: 0.85; transform: scale(1.12); } @@ -254,7 +258,7 @@ .gate-card-qciga .gate-avatar-photo, .gate-card-qciga .gate-avatar-icon { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 50%, transparent), 0 10px 26px -10px rgba(0, 0, 0, 0.7); } .gate-card-vanvan .gate-avatar-photo, - .gate-card-vanvan .gate-avatar-icon { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-gold) 50%, transparent), 0 10px 26px -10px rgba(0, 0, 0, 0.7); } + .gate-card-vanvan .gate-avatar-icon { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-lila) 50%, transparent), 0 10px 26px -10px rgba(0, 0, 0, 0.7); } .gate-avatar-icon { font-size: 2.1rem; } .gate-card h2 { @@ -264,7 +268,7 @@ margin: 0 0 1.1rem; } .gate-card-qciga h2 { color: var(--c-accent); } - .gate-card-vanvan h2 { color: var(--c-gold); } + .gate-card-vanvan h2 { color: var(--c-lila); } .gate-card input { width: 100%; @@ -280,7 +284,7 @@ font-family: inherit; } .gate-card-qciga input:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 25%, transparent); } - .gate-card-vanvan input:focus { outline: none; border-color: var(--c-gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-gold) 25%, transparent); } + .gate-card-vanvan input:focus { outline: none; border-color: var(--c-lila); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-lila) 25%, transparent); } .gate-card button { width: 100%; @@ -294,8 +298,8 @@ } .gate-card-qciga button { background: linear-gradient(120deg, var(--c-accent), var(--c-accent-hover)); color: var(--c-black); } .gate-card-qciga button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--c-accent) 60%, transparent); } - .gate-card-vanvan button { background: linear-gradient(120deg, var(--c-gold), var(--c-gold-hover)); color: var(--c-black); } - .gate-card-vanvan button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--c-gold) 60%, transparent); } + .gate-card-vanvan button { background: linear-gradient(120deg, var(--c-lila), var(--c-lila-hover)); color: var(--c-black); } + .gate-card-vanvan button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--c-lila) 60%, transparent); } .gate-fehler { color: #ff9a9a; @@ -337,7 +341,7 @@
- +