/* Houd ruimte voor de scrollbar in moderne browsers */
html {
scrollbar-gutter: stable both-edges;
max-width: 100%;
overflow-x: hidden;
overflow-x: clip;
}
:root{
/* Centrale paletten */
--pal-light-1: #f8f6f1;
--pal-light-2: #f2ede4;
--pal-light-3: #e6ddd0;
--pal-light-4: #d2c6b4;
--pal-light-5: #b8ab97;
--pal-light-accent-1: #b4a78f;
--pal-light-accent-2: #a6977d;
--pal-dark-1: #141517;
--pal-dark-2: #1d1e20;
--pal-dark-3: #262729;
--pal-dark-4: #2f3033;
--pal-dark-5: #3a3b3f;
--pal-dark-accent-1: #bcae95;
--pal-dark-accent-2: #a7977e;
--pal-white: #fcfaf4;
--bg: var(--pal-light-1);
--bg-blob1: color-mix(in srgb, #ddd3c3 34%, transparent);
--bg-blob2: color-mix(in srgb, #cec1ac 28%, transparent);
--bg-blob3: color-mix(in srgb, #e8e0d2 30%, transparent);
--bg-blob4: color-mix(in srgb, #d6ccbc 26%, transparent);
}
/* Als je body-lock gebruikt (jullie .overflow), compenseer de verdwenen scrollbar */
body.overflow { padding-right: var(--sbw, 0px); }
html.mm-scroll-lock,
html:has(body.overflow){
overflow: hidden;
height: 100%;
overscroll-behavior: none;
}
:root{
/* Durations */
--dur-1: 120ms;
--dur-2: 180ms;
--dur-3: 260ms;
/* Easings (kies 1 “standaard” en 1 “snappy”) */
--ease-standard: cubic-bezier(.2,.8,.2,1);
--ease-snappy: cubic-bezier(.2,1,.2,1);
/* Focus ring */
--focus-ring: 0 0 0 3px rgba(92,80,64,.22);
/* Centrale button-kleuren */
--btn-bg: #fffdf9;
--btn-text: var(--pal-dark-3);
--btn-hover-bg: #f7f2e9;
--btn-hover-text: var(--pal-dark-3);
--btn-primary-bg: var(--pal-light-accent-1);
--btn-primary-bg-hover: var(--pal-light-accent-2);
--btn-primary-bg-active: color-mix(in srgb, var(--pal-light-accent-1) 76%, #000 24%);
--btn-primary-text: var(--pal-white);
}
/* =====================================================
FINAL DARK MATCH — filter categories volgen lichte referentie
(raakt light theme niet)
===================================================== */
html[data-theme="dark"] #zoeken3[data-mm-mode="filter"] #footer3-filter .mmx-filters,
html[data-theme="dark"] #zoeken3[data-mm-mode="filter"] #footer3-filter .mmx-stack,
html[data-theme="dark"] #zoeken3[data-mm-mode="filter"] #footer3-filter .mmx-card,
html[data-theme="dark"] #zoeken3[data-mm-mode="filter"] #footer3-filter .mmx-acc{
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
html[data-theme="dark"] #zoeken3[data-mm-mode="filter"] #footer3-filter .mmx-acc-sum{
border: 1px solid var(--mmx-field-brd) !important;
border-radius: var(--mmx-ri) !important;
box-shadow: none !important;
background: rgba(29,30,32,.90) !important;
}
html[data-theme="dark"] #zoeken3[data-mm-mode="filter"] #footer3-filter .mmx-acc[open] > .mmx-acc-sum{
border-bottom-color: var(--mmx-field-brd) !important;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
html[data-theme="dark"] #zoeken3[data-mm-mode="filter"] #footer3-filter .mmx-acc-body{
border: 1px solid var(--mmx-field-brd) !important;
border-top: 1px solid var(--mmx-field-brd) !important;
border-bottom-left-radius: var(--mmx-ri) !important;
border-bottom-right-radius: var(--mmx-ri) !important;
box-shadow: none !important;
background: transparent !important;
}
@media (prefers-color-scheme: dark){
html:not([data-theme]) #zoeken3[data-mm-mode="filter"] #footer3-filter .mmx-filters,
html:not([data-theme]) #zoeken3[data-mm-mode="filter"] #footer3-filter .mmx-stack,
html:not([data-theme]) #zoeken3[data-mm-mode="filter"] #footer3-filter .mmx-card,
html:not([data-theme]) #zoeken3[data-mm-mode="filter"] #footer3-filter .mmx-acc,
html[data-theme="auto"] #zoeken3[data-mm-mode="filter"] #footer3-filter .mmx-filters,
html[data-theme="auto"] #zoeken3[data-mm-mode="filter"] #footer3-filter .mmx-stack,
html[data-theme="auto"] #zoeken3[data-mm-mode="filter"] #footer3-filter .mmx-card,
html[data-theme="auto"] #zoeken3[data-mm-mode="filter"] #footer3-filter .mmx-acc{
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
html:not([data-theme]) #zoeken3[data-mm-mode="filter"] #footer3-filter .mmx-acc-sum,
html[data-theme="auto"] #zoeken3[data-mm-mode="filter"] #footer3-filter .mmx-acc-sum{
border: 1px solid var(--mmx-field-brd) !important;
border-radius: var(--mmx-ri) !important;
box-shadow: none !important;
background: rgba(29,30,32,.90) !important;
}
html:not([data-theme]) #zoeken3[data-mm-mode="filter"] #footer3-filter .mmx-acc[open] > .mmx-acc-sum,
html[data-theme="auto"] #zoeken3[data-mm-mode="filter"] #footer3-filter .mmx-acc[open] > .mmx-acc-sum{
border-bottom-color: var(--mmx-field-brd) !important;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
html:not([data-theme]) #zoeken3[data-mm-mode="filter"] #footer3-filter .mmx-acc-body,
html[data-theme="auto"] #zoeken3[data-mm-mode="filter"] #footer3-filter .mmx-acc-body{
border: 1px solid var(--mmx-field-brd) !important;
border-top: 1px solid var(--mmx-field-brd) !important;
border-bottom-left-radius: var(--mmx-ri) !important;
border-bottom-right-radius: var(--mmx-ri) !important;
box-shadow: none !important;
background: transparent !important;
}
}
/* Als je met data-theme werkt: ring per theme */
html[data-theme="light"]{ --focus-ring: 0 0 0 3px rgba(0,0,0,.18); }
html[data-theme="dark"] {
--focus-ring: 0 0 0 3px rgba(255,255,255,.22);
--btn-bg: color-mix(in srgb, var(--pal-dark-3) 84%, transparent);
--btn-text: #f7f3e8;
--btn-hover-bg: color-mix(in srgb, var(--pal-dark-4) 92%, transparent);
--btn-hover-text: #f4efe6;
--btn-primary-bg: var(--pal-dark-accent-1);
--btn-primary-bg-hover: var(--pal-dark-accent-2);
--btn-primary-bg-active: color-mix(in srgb, var(--pal-dark-accent-1) 72%, #2a241b 28%);
--btn-primary-text: #2b241a;
}
/* 1) Basis: alleen tonen bij toetsenbord-focus */
:where(a, button, input, select, textarea, summary, [tabindex]):focus{
outline: none; /* oké zolang focus-visible wél iets laat zien */
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{
box-shadow: var(--focus-ring);
border-radius: 12px; /* of var(--radius-inner) als je die overal wil */
}
/* Menu-open controls: geen ovale focus-ring / tap-highlight */
.burger,
.burger-topmenu,
.burger *,
.burger-topmenu *{
-webkit-tap-highlight-color: transparent;
}
.burger:focus,
.burger:focus-visible,
.burger-topmenu:focus,
.burger-topmenu:focus-visible{
outline: none !important;
box-shadow: none !important;
}
.burger:active,
.burger-topmenu:active{
outline: none !important;
box-shadow: none !important;
}
/* 2) Specifiek: knoppen die nu outline killen → netjes maken */
.profile-btn:focus-visible,
.logout-btn:focus-visible{
box-shadow: var(--focus-ring);
}
/* 3) Inputs: jij hebt outline:0; → geef focus terug */
.mmx-field:focus-within{
box-shadow: var(--focus-ring);
}
:root {
--blockquote-content-dark: url("data:image/svg+xml,");
--radius: 2em;
--radius-inner: 1.5em;
--color-yellow: var(--pal-light-accent-1);
--color-mm-grey: var(--pal-dark-3);
--color-menu-glass-trans: color-mix(in srgb, var(--pal-white) 68%, transparent);
--color-menu-glass: color-mix(in srgb, var(--pal-white) 58%, transparent);
--color-menu-glass-intro: color-mix(in srgb, var(--pal-white) 64%, transparent);
--color-menu-glass-full: color-mix(in srgb, var(--pal-white) 94%, transparent);
--color-full: color-mix(in srgb, var(--pal-dark-3) 18%, transparent);
--color-download-item: var(--pal-white);
--color-download-size: color-mix(in srgb, var(--pal-dark-3) 72%, transparent);
--color-full2: color-mix(in srgb, var(--pal-dark-3) 16%, transparent);
--color-scrollbar: color-mix(in srgb, var(--pal-dark-3) 38%, transparent);
--color-text: var(--pal-dark-3);
--color-text2: #f3eee4;
--logo-image-top: url("../../images/logo-black-top.svg");
--logo-image-intro: url("../../images/logo-markmooibroekfotografie-dark.svg");
--color-content: var(--pal-light-2);
--color-content-gallery: var(--pal-light-1);
--color-content-footer: color-mix(in srgb, var(--pal-light-2) 72%, var(--pal-light-1) 28%);
--mm-bg: color-mix(in srgb, var(--pal-white) 72%, transparent);
--mm-brd: color-mix(in srgb, var(--pal-dark-3) 12%, transparent);
--mm-bg-hover: color-mix(in srgb, var(--pal-white) 92%, transparent);
--color-panel: color-mix(in srgb, var(--pal-light-2) 66%, #d7d9dc 34%);
--color-overlay-blog: color-mix(in srgb, var(--pal-dark-3) 14%, transparent);
--intro-photo-veil: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.16));
--color-auteur: color-mix(in srgb, var(--pal-white) 78%, transparent);
--color-footer-button: color-mix(in srgb, var(--pal-dark-3) 8%, transparent);
--color-footer-button2: color-mix(in srgb, var(--pal-dark-3) 14%, transparent);
--color-caption: var(--pal-dark-3);
--color-catline: color-mix(in srgb, var(--pal-dark-3) 68%, transparent);
--color-gal-status: color-mix(in srgb, var(--pal-light-accent-2) 24%, transparent);
--color-scroll-box-shadow: color-mix(in srgb, var(--pal-dark-3) 12%, transparent);
--color-scroll-finger-box-shadow: color-mix(in srgb, var(--pal-light-accent-1) 42%, transparent);
--color-leestijd: color-mix(in srgb, var(--pal-dark-3) 66%, transparent);
--color-reactie-tekst: color-mix(in srgb, var(--pal-dark-3) 80%, transparent);
--color-reactie-tekst-p: color-mix(in srgb, var(--pal-dark-3) 90%, transparent);
--color-menu-border: color-mix(in srgb, var(--pal-dark-3) 12%, transparent);
--color-bg-theme: color-mix(in srgb, var(--pal-white) 74%, transparent);
--color-link: color-mix(in srgb, var(--pal-dark-3) 66%, transparent);
--color-footer-skyline-bottom: #d7d1c4;
--logo-intro-box-bg: color-mix(in srgb, var(--pal-white) 58%, transparent);
--logo-intro-box-border: color-mix(in srgb, var(--pal-dark-3) 14%, transparent);
--logo-intro-box-shadow: none;
--logo-intro-divider: color-mix(in srgb, var(--pal-dark-3) 30%, transparent);
--logo-intro-text: var(--pal-dark-3);
--logo-intro-bounce-glow: drop-shadow(0 10px 22px color-mix(in srgb, var(--pal-light-accent-1) 32%, transparent));
--nav-accent: #c8bca6;
--nav-accent-soft: color-mix(in srgb, #c8bca6 64%, transparent);
}
html[data-theme="dark"]{
--blockquote-content-dark: url("data:image/svg+xml,");
--color-menu-glass-trans: color-mix(in srgb, var(--pal-dark-2) 64%, transparent);
--color-menu-glass: color-mix(in srgb, var(--pal-dark-2) 58%, transparent);
--color-menu-glass-intro: color-mix(in srgb, var(--pal-dark-2) 54%, transparent);
--color-menu-glass-full: color-mix(in srgb, var(--pal-dark-1) 86%, transparent);
--color-full: color-mix(in srgb, var(--pal-white) 50%, transparent);
--color-download-item: var(--pal-dark-2);
--color-download-size: #fff;
--color-full2: var(--pal-dark-1);
--color-scrollbar: var(--pal-dark-1);
--color-text: #fff;
--color-text2: #e8decc;
--logo-image-top: url("../../images/logo-black-top-dark.svg");
--logo-image-intro: url("../../images/logo-markmooibroekfotografie.svg");
--color-content: var(--pal-dark-2);
--color-content-gallery: var(--pal-dark-1);
--color-content-footer: color-mix(in srgb, var(--pal-dark-2) 72%, var(--pal-dark-1) 28%);
--mm-bg: color-mix(in srgb, var(--pal-dark-3) 44%, transparent);
--mm-brd: color-mix(in srgb, var(--pal-dark-accent-1) 32%, transparent);
--mm-bg-hover: color-mix(in srgb, var(--pal-dark-4) 70%, transparent);
--color-panel: color-mix(in srgb, var(--pal-dark-2) 88%, var(--pal-white) 12%);
--color-overlay-blog: color-mix(in srgb, var(--pal-dark-1) 64%, transparent);
--intro-photo-veil: var(--color-overlay-blog);
--color-auteur: color-mix(in srgb, #efe3cf 16%, transparent);
--color-footer-button: color-mix(in srgb, var(--pal-dark-accent-1) 18%, transparent);
--color-footer-button2: color-mix(in srgb, var(--pal-dark-1) 62%, transparent);
--color-caption: #d6ccb8;
--color-catline: #ffffffb2;
--color-gal-status: color-mix(in srgb, var(--pal-dark-accent-2) 34%, transparent);
--color-scroll-box-shadow: color-mix(in srgb, var(--pal-dark-3) 28%, transparent);
--color-scroll-finger-box-shadow: color-mix(in srgb, var(--pal-dark-accent-1) 56%, transparent);
--color-leestijd: #ffffffb8;
--color-reactie-tekst: #ffffffb9;
--color-reactie-tekst-p: #ece3d2;
--color-menu-border: rgba(247,243,232,.22);
--color-bg-theme: color-mix(in srgb, var(--pal-white) 70%, transparent);
--color-link: #e5ddcb;
--color-footer-skyline-bottom: #000;
--logo-intro-box-bg: color-mix(in srgb, var(--pal-dark-2) 74%, transparent);
--logo-intro-box-border: color-mix(in srgb, var(--pal-dark-accent-1) 30%, transparent);
--logo-intro-box-shadow: 0 12px 28px color-mix(in srgb, var(--pal-dark-1) 66%, transparent);
--logo-intro-divider: color-mix(in srgb, #dccfb8 48%, transparent);
--logo-intro-text: #ece3d2;
--logo-intro-bounce-glow: drop-shadow(0 12px 26px color-mix(in srgb, var(--pal-dark-accent-1) 44%, transparent));
--nav-accent: #e8dfcc;
--nav-accent-soft: color-mix(in srgb, #e8dfcc 76%, transparent);
}
/* Zorg dat dark theme ook werkt zonder JS-theme toggle (op basis van OS voorkeur). */
@media (prefers-color-scheme: dark){
html:not([data-theme]),
html[data-theme="auto"]{
--btn-bg: color-mix(in srgb, var(--pal-dark-3) 84%, transparent);
--btn-text: #f7f3e8;
--btn-hover-bg: color-mix(in srgb, var(--pal-dark-4) 92%, transparent);
--btn-hover-text: #f4efe6;
--btn-primary-bg: var(--pal-dark-accent-1);
--btn-primary-bg-hover: var(--pal-dark-accent-2);
--btn-primary-bg-active: color-mix(in srgb, var(--pal-dark-accent-1) 72%, #2a241b 28%);
--btn-primary-text: #2b241a;
--blockquote-content-dark: url("data:image/svg+xml,");
--color-menu-glass-trans: color-mix(in srgb, var(--pal-dark-2) 64%, transparent);
--color-menu-glass: color-mix(in srgb, var(--pal-dark-2) 78%, transparent);
--color-menu-glass-full: color-mix(in srgb, var(--pal-dark-1) 86%, transparent);
--color-full: color-mix(in srgb, var(--pal-white) 50%, transparent);
--color-download-item: var(--pal-dark-2);
--color-download-size:#fff;
--color-full2: var(--pal-dark-1);
--color-scrollbar: var(--pal-dark-1);
--color-text: #fff;
--color-text2: #e8decc;
--logo-image-top: url("../../images/logo-black-top-dark.svg");
--logo-image-intro: url("../../images/logo-markmooibroekfotografie.svg");
--color-content: var(--pal-dark-2);
--color-content-gallery: var(--pal-dark-1);
--color-content-footer: color-mix(in srgb, var(--pal-dark-2) 72%, var(--pal-dark-1) 28%);
--mm-bg: color-mix(in srgb, var(--pal-dark-3) 44%, transparent);
--mm-brd: color-mix(in srgb, var(--pal-dark-accent-1) 32%, transparent);
--mm-bg-hover: color-mix(in srgb, var(--pal-dark-4) 70%, transparent);
--color-panel: color-mix(in srgb, var(--pal-dark-2) 88%, var(--pal-white) 12%);
--color-overlay-blog: color-mix(in srgb, var(--pal-dark-1) 64%, transparent);
--intro-photo-veil: var(--color-overlay-blog);
--color-auteur: color-mix(in srgb, #efe3cf 16%, transparent);
--color-footer-button: color-mix(in srgb, var(--pal-dark-accent-1) 18%, transparent);
--color-footer-button2: color-mix(in srgb, var(--pal-dark-1) 62%, transparent);
--color-caption: #d6ccb8;
--color-catline: #ffffffb2;
--color-gal-status: color-mix(in srgb, var(--pal-dark-accent-2) 36%, transparent);
--color-scroll-box-shadow: color-mix(in srgb, var(--pal-dark-3) 28%, transparent);
--color-scroll-finger-box-shadow: color-mix(in srgb, var(--pal-dark-accent-1) 56%, transparent);
--color-leestijd: #ffffffb8;
--color-reactie-tekst: #ffffffb9;
--color-reactie-tekst-p: #ece3d2;
--color-menu-border: rgba(247,243,232,.22);
--color-bg-theme: color-mix(in srgb, var(--pal-white) 70%, transparent);
--color-link: #e5ddcb;
--color-footer-skyline-bottom: #000;
--logo-intro-box-bg: color-mix(in srgb, var(--pal-dark-2) 74%, transparent);
--logo-intro-box-border: color-mix(in srgb, var(--pal-dark-accent-1) 30%, transparent);
--logo-intro-box-shadow: 0 12px 28px color-mix(in srgb, var(--pal-dark-1) 66%, transparent);
--logo-intro-divider: color-mix(in srgb, #dccfb8 48%, transparent);
--logo-intro-text: #ece3d2;
--logo-intro-bounce-glow: drop-shadow(0 12px 26px color-mix(in srgb, var(--pal-dark-accent-1) 44%, transparent));
--nav-accent: #e8dfcc;
--nav-accent-soft: color-mix(in srgb, #e8dfcc 76%, transparent);
}
}
/* Donker thema basisachtergrond in stijl van het klantportaal */
html[data-theme="dark"] body{
background:
radial-gradient(80vw 80vw at -10% -15%, color-mix(in srgb, var(--pal-dark-accent-1) 26%, transparent), transparent 52%),
radial-gradient(75vw 75vw at 110% 115%, color-mix(in srgb, var(--pal-dark-accent-2) 18%, transparent), transparent 50%),
linear-gradient(165deg, #141517, #1d1e20) fixed;
background-color:#141517;
}
@media (prefers-color-scheme: dark){
html:not([data-theme]) body,
html[data-theme="auto"] body{
background:
radial-gradient(80vw 80vw at -10% -15%, color-mix(in srgb, var(--pal-dark-accent-1) 26%, transparent), transparent 52%),
radial-gradient(75vw 75vw at 110% 115%, color-mix(in srgb, var(--pal-dark-accent-2) 18%, transparent), transparent 50%),
linear-gradient(165deg, #141517, #1d1e20) fixed;
background-color:#141517;
}
}
/* Houd bestaande bg-foto subtiel in dark, zodat gradient leidend blijft */
html[data-theme="dark"] .background-image-layer{
opacity:.22;
filter:saturate(.72) brightness(.62);
}
@media (prefers-color-scheme: dark){
html:not([data-theme]) .background-image-layer,
html[data-theme="auto"] .background-image-layer{
opacity:.22;
filter:saturate(.72) brightness(.62);
}
}
/* Leesbare controls in dark mode (form fields/buttons). */
html[data-theme="dark"]{
color-scheme: dark;
}
@media (prefers-color-scheme: dark){
html:not([data-theme]),
html[data-theme="auto"]{
color-scheme: dark;
}
}
html[data-theme="dark"] :where(input, select, textarea){
background-color: rgba(22,22,24,.86);
color: #f1ece2;
border-color: rgba(255,255,255,.16);
}
@media (prefers-color-scheme: dark){
html:not([data-theme]) :where(input, select, textarea),
html[data-theme="auto"] :where(input, select, textarea){
background-color: rgba(22,22,24,.86);
color: #f1ece2;
border-color: rgba(255,255,255,.16);
}
}
/* =========================================
BLOG + ARCHIEF ALS 1 GEHEEL (LIGHT/DARK)
========================================= */
:root{
--blog-band-bg:
radial-gradient(1280px 720px at 10% 4%, color-mix(in srgb, var(--pal-light-accent-1) 28%, transparent), transparent 64%),
radial-gradient(980px 620px at 88% 16%, color-mix(in srgb, var(--pal-light-accent-2) 22%, transparent), transparent 68%),
linear-gradient(132deg, #f1ece4 0%, #e4ddd1 44%, #d6ccb9 100%);
--blog-band-overlay: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.18));
--blog-band-text: #3a3227;
}
#content-blog-unified{
position: relative;
background: var(--blog-band-bg);
background-repeat: no-repeat;
background-size: cover;
background-position: center top;
background-attachment: fixed;
}
#content-blog-unified::before{
content: "";
position: absolute;
inset: 0;
background: var(--blog-band-overlay);
pointer-events: none;
}
#content-blog-unified > *{
position: relative;
z-index: 1;
}
html:not([data-theme]) #content-blog-unified,
html[data-theme="light"] #content-blog-unified{
color: var(--blog-band-text);
}
#content-blog,
#content-blog-archief{
background: transparent !important;
}
/* Compactere overgang tussen blog en archief binnen de unified band */
#content-blog-unified #content-blog > #content_text.footer_blog{
padding-bottom: .6rem;
}
#content-blog-unified #content-blog-archief > #content_text.footer_blog{
padding-top: .6rem;
}
html:not([data-theme]) #content-blog > #content_text.footer_blog > h1,
html[data-theme="light"] #content-blog > #content_text.footer_blog > h1,
html:not([data-theme]) #content-blog > #content_text.footer_blog > p,
html[data-theme="light"] #content-blog > #content_text.footer_blog > p{
color: var(--blog-band-text) !important;
}
/* Swiper blog-items moeten wit blijven */
#content-blog .mmx-card .mmx-title,
#content-blog .mmx-card .mmx-intro,
#content-blog .mmx-card .mmx-author-name,
#content-blog .mmx-card .mmx-btn{
color: #f7f3e8 !important;
}
html:not([data-theme]) #mm-blog-archive.mm-archive,
html[data-theme="light"] #mm-blog-archive.mm-archive{
--mma-bg: rgba(38,39,41,.08);
--mma-bg-soft: rgba(38,39,41,.06);
--mma-stroke: rgba(38,39,41,.24);
--mma-text: rgba(38,39,41,.96);
--mma-muted: rgba(38,39,41,.74);
}
html[data-theme="dark"]{
--blog-band-bg:
radial-gradient(1220px 700px at 14% 8%, color-mix(in srgb, var(--pal-dark-accent-1) 34%, transparent), transparent 66%),
radial-gradient(980px 620px at 88% 16%, color-mix(in srgb, var(--pal-dark-accent-2) 26%, transparent), transparent 70%),
linear-gradient(138deg, #1b1c1f 0%, #17181b 42%, #141517 100%);
--blog-band-overlay: linear-gradient(180deg, rgba(8,9,10,.16), rgba(8,9,10,.30));
--blog-band-text: rgba(247,243,232,.95);
}
@media (prefers-color-scheme: dark){
html:not([data-theme]),
html[data-theme="auto"]{
--blog-band-bg:
radial-gradient(1220px 700px at 14% 8%, color-mix(in srgb, var(--pal-dark-accent-1) 34%, transparent), transparent 66%),
radial-gradient(980px 620px at 88% 16%, color-mix(in srgb, var(--pal-dark-accent-2) 26%, transparent), transparent 70%),
linear-gradient(138deg, #1b1c1f 0%, #17181b 42%, #141517 100%);
--blog-band-overlay: linear-gradient(180deg, rgba(8,9,10,.16), rgba(8,9,10,.30));
--blog-band-text: rgba(247,243,232,.95);
}
}
#content-kaart{
background-color: var(--color-menu-glass);}
#content-kaart section, #conten-kaart section h1{
color: #212121 !important;
}
#content-kaart { scroll-margin-top: var(--sticky-top, 80px); }
#content-kaart > #content_text.footer_blog{
padding-bottom: 0;
}
/* Navigatie donkergrijs in dark theme */
html[data-theme="dark"] .menu-home,
html[data-theme="dark"] .menu-main,
html[data-theme="dark"] .menu-blog,
html[data-theme="dark"] .menu-downloads{
background-color: rgba(29,30,32,.92);
color: #f7f3e8;
border: 1px solid rgba(204,196,182,.24);
}
html[data-theme="dark"] .menu-home .label,
html[data-theme="dark"] .menu-main .label,
html[data-theme="dark"] .menu-blog .label,
html[data-theme="dark"] .menu-downloads .label,
html[data-theme="dark"] .menu-home i,
html[data-theme="dark"] .menu-main i,
html[data-theme="dark"] .menu-blog i,
html[data-theme="dark"] .menu-downloads i{
color:#f7f3e8;
}
html[data-theme="dark"] .inline-list a:hover{
background-color: rgba(47,48,51,.92);
color:#f7f3e8;
}
html[data-theme="dark"] nav{
background: linear-gradient(165deg, var(--pal-dark-2), var(--pal-dark-1));
border-left: 1px solid rgba(204,196,182,.18);
}
html[data-theme="dark"] nav ul.main li a,
html[data-theme="dark"] nav ul.main li a b,
html[data-theme="dark"] nav li i{
color:#f7f3e8 !important;
}
html[data-theme="dark"] nav ul.main li a:hover,
html[data-theme="dark"] nav ul.main li a:hover b,
html[data-theme="dark"] nav a:hover{
color: #f7f3e8 !important;
}
html[data-theme="dark"] .hr-menu{
border-bottom-color: rgba(204,196,182,.22);
}
@media (prefers-color-scheme: dark){
html:not([data-theme]) .menu-home,
html:not([data-theme]) .menu-main,
html:not([data-theme]) .menu-blog,
html:not([data-theme]) .menu-downloads,
html[data-theme="auto"] .menu-home,
html[data-theme="auto"] .menu-main,
html[data-theme="auto"] .menu-blog,
html[data-theme="auto"] .menu-downloads{
background-color: rgba(29,30,32,.92);
color: #f7f3e8;
border: 1px solid rgba(204,196,182,.24);
}
html:not([data-theme]) .menu-home .label,
html:not([data-theme]) .menu-main .label,
html:not([data-theme]) .menu-blog .label,
html:not([data-theme]) .menu-downloads .label,
html:not([data-theme]) .menu-home i,
html:not([data-theme]) .menu-main i,
html:not([data-theme]) .menu-blog i,
html:not([data-theme]) .menu-downloads i,
html[data-theme="auto"] .menu-home .label,
html[data-theme="auto"] .menu-main .label,
html[data-theme="auto"] .menu-blog .label,
html[data-theme="auto"] .menu-downloads .label,
html[data-theme="auto"] .menu-home i,
html[data-theme="auto"] .menu-main i,
html[data-theme="auto"] .menu-blog i,
html[data-theme="auto"] .menu-downloads i{
color:#f7f3e8;
}
html:not([data-theme]) .inline-list a:hover,
html[data-theme="auto"] .inline-list a:hover{
background-color: rgba(47,48,51,.92);
color:#f7f3e8;
}
html:not([data-theme]) nav,
html[data-theme="auto"] nav{
background: linear-gradient(165deg, var(--pal-dark-2), var(--pal-dark-1));
border-left: 1px solid rgba(204,196,182,.18);
}
html:not([data-theme]) nav ul.main li a,
html:not([data-theme]) nav ul.main li a b,
html:not([data-theme]) nav li i,
html[data-theme="auto"] nav ul.main li a,
html[data-theme="auto"] nav ul.main li a b,
html[data-theme="auto"] nav li i{
color:#f7f3e8 !important;
}
html:not([data-theme]) nav ul.main li a:hover,
html:not([data-theme]) nav ul.main li a:hover b,
html:not([data-theme]) nav a:hover,
html[data-theme="auto"] nav ul.main li a:hover,
html[data-theme="auto"] nav ul.main li a:hover b,
html[data-theme="auto"] nav a:hover{
color: #f7f3e8 !important;
}
html:not([data-theme]) .hr-menu,
html[data-theme="auto"] .hr-menu{
border-bottom-color: rgba(204,196,182,.22);
}
}
.mm-logo-top {
display: inline-block;
position: absolute;
width: 150px;
height: 45px;
background: var(--logo-image-top) no-repeat center/contain;
top: -24px;
left: -40px;
}
.mm-logo-footer {
display: inline-block;
width: 125px;
height: 125px;
object-fit: contain;
}
.mm-logo-intro {
display: inline-block;
width: 10em;
height: 8rem;
background: var(--logo-image-intro) no-repeat center/contain;
}
@media (max-width: 700px){
.mm-logo-intro {
width: 8em;
height: 5rem;
}
}
/* ===========================
MMK Logo (uniek / no-clash)
- box start écht in het midden
- sluit weer bij scroll
- mobiel: zelfde animatie-idee maar verticaal
- mobiel divider: LIGGEND (horizontaal)
=========================== */
/* HERO H1 GRID STRUCTUUR */
.mmk-hero-title{
display: grid;
gap: 1.2rem;
justify-items: center;
text-align: center;
margin: 0;
}
.mmk-logo{
position: relative;
display: grid;
justify-items: center;
align-content: center;
row-gap: .45rem;
width: min(88vw, 34rem);
margin: 0 auto;
--mmk-logo-mark-width: min(54vw, 15rem);
--mmk-logo-text-width: min(87vw, 24rem);
--mmk-logo-accent: rgba(255, 255, 255, 0.92);
--mmk-logo-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
--mmk-logo-mark-state-transform: translate3d(0, 1.8rem, 0) scale(.72);
--mmk-logo-mark-state-opacity: 0;
--mmk-logo-text-state-transform: translate3d(0, 1.4rem, 0) scale(.96);
--mmk-logo-text-state-opacity: 0;
--mmk-logo-transition: 760ms cubic-bezier(.2, 1, .22, 1);
--mmk-logo-transition-delayed: 920ms cubic-bezier(.2, 1, .22, 1);
}
.mmk-logo[data-logo-tone="light"]{
--mmk-logo-accent: rgba(12, 12, 12, 0.9);
--mmk-logo-shadow: 0 16px 44px rgba(255, 255, 255, 0.18);
}
.mmk-logo__mark-wrap,
.mmk-logo__text-wrap{
position: relative;
display: grid;
place-items: center;
}
.mmk-logo__mark-wrap{
width: var(--mmk-logo-mark-width);
min-height: calc(var(--mmk-logo-mark-width) * 0.8);
transform: var(--mmk-logo-mark-state-transform);
transform-origin: center center;
opacity: var(--mmk-logo-mark-state-opacity);
filter: drop-shadow(var(--mmk-logo-shadow));
transition:
transform var(--mmk-logo-transition),
opacity 420ms ease,
filter 420ms ease;
}
.mmk-logo__mark{
width: 100%;
height: auto;
display: block;
}
.mmk-logo__text-wrap{
width: var(--mmk-logo-text-width);
transform: var(--mmk-logo-text-state-transform);
transform-origin: center center;
opacity: var(--mmk-logo-text-state-opacity);
filter: drop-shadow(var(--mmk-logo-shadow));
transition:
transform var(--mmk-logo-transition-delayed),
opacity 520ms ease,
filter 420ms ease;
}
.mmk-logo__text-image{
width: 100%;
height: auto;
display: block;
}
.mmk-logo__asset{
grid-area: 1 / 1;
transition: opacity 320ms ease;
}
.mmk-logo__asset--black{
opacity: 0;
}
.mmk-logo__asset--white{
opacity: 1;
}
.mmk-logo[data-logo-tone="light"] .mmk-logo__asset--black{
opacity: 1;
}
.mmk-logo[data-logo-tone="light"] .mmk-logo__asset--white{
opacity: 0;
}
.mmk-logo--intro-fixed .mmk-logo__mark,
.mmk-logo--intro-fixed .mmk-logo__text-image{
filter: none;
}
.mmk-logo.mmk-logo--ready:not(.mmk-logo--closed){
--mmk-logo-mark-state-transform: translate3d(0, 0, 0) scale(1);
--mmk-logo-mark-state-opacity: 1;
--mmk-logo-text-state-transform: translate3d(0, 0, 0) scale(1);
--mmk-logo-text-state-opacity: 1;
}
.mmk-logo.mmk-logo--closed{
--mmk-logo-mark-state-transform: translate3d(0, -1rem, 0) scale(.5);
--mmk-logo-mark-state-opacity: 0;
--mmk-logo-text-state-transform: translate3d(0, -1.2rem, 0) scale(.92);
--mmk-logo-text-state-opacity: 0;
}
.mmk-hero-title .quote{
max-width: 700px;
font-size: clamp(1rem, 2vw, 1.2rem);
}
@media (prefers-reduced-motion: reduce){
.mmk-logo,
.mmk-logo__mark-wrap,
.mmk-logo__text-wrap,
.mmk-logo__asset{
transition: none !important;
}
}
@media (max-width: 640px){
.mmk-logo{
row-gap: .35rem;
--mmk-logo-mark-width: min(56vw, 11.7rem);
--mmk-logo-text-width: min(87vw, 19.5rem);
}
}
/* visuele feedback + voorkom klikken tijdens laden */
#gal-more-btn[disabled] { pointer-events: none; }
#gal-more-btn[aria-busy="true"]::after {
content: " •••";
display: inline-block;
animation: dotz 1s steps(4,end) infinite;
}
@keyframes dotz { 0%{content:""} 33%{content:" •"} 66%{content:" ••"} 100%{content:" •••"} }
/* helpt bij veel tegels om layout te stabiliseren */
#main .thumb {
content-visibility: auto;
contain-intrinsic-size: 320px 200px; /* schatting; pas aan als je wilt */
}
/* voorkomt iOS scroll-jitter tijdens auto-scrolls */
html { scroll-behavior: auto; }
:root { --header-h: 100px; } /* pas aan aan jouw headerhoogte */
html { scroll-padding-top: var(--header-h); }
#main, #blog, #downloads { scroll-margin-top: var(--header-h); }
.highlighted-blog-figure { position: relative; }
/* Laagvolgorde forceren */
.highlighted-blog-blur-img,
.highlighted-blog-img { position: relative; z-index: 1; }
.highlighted-blog-overlay { position: relative; z-index: 2; }
/* Badge altijd boven alles */
.badge-new--highlight {
position: absolute;
top: 12px; left: 12px;
z-index: 999; /* hoger dan overlay */
display: inline-block;
font-size: 12px; line-height: 1; font-weight: 700;
background: #ff3b30; color: #fff;
padding: 7px 10px; border-radius: 999px;
box-shadow: 0 8px 20px rgba(255,59,48,.25);
pointer-events: none; /* klik blijft op de kaart */
}
.badge-new--highlight-ribbon{
top: -16px;
left: 26px;
display: block;
width: 50px;
height: 66px;
padding: 0;
border-radius: 0;
background: none;
box-shadow: none;
overflow: visible;
}
.badge-new--highlight-ribbon img{
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.badge-new--highlight-ribbon__text{
position: absolute;
top: 0;
left: 0;
right: 13px;
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 29px;
text-align: center;
font-size: 8px;
line-height: 1;
font-weight: 800;
letter-spacing: .02em;
text-transform: uppercase;
color: #fff;
white-space: nowrap;
}
.badge-new--highlight-ribbon::after{
display: none;
}
/* Blog-badge (rechtsboven) — glas-effect */
.badge-blog--highlight{
position: absolute;
top: 2em; right: 2em;
z-index: 999;
display: inline-block;
font-size: 12px;
letter-spacing: .06em;
text-transform: uppercase;
padding: 6px 10px;
border-radius: 999px;
color: #fff;
background: rgba(255,255,255,.14);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,.07);
pointer-events: none;
}
.fade-in,
.fade-in-right,
.fade-in-right-fast,
.fade-in-left,
.fade-in-scale,
.fade-in-scale-fast,
.fade-in-rotate,
.fade-in-blur {
display: block; /* of block als je wilt dat het over volle breedte gaat */
will-change: transform, opacity;
}
/* Fade in van onder */
.fade-in {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.7s ease-out, transform 1s ease-out;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
.fade-in-long {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.7s ease-out 0.5s, transform 1s ease-out 0.5s;
}
.fade-in-long.visible {
opacity: 1;
transform: translateY(0);
}
/* Fade in van onder */
.fade-in-fast {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}
.fade-in-fast.visible {
opacity: 1;
transform: translateY(0);
}
/* Fade in van rechts */
.fade-in-right {
opacity: 0;
transform: translateX(40px);
transition: opacity 0.7s ease-out, transform 1s ease-out;
}
.fade-in-right.visible {
opacity: 1;
transform: translateX(0);
}
/* Fade in van rechts */
.fade-in-right-fast {
opacity: 0;
transform: translateX(60px);
transition: opacity 0.3s ease-out, transform 0.2s ease-out;
}
.fade-in-right-fast.visible {
opacity: 1;
transform: translateX(0);
}
/* Fade in van links */
.fade-in-left {
opacity: 0;
transform: translateX(-40px);
transition: opacity 0.7s ease-out, transform 1s ease-out;
}
.fade-in-left.visible {
opacity: 1;
transform: translateX(0);
}
/* Fade in met scale (inzoomen) */
.fade-in-scale {
opacity: 0;
transform: scale(0.8);
transition: opacity 0.1s ease-out, transform 0.3s ease-out;
}
.fade-in-scale.visible {
opacity: 1;
transform: scale(1);
}
/* Fade in met scale (inzoomen) */
.fade-in-scale-fast {
opacity: 0;
transform: scale(0.8);
transition: opacity 0.1s ease-out, transform 0.3s ease-out;
}
.fade-in-scale-fast.visible {
opacity: 1;
transform: scale(1);
}
/* Fade in met rotatie */
.fade-in-rotate {
opacity: 0;
transform: rotate(-10deg);
transition: opacity 0.7s ease-out, transform 1s ease-out;
}
.fade-in-rotate.visible {
opacity: 1;
transform: rotate(0);
}
/* Fade in met blur */
.fade-in-blur {
opacity: 0;
filter: blur(8px);
transition: opacity 0.7s ease-out, filter 1s ease-out;
}
.fade-in-blur.visible {
opacity: 1;
filter: blur(0);
}
.fade-in-clip {
opacity: 0;
clip-path: inset(0 0 100% 0);
transition: opacity 0.7s ease-out, clip-path 1s ease-out;
}
.fade-in-clip.visible {
opacity: 1;
clip-path: inset(0 0 0 0);
}
.fade-in-flip {
opacity: 0;
transform: rotateX(-90deg);
transform-origin: top;
transition: opacity 0.7s ease-out, transform 1s ease-out;
}
.fade-in-flip.visible {
opacity: 1;
transform: rotateX(0);
}
.fade-in-skew {
opacity: 0;
transform: skewY(10deg) translateY(20px);
transition: opacity 0.7s ease-out, transform 1s ease-out;
}
.fade-in-skew.visible {
opacity: 1;
transform: skewY(0) translateY(0);
}
.fade-in-shadow {
opacity: 0;
transform: translateY(20px);
filter: drop-shadow(0 20px 20px rgba(0, 0, 0, 0.1));
transition: opacity 0.5s ease-out, transform 0.7s ease-out, filter 0.7s ease-out;
}
.fade-in-shadow.visible {
opacity: 1;
transform: translateY(0);
filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.1));
}
.fade-in-liquid {
opacity: 0;
clip-path: circle(0% at 50% 50%);
transition: opacity 0.7s ease-out, clip-path 1.2s cubic-bezier(.7, 0, .2, 1);
}
.fade-in-liquid.visible {
opacity: 1;
clip-path: circle(150% at 50% 50%);
}
/* LIQUID GLASS STYLES */
.liquidGlass-wrapper {
display: flex;
overflow: hidden;
color: black;
cursor: pointer;
box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.1), 0 0 20px rgba(0, 0, 0, 0.01);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}
#header .liquidGlass-wrapper{
overflow: visible;
}
.liquidGlass-wrapper-caption {
position: relative;
overflow: visible;
display: inline-block;
background: var(--color-caption);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: #fff;
padding: 0.75em 1.2em;
border-radius: 12px;
border: 1px solid var(--color-mm-grey);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
font-size: 0.95em;
line-height: 1.4;
text-align: center;
margin: 0 auto;
transition: all 0.3s ease;
}
.liquidGlass-wrapper-caption::after {
content: '';
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid var(--color-caption);
transition: border-bottom-color 0.3s ease;
}
.liquidGlass-wrapper-caption:hover {
background: #000;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transform: scale(1.02);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}
.liquidGlass-wrapper-caption:hover::after {
border-bottom-color: #000
}
.corner-container {
position: absolute;
top: 0;
right: 0;
width: 275px;
height: 275px;
}
.corner-container:hover .corner-fold {
border-top-width: 375px;
border-left-width: 375px;
}
.photo-stack {
position: absolute;
top: 0;
right: 0;
width: 275px;
height: 275px;
overflow: hidden;
z-index: 11;
clip-path: polygon(100% 0, 0 0, 100% 100%);
transition: width 0.4s ease, height 0.4s ease;
}
.corner-container:hover .photo-stack {
width: 375px;
height: 375px;
}
.photo-stack img {
position: absolute;
top: 0;
right: 0;
width: 375px;
height: 375px;
object-fit: cover;
opacity: 0;
transition: opacity 1s ease;
}
.photo-stack img.active {
opacity: 1;
}
.corner-fold {
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-top: 275px solid #cbcbc3;
border-left: 275px solid transparent;
box-shadow: -5px 5px 20px rgb(0 0 0 / 90%);
z-index: 10;
transition: border-top-width 0.4s ease, border-left-width 0.4s ease;
background-color: #1b1b19;
}
/* === Mobiel: max 769px === */
@media (max-width: 769px) {
.corner-container {
width: 150px;
height: 150px;
}
.corner-container:hover .corner-fold {
border-top-width: 250px;
border-left-width: 250px;
}
.photo-stack {
width: 150px;
height: 150px;
}
.corner-container:hover .photo-stack {
width: 250px;
height: 250px;
}
.photo-stack img {
width: 250px;
height: 250px;
}
.corner-fold {
border-top: 150px solid #cbcbc3;
border-left: 150px solid transparent;
}
}
.new-label {
position: absolute;
top: 10px;
right: 10px;
background: #ff3b3f;
color: white;
padding: 2px 8px;
font-size: 10px;
font-weight: bold;
border-radius: 12px;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
z-index: 15;
}
.liquidGlass-wrapper-zoek {
display: flex;
flex-direction: column;
align-items: stretch;
width: 700px;
text-align: center;
box-sizing: border-box;
/* 🔒 Belangrijk voor mobiel: */
max-height: calc(100vh - 175px); /* houdt 100px over (80px top + 1em bottom) */
overflow-y: auto;
box-shadow: 0px 0px 40px 1000px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 0, 0, 0.01);
background-color: #00000054;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}
@media (max-width: 769px) {
.liquidGlass-wrapper-zoek {
width: 100%;
}
}
.liquidGlass-effect {
position: absolute;
z-index: 0;
inset: 0;
backdrop-filter: blur(7px);
/* filter: url(#glass-distortion); */
overflow: hidden;
isolation: isolate;
}
.liquidGlass-tint {
z-index: 1;
position: absolute;
inset: 0;
background:
radial-gradient(1200px 700px at 12% 8%, var(--bg-blob1), transparent 60%),
radial-gradient(1100px 760px at 88% 18%, var(--bg-blob2), transparent 58%),
radial-gradient(900px 700px at 58% 90%, var(--bg-blob3), transparent 60%),
radial-gradient(700px 480px at 35% 60%, var(--bg-blob4), transparent 62%),
var(--color-menu-glass);
}
.liquidGlass-shine {
position: absolute;
inset: 0;
z-index: 2;
overflow: hidden;
border-bottom: 1px solid var(--mm-bg);
/* box-shadow: inset 0px 1px 1px 0 rgba(255, 255, 255, 0.5), inset 1px 0px 1px 0px rgba(255, 255, 255, 0.5); */
}
/* Top header menu: donkerdere onderrand */
#header .liquidGlass-shine{
border-bottom-color: rgba(38,39,41,.28);
}
#header.small .liquidGlass-shine{
border-bottom: 0 !important;
}
html[data-theme="dark"] #header .liquidGlass-shine{
border-bottom-color: rgba(204,196,182,.30);
}
@media (prefers-color-scheme: dark){
html:not([data-theme]) #header .liquidGlass-shine,
html[data-theme="auto"] #header .liquidGlass-shine{
border-bottom-color: rgba(204,196,182,.30);
}
}
.liquidGlass-text {
z-index: 3;
color: #fff;
width: 100%;
}
.liquidGlass-text h1{
position: absolute;
left: 50%;
top: 50%;
margin: 0;
padding: 0;
transform: translate(-50%, -30%);
z-index: 4;
line-height: 0;
}
.mm-header-search{
position: absolute;
left: .5rem;
top: 50%;
width: 40px;
height: 40px;
display: grid;
place-items: center;
transform: translateY(-50%);
text-decoration: none;
color: var(--color-text);
z-index: 5;
border-radius: 999px;
transition: transform .22s ease, opacity .22s ease, color .22s ease, background-color .22s ease;
}
.mm-header-search__icon{
position: relative;
width: 16px;
height: 16px;
display: block;
}
.mm-header-search__icon::before,
.mm-header-search__icon::after{
content: "";
position: absolute;
box-sizing: border-box;
}
.mm-header-search__icon::before{
inset: 0;
width: 11px;
height: 11px;
border: 1.4px solid currentColor;
border-radius: 999px;
left: 0;
top: 0;
}
.mm-header-search__icon::after{
width: 7px;
height: 1.4px;
background: currentColor;
border-radius: 999px;
right: 0;
bottom: 1px;
transform: rotate(45deg);
transform-origin: center;
}
.mm-header-search:hover{
transform: translateY(-50%) scale(1.05);
}
html[data-theme="dark"] .mm-header-search{
color: rgba(247,243,232,.92);
}
@media (prefers-color-scheme: dark){
html:not([data-theme]) .mm-header-search,
html[data-theme="auto"] .mm-header-search{
color: rgba(247,243,232,.92);
}
}
.mm-header-badge{
position: relative;
display: grid;
place-items: center;
width: clamp(58px, 5.2vw, 82px);
aspect-ratio: 0.88 / 1;
text-decoration: none;
pointer-events: auto;
}
.mm-header-badge__img{
width: 100%;
height: 100%;
object-fit: contain;
display: block;
filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.18));
transition: opacity .28s ease, transform .28s ease;
}
.mm-header {
padding: 0.66em 0.8em;
overflow: visible !important;
}
.mm-header,
.mm-header > div {
}
.mm-header:hover {
padding: 0.9em 1.05em;
}
.mm-header svg {
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}
.mm-header:hover svg {
transform: scale(0.95);
}
/* 📱 Mobiel: GEEN hover / active / focus effecten op header */
@media (hover: none) and (pointer: coarse) {
.mm-header,
.mm-header:hover,
.mm-header:active,
.mm-header:focus,
.mm-header:focus-visible {
padding: 0.8em 0.8em; /* vaste waarde, geen inherit */
}
.mm-header svg,
.mm-header:hover svg,
.mm-header:active svg,
.mm-header:focus svg,
.mm-header:focus-visible svg {
transform: none !important;
}
}
.mm-zoek {
padding: 1.5em;
border-radius: var(--radius);
}
.mm-zoek,
.mm-zoek > div {
border-radius: var(--radius);
}
.mm-zoek:hover {
padding: 2em 2em;
}
@media (max-width: 769px) {
.mm-zoek {
padding: 0.5em 1em 0.2em 1em;
border-radius: var(--radius);
}
.mm-zoek:hover {
padding: 0.5em 1em 0.2em 1em;
}
}
.mm-zoek:hover > div {
border-radius: var(--radius);
}
.mm-zoek svg {
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}
.mm-zoek:hover svg {
transform: scale(0.95);
}
@media (max-width: 769px) {
.mm-zoek:hover svg {
transform: none;
}
}
@keyframes moveBackground {
from {
background-position: 0% 0%;
}
to {
background-position: 0% -500%;
}
}
.custom-swiper-buttons {
display: flex;
justify-content: flex-end;
margin: 10px 20px 0 20px;
gap: 10px;
}
.mm-gallery-button {
background: #333;
color: #fff;
border: none;
width: 45px;
height: 45px;
border-radius: 50%;
cursor: pointer;
transition: background 0.3s ease, transform 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2em;
}
.mm-gallery-button:hover {
background: #555;
transform: scale(1.05);
}
.loader-overlay {
position: fixed;
top: 0; left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.429);
backdrop-filter: blur(7px);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
z-index: 9999;
transition: opacity 0.4s ease;
}
.progress-bar {
width: 60%;
height: 10px;
backdrop-filter: blur(7px);
border-radius: var(--radius);
overflow: hidden;
margin-top: 1em;
}
.progress-fill {
height: 100%;
width: 0%;
background-color: #fff;
transition: width 0.3s ease;
}
.progress-text {
font-size: 1.2em;
color: #fff;
}
.page-content {
padding: 3em;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
body{
background-color: var(--color-footer-skyline-bottom);
}
.shimmer {
background: linear-gradient(
90deg,
#e0e0e0 0%,
#f0f0f0 50%,
#e0e0e0 100%
);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
0% {
background-position: -100% 0;
}
100% {
background-position: 100% 0;
}
}
@font-face {
font-family: "San Francisco";
font-weight: 400;
src: url("../webfonts/sanfranciscodisplay-regular-webfont.woff");
}
@font-face {
font-family: "San Francisco bold";
font-weight: 400;
src: url("../webfonts/sanfranciscodisplay-bold-webfont.woff");
}
@font-face {
font-family: "San Francisco medium";
font-weight: 400;
src: url("../webfonts/sanfranciscodisplay-rmedium-webfont.woff");
}
.text-filter{
margin-top: -20px;
}
.text-filter-layer{
position: relative;
right: -200px
}
@media screen and (max-width: 736px) {
.text-filter-layer{
right: -85px
}
}
.reels-text{
position: relative;
margin: 0 auto;
}
.sort-dropdown-container{
display: grid;
grid-template-columns: 1fr 1fr; /* 2 kolommen van gelijke breedte */
gap: 1em; /* optioneel, ruimte tussen items */
}
.sort-dropdown-container {
display: flex;
justify-content: flex-end;
align-items: center;
flex-direction: column;
}
.filter-grid-container{
display: grid;
grid-auto-flow: column; /* items naast elkaar */
grid-auto-columns: max-content; /* kolommen zo breed als inhoud */
gap: 1em; /* optioneel: ruimte tussen de items */
}
#pin{
pointer-events: none;
top: 10px;
font-size: 1.2em;
right: 10px;
margin: 0;
position: absolute;
z-index: 1;
color: #fff;
float: right;
display: block;
}
#pin h4{
color: #fff !important;
}
#newpost{
pointer-events: none;
top: 30px;
left: 8px;
margin: 0;
position: absolute;
z-index: 1;
float: left;
}
#newpost_text{
font-size: 12px;
color: #212121;
position: absolute;
top: -20px;
left: 6px;
}
@media screen and (max-width: 480px) {
#pin{
top: 10px;
font-size: 1em;
right: 10px;
}
}
.move_top{
position: fixed;
bottom: -50px;
padding-top: 5px;
width: 63px;
height: 58px;
z-index: 9999;
right: 0;
background: #fff;
padding: 1em;
text-align: center;
font-size: 18px;
opacity: 0;
box-shadow: 0 4px 60px rgba(0, 0, 0, 0.15);
}
.move_top_open {
opacity: 1;
bottom: 0px;
}
.transition {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
body.is-preload .move_top {
-moz-transform: translateY(80em);
-webkit-transform: translateY(80em);
-ms-transform: translateY(80em);
transform: translateY(80em);
}
body {
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
}
/* Subtiele, dunne scrollbar (voorkomt dikke systeem-balk) */
html,
body {
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--pal-dark-3) 26%, transparent) transparent;
}
body::-webkit-scrollbar {
width: 8px;
}
body::-webkit-scrollbar-track {
background: transparent;
}
body::-webkit-scrollbar-thumb {
background-color: color-mix(in srgb, var(--pal-dark-3) 26%, transparent);
border-radius: 999px;
}
canvas {
object-fit: cover;
object-position: center center;
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
#c1 {
opacity: 0;
}
#c2 {
background: #000;
}
/* ===== Glass Language Select (robust, no color-mix) ===== */
:root{
--glass-bg: rgba(255,255,255,0.10);
--glass-bg-strong: rgba(255,255,255,0.18);
--glass-border: rgba(255, 255, 255, 0.206);
--glass-text: #c9c9c9;
--glass-ring: #4d4d4d;
--glass-shadow: 0 10px 30px rgba(0,0,0,0.10);
--glass-radius: 14px;
--glass-blur: 14px;
--glass-saturate: 140%;
}
/* optioneel */
.language-switcher { position:relative; display:inline-flex; align-items:center; }
.theme-switcher { position:relative; display:inline-flex; align-items:center; }
/* toegankelijk label verbergen */
.sr-only { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* GEENCODE’de SVG’s (let op %23 i.p.v. #) */
:root{
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
--icon-chevron-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23212b40' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
--icon-chevron-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e9f1ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
--icon-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 0 20M12 2a15.3 15.3 0 0 0 0 20'/%3E%3C/svg%3E");
}
.lang-select.glass{
-webkit-appearance: none;
appearance: none;
color: var(--color-text) !important;
background-color: var(--color-menu-glass) !important;
background:
var(--icon-chevron) no-repeat right 15px center / 12px,
linear-gradient(180deg, var(--glass-bg-strong), var(--glass-bg));
border: 1px solid var(--glass-border);
border-radius: var(--radius);
box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,0.20);
backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
transition: box-shadow .25s ease, transform .12s ease, border-color .2s ease;
cursor: pointer;
}
.dark-menu.glass{
-webkit-appearance: none;
appearance: none;
color: var(--glass-text) !important;
background-color: #ffffff0d !important;
background:
linear-gradient(180deg, var(--glass-bg-strong), var(--glass-bg));
border: 1px solid var(--glass-border);
border-radius: var(--radius);
box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,0.20);
backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
transition: box-shadow .25s ease, transform .12s ease, border-color .2s ease;
cursor: pointer;
}
@media (max-width: 768px) {
.lang-select.glass{
width: 75px !important;
}
}
.lang-select.glass:hover{
border-color: rgba(255,255,255,0.55);
transform: translateY(-1px);
box-shadow: 0 16px 40px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.25);
}
.lang-select.glass:focus{
outline: 2px solid transparent; /* voorkom default ring */
box-shadow:
0 16px 40px rgba(0,0,0,0.38),
0 0 0 3px rgba(255, 255, 255, 0.6); /* eenvoudige focus-ring */
}
/* Light mode variant (andere iconkleur) */
@media (prefers-color-scheme: light){
:root{
--glass-bg: rgba(255,255,255,0.65);
--glass-bg-strong: rgba(255,255,255,0.85);
--glass-border: rgba(0,0,0,0.12);
--glass-shadow: 0 10px 24px rgba(16,18,37,0.08);
--glass-ring: #ffffff;
}
.lang-select.glass{ border:1px solid var(--glass-border); color:var(--glass-text); }
}
.lang-select-full.glass{
-webkit-appearance: none;
appearance: none;
min-height: 54px;
padding: 0 48px 0 42px;
line-height: 1;
color: var(--color-text) !important;
background-color: #ffffff0d !important;
background:
var(--icon-chevron) no-repeat right 15px center / 12px,
var(--icon-globe) no-repeat 12px center / 12px,
linear-gradient(180deg, var(--glass-bg-strong), var(--glass-bg));
border: 1px solid var(--glass-border);
border-radius: var(--radius);
box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,0.20);
backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
transition: box-shadow .25s ease, transform .12s ease, border-color .2s ease;
cursor: pointer;
}
.lang-select-full.glass:hover{
border-color: rgba(255,255,255,0.55);
transform: translateY(-1px);
box-shadow: 0 16px 40px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.25);
}
.lang-select-full.glass:focus{
outline: 2px solid transparent; /* voorkom default ring */
box-shadow:
0 16px 40px rgba(0,0,0,0.38),
0 0 0 3px rgba(255, 255, 255, 0.6); /* eenvoudige focus-ring */
}
/* Light mode variant (andere iconkleur) */
@media (prefers-color-scheme: light){
:root{
--glass-bg: rgba(255,255,255,0.65);
--glass-bg-strong: rgba(255,255,255,0.85);
--glass-border: rgba(0,0,0,0.12);
--glass-shadow: 0 10px 24px rgba(16,18,37,0.08);
--glass-ring: #ffffff;
}
.lang-select-full.glass{ border:1px solid var(--glass-border); color:var(--glass-text); }
}
.language-switcher {
display: flex;
gap: 5px;
align-items: center;
justify-content: flex-end;
position: absolute;
left: 1em;
top: 1em;
z-index: 9;
}
/* Zorgt dat de layer altijd met je thema-vars mee kleurt */
#themeToggle{
/* layout zoals je had */
display:flex; gap:5px; align-items:center; justify-content:center;
position:absolute; right:2.4em; z-index:9;
width:54px; height:54px; border-radius:50%;
box-sizing:border-box;
/* ALLE kleuren via jouw vars (die per thema wisselen) */
background-color: var(--color-bg-theme) !important;
border: 1px solid var(--color-menu-border) !important;
color: var(--color-text);
/* iOS Safari: blur werkt alleen met non-transparent bg */
-webkit-backdrop-filter: saturate(1.1) blur(8px);
backdrop-filter: saturate(1.1) blur(8px);
}
.language-switcher-menu {
display: flex;
gap: 10px;
align-items: center;
left: 10px;
top: 10px;
}
.language-switcher-menu.about{
--mm-switch-h: 52px;
--mm-switch-r: 12px;
--mm-switch-gap: 8px;
--mm-switch-w: 74px;
--mm-ctl-grad-1: rgba(124,127,121,.22);
--mm-ctl-grad-2: rgba(160,164,156,.18);
--mm-ctl-grad-3: rgba(201,193,178,.20);
--mm-ctl-grad-hover-1: rgba(136,139,132,.30);
--mm-ctl-grad-hover-2: rgba(172,176,168,.24);
--mm-ctl-grad-hover-3: rgba(201,193,178,.28);
--mm-ctl-border: rgba(38,39,41,.16);
--mm-ctl-border-hover: rgba(38,39,41,.24);
--mm-ctl-shadow: 0 8px 18px rgba(38,39,41,.20);
--mm-ctl-shadow-hover: 0 10px 22px rgba(38,39,41,.24);
--mm-ctl-text: rgba(38,39,41,.92);
--mm-ctl-icon: rgba(58,54,48,.86);
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
gap: var(--mm-switch-gap);
align-items: center;
width: 100%;
}
/* Expliciete effectieve mode vanuit JS; voorkomt afwijking bij Auto/system */
.language-switcher-menu.about.is-effective-dark{
--mm-ctl-grad-1: rgba(96,98,94,.32);
--mm-ctl-grad-2: rgba(80,82,78,.28);
--mm-ctl-grad-3: rgba(124,127,121,.22);
--mm-ctl-grad-hover-1: rgba(108,111,106,.42);
--mm-ctl-grad-hover-2: rgba(90,92,88,.36);
--mm-ctl-grad-hover-3: rgba(136,139,132,.30);
--mm-ctl-border: rgba(204,196,182,.24);
--mm-ctl-border-hover: rgba(204,196,182,.34);
--mm-ctl-shadow: 0 8px 18px rgba(10,11,12,.35);
--mm-ctl-shadow-hover: 0 10px 22px rgba(10,11,12,.42);
--mm-ctl-text: rgba(247,243,232,.96);
--mm-ctl-icon: rgba(232,225,212,.88);
}
.language-switcher-menu.about.is-effective-dark #langSelectAbout.lang-select-full.glass{
background:
var(--icon-chevron-light) no-repeat right 15px center / 12px,
linear-gradient(135deg, var(--mm-ctl-grad-1), var(--mm-ctl-grad-2) 52%, var(--mm-ctl-grad-3)) !important;
}
.language-switcher-menu.about.is-effective-dark .theme-auto-btn.is-active{
color: #f7f3e8 !important;
border-color: rgba(204,196,182,.36);
box-shadow:
var(--mm-ctl-shadow-hover),
0 0 0 2px rgba(204,196,182,.18);
}
.language-switcher-menu.about #langSwitchFormAbout,
.language-switcher-menu.about #themeSwitchForm{
margin: 0;
min-width: 0;
width: 100%;
}
.language-switcher-menu.about #langSwitchFormAbout{
grid-column: 1;
}
.theme-switch-form.theme-slider-form{
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
gap: var(--mm-switch-gap);
min-width: 0;
width: 100%;
}
.language-switcher-menu.about #themeSwitchForm{
grid-column: 2;
}
.theme-slider{
--slider-pad: 3px;
--slider-knob: calc(var(--mm-switch-h) - (var(--slider-pad) * 2));
--slider-icon-size: 18px;
--slider-shift: 0px;
height: var(--mm-switch-h);
position: relative;
display: inline-block;
vertical-align: middle;
width: 100%;
min-width: 0;
box-sizing: border-box;
align-self: stretch;
}
.theme-slider__btn{
position: absolute;
inset: 0;
background:
linear-gradient(135deg, var(--mm-ctl-grad-1), var(--mm-ctl-grad-2) 52%, var(--mm-ctl-grad-3)),
rgba(247,243,232,.05);
border-radius: 999px;
padding: var(--slider-pad);
border: 1px solid var(--mm-ctl-border);
box-shadow: var(--mm-ctl-shadow);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
cursor: pointer;
overflow: hidden;
display: block;
box-sizing: border-box;
-webkit-appearance: none;
appearance: none;
}
.theme-slider__knob{
display: block;
width: var(--slider-knob);
height: var(--slider-knob);
position: absolute;
top: var(--slider-pad);
left: var(--slider-pad);
border-radius: 999px;
background: linear-gradient(180deg, rgba(247,243,232,.96), rgba(232,235,238,.88));
border: 1px solid rgba(247,243,232,.88);
box-shadow: 0 6px 14px rgba(8,16,34,.30);
z-index: 1;
transform: translateX(0);
transition: transform .24s cubic-bezier(.22,1,.36,1), background .2s ease, box-shadow .2s ease;
}
.theme-slider__icon{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: var(--slider-icon-size);
height: var(--slider-icon-size);
font-size: 15px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
opacity: .8;
z-index: 2;
color: var(--mm-ctl-icon);
transition: color .18s ease, opacity .18s ease;
pointer-events: none;
}
.theme-slider__icon::before{
position: absolute;
inset: 0;
display: flex !important;
align-items: center;
justify-content: center;
width: var(--slider-icon-size);
height: var(--slider-icon-size);
line-height: 1 !important;
font-size: inherit;
font-style: normal !important;
color: currentColor;
}
.theme-slider__icon--sun{
left: calc(var(--slider-pad) + ((var(--slider-knob) - var(--slider-icon-size)) / 2));
}
.theme-slider__icon--moon{
right: calc(var(--slider-pad) + ((var(--slider-knob) - var(--slider-icon-size)) / 2));
}
.theme-slider:hover .theme-slider__btn{
border-color: var(--mm-ctl-border-hover);
box-shadow: var(--mm-ctl-shadow-hover);
background:
linear-gradient(135deg, var(--mm-ctl-grad-hover-1), var(--mm-ctl-grad-hover-2) 52%, var(--mm-ctl-grad-hover-3)),
rgba(247,243,232,.08);
}
.theme-slider:active .theme-slider__btn{
transform: translateY(1px);
}
.theme-slider[data-mode="dark"] .theme-slider__knob{
transform: translateX(var(--slider-shift));
background: linear-gradient(180deg, rgba(232,235,238,.96), rgba(210,201,184,.90));
}
.theme-slider[data-mode="auto"] .theme-slider__knob{
transform: translateX(calc(var(--slider-shift) * .5));
background: linear-gradient(180deg, rgba(242,236,224,.96), rgba(210,201,184,.90));
}
.theme-slider[data-mode="light"] .theme-slider__icon--sun{
color: var(--mm-ctl-text);
opacity: 1;
}
.theme-slider[data-mode="dark"] .theme-slider__icon--moon{
color: rgba(24,28,34,.92);
opacity: 1;
}
.theme-slider[data-mode="auto"] .theme-slider__icon--sun,
.theme-slider[data-mode="auto"] .theme-slider__icon--moon{
color: var(--mm-ctl-text);
opacity: .92;
}
.theme-auto-btn{
-webkit-appearance: none;
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
height: var(--mm-switch-h);
width: 100%;
min-width: 0;
padding: 0 12px;
border-radius: 999px;
border: 1px solid var(--mm-ctl-border);
color: var(--mm-ctl-text) !important;
background:
linear-gradient(135deg, var(--mm-ctl-grad-1), var(--mm-ctl-grad-2) 52%, var(--mm-ctl-grad-3)),
rgba(247,243,232,.05);
box-shadow: var(--mm-ctl-shadow);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
font: inherit;
font-weight: 700;
font-size: 14px;
line-height: 1;
letter-spacing: .2px;
cursor: pointer;
transition: box-shadow .2s ease, border-color .2s ease, transform .12s ease, background-color .2s ease;
align-self: stretch;
box-sizing: border-box;
-webkit-text-fill-color: currentColor;
white-space: nowrap;
}
.theme-auto-btn span{
display: block;
line-height: 1;
transform: translateY(.5px);
}
.language-switcher-menu.about #langSelectAbout.lang-select-full.glass{
width: 100% !important;
height: var(--mm-switch-h) !important;
min-height: var(--mm-switch-h) !important;
line-height: calc(var(--mm-switch-h) - 2px) !important;
border-radius: 999px !important;
border: 1px solid var(--mm-ctl-border) !important;
color: var(--mm-ctl-text) !important;
background:
var(--icon-chevron-dark) no-repeat right 15px center / 12px,
linear-gradient(135deg, var(--mm-ctl-grad-1), var(--mm-ctl-grad-2) 52%, var(--mm-ctl-grad-3)) !important;
box-shadow: var(--mm-ctl-shadow) !important;
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
text-align: center !important;
text-align-last: center !important;
padding-left: 16px !important;
padding-right: 26px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
box-sizing: border-box !important;
align-self: stretch !important;
-webkit-appearance: none !important;
appearance: none !important;
-webkit-text-fill-color: currentColor !important;
}
.language-switcher-menu.about #langSelectAbout.lang-select-full.glass,
.theme-slider__btn,
.theme-auto-btn{
min-height: 52px;
}
.language-switcher-menu.about #langSelectAbout.lang-select-full.glass:hover{
border-color: var(--mm-ctl-border-hover) !important;
transform: translateY(-1px);
}
.theme-auto-btn:hover{
border-color: var(--mm-ctl-border-hover);
transform: translateY(-1px);
box-shadow: var(--mm-ctl-shadow-hover);
background:
linear-gradient(135deg, var(--mm-ctl-grad-hover-1), var(--mm-ctl-grad-hover-2) 52%, var(--mm-ctl-grad-hover-3)),
rgba(247,243,232,.08);
}
.theme-auto-btn.is-active{
border-color: var(--mm-ctl-border-hover);
box-shadow:
var(--mm-ctl-shadow-hover),
0 0 0 2px rgba(186,177,156,.18);
background:
linear-gradient(135deg, var(--mm-ctl-grad-hover-1), var(--mm-ctl-grad-hover-2) 52%, var(--mm-ctl-grad-hover-3)),
rgba(247,243,232,.10);
}
html[data-theme="dark"] .language-switcher-menu.about{
--mm-ctl-grad-1: rgba(96,98,94,.32);
--mm-ctl-grad-2: rgba(80,82,78,.28);
--mm-ctl-grad-3: rgba(124,127,121,.22);
--mm-ctl-grad-hover-1: rgba(108,111,106,.42);
--mm-ctl-grad-hover-2: rgba(90,92,88,.36);
--mm-ctl-grad-hover-3: rgba(136,139,132,.30);
--mm-ctl-border: rgba(204,196,182,.24);
--mm-ctl-border-hover: rgba(204,196,182,.34);
--mm-ctl-shadow: 0 8px 18px rgba(10,11,12,.35);
--mm-ctl-shadow-hover: 0 10px 22px rgba(10,11,12,.42);
--mm-ctl-text: rgba(247,243,232,.96);
--mm-ctl-icon: rgba(232,225,212,.88);
}
html[data-theme="dark"] .language-switcher-menu.about #langSelectAbout.lang-select-full.glass{
background:
var(--icon-chevron-light) no-repeat right 15px center / 12px,
linear-gradient(135deg, var(--mm-ctl-grad-1), var(--mm-ctl-grad-2) 52%, var(--mm-ctl-grad-3)) !important;
}
@media (prefers-color-scheme: dark){
html:not([data-theme]) .language-switcher-menu.about,
html[data-theme="auto"] .language-switcher-menu.about{
--mm-ctl-grad-1: rgba(96,98,94,.32);
--mm-ctl-grad-2: rgba(80,82,78,.28);
--mm-ctl-grad-3: rgba(124,127,121,.22);
--mm-ctl-grad-hover-1: rgba(108,111,106,.42);
--mm-ctl-grad-hover-2: rgba(90,92,88,.36);
--mm-ctl-grad-hover-3: rgba(136,139,132,.30);
--mm-ctl-border: rgba(204,196,182,.24);
--mm-ctl-border-hover: rgba(204,196,182,.34);
--mm-ctl-shadow: 0 8px 18px rgba(10,11,12,.35);
--mm-ctl-shadow-hover: 0 10px 22px rgba(10,11,12,.42);
--mm-ctl-text: rgba(247,243,232,.96);
--mm-ctl-icon: rgba(232,225,212,.88);
}
html:not([data-theme]) .language-switcher-menu.about #langSelectAbout.lang-select-full.glass,
html[data-theme="auto"] .language-switcher-menu.about #langSelectAbout.lang-select-full.glass{
background:
var(--icon-chevron-light) no-repeat right 15px center / 12px,
linear-gradient(135deg, var(--mm-ctl-grad-1), var(--mm-ctl-grad-2) 52%, var(--mm-ctl-grad-3)) !important;
}
html:not([data-theme]) .theme-slider[data-mode="auto"] .theme-slider__knob,
html[data-theme="auto"] .theme-slider[data-mode="auto"] .theme-slider__knob{
transform: translateX(var(--slider-shift));
background: linear-gradient(180deg, rgba(232,235,238,.96), rgba(210,201,184,.90));
}
html:not([data-theme]) .theme-slider[data-mode="auto"] .theme-slider__icon--moon,
html[data-theme="auto"] .theme-slider[data-mode="auto"] .theme-slider__icon--moon{
color: var(--mm-ctl-text);
opacity: 1;
}
html:not([data-theme]) .theme-auto-btn.is-active,
html[data-theme="auto"] .theme-auto-btn.is-active{
color: #f7f3e8 !important;
border-color: rgba(204,196,182,.36);
box-shadow:
var(--mm-ctl-shadow-hover),
0 0 0 2px rgba(204,196,182,.18);
}
}
@media (prefers-color-scheme: light){
html:not([data-theme]) .theme-slider[data-mode="auto"] .theme-slider__knob,
html[data-theme="auto"] .theme-slider[data-mode="auto"] .theme-slider__knob{
transform: translateX(0);
background: linear-gradient(180deg, rgba(247,243,232,.96), rgba(232,235,238,.88));
}
html:not([data-theme]) .theme-slider[data-mode="auto"] .theme-slider__icon--sun,
html[data-theme="auto"] .theme-slider[data-mode="auto"] .theme-slider__icon--sun{
color: var(--mm-ctl-text);
opacity: 1;
}
}
html.js-theme-slider .theme-select-fallback{
position: absolute !important;
opacity: 0 !important;
pointer-events: none !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
.language-switcher a {
position: relative;
z-index: 99999;
}
/* ===== Alleen vlag tonen op mobiel ===== */
@media (max-width: 768px) {
.lang-select.glass option {
font-size: 0; /* tekst verbergen */
}
.lang-select.glass option::before {
content: attr(data-flag);
font-size: 18px; /* vlag tonen */
}
}
/* Zorg dat de select kan krimpen tot de contentbreedte */
#langSelect.lang-select.glass {
display: inline-block;
width: auto; /* geen vaste/100% breedte */
white-space: nowrap; /* niet afbreken */
box-sizing: border-box;
/* als je al padding gebruikt, laat staan; anders kun je deze gebruiken: */
/* padding: 10px 42px 10px 40px; */
}
.skyline{
bottom: 0;
width: 40em;
z-index: 1;
margin: 0 auto;
position: relative;
margin-bottom: -5px;
}
.skyline-bottom{
background-color: var(--color-footer-skyline-bottom);
width: 100%;
height:3em;
bottom: 0;
}
/* standaard: light theme */
.skyline-dark {
display: none;
}
/* dark theme actief */
html[data-theme="dark"] .skyline-light {
display: none;
}
html[data-theme="dark"] .skyline-dark {
display: block;
}
@media screen and (max-width: 736px) {
.skyline{
width: 100%;
padding: 0 .7em;
}
}
.viewport-header,
.scrollcontainer,
.language-switcher {
will-change: transform, opacity;
backface-visibility: hidden;
transform: translateY(0); /* Initial */
transition: transform 0.05s linear;
}
.quote-line {
position: relative;
display: inline-block;
padding: 1em 2em !important;
text-transform: uppercase;
font-style: normal !important;
font-size: 1.2em;
color: #fff;
border-radius: var(--radius);
text-transform:none;
font-family: "Caveat", cursive;
}
.viewport-header h1 {
color: #fff;
text-transform: uppercase;
line-height: 1.2;
font-size: 0.8em;
text-align: center;
opacity: 0;
transform: translateY(-320%);
will-change: transform, opacity;
white-space: nowrap;
z-index: 9;
}
.viewport-header h1 span {
color: #fff;
font-family: 'Raleway', sans-serif;
font-weight: 1000;
font-style: normal;
display: block;
font-size: 2.5em;
letter-spacing: -0.05em;
white-space: normal;
margin-top: -0.3em;
}
.viewport-header p{
color: #fff;
margin-top: -3em;
}
/* h1 zelf mag NIET meer op opacity:0 staan */
.viewport-header h1{
opacity: 1;
transform: none;
will-change: auto;
}
/* Start state op de 3 onderdelen */
.viewport-header .mm-logo-intro,
.viewport-header .quote-line{
opacity: 0;
transform: translateY(-320%);
will-change: transform, opacity;
}
/* Animaties */
.viewport-header .bounce-in{
animation: bounceElastic 0.32s ease-out forwards;
opacity: 1;
}
.viewport-header .mm-logo-intro.bounce-in{
filter: var(--logo-intro-bounce-glow);
}
.viewport-header .bounce-out{
animation: bounceElasticOut 0.32s ease-out forwards;
}
@media screen and (max-width: 736px) {
.viewport-header h1 {
font-size: 3.5vw;
span {
font-size: 11vw;
line-height: 40px;
}
p{
margin-top: -4em;
font-size: 3vw;
letter-spacing: 0.5vw;
color: #fff;
}
li{
font-size: 3vw;
}
}
}
.viewport-header {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
height: 100vh;
height: 100svh;
min-height: 100vh;
min-height: 100svh;
max-height: 100vh;
max-height: 100svh;
overflow: hidden;
--mm-hero-pull-y: 0px;
--mm-hero-pull-progress: 0;
transform: translate3d(0, var(--mm-hero-pull-y), 0);
transition: transform 340ms cubic-bezier(.22, 1, .36, 1);
will-change: transform;
}
.viewport-header.is-pulling {
transition: none;
}
.viewport-header h1 {
position: relative;
z-index: 5;
color: var(--color-text2);
text-align: center;
}
.viewport-header .mmk-hero-title{
position: absolute;
inset: 0;
z-index: 6;
margin: 0 !important;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
text-align: center;
}
/* Scroll animatie direct onder tekst */
.scroll-hint {
position: absolute;
left: 50%;
bottom: 2em;
transform: translateX(-50%);
display: flex;
justify-content: center;
margin-top: 0;
text-decoration: none;
cursor: pointer;
user-select: none;
transition: transform .25s ease;
z-index: 9;
}
.scroll-hint:hover {
transform: translate(-50%, 2px);
}
/* Capsule */
.scroll-indicator {
width: clamp(26px, 4.5vw, 34px);
height: clamp(42px, 7vw, 54px);
border-radius: 999px;
border: 1.5px solid #fff;
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
background: rgba(255,255,255,0.05);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
/* Desktop dot */
.scroll-dot {
width: clamp(4px, 1vw, 6px);
height: clamp(4px, 1vw, 6px);
border-radius: 50%;
background: #fff;
position: absolute;
top: 15%;
left: 50%;
transform: translateX(-50%);
animation: scroll-fall 1.3s cubic-bezier(.25,.6,.25,1) infinite;
}
@keyframes scroll-fall {
0% { transform: translate(-50%, -10%); opacity: 0; }
20% { opacity: 1; }
60% { transform: translate(-50%, 50%); opacity: 1; }
100% { transform: translate(-50%, 70%); opacity: 0; }
}
/* ---- MOBIELE SWIPE ---- */
.scroll-finger {
position: absolute;
top: 50%; /* 🔑 altijd midden */
left: 50%;
transform: translate(-50%, 30%);
width: 16px;
height: 16px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 10px var(--color-scroll-finger-box-shadow);
opacity: 0;
pointer-events: none;
}
/* Trail boven de vinger */
.scroll-finger::after {
content: "";
position: absolute;
left: 50%;
bottom: 100%;
transform: translateX(-50%);
width: 3px;
height: 0;
border-radius: 999px;
background: linear-gradient(
to top,
var(--color-scroll-finger-box-shadow),
rgba(255,255,255,0)
);
opacity: 0;
}
/* Ripple */
.scroll-finger::before {
content: "";
position: absolute;
inset: -6px;
border-radius: 50%;
border: 2px solid var(--color-scroll-finger-box-shadow);
transform: scale(0.6);
opacity: 0;
}
/* Alleen touch */
@media (hover: none) and (pointer: coarse) {
.scroll-dot { display: none; }
.scroll-finger { animation: swipe-up-inside 1.3s ease-in-out infinite; }
.scroll-finger::after { animation: swipe-trail-inside 1.3s ease-in-out infinite; }
.scroll-finger::before { animation: swipe-ripple 1.3s ease-out infinite; }
}
/* ✅ Swipe BINNEN de ovaal */
@keyframes swipe-up-inside {
0% { transform: translate(-50%, 30%); opacity: 0; }
15% { opacity: 1; }
60% { transform: translate(-50%, -20%); opacity: 1; }
100% { transform: translate(-50%, -30%); opacity: 0; }
}
/* Trail groeit mee */
@keyframes swipe-trail-inside {
0% { height: 0; opacity: 0; }
20% { height: 0; opacity: 0; }
60% { height: 18px; opacity: .5; }
100% { height: 26px; opacity: 0; }
}
/* Ripple */
@keyframes swipe-ripple {
0% { opacity: 0; transform: scale(0.6); }
20% { opacity: .6; }
45% { opacity: 0; transform: scale(1); }
100% { opacity: 0; }
}
/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
.scroll-finger,
.scroll-finger::after,
.scroll-finger::before {
animation: none !important;
opacity: .8;
}
}
.chevron {
position: absolute;
width: 28px;
height: 1px;
opacity: 0;
animation: move 3s ease-out infinite;
}
.chevron:first-child {
animation: move 3s ease-out 1s infinite;
}
.chevron:nth-child(2) {
animation: move 3s ease-out 2s infinite;
}
.chevron:before,
.chevron:after {
content: ' ';
position: absolute;
top: 0;
height: 100%;
width: 51%;
background: #fff;
}
.chevron:before {
left: 0;
transform: skew(0deg, 30deg);
}
.chevron:after {
right: 0;
width: 50%;
transform: skew(0deg, -30deg);
}
@keyframes move {
25% {
opacity: 1;
}
33% {
opacity: 1;
transform: translateY(30px);
}
67% {
opacity: 1;
transform: translateY(40px);
}
100% {
opacity: 0;
transform: translateY(55px) ;
}
}
.text {
display: block;
margin-top: 140px;
font-size: 12px;
color: var(--color-mm-grey);
text-transform: uppercase;
white-space: nowrap;
opacity: .25;
animation: pulse 2s linear alternate infinite;
text-shadow: 0 0 6px rgba(255, 255, 255, 0.5),
0 0 12px rgba(0, 0, 0, 0.4);
}
@keyframes pulse {
to {
opacity: 1;
}
}
.logo_intro{
width: 15vw;
}
@media screen and (max-width: 736px) {
.logo_intro{
width: 35vw;
}
}
.viewport-header {
text-align: center;
display: flex;
align-items: center;
justify-content: center;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 150%;
line-height: 1.4;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.viewport-header {
position: relative;
width: 100%;
height: 115vh; /* beeldvullend */
overflow: hidden;
display: flex;
padding-bottom: 15vh;
}
/* container moet de blur-rand afsnijden */
.viewport-header{
position: relative;
overflow: hidden; /* ✅ voorkomt zwarte blur-rand buiten beeld */
}
/* bestaande image (positie blijft exact zoals jij had) */
.viewport-header .header-blogimage{
position: absolute;
width: 130%;
height: 130%;
z-index: 0;
transform: translate(-50%, -5%); /* ✅ blijft hetzelfde */
object-fit: cover;
filter: blur(8px);
/* ✅ Safari fixes */
-webkit-transform: translate(-50%, -5%) translateZ(0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
will-change: transform, filter;
/* ✅ extra WebKit hack tegen zwarte halo */
outline: 1px solid transparent;
}
/* 2) wrapper bedekt de header */
.viewport-header .header-blogimage-overlay {
position: absolute;
inset: 0;
z-index: 1; /* boven de foto, onder de tekst */
pointer-events: none;
}
.mm-hero-pull-indicator {
position: fixed;
left: 50%;
top: max(.7rem, env(safe-area-inset-top, 0px));
z-index: 9999;
width: 5.2rem;
height: 5.2rem;
display: grid;
place-items: center;
pointer-events: none;
opacity: 0;
visibility: hidden;
transform: translate3d(-50%, -6.25rem, 0) scale(.78);
transition: transform 340ms cubic-bezier(.22, 1, .36, 1), opacity 220ms ease;
will-change: transform, opacity;
}
.mm-hero-pull-indicator.is-visible {
opacity: calc(var(--mm-hero-pull-progress, 0) * 1.08);
visibility: visible;
transform: translate3d(-50%, calc(-6.25rem + var(--mm-hero-pull-y, 0px)), 0) scale(calc(.78 + (var(--mm-hero-pull-progress, 0) * .2)));
}
.viewport-header.is-pulling + .mm-hero-pull-indicator,
.mm-hero-pull-indicator.is-pulling {
transition: none;
}
.mm-hero-pull-indicator__badge {
position: relative;
width: 100%;
height: 100%;
display: grid;
place-items: center;
}
.mm-hero-pull-indicator__logo {
width: 2.05rem;
height: 2.05rem;
display: block;
opacity: .9;
}
.mm-hero-pull-indicator__ring {
position: absolute;
inset: 6px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,.12);
border-top-color: rgba(22, 27, 35, .56);
border-right-color: rgba(22, 27, 35, .22);
animation: mmHeroPullSpin 1s linear infinite;
}
@keyframes mmHeroPullSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* 3) overlay zelf (alleen binnen wrapper) */
.viewport-header .header-blogimage-overlay::after {
content: "";
position: absolute;
inset: 0;
background: var(--intro-photo-veil);
}
.viewport-header .header-video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 0;
transform: translate(-50%, -50%);
object-fit: cover; /* vult altijd volledig */
}
.viewport-header .header-overlay {
position: relative;
z-index: 1; /* boven de video */
display: flex;
align-items: center;
justify-content: center;
height: 100%;
color: #fff;
text-align: center;
background: rgba(0,0,0,0.3); /* optionele donkere overlay */
}
.header-ladybug {
position: absolute;
margin-top: -2px;
left: 7px;
}
.header-ladybug img {
height: 20px;
}
@media (max-width: 768px) {
.header-ladybug {
position: absolute;
margin-top: -2px;
left: 1px;
}
.header-ladybug img {
height: 15px;
}
}
.header-giraf {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.header-giraf img {
height: 70vh;
}
@media (max-width: 768px) {
.header-giraf {
position: absolute;
right: 0;
top: 30%;
transform: translateY(-30%);
}
.header-giraf img {
height: 50vh;
}
}
.header-vlinder {
position: absolute;
right: 2em;
top: 2em;
}
.header-vlinder img {
height: 75px;
}
@media (max-width: 768px) {
.header-vlinder {
position: absolute;
right: 2em;
top: 2em;
}
.header-vlinder img {
height: 50px;
}
}
/* Beperk de maximale hoogte van inline afbeeldingen in blogteksten */
.inline-image img {
max-height: 700px;
}
.leestijd{
width: 100%;
text-align: left;
color: var(--color-leestijd);
}
/* Op mobiel laten we de hoogte onbeperkt */
@media (max-width: 768px) {
.inline-image img {
max-height: none;
}
}
.geentoegang{
position: fixed; /* altijd bovenop en blijft staan bij scrollen */
top: -4em;
left: 0;
width: 100%;
height: calc(100% + 4em);
background: rgba(0, 0, 0, 0.6); /* donker laagje */
display: flex;
align-items: center;
justify-content: center;
z-index: 9999; /* zorgt dat hij boven alles staat */
text-align: center;
}
.geentoegang h1{
color: #fff;
}
.author-block {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
width: 100%;
}
.author-info {
display: flex;
align-items: center;
gap: 15px;
}
.author-info img {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
}
.author-info span {
font-size: 0.95em;
font-weight: bold;
color: #999;
}
.author-date {
font-size: 0.95em;
color: #999 ;
white-space: nowrap; /* voorkomt dat de datum afbreekt */
}
.author-date b{
color: #999 ;
}
#blog-view strong, .footer_bottom strong {
color: var(--color-text) !important;
font-family: "San Francisco bold";
}
#blog-view strong {
color: var(--color-text) !important;
font-family: "San Francisco bold";
}
#blog-view hr {
margin-top: 3em;
margin-bottom: 3em;
}
@media (max-width: 768px) {
#blog-view hr {
margin-top: 1em;
margin-bottom: 1em;
}
}
#blog-view ul {
list-style: none;
padding-left: 0;
margin: 0px !important;
}
#blog-view li {
position: relative;
margin-bottom: 15px !important;
font-size: 17px;
line-height: 1.6;
color: var(--color-text);
background-color: #ffffff38;
padding: 1em;
border-radius: var(--radius) !important;
text-align: center;
}
/* Container voor inline afbeeldingen */
#blog-view img.profiel_content {
position: relative;
z-index: 1;
max-height: 600px;
width: 100%;
height: auto;
margin: 0 auto;
display: block;
object-fit: contain;
background-color: transparent;
}
#blog-view figure.inline-image.mm-cms-media--has-max-height .blur-wrapper.mm-cms-media__wrap {
height: min(var(--mm-cms-max-height), 70vh) !important;
max-height: none !important;
border-radius: var(--mm-cms-radius, 20px) !important;
}
#blog-view figure.inline-image.mm-cms-media--has-max-height img.profiel_content.mm-cms-media__img {
max-height: 100% !important;
height: auto !important;
width: auto !important;
border-radius: 0 !important;
}
#blog-view figure.inline-image.mm-cms-media:not(.mm-cms-media--has-max-height),
#blog-view figure.inline-image.mm-cms-media:not(.mm-cms-media--has-max-height) .blur-wrapper.mm-cms-media__wrap,
#blog-view figure.inline-image.mm-cms-media:not(.mm-cms-media--has-max-height) img.profiel_content.mm-cms-media__img {
border-radius: var(--mm-cms-radius, 20px) !important;
}
/* Achtergrond-blur via pseudo-element */
#blog-view img.profiel_content::before {
content: "";
position: absolute;
inset: 0;
background-image: inherit; /* werkt niet direct, zie uitleg onder */
background-size: cover;
background-position: center;
filter: blur(20px);
transform: scale(1.1);
z-index: -1;
}
.blur-wrapper {
position: relative;
width: 100%;
max-height: 600px;
overflow: hidden;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
}
.blur-wrapper::before {
content: '';
position: absolute;
inset: 0;
background: inherit;
background-size: cover;
background-position: center;
filter: blur(20px);
transform: scale(1.1);
z-index: 1;
}
.cms-page-body .mm-media-embed,
.cms-page-content .mm-media-embed {
margin: 1.5rem auto;
}
.cms-page-body__inner {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.cms-page-body .mm-media-embed--image,
.cms-page-content .mm-media-embed--image {
width: min(100%, var(--mm-media-width, 100%));
}
.cms-page-body .mm-media-embed__frame,
.cms-page-content .mm-media-embed__frame {
position: relative;
width: 100%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
isolation: isolate;
border-radius: var(--mm-media-radius, 1.5rem);
background: #0f172a;
}
.cms-page-body .mm-media-embed--image[data-mm-media-max-height]:not([data-mm-media-max-height="0"]) .mm-media-embed__frame,
.cms-page-content .mm-media-embed--image[data-mm-media-max-height]:not([data-mm-media-max-height="0"]) .mm-media-embed__frame,
.cms-page-body .mm-media-embed--image[style*="--mm-media-max-height"] .mm-media-embed__frame,
.cms-page-content .mm-media-embed--image[style*="--mm-media-max-height"] .mm-media-embed__frame {
height: min(var(--mm-media-max-height), 70vh);
}
.cms-page-body .mm-media-embed__blur,
.cms-page-content .mm-media-embed__blur {
position: absolute;
inset: 0;
background-image: var(--mm-media-image);
background-size: cover;
background-position: center;
filter: blur(24px);
transform: scale(1.12);
opacity: 0.94;
}
.cms-page-body .mm-media-embed__picture,
.cms-page-content .mm-media-embed__picture {
position: relative;
z-index: 1;
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
.cms-page-body .mm-media-embed--image[data-mm-media-max-height]:not([data-mm-media-max-height="0"]) .mm-media-embed__picture,
.cms-page-content .mm-media-embed--image[data-mm-media-max-height]:not([data-mm-media-max-height="0"]) .mm-media-embed__picture,
.cms-page-body .mm-media-embed--image[style*="--mm-media-max-height"] .mm-media-embed__picture,
.cms-page-content .mm-media-embed--image[style*="--mm-media-max-height"] .mm-media-embed__picture {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
.cms-page-body .mm-media-embed__image,
.cms-page-content .mm-media-embed__image {
position: relative;
z-index: 1;
display: block;
width: 100%;
height: auto;
max-width: 100%;
border-radius: inherit;
}
.cms-page-body .mm-media-embed--image[data-mm-media-max-height]:not([data-mm-media-max-height="0"]) .mm-media-embed__image,
.cms-page-content .mm-media-embed--image[data-mm-media-max-height]:not([data-mm-media-max-height="0"]) .mm-media-embed__image,
.cms-page-body .mm-media-embed--image[style*="--mm-media-max-height"] .mm-media-embed__image,
.cms-page-content .mm-media-embed--image[style*="--mm-media-max-height"] .mm-media-embed__image {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 0;
}
.cms-page-body .mm-media-embed__caption,
.cms-page-content .mm-media-embed__caption {
margin-top: .85rem;
font-size: .98rem;
text-align: center;
opacity: .8;
}
@media (max-width: 900px) {
.cms-page-body .mm-media-embed--image[data-mm-media-width="100"],
.cms-page-content .mm-media-embed--image[data-mm-media-width="100"],
.cms-page-body figure.mm-media-embed--image[data-mm-media-width="100"],
.cms-page-content figure.mm-media-embed--image[data-mm-media-width="100"],
.cms-page-body .mm-media-embed--image[style*="--mm-media-width:100%"],
.cms-page-content .mm-media-embed--image[style*="--mm-media-width:100%"] {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
left: auto !important;
right: auto !important;
}
.cms-page-body__inner {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
}
/* Desktop: inline foto's met radius */
@media (min-width: 901px) {
#blog-view figure.inline-image:not(.mm-cms-media),
#blog-view figure.inline-image:not(.mm-cms-media) .blur-wrapper,
#blog-view figure.inline-image:not(.mm-cms-media) img.profiel_content {
border-radius: 2em !important;
}
}
/* 📱 Mobiele weergave – geen blur, width 100%, height auto */
@media (max-width: 600px) {
.blur-wrapper::before,
#blog-view img.profiel_content::before {
display: none !important;
}
.blur-wrapper:not(.mm-cms-media__wrap) {
border-radius: 0;
overflow: hidden;
background: none !important;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
#blog-view img.profiel_content:not(.mm-cms-media__img) {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
height: auto !important;
max-height: none !important;
object-fit: contain !important;
background-color: transparent !important;
aspect-ratio: auto !important;
border-radius: 0; /* buiten content → liever geen radius */
}
#blog-intro img {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Mobiel: geen hover-zoom op inline foto's */
#blog-view figure.inline-image img,
#blog-view .blur-wrapper img.profiel_content {
transition: none !important;
transform: none !important;
}
#blog-view figure.inline-image:hover img,
#blog-view figure:hover img {
transform: none !important;
}
#blog-view figure.inline-image.mm-cms-media--has-max-height .blur-wrapper.mm-cms-media__wrap {
background-image: var(--mm-cms-bg) !important;
background-size: cover !important;
background-position: center !important;
height: min(var(--mm-cms-max-height), 70vh) !important;
max-height: none !important;
border-radius: 0 !important;
}
#blog-view figure.inline-image.mm-cms-media--has-max-height .blur-wrapper.mm-cms-media__wrap::before {
display: block !important;
}
#blog-view figure.inline-image.mm-cms-media--has-max-height img.profiel_content.mm-cms-media__img {
width: auto !important;
max-width: 100% !important;
max-height: 100% !important;
height: auto !important;
border-radius: 0 !important;
}
#blog-view figure.inline-image.mm-cms-media,
#blog-view figure.inline-image.mm-cms-media .blur-wrapper.mm-cms-media__wrap,
#blog-view figure.inline-image.mm-cms-media img.profiel_content.mm-cms-media__img {
border-radius: 0 !important;
}
}
#blog-view figure {
margin: 2em 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
#blog-view figure img {
width: 100%;
height: auto;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease;
}
#blog-view figure:hover img {
transform: scale(1.02);
}
#blog-view figcaption {
color: #ffffff;
text-align: center;
font-size: 12px;
z-index: 1;
padding: 0.5em 0.5em;
}
@media (max-width: 600px) {
#blog-view figcaption {
padding: 5px 10px;
margin: 0.8em 05em;
width: calc(100% - 1em);
}
}
.grid-container-blog {
display: grid;
grid-template-columns: 1fr 1fr; /* Twee gelijke kolommen */
gap: 50px; /* Optioneel: ruimte tussen de blokken */
}
.blok-blog {
border-radius: 10px;
}
@media (max-width: 768px) {
.grid-container-blog {
grid-template-columns: 1fr;
}
}
h2, h3, h4, b{
color: #4b4b4b;
}
.pswp-caption h3{
color: #fff !important;
}
h2.dark, h3.dark, h4.dark, b.dark{
color: var(--color-mm-grey);
}
fieldset {
border: 1px solid #999 !important;
border-radius: var(--radius-inner);
padding: 20px;
margin: 20px 0;
width: 100%;
}
legend {
padding: 0em 1em !important;
font-weight: bold;
color: #999 !important;
text-align: center;
}
.rating-blog {
display: grid;
grid-template-columns: 1fr; /* Altijd 1 kolom */
grid-template-rows: auto auto; /* Twee rijen */
width: 100%;
}
.rating-blog {
display: block; /* Zet container in normale block-flow */
}
.rating-blog > div {
display: block; /* Forceer elk item als block */
width: 100%; /* Volledige breedte */
}
.rating-stars {
display: flex;
align-items: center; /* verticaal centreren */
justify-content: center; /* horizontaal centreren */
gap: 10px;
margin: 20px 0;
flex-wrap: wrap;
text-align: center;
}
.rating-stars .star {
font-size: 32px;
color: var(--color-mm-grey);
cursor: pointer;
transition: transform 0.2s ease;
}
.rating-stars .star:hover {
transform: scale(1.2);
}
.rating-stars .star.selected {
color: gold;
}
.rating-blog .avg-score {
font-size: 14px;
color: var(--color-text);
margin-left: 10px;
text-align: center;
}
.share-container {
margin: 0px auto;
}
.share-container h2 {
margin-bottom: 20px;
color: var(--color-text) !important;
}
.share-buttons {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.share-btn {
padding: 10px 18px;
border-radius: var(--radius);
border: none;
font-size: 0.95em;
color: #fff;
background-color: #888;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 10px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 14px rgba(0,0,0,0.1);
}
.share-btn:hover {
transform: translateY(-2px);
opacity: 0.9;
}
.share-btn i {
font-size: 1.2em;
position: relative;
top: 1px;
}
.share-btn.facebook { background-color: #3b5998; }
.share-btn.twitter { background-color: #1da1f2; }
.share-btn.whatsapp { background-color: #25d366; }
.share-btn.copylink { background-color: #444; }
.copy-feedback {
margin-top: 15px;
font-size: 0.9em;
color: green;
display: none;
}
#blog-intro {
margin-top: 50px;
color: #fff !important;
font-style: italic;
}
p.blog-intro{
color: #fff !important;
}
#blog-intro::before {
content: "“";
font-size: 4em;
position: absolute;
left: 20px;
top: -10px;
color: var(--color-yellow);
}
/* Meldingen bij fout/succes */
.reactie-melding {
padding: 1.0em 1.5em;
border-radius: var(--radius);
margin-top: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.reactie-succes {
background: #006600;
color: #fff;
display: inline-block;
margin-bottom: -10px;
}
.reactie-fout {
background: #d21313;
color: #fff;
display: inline-block;
margin-bottom: -10px;
}
/* Emoji-balk boven het reactieveld */
#emoji-bar {
float: left;
padding: 0 2em;
}
#emoji-bar button{
line-height: 2em;
}
@media screen and (max-width: 600px) {
#emoji-bar {
padding: 0 1em;
}
}
#reacties{
margin-top: 2em;
border-radius: var(--radius);
}
@media screen and (max-width: 736px) {
#reacties{
padding-top: 2em;
padding-bottom: 2em;
border-radius: 0;
}
}
.reactie-text-container{
background-color: none;
border-radius: var(--radius-inner);
}
.emoji-button {
background: none;
border: none;
font-size: 22px;
cursor: pointer;
transition: transform 0.2s ease;
margin-right: 5px;
padding: 0px;
box-shadow: inset 0 0 0 0px #000;
}
.emoji-button:hover {
transform: scale(1.2);
background: none;
border: none;
box-shadow: inset 0 0 0 0px #000;
}
#reactieForm textarea, #reactieForm input {
border-radius: var(--radius-inner);
margin-top: 0px !important;
margin-bottom: 1em;
background-color: #fff !important;
color: var(--color-text) !important;
}
#reactieForm textarea {
min-height: 120px;
resize: vertical;
min-height: 200px;
line-height: 25px;
}
@media screen and (max-width: 736px) {
#reactieForm textarea {
padding: 1em;
}
}
.reactie-items {
display: flex;
flex-direction: column;
gap: 15px; /* ruimte tussen reacties */
align-items: flex-start; /* links uitlijnen */
padding: 0;
margin: 0;
list-style: none;
}
@media screen and (max-width: 736px) {
.reactie-items {
gap: 10px; /* ruimte tussen reacties */
}
}
.reactie-item {
display: inline-block;
background-color: #f9f9f9;
border-radius: var(--radius);
padding: 1.5em 2em;
box-shadow: 0 4px 12px rgba(0,0,0,0.04);
position: relative;
min-width: 150px;
word-wrap: break-word;
}
@media screen and (max-width: 736px) {
.reactie-item {
padding: 1.5em;
}
}
/* Netter ballonstaartje linksonder */
.reactie-item::after {
content: "";
position: absolute;
bottom: 15px;
left: -8px;
width: 20px;
height: 20px;
background-color: #f9f9f9;
border-bottom-right-radius: 16px;
transform: rotate(45deg);
box-shadow: -1px 1px 2px rgba(0,0,0,0.03);
}
.reactie-item:nth-child(even) {
background-color: #f9f9f9;
}
.reactie-item:nth-child(odd) {
background-color: #b8d9d1;
}
.reactie-item:nth-child(odd)::after {
background-color: #b8d9d1;
}
.reactie-item:nth-child(even)::after {
background-color: #f9f9f9;
}
/* Alternatief: als je de pijl recht wilt: vervang left: -15px door right: -15px + border-left i.p.v. border-right */
.reactie-items {
list-style: none;
padding: 0;
margin: 0;
}
.reactie-items li {
list-style: none;
}
/* Rest blijft ongewijzigd */
.reactie-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 8px;
gap: 20px; /* 👈 ruimte tussen naam en datum */
}
.reactie-header-left{
justify-content: left;
}
.reactie-header-right{
justify-content: right;
}
@media (max-width: 600px) {
.reactie-header {
gap: 10px;
}
.emoji-button {
margin-right: 2px;
}
}
.reactie-naam {
font-weight: 600;
color: #232323;
font-size: 16px;
}
.reactie-datum {
font-size: 13px;
color: #666;
}
.reactie-tekst {
font-size: 15px;
color: var(--color-reactie-tekst);
white-space: pre-wrap;
margin-top: 20px;
margin-bottom: 0;
}
p.reactie-tekst{
color: var(--color-reactie-tekst-p) !important;
}
.rating-stars .star.selected {
color: gold;
}
.rating-stars .star {
cursor: pointer;
color: #ccc;
transition: color 0.3s ease;
}
.grecaptcha-badge {
bottom: -70px !important;
right: -70px !important;
opacity: 0.2;
z-index: 1;
}
/* Container */
.highlighted-content-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.25em;
align-items: stretch;
margin-top: 1em;
}
.highlighted-content-grid--single {
grid-template-columns: minmax(0, 1fr);
}
.highlighted-blog-wrapper {
display: block;
width: 100%;
border-radius: var(--radius);
overflow: visible;
position: relative;
margin-top: .9rem;
min-width: 0;
text-decoration: none;
color: inherit;
}
/* Figure met blur achtergrond */
.highlighted-blog-figure {
position: relative;
width: 100%;
height: 400px;
border-radius: var(--radius);
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
/* De geblurde achtergrondversie */
.highlighted-blog-blur-img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
filter: blur(30px);
transform: scale(1.1);
z-index: 1;
}
/* De scherpe afbeelding bovenop */
.highlighted-blog-img {
position: relative;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 2;
border-radius: 0;
}
/* Overlay */
.highlighted-blog-overlay {
position: absolute;
inset: 0;
z-index: 3;
display: flex;
flex-direction: column;
/* ✅ tekst onderin */
justify-content: flex-end;
/* netjes gecentreerd */
align-items: center;
/* onderaan wat extra ruimte */
padding: 2.5em 1.5em 2em;
text-align: center;
/* subtiel verloop zodat tekst leesbaar blijft */
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.55),
rgba(0, 0, 0, 0.05)
);
}
/* Titel */
.highlighted-blog-overlay > h2 {
font-size: clamp(1.35rem, 2.15vw, 1.95rem);
margin-bottom: 0.5em;
color: #fff !important;
font-family: 'Raleway', sans-serif;
font-weight: 600;
line-height: 1.12;
text-transform: none;
letter-spacing: 0;
max-width: 10ch;
margin-left: auto;
margin-right: auto;
}
/* Intro */
.highlighted-blog-overlay > .blog-intro {
color: #eee !important;
font-style: italic;
font-size: 1rem;
line-height: 1.45;
margin: 0 !important;
padding: 0 !important;
width: 100%;
max-width: none;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
/* Button */
.highlighted-blog-button {
display: inline-block;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: inset 0 1px 1px rgba(255,255,255,0.4), /* bovenlicht */
inset 0 -1px 4px rgba(0,0,0,0.2), /* onder schaduw */
0 4px 20px rgba(0,0,0,0.1); /* globale schaduw */
background-image: linear-gradient(to bottom, rgba(255,255,255,0.3), rgba(255,255,255,0.05));
color: #fff;
border-radius: var(--radius);
text-decoration: none;
font-weight: bold;
transition: background-color 0.3s ease;
padding: 1.2em 2em;
}
.highlighted-blog-button:hover {
color: #e0e0e0 !important;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.2), /* bovenlicht */
inset 0 -1px 4px rgba(255,255,255,0.4), /* onder schaduw */
0 4px 20px rgba(0,0,0,0.1); /* globale schaduw */
background-image: linear-gradient(to bottom, rgba(255,255,255,0.3), rgba(255,255,255,0.05));
}
/* Mobiel */
@media (max-width: 768px) {
.highlighted-content-grid {
grid-template-columns: 1fr;
gap: 1em;
}
.highlighted-blog-figure {
height: auto;
aspect-ratio: 4 / 5;
}
.highlighted-blog-img {
position: absolute;
inset: 0;
}
.highlighted-blog-overlay > h2 {
font-size: clamp(1.2rem, 6.8vw, 1.65rem);
line-height: 1.14;
max-width: 11ch;
}
.highlighted-blog-overlay > .blog-intro {
font-size: 0.95rem;
width: 100%;
max-width: none;
}
.highlighted-blog-button {
font-size: 0.9em;
}
}
.soort_menu ul {
padding-left: 0;
}
.newpost{
z-index: 9;
}
.soort_menu a{
color: #fff;
text-decoration: none;
line-height: 35px;
font-size: 16px;
}
.soort_menu ul{
text-align: center;
}
.soort_menu li{
list-style: none;
text-transform: uppercase;
padding: 5px 5px;
text-decoration: none;
width: 40px;
height: 40px;
text-shadow: #000000 0px 0 1px;
}
.soort_menu li:hover{
background-color: #000;
border-radius: var(--radius);
color: #fff;
}
#progress-bar {
display: none;
}
#progress-bar.small {
--scrollAmount: 0%;
display: block;
background-color: #0000000f;
width: var(--scrollAmount);
height: 80px;
margin-top: 0px;
top: 1px;
z-index: -1;
}
#progress-bar-container{
position: fixed;
top: 0px;
left: 0;
overflow: hidden;
width: 100%;
height: 63px;
border-radius: var(--radius);
z-index: -1;
}
.logo2{
width: 8em;
}
.logo_gold{
width: 6em;
border-radius: var(--radius);
}
@media screen and (max-width: 736px) {
.account_icon{
font-size: 18px;
position: relative;
text-decoration: none;
top: -60px;
left: 5px;
display: block;
width: 1.5em;
color: #fff;
}
.zoek_header{
display: none;
}
}
.icon_foto{
width: 15px;
margin-right: 3px;
position: absolute;
margin-top: 6px;
}
.icon_foto2{
display: none;
}
.foto_detail-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* mobiel: 3 kolommen */
gap: .65em;
}
.foto_detail-container > :nth-child(4) {
grid-column: 1 / -1; /* vierde item over volledige breedte */
}
/* Desktop (bijv. vanaf 768px): 2 kolommen */
@media (min-width: 768px) {
.foto_detail-container {
gap: 10px;
}
}
.foto_detail{
text-align: center;
color: #fff;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
padding: 0.7em 1em;
display: flex;
justify-content: center; /* horizontaal */
align-items: center; /* verticaal */
border-radius: 12px;
overflow: hidden;
border: 1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.06);
}
.foto_detail i, .foto_detail_fb i{
margin-right: 5px;
color: inherit;
position: relative;
top: 2px;
}
.foto_detail_fb{
text-align: center;
margin-right: 0px;
color: #ffcc00;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
padding: 0.7em 1em;
display: flex;
justify-content: center; /* horizontaal */
align-items: center; /* verticaal */
border-radius: 12px;
overflow: hidden;
border: 1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.06);
}
.scrolldown img{
width: 50px;
}
.profiel{
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
margin-bottom: 20px;
border-radius: var(--radius);
}
.profiel_wrapper {
width: 100%;
max-height: 500px;
height: 500px; /* vaste hoogte voor croppen */
overflow: hidden; /* rest verbergen */
}
.profiel_content {
width: 100%;
height: 700px;
object-fit: cover; /* vult container */
object-position: center;/* cropt vanuit midden */
display: block;
}
@media (max-width: 768px) {
.profiel_wrapper {
height: auto; /* hoogte vloeit mee */
max-height: none;
}
.profiel_content {
height: auto;
object-fit: contain; /* geen croppen op mobiel */
}
}
@media (min-width: 768px) {
#blogfoto{
margin-left: -2rem;
margin-right: -2rem;
width: calc(100% + 4rem);
border-radius: none;
}
}
.layer-container {
display: flex;
width: 100%;
position: relative;
gap: 1em; /* ← hier zet je de gap op 1em */
}
.layer-left {
flex: 0 0 70%;
}
.layer-right {
flex: 0 0 30%;
position: sticky;
top: 84px; /* ← dit zorgt dat hij bovenin blijft hangen */
align-self: flex-start;
padding-right: 1em;
}
@media (max-width: 768px) {
.layer-right {
padding-right: 0em;
}
}
.auteur{
background-color: var(--color-auteur);
border-radius: var(--radius);
width: 100%;
display: flex;
flex-direction: column; /* Onder elkaar */
align-items: center; /* Horizontaal in het midden */
justify-content: center; /* Optioneel: ook verticaal centreren als container een vaste hoogte heeft */
padding: 2em;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}
.auteur h2{
font-family: "Caveat", cursive;
text-transform: none !important;
font-size: 1.5em;
}
.auteur:hover {
padding: 2.5em 2.5em;
}
.auteur img {
border-radius: 100px;
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
max-width: 200px;
display: block;
}
.auteur img {
color: var(--color-mm-grey);
}
.auteur span {
text-align: center;
margin-top: 8px;
font-size: 1em;
color: var(--color-text);
width: 100%;
}
/* Eventueel voor overlay effect */
.layer-container.overlay {
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}
/* Onder 1200px: onder elkaar, eerst links, dan rechts */
@media (max-width: 1199px) {
.layer-container {
flex-direction: column;
}
.layer-left,
.layer-right {
flex: 0 0 auto;
width: 100%;
}
.layer-right {
border-left: none;
margin-bottom: 3em;
}
}
.grid-intro-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1em;
align-items: start;
}
.left-column {
display: flex;
flex-direction: column;
}
.item3 {
display: flex;
height: auto; /* wordt door JS gezet */
}
.item3 img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--radius);
}
/* standaard: light */
.profiel-dark{ display:none; }
/* dark theme actief */
html[data-theme="dark"] .profiel-light{ display:none; }
html[data-theme="dark"] .profiel-dark{ display:block; }
.item4 {
grid-column: 1 / span 2;
color: var(--color-text) !important;
}
.item4 a{
color: var(--color-text) !important;
}
.insta-counter{
margin-left: 0.5em;
border: 1px solid var(--color-text) ;
border-radius: var(--radius);
padding: 0.5em 1em;
color: var(--color-text);
}
@media (max-width: 768px) {
.grid-intro-container {
grid-template-columns: 1fr;
}
.left-column,
.item3,
.item4 {
grid-column: auto;
grid-row: auto;
}
.item3 {
height: auto !important;
}
.item3 img {
height: auto;
}
}
@media (max-width: 768px) {
/* Laat de kinderen van left-column meedoen als grid-items */
.left-column{
display: contents;
}
/* Volgorde op mobiel:
1 = intro (item1)
2 = profielfoto (item3)
3 = blog (het 2e item in left-column)
*/
.left-column > .item.item1{
grid-row: 1;
}
.grid-intro-container > .item3{
grid-row: 2;
}
.left-column > .item:not(.item1){
grid-row: 3;
margin-top: -1em;
}
/* de rest van jouw bestaande mobile-regels mag blijven */
}
@-moz-keyframes spinner {
0% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(359deg);
-webkit-transform: rotate(359deg);
-ms-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@-webkit-keyframes spinner {
0% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(359deg);
-webkit-transform: rotate(359deg);
-ms-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@-ms-keyframes spinner {
0% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(359deg);
-webkit-transform: rotate(359deg);
-ms-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes spinner {
0% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(359deg);
-webkit-transform: rotate(359deg);
-ms-transform: rotate(359deg);
transform: rotate(359deg);
}
}
html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
html, body {
height: 100%;
margin: 0;
overscroll-behavior-y: none; /* belangrijk: voorkomt bounce boven/onder */
overflow-y: none;
}
html {
scroll-behavior: smooth;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, section {
display: block;}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
.lazy-bg {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transition: background-image 0.5s ease-in-out;
}
.view-toggle-blog {
display: flex;
justify-content: flex-end;
column-gap: 10px;
margin-bottom: 25px;
width: fit-content;
margin-left: auto;
}
.view-toggle button {
background-color: transparent;
border: 1px solid var(--color-text);
font-size: 15px;
border-radius: 999px;
cursor: pointer;
transition: all 0.3s ease;
color: var(--color-text) !important;
display: flex;
align-items: center;
gap: 10px;
height: 50px;
}
/* Grid standaard */
.blog-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1em;
margin-top: 20px;
}
@media (max-width: 1100px) {
.blog-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 768px) {
.blog-grid {
grid-template-columns: 1fr;
gap: 1em;
}
.view-toggle-blog {
display: none;
}
.download-datum {
margin: 1em 0em !important;
}
}
/* Lijstweergave */
.blog-grid.list-view {
grid-template-columns: 1fr !important;
gap: 12px !important;
margin-top: 10px;
}
@media (min-width: 769px) {
.blog-grid.list-view {
grid-template-columns: repeat(2, 1fr) !important;
gap: 1em !important;
}
}
.blog-grid.list-view .download-item {
flex-direction: row;
padding: 10px;
border-radius: var(--radius);
align-items: flex-start;
}
.blog-grid.list-view .download-thumb {
flex-shrink: 0;
width: 150px;
height: 100%;
border-radius: var(--radius-inner);
overflow: hidden;
aspect-ratio: unset;
}
.blog-grid.list-view .download-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
clip-path: none;
}
.blog-grid.list-view .download-item > div:not(.download-thumb) {
margin-left: 12px;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.blog-grid.list-view .download-title {
font-size: 14px;
font-weight: 600;
margin-bottom: 2px;
}
.blog-grid.list-view .download-size {
font-size: 12px;
color: var(--color-download-size);
margin-bottom: 8px;
}
.blog-grid.list-view .download-button {
font-size: 16px;
padding: 6px 10px;
border-radius: var(--radius);
background-color: var(--color-mm-grey);
color: #fff;
align-self: flex-start;
}
.blog-grid.list-view .download-button:hover {
background-color: #afac9f;
color: var(--color-mm-grey);
}
.is-hidden {
display: none !important;
}
.mm-active-filters{
margin: .75rem auto 0;
max-width: var(--gallery-max, 1100px);
padding: 0 .75rem;
}
.mm-active-filters__inner{
display: flex;
flex-wrap: wrap;
gap: .5rem;
justify-content: center;
margin-top: 3em;
margin-bottom: 2em;
}
:root{
--mm-badge-height: 34px;
}
.mm-chip{
display: inline-flex;
align-items: center;
gap: .55rem;
padding: .45rem .65rem;
min-height: var(--mm-badge-height);
border-radius: 999px;
border: 1px solid rgba(255,255,255,.18);
background: rgb(133 133 133 / 20%);
text-decoration: none;
color: var(--color-text);
max-width: 100%;
transition: transform .18s ease, background-color .18s ease;
box-sizing: border-box;
}
.mm-chip__txt{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 52vw;
}
.mm-chip__x{
width: 1.35rem;
height: 1.35rem;
border-radius: 999px;
background: #000;
position: relative;
}
.mm-chip__x::before,
.mm-chip__x::after{
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 60%;
height: 1px;
background: #fff;
transform-origin: center;
}
.mm-chip__x::before{
transform: translate(-50%, -50%) rotate(45deg);
}
.mm-chip__x::after{
transform: translate(-50%, -50%) rotate(-45deg);
}
.mm-chip:hover{
background: color-mix(in srgb, var(--pal-dark-3) 24%, transparent);
transform: scale(1.05);
color: var(--color-text);
}
.mm-chip:hover .mm-chip__x{
background: color-mix(in srgb, var(--pal-dark-3) 22%, transparent);
}
.load-more {
display: inline-block;
margin: 15px !important;
padding: 8px 16px;
background: #000;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background 0.3s;
}
.load-more:hover {
background: #444;
}
.download-item.placeholder {
background: #f5f5f5;
border: 2px dashed #ddd;
box-shadow: none;
cursor: default;
}
.download-item.placeholder .placeholder-block {
width: 100%;
height: 100%;
background: repeating-linear-gradient(
45deg,
#eee,
#eee 10px,
#f9f9f9 10px,
#f9f9f9 20px
);
border-radius: var(--radius);
}
.placeholder-item {
background-color: #f3f3f3;
border-radius: var(--radius);
border: 1px dashed #ccc;
height: 100%;
min-height: 200px;
}
.placeholder-thumb {
width: 100%;
aspect-ratio: 4 / 5;
background-color: #e0e0e0;
}
.view-toggle {
display: flex;
justify-content: flex-end;
column-gap: 10px; /* meer ruimte tussen de knoppen */
margin-bottom: 25px;
width: fit-content;
margin-left: auto;
}
.view-toggle button:hover{
transform: translateY(-4px) scale(1.02);
box-shadow: 0 8px 16px rgba(0,0,0,0.08);
border: 1px solid var(--color-text);
color: var(--olor-text) !important;
}
.view-toggle button.active {
background-color: var(--color-mm-grey);
color: #fff !important;
border-color: var(--color-mm-grey);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
/* Downloads view toggle: zelfde richting als profielbutton (subtiel) */
.view-toggle--downloads{
gap: 8px;
margin-bottom: 20px;
}
.view-toggle--downloads button{
min-width: 46px;
width: 46px;
height: 40px;
border-radius: 999px;
padding: 0;
display: grid;
place-items: center;
background: rgba(0,0,0,.08);
border: 1px solid rgba(0,0,0,.14);
color: #21242b !important;
box-shadow: none;
transform: none !important;
}
.view-toggle--downloads button:hover,
.view-toggle--downloads button:focus{
background: rgba(0,0,0,.14);
border-color: rgba(0,0,0,.18);
box-shadow: none;
outline: none;
}
.view-toggle--downloads button.active{
background: rgba(0,0,0,.22);
border-color: rgba(0,0,0,.26);
color: #111315 !important;
box-shadow: none;
}
.view-toggle--downloads button i{
margin: 0 !important;
line-height: 1;
font-size: 14px;
}
html[data-theme="dark"] .view-toggle--downloads button{
background: rgba(255,255,255,.1);
border-color: rgba(255,255,255,.18);
color: #fff !important;
}
html[data-theme="dark"] .view-toggle--downloads button:hover,
html[data-theme="dark"] .view-toggle--downloads button:focus{
background: rgba(255,255,255,.16);
border-color: rgba(255,255,255,.24);
}
html[data-theme="dark"] .view-toggle--downloads button.active{
background: rgba(255,255,255,.24);
border-color: rgba(255,255,255,.3);
color: #fff !important;
}
@media (max-width:768px){
.view-toggle--downloads{
margin-bottom: 14px;
}
.view-toggle--downloads button{
width: 44px;
min-width: 44px;
height: 38px;
}
}
/* Downloads cards redesign (premium split card) */
.download-grid--premium .download-item{
display: grid;
grid-template-columns: 104px 1fr;
align-items: stretch;
gap: 12px;
padding: 10px;
border-radius: 18px;
border: 1px solid rgba(0,0,0,.08);
background: rgba(255,255,255,.78);
box-shadow: none;
transition: transform .22s ease, border-color .22s ease, background-color .22s ease;
}
.download-grid--premium .download-item:hover{
transform: translateY(-2px);
border-color: rgba(0,0,0,.16);
background: rgba(255,255,255,.9);
}
.download-grid--premium .download-thumb{
width: 100%;
height: 100%;
min-height: 104px;
border-radius: 14px;
overflow: hidden;
aspect-ratio: 1 / 1;
}
.download-grid--premium .download-thumb img{
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .35s ease;
}
.download-grid--premium .download-item:hover .download-thumb img{
transform: scale(1.04);
}
.download-grid--premium .download-info{
min-width: 0;
display: grid;
gap: 9px;
align-content: center;
}
.download-grid--premium .download-head{
display: grid;
gap: 5px;
}
.download-grid--premium .download-title{
margin: 0;
font-size: .95rem;
line-height: 1.25;
font-weight: 680;
color: #14161a;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.download-grid--premium .download-updated{
display: inline-flex;
align-items: center;
gap: 6px;
font-size: .77rem;
color: rgba(20,22,26,.62);
}
.download-grid--premium .download-meta-row{
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.download-grid--premium .download-pill{
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
min-height: var(--mm-badge-height);
border-radius: 999px;
border: 1px solid rgba(0,0,0,.12);
background: rgba(0,0,0,.04);
color: #22252b;
font-size: .76rem;
font-weight: 620;
box-sizing: border-box;
}
.download-grid--premium .download-actions{
margin-top: 2px;
display: flex;
}
.download-grid--premium .download-action{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 38px;
padding: 0 14px;
border-radius: 999px;
border: 1px solid rgba(0,0,0,.16);
background: rgba(0,0,0,.08);
color: #14161a !important;
text-decoration: none;
font-size: .8rem;
font-weight: 650;
transition: background-color .2s ease, border-color .2s ease;
}
.download-grid--premium .download-action:hover,
.download-grid--premium .download-action:focus{
background: rgba(0,0,0,.14);
border-color: rgba(0,0,0,.24);
outline: none;
}
.download-grid.download-grid--premium.list-view{
grid-template-columns: 1fr !important;
gap: 10px !important;
}
.download-grid--premium.list-view .download-item{
grid-template-columns: 36px minmax(0,1fr) auto;
gap: 8px;
align-items: center;
padding: 7px 10px;
border-radius: 12px;
width: 100%;
min-height: 50px;
}
.download-grid--premium.list-view .download-item > div:not(.download-thumb){
margin-left: 0;
display: block;
flex: initial;
}
.download-grid--premium.list-view .download-thumb{
width: 100%;
height: 100%;
min-height: 36px;
border-radius: 7px;
}
.download-grid--premium.list-view .download-info{
display: grid;
grid-template-columns: minmax(0,1fr) auto auto;
align-items: center;
gap: 6px;
flex-wrap: nowrap;
width: 100%;
min-width: 0;
}
.download-grid--premium.list-view .download-head{
min-width: 0;
display: block;
gap: 0;
min-width: 0;
}
.download-grid--premium.list-view .download-title{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 1;
font-size: .84rem;
}
.download-grid--premium.list-view .download-updated{
display: none;
}
.download-grid--premium.list-view .download-meta-row{
flex: 0 0 auto;
gap: 6px;
min-width: auto;
flex-wrap: nowrap;
}
.download-grid--premium.list-view .download-pill{
padding: 3px 7px;
font-size: .66rem;
white-space: nowrap;
}
.download-grid--premium.list-view .download-actions{
flex: 0 0 auto;
margin-left: auto;
margin-top: 0;
justify-content: flex-end;
}
.download-grid--premium.list-view .download-action{
min-height: 30px;
padding: 0 10px;
font-size: .7rem;
white-space: nowrap;
width: auto;
}
@media (max-width:768px){
.download-grid--premium .download-item{
grid-template-columns: 92px 1fr;
gap: 10px;
padding: 9px;
border-radius: 16px;
}
.download-grid--premium .download-thumb{
min-height: 92px;
border-radius: 12px;
}
.download-grid--premium .download-title{
font-size: .9rem;
}
.download-grid--premium .download-meta-row{
gap: 6px;
}
.download-grid--premium .download-pill{
padding: 5px 8px;
font-size: .72rem;
}
.download-grid--premium .download-action{
width: 100%;
}
.download-grid.download-grid--premium.list-view{
grid-template-columns: 1fr !important;
}
.download-grid--premium.list-view .download-item{
grid-template-columns: 32px minmax(0,1fr) auto;
gap: 6px;
padding: 6px 8px;
min-height: 44px;
}
.download-grid--premium.list-view .download-thumb{
min-height: 32px;
border-radius: 6px;
}
.download-grid--premium.list-view .download-title{
font-size: .79rem;
}
.download-grid--premium.list-view .download-info{
grid-template-columns: minmax(0,1fr) auto auto;
gap: 5px;
}
.download-grid--premium.list-view .download-meta-row .download-pill:nth-child(n+2){
display: none;
}
.download-grid--premium.list-view .download-pill{
padding: 3px 6px;
font-size: .62rem;
}
.download-grid--premium.list-view .download-actions{
margin-left: auto;
justify-content: flex-end;
}
.download-grid--premium.list-view .download-action{
width: 28px !important;
min-width: 28px;
min-height: 28px;
height: 28px;
padding: 0 !important;
border-radius: 999px;
display: grid !important;
place-items: center;
}
.download-grid--premium.list-view .download-action span{ display:none; }
}
html[data-theme="dark"] .download-grid--premium .download-item{
background: rgba(255,255,255,.07);
border-color: rgba(255,255,255,.13);
}
html[data-theme="dark"] .download-grid--premium .download-item:hover{
background: rgba(255,255,255,.1);
border-color: rgba(255,255,255,.2);
}
html[data-theme="dark"] .download-grid--premium .download-title{
color: #f2f4f8;
}
html[data-theme="dark"] .download-grid--premium .download-updated{
color: rgba(242,244,248,.66);
}
html[data-theme="dark"] .download-grid--premium .download-pill{
border-color: rgba(255,255,255,.16);
background: rgba(255,255,255,.08);
color: #f2f4f8;
}
html[data-theme="dark"] .download-grid--premium .download-action{
border-color: rgba(255,255,255,.18);
background: rgba(255,255,255,.1);
color: #fff !important;
}
html[data-theme="dark"] .download-grid--premium .download-action:hover,
html[data-theme="dark"] .download-grid--premium .download-action:focus{
border-color: rgba(255,255,255,.25);
background: rgba(255,255,255,.16);
}
/* Light/root parity for premium download cards */
html[data-theme="light"] .download-grid--premium .download-item,
html:not([data-theme]) .download-grid--premium .download-item{
background:
linear-gradient(145deg, rgba(255,255,255,.97), rgba(248,242,234,.94)) !important;
border-color: rgba(86,78,66,.12) !important;
box-shadow: 0 8px 18px rgba(70,60,48,.10);
}
html[data-theme="light"] .download-grid--premium .download-item:hover,
html:not([data-theme]) .download-grid--premium .download-item:hover{
background:
linear-gradient(145deg, rgba(255,255,255,.99), rgba(250,246,239,.97)) !important;
border-color: rgba(86,78,66,.22) !important;
box-shadow: 0 12px 24px rgba(70,60,48,.14);
}
html[data-theme="light"] .download-grid--premium .download-title,
html:not([data-theme]) .download-grid--premium .download-title{
color: #342d22;
}
html[data-theme="light"] .download-grid--premium .download-updated,
html:not([data-theme]) .download-grid--premium .download-updated{
color: rgba(86,78,66,.70);
}
html[data-theme="light"] .download-grid--premium .download-pill,
html:not([data-theme]) .download-grid--premium .download-pill{
border-color: rgba(86,78,66,.16);
background: rgba(249,244,236,.94);
color: #342d22;
}
html[data-theme="light"] .download-grid--premium .download-action,
html:not([data-theme]) .download-grid--premium .download-action{
border-color: rgba(86,78,66,.22);
background: rgba(247,241,232,.96);
color: #342d22 !important;
}
html[data-theme="light"] .download-grid--premium .download-action:hover,
html[data-theme="light"] .download-grid--premium .download-action:focus,
html:not([data-theme]) .download-grid--premium .download-action:hover,
html:not([data-theme]) .download-grid--premium .download-action:focus{
border-color: rgba(86,78,66,.30);
background: rgba(252,247,240,.98);
}
/* Hard override: echte lijstweergave = 1 horizontale rij per item */
.download-grid.download-grid--premium.list-view .download-item{
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 10px !important;
width: 100% !important;
min-height: 56px;
padding: 8px 10px !important;
}
.download-grid.download-grid--premium.list-view .download-thumb{
flex: 0 0 40px !important;
width: 40px !important;
height: 40px !important;
min-height: 40px !important;
border-radius: 7px !important;
}
.download-grid.download-grid--premium.list-view .download-info{
flex: 1 1 auto !important;
min-width: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 10px !important;
align-content: normal !important;
flex-wrap: nowrap !important;
white-space: nowrap !important;
overflow: hidden !important;
}
.download-grid.download-grid--premium.list-view .download-head{
flex: 1 1 auto !important;
min-width: 0 !important;
display: flex !important;
align-items: center !important;
height: 100% !important;
}
.download-grid.download-grid--premium.list-view .download-title{
display: block !important;
text-align: left !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
font-size: .86rem !important;
margin: 0 !important;
line-height: 1.2 !important;
}
.download-grid.download-grid--premium.list-view .download-updated{
display: none !important;
}
.download-grid.download-grid--premium.list-view .download-meta-row{
flex: 0 0 auto !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
flex-wrap: nowrap !important;
white-space: nowrap !important;
overflow: hidden !important;
}
.download-grid.download-grid--premium.list-view .download-meta-row .download-pill:nth-child(n+2){
display: none !important;
}
.download-grid.download-grid--premium.list-view .download-pill{
padding: 3px 7px !important;
font-size: .66rem !important;
}
.download-grid.download-grid--premium.list-view .download-actions{
flex: 0 0 auto !important;
margin-left: auto !important;
white-space: nowrap !important;
}
.download-grid.download-grid--premium.list-view .download-action{
min-height: 30px !important;
height: 30px !important;
padding: 0 10px !important;
font-size: .7rem !important;
white-space: nowrap !important;
}
@media (max-width:768px){
.download-grid.download-grid--premium.list-view .download-item{
gap: 8px !important;
min-height: 50px;
padding: 7px 8px !important;
}
.download-grid.download-grid--premium.list-view .download-thumb{
flex: 0 0 34px !important;
width: 34px !important;
height: 34px !important;
min-height: 34px !important;
}
.download-grid.download-grid--premium.list-view .download-meta-row .download-pill:nth-child(n+2){
display: none !important;
}
.download-grid.download-grid--premium.list-view .download-action{
width: 28px !important;
min-width: 28px !important;
padding: 0 !important;
display: grid !important;
place-items: center !important;
}
.download-grid.download-grid--premium.list-view .download-action span{
display: none !important;
}
}
/* Definitief: list-view als echte rijweergave (tabel-achtig) */
.download-grid.download-grid--premium.list-view .download-item{
display: grid !important;
grid-template-columns: 42px minmax(0,1fr) auto auto auto;
align-items: center !important;
column-gap: 10px !important;
row-gap: 0 !important;
min-height: 56px !important;
padding: 7px 10px !important;
border-radius: 10px !important;
}
.download-grid.download-grid--premium.list-view .download-thumb{
grid-column: 1;
width: 42px !important;
height: 42px !important;
min-height: 42px !important;
border-radius: 6px !important;
align-self: center !important;
}
.download-grid.download-grid--premium.list-view .download-item > div:not(.download-thumb){
margin-left: 0 !important;
display: contents !important;
}
.download-grid.download-grid--premium.list-view .download-info{
display: contents !important;
}
.download-grid.download-grid--premium.list-view .download-head{
grid-column: 2;
min-width: 0 !important;
align-self: center !important;
}
.download-grid.download-grid--premium.list-view .download-title{
font-size: .83rem !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
text-align: left !important;
}
.download-grid.download-grid--premium.list-view .download-updated{
display: none !important;
}
.download-grid.download-grid--premium.list-view .download-meta-row{
display: contents !important;
}
.download-grid.download-grid--premium.list-view .download-meta-row .download-pill{
padding: 3px 7px !important;
font-size: .64rem !important;
white-space: nowrap !important;
}
.download-grid.download-grid--premium.list-view .download-meta-row .download-pill:nth-child(1){
grid-column: 3;
align-self: center !important;
}
.download-grid.download-grid--premium.list-view .download-meta-row .download-pill:nth-child(2){
grid-column: 4;
align-self: center !important;
}
.download-grid.download-grid--premium.list-view .download-actions{
grid-column: 5;
margin-left: 0 !important;
justify-self: end !important;
align-self: center !important;
}
.download-grid.download-grid--premium.list-view .download-action{
min-height: 28px !important;
height: 28px !important;
padding: 0 10px !important;
font-size: .68rem !important;
white-space: nowrap !important;
}
@media (max-width:900px){
.download-grid.download-grid--premium.list-view .download-item{
grid-template-columns: 36px minmax(0,1fr) auto auto !important;
column-gap: 8px !important;
padding: 6px 8px !important;
}
.download-grid.download-grid--premium.list-view .download-thumb{
width: 36px !important;
height: 36px !important;
min-height: 36px !important;
}
.download-grid.download-grid--premium.list-view .download-meta-row .download-pill:nth-child(2){
display: none !important;
}
.download-grid.download-grid--premium.list-view .download-actions{
grid-column: 4 !important;
}
}
/* Voor mobiel blijft 1 kolom behouden */
.download-grid.list-view {
grid-template-columns: 1fr !important;
gap: 12px !important;
margin-top: 10px;
}
/* Vanaf 769px breed: 2 items naast elkaar in lijstweergave */
@media (min-width: 600px) {
.download-grid.list-view {
display: grid;
grid-template-columns: repeat(2, 1fr) !important;
gap: 1em !important;
}
}
@media (min-width: 1000px) {
.download-grid.list-view {
display: grid;
grid-template-columns: repeat(3, 1fr) !important;
gap: 1em !important;
}
}
.download-grid.list-view .download-item {
flex-direction: row;
padding: 10px;
border-radius: var(--radius);
align-items: flex-start;
}
.download-grid.list-view .download-thumb {
flex-shrink: 0;
width: 80px;
height: 80px;
border-radius: var(--radius-inner);
overflow: hidden;
aspect-ratio: unset;
}
.download-grid.list-view .download-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
clip-path: none;
}
.download-grid.list-view .download-item > div:not(.download-thumb) {
margin-left: 12px;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center; /* verticale uitlijning */
}
.download-grid.list-view .download-title {
font-size: 14px;
font-weight: 600;
margin-bottom: 2px;
display: inline-block; /* deze regel toevoegen */
}
.download-grid.list-view .download-size {
font-size: 12px;
color: var(--color-download-size);
margin-bottom: 8px;
}
.download-grid.list-view .aantal-overlay {
position: absolute;
top: 5px;
right: 5px;
background: rgba(0,0,0,0.75);
color: #fff;
font-size: 13px;
font-weight: bold;
padding: 4px 10px;
border-radius: var(--radius);
z-index: 2;
}
.download-grid.list-view .download-button {
font-size: 16px;
padding: 6px 10px;
background-color: var(--color-mm-grey);
margin-bottom: 0;
margin-right: 0;
color: #fff;
align-self: flex-start;
border-radius: var(--radius);
}
.download-grid.list-view .download-button:hover {
background-color: #afac9f;
color: var(--color-mm-grey);
}
.download-grid.list-view .download-button i {
margin: 0;
}
.download-grid.list-view .download-button::after {
content: none;
}
/* Lijstweergave met 2 kolommen vanaf 768px breed */
@media (min-width: 600px) {
.download-grid.list-view {
display: grid;
grid-template-columns: repeat(2, 1fr); /* 2 items naast elkaar */
gap: 16px;
}
.download-grid.list-view .download-item {
flex-direction: row;
padding: 12px;
align-items: flex-start;
}
.download-grid.list-view .download-thumb {
width: 100px;
height: 100px;
}
.download-grid.list-view .download-title {
font-size: 15px;
}
.download-grid.list-view .download-size {
font-size: 13px;
}
.download-grid.list-view .download-button {
font-size: 14px;
}
}
@media (min-width: 1000px) {
.download-grid.list-view {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 2 items naast elkaar */
gap: 1em;
}
}
/* ====== Nieuw-badge specifieke plaatsing in lijstweergave ====== */
.download-grid.list-view .download-thumb {
position: relative; /* zorg dat de badge binnen de thumb blijft */
}
.download-grid.list-view .badge-new {
top: 5px;
left: auto;
right: 5px;
transform: none;
font-size: 11px;
padding: 5px 8px;
box-shadow: 0 4px 12px rgba(14,165,233,0.25);
z-index: 3; /* boven de aantal-overlay */
}
.download-grid.list-view .aantal-overlay {
bottom: 5px;
top: auto;
right: 5px;
z-index: 2;
}
/* Iets ruimer op grotere schermen */
@media (min-width: 600px) {
.download-grid.list-view .badge-new {
top: 8px;
right: 8px;
font-size: 12px;
padding: 6px 10px;
}
}
/* Op brede schermen blijft hij mooi in balans */
@media (min-width: 1000px) {
.download-grid.list-view .badge-new {
top: 10px;
right: 10px;
}
.download-grid.list-view .aantal-overlay {
bottom: 10px;
right: 10px;
}
}
.download-thumb {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
}
.download-thumb { position: relative; }
/* Subtiele puls (optioneel) */
.badge-new::after{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
box-shadow:0 0 0 0 rgba(14,165,233,.45);
animation:newPulseDl 2.4s ease-out infinite;
pointer-events:none;
}
@keyframes newPulseDl{
0%{ box-shadow:0 0 0 0 rgba(14,165,233,.45); }
70%{ box-shadow:0 0 0 12px rgba(14,165,233,0); }
100%{ box-shadow:0 0 0 0 rgba(14,165,233,0); }
}
/* ====== NIEUW: Badge voor foto's ====== */
.badge-new-foto {
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
width: 10px;
height: 10px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 10px rgba(255, 255, 255, .5), 0 4px 15px rgba(0, 0, 0, .15);
display: inline-block;
user-select: none;
pointer-events: none;
}
/* Puls animatie (subtiel wit licht) */
.badge-new-foto::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: 0 0 0 0 rgba(255,255,255,.6);
animation: newPulseFoto 2.4s ease-out infinite;
}
@keyframes newPulseFoto {
0% { box-shadow: 0 0 0 0 rgba(255,255,255,.6); }
70% { box-shadow: 0 0 0 10px rgba(255,255,255,0); }
100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
@media (max-width: 768px) {
.download-thumb {
aspect-ratio: 1 / 1;
}
}
.download-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.aantal-overlay {
position: absolute;
top: 15px;
right: 15px;
background: rgba(0,0,0,0.75);
color: #fff;
font-size: 13px;
font-weight: bold;
padding: 4px 10px;
border-radius: var(--radius);
z-index: 2;
}
.download-grid {
display: grid;
grid-template-columns: repeat(5, 1fr); /* standaard: 5 kolommen op grote schermen */
gap: 1em;
margin-top: 20px;
}
@media (max-width: 1400px) {
.download-grid {
grid-template-columns: repeat(4, 1fr); /* brede laptops/desktops */
}
}
@media (max-width: 1100px) {
.download-grid {
grid-template-columns: repeat(3, 1fr); /* tablets en kleinere laptops */
}
}
/* Premium downloads: max 4 kolommen zodat card-content niet verdrukt */
.download-grid.download-grid--premium:not(.list-view){
grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1280px){
.download-grid.download-grid--premium:not(.list-view){
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 860px){
.download-grid.download-grid--premium:not(.list-view){
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 560px){
.download-grid.download-grid--premium:not(.list-view){
grid-template-columns: 1fr;
}
}
.blog-card {
position: relative;
height: 440px;
background-size: cover;
background-position: center;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
align-items: flex-end;
}
.badge-new {
position: absolute;
top: 2em;
left: 2em;
z-index: 2;
display: inline-block;
font-size: 12px;
line-height: 1;
font-weight: 700;
letter-spacing: .02em;
text-transform: uppercase;
background: #ff3b30; /* warm rood */
color: #fff;
padding: 8px 10px;
border-radius: 999px;
box-shadow: 0 8px 20px rgba(255, 59, 48, .25);
user-select: none;
}
/* Optioneel: lichte 'pulse' om aandacht te trekken, niet te schreeuwerig */
.badge-new::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.45);
animation: newPulse 2.4s ease-out infinite;
pointer-events: none;
}
@keyframes newPulse {
0% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.45); }
70% { box-shadow: 0 0 0 12px rgba(255, 59, 48, 0); }
100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); }
}
.blog-card:hover {
transform: scale(1.02);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}
.blog-card .content {
background: rgba(255, 255, 255, 0.75);
backdrop-filter: blur(6px);
width: 100%;
padding: 1.2rem;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
transition: background 0.3s ease;
}
.blog-card h2 {
margin: 0;
font-size: 1.2rem;
color: #111;
font-family: 'Raleway', sans-serif;
font-weight: 600;
text-transform: none;
letter-spacing: 0;
}
.blog-card .date {
font-size: 0.85rem;
color: #555;
margin-bottom: 0.5rem;
}
.blog-card .intro {
font-size: 0.95rem;
color: #333;
line-height: 1.5;
}
.blog-card .stretched-link {
position: absolute;
inset: 0;
z-index: 1;
}
/* Fade-in animatie bij laden */
.download-item {
display: flex;
flex-direction: column;
height: 100%;
border: 1px solid transparent;
border-radius: var(--radius);
overflow: hidden;
background-color: var(--color-download-item);
transition: transform 0.3s ease, box-shadow 0.3s ease;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
/* Actieve animatie zodra zichtbaar */
.download-item.visible {
opacity: 1;
transform: translateY(0);
}
/* Hover effect op het hele item */
.download-item:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 8px 16px rgba(0,0,0,0.08);
border: 1px solid #aaaaaa;
}
/* Root/light: download-items iets rustiger en beter passend */
html[data-theme="light"] .download-item,
html:not([data-theme]) .download-item{
background:
linear-gradient(145deg, rgba(255,255,255,.92), rgba(243,248,255,.90)) !important;
border-color: rgba(86,78,66,.10) !important;
}
html[data-theme="light"] .download-item:hover,
html:not([data-theme]) .download-item:hover{
border-color: rgba(86,78,66,.18) !important;
box-shadow: 0 10px 20px rgba(70,60,48,.12);
}
html[data-theme="light"] .download-size,
html:not([data-theme]) .download-size{
color: rgba(86,78,66,.70) !important;
}
.download-item img {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
display: block;
}
.download-item { position: relative; }
/* Onzichtbaar anker dat het hele item klikbaar maakt */
.download-item .stretched-link {
position: static; /* geen visuele impact */
text-decoration: none; /* geen onderstreping */
color: inherit; /* geen kleurverandering */
}
.download-item .stretched-link::after {
content: "";
position: absolute;
inset: 0; /* bedek hele kaart */
z-index: 1; /* onder de knop, boven de content */
}
/* Zorg dat je bestaande knop boven de stretched link ligt */
.download-item .download-button {
position: relative;
z-index: 2;
}
.download-title {
font-weight: bold;
font-size: 16px;
padding: 20px 15px 0px;
color: #000;
}
.download-size {
font-size: 14px;
color: var(--color-download-size);
padding: 0 15px 20px;
}
.download-datum {
font-size: 14px;
color: #fff;
background-color: #ffffff40;
border: 1px solid rgb(27, 27, 25)40;
display: block;
text-align: center;
padding: 0.5em 1em;
margin: 1em;
border-radius: var(--radius-inner);
}
.download-intro {
font-size: 14px;
color: #fff;
padding: 15px 15px 20px;
}
.gal-more {
display: flex;
justify-content: center; /* horizontaal perfect centreren */
align-items: center; /* optioneel: verticaal centreren */
flex-direction: column;
margin-top: 1em;
text-align: center; /* fallback voor oudere browsers */
}
/* =========================================
LOAD MORE BUTTON
========================================= */
.loadmore-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0.55em 1.25em;
border: 1px solid rgba(25, 36, 58, .16);
background:
linear-gradient(135deg, rgba(169,160,146,.28), rgba(147,138,124,.24) 52%, rgba(182,172,156,.22)),
rgba(255,255,255,.42);
color: var(--color-text);
font-weight: 500;
text-decoration: none;
border-radius: var(--radius);
transition: transform .18s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, filter .2s ease;
text-transform: uppercase;
overflow: hidden;
z-index: 0;
box-shadow: 0 8px 18px rgba(70,60,48,.20);
font-size: 0.9em;
letter-spacing: 0.1em;
line-height: 2.7em;
}
.loadmore-button b {
z-index: 2;
color: inherit;
}
.loadmore-button i {
color: inherit;
z-index: 2;
font-size: 20px;
line-height: 1;
position: relative;
top: 1px; /* kleine correctie om icoon en tekst exact gelijk te krijgen */
}
.loadmore-button:hover {
transform: translateY(-1px);
background:
linear-gradient(135deg, rgba(169,160,146,.38), rgba(147,138,124,.34) 52%, rgba(182,172,156,.30)),
rgba(255,255,255,.52);
border-color: rgba(86,78,66,.24);
box-shadow: 0 10px 22px rgba(70,60,48,.24);
}
.loadmore-button:active{
transform: translateY(1px);
}
/* =========================================
STATUS: "Alle foto's zijn geladen"
========================================= */
/* Statuscontainer */
#gal-status{
display:inline-flex; /* tekst + knop naast elkaar */
align-items:center; /* perfecte verticale uitlijning */
justify-content:center;
gap:.85em; /* ruimte tussen tekst en knop */
color: var(--color-catline);
margin-top:.85rem;
opacity:0;
transform:translateY(6px);
transition:opacity .35s ease, transform .35s ease;
font-weight:500;
user-select:none;
pointer-events:none; /* niet klikbaar totdat .show */
background-color:var(--color-gal-status);
border-radius:var(--radius);
padding:.18em 4.45em .18em 1.15em;
font-size:.9em;
line-height:3.05556em;
min-height:3.15em;
box-sizing:border-box;
white-space:nowrap;
position:relative;
}
#gal-status.show{
opacity:1;
transform:translateY(0);
margin-bottom:6em !important;
pointer-events:auto; /* klikbaar wanneer zichtbaar */
}
#gal-status .fi{
font-size:1.1em;
color:#4caf50;
position:relative;
top:1px;
margin-right:.1rem;
flex:0 0 auto;
}
#gal-status .status-text{
line-height:1.35;
}
/* Perfect ronde refresh-knop naast de tekst */
#gal-status .refresh-btn{
display:inline-flex;
align-items:center;
justify-content:center;
width:2.7em; /* iets compacter zodat de pil mooier in balans blijft */
height:2.7em;
min-width:2.7em;
min-height:2.7em;
padding:0;
border-radius:50%;
background:#4caf50;
color:#fff;
text-decoration:none;
transition:transform .25s ease, background .25s ease;
flex:0 0 auto; /* niet meeschalen met tekst */
aspect-ratio:1 / 1;
box-sizing:border-box;
position:absolute;
right:.45em;
top:50%;
transform:translateY(-50%);
}
#gal-status .refresh-btn:hover{
background:#43a047; /* iets donkerder groen */
transform:translateY(-50%) rotate(90deg) scale(1.06);
}
#gal-status .refresh-btn i{
line-height:1;
margin:0;
pointer-events:none;
position:static;
top:auto;
font-size:1.05em;
}
/* ===== Gallery › Categorie – Alle categorieën ===== */
#catline-free {
margin: 1.5rem 0 2rem;
text-align: center;
font-size: .95rem;
color: var(--color-catline);
letter-spacing: .01em;
}
#catline-free .lead {
opacity: .85;
font-weight: 600;
}
#catline-free .sep {
opacity: .55;
margin: 0 .4rem;
user-select: none;
}
#catline-free .sep.arrow::after { content: "›"; }
#catline-free .sep.dash::after { content: "–"; }
#catline-free .cat-label {
font-weight: 500;
}
#catline-free .tail-nowrap {
white-space: nowrap; /* voorkomt afbreken */
}
#catline-free a {
font-weight: 600;
text-decoration: underline;
color: inherit;
}
#catline-free a:hover {
opacity: .8;
}
/* ===============================
GEEN RESULTATEN - STYLING
=============================== */
.no-results {
text-align: center;
padding: 6rem 1.5rem;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1.2rem;
animation: fadeInUp .6s ease both;
margin-top: 15em;
}
.no-results-icon {
font-size: 4.5rem;
color: #464646;
background: rgba(0, 0, 0, 0.05);
border-radius: 50%;
padding: 1.2rem;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07);
}
.no-results h2 {
font-size: 1.5rem;
font-weight: 600;
margin: 0;
color: #fff !important;
}
.no-results p {
color: #fff;
font-size: 1rem;
max-width: 380px;
line-height: 1.6;
}
.no-results-btn {
display: inline-flex;
align-items: center;
gap: .4rem;
margin-top: .5rem;
background: #464646;
color: #fff;
text-decoration: none;
padding: .7rem 1.2rem;
border-radius: 999px;
font-weight: 500;
transition: background .3s ease, transform .2s ease;
}
.no-results-btn:hover {
background: #fff;
transform: translateY(-2px);
color: #464646 !important;
}
.no-results-btn .fi {
font-size: 1.1em;
}
/* subtiele animatie */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(15px); }
to { opacity: 1; transform: translateY(0); }
}
/* ===============================
CENTREREN BINNEN GALLERY-MASONRY
=============================== */
#main.gallery-masonry {
display: grid; /* zorgt dat we grid positioning kunnen gebruiken */
place-items: center; /* centreert horizontaal én verticaal */
min-height: 60vh; /* zodat het midden zichtbaar is bij lege resultaten */
gap: 0px;
background-color: var(--color-content-gallery);
}
#main.gallery-masonry .no-results {
grid-column: 1 / -1; /* over alle kolommen */
justify-self: center; /* horizontaal centreren binnen grid */
align-self: center; /* verticaal centreren binnen grid */
width: min(600px, 90%); /* vriendelijk schalend op mobiel */
box-sizing: border-box;
}
/* Minder animatie voor mensen met voorkeur */
@media (prefers-reduced-motion: reduce) {
#gal-status {
transition: none;
transform: none;
}
}
.download-button {
position: relative;
margin-top: auto;
background-color: var(--color-mm-grey);
color: #fff;
text-align: center;
padding: 12px;
font-weight: bold;
text-decoration: none;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 15px;
border-radius: var(--radius-inner);
transition: background 0.3s ease, transform 0.2s ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
overflow: hidden;
z-index: 0;
}
/* Final override: premium list-view verticale uitlijning */
.download-grid.download-grid--premium.list-view .download-item{
align-items: center !important;
}
.download-grid.download-grid--premium.list-view .download-head{
display: flex !important;
align-items: center !important;
min-height: 32px !important;
}
.download-grid.download-grid--premium.list-view .download-title{
display: flex !important;
align-items: center !important;
min-height: 32px !important;
margin: 0 !important;
}
/* Absolute override: premium downloads list = 1 row, centered */
.download-grid.download-grid--premium.list-view .download-item{
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
min-height: 58px !important;
gap: 10px !important;
padding: 7px 10px !important;
}
.download-grid.download-grid--premium.list-view .download-thumb{
flex: 0 0 44px !important;
width: 44px !important;
height: 44px !important;
min-height: 44px !important;
border-radius: 7px !important;
}
.download-grid.download-grid--premium.list-view .download-item > div:not(.download-thumb){
margin-left: 0 !important;
}
.download-grid.download-grid--premium.list-view .download-info{
display: flex !important;
flex: 1 1 auto !important;
min-width: 0 !important;
align-items: center !important;
justify-content: flex-start !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 10px !important;
white-space: nowrap !important;
overflow: hidden !important;
}
.download-grid.download-grid--premium.list-view .download-head{
display: block !important;
flex: 1 1 auto !important;
min-width: 0 !important;
}
.download-grid.download-grid--premium.list-view .download-title{
display: block !important;
font-size: .85rem !important;
line-height: 1.2 !important;
margin: 0 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.download-grid.download-grid--premium.list-view .download-updated{
display: none !important;
}
.download-grid.download-grid--premium.list-view .download-meta-row{
display: inline-flex !important;
flex: 0 0 auto !important;
align-items: center !important;
flex-wrap: nowrap !important;
gap: 6px !important;
}
.download-grid.download-grid--premium.list-view .download-meta-row .download-pill:nth-child(n+2){
display: none !important;
}
.download-grid.download-grid--premium.list-view .download-pill{
padding: 3px 7px !important;
font-size: .66rem !important;
}
.download-grid.download-grid--premium.list-view .download-actions{
display: flex !important;
align-items: center !important;
margin-left: auto !important;
flex: 0 0 auto !important;
}
.download-grid.download-grid--premium.list-view .download-action{
min-height: 30px !important;
height: 30px !important;
padding: 0 10px !important;
font-size: .69rem !important;
}
@media (max-width:900px){
.download-grid.download-grid--premium.list-view .download-item{
min-height: 52px !important;
gap: 8px !important;
padding: 6px 8px !important;
}
.download-grid.download-grid--premium.list-view .download-thumb{
flex-basis: 38px !important;
width: 38px !important;
height: 38px !important;
min-height: 38px !important;
}
.download-grid.download-grid--premium.list-view .download-title{
font-size: .8rem !important;
}
.download-grid.download-grid--premium.list-view .download-action{
width: 28px !important;
min-width: 28px !important;
padding: 0 !important;
display: grid !important;
place-items: center !important;
}
.download-grid.download-grid--premium.list-view .download-action span{
display: none !important;
}
}
/* Mobiel fix: thumbnail in premium list-view moet volledige itemhoogte vullen */
@media (max-width:768px){
.download-grid.download-grid--premium.list-view .download-item{
align-items: stretch !important;
}
.download-grid.download-grid--premium.list-view .download-thumb{
align-self: stretch !important;
height: auto !important;
min-height: 100% !important;
aspect-ratio: auto !important;
overflow: hidden !important;
}
.download-grid.download-grid--premium.list-view .download-thumb img{
height: 100% !important;
}
}
.download-button b{
display: block;
z-index: 2;
color: #fff;
}
.download-button i {
color: #fff;
z-index: 2;
margin: 0;
position: static; /* niet absoluut gepositioneerd */
font-size: 20px; /* optioneel, naar wens aanpassen */
margin-top: 5px;
}
.download-button:hover {
transform: scale(1.05);
}
.download-button2 {
float: right;
position: relative;
margin-top: auto;
border: 1px solid rgba(25, 36, 58, .14);
background:
linear-gradient(135deg, rgba(166,163,154,.24), rgba(150,148,140,.20) 52%, rgba(181,177,167,.18)),
rgba(255,255,255,.42);
color: var(--color-text);
text-align: center;
text-decoration: none;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 15px;
transition: transform .18s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, filter .2s ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
overflow: hidden;
z-index: 0;
font-size: 0.9em;
letter-spacing: 0.1em;
line-height: 3.05556em;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
margin: 0 auto;
padding: 0.1em 2em;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 8px 18px rgba(60,56,49,.18);
border-radius: var(--radius);
}
.download-button2 b{
display: block;
z-index: 2;
color: inherit;
}
.download-button2 i {
color: inherit;
z-index: 2;
margin: 0;
position: static; /* niet absoluut gepositioneerd */
font-size: 25px; /* optioneel, naar wens aanpassen */
position: relative;
margin-top: 3px;
}
.download-button2:hover {
transform: translateY(-1px);
background:
linear-gradient(135deg, rgba(166,163,154,.34), rgba(150,148,140,.30) 52%, rgba(181,177,167,.26)),
rgba(255,255,255,.52);
border-color: rgba(86,78,66,.22);
box-shadow: 0 10px 22px rgba(60,56,49,.22);
}
.download-button2:active{
transform: translateY(1px);
}
html[data-theme="dark"] .loadmore-button,
html[data-theme="dark"] .download-button2{
border-color: rgba(204,196,182,.34);
background:
linear-gradient(135deg, rgba(78,79,83,.58), rgba(58,59,62,.52) 52%, rgba(91,93,98,.42)),
rgba(255,255,255,.05);
color: rgba(247,243,232,.98);
box-shadow: 0 8px 18px rgba(10,11,12,.40);
}
html[data-theme="dark"] .loadmore-button:hover,
html[data-theme="dark"] .download-button2:hover{
background:
linear-gradient(135deg, rgba(92,93,97,.62), rgba(67,68,72,.56) 52%, rgba(106,108,113,.46)),
rgba(255,255,255,.07);
border-color: rgba(204,196,182,.44);
box-shadow: 0 10px 22px rgba(10,11,12,.46);
}
@media (prefers-color-scheme: dark){
html:not([data-theme]) .loadmore-button,
html[data-theme="auto"] .loadmore-button,
html:not([data-theme]) .download-button2,
html[data-theme="auto"] .download-button2{
border-color: rgba(204,196,182,.34);
background:
linear-gradient(135deg, rgba(78,79,83,.58), rgba(58,59,62,.52) 52%, rgba(91,93,98,.42)),
rgba(255,255,255,.05);
color: rgba(247,243,232,.98);
box-shadow: 0 8px 18px rgba(10,11,12,.40);
}
html:not([data-theme]) .loadmore-button:hover,
html[data-theme="auto"] .loadmore-button:hover,
html:not([data-theme]) .download-button2:hover,
html[data-theme="auto"] .download-button2:hover{
background:
linear-gradient(135deg, rgba(92,93,97,.62), rgba(67,68,72,.56) 52%, rgba(106,108,113,.46)),
rgba(255,255,255,.07);
border-color: rgba(204,196,182,.44);
box-shadow: 0 10px 22px rgba(10,11,12,.46);
}
}
/* Golf-animatie */
@keyframes waves {
0% {
margin-left: 0;
}
100% {
margin-left: -1600px;
}
}
@media (max-width: 768px) {
.view-toggle {
display: none;
}
/* Intro spacing (zoals je al had) */
.download-intro {
margin: 0;
padding: 10px 0px;
}
/* ===============================
GRID view (standaard) op mobiel
→ 2 naast elkaar
=============================== */
.download-grid:not(.list-view) {
grid-template-columns: repeat(2, 1fr);
gap: 14px;
margin-top: 10px;
}
.download-grid:not(.list-view) .download-item {
flex-direction: column;
padding: 0;
border-radius: var(--radius);
overflow: hidden;
align-items: stretch;
}
.download-grid:not(.list-view) .download-thumb {
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
border-radius: 0;
overflow: hidden;
}
.download-grid:not(.list-view) .download-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
clip-path: none;
}
.download-grid:not(.list-view) .download-info {
padding: 10px 12px 12px;
text-align: center;
}
.download-grid:not(.list-view) .download-title {
font-size: 13px;
font-weight: 600;
line-height: 1.2;
padding: 0;
margin: 0 0 6px 0;
}
.download-grid:not(.list-view) .download-size {
font-size: 12px;
color: var(--color-download-size);
padding: 0;
margin: 0;
}
.download-grid:not(.list-view) .download-button {
font-size: 13px;
padding: 8px 14px;
border-radius: var(--radius-inner);
margin: 10px 12px 12px;
}
.download-grid:not(.list-view) .download-button b {
display: none;
}
/* ===============================
LIST view (alleen als user kiest)
→ behoud jouw huidige mobiele lijststijl
=============================== */
.download-grid.list-view {
grid-template-columns: 1fr;
gap: 1em;
margin-top: 10px;
}
.download-grid.list-view .download-item {
flex-direction: row;
padding: 10px;
border-radius: var(--radius);
align-items: center;
overflow: visible;
}
.download-grid.list-view .download-thumb {
flex-shrink: 0;
width: 100px;
height: 100%;
aspect-ratio: unset;
border-radius: var(--radius-inner);
overflow: hidden;
}
.download-grid.list-view .download-thumb img {
height: 100%;
object-fit: cover;
clip-path: none;
}
.download-grid.list-view .download-title,
.download-grid.list-view .download-size,
.download-grid.list-view .download-button {
padding: 0;
margin: 0;
}
.download-grid.list-view .download-title {
font-size: 14px;
font-weight: 600;
padding-bottom: 2px;
}
.download-grid.list-view .download-size {
font-size: 12px;
color: var(--color-download-size);
margin-bottom: 6px;
}
.download-grid.list-view .download-button {
font-size: 13px;
padding: 8px 14px;
border-radius: var(--radius-inner);
margin-top: 4px;
}
.download-grid.list-view .download-button b {
display: none;
}
.download-grid.list-view .download-item > div:not(.download-thumb) {
margin: 12px;
flex: 1;
}
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
-webkit-text-size-adjust: none;
}
mark {
background-color: transparent;
color: inherit;
}
input::-moz-focus-inner {
border: 0;
padding: 0;
}
input, select, textarea {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
}
/* Basic */
@-ms-viewport {
width: device-width;
}
body {
-ms-overflow-style: scrollbar;
}
@media screen and (max-width: 480px) {
html, body {
min-width: 320px;
}
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body.is-preload *, body.is-preload *:before, body.is-preload *:after {
-moz-animation: none !important;
-webkit-animation: none !important;
-ms-animation: none !important;
animation: none !important;
-moz-transition: none !important;
-webkit-transition: none !important;
-ms-transition: none !important;
transition: none !important;
}
body.is-resizing *, body.is-resizing *:before, body.is-resizing *:after {
-moz-animation: none !important;
-webkit-animation: none !important;
-ms-animation: none !important;
animation: none !important;
-moz-transition: none !important;
-webkit-transition: none !important;
-ms-transition: none !important;
transition: none !important;
}
/* Type */
body, input, select, textarea {
font-family: "San Francisco";
font-weight: 100;
letter-spacing: 0.033em;
line-height: 1.2;
}
a {
-moz-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
-webkit-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
-ms-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
color: var(--color-text);
text-decoration: none;
}
strong {
font-weight: 400;
font-family: "San Francisco bold";
}
b {
color: #000;
font-weight: 400;
}
em, i {
font-style: italic;
}
p {
margin: 0 0 15px 0;
line-height: 25px;
}
h1, h4, h5, h6 {
color: var(--color-text);
font-weight: 300;
letter-spacing: 0.05em;
margin: 0 0 1em 0;
text-transform: uppercase;
}
h3 {
color: #4b4b4b;
font-weight: 300;
line-height: 1.5;
margin: 0 0 1em 0;
}
h2{
color: var(--color-text) !important;
font-weight: 300;
letter-spacing: 0.05em;
line-height: 1.5;
margin: 0 0 1em 0;
text-transform: uppercase;
}
h2.blogtitel{
color: #fff !important;
font-weight: 300;
letter-spacing: 0.05em;
line-height: 1.5;
margin: 0 0 1em 0;
text-transform: none;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
color: inherit;
text-decoration: none;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.2em;
}
h3 {
font-size: 1.1em;
}
h4 {
font-size: 1em;
}
h5 {
font-size: 0.9em;
}
h6 {
font-size: 0.7em;
}
@media screen and (max-width: 736px) {
h2 {
font-size: 1.2em;
}
h4 {
font-size: 0.9em;
}
h5 {
font-size: 0.7em;
}
h6 {
font-size: 0.7em;
}
}
sub {
font-size: 0.8em;
position: relative;
top: 0.5em;
}
sup {
font-size: 0.8em;
position: relative;
top: -0.5em;
}
blockquote {
border-left: 4px #9d9a8d;
font-style: italic;
margin: 0 0 2em 0;
padding: 0.5em 0 0.5em 2em;
}
blockquote.dark {
border-left: 4px var(--color-mm-grey);
font-style: italic;
margin: 0 0 2em 0;
padding: 0.5em 0 0.5em 2em;
}
code {
background: #34363b;
border: solid 1px #36383c;
font-family: "Courier New", monospace;
font-size: 0.9em;
margin: 0 0.25em;
padding: 0.25em 0.65em;
}
pre {
-webkit-overflow-scrolling: touch;
font-family: "Courier New", monospace;
font-size: 0.9em;
margin: 0 0 2em 0;
}
pre code {
display: block;
line-height: 1.75;
padding: 1em 1.5em;
overflow-x: auto;
}
hr {
border: 0;
border-bottom: solid 1px #aaaaa0;
margin: 1em 0;
}
hr.major {
margin: 3em 0;
}
.align-left {
text-align: left;
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}
/* Button */
#load-more{
box-shadow: none;
color: var(--btn-primary-text) !important;
background-color: var(--btn-primary-bg);
justify-content: center;
align-items: center;
float: none;
margin-bottom: 40px;
}
input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
float: right;
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
-moz-transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
-webkit-transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
-ms-transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
border: 0;
background-color: var(--btn-bg);
color: var(--btn-text) !important;
cursor: pointer;
display: inline-block;
font-size: 0.9em;
letter-spacing: 0.1em;
line-height: 2.7em;
text-align: center;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
margin: 0 auto;
border-radius: var(--radius);
padding: 0.5em 2em;
}
.button2 {
float: right;
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
-moz-transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
-webkit-transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
-ms-transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
border: 0;
min-height: 52px;
width: auto;
background-color: var(--btn-bg);
color: var(--btn-text) !important;
cursor: pointer;
display: inline-block;
font-size: 0.9em;
text-align: center;
white-space: nowrap;
border-radius: var(--radius);
letter-spacing: 0.1em;
line-height: 1.05556em !important;
text-decoration: none;
text-transform: uppercase;
padding: 1em 3em 1em 2em;
}
@media (max-width: 768px) {
input[type="submit"],
input[type="reset"],
input[type="button"],
button{
}
.button2 {
padding: 1em 3em 1em 2em;
}
}
.button2:hover {
background-color: var(--btn-hover-bg);
color: var(--btn-hover-text) !important;
}
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:hover,
.button:hover {
background-color: var(--btn-hover-bg);
color: var(--btn-hover-text) !important;
}
input[type="submit"]:hover:active,
input[type="reset"]:hover:active,
input[type="button"]:hover:active,
button:hover:active,
.button:hover:active {
background-color: color-mix(in srgb, var(--btn-hover-bg) 82%, #000 18%);
color: var(--btn-hover-text) !important;
}
input[type="submit"].icon,
input[type="reset"].icon,
input[type="button"].icon,
button.icon,
.button.icon {
padding-left: 1.35em;
}
input[type="submit"].icon:before,
input[type="reset"].icon:before,
input[type="button"].icon:before,
button.icon:before,
.button.icon:before {
margin-right: 0.5em;
}
input[type="submit"].fit,
input[type="reset"].fit,
input[type="button"].fit,
button.fit,
.button.fit {
width: 100%;
}
input[type="submit"].small,
input[type="reset"].small,
input[type="button"].small,
button.small,
.button.small {
font-size: 0.8em;
}
input[type="submit"].large,
input[type="reset"].large,
input[type="button"].large,
button.large,
.button.large {
font-size: 1.35em;
}
input[type="submit"].primary,
input[type="reset"].primary,
input[type="button"].primary,
button.primary,
.button.primary {
background-color: var(--btn-primary-bg);
color: var(--btn-primary-text) !important;
box-shadow: none;
}
input[type="submit"].primary:hover,
input[type="reset"].primary:hover,
input[type="button"].primary:hover,
button.primary:hover,
.button.primary:hover {
background-color: var(--btn-primary-bg-hover);
color: var(--btn-primary-text) !important;
}
input[type="submit"].primary:hover:active,
input[type="reset"].primary:hover:active,
input[type="button"].primary:hover:active,
button.primary:hover:active,
.button.primary:hover:active {
background-color: var(--btn-primary-bg-active);
}
input[type="submit"].disabled, input[type="submit"]:disabled,
input[type="reset"].disabled,
input[type="reset"]:disabled,
input[type="button"].disabled,
input[type="button"]:disabled,
button.disabled,
button:disabled,
.button.disabled,
.button:disabled {
pointer-events: none;
opacity: 0.35;
}
.filter-section-button {
display: flex;
justify-content: center; /* Centreer het geheel */
align-items: center;
width: 100%;
}
.filter-section-button button{
margin: 0; /* Geen extra marges */
background-color: var(--btn-primary-bg) !important;
margin-top: 1em;
display: flex;
justify-content: center;
color: var(--btn-primary-text) !important;
box-shadow: none;
height: 52px;
}
.filter-section-button button + button {
margin-left: 8px; /* Alleen subtiele ruimte tussen knoppen */
}
.filter-section-button button:hover{
color: var(--btn-hover-text) !important;
background-color: var(--btn-hover-bg) !important;
}
/* Form */
form > :last-child {
margin-bottom: 0;
}
form > .fields {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: calc(100% + 3em);
margin: -1.5em 0 2em -1.5em;
}
form > .fields > .field {
-moz-flex-grow: 0;
-webkit-flex-grow: 0;
-ms-flex-grow: 0;
flex-grow: 0;
-moz-flex-shrink: 0;
-webkit-flex-shrink: 0;
-ms-flex-shrink: 0;
flex-shrink: 0;
padding: 1.5em 0 0 1.5em;
width: calc(100% - 1.5em);
}
form > .fields > .field.half {
width: calc(50% - 0.75em);
}
form > .fields > .field.third {
width: calc(100%/3 - 0.5em);
}
form > .fields > .field.quarter {
width: calc(25% - 0.375em);
}
label {
color: #ffffff;
display: block;
font-size: 0.9em;
font-weight: 300;
margin: 0 0 .3em 0;
}
.paginanummers{
text-align: center;
line-height: 35px;
margin-bottom: 2em;
display:none !important;
}
.paginanummers a{
text-decoration: none;
color: #212121 !important;
padding: 10px 15px;
position: relative;
background-color: var(--pal-white);
border-radius: var(--radius);
text-align: center;
align-items: center;
justify-content: center;
}
.paginanummers a i {
font-size: 12px;
}
.paginanummers a:hover{
text-decoration: none;
background-color: var(--color-mm-grey);
padding: 10px 15px;
position: relative;
color: #fff !important;
border-radius: var(--radius);
text-align: center;
align-items: center;
justify-content: center;
}
.paginanummers span{
padding: 10px 15px;
position: relative;
color: var(--color-mm-grey) !important;
background-color: #fff;
border-radius: var(--radius);
text-align: center;
align-items: center;
justify-content: center;
}
.zoek-wrapper {
position: relative; /* 👈 belangrijk */
display: block;
width: 100%;
}
/* ===== Suggestielijst styling ===== */
#mm-suggest {
position: absolute;
z-index: 1000;
margin: 0;
padding: 0;
list-style: none;
background: #fff;
border-top: none;
max-height: 240px;
overflow-y: auto;
width: 100%;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
font-size: 14px;
}
#mm-suggest li {
padding: 8px 12px;
cursor: pointer;
transition: background 0.2s, color 0.2s;
}
#mm-suggest li:hover {
background: #f5f5f5;
}
/* 🚀 Actieve item via pijltjes */
#mm-suggest li.is-active {
background: #000; /* blauwe achtergrond */
color: #fff; /* witte tekst */
font-weight: bold;
}
.suggesties {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
top: calc(100% + 5px);
left: 0;
background: #fff;
z-index: 99999;
max-height: 144px;
overflow-y: auto;
width: calc(100% + 0px);
border-radius: var(--radius-inner);
text-align: left;
}
.suggesties li {
padding: 8px 16px;
cursor: pointer;
border-bottom: 1px solid #00000008;
color: var(--color-mm-grey);
}
.suggesties li:hover {
background-color: #f0f0f0;
}
/* Suggesties: thumbnail + titel */
#mm-suggest.suggesties li.mmx-suggest-item{
display:flex;
align-items:center;
gap:.65rem;
padding:.55rem .75rem;
}
#mm-suggest.suggesties .mmx-suggest-thumb{
width:34px;
height:34px;
flex:0 0 34px;
border-radius:10px;
object-fit:cover;
background:rgba(0,0,0,.06);
}
#mm-suggest.suggesties .mmx-suggest-thumb.is-broken{
background:rgba(0,0,0,.08);
}
#mm-suggest.suggesties .mmx-suggest-title{
min-width:0;
flex:1 1 auto;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* basis layout: thumb links, tekstblok rechts */
#mm-suggest .mmx-suggest-item{
display:flex;
align-items:center;
gap:.7em;
}
/* thumb vast formaat */
#mm-suggest .mmx-suggest-thumb{
width:44px;
height:44px;
object-fit:cover;
border-radius:10px;
flex:0 0 44px;
}
/* tekstblok moet kunnen krimpen (min-width:0 is key voor flex!) */
#mm-suggest .mmx-suggest-text{
display:flex;
flex-direction:column;
gap:.15em;
min-width:0;
flex:1;
}
/* titel: niet afkappen, mag wrappen (desnoods max 2 regels) */
#mm-suggest .mmx-suggest-title{
white-space:normal !important;
overflow:visible !important;
text-overflow:unset !important;
line-height:1.2;
font-weight:600;
/* optioneel: max 2 regels */
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden !important;
}
/* snippet: altijd onder titel, max 2 regels */
#mm-suggest .mmx-suggest-sub{
display:block;
font-size:.85em;
opacity:.75;
line-height:1.25;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
/* Zorg dat suggestie-tekst altijd leesbaar is (ook als parent wit is) */
#mm-suggest,
#mm-suggest .mmx-suggest-text,
#mm-suggest .mmx-suggest-title,
#mm-suggest .mmx-suggest-sub{
color: var(--mm-suggest-fg, #111);
}
/* Subregel iets zachter */
#mm-suggest .mmx-suggest-sub{
opacity: .75;
}
/* dark theme */
html[data-theme="dark"] #mm-suggest.suggesties{
background: rgba(0,0,0,.92) !important;
color: rgba(255,255,255,.92) !important;
border-color: rgba(255,255,255,.20) !important;
}
html[data-theme="dark"] #mm-suggest.suggesties li:hover,
html[data-theme="dark"] #mm-suggest.suggesties li.is-active{
background: rgba(255,255,255,.08) !important;
}
html[data-theme="dark"] #mm-suggest .mmx-suggest-sub{
color: rgba(255,255,255,.70) !important;
}
/* =====================================================
Filters: geen "layer/box" meer, alleen de losse cards
===================================================== */
.mmx-filters.mmx-filters--always{
margin-top: 0 !important;
border: 0 !important;
background: transparent !important;
border-radius: 0 !important;
overflow: visible !important;
padding: 0 !important;
box-shadow: none !important;
}
/* stack: ook geen extra padding rondom */
.mmx-filters.mmx-filters--always .mmx-stack{
padding: 0 !important;
gap: .9rem; /* mag blijven */
}
/* actions: ook niet in een "footer bar" */
.mmx-filters.mmx-filters--always .mmx-actions-s{
padding: .75rem 0 0 0 !important;
border-top: 0 !important;
background: transparent !important;
justify-content: flex-start; /* netter als het 'gewoon op de pagina' is */
}
/* optioneel: buttons iets compacter in filter view */
.mmx-filters.mmx-filters--always .mmx-btn{
padding: .35rem .85rem;
}
/* =====================================================
Perfecte uitlijning: Filter + Reset = 2-koloms grid
- even breed / even hoog
- zonder reset -> filter neemt volle breedte
===================================================== */
.mmx-actions{
display: grid;
gap: .65rem;
align-items: stretch;
}
.mmx-actions.has-reset{
grid-template-columns: 1fr 1fr; /* exact gelijk */
}
.mmx-actions.no-reset{
grid-template-columns: 1fr; /* filter full width */
}
/* spacing top/bottom */
.mmx-actions--top{ margin: 0 0 1rem 0; }
.mmx-actions--bottom{ margin: 1.2rem 0 0 0; }
/* knop als "block": vult grid-cel volledig */
.mmx-btn--block{
width: 100%;
height: 44px; /* vaste hoogte = perfect gelijk */
display: inline-flex;
align-items: center;
justify-content: center;
gap: .55rem;
padding: 0 1rem !important; /* force consistent */
border-radius: 999px; /* jouw pill look */
box-sizing: border-box;
}
/* icon/tekst netjes centreren */
.mmx-btn--block i{
line-height: 1;
position: relative;
top: 0;
}
/* Zoekbalk: stacked layout */
.mmx-bar--stacked{
display: flex;
flex-direction: column;
gap: 1rem;
}
/* Buttons onder zoekveld: grid, perfect gelijk */
.mmx-bar-actions{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
/* Knoppen exact even groot */
.mmx-btn--block{
width: 100%;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Zoekblok: zet input boven, knoppen onder */
.mmx-bar--stacked{
display: flex;
flex-direction: column;
gap: 1rem;
}
/* Knoppen: perfect gelijk in een grid */
.mmx-bar-actions{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
align-items: stretch;
}
/* Zelfde hoogte / breedte */
.mmx-bar-actions .mmx-btn--block{
width: 100%;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 1rem;
padding: 0 1rem !important;
box-sizing: border-box;
font-weight: 100;
font-size: 16px !important;
}
/* Filters actief – full width onder zoekknoppen */
.mmx-status--full{
margin-bottom: 1rem;
}
.mmx-pill--full{
width: 100%;
justify-content: center;
text-align: center;
padding: .1rem .5rem !important;
min-height: var(--mm-badge-height);
border-radius: 999px;
display: inline-flex;
align-items: center;
gap: 1rem;
color: #fff !important;
box-sizing:border-box;
}
.mmx-pill--full:hover{
color: #999 !important;
}
/* ===== Zoekhulp ===== */
.mmx-help{
border:1px solid var(--mmx-b);
background: rgb(255 255 255 / 8%);
border-radius:var(--mmx-r);
overflow:hidden;
}
.mmx-help-sum{
list-style:none;
display:flex;
align-items:center;
gap:1rem;
padding:.9rem .9rem;
cursor:pointer;
user-select:none;
font-weight:650;
opacity:.95;
}
.mmx-help-sum::-webkit-details-marker{display:none}
.mmx-help-body{
padding:.75rem .9rem .9rem;
border-top:1px solid var(--mmx-b2);
}
.mmx-help-intro{margin:0 0 .6rem 0; opacity:.9}
.mmx-help-list{
margin:0;
padding-left:1.1rem;
display:grid;
gap:.2rem;
}
.mmx-help-list li{opacity:.92}
.mmx-help-tip{margin:.7rem 0 0 0; color:var(--mmx-muted)}
#zoeken{
padding-top: 50px;
padding-bottom: 50px;
padding-left: 15px;
padding-right: 15px;
margin: 0 auto;
width: 35em;
}
#zoeken input{
margin-bottom: 10px;
border-radius: var(--radius);
padding: 0em 2.5em;
color: var(--color-text);
background: var(--pal-white);
border: 1px solid color-mix(in srgb, var(--pal-dark-3) 16%, transparent);
}
.filter-row {
position: relative;
display: flex;
align-items: flex-start; /* alles bovenin uitlijnen */
gap: 0;
z-index: 10;
position: sticky;
top: 0;
}
/* Reset icoon links naast filter icoon */
.filter-reset-toggle{
background-color: var(--color-mm-grey);
border: none;
color: #fff !important;
height: 54px;
padding: 10px 16px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
position: relative;
}
.filter-reset-toggle:hover{
background-color: #b0ac9f;
color: var(--color-mm-grey) !important;
}
.filter-reset-toggle::after{
content:'';
position:absolute;
top:0;
right:0;
width:1px;
height:100%;
background: linear-gradient(to bottom, transparent, #8c8a7e, transparent);
pointer-events:none;
}
.filter-menu-toggle {
background-color: var(--color-mm-grey);
border: none;
color: #fff !important;
height: 54px;
padding: 10px 20px;
border-radius: 0px;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
box-shadow: none;
position: relative;
}
@media screen and (max-width: 736px) {
.filter-menu-toggle {
padding: 10px 10px;
}
}
.filter-menu-toggle::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 1px;
height: 100%;
background: linear-gradient(to bottom, transparent, #8c8a7e, transparent);
pointer-events: none;
}
.filter-menu-toggle:hover {
background-color: #b0ac9f;
border: none;
box-shadow: none;
color: var(--color-mm-grey) !important;
}
/* Zoeklayer structuur */
.zoek-layer {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
z-index: 9999;
}
.zoek-content {
position: relative;
display: flex;
flex-direction: column;
max-height: 100vh; /* beperkt tot schermhoogte */
}
@media (max-width: 600px) {
.zoek-content {
position: relative;
display: flex;
flex-direction: column;
max-height: 100vh; /* beperkt tot schermhoogte */
width: 100%;
margin: 0.5em;
padding: 0.5em 0em;
}
}
/* Formulier vult volledige ruimte */
form#zoeken3 {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* Sticky zoekbalk bovenin */
/* Container waarin filterblokken scrollbaar zijn */
.filter-menu-container {
width: 100%;
max-height: 0;
margin-top: -30px;
transition: max-height 0.4s ease, transform 0.4s ease;
}
/* Opengeklapte container */
.filter-menu-container.open {
max-height: 1200px;
margin-top: -30px;
transform: scaleY(1);
}
/* Grid layout met aanvulling waar ruimte is */
.filter-menu {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
grid-auto-flow: dense;
gap: 20px;
padding: 50px 0 0;
}
/* Responsief gedrag */
@media (max-width: 1100px) {
.filter-menu {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.filter-menu {
grid-template-columns: 1fr;
}
.filter-menu-container {
margin-top: -25px;
}
.filter-menu-container.open {
margin-top: -25px;
}
}
.filter-section-sub {
background: color-mix(in srgb, var(--pal-white) 14%, transparent);
padding: 15px;
border-radius: var(--pf-btn-radius);
box-sizing: border-box;
break-inside: avoid;
display: block;
}
.filter-section strong {
display: block;
margin-bottom: 8px;
font-size: 16px;
color: var(--color-text);
text-align: left;
padding-bottom: 5px;
}
.filter-section label {
display: block;
cursor: pointer;
color: var(--color-text);
}
/* Stijl voor custom checkboxes */
.filter-section input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 20px;
height: 20px;
border: 2px solid var(--color-mm-grey);
border-radius: var(--radius);
background-color: var(--pal-white);
cursor: pointer;
position: relative;
margin-right: 8px;
vertical-align: middle;
transition: all 0.2s ease;
opacity: 1;
z-index: 1;
}
.filter-section input[type="checkbox"]:checked {
background-color: var(--color-mm-grey);
border-color: var(--color-mm-grey);
}
.filter-section input[type="checkbox"]::after {
content: "";
position: absolute;
top: 3px;
left: 6px;
width: 4px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
opacity: 0;
transition: opacity 0.2s ease;
}
.filter-section input[type="checkbox"]:checked::after {
opacity: 1;
}
.filter-section label {
display: flex;
align-items: center;
margin-bottom: 0px;
font-size: 15px;
cursor: pointer;
color: var(--color-text);
transition: color 0.2s ease;
}
.filter-section label:hover {
color: #b6b6b6;
}
.zoek-button{
background-color: var(--pal-dark-3);
height: 54px;
border: none;
color: var(--pal-white) !important;
border: 0px;
cursor: pointer;
box-shadow: none;
border-radius: 0px var(--radius) var(--radius) 0px;
align-items: center;
justify-content: center;
}
.zoek-button:hover{
background-color: #b6b6af;
color: var(--color-mm-grey) !important;
border: none;
box-shadow: none;
}
.zoek-reset-button{
background-color: #b14e4e;
border: none;
color: var(--color-mm-grey);
height: 54px;
padding: 10px 20px;
border-radius: 0px;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
}
@media screen and (max-width: 736px) {
.zoek-button{
height: 54px;
padding: 7px 25px;
}
.zoek-reset-button{
height: 54px;
padding: 10px 10px;
}
}
.zoek-reset-button:hover{
background-color: #b0ac9f;
color: var(--color-mm-grey) !important;
}
#zoeken2{
position: relative;
display: flex; gap: 0px;
}
#zoeken2 button:hover{
background-color: color-mix(in srgb, var(--pal-white) 62%, transparent);
}
#zoeken2 input{
background-color: var(--pal-white);
color: var(--color-text);
border-radius: var(--radius) 0px 0px var(--radius);
}
#zoeken2_menu input{
background-color: var(--pal-white);
color: var(--color-text);
}
#error{
font-size: 1.5em;
text-align: center;
padding-top: 2.5em;
color: var(--color-mm-grey);
}
#error i{
color: var(--color-mm-grey) !important;
}
@media screen and (max-width: 736px) {
#zoeken{
padding-top: 50px;
padding-bottom: 125px;
padding-left: 15px;
padding-right: 15px;
margin: 0 auto;
width: 20em;
border-radius: var(--radius);
}
#error{
text-align: center;
padding-top: 2.0em;
font-size: 1em;
}
.paginanummers{
margin-bottom: 2em;
text-align: center;
}
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
select,
textarea {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
outline: none;
display: block;
/* padding: 1em 1em; */
text-decoration: none;
width: 100%;
letter-spacing: 0.1em;
line-height: 3.05556em;
transition: border 0.3s ease;
font-size: 16px !important;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 27%) !important;
background: rgba(255, 255, 255, .13);
color: #fff;
outline: none;
padding: 2px 1em
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input:focus {
outline: none;
}
input[type="text"]:invalid,
input[type="password"]:invalid,
input[type="email"]:invalid,
input[type="tel"]:invalid,
input[type="search"]:invalid,
input[type="url"]:invalid,
select:invalid,
textarea:invalid {
box-shadow: none;
}
select {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='%2336383c' /%3E%3C/svg%3E") !important;
background-size: 1.25rem;
background-repeat: no-repeat;
background-position: calc(100% - 1rem) center;
height: 2.75em;
padding-right: 2.75em;
text-overflow: ellipsis;
}
select option {
color: #ffffff;
background: #000000b6;
}
select:focus::-ms-value {
background-color: transparent;
}
select::-ms-expand {
display: none;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
select {
height: 54px;
}
textarea {
padding: 0.75em 1em;
}
input[type="checkbox"],
input[type="radio"] {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
display: block;
float: left;
margin-right: -2em;
opacity: 0;
width: 1em;
z-index: -1;
}
input[type="checkbox"] + label,
input[type="radio"] + label {
text-decoration: none;
color: #a0a0a1;
cursor: pointer;
display: inline-block;
font-size: 1em;
font-weight: 300;
padding-left: 2.4em;
padding-right: 0.75em;
position: relative;
}
input[type="checkbox"] + label:before,
input[type="radio"] + label:before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
text-transform: none !important;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
input[type="checkbox"] + label:before,
input[type="radio"] + label:before {
background: #34363b;
content: '';
display: inline-block;
font-size: 0.8em;
height: 2.0625em;
left: 0;
line-height: 2.0625em;
position: absolute;
text-align: center;
top: 0;
width: 2.0625em;
}
input[type="checkbox"]:checked + label:before,
input[type="radio"]:checked + label:before {
background: #000;
border-color: #000;
color: #ffffff;
content: '\f00c';
}
input[type="checkbox"]:focus + label:before,
input[type="radio"]:focus + label:before {
box-shadow: 0 0 0 2px #000;
}
input[type="radio"] + label:before {
border-radius: 100%;
}
::-webkit-input-placeholder {
color: #707071 !important;
opacity: 1.0;
}
:-moz-placeholder {
color: #707071 !important;
opacity: 1.0;
}
::-moz-placeholder {
color: #707071 !important;
opacity: 1.0;
}
:-ms-input-placeholder {
color: #707071 !important;
opacity: 1.0;
}
/* Icon */
.icon {
text-decoration: none;
border-bottom: none;
position: relative;
}
.icon:before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
text-transform: none !important;
font-family: 'Font Awesome 5 Free';
font-weight: 400;
}
.icon > .label {
position: relative;
left: 0.3em;
top: -0.2em;
}
.icon:before {
line-height: inherit;
}
.icon.solid:before {
font-weight: 900;
}
.icon.brands:before {
font-family: 'Font Awesome 5 Brands';
}
/* List */
/* --- Radio's voor categorieën stylen zoals de custom checkboxes --- */
.filter-section input[type="radio"].kind-radio {
appearance: none;
-webkit-appearance: none;
width: 20px;
height: 20px;
border: 2px solid var(--color-mm-grey);
border-radius: var(--radius); /* zelfde als checkbox */
background-color: #fff;
cursor: pointer;
position: relative;
margin-right: 8px;
vertical-align: middle;
transition: all 0.2s ease;
opacity: 1;
z-index: 1;
/* Zorg dat eventuele globale input[type=radio]-regels dit niet verstoppen */
display: inline-block;
float: none;
}
.filter-section input[type="radio"].kind-radio:checked {
background-color: var(--color-mm-grey);
border-color: var(--color-mm-grey);
}
.filter-section input[type="radio"].kind-radio::after {
content: "";
position: absolute;
top: 3px;
left: 6px;
width: 4px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
opacity: 0;
transition: opacity 0.2s ease;
}
.filter-section input[type="radio"].kind-radio:checked::after {
opacity: 1;
}
/* Optioneel: zelfde label-uitlijning als bij je checkboxes */
.filter-section label {
display: flex;
align-items: center;
margin-bottom: 0px;
font-size: 15px;
cursor: pointer;
color: #fff;
transition: color 0.2s ease;
}
ol {
list-style: decimal;
margin: 0 0 2em 0;
padding-left: 1.25em;
}
ol li {
padding-left: 0.25em;
}
ul {
list-style: disc;
}
ul.alt {
list-style: none;
padding-left: 0;
}
ul.alt li {
border-top: solid 1px #36383c;
padding: 0.5em 0;
}
ul.alt li:first-child {
border-top: 0;
padding-top: 0;
}
dl {
margin: 0 0 2em 0;
}
dl dt {
display: block;
font-weight: 300;
margin: 0 0 1em 0;
}
dl dd {
margin-left: 2em;
}
/* Actions */
ul.actions {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
cursor: default;
list-style: none;
margin-left: -1em;
padding-left: 0;
}
ul.actions li {
padding: 0 0 0 1em;
vertical-align: middle;
}
ul.actions.special {
-moz-justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
width: 100%;
margin-left: 0;
}
ul.actions.special li:first-child {
padding-left: 0;
}
ul.actions.stacked {
-moz-flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
margin-left: 0;
}
ul.actions.stacked li {
padding: 1.3em 0 0 0;
}
ul.actions.stacked li:first-child {
padding-top: 0;
}
ul.actions.fit {
width: calc(100% + 1em);
}
ul.actions.fit li {
-moz-flex-grow: 1;
-webkit-flex-grow: 1;
-ms-flex-grow: 1;
flex-grow: 1;
-moz-flex-shrink: 1;
-webkit-flex-shrink: 1;
-ms-flex-shrink: 1;
flex-shrink: 1;
width: 100%;
}
ul.actions.fit li > * {
width: 100%;
}
ul.actions.fit.stacked {
width: 100%;
}
@media screen and (max-width: 480px) {
ul.actions:not(.fixed) {
-moz-flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
margin-left: 0;
width: 100% !important;
}
ul.actions:not(.fixed) li {
-moz-flex-grow: 1;
-webkit-flex-grow: 1;
-ms-flex-grow: 1;
flex-grow: 1;
-moz-flex-shrink: 1;
-webkit-flex-shrink: 1;
-ms-flex-shrink: 1;
flex-shrink: 1;
padding: 1em 0 0 0;
text-align: center;
width: 100%;
}
ul.actions:not(.fixed) li > * {
width: 100%;
}
ul.actions:not(.fixed) li:first-child {
padding-top: 0;
}
ul.actions:not(.fixed) li input[type="submit"],
ul.actions:not(.fixed) li input[type="reset"],
ul.actions:not(.fixed) li input[type="button"],
ul.actions:not(.fixed) li button,
ul.actions:not(.fixed) li .button {
width: 100%;
}
ul.actions:not(.fixed) li input[type="submit"].icon:before,
ul.actions:not(.fixed) li input[type="reset"].icon:before,
ul.actions:not(.fixed) li input[type="button"].icon:before,
ul.actions:not(.fixed) li button.icon:before,
ul.actions:not(.fixed) li .button.icon:before {
margin-left: -0.5rem;
}
}
/* UL = grid container */
.contact-links{
list-style: none;
padding: 0;
display: grid;
grid-template-columns: 1fr; /* mobiel: onder elkaar */
gap: 1em;
text-align: left;
}
/* A = tegel */
.contact-link{
display: flex;
align-items: center;
gap: .6em;
text-decoration: none;
color: inherit;
border-radius: var(--radius);
background-color: color-mix(in srgb, var(--pal-dark-2) 72%, transparent);
padding: 1em;
transition:
background-color .3s ease,
color .3s ease,
padding .3s ease;
/* 🔑 essentieel voor ellipsis */
min-width: 0;
transition:
opacity .2s ease,
background .2s ease,
transform .2s ease;
opacity: .75;
}
.contact-link:hover{
opacity: 1;
transform: translateY(-1px);
}
/* Tekst links (ellipsis) */
.contact-link .label{
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* Icoon altijd rechts + perfect verticaal gecentreerd */
.contact-link i{
margin-left: auto; /* rechts */
flex: 0 0 auto;
display: inline-flex; /* 🔑 */
align-items: center; /* 🔑 */
justify-content: center;
font-size: 1.2rem;
line-height: 1; /* voorkomt font-offset */
}
/* Hover */
.contact-link:hover{
background-color: color-mix(in srgb, var(--pal-dark-3) 58%, transparent);
}
/* ==============================
RESPONSIVE
============================== */
/* 📱 Tablet: 2 naast elkaar */
@media (min-width: 600px){
.contact-links{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* 💻 Desktop: automatisch passend */
@media (min-width: 1024px){
.contact-links{
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.contact-link{
padding: 1em 2em;
}
}
/* Table */
.table-wrapper {
-webkit-overflow-scrolling: touch;
overflow-x: auto;
}
table {
margin: 0 0 2em 0;
width: 100%;
}
table tbody tr {
border: solid 1px #36383c;
border-left: 0;
border-right: 0;
}
table tbody tr:nth-child(2n + 1) {
background-color: #34363b;
}
table td {
padding: 0.75em 0.75em;
}
table th {
color: #ffffff;
font-size: 0.9em;
font-weight: 300;
padding: 0 0.75em 0.75em 0.75em;
text-align: left;
}
table thead {
border-bottom: solid 2px #36383c;
}
table tfoot {
border-top: solid 2px #36383c;
}
table.alt {
border-collapse: separate;
}
table.alt tbody tr td {
border: solid 1px #36383c;
border-left-width: 0;
border-top-width: 0;
}
table.alt tbody tr td:first-child {
border-left-width: 1px;
}
table.alt tbody tr:first-child td {
border-top-width: 1px;
}
table.alt thead {
border-bottom: 0;
}
table.alt tfoot {
border-top: 0;
}
/* Panel */
.panel {
/* positioning */
position: fixed;
top: 0;
right: 0;
bottom: 0;
/* hoogte – iOS Safari proof */
height: 100svh; /* fallback */
height: -webkit-fill-available; /* oudere iOS */
height: 100dvh; /* moderne Safari (leidend) */
max-height: 100dvh;
/* layout */
width: 60%;
max-width: 45em;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
/* padding + safe-area */
padding:
calc(4em + env(safe-area-inset-top))
4em
calc(2em + env(safe-area-inset-bottom))
4em;
/* styling */
background: var(--color-panel);
color: var(--color-text);
z-index: 99999;
/* animatie */
transform: translateX(100%);
transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.panel h1, .panel h2, .panel h3, .panel h4, .panel h5, .panel h6, .panel a{
color: var(--color-text) !important;
}
/* Kopkleuren in panelen centraal afdwingen */
html:not([data-theme]) .panel :is(h1,h2,h3),
html[data-theme="light"] .panel :is(h1,h2,h3){
color: var(--color-text) !important;
}
html[data-theme="dark"] .panel :is(h1,h2,h3){
color: var(--pal-white) !important;
}
@media (prefers-color-scheme: dark){
html:not([data-theme]) .panel :is(h1,h2,h3),
html[data-theme="auto"] .panel :is(h1,h2,h3){
color: var(--pal-white) !important;
}
}
html:not([data-theme="dark"]) #footerb h1,
html[data-theme="light"] #footerb h1{
color: var(--color-text) !important;
}
html:not([data-theme="dark"]) .panel p,
html:not([data-theme="dark"]) .panel li,
html:not([data-theme="dark"]) .panel small,
html:not([data-theme="dark"]) .panel span,
html:not([data-theme="dark"]) .panel strong,
html:not([data-theme="dark"]) .panel em,
html[data-theme="light"] .panel p,
html[data-theme="light"] .panel li,
html[data-theme="light"] .panel small,
html[data-theme="light"] .panel span,
html[data-theme="light"] .panel strong,
html[data-theme="light"] .panel em{
color: var(--color-text) !important;
}
html[data-theme="dark"] .panel{
color: var(--pal-white);
}
html[data-theme="dark"] .panel h1,
html[data-theme="dark"] .panel h2,
html[data-theme="dark"] .panel h3,
html[data-theme="dark"] .panel h4,
html[data-theme="dark"] .panel h5,
html[data-theme="dark"] .panel h6,
html[data-theme="dark"] .panel a{
color: var(--pal-white) !important;
}
@media (prefers-color-scheme: dark){
html:not([data-theme]) .panel,
html[data-theme="auto"] .panel{
color: var(--pal-white);
}
html:not([data-theme]) .panel h1,
html:not([data-theme]) .panel h2,
html:not([data-theme]) .panel h3,
html:not([data-theme]) .panel h4,
html:not([data-theme]) .panel h5,
html:not([data-theme]) .panel h6,
html:not([data-theme]) .panel a,
html[data-theme="auto"] .panel h1,
html[data-theme="auto"] .panel h2,
html[data-theme="auto"] .panel h3,
html[data-theme="auto"] .panel h4,
html[data-theme="auto"] .panel h5,
html[data-theme="auto"] .panel h6,
html[data-theme="auto"] .panel a{
color: var(--pal-white) !important;
}
}
@media (min-width: 667px) {
.panel {
padding: 100px 41px 24px 41px;
}
}
.panel.active {
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
.inner {
margin: 0 auto;
max-width: 100%;
}
.inner.split {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
}
.inner.split > div {
margin-left: 4em;
width: 50%;
}
.inner.split > :first-child {
margin-left: 0;
}
.panel > .closer {
-moz-transition: opacity 0.2s ease-in-out;
-webkit-transition: opacity 0.2s ease-in-out;
-ms-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
background-image: url("images/close-dark.svg");
background-position: center;
background-repeat: no-repeat;
background-size: 44px;
cursor: pointer;
height: 3.5em;
opacity: 0.8;
position: absolute;
right: 1px;
top: 7px;
width: 3.5em;
z-index: 2;
padding: 2em;
}
.panel > .closer:hover {
opacity: 1.0;
}
@media screen and (max-width: 1280px) {
.panel {
padding: 3em 3em 1em 3em ;
width: 100%;
}
.inner.split > div {
margin-left: 3em;
}
}
@media screen and (max-width: 980px) {
.inner.split {
-moz-flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.inner.split > div {
margin-left: 0;
width: 100%;
}
}
@media screen and (max-width: 736px) {
.panel {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
-webkit-transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
-moz-transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
-o-transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
padding: 4em 1.2em ;
bottom: auto;
}
.panel > .closer {
top: -1px;
}
.panel.active {
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.disclaimer-page ul {
padding: 0 2em;
margin-bottom: 1em;
}
.disclaimer-page li {
padding: .2em 0;
}
/* Contact form: altijd klikbaar */
.contact-page,
.contact-page *{
pointer-events: auto;
}
.contact-page{
position: relative;
z-index: 5;
}
/* Button altijd boven eventuele overlays */
.contact-page .mm-btn{
position: relative;
z-index: 10;
pointer-events: auto;
}
/* Als je fade-in wrappers pseudo-elements hebben: die mogen clicks NOOIT blokkeren */
.js-fadein::before,
.js-fadein::after,
.fade-in::before,
.fade-in::after,
.fadein-bottom::before,
.fadein-bottom::after{
pointer-events: none !important;
}
.about-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
align-items: stretch; /* zorgt dat items dezelfde hoogte krijgen */
margin-bottom: 25px;
}
/* Zorg dat de afbeelding 100% van de hoogte van het grid-item vult */
.about-grid .item2 img {
height: 100%;
max-height: 400px;
width: 100%;
object-fit: cover;
display: block;
}
/* Mobiel: onder elkaar */
@media (max-width: 768px) {
.about-grid {
grid-template-columns: 1fr;
}
.about-grid .item2 img {
height: auto;
}
}
#panelprofiel.is-wide {
width: 80% !important;
max-width: 95em !important;
}
@media (max-width: 980px) {
#panelprofiel {
width: 100% !important;
max-width: 100% !important;
}
}
#panelprofiel {
transition:
width 0.55s cubic-bezier(0.68, -0.55, 0.265, 1.55),
transform 0.55s cubic-bezier(0.68, -0.55, 0.265, 1.55),
opacity 0.45s ease,
box-shadow 0.55s ease;
transform-origin: center center;
width: 80%;
margin: 0 auto; /* blijft gecentreerd bij uitrekken */
padding-top: 5em;
max-width: 80%;
}
/* Wrapper */
#wrapper {
-moz-transition: -moz-filter 0.5s ease, -webkit-filter 0.5s ease, -ms-filter 0.5s ease, -moz-filter 0.5s ease;
-webkit-transition: -moz-filter 0.5s ease, -webkit-filter 0.5s ease, -ms-filter 0.5s ease, -webkit-filter 0.5s ease;
-ms-transition: -moz-filter 0.5s ease, -webkit-filter 0.5s ease, -ms-filter 0.5s ease, -ms-filter 0.5s ease;
transition: -moz-filter 0.5s ease, -webkit-filter 0.5s ease, -ms-filter 0.5s ease, filter 0.5s ease;
position: relative;
}
#wrapper:after {
pointer-events: none;
-moz-transition: opacity 0.5s ease, visibility 0.5s;
-webkit-transition: opacity 0.5s ease, visibility 0.5s;
-ms-transition: opacity 0.5s ease, visibility 0.5s;
transition: opacity 0.5s ease, visibility 0.5s;
background: rgba(36, 38, 41, 0.5);
content: '';
display: block;
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
visibility: hidden;
width: 100%;
z-index: 1;
}
body.ie #wrapper:after {
background: rgba(0, 0, 0, 0.8);
}
body.modal-active #wrapper {
-moz-filter: blur(20px);
-webkit-filter: blur(20px);
-ms-filter: blur(20px);
filter: blur(20px);
}
body.modal-active #wrapper:after {
pointer-events: auto;
opacity: 1;
visibility: visible;
z-index: 10003;
}
@keyframes spinner-scale {
0%, 100% {
background-size: 60px 60px;
}
50% {
background-size: 80px 80px;
}
}
#wrapper::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.75); /* transparante zwarte achtergrond */
background-image: url("images/spinner2.svg");
background-repeat: no-repeat;
background-position: center;
background-size: 80px 80px;
z-index: 999999;
opacity: 0;
visibility: hidden;
transition: opacity 0.35s ease-out, visibility 0.35s;
pointer-events: none;
animation: spinner-scale 1s ease-in-out infinite;
}
body.is-preload #wrapper::before {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* Header */
body {
overflow-x: hidden;
overflow-x: clip;
max-width: 100%;
}
.background-image-layer {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-image: url('https://www.markmooibroek.com/images/canvas-background.webp');
background-size: cover;
background-position: 65% center; /* iets naar links */
background-repeat: no-repeat;
z-index: -3;
pointer-events: none;
}
#bokehCanvas {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: -2;
pointer-events: none;
}
#header {
-moz-transition: -moz-transform 0.2s ease;
-webkit-transition: -webkit-transform 0.2s ease;
-ms-transition: -ms-transform 0.2s ease;
transition: transform 0.2s ease;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
left: 0;
line-height:4em;
position: fixed;
user-select: none;
width: calc(100% - 0em);
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
bottom: auto;
top: 0;
display: none;
z-index: 9999;
.logo-text, .logo{
display: none;
}
}
#header.small {
z-index: 9999;
border-bottom: 10px solid transparent; /* afstand creëren */
}
#header.small {
display: block;
z-index: 10001;
.logo{
display: none;
}
.logo-text{
display: none;
}
h1{
position: absolute;
left: 50%;
top: 50%;
margin: 0;
padding: 0;
transform: translate(-50%, -30%);
}
}
/* Het logo zelf */
.mm-logo-top {
display: inline-block;
width: 150px;
height: 45px;
top:-16px;
left: -119px;
background: var(--logo-image-top) no-repeat center/contain;
}
/* Als je een overlay boven je header hebt */
.header-blogimage-overlay,
.header-blogimage-overlay img {
pointer-events: none; /* laat kliks door */
}
.logo-text b{
color: var(--color-text);
}
@media screen and (max-width: 736px) {
#header.small .mm-header{
padding-top: 0.3em;
padding-bottom: 0.3em;
}
#header.small h1{
margin-left: 0px;
top: 50%;
}
.mm-logo-top {
top:-28px;
}
#header.small b{
margin-left: -20px;
display: none;
}
.liquidGlass-text h1,
#header.small h1{
transform: translate(-50%, -30%);
}
.mm-header-search{
left: .65rem;
width: 38px;
height: 38px;
}
.mm-header-badge{
width: clamp(56px, 17vw, 70px);
}
}
.bounce-elastic {
animation: bounceElastic 0.6s ease-out;
}
/* ANIMATIES */
@keyframes bounceElastic {
0% { transform: translateY(-120%); opacity: 0; }
40% { transform: translateY(10%); opacity: 1; }
65% { transform: translateY(-5%); }
85% { transform: translateY(3%); }
100% { transform: translateY(0); opacity: 1; }
}
@keyframes bounceElasticOut {
0% { transform: translateY(0); opacity: 1; }
30% { transform: translateY(-10%); }
60% { transform: translateY(8%); }
80% { transform: translateY(-4%); }
100% { transform: translateY(-100%); opacity: 0; }
}
#header.small.animate-in {
animation: bounceElastic 0.5s ease-out;
}
#header.small.animate-out {
animation: bounceElasticOut 0.5s ease-in;
animation-fill-mode: forwards;
pointer-events: none; /* voorkomt onbedoelde hover-effecten */
}
.header-menu{
display: none;
}
ul.inline-list {
display: flex;
justify-content: center;
list-style: none;
gap: 0.1em;
padding: 0;
margin: 0;
width: 100%;
position: absolute;
margin-top: 1px;
}
.header-menu.small {
display: block;
}
.inline-list .label {
display: inline;
}
@media screen and (max-width: 1065px) {
.inline-list .label {
display: none;
}
.inline-list a i {
font-size: 1.2em; /* toon het icoon normaal */
margin-right: -2px !important;
}
a.menu-zoek.zoekicon {
font-size: 1.2em; /* toon het icoon normaal */
margin-right: 12px !important;
}
}
.inline-list a {
list-style: none;
border-radius: var(--radius);
background-color: transparent;
padding: 0 1em !important;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
transition: background-color 0.3s ease;
}
@media (max-width: 700px) {
a.menu-downloads.menu-downloads{
display: none;
}
a.menu-home.menu-home{
display: none;
}
a.menu-main.menu-main{
display: none;
}
a.menu-blog.menu-blog{
display: none;
}
a.menu-zoek.menu-zoek{
display: none !important;
}
.inline-list a {
padding: 0 1em !important;
margin-top: 0px;
margin-bottom: 9px;
height: 50px;
background: none;
position: absolute;
right: 65px;
}
.inline-list a i {
font-size: 22px !important;
}
.inline-list a:hover {
background-color: transparent !important;
color: #fff;
}
}
a.menu-zoek i {
animation: rotateHint 3s linear infinite;
display: inline-block;
}
@keyframes rotateHint {
0%, 100% { transform: rotate(0deg); }
5% { transform: rotate(15deg); }
10% { transform: rotate(-10deg); }
15% { transform: rotate(5deg); }
20% { transform: rotate(0deg); }
}
a.menu-zoek.zoekicon i {
margin-right: 5px;
}
.inline-list a i {
margin-right: 5px;
position: relative;
margin-top: 5px;
font-size: 14px;
}
.inline-list a:hover {
background-color: var(--color-mm-grey);
color: #fff;
}
.inline-list a {
-webkit-tap-highlight-color: transparent; /* of gebruik een lichte rgba-kleur */
}
.inline-list a:active {
background-color: transparent; /* of je gewenste kleur */
}
/* === BASISSTIJL KNOPPEN === */
.menu-home,
.menu-main,
.menu-blog,
.menu-downloads {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
height: 50px;
padding: 0 20px;
border-radius: var(--radius-inner);
background-color: var(--menu-button-bg, rgba(255,255,255,.86));
color: var(--color-text);
text-decoration: none;
overflow: hidden;
transition: color 0.3s ease;
}
/* Root/light: topmenu iets transparanter */
html[data-theme="light"] .menu-home,
html[data-theme="light"] .menu-main,
html[data-theme="light"] .menu-blog,
html[data-theme="light"] .menu-downloads,
html[data-theme="auto"] .menu-home,
html[data-theme="auto"] .menu-main,
html[data-theme="auto"] .menu-blog,
html[data-theme="auto"] .menu-downloads {
background-color: var(--menu-button-bg, rgba(255,255,255,.74));
border: 1px solid var(--menu-button-border, rgba(86,78,66,.10));
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
@media (prefers-color-scheme: light){
html:not([data-theme]) .menu-home,
html:not([data-theme]) .menu-main,
html:not([data-theme]) .menu-blog,
html:not([data-theme]) .menu-downloads{
background-color: var(--menu-button-bg, rgba(255,255,255,.74));
border: 1px solid var(--menu-button-border, rgba(86,78,66,.10));
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
}
/* Header.small topmenu: minder blauw, neutraler glas in licht/auto */
html[data-theme="light"] #header.small .header-menu .menu-home,
html[data-theme="light"] #header.small .header-menu .menu-main,
html[data-theme="light"] #header.small .header-menu .menu-blog,
html[data-theme="light"] #header.small .header-menu .menu-downloads,
html[data-theme="auto"] #header.small .header-menu .menu-home,
html[data-theme="auto"] #header.small .header-menu .menu-main,
html[data-theme="auto"] #header.small .header-menu .menu-blog,
html[data-theme="auto"] #header.small .header-menu .menu-downloads{
background-color: var(--menu-button-bg-compact, rgba(146,149,152,.20));
border: 1px solid var(--menu-button-border, rgba(120,124,128,.04));
}
html[data-theme="dark"] #header.small .header-menu .menu-home,
html[data-theme="dark"] #header.small .header-menu .menu-main,
html[data-theme="dark"] #header.small .header-menu .menu-blog,
html[data-theme="dark"] #header.small .header-menu .menu-downloads{
background-color: var(--menu-button-bg-compact, rgba(29,30,32,.78));
border: 1px solid var(--menu-button-border, rgba(204,196,182,.28));
}
@media (prefers-color-scheme: light){
html:not([data-theme]) #header.small .header-menu .menu-home,
html:not([data-theme]) #header.small .header-menu .menu-main,
html:not([data-theme]) #header.small .header-menu .menu-blog,
html:not([data-theme]) #header.small .header-menu .menu-downloads{
background-color: var(--menu-button-bg-compact, rgba(146,149,152,.20));
border: 1px solid var(--menu-button-border, rgba(120,124,128,.24));
}
}
@media (prefers-color-scheme: dark){
html:not([data-theme]) #header.small .header-menu .menu-home,
html:not([data-theme]) #header.small .header-menu .menu-main,
html:not([data-theme]) #header.small .header-menu .menu-blog,
html:not([data-theme]) #header.small .header-menu .menu-downloads,
html[data-theme="auto"] #header.small .header-menu .menu-home,
html[data-theme="auto"] #header.small .header-menu .menu-main,
html[data-theme="auto"] #header.small .header-menu .menu-blog,
html[data-theme="auto"] #header.small .header-menu .menu-downloads{
background-color: var(--menu-button-bg-compact, rgba(29,30,32,.78));
border: 1px solid var(--menu-button-border, rgba(204,196,182,.28));
}
}
/* Label en icoon */
.menu-home .label,
.menu-main .label,
.menu-blog .label,
.menu-downloads .label,
.menu-home i,
.menu-main i,
.menu-blog i,
.menu-downloads i {
position: relative;
z-index: 2;
transition: color 0.3s ease;
}
/* Wave container */
.menu-home::before,
.menu-main::before,
.menu-blog::before,
.menu-downloads::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
display: block;
width: 2200px;
height: 126px;
background-repeat: repeat-x;
transform: translateY(100%);
transition: transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: 1;
}
/* Active wave animation */
.menu-home.highlight::before,
.menu-main.highlight::before,
.menu-blog.highlight::before,
.menu-downloads.highlight::before {
transform: translateY(35%);
animation: waves 7.5s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
}
/* Highlight (actieve) knop */
.menu-home.highlight,
.menu-main.highlight,
.menu-blog.highlight,
.menu-downloads.highlight {
color: var(--color-text);
}
/* === Pijl onder tekst – alleen bij highlight === */
.menu-home.highlight::after,
.menu-main.highlight::after,
.menu-blog.highlight::after,
.menu-downloads.highlight::after {
content: "";
position: absolute;
left: 50%;
bottom: 5px; /* net boven onderrand */
transform: translateX(-50%) scale(1);
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 6px solid var(--color-text); /* kleur van driehoek */
z-index: 3;
opacity: 1;
transition: opacity 0.3s ease, transform 0.3s ease;
}
/* Verborgen standaardtoestand zodat de fade-in werkt */
.menu-home::after,
.menu-main::after,
.menu-blog::after,
.menu-downloads::after {
content: "";
position: absolute;
left: 50%;
bottom: 6px;
transform: translateX(-50%) scale(0.7);
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid var(--color-mm-grey)69;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease, transform 0.3s ease;
}
@keyframes waves {
0% {
margin-left: 0;
}
100% {
margin-left: -1600px;
}
}
.zoek-layer {
position: fixed;
inset: 0;
display: flex;
align-items: flex-start;
justify-content: center;
z-index: 9999;
opacity: 0;
pointer-events: none;
transform: translateY(3vh);
transition: opacity 0.4s ease, transform 0.4s ease;
padding: 6.8em 0em 0em 0em; /* top: 80px, bottom: 1em */
box-sizing: border-box;
overflow: hidden;
}
@media (max-width: 768px) {
.zoek-layer {
padding: 6.1em 0em 0em 0em; /* top: 80px, bottom: 1em */
}
}
.zoek-layer.active {
opacity: 1;
pointer-events: all;
transform: translateY(0%);
}
.sluit-layer {
position: absolute;
top: -0.2em;
right: -0.2em;
align-self: flex-end;
width: 30px;
height: 30px;
margin-bottom: 0.3em;
border-radius: 50px;
background: #fff;
border: none;
font-size: 1.5em;
cursor: pointer;
z-index: 1;
display: flex;
justify-content: center; /* horizontaal centreren */
align-items: center;
padding-bottom: 4px;
}
body.is-preload #header {
-moz-transform: translateY(-5em);
-webkit-transform: translateY(-5em);
-ms-transform: translateY(-5em);
transform: translateY(-5em);
}
#header h1 {
color: #a0a0a1;
display: inline-block;
font-size: 0.9em;
line-height: 1;
margin: 0;
vertical-align: middle;
}
#header h1 a {
border: 0;
color: var(--color-text) !important;
}
#header h1 a:hover {
color: inherit !important;
}
/* Main */
#main {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
clear: both;
}
#main > a > img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.horizontal {
grid-column: span 2;
}
.vertical {
grid-row: span 2;
}
.big {
grid-column: span 2;
grid-row: span 2;
}
.full {
grid-column: span 6;
grid-row: span 4;
}
#main .thumb {
pointer-events: auto;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
overflow: hidden;
position: relative;
background: #000;
overflow: hidden;
}
#loadMore{
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
-moz-transition: -moz-transform 1s ease;
-webkit-transition: -webkit-transform 1s ease;
-ms-transition: -ms-transform 1s ease;
transition: transform 1s ease;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
clear: both;
margin-top: 40px;
margin-bottom: 130px;
}
/* ==============================
THUMB BASIS
============================== */
#main .thumb{
position: relative;
overflow: hidden;
background: #000; /* voorkomt wit doorschijnen */
isolation: isolate; /* voorkomt rare blend/overdraw */
contain: layout paint; /* helpt bij rendering op grote schermen */
}
/* ==============================
AFBEELDING-LAAG
(background via lazy-bg / data-bg)
============================== */
#main .thumb > .image{
-webkit-tap-highlight-color: rgba(255,255,255,0);
position: absolute;
/* Kleine overlap tegen seams/snippers op grote schermen */
inset: -1px;
border: 0;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: #000;
/* Stabilere rendering tijdens transform */
transform: translate3d(0,0,0);
backface-visibility: hidden;
will-change: transform;
transition: transform .5s ease;
z-index: 1;
}
/* Hover op thumb (niet op image zelf) */
#main .thumb:hover > .image,
#main .thumb:focus-within > .image{
transform: translate3d(0,0,0) scale(1.08);
}
/* ==============================
GRADIENT OVERLAY (onder titel)
============================== */
#main .thumb::after{
content: "";
position: absolute;
inset: 0;
pointer-events: none;
/* Subtiele fade van onder naar boven voor leesbaarheid */
background: linear-gradient(
to top,
rgba(10,17,25,.45) 0%,
rgba(10,17,25,.15) 25%,
rgba(10,17,25,0) 55%
);
display: none;
opacity: 0;
transition: opacity .2s ease;
z-index: 2;
}
#main .thumb:hover::after,
#main .thumb:focus-within::after{
opacity: 1;
}
/* ==============================
TITEL (H2) ALS HOVER OVERLAY
============================== */
#main .thumb > h2{
color: var(--mm-thumb-title-color, #fff) !important;
text-shadow: var(--mm-thumb-title-shadow, 0 2px 14px rgba(0, 0, 0, 0.35));
pointer-events: none;
position: absolute;
bottom: 1.875em;
left: 2.1875em;
right: 2.1875em;
margin: 0;
font-size: 0.8em;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
min-width: 0;
z-index: 3;
/* standaard verborgen */
opacity: 0;
transform: translateY(6px);
transition: opacity .2s ease, transform .2s ease;
}
#main .thumb:hover > h2,
#main .thumb:focus-within > h2{
opacity: 1;
transform: translateY(0);
}
/* Mobile tweaks */
@media screen and (max-width: 736px){
#main .thumb > h2{
bottom: 1em;
font-size: 0.6em;
left: 1em;
right: 1em;
}
}
/* ==============================
VERBERG OVERIGE INFO IN GRID
============================== */
.soort_cap{
display: none;
}
#main .thumb > p,
#main .thumb > b{
display: none;
}
body.ie #main:after {
background: var(--pal-white);
}
body.content-active #main:after {
pointer-events: auto;
opacity: 1;
visibility: visible;
}
body.is-preload #main .thumb {
pointer-events: none;
}
/* Alleen zichtbaar maken; NIET aan layout-eigenschappen komen */
#main .thumb,
#main .thumb .pswp-gallery-item.image,
#main .thumb picture,
#main .thumb img {
opacity: 1 !important;
visibility: visible !important;
}
#main .thumb img {
width: 101%;
height: 101%;
object-fit: cover;
display: block;
}
.instagram-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
justify-items: center;
}
#main .thumb {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
#main {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-auto-rows: 280px;
grid-gap: 1px;
padding: 0em;
grid-auto-flow: dense;
background-color: color-mix(in srgb, var(--color-content-gallery) 84%, #000 16%);
}
#main.gallery-masonry.gallery-masonry--compact {
grid-template-columns: repeat(auto-fit, minmax(320px, 480px));
justify-content: center;
}
#main.gallery-masonry.gallery-masonry--compact .thumb {
width: 100%;
max-width: 480px;
justify-self: center;
}
@media screen and (max-width: 736px) {
#main.gallery-masonry.gallery-masonry--compact {
grid-template-columns: minmax(0, calc(100vw - 1rem));
}
#main.gallery-masonry.gallery-masonry--compact .thumb {
max-width: none;
}
}
#content {
display: flex;
align-items: center;
justify-content: center;
display: block;
position: relative;
height: auto;
background-color: var(--color-content);
width: 100%;
color: var(--color-text) !important;
margin-top: -24px;
}
.sort-desktop{
margin-left: 3px;
color: #212121;
}
.tab.active > .sort-desktop{
margin-left: 3px;
color: #fff;
}
@media screen and (max-width: 736px) {
.sort-desktop{
display: none;
}
}
.tabs {
width: 100%;
display: flex;
float: left;
border-bottom: 3px solid var(--color-mm-grey);
}
.tab {
padding: 15px 30px;
margin-left: -10px;
border-bottom: none;
background-color: var(--pal-white);
cursor: pointer;
text-decoration: none;
color: #212121;
border-radius: var(--radius) var(--radius) 0 0;
box-shadow: -10px 0px 12px -10px rgba(0, 0, 0, 0.35);
}
.tabs .tab.active {
color: #ffcc00;
}
.tabs .tab:first-child {
border-radius: 0 var(--radius) var(--radius) 0;
}
.tab:hover {
background-color: #fff;
}
.tab.active {
background-color: var(--color-mm-grey);
color: #fff;
font-weight: bold;
}
#content-gallery {
display: flex;
align-items: center;
justify-content: center;
display: block;
position: relative;
height: auto;
background-color: var(--color-content-gallery);
width: 100%;
color: #212121;
}
#content_gallery.blog-gallery{
background-color: var(--color-content-gallery);
}
#content h1{
color: var(--color-text) !important;
}
#content_text{
padding: 4em 1.2em;
max-width: 80em;
margin: 0 auto;
color: var(--color-text);
}
#main_bg{
background-image: url(https://www.markmooibroek.com/images/logo_bg.png);
background-size: 10rem;
background-position: center center;
background: repeating-linear-gradient(
to bottom,
#000000,
#000000 10px,
#222222 10px,
#222222 20px
);
}
@media screen and (max-width: 736px) {
#main {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
grid-auto-rows: 175px;
grid-gap: 1px;
background-size: 22rem;
background-color: color-mix(in srgb, var(--color-content-gallery) 84%, #000 16%);
}
}
#main > .thumb > img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
/* =========================
Anti-copy in PhotoSwipe
========================= */
.pswp,
.pswp * {
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none; /* iOS: long-press menu verminderen */
}
html.pswp-open,
body.pswp-open{
overflow: hidden !important;
overscroll-behavior: none;
}
/* Grote PSWP afbeelding (v4/v5) */
.pswp img,
.pswp__img {
-webkit-user-drag: none;
user-drag: none;
-webkit-user-select: none;
user-select: none;
}
.thumb img,
.thumb picture,
.thumb picture img,
.thumb .image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transform: translateZ(0); /* compositing fix */
backface-visibility: hidden;
}
#main .thumb.horizontal,
#main .thumb.wide {
grid-column: span 2;
}
#main .thumb.vertical,
#main .thumb.tall {
grid-row: span 2;
}
#main .thumb.big {
grid-column: span 2;
grid-row: span 2;
}
/* Footer (optioneel) */
.site-footer .footer-inner{
display:flex;
gap:.5rem;
align-items:center;
justify-content:center;
flex-wrap:wrap;
padding:1rem 0;
}
.footer-link{
text-decoration: underline;
cursor: pointer;
}
/* Footer (optioneel) */
.site-footer .footer-inner{
display:flex;
gap:.5rem;
align-items:center;
justify-content:center;
flex-wrap:wrap;
padding:1rem 0;
}
.footer-link{
text-decoration: underline;
cursor: pointer;
}
/* Modal basis */
.mm-modal{
position: fixed;
inset: 0;
z-index: 9999;
display: none; /* dicht */
}
.mm-modal.is-open{
display: grid;
place-items: center;
}
/* Donkere backdrop + blur */
.mm-modal__backdrop{
position:absolute;
inset:0;
background: rgba(0,0,0,.45); /* licht zwarte achtergrond */
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
/* Panel (glass) */
.mm-modal__panel{
position: relative;
width: min(720px, calc(100vw - 2rem));
max-height: min(80vh, 700px);
overflow: auto;
background: rgba(20, 20, 20, .55);
border: 1px solid rgba(255,255,255,.12);
border-radius: 18px;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
padding: 1.1rem 1.1rem 1rem;
}
/* Title / content */
.mm-modal__title{
margin: 0 2.25rem .75rem 0;
font-size: 1.2rem;
}
.mm-modal__content p{
margin: .5rem 0;
line-height: 1.55;
}
.mm-modal__hr{
border: none;
height: 1px;
background: rgba(255,255,255,.12);
margin: 1rem 0;
}
/* Close button */
.mm-modal__close{
position:absolute;
top: .8rem;
right: .8rem;
width: 38px;
height: 38px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(0,0,0,.25);
color: #fff;
cursor: pointer;
}
/* Actions */
.mm-modal__actions{
display:flex;
justify-content:flex-end;
margin-top: 1rem;
}
/* Body scroll lock */
body.mm-modal-open{
overflow: hidden;
}
.footer{
background-color: var(--color-content-footer);
color: var(--color-text);
margin-bottom: -1px;
}
.footer-a a:hover{
color: #999 !important;
}
.footer-bottom {
display: grid;
grid-template-columns: 1fr; /* mobiel: eerst 1 per rij */
gap: 1em;
padding: 1em 0;
text-align: left;
}
/* Items */
.footer-bottom-item,
.footer-bottom-item-sub {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
gap: .75em;
text-decoration: none;
color: var(--color-text);
border-radius: var(--radius);
border: 1px solid var(--mm-brd);
background:
linear-gradient(135deg, rgba(169,160,146,.18), rgba(147,138,124,.14) 52%, rgba(182,172,156,.14)),
var(--color-footer-button);
padding: .72rem .92rem;
opacity: .9;
box-shadow: 0 8px 18px rgba(70,60,48,.12);
transition:
opacity .2s ease,
background .2s ease,
border-color .2s ease,
box-shadow .2s ease,
transform .2s ease;
min-width: 0;
min-height: 46px;
line-height: 1.2;
}
/* Tekst → afbreken met … */
.footer-bottom-item .label,
.footer-bottom-item-sub .label {
flex: 1 1 auto; /* mag krimpen */
min-width: 0; /* 🔑 anders werkt ellipsis niet */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* Icoon → mag NIET krimpen */
.footer-bottom-item i,
.footer-bottom-item-sub i {
flex: 0 0 auto;
}
/* subitems lichter */
.footer-bottom-item-sub {
background:
linear-gradient(135deg, rgba(169,160,146,.14), rgba(147,138,124,.11) 52%, rgba(182,172,156,.10)),
var(--color-footer-button2);
}
/* Hover effect */
.footer-bottom-item:hover,
.footer-bottom-item-sub:hover {
background:
linear-gradient(135deg, rgba(169,160,146,.28), rgba(147,138,124,.24) 52%, rgba(182,172,156,.22)),
var(--mm-bg-hover);
border-color: rgba(86,78,66,.22);
box-shadow: 0 10px 22px rgba(70,60,48,.20);
transform: translateY(-1px);
opacity: 1;
}
/* Icon */
.footer-bottom-item i,
.footer-bottom-item-sub i {
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
border: 1px solid rgba(86,78,66,.14);
background: rgba(255,255,255,.78);
color: var(--color-text);
font-size: 1.05rem;
line-height: 1;
flex-shrink: 0;
}
html[data-theme="dark"] .footer-bottom-item,
html[data-theme="dark"] .footer-bottom-item-sub{
color: rgba(247,243,232,.98);
border-color: rgba(204,196,182,.24);
background:
linear-gradient(135deg, rgba(58,60,64,.52), rgba(44,46,49,.46) 52%, rgba(74,76,80,.38)),
rgba(20,21,23,.72);
box-shadow: 0 8px 18px rgba(10,11,12,.34);
}
html[data-theme="dark"] .footer-bottom-item:hover,
html[data-theme="dark"] .footer-bottom-item-sub:hover{
border-color: rgba(204,196,182,.38);
background:
linear-gradient(135deg, rgba(73,75,79,.62), rgba(55,57,60,.56) 52%, rgba(89,91,96,.46)),
rgba(24,25,27,.82);
}
html[data-theme="dark"] .footer-bottom-item i,
html[data-theme="dark"] .footer-bottom-item-sub i{
border-color: rgba(204,196,182,.22);
background: rgba(33,34,37,.86);
color: rgba(247,243,232,.95);
}
/* item4 contactregels: titel links, icon rechts, zelfde stijl */
.item4 .icons{
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: .6rem;
}
.item4 .icons li{
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
gap: .75rem;
min-width: 0;
min-height: 46px;
line-height: 1.2;
border-radius: var(--radius);
border: 1px solid var(--mm-brd);
background:
linear-gradient(135deg, rgba(169,160,146,.18), rgba(147,138,124,.14) 52%, rgba(182,172,156,.14)),
var(--color-footer-button);
box-shadow: 0 8px 18px rgba(70,60,48,.12);
padding: .72rem .92rem;
opacity: .9;
transition:
opacity .2s ease,
background .2s ease,
border-color .2s ease,
box-shadow .2s ease,
transform .2s ease;
}
.item4 .icons li a{
flex: 1 1 auto;
display: block;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--color-text) !important;
transition: color .2s ease;
}
.item4 .icons li i{
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
border: 1px solid rgba(86,78,66,.14);
background: rgba(255,255,255,.78);
color: var(--color-text) !important;
flex: 0 0 auto;
font-size: 1.05rem;
}
html[data-theme="dark"] .item4 .icons li{
border-color: rgba(204,196,182,.24);
background:
linear-gradient(135deg, rgba(58,60,64,.52), rgba(44,46,49,.46) 52%, rgba(74,76,80,.38)),
rgba(20,21,23,.72);
box-shadow: 0 8px 18px rgba(10,11,12,.34);
}
html[data-theme="dark"] .item4 .icons li a{
color: rgba(247,243,232,.98) !important;
}
html[data-theme="dark"] .item4 .icons li i{
border-color: rgba(204,196,182,.22);
background: rgba(33,34,37,.86);
color: rgba(247,243,232,.95) !important;
}
.item4 .icons li:hover{
background:
linear-gradient(135deg, rgba(169,160,146,.28), rgba(147,138,124,.24) 52%, rgba(182,172,156,.22)),
var(--mm-bg-hover);
border-color: rgba(86,78,66,.22);
box-shadow: 0 10px 22px rgba(70,60,48,.20);
transform: translateY(-1px);
opacity: 1;
}
html:not([data-theme="dark"]) .item4 .icons li:hover,
html[data-theme="light"] .item4 .icons li:hover{
background:
linear-gradient(135deg, rgba(214,209,197,.42), rgba(195,189,177,.36) 52%, rgba(226,220,206,.30)),
rgba(247,243,232,.92);
border-color: rgba(92,86,75,.24);
box-shadow: 0 10px 22px rgba(60,56,49,.16);
}
.item4 .icons li:hover a{
color: var(--color-text) !important;
}
.item4 .icons li:hover i{
border-color: rgba(86,78,66,.24);
background: rgba(255,255,255,.90);
color: var(--color-text) !important;
}
html:not([data-theme="dark"]) .item4 .icons li:hover i,
html[data-theme="light"] .item4 .icons li:hover i{
border-color: rgba(92,86,75,.22);
background: rgba(247,243,232,.98);
}
html[data-theme="dark"] .item4 .icons li:hover{
border-color: rgba(204,196,182,.38);
background:
linear-gradient(135deg, rgba(73,75,79,.62), rgba(55,57,60,.56) 52%, rgba(89,91,96,.46)),
rgba(24,25,27,.82);
}
html[data-theme="dark"] .item4 .icons li:hover a{
color: rgba(247,243,232,.98) !important;
}
html[data-theme="dark"] .item4 .icons li:hover i{
border-color: rgba(204,196,182,.34);
background: rgba(47,48,51,.92);
color: rgba(247,243,232,.98) !important;
}
/* Homepage contactblok: desktop 3 naast elkaar, mobiel onder elkaar */
.grid-intro-container .item4 .icons{
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 768px){
.grid-intro-container .item4 .icons{
grid-template-columns: 1fr;
}
}
/* 📱 Vanaf ±400px: 2 naast elkaar als het past */
@media (min-width: 400px) {
.footer-bottom {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* 💡 Ruimer vanaf tablet */
@media (min-width: 768px) {
.footer-bottom-item,
.footer-bottom-item-sub {
padding: 1em 1.5em;
}
}
/* 💻 Desktop lay-out zoals je wilde */
@media (min-width: 1024px) {
.footer-bottom {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.footer-bottom-item,
.footer-bottom-item-sub {
padding: 1em 2em;
}
}
.lang-flag {
transition: transform 0.4s ease;
}
.lang-flag:hover {
transform: scale(1.1);
}
/* Tablet: 2 kolommen */
@media (max-width: 992px) {
.footer-bottom {
grid-template-columns: repeat(2, 1fr);
}
}
/* Mobiel: 2 kolommen */
@media (max-width: 600px) {
.footer-bottom {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Footer */
.footer-copyright {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
align-items: center;
}
.footer-copyright-item {
padding: 5px 10px;
display: flex;
align-items: center;
}
.footer-left {
justify-self: start;
}
.footer-center {
justify-self: center;
}
.footer-right {
justify-self: end;
}
.footer-right a {
text-decoration: none;
color: inherit;
transition: color 0.3s;
}
.footer-right a:hover {
color: #6B04FF;
}
/* Mobiel layout aanpassen */
@media (max-width: 600px) {
.footer-copyright {
grid-template-columns: 1fr;
}
.footer-left,
.footer-center,
.footer-right {
justify-self: center;
text-align: center;
}
.footer-left {
flex-direction: column; /* Logo boven, tekst onder */
order: 2; /* Na center item */
}
.footer-center {
order: 1; /* Komt bovenaan */
}
.footer-right {
flex-wrap: wrap;
justify-content: center;
order: 3; /* Onderaan */
}
}
#footer .copyright {
color: #505051;
font-size: 0.9em;
}
#footer h1{
color: var(--color-text) !important;
}
#footer .copyright a {
color: inherit;
}
html[data-theme="dark"] #footer .copyright,
html[data-theme="dark"] #footer .copyright a,
html[data-theme="dark"] .footer-right a,
html[data-theme="dark"] .footer-copyright,
html[data-theme="dark"] .footer-copyright-item,
html[data-theme="dark"] .footer-copyright .footer-left,
html[data-theme="dark"] .footer-copyright .footer-left *,
html[data-theme="dark"] .footer-copyright .footer-left a{
color: #fff !important;
}
html[data-theme="dark"] .footer-right a:hover{
color: #fff !important;
opacity: .85;
}
@media (prefers-color-scheme: dark){
html:not([data-theme]) #footer .copyright,
html:not([data-theme]) #footer .copyright a,
html:not([data-theme]) .footer-right a,
html:not([data-theme]) .footer-copyright,
html:not([data-theme]) .footer-copyright-item,
html:not([data-theme]) .footer-copyright .footer-left,
html:not([data-theme]) .footer-copyright .footer-left *,
html:not([data-theme]) .footer-copyright .footer-left a,
html[data-theme="auto"] #footer .copyright,
html[data-theme="auto"] #footer .copyright a,
html[data-theme="auto"] .footer-right a,
html[data-theme="auto"] .footer-copyright,
html[data-theme="auto"] .footer-copyright-item,
html[data-theme="auto"] .footer-copyright .footer-left,
html[data-theme="auto"] .footer-copyright .footer-left *,
html[data-theme="auto"] .footer-copyright .footer-left a{
color: #fff !important;
}
html:not([data-theme]) .footer-right a:hover,
html[data-theme="auto"] .footer-right a:hover{
color: #fff !important;
opacity: .85;
}
}
.copyright{
margin-bottom: 4em;
}
/* BURGER
========================================== */
.burger {
display: block;
width: 40px;
height: 50px;
position: fixed;
top: 6px;
right: 18px;
padding: 10px;
z-index: 10;
margin-top: -1px;
border-radius: 0 var(--radius) var(--radius) 0;
position: relative;
float: right;
}
.burger span,
.burger-topmenu span {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
transform: translate(-50%, -50%);
}
.burger span::before,
.burger span::after,
.burger-topmenu span::before,
.burger-topmenu span::after {
position: absolute;
content: "";
right: 0;
height: 1px;
border-radius: 999px;
background-color: currentColor;
outline: 1px solid transparent;
transition:
transform .34s cubic-bezier(.22,.75,.2,1),
width .24s ease,
opacity .24s ease,
background-color .24s ease;
z-index: 99999999999;
}
.burger{
color: var(--color-text);
}
.burger span::before{
width: 24px;
top: -5px;
}
.burger span::after{
width: 16px;
top: 5px;
}
.burger:hover span::after{
width: 24px;
}
.burger.clicked span::before{
width: 24px;
transform: translateY(5px) rotate(45deg);
}
.burger.clicked span::after{
width: 24px;
transform: translateY(-5px) rotate(-45deg);
}
.burger:hover {
cursor: pointer;
}
.burger-topmenu {
display: block;
width: 63px;
height: 63px;
position: absolute;
top: 6px;
right: -11px;
padding: 10px;
z-index: 99999;
color: #fff;
}
.burger-topmenu span::before{
width: 24px;
top: -5px;
}
.burger-topmenu span::after{
width: 16px;
top: 5px;
}
.burger-topmenu:hover span::after{
width: 24px;
}
.burger-topmenu.clicked span::before{
width: 24px;
transform: translateY(5px) rotate(45deg);
}
.burger-topmenu.clicked span::after{
width: 24px;
transform: translateY(-5px) rotate(-45deg);
}
.burger-topmenu:hover {
cursor: pointer;
}
/* NAV
========================================== */
nav {
line-height: 2em;
z-index: 10020;
background:
radial-gradient(1200px 700px at 12% 8%, var(--bg-blob1), transparent 60%),
radial-gradient(1100px 760px at 88% 18%, var(--bg-blob2), transparent 58%),
radial-gradient(900px 700px at 58% 90%, var(--bg-blob3), transparent 60%),
radial-gradient(700px 480px at 35% 60%, var(--bg-blob4), transparent 62%),
var(--bg);
position: fixed;
top: 0;
right: 0;
height: 100svh;
max-width: 500px;
width: 110%;
padding: 24px 75px;
overflow-y: auto;
display: flex; /* ✅ Flexbox inschakelen */
flex-direction: column; /* Zorgt dat alles onder elkaar blijft */
justify-content: center; /* ✅ Centreert verticaal */
box-sizing: border-box; /* Houd padding netjes binnen de hoogte */
transform: translateX(110%);
transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
nav.show {
height: 100%;
-webkit-transform: translateX(17px);
-moz-transform: translateX(17px);
-ms-transform: translateX(17px);
-o-transform: translateX(17px);
transform: translateX(17px);
}
nav.show ul.main li {
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
opacity: 1;
}
nav.show ul.main li:nth-child(1) { transition-delay: 0.07s; }
nav.show ul.main li:nth-child(2) { transition-delay: 0.14s; }
nav.show ul.main li:nth-child(3) { transition-delay: 0.21s; }
nav.show ul.main li:nth-child(4) { transition-delay: 0.28s; }
nav.show ul.main li:nth-child(5) { transition-delay: 0.35s; }
nav.show ul.main li:nth-child(6) { transition-delay: 0.42s; }
nav.show ul.main li:nth-child(7) { transition-delay: 0.49s; }
nav.show ul.main li:nth-child(8) { transition-delay: 0.56s; }
nav.show ul.main li:nth-child(9) { transition-delay: 0.63s; }
nav.show ul.main li:nth-child(10) { transition-delay: 0.70s; }
nav.show ul.main li:nth-child(11) { transition-delay: 0.77s; }
nav.show ul.main li:nth-child(12) { transition-delay: 0.84s; }
nav.show ul.main li:nth-child(13) { transition-delay: 0.91s; }
nav.show ul.main li:nth-child(14) { transition-delay: 0.98s; }
nav.show ul.main li:nth-child(15) { transition-delay: 1.05s; }
nav.show ul.main li:nth-child(16) { transition-delay: 1.12s; }
nav.show ul.main li:nth-child(17) { transition-delay: 1.19s; }
nav.show ul.main li:nth-child(18) { transition-delay: 1.26s; }
nav.show ul.main li:nth-child(19) { transition-delay: 1.33s; }
nav.show ul.main li:nth-child(20) { transition-delay: 1.40s; }
nav.show .about, nav.show .social, nav.show ul.sub {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
opacity: 1;
transition-delay: 0.85s;
z-index: 9;
}
/* Failsafe: zodra Mijn account open is, menu mag nooit zichtbaar blijven */
body.panelprofiel-open > nav,
body.panelprofiel-open #menu{
display: none !important;
-webkit-transform: translateX(110%) !important;
-moz-transform: translateX(110%) !important;
-ms-transform: translateX(110%) !important;
-o-transform: translateX(110%) !important;
transform: translateX(110%) !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
body.panelprofiel-open .header-menu{
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
nav ul.main {
list-style-type: none;
}
nav ul.main li {
-webkit-transform: translateX(40px);
-moz-transform: translateX(40px);
-ms-transform: translateX(40px);
-o-transform: translateX(40px);
transform: translateX(40px);
opacity: 0;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
nav ul.main li:last-of-type {
margin-bottom: 0px;
}
nav ul.main li a {
color: var(--color-text);
text-decoration: none;
text-transform: uppercase;
display: block;
padding: 5px 0;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
nav ul.main li a b{
color: var(--color-text) !important;
border-radius: var(--radius-inner);
}
nav ul.main li a{
display: flex;
align-items: center;
}
.menu_aantallen {
margin-left: auto;
text-align: right;
}
nav ul.main li a span {
color: var(--nav-accent-soft);
}
nav ul.main li a:hover {
color: var(--nav-accent);
}
nav li i {
color: var(--color-text);
}
/* ===== Arrow rechts in menu links ===== */
nav ul.main li a::after {
content: "›"; /* mooie subtiele arrow */
margin-left: .7em;
font-size: 1.1rem;
opacity: .55;
transition: transform .25s ease, opacity .25s ease;
}
/* Hover effect */
nav ul.main li a:hover::after {
transform: translateX(6px);
opacity: 1;
}
/* Menu link layout verbeteren */
nav ul.main li a{
display: flex;
align-items: center;
width: 100%; /* belangrijk */
}
/* Aantallen blijven rechts */
.menu_aantallen{
margin-left: auto;
padding-right: .6em; /* ruimte vóór arrow */
}
/* Arrow helemaal aan het einde */
nav ul.main li a::after{
content: "›";
font-size: 1.15rem;
opacity: .55;
flex-shrink: 0; /* arrow mag niet krimpen */
transition: transform .25s ease, opacity .25s ease;
}
/* Hover animatie */
nav ul.main li a:hover::after{
transform: translateX(6px);
opacity: 1;
}
nav .about {
margin-top: 20px;
-webkit-transform: translateY(30px);
-moz-transform: translateY(30px);
-ms-transform: translateY(30px);
-o-transform: translateY(30px);
transform: translateY(30px);
opacity: 0;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
nav .about p {
color: #ffffff;
font-family: "Spectral", serif;
font-size: 1.05rem;
letter-spacing: 0.5px;
line-height: 170%;
}
nav .social {
margin-top: 40px;
position: relative;
padding-bottom: 30px;
-webkit-transform: translateY(30px);
-moz-transform: translateY(30px);
-ms-transform: translateY(30px);
-o-transform: translateY(30px);
transform: translateY(30px);
opacity: 0;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
nav .social:after {
content: "";
width: 230px;
height: 2px;
background-color: var(--nav-accent-soft);
position: absolute;
bottom: 0;
left: 0;
}
nav .social a {
display: inline-block;
width: 30px;
height: 30px;
margin-right: 25px;
}
nav .social a:last-of-type {
margin-right: 0px;
}
nav .social a:hover svg path, nav .social a:hover svg circle {
fill: var(--nav-accent);
}
nav .social a svg {
width: 100%;
height: 100%;
}
nav .social a svg path, nav .social a svg circle {
fill: #ffffff;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
nav ul.sub {
list-style-type: none;
margin-top: 40px;
-webkit-transform: translateY(30px);
-moz-transform: translateY(30px);
-ms-transform: translateY(30px);
-o-transform: translateY(30px);
transform: translateY(30px);
opacity: 0;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
nav ul.sub li {
margin-bottom: 10px;
}
nav ul.sub li:last-of-type {
margin-bottom: 0px;
}
nav ul.sub li a {
color: #ffffff;
font-family: "Raleway", sans-serif;
letter-spacing: 1px;
font-size: 0.9rem;
text-decoration: none;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
nav ul.sub li a:hover {
color: var(--nav-accent);
}
nav a:hover{
color: var(--color-link) !important;
}
.hr-menu{
margin-top:10px;
margin-bottom:10px;
margin-left:0px;
margin-right:0px;
border-bottom: 1px solid var(--color-text);
opacity: .55;
}
/* ===== Menu search bar ===== */
.menu-search { padding: .6em 1em; }
.menu-search-form { width: 100%; }
.menu-search-wrap{
position: relative;
display: flex;
align-items: center;
gap: .5em;
width: 100%;
}
.menu-search-icon{
position: absolute;
left: .9em;
top: 50%;
transform: translateY(-50%);
font-size: .95rem;
opacity: .9;
pointer-events: none;
}
.menu-search-input{
width: 100%;
height: 42px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.18);
background: rgba(255,255,255,.08);
color: inherit;
padding: 0 3.1em 0 2.6em; /* ruimte voor icoon + knop */
outline: none;
}
.menu-search-input::placeholder{
opacity: .85;
}
.menu-search-btn{
position: absolute;
right: .35em;
top: 50%;
transform: translateY(-50%);
width: 34px;
height: 34px;
border-radius: 999px;
border: 0;
background: rgba(255,255,255,.14);
color: inherit;
display: inline-flex;
align-items: center;
justify-content: center;
}
.menu-search-btn:active{ transform: translateY(-50%) scale(.98); }
/* OVERLAY
========================================== */
.overlay {
position: fixed;
top: 0;
left: 0;
z-index: 10010;
width: 100%;
height: 100%;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
opacity: 0;
visibility: hidden;
}
.overlay2 {
position: fixed;
top: 0;
left: 0;
z-index: 10010;
width: 100%;
height: 100%;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
opacity: 0;
visibility: hidden;
}
.overlay.show {
opacity: 1;
backdrop-filter: blur(10px);
visibility: visible;
}
.overlay2.show2 {
opacity: 1;
backdrop-filter: blur(10px);
visibility: visible;
}
.overlay,
.overlay2{
position: fixed;
inset: 0;
z-index: 10010;
width: 100%;
height: 100%;
transition: all .3s ease-in-out;
opacity: 0;
visibility: hidden;
pointer-events: none; /* ✅ KEY */
}
.overlay{
background-color: #00000045;
}
.overlay2{
background: transparent;
}
.overlay.show{
opacity: 1;
visibility: visible;
pointer-events: auto; /* ✅ KEY */
backdrop-filter: blur(10px);
}
.overlay2.show2{
opacity: 1;
visibility: visible;
pointer-events: auto; /* ✅ KEY */
background: #00000070;
backdrop-filter: blur(10px);
}
/* Body niet scrollen wanneer overlay actief is */
body.overflow{
overflow: hidden !important;
touch-action: auto !important;
overscroll-behavior: none !important;
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
width: auto !important;
box-sizing: border-box !important;
height: auto !important;
}
body.overflow nav,
body.overflow .panel,
body.overflow #panelprofiel{
touch-action: auto !important;
overscroll-behavior: contain;
}
.ig-badge {
display: inline-flex;
align-items: center;
min-height: var(--mm-badge-height);
background-color: #f3f1eb; /* zachte achtergrond */
color: var(--color-mm-grey); /* donkere tekst */
font-weight: bold;
padding: 8px 16px;
border-radius: 999px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
transition: transform 0.3s ease;
box-sizing: border-box;
}
.ig-badge:hover {
transform: translateY(-2px);
}
.ig-icon {
margin-right: 8px;
font-size: 1.2em;
}
.recent-work-buttons ul{
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
grid-gap: 10px;
grid-auto-flow: dense;
}
.recent-work-buttons h1{
color: #212121 !important;
}
.recent-work-buttons li{
float: left;
border-radius: var(--radius);
width: 100%;
text-align: center;
}
.recent-work-buttons .actief {
background-color: #fff !important;
color: #000 !important;
}
/* li: ruimte rechts reserveren voor het icoon */
ul.mygear li {
position: relative;
padding-right: 3em; /* extra right padding voor icoon */
justify-content: center;
}
/* odd achtergrond (blijft werken) */
ul.mygear li:nth-child(odd){
background-color: transparent;
}
/* icoon: pak 'm ongeacht nesting (ook binnen ) en overrule inline styles */
ul.mygear li i {
position: absolute !important; /* overrule inline position: relative */
right: 10px !important;
top: 50% !important;
transform: translateY(-50%) !important;
float: none !important; /* overrule eventuele float:right/left */
padding: 0 !important; /* overrule padding-left uit oude regel */
line-height: 1;
color: #212121;
}
.mygear + h2 {
margin-top: 30px; /* ruimte boven nieuwe sectie */
}
h2.fade-in.dark {
margin-bottom: 10px; /* ruimte onder de titel */
}
/* Rode ring voor Canon L-objectieven */
ul.mygear li.lens-L i::after {
content: "";
position: absolute;
top: 50%;
right: -0px; /* precies rond het icoon */
transform: translateY(-50%);
width: 30px; /* pas aan indien icoon groter/kleiner is */
height: 30px;
border: 1px solid #c40000; /* Canon L-rood */
border-radius: 50%;
pointer-events: none;
}
.badge-count {
position: absolute;
top: 12px;
right: 12px;
z-index: 3;
display: inline-flex;
align-items: center; /* centreert verticaal */
justify-content: center;
gap: 6px;
padding: 6px 10px;
min-height: var(--mm-badge-height);
font-size: 12px;
font-weight: 700;
line-height: 1; /* geen extra leading */
color: #fff;
background: rgba(21,21,19,.85);
backdrop-filter: saturate(1.2) blur(2px);
border-radius: 999px;
box-shadow: 0 8px 20px rgba(0,0,0,.25);
pointer-events: none;
box-sizing: border-box;
}
/* >>> Kritiek: lijnhoogte van het icoon uitzetten, dan exact centreren */
.badge-count i {
display: flex; /* maakt een echte box */
align-items: center;
justify-content: center;
font-size: 1em; /* gelijk aan tekstgrootte */
line-height: 0; /* haalt font-leading weg */
height: 1em; /* zelfde em-box als tekst */
width: 1em; /* optioneel, geeft perfecte box */
margin: 0; /* geen extra marge */
}
.badge-count-num {
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
margin-top: 0; /* reset */
transform: none; /* geen micro-shifts meer */
}
/* iets groter op tablet/desktop */
@media (min-width: 768px){
.badge-count { padding: 7px 12px; font-size: 13px; }
}
.swiper-container {
margin: 0 auto;
position: relative;
overflow: hidden;
/* Fix of Webkit flickering */
z-index: 1;
}
.swiper-end-slide{
margin-right: 2em;
}
.swiper-container-no-flexbox .swiper-slide {
float: left;
}
.swiper-container-vertical > .swiper-wrapper {
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
-ms-transition-property: -ms-transform;
transition-property: transform;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.swiper-container-android .swiper-slide,
.swiper-wrapper {
-webkit-transform: translate3d(0px, 0, 0);
-moz-transform: translate3d(0px, 0, 0);
-o-transform: translate(0px, 0px);
-ms-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
}
.swiper-container-multirow > .swiper-wrapper {
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.swiper-container-free-mode > .swiper-wrapper {
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
margin: 0 auto;
}
.reel-slide {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
position: relative;
display: flex;
align-items: flex-end;
justify-content: center;
color: white;
text-decoration: none;
overflow: hidden;
}
.reel-overlay {
padding: 10px 20px;
position: absolute;
bottom: 2em;
align-items: center;
border-radius: var(--radius-inner);
color: #fff !important;
}
.reel-overlay i{
position: relative;
margin-right: 5px;
top: 2px;
font-size: 1rem;
}
.swiper-slide {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-flex-shrink: 0;
-ms-flex: 0 0 auto;
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
border-radius: var(--radius);
}
/* a11y */
.swiper-container .swiper-notification {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
opacity: 0;
z-index: -1000;
}
/* IE10 Windows Phone 8 Fixes */
.swiper-wp8-horizontal {
-ms-touch-action: pan-y;
touch-action: pan-y;
}
.swiper-wp8-vertical {
-ms-touch-action: pan-x;
touch-action: pan-x;
}
/* Arrows */
.swiper-button-prev,
.swiper-button-next {
position: absolute;
top: 50%;
width: 50px;
height: 50px;
margin-top: -22px;
z-index: 10;
cursor: pointer;
-moz-background-size: 27px 44px;
-webkit-background-size: 27px 44px;
background-size: 10px 44px;
background-position: center;
background-repeat: no-repeat;
padding: 1em;
border-radius: 100px;
}
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
opacity: 0.15;
cursor: auto;
pointer-events: none;
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
left: 10px;
right: auto;
}
.swiper-button-prev.swiper-button-black,
.swiper-container-rtl .swiper-button-next.swiper-button-black {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-prev.swiper-button-white,
.swiper-container-rtl .swiper-button-next.swiper-button-white {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
right: 10px;
left: auto;
}
.swiper-button-next.swiper-button-black,
.swiper-container-rtl .swiper-button-prev.swiper-button-black {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-next.swiper-button-white,
.swiper-container-rtl .swiper-button-prev.swiper-button-white {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}
/* Pagination Styles */
.swiper-pagination {
position: absolute;
text-align: center;
-webkit-transition: 300ms;
-moz-transition: 300ms;
-o-transition: 300ms;
transition: 300ms;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
z-index: 10;
}
.swiper-pagination.swiper-pagination-hidden {
opacity: 0;
}
.swiper-pagination-bullet {
width: 8px;
height: 8px;
display: inline-block;
border-radius: 100%;
background: #000;
opacity: 0.2;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
cursor: pointer;
}
.swiper-pagination-white .swiper-pagination-bullet {
background: #fff;
}
.swiper-pagination-bullet-active {
opacity: 1;
background: #b8aa91;
}
.swiper-pagination-white .swiper-pagination-bullet-active {
background: #fff;
}
.swiper-pagination-black .swiper-pagination-bullet-active {
background: #000;
}
.swiper-container-vertical > .swiper-pagination {
right: 10px;
top: 50%;
-webkit-transform: translate3d(0px, -50%, 0);
-moz-transform: translate3d(0px, -50%, 0);
-o-transform: translate(0px, -50%);
-ms-transform: translate3d(0px, -50%, 0);
transform: translate3d(0px, -50%, 0);
}
.swiper-container-vertical > .swiper-pagination .swiper-pagination-bullet {
margin: 5px 0;
display: block;
}
.swiper-container-horizontal > .swiper-pagination {
bottom: 10px;
left: 0;
width: 100%;
}
.swiper-container-horizontal > .swiper-pagination .swiper-pagination-bullet {
margin: 0 5px;
}
/* 3D Container */
.swiper-container-3d {
-webkit-perspective: 1200px;
-moz-perspective: 1200px;
-o-perspective: 1200px;
perspective: 1200px;
}
.swiper-container-3d .swiper-wrapper,
.swiper-container-3d .swiper-slide,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-cube-shadow {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10;
}
.swiper-container-3d .swiper-slide-shadow-left {
background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
/* Safari 4+, Chrome */
background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Chrome 10+, Safari 5.1+, iOS 5+ */
background-image: -moz-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Firefox 3.6-15 */
background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Opera 11.10-12.00 */
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Firefox 16+, IE10, Opera 12.50+ */
}
.swiper-container-3d .swiper-slide-shadow-right {
background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
/* Safari 4+, Chrome */
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Chrome 10+, Safari 5.1+, iOS 5+ */
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Firefox 3.6-15 */
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Opera 11.10-12.00 */
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Firefox 16+, IE10, Opera 12.50+ */
}
.swiper-container-3d .swiper-slide-shadow-top {
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
/* Safari 4+, Chrome */
background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Chrome 10+, Safari 5.1+, iOS 5+ */
background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Firefox 3.6-15 */
background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Opera 11.10-12.00 */
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Firefox 16+, IE10, Opera 12.50+ */
}
.swiper-container-3d .swiper-slide-shadow-bottom {
background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
/* Safari 4+, Chrome */
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Chrome 10+, Safari 5.1+, iOS 5+ */
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Firefox 3.6-15 */
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Opera 11.10-12.00 */
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Firefox 16+, IE10, Opera 12.50+ */
}
/* Coverflow */
.swiper-container-coverflow .swiper-wrapper {
/* Windows 8 IE 10 fix */
-ms-perspective: 1200px;
}
/* Fade */
.swiper-container-fade.swiper-container-free-mode .swiper-slide {
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.swiper-container-fade .swiper-slide {
pointer-events: none;
}
.swiper-container-fade .swiper-slide .swiper-slide {
pointer-events: none;
}
.swiper-container-fade .swiper-slide-active,
.swiper-container-fade .swiper-slide-active .swiper-slide-active {
pointer-events: auto;
}
/* Cube */
.swiper-container-cube {
overflow: visible;
}
.swiper-container-cube .swiper-slide {
pointer-events: none;
visibility: hidden;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
width: 100%;
height: 100%;
}
.swiper-container-cube.swiper-container-rtl .swiper-slide {
-webkit-transform-origin: 100% 0;
-moz-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-next,
.swiper-container-cube .swiper-slide-prev,
.swiper-container-cube .swiper-slide-next + .swiper-slide {
pointer-events: auto;
visibility: visible;
}
.swiper-container-cube .swiper-cube-shadow {
position: absolute;
left: 0;
bottom: 0px;
width: 100%;
height: 100%;
background: #000;
opacity: 0.6;
-webkit-filter: blur(50px);
filter: blur(50px);
}
.swiper-container-cube.swiper-container-vertical .swiper-cube-shadow {
z-index: 0;
}
/* Scrollbar */
.swiper-scrollbar {
border-radius: var(--radius);
position: relative;
-ms-touch-action: none;
background: rgba(0, 0, 0, 0.6);
}
.swiper-container-horizontal > .swiper-scrollbar {
position: absolute;
left: 50%;
bottom: 0;
z-index: 50;
height: 5px;
width: 60%;
transform: translate(-50%,0);
}
.swiper-container-vertical > .swiper-scrollbar {
position: absolute;
right: 3px;
top: 1%;
z-index: 50;
width: 5px;
height: 98%;
}
.swiper-scrollbar-drag {
height: 100%;
width: 100%;
position: relative;
background: rgba(255, 255, 255, 0.4);
border-radius: var(--radius);
left: 0;
top: 0;
}
.swiper-scrollbar-cursor-drag {
cursor: move;
}
/* Preloader */
.swiper-lazy-preloader {
width: 42px;
height: 42px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -21px;
margin-top: -21px;
z-index: 10;
-webkit-transform-origin: 50%;
-moz-transform-origin: 50%;
transform-origin: 50%;
-webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
-moz-animation: swiper-preloader-spin 1s steps(12, end) infinite;
animation: swiper-preloader-spin 1s steps(12, end) infinite;
}
.swiper-lazy-preloader:after {
display: block;
content: "";
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
background-position: 50%;
-webkit-background-size: 100%;
background-size: 100%;
background-repeat: no-repeat;
}
.swiper-lazy-preloader-white:after {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
@-webkit-keyframes swiper-preloader-spin {
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes swiper-preloader-spin {
100% {
transform: rotate(360deg);
}
}
.swiper-pagination{
position:absolute;
text-align:center;
transition:.3s opacity;
transform:translate3d(0,0,0);
z-index:10;
}
.swiper-pagination.swiper-pagination-hidden{
opacity:0
}
.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{
display:none!important
}
.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{
bottom:var(--swiper-pagination-bottom,0px);
top:var(--swiper-pagination-top,auto);
left:0;
width:100%
}
.swiper-pagination-bullets-dynamic{
overflow:hidden;font-size:0
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{
transform:scale(.33);position:relative
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{
transform:scale(1)
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{
transform:scale(1)
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{
transform:scale(.66)
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{
transform:scale(.33)
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{
transform:scale(.66)
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{
transform:scale(.33)
}
.swiper-pagination-bullet{
width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));
eight:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));
display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius,50%);
background:var(--swiper-pagination-bullet-inactive-color,#757575);
opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)
}
button.swiper-pagination-bullet{
border:none;
margin:0;
padding:0;
box-shadow:none;
-webkit-appearance:none;
appearance:none
}
.swiper-pagination-clickable .swiper-pagination-bullet{
cursor:pointer
}
.swiper-pagination-bullet:only-child{
display:none!important
}
.swiper-pagination-bullet-active{
opacity:var(--swiper-pagination-bullet-opacity, 1);
background:var(--swiper-pagination-color,var(--swiper-theme-color, #000));
}
.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{
right:var(--swiper-pagination-right,8px);
left:var(--swiper-pagination-left,auto);
top:50%;
transform:translate3d(0px,-50%,0)
}
.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{
margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;
display:block
}
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{
top:50%;
transform:translateY(-50%);
width:8px
}
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{
display:inline-block;
transition:.2s transform,.2s top
}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{
margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,rgba(0,0,0,.25));position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:var(--swiper-pagination-progressbar-size,4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}
.swiper-container {
width: 100%;
height: 35em;
padding: 40px 0px;
margin-bottom: 4em;
}
.swiper-slide b {
color: #fff;
bottom: 2em;
position: absolute;
font-size: 2.5em;
font-family: 'Raleway', sans-serif;
font-weight: 1000;
letter-spacing: -0.05em;
}
.swiper-slide {
text-align: center;
font-size: 1em;
color: #212121;
width: 15em;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
@media screen and (max-width: 736px) {
.swiper-slide b {
font-size: 1.5em;
}
.swiper-container {
height: 30em;
}
}
/* =========================
Vars
========================= */
:root{
/* site layout */
--site-max: 80em;
--site-pad-x: 1.2em;
/* berekende gutter: side-bleed + 2 em content-padding */
--gutter: calc((100vw - min(100vw, var(--site-max))) / 2 + var(--site-pad-x));
/* mmx kleuren e.d. */
--mmx-brand: var(--color-yellow);
--mmx-fg: var(--pal-white);
--mmx-fg-muted: color-mix(in srgb, var(--pal-white) 88%, transparent);
--mmx-border: color-mix(in srgb, var(--pal-white) 20%, transparent);
--mmx-glass: color-mix(in srgb, var(--pal-dark-1) 58%, transparent);
--mmx-badge-bg: color-mix(in srgb, var(--pal-dark-1) 72%, transparent);
--mmx-radius: 20px;
}
/* =========================
Swiper full-bleed + controls
========================= */
.swiper-container{
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
/* Laat Swiper breedtes bepalen */
.swiper-slide{ box-sizing: border-box; flex-shrink: 0; }
.mmx-swiper-shell{
position: relative;
margin-bottom: 0;
}
.mmx-swiper-shell > .swiper-container.mySwiper{
margin-bottom: 0;
padding-bottom: 0;
}
.mmx-swiper-shell > .swiper-container.mySwiperBlogs{
margin-bottom: 0;
padding-bottom: 0;
}
/* Pagination / scrollbar uitgelijnd met content */
.swiper-container .swiper-pagination,
.swiper-container .swiper-scrollbar{
left: auto;
right: auto;
margin: 0 auto;
max-width: 50%;
width: calc(min(var(--site-max), 100vw) - 2 * var(--site-pad-x));
overflow: hidden;
}
.mmx-swiper-controls{
width: calc(min(var(--site-max), 100vw) - 2 * var(--site-pad-x));
margin: 0 auto 0;
padding-top: 4px;
margin-top: 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
position: relative;
z-index: 3;
}
.mmx-swiper-toggle,
.mmx-swiper-controls .swiper-button-prev,
.mmx-swiper-controls .swiper-button-next{
position: static;
inset: auto;
transform: none;
margin: 0;
flex: 0 0 auto;
--mmx-progress: 0;
}
.mmx-swiper-toggle{
position: relative;
width: 52px;
height: 52px;
border-radius: 50%;
border: 1px solid var(--mm-brd);
background: transparent;
color: var(--color-text);
display: inline-grid;
place-items: center;
padding: 0;
cursor: pointer;
flex-shrink: 0;
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
transition: transform .2s ease, border-color .25s ease, color .25s ease, background-color .25s ease;
}
.mmx-swiper-toggle::before{
content: "";
position: absolute;
inset: 1px;
border-radius: inherit;
background: rgba(255,255,255,.92);
z-index: 0;
}
.mmx-swiper-toggle::after{
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
background: conic-gradient(
from -90deg,
rgba(21, 21, 19, 0.72) calc(var(--mmx-progress) * 1turn),
rgba(21, 21, 19, 0.14) 0
);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
z-index: 0;
pointer-events: none;
}
.mmx-swiper-toggle:hover,
.mmx-swiper-toggle:focus-visible{
border-color: var(--mm-brd);
color: var(--color-text);
background-color: transparent;
}
.mmx-swiper-toggle:focus-visible,
.mmx-swiper-controls .swiper-button-prev:focus-visible,
.mmx-swiper-controls .swiper-button-next:focus-visible{
outline: 2px solid rgba(70, 70, 74, 0.35);
outline-offset: 3px;
}
.mmx-swiper-toggleIcon{
position: relative;
width: 12px;
height: 14px;
display: block;
z-index: 1;
}
.mmx-swiper-toggleIcon::before,
.mmx-swiper-toggleIcon::after{
content: "";
position: absolute;
top: 0;
width: 4px;
height: 100%;
border-radius: 999px;
background: currentColor;
}
.mmx-swiper-toggleIcon::before{ left: 1px; }
.mmx-swiper-toggleIcon::after{ right: 1px; }
.mmx-swiper-toggle.is-paused .mmx-swiper-toggleIcon{
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 12px solid currentColor;
}
.mmx-swiper-toggle.is-paused .mmx-swiper-toggleIcon::before,
.mmx-swiper-toggle.is-paused .mmx-swiper-toggleIcon::after{
content: none;
}
.mmx-swiper-nav{
display: inline-flex;
align-items: center;
gap: 10px;
margin-left: auto;
flex-shrink: 0;
}
.mmx-swiper-controls .swiper-button-prev,
.mmx-swiper-controls .swiper-button-next{
left: auto !important;
right: auto !important;
top: auto !important;
margin-top: 0 !important;
width: 52px;
height: 52px;
border-radius: 50%;
border: 1px solid var(--mm-brd);
background: var(--color-menu-glass);
background-image: none !important;
color: var(--color-text);
appearance: none;
-webkit-appearance: none;
display: inline-grid !important;
place-items: center;
padding: 0;
box-shadow: none;
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
transition: background-color .25s ease, color .25s ease, opacity .2s ease;
}
.mmx-swiper-controls .swiper-button-prev:hover,
.mmx-swiper-controls .swiper-button-next:hover,
.mmx-swiper-controls .swiper-button-prev:focus-visible,
.mmx-swiper-controls .swiper-button-next:focus-visible{
background: var(--mm-bg-hover);
color: var(--color-text);
}
.mmx-swiper-controls .swiper-button-prev::after,
.mmx-swiper-controls .swiper-button-next::after{
display: block;
font-size: 24px;
font-weight: 400;
line-height: 1;
font-family: Arial, sans-serif;
position: relative;
top: -1px;
}
.mmx-swiper-controls .swiper-button-prev::after{
content: "‹";
left: -1px;
}
.mmx-swiper-controls .swiper-button-next::after{
content: "›";
left: 1px;
}
.mmx-swiper-controls .swiper-button-disabled{
opacity: .45;
}
.mmx-swiper-shell > .swiper-container.mySwiper + .mmx-swiper-controls{
margin-bottom: 2rem;
}
.mmx-update-strip{
width: calc(min(var(--site-max), 100vw) - 2 * var(--site-pad-x));
margin: -0.4rem auto 1.2rem;
padding: .8rem 1.5rem !important;
border-radius: 2em;
border: 1px solid var(--mm-brd);
background:
linear-gradient(135deg, rgba(255,255,255,.92), rgba(247,244,239,.78));
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
}
.mmx-update-strip__eyebrow{
font-size: .72rem;
line-height: 1;
letter-spacing: .16em;
text-transform: uppercase;
opacity: .58;
margin-bottom: .45rem;
}
.mmx-update-strip__body{
display: flex;
align-items: center;
gap: .65rem;
flex-wrap: wrap;
color: var(--color-text);
}
.mmx-update-strip__date{
font-size: 1rem;
font-weight: 700;
letter-spacing: .01em;
}
.mmx-update-strip__dot{
width: 5px;
height: 5px;
border-radius: 50%;
background: currentColor;
opacity: .35;
}
.mmx-update-strip__title{
font-size: .96rem;
opacity: .72;
}
html[data-theme="dark"] .mmx-swiper-toggle::before{
background: rgba(28, 29, 32, .92);
}
html[data-theme="dark"] .mmx-swiper-toggle::after{
background: conic-gradient(
from -90deg,
rgba(255,255,255,.88) calc(var(--mmx-progress) * 1turn),
rgba(255,255,255,.16) 0
);
}
html[data-theme="dark"] .mmx-update-strip{
background: linear-gradient(135deg, rgba(26,28,31,.94), rgba(33,36,40,.82));
}
html[data-theme="dark"] .mmx-update-strip__eyebrow{
color: rgba(255,255,255,.76);
opacity: 1;
}
html[data-theme="dark"] .mmx-update-strip__dot{
opacity: .42;
}
@media (prefers-color-scheme: dark){
html:not([data-theme]) .mmx-swiper-toggle::before,
html[data-theme="auto"] .mmx-swiper-toggle::before{
background: rgba(28, 29, 32, .92);
}
html:not([data-theme]) .mmx-swiper-toggle::after,
html[data-theme="auto"] .mmx-swiper-toggle::after{
background: conic-gradient(
from -90deg,
rgba(255,255,255,.88) calc(var(--mmx-progress) * 1turn),
rgba(255,255,255,.16) 0
);
}
html:not([data-theme]) .mmx-update-strip,
html[data-theme="auto"] .mmx-update-strip{
background: linear-gradient(135deg, rgba(26,28,31,.94), rgba(33,36,40,.82));
}
html:not([data-theme]) .mmx-update-strip__eyebrow,
html[data-theme="auto"] .mmx-update-strip__eyebrow{
color: rgba(255,255,255,.76);
opacity: 1;
}
html:not([data-theme]) .mmx-update-strip__dot,
html[data-theme="auto"] .mmx-update-strip__dot{
opacity: .42;
}
}
@media (max-width: 768px){
.mmx-swiper-controls{
gap: 10px;
padding-top: 2px;
margin-top: 10px;
}
.mmx-swiper-shell > .swiper-container.mySwiper + .mmx-swiper-controls{
margin-bottom: 1.4rem;
}
.mmx-update-strip{
margin: -.1rem auto 1rem;
padding: .8rem 1.5rem !important;
border-radius: 2em;
}
.mmx-update-strip__date,
.mmx-update-strip__title{
font-size: .92rem;
}
.mmx-swiper-toggle{
width: 48px;
height: 48px;
border-width: 2px;
}
.mmx-swiper-nav{
gap: 10px;
}
.mmx-swiper-controls .swiper-button-prev,
.mmx-swiper-controls .swiper-button-next{
width: 48px;
height: 48px;
}
.mmx-swiper-controls .swiper-button-prev::after,
.mmx-swiper-controls .swiper-button-next::after{
font-size: 22px;
}
}
/* =========================
MMX slide content
========================= */
/* basis van de slide + kaart */
.swiper-container .swiper-slide{
position: relative;
overflow: hidden;
border-radius: var(--radius);
display: flex;
flex-direction: column; /* i.c.m. equal-height */
}
/* full-bleed kaart als achtergrond */
.swiper-container .swiper-slide .mmx-card{
position: absolute;
inset: 0;
border-radius: var(--radius);
overflow: hidden;
background: center/cover no-repeat;
height: 100%;
width: 100%;
}
/* Maak de archief-kaart 100% klikbaar (zoals je coverlink) */
.mmx-card-archive .mmx-coverlink.mmx-archive-open {
cursor: pointer;
}
/* Klein visueel verschil t.o.v. gewone kaarten (optioneel) */
.mmx-card-archive .mmx-title::before{
content: "";
opacity: .9;
}
/* klikbare overlay (tekst verborgen) */
.swiper-container .swiper-slide .mmx-coverlink{
position: absolute;
inset: 0;
z-index: 2;
text-indent: -9999px;
}
/* overlay + body lagen */
.swiper-container .swiper-slide .mmx-gradient{
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(
to top,
rgba(0,0,0,.62) 12%,
rgba(0,0,0,.35) 42%,
rgba(0,0,0,0) 68%
);
}
.swiper-container .swiper-slide .mmx-body{
left:0; right:0; bottom:0; z-index:3;
display:grid; gap:0px; padding: 1.5em;
color:var(--mmx-fg);
background:linear-gradient(to top, var(--mmx-glass), transparent 60%);
text-align:left; align-items:start;
}
.mmx-body p {
margin: 0 0 15px 0;
line-height: 20px;
}
/* headerlijn: “Categorie | aantal foto’s” */
.swiper-container .swiper-slide .mmx-headerline{
display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%;
margin-bottom:6px; flex-wrap:wrap;
}
.swiper-container .swiper-slide .mmx-kicker{
display:inline-flex; align-items:center; gap:8px;
font-size:13px; text-transform:uppercase; letter-spacing:.2px; opacity:.95;
}
.swiper-container .swiper-slide .mmx-kicker .dot{
width:8px; height:8px; border-radius:50%;
background:var(--mmx-brand); box-shadow:0 0 0 4px rgba(231,181,65,.18);
}
.swiper-container .swiper-slide .mmx-label{ color:var(--mmx-fg-muted); }
.swiper-container .swiper-slide .mmx-value{ font-weight:700; color:var(--mmx-fg); text-transform:none; }
/* badge met aantal foto’s (rechts) */
.swiper-container .swiper-slide .mmx-meta{ display:flex; align-items:center; }
.swiper-container .swiper-slide .mmx-badge{
margin: 10px;
display:inline-flex; align-items:center; gap:6px;
padding:6px 10px; min-height: var(--mm-badge-height); border-radius:999px;
background:var(--mmx-badge-bg); border:1px solid var(--mmx-border);
backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
white-space:nowrap;
box-sizing: border-box;
}
/* titel links onder header */
.swiper-container .swiper-slide .mmx-title{
margin:0; justify-self:start;
font-family: 'Raleway', sans-serif;
font-weight:600; letter-spacing:0;
font-size:2em;
color:#fff; line-height: 27px; margin-bottom: 0.5em;
text-transform: none;
}
.mySwiper .swiper-slide .mmx-intro{
color: #fff !important;
opacity: 1 !important;
}
.mm{
font-family: "Caveat", cursive;
font-size: 2em;
transform: rotate(-2deg);
display: inline-block;
letter-spacing: -0.01em;
margin-bottom: 30px;
}
.mm::after {
content: "";
position: absolute;
left: 0;
bottom: -10px;
width: 80%;
height: 6px;
border-top: 2px solid currentColor;
border-radius: 50%;
transform: rotate(-2deg);
}
/* acties */
.swiper-container .swiper-slide .mmx-actions{
margin-top:6px; display:flex; flex-wrap:wrap; gap:10px;
}
.swiper-container .swiper-slide .mmx-btn{
display:inline-flex; align-items:center; justify-content:center;
padding:10px 14px; border-radius: var(--radius-inner); font-weight:700;
color:#fff; text-decoration:none;
border:1px solid rgba(255,255,255,.15);
background:rgba(255,255,255,.10);
backdrop-filter:blur(4px);
transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.swiper-container .swiper-slide .mmx-btn:hover{
transform:translateY(-2px); box-shadow:0 10px 25px rgba(0,0,0,.25);
}
/* equal height voor alle body’s */
.swiper-container .swiper-wrapper{ display:flex; align-items:stretch; }
.swiper-container .swiper-slide .mmx-card{ display:flex; flex-direction:column; justify-content:flex-end; }
.swiper-container .swiper-slide .mmx-body{
flex-grow:1; display:flex; flex-direction:column; justify-content:flex-end;
min-height:220px; padding-top:1.5em;
}
/* mobiel tweaks */
@media (max-width:736px){
.swiper-container .swiper-slide .mmx-title{ font-size:2em; line-height: 25px; }
.swiper-container .swiper-slide .mmx-headerline{ gap:8px; }
.swiper-container .swiper-slide .mmx-meta{ width:100%; justify-content:flex-end; }
}
@media (max-width: 736px) {
/* container laat 1 kolom toe */
.swiper-container .swiper-slide .mmx-actions{
display: block !important; /* was flex */
width: 100%;
}
/* knop vult de hele breedte */
.swiper-container .swiper-slide .mmx-actions .mmx-btn{
display: flex !important; /* was inline-flex */
width: 100% !important;
box-sizing: border-box;
justify-content: center;
text-align: center;
}
/* als je soms 2 knoppen hebt: onder elkaar met wat ruimte */
.swiper-container .swiper-slide .mmx-actions .mmx-btn + .mmx-btn{
margin-top: 10px;
}
}
/* accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce){
.swiper-container .swiper-slide .mmx-body{ backdrop-filter:none; -webkit-backdrop-filter:none; }
}
/* ===============================
MMX: Aantal foto's rechtsboven op foto
=============================== */
.swiper-container .swiper-slide {
position: relative;
overflow: hidden;
border-radius:var(--radius-inner);
}
/* Plaats de badge los rechtsboven in de foto */
.swiper-container .swiper-slide .mmx-meta {
position: absolute;
top: 0.5em;
right: 0.5em;
z-index: 5; /* boven afbeelding, onder swiper-arrows */
pointer-events: none; /* laat klik op slide zelf gewoon werken */
}
/* Stijl van de badge */
.swiper-container .swiper-slide .mmx-badge {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 0 10px;
min-height: var(--mm-badge-height);
border-radius: 999px;
background: rgba(0, 0, 0, 0.25);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: #fff;
font-size: 13px;
white-space: nowrap;
box-sizing: border-box;
}
/* Optioneel: iets compacter op mobiel */
@media (max-width: 768px) {
.swiper-container .swiper-slide .mmx-meta {
top: 8px;
right: 8px;
}
.swiper-container .swiper-slide .mmx-badge {
font-size: 12px;
padding: 0 10px;
}
}
/* Auteurblok onder intro in blog-swiper */
.mmx-authorline{
display:flex;
align-items:center;
margin-top:.5rem;
margin-bottom:.5rem;
}
.mmx-author{
display:inline-flex;
align-items:center;
gap:8px;
}
.mmx-author-avatar{
width:30px;
height:30px;
border-radius:50%;
object-fit:cover;
display:block;
box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.mmx-author-name{
font-weight:600;
font-size:.95rem;
line-height:1;
}
/* Mobiel: iets compacter en beter uitgelijnd */
@media (max-width:640px){
.mmx-author-avatar{
width:26px;
height:26px;
}
.mmx-author-name{
font-size:.9rem;
}
}
.blockquote {
padding-left: 2rem;
position: relative;
overflow: hidden;
font-size: 1.2em;
color: var(--color-text);
}
.blockquote.dark {
padding-left: 2rem;
position: relative;
overflow: hidden;
font-size: 1.2em;
color: var(--color-text);
}
.blockquote::before, .blockquote::after {
position: absolute;
color: currentColor;
font-size: 10px;
}
.blockquote.dark::before, .blockquote.dark::after {
position: absolute;
color: var(--color-text);
font-size: 10px;
}
.blockquote p {
margin: 0;
width: 50%;
font-size: 2em;
}
.blockquote p + p {
margin-top: 1rem;
}
.blockquote--classic::before {
content: var(--blockquote-content-dark);
left: 0;
}
.blockquote--classic.dark::before {
content: var(--blockquote-content-dark);
left: 0;
}
.blockquote--classic::after {
content: "";
left: 5px;
top: 25px;
width: 1px;
height: 100%;
background-color: currentColor;
}
.mySwiperBlogs .mmx-card{ aspect-ratio: 3 / 4; }
@media (max-width:736px){ .mySwiperBlogs .mmx-card{ aspect-ratio: 3 / 3.6; } }
/* Datum boven de titel in de tekstlaag */
.mmx-dateInBody{
font-size: 13px;
color: var(--mmx-fg-muted, #e8ecf4);
opacity: .9;
display: inline-flex;
align-items: center;
gap: 6px;
margin-bottom: 4px;
text-shadow: 0 2px 8px rgba(0,0,0,.4);
}
/* Scrollbar-container */
.mySwiperBlogs-scrollbar {
width: 100%;
height: 6px;
border-radius: 10px;
background: var(--color-full);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
margin-top: 30px !important;
cursor: grab;
}
/* Scroll-thumb (draggable balkje) */
.mySwiperBlogs-scrollbar .swiper-scrollbar-drag {
background: var(--color-scrollbar);
border-radius: 10px;
transition: opacity 0.2s ease, transform 0.2s ease;
}
html[data-theme="dark"] .mySwiperBlogs-scrollbar .swiper-scrollbar-drag{
background: #1d1e20;
}
@media (prefers-color-scheme: dark){
html:not([data-theme]) .mySwiperBlogs-scrollbar .swiper-scrollbar-drag,
html[data-theme="auto"] .mySwiperBlogs-scrollbar .swiper-scrollbar-drag{
background: #1d1e20;
}
}
/* Hover-effect */
.mySwiperBlogs-scrollbar:hover .swiper-scrollbar-drag {
opacity: 1;
transform: scaleY(1.2);
}
/* Mobiel iets dunner en compacter */
@media (max-width: 768px) {
.mySwiperBlogs-scrollbar {
height: 4px;
margin-top: 12px;
}
}
/* ============================
Sorteermenu – glass look + bounceElastic hover
============================ */
/* Sorteer-balk sticky op de variabele top */
#sorteer-flow .mmbar { position: sticky; top: var(--sticky-top, 0px); z-index: 5; }
/* Groot menu verbergen terwijl je OMLAAG binnen sorteer-flow zit */
.in-sortflow #header { opacity: 0; pointer-events: none; }
/* Wil je ‘m echt uit de flow halen tijdens verbergen, kun je ook gebruiken: */
/* .in-sortflow #header { visibility:hidden; } */
/* Sorteerbalk sticky met dynamische top */
#sorteer-flow .mmbar {
position: sticky;
top: var(--sticky-top, 0px);
z-index: 5;
}
/* Verberg de header alléén wanneer we OMLAAG binnen #sorteer-flow zitten */
.in-sortflow-down #header {
opacity: 0;
pointer-events: none;
}
/* Forceer header zichtbaar in alle andere situaties (voor/na/omhoog) */
.header-force-show #header {
opacity: 1 !important;
pointer-events: auto;
}
:root {
--mm-fg: var(--color-mm-grey);
--mm-control-fg: var(--color-text);
--mm-h: 52px; /* hoogte van dropdown én zoekknop */
--mm-gap: .3rem;
--mm-pad-x: .9rem;
--mm-header-logo-overhang: 42px;
--mm-sticky-header-gap: 18px;
}
/* ===== Container ===== */
#sorteer-flow{
padding-top: 1.35rem;
}
.mmbar {
position: sticky;
top: var(--sticky-top, 85px);
z-index: 20;
display: grid;
grid-template-columns: 1fr auto auto; /* select | btn | btn */
align-items: center;
gap: var(--mm-gap);
width: 100%;
max-width: 320px; /* belangrijk bij 3 items */
margin: 0 auto 1rem;
background: transparent;
}
@media (max-width: 700px) {
#sorteer-flow{ padding-top: 1.65rem; }
.mmbar { max-width: 265px; --mm-h: 48px; }
:root { --mm-sticky-header-gap: 14px; }
}
@media (max-width: 380px) {
.mmbar { max-width: 220px; --mm-h: 48px; }
}
/* ===== Gedeelde stijl (wrapper + search) ===== */
.mmbar-select-wrap,
.mmbar-search {
height: var(--mm-h);
border-radius: 999px;
border: none;
background: var(--menu-button-bg-compact, var(--color-menu-glass));
color: var(--mm-dynamic-fg, var(--mm-control-fg)) !important;
-webkit-backdrop-filter: blur(7px);
backdrop-filter: blur(7px);
box-shadow: none;
transition:
background-color .25s ease,
box-shadow .25s ease,
color .32s ease,
border-color .32s ease;
will-change: transform;
transform-origin: center;
}
.mmbar-select-wrap {
display: flex;
align-items: center;
width: 100%;
}
.mmbar-select {
width: 100%;
}
/* ===== Elastic bounce hover ===== */
@keyframes bounceElasticHover {
0% { transform: translateY(0) scale(1); }
25% { transform: translateY(3%) scale(0.97); }
50% { transform: translateY(-2%) scale(1.03); }
75% { transform: translateY(1%) scale(0.99); }
100% { transform: translateY(0) scale(1); }
}
.mmbar-select-wrap:hover,
.mmbar-search:hover {
background-color: var(--menu-button-bg, var(--mm-bg-hover));
box-shadow: none;
animation: bounceElasticHover 0.65s cubic-bezier(.34,1.56,.64,1);
}
.mmbar-search:active,
.mmbar-select:active,
.mmbar-select-wrap:active {
transform: scale(0.94);
box-shadow: none;
}
/* ===== Dropdown WRAPPER met icoon links + caret rechts ===== */
.mmbar-select-wrap {
position: relative;
display: grid;
grid-template-columns: auto 1fr; /* icon | select */
align-items: center;
overflow: hidden;
}
/* Linker filter-icoon (bijv. ) */
.mmbar-select-wrap > .fi {
margin-left: var(--mm-pad-x);
margin-right: .45rem;
margin-top: 4px;
font-size: 1rem;
color: var(--mm-dynamic-fg, var(--mm-control-fg));
opacity: 1;
pointer-events: none;
transition: color .32s ease, opacity .32s ease;
}
/* Caret als echt element (niet via background → geen “tiling”) */
.mmbar-caret {
position: absolute;
right: .9rem;
top: 50%;
width: 12px;
height: 12px;
transform: translateY(-65%) rotate(45deg);
pointer-events: none;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
color: var(--mm-dynamic-fg, var(--mm-control-fg));
opacity: 1;
transition: color .32s ease, border-color .32s ease, opacity .32s ease;
}
/* ===== Dropdown (het echte