diff --git a/assets/css/main.css b/assets/css/main.css index 550b04d..68dcdab 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -191,18 +191,74 @@ header.site-header { .nav-dropdown a:hover, .nav-dropdown a.active { background: var(--bg-alt); color: var(--accent); } /* "Bewerben" ist der Treffpunkt beider Welten (Team Dogi + Spicy Media) — - deshalb bewusst FEST halb babyblau, halb rot, unabhängig vom Theme der - gerade offenen Seite. Kein var(--accent), sondern die festen Markenfarben. */ + deshalb bewusst FEST babyblau + rot, unabhängig vom Theme der gerade + offenen Seite. Statt einer einfachen 50/50-Teilung ein echtes + Polarlicht: mehrere weiche, wandernde Farbwolken (blau/lila/rot) plus + ein durchlaufender Lichtschimmer — soll wirken wie Licht und Nebel, + nicht wie zwei flache Farbflächen. */ .nav-cta { - padding: .55rem 1.1rem; + position: relative; + isolation: isolate; + overflow: hidden; + padding: .55rem 1.2rem; border-radius: 999px; - background: linear-gradient(90deg, #8fd9ea 0%, #8fd9ea 49%, #d94a5c 51%, #d94a5c 100%); - color: #0a0c10; + color: #fff; font-weight: 700; font-size: .88rem; - transition: filter .2s ease, transform .2s ease; + background: #0b0e14; + border: 1px solid rgba(255, 255, 255, .16); + transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; + box-shadow: 0 6px 18px rgba(0, 0, 0, .35); +} +.nav-cta span { + position: relative; + z-index: 2; + text-shadow: 0 1px 3px rgba(0, 0, 0, .6), 0 0 14px rgba(0, 0, 0, .35); +} +/* Ebene 1: die wandernden Polarlicht-Wolken selbst */ +.nav-cta::before { + content: ""; + position: absolute; + inset: -60%; + z-index: 0; + background: + radial-gradient(circle at 18% 30%, rgba(143, 217, 234, .95), transparent 55%), + radial-gradient(circle at 45% 75%, rgba(139, 92, 246, .85), transparent 58%), + radial-gradient(circle at 82% 32%, rgba(217, 74, 92, .95), transparent 55%), + radial-gradient(circle at 62% 82%, rgba(232, 147, 58, .55), transparent 55%); + filter: blur(9px) saturate(1.35); + animation: nav-cta-aurora 9s ease-in-out infinite alternate; +} +/* Ebene 2: ein feiner Lichtschimmer, der einmal quer durchläuft */ +.nav-cta::after { + content: ""; + position: absolute; + inset: 0; + z-index: 1; + background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .4) 49%, transparent 63%); + background-size: 240% 100%; + mix-blend-mode: overlay; + animation: nav-cta-shimmer 4.5s linear infinite; + pointer-events: none; +} +@keyframes nav-cta-aurora { + from { transform: translate(-3%, -2%) rotate(0deg) scale(1); } + to { transform: translate(3%, 3%) rotate(6deg) scale(1.08); } +} +@keyframes nav-cta-shimmer { + from { background-position: 130% 0; } + to { background-position: -30% 0; } +} +.nav-cta:hover { + transform: translateY(-1px); + border-color: rgba(255, 255, 255, .32); + box-shadow: 0 10px 26px rgba(0, 0, 0, .45), + 0 0 22px rgba(143, 217, 234, .3), + 0 0 22px rgba(217, 74, 92, .28); +} +@media (prefers-reduced-motion: reduce) { + .nav-cta::before, .nav-cta::after { animation: none; } } -.nav-cta:hover { filter: brightness(1.08); transform: translateY(-1px); } /* Interner Login — dezent, aber auf jeder Seite oben rechts auffindbar */ .nav-login { @@ -1199,8 +1255,9 @@ body.seite-laedt main { opacity: .55; transition: opacity .15s ease; } align-items: flex-end; gap: 12px; } -/* Musik gehört zu Hasidog UND Van-Van, also zu beiden Welten — deshalb - auch hier fest halb babyblau, halb rot, statt der Theme-Farbe. */ +/* Musik-Knopf: passt sich wieder der Farbwelt der jeweiligen Seite an + (babyblau auf Dogfather/HasiDog, rot auf Spicy-Media-Seiten) statt + fest halb/halb zu sein. */ .music-toggle { width: 54px; height: 54px; @@ -1212,12 +1269,11 @@ body.seite-laedt main { opacity: .55; transition: opacity .15s ease; } align-items: center; justify-content: center; cursor: pointer; - color: #0a0c10; - border: 1px solid rgba(255, 255, 255, .18); - background: linear-gradient(90deg, #8fd9ea 0%, #8fd9ea 49%, #d94a5c 51%, #d94a5c 100%); + color: var(--accent-contrast); + border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); + background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 12px 30px rgba(0, 0, 0, .45), - 0 0 18px rgba(143, 217, 234, .35), - 0 0 18px rgba(217, 74, 92, .3); + 0 0 24px color-mix(in srgb, var(--accent) 35%, transparent); transition: transform .25s ease, filter .25s ease, box-shadow .25s ease; } .music-toggle:hover, @@ -1225,8 +1281,7 @@ body.seite-laedt main { opacity: .55; transition: opacity .15s ease; } transform: translateY(-2px) scale(1.05); filter: brightness(1.12); box-shadow: 0 16px 38px rgba(0, 0, 0, .5), - 0 0 26px rgba(143, 217, 234, .5), - 0 0 26px rgba(217, 74, 92, .45); + 0 0 34px color-mix(in srgb, var(--accent) 55%, transparent); } .music-widget.open .music-toggle { transform: rotate(12deg); } diff --git a/assets/img/manager-dogfather-portrait.jpg b/assets/img/manager-dogfather-portrait.jpg new file mode 100644 index 0000000..c7ddec7 Binary files /dev/null and b/assets/img/manager-dogfather-portrait.jpg differ diff --git a/assets/js/data-scouts.js b/assets/js/data-scouts.js index e0e7707..e8ce342 100644 --- a/assets/js/data-scouts.js +++ b/assets/js/data-scouts.js @@ -26,7 +26,7 @@ const SCOUTS = [ { name: "Patrick", slug: "patrick", - role: "Scout (Manager) — Linke Hand", + role: "Scout (Manager) — Rechte Hand", photo: "assets/img/avatar-patrick.jpg", avatar: "assets/img/avatar-patrick.jpg", bio: "Patrick ist Scout bei Team Dogi. Er findet und begleitet gemeinsam mit Bananenstift neue Talente für Dogfather als Manager.", diff --git a/assets/js/main.js b/assets/js/main.js index f02bacc..10764b7 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -95,7 +95,7 @@