diff --git a/assets/css/main.css b/assets/css/main.css index 8ef51e6..fc8b5c7 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -372,9 +372,28 @@ header.site-header { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--card-bg), - 0 0 0 4px var(--accent), + 0 0 0 4px var(--frame, var(--accent)), 0 14px 32px rgba(0, 0, 0, .5); } +/* Jede Profilkarte bekommt eine andere Ringfarbe — sonst sieht eine Reihe + aus vier Avataren monoton aus. Reihenfolge wiederholt sich alle 5 Karten. */ +.profile-card:nth-child(5n+1) { --frame: var(--accent); } +.profile-card:nth-child(5n+2) { --frame: var(--accent-2); } +.profile-card:nth-child(5n+3) { --frame: #c7ccd1; } +.profile-card:nth-child(5n+4) { --frame: #d8b25a; } +.profile-card:nth-child(5n+5) { --frame: #6ee7d8; } +.profile-card .avatar { + background: linear-gradient(140deg, var(--frame, var(--accent)), var(--accent-2)); + box-shadow: + 0 0 0 2px var(--card-bg), + 0 0 0 4px color-mix(in srgb, var(--frame, var(--accent)) 60%, transparent), + 0 10px 26px rgba(0, 0, 0, .45); +} +.profile-card::before { + background: radial-gradient(circle, + color-mix(in srgb, var(--frame, var(--accent)) 20%, transparent), transparent 70%); +} +.profile-card:hover { border-color: color-mix(in srgb, var(--frame, var(--accent)) 60%, transparent); } .profile-card .role { color: var(--accent); font-weight: 600; font-size: .85rem; margin-bottom: .6rem; } .profile-card .quote { font-style: italic; font-size: .9rem; } .profile-card .socials { display: flex; justify-content: center; gap: .6rem; margin-top: .8rem; } @@ -520,13 +539,39 @@ footer.site-footer { z-index: 5; box-shadow: 0 22px 40px rgba(0, 0, 0, .55); } +/* Alle Fotoflächen bekommen denselben Rahmen-Look wie die Avatare: + feine Linie in der Rahmenfarbe, dunkle Trennkante, weicher Schlagschatten. + Die Farbe steuert die Variable --frame — Standard ist die Markenfarbe. + Andere Farben über die Klassen .frame-silver / .frame-lila / .frame-gold / + .frame-rot setzen (siehe unten). */ .collage-photo { + --frame: var(--accent); position: relative; aspect-ratio: 1 / 1; - border-radius: 2px; + border-radius: 10px; overflow: hidden; background: repeating-linear-gradient(135deg, #e8ebee, #e8ebee 10px, #f6f7f9 10px, #f6f7f9 20px); + box-shadow: + 0 0 0 2px color-mix(in srgb, var(--frame) 62%, transparent), + 0 0 0 4px rgba(0, 0, 0, .55), + 0 0 26px color-mix(in srgb, var(--frame) 22%, transparent), + 0 14px 34px rgba(0, 0, 0, .45); + transition: box-shadow .3s ease, transform .3s ease; } +.collage-photo:hover { + transform: translateY(-3px); + box-shadow: + 0 0 0 2px var(--frame), + 0 0 0 4px rgba(0, 0, 0, .55), + 0 0 38px color-mix(in srgb, var(--frame) 38%, transparent), + 0 18px 42px rgba(0, 0, 0, .5); +} +/* Farbvarianten für Abwechslung */ +.frame-silver { --frame: #c7ccd1; } +.frame-lila { --frame: var(--accent-2); } +.frame-gold { --frame: #d8b25a; } +.frame-rot { --frame: #d94a5c; } +.frame-tuerkis{ --frame: #6ee7d8; } .collage-photo img { width: 100%; height: 100%; @@ -815,6 +860,42 @@ footer.site-footer { .char-card, .char-card img { animation: none; transition: none; } } +/* ========================================================================== + TEAM-DOGI-HINTERGRUND — die große Team-Collage hinter dem Team-Abschnitt + ========================================================================== */ +.team-bg { + position: relative; + isolation: isolate; + overflow: hidden; +} +.team-bg::before { + content: ""; + position: absolute; + inset: 0; + z-index: -2; + background-image: url("../img/team-dogi-bg.jpg"); + background-size: cover; + background-position: center; + background-repeat: no-repeat; +} +/* Abdunkelung, damit Text und Avatare klar davor stehen und die Ränder + sauber in die Seite auslaufen */ +.team-bg::after { + content: ""; + position: absolute; + inset: 0; + z-index: -1; + background: + radial-gradient(ellipse 110% 80% at 50% 50%, + rgba(0, 0, 0, .58) 0%, rgba(0, 0, 0, .80) 65%, rgba(0, 0, 0, .93) 100%), + linear-gradient(to bottom, var(--bg) 0%, transparent 14%, transparent 86%, var(--bg) 100%); +} +@media (max-width: 760px) { + .team-bg::before { + background-image: url("../img/team-dogi-bg-mobile.jpg"); + } +} + /* ========================================================================== SPOTIFY-PLAYER — Musik direkt auf der Seite hören, ohne wegzuklicken ========================================================================== */ diff --git a/assets/img/avatar-bananenstift.jpg b/assets/img/avatar-bananenstift.jpg new file mode 100644 index 0000000..d879851 Binary files /dev/null and b/assets/img/avatar-bananenstift.jpg differ diff --git a/assets/img/team-dogi-bg-mobile.jpg b/assets/img/team-dogi-bg-mobile.jpg new file mode 100644 index 0000000..f496a39 Binary files /dev/null and b/assets/img/team-dogi-bg-mobile.jpg differ diff --git a/assets/img/team-dogi-bg.jpg b/assets/img/team-dogi-bg.jpg new file mode 100644 index 0000000..1e87b3c Binary files /dev/null and b/assets/img/team-dogi-bg.jpg differ diff --git a/assets/js/data-scouts.js b/assets/js/data-scouts.js index 4da3a19..5bdc964 100644 --- a/assets/js/data-scouts.js +++ b/assets/js/data-scouts.js @@ -29,7 +29,8 @@ const SCOUTS = [ { name: "Bananenstift", role: "Scout — Team Dogi", - photo: "", + photo: "assets/img/avatar-bananenstift.jpg", + avatar: "assets/img/avatar-bananenstift.jpg", quote: "", // TODO: Zitat von Bananenstift einholen social: {}, status: "aktiv", diff --git a/casper.html b/casper.html index b224976..20ebeb0 100644 --- a/casper.html +++ b/casper.html @@ -51,10 +51,10 @@

Casper-Galerie

-
Casper
-
Casper
-
Dogfather und Casper
-
HasiDog & Casper Buch-Illustration
+
Casper
+
Casper
+
Dogfather und Casper
+
HasiDog & Casper Buch-Illustration
Zur ganzen Galerie diff --git a/hasidog.html b/hasidog.html index bd8c059..ede6955 100644 --- a/hasidog.html +++ b/hasidog.html @@ -87,7 +87,7 @@

„Schlaft schön." 🩵

Eine Szene aus der HasiDog-&-Casper-Welt, wie sie im Buch lebendig wird.

-
+
Schlaft schön — Team Dogi Illustration
diff --git a/index.html b/index.html index 13aa976..9c141ec 100644 --- a/index.html +++ b/index.html @@ -123,19 +123,19 @@

Dogfather 🩵

-
Casper
+
Casper

Casper 🐾

-
Dogfather und Casper zusammen
+
Dogfather und Casper zusammen

Team 🩵🐾

-
Casper
+
Casper

Husky-Life

-
Dogfather und Casper Nase an Nase
+
Dogfather und Casper Nase an Nase

Nase an Nase 🩵

@@ -174,7 +174,7 @@ -
+

Team Dogi 🩵

Von VanVan bis zu den Scouts — die Menschen, die DOGFATHER UNIVERSE tragen.

@@ -203,9 +203,9 @@

Impressionen

Casper
-
VanVan
-
Casper
-
Dogfather
+
VanVan
+
Casper
+
Dogfather
Zur ganzen Galerie diff --git a/team-modis.html b/team-modis.html index 3b8887f..7538158 100644 --- a/team-modis.html +++ b/team-modis.html @@ -26,7 +26,7 @@
-
+
🩵 Team Dogi

Das Modi-Team