Sprachknopf: Hintergrund leuchtend schwarz statt bunt gefüllt

Aurora-Farbwolke im Knopf-Hintergrund deutlich gedämpft (Opazität
.85 -> .32, bei Hover/offen .48) - der Knopf wirkt jetzt wie eine
schwarze, glühende Pille mit farbigem Rand-Glow statt einer komplett
bunt eingefärbten Fläche. Nutzerwunsch nach Screenshot-Feedback.
This commit is contained in:
2026-08-02 01:25:33 +02:00
parent 970f12a5a7
commit 7842186138
+12 -4
View File
@@ -209,11 +209,12 @@ header.site-header {
padding: .4rem 1rem .4rem .55rem;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--sprach-glut) 55%, rgba(255, 255, 255, .18));
background: rgba(10, 11, 15, .55);
background: rgba(4, 5, 8, .94);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, .05),
0 3px 10px rgba(0, 0, 0, .35),
0 0 16px color-mix(in srgb, var(--sprach-glut) 40%, transparent);
0 3px 10px rgba(0, 0, 0, .5),
0 0 10px color-mix(in srgb, var(--sprach-glut) 55%, transparent),
0 0 22px color-mix(in srgb, var(--sprach-glut) 35%, transparent);
transition: transform .2s ease, box-shadow .3s ease, border-color .3s ease;
}
.sprach-schalter > button:hover,
@@ -236,10 +237,17 @@ header.site-header {
z-index: -2;
background: var(--sprach-aurora);
filter: blur(8px) saturate(1.3);
opacity: .85;
/* Bewusst nur ein dezenter Farbschein statt einer vollflächig bunten
Fläche — der Knopf selbst soll "leuchtend schwarz" wirken (Glow am
Rand + hinter der Kugel), nicht komplett eingefärbt. */
opacity: .32;
animation: sprach-aurora-drift 7s ease-in-out infinite alternate;
pointer-events: none;
}
.sprach-schalter > button:hover::before,
.sprach-schalter.open > button::before {
opacity: .48;
}
@keyframes sprach-aurora-drift {
from { transform: translate(-3%, -2%) rotate(0deg) scale(1); }
to { transform: translate(3%, 3%) rotate(8deg) scale(1.12); }