van een Text Editor-widget, dus de flex
moet een niveau lager. Zonder dit staan de vier velden onder elkaar
in plaats van als één regel. */
.mf-log .elementor-widget-container > p,
.mf-log p {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: clamp(12px, 2.2vw, 38px);
margin: 0;
}
/* 3. HET OPERATIEREGISTER
Origineel: .mf-reg a is de hele rij, met .n .t .m .go erin.
Hier: de rij is een container met een Text Editor plus een Button, want een
container-link met losse widgets erin geeft genest -gedrag. Neem de
rij-opmaak over op de container en zet de 's naast elkaar. */
.mf-reg > .e-con {
align-items: center;
justify-content: space-between;
gap: clamp(10px, 2vw, 30px);
padding-block: clamp(14px, 1.6vw, 22px);
border-top: 1px solid var(--hair);
}
.mf-reg > .e-con:last-child { border-bottom: 1px solid var(--hair); }
.mf-reg p { margin: 0; }
/* 4. DE BEWIJSCIJFERS
.mf-proof>div werkt wel — Elementor-containers zíjn directe div-kinderen —
maar de in de Text Editor krijgt browsermarges die het ritme breken. */
.mf-proof p { margin: 0; }
.mf-proof .mf-big { margin-bottom: 4px; }
/* 5. KOPPEN MET
De Heading-widget zet geen marge, maar Elementor's widget-heading.css geeft
h1..h6 een eigen line-height die de display-typografie uit mariflex.css
overschrijft. De originele waarden terugzetten. */
.elementor-widget-heading .mf-dsp,
.elementor-widget-heading .mf-dsp2,
.elementor-widget-heading .mf-dsp3 { line-height: inherit; margin: 0; }
/* 6. VERIFICATIELAAG
Notities over onbevestigde gegevens blijven in de HTML staan zodat ze in het
CMS zichtbaar zijn voor redacteuren, maar zijn onzichtbaar voor de bezoeker.
De toggle uit het prototype wordt niet meegebouwd naar productie. */
.mf-rev { display: none; }
.elementor-editor-active .mf-rev,
.elementor-editor-preview .mf-rev {
display: block;
outline: 1px dashed var(--yellow);
outline-offset: 4px;
}
/* 7. DE HASH-ROUTER UIT HET PROTOTYPE — KRITIEK
mariflex.css regel 185 bevat:
.page{display:none} .page.on{display:block}
Dat is de router van het prototype: alle .page-divs staan uit, alleen de
actieve krijgt .on. In WordPress bestaan die divs niet, MAAR WordPress zet
zelf "page" als body-class op elke pagina (body class="... page page-id-10").
Daardoor trof .page{display:none} de hele erin moet de lijsttypografie
van .mf-svc .t / .mf-cards .t erven in plaats van de kop-stijl van de kit. */
.mf-svc .t .elementor-heading-title,
.mf-cards .t .elementor-heading-title {
font: inherit; color: inherit; letter-spacing: inherit; margin: 0;
}
/* Elementor maakt een container met dynamische link niet tot . De link zit
daarom op de kop en wordt hier over de hele rij of kaart uitgerekt, zodat
het klikgebied gelijk is aan het prototype. */
.mf-svc .t a, .mf-cards .t a { color: inherit; text-decoration: none; }
.mf-svc .t a::after, .mf-cards .t a::after {
content: ""; position: absolute; inset: 0; z-index: 2;
}
/* 9. TEKSTWIDGET BINNEN EEN FLEX-CONTAINER
.mf-log{display:flex;gap:...} (regel 198) verwacht de s als directe
kinderen. Elementor zet de tekstwidget ertussen, waardoor de gap wegviel en
de regel als "03:42 UTCROTTERDAM ANCHORAGE" aan elkaar plakte. */
.mf-log > .elementor-widget-text-editor { display: contents; }
/* 10. ELEMENTOR-CONTAINERVARIABELEN VERSUS DE PROTOTYPE-LAYOUT
Elementor rendert containers als .e-con{display:var(--display);
flex-direction:var(--flex-direction);...} en zet die variabelen per element
in post-10.css. Waar mariflex.css een eigen layout bedoelt, verloor die het
omdat .mf-log (0,1,0) niet van .e-con (0,1,0) wint bij gelijke specificiteit
en de variabele-regel later komt.
.klasse.e-con haalt 0,2,0 en verslaat .e-con schoon. Dit concurreert niet met
post-10.css, want dat zet alleen de variabelen, niet de eigenschappen zelf.
.mf-log en .mf-hero__foot zijn in de PAGINADATA op flex-row gezet, niet hier,
zodat het ook in de editor correct oogt. Alleen mf-proof kan Elementor niet
als grid uitdrukken en staat daarom hieronder.
*/
.mf-proof.e-con {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
}
@media (max-width: 900px) {
.mf-proof.e-con { grid-template-columns: repeat(2, 1fr); }
}
/* 11. LAADVOLGORDE: DEZE SHIM STAAT OP PLEK 8, WIDGET-CSS OP 9 EN 10
Geverifieerd in de van de homepage:
... 7 mariflex.css | 8 mariflex-elementor.css |
9 widget-heading | 10 widget-loop-common | 11 widget-loop-grid | 12 post-10
Bij GELIJKE specificiteit wint de laatste, dus verliest deze shim structureel
van Elementors widget-stylesheets. Dat verklaarde twee gemeten problemen:
- .mf-svc .d kreeg max-width:100% i.p.v. de 36ch uit mariflex.css regel 250,
waardoor de auto-kolom naar 1078px uitdijde en de titel tot 180px kromp
- de loop-grid gap bleef 30px i.p.v. 1px, waardoor de .mf-cards achtergrond
als brede grijze banden doorscheen
Regels hier moeten daarom OP SPECIFICITEIT winnen, niet op volgorde.
Drie klassen diep (0,3,0) is genoeg tegen Elementors 0,1,0 en 0,2,0.
Gaps zijn niet hier maar in de PAGINADATA gezet (column_gap/row_gap), zodat
Elementor ze zelf uitschrijft en er niets te overschrijven valt.
*/
.mf-svc .mf-item .d {
max-width: 36ch;
justify-self: end;
text-align: right;
}
.mf-svc .mf-item .n { max-width: 70px; }
.mf-svc .mf-item .t { max-width: none; }
.mf-cards .elementor-loop-container.elementor-grid {
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) {
.mf-cards .elementor-loop-container.elementor-grid { grid-template-columns: 1fr; }
.mf-svc .mf-item .d { display: none; }
}
/* 12. HET KLIKGEBIED DEKTE ALLEEN DE TITEL
Geverifieerd in elementor/assets/css/frontend.min.css:
.elementor-widget { position: relative }
Daardoor was de kop-widget zelf het containing block voor de ::after-overlay
uit blok 8, en dekte inset:0 alleen de kop in plaats van de hele rij of kaart.
Zichtbaar als een lichter hovervlak rond uitsluitend de titel, en als een
klikgebied dat veel kleiner was dan bedoeld.
position:static op de kop haalt hem als containing block weg, waarna de
overlay terugvalt op .mf-item (die position:relative heeft uit blok 8).
Drie klassen diep verslaat .elementor-widget op 0,1,0 ongeacht laadvolgorde.
*/
.mf-svc .mf-item .t,
.mf-cards .mf-item .t {
position: static;
}
/* 13. ELEMENTOR VERDUBBELT KLASSEN OM SPECIFICITEIT TE WINNEN
Gemeten in frontend.min.css (stylesheet 4 van 13):
.e-con.e-con > .e-con-inner > .elementor-widget, ... { max-width: 100% }
Die verdubbelde .e-con.e-con is opzet: Elementor tilt zijn eigen regel boven
normale drie-klassen-selectors. Daarom verloor blok 11 met .mf-svc .mf-item .d
(0,3,0) alsnog, ondanks dat die later wordt geladen.
Gemeten gevolg: .mf-svc .d hield max-width:100%, de auto-kolom dijde uit naar
1078px en de 1fr-titelkolom kromp tot 180px, waardoor titels per woord
afbraken. Zie mariflex.css regel 250 voor de bedoelde 36ch.
Hieronder .mf-item.e-con erbij: vier klassen, wint ongeacht laadvolgorde.
Vuistregel voor deze shim: bij conflicten met Elementor MINIMAAL vier klassen,
of het via de paginadata regelen zoals bij de gaps.
*/
.mf-svc .mf-item.e-con > .d {
max-width: 36ch;
justify-self: end;
text-align: right;
}
.mf-svc .mf-item.e-con > .n { max-width: 70px; }
.mf-svc .mf-item.e-con > .t { max-width: none; }
@media (max-width: 900px) {
.mf-svc .mf-item.e-con > .d { display: none; }
}
/* 14. DE PROTOTYPE-CSS STYLEERT DE ALS DE KAART ZELF — KERNCONFLICT
Gemeten op de live kaart:
link .t a 175x87 bg = rgb(22, 23, 58)
De had een eigen achtergrond en padding, terwijl de tekst maar 27px hoog is.
Oorzaak, mariflex.css regel 243 en 255:
.mf-svc a { display:grid; grid-template-columns:70px 1fr auto;
padding:...; border-bottom:1px solid var(--hair); }
.mf-cards a { background:var(--bg); padding:clamp(20px,2.4vw,34px); }
In het prototype WAS de de rij of de kaart. In deze bouw is de de
kop-link BINNEN .mf-item, en erfde die dus de volledige kaartopmaak: een kaart
in een kaart, met een eigen hovervlak dat los van het grote vlak reageerde.
Hieronder wordt de terug tot gewone inline-link gemaakt. De kaartopmaak
zelf staat op .mf-item (blok 8), de klik-overlay op a::after blijft intact.
Vier klassen plus een element verslaat .mf-cards a (0,2,0) ruim.
*/
.mf-svc .mf-item.e-con .t a,
.mf-cards .mf-item.e-con .t a {
display: inline;
background: none;
padding: 0;
border: 0;
grid-template-columns: none;
transition: none;
}
.mf-svc .mf-item.e-con .t a:hover,
.mf-cards .mf-item.e-con .t a:hover {
background: none;
padding: 0;
}
/* de blauwe rail hoort bij .mf-item, niet bij de link (blok 8 regelt hem daar) */
.mf-svc .mf-item.e-con .t a::before,
.mf-cards .mf-item.e-con .t a::before {
content: none;
}