DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Hero-Atmosphäre überarbeitet: klare 3 Zonen (Polarlicht oben, Rauch Mitte, Nebel unten) mit weichem Übergang, 4 deutlicher sichtbare Husky-/Hasen-Silhouetten mit leuchtenden Augen

Browse Source
This commit is contained in:
DogFatherGit
2026-07-30 22:48:45 +02:00
parent a416c9a3b9
commit 3b9c9ef52e
2 changed files with 106 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/main.css
+72 -24
View File
@@ -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 ---------- */