diff --git a/assets/css/main.css b/assets/css/main.css index 08b5863..d777d4e 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -252,16 +252,32 @@ header.site-header { transform: none; padding: .4rem; border-radius: 14px; - border-color: color-mix(in srgb, var(--sprach-glut) 45%, var(--border)); - background: color-mix(in srgb, var(--card-bg) 92%, var(--sprach-glut) 8%); - box-shadow: 0 14px 34px rgba(0, 0, 0, .5), 0 0 26px color-mix(in srgb, var(--sprach-glut) 25%, transparent); + border: 1px solid rgba(210, 216, 224, .55); + background: rgba(4, 5, 8, .96); + box-shadow: + 0 14px 34px rgba(0, 0, 0, .6), + 0 0 16px rgba(220, 226, 235, .35), + 0 0 34px rgba(190, 200, 215, .18); transform-origin: top right; - animation: sprach-dropdown-in .18s ease both; + animation: sprach-dropdown-in .18s ease both, sprach-silber-puls 3.6s ease-in-out infinite; } @keyframes sprach-dropdown-in { from { opacity: 0; transform: translateY(-6px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } } +/* Silberner Polarlicht-Schein um den Dropdown-Rand — bewusst neutral + silber statt farbig, damit sich der schwarze Kasten von der bunten + Kugel/Schrift jeder Sprache klar abhebt statt zu verschwimmen. */ +@keyframes sprach-silber-puls { + 0%, 100% { + border-color: rgba(210, 216, 224, .5); + box-shadow: 0 14px 34px rgba(0, 0, 0, .6), 0 0 14px rgba(220, 226, 235, .3), 0 0 30px rgba(190, 200, 215, .15); + } + 50% { + border-color: rgba(235, 239, 244, .9); + box-shadow: 0 14px 34px rgba(0, 0, 0, .6), 0 0 22px rgba(230, 235, 242, .55), 0 0 46px rgba(200, 210, 224, .3); + } +} .sprach-schalter .nav-dropdown a { display: flex; align-items: center; @@ -273,7 +289,7 @@ header.site-header { } .sprach-schalter .nav-dropdown a:hover, .sprach-schalter .nav-dropdown a.active { - background: color-mix(in srgb, var(--sprach-glut) 20%, var(--bg-alt)); + background: rgba(255, 255, 255, .09); border-left-color: var(--sprach-glut); transform: translateX(2px); }