/* ═══════════════════════════════════════════════════════════════════════════════════════ st20 — de twee gekozen standen, vastgelegd. Uit het variantenblad van st13 staan er twee vast: de zakelijke band op beeld, en één breed beeld boven de twee deuren van "Herstel aan de steen". De schakelaar is eruit — fix.css, fix.js en de acht vastgezette pagina's staan niet meer in deze map, en de twee regels in index.html die ernaar wezen ook niet. De tijdelijke merkschakelaar is mee eruit gegaan: het merk staat vast op G D H met de ooievaar, dus de regel in style.css die de H kon wegnemen is daar weggehaald. Wat de standen deden met een klasse op , doen ze hier met een klasse in de pagina: `band-zakelijk` op de band, `herstel-beeld` op de figuur. Er is geen woord tekst veranderd; het bijschrift onder de nieuwe foto is verzonnen en draagt daarom data-demo="voorbeeld", net als de prijzen en de beoordelingen. ═══════════════════════════════════════════════════════════════════════════════════════ */ /* ── de zakelijke band op beeld ────────────────────────────────────────────────────── Het eerste hele vlak dat donker wordt na de vouw — tot hier is de inkt alleen een voetstrook onder een kader of een stempelband onder een foto. De grond is een afgewerkte gevel onder de sluier van de vouw: geen tweede werkfoto — de sectie eronder toont al een ploeg op de steiger — maar het pand zelf, wat een vastgoedbeheerder komt halen. De sluier loopt naar rechts leeg zodat de steen daar leesbaar blijft; de zin blijft de zin, alleen de grond en de letterkleur keren om. */ .band-zakelijk { background-color: var(--inkt); background-image: linear-gradient(96deg, rgba(13,13,13,.96) 0%, rgba(13,13,13,.91) 38%, rgba(13,13,13,.68) 70%, rgba(13,13,13,.46) 100%), url(gevel-schoon-2.jpg); background-size: cover; background-position: 62% 46%; background-repeat: no-repeat; border-color: var(--inkt); color: var(--kalk); } .band-zakelijk .band-in { padding-block: clamp(52px, 6.6vw, 92px); } .band-zakelijk .stempel { color: var(--kalk-300); } .band-zakelijk .band-regel { color: var(--kalk); max-width: 54ch; font-size: clamp(17px, 1.52vw, 21px); } .band-zakelijk .stil { margin-top: clamp(22px, 2.4vw, 30px); color: var(--kalk); border-color: var(--kalk); } .band-zakelijk .stil:hover, .band-zakelijk .stil:focus-visible { color: var(--baksteen-300); border-color: var(--baksteen-300); } /* ── één breed beeld boven de twee deuren ──────────────────────────────────────────── Herstel aan de steen had als enige sectie in die rij alleen letter, tussen twee secties die allebei een foto hebben — vandaar dat hij vlak las. Niet twee kleine platen in de deuren maar één grote erboven, in het kader met de stempelband eronder dat de pagina overal gebruikt. De sectie krijgt daarmee hetzelfde gewicht als de secties ernaast, zonder dat het kader met de deuren iets verliest. */ .herstel-beeld { margin-bottom: clamp(26px, 3.4vw, 44px); } .herstel-beeld img { width: 100%; height: clamp(230px, 27vw, 380px); object-fit: cover; object-position: 50% 56%; } /* ── de telefoon ───────────────────────────────────────────────────────────────────── Op een smal scherm ligt de sluier over de band vlak, anders valt de laatste regel op het licht van de steen. */ @media (max-width: 900px) { .band-zakelijk { background-image: linear-gradient(rgba(13,13,13,.92), rgba(13,13,13,.92)), url(gevel-schoon-2.jpg); } } /* ── de balk achter "Haags vakwerk" keert om ───────────────────────────────────────── Hij stond op inkt met kalkletters — de zwaarste vlek van de pagina, boven een foto die zelf al donker is. Omgekeerd draagt de balk het licht: kalk als grond, de letters in inkt. De twee regels eronder blijven kalk op het beeld, dus de eerste regel springt nu naar voren in plaats van weg te zakken in de gevel erachter. */ .vouw-kop .bar-om { background: var(--kalk); color: var(--inkt); } /* ── het beeldpaar bij Over ons krijgt zijn eigen maat terug ───────────────────────── Het stijlblad vraagt om twee kleine platen naast het verhaal (hoogstens 240 hoog), maar de regel voor blokken in twee kolommen is specifieker en zette ze op 460. Daardoor stond er duizend pixels foto naast driehonderd pixels tekst, met een gat eronder, en lagen de twee platen te ver uit elkaar om als één stapel te lezen. De sectie zet de maat hier terug naar wat het paar bedoeld was; de stapelingen worden daarmee vanzelf strak, want hun overlap staat in vaste maten en bijt nu een veel groter deel van de plaat af. */ #over-ons .beeldpaar .beeldblok img { height: clamp(150px, 17vw, 240px); } /* ── de gekozen stapel bij Over ons: de stempel is het scharnier ───────────────────── Uit de drie stapels van st21 staat deze vast. De twee platen sluiten zonder gat op elkaar aan en de stempelband van de bovenste — het apparaat dat op deze pagina onder elke foto ligt — zakt over de bovenrand van de onderste heen. Die inktband wordt daarmee het koppelstuk: de twee kaders lezen als één ding dat dwars is doorgesneden. De onderste schuift een duim naar rechts zodat de knik te zien is en het niet als een fout leest, en verliest zijn bovenrand, want die zit onder de band. ───────────────── */ #over-ons .beeldpaar { gap: 0; } #over-ons .beeldpaar > .beeldblok:first-child { position: relative; z-index: 2; margin-right: clamp(26px, 4vw, 62px); } #over-ons .beeldpaar > .beeldblok:first-child .beeld-stempel { position: relative; margin-bottom: calc(-1 * clamp(30px, 3.6vw, 46px)); margin-right: calc(-1 * clamp(26px, 4vw, 62px)); padding-right: clamp(26px, 4vw, 62px); } #over-ons .beeldpaar > .beeldblok:last-child { position: relative; z-index: 1; margin-left: clamp(26px, 4vw, 62px); border-top-width: 0; } /* Onder 900px staat .twee op één kolom en loopt het paar over de volle breedte; de knik blijft, maar kleiner, zodat er niets buiten de tekstbreedte komt. */ @media (max-width: 900px) { #over-ons .beeldpaar > .beeldblok:first-child { margin-right: clamp(24px, 8vw, 56px); } #over-ons .beeldpaar > .beeldblok:first-child .beeld-stempel { margin-right: calc(-1 * clamp(24px, 8vw, 56px)); padding-right: clamp(24px, 8vw, 56px); } #over-ons .beeldpaar > .beeldblok:last-child { margin-left: clamp(24px, 8vw, 56px); } } /* ── voorbeeldweergave: het formulier verstuurt niets ────────────────── Deze demo staat los van de server: geen /contact, geen /wa, geen /bel. De melding hieronder komt op zodra iemand op verzenden drukt, zodat de knop niet dood aanvoelt. Gaat eruit op de dag dat deze pagina de echte site is. */ .form-demo{ margin-top:14px;padding:12px 14px;border-left:3px solid var(--baksteen); background:var(--kalk-200);color:var(--inkt-700); font:400 14px/1.5 var(--tekst); } .form-demo a{color:var(--baksteen-700)}