diff --git a/src/styles/global.css b/src/styles/global.css index 72a5b60..ff70111 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -349,7 +349,7 @@ a:focus-visible, button:focus-visible { gap: 0.4em; background: linear-gradient(155deg, color-mix(in srgb, var(--globe-color) 16%, var(--c-anthracite-light)), color-mix(in srgb, var(--globe-color) 5%, var(--c-anthracite))); - border: 1px solid color-mix(in srgb, var(--globe-color) 42%, rgba(244, 241, 247, 0.14)); + border: 1px solid color-mix(in srgb, var(--c-purple-glow) 55%, rgba(244, 241, 247, 0.14)); color: var(--c-text); border-radius: 999px; padding: 0.4em 0.85em 0.4em 0.5em; @@ -362,7 +362,7 @@ a:focus-visible, button:focus-visible { transition: border-color 0.2s var(--ease), box-shadow 0.25s var(--ease), transform 0.2s var(--ease); } .lang-switch-btn:hover { - border-color: color-mix(in srgb, var(--globe-color) 75%, transparent); + border-color: color-mix(in srgb, var(--c-purple-glow) 85%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--globe-glow, var(--globe-color)) 30%, transparent), 0 6px 18px -6px color-mix(in srgb, var(--globe-color) 70%, transparent); @@ -435,10 +435,14 @@ a:focus-visible, button:focus-visible { overflow: hidden; isolation: isolate; color: rgba(10, 9, 16, 0.55); + /* Dezenter "Polarlicht"-Schimmer: mehrere weiche, unterschiedlich gefärbte Glow-Schichten + (Lila der Seite + Flaggenfarbe + Akzent-Türkis) statt eines einzelnen harten Farbrings. */ box-shadow: - 0 0 0 1px color-mix(in srgb, var(--globe-color, var(--c-accent)) 55%, transparent), + 0 0 0 1px color-mix(in srgb, var(--c-purple-glow) 55%, transparent), 0 3px 5px -1px color-mix(in srgb, black 55%, transparent), - 0 0 9px 1px color-mix(in srgb, var(--globe-glow, var(--globe-color)) 55%, transparent); + 0 0 7px 1px color-mix(in srgb, var(--globe-glow, var(--globe-color)) 40%, transparent), + 0 0 13px 3px color-mix(in srgb, var(--c-purple-glow) 22%, transparent), + 0 0 18px 4px color-mix(in srgb, var(--c-accent) 12%, transparent); transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease); flex-shrink: 0; } @@ -478,9 +482,11 @@ a:focus-visible, button:focus-visible { .lang-switch-btn:hover .lang-globe, .lang-switch-menu a:hover .lang-globe { box-shadow: - 0 0 0 1px color-mix(in srgb, var(--globe-color, var(--c-accent)) 70%, transparent), + 0 0 0 1px color-mix(in srgb, var(--c-purple-glow) 75%, transparent), 0 3px 6px -1px color-mix(in srgb, black 55%, transparent), - 0 0 16px 3px color-mix(in srgb, var(--globe-glow, var(--globe-color)) 80%, transparent); + 0 0 10px 2px color-mix(in srgb, var(--globe-glow, var(--globe-color)) 55%, transparent), + 0 0 18px 4px color-mix(in srgb, var(--c-purple-glow) 30%, transparent), + 0 0 24px 6px color-mix(in srgb, var(--c-accent) 18%, transparent); transform: scale(1.12); }