Eigene Hintergrundbilder je Seite, neue Hauptfotos, Funny & Ghost
Bilder: - Neues Hintergrund-System (.page-bg): jede Seite setzt ihr Motiv ueber zwei CSS-Variablen, inkl. eigenem Hochformat-Zuschnitt fuers Handy und Abdunkelung fuer Textlesbarkeit - Hintergruende: Casper, Dogfather, Modi-Team, Scouts, VanVan, Bewerben, Manager, Streamplan, Zeitreise, Stimmen, Community, Werte, Creator - Bewerbungsseite wechselt den Hintergrund mit dem gewaehlten Reiter - Neue Hauptfotos auf der Casper- und der Dogfather-Seite - Stream-Highlight-Bild auf der Streamer-Seite - Funny (Team-Tili-Dog-Abzeichen) und Ghost jetzt mit Bild Inhalt: - Scout-Beschreibung: "Sie finden und begleiten neue Talente fuer Dogi." - Alle Angaben zu Beteiligungen/Verdiensten der Scouts von der Website entfernt — interne Vereinbarungen gehen die Oeffentlichkeit nichts an Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
@@ -860,6 +860,59 @@ footer.site-footer {
|
||||
.char-card, .char-card img { animation: none; transition: none; }
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
SEITEN-HINTERGRÜNDE
|
||||
|
||||
Jede Seite kann ihr eigenes Artwork hinter den Kopfbereich legen. Das Bild
|
||||
wird nicht fest im CSS hinterlegt, sondern pro Seite über zwei Variablen
|
||||
gesetzt — so bleibt eine einzige Regel für alle Seiten:
|
||||
|
||||
<section class="hero page-bg"
|
||||
style="--page-bg:url('assets/img/bg-x.jpg');
|
||||
--page-bg-mobile:url('assets/img/bg-x-mobile.jpg');">
|
||||
|
||||
Aufbau: Bild (::before) → Abdunkelung (::after) → Inhalt.
|
||||
Die Abdunkelung sorgt dafür, dass Überschriften immer lesbar bleiben und
|
||||
der Rand sauber in die Seitenfarbe ausläuft.
|
||||
========================================================================== */
|
||||
.page-bg {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
overflow: hidden;
|
||||
}
|
||||
.page-bg::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -2;
|
||||
background-image: var(--page-bg);
|
||||
background-size: cover;
|
||||
background-position: var(--page-bg-pos, center);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.page-bg::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
background:
|
||||
radial-gradient(ellipse 115% 85% at 50% 45%,
|
||||
rgba(0, 0, 0, .30) 0%, rgba(0, 0, 0, .66) 66%, rgba(0, 0, 0, .88) 100%),
|
||||
linear-gradient(to bottom,
|
||||
rgba(0, 0, 0, .62) 0%,
|
||||
rgba(0, 0, 0, .34) 30%,
|
||||
rgba(0, 0, 0, .48) 72%,
|
||||
var(--bg) 100%);
|
||||
}
|
||||
/* Text auf Bildhintergrund immer mit weicher Abschattung */
|
||||
.page-bg h1, .page-bg h2, .page-bg .lead, .page-bg .eyebrow {
|
||||
text-shadow: 0 2px 18px rgba(0, 0, 0, .8), 0 1px 3px rgba(0, 0, 0, .9);
|
||||
}
|
||||
.page-bg.hero { padding: clamp(4.5rem, 11vw, 7.5rem) 0; }
|
||||
@media (max-width: 760px) {
|
||||
.page-bg::before { background-image: var(--page-bg-mobile, var(--page-bg)); }
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
TEAM-DOGI-HINTERGRUND — die große Team-Collage hinter dem Team-Abschnitt
|
||||
========================================================================== */
|
||||
|
||||
Reference in New Issue
Block a user