diff --git a/assets/css/main.css b/assets/css/main.css index 142449d..e3a5717 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -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); }