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; }