/* werkwijze-style.css Site-breed leesbaarheids-patroon, gebaseerd op /onze-werkwijze/. Gelinkt vanaf elke pagina's . Gebruikt !important om bestaande inline-stylesheets te overrulen waar nodig. */ /* 1 — in headings/body wordt groen, niet langer italic. Per pagina kunnen redacteurs woord wrappen om key-concepts groen te markeren zonder extra spans. */ em { font-style: normal; color: var(--green, #4ade80); } /* 1b — wordt rood-oranje. Voor pijn-accenten in headlines/body (bv. "loop je vast", "uit je systeem", etc). Match met /onze-werkwijze/ pain-color (#ef4444). */ em.pain { color: var(--red, #ef4444); } /* Probleem-secties: subtiele rode gloed op de pijn-kaarten — match met /onze-werkwijze/ pattern (daar oranje, hier rood omdat dit echte pijnpunten zijn). Tekst blijft wit, label blijft groen. */ .problems .problem-card { border-left: 2px solid rgba(239, 68, 68, 0.28) !important; } .problems .problem-card:hover { border-left-color: rgba(239, 68, 68, 0.55) !important; box-shadow: -12px 0 28px -12px rgba(239, 68, 68, 0.18); } /* 2 — Alle h2's krijgen Instrument Serif italic voor rustige hoofdkoppen (match met /onze-werkwijze/). */ h2 { font-family: 'Instrument Serif', Georgia, serif !important; font-weight: 400 !important; font-style: italic; } /* 3 — Tekstkolommen smaller voor leesbaarheid (60-70 chars/lijn). Werkt op subtitles, intros en lead-text in pagina's. Niet op .container (te breed), niet op kaart-tekst. */ .subtitle, .intro, .lead, .hero-sub, .section-sub, .hero p:not(.label):not(.hero-proof-item):not(.hero-proof) { max-width: 700px !important; margin-left: auto; margin-right: auto; } /* 4 — Gradient dividers tussen secties. Gebruik
om mee in te zetten. */ .divider { border: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(74,222,128,0.15), transparent); margin: 64px auto; max-width: 100%; width: 100%; } /* 5 — Strakkere letter-spacing op eyebrow-labels boven secties. Match met /onze-werkwijze/ premium-feel. */ .label, .section-label { letter-spacing: 0.18em !important; }