diff --git a/assets/css/main.css b/assets/css/main.css index 5c9a9a7..3a2b026 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -292,8 +292,19 @@ header.site-header { .nav-cta { align-self: flex-start; margin: 1rem 0 .6rem; } } -/* ---------- Buttons ---------- */ +/* ---------- Buttons ---------- + Gleicher STIL wie der "Bewerben"-Knopf oben in der Leiste (wandernde, + weichgezeichnete Farbwolken + durchlaufender Lichtschimmer) — aber NICHT + dieselbe feste Regenbogen-Palette, sondern die Farben der jeweiligen + Seite/Karte (--accent/--accent-2, die überall schon pro Theme bzw. pro + Karte gesetzt sind). Läuft komplett über negative z-index-Ebenen, dadurch + bleibt der Button-Text automatisch scharf obenauf, ganz ohne - + Wrapper in jeder einzelnen HTML-Datei (siehe Stacking-Reihenfolge: eigene + Box-Hintergrund → negative z-index-Kinder → normaler Inline-Text). */ .btn { + position: relative; + isolation: isolate; + overflow: hidden; display: inline-flex; align-items: center; gap: .5rem; @@ -303,9 +314,47 @@ header.site-header { font-size: .95rem; border: 1px solid transparent; cursor: pointer; - transition: transform .15s ease, opacity .15s ease; + transition: transform .15s ease, opacity .15s ease, box-shadow .2s ease; +} +.btn::before { + content: ""; + position: absolute; + inset: -70%; + z-index: -2; + background: + radial-gradient(circle at 24% 28%, color-mix(in srgb, var(--accent) 92%, transparent), transparent 58%), + radial-gradient(circle at 76% 74%, color-mix(in srgb, var(--accent-2) 92%, transparent), transparent 58%); + filter: blur(9px) saturate(1.3); + opacity: .55; + animation: btn-aurora 11s ease-in-out infinite alternate; +} +.btn::after { + content: ""; + position: absolute; + inset: 0; + z-index: -1; + background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .32) 49%, transparent 63%); + background-size: 240% 100%; + mix-blend-mode: overlay; + animation: btn-shimmer 5.5s linear infinite; + pointer-events: none; +} +@keyframes btn-aurora { + from { transform: translate(-3%, -2%) rotate(0deg) scale(1); } + to { transform: translate(3%, 3%) rotate(6deg) scale(1.08); } +} +@keyframes btn-shimmer { + from { background-position: 130% 0; } + to { background-position: -30% 0; } +} +@media (prefers-reduced-motion: reduce) { + .btn::before, .btn::after { animation: none; } +} +.btn:hover { + transform: translateY(-2px); + box-shadow: 0 10px 22px rgba(0, 0, 0, .28), + 0 0 18px color-mix(in srgb, var(--accent) 40%, transparent); } -.btn:hover { transform: translateY(-2px); } .btn-primary { background: var(--accent); color: var(--accent-contrast); } .btn-secondary { background: var(--accent-2); color: #fff; } .btn-outline { background: transparent; border-color: var(--border); color: var(--text); } @@ -1269,10 +1318,12 @@ body.seite-laedt main { opacity: .55; transition: opacity .15s ease; } .music-widget.open .music-toggle { transform: rotate(12deg); } .music-toggle span { position: relative; z-index: 2; } -/* Auf den Bewerben-Seiten bekommt der Musik-Knopf dieselbe Polarlicht- - Farbe wie der "Bewerben"-Knopf oben in der Leiste — beide markieren - hier bewusst denselben "Treffpunkt beider Welten"-Charakter der Seite. */ -body.bewerben-seite .music-toggle { +/* Auf der Startseite UND den Bewerben-Seiten bekommt der Musik-Knopf + dieselbe Polarlicht-Farbe wie der "Bewerben"-Knopf oben in der Leiste + (statt der Chamäleon-Farben vom Seitenbild) — das sind die beiden + Stellen, an denen bewusst "alle Welten auf einmal" gezeigt werden. */ +body.bewerben-seite .music-toggle, +body.start-seite .music-toggle { position: relative; isolation: isolate; overflow: hidden; @@ -1280,7 +1331,8 @@ body.bewerben-seite .music-toggle { border-color: rgba(255, 255, 255, .18); color: #fff; } -body.bewerben-seite .music-toggle::before { +body.bewerben-seite .music-toggle::before, +body.start-seite .music-toggle::before { content: ""; position: absolute; inset: -40%; @@ -1293,7 +1345,8 @@ body.bewerben-seite .music-toggle::before { filter: blur(6px) saturate(1.35); animation: nav-cta-aurora 9s ease-in-out infinite alternate; } -body.bewerben-seite .music-toggle::after { +body.bewerben-seite .music-toggle::after, +body.start-seite .music-toggle::after { content: ""; position: absolute; inset: 0; @@ -1306,14 +1359,18 @@ body.bewerben-seite .music-toggle::after { pointer-events: none; } body.bewerben-seite .music-toggle:hover, -body.bewerben-seite .music-toggle:focus-visible { +body.bewerben-seite .music-toggle:focus-visible, +body.start-seite .music-toggle:hover, +body.start-seite .music-toggle:focus-visible { box-shadow: 0 16px 38px rgba(0, 0, 0, .5), 0 0 22px rgba(143, 217, 234, .3), 0 0 22px rgba(217, 74, 92, .28); } @media (prefers-reduced-motion: reduce) { body.bewerben-seite .music-toggle::before, - body.bewerben-seite .music-toggle::after { animation: none; } + body.bewerben-seite .music-toggle::after, + body.start-seite .music-toggle::before, + body.start-seite .music-toggle::after { animation: none; } } .music-panel { diff --git a/assets/js/main.js b/assets/js/main.js index 545ca80..7605ee5 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -484,10 +484,14 @@ alterInhalt.replaceWith(neuerInhalt); - // Seitenmotiv mitnehmen: Die Bildvariablen hängen am , damit das - // Motiv die ganze Seite trägt — beim Wechsel also mit übernehmen. + // Seitenmotiv + Sonderklassen mitnehmen: Die Bildvariablen hängen am + // , damit das Motiv die ganze Seite trägt — beim Wechsel also mit + // übernehmen. Bewusst die GANZE Klassenliste kopieren (nicht nur + // "mit-hintergrund" einzeln pflegen), sonst bleiben Sonderklassen wie + // "bewerben-seite" oder "start-seite" nach einem Klick-Wechsel fälschlich + // stehen bzw. fehlen auf der neuen Seite. const bodyNeu = dok.body; - document.body.classList.toggle("mit-hintergrund", bodyNeu.classList.contains("mit-hintergrund")); + document.body.className = bodyNeu.className; ["--page-bg", "--page-bg-mobile"].forEach((v) => { const wert = bodyNeu.style.getPropertyValue(v); if (wert) document.body.style.setProperty(v, wert); diff --git a/index.html b/index.html index 0a48d79..0bf586e 100644 --- a/index.html +++ b/index.html @@ -22,7 +22,7 @@ - +