/* ========================================================================== STUDIO GLINSTERING — gedeelde opmaak (versie 56) Alles wat op elke pagina hetzelfde is: de kleuren, de zeven lettergroottes, de menubalk, de voettekst, de knoppen, de kaarten, de citaatband en het contactblok. Volgorde van inladen: style.css, dan subpaginas.css (alleen op de subpagina's), dan het bestand met de naam van de pagina zelf. Wat later komt gaat voor. Wijzig je hier iets, dan verandert het op de hele site. ========================================================================== */ /* ========================================================================== GLINSTERING v54 — homepage Wijzigingen t.o.v. v50: · typografische schaal teruggebracht van 27 naar 7 groottes, 2 gewichten · sectie-afstand 110 → 140px, tekstkolom 820 → 680px · hero: tekst richting de middenlijn, foto rechts, superellips, lijnt boven en onder uit met de tekst · openingsvraag als citaatblok; welkomsectie begint met de herkenningslijst · Over mij: staande foto die meeloopt met de hoogte van de tekst; het menu springt naar dit blok, de knop gaat door naar over-tara.html · aanbodkaarten: liggend met kleine foto links (K1) · beide citaten in dezelfde donkere band over de volle breedte · welkomtekst in twee kolommen 44/56, effen stippen, geen vet rechts (R3) · kicker als subtiel pilletje over de onderrand van de hero-foto · logo, hero-tekst en alle secties op een gedeelde linkerlijn (--lijn) · tagline onder het logo: begeleiding, coaching & opstellingen · gele fade boven de footer, en spiegelbeeld daarvan onder de menubalk ========================================================================== */ :root{ --bg:#f9f8fa; --ink:#2c2438; --ink-soft:#645876; --ink-mute:#8a7f99; --paars:#8e7cc3; --paars-tekst:#6c5aa4; --paars-donker:#4a3a68; --roze:#d98ba3; --geel:#eec95e; --geel-licht:#f9edc2; --geel-donker:#b8912e; --warm:#f7efe2; --goud:#8f6b12; /* knopkleuren: een slag dieper dan --paars, zodat witte tekst van 18px het vereiste contrast van 4,5 ruim haalt (6,3 en 6,1 in plaats van 3,6). */ --knop-a:#665598; --knop-b:#845272; /* derde accent: gedempt saliegroen, de natuurlijke tegenhanger van lavendel */ --salie:#5f7364; --salie-licht:#a9c0ae; --kaart:rgba(255,255,255,.75); --font-sans:'Sora',-apple-system,BlinkMacSystemFont,sans-serif; --font-serif:'Newsreader',Georgia,serif; --radius:26px; --schaduw:0 4px 20px rgba(44,36,56,.06); /* ---- typografische schaal: 7 stappen ---- */ --t-display:56px; /* hero-kop */ --t-h2:34px; /* sectiekop */ --t-lead:24px; /* serif-quote / lead */ --t-h3:21px; /* kaart- en tussenkop */ --t-body:17px; /* broodtekst */ --t-small:15px; /* bijschrift, footer, nav, tussenzin */ --t-kicker:12px; /* label */ /* ---- ritme ---- */ --sectie:140px; --prose:680px; /* ---- de linkermarge waar alles op uitlijnt ---- De hero-tekstkolom is 48% breed en de tekst staat daarin rechts uitgelijnd met een blokbreedte van 520px + 52px rechts. De linkerkant komt daarmee op 48vw - 572px, met een ondergrens van 48px op smalle schermen. Het logo in de balk en alle secties gebruiken dezelfde waarde, zodat ze allemaal op dezelfde denkbeeldige lijn beginnen. */ --lijn:max(48px, calc(48vw - 572px)); } *{box-sizing:border-box} /* De achtergrond van is wat je ziet als je voorbij de pagina scrollt (het doorveren boven en onder). Die stond op wit; nu op dezelfde tint als de koptekstbalk en de footer, zodat er geen witte rand meer opduikt. */ html,body{background:var(--geel-licht)} html{scroll-behavior:smooth} [id]{scroll-margin-top:130px} body{margin:0;color:var(--ink);font-family:var(--font-sans); font-size:var(--t-body);line-height:1.7;-webkit-font-smoothing:antialiased} img{max-width:100%;height:auto;display:block} a{color:var(--paars-donker)} /* html en body zijn lichtgeel, main draagt de lichte paginakleur. Zo is er nergens meer wit te zien: niet boven, niet onder, niet bij het doorveren. */ main{background:var(--bg)} .skip-link{position:absolute;left:-9999px;top:0;background:var(--paars-donker);color:#fff; padding:10px 18px;border-radius:0 0 12px 0;z-index:200} .skip-link:focus{left:0} /* ----- header ----- */ .site-header{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between; padding:20px 60px 20px var(--lijn);background:var(--geel-licht);transition:box-shadow .3s} .site-header.scrolled{box-shadow:0 4px 18px rgba(44,36,56,.08)} .logo-link{display:flex;flex-direction:column;gap:5px;align-items:flex-start;text-decoration:none} .logo-link img{width:172px;height:auto} /* Tagline onder het logo. Het is nu een opsomming van vakgebieden en geen uitspraak meer. Gezet in de gewone letter, klein en grijs, zodat het logo alle aandacht houdt. */ .logo-descriptor{display:block;text-align:left;font-size:13.5px;letter-spacing:.01em; color:var(--ink-soft);line-height:1.6} .main-nav{display:flex;gap:34px;font-size:var(--t-small);align-items:center} .main-nav a{text-decoration:none;color:var(--ink-soft);transition:color .2s} .main-nav a:hover{color:var(--ink)} .main-nav a[aria-current="page"]{color:var(--ink);font-weight:600} /* Onderstreping die bij hover van links naar rechts openschuift, en het linkje dat 2px opveert. Geen vaste streep onder de actieve pagina: die blijft herkenbaar aan kleur en vetgedrukt. De contactknop blijft ongemoeid, dat is al een gevulde knop. */ .main-nav a:not(.nav-cta){display:inline-block;position:relative; transition:color .2s ease,transform .28s cubic-bezier(.65,0,.35,1)} .main-nav a:not(.nav-cta)::after{content:"";position:absolute;left:0;right:0;bottom:-6px; height:2px;border-radius:2px;background:linear-gradient(90deg,var(--paars),var(--roze)); transform:scaleX(0);transform-origin:left center; transition:transform .32s cubic-bezier(.65,0,.35,1)} .main-nav a:not(.nav-cta):hover,.main-nav a:not(.nav-cta):focus-visible{transform:translateY(-2px)} .main-nav a:not(.nav-cta):hover::after, .main-nav a:not(.nav-cta):focus-visible::after{transform:scaleX(1)} @media (prefers-reduced-motion:reduce){ .main-nav a:not(.nav-cta),.main-nav a:not(.nav-cta)::after{transition-duration:.01ms} .main-nav a:not(.nav-cta):hover,.main-nav a:not(.nav-cta):focus-visible{transform:none} } .main-nav .nav-cta{color:#fff;background:linear-gradient(100deg,var(--knop-a),var(--knop-b)); padding:11px 24px;border-radius:100px;font-weight:600;box-shadow:0 4px 14px rgba(115,97,171,.32); transition:transform .32s cubic-bezier(.34,1.56,.64,1),box-shadow .32s ease} .main-nav .nav-cta:hover,.main-nav .nav-cta:focus-visible{color:#fff;transform:translateY(-2px); box-shadow:0 8px 20px rgba(115,97,171,.4)} /* Menuknop: drie klassieke strepen in een zacht geel rondje. Het rondje is 46px, ruim boven de 44px die nodig is voor een duimdruk. Bij openen kruisen de buitenste twee en verdwijnt de middelste; 6px is precies de afstand van het hart van een buitenste streep tot het midden van de knop. */ .menu-toggle{display:none;flex-direction:column;justify-content:center;align-items:center;gap:4px; width:46px;height:46px;padding:0;border:none;border-radius:50%;cursor:pointer; background:rgba(238,201,94,.45);transition:background .25s} .menu-toggle:hover,.menu-toggle:focus-visible{background:rgba(238,201,94,.7)} .menu-toggle span{display:block;width:18px;height:2px;background:var(--paars-donker); border-radius:2px;transition:transform .3s ease,opacity .2s ease} .menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(6px) rotate(45deg)} .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} .menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-6px) rotate(-45deg)} .mobile-menu{display:none;position:fixed;inset:0;z-index:90;background:var(--geel-licht); padding:110px 32px 40px;flex-direction:column;gap:8px;opacity:0;pointer-events:none;transition:opacity .3s} .mobile-menu.open{opacity:1;pointer-events:auto} .mobile-menu a{text-decoration:none;color:var(--ink);font-size:var(--t-h3);font-weight:600;padding:12px 0; border-bottom:1px solid rgba(184,145,46,.25)} .mobile-menu .nav-cta{margin-top:24px;text-align:center;border:none;color:#fff; background:linear-gradient(100deg,var(--knop-a),var(--knop-b));box-shadow:0 4px 14px rgba(115,97,171,.32); padding:16px 24px;border-radius:100px} /* ----- hero ----- Kolommen 48/52: de scheiding valt vlak bij de denkbeeldige middenlijn. De tekst wordt binnen de linkerkolom naar rechts geduwd (margin-left:auto) en is smaller gemaakt, zodat hij richting het midden opschuift. De foto rekt precies mee met de hoogte van het tekstblok: de bovenkant ligt gelijk met de kicker, de onderkant met de onderkant van de knop. Omdat de foto vierkant is, volgt de breedte uit die hoogte. */ .hero-home{position:relative;overflow:hidden;display:grid;grid-template-columns:48% 52%; align-items:stretch;padding:88px 0 126px;gap:0; background:linear-gradient(115deg,#f4eef8 0%,#faf3ea 48%,#fdf6e6 100%)} .hero-tekst{display:flex;flex-direction:column;justify-content:center; width:100%;padding:0 52px 0 var(--lijn)} /* De foto staat absoluut gepositioneerd binnen zijn kolom. Daardoor telt hij NIET mee bij het bepalen van de rijhoogte: die wordt alleen door het tekstblok bepaald. Met height:100% krijgt de foto exact die hoogte, dus de bovenkant ligt gelijk met de kicker en de onderkant met de knop. De browser meet dat zelf, dus het klopt op elke schermbreedte. */ /* De foto krijgt zijn hoogte van het tekstblok (bovenkant gelijk met de kop, onderkant gelijk met de knop) en leidt daar via aspect-ratio zijn breedte uit af. Hij is naar RECHTS uitgelijnd op var(--lijn), dezelfde lijn waar de bullets en de aanbodkaarten eindigen. Het kader is absoluut geplaatst, dus het telt niet mee voor de rijhoogte; het tekstblok bepaalt die alleen. En omdat het kader precies zo groot is als de foto, centreert het bijschrift op de foto zelf. */ .hero-foto{margin:0;position:relative;min-width:0} .foto-kader{position:absolute;top:0;right:var(--lijn);height:100%;aspect-ratio:1/1;max-width:100%} /* Bijschrift dat over de onderrand van de foto valt: half op de foto, half eronder. Het plakt daarmee aan de foto en schuift altijd mee. Absoluut geplaatst, dus het telt niet mee voor de hoogte van de rij. */ .foto-bijschrift{position:absolute;left:50%;bottom:0;transform:translate(-50%,50%); z-index:2;white-space:nowrap; background:rgba(255,255,255,.88);backdrop-filter:blur(6px); padding:9px 20px;border-radius:100px;box-shadow:0 4px 16px rgba(74,58,104,.1); font-size:11px;letter-spacing:.18em;text-transform:uppercase; color:var(--paars-tekst);font-weight:600;line-height:1.5} .hero-foto img{width:100%;height:100%;object-fit:cover;border-radius:90px; box-shadow:0 18px 50px rgba(74,58,104,.16)} /* Sectielabels ("Aanbod", "Over mij"): 14px in plaats van 12 en in het diepe paars in plaats van lila. Genoeg gewicht om op te vallen, zonder dat het een tweede kop wordt naast de kop die er soms onder staat. Het lila stond bovendien op een contrast van 3,1; diep paars haalt 9,5. */ .kicker{margin:0 0 24px;font-size:14px;letter-spacing:.22em;text-transform:uppercase; color:var(--paars-donker);font-weight:600} .kicker-center{text-align:center;margin-bottom:40px} h1{margin:0 0 28px;font-weight:600;font-size:var(--t-display);line-height:1.1;letter-spacing:-.02em} .hero-vragen{margin:0 0 26px;max-width:540px} .hero-vragen p{margin:0 0 14px;font-size:var(--t-body);line-height:1.7;color:var(--ink-soft)} .hero-kom{margin:0 0 24px;max-width:540px;font-weight:600;color:var(--ink)} .hero-kom2{margin-bottom:34px} /* slotregel: basis normaal, alleen de gemarkeerde delen vet */ .hero-mix{font-weight:400;color:var(--ink-soft)} .hero-mix strong{font-weight:600;color:var(--ink)} /* flex laat de wrapper de knop exact omsluiten, zonder regelhoogte eronder */ .hero-knop{display:flex;align-items:flex-start} /* ----- knoppen ----- */ /* Knopformaat: 340 bij 74, met de letter op 18px. Alleen breder maken laat een knop plat ogen; door de hoogte mee te laten groeien blijft de verhouding 4,6 : 1 en wordt hij echt groter in plaats van alleen langer. Geldt voor alle primaire knoppen, zodat ze onderling gelijk zijn. */ .btn{display:inline-flex;align-items:center;justify-content:center; font-family:var(--font-sans);font-size:18px;font-weight:600; min-width:340px;min-height:74px;padding:20px 36px;border-radius:100px; text-align:center;text-decoration:none;cursor:pointer;border:none} /* Een slag dieper dan het lichte lila: wit op #8e7cc3 haalde 3,6 en dat is te weinig voor een letter van 18px. Deze twee halen 5,2 en 4,9. */ .btn-primary{color:#fff;background:linear-gradient(100deg,var(--knop-a),var(--knop-b)); box-shadow:0 8px 26px rgba(115,97,171,.32);transition:transform .32s cubic-bezier(.34,1.56,.64,1),box-shadow .32s ease} .text-link{font-size:var(--t-small);font-weight:600;color:var(--paars-donker); text-decoration:underline;text-underline-offset:5px} .text-link:hover{color:var(--paars)} /* ----- secties ----- */ /* alle secties beginnen op dezelfde linkerlijn als het logo en de hero-tekst */ .section{padding:0 var(--lijn) var(--sectie);max-width:none;margin:0} .section-narrow{max-width:none} .section-prose{max-width:calc(var(--prose) + 120px);margin:0 auto;padding:var(--sectie) 60px var(--sectie)} /* staat er een citaatblok direct boven, dan niet twee keer ruimte optellen: de band heeft al 140px ondermarge, dus de sectie hoeft er maar 40 bij te doen */ .section-prose h2{margin:0 0 14px;font-weight:600;font-size:var(--t-h2);line-height:1.25;letter-spacing:-.01em} .section-prose p{margin:0 0 20px;font-size:var(--t-body);line-height:1.8;color:var(--ink-soft)} .section-prose p:last-child{margin-bottom:0} .section-title-center{margin:0 0 44px;font-weight:600;font-size:var(--t-h2);text-align:center;letter-spacing:-.01em} /* ----- welkomsectie: twee kolommen met een scheidingslijn (T3) ----- Beide kolommen verdelen hun inhoud over de volle hoogte (space-between), dus de eerste en de laatste regel liggen links en rechts gelijk. De twee kopjes krijgen dezelfde minimumhoogte zodat de lijst en de eerste alinea op dezelfde regel beginnen. */ /* 44/56 in plaats van 50/50: die kleine ongelijkheid haalt de spanning uit de symmetrie, zodat je oog links begint en dan rechts verdergaat in plaats van heen en weer te gaan. */ .welkom{display:grid;grid-template-columns:44% 56%;gap:0;align-items:stretch; max-width:none;margin:0;padding:var(--sectie) var(--lijn)} .welkom-kol{display:flex;flex-direction:column;justify-content:flex-start;padding:0 46px} .welkom-links{border-right:1px solid rgba(74,58,104,.16);padding-left:0} .welkom-rechts{padding-right:0} /* De linkerkop moet op één regel passen. Bij 16px is die zin ongeveer 528px breed; de kolom is pas vanaf circa 1250px schermbreedte breed genoeg. Daarom staan de twee kolommen onder die grens onder elkaar, waar alle ruimte is. */ .kolkop{margin:0 0 24px;font-size:16px;font-weight:600;line-height:1.5;white-space:nowrap} /* Beide kopjes dezelfde kleur: twee verschillende steunkleuren naast elkaar maakten het onrustig. Diep paars is de kleur die ook in de citaatbanden en de knoppen zit, en heeft een contrast van 9,5 op de paginakleur. */ .kolkop-goud,.kolkop-paars{color:var(--paars-donker)} .welkom-rechts p{margin:0 0 18px;font-size:var(--t-body);line-height:1.8;color:var(--ink-soft)} /* Alleen de eerste zin van de eerste alinea is vet: één ankerpunt waar de rechterkolom begint, zonder terug te vallen op tien vette stukken. */ .welkom-rechts strong{color:var(--ink);font-weight:600} .welkom-rechts p:last-child{margin-bottom:0} /* herkenningslijst */ .herken-intro{margin:0 0 28px} .herken{margin:0;padding:0;list-style:none} .herken li{position:relative;padding:0 0 0 34px;margin:0 0 16px;font-size:var(--t-body); line-height:1.7;color:var(--ink-soft)} /* effen stip in plaats van een tweekleurig verloop, en iets kleiner: zeven kleurverlopen naast elkaar gaven ruis */ .herken li::before{content:"";position:absolute;left:0;top:12px;width:7px;height:7px;border-radius:50%; background:var(--salie)} .herken li b{color:var(--ink);font-weight:600} /* ----- aanbod: liggende kaarten, foto links (K1) ----- Was: twee kaarten naast elkaar met de foto over de volle breedte, ca. 480px hoog. Nu: elke kaart over de volle breedte met de foto als kolom van 260px, ca. 200px hoog. */ .aanbod-lijst{display:flex;flex-direction:column;gap:22px;margin-top:28px} .aanbod-kaart{display:grid;grid-template-columns:260px 1fr;align-items:stretch; text-decoration:none;background:var(--kaart);border:1px solid rgba(142,124,195,.24); border-radius:var(--radius);overflow:hidden;box-shadow:var(--schaduw); transition:transform .3s,box-shadow .3s} .aanbod-kaart:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(44,36,56,.1)} .aanbod-kaart--roze{border-color:rgba(217,139,163,.3)} .aanbod-foto{overflow:hidden;background:#f2edf8} .aanbod-foto img{width:100%;height:100%;object-fit:cover;min-height:180px} .aanbod-tekst{padding:30px 34px} .aanbod-tekst h2{margin:0 0 10px;font-weight:600;font-size:var(--t-h3)} .aanbod-tekst p{margin:0;font-size:var(--t-body);line-height:1.7;color:var(--ink-soft)} .aanbod-tekst .text-link{display:inline-block;margin-top:16px} /* ----- kaarten ----- */ .card-grid{display:grid;gap:28px} .card-grid.cols-2{grid-template-columns:1fr 1fr} .card{background:var(--kaart);border:1px solid rgba(142,124,195,.25);border-radius:var(--radius); backdrop-filter:blur(6px);box-shadow:var(--schaduw);overflow:hidden; display:flex;flex-direction:column} /* beide kaartfoto's exact even groot, ongeacht de verhouding van het bestand */ .card > img{width:100%;aspect-ratio:16/9;object-fit:cover} .card .aanbod-inhoud{flex:1;display:flex;flex-direction:column;align-items:flex-start} .card .aanbod-inhoud .text-link{margin-top:auto;padding-top:20px} .card.card-roze{border-color:rgba(217,139,163,.3)} .card h2,.card h3{margin:0 0 14px;font-weight:600;font-size:var(--t-h3)} .card p{margin:0;font-size:var(--t-body);line-height:1.75;color:var(--ink-soft)} .card-link{text-decoration:none;display:block;transition:transform .3s,box-shadow .3s} .card-link:hover{transform:translateY(-4px);box-shadow:0 10px 30px rgba(44,36,56,.1)} .card-link .text-link{display:inline-block;margin-top:20px} .aanbod-inhoud{padding:40px 42px 44px} .orb{width:46px;height:46px;border-radius:50%;margin-bottom:28px} .orb-paars{background:radial-gradient(circle at 30% 30%,#c8bce6,var(--paars))} .orb-roze{background:radial-gradient(circle at 30% 30%,#ecc2d0,var(--roze))} .w-typo{text-align:center;margin-top:64px} .w-lijn{display:block;width:64px;height:2px;margin:0 auto 26px;border-radius:2px; background:linear-gradient(90deg,var(--paars),var(--roze))} .w-zin{margin:0 0 16px;font-family:var(--font-serif);font-style:italic; font-size:var(--t-lead);line-height:1.5;color:var(--paars-donker)} /* ----- citaatband ----- */ /* zelfde volle breedte als de lichte openingsvraag, zodat de twee citaten een paar vormen: het ene licht, het andere donker, allebei van rand tot rand */ .band{position:relative;margin:0 0 var(--sectie);background:#ebe4f5; color:var(--paars-donker);padding:90px var(--lijn);text-align:center;overflow:hidden} /* S3: een enkel breed schijnsel achter de quote. De ellips is 42% van de breedte en 50% van de hoogte, dus hij is op de boven- en onderrand van de band precies op nul. Daardoor kan er geen zichtbare ovaalrand ontstaan, ook niet op mobiel. */ .band::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse 42% 50% at 50% 50%, rgba(255,240,190,.60) 0%,rgba(255,240,190,.30) 48%,rgba(255,240,190,0) 100%)} .band::after{content:none} .band > *{position:relative;z-index:1} .band blockquote{margin:0 auto;max-width:900px;font-family:var(--font-serif);font-style:italic; font-size:var(--t-h2);line-height:1.4} .band blockquote .accent{color:var(--salie)} .band blockquote .accent-salie{color:var(--salie)} /* De openingsvraag gebruikt nu dezelfde donkere band als het tweede citaat, dus ze vormen een paar. Alleen de ondermarge vervalt: de welkomsectie brengt zelf al ruimte mee, en anders telden 140px marge en 140px padding bij elkaar op. */ .band--eerste{margin-bottom:0} .band--eerste + .welkom{padding-top:56px} /* ----- Over mij (O2) ----- */ /* De tekst liep tot 560px terwijl de kolom 740px breed was; daardoor bleef er 180px leeg rechts en oogde dit blok smaller dan de blokken erboven. De kolommen zijn nu zo verdeeld dat de tekst precies tot de rechterlijn loopt, net als de bullets en de aanbodkaarten. */ .over-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:64px;align-items:center;max-width:none;margin:0} /* vaste staande verhouding 3:4 met een uitsnede waarin het hele hoofd past. Niet meer meerekken met de tekst: daardoor werd de foto zo smal en hoog dat het gezicht werd afgesneden. */ .over-foto{margin:0} /* De kolom naast de foto heette net als de alinea's erin 'over-tekst'. Beide regels golden dus voor allebei, waardoor de alinea's zelf ook een flexkolom werden: elk stukje tekst werd een eigen regel en een cursief woord midden in een zin belandde op een regel alleen. De kolom heet nu over-kolom. */ .over-kolom{display:flex;flex-direction:column;justify-content:center} .over-kop{margin:0 0 20px;font-weight:600;font-size:var(--t-h2);line-height:1.25;letter-spacing:-.01em} .over-quote{margin:0 0 24px;font-family:var(--font-serif);font-style:italic; font-size:var(--t-lead);line-height:1.5;color:var(--paars-donker)} .over-tekst{margin:0 0 20px;font-size:var(--t-body);line-height:1.75;color:var(--ink-soft)} .over-grid .btn{margin-top:14px} /* ----- voor wie ----- */ .fit-card{background:var(--geel-licht);border:1px solid rgba(184,145,46,.3); border-radius:var(--radius);padding:44px 42px} .fit-card h3{margin:0 0 18px;font-weight:600;font-size:var(--t-h3)} .fit-card ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:15px; font-size:var(--t-body);line-height:1.65;color:#54486a} .fit-card li{display:flex;gap:13px;align-items:baseline} .fit-card li::before{content:"";width:8px;height:8px;border-radius:50%; background:var(--salie);flex:none;transform:translateY(-1px)} .fit-card.fit-dim li::before{background:rgba(111,100,128,.45)} .fit-card .fit-note{margin:24px 0 0;font-size:var(--t-small);line-height:1.7;color:#54486a} .fit-card.fit-dim{background:transparent;border:1px dashed rgba(100,88,118,.4);color:var(--ink-mute)} .fit-card.fit-dim h3,.fit-card.fit-dim ul,.fit-card.fit-dim .fit-note{color:var(--ink-mute)} /* ----- cta ----- */ .cta{text-align:center;padding:88px var(--lijn) 64px;background:linear-gradient(180deg,var(--bg),var(--geel-licht))} .cta h2{margin:0 0 18px;font-weight:600;font-size:var(--t-h2);letter-spacing:-.02em} .cta .cta-sub{margin:0 auto 34px;max-width:980px;text-wrap:balance;font-family:var(--font-serif);font-style:italic; font-size:var(--t-lead);line-height:1.5;color:var(--ink-soft)} /* de gele overgang begint boven het contactblok, zodat het geel al bij "Ben je nieuwsgierig geworden?" is aangekomen en doorloopt tot de footer */ /* Spiegelbeeld van de gele overgang onderaan: het geel van de menubalk loopt zacht door in de hero. Absoluut geplaatst met z-index 0, dus het verandert de hoogte niet en ligt achter de tekst en de foto. */ .kop-fade{position:absolute;top:0;left:0;right:0;height:120px;z-index:0;pointer-events:none; background:linear-gradient(180deg,var(--geel-licht),rgba(249,237,194,0))} .hero-tekst,.hero-foto{position:relative;z-index:1} /* Drie gelijke kolommen: bij space-between schuift het middelste item op met de helft van het breedteverschil tussen links en rechts. Met 1fr auto 1fr staat het midden altijd precies op de hartlijn van de pagina. */ .site-footer{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px; padding:30px 60px;background:var(--geel-licht);font-size:var(--t-small);color:var(--ink-soft)} .site-footer > :first-child{justify-self:start} .site-footer > span{justify-self:center;text-align:center} .site-footer > :last-child{justify-self:end} .site-footer a{color:var(--ink-soft);text-decoration:none} .site-footer a:hover{text-decoration:underline} .fade-in{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease} .fade-in.visible{opacity:1;transform:none} .fade-d1{transition-delay:.12s} .fade-d2{transition-delay:.24s} .fade-d3{transition-delay:.36s} @media (prefers-reduced-motion:reduce){.fade-in{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}} /* ----- responsive ----- */ @media(max-width:1180px){ .hero-home{grid-template-columns:1fr 42%} .hero-tekst{padding:80px 24px 80px 44px} .over-grid{grid-template-columns:1fr 1.15fr;gap:44px} } /* Zolang tekst en foto naast elkaar staan, moet de uitlijning kloppen. Onder 1250px wordt het tekstblok hoger dan de fotokolom breed is, dus daar zetten we de hero onder elkaar. */ @media(max-width:1250px){ :root{--lijn:40px} .hero-home{display:block;padding:64px var(--lijn) 72px} .foto-bijschrift{position:static;right:0;margin-top:20px;text-align:left} .hero-tekst{padding:0;max-width:none;margin-left:0;width:auto} .hero-foto{position:static;display:block;width:100%;max-width:360px;margin:40px 0 34px;padding-right:0} /* het kader blijft relatief zodat het bijschrift aan de foto vast blijft zitten; alleen de absolute hoogte vervalt */ .foto-kader{position:relative;right:auto;height:auto;max-width:none} .foto-bijschrift{white-space:normal;max-width:88%;text-align:center; font-size:10.5px;letter-spacing:.14em;padding:8px 16px} .hero-foto img{border-radius:44px} } @media(max-width:1250px){ .welkom{grid-template-columns:1fr;gap:30px} .welkom-kol{padding:0} .welkom-links{border-right:none;border-bottom:1px solid rgba(74,58,104,.16);padding-bottom:30px} } /* ----- wanneer klapt het menu in ----- Stond op 900px. Met zeven items past de balk daar niet meer: de items plus de contactknop vragen samen ongeveer 820px en het logo nog eens 172, terwijl er op 1050px maar 942 over is. Vandaar 1150. De tussenruimte tussen de items krimpt bovendien mee met de schermbreedte, zodat de balk niet op het randje balanceert. */ .main-nav{gap:clamp(20px,2.2vw,34px)} /* ----- wanneer klapt het menu in ----- Met zeven items past de balk niet meer op een tablet: de items plus de contactknop vragen samen ongeveer 820px en het logo nog eens 172. Onder 1150px verdwijnt de balk dus en verschijnt het menu-icoon. Deze regel staat bewust in het gedeelde bestand: het menu hoort op elke pagina hetzelfde te werken. Eerder stond hij per pagina, en op drie pagina's was hij bij het verplaatsen van het breekpunt weggevallen. */ @media(max-width:1150px){ .main-nav{display:none} .menu-toggle{display:flex} .mobile-menu{display:flex} } /* ----- knop terug naar boven ----- Verschijnt zodra je een schermhoogte naar beneden bent en brengt je in één klik terug. Rechtsonder, 52px in het vierkant: ruim boven de 44px die een duimdruk nodig heeft. Zolang hij niet zichtbaar is staat hij op pointer-events:none, zodat je er niet per ongeluk op klikt. Dezelfde kleuren als de andere knoppen; het pijltje is met een rand getekend en heeft dus geen apart plaatje nodig. */ .omhoog{position:fixed;right:24px;bottom:24px;z-index:120; width:52px;height:52px;border:none;border-radius:50%;cursor:pointer;padding:0; background:linear-gradient(140deg,var(--knop-a),var(--knop-b)); box-shadow:0 8px 24px rgba(74,58,104,.3); display:flex;align-items:center;justify-content:center; opacity:0;transform:translateY(12px);pointer-events:none; transition:opacity .3s ease,transform .3s ease,box-shadow .3s ease} .omhoog.zichtbaar{opacity:1;transform:none;pointer-events:auto} .omhoog:hover,.omhoog:focus-visible{box-shadow:0 12px 30px rgba(74,58,104,.42); transform:translateY(-3px)} .omhoog:focus-visible{outline:3px solid var(--paars-donker);outline-offset:3px} /* het pijltje: een vierkantje van twee randen, 45 graden gedraaid */ .omhoog span{display:block;width:11px;height:11px;margin-top:4px; border-left:2.5px solid #fff;border-top:2.5px solid #fff; transform:rotate(45deg);border-radius:1px} @media(max-width:900px){ .omhoog{right:16px;bottom:16px} } @media (prefers-reduced-motion:reduce){ .omhoog{transition:none} }