diff --git a/app/components/footer.php b/app/components/footer.php index 31fc622..437c04d 100644 --- a/app/components/footer.php +++ b/app/components/footer.php @@ -3,34 +3,61 @@ declare(strict_types=1); /** - * Footer: Vereinsdaten (NAP aus club.json), Social-Links, Rechtliches. + * Footer: Brand-Block (Logo, Entity-Satz, Social), Seiten-Navigation, + * Kontakt (NAP aus club.json — identisch zu JSON-LD), Rechtliches. + * Alle Daten aus den Single-Source-Dateien (club.json / navigation.json). */ $club = json_load('club'); $nav = json_load('navigation'); $socialLabels = ['instagram' => 'Instagram', 'facebook' => 'Facebook', 'youtube' => 'YouTube']; +$socialIcons = ['instagram' => 'instagram', 'facebook' => 'facebook', 'youtube' => 'youtube']; + +$footerNav = array_merge( + array_filter($nav['main'], static fn (array $item): bool => !str_starts_with($item['slug'], '#')), + $nav['ctas'] ?? [] +); ?> diff --git a/public/assets/css/layout.css b/public/assets/css/layout.css index 1986175..5464225 100644 --- a/public/assets/css/layout.css +++ b/public/assets/css/layout.css @@ -218,51 +218,137 @@ /* --- Footer --- */ .site-footer { margin-top: var(--space-section); - padding: 70px 0 25px; background: var(--clr-bg-footer); - font-size: var(--fs-400); + font-size: var(--fs-500); } .site-footer__grid { display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 2.5rem; + grid-template-columns: 1.4fr 1fr 1.2fr 1fr; + gap: 3rem; + padding-block: 4.5rem 3.5rem; } -@media (max-width: 768px) { +@media (max-width: 992px) { .site-footer__grid { - grid-template-columns: 1fr; + grid-template-columns: repeat(2, minmax(0, 1fr)); } } +@media (max-width: 600px) { + .site-footer__grid { + grid-template-columns: 1fr; + gap: 2.5rem; + } +} + +/* Brand-Block */ +.site-footer__brand { + display: grid; + justify-items: start; + gap: 1.25rem; +} + +.site-footer__claim { + color: var(--clr-text-muted); + max-width: 36ch; +} + +.site-footer__social { + display: grid; + gap: 0.5rem; +} + +.site-footer__social a { + display: inline-flex; + align-items: center; + gap: 0.6rem; + padding-block: 0.3rem; + color: var(--clr-text-muted); + text-decoration: none; + transition: color var(--transition); +} + +.site-footer__social .icon { + font-size: 1.25em; + color: var(--clr-text); +} + +/* Spalten-Headings mit rotem Akzentstrich */ .site-footer__heading { font-size: var(--fs-600); - margin-bottom: 0.75rem; + margin-bottom: 1.1rem; + padding-bottom: 0.5rem; + position: relative; +} + +.site-footer__heading::after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + width: 2.5rem; + height: 3px; + background: var(--clr-accent); + border-radius: 2px; } .site-footer__address { font-style: normal; color: var(--clr-text-muted); + display: grid; + gap: 1rem; +} + +.site-footer__address p { + display: flex; + gap: 0.6rem; + margin: 0; +} + +.site-footer__address .icon { + flex: none; + margin-top: 0.3em; + color: var(--clr-text); } .site-footer__list { display: grid; - gap: 0.4rem; + gap: 0.25rem; } .site-footer__list a, .site-footer__address a { + display: inline-block; + padding-block: 0.3rem; color: var(--clr-text-muted); + text-decoration: none; + transition: color var(--transition); } .site-footer__list a:hover, -.site-footer__address a:hover { +.site-footer__address a:hover, +.site-footer__social a:hover { color: var(--clr-text); + text-decoration: underline; + text-underline-offset: 0.25em; } -.site-footer__copyright { - margin-top: 3rem; - padding-top: 1.5rem; +/* Bottom-Bar */ +.site-footer__bottom { border-top: 1px solid var(--clr-glass-border); - color: var(--clr-text-faint); +} + +.site-footer__bottom-inner { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + gap: 0.5rem 2rem; + padding-block: 1.5rem; + font-size: var(--fs-400); + color: var(--clr-text-muted); +} + +.site-footer__bottom-inner p { + margin: 0; } diff --git a/public/assets/icons/envelope.svg b/public/assets/icons/envelope.svg new file mode 100644 index 0000000..ac4f555 --- /dev/null +++ b/public/assets/icons/envelope.svg @@ -0,0 +1 @@ + diff --git a/public/assets/icons/facebook.svg b/public/assets/icons/facebook.svg new file mode 100644 index 0000000..210e87d --- /dev/null +++ b/public/assets/icons/facebook.svg @@ -0,0 +1 @@ + diff --git a/public/assets/icons/geo-alt.svg b/public/assets/icons/geo-alt.svg new file mode 100644 index 0000000..78e901c --- /dev/null +++ b/public/assets/icons/geo-alt.svg @@ -0,0 +1,2 @@ + + diff --git a/public/assets/icons/instagram.svg b/public/assets/icons/instagram.svg new file mode 100644 index 0000000..6f11759 --- /dev/null +++ b/public/assets/icons/instagram.svg @@ -0,0 +1 @@ +