/* =========================================================================
SITE.CSS — global components voor Reizen met Lynn
Container, header, footer, buttons, cards, pills, breadcrumbs,
image-placeholders en alle paginatypes (home, archive, single,
over-ons, contact). Mobile-first met breakpoints op 720 / 960 / 1100.
========================================================================= */
/* ===== Layout containers ===== */
.container-wide {
width: 100%;
max-width: var(--w-wide);
margin: 0 auto;
padding: 0 var(--s-8);
}
@media (max-width: 760px) {
.container-wide { padding: 0 var(--s-6); }
}
@media (max-width: 480px) {
.container-wide { padding: 0 var(--s-5); }
}
.skip-link {
position: absolute;
left: -9999px;
top: -9999px;
background: var(--ink);
color: var(--cream);
padding: 10px 16px;
border-radius: var(--r-sm);
z-index: 100;
}
.skip-link:focus {
left: 12px;
top: 12px;
}
/* =========================================================================
HEADER / NAV
========================================================================= */
.site-header {
position: sticky;
top: 0;
z-index: 30;
background: var(--cream);
border-bottom: 1px solid var(--clay);
backdrop-filter: saturate(140%) blur(8px);
-webkit-backdrop-filter: saturate(140%) blur(8px);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-4);
padding-top: 18px;
padding-bottom: 18px;
}
.site-brand {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-display);
font-weight: 500;
font-size: 22px;
letter-spacing: -0.01em;
color: var(--ink);
}
.site-brand__mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
color: var(--coral);
flex: 0 0 auto;
transition: transform var(--dur-base) var(--ease-bounce);
}
.site-brand__mark svg {
width: 100%;
height: 100%;
display: block;
}
.site-brand:hover .site-brand__mark {
transform: rotate(-8deg) translateY(-1px);
}
.site-brand__text {
display: inline-flex;
align-items: baseline;
gap: 6px;
}
.site-brand em {
font-style: italic;
color: var(--coral);
font-weight: 400;
}
.site-brand:hover { color: var(--ink); }
@media (max-width: 480px) {
.site-brand { font-size: 19px; gap: 8px; }
.site-brand__mark { width: 30px; height: 30px; }
}
.site-nav { display: flex; align-items: center; gap: var(--s-2); }
.site-nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: var(--s-2);
}
.site-nav a {
display: inline-block;
padding: 9px 14px;
border-radius: var(--r-pill);
font-size: 14px;
font-weight: 500;
color: var(--graphite);
transition: background var(--dur-base) var(--ease-step), color var(--dur-base) var(--ease-step);
}
.site-nav a:hover { background: var(--sand); color: var(--ink); }
.site-nav .current-menu-item > a,
.site-nav .current_page_item > a,
.site-nav a[aria-current="page"] {
background: var(--ink);
color: var(--cream);
}
/* Submenu — desktop (dropdown) */
.site-nav .menu-item-has-children {
position: relative;
display: inline-flex;
align-items: center;
flex-wrap: wrap;
}
.site-nav .submenu-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
margin-left: -4px;
background: transparent;
border: 0;
border-radius: 999px;
cursor: pointer;
color: var(--graphite);
transition: background var(--dur-base) var(--ease-step), transform 220ms ease, color var(--dur-base) var(--ease-step);
}
.site-nav .submenu-toggle:hover { background: var(--sand); color: var(--ink); }
.site-nav .submenu-toggle__chevron {
display: inline-block;
width: 7px;
height: 7px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-2px) rotate(45deg);
transition: transform 220ms ease;
}
.site-nav .menu-item-has-children.is-open > .submenu-toggle .submenu-toggle__chevron {
transform: translateY(2px) rotate(-135deg);
}
.site-nav .sub-menu {
list-style: none;
margin: 0;
padding: 8px;
position: absolute;
top: calc(100% + 6px);
left: 0;
min-width: 220px;
background: var(--cream);
border: 1px solid var(--clay);
border-radius: var(--r-md);
box-shadow: 0 14px 36px rgba(31, 26, 20, 0.10);
display: none;
flex-direction: column;
gap: 2px;
z-index: 50;
}
/* Onzichtbare hover-brug die de visuele tussenruimte tussen parent-link
en dropdown overbrugt — anders sluit het menu zodra de muis door de
6px gap beweegt. */
.site-nav .sub-menu::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 100%;
height: 12px;
}
.site-nav .sub-menu li { width: 100%; }
.site-nav .sub-menu a {
display: block;
width: 100%;
padding: 9px 12px;
border-radius: var(--r-sm);
font-size: 14px;
}
.site-nav .menu-item-has-children.is-open > .sub-menu,
.site-nav .menu-item-has-children:focus-within > .sub-menu {
display: flex;
}
@media (hover: hover) {
.site-nav .menu-item-has-children:hover > .sub-menu { display: flex; }
.site-nav .menu-item-has-children:hover > .submenu-toggle .submenu-toggle__chevron {
transform: translateY(2px) rotate(-135deg);
}
}
/* Mobile menu */
.nav-toggle {
display: none;
background: transparent;
border: 1px solid var(--clay);
border-radius: var(--r-sm);
padding: 8px 10px;
cursor: pointer;
color: var(--ink);
align-items: center;
gap: 8px;
}
.nav-toggle:hover { background: var(--sand); }
.nav-toggle__lines { display: inline-block; width: 18px; height: 2px; background: currentColor; position: relative; }
.nav-toggle__lines::before, .nav-toggle__lines::after {
content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor;
}
.nav-toggle__lines::before { top: -6px; }
.nav-toggle__lines::after { top: 6px; }
.nav-toggle__label { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
@media (max-width: 760px) {
.nav-toggle { display: inline-flex; }
.site-nav {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--cream);
border-bottom: 1px solid var(--clay);
box-shadow: var(--shadow-1);
padding: var(--s-4) var(--s-6);
display: none;
max-height: calc(100vh - 80px);
overflow-y: auto;
}
.site-nav.is-open { display: block; }
.site-nav ul {
flex-direction: column;
align-items: stretch;
gap: 0;
}
.site-nav li { width: 100%; }
.site-nav a {
display: block;
width: 100%;
padding: 12px 14px;
border-radius: var(--r-sm);
font-size: 16px;
}
/* Mobile-submenu: niet als dropdown maar als ingeklapt blok */
.site-nav .menu-item-has-children { display: flex; flex-wrap: wrap; align-items: center; }
.site-nav .menu-item-has-children > a { flex: 1 1 auto; min-width: 0; }
.site-nav .menu-item-has-children > .submenu-toggle {
flex: 0 0 auto;
width: 40px;
height: 40px;
margin-left: 4px;
}
.site-nav .sub-menu {
position: static;
flex: 1 0 100%;
width: 100%;
background: transparent;
border: 0;
box-shadow: none;
padding: 0 0 4px 14px;
margin: 0 0 4px;
display: none;
}
.site-nav .menu-item-has-children.is-open > .sub-menu { display: flex; }
.site-nav .sub-menu a { font-size: 15px; padding: 10px 12px; }
/* Hover-fallback uitschakelen op touch */
.site-nav .menu-item-has-children:hover > .sub-menu { display: none; }
.site-nav .menu-item-has-children.is-open:hover > .sub-menu { display: flex; }
}
/* =========================================================================
FOOTER
========================================================================= */
.site-footer {
background: var(--ink);
color: var(--dark-fg);
padding: var(--s-12) 0 var(--s-6);
margin-top: var(--s-16);
}
.site-footer__grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: var(--s-10);
align-items: start;
margin-bottom: var(--s-10);
}
.site-footer__brand {
font-family: var(--font-display);
font-weight: 500;
font-size: 30px;
color: var(--cream);
letter-spacing: -0.01em;
margin: 0 0 var(--s-3);
}
.site-footer__brand em { font-style: italic; color: #F2A07A; font-weight: 400; }
.site-footer__tag {
color: var(--dark-fg-mute);
font-size: 15px;
line-height: 1.6;
max-width: 36ch;
margin: 0;
}
.site-footer h5 {
font-family: var(--font-body);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #F2A07A;
margin: 0 0 var(--s-4);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.site-footer ul a { color: var(--dark-fg); font-size: 15px; }
.site-footer ul a:hover { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }
.site-footer__bottom {
border-top: 1px solid rgba(245, 239, 227, 0.12);
padding-top: var(--s-5);
display: flex;
justify-content: space-between;
gap: var(--s-4);
font-size: 13px;
color: var(--dark-fg-mute);
flex-wrap: wrap;
}
.site-footer__cookies {
background: transparent;
border: 0;
color: inherit;
font: inherit;
padding: 0;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 3px;
opacity: 0.85;
}
.site-footer__cookies:hover { opacity: 1; }
@media (max-width: 760px) {
.site-footer__grid { grid-template-columns: 1fr; gap: var(--s-8); }
.site-footer__bottom { flex-direction: column; gap: 8px; align-items: flex-start; }
}
/* =========================================================================
BUTTONS
========================================================================= */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 20px;
border-radius: var(--r-pill);
font-family: var(--font-body);
font-weight: 600;
font-size: 14px;
letter-spacing: 0.02em;
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: background var(--dur-base) var(--ease-step),
color var(--dur-base) var(--ease-step),
border-color var(--dur-base) var(--ease-step),
transform var(--dur-base) var(--ease-step);
white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--lg { padding: 14px 24px; font-size: 15px; }
.btn--primary {
background: var(--terracotta);
color: var(--cream);
}
.btn--primary:hover { background: var(--terracotta-deep); color: var(--cream); }
.btn--secondary {
background: var(--ink);
color: var(--cream);
}
.btn--secondary:hover { background: #2a241c; color: var(--cream); }
.btn--ghost {
background: transparent;
color: var(--ink);
border-color: var(--clay);
}
.btn--ghost:hover { background: var(--sand); border-color: var(--graphite); }
/* =========================================================================
PILLS
========================================================================= */
.pill {
display: inline-block;
padding: 5px 11px;
border-radius: var(--r-pill);
font-family: var(--font-body);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
background: var(--terracotta-soft);
color: var(--terracotta-deep);
}
.pill--terra { background: var(--coral-soft); color: var(--coral-deep); }
.pill--olive { background: var(--ocean-soft); color: var(--ocean-deep); }
.pill--gold { background: var(--sun-soft); color: var(--sun-deep); }
.pill--coral { background: var(--coral-soft); color: var(--coral-deep); }
.pill--ocean { background: var(--ocean-soft); color: var(--ocean-deep); }
.pill--sun { background: var(--sun-soft); color: var(--sun-deep); }
.pill--sky { background: var(--sky-soft); color: var(--sky-deep); }
.pill--ink { background: var(--ink); color: var(--cream); }
/* =========================================================================
BREADCRUMBS
========================================================================= */
.crumbs {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--mist);
margin-bottom: var(--s-5);
flex-wrap: wrap;
}
.crumbs a { color: var(--graphite); }
.crumbs a:hover { color: var(--terracotta-deep); }
.crumbs span[aria-hidden="true"], .crumbs span:not(.current) { color: var(--pale); }
/* =========================================================================
SECTION HEAD
========================================================================= */
.section-head {
display: flex;
align-items: end;
justify-content: space-between;
gap: var(--s-4);
margin-bottom: var(--s-8);
padding-bottom: var(--s-4);
border-bottom: 1px solid var(--clay);
flex-wrap: wrap;
}
.section-head h2 { margin: 0; font-size: var(--fs-2xl); }
.section-head a {
color: var(--terracotta);
font-weight: 600;
font-size: 13px;
letter-spacing: 0.04em;
}
.section-head a:hover { color: var(--terracotta-deep); }
/* =========================================================================
IMAGE PLACEHOLDERS (gradient color blocks for design preview)
In productie worden featured images getoond. Placeholders zijn fallback.
========================================================================= */
.imgph {
width: 100%;
height: 100%;
display: flex;
align-items: end;
justify-content: start;
padding: 14px;
position: relative;
background: linear-gradient(135deg, var(--clay), var(--sand));
}
.imgph__label {
font-family: var(--font-body);
font-size: 10.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.78);
font-weight: 600;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
line-height: 1.3;
}
.ph-warm { background: linear-gradient(135deg, #F4A988, #E76F51); }
.ph-clay { background: linear-gradient(135deg, #D9B391, #A07355); }
.ph-olive { background: linear-gradient(135deg, #6CC2B5, #1F6F66); }
.ph-rose { background: linear-gradient(135deg, #FBD8C9, #E76F51); }
.ph-sunset { background: linear-gradient(135deg, #FFC9A0, #E76F51 60%, #B84A2F); }
.ph-ocean { background: linear-gradient(135deg, #6CC2B5, #2A9D8F 55%, #1F6F66); }
.ph-sun { background: linear-gradient(135deg, #FBEFC8, #E9B949 65%, #B7891B); }
.ph-sky { background: linear-gradient(135deg, #BFDDEA, #5DA9C6 60%, #2E6E89); }
.ph-palm { background: linear-gradient(135deg, #A8CFA0, #2A9D8F 70%, #1F6F66); }
.ph-cocoa { background: linear-gradient(135deg, #8E6E55, #4D382A); }
.ph-dune { background: linear-gradient(135deg, #DCC9A6, #A28959); }
.ph-gold { background: linear-gradient(135deg, #DDB875, #9C772C); }
.ph-sage { background: linear-gradient(135deg, #B7C19E, #6F8259); }
.ph-sand { background: linear-gradient(135deg, #E9DCBE, #B89F70); }
.ph-terra-d { background: linear-gradient(135deg, #C2745A, #7C3924); }
.ph-ink { background: linear-gradient(135deg, #4D4339, #1F1A14); }
/* =========================================================================
CARD (article tile)
========================================================================= */
.card {
display: flex;
flex-direction: column;
background: var(--cream);
border-radius: var(--r-md);
overflow: hidden;
text-decoration: none;
color: var(--ink);
border: 1px solid var(--clay);
transition: transform var(--dur-base) var(--ease-step),
box-shadow var(--dur-base) var(--ease-step),
border-color var(--dur-base) var(--ease-step);
height: 100%;
}
.card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-1);
border-color: var(--pale);
color: var(--ink);
}
.card__img {
aspect-ratio: 4 / 3;
background: var(--sand);
overflow: hidden;
position: relative;
}
.card__img > * { width: 100%; height: 100%; }
.card__img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 600ms var(--ease-step);
}
.card:hover .card__img img { transform: scale(1.04); }
.card__body {
padding: var(--s-5) var(--s-5) var(--s-6);
display: flex;
flex-direction: column;
gap: var(--s-3);
flex: 1;
}
.card__body .pill { align-self: flex-start; }
.card__body h3 {
font-size: 21px;
margin: 0;
line-height: 1.25;
font-weight: 500;
}
.card__body p {
margin: 0;
font-size: 15px;
line-height: 1.55;
color: var(--graphite);
}
.card__meta {
display: flex;
align-items: center;
gap: 10px;
font-size: 12.5px;
color: var(--mist);
margin-top: auto;
flex-wrap: wrap;
}
.card__meta .dot {
width: 3px; height: 3px; background: var(--mist); border-radius: 50%;
display: inline-block;
}
/* =========================================================================
PAGE-HERO (used for archive/categorieën/page intros)
========================================================================= */
.page-hero {
padding: var(--s-12) 0 var(--s-10);
border-bottom: 1px solid var(--clay);
}
.page-hero h1 {
font-size: clamp(40px, 5vw, 68px);
line-height: 1.04;
letter-spacing: -0.018em;
margin: var(--s-3) 0 var(--s-4);
}
.page-hero .lead {
font-size: 19px;
line-height: 1.55;
color: var(--graphite);
max-width: 60ch;
margin: 0;
}
/* Author archive hero */
.page-hero--author { padding-bottom: var(--s-10); }
.author-hero {
display: grid;
grid-template-columns: 200px 1fr;
gap: 36px;
align-items: center;
margin-top: var(--s-3);
}
.author-hero__avatar {
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
background: var(--clay);
box-shadow: 0 12px 32px rgba(31, 26, 20, 0.10);
}
.author-hero__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.author-hero__copy h1 {
margin: 6px 0 6px;
font-size: clamp(36px, 4.4vw, 60px);
}
.author-hero__role {
margin: 0 0 var(--s-3);
font-size: 14px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--graphite);
opacity: 0.75;
}
@media (max-width: 760px) {
.author-hero {
grid-template-columns: 1fr;
gap: 18px;
text-align: left;
justify-items: start;
}
.author-hero__avatar { width: 140px; height: 140px; }
.author-hero__copy h1 { font-size: clamp(32px, 7vw, 44px); }
}
/* =========================================================================
HOMEPAGE
========================================================================= */
.hero {
padding: var(--s-12) 0 var(--s-16);
border-bottom: 1px solid var(--clay);
}
.hero__grid {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: var(--s-12);
align-items: center;
}
.hero__copy .eyebrow { display: inline-block; margin-bottom: var(--s-4); }
.hero h1 {
font-size: clamp(40px, 5.2vw, 76px);
line-height: 1.04;
margin: 0 0 var(--s-5);
letter-spacing: -0.018em;
font-weight: 500;
}
.hero h1 em {
font-style: italic;
color: var(--terracotta);
font-weight: 400;
}
.hero__lead {
font-size: 19px;
line-height: 1.55;
color: var(--graphite);
max-width: 48ch;
margin: 0 0 var(--s-8);
}
.hero__actions { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; }
.hero__feature {
position: relative;
border-radius: var(--r-lg);
overflow: hidden;
aspect-ratio: 4 / 5;
box-shadow: var(--shadow-1);
display: block;
color: var(--cream);
}
.hero__feature .imgph__label { font-size: 11px; color: rgba(255,255,255,0.65); }
.hero__feature .feature-img {
position: absolute; inset: 0; width: 100%; height: 100%;
}
.hero__feature .feature-img img { width: 100%; height: 100%; object-fit: cover; }
.hero__feature .feature-meta {
position: absolute;
inset: auto 0 0 0;
padding: var(--s-10) var(--s-6) var(--s-6);
background: linear-gradient(180deg, transparent, rgba(31,26,20,0.78));
color: var(--cream);
}
.hero__feature .feature-meta .pill {
background: rgba(250, 246, 240, 0.92);
color: var(--terracotta-deep);
margin-bottom: var(--s-3);
}
.hero__feature h3 {
color: var(--cream);
font-family: var(--font-display);
font-weight: 500;
font-size: 26px;
line-height: 1.2;
margin: 0;
text-wrap: balance;
}
.hero__feature .meta {
color: rgba(250, 246, 240, 0.78);
margin-top: var(--s-3);
display: block;
font-size: 12px;
}
/* Categories strip */
.cats {
padding: var(--s-12) 0;
background: var(--sand);
}
.cats__head { text-align: center; margin-bottom: var(--s-10); }
.cats__head .eyebrow { display: inline-block; margin-bottom: var(--s-3); }
.cats__head h2 { margin: 0; font-size: var(--fs-2xl); }
.cats__grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: var(--s-4);
}
.cat-tile {
background: var(--cream);
border-radius: var(--r-md);
padding: var(--s-5) var(--s-4);
text-align: center;
text-decoration: none;
color: var(--ink);
border: 1px solid var(--clay);
transition: all var(--dur-base) var(--ease-step);
display: block;
}
.cat-tile:hover {
background: var(--terracotta-soft);
border-color: transparent;
color: var(--terracotta-deep);
transform: translateY(-2px);
}
.cat-tile__num {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: 13px;
color: var(--mist);
margin-bottom: 6px;
}
.cat-tile__name {
font-family: var(--font-display);
font-weight: 500;
font-size: 18px;
letter-spacing: -0.005em;
margin-bottom: 4px;
}
.cat-tile__count {
font-size: 11px;
color: var(--mist);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
}
/* Latest grid */
.latest { padding: var(--s-16) 0 var(--s-12); }
.latest__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-6);
}
/* Editor's pick band */
.pick { padding: var(--s-16) 0; background: var(--cream); }
.pick__inner {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: var(--s-12);
align-items: center;
padding: var(--s-12);
background: var(--bone);
border-radius: var(--r-lg);
}
.pick__img {
aspect-ratio: 4 / 3;
border-radius: var(--r-md);
overflow: hidden;
}
.pick__img img { width: 100%; height: 100%; object-fit: cover; }
.pick__copy .eyebrow { display: inline-block; margin-bottom: var(--s-3); }
.pick__copy h2 { font-size: var(--fs-2xl); margin: 0 0 var(--s-4); }
.pick__copy p { color: var(--graphite); margin: 0 0 var(--s-6); max-width: 50ch; }
/* More-to-read */
.more { padding: 0 0 var(--s-12); }
.more__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--s-6);
}
/* Homepage responsive */
@media (max-width: 1100px) {
.cats__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 960px) {
.hero { padding: var(--s-10) 0 var(--s-12); }
.hero__grid { grid-template-columns: 1fr; gap: var(--s-8); }
.hero h1 { font-size: clamp(34px, 7vw, 52px); }
.latest__grid { grid-template-columns: repeat(2, 1fr); }
.more__grid { grid-template-columns: repeat(2, 1fr); }
.cats__grid { grid-template-columns: repeat(3, 1fr); }
.pick__inner { grid-template-columns: 1fr; padding: var(--s-8); gap: var(--s-6); }
.latest, .more { padding-left: 0; padding-right: 0; }
.latest { padding-top: var(--s-12); }
}
@media (max-width: 600px) {
.hero h1 { font-size: clamp(30px, 8vw, 40px); }
.latest__grid, .more__grid { grid-template-columns: 1fr; }
.cats__grid { grid-template-columns: repeat(2, 1fr); }
.pick__inner { padding: var(--s-6); }
.hero__feature { aspect-ratio: 4 / 5; }
}
/* =========================================================================
ARCHIVE / CATEGORIEËN
========================================================================= */
.filterbar {
position: sticky;
top: 73px;
z-index: 20;
background: var(--cream);
border-bottom: 1px solid var(--clay);
padding: var(--s-4) 0;
}
.filterbar__inner {
display: flex;
align-items: center;
gap: var(--s-3);
flex-wrap: wrap;
}
.filter {
background: transparent;
border: 1px solid var(--clay);
color: var(--graphite);
font-family: var(--font-body);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 9px 16px;
border-radius: var(--r-pill);
cursor: pointer;
transition: all var(--dur-base) var(--ease-step);
text-decoration: none;
white-space: nowrap;
}
.filter:hover { background: var(--sand); color: var(--ink); }
.filter.is-active { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.filterbar__count { margin-left: auto; font-size: 13px; color: var(--mist); }
.cat-section { padding: var(--s-12) 0 var(--s-10); border-bottom: 1px solid var(--clay); }
.cat-section:last-of-type { border-bottom: none; }
.cat-section__head {
display: grid;
grid-template-columns: 1fr 2fr;
gap: var(--s-12);
align-items: end;
margin-bottom: var(--s-8);
}
.cat-section__head .num {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: 80px;
color: var(--terracotta);
line-height: 0.9;
margin: 0 0 var(--s-2);
}
.cat-section__head h2 {
font-size: clamp(36px, 4vw, 56px);
margin: 0 0 var(--s-2);
line-height: 1.05;
}
.cat-section__head p {
font-size: 17px;
line-height: 1.55;
color: var(--graphite);
margin: 0;
max-width: 60ch;
}
.cat-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-6);
}
.cat-grid > a:first-child { grid-column: span 2; }
.cat-grid > a:first-child .card__img { aspect-ratio: 16 / 9; }
.cat-grid > a:first-child h3 { font-size: 26px; }
.cat-section__more { margin-top: var(--s-8); text-align: center; }
@media (max-width: 960px) {
.cat-section__head { grid-template-columns: 1fr; gap: var(--s-4); }
.cat-section__head .num { font-size: 64px; }
.cat-grid { grid-template-columns: repeat(2, 1fr); }
.cat-grid > a:first-child { grid-column: span 2; }
}
@media (max-width: 600px) {
.cat-grid { grid-template-columns: 1fr; }
.cat-grid > a:first-child { grid-column: span 1; }
.cat-grid > a:first-child .card__img { aspect-ratio: 4 / 3; }
.cat-grid > a:first-child h3 { font-size: 22px; }
.filterbar { position: static; }
.filterbar__count { margin-left: 0; width: 100%; order: 99; }
}
/* =========================================================================
SINGLE / ARTIKEL
========================================================================= */
.art-hero {
padding: var(--s-12) 0 var(--s-10);
border-bottom: 1px solid var(--clay);
}
.art-hero__inner { max-width: 820px; margin: 0 auto; padding: 0 var(--s-6); text-align: center; }
.art-hero .crumbs { justify-content: center; }
.art-hero .pill { margin-bottom: var(--s-4); }
.art-hero h1 {
font-size: clamp(34px, 4.5vw, 64px);
line-height: 1.08;
margin: 0 0 var(--s-5);
letter-spacing: -0.018em;
font-weight: 500;
text-wrap: balance;
}
.art-hero .lead {
font-size: 19px;
line-height: 1.55;
color: var(--graphite);
max-width: 60ch;
margin: 0 auto var(--s-8);
}
.art-hero__meta {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 13px;
color: var(--mist);
font-weight: 500;
flex-wrap: wrap;
justify-content: center;
}
.art-hero__meta .dot { width: 3px; height: 3px; background: var(--mist); border-radius: 50%; display: inline-block; }
.art-hero__meta .author { color: var(--ink); font-weight: 600; }
.art-lead-img {
max-width: 1100px;
margin: 0 auto;
padding: 0 var(--s-6);
}
.art-lead-img__inner {
aspect-ratio: 16 / 9;
border-radius: var(--r-lg);
overflow: hidden;
margin-top: var(--s-8);
}
.art-lead-img__inner img { width: 100%; height: 100%; object-fit: cover; }
.art-lead-img__caption {
font-size: 13px;
color: var(--mist);
margin-top: var(--s-3);
text-align: center;
font-style: italic;
}
.art-body {
padding: var(--s-12) var(--s-6) var(--s-16);
display: grid;
grid-template-columns: minmax(0, var(--w-prose)) 280px;
gap: var(--s-12);
max-width: 1100px;
margin: 0 auto;
align-items: start;
}
.art-body__main { min-width: 0; }
.art-body__main p {
font-size: 18px;
line-height: 1.7;
color: var(--ink);
margin: 0 0 var(--s-5);
}
.art-body__main > p:first-of-type::first-letter {
font-family: var(--font-display);
font-size: 4em;
line-height: 0.9;
float: left;
padding: 8px 12px 0 0;
color: var(--terracotta);
font-weight: 500;
}
.art-body__main h2 {
font-size: 32px;
margin: var(--s-12) 0 var(--s-4);
line-height: 1.2;
}
.art-body__main h3 {
font-size: 22px;
margin: var(--s-8) 0 var(--s-3);
}
.art-body__main ul, .art-body__main ol {
font-size: 18px;
line-height: 1.7;
color: var(--ink);
padding-left: 22px;
margin: 0 0 var(--s-5);
}
.art-body__main li { margin-bottom: 8px; }
.art-body__main a { color: var(--terracotta); text-decoration: underline; text-underline-offset: 3px; }
.art-body__main img { border-radius: var(--r-md); margin: var(--s-6) 0; }
.art-body__main figure { margin: var(--s-8) 0; }
.art-body__main figure img { margin: 0; }
.art-body__main figcaption {
font-size: 13px; color: var(--mist); margin-top: 10px; font-style: italic; text-align: center;
}
.art-body__main blockquote {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: 26px;
line-height: 1.35;
color: var(--ink);
border-left: 2px solid var(--terracotta);
padding: var(--s-2) 0 var(--s-2) var(--s-6);
margin: var(--s-10) 0;
text-wrap: balance;
}
.art-body__main hr { border: none; border-top: 1px solid var(--clay); margin: var(--s-10) 0; }
.tip {
background: var(--terracotta-soft);
border-radius: var(--r-md);
padding: 22px 26px;
margin: var(--s-8) 0;
border-left: 3px solid var(--terracotta);
}
.tip-label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--terracotta-deep); margin-bottom: 8px; }
.tip h4 { font-family: var(--font-display); font-weight: 600; font-size: 22px; margin: 0 0 8px; color: var(--ink); }
.tip p { font-size: 16px !important; line-height: 1.55 !important; color: var(--ink); margin: 0 !important; }
.summary {
background: var(--olive-soft);
border-radius: var(--r-md);
padding: 22px 26px;
margin: var(--s-10) 0 0;
}
.summary .tip-label { color: var(--olive-deep); }
.summary ul { margin: 0; padding-left: 22px; font-size: 16px !important; color: var(--ink); line-height: 1.7 !important; }
.art-side {
position: sticky;
top: 100px;
display: flex;
flex-direction: column;
gap: var(--s-6);
}
/* Where-to-Next CTA als bovenste sidebar-blok. De widget-card heeft eigen
styling (cream/sand gradient + coral CTA); wrapper geeft 'm alleen ruimte. */
.side-wtn-cta { margin: 0; }
.side-wtn-cta .stapje-wtn-card { box-shadow: 0 8px 24px -14px rgba(31,42,51,0.18); }
.art-side h5 {
font-family: var(--font-body);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--graphite);
margin: 0 0 var(--s-4);
padding-bottom: var(--s-3);
border-bottom: 1px solid var(--clay);
}
.share { display: flex; flex-direction: column; gap: 8px; }
.share__btn {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 11px 14px;
background: transparent;
border: 1px solid var(--clay);
border-radius: var(--r-sm);
color: var(--ink);
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
cursor: pointer;
text-decoration: none;
text-align: left;
transition: background var(--dur-base) var(--ease-step),
border-color var(--dur-base) var(--ease-step),
color var(--dur-base) var(--ease-step);
}
.share__btn:hover { background: var(--sand); border-color: var(--graphite); color: var(--ink); }
.share__btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.share__btn span { flex: 1; }
/* Brand-getinte hover op de social-buttons */
.share__btn--whatsapp:hover {
background: #DCF7E5;
border-color: #25D366;
color: #075E54;
}
.share__btn--whatsapp svg { color: #25D366; }
.share__btn--facebook:hover {
background: #E5EDF8;
border-color: #1877F2;
color: #0B4DA8;
}
.share__btn--facebook svg { color: #1877F2; }
.share__btn--instagram:hover {
background: #FCEAF0;
border-color: #C13584;
color: #8A2667;
}
.share__btn--instagram svg { color: #C13584; }
.author-card {
background: var(--bone);
padding: 22px;
border-radius: var(--r-md);
}
.author-card__avatar {
display: block;
width: 96px; height: 96px;
border-radius: 50%;
background: linear-gradient(135deg, #C28A6E, #8C3D27);
margin-bottom: 14px;
overflow: hidden;
transition: transform var(--dur-base) var(--ease-step);
}
.author-card__avatar:hover { transform: scale(1.04); }
.author-card__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.author-card__name {
display: inline-block;
font-family: var(--font-display);
font-weight: 500;
font-size: 19px;
margin: 0 0 4px;
color: var(--ink);
text-decoration: none;
transition: color var(--dur-base) var(--ease-step);
}
.author-card__name:hover { color: var(--terracotta-deep); }
.author-card__role {
font-size: 11px;
color: var(--mist);
text-transform: uppercase;
letter-spacing: 0.10em;
font-weight: 600;
margin-bottom: 12px;
}
.author-card__bio {
font-size: 14px;
line-height: 1.6;
color: var(--graphite);
margin: 0;
}
/* === Sidebar-modules: nieuwste artikelen + populaire onderwerpen === */
.side-module ul {
list-style: none;
margin: 0;
padding: 0;
}
.side-latest ul { display: flex; flex-direction: column; gap: 14px; }
.side-latest__row {
display: grid;
grid-template-columns: 64px 1fr;
gap: 12px;
align-items: center;
text-decoration: none;
color: var(--ink);
}
.side-latest__row:hover .side-latest__title { color: var(--terracotta-deep); }
.side-latest__thumb {
width: 64px;
height: 64px;
border-radius: var(--r-sm);
overflow: hidden;
background: var(--clay);
flex-shrink: 0;
}
.side-latest__thumb img,
.side-latest__thumb .imgph {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 0;
}
.side-latest__copy {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.side-latest__title {
font-family: var(--font-body);
font-weight: 600;
font-size: 13.5px;
line-height: 1.35;
color: var(--ink);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
transition: color var(--dur-base) var(--ease-step);
}
.side-latest__date {
font-size: 11.5px;
color: var(--graphite);
opacity: 0.7;
}
.side-cats ul { display: flex; flex-direction: column; gap: 8px; }
.side-cats__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 8px 12px;
border: 1px solid var(--clay);
border-radius: var(--r-sm);
text-decoration: none;
background: transparent;
transition: background var(--dur-base) var(--ease-step), border-color var(--dur-base) var(--ease-step);
}
.side-cats__row:hover {
background: var(--sand);
border-color: var(--graphite);
}
.side-cats__row .pill { flex-shrink: 0; }
.side-cats__count {
font-size: 12px;
color: var(--graphite);
opacity: 0.75;
white-space: nowrap;
}
/* Klikbare auteurnaam in de art-hero meta-balk */
.art-hero__meta a.author {
color: var(--ink);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color var(--dur-base) var(--ease-step), color var(--dur-base) var(--ease-step);
}
.art-hero__meta a.author:hover {
color: var(--terracotta-deep);
border-bottom-color: currentColor;
}
.related {
background: var(--sand);
padding: var(--s-16) 0;
border-top: 1px solid var(--clay);
}
.related__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-6);
}
.related .card { background: var(--bone); }
@media (max-width: 960px) {
.art-body { grid-template-columns: 1fr; padding-top: var(--s-10); padding-bottom: var(--s-12); gap: var(--s-8); }
.art-side { position: static; top: auto; }
.related__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.art-hero { padding: var(--s-8) 0 var(--s-6); }
.art-hero h1 { font-size: clamp(28px, 8vw, 38px); }
.art-body__main p { font-size: 17px; }
.art-body__main h2 { font-size: 26px; margin-top: var(--s-10); }
.art-body__main h3 { font-size: 20px; }
.art-body__main blockquote { font-size: 22px; }
.related__grid { grid-template-columns: 1fr; }
}
/* =========================================================================
LUISTER-NAAR-DIT-ARTIKEL knop
========================================================================= */
.listen {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0 0 var(--s-8);
vertical-align: middle;
}
.listen__btn {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 6px 22px 6px 6px;
background: var(--cream);
border: 1px solid var(--clay);
border-radius: var(--r-pill);
cursor: pointer;
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
color: var(--ink);
text-decoration: none;
letter-spacing: 0.005em;
line-height: 1;
transition: background var(--dur-base) var(--ease-step),
border-color var(--dur-base) var(--ease-step),
color var(--dur-base) var(--ease-step),
transform var(--dur-base) var(--ease-step);
}
.listen__btn:hover {
background: var(--terracotta-soft);
border-color: var(--terracotta);
color: var(--terracotta-deep);
transform: translateY(-1px);
}
.listen.is-playing .listen__btn,
.listen.is-paused .listen__btn {
background: var(--terracotta-soft);
border-color: var(--terracotta);
color: var(--terracotta-deep);
}
.listen__icon {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--terracotta);
color: var(--cream);
flex: 0 0 34px;
position: relative;
transition: background var(--dur-base) var(--ease-step);
}
.listen__btn:hover .listen__icon { background: var(--terracotta-deep); }
.listen__icon svg {
width: 12px !important;
height: 12px !important;
display: block;
fill: currentColor;
}
.listen__icon--pause { display: none !important; }
.listen.is-playing .listen__icon--play { display: none !important; }
.listen.is-playing .listen__icon--pause { display: block !important; }
/* play-icoon iets naar rechts geschoven om optisch gecentreerd te zijn */
.listen__icon--play { transform: translateX(1px); }
.listen__label {
white-space: nowrap;
}
.listen__stop {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
border: 1px solid var(--clay);
background: var(--cream);
border-radius: 50%;
cursor: pointer;
color: var(--graphite);
flex-shrink: 0;
transition: background var(--dur-base) var(--ease-step),
border-color var(--dur-base) var(--ease-step),
color var(--dur-base) var(--ease-step);
}
.listen__stop:hover {
background: var(--ink);
border-color: var(--ink);
color: var(--cream);
}
.listen__stop svg {
width: 11px !important;
height: 11px !important;
fill: currentColor;
}
@media (max-width: 480px) {
.listen__btn { padding: 5px 16px 5px 5px; gap: 10px; font-size: 13px; }
.listen__icon { width: 30px; height: 30px; flex: 0 0 30px; }
.listen__stop { width: 30px; height: 30px; }
}
/* =========================================================================
FEEDBACK-BOX onderaan een artikel
========================================================================= */
.article-feedback {
margin: var(--s-12) 0 0;
}
.article-feedback__inner {
background: var(--bone);
border-radius: var(--r-lg);
padding: var(--s-10) var(--s-8);
text-align: center;
border: 1px solid var(--clay);
box-shadow: var(--shadow-1);
}
.article-feedback__inner h3 {
font-family: var(--font-display);
font-size: clamp(22px, 2.4vw, 28px);
margin: 0 0 10px;
font-weight: 500;
letter-spacing: -0.01em;
color: var(--ink);
line-height: 1.25;
text-wrap: balance;
}
.article-feedback__sub {
color: var(--graphite);
font-size: 15px;
line-height: 1.55;
margin: 0 0 var(--s-6);
text-wrap: pretty;
}
.article-feedback__choices {
display: inline-flex;
gap: var(--s-3);
flex-wrap: wrap;
justify-content: center;
}
.feedback-choice {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 14px 30px;
border: 1px solid var(--clay);
background: var(--cream);
color: var(--ink);
border-radius: var(--r-pill);
font-family: var(--font-body);
font-size: 15px;
font-weight: 600;
cursor: pointer;
letter-spacing: 0.01em;
min-width: 150px;
justify-content: center;
transition: background var(--dur-base) var(--ease-step),
border-color var(--dur-base) var(--ease-step),
color var(--dur-base) var(--ease-step),
transform var(--dur-base) var(--ease-step),
box-shadow var(--dur-base) var(--ease-step);
}
.feedback-choice svg {
width: 18px !important;
height: 18px !important;
flex-shrink: 0;
}
.feedback-choice:hover {
background: var(--olive-soft);
border-color: var(--olive);
color: var(--olive-deep);
transform: translateY(-2px);
box-shadow: var(--shadow-1);
}
.feedback-choice--neg:hover {
background: var(--terracotta-soft);
border-color: var(--terracotta);
color: var(--terracotta-deep);
}
.article-feedback__form {
text-align: left;
max-width: 560px;
margin: 0 auto;
}
.article-feedback__chosen {
margin: 0 0 var(--s-6);
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: clamp(20px, 2.4vw, 26px);
line-height: 1.35;
color: var(--ink);
text-align: center;
text-wrap: balance;
}
.article-feedback__form .field { margin-bottom: var(--s-5); }
.article-feedback__form label {
display: block;
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.10em;
color: var(--graphite);
margin-bottom: 8px;
}
.article-feedback__form textarea,
.article-feedback__form input[type="text"] {
width: 100%;
font-family: var(--font-body);
font-size: 15px;
padding: 13px 16px;
background: var(--cream);
border: 1px solid var(--clay);
border-radius: var(--r-sm);
color: var(--ink);
transition: border-color var(--dur-base) var(--ease-step), box-shadow var(--dur-base) var(--ease-step);
resize: vertical;
line-height: 1.5;
}
.article-feedback__form textarea { min-height: 110px; }
.article-feedback__form textarea:focus,
.article-feedback__form input[type="text"]:focus {
outline: none;
border-color: var(--terracotta);
box-shadow: 0 0 0 3px rgba(184, 85, 58, 0.12);
}
.article-feedback__form ::placeholder { color: var(--pale); }
.article-feedback__captcha {
background: var(--cream);
border: 1px solid var(--clay);
border-radius: var(--r-md);
padding: 14px 16px;
}
.article-feedback__captcha label {
margin-bottom: 8px;
text-transform: none;
letter-spacing: 0;
font-size: 14px;
font-weight: 500;
font-family: var(--font-display);
font-style: italic;
color: var(--ink);
}
.article-feedback__captcha label::before {
content: "?";
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px; height: 20px;
border-radius: 50%;
background: var(--terracotta);
color: var(--cream);
font-family: var(--font-body);
font-style: normal;
font-weight: 700;
font-size: 12px;
margin-right: 8px;
vertical-align: -3px;
}
.article-feedback__captcha input { max-width: 160px; background: #fff; }
.article-feedback__actions {
display: flex;
justify-content: flex-end;
gap: var(--s-3);
margin-top: var(--s-6);
flex-wrap: wrap;
}
.article-feedback__error {
margin: var(--s-4) 0 0;
background: var(--terracotta-soft);
color: var(--terracotta-deep);
padding: 12px 16px;
border-radius: var(--r-sm);
font-size: 14px;
line-height: 1.5;
border-left: 3px solid var(--terracotta);
}
.article-feedback__success {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
padding: var(--s-4) 0;
}
.article-feedback__success-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px; height: 56px;
border-radius: 50%;
background: var(--olive-soft);
color: var(--olive-deep);
font-size: 26px;
font-weight: 700;
}
.article-feedback__success p {
margin: 0;
font-family: var(--font-display);
font-size: 20px;
font-weight: 500;
color: var(--ink);
letter-spacing: -0.005em;
}
@media (max-width: 600px) {
.article-feedback__inner { padding: var(--s-8) var(--s-5); }
.article-feedback__inner h3 { font-size: 22px; }
.article-feedback__choices { width: 100%; }
.feedback-choice { min-width: 0; flex: 1; padding: 13px 18px; }
.article-feedback__actions { flex-direction: column-reverse; }
.article-feedback__actions .btn { width: 100%; }
}
/* =========================================================================
OVER-ONS PAGE
========================================================================= */
.ov-hero {
padding: var(--s-16) 0 var(--s-12);
border-bottom: 1px solid var(--clay);
}
.ov-hero__inner { max-width: 920px; margin: 0 auto; padding: 0 var(--s-6); }
.ov-hero h1 {
font-size: clamp(40px, 6vw, 84px);
line-height: 1.02;
letter-spacing: -0.02em;
margin: var(--s-4) 0 var(--s-6);
font-weight: 500;
}
.ov-hero h1 em { font-style: italic; font-weight: 400; color: var(--terracotta); }
.ov-hero p.lead {
font-size: 21px;
line-height: 1.5;
color: var(--graphite);
max-width: 60ch;
margin: 0;
}
.manifesto { padding: var(--s-16) 0; }
.manifesto__inner {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: var(--s-12);
align-items: start;
}
.manifesto__label {
position: sticky; top: 100px;
font-family: var(--font-body);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--mist);
}
.manifesto__label::before {
content: "";
display: block;
width: 32px; height: 1px;
background: var(--terracotta);
margin-bottom: 14px;
}
.manifesto__text p {
font-family: var(--font-display);
font-weight: 400;
font-size: 26px;
line-height: 1.4;
color: var(--ink);
margin: 0 0 var(--s-6);
text-wrap: pretty;
}
.manifesto__text p em { font-style: italic; color: var(--terracotta); }
.manifesto__text p:last-child { margin-bottom: 0; font-size: 21px; color: var(--graphite); }
.principles {
padding: var(--s-16) 0;
background: var(--sand);
border-top: 1px solid var(--clay);
border-bottom: 1px solid var(--clay);
}
.principles__head { text-align: center; margin-bottom: var(--s-10); }
.principles__head h2 { margin: 0 0 var(--s-3); font-size: var(--fs-2xl); }
.principles__head p { color: var(--graphite); margin: 0 auto; max-width: 50ch; }
.principles__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-5);
}
.principle {
background: var(--cream);
border-radius: var(--r-md);
padding: var(--s-8);
border: 1px solid var(--clay);
}
.principle__num {
font-family: var(--font-display);
font-style: italic;
font-size: 28px;
color: var(--terracotta);
margin-bottom: var(--s-3);
line-height: 1;
}
.principle h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: 21px;
margin: 0 0 var(--s-3);
line-height: 1.25;
}
.principle p {
font-size: 15px;
line-height: 1.6;
color: var(--graphite);
margin: 0;
}
.story { padding: var(--s-16) 0; }
.story__inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-12);
align-items: center;
}
.story__img {
aspect-ratio: 4 / 5;
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-1);
}
.story__img img { width: 100%; height: 100%; object-fit: cover; }
.story__copy .eyebrow { display: inline-block; margin-bottom: var(--s-4); }
.story__copy h2 {
font-size: clamp(30px, 4vw, 48px);
margin: 0 0 var(--s-5);
line-height: 1.1;
}
.story__copy p {
font-size: 17px;
line-height: 1.7;
color: var(--graphite);
margin: 0 0 var(--s-4);
}
.redactie {
padding: var(--s-16) 0;
background: var(--cream);
border-top: 1px solid var(--clay);
}
.redactie__head { text-align: center; margin-bottom: var(--s-10); }
.redactie__head h2 { margin: 0 0 var(--s-3); }
.redactie__head p { color: var(--graphite); margin: 0 auto; max-width: 56ch; }
.redactie__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-8);
}
.person { text-align: left; }
.person__avatar {
display: block;
aspect-ratio: 1;
border-radius: var(--r-md);
overflow: hidden;
margin-bottom: var(--s-5);
background: var(--clay);
transition: transform var(--dur-base) var(--ease-step);
}
.person__avatar:hover { transform: translateY(-2px); }
.person__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--ease-step); }
.person__avatar:hover img { transform: scale(1.04); }
.person__name {
font-family: var(--font-display);
font-weight: 500;
font-size: 23px;
margin: 0 0 4px;
letter-spacing: -0.005em;
}
.person__name a {
color: var(--ink);
text-decoration: none;
transition: color var(--dur-base) var(--ease-step);
}
.person__name a:hover { color: var(--terracotta-deep); }
.person__role {
font-family: var(--font-body);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--terracotta);
margin: 0 0 var(--s-3);
}
.person__bio {
font-size: 15px;
line-height: 1.65;
color: var(--graphite);
margin: 0;
}
/* Eén auteur: gecentreerde, smallere kaart in plaats van full-width stretch */
.redactie__grid--single {
grid-template-columns: minmax(0, 420px) !important;
justify-content: center;
}
.redactie__grid--single .person { text-align: center; }
.redactie__grid--single .person__avatar { margin-left: auto; margin-right: auto; max-width: 320px; }
.redactie__grid--single .person__bio { max-width: 44ch; margin-left: auto; margin-right: auto; }
/* Quote-band (vervangt de oude facts-band) */
.quote-band {
padding: var(--s-16) 0;
background: var(--olive-deep);
color: var(--dark-fg);
}
.quote-band__quote {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: clamp(26px, 3.6vw, 42px);
line-height: 1.3;
color: var(--cream);
text-align: center;
max-width: 880px;
margin: 0 auto var(--s-8);
text-wrap: balance;
position: relative;
}
.quote-band__quote::before {
content: "\201C";
display: block;
font-size: 80px;
line-height: 0.6;
color: #F2A07A;
margin-bottom: 16px;
}
.quote-band__author {
display: flex;
align-items: center;
gap: var(--s-4);
justify-content: center;
}
.quote-band__avatar {
display: inline-block;
width: 56px; height: 56px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
}
.quote-band__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.quote-band__name { display: inline-flex; flex-direction: column; gap: 2px; text-align: left; }
.quote-band__name strong {
font-family: var(--font-display);
font-weight: 500;
font-size: 18px;
color: var(--cream);
letter-spacing: -0.005em;
}
.quote-band__name span {
font-family: var(--font-body);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--dark-fg-mute);
}
@media (max-width: 600px) {
.quote-band { padding: var(--s-12) 0; }
.quote-band__quote::before { font-size: 60px; }
}
.facts {
padding: var(--s-12) 0;
background: var(--olive-deep);
color: var(--dark-fg);
}
.facts__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--s-8);
text-align: center;
}
.fact__num {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(38px, 5vw, 60px);
color: var(--cream);
line-height: 1;
letter-spacing: -0.02em;
margin-bottom: 8px;
}
.fact__num em { color: #F2A07A; font-style: italic; font-weight: 400; }
.fact__label {
font-family: var(--font-body);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--dark-fg-mute);
}
.cta {
padding: var(--s-16) 0;
text-align: center;
background: var(--bone);
}
.cta__inner { max-width: 680px; margin: 0 auto; padding: 0 var(--s-6); }
.cta h2 {
font-size: clamp(30px, 4vw, 46px);
margin: 0 0 var(--s-4);
line-height: 1.15;
}
.cta p { color: var(--graphite); margin: 0 auto var(--s-8); font-size: 17px; max-width: 50ch; }
.cta__actions { display: inline-flex; gap: var(--s-4); flex-wrap: wrap; justify-content: center; }
@media (max-width: 960px) {
.manifesto__inner { grid-template-columns: 1fr; gap: var(--s-6); }
.manifesto__label { position: static; }
.manifesto__text p { font-size: 22px; }
.principles__grid { grid-template-columns: repeat(2, 1fr); }
.story__inner { grid-template-columns: 1fr; gap: var(--s-8); }
.redactie__grid { grid-template-columns: repeat(2, 1fr); }
.facts__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-6); }
}
@media (max-width: 600px) {
.ov-hero { padding: var(--s-10) 0 var(--s-8); }
.principles__grid { grid-template-columns: 1fr; }
.principle { padding: var(--s-6); }
.redactie__grid { grid-template-columns: 1fr; }
.person__avatar { max-width: 280px; }
}
/* =========================================================================
CONTACT
========================================================================= */
.contact { padding: var(--s-12) 0 var(--s-16); }
.contact__grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: var(--s-12);
align-items: start;
margin-top: var(--s-6);
}
.contact__intro h1 {
font-size: clamp(34px, 5vw, 60px);
line-height: 1.05;
margin: 0 0 var(--s-5);
letter-spacing: -0.018em;
font-weight: 500;
}
.contact__intro h1 em { font-style: italic; color: var(--terracotta); font-weight: 400; }
.contact__intro .lead {
font-size: 18px;
line-height: 1.55;
color: var(--graphite);
margin: 0 0 var(--s-8);
max-width: 50ch;
}
.reasons { display: flex; flex-direction: column; margin-bottom: var(--s-8); }
.reason {
display: grid;
grid-template-columns: 48px 1fr;
gap: var(--s-4);
padding: var(--s-5) 0;
border-top: 1px solid var(--clay);
align-items: start;
}
.reason:last-child { border-bottom: 1px solid var(--clay); }
.reason__num {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
color: var(--terracotta);
font-size: 22px;
}
.reason h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: 19px;
margin: 0 0 4px;
color: var(--ink);
}
.reason p {
font-size: 15px;
line-height: 1.55;
color: var(--graphite);
margin: 0;
}
.reason a { color: var(--terracotta); }
.direct {
background: var(--bone);
padding: var(--s-6);
border-radius: var(--r-md);
}
.direct h4 {
font-family: var(--font-body);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--graphite);
margin: 0 0 var(--s-3);
}
.direct__email {
font-family: var(--font-display);
font-size: 24px;
font-weight: 500;
color: var(--ink);
text-decoration: none;
display: block;
margin-bottom: 6px;
letter-spacing: -0.005em;
word-break: break-all;
}
.direct__email:hover { color: var(--terracotta-deep); }
.direct p { font-size: 14px; color: var(--mist); margin: 0; }
.contact-form {
background: var(--cream);
border: 1px solid var(--clay);
border-radius: var(--r-lg);
padding: var(--s-10);
}
.contact-form .eyebrow { display: inline-block; margin-bottom: var(--s-3); }
.contact-form h2 { font-size: 30px; margin: 0 0 var(--s-2); line-height: 1.15; }
.contact-form .formlead { color: var(--graphite); font-size: 15px; margin: 0 0 var(--s-6); }
.contact-form .formlead a { color: var(--terracotta); text-decoration: underline; text-underline-offset: 3px; }
.contact-form .formlead a:hover { color: var(--terracotta-deep); }
.form-feedback {
background: var(--olive-soft);
color: var(--olive-deep);
border-radius: var(--r-sm);
padding: 12px 14px;
margin-bottom: var(--s-5);
font-size: 14px;
line-height: 1.5;
}
.form-feedback.is-error { background: var(--terracotta-soft); color: var(--terracotta-deep); }
.form-feedback a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.field { margin-bottom: var(--s-5); }
.field label {
display: block;
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--graphite);
margin-bottom: 6px;
}
.field input,
.field select,
.field textarea {
width: 100%;
font-family: var(--font-body);
font-size: 15px;
padding: 13px 14px;
background: #fff;
border: 1px solid var(--clay);
border-radius: var(--r-sm);
color: var(--ink);
transition: border-color var(--dur-base) var(--ease-step), box-shadow var(--dur-base) var(--ease-step);
resize: vertical;
}
.field textarea { min-height: 140px; line-height: 1.55; }
.field input:focus,
.field select:focus,
.field textarea:focus {
outline: none;
border-color: var(--terracotta);
box-shadow: 0 0 0 3px rgba(184, 85, 58, 0.12);
}
.field input::placeholder, .field textarea::placeholder { color: var(--pale); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.checkbox {
display: flex; align-items: flex-start; gap: 10px;
font-size: 14px; line-height: 1.5;
color: var(--graphite);
margin-bottom: var(--s-5);
}
.checkbox input { width: 16px; height: 16px; margin-top: 3px; accent-color: var(--terracotta); flex: 0 0 16px; }
.checkbox a { color: var(--terracotta); }
.form-actions {
display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
flex-wrap: wrap;
}
.form-actions .meta-note { font-size: 13px; color: var(--mist); }
.form-feedback.is-visible { display: block; }
.faq {
padding: var(--s-12) 0 var(--s-16);
background: var(--sand);
border-top: 1px solid var(--clay);
}
.faq__inner { max-width: 820px; margin: 0 auto; padding: 0 var(--s-6); }
.faq h2 { text-align: center; margin: 0 0 var(--s-2); }
.faq__sub { text-align: center; color: var(--graphite); margin: 0 0 var(--s-8); }
details {
background: var(--cream);
border: 1px solid var(--clay);
border-radius: var(--r-md);
padding: 18px 22px;
margin-bottom: 12px;
cursor: pointer;
transition: border-color var(--dur-base) var(--ease-step);
}
details[open] { border-color: var(--terracotta); }
details summary {
list-style: none;
font-family: var(--font-display);
font-weight: 500;
font-size: 19px;
color: var(--ink);
display: flex; justify-content: space-between; align-items: center;
gap: 16px;
}
details summary::-webkit-details-marker { display: none; }
details summary::after {
content: "+";
font-family: var(--font-display);
font-size: 24px;
color: var(--terracotta);
transition: transform var(--dur-base) var(--ease-step);
line-height: 1;
flex-shrink: 0;
}
details[open] summary::after { content: "−"; }
details p {
font-size: 15px;
line-height: 1.6;
color: var(--graphite);
margin: 12px 0 0;
}
@media (max-width: 960px) {
.contact__grid { grid-template-columns: 1fr; gap: var(--s-8); }
.contact-form { padding: var(--s-6); }
.field-row { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.contact { padding-top: var(--s-8); }
.form-actions { flex-direction: column-reverse; align-items: stretch; gap: var(--s-3); }
.form-actions .btn { width: 100%; }
}
/* =========================================================================
SEARCH / 404 / GENERIC PAGE
========================================================================= */
.generic-page {
padding: var(--s-12) 0 var(--s-16);
}
.generic-page__inner {
max-width: var(--w-prose);
margin: 0 auto;
}
.generic-page h1 { font-size: clamp(34px, 4.5vw, 56px); margin-bottom: var(--s-5); }
.generic-page p, .generic-page li { font-size: 17px; line-height: 1.7; color: var(--ink); }
.generic-page p { margin-bottom: var(--s-5); }
.generic-page a { color: var(--terracotta); text-decoration: underline; text-underline-offset: 3px; }
.notfound {
padding: var(--s-16) 0;
text-align: center;
}
.notfound__num {
font-family: var(--font-display);
font-size: clamp(80px, 14vw, 180px);
line-height: 1;
color: var(--terracotta);
font-style: italic;
font-weight: 400;
margin: 0 0 var(--s-4);
}
/* =========================================================================
PAGINATION
========================================================================= */
.pagination {
display: flex; flex-wrap: wrap; gap: 8px;
justify-content: center;
margin: var(--s-12) 0 var(--s-8);
}
.pagination .page-numbers {
display: inline-flex; align-items: center; justify-content: center;
min-width: 40px;
padding: 8px 14px;
border-radius: var(--r-sm);
border: 1px solid var(--clay);
font-size: 14px;
font-weight: 500;
color: var(--graphite);
text-decoration: none;
transition: all var(--dur-base) var(--ease-step);
}
.pagination .page-numbers:hover { background: var(--sand); color: var(--ink); }
.pagination .page-numbers.current {
background: var(--ink); color: var(--cream); border-color: var(--ink);
}
/* =========================================================================
COMMENTS
========================================================================= */
.comments-area {
max-width: var(--w-prose);
margin: 0 auto;
padding: 0 var(--s-6) var(--s-12);
}
.comments-area h3 { font-size: 24px; margin-bottom: var(--s-5); }
.comment-list { list-style: none; padding: 0; margin: 0 0 var(--s-8); }
.comment { padding: var(--s-5) 0; border-top: 1px solid var(--clay); }
.comment-meta { font-size: 13px; color: var(--mist); margin-bottom: 8px; }
.comment-content p { font-size: 16px; line-height: 1.6; }
.comment-form .field { margin-bottom: var(--s-4); }
/* =========================================================================
COOKIE-BANNER + VOORKEUREN-MODAL
========================================================================= */
.stapje-cookie {
position: fixed;
left: 50%;
bottom: 20px;
transform: translateX(-50%);
width: calc(100% - 32px);
max-width: 1080px;
background: var(--cream);
color: var(--ink);
border: 1px solid var(--clay);
border-radius: var(--r-lg, 12px);
box-shadow: 0 18px 48px rgba(31, 26, 20, 0.18), 0 4px 12px rgba(31, 26, 20, 0.08);
z-index: 200;
animation: stapjeCookieIn 220ms ease-out both;
}
.stapje-cookie[hidden] { display: none; }
@keyframes stapjeCookieIn {
from { opacity: 0; transform: translate(-50%, 16px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
.stapje-cookie__inner {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: var(--s-6);
padding: 20px 24px;
}
.stapje-cookie__copy h2 {
margin: 0 0 6px;
font-size: 17px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--ink);
font-family: inherit;
}
.stapje-cookie__copy p {
margin: 0;
font-size: 14px;
line-height: 1.55;
color: var(--ink);
max-width: 760px;
}
.stapje-cookie__actions {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
justify-content: flex-end;
}
.stapje-cookie__actions .btn { padding: 10px 18px; font-size: 14px; }
.stapje-cookie__prefs-link {
background: transparent;
border: 0;
color: var(--ink);
text-decoration: underline;
text-underline-offset: 3px;
font-weight: 500;
padding: 8px 12px;
cursor: pointer;
}
.stapje-cookie__prefs-link:hover { opacity: 0.75; }
@media (max-width: 760px) {
.stapje-cookie {
left: 12px;
right: 12px;
bottom: 12px;
transform: none;
width: auto;
max-width: none;
}
.stapje-cookie__inner {
grid-template-columns: 1fr;
padding: 18px 18px 16px;
gap: var(--s-4);
}
.stapje-cookie__copy h2 { font-size: 16px; }
.stapje-cookie__copy p { font-size: 13.5px; }
.stapje-cookie__actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: stretch;
width: 100%;
}
.stapje-cookie__actions .btn {
flex: 1 1 calc(50% - 4px);
min-width: 0;
padding: 11px 12px;
font-size: 14px;
}
.stapje-cookie__prefs-link {
flex: 1 1 100%;
order: 1;
text-align: center;
padding: 8px 12px;
}
}
@media (max-width: 380px) {
.stapje-cookie__actions .btn { flex: 1 1 100%; }
}
/* === Voorkeuren-modal === */
.stapje-cookie-prefs {
position: fixed;
inset: 0;
z-index: 300;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.stapje-cookie-prefs[hidden] { display: none; }
.stapje-cookie-prefs__overlay {
position: absolute;
inset: 0;
background: rgba(31, 26, 20, 0.55);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.stapje-cookie-prefs__panel {
position: relative;
width: 100%;
max-width: 560px;
max-height: calc(100vh - 40px);
overflow-y: auto;
background: var(--cream);
border-radius: var(--r-lg, 12px);
box-shadow: 0 24px 64px rgba(0,0,0,0.3);
padding: 28px 28px 24px;
animation: stapjeCookieIn 220ms ease-out both;
}
.stapje-cookie-prefs__close {
position: absolute;
top: 12px;
right: 14px;
background: transparent;
border: 0;
font-size: 28px;
line-height: 1;
color: var(--ink);
cursor: pointer;
padding: 4px 10px;
border-radius: 6px;
}
.stapje-cookie-prefs__close:hover { background: rgba(0,0,0,0.06); }
.stapje-cookie-prefs h2 {
margin: 0 0 8px;
font-size: 22px;
font-weight: 600;
font-family: inherit;
color: var(--ink);
}
.stapje-cookie-prefs__lead {
margin: 0 0 18px;
font-size: 14px;
line-height: 1.55;
color: var(--ink);
opacity: 0.85;
}
.stapje-cookie-cat {
list-style: none;
margin: 0 0 18px;
padding: 0;
border-top: 1px solid var(--clay);
}
.stapje-cookie-cat__item {
padding: 14px 0;
border-bottom: 1px solid var(--clay);
}
.stapje-cookie-cat__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 4px;
}
.stapje-cookie-cat__head strong { font-size: 15px; font-weight: 600; color: var(--ink); }
.stapje-cookie-cat__lock {
font-size: 12px;
color: var(--ink);
opacity: 0.6;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.stapje-cookie-cat p {
margin: 0;
font-size: 13px;
line-height: 1.55;
color: var(--ink);
opacity: 0.78;
}
/* Toggle-switch */
.stapje-cookie-toggle {
position: relative;
display: inline-block;
cursor: pointer;
user-select: none;
}
.stapje-cookie-toggle input {
position: absolute;
opacity: 0;
width: 100%;
height: 100%;
cursor: pointer;
margin: 0;
}
.stapje-cookie-toggle__track {
display: block;
width: 44px;
height: 24px;
background: #c5beb1;
border-radius: 999px;
transition: background 180ms ease;
position: relative;
}
.stapje-cookie-toggle__thumb {
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
background: #fff;
border-radius: 50%;
transition: transform 180ms ease;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.stapje-cookie-toggle input:checked + .stapje-cookie-toggle__track {
background: var(--terra, #B8553A);
}
.stapje-cookie-toggle input:checked + .stapje-cookie-toggle__track .stapje-cookie-toggle__thumb {
transform: translateX(20px);
}
.stapje-cookie-toggle input:focus-visible + .stapje-cookie-toggle__track {
outline: 2px solid var(--terra, #B8553A);
outline-offset: 2px;
}
.stapje-cookie-prefs__meta {
font-size: 12px;
color: var(--ink);
opacity: 0.7;
margin: 0 0 18px;
}
.stapje-cookie-prefs__meta a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.stapje-cookie-prefs__actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-end;
}
.stapje-cookie-prefs__actions .btn { padding: 9px 16px; font-size: 13px; }
@media (max-width: 540px) {
.stapje-cookie-prefs__panel { padding: 22px 20px 20px; }
.stapje-cookie-prefs__actions { justify-content: stretch; }
.stapje-cookie-prefs__actions .btn { flex: 1 1 100%; }
}
/* Screen-reader-only helper als die nog niet bestaat in WP-core */
.screen-reader-text {
position: absolute !important;
clip: rect(1px,1px,1px,1px);
width: 1px; height: 1px;
overflow: hidden;
}
/* =========================================================================
REIZEN MET LYNN — speelse touches
Een paar accenten die de reisblog wat luchtiger en speelser maken zonder
het rustige, warme grid om te gooien.
========================================================================= */
/* 1. Handgetekende, golvende onderstreep onder de hero-em.
Werkt op zowel reis
als andere display-headings die
de klasse 'wave-underline' meekrijgen. */
.hero__copy h1 em,
.wave-underline {
position: relative;
font-style: italic;
color: var(--coral);
display: inline-block;
padding-bottom: 0.18em;
}
.hero__copy h1 em::after,
.wave-underline::after {
content: "";
position: absolute;
left: -2%;
right: -2%;
bottom: -0.06em;
height: 0.42em;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: 100% 100%;
pointer-events: none;
}
/* 2. Cards en feature-items lichtjes opveren bij hover. */
.card,
.cat-tile,
.hero__feature {
transition:
transform var(--dur-base) var(--ease-bounce),
box-shadow var(--dur-base) var(--ease-step),
background var(--dur-base) var(--ease-step),
border-color var(--dur-base) var(--ease-step),
color var(--dur-base) var(--ease-step);
}
.card:hover,
.hero__feature:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-2);
}
.cat-tile:hover {
transform: translateY(-2px) rotate(-0.4deg);
}
/* 3. Pijltjes in section-heads schuiven mee bij hover, alsof ze willen
wegvliegen — een knipoog naar de paper-plane in het logo. */
.section-head a {
display: inline-flex;
align-items: center;
gap: 6px;
}
.section-head a::after {
content: "";
display: inline-block;
width: 0;
height: 0;
transition: transform var(--dur-base) var(--ease-bounce);
}
.section-head a:hover {
color: var(--coral-deep);
}
.section-head a:hover::after {
transform: translateX(4px);
}
/* 4. Buttons krijgen een licht "lift"-effect. */
.btn--primary,
.btn--secondary {
box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 6px 18px -8px rgba(184, 74, 47, 0.45);
}
.btn--primary:hover,
.btn--secondary:hover {
transform: translateY(-1px);
}
/* 5. Een subtiele zonnige accent-rand bovenaan de site, alsof er net licht
over de horizon valt. Speels, maar niet schreeuwerig. */
.site-header {
border-top: 4px solid var(--coral);
}
.site-header::before {
content: "";
display: block;
height: 0;
}
/* 6. CTA-blok krijgt een warm-gradient achtergrond i.p.v. saaie ink. */
.cta {
background: linear-gradient(135deg, var(--coral-soft) 0%, var(--sun-soft) 100%);
}
/* 7. Eyebrow krijgt een klein bolletje als optioneel ornament. */
.eyebrow.with-dot::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
margin-right: 8px;
border-radius: 50%;
background: currentColor;
vertical-align: middle;
}
/* 8. Speelse hover-bounce voor het cijfer in cat-tile. */
.cat-tile:hover .cat-tile__num {
transform: translateY(-2px) rotate(-3deg);
}
.cat-tile__num {
transition: transform var(--dur-base) var(--ease-bounce);
}
/* =========================================================================
ABOUT (template-over-lynn.php) — korte over-pagina
========================================================================= */
.about-hero {
padding: var(--s-12) 0 var(--s-10);
}
.about-hero .crumbs { margin-bottom: var(--s-8); }
.about-hero__grid {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: var(--s-12);
align-items: center;
}
@media (max-width: 900px) {
.about-hero { padding: var(--s-10) 0 var(--s-8); }
.about-hero__grid {
grid-template-columns: 1fr;
gap: var(--s-8);
}
}
.about-hero__photo {
position: relative;
aspect-ratio: 4 / 5;
border-radius: var(--r-lg);
overflow: hidden;
background: var(--sand);
box-shadow: var(--shadow-2);
/* Lichte tilt voor de speelse touch */
transform: rotate(-1.2deg);
transition: transform var(--dur-base) var(--ease-bounce);
}
.about-hero__photo:hover {
transform: rotate(0deg);
}
.about-hero__photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Klein papervlieger-stickertje rechtsboven op de foto */
.about-hero__sticker {
position: absolute;
top: -14px;
right: -14px;
width: 64px;
height: 64px;
border-radius: 50%;
background: transparent;
filter: drop-shadow(0 6px 14px rgba(31, 42, 51, 0.18));
transform: rotate(8deg);
pointer-events: none;
}
.about-hero__sticker svg {
width: 100%;
height: 100%;
display: block;
}
@media (max-width: 480px) {
.about-hero__sticker { width: 52px; height: 52px; top: -10px; right: -10px; }
}
.about-hero__copy .eyebrow { display: inline-block; margin-bottom: var(--s-3); }
.about-hero__copy h1 {
font-size: var(--fs-3xl);
margin-bottom: var(--s-6);
}
.about-hero__copy h1 em {
font-style: italic;
color: var(--coral);
font-weight: 400;
}
.about-hero__bio {
font-size: var(--fs-md);
line-height: 1.65;
color: var(--graphite);
margin-bottom: var(--s-8);
max-width: 56ch;
}
.about-hero__bio p { margin: 0 0 var(--s-4); }
.about-hero__bio p:last-child { margin-bottom: 0; }
.about-hero__actions {
display: flex;
flex-wrap: wrap;
gap: var(--s-4);
}
/* "Wat je hier vindt" — drie kleine genummerde kaarten ----------------- */
.about-quick {
padding: var(--s-12) 0;
background: var(--bone);
border-top: 1px solid var(--clay);
border-bottom: 1px solid var(--clay);
}
.about-quick__head {
text-align: center;
margin-bottom: var(--s-10);
}
.about-quick__head .eyebrow { display: inline-block; margin-bottom: var(--s-3); }
.about-quick__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-6);
}
@media (max-width: 760px) {
.about-quick { padding: var(--s-10) 0; }
.about-quick__grid { grid-template-columns: 1fr; gap: var(--s-4); }
}
.about-quick__item {
background: var(--cream);
border: 1px solid var(--clay);
border-radius: var(--r-md);
padding: var(--s-6);
transition:
transform var(--dur-base) var(--ease-bounce),
box-shadow var(--dur-base) var(--ease-step),
border-color var(--dur-base) var(--ease-step);
}
.about-quick__item:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-1);
border-color: var(--coral);
}
.about-quick__num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--coral-soft);
color: var(--coral-deep);
font-family: var(--font-display);
font-weight: 500;
font-size: 16px;
letter-spacing: -0.01em;
margin-bottom: var(--s-4);
}
.about-quick__item h3 {
font-size: var(--fs-lg);
margin-bottom: var(--s-2);
}
.about-quick__item p {
margin: 0;
color: var(--graphite);
font-size: 15px;
line-height: 1.55;
}
/* =========================================================================
LANDS / COUNTRIES — atmosferische tegels op de homepage
========================================================================= */
.lands {
padding: var(--s-12) 0;
background:
radial-gradient(1200px 400px at 50% 0%, var(--coral-soft) 0%, transparent 70%),
var(--cream);
}
.lands__head {
text-align: center;
max-width: 640px;
margin: 0 auto var(--s-10);
}
.lands__head .eyebrow { display: inline-block; margin-bottom: var(--s-3); }
.lands__head h2 { margin-bottom: var(--s-3); }
.lands__head h2 em {
font-style: italic;
color: var(--coral);
font-weight: 400;
}
.lands__sub {
color: var(--graphite);
font-size: var(--fs-md);
line-height: 1.6;
margin: 0;
}
.lands__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-5);
}
@media (max-width: 900px) {
.lands { padding: var(--s-10) 0; }
.lands__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
.lands__grid { grid-template-columns: 1fr; gap: var(--s-4); }
}
/* Tegel: gradient + postcard-typografie. Twee pseudo-elementen: ::before voor
het kleurvlak, ::after voor een lichte hotspot rechtsboven. */
.land-tile {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
aspect-ratio: 4 / 5;
padding: var(--s-6);
border-radius: var(--r-lg);
color: var(--cream);
overflow: hidden;
isolation: isolate;
text-decoration: none;
box-shadow: var(--shadow-1);
transition:
transform var(--dur-base) var(--ease-bounce),
box-shadow var(--dur-base) var(--ease-step);
}
.land-tile:hover { color: var(--cream); }
@media (max-width: 540px) {
.land-tile { aspect-ratio: 16 / 11; padding: var(--s-5); }
}
.land-tile::before {
content: "";
position: absolute;
inset: 0;
z-index: -2;
transition: transform 600ms var(--ease-step), filter var(--dur-base) var(--ease-step);
}
.land-tile::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(60% 50% at 80% 18%, rgba(255, 248, 238, 0.28), transparent 60%),
linear-gradient(180deg, transparent 35%, rgba(31, 42, 51, 0.35) 100%);
}
.land-tile:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-2);
}
.land-tile:hover::before {
transform: scale(1.05);
filter: saturate(1.08);
}
/* Top-row: index + thema-tag */
.land-tile__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-4);
}
.land-tile__num {
font-family: var(--font-display);
font-style: italic;
font-size: 14px;
letter-spacing: 0.04em;
opacity: 0.9;
}
.land-tile__tag {
font-family: var(--font-body);
font-weight: 600;
font-size: 10.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: var(--r-pill);
background: rgba(255, 248, 238, 0.18);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: var(--cream);
}
/* Bottom-row: country name + CTA */
.land-tile__bottom {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--s-4);
}
.land-tile__name {
font-family: var(--font-display);
font-weight: 500;
font-style: italic;
font-size: clamp(28px, 3.4vw, 42px);
line-height: 1.0;
letter-spacing: -0.012em;
color: var(--cream);
text-shadow: 0 1px 14px rgba(31, 42, 51, 0.18);
}
.land-tile__cta {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-body);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
padding-bottom: 4px;
white-space: nowrap;
color: var(--cream);
}
.land-tile__cta svg {
width: 16px;
height: 16px;
transition: transform var(--dur-base) var(--ease-bounce);
}
.land-tile:hover .land-tile__cta svg {
transform: translateX(5px);
}
/* Land-specifieke gradients — gekozen op atmosfeer, niet op vlag.
Australië: outback-zonsondergang.
Curaçao: Caribisch ocean → koraal.
Indonesië: jungle → rijstvelden.
Mexico: terracotta-fiësta met goud.
Thailand: tempel-goud met jungle-groen.
Zuid-Afrika: savanne onder een diepe hemel. */
.land-tile--au::before {
background:
radial-gradient(circle at 75% 20%, #FBEFC8 0%, transparent 32%),
linear-gradient(135deg, #B84A2F 0%, #E76F51 45%, #E9B949 100%);
}
.land-tile--cw::before {
background:
radial-gradient(circle at 80% 25%, #FFF8EE 0%, transparent 28%),
linear-gradient(160deg, #1F6F66 0%, #2A9D8F 35%, #5DA9C6 70%, #FBD8C9 100%);
}
.land-tile--id::before {
background:
radial-gradient(circle at 25% 80%, rgba(168,207,160,0.55) 0%, transparent 45%),
linear-gradient(135deg, #1F6F66 0%, #2A9D8F 55%, #6CC2B5 100%);
}
.land-tile--mx::before {
background:
radial-gradient(circle at 80% 30%, #FBEFC8 0%, transparent 30%),
linear-gradient(140deg, #B84A2F 0%, #E76F51 50%, #E9B949 100%);
}
.land-tile--th::before {
background:
radial-gradient(circle at 70% 25%, #FFF1B8 0%, transparent 32%),
linear-gradient(150deg, #9C7716 0%, #E9B949 45%, #2A9D8F 100%);
}
.land-tile--za::before {
background:
radial-gradient(circle at 30% 80%, rgba(233,185,73,0.55) 0%, transparent 50%),
linear-gradient(165deg, #2E6E89 0%, #5DA9C6 40%, #E9B949 100%);
}
/* Focus-state voor toetsenbord-navigatie */
.land-tile:focus-visible {
outline: 3px solid var(--coral);
outline-offset: 4px;
}
/* =========================================================================
ARTICLE TOC — "In dit artikel"
Server-rendered door inc/toc.php, ingevoegd vóór de eerste H2 in de body.
========================================================================= */
.toc {
margin: var(--s-8) 0 var(--s-10);
padding: 0;
border: 1px solid var(--clay);
background:
linear-gradient(180deg, var(--cream) 0%, var(--coral-soft) 220%);
border-radius: var(--r-md);
overflow: hidden;
box-shadow: 0 1px 0 rgba(31, 42, 51, 0.04);
}
.toc-details { margin: 0; }
.toc-summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-4);
padding: 16px 22px;
user-select: none;
outline: none;
}
.toc-summary::-webkit-details-marker { display: none; }
.toc-summary::marker { content: ''; }
.toc-summary:focus-visible { box-shadow: inset 0 0 0 2px var(--coral); }
.toc-summary__main {
display: inline-flex;
align-items: center;
gap: 12px;
}
.toc-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: var(--r-sm);
background: var(--coral-soft);
color: var(--coral-deep);
flex: 0 0 auto;
}
.toc-eyebrow {
font-family: var(--font-body);
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--coral-deep);
}
.toc-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: rgba(231, 111, 81, 0.08);
color: var(--coral-deep);
transition: transform 250ms var(--ease-step), background 200ms;
flex-shrink: 0;
}
.toc-details[open] .toc-toggle { transform: rotate(180deg); }
.toc-summary:hover .toc-toggle { background: rgba(231, 111, 81, 0.18); }
.toc-list {
list-style: none;
margin: 0;
padding: 12px 22px 18px;
counter-reset: rmltoc;
border-top: 1px solid rgba(31, 42, 51, 0.08);
}
.toc-item {
position: relative;
counter-increment: rmltoc;
margin: 0;
padding: 10px 0 10px 38px;
border-bottom: 1px dashed rgba(31, 42, 51, 0.10);
}
.toc-item:last-child { border-bottom: none; padding-bottom: 4px; }
.toc-item:first-child { padding-top: 6px; }
.toc-item-2::before {
content: counter(rmltoc, decimal-leading-zero);
position: absolute;
left: 0;
top: 12px;
font-family: var(--font-display);
font-style: italic;
font-size: 13px;
font-weight: 500;
color: var(--coral);
opacity: 0.85;
}
.toc-item-2:first-child::before { top: 6px; }
.toc-item > a {
color: var(--ink);
font-family: var(--font-body);
font-size: 15.5px;
line-height: 1.45;
font-weight: 500;
text-decoration: none;
transition: color 150ms var(--ease-step);
}
.toc-item > a:hover,
.toc-item > a:focus-visible {
color: var(--coral-deep);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 4px;
}
.toc-text { display: inline; }
.toc-sublist {
list-style: none;
margin: 8px 0 4px;
padding: 0 0 0 14px;
border-left: 2px solid rgba(231, 111, 81, 0.20);
}
.toc-subitem {
margin: 0;
padding: 6px 0;
}
.toc-subitem > a {
color: var(--graphite);
font-size: 14px;
font-family: var(--font-body);
font-weight: 400;
text-decoration: none;
transition: color 150ms var(--ease-step);
line-height: 1.45;
}
.toc-subitem > a:hover,
.toc-subitem > a:focus-visible {
color: var(--coral-deep);
text-decoration: underline;
text-underline-offset: 4px;
}
/* Smooth-scroll naar TOC-anchor + offset zodat sticky header niet over de
heading heen valt. */
html { scroll-behavior: smooth; }
:target {
scroll-margin-top: 96px;
}
/* TOC compacter op mobiel */
@media (max-width: 540px) {
.toc { margin: var(--s-6) 0 var(--s-8); }
.toc-summary { padding: 14px 16px; gap: var(--s-3); }
.toc-list { padding: 10px 16px 16px; }
.toc-item { padding-left: 32px; font-size: 15px; }
.toc-eyebrow { font-size: 11px; letter-spacing: 0.14em; }
}
/* Respecteer prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.toc-toggle { transition: none; }
}
/* =========================================================================
LANDS — met echte foto's (overrides de eerdere gradient-only versie).
========================================================================= */
.land-tile__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -2;
transition: transform 600ms var(--ease-step), filter var(--dur-base) var(--ease-step);
}
.land-tile:hover .land-tile__img {
transform: scale(1.05);
filter: saturate(1.06);
}
/* Het gekleurde ::before-blok was de gradient-bodem; we hebben nu echte
foto's, dus we maken er een lichte kleurtint van die bovenop de foto
ligt voor sfeer (zonder de inhoud onleesbaar te maken). */
.land-tile::before {
background: linear-gradient(180deg, rgba(255, 248, 238, 0.04) 0%, transparent 40%) !important;
z-index: -1 !important;
}
/* ::after = leesbaarheid-overlay onderaan. Iets sterker dan voorheen omdat
de foto's contrastrijk kunnen zijn. */
.land-tile::after {
background:
radial-gradient(60% 50% at 80% 18%, rgba(255, 248, 238, 0.08), transparent 60%),
linear-gradient(180deg, transparent 30%, rgba(15, 23, 30, 0.55) 70%, rgba(15, 23, 30, 0.78) 100%);
}
/* Per-country sfeertint (subtiel, multiply-stijl) bovenop de foto.
We tikken alleen de individuele radial overlays opnieuw aan. */
.land-tile--au::before {
background: linear-gradient(180deg, rgba(184, 74, 47, 0.12) 0%, transparent 50%) !important;
}
.land-tile--cw::before {
background: linear-gradient(180deg, rgba(42, 157, 143, 0.14) 0%, transparent 50%) !important;
}
.land-tile--id::before {
background: linear-gradient(180deg, rgba(31, 111, 102, 0.14) 0%, transparent 50%) !important;
}
.land-tile--mx::before {
background: linear-gradient(180deg, rgba(184, 74, 47, 0.12) 0%, transparent 50%) !important;
}
.land-tile--th::before {
background: linear-gradient(180deg, rgba(156, 119, 22, 0.16) 0%, transparent 50%) !important;
}
.land-tile--za::before {
background: linear-gradient(180deg, rgba(46, 110, 137, 0.14) 0%, transparent 50%) !important;
}
/* =========================================================================
FOOTER — strak-speelse herziening
========================================================================= */
.site-footer {
position: relative;
background: var(--ink);
color: var(--dark-fg);
padding: var(--s-12) 0 var(--s-6);
margin-top: var(--s-16);
overflow: hidden; /* voor de speelse stippellijn */
}
/* Subtiele "reis-route" stippellijn bovenin de footer + zachte sfeer-glow */
.site-footer::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background-image: repeating-linear-gradient(
90deg,
rgba(245, 239, 227, 0.32) 0,
rgba(245, 239, 227, 0.32) 6px,
transparent 6px,
transparent 14px
);
}
.site-footer::after {
content: "";
position: absolute;
top: -180px;
left: 50%;
transform: translateX(-50%);
width: 600px;
height: 360px;
background: radial-gradient(closest-side, rgba(231, 111, 81, 0.18), transparent 70%);
pointer-events: none;
z-index: 0;
}
.site-footer .container-wide { position: relative; z-index: 1; }
/* Nieuwe 4-koloms grid */
.site-footer__grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: var(--s-10);
align-items: start;
margin-bottom: var(--s-10);
}
@media (max-width: 980px) {
.site-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
}
@media (max-width: 540px) {
.site-footer__grid { grid-template-columns: 1fr; gap: var(--s-8); }
}
/* Brand-kolom: papervliegtuig + naam + tag + sign-off */
.site-footer__brandcol {
max-width: 36ch;
}
.site-footer__brand {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--font-display);
font-weight: 500;
font-size: 28px;
color: var(--cream);
letter-spacing: -0.01em;
margin: 0 0 var(--s-3);
line-height: 1;
}
.site-footer__mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
color: var(--coral);
flex: 0 0 auto;
transition: transform var(--dur-base) var(--ease-bounce);
}
.site-footer__mark svg {
width: 100%;
height: 100%;
display: block;
}
.site-footer__brand:hover .site-footer__mark {
transform: rotate(-10deg) translateY(-1px);
}
.site-footer__brand em {
font-style: italic;
color: #F2A07A;
font-weight: 400;
}
.site-footer__tag {
color: var(--dark-fg-mute);
font-size: 14.5px;
line-height: 1.6;
margin: 0 0 var(--s-5);
}
.site-footer__signoff {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
padding: 8px 14px;
border: 1px dashed rgba(245, 239, 227, 0.22);
border-radius: var(--r-pill);
font-family: var(--font-display);
font-style: italic;
font-size: 13px;
color: var(--dark-fg-mute);
background: rgba(255, 248, 238, 0.03);
}
.site-footer__signoff span {
display: inline-flex;
width: 14px;
height: 14px;
align-items: center;
justify-content: center;
font-style: normal;
color: #F2A07A;
}
/* Kolommen met links — h5 krijgt klein coral accent */
.site-footer__col h5 {
position: relative;
display: inline-block;
font-family: var(--font-body);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #F2A07A;
margin: 0 0 var(--s-4);
padding-bottom: 8px;
}
.site-footer__col h5::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 22px;
height: 2px;
background: var(--coral);
border-radius: 2px;
}
.site-footer__col ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.site-footer__col ul a {
color: var(--dark-fg);
font-size: 15px;
transition: color 150ms var(--ease-step), transform 150ms var(--ease-step);
display: inline-block;
}
.site-footer__col ul a:hover {
color: var(--cream);
transform: translateX(2px);
}
.site-footer__more {
font-family: var(--font-display);
font-style: italic;
color: #F2A07A !important;
margin-top: 4px;
}
.site-footer__more:hover {
color: var(--cream) !important;
}
/* Onderbalk: copyright + cookies */
.site-footer__bottom {
border-top: 1px solid rgba(245, 239, 227, 0.12);
padding-top: var(--s-5);
display: flex;
justify-content: space-between;
gap: var(--s-4);
font-size: 13px;
color: var(--dark-fg-mute);
flex-wrap: wrap;
}
@media (max-width: 540px) {
.site-footer__bottom { flex-direction: column; gap: 8px; align-items: flex-start; }
}
/* =========================================================================
HEADER SEARCH — toggle-knop + slide-down zoekpaneel
========================================================================= */
/* Tools-cluster rechts in de header (search + menu-toggle) */
.site-header__tools {
display: inline-flex;
align-items: center;
gap: 6px;
}
/* Zoek-knop in de header — minimal cirkel-icoon */
.search-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px 8px 12px;
background: transparent;
border: 1px solid var(--clay);
border-radius: var(--r-pill);
cursor: pointer;
color: var(--graphite);
font-family: var(--font-body);
font-size: 13.5px;
font-weight: 500;
transition:
background var(--dur-base) var(--ease-step),
color var(--dur-base) var(--ease-step),
border-color var(--dur-base) var(--ease-step);
}
.search-toggle:hover {
background: var(--coral-soft);
border-color: var(--coral);
color: var(--coral-deep);
}
.search-toggle.is-open {
background: var(--ink);
border-color: var(--ink);
color: var(--cream);
}
.search-toggle:focus-visible {
outline: 2px solid var(--coral);
outline-offset: 2px;
}
.search-toggle__icon {
width: 18px;
height: 18px;
flex: 0 0 auto;
transition: transform var(--dur-base) var(--ease-bounce);
}
.search-toggle:hover .search-toggle__icon--open {
transform: rotate(-6deg);
}
.search-toggle__icon--close { display: none; }
.search-toggle.is-open .search-toggle__icon--open { display: none; }
.search-toggle.is-open .search-toggle__icon--close { display: inline-block; }
.search-toggle__label {
letter-spacing: 0.02em;
}
/* Op kleine schermen alleen het icoon tonen */
@media (max-width: 760px) {
.search-toggle { padding: 9px; }
.search-toggle__label { display: none; }
}
/* Slide-down zoekpaneel onder de header */
.site-search {
background:
linear-gradient(180deg, var(--cream) 0%, var(--bone) 100%);
border-bottom: 1px solid var(--clay);
overflow: hidden;
max-height: 0;
opacity: 0;
transition:
max-height 320ms var(--ease-step),
opacity 220ms var(--ease-step);
}
.site-search[hidden] {
display: none !important;
}
.site-search[data-open="true"] {
max-height: 240px;
opacity: 1;
}
.site-search__inner {
padding: var(--s-6) 0 var(--s-5);
}
/* Het zoekformulier zelf: pill-vormig met icoon links, knop rechts */
.site-search__form {
display: flex;
align-items: center;
gap: 0;
background: var(--cream);
border: 1px solid var(--clay);
border-radius: var(--r-pill);
padding: 6px 6px 6px 18px;
box-shadow: 0 4px 14px -8px rgba(31, 42, 51, 0.18);
transition:
border-color var(--dur-base) var(--ease-step),
box-shadow var(--dur-base) var(--ease-step);
}
.site-search__form:focus-within {
border-color: var(--coral);
box-shadow: 0 6px 20px -8px rgba(231, 111, 81, 0.35);
}
.site-search__icon {
width: 20px;
height: 20px;
flex: 0 0 auto;
color: var(--coral);
}
.site-search__input {
flex: 1 1 auto;
min-width: 0;
border: 0;
background: transparent;
padding: 14px 14px;
font-family: var(--font-body);
font-size: 16px;
color: var(--ink);
outline: none;
}
.site-search__input::placeholder {
color: var(--mist);
}
.site-search__submit {
flex: 0 0 auto;
padding: 11px 22px;
font-size: 14px;
}
/* Statische versie (bv. op de zoekresultaten-pagina) iets meer breath */
.site-search__form--inline {
max-width: 560px;
}
/* Hint-rij met snelkoppeling-pills onder de search */
.site-search__hint {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin: var(--s-4) 0 0;
font-size: 13px;
color: var(--graphite);
}
.site-search__hint-label {
font-family: var(--font-body);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--mist);
margin-right: 4px;
}
.site-search__chip {
display: inline-block;
padding: 5px 12px;
border-radius: var(--r-pill);
background: var(--cream);
border: 1px solid var(--clay);
color: var(--graphite);
font-size: 13px;
font-weight: 500;
transition:
background var(--dur-base) var(--ease-step),
color var(--dur-base) var(--ease-step),
border-color var(--dur-base) var(--ease-step),
transform 150ms var(--ease-bounce);
}
.site-search__chip:hover {
background: var(--coral-soft);
border-color: var(--coral);
color: var(--coral-deep);
transform: translateY(-1px);
}
@media (max-width: 540px) {
.site-search[data-open="true"] { max-height: 320px; }
.site-search__inner { padding: var(--s-5) 0 var(--s-4); }
.site-search__form { padding-left: 14px; }
.site-search__submit { padding: 10px 16px; }
.site-search__submit { font-size: 13px; }
.site-search__hint-label { display: none; }
}
/* Zoekresultaten-pagina */
.page-hero--search { padding-bottom: var(--s-6); }
.page-hero__search { max-width: 560px; margin: var(--s-5) 0 0; }
.search-query {
font-style: italic;
color: var(--coral);
font-weight: 400;
}
.search-empty {
max-width: 50ch;
color: var(--graphite);
font-size: var(--fs-md);
line-height: 1.6;
}
.search-empty a {
color: var(--coral);
text-decoration: underline;
text-underline-offset: 3px;
}
.search-empty a:hover { color: var(--coral-deep); }
/* Responsive: nav-positionering houdt rekening met de tools-cluster.
.site-nav stond altijd al rechts; tools komt erna. Op mobiel valt nav
nog steeds als dropdown. */
@media (min-width: 761px) {
.site-header__inner { gap: var(--s-6); }
}
/* Header layout fix: nu we naast .site-nav ook .site-header__tools hebben,
moet de nav rechts beginnen (margin-left: auto), zodat brand → nav → tools
van links naar rechts uitlijnen. */
@media (min-width: 761px) {
.site-header__inner > .site-nav { margin-left: auto; }
}
/* =========================================================================
SORT FILTERS — op archive-pagina's (categorie/tag/auteur/datum/blog).
Drie pills: Nieuwste eerst (default) / Oudste eerst / Meest gelezen.
========================================================================= */
.filterbar-sort {
padding: 0 0 var(--s-6);
}
.filterbar-sort__inner {
display: flex;
justify-content: flex-start;
}
.sort-filters {
display: inline-flex;
align-items: center;
gap: var(--s-3);
padding: 6px 6px 6px var(--s-4);
background: var(--bone);
border: 1px solid var(--clay);
border-radius: var(--r-pill);
flex-wrap: wrap;
}
.sort-filters__label {
font-family: var(--font-body);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--mist);
padding-right: 4px;
}
.sort-filters__group {
display: inline-flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
}
.sort-filter {
display: inline-block;
padding: 8px 16px;
border-radius: var(--r-pill);
font-family: var(--font-body);
font-size: 13.5px;
font-weight: 500;
color: var(--graphite);
background: transparent;
border: 1px solid transparent;
text-decoration: none;
white-space: nowrap;
transition:
background var(--dur-base) var(--ease-step),
color var(--dur-base) var(--ease-step),
border-color var(--dur-base) var(--ease-step),
transform 150ms var(--ease-bounce);
}
.sort-filter:hover {
background: var(--cream);
color: var(--coral-deep);
transform: translateY(-1px);
}
.sort-filter.is-active {
background: var(--ink);
color: var(--cream);
border-color: var(--ink);
}
.sort-filter.is-active:hover {
background: var(--ink);
color: var(--cream);
transform: none;
}
.sort-filter:focus-visible {
outline: 2px solid var(--coral);
outline-offset: 2px;
}
@media (max-width: 540px) {
.sort-filters {
width: 100%;
padding: var(--s-3);
gap: var(--s-2);
}
.sort-filters__group { width: 100%; }
.sort-filter {
flex: 1 1 0;
text-align: center;
padding: 9px 10px;
font-size: 13px;
}
.sort-filters__label { display: none; }
}
/* =========================================================================
FOOTER — 5-koloms grid override (brand + 4 link-kolommen).
Nieuwe kolom "Handige informatie" past hierin.
========================================================================= */
@media (min-width: 981px) {
.site-footer__grid {
grid-template-columns: 1.4fr 0.95fr 0.95fr 1.05fr 0.9fr;
gap: var(--s-8);
}
}
@media (min-width: 1240px) {
.site-footer__grid {
gap: var(--s-10);
}
}
@media (max-width: 980px) {
.site-footer__grid {
grid-template-columns: 1fr 1fr;
gap: var(--s-8);
}
/* Brand-kolom over volle breedte op tablet */
.site-footer__brandcol {
grid-column: 1 / -1;
max-width: 56ch;
}
}
@media (max-width: 540px) {
.site-footer__grid {
grid-template-columns: 1fr;
}
.site-footer__brandcol { grid-column: auto; }
}
/* =========================================================================
FOOTER WAVE + SURFER + INFO-BAND
Geanimeerde golf bovenop de footer, een surfer die er op rijdt, en daar
onder een nieuwe info-sectie met drie tekstkolommen.
========================================================================= */
/* Bestaande dashed routelijn uitschakelen — de golf is de nieuwe edge */
.site-footer::before {
background-image: none !important;
height: 0 !important;
}
/* Maak ruimte bovenin de footer voor de golf */
.site-footer {
padding-top: 130px;
}
/* Wave-wrapper bovenin de footer ----------------------------------------- */
.footer-wave-wrap {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 120px;
pointer-events: none;
z-index: 2;
overflow: hidden;
}
.footer-wave {
position: absolute;
top: 0;
left: -5%;
width: 110%;
height: 100%;
display: block;
}
.footer-wave path {
will-change: transform;
}
.footer-wave__back {
fill: rgba(231, 111, 81, 0.55);
animation: footer-wave-slow 7s ease-in-out infinite;
}
.footer-wave__front {
fill: var(--ink);
animation: footer-wave-fast 5s ease-in-out infinite reverse;
}
@keyframes footer-wave-slow {
0%, 100% { transform: translateX(-3%); }
50% { transform: translateX(3%); }
}
@keyframes footer-wave-fast {
0%, 100% { transform: translateX(-4%); }
50% { transform: translateX(4%); }
}
/* Surfer ----------------------------------------------------------------- */
.footer-surfer {
position: absolute;
left: 22%;
bottom: 18px;
width: 60px;
height: 78px;
z-index: 3;
pointer-events: none;
animation: footer-surfer-bob 5s ease-in-out infinite;
filter: drop-shadow(0 6px 8px rgba(31, 42, 51, 0.25));
}
.footer-surfer svg {
width: 100%;
height: 100%;
display: block;
}
@keyframes footer-surfer-bob {
0% { transform: translateY(2px) rotate(-3deg); }
25% { transform: translateY(-3px) rotate(0deg); }
50% { transform: translateY(-7px) rotate(3deg); }
75% { transform: translateY(-2px) rotate(1deg); }
100% { transform: translateY(2px) rotate(-3deg); }
}
/* Op middelgrote schermen: surfer iets kleiner en meer naar links */
@media (max-width: 980px) {
.footer-wave-wrap { height: 90px; }
.site-footer { padding-top: 100px; }
.footer-surfer { width: 48px; height: 62px; bottom: 14px; left: 16%; }
}
@media (max-width: 540px) {
.footer-wave-wrap { height: 64px; }
.site-footer { padding-top: 76px; }
.footer-surfer { width: 38px; height: 50px; bottom: 8px; left: 12%; }
}
/* Reduced-motion: animaties uitzetten */
@media (prefers-reduced-motion: reduce) {
.footer-wave__back,
.footer-wave__front,
.footer-surfer { animation: none; }
}
/* Info-band met drie tekstkolommen --------------------------------------- */
.site-footer__info {
position: relative;
z-index: 2; /* boven de coral glow ::after */
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-10);
margin-bottom: var(--s-10);
}
.site-footer__info-col h5 {
font-family: var(--font-body);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #F2A07A;
margin: 0 0 var(--s-3);
}
.site-footer__info-col p {
color: var(--dark-fg);
font-size: 14.5px;
line-height: 1.7;
margin: 0;
max-width: 42ch;
}
.site-footer__info-col a {
color: var(--cream);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
text-decoration-color: rgba(231, 111, 81, 0.5);
transition: color 150ms var(--ease-step), text-decoration-color 150ms var(--ease-step);
}
.site-footer__info-col a:hover {
color: #F2A07A;
text-decoration-color: #F2A07A;
}
/* Hairline scheidslijn tussen info-band en de nav-grid */
.site-footer__divider {
height: 1px;
background: rgba(245, 239, 227, 0.12);
margin-bottom: var(--s-8);
}
@media (max-width: 980px) {
.site-footer__info { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
}
@media (max-width: 540px) {
.site-footer__info { grid-template-columns: 1fr; gap: var(--s-6); margin-bottom: var(--s-6); }
}
/* =========================================================================
FOOTER WAVE + SURFER — statische tekening (override op de eerdere
geanimeerde versie). Hogere golf, herkenbaar surfer-silhouet.
========================================================================= */
/* Animaties uit — we willen een rustig, getekend beeld */
.footer-wave__back,
.footer-wave__front,
.footer-wave__foam,
.footer-surfer {
animation: none !important;
transform: none !important;
}
/* Wave-wrap opnieuw afgesteld op de nieuwe viewBox-hoogte (140) */
@media (min-width: 981px) {
.footer-wave-wrap { height: 140px; }
.site-footer { padding-top: 150px; }
}
@media (max-width: 980px) {
.footer-wave-wrap { height: 110px; }
.site-footer { padding-top: 120px; }
}
@media (max-width: 540px) {
.footer-wave-wrap { height: 80px; }
.site-footer { padding-top: 90px; }
}
/* Foam-streep langs de top van de voorste golf */
.footer-wave__foam {
fill: none;
}
/* Surfer: herkenbaar, statisch, op de eerste golftop */
.footer-surfer {
width: 86px;
height: 102px;
bottom: auto;
top: 14px;
left: 18%;
filter: drop-shadow(0 4px 6px rgba(31, 42, 51, 0.28));
}
@media (max-width: 980px) {
.footer-surfer { width: 64px; height: 76px; top: 10px; left: 14%; }
}
@media (max-width: 540px) {
.footer-surfer { width: 48px; height: 58px; top: 6px; left: 10%; }
}
/* =========================================================================
FOOTER WAVE — vier-laags getekende golf (overrides eerdere versies).
Statisch, geen surfer, gebaseerd op een sunset-coral palet.
========================================================================= */
/* Surfer en oude wave-classes verbergen — we gebruiken ze niet meer */
.footer-surfer { display: none !important; }
.footer-wave__back,
.footer-wave__front { display: none; }
/* Wave-wrap hoogte verhogen voor meer visueel volume */
@media (min-width: 981px) {
.footer-wave-wrap { height: 180px; }
.site-footer { padding-top: 180px; }
}
@media (max-width: 980px) {
.footer-wave-wrap { height: 130px; }
.site-footer { padding-top: 140px; }
}
@media (max-width: 540px) {
.footer-wave-wrap { height: 90px; }
.site-footer { padding-top: 100px; }
}
/* SVG fills the wrap, stretches horizontally */
.footer-wave {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
/* Per-laag kleuren — sunset coral palet dat overloopt in de ink-footer */
.footer-wave__layer-1 { fill: #FBD8C9; } /* lichtste, hoogste pieken */
.footer-wave__layer-2 { fill: #E76F51; } /* coral */
.footer-wave__layer-3 { fill: #B84A2F; } /* coral-deep */
.footer-wave__layer-4 { fill: var(--ink); } /* ink, snijdt aan op footer */
/* Foam-streepjes op de toppen van de bovenste golf */
.footer-wave__foam {
fill: none;
/* witte stroke gedefinieerd inline in de SVG */
}
/* Reduced motion is moot want geen animaties meer, maar laat de regel
als safety-net staan in case iemand later toch animaties toevoegt */
@media (prefers-reduced-motion: reduce) {
.footer-wave * { animation: none !important; }
}
/* =========================================================================
FOOTER — wave verwijderd, terug naar de dashed travel-line bovenaan.
Deze regels overschrijven alle eerdere wave/surfer-aanpassingen.
========================================================================= */
/* Eventueel achtergebleven wave-elementen verbergen */
.footer-wave-wrap,
.footer-surfer { display: none !important; }
/* Padding terug naar standaard (geen ruimte meer nodig voor de golf) */
.site-footer {
padding-top: var(--s-12);
}
@media (max-width: 980px) {
.site-footer { padding-top: var(--s-12); }
}
@media (max-width: 540px) {
.site-footer { padding-top: var(--s-10); }
}
/* Dashed travel-line bovenaan herstellen (overschrijft de eerdere
`background-image: none` en `height: 0`) */
.site-footer::before {
background-image: repeating-linear-gradient(
90deg,
rgba(245, 239, 227, 0.32) 0,
rgba(245, 239, 227, 0.32) 6px,
transparent 6px,
transparent 14px
) !important;
height: 1px !important;
}
/* ===== Praktische info banner (homepage) ===== */
.praktisch-info{
position:relative;
padding:84px 0 96px;
background:linear-gradient(180deg,var(--bone) 0%,var(--cream) 100%);
overflow:hidden;
}
.praktisch-info::before,.praktisch-info::after{
content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:0;filter:blur(18px);
}
.praktisch-info::before{width:340px;height:340px;top:-160px;left:-130px;background:var(--coral-soft);opacity:.45;}
.praktisch-info::after{width:300px;height:300px;bottom:-150px;right:-110px;background:var(--ocean-soft);opacity:.55;}
.praktisch-info > .container-wide{position:relative;z-index:1;}
.praktisch-info__head{max-width:720px;margin:0 auto 44px;text-align:center;}
.praktisch-info__head .eyebrow{display:inline-block;margin-bottom:10px;}
.praktisch-info__head h2{margin:0 0 14px;line-height:1.15;}
.praktisch-info__head h2 em{
font-style:italic;color:var(--coral);position:relative;display:inline-block;
text-decoration:underline wavy var(--coral);
text-decoration-thickness:2px;
text-underline-offset:8px;
}
.praktisch-info__intro{color:var(--graphite);font-size:1.05rem;line-height:1.6;margin:14px 0 0;}
.praktisch-info__grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}
@media (max-width:960px){.praktisch-info__grid{grid-template-columns:repeat(2,1fr);gap:18px;}}
@media (max-width:600px){.praktisch-info__grid{grid-template-columns:1fr;}}
.info-tile{
--accent:var(--coral);
--accent-soft:var(--coral-soft);
position:relative;display:flex;flex-direction:column;gap:12px;
padding:30px 28px 26px;min-height:220px;
background:#fff;border-radius:22px;
border:1px solid rgba(31,42,51,.06);
text-decoration:none;color:var(--ink);
overflow:hidden;isolation:isolate;
transition:transform .45s var(--ease-bounce),box-shadow .35s var(--ease-step),background-color .35s ease;
}
.info-tile::before{
content:"";position:absolute;top:-55px;right:-55px;width:150px;height:150px;
border-radius:50%;background:var(--accent-soft);opacity:.55;z-index:-1;
transition:transform .55s var(--ease-bounce),opacity .35s ease;
}
.info-tile:hover,.info-tile:focus-visible{
transform:translateY(-8px) rotate(-.4deg);
box-shadow:0 22px 48px -18px rgba(31,42,51,.25);
}
.info-tile:focus-visible{outline:2px solid var(--accent);outline-offset:4px;}
.info-tile:hover::before,.info-tile:focus-visible::before{
transform:scale(1.55) translate(-12px,12px);opacity:.85;
}
.info-tile__icon{
display:inline-flex;align-items:center;justify-content:center;
width:56px;height:56px;font-size:30px;line-height:1;
background:var(--accent-soft);border-radius:16px;
transition:transform .55s var(--ease-bounce);
}
.info-tile:hover .info-tile__icon,.info-tile:focus-visible .info-tile__icon{
transform:rotate(-10deg) scale(1.12);
}
.info-tile__title{
font-family:var(--font-serif,Georgia,serif);
font-weight:600;font-size:1.3rem;line-height:1.25;margin:4px 0 0;
}
.info-tile__title em{font-style:italic;color:var(--accent);font-weight:400;}
.info-tile__desc{margin:0;color:var(--graphite);font-size:.95rem;line-height:1.55;}
.info-tile__arrow{
margin-top:auto;color:var(--accent);font-size:1.25rem;font-weight:600;
display:inline-block;transition:transform .35s var(--ease-bounce);
}
.info-tile:hover .info-tile__arrow,.info-tile:focus-visible .info-tile__arrow{transform:translateX(8px);}
.info-tile--coral {--accent:var(--coral); --accent-soft:var(--coral-soft);}
.info-tile--ocean {--accent:var(--ocean); --accent-soft:var(--ocean-soft);}
.info-tile--sun {--accent:var(--sun-deep); --accent-soft:var(--sun-soft);}
.info-tile--sky {--accent:var(--sky-deep); --accent-soft:var(--sky-soft);}
.info-tile--terra {--accent:var(--coral-deep);--accent-soft:var(--coral-soft);}
.info-tile--olive {--accent:var(--ocean-deep);--accent-soft:var(--ocean-soft);}
.info-tile--gold {--accent:var(--sun); --accent-soft:var(--sun-soft);}
.info-tile--azure {--accent:var(--sky); --accent-soft:var(--sky-soft);}
.info-tile--graphite{--accent:var(--graphite); --accent-soft:var(--sand);}
@media (prefers-reduced-motion: reduce){
.info-tile,.info-tile::before,.info-tile__icon,.info-tile__arrow{transition:none;}
.info-tile:hover{transform:none;}
}
/* ===== Cookie banner mobile fix =====
The base .stapje-cookie rule uses transform:translateX(-50%) for centering on desktop.
On mobile, the banner switches to left:12px;right:12px (full-width) but the
keyframe animation 'stapjeCookieIn' hardcodes translate(-50%, ...) which keeps
the banner shifted half-its-width off-screen. Override keyframes on mobile. */
@media (max-width: 760px){
@keyframes stapjeCookieIn{
0%{ opacity:0; transform:translateY(16px); }
100%{ opacity:1; transform:translateY(0); }
}
.stapje-cookie{
transform:none !important;
left:12px !important;
right:12px !important;
width:auto !important;
max-width:none !important;
}
.stapje-cookie__inner{
grid-template-columns:minmax(0,1fr) !important;
width:100% !important;
box-sizing:border-box;
}
.stapje-cookie__copy{ min-width:0; }
}
/* =========================================================================
TOEGANKELIJKHEID — zichtbare focus voor alle interactieve elementen.
Specifieke componenten (search-toggle, land-tile, toc) hebben hun eigen
verfijnde focus-stijl; dit is het generieke vangnet voor al de rest.
========================================================================= */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--coral-deep);
outline-offset: 2px;
border-radius: 4px;
}
.card:focus-within {
outline: 2px solid var(--coral-deep);
outline-offset: 3px;
}
/* =========================================================================
VORIGE / VOLGENDE ARTIKEL (single.php)
========================================================================= */
.post-nav {
padding: var(--s-8) 0;
border-top: 1px solid var(--sand);
background: var(--cream);
}
.post-nav__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-4);
}
.post-nav__item {
display: flex;
flex-direction: column;
gap: var(--s-1);
padding: var(--s-4) var(--s-5);
border: 1px solid var(--sand);
border-radius: var(--r-md);
background: #fff;
transition: border-color var(--dur-base) var(--ease-step), transform var(--dur-base) var(--ease-step);
}
.post-nav__item:hover {
border-color: var(--coral);
transform: translateY(-2px);
color: inherit;
}
.post-nav__item--next { text-align: right; grid-column: 2; }
.post-nav__item--prev { grid-column: 1; }
.post-nav__dir {
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--coral-deep);
}
.post-nav__title {
font-family: var(--font-display);
font-size: var(--fs-md);
color: var(--ink);
line-height: 1.3;
}
@media (max-width: 760px) {
.post-nav__grid { grid-template-columns: 1fr; }
.post-nav__item--next { grid-column: auto; text-align: left; }
}
/* =========================================================================
ZOEK & 404 — teller, chips en zoekveld op de reddingspagina's
========================================================================= */
.page-hero__count {
margin: calc(-1 * var(--s-2)) 0 var(--s-4);
color: var(--mist);
font-size: var(--fs-sm);
}
.search-empty__chips,
.notfound__chips {
display: flex;
flex-wrap: wrap;
gap: var(--s-2);
justify-content: center;
margin: var(--s-4) 0;
}
.search-empty__chips { justify-content: flex-start; }
.search-empty__chips .site-search__chip,
.notfound__chips .site-search__chip {
display: inline-block;
padding: 6px 14px;
border: 1px solid var(--sand);
border-radius: var(--r-pill);
background: #fff;
font-size: var(--fs-sm);
color: var(--graphite);
}
.search-empty__chips .site-search__chip:hover,
.notfound__chips .site-search__chip:hover {
border-color: var(--coral);
color: var(--coral-deep);
}
.search-empty__popular { margin-top: var(--s-10); }
.search-empty__popular h2 { font-size: var(--fs-xl); margin-bottom: var(--s-6); }
.notfound__search {
max-width: 560px;
margin: 0 auto var(--s-4);
}
/* =========================================================================
PRINT — paklijsten en artikelen printen zonder site-chrome.
========================================================================= */
@media print {
.site-header,
.site-footer,
.art-side,
.article-feedback,
.listen,
.share,
.post-nav,
.related,
.comments-area-wrap,
.stapje-cookie,
.stapje-cookie-prefs,
.skip-link,
.filterbar,
.pagination {
display: none !important;
}
body { background: #fff; color: #000; }
.art-body { display: block; }
.art-body__main { max-width: 100%; }
.art-hero__inner { padding: 0; }
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; color: #555; }
.toc a[href^="#"]::after, .crumbs a::after { content: none; }
}
/* =========================================================================
REISTOOLS — footer-strip en sidebar-blok (laden sitebreed; de styling
van de tool-pagina's zelf staat in assets/css/tools.css).
========================================================================= */
.site-footer__toolstrip {
margin: var(--s-8) 0 var(--s-2);
padding: var(--s-5) var(--s-6);
background: rgba(255, 255, 255, 0.06);
border-radius: var(--r-md);
}
.site-footer__toolstrip h5 { margin-bottom: var(--s-3); }
.site-footer__toolstrip-links {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 var(--s-3);
}
.site-footer__toolchip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 13px;
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: var(--r-pill);
font-size: 13px;
}
.site-footer__toolchip span { opacity: 0.75; }
.site-footer__toolchip:hover { border-color: var(--coral); color: var(--coral); }
.site-footer__toolstrip-months {
display: flex;
flex-wrap: wrap;
gap: 4px 10px;
margin: 0;
font-size: 12px;
opacity: 0.85;
}
.site-footer__toolstrip-months a[aria-current] { font-weight: 700; text-decoration: underline; }
.side-tools__warm,
.side-tools__links {
list-style: none;
margin: 0 0 var(--s-3);
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.side-tools__warm a {
display: flex;
justify-content: space-between;
gap: 10px;
padding: 8px 12px;
background: var(--bone);
border-radius: var(--r-sm);
font-size: var(--fs-sm);
}
.side-tools__warm a:hover { background: var(--coral-soft); }
.side-tools__temp { font-weight: 700; color: var(--coral-deep); }
.side-tools__more { font-size: 13px; margin: 0 0 var(--s-5); }
.side-tools__links a { display: block; padding: 6px 0; font-size: var(--fs-sm); }
.side-tools__links a:hover { color: var(--coral-deep); }
.side-tools h5 { margin-bottom: var(--s-3); }
/* ---- Mini valuta-omrekenaar in de sidebar ---- */
.side-valuta__row {
display: flex;
gap: 8px;
margin-bottom: var(--s-3);
}
.side-valuta__amount {
display: flex;
align-items: center;
gap: 4px;
flex: 0 0 42%;
padding: 0 10px;
border: 1px solid var(--sand);
border-radius: var(--r-sm);
background: #fff;
color: var(--graphite);
}
.side-valuta__amount input {
width: 100%;
border: 0;
padding: 10px 0;
font: inherit;
color: var(--ink);
background: transparent;
min-width: 0;
}
.side-valuta__amount input:focus { outline: none; }
.side-valuta__amount:focus-within {
outline: 2px solid var(--coral-deep);
outline-offset: 2px;
}
.side-valuta__row select {
flex: 1 1 auto;
min-width: 0;
padding: 10px;
border: 1px solid var(--sand);
border-radius: var(--r-sm);
background: #fff;
font: inherit;
font-size: var(--fs-sm);
color: var(--ink);
}
.side-valuta__out {
margin: 0 0 var(--s-3);
font-size: var(--fs-md);
}
.side-valuta__out strong {
font-family: var(--font-display);
font-size: var(--fs-lg);
color: var(--ink);
}
.side-valuta__more {
margin: 0;
font-size: 13px;
line-height: 1.9;
}
.side-valuta__more a { color: var(--coral-deep); font-weight: 600; }
/* ---- Valuta CTA-vlak in de sidebar ---- */
.side-valuta-cta {
padding: var(--s-5);
background: #fff;
border: 1px solid var(--sand);
border-radius: var(--r-md);
border-top: 4px solid var(--ocean);
}
.side-valuta-cta__icon { font-size: 26px; display: block; margin-bottom: 6px; }
.side-valuta-cta h5 { margin-bottom: var(--s-2); }
.side-valuta-cta p { font-size: var(--fs-sm); color: var(--graphite); line-height: 1.55; margin-bottom: var(--s-4); }
.side-valuta-cta__teaser {
display: block;
margin-top: 8px;
font-weight: 600;
color: var(--ocean-deep);
}
.side-valuta-cta__btn { width: 100%; text-align: center; }