Sprachumschalter: Farben stärker + auch über die Schrift, Polarlicht-Leuchten
Kräftigere, gesättigtere Akzentfarbe pro Sprache (glut) statt der eher stumpfen Original-Flaggentöne. Die Farbe liegt jetzt nicht mehr nur auf der Kugel, sondern auch auf dem Sprachcode-Text (DE/EN/...) und den Dropdown-Einträgen, inklusive leuchtendem text-shadow. Sanft pulsierender Glow-Effekt (Helligkeit/Sättigung, alle 3,2s) sorgt für den gewünschten "Polarlicht"-Charakter, respektiert aber prefers-reduced-motion.
This commit is contained in:
+26
-1
@@ -212,8 +212,33 @@ header.site-header {
|
||||
box-shadow:
|
||||
inset -2px -2px 4px rgba(0, 0, 0, .45),
|
||||
inset 2px 2px 3px rgba(255, 255, 255, .55),
|
||||
0 0 5px rgba(0, 0, 0, .35);
|
||||
0 0 7px 1px color-mix(in srgb, var(--sprach-glut, transparent) 85%, transparent),
|
||||
0 0 16px 2px color-mix(in srgb, var(--sprach-glut, transparent) 55%, transparent);
|
||||
flex-shrink: 0;
|
||||
animation: sprach-glut-puls 3.2s ease-in-out infinite;
|
||||
}
|
||||
/* Die Sprachfarbe zieht sich jetzt auch über die Schrift — kräftiger,
|
||||
leuchtender Text statt neutralem Weiß, plus ein sanft pulsierender
|
||||
Schein (dieselbe "Polarlicht"-Idee wie beim Bewerben-Knopf/den
|
||||
Foto-Rahmen, nur in der jeweiligen Sprachfarbe). */
|
||||
.sprach-schalter > button,
|
||||
.sprach-schalter .nav-dropdown a {
|
||||
color: var(--sprach-glut, var(--text));
|
||||
text-shadow:
|
||||
0 0 6px color-mix(in srgb, var(--sprach-glut, transparent) 70%, transparent),
|
||||
0 0 14px color-mix(in srgb, var(--sprach-glut, transparent) 45%, transparent);
|
||||
}
|
||||
.sprach-schalter .nav-dropdown a:hover,
|
||||
.sprach-schalter .nav-dropdown a.active {
|
||||
background: color-mix(in srgb, var(--sprach-glut, var(--bg-alt)) 16%, var(--bg-alt));
|
||||
}
|
||||
.sprach-kurz { animation: sprach-glut-puls 3.2s ease-in-out infinite; display: inline-block; }
|
||||
@keyframes sprach-glut-puls {
|
||||
0%, 100% { filter: brightness(1) saturate(1); }
|
||||
50% { filter: brightness(1.25) saturate(1.3); }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.sprach-kugel, .sprach-kurz { animation: none; }
|
||||
}
|
||||
|
||||
/* "Bewerben" ist der Treffpunkt beider Welten (Team Dogi + Spicy Media) —
|
||||
|
||||
Reference in New Issue
Block a user