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:
2026-08-02 00:51:29 +02:00
parent 276a5cf97b
commit 9484bc60a0
2 changed files with 40 additions and 10 deletions
+26 -1
View File
@@ -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) —