/*
* Edivorm Blog Editor — frontend typografie en contentblok-styling
* (sectie 9 van de blogrichtlijn: vloeiende typografie, datumnotatie,
* en sectie 2: opmaak voor tabellen/quote-blokken).
*
* Kleuren zijn gebaseerd op de bestaande huisstijl van edivorm.nl (navy +
* teal), niet op een losstaand, zelfbedacht kleurenschema — zo sluiten de
* blokken die deze plugin toevoegt visueel aan bij de rest van de site.
* Pas de --edivorm-*-variabelen hieronder aan als de exacte merkkleuren
* (hexcodes) afwijken van deze inschatting.
*
* BELANGRIJK: alle regels die de berichttekst raken zijn bewust voorafgegaan
* door "body.single-post" (een standaard WordPress body-class die alleen op
* losse blogposts staat, nooit op het blogoverzicht/archief). Zonder die
* voorvoegsel matchten .entry-content/.et_pb_post_content namelijk ook op
* de archiefpagina, waardoor die onbedoeld smal werd — vandaar deze scoping.
*
* LET OP voor de webdesigner: de selectors mikken verder op de gangbare
* Divi/theme content-wrappers. Controleer op de live site of de daadwerkelijke
* class van de berichttekst-container hiermee overeenkomt (bv. via de
* browser-inspector) en pas zo nodig de selectorlijst aan.
*/
:root {
--fs-body: clamp(1rem, 0.95rem + 0.3vw, 1.125rem); /* 16-18px */
--fs-h1: clamp(2.25rem, 1.9rem + 1.5vw, 2.75rem); /* 36-44px */
--fs-h2: clamp(1.75rem, 1.5rem + 1vw, 2rem); /* 28-32px */
--fs-h3: clamp(1.375rem, 1.25rem + 0.6vw, 1.5rem); /* 22-24px */
--fs-h4: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem); /* 18-20px */
--fs-h5: clamp(1rem, 0.95rem + 0.2vw, 1.125rem); /* 16-18px */
/*
* Merkkleuren — Evelien's daadwerkelijk doorgegeven huisstijl-hexcodes,
* niet langer een inschatting. Deze waarden worden hoe dan ook altijd
* overschreven door Instellingen → Huisstijl (class-edivorm-brand.php),
* maar staan hier ook correct als basiswaarde voor het geval die
* instelling om wat voor reden dan ook niet laadt.
*/
--edivorm-navy: #012663;
--edivorm-navy-dark: #010f33;
--edivorm-teal: #009bbf; /* "aqua" */
--edivorm-teal-dark: #00b2cf; /* "aqua2" — iets beter leesbaar op een donkere achtergrond */
--edivorm-bg-soft: #f3f7f9;
--edivorm-border: #dbe4ea;
--edivorm-text-muted: #767676; /* sectie 9: exact deze kleur, voldoet aan WCAG 4,5:1 */
--edivorm-royal-blue: #005bbc; /* tussenkopjes (H2/H3) */
}
/*
* BELANGRIJK — breedte bewust NIET hier vastgezet:
* Eerdere versie had hier "max-width: 75ch;" (sectie 9: max. 65-75 tekens
* per regel). Dat overschreef de kolombreedte die in Divi Theme Builder werd
* ingesteld — de tekst bleef altijd even smal, ongeacht wat de webdesigner
* daar instelde. De regellengte-richtlijn uit sectie 9 is een ontwerpdoel,
* geen CSS-regel die met het sjabloon mag concurreren: stel de breedte van
* de post-content-kolom in het thema zelf in op zoiets als 650-750px, dan
* komt de 65-75 tekens vanzelf goed uit.
*/
body.single-post .entry-content,
body.single-post .et_pb_post_content,
body.single-post article.type-post .post-content {
font-size: var(--fs-body);
line-height: 1.6;
}
body.single-post .entry-content h1, body.single-post .et_pb_post_content h1, body.single-post article.type-post .post-content h1 {
font-size: var(--fs-h1);
line-height: 1.2;
color: var(--edivorm-navy);
}
body.single-post .entry-content h2, body.single-post .et_pb_post_content h2, body.single-post article.type-post .post-content h2 {
font-size: var(--fs-h2);
line-height: 1.25;
color: var(--edivorm-royal-blue);
}
body.single-post .entry-content h3, body.single-post .et_pb_post_content h3, body.single-post article.type-post .post-content h3 {
font-size: var(--fs-h3);
line-height: 1.3;
color: var(--edivorm-royal-blue);
}
body.single-post .entry-content h4, body.single-post .et_pb_post_content h4, body.single-post article.type-post .post-content h4 {
font-size: var(--fs-h4);
line-height: 1.35;
}
body.single-post .entry-content h5, body.single-post .et_pb_post_content h5, body.single-post article.type-post .post-content h5 {
font-size: var(--fs-h5);
line-height: 1.4;
}
body.single-post .entry-content a, body.single-post .et_pb_post_content a, body.single-post article.type-post .post-content a {
color: var(--edivorm-teal-dark);
}
/*
* Hero-banner (class-edivorm-hero.php): titel over de uitgelichte
* afbeelding heen, sectie 17 "Above the fold"-voorbeeld. Verbergt de eigen
* titelweergave van het thema om dubbele titels te voorkomen — mikt op de
* gangbare Divi-selector ".entry-title". Klopt die selector niet met dit
* thema, dan blijft de themateitel gewoon zichtbaar naast deze hero-titel;
* controleer dat via de browser-inspector en pas de selector hieronder aan.
*/
body.single-post .entry-title,
body.edivorm-archive-page .entry-title {
display: none;
}
/*
* DE daadwerkelijke, bevestigde oorzaak van het witte vlak (opgezocht via
* de browser-inspector): Divi's eigen thema-CSS zet altijd
* "padding-top: 58px" op #main-content .container, los van onze hero of
* de titel-wrapper. Rechtstreeks overschreven, alleen op single-post-
* pagina's — dus zonder risico voor de rest van de site, waar deze padding
* wél gewoon zijn functie behoudt. Gelijke CSS-specificiteit als Divi's
* eigen regel, vandaar bewust !important om zeker te zijn dat dit wint
* ongeacht de laadvolgorde van de stylesheets.
*
* BELANGRIJK: met ">" (directe-kind-selector) i.p.v. een gewone spatie.
* De hero-titel hergebruikt namelijk zelf ook de class "container" (zie
* class-edivorm-hero.php), diep genest verderop in dezelfde pagina — een
* gewone ".container"-selector zou die óók raken en zijn eigen, bewust
* ingestelde padding-top (48px, voor de ruimte boven "MARKETING") weer op
* nul zetten. Met ">" wordt uitsluitend de daadwerkelijke buitenste
* pagina-container geraakt, niet elke geneste "container"-class eronder.
*/
body.single-post #main-content > .container,
body.edivorm-archive-page #main-content > .container {
padding-top: 0 !important;
}
/*
* Er bleek nog een klein restje ruimte over te blijven na de fix hierboven
* — waarschijnlijk padding/margin op #main-content zelf (een niveau hoger
* dan .container), niet zichtbaar in de eerdere devtools-screenshot omdat
* die zoomde op .container. Voor de zekerheid ook dat niveau meegepakt.
*/
body.single-post #main-content,
body.edivorm-archive-page #main-content {
padding-top: 0 !important;
margin-top: 0 !important;
}
/*
* v1.67.0 — nóg een laag boven #main-content: Divi plaatst tussen de
* header/navigatiebalk en #main-content standaard een wrapper met eigen id
* "#et-main-area" (en soms een "#page-container" daar weer omheen). Die twee
* lagen hierboven raakten nooit padding/margin van DIE wrappers, alleen van
* #main-content zelf en zijn kind-.container — vandaar dat er na de vorige
* fix nog een klein wit randje overbleef tussen de navigatiebalk en de hero.
* Zelfde reden als de fix hierboven: alleen op single-post/archief, dus geen
* risico voor de rest van de site.
*/
body.single-post #et-main-area,
body.edivorm-archive-page #et-main-area,
body.single-post #page-container,
body.edivorm-archive-page #page-container {
padding-top: 0 !important;
margin-top: 0 !important;
}
/*
* Bladspiegel: door Evelien bevestigd — de algemene sitebreedte is 1500px,
* dus dat is geen inschatting meer maar de daadwerkelijke, opgegeven maat.
* Zet de blogkolom op exact dezelfde breedte als de rest van de site, zodat
* de blogtekst netjes binnen dezelfde marges als het menu erboven blijft.
*/
body.single-post #main-content .container,
body.edivorm-archive-page #main-content .container {
max-width: 1500px !important;
}
/*
* Bevestigd via devtools (element.style-inspector op div.entry-content
* zelf): "padding: 30px 0px 0px" — een DERDE, apart niveau met eigen
* top-padding, los van .container en #main-content hierboven. Divi's
* standaard entry-content-opmaak zet die 30px altijd, ongeacht of er een
* hero boven staat.
*
* v1.95 — 0 veranderd in 10px: bij een blog MET herofoto blijft dit
* zonder zichtbaar effect (de JS in class-edivorm-hero.php's
* closeHeroGap() zet deze padding, via zijn eigen ouder-boom-controle,
* daarna alsnog naar 0 en regelt de precieze ruimte zelf). Maar bij een
* blog waar het EERSTE element geen hero is — bijvoorbeeld een
* foto-slideshow direct bovenaan — draait die JS helemaal niet (die stopt
* meteen als er geen .edivorm-hero gevonden wordt), en bleef er zo
* letterlijk 0px ruimte over: "als je de slideshow opent zit hij vast aan
* de navigatiebalk". Deze 10px is dus de bodem-garantie voor die
* situaties, gevraagde hoeveelheid ("ca 10 pixels vrije marge").
*/
body.single-post .entry-content {
padding-top: 10px !important;
}
/*
* Bevestigd via devtools (Elementen-paneel): er staat een losse
als
* allereerste child van .entry-content, vóór de hero. Waar die precies
* vandaan komt (wpautop-verwerking van een lege eerste regel in de
* opgeslagen berichttekst is de meest waarschijnlijke kandidaat) is minder
* relevant dan dat hij zichtbaar extra ruimte toevoegt — dus weg ermee,
* maar uitsluitend als hij letterlijk het eerste element is (nooit een
*
die ergens middenin de tekst hoort te staan raken).
*/
body.single-post .entry-content > br:first-child {
display: none;
}
/*
* Volle breedte: de standaard CSS-uitbreektruc. Werkt ongeacht hoe smal de
* content-kolom van het thema is ingesteld, zonder dat we die kolombreedte
* zelf hoeven te kennen of aan te passen.
*
* Een eventueel resterend gat wordt daarnaast met een generiek script in
* class-edivorm-hero.php (render()) opgevangen, als vangnet voor het geval
* er nog een andere, niet-Divi-specifieke oorzaak meespeelt.
*/
body.single-post,
body.edivorm-archive-page {
/*
* "overflow-x: hidden" leek de juiste, minimale fix voor de halve pixel
* horizontale scrollbar door de 100vw-truc hieronder — maar bracht een
* bekend CSS-neveneffect met zich mee: zodra overflow-x iets anders dan
* "visible" is terwijl overflow-y dat wél is, dwingen browsers ook
* overflow-y naar "auto". Daardoor knipten ze de verticale overloop van
* het uitklap-navigatiemenu bovenaan de pagina mee af — precies het
* "menu soms niet zichtbaar op PC"-probleem dat Evelien meldde.
* "overflow-x: clip" lost hetzelfde scrollbar-probleem op zonder dat
* neveneffect (dat is exact waarvoor deze CSS-waarde in het leven is
* geroepen). Voor de zeldzame, oudere browser die "clip" niet kent:
* gewoon "hidden" als terugval, beter een kleine kans op een halve
* pixel scrollbar dan een verborgen navigatiemenu.
*/
overflow-x: hidden;
}
@supports (overflow-x: clip) {
body.single-post,
body.edivorm-archive-page {
overflow-x: clip;
}
}
.edivorm-hero {
margin: 0 0 32px 0;
}
/*
* Layout: effen navy achtergrond, titel linksboven, foto rechts die
* wegvloeit in de achtergrond — het SDIM.nl-patroon uit sectie 17, idee 1.
* De foto blijft in kleur (op verzoek, in tegenstelling tot het
* zwart-witte origineel) en de achtergrond is Edivorm's navy in plaats
* van zwart.
*/
.edivorm-hero-with-image {
position: relative;
width: 100vw;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
background: var(--edivorm-navy-dark);
overflow: hidden;
min-height: 300px;
display: flex;
align-items: flex-end; /* tekst iets lager, niet verticaal gecentreerd — op verzoek van Evelien */
}
/*
* Verbergt de uitgelichte afbeelding die het THEMA zelf bovenaan een
* bericht plaatst, zodat alleen onze eigen hero die foto nog toont.
*
* Waarom hier in CSS en niet (alleen) in PHP: de PHP-aanpak
* (post_thumbnail_html-filter, zie class-edivorm-hero.php) werkt alleen
* bij thema's die de standaard WordPress-functies gebruiken. Divi bouwt
* de afbeelding bovenaan een bericht zelf op, buiten die functies om,
* dus daar grijpt dat filter niet. Deze regels dekken de vaste
* class-namen die Divi daarvoor gebruikt, plus de gangbare namen van
* andere thema's — een aanpak die niet afhangt van hoe het thema het
* intern oplost.
*
* Alleen op een losse blogpost (body.single-post), en alleen buiten onze
* eigen hero: de :not()-clausules voorkomen dat we per ongeluk onze eigen
* hero-foto, de kaartjes in "Anderen lezen ook", of de bloglijst raken.
*/
body.single-post .et_post_meta_wrapper > .et_featured_image,
body.single-post .et_post_meta_wrapper > a > img.wp-post-image,
body.single-post .et_main_video_container + .wp-post-image,
body.single-post #main-content .entry-featured-image-url,
body.single-post .post-thumbnail:not(.edivorm-hero *),
body.single-post .featured-image:not(.edivorm-hero *),
body.single-post > .wp-post-image,
body.single-post .entry-header img.wp-post-image,
body.single-post .single-featured-image-header {
display: none !important;
}
.edivorm-hero-image {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 58%;
}
.edivorm-hero-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
/* object-position wordt inline gezet vanuit het focuspunt-metaveld,
zie class-edivorm-hero.php render(). */
/* Vloeit weg in de navy achtergrond i.p.v. een harde rand — zelfde
idee als het SDIM-voorbeeld, met de foto in kleur i.p.v. zwart-wit. */
-webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.5) 20%, black 45%);
mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.5) 20%, black 45%);
}
.edivorm-hero-text {
position: relative;
z-index: 1;
width: 100%;
}
/*
* .edivorm-hero-text-container hergebruikt de "container"-class van het
* thema (width/max-width/margin komen dus van die class, niet hiervandaan)
* — dit selector-blok voegt alleen verticale lucht toe, zonder de breedte
* of positionering aan te raken die "container" al regelt.
*/
/*
* Ruimte boven de eyebrow: eerder 48px, gelijk aan de padding-bottom
* (onder de titel). Op verzoek van Evelien nu gelijkgetrokken aan de
* afstand die ÓNDER de eyebrow zelf zit (de 12px margin-bottom van
* .edivorm-hero-eyebrow hieronder) in plaats van aan de padding-bottom
* van de hele tekstblok — dus de afstand tot de header wordt net zo klein
* als de afstand tussen "MARKETING" en de titel erna. Schuift de hele
* hero-inhoud een stuk hoger, zoals gevraagd ("alles komt hierdoor iets
* hoger te staan"). padding-bottom blijft ongewijzigd op 48px.
*/
.edivorm-hero-text-container {
padding-top: 12px;
padding-bottom: 48px;
}
.edivorm-hero-text-inner {
max-width: 560px;
}
.edivorm-hero-eyebrow {
display: inline-block;
color: var(--edivorm-teal-dark); /* "aqua2" — beter leesbaar op de donkere hero-achtergrond */
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 12px;
}
.edivorm-hero-with-image .edivorm-hero-title,
body.single-post .entry-content h1.edivorm-hero-title {
color: #fff;
margin: 0;
font-size: var(--fs-h1);
line-height: 1.15;
}
/*
* Zonder uitgelichte afbeelding (bijv. de "uitgelichte afbeelding in
* hero"-instelling uitgezet omdat het thema die zelf al toont): geen
* navy-banner-opmaak nodig, dus ook niet de 48px onderruimte hierboven
* die daarvoor bedoeld was — anders ontstaat er een onnodig grote,
* lege strook tussen de (elders getoonde) foto en de titel hier.
*/
.edivorm-hero-no-image {
padding: 0;
}
.edivorm-hero-no-image .edivorm-hero-text-container {
padding-top: 24px;
padding-bottom: 8px;
}
.edivorm-hero-no-image .edivorm-hero-title {
color: var(--edivorm-navy);
margin: 0 0 4px 0;
}
/*
* Archief-titel (bloglijst-pagina): géén volle navy hero-balk meer — die
* nam op mobiel te veel ruimte in. In plaats daarvan een vetgedrukte
* kobaltblauwe H1 met hetzelfde streepje-detail als de sectiekoppen
* ("Uitgelicht"/"Alle blogs") verderop op dezelfde pagina, voor visuele
* eenheid zonder de zware, volle-breedte balk.
*/
/*
* Diagonaal streeppatroon boven de titel, in koningsblauw — het
* decoratieve detail uit het referentievoorbeeld (superblogger.nl/blog/),
* maar dan in Edivorm's eigen accentkleur i.p.v. rood. Opgebouwd met een
* herhalend diagonaal verloop (CSS repeating-linear-gradient), dus geen
* losse afbeelding nodig.
*/
.edivorm-archive-title {
font-size: var(--fs-h1);
font-weight: 800;
color: var(--edivorm-royal-blue);
margin: 0 0 16px 0;
}
.edivorm-archive-title::before {
content: "";
display: block;
width: 90px;
height: 25px; /* was 14px — 0,8x hoger op verzoek */
margin-bottom: 10px;
background-image: repeating-linear-gradient(
45deg,
var(--edivorm-royal-blue) 0,
var(--edivorm-royal-blue) 3px,
transparent 3px,
transparent 9px
);
}
@media (max-width: 600px) {
.edivorm-archive-title {
margin-bottom: 12px;
}
.edivorm-archive-title::before {
width: 64px;
height: 10px;
}
}
/* Zonder uitgelichte afbeelding (losse blogpost, class-edivorm-hero.php):
eyebrow-label in de gewone (niet-op-donker-geoptimaliseerde) teal-tint. */
.edivorm-hero-no-image .edivorm-hero-eyebrow {
color: var(--edivorm-teal);
}
@media (max-width: 700px) {
/*
* H1 op mobiel: de daadwerkelijke grootte komt nu uit Berichten →
* Huisstijl → "Titelgrootte H1 (mobiel)" (zie
* class-edivorm-brand.php::print_custom_properties(), dat --fs-h1
* binnen dezelfde 700px-breakpoint overschrijft met een directe
* px-waarde). Eerdere versies deden dit met +/-Npt t.o.v. de vloeiende
* clamp() hieronder, wat lastig exact te raken bleek vanuit een
* screenshot-voorbeeld — nu direct instelbaar zonder dat daar telkens
* een nieuwe coderonde voor nodig is.
*/
/* Op mobiel is er te weinig ruimte om tekst én foto naast elkaar te
tonen zonder dat de titel over de foto heen verdrukt raakt — dus
daar de foto als volle-breedte balk boven de tekst, in plaats van
ernaast wegvloeiend. */
.edivorm-hero-with-image {
display: block;
min-height: 0;
}
.edivorm-hero-image {
position: relative;
width: 100%;
height: 200px;
}
.edivorm-hero-image img {
-webkit-mask-image: none;
mask-image: none;
}
.edivorm-hero-text {
max-width: none;
}
.edivorm-hero-text-container {
/*
* Was 24px boven/onder. Op verzoek "alle tekst iets naar boven"
* alleen de bovenkant verkleind — dat schuift eyebrow+titel
* dichter naar de rand van het donkerblauwe vlak, zonder de
* onderkant (ruimte tot de auteurskaart eronder) aan te passen.
*/
padding-top: 16px;
padding-bottom: 24px;
}
}
/*
* Auteurskaart, direct onder de H1 (sectie 17, "Idee 2" uit het document:
* auteurskaart met foto/naam/functietitel vóór de body-tekst, i.p.v. pas
* onderaan bij het bio-blok). Datumstijl (#767676, 13px) blijft exact zoals
* sectie 6/9 voorschrijven.
*/
.edivorm-byline-card {
display: flex;
align-items: center;
gap: 10px;
margin: 6px 0 24px 0;
}
.edivorm-byline-photo {
border-radius: 50%;
width: 44px;
height: 44px;
object-fit: cover;
flex-shrink: 0;
}
.edivorm-byline-text {
display: flex;
flex-direction: column;
}
.edivorm-byline-name {
font-weight: 700;
color: var(--edivorm-navy) !important;
font-size: 15px;
}
.edivorm-byline-job {
font-weight: 400;
color: var(--edivorm-text-muted) !important;
}
.edivorm-byline-date {
font-size: 13px;
color: var(--edivorm-text-muted) !important;
display: inline-block !important;
}
/* Deelknoppen (sectie 17, "Idee 1"): "Deel dit artikel" direct onder de tekst. */
.edivorm-share {
display: flex;
align-items: center;
gap: 12px;
margin: 28px 0;
padding-top: 20px;
border-top: 1px solid var(--edivorm-border);
}
.edivorm-share-label {
font-size: 13px;
font-weight: 600;
color: var(--edivorm-text-muted);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.edivorm-share-buttons {
display: flex;
gap: 8px;
}
.edivorm-share-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--edivorm-bg-soft);
color: var(--edivorm-navy);
text-decoration: none;
transition: background-color .15s ease, color .15s ease;
}
.edivorm-share-button:hover {
background: var(--edivorm-teal);
color: #fff;
}
.edivorm-share-svg {
display: block;
}
/*
* Quote-blokken (sectie 2). Op verzoek van Evelien bijgewerkt: vette
* letters i.p.v. cursief, eigen instelbare kleur voor de streep en de
* tekst (zie Berichten → Huisstijl → "Quote-streep"/"Quote-tekst" — was
* eerst vast op de teal/koningsblauw-variabelen), en een eigen instelbare
* tekstgrootte voor PC en mobiel apart (zie diezelfde instellingenpagina —
* class-edivorm-brand.php print_custom_properties() zet de daadwerkelijke
* font-size hieronder overheen, inclusief het media-query-verschil, dus
* hier bewust geen font-size meer vastgelegd).
*
* Verticale ruimte via PADDING i.p.v. margin, en margin expliciet op 0:
* met margin bleek de ruimte boven en onder toch verschillend te ogen,
* ook al stond er letterlijk dezelfde waarde — marges van aangrenzende
* alinea's "vouwen" namelijk samen met de marge van dit blok (CSS-eigen
* margin-collapsing), en dat gebeurt anders aan de boven- dan aan de
* onderkant zodra de tekst vóór en ná het blok een andere eigen
* boven-/ondermarge heeft. Padding kent dat probleem niet: die telt altijd
* gewoon zelfstandig op, dus nu gegarandeerd exact evenveel wit boven als
* onder, ongeacht wat er vóór/ná staat.
*
* De streep (border-left) staat NIET meer op dit buitenste blok, maar op
* de tekst-alinea eronder — op verzoek: "de quote lijn op pc is nu te
* hoog, daar moet witruimte zitten". Met de streep hier zou hij de volle
* hoogte van dit blok bestrijken, dus ook door de 2.5em witruimte
* boven/onder heen lopen. Nu loopt de streep alleen naast de daadwerkelijke
* tekst, en blijft de ruimte erboven/eronder echt leeg.
*/
/*
* "Overzichtplaatje met bronvermelding" — op verzoek van Evelien, naar
* voorbeeld van frankwatching.com: een afbeelding in de bloghoofdtekst
* met een kleine, gedempte bronregel eronder, aanklikbaar tot een
* volledig-scherm weergave met een kruisje om te sluiten.
*
* Hergebruikt WordPress' eigen ingebouwde onderschrift-functie (de
* "Onderschrift"-invoer bij een afbeelding in de mediabibliotheek) —
* geen nieuw veld nodig, dat bestaat al. WordPress wikkelt zo'n
* afbeelding zelf al in .wp-caption/.wp-caption-text; hier alleen de
* styling en (via class-edivorm-image-lightbox.php) het klikgedrag.
*/
body.single-post .entry-content .wp-caption,
body.single-post .et_pb_post_content .wp-caption,
body.single-post article.type-post .post-content .wp-caption {
max-width: 100%;
margin: 24px auto;
}
body.single-post .entry-content .wp-caption img,
body.single-post .et_pb_post_content .wp-caption img,
body.single-post article.type-post .post-content .wp-caption img {
display: block;
width: 100%;
height: auto;
border-radius: 6px;
cursor: zoom-in;
}
body.single-post .entry-content .wp-caption-text,
body.single-post .et_pb_post_content .wp-caption-text,
body.single-post article.type-post .post-content .wp-caption-text {
font-size: 13px;
line-height: 1.4;
color: var(--edivorm-text-muted);
font-style: italic;
margin: 6px 0 0 0;
padding: 0;
text-align: left;
}
/*
* Lightbox voor deze afbeeldingen: zelfde opzet als de foto-slider
* (class-edivorm-slider.php), maar hier één herbruikbare, gedeelde
* overlay voor de hele pagina i.p.v. één per slider-instantie — een
* losse afbeelding komt immers meestal maar één keer per blog voor.
*/
.edivorm-image-lightbox {
display: none;
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(1, 15, 51, 0.92);
align-items: center;
justify-content: center;
flex-direction: column;
}
.edivorm-image-lightbox.is-open {
display: flex;
}
.edivorm-image-lightbox-image {
max-width: 92vw;
max-height: 85vh;
object-fit: contain;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.edivorm-image-lightbox-caption {
color: #fff;
font-size: 14px;
font-style: italic;
opacity: 0.85;
margin-top: 12px;
max-width: 92vw;
text-align: center;
}
.edivorm-image-lightbox-close {
position: absolute;
top: 16px;
right: 20px;
background: none;
border: none;
color: #fff;
font-size: 36px;
line-height: 1;
cursor: pointer;
padding: 4px 10px;
}
body.single-post article.type-post .post-content blockquote {
margin: 0 !important;
padding: 2.5em 0 !important;
font-style: normal;
font-weight: 700;
line-height: 1.6;
color: var(--edivorm-quote-text) !important;
}
body.single-post .entry-content blockquote p,
body.single-post .et_pb_post_content blockquote p,
body.single-post article.type-post .post-content blockquote p {
border-left: 5px solid var(--edivorm-quote-border);
padding: 4px 24px;
color: var(--edivorm-quote-text) !important;
margin: 0;
}
/* Tabellen (sectie 2) */
body.single-post .entry-content table,
body.single-post .et_pb_post_content table,
body.single-post article.type-post .post-content table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
body.single-post .entry-content table th, body.single-post .entry-content table td,
body.single-post .et_pb_post_content table th, body.single-post .et_pb_post_content table td,
body.single-post article.type-post .post-content table th, body.single-post article.type-post .post-content table td {
border: 1px solid var(--edivorm-border);
padding: 8px 12px;
text-align: left;
}
body.single-post .entry-content table th,
body.single-post .et_pb_post_content table th,
body.single-post article.type-post .post-content table th {
background: var(--edivorm-navy);
color: #fff;
}
/*
* Opsommingen (sectie 2): koningsblauwe vinkjes i.p.v. standaard bolletjes,
* op verzoek van Evelien. Alleen bulletlijsten () — genummerde lijsten
* (, bv. stappenplannen) blijven gewoon nummers. Onze eigen
* .edivorm-trapezium-faq-lijst zit óók binnen .entry-content (want daar
* wordt-ie in geplakt via de_content), maar is geen content-opsomming —
* die krijgt daarom expliciet zijn eigen, neutrale stijl terug.
*/
body.single-post .entry-content ul li,
body.single-post .et_pb_post_content ul li,
body.single-post article.type-post .post-content ul li {
list-style: none;
position: relative;
padding-left: 26px;
margin-bottom: 6px;
}
body.single-post .entry-content ul li::before,
body.single-post .et_pb_post_content ul li::before,
body.single-post article.type-post .post-content ul li::before {
content: "\2714";
position: absolute;
left: 0;
top: 0;
color: var(--edivorm-royal-blue);
font-weight: 700;
}
body.single-post .entry-content ul.edivorm-trapezium-faq li {
list-style: disc;
padding-left: 0;
}
body.single-post .entry-content ul.edivorm-trapezium-faq li::before {
content: none;
}
/*
* Highlight-alinea (class-edivorm-highlight.php): lichte huisstijl-tint
* i.p.v. wit, met een teal linkerstreep als accent. Links binnen dit vak
* komen in koningsblauw, op verzoek van Evelien.
*/
.edivorm-highlight {
background: var(--edivorm-bg-soft);
border-left: 4px solid var(--edivorm-teal);
border-radius: 4px;
padding: 16px 20px;
margin: 24px 0;
}
.edivorm-highlight p {
margin: 0;
}
.edivorm-highlight a {
color: var(--edivorm-royal-blue) !important;
font-weight: 600;
}
/* Inhoudsopgave */
.edivorm-toc {
background: var(--edivorm-bg-soft);
border: 1px solid var(--edivorm-border);
border-left: 3px solid var(--edivorm-teal);
border-radius: 4px;
padding: 16px 20px;
margin: 20px 0;
}
.edivorm-toc-title {
font-weight: 700;
color: var(--edivorm-navy);
margin: 0 0 8px 0;
}
.edivorm-toc ol {
margin: 0;
padding-left: 20px;
}
.edivorm-toc a {
color: var(--edivorm-teal-dark);
}
/* FAQ-blok — standaard dichtgeklapt (), zelfde visuele patroon als
het trapeziumblok hieronder. Volledige vraag/antwoord-tekst staat sowieso
altijd in de broncode, zichtbaar voor crawlers, ongeacht open/dicht-status. */
.edivorm-faq {
margin: 32px 0;
border: 1px solid var(--edivorm-border);
border-radius: 6px;
background: #fff;
}
.edivorm-faq-label {
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px;
font-weight: 600;
color: var(--edivorm-navy);
background: var(--edivorm-bg-soft);
border-radius: 6px;
}
.edivorm-faq-label::-webkit-details-marker { display: none; }
.edivorm-faq[open] .edivorm-faq-label {
border-radius: 6px 6px 0 0;
}
.edivorm-faq-label .dashicons {
color: var(--edivorm-teal);
}
.edivorm-faq-content {
padding: 18px;
}
.edivorm-faq-item {
margin-bottom: 16px;
}
.edivorm-faq-item:last-child {
margin-bottom: 0;
}
.edivorm-faq-question {
margin-bottom: 4px;
color: var(--edivorm-navy);
}
/* Auteursbio-blok, onderaan */
.edivorm-author-bio {
display: flex;
align-items: flex-start;
gap: 16px;
margin: 32px 0;
padding: 18px;
background: var(--edivorm-bg-soft);
border-radius: 6px;
}
.edivorm-author-bio img {
border-radius: 50%;
width: 64px;
height: 64px;
object-fit: cover;
flex-shrink: 0;
}
.edivorm-author-bio-name {
font-weight: 700;
color: var(--edivorm-navy);
margin: 0 0 4px 0;
}
.edivorm-author-bio-name a {
margin-left: 6px;
color: var(--edivorm-teal-dark);
}
/*
* Metadata-kaart onderaan de blog (gepubliceerd/bijgewerkt/auteur/leestijd),
* bewust lichtgrijs — dit is een feitelijk overzicht, geen visueel
* hoogtepunt. 2x2-raster op mobiel, vier naast elkaar op grotere schermen.
*/
.edivorm-meta-footer {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin: 32px 0;
padding: 18px;
background: var(--edivorm-bg-soft);
border-radius: 6px;
}
.edivorm-meta-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.edivorm-meta-label {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--edivorm-text-muted) !important;
display: flex;
align-items: center;
gap: 4px;
}
.edivorm-meta-label .dashicons {
font-size: 14px;
width: 14px;
height: 14px;
color: var(--edivorm-text-muted);
}
.edivorm-meta-value {
font-size: 14px;
color: var(--edivorm-text-muted) !important;
}
@media (max-width: 600px) {
.edivorm-meta-footer {
grid-template-columns: repeat(2, 1fr);
}
}
/* Auteurspagina (shortcode [edivorm_author_page]) */
.edivorm-author-page img {
border-radius: 50%;
width: 140px;
height: 140px;
object-fit: cover;
}
/* Gerelateerde blogs — swipebare kaartenslider (CSS scroll-snap, werkt
overal met touch/swipe zonder externe libraries; pijltjes zijn een extra
bediening voor muis/toetsenbord, zie render()-JS in class-edivorm-related.php). */
.edivorm-related-blogs {
margin: 40px 0;
}
.edivorm-related-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
}
.edivorm-related-header h4 {
margin: 0;
color: var(--edivorm-navy);
}
.edivorm-related-nav {
display: flex;
gap: 6px;
}
.edivorm-related-prev,
.edivorm-related-next {
width: 32px;
height: 32px;
border-radius: 50%;
border: none;
/* Effen donkerblauw i.p.v. dunne rand op wit — beter zichtbaar op verzoek
van Evelien. Gebruikt de al bestaande, via Instellingen → Huisstijl
instelbare navy-kleur — dus meteen ook "kiesbaar" zonder los veld. */
background: var(--edivorm-navy);
color: #fff;
cursor: pointer;
font-size: 14px;
line-height: 1;
}
.edivorm-related-prev:hover,
.edivorm-related-next:hover {
background: var(--edivorm-teal);
color: #fff;
}
.edivorm-related-track {
display: flex;
gap: 16px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding-bottom: 8px;
/* Scrollbar subtiel houden i.p.v. een dikke standaardbalk. */
scrollbar-width: thin;
}
.edivorm-related-card {
flex: 0 0 auto;
scroll-snap-align: start;
width: 240px;
text-decoration: none;
color: inherit;
border: 1px solid var(--edivorm-border);
border-radius: 6px;
overflow: hidden;
display: block;
background: #fff;
transition: box-shadow .15s ease, transform .15s ease;
}
.edivorm-related-card:hover {
box-shadow: 0 4px 14px rgba(23, 50, 90, 0.12);
transform: translateY(-2px);
}
.edivorm-related-card-image {
display: block;
aspect-ratio: 4 / 3;
overflow: hidden;
}
.edivorm-related-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.edivorm-related-card-body {
display: block;
padding: 12px;
}
.edivorm-related-item-title {
font-weight: 600;
color: var(--edivorm-navy);
display: block;
margin-bottom: 4px;
}
.edivorm-related-item-meta {
font-size: 13px;
color: var(--edivorm-text-muted);
display: inline-flex;
align-items: center;
gap: 4px;
}
.edivorm-related-item-meta .dashicons {
font-size: 15px;
width: 15px;
height: 15px;
}
/* "Bekijk alle blogs en updates »" — nu een echte CTA-knop (teal/wit) i.p.v.
een tekstlink, op verzoek van Evelien. Combineert met .edivorm-cta-button
hierboven voor de kleuren; hier alleen de eigen marge boven het blok. */
.edivorm-related-cta {
margin-top: 14px;
}
/* Trapeziumblok ("En dan dit") — bewust subtiel en smal gehouden op verzoek
van Evelien: dit blok dient vooral als machineleesbare data-drager voor
zoekmachines (AI-snippet + FAQ-samenvatting), niet als iets waar de
bezoeker actief naar op zoek is. Vandaar een grijze, ingetogen balk in
plaats van de opvallende navy/teal-styling van de andere blokken. */
.edivorm-trapezium {
margin: 20px 0;
/*
* Eerder bewust smal gemaakt (max-width: 380px) op verzoek — later
* weer teruggedraaid: moet op PC net zo breed zijn als de metadata-
* kaart eronder (gepubliceerd/bijgewerkt/auteur/leestijd), die de
* volledige contentbreedte gebruikt.
*/
border: 1px solid var(--edivorm-border);
border-radius: 6px;
background: #fff;
}
.edivorm-trapezium-label {
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 14px;
font-weight: 400;
font-size: 13px;
color: var(--edivorm-text-muted) !important;
background: var(--edivorm-bg-soft);
border-radius: 6px;
}
.edivorm-trapezium-label::-webkit-details-marker { display: none; }
.edivorm-trapezium[open] .edivorm-trapezium-label {
border-radius: 6px 6px 0 0;
}
.edivorm-trapezium-label .dashicons {
color: var(--edivorm-text-muted);
font-size: 16px;
width: 16px;
height: 16px;
}
.edivorm-trapezium-content {
padding: 12px 14px;
font-size: 13px;
}
/*
* Koppen binnen het trapezium (h2/h3/h4): tot nu toe ongestyled gebleven,
* vandaar dat ze bij het plakken van opgemaakte tekst helemaal kaal
* (browserstandaard) verschenen — precies het probleem dat eerder gemeld
* werd ("H2/H3-opmaak is er niet meer in het trapezium met En dan dit").
* Bewust een eigen, kleinere hiërarchie i.p.v. de grote navy/koningsblauwe
* H2/H3 uit de hoofdtekst: dit blok is en blijft de ingetogen, grijze balk
* (zie toelichting hierboven), een xl-grote kop zou daar niet bij passen.
*/
.edivorm-trapezium-content h2,
.edivorm-trapezium-content h3,
.edivorm-trapezium-content h4 {
font-weight: 700;
line-height: 1.3;
margin: 12px 0 6px 0;
}
.edivorm-trapezium-content h2:first-child,
.edivorm-trapezium-content h3:first-child,
.edivorm-trapezium-content h4:first-child {
margin-top: 0;
}
.edivorm-trapezium-content h2 {
font-size: 15px;
color: var(--edivorm-navy);
}
.edivorm-trapezium-content h3 {
font-size: 14px;
color: var(--edivorm-royal-blue);
}
.edivorm-trapezium-content h4 {
font-size: 13px;
color: var(--edivorm-text-muted);
}
.edivorm-trapezium-content p {
margin: 0 0 8px 0;
}
.edivorm-trapezium-content p:last-child {
margin-bottom: 0;
}
.edivorm-trapezium-snippet {
font-weight: 400;
color: var(--edivorm-text-muted);
}
.edivorm-trapezium-faq {
margin: 10px 0 0 0;
padding-left: 16px;
}
.edivorm-trapezium-faq li {
margin-bottom: 6px;
}
.edivorm-trapezium-faq strong {
display: block;
color: var(--edivorm-text-muted);
}
/* CTA-blok, zie class-edivorm-cta.php */
.edivorm-cta {
margin: 40px 0;
padding: 28px;
background: linear-gradient(135deg, var(--edivorm-navy) 0%, var(--edivorm-navy-dark) 100%);
color: #fff;
border-radius: 8px;
}
.edivorm-cta-title,
body.single-post .entry-content h3.edivorm-cta-title {
margin-top: 0;
color: #fff !important;
}
.edivorm-cta-intro {
color: rgba(255, 255, 255, 0.85) !important;
}
.edivorm-cta-button {
display: inline-block;
margin: 12px 0;
/*
* Eigen kleurvariabelen (--edivorm-cta-button/-hover), losstaand van
* --edivorm-teal — die laatste wordt ook gebruikt voor het
* accentwoord/eyebrow-label in de header, dat op de donkere
* hero-achtergrond staat. Deze knop staat op een witte achtergrond en
* heeft daardoor een eigen, apart instelbare tint nodig voor
* voldoende leesbaarheid (zie Berichten → Huisstijl → "CTA-knopkleur").
*/
background: var(--edivorm-cta-button);
/*
* !important hier bewust: dit is al de derde keer dat een generieke
* thema-regel de kleur van een knop of kop in dit blok overschreef
* (zie ook de eerdere fixes bij de hero-titel en de CTA-titel). In
* plaats van steeds opnieuw een specifiekere selector te bedenken,
* hier direct vastgezet.
*/
color: #fff !important;
opacity: 1 !important;
padding: 10px 22px;
border-radius: 4px;
text-decoration: none;
font-weight: 600;
transition: background-color .15s ease;
}
.edivorm-cta-button:hover {
background: var(--edivorm-cta-button-hover);
color: #fff !important;
}
.edivorm-cta-carousel {
margin: 20px 0;
}
.edivorm-cta-contact {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.edivorm-cta-quote {
font-style: italic;
color: rgba(255, 255, 255, 0.85) !important;
}
.edivorm-cta-contact-line {
color: rgba(255, 255, 255, 0.85) !important;
}
.edivorm-cta-contact-details a {
/*
* Losse, instelbare variabele i.p.v. vast wit (zie Berichten →
* Huisstijl → "CTA-linkkleur"/"CTA-linkkleur (mobiel)") — op verzoek
* van Evelien, om deze links los van de rest van het CTA-blok te
* kunnen kleuren.
*/
color: var(--edivorm-cta-link) !important;
}
.edivorm-cta-contact-details span {
margin-right: 16px;
}
/* Losse CTA-knop (class-edivorm-button.php), overal in de tekst te plaatsen
via [edivorm_button]. */
.edivorm-button {
display: inline-block;
padding: 10px 22px;
border-radius: 4px;
text-decoration: none;
font-weight: 600;
margin: 8px 0;
transition: background-color .15s ease, color .15s ease;
}
.edivorm-button-primary {
background: var(--edivorm-teal);
color: #fff !important;
}
.edivorm-button-primary:hover {
background: var(--edivorm-teal-dark);
color: #fff !important;
}
.edivorm-button-secondary {
background: transparent;
color: var(--edivorm-navy) !important;
border: 2px solid var(--edivorm-navy);
padding: 8px 20px; /* 2px minder dan primary, compenseert de randdikte */
}
.edivorm-button-secondary:hover {
background: var(--edivorm-navy);
color: #fff !important;
}
/*
* Cataloguskaart (class-edivorm-catalog.php), via [edivorm_catalogus].
* Zelfde kaart-esthetiek als de archiefkaartjes (afgeronde hoeken, dunne
* rand, zachte achtergrond) voor visuele eenheid met de rest van de site,
* los van waar de shortcode wordt geplakt (blog of gewone pagina).
*/
.edivorm-catalog-card {
display: flex;
flex-direction: column;
border: 1px solid var(--edivorm-border);
border-radius: 8px;
overflow: hidden;
margin: 24px 0;
background: #fff;
max-width: 480px;
}
.edivorm-catalog-card-image {
display: block;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--edivorm-bg-soft);
}
.edivorm-catalog-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.edivorm-catalog-card-body {
padding: 18px 20px;
}
.edivorm-catalog-card-title {
margin: 0 0 8px 0;
font-size: 1.15em;
color: var(--edivorm-navy);
}
.edivorm-catalog-card-title a {
color: inherit;
text-decoration: none;
}
.edivorm-catalog-card-desc {
color: var(--edivorm-text-muted);
margin-bottom: 10px;
}
.edivorm-catalog-card-desc p:last-child {
margin-bottom: 0;
}
.edivorm-catalog-card-link {
display: inline-block;
color: var(--edivorm-royal-blue);
font-weight: 600;
text-decoration: none;
margin-bottom: 4px;
}
.edivorm-catalog-card-link:hover {
text-decoration: underline;
}
.edivorm-catalog-card-button-wrap {
margin: 8px 0 0 0;
}
.edivorm-catalog-card-button-wrap .edivorm-button {
margin: 0;
}
/* Foto-slider (class-edivorm-slider.php), via [edivorm_slider ids="..."].
Zelfde scroll-snap-techniek als de gerelateerde-blogs-slider hierboven,
maar dan volle breedte per slide i.p.v. kaartjes. */
.edivorm-slider {
/*
* Was "margin: 28px 0" — als deze slider het eerste element in de
* blogtekst is, "vouwt" die bovenmarge samen met de (bewust op 0
* gezette) marges van de omliggende wrappers hierboven — zie de
* uitleg bij de hero-gap-fix in class-edivorm-hero.php en de
* quote-marge hieronder voor dezelfde soort margin-collapsing-bug.
* Resultaat hier: de slideshow plakte vast tegen de menubalk aan.
* Padding kent dat probleem niet.
*
* !important toegevoegd: bleek zónder nog steeds (soms) overschreven
* te worden door een generieke thema-regel — zelfde, herhaaldelijk
* terugkerende reden als bij de CTA-knop en het quote-blok elders in
* dit bestand.
*/
padding: 28px 0 !important;
margin: 0 !important;
}
.edivorm-slider-viewport {
position: relative;
}
.edivorm-slider-track {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* eigen dots-navigatie eronder maakt de scrollbar overbodig */
border-radius: 6px;
}
.edivorm-slider-track::-webkit-scrollbar {
display: none;
}
.edivorm-slider-slide {
flex: 0 0 100%;
scroll-snap-align: start;
}
.edivorm-slider-slide img {
width: 100%;
height: auto;
max-height: 480px;
/*
* Was "cover" (vult de box, knipt de rand van de foto weg) — op
* verzoek: "deze moeten helemaal zichtbaar zijn zodat ze het scherm
* op de foto kunnen lezen". "Contain" toont de hele foto, eventueel
* met een neutrale balk erboven/eronder i.p.v. bijgesneden randen.
*/
object-fit: contain;
background: var(--edivorm-bg-soft);
display: block;
cursor: zoom-in;
}
/*
* Lightbox-popup: volledig scherm, donkere achtergrond, de aangeklikte
* foto op volledige resolutie gecentreerd. Standaard onzichtbaar
* (display:none) tot de "is-open"-class erbij komt via de JS hierboven.
*/
.edivorm-slider-lightbox {
display: none;
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(1, 15, 51, 0.92); /* --edivorm-navy-dark, met transparantie */
align-items: center;
justify-content: center;
}
.edivorm-slider-lightbox.is-open {
display: flex;
}
.edivorm-slider-lightbox-image {
max-width: 92vw;
max-height: 92vh;
object-fit: contain;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.edivorm-slider-lightbox-close {
position: absolute;
top: 16px;
right: 20px;
background: none;
border: none;
color: #fff;
font-size: 36px;
line-height: 1;
cursor: pointer;
padding: 4px 10px;
}
.edivorm-slider-lightbox-prev,
.edivorm-slider-lightbox-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.15);
border: none;
color: #fff;
font-size: 28px;
width: 48px;
height: 48px;
border-radius: 50%;
cursor: pointer;
}
.edivorm-slider-lightbox-prev:hover,
.edivorm-slider-lightbox-next:hover {
background: rgba(255, 255, 255, 0.3);
}
.edivorm-slider-lightbox-prev {
left: 16px;
}
.edivorm-slider-lightbox-next {
right: 16px;
}
@media (max-width: 600px) {
.edivorm-slider-lightbox-prev,
.edivorm-slider-lightbox-next {
width: 40px;
height: 40px;
font-size: 22px;
}
}
/*
* Pijltjes: op verzoek verplaatst van "twee kleine knopjes onder de foto"
* naar "twee zichtbare pijltjes links en rechts" — overlayed op de foto
* zelf, verticaal gecentreerd (via .edivorm-slider-viewport hierboven,
* die daarvoor position:relative krijgt), en altijd zichtbaar i.p.v.
* pas bij hover.
*/
.edivorm-slider-prev,
.edivorm-slider-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
background: rgba(1, 15, 51, 0.55); /* --edivorm-navy-dark, transparant */
color: #fff;
font-size: 18px;
cursor: pointer;
flex-shrink: 0;
}
.edivorm-slider-prev {
left: 12px;
}
.edivorm-slider-next {
right: 12px;
}
.edivorm-slider-prev:hover,
.edivorm-slider-next:hover {
background: var(--edivorm-navy-dark);
}
@media (max-width: 600px) {
.edivorm-slider-prev,
.edivorm-slider-next {
width: 34px;
height: 34px;
font-size: 15px;
}
}
.edivorm-slider-dots {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 12px;
}
.edivorm-slider-dot {
width: 9px;
height: 9px;
border-radius: 50%;
border: none;
background: var(--edivorm-border);
cursor: pointer;
padding: 0;
}
.edivorm-slider-dot.is-active {
background: var(--edivorm-teal);
}
/*
* RESPONSIVE — "op alle schermen mooi werken".
* Blokken waren al vloeiend qua typografie (clamp()), maar hadden geen eigen
* aanpassingen voor kleine schermen: paddings die op mobiel te ruim aanvoelen,
* een auteursbio die naast elkaar bleef staan i.p.v. stapelen, en tabellen
* die breder dan het scherm konden worden zonder scrollmogelijkheid.
*/
@media (max-width: 600px) {
/* Tabellen: horizontaal laten scrollen i.p.v. het scherm laten
overflowen — content/structuur van de tabel blijft ongewijzigd. */
body.single-post .entry-content table,
body.single-post .et_pb_post_content table,
body.single-post article.type-post .post-content table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
}
.edivorm-toc,
.edivorm-faq-content,
.edivorm-trapezium-content,
.edivorm-cta {
padding: 12px;
}
.edivorm-faq-label,
.edivorm-trapezium-label {
padding: 10px 12px;
}
/* Auteurskaart onder de H1: op smalle schermen naam/datum onder de
foto i.p.v. ernaast, zodat de tekst niet te veel moet inkrimpen. */
.edivorm-byline-card {
align-items: flex-start;
}
.edivorm-byline-name {
font-size: 14px;
}
/* Auteursbio onderaan: op smalle schermen onder elkaar i.p.v. naast
elkaar, anders wordt de bio-tekst te smal om prettig te lezen. */
.edivorm-author-bio {
flex-direction: column;
align-items: center;
text-align: center;
}
/* CTA-contactregel: telefoon/e-mail onder elkaar i.p.v. naast elkaar
proppen op een smal scherm. */
.edivorm-cta-contact-details {
display: flex;
flex-direction: column;
gap: 6px;
}
.edivorm-cta-contact-details span {
margin-right: 0;
}
/* Gerelateerde-blogs-kaarten: iets smaller zodat op een telefoon het
begin van de volgende kaart zichtbaar blijft — dat is het visuele
signaal dat er meer te swipen valt. */
.edivorm-related-card {
width: 200px;
}
.edivorm-related-header h4 {
font-size: var(--fs-h4);
}
.edivorm-share {
flex-wrap: wrap;
}
}
/* De bovenstaande regel sluit hier het "@media (max-width: 600px)"-blok
dat begon bij de tabellen-fix verderop in dit bestand — .edivorm-share
hoorde hier gewoon bij, in plaats van een eigen, ongeopend media-blok
te vormen (dat was de daadwerkelijke fout: een ontbrekende "}" hierboven
liet een tweede "@media (max-width: 600px) {" ontstaan binnen de eerste,
waardoor de browser de rest van het bestand verkeerd kon interpreteren). */
/*
* Contentkolom-breedte op tablet/mobiel: het thema gebruikt overal
* "width: 80%" voor .container, wat op kleinere schermen relatief veel
* ruimte aan de zijkanten overlaat. Hier specifiek verruimd voor
* blogposts — de rest van de site (andere paginatypes) blijft bij de
* eigen 80%-instelling van het thema.
*/
@media (max-width: 991px) {
body.single-post #main-content .container,
body.edivorm-archive-page #main-content .container {
width: 92% !important;
}
}
/*
* Mobiel: exact 15px links/rechts op verzoek van Evelien, in plaats van
* een percentage (dat op verschillende toestelbreedtes weer een ander
* aantal pixels oplevert). "width: auto" + vaste marges i.p.v. "width: 94%"
* + automatische centrering, zodat de 15px gegarandeerd exact 15px is.
*/
@media (max-width: 600px) {
body.single-post #main-content .container,
body.edivorm-archive-page #main-content .container {
width: auto !important;
margin-left: 15px !important;
margin-right: 15px !important;
}
}
/* Zeer smalle schermen (oudere/kleinere telefoons): nog wat lucht besparen. */
@media (max-width: 380px) {
.edivorm-related-card {
width: 170px;
}
.edivorm-cta,
.edivorm-toc {
margin: 20px 0;
}
.edivorm-byline-photo {
width: 36px;
height: 36px;
}
}
/*
* ============================================================
* BLOG-OVERZICHTSPAGINA (archief), sjabloon in
* includes/templates/archive-blog.php, geladen via class-edivorm-archive.php.
* Bewust GEEN illustraties, GEEN cursieve tekst, GEEN leestijd op de
* kaartjes — allemaal expliciete wensen. Kaartjes bewust compact.
* ============================================================
*/
.edivorm-archive-wrap {
/* Zelfde algemene sitebreedte (1500px) als de blogkolom hierboven. */
max-width: 1500px;
margin: 40px auto;
padding: 0 20px;
}
.edivorm-archive-intro {
font-size: 1.15em;
line-height: 1.5;
color: var(--edivorm-text-muted);
max-width: 720px;
margin: 0 0 28px 0;
/* Nadrukkelijk niet cursief — op verzoek. */
font-style: normal;
}
/*
* Sectiekoppen ("Uitgelicht", "Alle blogs") met een korte, dikke
* accentstreep ernaast — een moderne, strakke stijl geïnspireerd op
* superblogger.nl/blog/, maar met Edivorm's eigen teal in plaats van hun
* rode accentkleur, en zonder de diagonale streep-illustratie (die was
* al eerder expliciet niet gewenst: "geen balk met tekeningen").
*/
.edivorm-archive-section-title {
display: flex;
align-items: center;
gap: 12px;
font-size: var(--fs-h2);
font-weight: 800;
color: var(--edivorm-navy);
margin: 40px 0 20px 0;
}
.edivorm-archive-section-title::before {
content: "";
display: inline-block;
width: 28px;
height: 4px;
border-radius: 2px;
background: var(--edivorm-teal);
flex-shrink: 0;
}
.edivorm-archive-featured + .edivorm-archive-section-title,
h2.edivorm-archive-section-title:first-child {
margin-top: 0;
}
/* Categoriefilters */
/*
* Standaard op ÉÉN rij (op verzoek — "neemt nu teveel ruimte in"): niet
* meer automatisch uitspreiden over meerdere regels. Past niet alles op
* die ene rij, dan worden de overtollige tabs afgekapt (overflow:hidden)
* en verschijnt de "+"-knop om ze alsnog te tonen — zie is-expanded
* hieronder en de JS in archive-blog.php.
*/
.edivorm-archive-filters {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
/* Verbergt de scrollbar zelf maar behoudt het swipe/scroll-gedrag —
dit is de "kan verschoven worden"-functie: sleep/swipe zijwaarts om
de rest van de tabs te zien, als alternatief op de +-knop. */
scrollbar-width: none;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
gap: 8px;
margin-bottom: 28px;
align-items: center;
}
.edivorm-archive-filters::-webkit-scrollbar {
display: none;
}
.edivorm-archive-filters.is-expanded {
flex-wrap: wrap;
overflow: visible;
}
.edivorm-archive-filter {
display: inline-block;
padding: 6px 16px;
border-radius: 999px;
border: 1px solid var(--edivorm-border);
background: #fff;
color: var(--edivorm-navy);
font-size: 13px;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
flex-shrink: 0;
}
.edivorm-archive-filter:hover,
.edivorm-archive-filter.is-active {
background: var(--edivorm-navy);
color: #fff;
border-color: var(--edivorm-navy);
}
.edivorm-archive-filter-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid var(--edivorm-border);
background: #fff;
color: var(--edivorm-navy);
font-size: 18px;
font-weight: 800;
line-height: 1;
cursor: pointer;
flex-shrink: 0;
/*
* Was "margin-left: auto" — duwde de knop helemaal naar de rechterrand
* van de rij, los van de laatste zichtbare tab (soms een groot,
* vreemd gat ertussen). Op verzoek: "moet naast de rij komen te
* staan" — nu gewoon de eerstvolgende flex-positie, direct na de
* laatste tab.
*/
}
.edivorm-archive-filter-toggle:hover {
background: var(--edivorm-bg-soft);
}
/*
* Wrap-gedrag op mobiel (max-width:600px) hier bewust weggehaald op
* verzoek: "dit lijstje op 1 regel maken en dan met + openen, zoals op
* pc". De reden om ooit te gaan wrappen was dat de laatste chip (of de
* +-knop zelf) buiten beeld werd afgekapt — maar sinds de balk zijwaarts
* te verslepen/swipen is (zie .edivorm-archive-filters hierboven,
* overflow-x:auto) is dat probleem al op een andere manier opgelost, dus
* kan de knappere, compactere "één rij + knop"-weergave overal gelden,
* mobiel incluis.
*/
@media (max-width: 600px) {
/*
* "Titelnaam van de blog op mobiel 3px groter maken" (Blog-2 voorblad,
* de uitgelichte kaart) — bovenop de vloeiende clamp()/+3pt hierboven,
* specifiek op mobiel nog eens +3px.
*/
.edivorm-archive-card-featured .edivorm-archive-card-title {
font-size: calc(clamp(1.2em, 1.1em + 0.6vw, 1.4em) + 3pt + 3px);
}
}
/* Vastgepinde topblogs — iets prominenter dan de gewone grid. */
.edivorm-archive-featured {
display: grid;
/*
* Vloeiend raster i.p.v. een harde omslag bij één vaste breedte: past
* het aantal kolommen automatisch aan op de beschikbare ruimte (3 op
* een normaal breedbeeldscherm, 2 op de meeste tablets, 1 op mobiel),
* zonder dat daar een aparte @media-regel per tussenmaat voor nodig is.
*
* min(300px, 100%) i.p.v. kaal "300px": op een smal mobiel scherm
* (~300-360px breed, min de padding van .edivorm-archive-wrap) was de
* vaste 300px-ondergrens soms al breder dan de daadwerkelijk
* beschikbare ruimte, waardoor de laatste rij kaarten buiten het
* scherm viel i.p.v. netjes één kolom te vormen ("valt buiten mobiel
* scherm"). Met min(300px, 100%) krimpt de kolom mee zodra 300px niet
* past, in plaats van de beschikbare ruimte te negeren.
*/
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
gap: 16px;
margin-bottom: 20px;
}
.edivorm-archive-card-featured .edivorm-archive-card-image {
aspect-ratio: 16 / 10;
}
.edivorm-archive-card-featured .edivorm-archive-card-title {
/*
* "Titel op voorblad is te klein... 3 punt groter" — clamp() hierboven
* met een vaste +3pt erbovenop, zodat zowel de ondergrens (mobiel) als
* de bovengrens (breed scherm) evenredig meegroeien.
*/
font-size: calc(clamp(1.2em, 1.1em + 0.6vw, 1.4em) + 3pt);
font-weight: 700;
line-height: 1.25;
/* Vangnet: mocht een nóg langer woord ooit toch niet passen, dan breekt
het netjes af in plaats van dat het buiten de kaart uitsteekt. */
overflow-wrap: break-word;
hyphens: auto;
}
/* Gewone kaartjes-grid (compact, op verzoek "blokken kleiner maken") */
.edivorm-archive-grid {
display: grid;
/* Zelfde reden als bij .edivorm-archive-featured hierboven. */
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
gap: 14px;
margin-bottom: 28px;
}
.edivorm-archive-card {
display: block;
text-decoration: none;
color: inherit;
border: 1px solid var(--edivorm-border);
border-radius: 6px;
overflow: hidden;
background: #fff;
transition: box-shadow .15s ease, transform .15s ease;
}
.edivorm-archive-card:hover {
box-shadow: 0 4px 14px rgba(23, 50, 90, 0.12);
transform: translateY(-2px);
}
.edivorm-archive-card-image {
display: block;
aspect-ratio: 4 / 3;
overflow: hidden;
}
.edivorm-archive-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.edivorm-archive-card-body {
display: block;
padding: 10px 12px;
}
.edivorm-archive-card-title {
font-weight: 700;
color: var(--edivorm-navy);
font-size: 1em;
line-height: 1.3;
letter-spacing: -0.01em;
/* Geen leestijd, geen auteursregel hier — bewust weggelaten op verzoek. */
}
/* Overige blogs: kale lijst, dunne 1px-lijnen, geen foto — op verzoek. */
.edivorm-archive-list {
list-style: none;
margin: 0 0 32px 0;
padding: 0;
border-top: 1px solid var(--edivorm-border);
}
.edivorm-archive-list li {
border-bottom: 1px solid var(--edivorm-border);
}
.edivorm-archive-list a {
display: block;
padding: 12px 4px;
color: var(--edivorm-navy);
text-decoration: none;
font-weight: 500;
}
.edivorm-archive-list a:hover {
color: var(--edivorm-teal-dark);
}
.edivorm-archive-pagination {
display: flex;
justify-content: center;
gap: 6px;
margin: 32px 0;
}
.edivorm-archive-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 34px;
height: 34px;
padding: 0 8px;
border-radius: 4px;
border: 1px solid var(--edivorm-border);
color: var(--edivorm-navy);
text-decoration: none;
font-size: 14px;
}
.edivorm-archive-pagination .page-numbers.current {
background: var(--edivorm-navy);
color: #fff;
border-color: var(--edivorm-navy);
}
.edivorm-archive-pagination .page-numbers:hover:not(.current) {
background: var(--edivorm-bg-soft);
}
/*
* "Vervolgbladen per blog selectieitem stylen" — de categoriefilters
* bovenaan de bloglijst linken naar WordPress' eigen categorie-archief
* (get_category_link()), dat BEWUST het gewone themasjabloon blijft
* gebruiken i.p.v. ons eigen archive-blog.php (zie de toelichting
* bovenaan class-edivorm-archive.php) — dus de paginering daar viel tot
* nu toe buiten alle opmaak hierboven, die alleen binnen
* .edivorm-archive-pagination werkt. WordPress' paginate_links() gebruikt
* overal dezelfde .page-numbers-classes, dus hier dezelfde look
* hergebruikt, alleen gescoped op categorie-/tag-archieven (WordPress
* voegt daar zelf de "category"/"tag"-bodyclass aan toe) zodat dit nooit
* per ongeluk ergens anders op de site meekomt.
*/
body.category .page-numbers,
body.tag .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 34px;
height: 34px;
padding: 0 8px;
margin: 0 3px;
border-radius: 4px;
border: 1px solid var(--edivorm-border);
color: var(--edivorm-navy) !important;
text-decoration: none;
font-size: 14px;
background: #fff;
}
body.category .page-numbers.current,
body.tag .page-numbers.current {
background: var(--edivorm-navy);
color: #fff !important;
border-color: var(--edivorm-navy);
}
body.category .page-numbers:hover:not(.current),
body.tag .page-numbers:hover:not(.current) {
background: var(--edivorm-bg-soft);
}
/* De omhullende container (nav/div, class hangt van het thema af, maar
"pagination" komt het vaakst voor) — gecentreerd, geen eigen randje. */
body.category .pagination,
body.tag .pagination {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 0;
margin: 32px 0;
border: none;
height: auto;
padding: 0;
width: auto;
background: none;
}
/*
* Geen harde @media-omslagpunten meer nodig voor het aantal kolommen —
* "grid-template-columns: repeat(auto-fit, minmax(...))" hierboven regelt
* dat al vloeiend. Op zeer smalle schermen (< 320px, minmax's ondergrens)
* valt het vanzelf terug naar 1 kolom.
*/
@media (max-width: 600px) {
.edivorm-archive-wrap {
margin: 24px auto;
padding: 0 15px;
}
}