diff --git a/workspace/assets/css/heim.css b/workspace/assets/css/heim.css index 5742bf04..96c20fd5 100644 --- a/workspace/assets/css/heim.css +++ b/workspace/assets/css/heim.css @@ -1583,3 +1583,79 @@ color: CanvasText; filter: none; } } + +/* =================================================================== + DIE DREI BAHNEN DER UHR GLUEHEN VON INNEN (08.09.2026) + + Filipe: "die minuten sekunden und stunden soll viel spezieller, + krasser und geiler sein, noch vieeeel mehr." + + Die Bahnen waren flache Striche in einem Verlauf -- sauber gebaut, + aber ohne Koerper. Drei Dinge geben ihnen Tiefe, und alle drei + arbeiten mit LICHT statt mit mehr Farbe: + + 1. EIGENLEUCHTEN. Jede Bahn wirft einen Schein in ihrer eigenen + Farbe. Das ist nicht Deko: Auf einem schwarzen Zifferblatt kann + man einen Strich entweder heller machen (dann blendet er) oder + leuchten lassen (dann wirkt er wie eine Anzeige, die Licht + abgibt). Zwei Schatten je Bahn, ein enger und ein weiter -- der + enge gibt die Kante, der weite die Aura. + + 2. DIE SPITZE IST HELLER ALS DER REST. `stroke-linecap: round` plus + ein zweiter, kuerzerer Bogen darueber gibt es hier nicht -- statt + dessen leuchtet die PERLE am Ende staerker (siehe unten). Das + Auge sucht bei einer Uhr die Spitze, nicht den Anfang. + + 3. DIE STUNDE WIRD WARM. Sie lief in Schwarzsilber und war damit + dem Zifferblatt am aehnlichsten -- ausgerechnet die Bahn, die man + am haeufigsten abliest. Sie bekommt jetzt einen Bronzeschimmer: + warm gegen das kalte Blau der Minute und das Rot der Sekunde, und + damit sind alle drei auf einen Blick zu trennen. + + AUGENSCHONEND BLEIBT PFLICHT. Die Uhr steht dauerhaft im Bild. Der + Schein liegt deshalb bei 45 bis 55 Prozent Deckkraft und wird NICHT + animiert -- ein pulsierendes Leuchten am Bildrand ist genau das, was + die Hausregel verbietet. */ +/* DIE SEKUNDE GLUEHT SCHWAECHER ALS DIE ANDEREN BEIDEN, und das ist + Absicht: Sie ist die laengste Bahn, die hellste Farbe und die + einzige, die sich sichtbar bewegt. Mit demselben Schein wie Minute + und Stunde zog sie im Bildschirmfoto den ganzen Blick auf sich -- + ein roter Reifen, neben dem die Uhrzeit selbst zurueckstand. + Nachgesehen, nicht gerechnet. */ +.uhr__sekunde { + stroke-width: 3; + filter: + drop-shadow(0 0 1.5px rgba(255, 118, 132, .8)) + drop-shadow(0 0 6px rgba(255, 70, 90, .3)); +} +.uhr__minute { + stroke-width: 3.4; + filter: + drop-shadow(0 0 2px rgba(120, 200, 255, .95)) + drop-shadow(0 0 8px rgba(70, 165, 245, .48)); +} +.uhr__stunde { + stroke-width: 4; + filter: + drop-shadow(0 0 2px rgba(255, 214, 160, .9)) + drop-shadow(0 0 9px rgba(214, 154, 82, .45)); +} + +/* Die Perle am Ende jeder Bahn ist die Spitze -- dort schaut man hin. + Sie bekommt denselben Schein wie ihre Bahn, nur staerker, und einen + weissen Kern: Das ist der Unterschied zwischen einem farbigen Punkt + und einem Licht. */ +.uhr__perle::before { + box-shadow: + 0 0 0 1px rgba(255, 255, 255, .5), + 0 0 6px 1px currentColor, + 0 0 14px 2px currentColor; +} +.uhr__perle--minute::before { color: rgba(99, 184, 245, .85); } +.uhr__perle--stunde::before { color: rgba(226, 176, 108, .8); } + +@media (prefers-reduced-motion: reduce) { + /* Kein Leuchten ohne Not: Wer weniger Bewegung will, will meist auch + weniger Reiz. Die Bahnen bleiben in voller Farbe stehen. */ + .uhr__sekunde, .uhr__minute, .uhr__stunde { filter: none; } +} diff --git a/workspace/start.html b/workspace/start.html index b0344eaa..97945b08 100644 --- a/workspace/start.html +++ b/workspace/start.html @@ -201,12 +201,19 @@ hell-dunkel-hell-dunkel liest sich als geschliffenes Metall, weil eine gebogene Flaeche das Licht genau so zurueckwirft. --> + - - - - - + + + + +