diff --git a/assets/css/main.css b/assets/css/main.css index 0800d48..7e8d9a8 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -505,7 +505,9 @@ footer.site-footer { .collage-item, .collage-item:nth-child(2) { width: 140px; } } -/* ---------- Hero-Atmosphäre (Startseite): Polarlicht + Rauch + Tier-Silhouetten ---------- */ +/* ---------- Hero-Atmosphäre (Startseite): Polarlicht oben → Rauch Mitte → Nebel unten ---------- + Drei Zonen, die weich ineinander übergehen, plus 4 Husky-/Hasen-Silhouetten mit leuchtend + blauen Augen, die deutlich erkennbar (aber nicht grell) darin stehen. ---------- */ .hero-atmosphere { position: absolute; inset: 0; @@ -514,66 +516,112 @@ footer.site-footer { pointer-events: none; } -/* Polarlicht-Bänder */ +/* Verbindender Farbverlauf über die ganze Höhe: babyblau (oben) → neutral (Mitte) → silbrig (unten) */ +.atmosphere-blend { + position: absolute; + inset: 0; + /* Fallback für Browser ohne color-mix() */ + background: linear-gradient( + to bottom, + rgba(143, 217, 234, .18) 0%, + rgba(139, 92, 246, .12) 38%, + rgba(154, 166, 178, .10) 68%, + rgba(210, 216, 222, .14) 100% + ); + background: linear-gradient( + to bottom, + color-mix(in srgb, var(--accent) 22%, transparent) 0%, + color-mix(in srgb, var(--accent-2) 14%, transparent) 38%, + rgba(154, 166, 178, .10) 68%, + rgba(210, 216, 222, .14) 100% + ); + mix-blend-mode: screen; + opacity: .8; +} + +/* ---- Zone 1: Polarlicht (oben) ---- */ .aurora-band { position: absolute; - width: 140%; - height: 55%; - left: -20%; + width: 150%; + height: 60%; + left: -25%; border-radius: 50%; - filter: blur(70px); - opacity: .14; + filter: blur(65px); + opacity: .22; mix-blend-mode: screen; animation: aurora-drift 30s ease-in-out infinite; } -.aurora-band.a1 { top: -12%; background: radial-gradient(ellipse at center, var(--accent) 0%, transparent 70%); animation-duration: 26s; } -.aurora-band.a2 { top: 18%; background: radial-gradient(ellipse at center, var(--accent-2) 0%, transparent 70%); animation-duration: 36s; animation-delay: -9s; opacity: .12; } -.aurora-band.a3 { top: 42%; background: radial-gradient(ellipse at center, #6ee7d8 0%, transparent 70%); animation-duration: 44s; animation-delay: -18s; opacity: .09; } +.aurora-band.a1 { top: -16%; background: radial-gradient(ellipse at center, var(--accent) 0%, transparent 70%); animation-duration: 26s; } +.aurora-band.a2 { top: 4%; background: radial-gradient(ellipse at center, var(--accent-2) 0%, transparent 70%); animation-duration: 36s; animation-delay: -9s; opacity: .18; } +.aurora-band.a3 { top: 16%; background: radial-gradient(ellipse at center, #6ee7d8 0%, transparent 70%); animation-duration: 44s; animation-delay: -18s; opacity: .14; } @keyframes aurora-drift { 0%, 100% { transform: translateX(-4%) translateY(0) scaleY(1); } 50% { transform: translateX(4%) translateY(-3%) scaleY(1.18); } } -/* Rauch/Schatten-Schwaden */ +/* ---- Zone 2: Rauch (Mitte) ---- */ .smoke-blob { position: absolute; + top: 32%; border-radius: 50%; - background: radial-gradient(circle, rgba(255,255,255,.05), transparent 70%); - filter: blur(35px); - animation: smoke-float 32s ease-in-out infinite; + background: radial-gradient(circle, rgba(210, 214, 220, .16), transparent 72%); + filter: blur(40px); + animation: smoke-float 30s ease-in-out infinite; } @keyframes smoke-float { 0%, 100% { transform: translate(0,0) scale(1); } - 50% { transform: translate(3%, -4%) scale(1.1); } + 50% { transform: translate(3%, -4%) scale(1.12); } } -/* Husky- & Hasen-Silhouetten mit leuchtenden blauen Augen */ +/* ---- Zone 3: Nebel (unten) ---- */ +.fog-ground { + position: absolute; + bottom: -8%; + left: -15%; + width: 130%; + height: 42%; + background: linear-gradient(to top, rgba(220, 224, 228, .28), transparent 85%); + filter: blur(30px); + animation: fog-drift 40s ease-in-out infinite; +} +@keyframes fog-drift { + 0%, 100% { transform: translateX(-3%); } + 50% { transform: translateX(3%); } +} + +/* ---- Husky- & Hasen-Silhouetten mit leuchtenden blauen Augen ---- */ .animal-silhouette { position: absolute; - opacity: .06; + opacity: .16; animation: silhouette-breathe 20s ease-in-out infinite; } +.animal-silhouette path, +.animal-silhouette ellipse { + stroke: currentColor; + stroke-width: 1.5; + stroke-opacity: .5; +} .animal-silhouette.husky { color: var(--accent); } -.animal-silhouette.rabbit { color: #9aa6b2; } +.animal-silhouette.rabbit { color: #b7c0c9; } @keyframes silhouette-breathe { - 0%, 100% { opacity: .045; transform: scale(1); } - 50% { opacity: .09; transform: scale(1.035); } + 0%, 100% { opacity: .12; transform: scale(1); } + 50% { opacity: .24; transform: scale(1.04); } } .eye-glow { - filter: drop-shadow(0 0 4px var(--accent)); + filter: drop-shadow(0 0 6px var(--accent)) drop-shadow(0 0 2px #fff); animation: eye-pulse 4.5s ease-in-out infinite; } @keyframes eye-pulse { - 0%, 100% { opacity: .45; } + 0%, 100% { opacity: .55; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { - .aurora-band, .smoke-blob, .animal-silhouette, .eye-glow { animation: none; opacity: .07; } + .aurora-band, .smoke-blob, .fog-ground, .animal-silhouette, .eye-glow { animation: none; opacity: .16; } } @media (max-width: 700px) { - .animal-silhouette.rabbit { display: none; } /* auf kleinen Screens nur Husky, damit es nicht zu voll wird */ + .animal-silhouette.n3, .animal-silhouette.n4 { display: none; } /* auf kleinen Screens nur 2 Tiere, damit es nicht zu voll wird */ } /* ---------- Live-Status-Punkt ---------- */ diff --git a/index.html b/index.html index 046d345..f06ac12 100644 --- a/index.html +++ b/index.html @@ -29,23 +29,49 @@