From e282ad3b44f8a13920ec5b3ab0e8ad62c2d3b2e2 Mon Sep 17 00:00:00 2001 From: Dogfather Date: Tue, 8 Sep 2026 13:19:47 +0200 Subject: [PATCH] Der Anmelde-Knopf traegt beide Marken -- und wurde erst durch Nachrechnen lesbar Filipe, screen28: "dieser anmelde button soll noch viel spezieller sein bitte. und viel geiler." NUR DIESER EINE KNOPF. Er traegt die Klasse `.knopf`, die im Workspace an Dutzenden Stellen haengt -- wer sie aendert, aendert jeden Knopf im Haus. Die Regel greift deshalb ueber `#knopf` und laesst alle anderen in Ruhe. Der Verlauf laeuft vom Chili-Rot von Spicy Media in das Blau von Dogi -- dieselbe Klammer wie im Schriftzug der Kopfleiste, und hier besonders am Platz: Dieser Knopf ist die Tuer ins Haus. UND DANN HAT MICH DIE RECHNUNG WIDERLEGT. Der erste Entwurf nahm die Marken-Toene direkt (#d94a3f bis #7ec8f2). Er sah gut aus -- genau das ist die Falle. Nachgerechnet lag weisser Text darauf bei: #d94a3f 4,20:1 #6ca8d8 2,55:1 #e2664a 3,37:1 #7ec8f2 1,84:1 Auf dem hellsten Punkt also nicht einmal beim halben Mindestwert. Ich hatte im Kommentar daneben "ueber 4,5:1 an jeder Stelle" behauptet, ohne es nachzurechnen. Der Knopf waere schoen und unlesbar gewesen. Jeder Stuetzpunkt ist jetzt so weit abgedunkelt, bis weisser Text 4,6:1 erreicht -- knapp ueber der Grenze, damit Rundungen nicht darunter rutschen. Die Farben bleiben erkennbar Rot und Blau, sie sind nur tiefer. Schlechtester Wert jetzt 4,63:1. MERKSATZ, der auch fuer jeden naechsten Verlauf gilt: Ein Verlauf ist so lesbar wie sein HELLSTER Punkt, nicht wie sein Durchschnitt. Beim Textverlauf in der Kopfleiste war es dieselbe Regel mit umgekehrtem Vorzeichen -- dort zaehlt der dunkelste. Der Glanz wandert beim Ueberfahren statt zu pulsieren (wie Manager-Stern und Kalender-Knopf), bei `prefers-reduced-motion` entfaellt er. Waehrend der Anmeldung wird der Knopf ruhig gestellt, damit der Ladepunkt die Aufmerksamkeit bekommt und nicht der Glanz. pruef-start-ansicht EXIT=0 (140), pruef-css-klassen EXIT=0. Co-Authored-By: Claude Opus 5 --- workspace/assets/css/gate.css | 83 +++++++++++++++++++++++++++++++++++ 1 file changed, 83 insertions(+) diff --git a/workspace/assets/css/gate.css b/workspace/assets/css/gate.css index 7d30878e..91105465 100644 --- a/workspace/assets/css/gate.css +++ b/workspace/assets/css/gate.css @@ -2001,3 +2001,86 @@ body.gate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wahl2__eintrag { display: flex; align-items: center; gap: 10px; } + +/* =================================================================== + DER ANMELDE-KNOPF (08.09.2026) + + Filipe, screen28: "dieser anmelde button soll noch viel spezieller + sein bitte. und viel geiler." + + NUR DIESER EINE. Er traegt die Klasse `.knopf`, die im ganzen + Workspace an Dutzenden Stellen haengt -- wer sie aendert, aendert + jeden Knopf im Haus. Deshalb greift diese Regel ueber `#knopf`, die + Kennung des Anmelde-Knopfes, und laesst alle anderen in Ruhe. + + ER TRAEGT BEIDE MARKEN. Der Verlauf laeuft vom Chili-Rot von Spicy + Media in das Babyblau von Dogi -- dieselbe Klammer wie im Schriftzug + der Kopfleiste, und hier ist sie besonders am Platz: Dieser Knopf ist + die Tuer ins Haus. Wer ihn drueckt, betritt "Spicy & Dogi". + + Der Text bleibt WEISS und bekommt keinen Verlauf. Auf einer farbigen + Flaeche ist durchsichtige Schrift doppelt riskant -- sie haengt an + einer Technik UND steht auf wechselndem Untergrund. + + DIE FARBEN SIND ABGEDUNKELT, und das war eine Korrektur an mir + selbst. Der erste Entwurf nahm die Marken-Toene direkt: #d94a3f bis + #7ec8f2. Er sah gut aus, und genau das ist die Falle -- nachgerechnet + lag weisser Text darauf bei 4,20 / 3,37 / 2,55 / 1,84 zu 1. Auf dem + hellsten Punkt also nicht einmal beim halben Mindestwert. Ich hatte + an dieser Stelle "ueber 4,5:1 an jeder Stelle" behauptet, ohne es + nachzurechnen; die Zahl hat mich widerlegt. + + Jeder Stuetzpunkt ist deshalb so weit abgedunkelt, bis weisser Text + 4,6:1 erreicht -- knapp ueber der Grenze, damit Rundungen nicht + darunter rutschen. Die Farben bleiben erkennbar Rot und Blau, sie + sind nur tiefer. Ein Verlauf ist so lesbar wie sein HELLSTER Punkt, + nicht wie sein Durchschnitt. + + Der Glanz wandert beim Ueberfahren, statt zu pulsieren -- derselbe + Grund wie beim Manager-Stern und beim Kalender-Knopf: Glanz ist + etwas, das sich bewegt. Bei `prefers-reduced-motion` entfaellt er; + der Knopf bleibt kraeftig, er glaenzt nur nicht. */ +#knopf { + position: relative; overflow: hidden; + width: 100%; + padding: 15px 22px; + font-size: 1.02rem; font-weight: 750; letter-spacing: .015em; + color: #fff; + border: 0; + border-radius: 14px; + background: + linear-gradient(100deg, #cc463b 0%, #bc553d 34%, #4e799c 74%, #4d7a94 100%); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, .28), + inset 0 -2px 0 rgba(0, 0, 0, .22), + 0 10px 26px -14px rgba(217, 74, 63, .9), + 0 10px 26px -16px rgba(126, 200, 242, .8); + transition: transform var(--tempo), box-shadow var(--tempo), filter var(--tempo); +} +#knopf:hover:not([disabled]) { + transform: translateY(-1px); + filter: saturate(1.08) brightness(1.04); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, .34), + inset 0 -2px 0 rgba(0, 0, 0, .22), + 0 14px 30px -12px rgba(217, 74, 63, .95), + 0 14px 30px -14px rgba(126, 200, 242, .85); +} +#knopf:active:not([disabled]) { transform: translateY(0); } +#knopf::after { + content: ""; + position: absolute; inset: 0; + background: linear-gradient(105deg, transparent 40%, + rgba(255, 255, 255, .3) 50%, transparent 60%); + transform: translateX(-130%); + transition: transform .6s cubic-bezier(.4, 0, .2, 1); + pointer-events: none; +} +#knopf:hover:not([disabled])::after { transform: translateX(130%); } +@media (prefers-reduced-motion: reduce) { + #knopf::after { display: none; } + #knopf:hover:not([disabled]) { transform: none; } +} +/* Waehrend der Anmeldung: ruhig stellen, damit der Ladepunkt die + Aufmerksamkeit bekommt und nicht der Glanz. */ +#knopf[disabled] { filter: saturate(.7) brightness(.85); box-shadow: none; }