Hero Startseite: Editorial-Display-Variante — linksbündig, Kicker mit Akzentbalken, Titel bis 120px, Outline-Tagline, Seitenverlauf, Scroll-Cue
Enthält auch User-Tweak: hero--compact auf 60vh/560px Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
@@ -4,14 +4,17 @@ declare(strict_types=1);
|
||||
|
||||
/**
|
||||
* Vollflächiger Hero mit Hintergrundbild/-video, Titel, Intro und CTAs.
|
||||
* Props: $hero (array aus home.json: title, text, image, video?, ctas, align?, compact?)
|
||||
* Props: $hero (array aus home.json: title, text, image, video?, ctas, align?, compact?,
|
||||
* display?, kicker?, scroll_target?)
|
||||
* align-Varianten: 'center' (mittig zentriert), 'bottom-left' (Default).
|
||||
* compact: true → niedrigere Variante für Unterseiten-Header.
|
||||
* display: true → großer Editorial-Look (Riesen-Titel, Outline-Tagline, Kicker, Scroll-Cue).
|
||||
*/
|
||||
$align = in_array($hero['align'] ?? '', ['center', 'bottom-left'], true) ? $hero['align'] : 'bottom-left';
|
||||
$compact = !empty($hero['compact']);
|
||||
$display = !empty($hero['display']);
|
||||
?>
|
||||
<section class="hero<?= $align === 'center' ? ' hero--center' : '' ?><?= $compact ? ' hero--compact' : '' ?>">
|
||||
<section class="hero<?= $align === 'center' ? ' hero--center' : '' ?><?= $compact ? ' hero--compact' : '' ?><?= $display ? ' hero--display' : '' ?>">
|
||||
<div class="hero__media" aria-hidden="true">
|
||||
<?php component('img', ['image' => $hero['image'], 'sizes' => '100vw', 'eager' => true, 'class' => 'hero__img']); ?>
|
||||
<?php if (!empty($hero['video'])): ?>
|
||||
@@ -20,6 +23,9 @@ $compact = !empty($hero['compact']);
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<div class="container hero__content">
|
||||
<?php if (!empty($hero['kicker'])): ?>
|
||||
<p class="hero__kicker"><?= e($hero['kicker']) ?></p>
|
||||
<?php endif; ?>
|
||||
<h1 class="hero__title"><?= e($hero['title']) ?><?php if (!empty($hero['tagline'])): ?> <span class="hero__tagline"><?= e($hero['tagline']) ?></span><?php endif; ?></h1>
|
||||
<?php if (!empty($hero['text'])): ?>
|
||||
<p class="hero__text"><?= e($hero['text']) ?></p>
|
||||
@@ -32,4 +38,9 @@ $compact = !empty($hero['compact']);
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php if ($display): ?>
|
||||
<a class="hero__scroll-cue" href="#<?= e($hero['scroll_target'] ?? 'aktuelles') ?>">
|
||||
<?= icon('chevron-down') ?><span class="visually-hidden">Zum Inhalt scrollen</span>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
</section>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"hero": {
|
||||
"align": "center",
|
||||
"align": "bottom-left",
|
||||
"title": "TSV 08 Kulmbach",
|
||||
"tagline": "Dein Verein für Fußball & Turnen in Kulmbach",
|
||||
"text": "Egal ob Fußball oder Turnen – wir sind als Kulmbacher Sportverein deine Möglichkeit, im Landkreis Kulmbach aktiv zu werden! Wir sind stolz, dir auf unserer Website einen Eindruck geben zu können, was dich bei uns erwartet. Du willst selbst aktiv werden? Dann zögere nicht, uns zu kontaktieren.",
|
||||
@@ -25,7 +25,9 @@
|
||||
"slug": "mitglied-werden",
|
||||
"style": "outline"
|
||||
}
|
||||
]
|
||||
],
|
||||
"display": true,
|
||||
"kicker": "Seit 1908 im Katzbachtal"
|
||||
},
|
||||
"sections": [
|
||||
{
|
||||
|
||||
@@ -95,6 +95,75 @@
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Variante: Editorial-Display (Startseite) — linksbündig unten, große Typo */
|
||||
.hero--display .hero__media::after {
|
||||
/* zusätzlicher Verlauf von links für Textlesbarkeit über dem Video */
|
||||
background:
|
||||
linear-gradient(90deg, rgb(10 10 10 / 0.62) 0%, rgb(10 10 10 / 0.25) 45%, transparent 70%),
|
||||
linear-gradient(180deg, rgb(20 20 20 / 0.2) 0%, rgb(20 20 20 / 0.45) 55%, var(--clr-bg) 100%);
|
||||
}
|
||||
|
||||
.hero__kicker {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1.25rem;
|
||||
font-size: var(--fs-500);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.18em;
|
||||
color: var(--clr-text);
|
||||
}
|
||||
|
||||
.hero__kicker::before {
|
||||
content: '';
|
||||
width: 3rem;
|
||||
height: 4px;
|
||||
background: var(--clr-accent);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.hero--display .hero__title {
|
||||
font-size: clamp(3.5rem, 2rem + 7.5vw, 7.5rem);
|
||||
}
|
||||
|
||||
/* Tagline als Outline-Typo (Trikotnummern-Look); Fallback: gefüllt */
|
||||
.hero--display .hero__tagline {
|
||||
margin-top: 0.5rem;
|
||||
font-size: clamp(1.75rem, 1rem + 2.5vw, 2.75rem);
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
@supports (-webkit-text-stroke: 1px white) {
|
||||
.hero--display .hero__tagline {
|
||||
color: transparent;
|
||||
-webkit-text-stroke: 1.5px rgb(255 255 255 / 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
.hero__scroll-cue {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 1.25rem;
|
||||
translate: -50% 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
color: var(--clr-text-muted);
|
||||
font-size: 1.4rem;
|
||||
transition: color var(--transition);
|
||||
animation: scroll-cue-bounce 2.4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.hero__scroll-cue:hover {
|
||||
color: var(--clr-text);
|
||||
}
|
||||
|
||||
@keyframes scroll-cue-bounce {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(8px); }
|
||||
}
|
||||
|
||||
/* === instagram === */
|
||||
.instagram__grid {
|
||||
display: grid;
|
||||
@@ -995,3 +1064,314 @@
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* === key-facts (Faktenleiste) === */
|
||||
.key-facts__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.key-facts__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.85rem;
|
||||
padding: 1.1rem 1.25rem;
|
||||
background: var(--clr-glass-bg);
|
||||
border: 1px solid var(--clr-glass-border);
|
||||
border-radius: var(--radius-card);
|
||||
}
|
||||
|
||||
.key-facts__icon {
|
||||
display: inline-flex;
|
||||
font-size: 1.5rem;
|
||||
color: var(--clr-accent);
|
||||
}
|
||||
|
||||
.key-facts__text {
|
||||
display: grid;
|
||||
gap: 0.1rem;
|
||||
}
|
||||
|
||||
.key-facts__label {
|
||||
font-size: var(--fs-400);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--clr-text-muted);
|
||||
}
|
||||
|
||||
.key-facts__value {
|
||||
font-family: var(--ff-heading);
|
||||
font-size: var(--fs-600);
|
||||
}
|
||||
|
||||
/* === team-about === */
|
||||
.team-about p {
|
||||
max-width: 68ch;
|
||||
}
|
||||
|
||||
/* === training-location === */
|
||||
.training__inner {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
|
||||
gap: 3rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.training__inner {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.training__table {
|
||||
width: 100%;
|
||||
margin-top: 1rem;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.training__table th,
|
||||
.training__table td {
|
||||
padding: 0.65rem 0;
|
||||
border-bottom: 1px solid var(--clr-glass-border);
|
||||
}
|
||||
|
||||
.training__table th {
|
||||
font-weight: var(--fw-regular);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.training__table td {
|
||||
color: var(--clr-text-muted);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.training__address {
|
||||
display: flex;
|
||||
gap: 0.6rem;
|
||||
align-items: start;
|
||||
margin: 1rem 0 1.5rem;
|
||||
}
|
||||
|
||||
.training__pin {
|
||||
flex: none;
|
||||
margin-top: 0.15rem;
|
||||
font-size: 1.3rem;
|
||||
color: var(--clr-accent);
|
||||
}
|
||||
|
||||
/* === cta-band === */
|
||||
.cta-band__inner {
|
||||
max-width: 60ch;
|
||||
margin-inline: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cta-band__text {
|
||||
margin-top: 0.75rem;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.cta-band__actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 0.75rem;
|
||||
margin-top: 1.75rem;
|
||||
}
|
||||
|
||||
/* === faq (Accordion) === */
|
||||
.faq__inner {
|
||||
max-width: 760px;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.faq__list {
|
||||
display: grid;
|
||||
gap: 0.6rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.faq__item {
|
||||
background: var(--clr-glass-bg);
|
||||
border: 1px solid var(--clr-glass-border);
|
||||
border-radius: var(--radius-card);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.faq__q {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
padding: 1rem 1.25rem;
|
||||
font-size: var(--fs-600);
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.faq__q::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.faq__q:focus-visible {
|
||||
outline: 2px solid var(--clr-text);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.faq__chevron {
|
||||
flex: none;
|
||||
font-size: 0.8em;
|
||||
color: var(--clr-accent);
|
||||
transition: transform var(--transition);
|
||||
}
|
||||
|
||||
.faq__item[open] .faq__chevron {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.faq__a {
|
||||
padding: 0 1.25rem 1.1rem;
|
||||
color: var(--clr-text-muted);
|
||||
}
|
||||
|
||||
/* === age-groups (Jugend-Altersklassen) === */
|
||||
.age-groups > .container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.age-groups__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin: 2.5rem 0 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.age-group {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
background: var(--clr-glass-bg);
|
||||
border: 1px solid var(--clr-glass-border);
|
||||
border-radius: var(--radius-card);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.age-group__img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 4 / 3;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.age-group__body {
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
align-content: start;
|
||||
padding: 1rem 1.2rem 1.2rem;
|
||||
}
|
||||
|
||||
.age-group__name {
|
||||
font-size: var(--fs-600);
|
||||
}
|
||||
|
||||
.age-group__training {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin: 0;
|
||||
font-size: var(--fs-500);
|
||||
color: var(--clr-text-muted);
|
||||
}
|
||||
|
||||
.age-group__icon {
|
||||
flex: none;
|
||||
color: var(--clr-accent);
|
||||
}
|
||||
|
||||
/* === team-cards (Mannschafts-Karten) === */
|
||||
.team-cards > .container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.team-cards__intro {
|
||||
max-width: 60ch;
|
||||
margin: 1rem auto 0;
|
||||
}
|
||||
|
||||
.team-cards__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin: 2.5rem 0 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.team-card {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
height: 100%;
|
||||
color: var(--clr-text);
|
||||
text-decoration: none;
|
||||
background: var(--clr-glass-bg);
|
||||
border: 1px solid var(--clr-glass-border);
|
||||
border-radius: var(--radius-card);
|
||||
overflow: hidden;
|
||||
transition: transform var(--transition), box-shadow var(--transition);
|
||||
}
|
||||
|
||||
.team-card:hover,
|
||||
.team-card:focus-visible {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
.team-card__img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 16 / 10;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.team-card__body {
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
align-content: start;
|
||||
padding: 1.1rem 1.25rem 1.25rem;
|
||||
}
|
||||
|
||||
.team-card__name {
|
||||
font-size: var(--fs-600);
|
||||
}
|
||||
|
||||
.team-card__meta {
|
||||
color: var(--clr-text-muted);
|
||||
font-size: var(--fs-500);
|
||||
}
|
||||
|
||||
.team-card__cta {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
margin-top: 0.4rem;
|
||||
color: var(--clr-accent);
|
||||
font-size: var(--fs-500);
|
||||
}
|
||||
|
||||
.team-card__arrow {
|
||||
transition: transform var(--transition);
|
||||
}
|
||||
|
||||
.team-card:hover .team-card__arrow {
|
||||
transform: translateX(3px);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user