Neues Artwork: Trio-Kinohintergrund + Charakter-Showcase
- Trio-Artwork (Dogfather/Dogi/HasiDog) als grossflaechiger Hero-Hintergrund auf Startseite und HasiDog-Seite: Ken-Burns-Fahrt, Vignette + Verlaufs-Scrim fuer Textlesbarkeit, eigener Hochformat-Zuschnitt fuers Handy, 4-KB-Blur als Sofort-Platzhalter - Neue Charakter-Sektion auf der Startseite: Dogfather-Husky und HasiDog-Hase gross, scharf und komplett sichtbar als verlinkte Poster-Karten mit Glow, Schweben und Hover-Zoom - Alte kleine Hero-Figuren entfernt (durch das neue Artwork ersetzt) Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
+153
-38
@@ -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 ---------- */
|
||||
|
||||
Reference in New Issue
Block a user