337 lines
7.7 KiB
CSS
337 lines
7.7 KiB
CSS
/* =========================================================
|
||
BikerStreetScene e.V. – Startseite
|
||
Eigene Styles, ergänzend zu Bootstrap 5.3 (self-hosted)
|
||
========================================================= */
|
||
|
||
/* --- Fonts (lokal, kein Google Fonts CDN) --- */
|
||
@font-face {
|
||
font-family: "Oswald";
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
font-display: swap;
|
||
src: url("../vendor/fonts/oswald/oswald-latin-400-normal.woff2") format("woff2");
|
||
}
|
||
@font-face {
|
||
font-family: "Oswald";
|
||
font-style: normal;
|
||
font-weight: 500;
|
||
font-display: swap;
|
||
src: url("../vendor/fonts/oswald/oswald-latin-500-normal.woff2") format("woff2");
|
||
}
|
||
@font-face {
|
||
font-family: "Oswald";
|
||
font-style: normal;
|
||
font-weight: 600;
|
||
font-display: swap;
|
||
src: url("../vendor/fonts/oswald/oswald-latin-600-normal.woff2") format("woff2");
|
||
}
|
||
@font-face {
|
||
font-family: "Oswald";
|
||
font-style: normal;
|
||
font-weight: 700;
|
||
font-display: swap;
|
||
src: url("../vendor/fonts/oswald/oswald-latin-700-normal.woff2") format("woff2");
|
||
}
|
||
@font-face {
|
||
font-family: "Inter";
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
font-display: swap;
|
||
src: url("../vendor/fonts/inter/inter-latin-400-normal.woff2") format("woff2");
|
||
}
|
||
@font-face {
|
||
font-family: "Inter";
|
||
font-style: normal;
|
||
font-weight: 500;
|
||
font-display: swap;
|
||
src: url("../vendor/fonts/inter/inter-latin-500-normal.woff2") format("woff2");
|
||
}
|
||
@font-face {
|
||
font-family: "Inter";
|
||
font-style: normal;
|
||
font-weight: 600;
|
||
font-display: swap;
|
||
src: url("../vendor/fonts/inter/inter-latin-600-normal.woff2") format("woff2");
|
||
}
|
||
@font-face {
|
||
font-family: "Inter";
|
||
font-style: normal;
|
||
font-weight: 700;
|
||
font-display: swap;
|
||
src: url("../vendor/fonts/inter/inter-latin-700-normal.woff2") format("woff2");
|
||
}
|
||
|
||
/* --- Brand-Farben --- */
|
||
:root {
|
||
--bss-dark: #15161a;
|
||
--bss-dark-2: #1e2025;
|
||
--bss-orange: #e8531d;
|
||
--bss-orange-dark: #c9430f;
|
||
--bss-light: #f4f3f0;
|
||
--bss-gray: #8b8d94;
|
||
|
||
--bs-body-font-family: "Inter", system-ui, sans-serif;
|
||
--bs-body-color: #2b2b2e;
|
||
--bs-link-color: var(--bss-orange);
|
||
--bs-link-hover-color: var(--bss-orange-dark);
|
||
}
|
||
|
||
body {
|
||
font-family: "Inter", system-ui, sans-serif;
|
||
}
|
||
|
||
h1, h2, h3, h4, h5, h6,
|
||
.font-heading {
|
||
font-family: "Oswald", system-ui, sans-serif;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.03em;
|
||
}
|
||
|
||
.text-orange { color: var(--bss-orange); }
|
||
.bg-orange { background-color: var(--bss-orange); }
|
||
.bg-bss-dark { background-color: var(--bss-dark); }
|
||
|
||
.btn-orange {
|
||
background-color: var(--bss-orange);
|
||
border-color: var(--bss-orange);
|
||
color: #fff;
|
||
font-family: "Oswald", sans-serif;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
font-weight: 600;
|
||
}
|
||
.btn-orange:hover,
|
||
.btn-orange:focus {
|
||
background-color: var(--bss-orange-dark);
|
||
border-color: var(--bss-orange-dark);
|
||
color: #fff;
|
||
}
|
||
.btn-outline-light.btn-hero {
|
||
font-family: "Oswald", sans-serif;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* --- Navbar --- */
|
||
.navbar-bss {
|
||
background-color: var(--bss-dark);
|
||
}
|
||
.navbar-bss .navbar-brand {
|
||
font-family: "Oswald", sans-serif;
|
||
font-weight: 700;
|
||
letter-spacing: 0.05em;
|
||
text-transform: uppercase;
|
||
font-size: 1.25rem;
|
||
color: #fff;
|
||
}
|
||
.navbar-bss .navbar-brand span {
|
||
color: var(--bss-orange);
|
||
}
|
||
.navbar-bss .nav-link {
|
||
color: #e6e6e6;
|
||
font-weight: 500;
|
||
font-size: 0.92rem;
|
||
}
|
||
.navbar-bss .nav-link:hover,
|
||
.navbar-bss .nav-link:focus,
|
||
.navbar-bss .nav-link.active {
|
||
color: var(--bss-orange);
|
||
}
|
||
.navbar-bss .btn-shop {
|
||
border: 1px solid var(--bss-orange);
|
||
color: var(--bss-orange);
|
||
font-size: 0.85rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.03em;
|
||
padding: 0.35rem 0.9rem;
|
||
}
|
||
.navbar-bss .btn-shop:hover {
|
||
background-color: var(--bss-orange);
|
||
color: #fff;
|
||
}
|
||
|
||
/* --- Hero --- */
|
||
.hero {
|
||
position: relative;
|
||
background: radial-gradient(ellipse at 30% 20%, #2a2c33 0%, var(--bss-dark) 60%);
|
||
color: #fff;
|
||
padding: 7.5rem 0 6rem;
|
||
overflow: hidden;
|
||
border-bottom: 4px solid var(--bss-orange);
|
||
}
|
||
.hero::after {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
background-image: repeating-linear-gradient(
|
||
100deg,
|
||
rgba(255, 255, 255, 0.03) 0px,
|
||
rgba(255, 255, 255, 0.03) 1px,
|
||
transparent 1px,
|
||
transparent 90px
|
||
);
|
||
pointer-events: none;
|
||
}
|
||
.hero h1 {
|
||
font-size: clamp(2.4rem, 5vw, 4rem);
|
||
font-weight: 700;
|
||
line-height: 1.05;
|
||
}
|
||
.hero .lead {
|
||
color: #c9cad0;
|
||
max-width: 42rem;
|
||
font-size: 1.15rem;
|
||
}
|
||
.hero .badge-club {
|
||
font-family: "Oswald", sans-serif;
|
||
letter-spacing: 0.15em;
|
||
font-size: 0.75rem;
|
||
color: var(--bss-orange);
|
||
border: 1px solid var(--bss-orange);
|
||
padding: 0.35rem 0.8rem;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
/* --- Sections --- */
|
||
.section-title {
|
||
font-size: 1.9rem;
|
||
font-weight: 700;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
.section-kicker {
|
||
font-family: "Oswald", sans-serif;
|
||
color: var(--bss-orange);
|
||
letter-spacing: 0.15em;
|
||
font-size: 0.8rem;
|
||
text-transform: uppercase;
|
||
font-weight: 600;
|
||
}
|
||
.section-lead {
|
||
color: var(--bss-gray);
|
||
max-width: 40rem;
|
||
}
|
||
|
||
/* --- Verein-Karten --- */
|
||
.card-verein {
|
||
border: none;
|
||
border-radius: 0.5rem;
|
||
background: #fff;
|
||
box-shadow: 0 2px 14px rgba(20, 20, 25, 0.07);
|
||
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
||
height: 100%;
|
||
}
|
||
.card-verein:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 10px 24px rgba(20, 20, 25, 0.14);
|
||
}
|
||
.card-verein .icon-wrap {
|
||
width: 3.25rem;
|
||
height: 3.25rem;
|
||
border-radius: 0.5rem;
|
||
background: var(--bss-dark);
|
||
color: var(--bss-orange);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1.4rem;
|
||
}
|
||
|
||
/* --- Platzhalter-Bild-Boxen (statt echter Fotos) --- */
|
||
.ph-box {
|
||
border-radius: 0.5rem;
|
||
background: linear-gradient(135deg, var(--bss-dark) 0%, #33353c 100%);
|
||
color: rgba(255, 255, 255, 0.45);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 2.25rem;
|
||
aspect-ratio: 4 / 3;
|
||
}
|
||
.ph-box.ph-square { aspect-ratio: 1 / 1; }
|
||
|
||
/* --- News / Events Karten --- */
|
||
.card-news {
|
||
border: 1px solid #eceae7;
|
||
border-radius: 0.5rem;
|
||
overflow: hidden;
|
||
height: 100%;
|
||
}
|
||
.card-news .card-body { padding: 1.25rem; }
|
||
.card-news .date-badge {
|
||
font-family: "Oswald", sans-serif;
|
||
font-size: 0.75rem;
|
||
letter-spacing: 0.08em;
|
||
color: var(--bss-orange);
|
||
text-transform: uppercase;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.event-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
padding: 1rem 0;
|
||
border-bottom: 1px solid #eceae7;
|
||
}
|
||
.event-row:last-child { border-bottom: none; }
|
||
.event-date {
|
||
flex: 0 0 4.25rem;
|
||
text-align: center;
|
||
background: var(--bss-dark);
|
||
color: #fff;
|
||
border-radius: 0.4rem;
|
||
padding: 0.5rem 0.25rem;
|
||
font-family: "Oswald", sans-serif;
|
||
}
|
||
.event-date .day { font-size: 1.4rem; font-weight: 700; line-height: 1; }
|
||
.event-date .month { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bss-orange); }
|
||
|
||
/* --- Mitgliedschaft CTA --- */
|
||
.cta-mitglied {
|
||
background: var(--bss-dark);
|
||
color: #fff;
|
||
padding: 3.5rem 0;
|
||
}
|
||
|
||
/* --- Footer --- */
|
||
.footer-bss {
|
||
background: #0e0f12;
|
||
color: #b7b8bd;
|
||
}
|
||
.footer-bss h6 {
|
||
color: #fff;
|
||
font-family: "Oswald", sans-serif;
|
||
letter-spacing: 0.06em;
|
||
font-size: 0.9rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
.footer-bss a {
|
||
color: #b7b8bd;
|
||
text-decoration: none;
|
||
}
|
||
.footer-bss a:hover { color: var(--bss-orange); }
|
||
.footer-bss .social-icons a {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 2.25rem;
|
||
height: 2.25rem;
|
||
border-radius: 50%;
|
||
border: 1px solid #333540;
|
||
margin-right: 0.5rem;
|
||
font-size: 1rem;
|
||
}
|
||
.footer-bss .social-icons a:hover {
|
||
background: var(--bss-orange);
|
||
border-color: var(--bss-orange);
|
||
color: #fff;
|
||
}
|
||
.footer-bss .copyright {
|
||
border-top: 1px solid #24262c;
|
||
padding-top: 1rem;
|
||
margin-top: 2rem;
|
||
font-size: 0.85rem;
|
||
}
|