diff --git a/assets/css/main.css b/assets/css/main.css index 559a1a5..7da0f81 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -601,59 +601,174 @@ footer.site-footer { 50% { transform: translateX(3%); } } -/* ---- Husky- & Hasen-Charaktere (echte Artworks) mit sanftem Schweben ---- */ -.hero-critter { - position: absolute; - pointer-events: none; - filter: drop-shadow(0 0 22px rgba(143, 217, 234, .5)) drop-shadow(0 0 46px rgba(139, 92, 246, .25)); - animation: critter-float 9s ease-in-out infinite; +@media (prefers-reduced-motion: reduce) { + .aurora-band, .smoke-blob, .fog-ground { animation: none; } } -.hero-critter img { + +/* ========================================================================== + KINO-HINTERGRUND — das große Trio-Artwork (Dogfather · Dogi · HasiDog) + Aufbau in drei Schichten, damit der Text immer perfekt lesbar bleibt: + 1. ::before = das Artwork selbst, mit langsamer Ken-Burns-Fahrt + 2. ::after = Abdunkelung (Vignette + Verlauf), blendet unten in die Seite + 3. darüber = die bestehende Polarlicht/Rauch/Nebel-Atmosphäre, gedimmt + ========================================================================== */ +.hero-cinematic { + padding: clamp(5rem, 13vw, 9rem) 0; + isolation: isolate; +} +.hero-artwork { + position: absolute; + inset: 0; + z-index: 0; + overflow: hidden; + pointer-events: none; +} +.hero-artwork::before { + content: ""; + position: absolute; + inset: -5%; /* etwas Luft, damit die Ken-Burns-Fahrt nie eine Kante zeigt */ + /* zwei Ebenen: scharfes Artwork über einer 4-KB-Unschärfe, die sofort da ist */ + background-image: url("../img/universe-trio.jpg"), url("../img/universe-trio-blur.jpg"); + background-size: cover, cover; + background-position: center 40%, center 40%; + background-repeat: no-repeat; + transform-origin: 50% 40%; + animation: artwork-kenburns 48s ease-in-out infinite alternate; + will-change: transform; +} +.hero-artwork::after { + content: ""; + position: absolute; + inset: 0; + background: + /* Vignette: Mitte frei, Ränder dunkel — lenkt den Blick auf die Figuren */ + radial-gradient(ellipse 118% 86% at 50% 44%, + rgba(0, 0, 0, .10) 0%, rgba(0, 0, 0, .52) 68%, rgba(0, 0, 0, .84) 100%), + /* Verlauf: oben dunkel für die Navigation, unten sauberer Übergang in die Seite */ + linear-gradient(to bottom, + rgba(0, 0, 0, .62) 0%, + rgba(0, 0, 0, .30) 26%, + rgba(0, 0, 0, .34) 58%, + rgba(0, 0, 0, .78) 88%, + var(--bg) 100%); +} +@keyframes artwork-kenburns { + from { transform: scale(1.03); } + to { transform: scale(1.12) translate3d(-1.4%, -1%, 0); } +} +/* Atmosphäre über dem Artwork nur noch als feiner Schleier */ +.hero-cinematic .hero-atmosphere { opacity: .5; } +/* Text bekommt eine weiche Abschattung, damit er auf jedem Bildausschnitt sitzt */ +.hero-cinematic h1, +.hero-cinematic .lead, +.hero-cinematic .eyebrow { text-shadow: 0 2px 18px rgba(0, 0, 0, .75), 0 1px 3px rgba(0, 0, 0, .9); } + +@media (max-width: 760px) { + /* Hochformat-Zuschnitt: mittig auf Dogi, Husky und Hase bleiben angeschnitten sichtbar */ + .hero-artwork::before { + background-image: url("../img/universe-trio-mobile.jpg"), url("../img/universe-trio-blur.jpg"); + background-position: center 36%, center 36%; + } +} +@media (prefers-reduced-motion: reduce) { + .hero-artwork::before { animation: none; transform: scale(1.03); } +} + +/* ========================================================================== + CHARAKTER-SHOWCASE — die zwei Artworks groß, scharf und komplett sichtbar + ========================================================================== */ +.char-showcase { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: clamp(1.1rem, 4vw, 2.4rem); + max-width: 760px; + margin: 0 auto; +} +@media (max-width: 620px) { + .char-showcase { grid-template-columns: 1fr; max-width: 320px; } +} +.char-card { + position: relative; display: block; width: 100%; - aspect-ratio: 1 / 1; + max-width: 330px; + margin-inline: auto; + border-radius: 20px; + overflow: hidden; + text-decoration: none; + background: #080c11; + border: 1px solid rgba(255, 255, 255, .10); + box-shadow: 0 26px 60px rgba(0, 0, 0, .58); + animation: char-float 11s ease-in-out infinite; + transition: transform .38s cubic-bezier(.2, .7, .3, 1), + box-shadow .38s ease, + border-color .38s ease; +} +.char-card:nth-child(2) { animation-delay: -5.5s; } +.char-card img { + display: block; + width: 100%; + aspect-ratio: 599 / 1212; /* exaktes Seitenverhältnis der Artworks — kein Zuschnitt */ object-fit: cover; - border-radius: 50%; - border: 3px solid var(--accent); - box-shadow: 0 0 0 6px rgba(143, 217, 234, .14), 0 14px 32px rgba(0, 0, 0, .55); + transition: transform .55s cubic-bezier(.2, .7, .3, 1); } -.hero-critter.rabbit img { border-color: #c7ccd1; box-shadow: 0 0 0 6px rgba(199, 204, 209, .14), 0 14px 32px rgba(0, 0, 0, .55); } -.hero-critter.main { - width: min(17vw, 190px); - opacity: .98; +/* eigener Glow pro Welt */ +.char-card.dogfather { border-color: rgba(96, 175, 255, .30); } +.char-card.dogfather:hover, +.char-card.dogfather:focus-visible { + border-color: rgba(96, 175, 255, .75); + box-shadow: 0 34px 70px rgba(0, 0, 0, .62), 0 0 70px rgba(96, 175, 255, .30); } -.hero-critter.small { - width: min(10vw, 115px); - opacity: .65; - animation-duration: 12s; - filter: drop-shadow(0 0 14px rgba(143, 217, 234, .35)); +.char-card.hasidog { border-color: rgba(199, 204, 209, .28); } +.char-card.hasidog:hover, +.char-card.hasidog:focus-visible { + border-color: rgba(199, 204, 209, .70); + box-shadow: 0 34px 70px rgba(0, 0, 0, .62), 0 0 70px rgba(143, 217, 234, .26); } -.hero-critter.rabbit { animation-delay: -5s; } +.char-card:hover, .char-card:focus-visible { transform: translateY(-10px); } +.char-card:hover img, .char-card:focus-visible img { transform: scale(1.045); } -@keyframes critter-float { - 0%, 100% { transform: translateY(0) rotate(0deg); } - 50% { transform: translateY(-12px) rotate(-1.4deg); } -} - -.critter-label { +.char-meta { position: absolute; - left: 50%; - bottom: -1.5rem; - transform: translateX(-50%); + left: 0; right: 0; bottom: 0; + padding: 3.6rem .9rem 1.1rem; + text-align: center; + background: linear-gradient(to top, + rgba(4, 8, 12, .94) 14%, rgba(4, 8, 12, .58) 52%, transparent 100%); +} +.char-meta > span { display: block; } +.char-name { font-family: var(--font-head); font-weight: 800; - font-size: .68rem; - letter-spacing: .14em; + font-size: 1.02rem; + letter-spacing: .13em; + text-transform: uppercase; + color: #fff; + text-shadow: 0 2px 14px rgba(0, 0, 0, .85); +} +.char-sub { + font-size: .76rem; + color: rgba(255, 255, 255, .70); + margin-top: .18rem; +} +.char-go { + font-size: .74rem; + font-weight: 700; + letter-spacing: .05em; color: var(--accent); - text-shadow: 0 0 10px rgba(143, 217, 234, .7); - white-space: nowrap; + margin-top: .5rem; + opacity: .85; + transition: opacity .3s ease, transform .3s ease; } +.char-card:hover .char-go, +.char-card:focus-visible .char-go { opacity: 1; transform: translateX(3px); } -@media (prefers-reduced-motion: reduce) { - .aurora-band, .smoke-blob, .fog-ground, .hero-critter { animation: none; } +@keyframes char-float { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-9px); } } -@media (max-width: 700px) { - .hero-critter.small { display: none; } /* auf kleinen Screens nur die 2 Hauptfiguren */ +@media (prefers-reduced-motion: reduce) { + .char-card, .char-card img { animation: none; transition: none; } } /* ---------- Live-Status-Punkt ---------- */ diff --git a/assets/img/char-dogfather.jpg b/assets/img/char-dogfather.jpg new file mode 100644 index 0000000..9ebfa94 Binary files /dev/null and b/assets/img/char-dogfather.jpg differ diff --git a/assets/img/char-hasidog.jpg b/assets/img/char-hasidog.jpg new file mode 100644 index 0000000..08ccf89 Binary files /dev/null and b/assets/img/char-hasidog.jpg differ diff --git a/assets/img/universe-trio-blur.jpg b/assets/img/universe-trio-blur.jpg new file mode 100644 index 0000000..acf0889 Binary files /dev/null and b/assets/img/universe-trio-blur.jpg differ diff --git a/assets/img/universe-trio-mobile.jpg b/assets/img/universe-trio-mobile.jpg new file mode 100644 index 0000000..0bec7c5 Binary files /dev/null and b/assets/img/universe-trio-mobile.jpg differ diff --git a/assets/img/universe-trio.jpg b/assets/img/universe-trio.jpg new file mode 100644 index 0000000..34e0b18 Binary files /dev/null and b/assets/img/universe-trio.jpg differ diff --git a/hasidog.html b/hasidog.html index 394fc3d..3019e93 100644 --- a/hasidog.html +++ b/hasidog.html @@ -26,7 +26,9 @@
-
+
+ +
Welt 2 — HasiDog

Willkommen in der HasiDog-Welt

@@ -34,6 +36,25 @@
+ +
+
+ 🩵 Das Maskottchen +

HasiDog

+

Der graue Hase mit den blauen Augen — das Gesicht der Community.

+
+
+ HasiDog — grauer Hase mit schwarzem Hoodie und Cap + + HasiDog + Community · Maskottchen · Team Dogi + +
+
+
+
+
diff --git a/index.html b/index.html index bba044a..9552d87 100644 --- a/index.html +++ b/index.html @@ -27,7 +27,10 @@
-
+
+ + +
🩵 DOGFATHER UNIVERSE @@ -101,6 +82,36 @@
+ +
+
+ 🩵 Die Gesichter der Welten +

Dogfather & HasiDog

+

Zwei Charaktere, ein Universum — klick dich in ihre Welt.

+ +
+ + Dogfather — Husky mit blauem Hoodie und Cap + + Dogfather + Streamer · Entertainer · Welt 1 + Zur Welt → + + + + HasiDog — grauer Hase mit schwarzem Hoodie und Cap + + HasiDog + Community · Maskottchen · Welt 2 + Zur Welt → + + +
+
+
+