diff --git a/assets/css/main.css b/assets/css/main.css index d777d4e..142449d 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -209,9 +209,7 @@ 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: - radial-gradient(circle at 28% 25%, color-mix(in srgb, var(--sprach-glut) 30%, transparent), transparent 65%), - rgba(255, 255, 255, .04); + background: rgba(10, 11, 15, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), 0 3px 10px rgba(0, 0, 0, .35), @@ -227,6 +225,25 @@ header.site-header { 0 6px 16px rgba(0, 0, 0, .4), 0 0 24px color-mix(in srgb, var(--sprach-glut) 60%, transparent); } +/* Ebene: die "Landesflagge" als weiche, wandernde Aurora-Wolke im + Hintergrund des Knopfs — mehrere Farbflecken statt nur eines Farbtons, + dieselbe Machart wie beim Bewerben-Knopf, nur mit den 2-3 echten + Farben DIESER Sprache (siehe SPRACHEN.farbstopps in main.js). */ +.sprach-schalter > button::before { + content: ""; + position: absolute; + inset: -65%; + z-index: -2; + background: var(--sprach-aurora); + filter: blur(8px) saturate(1.3); + opacity: .85; + animation: sprach-aurora-drift 7s ease-in-out infinite alternate; + pointer-events: none; +} +@keyframes sprach-aurora-drift { + from { transform: translate(-3%, -2%) rotate(0deg) scale(1); } + to { transform: translate(3%, 3%) rotate(8deg) scale(1.12); } +} /* Ebene: ein schmales Lichtband, das einmal quer durch den Knopf läuft — dieselbe Machart wie beim Bewerben-Knopf, nur in der Sprachfarbe. */ .sprach-schalter > button::after { @@ -297,14 +314,20 @@ header.site-header { Flaggen-Emojis grundsätzlich nicht als Bild dar (siehe SPRACHEN oben in main.js). Ein außermittiges Glanzlicht + langsame Drehung lassen sie wie eine echte, beleuchtete Kugel wirken statt einer flachen Fläche. */ +/* Kugel-Grundfarbe: conic-gradient aus den 2-3 echten Landesfarben + dieser Sprache (--sprach-stopps, siehe SPRACHEN.farbstopps in + main.js) — wirkt wie eine kleine, marmoriert eingefärbte Kugel statt + nur einem Farbton, plus Eigendrehung, damit die Farbmischung sichtbar + "lebt". Glanzlicht kommt separat über ::before oben drauf. */ .sprach-kugel { + position: relative; display: inline-block; width: 18px; height: 18px; border-radius: 50%; vertical-align: -4px; - background: - radial-gradient(circle at 32% 26%, #fff 0%, color-mix(in srgb, var(--sprach-glut) 85%, white 15%) 16%, var(--sprach-glut) 52%, color-mix(in srgb, var(--sprach-glut) 55%, black 45%) 100%); + overflow: hidden; + background: conic-gradient(from 0deg, var(--sprach-stopps)); box-shadow: inset -3px -3px 5px rgba(0, 0, 0, .5), 0 0 8px 2px color-mix(in srgb, var(--sprach-glut) 75%, transparent), @@ -312,6 +335,14 @@ header.site-header { flex-shrink: 0; animation: sprach-glut-puls 3.2s ease-in-out infinite, sprach-kugel-dreh 7s linear infinite; } +.sprach-kugel::before { + content: ""; + position: absolute; + inset: 0; + border-radius: 50%; + background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .35) 16%, transparent 55%); + mix-blend-mode: overlay; +} .sprach-schalter .nav-dropdown a .sprach-kugel { width: 16px; height: 16px; } /* Die Sprachfarbe zieht sich auch über die Schrift — kräftiger, leuchtender Text statt neutralem Weiß, plus ein sanft pulsierender @@ -334,7 +365,7 @@ header.site-header { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { - .sprach-kugel, .sprach-kurz, .sprach-schalter > button::after, .sprach-schalter .nav-dropdown { animation: none; } + .sprach-kugel, .sprach-kurz, .sprach-schalter > button::before, .sprach-schalter > button::after, .sprach-schalter .nav-dropdown { animation: none; } } /* "Bewerben" ist der Treffpunkt beider Welten (Team Dogi + Spicy Media) — diff --git a/assets/js/main.js b/assets/js/main.js index dab7349..9226006 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -43,11 +43,15 @@ aber bewusst gesättigter/heller (nicht die originalen, oft eher stumpfen Flaggenfarben), damit der Polarlicht-Effekt gut trägt. */ const SPRACHEN = [ - { code: "de", kurz: "DE", name: "Deutsch", glut: "#ffb300" }, - { code: "de-CH", kurz: "CH", name: "Schwiizerdütsch", glut: "#ff3b3b" }, - { code: "en", kurz: "EN", name: "English", glut: "#2f6bff" }, - { code: "fr", kurz: "FR", name: "Français", glut: "#00c2ff" }, - { code: "pt", kurz: "PT", name: "Português", glut: "#20d97a" }, + // "glut" = einzelne Leuchtfarbe (Text-Glow, Dropdown-Zeile). + // "farbstopps" = mehrere Landesfarben, aus denen Knopf-Aurora und + // Kugel-Verlauf gemischt werden — daher wirklich "gemischte Farben + // wie bei den jeweiligen Nationalflaggen", nicht nur ein Farbton. + { code: "de", kurz: "DE", name: "Deutsch", glut: "#ffb300", farbstopps: ["#1a1a1a", "#dd0000", "#ffce00"] }, + { code: "de-CH", kurz: "CH", name: "Schwiizerdütsch", glut: "#ff3b3b", farbstopps: ["#d52b1e", "#ffffff", "#d52b1e"] }, + { code: "en", kurz: "EN", name: "English", glut: "#2f6bff", farbstopps: ["#00247d", "#ffffff", "#cf142b"] }, + { code: "fr", kurz: "FR", name: "Français", glut: "#00c2ff", farbstopps: ["#0055a4", "#ffffff", "#ef4135"] }, + { code: "pt", kurz: "PT", name: "Português", glut: "#20d97a", farbstopps: ["#046a38", "#ffcc00", "#da291c"] }, ]; const SPRACHE_SCHLUESSEL = "dogi-sprache"; @@ -256,11 +260,27 @@ /* Sprachumschalter — eigener nav-group-artiger Dropdown, zeigt die aktuell gewählte Sprache (Flagge + Kürzel) und listet beim Klick die übrigen 4 Sprachen auf. */ + /* Aus den 2-3 Landesfarben einer Sprache ein Aurora-Wolkenbild bauen + (mehrere versetzte, weiche Farbflecken — dieselbe Machart wie beim + Bewerben-Knopf, nur mit den Farben DIESER Sprache) plus eine + Stopp-Liste für den conic-gradient der Kugel. */ + function sprachAurora(farben) { + const positionen = ["22% 30%", "72% 28%", "48% 78%"]; + return farben + .map((f, i) => `radial-gradient(circle at ${positionen[i % positionen.length]}, ${f}, transparent 60%)`) + .join(", "); + } + function sprachKugelStopps(farben) { + return [...farben, farben[0]].join(", "); + } + function renderSprachSchalter() { const aktuell = getSprache(); const aktiv = SPRACHEN.find((s) => s.code === aktuell) || SPRACHEN[0]; + const styleFuer = (s) => + `--sprach-glut:${s.glut};--sprach-aurora:${sprachAurora(s.farbstopps)};--sprach-stopps:${sprachKugelStopps(s.farbstopps)};`; return ` -
+
`;