/* ══════════════════════════════════════════════════════════
HOME.CSS — de herziene homepage
Alleen op index.html geladen, zodat de rest van de site er
niets van merkt.
De verlopen zijn opgebouwd zoals in de presentatie: een
witte bloem linksboven, een gekleurde bloem rechtsboven, en
daaronder een lineair verloop schuin over het vlak. Dat
geeft diepte zonder dat het een plat kleurblok wordt.
De kleur zit nu op ons eigen groen (#059669 en dieper) in
plaats van op het lichte mint van de eerste opzet.
══════════════════════════════════════════════════════════ */
:root{
--wg: #059669;
--wg-diep: #047857;
--wg-donker: #065F46;
--wg-fel: #34D399;
--wg-licht: #6EE7B7;
--wg-zacht: #D1FAE5;
/* Kaartverloop: licht genoeg om tekst op te zetten, maar
duidelijk onze kleur en niet zomaar een grijstint. */
--v-kaart:
radial-gradient(130% 150% at 14% 0%, rgba(255,255,255,.88) 0%, rgba(255,255,255,0) 56%),
linear-gradient(140deg, #E9FBF3 0%, #B7EFD5 100%);
/* Vollere variant voor het blok dat eruit mag springen. */
--v-kaart-vol:
radial-gradient(130% 150% at 14% 0%, rgba(255,255,255,.82) 0%, rgba(255,255,255,0) 56%),
linear-gradient(140deg, #DCF8EC 0%, #8FE3C2 100%);
/* Het grote vlak: hier mag de kleur wel dragen. */
--v-vlak:
radial-gradient(120% 190% at 8% 0%, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 50%),
radial-gradient(150% 210% at 92% 8%, #6EE7B7 0%, rgba(110,231,183,0) 60%),
linear-gradient(120deg, #D9F8EA 0%, #5FD8A6 55%, #10B981 100%);
/* Donker vlak voor de afsluiter. */
--v-diep:
radial-gradient(110% 170% at 12% 0%, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 48%),
radial-gradient(140% 200% at 88% 6%, #10B981 0%, rgba(16,185,129,0) 56%),
linear-gradient(125deg, #065F46 0%, #047857 52%, #064E3B 100%);
--v-koel:
radial-gradient(120% 180% at 10% 0%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 50%),
linear-gradient(135deg, #F8F5EE 0%, #DDEFE6 100%);
--r-vlak: 30px;
--sch: 0 12px 28px -14px rgba(11,15,14,.26);
--sch-s: 0 4px 12px -6px rgba(11,15,14,.16);
}
/* ── Gedeelde onderdelen ────────────────────────────────── */
.h-chip{
display:inline-flex;align-self:flex-start;align-items:center;gap:9px;
padding:9px 19px;border-radius:999px;font-size:.85rem;font-weight:600;
background:rgba(255,255,255,.8);color:#0B3A2B;white-space:nowrap;
}
.h-chip--groen{background:var(--wg-zacht);color:var(--wg-diep)}
.h-chip i{width:7px;height:7px;border-radius:50%;background:var(--wg);display:block}
/* De knop uit de presentatie: witte pil, tekst, donkere ronde
pijlknop. Die vorm komt op meerdere plekken terug. */
.h-pil{
display:inline-flex;align-items:center;gap:16px;
padding:8px 8px 8px 24px;border-radius:999px;background:#fff;
box-shadow:var(--sch);font-size:1rem;font-weight:700;color:var(--text);
text-decoration:none;
}
.h-pil span{
width:42px;height:42px;border-radius:999px;flex:none;background:var(--text);
color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.1rem;
transition:transform .35s cubic-bezier(.2,.8,.25,1);
}
.h-pil:hover span{transform:translateX(4px)}
.h-kop{
font-size:clamp(2.1rem,4.2vw,3.4rem);font-weight:800;
letter-spacing:-.035em;line-height:1.08;margin:0;text-wrap:balance;
}
.h-sub{
font-size:clamp(1rem,1.4vw,1.2rem);line-height:1.55;color:var(--text-soft);
margin:0;max-width:56ch;text-wrap:pretty;
}
/* ══ De demo-sectie ═══════════════════════════════════════
Het middenstuk van de pagina. Drie dingen die we bovenop een
site bouwen, elk als werkende demo in plaats van als tekst.
══════════════════════════════════════════════════════════ */
.demo-sectie{padding:var(--section-y) 0;background:var(--white)}
.demo-kop{display:flex;flex-direction:column;gap:1.1rem;margin-bottom:2.6rem;max-width:60ch}
.demo-tabs{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1.6rem}
.demo-tab{
display:inline-flex;align-items:center;gap:.6rem;
padding:.8rem 1.35rem;border-radius:999px;border:1px solid var(--border);
background:var(--white);color:var(--text-soft);font-size:.98rem;font-weight:600;
cursor:pointer;transition:all .3s var(--ease);font-family:inherit;
}
.demo-tab:hover{border-color:var(--wg);color:var(--wg-diep)}
.demo-tab[aria-selected="true"]{
background:var(--text);border-color:var(--text);color:#fff;
}
.demo-tab-nr{font-size:.78rem;opacity:.55;font-variant-numeric:tabular-nums}
.demo-vlak{
position:relative;border-radius:var(--r-vlak);overflow:hidden;
display:grid;grid-template-columns:1fr 1.15fr;gap:0;min-height:460px;
box-shadow:var(--sch);
}
.demo-uitleg{
padding:clamp(2rem,3.2vw,3rem);display:flex;flex-direction:column;
justify-content:center;gap:1.15rem;background:var(--white);
}
.demo-uitleg h3{
margin:0;font-size:clamp(1.5rem,2.4vw,2.05rem);font-weight:800;
letter-spacing:-.028em;line-height:1.15;
}
.demo-uitleg p{margin:0;font-size:1.02rem;line-height:1.55;color:var(--text-soft)}
.demo-punten{display:flex;flex-direction:column;gap:.6rem;margin:.3rem 0 0;padding:0;list-style:none}
.demo-punten li{
display:flex;gap:.7rem;align-items:flex-start;font-size:.97rem;
line-height:1.45;color:var(--text);
}
.demo-punten li::before{
content:"";flex:none;width:7px;height:7px;border-radius:50%;
background:var(--wg);margin-top:.55rem;
}
.demo-podium{
position:relative;padding:clamp(1.6rem,2.6vw,2.4rem);
display:flex;flex-direction:column;justify-content:center;gap:.9rem;
background:var(--v-vlak);
}
.demo-podium--koel{background:var(--v-koel)}
.demo-podium--diep{background:var(--v-diep)}
/* Alleen het actieve paneel is zichtbaar. */
.demo-paneel{display:none}
.demo-paneel.actief{display:grid}
@media (max-width:900px){
.demo-vlak{grid-template-columns:1fr}
.demo-podium{min-height:380px}
}
/* ── Demo 1 · het AI-antwoord ─────────────────────────── */
.ai-vraag{
background:rgba(255,255,255,.94);border-radius:16px;padding:1.05rem 1.25rem;
font-size:1rem;color:var(--text-soft);box-shadow:var(--sch-s);
}
.ai-antwoord{
background:#fff;border-radius:16px;padding:1.35rem 1.45rem;box-shadow:var(--sch);
font-size:1.04rem;line-height:1.6;min-height:9.5rem;
}
.ai-antwoord mark{
background:linear-gradient(180deg,transparent 58%,rgba(52,211,153,.6) 58%);
color:inherit;font-weight:700;padding:0 2px;
}
.ai-caret{
display:inline-block;width:2px;height:1.05em;background:var(--wg);
vertical-align:-2px;animation:wg-knipper 1s step-end infinite;
}
@keyframes wg-knipper{0%,100%{opacity:0}50%{opacity:1}}
.ai-bronnen{display:flex;gap:.5rem;flex-wrap:wrap}
.ai-bron{
font-size:.78rem;font-weight:600;color:#25503F;
background:rgba(255,255,255,.84);border-radius:999px;padding:.42rem .8rem;
}
/* ── Demo 2 · de agent ────────────────────────────────── */
.chat{display:flex;flex-direction:column;gap:.7rem;justify-content:flex-end;min-height:20rem}
.chat-regel{display:flex}
.chat-regel--in{justify-content:flex-start}
.chat-regel--uit{justify-content:flex-end}
.bel{
max-width:78%;padding:.85rem 1.1rem;font-size:.98rem;line-height:1.45;
border-radius:18px;box-shadow:0 2px 6px -3px rgba(11,15,14,.16);
animation:wg-bel .4s cubic-bezier(.2,.8,.25,1) both;
}
.bel--in{background:#fff;color:var(--text);border-bottom-left-radius:6px}
.bel--uit{background:#DCF8C6;color:#0C2E17;border-bottom-right-radius:6px}
@keyframes wg-bel{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.tikt{display:inline-flex;gap:5px;align-items:center}
.tikt i{
width:7px;height:7px;border-radius:50%;background:#9FB3AA;display:block;
animation:wg-tik 1.3s ease-in-out infinite;
}
.tikt i:nth-child(2){animation-delay:.18s}
.tikt i:nth-child(3){animation-delay:.36s}
@keyframes wg-tik{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
/* ── Demo 3 · de configurator ─────────────────────────── */
.conf{
background:rgba(255,255,255,.96);border-radius:20px;padding:1.5rem 1.6rem;
box-shadow:var(--sch);display:flex;flex-direction:column;gap:1.15rem;
}
.conf-totaal{
display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
border-top:1px solid var(--border);padding-top:1.1rem;
}
.conf-totaal small{font-size:.86rem;color:var(--text-muted)}
.conf-bedrag{
font-size:2.4rem;font-weight:800;letter-spacing:-.03em;color:var(--text);
font-variant-numeric:tabular-nums;
}
.conf-bedrag sup{font-size:1.1rem;font-weight:700;vertical-align:top;margin-right:2px}
/* ── Nabewerking ──────────────────────────────────────────*/
/* De drie tabbladen verschilden sterk in hoogte, waardoor de
pagina onder de sectie opsprong bij het wisselen. */
.demo-vlak{min-height:520px}
.chat{min-height:0;justify-content:center}
/* Het euroteken hing los boven het bedrag. */
.conf-bedrag sup{
font-size:1.05rem;font-weight:700;vertical-align:baseline;
position:relative;top:-.85rem;margin-right:1px;
}
.conf-totaal small{line-height:1.4}
/* De dienstkaarten en de cijferbalk uit style.css staan nog op
het lichtere mint van de eerste opzet. Op de homepage gaan
ze mee in de diepere kleur. */
.service-card{
background:var(--v-kaart);
border-color:rgba(5,150,105,.20);
}
.service-card:nth-child(2){background:var(--v-kaart);border-color:rgba(5,150,105,.20)}
.service-card:nth-child(3){
background:
radial-gradient(130% 150% at 14% 0%, rgba(255,255,255,.88) 0%, rgba(255,255,255,0) 56%),
linear-gradient(140deg, #EFFAF4 0%, #C7EBD9 100%);
border-color:rgba(5,150,105,.20);
}
.service-card:nth-child(4){
background:
radial-gradient(130% 150% at 14% 0%, rgba(255,255,255,.88) 0%, rgba(255,255,255,0) 56%),
linear-gradient(140deg, #FCFAF5 0%, #EFE5D5 100%);
border-color:rgba(133,105,54,.18);
}
.service-card.service-card--featured{
background:var(--v-kaart-vol);
border-color:rgba(5,150,105,.38);
box-shadow:0 10px 26px -16px rgba(11,15,14,.24);
}
/* ── De afsluiter ─────────────────────────────────────────
De pagina eindigde op een egale lichte tint. Hier wordt het
een vlak in dezelfde taal als de rest, zodat de bezoeker de
pagina afsluit in dezelfde wereld waarin hij binnenkwam.
De tekst blijft donker, dus contrast blijft zoals het was. */
.contact-section{
background:
radial-gradient(90% 130% at 6% 0%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 52%),
radial-gradient(110% 160% at 94% 100%, #A7F3D0 0%, rgba(167,243,208,0) 58%),
linear-gradient(125deg, #F0FDF7 0%, #DCF7EA 60%, #C7F1DD 100%);
}
/* ── De hero ──────────────────────────────────────────────
De sluier over de video was neutraal zwart. Een groene
ondertoon plus een lichte gloed rechtsboven maakt dat de
pagina bovenaan al in dezelfde kleurwereld begint als de
secties eronder. De donkerte blijft gelijk, dus de tekst
blijft even leesbaar als hij was.
Let op: dit bestand komt na style.css, dus deze regel wint
ook van de smalle-schermregel daar. Die staat hieronder dus
opnieuw, anders wordt mobiel te licht. */
.hero-scrim{
background:
radial-gradient(120% 80% at 88% 4%, rgba(52,211,153,.30) 0%, rgba(52,211,153,0) 58%),
linear-gradient(to bottom,
rgba(3,38,28,.46) 0%,
rgba(3,38,28,.22) 26%,
rgba(3,38,28,.34) 52%,
rgba(3,38,28,.76) 82%,
rgba(4,32,24,.90) 100%);
}
@media (max-width:860px){
.hero-scrim{
background:
radial-gradient(130% 70% at 88% 2%, rgba(52,211,153,.22) 0%, rgba(52,211,153,0) 55%),
linear-gradient(to bottom,
rgba(3,38,28,.56) 0%,
rgba(3,38,28,.50) 30%,
rgba(3,38,28,.62) 60%,
rgba(3,38,28,.84) 85%,
rgba(4,32,24,.92) 100%);
}
}
/* ══════════════════════════════════════════════════════════
ZWARTE BASIS, GEKLEURDE ACCENTEN
Groen alleen blijft snel eentonig. Vanaf hier is de basis
zwart en wit, met daarnaast zachte verlopen in meerdere
tinten als accent. Groen blijft de merkkleur en komt terug
in de knoppen en in de accentwoorden.
══════════════════════════════════════════════════════════ */
:root{
--zw:#0B0F0E;
}
/* ── De werkkaarten ───────────────────────────────────────
De sfeerbeelden met tekst eroverheen zijn eruit. In plaats
daarvan de echte schermafdruk van de site, in een lijstje
dat op een browser lijkt, met de tekst eronder in plaats van
erover. Wij bouwen websites; dan laat je die zien.
Het browserbalkje is een pseudo-element, dus dit vroeg geen
extra opmaak in de HTML. */
.case-card{
display:flex !important;flex-direction:column;
border-radius:22px;overflow:hidden;padding:0 0 .25rem;
box-shadow:0 10px 34px -18px rgba(11,15,14,.34);
transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.case-card:hover{transform:translateY(-4px);box-shadow:0 20px 46px -20px rgba(11,15,14,.4)}
.case-card::before{
content:"";position:absolute;z-index:2;
top:16px;left:16px;right:16px;height:24px;
background:#fff;border-radius:11px 11px 0 0;
box-shadow:inset 0 -1px 0 rgba(11,15,14,.07);
background-image:
radial-gradient(circle at 14px 12px, #FF5F57 3.5px, transparent 3.6px),
radial-gradient(circle at 28px 12px, #FEBC2E 3.5px, transparent 3.6px),
radial-gradient(circle at 42px 12px, #28C840 3.5px, transparent 3.6px);
background-repeat:no-repeat;
}
.case-card .case-bg{
position:static !important;
width:auto;height:200px;object-fit:cover;object-position:top center;
margin:40px 16px 0;border-radius:0 0 11px 11px;
filter:none;opacity:1;
box-shadow:0 8px 22px -12px rgba(11,15,14,.32);
}
.case-card .case-overlay{
position:static !important;
padding:1.25rem 1.35rem 1.35rem;
background:none !important;
display:flex;flex-direction:column;gap:.6rem;
}
.case-card .case-name{color:var(--zw) !important;font-size:1.18rem;letter-spacing:-.02em}
.case-card .case-desc{color:#3A4A44 !important;font-size:.94rem;line-height:1.45;margin:0}
.case-card .case-service{
background:rgba(255,255,255,.78) !important;color:#26362F !important;
border:none !important;font-size:.78rem;padding:.35rem .75rem;
}
.case-card .case-cta-row{color:var(--wg-diep) !important;font-weight:700;font-size:.92rem}
/* De kaart had een vaste verhouding van 4:5, bedoeld voor een
foto met tekst eroverheen. Nu de tekst eronder staat, moet
de hoogte meegroeien met de inhoud; anders valt de laatste
regel eraf. In de rij worden ze alsnog even hoog omdat de
schermafdruk een vaste hoogte heeft. */
.work-track .case-card{aspect-ratio:auto !important;height:auto}
.case-card .case-bg{height:180px}
.case-card .case-overlay{padding-bottom:1.5rem}
.case-card .case-services{margin-top:.1rem}
/* ══ Prijzen ═══════════════════════════════════════════════
Drie kaarten met alleen een bedrag en een zin erin lezen als
drie lege doosjes. Er staat nu in wat je krijgt, en de
middelste is zwart in plaats van omrand met een oranje
labeltje dat nergens anders op de site voorkomt.
══════════════════════════════════════════════════════════ */
.pricing-section{background:var(--white)}
.pricing-grid{align-items:stretch}
.price-card{
display:flex !important;flex-direction:column;gap:0;
background:var(--white);border:1px solid var(--border) !important;
border-radius:24px;padding:2rem 1.9rem 1.9rem;
box-shadow:none !important;
transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.price-card:hover{
transform:translateY(-3px);
border-color:rgba(11,15,14,.22) !important;
box-shadow:0 16px 40px -22px rgba(11,15,14,.3) !important;
}
.price-name{font-size:1.05rem;font-weight:700;letter-spacing:-.01em;color:var(--text)}
/* Het bedrag stond op één regel met "vanaf" ervoor, waardoor de
grondlijnen niet klopten. "vanaf" gaat er nu boven staan. */
.price-amount{
display:flex !important;align-items:baseline;gap:.35rem;
flex-wrap:wrap;margin:1.5rem 0 .2rem;
}
.price-from{
flex:0 0 100%;font-size:.78rem;font-weight:600;letter-spacing:.08em;
text-transform:uppercase;color:var(--text-muted);margin-bottom:.4rem;
}
.price-big{
font-size:clamp(2.6rem,4vw,3.2rem);font-weight:800;letter-spacing:-.04em;
line-height:1;font-variant-numeric:tabular-nums;color:var(--text);
}
.price-period{font-size:1rem;font-weight:600;color:var(--text-muted)}
.price-tagline{
font-size:.96rem;line-height:1.5;color:var(--text-soft);
margin:.9rem 0 0;padding-bottom:1.3rem;
border-bottom:1px solid var(--border);
}
.price-lijst{
list-style:none;margin:1.3rem 0 0;padding:0;
display:flex;flex-direction:column;gap:.7rem;flex:1;
}
.price-lijst li{
display:flex;gap:.65rem;align-items:flex-start;
font-size:.95rem;line-height:1.4;color:var(--text);
}
.price-lijst li::before{
content:"";flex:none;width:16px;height:16px;border-radius:50%;
margin-top:.15rem;background:var(--wg-zacht);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.4 8.3l2.3 2.3 4.9-4.9' fill='none' stroke='%23047857' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.price-link{margin-top:1.6rem;font-weight:700;color:var(--wg-diep) !important}
/* De uitgelichte kaart: zwart, met een zachte kleurgloed in de
hoek. Dat is het accent dat we ook in de cijferbalk gebruiken,
zodat de pagina één taal spreekt. */
.price-card--featured{
position:relative;overflow:hidden;
background:var(--zw) !important;border-color:var(--zw) !important;
}
.price-card--featured::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:
radial-gradient(80% 120% at 100% -8%, rgba(255,196,160,.34) 0%, rgba(255,196,160,0) 55%),
radial-gradient(70% 110% at 10% 110%, rgba(52,211,153,.30) 0%, rgba(52,211,153,0) 58%);
}
.price-card--featured > *{position:relative;z-index:1}
.price-card--featured .price-name,
.price-card--featured .price-big{color:#fff !important}
.price-card--featured .price-from{color:rgba(255,255,255,.55) !important}
.price-card--featured .price-period{color:rgba(255,255,255,.62) !important}
.price-card--featured .price-tagline{
color:rgba(255,255,255,.74) !important;border-bottom-color:rgba(255,255,255,.16);
}
.price-card--featured .price-lijst li{color:rgba(255,255,255,.92)}
.price-card--featured .price-lijst li::before{background-color:rgba(52,211,153,.22)}
.price-card--featured .price-link{color:var(--wg-fel) !important}
.price-card--featured:hover{border-color:var(--zw) !important}
/* Het oranje labeltje kwam nergens anders voor. */
.price-card--featured .price-badge,
.price-card--featured .price-tag,
.price-badge{
background:rgba(255,255,255,.16) !important;color:#fff !important;
border:none !important;font-weight:600;letter-spacing:.04em;
}
/* Het label stond absoluut gepositioneerd; mijn regel hierboven
die alle directe kinderen op relatief zette, haalde dat weg
waardoor het over de titel viel. Hier expliciet terug. */
.price-card--featured .price-popular{
position:absolute !important;top:1.4rem;right:1.5rem;left:auto;
transform:none;z-index:2;
background:rgba(255,255,255,.15) !important;color:#fff !important;
box-shadow:none !important;font-size:.68rem;letter-spacing:.06em;
padding:.3rem .7rem;
}
/* ══ Reviews ═══════════════════════════════════════════════
De gele sterren vloekten met het groen en zeiden bovendien
niets: vijf sterren bij elke review leest als versiering. De
beoordeling staat al in de kop, met het Google-logo erbij.
Wat overblijft is het citaat, en dat is waar het om gaat.
══════════════════════════════════════════════════════════ */
.reviews-section{background:var(--white)}
.review-stars{display:none !important}
.review-card{
background:var(--panel,#F7FAF9) !important;
border:none !important;box-shadow:none !important;
border-radius:22px;padding:1.9rem 1.8rem 1.7rem;
display:flex;flex-direction:column;gap:1.3rem;
transition:transform .35s var(--ease);
}
.review-card:hover{transform:translateY(-3px)}
/* Het citaat wordt de hoofdzaak, dus groter en met wat lucht.
De aanhalingstekens zijn een teken in plaats van een plaatje. */
.review-quote{
position:relative;font-size:1.06rem;line-height:1.55;color:#17332A;
margin:0;font-style:normal;quotes:"\201C" "\201D";flex:1;
}
.review-quote::before{
content:open-quote;font-size:2.6rem;line-height:0;color:rgba(11,15,14,.20);
vertical-align:-.42em;margin-right:.12em;
}
.review-quote::after{content:close-quote;font-size:0}
.review-footer{
display:flex;align-items:center;gap:.85rem;
border-top:1px solid rgba(11,15,14,.10);padding-top:1.1rem;margin:0;
}
.review-avatar{
width:42px;height:42px;border-radius:50%;object-fit:cover;flex:none;
box-shadow:0 0 0 2px rgba(255,255,255,.9);
}
.review-name{font-size:.96rem;font-weight:700;color:var(--zw);display:block}
.review-biz{font-size:.85rem;color:#4A5C54}
/* ── Populair-label op de dienstenkaart ─────────────────────────────
Het oranje uit het oude palet vloekt met de zachte kleurverlopen.
Zelfde donkere pil als bij de prijzen, zodat het label overal
hetzelfde betekent. */
.service-card .service-badge{
background:var(--zw) !important;
color:#fff !important;
letter-spacing:.08em;
font-size:.62rem;
padding:.3rem .7rem;
border-radius:999px;
box-shadow:0 2px 10px rgba(11,15,14,.18);
}
/* ══════════════════════════════════════════════════════════
TERUG NAAR ZWART, WIT EN GROEN
══════════════════════════════════════════════════════════
De vorige stap zette perzik, lila, lucht, zand en roze naast
elkaar. Los van elkaar werkte elke tint, maar bij elkaar op
één pagina werd het te veel: zes verschillende kleurwerelden
die allemaal om aandacht vroegen, waardoor het groen — onze
eigen kleur — juist wegviel.
De basis is nu zwart en wit. Groen is het enige accent en
staat alleen daar waar het iets betekent: een link, een
getalteken, een vinkje, een citaatteken. De kleurverlopen
blijven bestaan, maar ze zijn nu een grijstoon met een
nauwelijks waarneembare groene ondertoon in plaats van een
eigen kleur.
Eén uitzondering: de drie demo's (AI-antwoord, agent,
configurator) houden hun groene vlak. Die vond Bart goed, en
het is de plek waar de kleur echt iets draagt.
══════════════════════════════════════════════════════════ */
:root{
/* Off-white met een spoor groen erin, zodat het als gekozen
leest en niet als standaard-grijs. */
--n-vlak:#F5F7F6;
--n-vlak-2:#EEF1F0;
--n-lijn:rgba(11,15,14,.09);
--n-lijn-sterk:rgba(11,15,14,.16);
/* Het enige kleurverloop dat overblijft in de lichte secties:
wit dat naar off-white zakt, met een vleugje groen. */
--n-kaart:
radial-gradient(120% 150% at 12% 0%, #FFFFFF 0%, rgba(255,255,255,0) 62%),
linear-gradient(140deg, #F8FAF9 0%, #EDF1EF 100%);
}
/* ── Dienstkaarten ───────────────────────────────────────── */
.service-card,
.service-card:nth-child(2),
.service-card:nth-child(3),
.service-card:nth-child(4),
.service-card.service-card--featured{
background:var(--n-kaart) !important;
border:1px solid var(--n-lijn) !important;
box-shadow:none !important;
}
/* De uitgelichte kaart onderscheidt zich met een groene rand en
een spoor kleur, niet met een eigen tint. */
.service-card.service-card--featured{
border-color:rgba(5,150,105,.30) !important;
box-shadow:0 10px 26px -16px rgba(11,15,14,.24) !important;
}
.service-card .service-icon{
background:#fff !important;
border:1px solid var(--n-lijn);
color:var(--wg-diep) !important;
box-shadow:none !important;
}
.service-card .service-link{color:var(--wg-diep) !important}
/* ── Werkkaarten ─────────────────────────────────────────── */
.case-card{
background:var(--n-kaart) !important;
border:1px solid var(--n-lijn);
}
/* De stoplichtjes in het browserbalkje waren rood, geel en
groen. Op een pagina die verder alleen zwart, wit en groen
is, zijn dat er twee te veel. Grijs; de vorm doet het werk. */
.case-card::before{
background-image:
radial-gradient(circle at 14px 12px, rgba(11,15,14,.16) 3.5px, transparent 3.6px),
radial-gradient(circle at 28px 12px, rgba(11,15,14,.16) 3.5px, transparent 3.6px),
radial-gradient(circle at 42px 12px, rgba(11,15,14,.16) 3.5px, transparent 3.6px) !important;
}
.case-card .case-service{
background:#fff !important;color:#3A4A44 !important;
border:1px solid var(--n-lijn) !important;
}
/* ── Prijzen ─────────────────────────────────────────────── */
/* Ook hier de perzikgloed eruit; de zwarte kaart heeft die niet
nodig om op te vallen tussen twee witte. */
.price-card--featured::after{
background:
radial-gradient(75% 120% at 100% -10%, rgba(52,211,153,.26) 0%, rgba(52,211,153,0) 56%),
radial-gradient(65% 110% at 6% 112%, rgba(52,211,153,.14) 0%, rgba(52,211,153,0) 58%) !important;
}
/* ── Reviews ─────────────────────────────────────────────── */
/* Zes kaarten, zes tinten: dat was de duidelijkste plek waar
het te bont werd. Nu zes gelijke kaarten; het verschil zit in
wat er staat, niet in de kleur eromheen. */
.reviews-grid .review-card{
background:var(--n-kaart) !important;
border:1px solid var(--n-lijn) !important;
}
/* Het citaatteken is nu het enige gekleurde ding in de kaart. */
.review-quote::before{color:rgba(5,150,105,.34)}
.review-avatar{box-shadow:0 0 0 2px #fff, 0 0 0 3px var(--n-lijn)}
/* ── De afsluiter ────────────────────────────────────────── */
/* Het groene vlak onderaan was de laatste plek waar de kleur
over een hele sectie lag. Een lichte, bijna witte basis met
het groen alleen nog in de hoek houdt de aandacht bij het
formulier in plaats van bij de achtergrond. */
.contact-section{
background:
radial-gradient(90% 130% at 96% 100%, rgba(52,211,153,.16) 0%, rgba(52,211,153,0) 58%),
linear-gradient(180deg, #FFFFFF 0%, #F4F7F6 100%) !important;
}
/* ══════════════════════════════════════════════════════════
DE PARTITUUR
══════════════════════════════════════════════════════════
Eerste poging: zeven witte secties op rij, en het oog stopte
met kijken. Tweede poging: drie zwarte blokken erin, en toen
was veertig procent van de pagina donker.
Nu licht, met donker als boekensteun: alleen de hero en de
footer. Daartussen wisselen wit en een off-white met groene
ondertoon elkaar af. Dat verschil is klein, en dat is goed —
het hoort te werken als maatstreep, niet als kleurvlak.
1 hero donker (video)
2 logo's wit
3 diensten zacht + raster
4 werk wit
5 reviews zacht
6 demo wit, met één donker paneel erin
7 prijzen zacht
8 kennisbank wit
9 contact zacht + raster
10 footer donker
Het ritme komt nu uit de afwisseling én uit de compositie:
het demopaneel is het enige zwarte object in de body, en
daardoor de plek waar je oog naartoe gaat.
══════════════════════════════════════════════════════════ */
:root{
--vlak-wit:#FFFFFF;
--vlak-zacht:#F4F7F6; /* off-white met groene ondertoon */
--vlak-zwart:#0B0F0E;
--op-zwart: rgba(255,255,255,.94);
--op-zwart-zacht:rgba(255,255,255,.66);
--op-zwart-lijn: rgba(255,255,255,.13);
}
/* ── Het raster ───────────────────────────────────────────
Een blauwdruk-raster van 24px als textuur. De bron die ik
erbij pakte waarschuwt dat dit vooral misgaat door het te
sterk te zetten; op .045 zie je het pas als je erop let,
en dat is precies de bedoeling. Het geeft de zachte vlakken
maat zonder dat er kleur bij komt. */
.storytelling,
.contact-section{
position:relative;
background:var(--vlak-zacht) !important;
}
.storytelling::before,
.contact-section::before{
content:"";position:absolute;inset:0;pointer-events:none;
background-image:
linear-gradient(rgba(11,15,14,.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(11,15,14,.045) 1px, transparent 1px);
background-size:24px 24px;
/* Naar de randen laten wegvallen, anders wordt het behang. */
-webkit-mask-image:radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 78%);
mask-image:radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 78%);
}
.storytelling > *,
.contact-section > *{position:relative;z-index:1}
/* ── De lichte secties ────────────────────────────────────*/
.work-section, .kb-section, .demo-sectie{background:var(--vlak-wit) !important}
.reviews-section, .pricing-section{background:var(--vlak-zacht) !important}
/* Op een zacht vlak moeten de kaarten wit zijn om te bestaan;
op wit juist een tint zachter. Zo houdt elke kaart een rand
zonder dat er een lijntje omheen hoeft. */
.reviews-grid .review-card{
background:var(--vlak-wit) !important;
border:1px solid rgba(11,15,14,.07) !important;
box-shadow:0 1px 2px rgba(11,15,14,.04) !important;
}
.storytelling .service-card{
background:var(--vlak-wit) !important;
border:1px solid rgba(11,15,14,.08) !important;
}
.storytelling .service-card.service-card--featured{
border-color:rgba(5,150,105,.34) !important;
box-shadow:0 10px 26px -16px rgba(11,15,14,.24) !important;
}
/* ══ Contrast ══════════════════════════════════════════════
De groene kopjes stonden op --wg (#059669). Op wit haalt
dat 3.8:1, en deze letters zijn klein en in kapitalen — dan
is 4.5:1 de ondergrens. --wg-donker (#065F46) haalt 7.4:1.
══════════════════════════════════════════════════════════ */
.storytelling .section-eyebrow,
.work-section .section-eyebrow,
.reviews-section .section-eyebrow,
.kb-section .section-eyebrow,
.contact-section .section-eyebrow{color:var(--wg-donker) !important}
/* ══ Aandachttrekkers ══════════════════════════════════════ */
/* De logo's liepen al, maar stonden stil bij hover-afwezigheid
van beweging elders. Ze krijgen nu randen die wegvallen,
zodat de rij niet abrupt afgeknipt lijkt. */
.trust-strip .logo-slider{
-webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
/* Kaarten die reageren. Niet alleen omhoog, maar de schaduw
groeit mee: dat is wat een echte lift overtuigend maakt. */
.work-track .case-card{transition:transform .38s var(--ease), box-shadow .38s var(--ease)}
.case-card:hover .case-bg{transform:scale(1.03)}
.case-card .case-bg{transition:transform .5s var(--ease)}
/* ══ Koppen laten variëren ═════════════════════════════════
Zes keer hetzelfde blok (kopje, titel, subregel) onder
elkaar leest als een sjabloon. Op de brede secties gaat de
subregel naast de titel staan in plaats van eronder. Dat
verandert niets aan de inhoud en breekt de herhaling.
══════════════════════════════════════════════════════════ */
@media (min-width:1000px){
.kb-section .section-header{
display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
align-items:end;gap:2.5rem;
}
.kb-section .section-header > .section-eyebrow{grid-column:1;grid-row:1}
.kb-section .section-header > h2{grid-column:1;grid-row:2;margin-bottom:0}
.kb-section .section-header > p{grid-column:2;grid-row:2;margin:0 0 .5rem}
}
/* ── De naden ─────────────────────────────────────────────
112px boven én onder stapelt tot 224px bij elke overgang.
Dat was passend toen alles wit was en de ruimte het enige
was dat secties scheidde. Nu de achtergrond wisselt, doet
die wissel dat werk al en leest zoveel ruimte als een gat.
96px per kant houdt het royaal en haalt het gapen eruit. */
.storytelling, .demo-sectie, .work-section,
.reviews-section, .pricing-section, .kb-section,
.contact-section{
padding-top:clamp(3.5rem,6vw,6rem);
padding-bottom:clamp(3.5rem,6vw,6rem);
}
/* Het raster in de contactsectie kwam sterker uit dan in de
dienstensectie, omdat er meer leeg vlak omheen ligt. Een
halve stap terug, en het zwaartepunt naar links waar de
tekst staat. */
.contact-section::before{
background-image:
linear-gradient(rgba(11,15,14,.032) 1px, transparent 1px),
linear-gradient(90deg, rgba(11,15,14,.032) 1px, transparent 1px) !important;
-webkit-mask-image:radial-gradient(90% 90% at 12% 8%, #000 12%, transparent 72%) !important;
mask-image:radial-gradient(90% 90% at 12% 8%, #000 12%, transparent 72%) !important;
}
/* ══ Het demopaneel ════════════════════════════════════════
De sectie is wit; het paneel erin is zwart. Dat is het enige
donkere object in de body, en dus vanzelf de plek waar je
oog naartoe gaat — precies waar het naartoe moet, want dit
is het enige op de pagina dat een ander webbureau niet ook
heeft staan.
De uitleg links wordt donker, het podium rechts houdt zijn
groen. Samen één blok dat op wit ligt in plaats van een
sectie die je overspoelt.
══════════════════════════════════════════════════════════ */
.demo-sectie .demo-vlak{
background:var(--vlak-zwart);
border:none;
border-radius:var(--r-vlak);
overflow:hidden;
box-shadow:0 30px 70px -34px rgba(11,15,14,.45);
}
.demo-sectie .demo-uitleg{background:transparent}
.demo-sectie .demo-uitleg h3{color:#fff}
.demo-sectie .demo-uitleg p{color:var(--op-zwart-zacht)}
.demo-sectie .demo-punten li{color:var(--op-zwart)}
/* De tabs staan op wit en horen dus licht te blijven; alleen de
gekozen tab wordt zwart, zodat hij het paneel eronder aankondigt. */
.demo-sectie .demo-tab[aria-selected="true"],
.demo-sectie .demo-tab.aan{
background:var(--vlak-zwart) !important;
border-color:var(--vlak-zwart) !important;
color:#fff !important;
}
.demo-sectie .demo-tab[aria-selected="true"] .demo-tab-nr,
.demo-sectie .demo-tab.aan .demo-tab-nr{color:rgba(255,255,255,.55)}
/* ══ De prijskaarten ═══════════════════════════════════════
Op een zacht vlak zijn de kaarten wit. De uitgelichte is weer
zwart — dat mag, want het is één kaart en geen sectie, en het
rijmt met het demopaneel erboven. */
.pricing-section .price-card{
background:var(--vlak-wit) !important;
border:1px solid rgba(11,15,14,.08) !important;
}
.pricing-section .price-card--featured{
background:var(--vlak-zwart) !important;
border-color:var(--vlak-zwart) !important;
}
/* ══ De afsluiter ══════════════════════════════════════════ */
.contact-section{background:var(--vlak-zacht) !important}
/* Op het zachte vlak haalt --text-muted 4.33:1; net onder de grens.
Deze regel is bovendien belangrijker dan hij lijkt: het zijn
voorbeeldprijzen, en dat hoort leesbaar te zijn. */
.price-note{color:#4F6258 !important}
/* ══════════════════════════════════════════════════════════
RONDE 3 — losse punten uit Barts doorloop
══════════════════════════════════════════════════════════ */
/* ── De pilknop ───────────────────────────────────────────
De vorm klopte al (label links, ronde pijl rechts), maar hij
stond in een flexkolom en rekte daardoor over de hele breedte
uit. Een knop hoort zo breed te zijn als zijn tekst. */
.h-pil{align-self:flex-start;width:auto}
/* Buiten een flexkolom (bijv. onder de kennisbank) moet hij het
zelf regelen. */
.kb-allcta{display:flex;justify-content:center}
/* Op de donkere demopanelen is de witte pil precies goed; op een
licht vlak heeft hij een randje nodig om niet te vervagen. */
.kb-allcta .h-pil{
border:1px solid rgba(11,15,14,.10);
box-shadow:0 6px 22px -12px rgba(11,15,14,.28);
}
/* ── De contactknop in de header ──────────────────────────
Groen op een doorzichtige header over een groenige video gaf
te weinig scheiding. Wit met groene tekst springt er wél uit,
en het is meteen de enige witte vorm in de balk. */
.nav-cta{
background:#fff !important;
color:var(--wg-diep) !important;
box-shadow:0 2px 10px rgba(0,0,0,.10);
}
.nav-cta:hover{background:var(--wg-zacht) !important;color:var(--wg-donker) !important}
/* Zodra de header wit wordt bij het scrollen, valt een witte knop
weg tegen de balk. Dan een lijntje erbij. */
.site-header.scrolled .nav-cta{
border:1px solid rgba(5,150,105,.30);
box-shadow:none;
}
/* ── De glow op de projecttitels ──────────────────────────
Stond er nog uit de tijd dat de titel over een foto lag. De
titel staat nu op een lichte kaart, dus de schaduw maakte de
letters alleen maar vaag. */
.case-card .case-name{text-shadow:none !important}
/* ── De voortgang in de lopende tab ───────────────────────
Laat zien dát de demo's vanzelf doorgaan en hoeveel tijd er
nog is. Zonder zo'n teken voelt een paneel dat uit zichzelf
verspringt als een storing in plaats van als een keuze.
Eerst een lijntje onderaan geprobeerd, maar de tab is een pil
met een ronde rand: die knipt zo'n lijn weg tot een sliertje
in de hoek. Het is nu een veeg die van links naar rechts door
de pil loopt — die volgt de vorm wél.
De duur komt uit home.js via --loop, zodat de veeg klopt met
hoe lang het paneel werkelijk blijft staan. */
.demo-tab{position:relative;overflow:hidden;isolation:isolate}
.demo-tab::after{
content:"";position:absolute;inset:0;z-index:-1;
background:rgba(52,211,153,.20);
transform:scaleX(0);transform-origin:left center;
}
.demo-tab.loopt::after{animation:tabLoopt var(--loop,8s) linear forwards}
@keyframes tabLoopt{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* Op de zwarte, gekozen tab mag de veeg iets sterker, anders
verdwijnt hij in het zwart. */
.demo-tab[aria-selected="true"]::after{background:rgba(52,211,153,.28)}
@media (prefers-reduced-motion: reduce){
.demo-tab::after{display:none}
}
/* ══════════════════════════════════════════════════════════
RONDE 4 — de twee demo's opnieuw
══════════════════════════════════════════════════════════ */
/* ── Het assistentvenster ─────────────────────────────────
De eerste demo was een vraag- en een antwoordvakje op een
groen vlak. Dat leek nergens op, terwijl juist de herkenning
het punt is: dit is het scherm waar je klant zit.
Bewust niet één merk nagebouwd. Het is een assistentvenster
zoals ze allemaal werken — en dat is ook eerlijker, want de
dienst gaat over álle assistenten, niet over die ene. */
.demo-podium--venster{
background:#F2F5F4 !important;
padding:clamp(1rem,2vw,1.6rem);
display:flex;align-items:stretch;
}
.ai-venster{
flex:1;display:flex;flex-direction:column;min-height:0;
background:#fff;border-radius:16px;overflow:hidden;
box-shadow:0 10px 34px -18px rgba(11,15,14,.30);
}
.ai-venster__balk{
display:flex;align-items:center;gap:.5rem;
padding:.7rem 1rem;border-bottom:1px solid rgba(11,15,14,.07);
background:#FAFBFB;
}
.ai-venster__naam{
font-size:.8rem;font-weight:600;color:#5A6B63;letter-spacing:.01em;
}
.ai-draad{
flex:1;display:flex;flex-direction:column;gap:1rem;
padding:1.1rem 1.15rem;overflow:hidden;
}
/* De vraag rechts in een grijze bel, het antwoord links over de
volle breedte met een merkje ervoor. Dat is de vorm die in
elke assistent hetzelfde is. */
.ai-regel{display:flex;gap:.7rem}
.ai-regel--jij{justify-content:flex-end}
.ai-bel{
max-width:84%;background:#F0F2F1;color:#1B2A24;
padding:.7rem .95rem;border-radius:16px 16px 4px 16px;
font-size:.95rem;line-height:1.45;
}
.ai-regel--ai{align-items:flex-start}
.ai-merk{
flex:0 0 auto;width:26px;height:26px;border-radius:50%;
display:grid;place-items:center;margin-top:.1rem;
background:var(--wg-donker);color:#fff;
}
.ai-merk svg{width:15px;height:15px}
.ai-venster .ai-antwoord{
font-size:.97rem;line-height:1.6;color:#17332A;
background:none;padding:0;border-radius:0;box-shadow:none;
}
.ai-venster .ai-bronnen{padding-left:calc(26px + .7rem)}
.ai-venster .ai-bron{
background:#F2F5F4;color:#3A4A44;border:1px solid rgba(11,15,14,.07);
}
/* Een invoerbalk onderaan. Doet niets — hij maakt het beeld af,
zoals de adresbalk op de werkkaarten. */
.ai-invoer{
display:flex;align-items:center;justify-content:space-between;gap:.75rem;
margin:0 1.15rem 1.15rem;padding:.6rem .6rem .6rem 1rem;
border:1px solid rgba(11,15,14,.10);border-radius:999px;background:#FAFBFB;
}
.ai-invoer__tekst{font-size:.9rem;color:#8A9A93}
.ai-invoer__knop{
width:30px;height:30px;border-radius:50%;flex:none;
background:var(--zw);color:#fff;display:grid;place-items:center;font-size:.9rem;
}
/* ── De merken waarin we vindbaar maken ───────────────────
Woordmerken als tekst. Officiële logo's zijn het net iets
mooier, maar die moeten van de merkpagina van elk bedrijf
komen; namaak uit mijn hoofd is zowel juridisch rommelig
als visueel altijd nét verkeerd. De opzet is er klaar voor:
elk vakje kan een ![]()
worden zonder dat de rij verschuift. */
.ai-merken{
display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .6rem;
margin:.2rem 0 .4rem;
}
.ai-merken__label{
font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
color:var(--op-zwart-zacht);margin-right:.2rem;
}
.ai-merk-slot{
display:inline-flex;align-items:center;justify-content:center;
min-height:30px;padding:.3rem .7rem;border-radius:8px;
background:rgba(255,255,255,.07);border:1px solid var(--op-zwart-lijn);
font-size:.84rem;font-weight:600;color:var(--op-zwart);
white-space:nowrap;
}
.ai-merk-slot img{max-height:16px;width:auto;display:block}
/* De 9,5rem was gereserveerde ruimte zodat het paneel niet sprong
terwijl de tekst zich vulde. In het assistentvenster staat het
antwoord tussen een vraag en een bronnenrij, en dan is die
reservering te ruim: er viel een gat onder het antwoord.
Vier regels is genoeg om het springen te voorkomen. */
.ai-venster .ai-antwoord{min-height:4.8em}
/* De bronnen aan het antwoord vastplakken en de resterende ruimte
onderin laten vallen, waar hij niet opvalt. */
.ai-draad{justify-content:flex-start}
.ai-venster .ai-bronnen{margin-bottom:auto}
/* De tekst in de nep-invoerbalk haalde 2,84:1. Hij is decoratief
(aria-hidden), maar wat zichtbaar is hoort leesbaar te zijn —
iemand die slecht ziet weet niet dat het decoratie is. */
.ai-invoer__tekst{color:#61726B}
/* ══════════════════════════════════════════════════════════
DE KLANTKAARTEN
══════════════════════════════════════════════════════════
Wat er niet klopte:
- De schermafdruk had een eigen schaduw en eigen ronde
hoeken, terwijl er een browserbalkje bovenop lag. Daardoor
zag je twee losse dingen in plaats van één venster.
- De balk was decoratie: drie stoplichtjes en verder niets.
- De kaart zelf was bijna-wit op wit en dreef weg.
De balk heeft nu de adresbalk waar hij voor bedoeld is, met
het echte domein erin. Dat is meteen het bewijs: deze sites
bestaan en je kunt ze zelf opzoeken. Beeld en balk zijn één
vlak geworden.
══════════════════════════════════════════════════════════ */
.case-card{
background:#fff !important;
border:1px solid rgba(11,15,14,.09) !important;
box-shadow:0 1px 2px rgba(11,15,14,.04) !important;
padding:0 0 .25rem !important;
}
.case-card:hover{
box-shadow:0 14px 30px -18px rgba(11,15,14,.26) !important;
border-color:rgba(11,15,14,.14) !important;
}
/* De balk: stoplichtjes links, dan het domein. Eén regel tekst
in plaats van een leeg strookje. */
.case-card::before{
content:attr(data-domein) !important;
top:14px;left:14px;right:14px;height:26px;
border-radius:9px 9px 0 0 !important;
background:#F3F5F4 !important;
border:1px solid rgba(11,15,14,.09);
border-bottom:none;
box-shadow:none !important;
background-image:
radial-gradient(circle at 13px 13px, rgba(11,15,14,.17) 3px, transparent 3.1px),
radial-gradient(circle at 25px 13px, rgba(11,15,14,.17) 3px, transparent 3.1px),
radial-gradient(circle at 37px 13px, rgba(11,15,14,.17) 3px, transparent 3.1px) !important;
background-repeat:no-repeat !important;
display:flex;align-items:center;
padding-left:50px;padding-right:10px;
font-size:.72rem;color:#6B7C75;letter-spacing:.005em;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Het beeld sluit direct op de balk aan: geen eigen schaduw,
geen ronde hoeken bovenaan, dezelfde randlijn eromheen. */
.case-card .case-bg{
width:auto;height:172px;
margin:40px 14px 0 !important;
border:1px solid rgba(11,15,14,.09);
border-top:none;
border-radius:0 0 9px 9px !important;
box-shadow:none !important;
object-position:top center;
}
.case-card .case-overlay{padding:1.15rem 1.3rem 1.3rem !important}
/* De labels stonden op wit-op-wit; een lijntje maakt ze weer
leesbaar als losse elementen. */
.case-card .case-service{
background:#F5F7F6 !important;color:#3A4A44 !important;
border:1px solid rgba(11,15,14,.08) !important;
}
/* ── De taalkiezer ────────────────────────────────────────
Stond op "English — binnenkort" en was dus geen keuze maar
een aankondiging. Nu een echte link. De opmaak van .lang-soon
was op dat wachten gemaakt; .lang-optie is een gewone regel
die oplicht als je erover gaat. */
.lang-optie{
display:block;padding:.5rem .9rem;border-radius:8px;
font-size:.9rem;font-weight:600;color:var(--text-soft);
text-decoration:none;transition:background .2s var(--ease), color .2s var(--ease);
}
.lang-optie:hover,
.lang-optie:focus-visible{background:var(--wg-zacht);color:var(--wg-donker)}
/* ── De laatste gloed: schaduw ónder letters ──────────────
De witte tekst over de video had per letter een schaduw
staan (text-shadow), bedoeld om leesbaar te blijven. Op wit
op donker levert dat geen scherpte op maar een halo: precies
het schijnsel dat Bart in de header zag.
Het leesbaarheidsprobleem wordt al opgelost door de sluier
over de video; die maakt de bovenkant donker genoeg. De
schaduw was dus dubbelop.
Eén uitzondering blijft: de hero-kop is enorm en ligt over
het lichtste deel van het beeld. Daar geen halo maar een
korte, strakke schaduw recht naar beneden. */
body:has(.hero--video) .site-header:not(.scrolled) .nav-links > li > a,
body:has(.hero--video) .site-header:not(.scrolled) .nav-mega-trigger,
body:has(.hero--video) .site-header:not(.scrolled) .lang-btn,
body:has(.hero--video) .site-header:not(.scrolled) .nav-logo{
text-shadow:none !important;
}
.hero-headline--light{text-shadow:0 1px 2px rgba(0,0,0,.30) !important}
.hero-sub--light{text-shadow:none !important}
.case-card .case-desc{text-shadow:none !important}
/* De knop had ook nog een zachte schaduw rondom. Op een
doorzichtige header over bewegend beeld is dat niet nodig;
wit op donker staat al los. */
.nav-cta{box-shadow:none !important}
.site-header.scrolled .nav-cta{
border:1px solid rgba(5,150,105,.30);
box-shadow:none !important;
}
/* ── Partners in de footer ────────────────────────────────
"We doen niet alleen websites, maar dus ook marketing."
Die kant van het bedrijf stond nergens op de homepage
behalve in een dienstkaart. Een rij partners onderaan zegt
het zonder dat er een sectie bij hoeft.
Zelfde opzet als de assistentenrij: woordmerken als tekst,
elk vakje klaar voor een echte badge. Google en Meta geven
hun badge uit via het partnerportaal, met een eigen id erin;
die hoort daarvandaan te komen en niet uit mijn hoofd. */
.footer-partners{
display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1rem;
padding:1.6rem 0 0;margin-top:1.8rem;
border-top:1px solid rgba(255,255,255,.08);
}
.footer-partners__label{
font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
color:rgba(255,255,255,.62);
}
.partner-rij{
display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .6rem;
list-style:none;margin:0;padding:0;
}
.partner-slot{
display:inline-flex;align-items:center;justify-content:center;
min-height:34px;padding:.4rem .8rem;border-radius:8px;
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
font-size:.82rem;font-weight:600;color:rgba(255,255,255,.9);
white-space:nowrap;
}
/* Zodra er een echte badge in staat, valt de tekstopmaak weg. */
.partner-slot:has(img){padding:.35rem .6rem;background:rgba(255,255,255,.92)}
.partner-slot img{max-height:22px;width:auto;display:block}
@media (max-width:640px){
.footer-partners{flex-direction:column;align-items:flex-start;gap:.7rem}
}
/* De stappen stonden rechtstreeks op het groene verloop en haalden
daardoor 2,96:1. De andere twee demo's zetten hun inhoud op een
witte kaart; deze hoorde dat ook te doen. Lost het contrast op en
maakt de drie panelen consequent. */
.fi-stap--bezig,
.fi-stap--klaar{
background:rgba(255,255,255,.96);
border-radius:16px;
padding:1.2rem 1.3rem;
box-shadow:var(--sch-s);
justify-content:flex-start;
}
.fi-regel{color:#3A4A44}
/* ── De foto-intake ───────────────────────────────────────
De andere twee demo's spelen zichzelf af; deze stond te
wachten op een upload en brak daarmee het ritme. Nu draait
hij vanzelf: het dak wordt gescand, de maten verschijnen, de
dakkapel tekent zichzelf en de prijs loopt mee.
De scène is met de hand getekend in SVG. Dat is een keuze,
geen noodgreep: een nagemaakte "gegenereerde foto" zou doen
alsof er iets is uitgerekend wat er niet is. Een bouwtekening
die zichzelf op het dak zet laat hetzelfde zien en klopt wel.
Wie zijn eigen foto neerzet, krijgt die eronder te liggen met
dezelfde meting erover. Die foto blijft in de browser.
══════════════════════════════════════════════════════════ */
.demo-podium--foto{padding:clamp(1rem,2vw,1.5rem);display:flex}
.fi{flex:1;display:flex;flex-direction:column;gap:.9rem;min-height:0}
.fi-doek{
position:relative;border-radius:14px;overflow:hidden;
aspect-ratio:8/5;background:#EAF3F0;flex:none;
}
.fi-scene{position:absolute;inset:0;width:100%;height:100%;display:block}
.fi-eigen{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fi-eigen[hidden]{display:none}
/* Ligt de eigen foto eronder, dan wordt de getekende gevel
doorzichtig zodat alleen de meting en de kapel overblijven. */
.fi--eigen .fi-scene > rect:not(.fi-scan),
.fi--eigen .fi-scene > g[clip-path],
.fi--eigen .fi-scene > path,
.fi--eigen .fi-scene > circle{opacity:0}
/* ── De scanstreep ────────────────────────────────────────*/
.fi-scan{
fill:rgba(52,211,153,.28);opacity:0;
transform:translateY(-160px);
}
.fi--scant .fi-scan{animation:fiScan 1.5s cubic-bezier(.4,0,.2,1) forwards}
@keyframes fiScan{
0%{opacity:0;transform:translateY(-140px)}
12%{opacity:1}
88%{opacity:1}
100%{opacity:0;transform:translateY(190px)}
}
/* ── De meting ────────────────────────────────────────────*/
.fi-meet{opacity:0;transition:opacity .45s var(--ease)}
.fi--gemeten .fi-meet{opacity:1}
.fi-meet-vlak{fill:rgba(52,211,153,.20);stroke:var(--wg-fel);stroke-width:2.5;stroke-dasharray:7 6}
.fi-meet-lijn{stroke:#0B0F0E;stroke-width:2;stroke-linecap:round}
.fi-meet-tekst{
font-family:inherit;font-size:19px;font-weight:700;fill:#0B0F0E;
paint-order:stroke;stroke:#F7FAF9;stroke-width:5;stroke-linejoin:round;
}
/* ── De dakkapel ──────────────────────────────────────────
Eerst tekenen de lijnen zichzelf (stroke-dasharray die
terugloopt), daarna komt de vulling erin. Dat leest als
iets dat wordt ingetekend en niet als iets dat aanfloept. */
.fi-kapel-vul{fill:#E8E2DA;opacity:0;transition:opacity .5s var(--ease) .5s}
.fi-kapel-dak-vul{fill:#3C4C45;opacity:0;transition:opacity .5s var(--ease) .55s}
.fi-kapel-glas{fill:#8FB9A8;opacity:0;transition:opacity .5s var(--ease) .65s}
.fi-kapel-lijn{
fill:none;stroke:#243029;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
stroke-dasharray:900;stroke-dashoffset:900;
}
.fi--tekent .fi-kapel-lijn{animation:fiTeken .9s cubic-bezier(.4,0,.2,1) forwards}
.fi--tekent .fi-kapel-vul,
.fi--tekent .fi-kapel-dak-vul,
.fi--tekent .fi-kapel-glas{opacity:1}
@keyframes fiTeken{to{stroke-dashoffset:0}}
/* ── De sleepbalk ─────────────────────────────────────────
De kapel en de meting worden afgeknipt op de sleeppositie,
zodat je links het dak van nu ziet en rechts het voorstel. */
.fi-kapel, .fi-meet{
clip-path:inset(0 0 0 var(--sleep,0%));
}
.fi-greep{
position:absolute;top:0;bottom:0;left:var(--sleep,0%);width:2px;background:#fff;
box-shadow:0 0 0 1px rgba(11,15,14,.25);pointer-events:none;opacity:0;
transition:opacity .3s var(--ease);
}
.fi-greep::after{
content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:32px;height:32px;border-radius:50%;background:#fff;
box-shadow:0 2px 8px -2px rgba(11,15,14,.45);
}
.fi-sleep{
position:absolute;inset:0;width:100%;height:100%;margin:0;
opacity:0;cursor:ew-resize;pointer-events:none;
}
.fi-merk{
position:absolute;bottom:10px;font-size:.68rem;font-weight:700;
letter-spacing:.08em;text-transform:uppercase;color:#fff;
background:rgba(11,15,14,.6);padding:.2rem .5rem;border-radius:5px;
pointer-events:none;opacity:0;transition:opacity .3s var(--ease);
}
.fi-merk--links{left:10px}
.fi-merk--rechts{right:10px}
/* Pas als er iets te vergelijken valt, mag je slepen. */
.fi--klaar .fi-greep,
.fi--klaar .fi-merk{opacity:1}
.fi--klaar .fi-sleep{pointer-events:auto}
.fi-sleep:focus-visible{outline:3px solid var(--wg);outline-offset:2px;opacity:.001}
/* ── Onder het doek ───────────────────────────────────────*/
.fi-onder{
display:flex;align-items:flex-end;justify-content:space-between;gap:1.2rem;
background:rgba(255,255,255,.96);border-radius:14px;padding:.95rem 1.1rem;
box-shadow:var(--sch-s);
}
.fi-regels{display:flex;flex-direction:column;gap:.35rem}
.fi-regel{
display:flex;align-items:center;gap:.55rem;font-size:.88rem;color:#4F6258;
transition:color .3s var(--ease);
}
.fi-regel::before{
content:"";width:15px;height:15px;border-radius:50%;flex:none;
border:2px solid rgba(11,15,14,.20);transition:all .3s var(--ease);
}
.fi-regel.af{color:#17332A;font-weight:600}
.fi-regel.af::before{
border-color:var(--wg-donker);background:var(--wg-donker);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
background-size:10px;background-position:center;background-repeat:no-repeat;
}
.fi-uitkomst{text-align:right;flex:none}
.fi-uitkomst small{display:block;font-size:.78rem;color:#31463D;line-height:1.35}
.fi-bedrag{
display:block;font-size:1.9rem;font-weight:800;letter-spacing:-.03em;color:#17332A;
font-variant-numeric:tabular-nums;line-height:1.1;
}
.fi-bedrag sup{font-size:.9rem;font-weight:700;vertical-align:top;margin-right:2px}
/* De eigen foto is een aanbod, geen drempel. */
.fi-invoer{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.fi-eigenlink{
display:inline-flex;align-self:flex-start;align-items:center;gap:.45rem;
font-size:.85rem;font-weight:600;color:var(--wg-donker);cursor:pointer;
text-decoration:underline;text-underline-offset:3px;
}
.fi-eigenlink:hover{color:var(--zw)}
@media (prefers-reduced-motion: reduce){
.fi--scant .fi-scan{animation:none;opacity:0}
.fi--tekent .fi-kapel-lijn{animation:none;stroke-dashoffset:0}
.fi-meet,.fi-regel,.fi-greep,.fi-merk{transition:none}
}
@media (max-width:700px){
.fi-onder{flex-direction:column;align-items:flex-start;gap:.8rem}
.fi-uitkomst{text-align:left}
}
/* Meten en bouwen zijn twee momenten, geen twee lagen. Zodra de
dakkapel zichzelf tekent verdwijnt de meting: die heeft zijn
werk gedaan en de maten staan in het lijstje eronder. */
.fi--tekent .fi-meet{opacity:0;transition:opacity .4s var(--ease)}
/* ── De merkiconen ────────────────────────────────────────
Officiële glyphs uit Simple Icons (CC0), inline geplaatst
zodat ze de tekstkleur volgen en er geen extra verzoek per
logo bijkomt. Zie images/merken/HERKOMST.md.
Icoon én naam samen: een kaal logo van 18px herkent lang
niet iedereen, en zo blijft de rij netjes als er voor een
merk geen icoon bestaat (Leadinfo en Mollie staan niet in
de set, die tonen alleen hun naam). */
.merk-icoon{
width:17px;height:17px;flex:none;display:block;
}
.ai-merk-slot,
.partner-slot{
display:inline-flex;align-items:center;gap:.45rem;
}
.ai-merk-slot > span,
.partner-slot > span{line-height:1}
/* Op het zwarte demopaneel zijn de glyphs wit. Ze staan naast
elkaar in verschillende dichtheden; een tikje dempen houdt de
rij rustig zonder dat er eentje uitspringt. */
.ai-merk-slot .merk-icoon{opacity:.88}
.partner-slot .merk-icoon{opacity:.9}
/* ── De assistenten bij de sectiekop ──────────────────────
Stonden weggestopt in het eerste paneel: klein, wit-op-zwart
en alleen zichtbaar bij tab 1, terwijl ze over de hele sectie
gaan. Nu direct onder de kop, op het witte vlak, in de eigen
merkkleur. Daar zijn het merken voor: herkenning gaat via de
kleur, niet via de vorm alleen.
De kleuren komen uit de merkgegevens van Simple Icons, dus
het zijn de officiële en geen benadering. */
.demo-kop .ai-merken{
margin:.4rem 0 0;gap:.55rem .7rem;align-items:center;
}
.demo-kop .ai-merken__label{
color:var(--wg-donker);font-size:.74rem;letter-spacing:.1em;
}
.demo-kop .ai-merk-slot{
background:#fff;
border:1px solid rgba(11,15,14,.10);
box-shadow:0 1px 2px rgba(11,15,14,.05);
color:#1B2A24;
min-height:38px;padding:.42rem .9rem;border-radius:10px;
font-size:.9rem;gap:.55rem;
transition:border-color .25s var(--ease), transform .25s var(--ease);
}
/* Het glyph draagt de merkkleur, de naam blijft gewoon leesbaar
donker. Andersom zou de kleur de leesbaarheid opeten. */
.demo-kop .ai-merk-slot .merk-icoon{
width:20px;height:20px;color:var(--merk,#0B0F0E);opacity:1;
}
.demo-kop .ai-merk-slot:hover{
border-color:var(--merk,rgba(11,15,14,.3));
transform:translateY(-1px);
}
@media (max-width:520px){
.demo-kop .ai-merk-slot{font-size:.84rem;padding:.36rem .7rem;min-height:34px}
.demo-kop .ai-merk-slot .merk-icoon{width:17px;height:17px}
}
/* Het label op een eigen regel: anders begint de tweede rij chips
onder het label en staat de rij scheef. Nu breken de chips als
groep af, netjes uitgelijnd onder elkaar. */
.demo-kop .ai-merken{flex-direction:column;align-items:flex-start;gap:.55rem}
.demo-kop .ai-merken__rij{
display:flex;flex-wrap:wrap;gap:.55rem;
}
/* De sectiekop is op leesbreedte gezet; de merkenrij mag breder,
anders valt hij onnodig in tweeën. */
.demo-kop{max-width:none}
.demo-kop .h-kop,
.demo-kop .h-sub{max-width:60ch}
/* ── De sociale kanalen ───────────────────────────────────
LinkedIn erbij; dat is voor een bureau dat MKB'ers zoekt het
kanaal dat telt. Bij hover kleurt het vakje naar de kleur van
het platform, zodat je ziet waar je op klikt zonder dat de rij
in rust een bonte verzameling is.
Er nog een kanaal bij? Eén in de rij plakken met het icoon
uit images/merken/, en de kleur hieronder. Vergeet dan sameAs
in het Organization-schema op de homepage niet -- daarmee weet
Google welk profiel bij dit bedrijf hoort. */
.footer-social a{transition:background .25s var(--ease), color .25s var(--ease)}
.footer-social a:hover{color:#fff}
.footer-social a[aria-label="Instagram"]:hover{background:#FF0069}
.footer-social a[aria-label="LinkedIn"]:hover{background:#047857}
.footer-social a[aria-label="Facebook"]:hover{background:#047857}
.footer-social a[aria-label="YouTube"]:hover{background:#FF0000}
.footer-social a[aria-label="TikTok"]:hover{background:#0B0F0E}
/* ══════════════════════════════════════════════════════════
DE AFSLUITER
══════════════════════════════════════════════════════════
Het formulier was niet lelijk maar wel karakterloos: labels
en velden in dezelfde grijstinten, en een groene balk als
knop die nergens anders op de pagina voorkomt.
Wat er verandert: labels worden kleine kapitalen zodat ze
niet met de invoer concurreren, de velden krijgen lucht en
een duidelijke focus, en de verzendknop wordt dezelfde pil
als de rest van de pagina.
══════════════════════════════════════════════════════════ */
/* ── De contactkaart ──────────────────────────────────────*/
.contact-form-wrap{
border:1px solid rgba(11,15,14,.09) !important;
border-radius:22px !important;
box-shadow:0 18px 44px -28px rgba(11,15,14,.28) !important;
padding:clamp(1.6rem,3.4vw,2.4rem) !important;
}
.contact-form{gap:1.15rem !important}
/* ── Labels ───────────────────────────────────────────────
Klein, in kapitalen en gedempt: een label hoort te zeggen
wat er moet komen en verder niet op te vallen. */
.contact-form .form-group label{
font-size:.72rem !important;font-weight:700 !important;
letter-spacing:.08em;text-transform:uppercase;
color:#4F6258 !important;
}
.contact-form .form-group{gap:.45rem !important}
/* ── Velden ───────────────────────────────────────────────*/
.contact-form input,
.contact-form textarea{
background:#F7FAF9 !important;
border:1px solid rgba(11,15,14,.10) !important;
border-radius:12px !important;
padding:.85rem 1rem !important;
font-size:.97rem !important;
transition:border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder{color:#8A9A93}
.contact-form input:hover,
.contact-form textarea:hover{border-color:rgba(11,15,14,.20) !important}
/* De focus moet je zien zonder dat het schreeuwt: witte grond,
groene rand, en een dunne ring eromheen. */
.contact-form input:focus,
.contact-form textarea:focus{
background:#fff !important;
border-color:var(--wg) !important;
box-shadow:0 0 0 3px rgba(5,150,105,.14) !important;
outline:none !important;
}
.contact-form textarea{min-height:8.5rem;resize:vertical}
/* ── De verzendknop ───────────────────────────────────────
Was een groene balk over de volle breedte. Nu dezelfde pil
als elders op de pagina, zodat "verzenden" er hetzelfde
uitziet als elke andere stap vooruit. */
.contact-form .btn-primary.btn-full{
align-self:flex-start;width:auto;
display:inline-flex;align-items:center;gap:16px;
padding:8px 8px 8px 24px !important;
border-radius:999px !important;
background:var(--zw) !important;color:#fff !important;
font-size:1rem;font-weight:700;
box-shadow:none !important;border:none;cursor:pointer;
transition:background .25s var(--ease);
}
.contact-form .btn-primary.btn-full:hover{background:var(--wg-donker) !important}
.contact-form .btn-primary.btn-full > span{
width:42px;height:42px;border-radius:999px;flex:none;background:#fff;
color:var(--zw);display:flex;align-items:center;justify-content:center;
font-size:1.1rem;transition:transform .35s cubic-bezier(.2,.8,.25,1);
}
.contact-form .btn-primary.btn-full:hover > span{transform:translateX(4px)}
.form-privacy{margin-top:.2rem}
/* ── De drie manieren om contact te zoeken ────────────────
Stonden als drie identieke grijze balken. Nu met hun eigen
icoon in de eigen kleur: bellen is groen, WhatsApp is het
WhatsApp-groen, mail is neutraal. Je herkent de rij dan
zonder te lezen. */
.contact-methods{gap:.7rem}
.contact-method{
border:1px solid rgba(11,15,14,.09) !important;
border-radius:14px !important;
padding:.9rem 1.1rem !important;
transition:border-color .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease);
}
.contact-method:hover{
border-color:rgba(11,15,14,.18) !important;
box-shadow:0 8px 20px -14px rgba(11,15,14,.3) !important;
transform:translateY(-1px);
}
.contact-icon{
width:34px;height:34px;flex:none;border-radius:10px;
display:grid !important;place-items:center;
background:var(--wg-zacht);color:var(--wg-donker) !important;
font-size:1rem !important;
}
.contact-icon svg{width:17px;height:17px}
.contact-method--wa .contact-icon{background:rgba(37,211,102,.14);color:#128C4A !important}
.contact-method--wa:hover{border-color:rgba(37,211,102,.55) !important}
/* ── De regel onder de prijzen ────────────────────────────
De knop stond ín de zin en botste daardoor op de tekstregel:
een pil van 58px hoog midden in een lopende alinea. Nu eronder,
met de zin erboven. */
.pricing-foot{
display:flex;flex-direction:column;align-items:center;gap:1rem;
text-align:center;
}
.pricing-foot p{margin:0}
.pricing-foot .h-pil{
align-self:center;
border:1px solid rgba(11,15,14,.10);
box-shadow:0 6px 22px -12px rgba(11,15,14,.28);
}