/* ================================================================== home-mobiel.css - de mobiele weergave van de homepage. Hoort bij front-page.php en laadt ná home.css en tokens-erika.css, zodat de regels hier winnen. De basis- en desktopweergave staat in home.css; aan dit bestand sleutelen raakt de desktopweergave niet. WAT HIER WEL EN NIET IN HOORT Dit bestand gaat over de SECTIES VAN DE HOMEPAGE. De mobiele regels voor de topbar, de navigatie, de voet, de formulieren en de actiebalk onderaan staan bewust in home.css: die laadt op elke pagina en levert die onderdelen sitebreed. Ze hier naartoe halen zou elke andere pagina raken. DE TWEE GRENZEN 880px structuur: van meerdere kolommen naar één. Deze grens gebruikte home.css al; hem verplaatsen maakt een band van breedtes waarin de pagina half gestapeld staat. 620px telefoonafstelling: verticale ruimte, lettergroottes, knopmaten. De reviewsectie houdt zijn eigen 900px; die grens komt uit de handoff van het reviewontwerp en hoort bij het moment waarop rij B wegvalt. HET REGISTER Wijzig je een homepagesectie in home.css, loop dan deze tabel na en meet op 390 voordat je de stap afsluit. Dat is de werkregel in CLAUDE.md. | sectie | desktop | mobiel | |-------------|----------------------------------|-----------------------------------------------------| | 1 hero | 2 kolommen, beeld rechts groot, | STAAT IN home.css (sitebrede component, ook door | | | quotekaart linksonder het beeld | /een-overlijden/ gebruikt). Zoek op "HERO OP EEN | | | | TELEFOON" | | 2 intro | 2 kolommen, knop links | 1 kolom, knop gecentreerd, foto dicht bij de USP-rij, | | | | ruime tussenruimte foto naar kop | | 3 services | 3 kaarten naast elkaar | 1 kolom, minder ruimte boven de titel | | 4 approach | 4 kolommen, verticale scheiding | 1 kolom, gecentreerd, horizontale scheiding, | | | tussen de stappen | stappen verschijnen op hun eigen scrollmoment | | 5 quoteband | ruimte 118px boven en onder | 72px vanaf 620px | | 6 reviews | 2 rijen kaarten van 400px | 1 rij van 292px, knop kleiner en gecentreerd | | 7 bel-band | ruimte 130px boven, nr op 46px | 100px boven, nr op 38px, smallere zijmarge | Aangemaakt 2026-08-14. Zie werk/04-archief/fase4-bouwverslagen/f4s2-spec-homepage-mobiel-2026-08-14.md en werk/04-archief/fase4-bouwverslagen/f4s2-plan-homepage-mobiel-2026-08-14.md. ================================================================== */ /* ---------- 1. HERO ---------- VERHUISD NAAR home.css op 2026-08-14, naar de plek direct onder de hero zelf. .hero is een sitebrede component uit home.css en wordt door twee sjablonen gebruikt: front-page.php en page-een-overlijden.php. Zolang de mobiele regels hier stonden, laadden ze alleen op de voorpagina en stond /een-overlijden/ op een telefoon in twee kolommen. Zoek in home.css op "HERO OP EEN TELEFOON". Laat dit hier niet terugkomen. De scheidslijn tussen de twee bestanden is "homepage of sitebreed", niet "mobiel of niet". ---------------------------------------------------------------- */ /* ---------- 2. INTRO ---------- Het portret van Erika is op mobiel de eerste echte foto van de pagina; het hero-beeld is sinds 2026-08-14 een klein vignet. Daarom mag de ruimte erboven flink terug: 120px was gerekend op een sectie die na een volle beeldsectie kwam. ---------------------------------------------------------------- */ @media (max-width:880px){ /* 36px boven en niet 64: de foto van Erika mag dichter bij de USP-rij van de hero staan. Gemeten van de onderkant van .hero-meta tot de bovenkant van de foto: 144px, waarvan 80 uit de hero komt en 64 hier vandaan. Nu 116px. */ .intro{padding:36px 0 72px} /* 72px en niet 40: de kop "Geen alledaags werk." moet ademen. Let op dat de labelpil onder de foto 22px uitsteekt (.tag staat op bottom:-22px), dus wat je ziet is de tussenruimte min 22. Bij 40px was dat 18px en dat plakte; bij 72px is het 50px. */ .intro .wrap{grid-template-columns:1fr;gap:72px} .intro-portrait .panel{inset:24px -20px -20px 20px} /* "Maak kennis met het team" middenop. Op desktop staat hij links uitgelijnd onder een tekstkolom; onder elkaar hoort hij op de as van de sectie. */ .intro-cta{display:flex;justify-content:center} /* En de quote om precies dezelfde reden. Die volgt sinds 2026-09-10 de breedte van zijn tekst (224px) in plaats van de kolom, en een smalle doos links van een gecentreerde knop leest als scheef. Op desktop blijft hij links: daar staat hij onder een tekstkolom die zelf ook links begint. */ .intro .pull{margin-inline:auto} } /* ---------- 3. SERVICES ---------- Alleen de ruimte bóven de titel gaat terug; de ruimte onder de laatste kaart blijft, want daar volgt een bandwissel naar de approach-sectie. ---------------------------------------------------------------- */ @media (max-width:880px){ .services{padding:64px 0 120px} .petal .petal-icoon{width:min(100%,190px);margin-bottom:24px} .petals{grid-template-columns:1fr;gap:28px} .petal:nth-child(2){transform:translateY(0)} .services .head{grid-template-columns:1fr;gap:24px} } /* ---------- 4. APPROACH ---------- Van vier kolommen naar één, gecentreerd, chronologisch. Het 2x2-raster dat hier stond gaf kolommen van ongeveer 160px: "Het gesprek" stond over twee regels en de tekst eronder was een sliert van drie woorden breed. De titel stond op white-space:nowrap en was 444px breed bij een scherm van 390. Met overflow:hidden op de sectie las je "anaf het moment van overlijde". ---------------------------------------------------------------- */ @media (max-width:880px){ .approach{padding:64px 0 96px} /* nowrap terug naar normal, anders wordt de titel aan beide kanten afgesneden */ .approach h2{white-space:normal;font-size:clamp(32px,8vw,44px)} .approach .top{margin-bottom:40px} .path{grid-template-columns:1fr;gap:0;padding:8px 24px 0} .path-svg{display:none} .step{padding:30px 0 0;text-align:center} .step + .step{margin-top:30px} /* De verticale scheidingslijn tussen de kolommen wordt een horizontale lijn bóven elke volgende stap, uitdovend naar beide kanten. Alle eigenschappen van de desktopregel worden hier overschreven: left, top, width, height en de richting van het verloop. */ .step + .step::before{ left:50%;top:0;transform:translateX(-50%); width:min(220px,60%);height:1px; background:linear-gradient(90deg, rgba(74,52,97,0), rgba(74,52,97,.22) 26%, rgba(74,52,97,.22) 74%, rgba(74,52,97,0)); } /* De kop staat op desktop links met een lijn die naar rechts doorloopt. Bij een gecentreerde kop steekt die aan één kant uit. */ .step h3{justify-content:center} .step h3::after{display:none} /* De trapsgewijze vertraging hoort bij vier kolommen die tegelijk in beeld komen. Onder elkaar komt elke stap op zijn eigen scrollmoment in beeld en loopt de animatie met deze vertraging een halve seconde achter op je duim. De IntersectionObserver in front-page.php blijft ongewijzigd; die zet .in al per stap. */ .step:nth-child(2), .step:nth-child(3), .step:nth-child(4), .step:nth-child(5){transition-delay:0s} } /* ---------- 5. QUOTEBAND ---------- 118px boven en onder is de maat van het ontwerp, gerekend op een brede band. Op een telefoon staat de quote daardoor in een sectie die grotendeels leeg is. ---------------------------------------------------------------- */ @media (max-width:620px){ .quoteband{padding:72px 0} } /* ---------- 6. REVIEWS (eigen grens van 900px, uit de handoff) ---------- */ @media (max-width:900px){ .rev-sec{padding:120px 0 120px} .rev-head{margin-bottom:36px;padding:0 24px} .rev-h2{font-size:34px} .rev-intro{font-size:15px;margin-bottom:28px} .rev-pill{flex-wrap:wrap;justify-content:center;gap:10px 16px;padding:15px 24px;max-width:300px} .rev-pill-div{display:none} .rev-pill-score{font-size:26px} .rev-pill-count{font-size:13px} .rev-row-b{display:none} .rev-rail{gap:16px;animation-duration:78s} .rev-card{width:292px;padding:26px 24px 22px} .rev-quote{font-size:17px;margin-bottom:22px} .rev-foot-row{gap:12px;padding-top:18px} .rev-nameline{flex-wrap:wrap;gap:3px 9px;font-size:13px} .rev-stars-sm{width:60px;height:10px} .rev-word{font-size:15px} .rev-cta{margin-top:40px;padding:0 24px} /* De knop stond links uitgelijnd met de pijl er rechts naast; op 390px liep het label over twee regels en hing de pijl er los achter. Nu gecentreerd en smaller. Let op: als inline-flex is het label één flex-item dat de volle breedte pakt, en dan valt de pijl altijd op een eigen derde regel. Vandaar block met een inline pijl; die loopt nu achter "nabestaanden" mee. */ .rev-btn{ display:block;text-align:center; font-size:14px;padding:12px 22px; max-width:290px;line-height:1.45; } .rev-btn .arrow{display:inline-block;margin-left:8px} } /* ---------- 7. BEL-BAND ---------- */ @media (max-width:880px){ .belband{padding:100px 0 96px} .belband-inner{padding:0 24px} .belband-kop{margin-top:28px} .belband-nr{font-size:38px;margin-top:32px} }