Der eigene Name leuchtet in der eigenen Rollenfarbe

Filipe, screen35: "die begrüßungen sollen auch viel krasser und geiler
sein, so richtig auffällig. so dass die leute motivation bekommen weil es
so geil aussieht."

NICHT UEBER DIE GROESSE, und das ist der Kern. Genau die habe ich heute
frueh von 88 auf 56 px zurueckgenommen: In der Anrede-Pille steckt ein
<h1> mit Titelgroesse, dadurch standen ZWEI Ueberschriften uebereinander.
Sie jetzt wieder aufzublasen hiesse, denselben Fehler ein zweites Mal zu
machen. "Auffaellig" heisst ohnehin nicht "gross", sondern "hebt sich ab".

Der Name hebt sich ueber die FARBE ab: Er traegt einen Verlauf in
`--r-haupt`, der Farbe der angemeldeten Rolle. Jeder sieht damit seinen
eigenen Namen in seiner eigenen Farbe -- nachgemessen: DogFather #7ec8f2
(babyblau), Scout #5fc99a (gruen), Creator #c79a6d (bronze). Das ist der
Unterschied zwischen "da steht mein Name" und "das hier ist meins".

Der Gruss davor bleibt bewusst leise und farblos. Wenn beides leuchtet,
leuchtet nichts -- die Betonung gehoert dem Namen, nicht der Uhrzeit.

Mit derselben Sicherung wie beim Schriftzug in der Kopfleiste: `color`
steht zuerst und sichtbar da, Verlauf und durchsichtige Fuellung stehen
nur im @supports-Block, und bei `forced-colors: active` wird alles
zurueckgenommen. Durchsichtige Schrift ohne Rueckfallwert waere ein
Ausfall, kein Schoenheitsfehler.

Das Leuchten liegt als `drop-shadow` HINTER der Schrift -- es gibt dem
Namen Tiefe, ohne ihn zu vergroessern.

pruef-start-ansicht EXIT=0, 140 Pruefungen.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
2026-09-08 13:16:10 +02:00
co-authored by Claude Opus 5
parent 8b317b23e2
commit c262537b89
+57
View File
@@ -1526,3 +1526,60 @@
transition: filter var(--tempo);
}
.kopfleiste:hover .marke::after { filter: brightness(1.2); }
/* ===================================================================
DIE BEGRUESSUNG SOLL MOTIVIEREN (08.09.2026)
Filipe, screen35: "die begrüßungen sollen auch viel krasser und geiler
sein, so richtig auffällig. so dass die leute motivation bekommen weil
es so geil aussieht."
NICHT UEBER DIE GROESSE. Genau die habe ich heute frueh von 88 auf
56 px zurueckgenommen, weil in der Pille ein <h1> mit Titelgroesse
steckte und damit ZWEI Ueberschriften uebereinander standen. Das
wieder aufzublasen hiesse, denselben Fehler noch einmal zu machen --
und "auffaellig" heisst ohnehin nicht "gross", sondern "hebt sich ab".
Der Name hebt sich jetzt ueber die FARBE ab: Er traegt einen Verlauf
in der Farbe der eigenen Rolle (`--r-haupt`, gesetzt am <html>). Jeder
sieht dadurch seinen eigenen Namen in seiner eigenen Farbe -- Spicy
rot, Dogi babyblau, ein Manager lila, ein Scout gruen, ein Creator
bronze. Das ist der Unterschied zwischen "da steht mein Name" und "das
hier ist meins".
Der Gruss davor bleibt bewusst leise und ohne Farbe. Wenn beides
leuchtet, leuchtet nichts -- die Betonung liegt auf dem Namen, nicht
auf der Uhrzeit.
MIT SICHERUNG, wie beim Schriftzug in der Kopfleiste: `color` steht
zuerst und sichtbar da, der Verlauf kommt nur im @supports-Block dazu,
und im Kontrastmodus wird alles zurueckgenommen. Durchsichtige Schrift
ohne Rueckfallwert waere ein Ausfall, kein Schoenheitsfehler. */
.zgruss .gruss__wort {
color: rgba(190, 210, 232, .82);
font-weight: 500;
}
.zgruss .gruss__name {
color: #eaf3fc;
font-weight: 800;
letter-spacing: -.01em;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
.zgruss .gruss__name {
background: linear-gradient(96deg,
color-mix(in srgb, var(--r-haupt) 34%, #ffffff) 0%,
var(--r-haupt) 52%,
color-mix(in srgb, var(--r-haupt) 62%, #ffffff) 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
/* Das Leuchten liegt HINTER der Schrift und wird vom Zuschnitt
nicht erfasst -- es gibt dem Namen Tiefe, ohne ihn zu vergroessern. */
filter: drop-shadow(0 0 10px color-mix(in srgb, var(--r-haupt) 45%, transparent));
}
}
@media (forced-colors: active) {
.zgruss .gruss__name {
background: none; -webkit-text-fill-color: currentColor;
color: CanvasText; filter: none;
}
}