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:
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user