/* ─────────────────────────────────────────────────────────────────────── site.css — gedeelde DURA-laag voor toegankelijkheid. Sitebreed ingeladen in de : Bewust klein en terughoudend: dit voegt consistentie toe zonder de eigen pagina-stijlen te overschrijven. Eerste stap richting een gedeelde stylesheet, zodat losse pagina's niet meer uit elkaar lopen. ─────────────────────────────────────────────────────────────────────── */ /* Zichtbare focus voor wie met het toetsenbord navigeert. Twee ringen (cream binnen, koper buiten) zodat de focus op elke achtergrond opvalt: licht, donker of gekleurd. Muisklikken tonen geen ring (:focus-visible). */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible, summary:focus-visible { outline: none; box-shadow: 0 0 0 2px #FAF8F4, 0 0 0 4px #9E7A58; border-radius: 4px; } /* ── Gedeelde componenten: drift gladstrijken ────────────────────────────── Deze regels staan bewust in de gedeelde laag (die als laatste in de laadt) zodat ze de losse, uit elkaar gelopen inline-varianten overschrijven en elke pagina er hetzelfde uitziet. Zo verdwijnt het "knoppen net anders per pagina"-effect zonder in 71 losse bestanden te snijden. */ /* Header-knop "Offerte aanvragen": overal rond 6px, geen hoofdletters. Stond door de site in drie vormen (vierkant, 6px, 4px) plus een aparte homepage-stijl. Kleur en gewicht zijn overal al gelijk. De pagina's die .nav-cta bewust verbergen (display:none) blijven ongemoeid. */ .nav-cta { padding: 0.6rem 1.4rem; border-radius: 6px; font-size: 0.88rem; letter-spacing: normal; text-transform: none; transition: background 0.15s ease; } /* Grote content-knoppen (bijv. "Bereken uw prijs"): overal rond 6px, gelijk aan de header-knop, zodat de site één knoptaal heeft. Stond op de meeste pagina's vierkant, op een paar al 6px. De mos- en koperkleuren blijven zoals ze per pagina bedoeld zijn (koper is het accent op de klus/transport-lijn). De homepage houdt bewust z'n eigen vierkante heroknoppen; die pagina zet z'n eigen border-radius met !important. */ .btn-primary { border-radius: 6px; } /* Eyebrow-label boven sectiekoppen: overal dezelfde maat en letterspatiering. Stond op een handvol pagina's nét anders (0.65rem, andere tracking). Kleur blijft per pagina zoals hij is, want die is soms bewust lichter op een donkere sectie. */ .section-label { font-size: 0.7rem; letter-spacing: 2.5px; margin-bottom: 1rem; } /* FAQ-items: overal dezelfde regelafstand en scheidingslijn. Stond met drie paddings (1.5, 1.2, geen) en twee lijnkleuren door elkaar. Dominante keuze: 1.5rem ruimte met de standaard lijnkleur. */ .faq-item { border-bottom: 1px solid var(--border); padding: 1.5rem 0; } /* Respecteer de systeemvoorkeur voor minder beweging: zet vloeiend scrollen en de bestaande reveal-animaties uit voor wie daar last van heeft. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } }