/* trampolinereus.nl — huisstijl v2
palet uit de tuinwereld: gras, lucht, springdoek-navy, reus-oranje
koppen: Baloo 2 (lokaal, 1 gewicht) — body: systeemfonts voor snelheid */
/* kleuren komen uit theme.php (inline in ) */
/* Baloo 2 lokaal hosten: woff2 in /assets/fonts/ plaatsen (zie README) */
@font-face {
font-family: 'Baloo 2';
src: url('/assets/fonts/baloo2-700.woff2') format('woff2');
font-weight: 700;
font-display: swap;
}
/* generieke tokens (vorm; gedeeld tussen sites). Per-site KLEUREN komen uit theme.php. */
:root {
--body-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--wit: #ffffff;
--schaduw: 0 2px 10px rgba(20, 40, 60, .08);
}
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--lucht);
color: var(--inkt);
font-family: var(--body-font);
font-size: 1.0625rem;
line-height: 1.65;
}
.wrap {
max-width: 47rem;
margin: 0 auto;
padding: 0 1.25rem;
}
/* --- kop --- */
.site-kop {
background: rgba(255, 255, 255, .92);
backdrop-filter: blur(6px);
border-bottom: 1px solid var(--lijn);
position: sticky;
top: 0;
z-index: 10;
}
.kop-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding-top: .8rem;
padding-bottom: .8rem;
flex-wrap: wrap;
}
.logo {
display: inline-flex;
align-items: center;
gap: .5rem;
text-decoration: none;
}
.logo-tekst {
font-family: var(--kop-font);
font-weight: 700;
font-size: 1.45rem;
color: var(--inkt);
letter-spacing: -.01em;
}
.logo-tekst b { color: var(--gras); }
.hoofdnav { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.hoofdnav a {
color: var(--inkt);
text-decoration: none;
font-weight: 600;
font-size: .95rem;
padding: .25rem 0;
border-bottom: 2px solid transparent;
}
.hoofdnav a:hover { border-bottom-color: var(--gras); }
/* --- typografie --- */
h1, h2, h3 {
font-family: var(--kop-font);
font-weight: 700;
line-height: 1.18;
color: var(--inkt);
letter-spacing: -.01em;
}
h1 { font-size: clamp(1.75rem, 4vw, 2.4rem); margin: 1.2rem 0 .6rem; }
h2 { font-size: 1.45rem; margin: 2.2rem 0 .5rem; }
h3 { font-size: 1.12rem; margin: 1.6rem 0 .4rem; }
/* signatuur: springboog boven h2 in artikelen */
.artikel h2::before {
content: '';
display: block;
width: 2.4rem;
height: .4rem;
margin-bottom: .45rem;
background-image: radial-gradient(circle, var(--oranje) 42%, transparent 45%);
background-size: .5rem .5rem;
background-repeat: repeat-x;
background-position: left center;
}
a { color: var(--gras-donker); text-underline-offset: 2px; }
a:hover { color: var(--gras); }
.crumbs {
font-size: .85rem;
color: var(--inkt-zacht);
margin-top: 1rem;
}
.crumbs a { color: var(--inkt-zacht); }
/* --- hero --- */
.hero {
display: flex;
align-items: center;
gap: 1.5rem;
background: linear-gradient(180deg, var(--lucht-diep), #f7fbff);
border: 1px solid var(--lijn);
border-radius: 1.1rem;
padding: 1.8rem 1.8rem 1.6rem;
margin: 1.6rem 0;
box-shadow: var(--schaduw);
overflow: hidden;
}
.hero-tekst { flex: 1.1; min-width: 15rem; }
.hero-tekst h1 { margin-top: 0; }
.hero-tekst p { color: var(--inkt-zacht); max-width: 30rem; }
.hero-beeld { flex: 1; min-width: 14rem; }
.hero-beeld svg { display: block; width: 100%; height: auto; }
@media (max-width: 40rem) {
.hero { flex-direction: column-reverse; padding: 1.2rem; }
}
/* --- knoppen --- */
.knop {
display: inline-block;
background: var(--oranje);
color: var(--wit);
font-weight: 700;
text-decoration: none;
padding: .6rem 1.2rem;
border: none;
border-radius: .55rem;
font-size: 1rem;
cursor: pointer;
box-shadow: 0 2px 0 var(--oranje-donker);
transition: transform .12s ease, box-shadow .12s ease;
white-space: nowrap;
}
.knop:hover {
background: var(--oranje);
color: var(--wit);
transform: translateY(-2px);
box-shadow: 0 4px 0 var(--oranje-donker);
}
.knop:active { transform: translateY(0); box-shadow: 0 1px 0 var(--oranje-donker); }
/* --- hub-kaarten --- */
.hub-kaarten {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
gap: .9rem;
margin: 1.4rem 0 2.2rem;
}
.hub-kaart {
background: var(--wit);
border: 1px solid var(--lijn);
border-top: 3px solid var(--gras);
border-radius: .7rem;
padding: 1.1rem 1.2rem 1rem;
text-decoration: none;
color: var(--inkt);
box-shadow: var(--schaduw);
transition: transform .12s ease, box-shadow .12s ease;
}
.hub-kaart:hover {
transform: translateY(-3px);
box-shadow: 0 3px 4px rgba(20, 40, 60, .07), 0 12px 26px rgba(20, 40, 60, .11);
color: var(--inkt);
}
.hub-kaart h2 { margin: .45rem 0 .3rem; font-size: 1.1rem; }
.hub-kaart h2::before { content: none; }
.hub-kaart p { margin: 0; font-size: .9rem; color: var(--inkt-zacht); }
.kaart-icoon {
display: inline-flex;
width: 2.3rem;
height: 2.3rem;
align-items: center;
justify-content: center;
background: var(--lucht);
border-radius: .55rem;
color: var(--gras-donker);
}
.kaart-icoon svg { width: 1.3rem; height: 1.3rem; }
/* --- artikel --- */
.artikel { padding-bottom: 2rem; }
.home-intro { padding-bottom: .5rem; }
.intro-antwoord {
background: var(--wit);
border: 1px solid var(--lijn);
border-left: 4px solid var(--gras);
border-radius: .6rem;
padding: .9rem 1.1rem;
margin: 1rem 0 1.4rem;
box-shadow: var(--schaduw);
}
.intro-antwoord p { margin: 0; }
.bijgewerkt {
font-size: .85rem;
color: var(--inkt-zacht);
}
table {
width: 100%;
border-collapse: collapse;
background: var(--wit);
border-radius: .6rem;
overflow: hidden;
font-size: .95rem;
margin: 1rem 0;
box-shadow: var(--schaduw);
}
th, td {
text-align: left;
padding: .65rem .85rem;
border-bottom: 1px solid var(--lijn);
}
th { background: var(--inkt); color: var(--wit); font-weight: 600; }
tbody tr:nth-child(even), tr:nth-child(even) { background: #f6fafd; }
tr:last-child td { border-bottom: none; }
/* --- faq --- */
.faq details {
background: var(--wit);
border: 1px solid var(--lijn);
border-radius: .6rem;
margin: .5rem 0;
padding: .15rem 1rem;
box-shadow: var(--schaduw);
}
.faq summary {
cursor: pointer;
font-weight: 600;
padding: .65rem 0;
list-style: none;
position: relative;
padding-right: 1.6rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: '+';
position: absolute;
right: .1rem;
top: 50%;
transform: translateY(-50%);
font-family: var(--kop-font);
font-size: 1.3rem;
color: var(--gras);
}
.faq details[open] summary::after { content: '–'; }
/* --- productkaarten --- */
.producten { margin: 1.6rem 0; }
.product-kaart {
display: flex;
align-items: center;
gap: 1rem;
background: var(--wit);
border: 1px solid var(--lijn);
border-radius: .7rem;
padding: .9rem 1rem;
margin: .6rem 0;
box-shadow: var(--schaduw);
}
.product-kaart img {
width: 72px;
height: 72px;
object-fit: contain;
flex-shrink: 0;
}
.product-info { flex: 1; min-width: 0; }
.product-naam { font-weight: 600; }
.product-winkel, .product-check {
font-size: .82rem;
color: var(--inkt-zacht);
}
.product-prijs {
font-family: var(--kop-font);
font-weight: 700;
font-size: 1.15rem;
white-space: nowrap;
text-align: right;
}
.product-oud {
font-size: .85rem;
color: var(--inkt-zacht);
text-decoration: line-through;
font-weight: 400;
}
@media (max-width: 34rem) {
.product-kaart { flex-wrap: wrap; }
}
/* --- voet --- */
.site-voet {
background: var(--inkt);
color: #c3d3e2;
margin-top: 3rem;
padding: 2rem 0 1.6rem;
font-size: .88rem;
border-top: 4px solid var(--gras);
}
.site-voet a { color: var(--wit); }
.voet-nav { display: flex; gap: 1.2rem; margin: .8rem 0; flex-wrap: wrap; }
.voet-copy { color: #7f95a8; margin-bottom: 0; }
/* --- toegankelijkheid --- */
:focus-visible {
outline: 3px solid var(--oranje);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
}
/* --- v3 aanvullingen --- */
/* usp-regel onder de hero */
.usps {
display: flex;
flex-wrap: wrap;
gap: .4rem 1.6rem;
list-style: none;
padding: 0;
margin: -.4rem 0 1.6rem;
font-size: .92rem;
font-weight: 600;
color: var(--inkt-zacht);
}
.usps li { display: flex; align-items: center; gap: .45rem; }
.usps li::before {
content: '';
width: .95rem;
height: .95rem;
border-radius: 50%;
background: var(--gras) url('data:image/svg+xml;utf8,') center/100%;
flex-shrink: 0;
}
/* auteursblok onder artikelen */
.auteur-bio {
background: var(--wit);
border: 1px solid var(--lijn);
border-radius: .7rem;
padding: 1rem 1.2rem;
margin: 0 0 2.5rem;
font-size: .92rem;
color: var(--inkt-zacht);
box-shadow: var(--schaduw);
}
.auteur-bio strong { color: var(--inkt); font-family: var(--kop-font); }
.auteur-bio p { margin: 0; }
.auteur-boog {
width: 2.4rem;
height: .4rem;
margin-bottom: .5rem;
background-image: radial-gradient(circle, var(--oranje) 42%, transparent 45%);
background-size: .5rem .5rem;
background-repeat: repeat-x;
}
/* tabellen scrollbaar op mobiel */
@media (max-width: 38rem) {
.artikel table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
/* iets meer lucht en ritme in artikelen */
.artikel p { margin: .8rem 0 1rem; }
.artikel > p:first-of-type { font-size: 1.02em; }
.hero-tekst h1 { font-size: clamp(1.8rem, 4.4vw, 2.5rem); }
/* --- v4: verfijning --- */
/* koppen: kleine letters in de code, eerste letter automatisch kapitaal */
h1::first-letter, h2::first-letter, h3::first-letter,
.faq summary::first-letter, .knop::first-letter,
.product-naam::first-letter, .usps li::first-letter {
text-transform: uppercase;
}
.logo-tekst::first-letter { text-transform: none; } /* merknaam blijft klein */
/* speelsere knoppen: pilvorm */
.knop { border-radius: 999px; padding: .65rem 1.4rem; }
/* hub-kaarten: pijl-affordance en strakkere opbouw */
.hub-kaart { position: relative; padding-right: 2.2rem; }
.hub-kaart::after {
content: '\2192';
position: absolute;
right: 1rem;
bottom: .9rem;
font-family: var(--kop-font);
font-size: 1.1rem;
color: var(--gras);
opacity: 0;
transform: translateX(-4px);
transition: opacity .15s ease, transform .15s ease;
}
.hub-kaart:hover::after { opacity: 1; transform: translateX(0); }
.kaart-icoon {
background: linear-gradient(135deg, var(--lucht-diep), var(--lucht));
border-radius: 50%;
width: 2.6rem;
height: 2.6rem;
}
/* hero: extra diepte */
.hero {
background:
radial-gradient(140% 90% at 85% 0%, #ffffff 0%, transparent 45%),
linear-gradient(180deg, var(--lucht-diep), #f7fbff);
border: none;
padding-bottom: 0;
}
.hero-beeld svg { margin-bottom: -6px; } /* gras sluit aan op de rand */
.hero-tekst { padding-bottom: 1.6rem; }
/* voet: springboog als afsluiter */
.site-voet { border-top: none; position: relative; }
.site-voet::before {
content: '';
position: absolute;
top: -4px;
left: 0;
right: 0;
height: 4px;
background: var(--gras);
}
.voet-boog {
width: 2.4rem;
height: .4rem;
margin-bottom: .8rem;
background-image: radial-gradient(circle, var(--oranje) 42%, transparent 45%);
background-size: .5rem .5rem;
background-repeat: repeat-x;
}
/* home-intro dichter op de kaarten */
.home-intro h2 { margin-top: 1rem; }
/* crumbs subtieler */
.crumbs { margin-top: 1.1rem; margin-bottom: -.2rem; }
/* --- v6: eigen handschrift, minder generiek --- */
/* hoofdletters ook op nav, kruimels en kaartteksten */
.hoofdnav a, .voet-nav a, .crumbs a, .crumbs span { display: inline-block; }
.hoofdnav a::first-letter, .voet-nav a::first-letter,
.crumbs a::first-letter, .crumbs span::first-letter,
.hub-kaart p::first-letter, .intro-antwoord p::first-letter,
.usps li { text-transform: none; }
.hoofdnav a::first-letter, .voet-nav a::first-letter,
.crumbs a::first-letter, .crumbs span::first-letter,
.hub-kaart p::first-letter { text-transform: uppercase; }
.usps li::first-letter { text-transform: uppercase; }
/* hero: volledige band over de schermbreedte, gras loopt door */
.hero {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
margin-top: 0;
border-radius: 0;
box-shadow: none;
padding-left: max(1.25rem, calc(50vw - 22.25rem));
padding-right: max(1.25rem, calc(50vw - 22.25rem));
padding-top: 2.4rem;
}
.hero-beeld svg { max-width: 26rem; margin-left: auto; }
/* links: stevige onderstreping, golvend bij hover (het handschrift) */
.artikel a:not(.knop), .home-intro a {
text-decoration-thickness: 2px;
text-decoration-color: var(--gras);
text-underline-offset: 3px;
}
.artikel a:not(.knop):hover, .home-intro a:hover {
text-decoration-style: wavy;
text-decoration-color: var(--oranje);
}
/* rustiger vlakken: schaduw alleen waar hij werkt */
.intro-antwoord, .faq details, table, .auteur-bio { box-shadow: none; }
.hub-kaart { box-shadow: none; }
.hub-kaart:hover { box-shadow: 0 10px 24px rgba(20, 40, 60, .1); }
.product-kaart { box-shadow: none; }
/* tabellen: geen zebra, dunne lijnen, groene koplijn */
tbody tr:nth-child(even), tr:nth-child(even) { background: transparent; }
th { background: var(--wit); color: var(--inkt); border-bottom: 2px solid var(--gras); }
table { border: 1px solid var(--lijn); }
/* faq: opener zonder kaartgevoel */
.faq details { border-left: 3px solid var(--lijn); border-radius: .35rem; }
.faq details[open] { border-left-color: var(--gras); }
/* knop: pijl erbij, voelt minder als template-knop */
.knop::after { content: ' \2192'; }
/* kaarten: groene toplijn weg, accentkleur alleen bij hover */
.hub-kaart { border-top: 1px solid var(--lijn); }
.hub-kaart:hover { border-color: var(--gras); }
/* --- v7: gras over de volle breedte van de hero --- */
.hero { position: relative; padding-bottom: 0; }
.hero::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: .8rem;
background: var(--gras);
}
.hero-tekst { padding-bottom: 2.2rem; }
.hero-beeld { align-self: flex-end; }
.hero-beeld svg { margin-bottom: -2px; }
/* --- v8: gras als echte heuvel over de volle breedte --- */
.hero::after {
height: 3.4rem;
background:
url("data:image/svg+xml;utf8,")
bottom center / 100% 100% no-repeat;
}
.hero-tekst { padding-bottom: 4.4rem; }
.hero-beeld { position: relative; z-index: 1; }
.hero-beeld svg { margin-bottom: -1.1rem; } /* trampolinepoten staan in het gras */
/* --- v8: mobiel --- */
@media (max-width: 40rem) {
body { font-size: 1rem; }
.kop-inner { justify-content: center; padding-top: .6rem; padding-bottom: .6rem; }
.hoofdnav { gap: .9rem; justify-content: center; }
.hoofdnav a { font-size: .9rem; }
.hero { padding-top: 1.4rem; }
.hero-tekst { padding-bottom: 1rem; }
.hero-tekst h1 { font-size: 1.65rem; }
.hero-beeld { align-self: stretch; }
.hero-beeld svg { max-width: 100%; margin-bottom: -1.1rem; }
.usps { flex-direction: column; gap: .35rem; margin-top: .4rem; }
.hub-kaarten { grid-template-columns: 1fr; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }
.knop { display: block; text-align: center; }
.product-kaart .knop { display: inline-block; }
th, td { padding: .5rem .6rem; font-size: .88rem; }
.faq summary { font-size: .95rem; }
.site-voet { font-size: .84rem; }
}
/* --- v10: mobiele optimalisatie --- */
/* nooit horizontale scroll (full-bleed hero kan 1px overflow geven) */
html, body { overflow-x: clip; }
/* alle media schalen mee */
img, svg { max-width: 100%; height: auto; }
/* grotere tap-targets */
.hoofdnav a { padding: .5rem .15rem; }
.voet-nav a { padding: .4rem 0; display: inline-block; }
.faq summary { min-height: 2.6rem; display: flex; align-items: center; }
@media (max-width: 40rem) {
/* kop: logo boven, nav eronder, alles gecentreerd */
.kop-inner { flex-direction: column; gap: .1rem; }
.hoofdnav { gap: .2rem 1.1rem; }
/* hero compacter, illustratie kleiner en gecentreerd */
.hero { padding-top: 1.2rem; }
.hero-tekst { min-width: 0; padding-bottom: .4rem; }
.hero-tekst p { font-size: .98rem; }
.hero-beeld { min-width: 0; }
.hero-beeld svg { max-width: 17rem; margin: 0 auto -1.1rem; display: block; }
/* productkaart: nette stapeling */
.product-kaart { flex-direction: column; align-items: flex-start; gap: .5rem; }
.product-kaart img { width: 96px; height: 96px; }
.product-prijs { text-align: left; }
.product-kaart .knop { display: block; width: 100%; text-align: center; box-sizing: border-box; }
/* kruimels op 1 regel met ellipsis */
.crumbs { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* koppen en secties compacter */
h2 { margin-top: 1.7rem; }
.intro-antwoord { padding: .75rem .9rem; }
.auteur-bio { padding: .85rem 1rem; }
/* beheer-formulieren bruikbaar op mobiel */
.beheer-form input[type=text], .beheer-form textarea, .beheer-form select { font-size: 16px; } /* voorkomt iOS inzoomen */
}
/* heel smalle schermen */
@media (max-width: 23rem) {
.logo-tekst { font-size: 1.25rem; }
.hero-tekst h1 { font-size: 1.45rem; }
}
/* --- v12: mobiele hero gefixt --- */
@media (max-width: 40rem) {
/* tekst en knop eerst, illustratie eronder op het gras */
.hero { flex-direction: column; gap: .4rem; }
.hero-tekst { order: 1; padding-bottom: 0; }
.hero-beeld { order: 2; }
.hero-beeld svg {
max-width: 15rem;
margin: .3rem auto -1.1rem;
}
/* knop niet tegen de rand */
.hero-tekst .knop { margin-bottom: .5rem; }
}