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; } .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 { .hero-atmosphere {
position: absolute; position: absolute;
inset: 0; inset: 0;
@@ -514,66 +516,112 @@ footer.site-footer {
pointer-events: none; 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 { .aurora-band {
position: absolute; position: absolute;
width: 140%; width: 150%;
height: 55%; height: 60%;
left: -20%; left: -25%;
border-radius: 50%; border-radius: 50%;
filter: blur(70px); filter: blur(65px);
opacity: .14; opacity: .22;
mix-blend-mode: screen; mix-blend-mode: screen;
animation: aurora-drift 30s ease-in-out infinite; 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.a1 { top: -16%; 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.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: 42%; background: radial-gradient(ellipse at center, #6ee7d8 0%, transparent 70%); animation-duration: 44s; animation-delay: -18s; opacity: .09; } .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 { @keyframes aurora-drift {
0%, 100% { transform: translateX(-4%) translateY(0) scaleY(1); } 0%, 100% { transform: translateX(-4%) translateY(0) scaleY(1); }
50% { transform: translateX(4%) translateY(-3%) scaleY(1.18); } 50% { transform: translateX(4%) translateY(-3%) scaleY(1.18); }
} }
/* Rauch/Schatten-Schwaden */ /* ---- Zone 2: Rauch (Mitte) ---- */
.smoke-blob { .smoke-blob {
position: absolute; position: absolute;
top: 32%;
border-radius: 50%; border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,.05), transparent 70%); background: radial-gradient(circle, rgba(210, 214, 220, .16), transparent 72%);
filter: blur(35px); filter: blur(40px);
animation: smoke-float 32s ease-in-out infinite; animation: smoke-float 30s ease-in-out infinite;
} }
@keyframes smoke-float { @keyframes smoke-float {
0%, 100% { transform: translate(0,0) scale(1); } 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 { .animal-silhouette {
position: absolute; position: absolute;
opacity: .06; opacity: .16;
animation: silhouette-breathe 20s ease-in-out infinite; 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.husky { color: var(--accent); }
.animal-silhouette.rabbit { color: #9aa6b2; } .animal-silhouette.rabbit { color: #b7c0c9; }
@keyframes silhouette-breathe { @keyframes silhouette-breathe {
0%, 100% { opacity: .045; transform: scale(1); } 0%, 100% { opacity: .12; transform: scale(1); }
50% { opacity: .09; transform: scale(1.035); } 50% { opacity: .24; transform: scale(1.04); }
} }
.eye-glow { .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; animation: eye-pulse 4.5s ease-in-out infinite;
} }
@keyframes eye-pulse { @keyframes eye-pulse {
0%, 100% { opacity: .45; } 0%, 100% { opacity: .55; }
50% { opacity: 1; } 50% { opacity: 1; }
} }
@media (prefers-reduced-motion: reduce) { @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) { @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 ---------- */ /* ---------- Live-Status-Punkt ---------- */
index.html
+34 -8
View File
@@ -29,23 +29,49 @@
<!-- ================= HERO ================= --> <!-- ================= HERO ================= -->
<section class="hero"> <section class="hero">
<div class="hero-atmosphere" aria-hidden="true"> <div class="hero-atmosphere" aria-hidden="true">
<span class="atmosphere-blend"></span>
<!-- Zone 1: Polarlicht oben -->
<span class="aurora-band a1"></span> <span class="aurora-band a1"></span>
<span class="aurora-band a2"></span> <span class="aurora-band a2"></span>
<span class="aurora-band a3"></span> <span class="aurora-band a3"></span>
<span class="smoke-blob" style="width:340px;height:340px;top:8%;left:6%;"></span>
<span class="smoke-blob" style="width:260px;height:260px;bottom:10%;right:10%;animation-delay:-14s;"></span>
<svg class="animal-silhouette husky" viewBox="0 0 200 200" style="top:6%;right:4%;width:min(30vw,260px);" xmlns="http://www.w3.org/2000/svg"> <!-- Zone 2: Rauch in der Mitte -->
<span class="smoke-blob" style="width:380px;height:380px;top:26%;left:4%;"></span>
<span class="smoke-blob" style="width:300px;height:300px;top:38%;right:6%;animation-delay:-11s;"></span>
<span class="smoke-blob" style="width:260px;height:260px;top:48%;left:38%;animation-delay:-22s;"></span>
<!-- Zone 3: Nebel unten -->
<span class="fog-ground"></span>
<!-- Husky #1 -->
<svg class="animal-silhouette husky n1" viewBox="0 0 200 200" style="top:10%;right:5%;width:min(26vw,230px);" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M100 18 L68 2 L74 46 Q48 58 43 92 Q39 132 68 162 Q100 184 132 162 Q161 132 157 92 Q152 58 126 46 L132 2 Z" /> <path fill="currentColor" d="M100 18 L68 2 L74 46 Q48 58 43 92 Q39 132 68 162 Q100 184 132 162 Q161 132 157 92 Q152 58 126 46 L132 2 Z" />
<circle class="eye-glow" cx="80" cy="92" r="6" fill="var(--accent)" /> <circle class="eye-glow" cx="80" cy="92" r="7" fill="var(--accent)" />
<circle class="eye-glow" cx="120" cy="92" r="6" fill="var(--accent)" /> <circle class="eye-glow" cx="120" cy="92" r="7" fill="var(--accent)" />
</svg> </svg>
<svg class="animal-silhouette rabbit" viewBox="0 0 200 220" style="bottom:4%;left:3%;width:min(24vw,210px);" xmlns="http://www.w3.org/2000/svg"> <!-- Hase #1 -->
<svg class="animal-silhouette rabbit n2" viewBox="0 0 200 220" style="bottom:20%;left:4%;width:min(20vw,180px);" xmlns="http://www.w3.org/2000/svg">
<path stroke="currentColor" stroke-width="20" stroke-linecap="round" fill="none" d="M84 8 Q72 60 78 104 M116 8 Q128 60 122 104" /> <path stroke="currentColor" stroke-width="20" stroke-linecap="round" fill="none" d="M84 8 Q72 60 78 104 M116 8 Q128 60 122 104" />
<ellipse cx="100" cy="146" rx="58" ry="52" fill="currentColor" /> <ellipse cx="100" cy="146" rx="58" ry="52" fill="currentColor" />
<circle class="eye-glow" cx="80" cy="136" r="6" fill="var(--accent)" /> <circle class="eye-glow" cx="80" cy="136" r="7" fill="var(--accent)" />
<circle class="eye-glow" cx="120" cy="136" r="6" fill="var(--accent)" /> <circle class="eye-glow" cx="120" cy="136" r="7" fill="var(--accent)" />
</svg>
<!-- Husky #2 (kleiner, weiter hinten) -->
<svg class="animal-silhouette husky n3" viewBox="0 0 200 200" style="top:34%;left:10%;width:min(15vw,130px);animation-delay:-7s;" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M100 18 L68 2 L74 46 Q48 58 43 92 Q39 132 68 162 Q100 184 132 162 Q161 132 157 92 Q152 58 126 46 L132 2 Z" />
<circle class="eye-glow" cx="80" cy="92" r="7" fill="var(--accent)" />
<circle class="eye-glow" cx="120" cy="92" r="7" fill="var(--accent)" />
</svg>
<!-- Hase #2 (kleiner, weiter hinten) -->
<svg class="animal-silhouette rabbit n4" viewBox="0 0 200 220" style="bottom:26%;right:14%;width:min(13vw,120px);animation-delay:-15s;" xmlns="http://www.w3.org/2000/svg">
<path stroke="currentColor" stroke-width="20" stroke-linecap="round" fill="none" d="M84 8 Q72 60 78 104 M116 8 Q128 60 122 104" />
<ellipse cx="100" cy="146" rx="58" ry="52" fill="currentColor" />
<circle class="eye-glow" cx="80" cy="136" r="7" fill="var(--accent)" />
<circle class="eye-glow" cx="120" cy="136" r="7" fill="var(--accent)" />
</svg> </svg>
</div> </div>
<div class="container"> <div class="container">