/* ========================================================================== De Ark – theme.css Opmaak van het blok-theme, één op één vertaald uit het design-system (design/ds/tokens + _ds_bundle.js) en het prototype. Volgorde: tokens · basis · knoppen · kaarten · componenten · header · voettekst · pagina-onderdelen · core-blokken · formulier · responsief. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens (design/ds/tokens/*.css) -------------------------------------------------------------------------- */ :root { /* kleuren */ --teal-950: #061313; --teal-900: #0a2020; --teal-800: #153e3e; --teal-700: #1d5152; --teal-600: #2d696a; --teal-500: #3d8b8d; --teal-400: #59b3b7; --teal-300: #86c9cc; --teal-200: #b5dee0; --teal-100: #d9eff0; --teal-50: #eff8f8; --green-800: #204a24; --green-700: #2c6631; --green-600: #397f3f; --green-500: #4e9a55; --green-300: #9dd2a3; --green-100: #d9eddb; --green-50: #eef6ef; --stone-50: #faf9f7; --stone-100: #f3f1ec; --stone-200: #e7e3db; --stone-300: #d4cec3; --stone-400: #b3ab9e; --stone-500: #8c8578; --stone-600: #6e685d; --stone-700: #555047; --stone-900: #2b2823; --white: #ffffff; --black: #000000; --text-strong: var(--teal-900); --text-body: var(--teal-800); --text-muted: var(--stone-700); --text-subtle: var(--stone-500); --text-inverse: var(--white); --text-inverse-muted: var(--teal-200); --text-link: var(--teal-600); --text-link-hover: var(--teal-900); --text-on-accent: var(--teal-900); --surface-page: var(--stone-50); --surface-card: var(--white); --surface-sunken: var(--stone-100); --surface-accent: var(--teal-50); --surface-accent-strong: var(--teal-100); --surface-brand: var(--teal-800); --surface-brand-deep: var(--teal-900); --surface-inverse: var(--teal-900); --surface-highlight: var(--teal-400); --surface-green-soft: var(--green-50); --surface-overlay: rgba(10, 32, 32, .55); --border-subtle: var(--stone-200); --border-default: var(--stone-300); --border-strong: var(--teal-800); --border-accent: var(--teal-400); --border-inverse: rgba(255, 255, 255, .18); --accent: var(--teal-400); --accent-hover: var(--teal-300); --action-primary: var(--teal-800); --action-primary-hover: var(--teal-900); --action-primary-text: var(--white); --action-secondary: var(--white); --action-secondary-hover: var(--teal-50); --focus-ring: var(--teal-500); --selection-bg: var(--teal-100); --success: var(--green-600); --success-soft: var(--green-50); --success-border: var(--green-300); --info: var(--teal-600); --info-soft: var(--teal-50); --info-border: var(--teal-200); --warning: #a9700f; --warning-soft: #fdf4e4; --warning-border: #eccf97; --danger: #9c3a2e; --danger-soft: #fbefec; --danger-border: #e5b5ab; /* typografie */ --font-display: "Literata", Georgia, "Times New Roman", serif; --font-sans: "Figtree", "Segoe UI", Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; --fs-100: .75rem; --fs-200: .8125rem; --fs-300: .875rem; --fs-400: 1rem; --fs-500: 1.125rem; --fs-600: 1.25rem; --fs-700: 1.5rem; --fs-800: 1.875rem; --fs-900: 2.25rem; --fs-1000: 2.875rem; --fs-1100: 3.5rem; --fs-1200: 4.25rem; --lh-tight: 1.08; --lh-snug: 1.22; --lh-normal: 1.45; --lh-relaxed: 1.65; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --ls-tight: -.02em; --ls-snug: -.01em; --ls-normal: 0; --ls-wide: .01em; --ls-caps: .09em; --measure-prose: 64ch; --measure-lead: 46ch; /* ruimte */ --space-1: 2px; --space-2: 4px; --space-3: 8px; --space-4: 12px; --space-5: 16px; --space-6: 20px; --space-7: 24px; --space-8: 32px; --space-9: 40px; --space-10: 48px; --space-11: 64px; --space-12: 80px; --space-13: 96px; --space-14: 128px; --pad-card: var(--space-7); --pad-card-lg: var(--space-9); --gap-grid: var(--space-7); --container-max: 1160px; --container-prose: 720px; --gutter: var(--space-7); --header-height: 76px; /* radii */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; --radius-control: var(--radius-sm); --radius-button: var(--radius-pill); --radius-card: var(--radius-md); --radius-panel: var(--radius-lg); --radius-image: var(--radius-md); --radius-badge: var(--radius-pill); /* elevatie */ --shadow-none: none; --shadow-xs: 0 1px 2px rgba(10, 32, 32, .06); --shadow-sm: 0 1px 3px rgba(10, 32, 32, .07), 0 1px 2px -1px rgba(10, 32, 32, .06); --shadow-md: 0 8px 20px -10px rgba(10, 32, 32, .18); --shadow-lg: 0 22px 48px -22px rgba(10, 32, 32, .30); --shadow-focus: 0 0 0 3px rgba(61, 139, 141, .35); --elevation-card: var(--shadow-none); --elevation-card-hover: var(--shadow-md); --elevation-dialog: var(--shadow-lg); /* beweging */ --dur-fast: 130ms; --dur-base: 200ms; --dur-slow: 320ms; --ease-standard: cubic-bezier(.2, .6, .2, 1); --transition-control: color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); --transition-card: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard); --press-scale: .985; } /* -------------------------------------------------------------------------- 2. Basis (design/ds/tokens/base.css) -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-height) + 16px); } body { margin: 0; background: var(--surface-page); color: var(--text-body); font-family: var(--font-sans); font-size: var(--fs-400); font-weight: var(--fw-regular); line-height: var(--lh-relaxed); -webkit-font-smoothing: antialiased; text-wrap: pretty; overflow-x: clip; } h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--stone-900); text-wrap: balance; font-family: var(--font-display); font-weight: var(--fw-semibold); } h1 { font-size: var(--fs-1000); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); } h2 { font-size: var(--fs-800); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); } h3 { font-size: var(--fs-600); line-height: var(--lh-snug); } h4 { font-family: var(--font-sans); font-size: var(--fs-500); line-height: var(--lh-snug); } p { margin: 0; } a { color: var(--text-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; transition: var(--transition-control); } a:hover { color: var(--text-link-hover); text-decoration-color: var(--accent); text-decoration-thickness: 2px; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-xs); } strong, b { font-weight: var(--fw-semibold); color: var(--stone-900); } small { font-size: var(--fs-300); } hr { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--space-8) 0; } img { max-width: 100%; height: auto; } figure { margin: 0; } ul, ol { margin: 0; padding-left: 1.15em; } li { margin-bottom: .35em; } li:last-child { margin-bottom: 0; } code, kbd { font-family: var(--font-mono); font-size: .9em; } ::selection { background: var(--selection-bg); color: var(--text-strong); } button, input, select, textarea { font: inherit; } iframe { display: block; border: 0; max-width: 100%; } /* Skip-link (WordPress voegt die zelf toe boven
). */ .skip-link.screen-reader-text:focus { position: fixed; top: 8px; left: 8px; z-index: 100000; width: auto; height: auto; padding: 12px 18px; clip: auto; clip-path: none; background: var(--surface-card); color: var(--text-strong); font-weight: var(--fw-semibold); border: 1px solid var(--border-accent); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); text-decoration: none; } .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Typografische hulpklassen */ .ark-eyebrow, .ark-eyebrow a { font-family: var(--font-sans); font-size: var(--fs-200); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--teal-600); } .ark-eyebrow a { text-decoration: none; } .ark-eyebrow a:hover { color: var(--teal-900); text-decoration: underline; } .ark-lead { font-size: var(--fs-500); line-height: var(--lh-relaxed); color: var(--text-muted); max-width: var(--measure-lead); } .ark-prose { max-width: var(--measure-prose); } .ark-link-strong { font-weight: var(--fw-semibold); } .ark-link-strong a { font-weight: var(--fw-semibold); text-decoration: none; } .ark-link-strong a:hover { text-decoration: underline; } .wp-block-buttons > .wp-block-button.ark-hide-narrow, .ark-hide-narrow { display: inline-flex; } .wp-block-buttons > .wp-block-button.ark-show-narrow, .ark-show-narrow { display: none; } /* Iconen: Lucide als CSS-mask, kleur volgt currentColor. */ .ark-icon { display: inline-block; width: 1em; height: 1em; flex: 0 0 auto; vertical-align: -.15em; background: currentColor; -webkit-mask: var(--ark-icon) center / contain no-repeat; mask: var(--ark-icon) center / contain no-repeat; } .ark-icon--arrow-right { --ark-icon: url("../icons/arrow-right.svg"); } .ark-icon--play { --ark-icon: url("../icons/play.svg"); } .ark-icon--headphones { --ark-icon: url("../icons/headphones.svg"); } .ark-icon--video { --ark-icon: url("../icons/video.svg"); } .ark-icon--map-pin { --ark-icon: url("../icons/map-pin.svg"); } .ark-icon--mail { --ark-icon: url("../icons/mail.svg"); } .ark-icon--phone { --ark-icon: url("../icons/phone.svg"); } .ark-icon--clock { --ark-icon: url("../icons/clock.svg"); } .ark-icon--book-open { --ark-icon: url("../icons/book-open.svg"); } .ark-icon--user { --ark-icon: url("../icons/user.svg"); } .ark-icon--users { --ark-icon: url("../icons/users.svg"); } .ark-icon--file-text { --ark-icon: url("../icons/file-text.svg"); } .ark-icon--menu { --ark-icon: url("../icons/menu.svg"); } .ark-icon--x { --ark-icon: url("../icons/x.svg"); } .ark-icon--calendar-days { --ark-icon: url("../icons/calendar-days.svg"); } .ark-icon--chevron-right { --ark-icon: url("../icons/chevron-right.svg"); } .ark-icon--chevron-down { --ark-icon: url("../icons/chevron-down.svg"); } .ark-icon--check { --ark-icon: url("../icons/check.svg"); } .ark-icon--search { --ark-icon: url("../icons/search.svg"); } .ark-icon--hand-heart { --ark-icon: url("../icons/hand-heart.svg"); } .ark-icon--baby { --ark-icon: url("../icons/baby.svg"); } .ark-icon--tag { --ark-icon: url("../icons/tag.svg"); } .ark-icon--external-link { --ark-icon: url("../icons/external-link.svg"); } /* Icoon vóór een tekstregel (agenda-meta, lijstjes). */ .ark-icon-before { display: inline-flex; align-items: center; gap: 5px; } .ark-icon-before::before { content: ""; display: inline-block; width: 14px; height: 14px; flex: 0 0 auto; background: currentColor; -webkit-mask: var(--ark-icon) center / contain no-repeat; mask: var(--ark-icon) center / contain no-repeat; } /* -------------------------------------------------------------------------- 3. Knoppen (Button-component: primary/accent/secondary/ghost/inverse, maten sm/md/lg, iconen links/rechts) -------------------------------------------------------------------------- */ .wp-block-button__link, .ark-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-sans); font-size: var(--fs-400); font-weight: var(--fw-semibold); line-height: 1.2; letter-spacing: var(--ls-wide); text-decoration: none; padding: 11px 22px; border-radius: var(--radius-button); background: var(--action-primary); color: var(--action-primary-text); border: 1px solid var(--action-primary); cursor: pointer; transition: var(--transition-control), transform var(--dur-fast) var(--ease-standard); } .wp-block-button__link:hover, .ark-button:hover { background: var(--action-primary-hover); border-color: var(--action-primary-hover); color: var(--action-primary-text); } .wp-block-button__link:active, .ark-button:active { transform: scale(var(--press-scale)); } .wp-block-button__link:focus-visible, .ark-button:focus-visible { border-radius: var(--radius-button); } .is-style-accent .wp-block-button__link, .ark-button.is-style-accent { background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); } .is-style-accent .wp-block-button__link:hover, .ark-button.is-style-accent:hover { background: var(--teal-300); border-color: var(--teal-300); color: var(--text-on-accent); } .is-style-secondary .wp-block-button__link, .ark-button.is-style-secondary { background: var(--action-secondary); color: var(--text-strong); border-color: var(--border-default); } .is-style-secondary .wp-block-button__link:hover, .ark-button.is-style-secondary:hover { background: var(--action-secondary-hover); border-color: var(--teal-400); color: var(--text-strong); } .is-style-ghost .wp-block-button__link, .ark-button.is-style-ghost { background: transparent; color: var(--text-link); border-color: transparent; } .is-style-ghost .wp-block-button__link:hover, .ark-button.is-style-ghost:hover { background: var(--surface-accent); color: var(--text-link-hover); border-color: transparent; } .is-style-inverse .wp-block-button__link, .ark-button.is-style-inverse { background: var(--white); color: var(--teal-900); border-color: var(--white); } .is-style-inverse .wp-block-button__link:hover, .ark-button.is-style-inverse:hover { background: var(--teal-100); border-color: var(--teal-100); color: var(--teal-900); } /* maten */ .is-size-sm .wp-block-button__link, .ark-button.is-size-sm { font-size: var(--fs-300); padding: 8px 16px; gap: 6px; } .is-size-lg .wp-block-button__link, .ark-button.is-size-lg { font-size: var(--fs-500); padding: 15px 30px; gap: 10px; } /* iconen in knoppen: klasse ark-icon-left / ark-icon-right + ark-icon-- op het knop-blok */ .ark-icon-left .wp-block-button__link::before, .ark-icon-right .wp-block-button__link::after, .ark-button.ark-icon-left::before, .ark-button.ark-icon-right::after { content: ""; display: inline-block; flex: 0 0 auto; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--ark-icon) center / contain no-repeat; mask: var(--ark-icon) center / contain no-repeat; } .is-size-sm.ark-icon-left .wp-block-button__link::before, .is-size-sm.ark-icon-right .wp-block-button__link::after, .ark-button.is-size-sm.ark-icon-left::before, .ark-button.is-size-sm.ark-icon-right::after { width: 16px; height: 16px; } .is-size-lg.ark-icon-left .wp-block-button__link::before, .is-size-lg.ark-icon-right .wp-block-button__link::after { width: 20px; height: 20px; } /* knoppenrij */ .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; } .wp-block-buttons > .wp-block-button { margin: 0; } .ark-knoppen { display: flex; flex-wrap: wrap; gap: 12px; } /* Icoonknop (sluiten, menu) */ .ark-iconbutton { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-pill); border: 1px solid transparent; background: transparent; color: var(--text-muted); cursor: pointer; transition: var(--transition-control); padding: 0; } .ark-iconbutton:hover { background: var(--surface-sunken); color: var(--text-strong); } .ark-iconbutton .ark-icon { width: 20px; height: 20px; } .ark-iconbutton--sm { width: 32px; height: 32px; min-width: 32px; } .ark-iconbutton--sm .ark-icon { width: 16px; height: 16px; } /* Tag (archief per jaar) */ .ark-tag, .ark-tags a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-family: var(--font-sans); font-size: var(--fs-300); font-weight: var(--fw-medium); line-height: 1; padding: 8px 14px; border-radius: var(--radius-pill); background: var(--surface-card); color: var(--text-body); border: 1px solid var(--border-default); transition: var(--transition-control); } .ark-tag:hover, .ark-tags a:hover { background: var(--surface-accent); border-color: var(--teal-400); color: var(--text-body); } /* -------------------------------------------------------------------------- 4. Kaarten (Card-component; tonen default/accent/brand/green) -------------------------------------------------------------------------- */ .ark-card, .is-style-ark-card, .is-style-ark-card-accent, .is-style-ark-card-brand, .is-style-ark-card-green { display: block; width: 100%; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); padding: var(--pad-card); color: var(--text-body); box-shadow: var(--elevation-card); transition: var(--transition-card), border-color var(--dur-fast) var(--ease-standard); } .ark-card--accent, .is-style-ark-card-accent { background: var(--surface-accent); border-color: var(--border-accent); } .is-style-ark-card-brand { background: var(--surface-brand); border-color: var(--surface-brand); color: var(--text-inverse-muted); } .is-style-ark-card-brand :is(h1, h2, h3, h4) { color: var(--white); } .ark-card--green, .is-style-ark-card-green { background: var(--surface-green-soft); border-color: var(--green-300); } .ark-card--md, .ark-card.ark-card--md { padding: 28px; } .ark-card--lg, .ark-card.ark-card--lg { padding: 32px; } .ark-card--flush, .ark-card.ark-card--flush { padding: 0; overflow: hidden; } /* Klikbare kaart: één link (de titel) wordt over de hele kaart uitgerekt. */ .ark-card--link { position: relative; cursor: pointer; } .ark-card--link a { color: inherit; text-decoration: none; } .ark-card--link .ark-card__link::after, .ark-card--link .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .ark-card--link:hover { box-shadow: var(--elevation-card-hover); transform: translateY(-2px); border-color: var(--teal-400); } .ark-card--link:focus-within { border-color: var(--teal-400); } .ark-card--link .wp-block-post-title a:focus-visible, .ark-card--link .ark-card__link:focus-visible { outline: none; } .ark-card--link:has(:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; } /* Ritme binnen kaarten: eerste regel → kop 8px, kop → tekst 10px, tekst → actie 16px. */ .wp-block-group.ark-card > * + * { margin-block-start: 12px; } .wp-block-group.ark-card > .ark-card__kicker + .wp-block-heading, .wp-block-group.ark-card > .wp-block-post-date + .wp-block-post-title { margin-block-start: 8px; } .wp-block-group.ark-card > .wp-block-heading + p, .wp-block-group.ark-card > .wp-block-post-title + .wp-block-post-excerpt { margin-block-start: 10px; } .wp-block-group.ark-card > p + .wp-block-buttons, .wp-block-group.ark-card > p + .ark-link-strong, .wp-block-group.ark-card > .wp-block-post-excerpt + .wp-block-buttons { margin-block-start: 16px; } .wp-block-group.ark-card--lg > .wp-block-heading + p { margin-block-start: 12px; } .wp-block-group.ark-card--lg > p + .wp-block-buttons { margin-block-start: 20px; } .ark-card__kicker { font-size: var(--fs-200); font-weight: var(--fw-semibold); color: var(--teal-600); } .wp-block-group.ark-card > .ark-card__logo { float: right; margin: 0 0 8px 16px; } .wp-block-group.ark-card > .ark-card__logo + * { margin-block-start: 0; } .ark-card__kicker--green { color: var(--green-700); } /* Rasters (auto-fit i.p.v. auto-fill: lege kolommen vallen weg) */ .wp-block-group.ark-grid { display: grid; gap: var(--gap-grid); grid-template-columns: repeat(auto-fit, minmax(min(var(--ark-col, 260px), 100%), 1fr)); align-items: stretch; } .wp-block-group.ark-grid--240 { --ark-col: 240px; } .wp-block-group.ark-grid--280 { --ark-col: 280px; } .wp-block-group.ark-grid--300 { --ark-col: 300px; } .wp-block-group.ark-grid--start { align-items: start; } .wp-block-group.ark-grid--gap-40 { gap: 40px; } .wp-block-group.ark-grid--480 { --ark-col: 480px; } .wp-block-group.ark-section-heading--vervolg { margin-top: 64px; } /* tweede rij binnen dezelfde sectie */ .wp-block-group.ark-grid--gap-48 { gap: 48px; } .wp-block-group.ark-grid--gap-56 { gap: 56px; } .wp-block-group.ark-grid > * { margin: 0; min-width: 0; } .wp-block-group.ark-stack { display: grid; gap: 16px; } .wp-block-group.ark-stack--20 { gap: 20px; } .wp-block-group.ark-stack--24 { gap: 24px; } .wp-block-group.ark-mt-48 { margin-top: 48px; } .wp-block-group.ark-agenda-kolom > * + * { margin-block-start: 0; } .wp-block-group.ark-agenda-kolom > .ark-agenda + .ark-link-strong { margin-top: 20px; } .wp-block-group.ark-stack > * { margin: 0; } /* -------------------------------------------------------------------------- 5. Secties en koppen -------------------------------------------------------------------------- */ .ark-section { padding-block: 72px; } .ark-section--top { padding-block: 72px 0; } .ark-section--56-top { padding-block: 56px 0; } .ark-section--64 { padding-block: 64px; } .ark-section--56-64 { padding-block: 56px 64px; } .ark-section--48-64 { padding-block: 48px 64px; } .ark-section--sunken { background: var(--surface-sunken); } .ark-section--band { padding-block: 40px 0; } .ark-section--0 { padding-block: 0; } .ark-section-heading { display: flex; gap: 24px; align-items: flex-end; justify-content: space-between; margin-bottom: 40px; } .ark-section-heading > * { margin: 0; } .ark-section-heading__text { max-width: var(--measure-lead); } .ark-section-heading__text > * { margin: 0; } .ark-section-heading__text > .ark-eyebrow { margin-bottom: 12px; } .ark-section-heading__text > .ark-lead { margin-top: 16px; max-width: none; } /* Hero (home) */ .ark-hero { background: var(--stone-100); border-bottom: 1px solid var(--border-subtle); } .wp-block-group.ark-hero__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 56px; align-items: center; padding-block: 72px; } .wp-block-group.ark-hero__inner > * { margin: 0; } .ark-hero__kicker { display: flex; align-items: center; gap: 10px; } .ark-hero__kicker::before { content: ""; width: 28px; height: 3px; background: var(--teal-400); border-radius: 2px; flex: 0 0 auto; } .ark-hero__kicker p { font-size: var(--fs-200); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--teal-600); } .wp-block-group.ark-hero__text > * { margin-block: 0; } .wp-block-group.ark-hero__text > h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); margin-top: 16px; } .wp-block-group.ark-hero__text > .ark-lead { max-width: 44ch; margin-top: 20px; } .wp-block-group.ark-hero__text > .wp-block-buttons { margin-top: 36px; } /* Beeldverhoudingen */ .ark-image-4-3 img, .ark-image-16-9 img, .ark-image-21-9 img { width: 100%; height: auto; object-fit: cover; border-radius: var(--radius-image); display: block; } .ark-image-4-3 img { aspect-ratio: 4 / 3; } .ark-image-16-9 img { aspect-ratio: 16 / 9; } .ark-image-21-9 img { aspect-ratio: 21 / 9; } .wp-block-image.ark-image-4-3, .wp-block-image.ark-image-16-9, .wp-block-image.ark-image-21-9 { margin: 0; } .wp-block-image.ark-image-4-3 figcaption, .wp-block-image.ark-image-16-9 figcaption, .wp-block-image.ark-image-21-9 figcaption { margin-top: 8px; font-size: var(--fs-200); color: var(--text-subtle); text-align: left; } .ark-image-placeholder { width: 100%; background: var(--stone-200); border-radius: var(--radius-image); } .ark-image-placeholder.ark-image-4-3 { aspect-ratio: 4 / 3; } .ark-image-placeholder.ark-image-16-9 { aspect-ratio: 16 / 9; } .ark-image-placeholder.ark-image-21-9 { aspect-ratio: 21 / 9; } /* Uitgelicht-kaart (aankondiging op de home) */ .ark-uitgelicht { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 32px; align-items: center; background: var(--surface-card); border: 1px solid var(--border-accent); border-top: 5px solid var(--teal-400); border-radius: var(--radius-card); padding: 36px; } .wp-block-group.ark-uitgelicht > * { margin: 0; } .wp-block-group.ark-uitgelicht__text > * { margin: 0; } .ark-uitgelicht__text .wp-block-post-title, .ark-uitgelicht__text h2 { font-size: var(--fs-800); letter-spacing: var(--ls-tight); margin: 12px 0 10px; } .ark-uitgelicht__text .wp-block-post-title a { color: inherit; text-decoration: none; } .ark-uitgelicht__text .wp-block-post-title a:hover { text-decoration: underline; text-decoration-color: var(--accent); } .ark-uitgelicht__text .wp-block-post-excerpt, .ark-uitgelicht__text > p:not(.ark-eyebrow) { font-size: 1.0625rem; line-height: var(--lh-relaxed); color: var(--stone-700); max-width: 52ch; } .ark-uitgelicht__text .wp-block-post-excerpt__more-text { display: none; } .ark-uitgelicht .wp-block-buttons { justify-content: flex-end; } .ark-uitgelicht .wp-block-read-more { display: inline-flex; } /* Aankondigingsbalk (boven de kop) */ .ark-aankondiging { background: var(--teal-400); color: var(--teal-900); } .ark-aankondiging .wp-block-post-template { list-style: none; margin: 0; padding: 0; } .ark-aankondiging .wp-block-post-template > li { margin: 0; } .ark-aankondiging__bar { max-width: var(--container-max); margin-inline: auto; padding: 12px 0; display: flex; align-items: center; gap: 16px; flex-wrap: nowrap; } .wp-block-group.ark-aankondiging__bar > * { margin: 0; } .ark-aankondiging__label { font-size: .6875rem; font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; background: var(--teal-900); color: var(--white); border-radius: var(--radius-pill); padding: 4px 10px; line-height: 1.3; white-space: nowrap; } .ark-aankondiging .wp-block-post-title { flex: 0 1 auto; min-width: 0; font-family: var(--font-sans); font-size: var(--fs-400); font-weight: var(--fw-semibold); color: var(--teal-900); letter-spacing: 0; line-height: 1.4; } .ark-aankondiging .wp-block-post-title a { color: inherit; text-decoration: none; } .ark-aankondiging .wp-block-post-title a:hover { text-decoration: underline; } .ark-aankondiging .wp-block-post-excerpt { flex: 1 1 0; min-width: 0; font-size: var(--fs-300); color: var(--teal-800); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ark-aankondiging .wp-block-post-excerpt__excerpt { margin: 0; overflow: hidden; text-overflow: ellipsis; } .ark-aankondiging .wp-block-post-excerpt__more-text { display: none; } .ark-aankondiging__actions { margin-left: auto; flex: 0 0 auto; display: flex; align-items: center; gap: 8px; } .wp-block-group.ark-aankondiging__actions > * { margin: 0; } .ark-aankondiging .wp-block-read-more, .ark-aankondiging__actions a { font-size: var(--fs-300); font-weight: var(--fw-semibold); color: var(--teal-900); text-decoration: none; border-bottom: 2px solid var(--teal-900); padding-bottom: 1px; white-space: nowrap; } .ark-aankondiging .wp-block-read-more:hover { color: var(--teal-900); border-bottom-color: var(--white); } .ark-aankondiging__close { color: var(--teal-900); } .ark-aankondiging__close:hover { background: rgba(10, 32, 32, .10); color: var(--teal-900); } .ark-aankondiging.is-dismissed { display: none; } /* -------------------------------------------------------------------------- 6. Sitekop (sticky, wit 94% + blur, 3px aqua-lijn) -------------------------------------------------------------------------- */ .ark-header { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border-subtle); box-shadow: inset 0 -3px 0 var(--teal-400); } .wp-block-group.ark-header__bar { display: flex; align-items: center; gap: 28px; min-height: var(--header-height); } .wp-block-group.ark-header__bar > * { margin: 0; } .ark-header .wp-block-site-logo { flex: 0 0 auto; line-height: 0; } .ark-header .wp-block-site-logo a { display: flex; align-items: center; border-radius: var(--radius-xs); } .ark-header .wp-block-site-logo img { height: 44px; width: auto; max-width: none; display: block; } .ark-header .ark-nav { margin-left: auto; order: 1; } .ark-header__actions { order: 2; display: flex; gap: 10px; align-items: center; flex: 0 0 auto; white-space: nowrap; } .ark-header__actions .wp-block-buttons { flex-wrap: nowrap; } /* Navigatie-links (desktop) */ .ark-nav .wp-block-navigation__container { gap: 22px; row-gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .ark-nav .wp-block-navigation-item__content { font-size: var(--fs-300); font-weight: var(--fw-medium); color: var(--stone-700); text-decoration: none; white-space: nowrap; padding: 4px 0; border-bottom: 2px solid transparent; transition: var(--transition-control); } .ark-nav .wp-block-navigation-item__content:hover { color: var(--teal-900); } .ark-nav .current-menu-item > .wp-block-navigation-item__content, .ark-nav .current-menu-ancestor > .wp-block-navigation-item__content { font-weight: var(--fw-semibold); color: var(--teal-900); border-bottom-color: var(--teal-400); } .ark-nav .ark-nav-extra { display: none; } /* Hamburger en sluitknop: 40px ghost-icoonknoppen met Lucide-iconen */ .ark-nav .wp-block-navigation__responsive-container-open, .ark-nav .wp-block-navigation__responsive-container-close { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: var(--radius-pill); border: 1px solid transparent; background: transparent; color: var(--text-muted); cursor: pointer; transition: var(--transition-control); } .ark-nav .wp-block-navigation__responsive-container-open:hover, .ark-nav .wp-block-navigation__responsive-container-close:hover { background: var(--surface-sunken); color: var(--text-strong); } .ark-nav .wp-block-navigation__responsive-container-open svg, .ark-nav .wp-block-navigation__responsive-container-close svg { display: none; } .ark-nav .wp-block-navigation__responsive-container-open::before, .ark-nav .wp-block-navigation__responsive-container-close::before { content: ""; width: 22px; height: 22px; background: currentColor; -webkit-mask: url("../icons/menu.svg") center / contain no-repeat; mask: url("../icons/menu.svg") center / contain no-repeat; } .ark-nav .wp-block-navigation__responsive-container-close::before { -webkit-mask-image: url("../icons/x.svg"); mask-image: url("../icons/x.svg"); } /* Menu (mobiel): paneel in de huisstijl dat onder de kop uitklapt; de sluitknop staat op de plek van de hamburger (menu-icoon wordt een kruis). */ .ark-header .ark-nav.wp-block-navigation { position: static; } /* het paneel rekent vanaf de kop, niet vanaf het navigatieblok */ .ark-nav .wp-block-navigation__responsive-container.is-menu-open { position: absolute; inset: auto 0 auto 0; top: 100%; z-index: 50; overflow: visible; background: var(--surface-card); color: var(--text-body); border-top: 1px solid var(--border-subtle); box-shadow: var(--shadow-md); padding: 0; animation: ark-rise var(--dur-slow) var(--ease-standard); } .ark-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close, .ark-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog { position: static; width: 100%; max-width: none; padding: 0; } .ark-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { position: absolute; top: calc(-1 * var(--header-height) / 2 - 20px); right: 24px; z-index: 51; } .ark-header:has(.is-menu-open) .wp-block-navigation__responsive-container-open { visibility: hidden; } .ark-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { display: block; padding: 8px 16px 20px; max-height: calc(100vh - var(--header-height) - 1px); overflow-y: auto; } .ark-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { display: grid; grid-template-columns: 1fr; gap: 2px; justify-content: stretch; justify-items: stretch; align-items: stretch; } .ark-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { display: block; width: 100%; border-bottom: 1px solid var(--border-subtle); } .ark-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { display: block; padding: 12px 4px; font-size: var(--fs-400); font-weight: var(--fw-medium); color: var(--text-muted); border-bottom: 0; white-space: normal; } .ark-nav .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content, .ark-nav .wp-block-navigation__responsive-container.is-menu-open .current-menu-ancestor > .wp-block-navigation-item__content { font-weight: var(--fw-semibold); color: var(--teal-900); } /* Extra items (Berichten, ANBI) staan in de overlay gewoon in het rijtje, in dezelfde stijl. */ .ark-nav .wp-block-navigation__responsive-container.is-menu-open .ark-nav-extra { display: block; } .ark-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child { border-bottom: 0; } /* -------------------------------------------------------------------------- 7. Voettekst -------------------------------------------------------------------------- */ .ark-footer { background: var(--surface-sunken); color: var(--stone-700); border-top: 1px solid var(--border-subtle); padding-block: 72px 28px; font-size: var(--fs-300); } .wp-block-group.ark-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 40px; } .wp-block-group.ark-footer__grid > * { margin: 0; } .ark-footer .wp-block-site-logo img, .ark-footer__logo img { height: 40px; width: auto; display: block; } .ark-footer__adres { margin-top: 20px; font-size: var(--fs-300); line-height: var(--lh-relaxed); max-width: 34ch; } .wp-block-group.ark-footer__col > * { margin: 0; } .ark-footer__col ul { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; font-size: var(--fs-300); } .ark-footer__col li { margin: 0; } .ark-footer__col a { color: var(--teal-600); text-decoration: none; } .ark-footer__col a:hover { color: var(--teal-900); text-decoration: underline; } .ark-footer__bottom { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--border-subtle); font-size: var(--fs-200); color: var(--text-subtle); } /* -------------------------------------------------------------------------- 8. Pagina-onderdelen -------------------------------------------------------------------------- */ /* Pagina-kop (stone-100 band) */ .ark-page-head { background: var(--surface-sunken); border-bottom: 1px solid var(--border-subtle); padding-block: 64px; } .ark-page-head > .ark-inner > * { margin: 0; } .ark-page-head > .ark-inner > h1, .ark-page-head > .ark-inner > .wp-block-query-title { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; letter-spacing: var(--ls-tight); margin-top: 14px; } .ark-page-head > .ark-inner > .ark-lead { max-width: var(--measure-prose); margin-top: 18px; } .ark-page-head > .ark-inner > .wp-block-buttons { margin-top: 28px; } .ark-page-head > .ark-inner > .wp-block-search { margin-top: 24px; } .ark-page-head--dark { background: var(--teal-950); color: var(--stone-300); border-bottom: 0; padding-block: 56px; } .ark-page-head--dark .ark-eyebrow { color: var(--teal-400); } .ark-page-head--dark .ark-eyebrow a { color: var(--stone-400); } .ark-page-head--dark .ark-eyebrow a:hover { color: var(--white); } .ark-page-head--dark > .ark-inner > h1 { color: var(--white); font-size: clamp(2rem, 4vw, 2.75rem); } .ark-page-head--dark > .ark-inner > .ark-lead { color: var(--stone-300); font-size: 1.0625rem; max-width: 60ch; margin-top: 16px; } .ark-inner > .wp-block-search + .wp-block-buttons { margin-top: 24px; } /* Tekstkolom naast zijkolom */ .wp-block-group.ark-prose > * { margin-block: 0; } .wp-block-group.ark-prose > h2 { font-size: 1.75rem; margin-bottom: 14px; } .wp-block-group.ark-prose > h2.has-xl-font-size { font-size: var(--fs-700); margin-bottom: 12px; } .wp-block-group.ark-prose--tight > h2 { margin-bottom: 10px; } .wp-block-group.ark-prose--tight > * + h2 { margin-top: 24px; } .wp-block-group.ark-prose > h2.has-lg-font-size { font-size: var(--fs-600); margin-bottom: 12px; } .wp-block-group.ark-prose > * + h2 { margin-top: 28px; } .wp-block-group.ark-prose > p + p { margin-top: 14px; } .wp-block-group.ark-prose > p { color: var(--stone-900); } .wp-block-group.ark-prose > p + .wp-block-buttons, .wp-block-group.ark-prose > p + .wp-block-button { margin-top: 28px; } .wp-block-group.ark-prose > ul, .wp-block-group.ark-prose > ol { margin-top: 12px; margin-bottom: 14px; } .wp-block-group.ark-prose > .ark-dl { margin-bottom: 28px; } .wp-block-group.ark-prose > .ark-dl + h2 { margin-top: 0; } .wp-block-group.ark-prose > h2 + .ark-dl { margin-top: 0; } .wp-block-group.ark-prose > .ark-dl--anbi { font-size: var(--fs-400); } /* Tussenkopjes (h3) en uitklapblokken in lange teksten */ .wp-block-group.ark-prose > h3 { font-size: var(--fs-500); margin-bottom: 8px; } .wp-block-group.ark-prose > * + h3 { margin-top: 20px; } .wp-block-group.ark-prose > * + .wp-block-details { margin-top: 14px; } .wp-block-group.ark-prose > .wp-block-details + p { margin-top: 14px; } /* Uitklapblok (core/details) */ .wp-block-details { border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 12px 16px; background: var(--surface-card); } .wp-block-details summary { cursor: pointer; font-weight: var(--fw-semibold); color: var(--teal-800); } .wp-block-details summary:hover { color: var(--teal-900); } .wp-block-details > *:not(summary) { margin-top: 10px; } /* Definitielijsten als lijstblok:
  • Term
    Uitleg
    • */ .ark-dl { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; font-size: var(--fs-300); line-height: 1.6; color: var(--stone-700); } .ark-dl li { margin: 0; } .ark-dl strong { display: block; font-weight: var(--fw-semibold); color: var(--stone-900); margin-bottom: 2px; } .ark-dl br { display: none; } /* Cijfers: term klein in stone-700, waarde groot in Literata:
  • Leden
    ongeveer 150
    • */ .ark-dl--cijfers { gap: 14px; } .ark-dl--cijfers strong { display: block; font-family: var(--font-display); font-size: 1.375rem; font-weight: var(--fw-regular); color: var(--stone-900); margin: 0; line-height: 1.3; } .wp-block-group.ark-card > .ark-eyebrow + .ark-dl { margin-top: 18px; } .wp-block-group.ark-card > .ark-eyebrow + .ark-dl--cijfers { margin-top: 16px; } /* Kaart met eyebrow: Speciale momenten, Documenten */ .wp-block-group.ark-card > .ark-eyebrow + ul { margin-top: 16px; } .wp-block-group.ark-card > .ark-eyebrow + .ark-documenten { margin-top: 18px; } .wp-block-group /* Lijst van links in een kaart (Speciale momenten) */ .ark-linklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; font-size: var(--fs-300); } .ark-linklist li { margin: 0; } .ark-linklist a { text-decoration: none; } .ark-linklist a:hover { text-decoration: underline; } /* Dienstkaarten (ServiceCard) */ .ark-diensten .ark-section-heading { margin-bottom: 40px; } .ark-service-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 24px; } .ark-service-card { margin: 0; display: block; border-radius: var(--radius-card); padding: var(--pad-card); background: var(--surface-card); border: 1px solid var(--border-subtle); } .ark-service-card--brand { background: var(--surface-brand); border-color: var(--surface-brand); color: var(--text-inverse-muted); } .ark-service-card__meta { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; } .ark-service-card__date { font-size: var(--fs-200); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--teal-600); } .ark-service-card--brand .ark-service-card__date { color: var(--accent); } .ark-service-card__time { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-200); font-weight: var(--fw-medium); color: var(--text-muted); } .ark-service-card__time .ark-icon { width: 13px; height: 13px; } .ark-service-card--brand .ark-service-card__time { color: var(--teal-200); } .ark-service-card__title { font-size: var(--fs-600); color: var(--text-strong); } .ark-service-card--brand .ark-service-card__title { color: var(--white); } .ark-service-card__details { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; } .ark-service-card__detail { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-300); color: var(--text-muted); } .ark-service-card__detail .ark-icon { width: 15px; height: 15px; } .ark-service-card--brand .ark-service-card__detail { color: var(--teal-200); } .ark-service-card--vervalt .ark-service-card__title { text-decoration: line-through; text-decoration-thickness: 1px; } .ark-diensten__leeg { padding: 32px; max-width: var(--measure-prose); } .ark-diensten__leeg-tekst { font-size: 1.0625rem; line-height: var(--lh-relaxed); color: var(--stone-900); } .ark-diensten__leeg .ark-knoppen { margin-top: 20px; } .ark-diensten + .ark-link-strong { margin-top: 24px; } /* Agenda (EventListItem) */ .wp-block-group.ark-agenda { padding: 0; overflow: hidden; } .wp-block-group.ark-agenda > * { margin: 0; } .wp-block-group.ark-event { display: flex; align-items: center; gap: 20px; padding: 16px 20px; width: 100%; border-bottom: 1px solid var(--border-subtle); border-radius: 0; transition: background-color var(--dur-fast) var(--ease-standard); } .wp-block-group.ark-event > * { margin: 0; } .wp-block-group.ark-agenda > .ark-event:last-child { border-bottom: 0; } .wp-block-group.ark-event__chip { flex: 0 0 auto; width: 58px; height: 58px; border-radius: var(--radius-sm); background: var(--surface-accent-strong); color: var(--teal-800); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; } .wp-block-group.ark-event__chip > * { margin: 0; } .ark-event__day { font-family: var(--font-display); font-size: var(--fs-600); font-weight: var(--fw-semibold); line-height: 1; } .ark-event__month { font-family: var(--font-sans); font-size: var(--fs-100); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; margin-top: 3px; line-height: 1; } .wp-block-group.ark-event__body { flex: 1; min-width: 0; } .wp-block-group.ark-event__body > * { margin: 0; } .ark-event__title { font-size: var(--fs-500); font-weight: var(--fw-semibold); color: var(--text-strong); line-height: 1.3; } .ark-event__title a { color: inherit; text-decoration: none; } .ark-event__title a:hover { text-decoration: underline; text-decoration-color: var(--accent); } .wp-block-group.ark-event__meta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 5px; font-size: var(--fs-300); color: var(--text-muted); } .wp-block-group.ark-event__meta > * { margin: 0; } .ark-event--link { position: relative; } .ark-event--link .ark-event__title a::after { content: ""; position: absolute; inset: 0; } .ark-event--link::after { content: ""; width: 20px; height: 20px; flex: 0 0 auto; background: var(--stone-400); -webkit-mask: url("../icons/chevron-right.svg") center / contain no-repeat; mask: url("../icons/chevron-right.svg") center / contain no-repeat; transition: background-color var(--dur-fast) var(--ease-standard); } .ark-event--link:hover { background: var(--surface-accent); } .ark-event--link:hover::after { background: var(--teal-600); } .ark-agenda + .ark-link-strong { margin-top: 20px; } /* Bijbeltekst (VerseBlock) als citaatblok-stijl */ .wp-block-quote.is-style-ark-verse-accent, .wp-block-quote.is-style-ark-verse-brand, .wp-block-quote.is-style-ark-verse-plain { margin: 0; border: 0; padding: var(--pad-card-lg); border-radius: var(--radius-card); background: var(--surface-accent); } .wp-block-quote.is-style-ark-verse-brand { background: var(--surface-brand); } .wp-block-quote.is-style-ark-verse-plain { background: transparent; border-radius: 0; border-left: 2px solid var(--accent); padding: 0 0 0 20px; } .wp-block-quote[class*="is-style-ark-verse"] p { margin: 0; font-family: var(--font-display); font-size: var(--fs-600); font-style: italic; font-weight: var(--fw-regular); line-height: var(--lh-snug); color: var(--text-strong); max-width: 42ch; } .wp-block-quote.is-style-ark-verse-brand p { color: var(--white); } .wp-block-quote[class*="is-style-ark-verse"] cite { display: block; margin-top: 16px; font-family: var(--font-sans); font-size: var(--fs-200); font-weight: var(--fw-semibold); font-style: normal; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--teal-600); } .wp-block-quote.is-style-ark-verse-brand cite { color: var(--accent); } /* Query Loop-lijsten zonder lijstopmaak */ .wp-block-post-template { list-style: none; margin: 0; padding: 0; } .wp-block-post-template > li { margin: 0; } .wp-block-post-template.ark-query-uitgelicht > li > .ark-uitgelicht { margin: 0; } /* Berichtenkaarten (Query Loop) */ .ark-berichten .wp-block-post-template, .ark-berichten-lijst .wp-block-post-template { list-style: none; margin: 0; padding: 0; } .ark-berichten > .wp-block-query, .ark-berichten .wp-block-post-template { display: contents; } .ark-berichten .wp-block-post-template > li, .ark-berichten-lijst .wp-block-post-template > li { margin: 0; min-width: 0; } .ark-berichten .wp-block-post-template > li > .ark-card, .ark-berichten-lijst .wp-block-post-template > li > .ark-card { height: 100%; } .ark-berichten .wp-block-post-date, .ark-berichten-lijst .wp-block-post-date { font-size: var(--fs-200); color: var(--text-subtle); } .ark-berichten .wp-block-post-title { font-size: var(--fs-600); margin-top: 8px; } .ark-berichten .wp-block-post-excerpt, .ark-berichten-lijst .wp-block-post-excerpt { font-size: var(--fs-300); line-height: var(--lh-relaxed); color: var(--stone-700); margin-top: 10px; } .wp-block-post-excerpt__excerpt { margin: 0; } .ark-berichten .wp-block-post-excerpt__more-text, .ark-berichten-lijst .wp-block-post-excerpt__more-text { display: none; } .ark-berichten__alle { display: flex; flex-direction: column; justify-content: center; } .ark-berichten__alle .ark-card__link { font-family: var(--font-display); font-size: var(--fs-600); color: var(--stone-900); } .ark-berichten__alle p { font-size: var(--fs-300); color: var(--stone-700); margin-top: 8px; } .wp-block-group.ark-berichten__alle > * { margin: 0; } .wp-block-group.ark-berichten__alle > p + p { margin-top: 8px; } /* Berichtenoverzicht (pagina Berichten, archief, zoeken) */ .ark-berichten-lijst .wp-block-post-template { display: grid; gap: 16px; } .ark-berichten-lijst .wp-block-post-title { font-size: 1.375rem; margin-top: 8px; } .ark-berichten-lijst .wp-block-post-excerpt { max-width: 60ch; margin-top: 8px; } .ark-berichten-lijst .wp-block-post-terms { display: inline; font-size: var(--fs-200); color: var(--text-subtle); } .ark-berichten-lijst .wp-block-post-terms a { color: inherit; text-decoration: none; } .ark-berichten-lijst .ark-bericht-meta { display: flex; gap: 6px; font-size: var(--fs-200); color: var(--text-subtle); flex-wrap: wrap; } .wp-block-group.ark-bericht-meta > * { margin: 0; } .ark-berichten-lijst .ark-bericht-meta .wp-block-post-terms:not(:empty)::before { content: "·"; margin-right: 6px; } .ark-berichten-lijst .wp-block-post-terms .wp-block-post-terms__separator { display: none; } .ark-berichten-lijst .wp-block-post-terms a + a::before { content: ", "; } .ark-berichten-lijst .wp-block-query-no-results p { color: var(--stone-700); } .ark-berichten-lijst .wp-block-query-pagination { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 24px; } .ark-berichten-lijst .wp-block-query-pagination > * { margin: 0; } .ark-berichten-lijst .wp-block-query-pagination a, .ark-berichten-lijst .wp-block-query-pagination .current, .ark-berichten-lijst .wp-block-query-pagination .dots { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid var(--border-default); background: var(--surface-card); color: var(--text-body); font-size: var(--fs-300); font-weight: var(--fw-medium); text-decoration: none; transition: var(--transition-control); } .ark-berichten-lijst .wp-block-query-pagination a:hover { background: var(--surface-accent); border-color: var(--teal-400); } .ark-berichten-lijst .wp-block-query-pagination .current { background: var(--surface-brand); border-color: var(--surface-brand); color: var(--white); } .ark-berichten-lijst .wp-block-query-pagination .dots { border-color: transparent; background: transparent; } .ark-berichten-lijst .wp-block-query-pagination-numbers { display: inline-flex; gap: 8px; } /* Archief per jaar (core/archives als tags) */ .ark-archief { display: flex; gap: 12px; align-items: center; margin-top: 16px; flex-wrap: wrap; } .wp-block-group.ark-archief > * { margin: 0; } .ark-archief__label { font-size: var(--fs-300); color: var(--stone-700); } .ark-tags.wp-block-archives-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; } .ark-tags li { margin: 0; } /* Enkel bericht */ .ark-single { max-width: 800px; margin-inline: auto; padding-block: 56px 64px; } .wp-block-group.ark-single > * { margin-block: 0; } .ark-single__eyebrow { display: flex; flex-wrap: wrap; gap: 6px; } .wp-block-group.ark-single__eyebrow > * { margin: 0; } .ark-single__eyebrow .wp-block-post-date { font-family: var(--font-sans); font-size: var(--fs-200); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--teal-600); } .ark-single__eyebrow .ark-eyebrow::after { content: "·"; margin-left: 6px; } .ark-single .wp-block-post-title { font-size: clamp(1.875rem, 4vw, 2.5rem); line-height: 1.15; letter-spacing: var(--ls-tight); margin: 14px 0 10px; } .wp-block-group.ark-single > .ark-single__meta { display: flex; gap: 6px; font-size: var(--fs-300); color: var(--text-subtle); margin-bottom: 28px; flex-wrap: wrap; } .wp-block-group.ark-single__meta > * { margin: 0; } .ark-single__meta .wp-block-post-author-name::before { content: "·"; margin-right: 6px; } .ark-single .wp-block-post-featured-image { margin: 0 0 28px; } .ark-single .wp-block-post-featured-image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-image); display: block; } /* Kleine of vierkante afbeeldingen (bijv. een logo) niet uitrekken: passend tonen op een rustige achtergrond. */ .ark-single .wp-block-post-featured-image img.ark-featured--contain { object-fit: contain; background: var(--surface-sunken); padding: var(--space-8); } .ark-single .wp-block-post-content { font-size: 1.0625rem; line-height: 1.7; color: var(--stone-900); } .ark-single .wp-block-post-content > * { margin-block: 0 16px; } .ark-single .wp-block-post-content > :last-child { margin-bottom: 0; } .ark-single .wp-block-post-content > h2 { font-size: 1.375rem; margin: 24px 0 10px; } .ark-single .wp-block-post-content > h3 { font-size: var(--fs-500); margin: 20px 0 8px; } .ark-single .wp-block-post-content > ul, .ark-single .wp-block-post-content > ol { padding-left: 1.2em; } .ark-single .wp-block-post-content .wp-block-image { margin: 24px 0; } .ark-single .wp-block-post-content .wp-block-image img { border-radius: var(--radius-image); } .wp-block-group.ark-single > .ark-single__footer { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 24px; margin-top: 32px; border-top: 1px solid var(--border-subtle); } .wp-block-group.ark-single__footer > * { margin: 0; } .ark-single__footer .wp-block-post-navigation-link { font-size: var(--fs-300); } /* Pagina in smalle kolom (privacy) */ .wp-block-group.ark-narrow { max-width: 800px; margin-inline: auto; padding-block: 64px; } .wp-block-group.ark-narrow > * { margin-block: 0; } .wp-block-group.ark-narrow > h1 { font-size: clamp(1.875rem, 4vw, 2.5rem); line-height: 1.15; letter-spacing: var(--ls-tight); margin: 14px 0 10px; } .wp-block-group.ark-narrow > p.ark-lead { font-size: 1.0625rem; line-height: 1.7; max-width: none; margin-bottom: 32px; color: var(--stone-700); } .wp-block-group.ark-narrow > h2 { font-size: 1.375rem; margin-bottom: 10px; } .wp-block-group.ark-narrow > p { font-size: 1.0625rem; line-height: 1.7; color: var(--stone-900); margin-bottom: 24px; } .wp-block-group.ark-narrow > p:last-child { margin-bottom: 0; } .wp-block-group.ark-narrow > p.has-compact-font-size { font-size: var(--fs-300); color: var(--text-subtle); } .wp-block-group.ark-narrow > p + h2 { margin-top: 0; } .wp-block-group.ark-narrow > ul, .wp-block-group.ark-narrow > ol { margin-bottom: 24px; font-size: 1.0625rem; line-height: 1.7; } /* Live-speler (donker paneel 16:9) */ .ark-player { position: relative; background: var(--teal-950); border-radius: var(--radius-image); aspect-ratio: 16 / 9; overflow: hidden; } .ark-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; } .ark-player-note { font-size: var(--fs-300); color: var(--text-subtle); margin-top: 14px; } /* Terugkijk-rijen */ .wp-block-group.ark-terugkijk { max-width: 900px; display: grid; gap: 16px; } .wp-block-group.ark-terugkijk > * { margin: 0; } .wp-block-group.ark-terugkijk-rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px; align-items: center; } .wp-block-group.ark-terugkijk-rij > * { margin: 0; } .wp-block-group.ark-terugkijk-rij__tekst > * { margin: 0; } .ark-terugkijk-rij__datum { font-size: var(--fs-200); color: var(--text-subtle); } .ark-terugkijk-rij__titel { font-family: var(--font-display); font-size: 1.1875rem; color: var(--stone-900); margin-top: 4px; } .ark-terugkijk-rij .wp-block-buttons { justify-content: flex-end; gap: 10px; } .ark-playlist { border-radius: var(--radius-image); overflow: hidden; background: var(--teal-950); } .ark-playlist iframe { width: 100%; height: 560px; display: block; } /* speler + afspeellijst (Kerkdienstgemist) */ .ark-playlist--audio iframe { height: 400px; } /* Contact */ .ark-contactrollen { display: grid; gap: 14px; } .wp-block-group.ark-contactrollen > * { margin: 0; } .ark-contactrol__titel { font-family: var(--font-display); font-size: var(--fs-500); color: var(--stone-900); line-height: var(--lh-snug); } .wp-block-group.ark-card > .ark-contactrol__titel + p { margin-top: 6px; font-size: var(--fs-300); line-height: 1.6; color: var(--stone-700); } .wp-block-group.ark-card > p + .ark-contactrol__links { margin-top: 10px; } .ark-contactrol__links a { font-weight: var(--fw-semibold); text-decoration: none; } .ark-contactrol__links a:hover { text-decoration: underline; } /* Telefoonnummer staat omgekeerd in data-tel en wordt door theme.js ingevuld; zonder script toont