img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px}
/*# sourceURL=wp-img-auto-sizes-contain-inline-css */
:root{--wp-block-synced-color:#7a00df;--wp-block-synced-color--rgb:122,0,223;--wp-bound-block-color:var(--wp-block-synced-color);--wp-editor-canvas-background:#ddd;--wp-admin-theme-color:#007cba;--wp-admin-theme-color--rgb:0,124,186;--wp-admin-theme-color-darker-10:#006ba1;--wp-admin-theme-color-darker-10--rgb:0,107,160.5;--wp-admin-theme-color-darker-20:#005a87;--wp-admin-theme-color-darker-20--rgb:0,90,135;--wp-admin-border-width-focus:2px}@media (min-resolution:192dpi){:root{--wp-admin-border-width-focus:1.5px}}.wp-element-button{cursor:pointer}:root .has-very-light-gray-background-color{background-color:#eee}:root .has-very-dark-gray-background-color{background-color:#313131}:root .has-very-light-gray-color{color:#eee}:root .has-very-dark-gray-color{color:#313131}:root .has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background{background:linear-gradient(135deg,#00d084,#0693e3)}:root .has-purple-crush-gradient-background{background:linear-gradient(135deg,#34e2e4,#4721fb 50%,#ab1dfe)}:root .has-hazy-dawn-gradient-background{background:linear-gradient(135deg,#faaca8,#dad0ec)}:root .has-subdued-olive-gradient-background{background:linear-gradient(135deg,#fafae1,#67a671)}:root .has-atomic-cream-gradient-background{background:linear-gradient(135deg,#fdd79a,#004a59)}:root .has-nightshade-gradient-background{background:linear-gradient(135deg,#330968,#31cdcf)}:root .has-midnight-gradient-background{background:linear-gradient(135deg,#020381,#2874fc)}:root{--wp--preset--font-size--normal:16px;--wp--preset--font-size--huge:42px}.has-regular-font-size{font-size:1em}.has-larger-font-size{font-size:2.625em}.has-normal-font-size{font-size:var(--wp--preset--font-size--normal)}.has-huge-font-size{font-size:var(--wp--preset--font-size--huge)}:root .has-text-align-center{text-align:center}:root .has-text-align-left{text-align:left}:root .has-text-align-right{text-align:right}.has-fit-text{white-space:nowrap!important}#end-resizable-editor-section{display:none}.aligncenter{clear:both}.items-justified-left{justify-content:flex-start}.items-justified-center{justify-content:center}.items-justified-right{justify-content:flex-end}.items-justified-space-between{justify-content:space-between}.screen-reader-text{word-wrap:normal!important;border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-break:normal!important}.screen-reader-text:focus{background-color:#ddd;clip-path:none;color:#444;display:block;font-size:1em;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}html :where(.has-border-color){border-style:solid}html :where([style^=border-color],[style*=";border-color"],[style*="; border-color"]){border-style:solid}html :where([style^=border-top-color],[style*=";border-top-color"],[style*="; border-top-color"]){border-top-style:solid}html :where([style^=border-right-color],[style*=";border-right-color"],[style*="; border-right-color"]){border-right-style:solid}html :where([style^=border-bottom-color],[style*=";border-bottom-color"],[style*="; border-bottom-color"]){border-bottom-style:solid}html :where([style^=border-left-color],[style*=";border-left-color"],[style*="; border-left-color"]){border-left-style:solid}html :where([style^=border-width],[style*=";border-width"],[style*="; border-width"]){border-style:solid}html :where([style^=border-top-width],[style*=";border-top-width"],[style*="; border-top-width"]){border-top-style:solid}html :where([style^=border-right-width],[style*=";border-right-width"],[style*="; border-right-width"]){border-right-style:solid}html :where([style^=border-bottom-width],[style*=";border-bottom-width"],[style*="; border-bottom-width"]){border-bottom-style:solid}html :where([style^=border-left-width],[style*=";border-left-width"],[style*="; border-left-width"]){border-left-style:solid}html :where(img[class*=wp-image-]){height:auto;max-width:100%}:where(figure){margin:0 0 1em}html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:var(--wp-admin--admin-bar--height,0px)}@media screen and (max-width:600px){html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:0px}}
/*# sourceURL=/wp-includes/css/dist/block-library/common.min.css */
h1:where(.wp-block-heading).has-background,h2:where(.wp-block-heading).has-background,h3:where(.wp-block-heading).has-background,h4:where(.wp-block-heading).has-background,h5:where(.wp-block-heading).has-background,h6:where(.wp-block-heading).has-background{padding:1.25em 2.375em}h1.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h1.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h2.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h2.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h3.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h3.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h4.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h4.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h5.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h5.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h6.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h6.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]){rotate:180deg}
/*# sourceURL=https://tranceversum.nl/wp-includes/blocks/heading/style.min.css */
ol,ul{box-sizing:border-box}:root :where(.wp-block-list.has-background){padding:1.25em 2.375em}
/*# sourceURL=https://tranceversum.nl/wp-includes/blocks/list/style.min.css */
.wp-block-media-text{box-sizing:border-box;direction:ltr;display:grid;grid-template-columns:50% 1fr;grid-template-rows:auto}.wp-block-media-text.has-media-on-the-right{grid-template-columns:1fr 50%}.wp-block-media-text.is-vertically-aligned-top>.wp-block-media-text__content,.wp-block-media-text.is-vertically-aligned-top>.wp-block-media-text__media{align-self:start}.wp-block-media-text.is-vertically-aligned-center>.wp-block-media-text__content,.wp-block-media-text.is-vertically-aligned-center>.wp-block-media-text__media,.wp-block-media-text>.wp-block-media-text__content,.wp-block-media-text>.wp-block-media-text__media{align-self:center}.wp-block-media-text.is-vertically-aligned-bottom>.wp-block-media-text__content,.wp-block-media-text.is-vertically-aligned-bottom>.wp-block-media-text__media{align-self:end}.wp-block-media-text>.wp-block-media-text__media{grid-column:1;grid-row:1;margin:0}.wp-block-media-text>.wp-block-media-text__content{direction:ltr;grid-column:2;grid-row:1;padding:0 8%;word-break:break-word}.wp-block-media-text.has-media-on-the-right>.wp-block-media-text__media{grid-column:2;grid-row:1}.wp-block-media-text.has-media-on-the-right>.wp-block-media-text__content{grid-column:1;grid-row:1}.wp-block-media-text__media a{display:block}.wp-block-media-text__media img,.wp-block-media-text__media video{height:auto;max-width:unset;vertical-align:middle;width:100%}.wp-block-media-text.is-image-fill>.wp-block-media-text__media{background-size:cover;height:100%;min-height:250px}.wp-block-media-text.is-image-fill>.wp-block-media-text__media>a{display:block;height:100%}.wp-block-media-text.is-image-fill>.wp-block-media-text__media img{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.wp-block-media-text.is-image-fill-element>.wp-block-media-text__media{height:100%;min-height:250px;position:relative}.wp-block-media-text.is-image-fill-element>.wp-block-media-text__media>a{display:block;height:100%}.wp-block-media-text.is-image-fill-element>.wp-block-media-text__media img{height:100%;-o-object-fit:cover;object-fit:cover;position:absolute;width:100%}@media (max-width:600px){.wp-block-media-text.is-stacked-on-mobile{grid-template-columns:100%!important}.wp-block-media-text.is-stacked-on-mobile>.wp-block-media-text__media{grid-column:1;grid-row:1}.wp-block-media-text.is-stacked-on-mobile>.wp-block-media-text__content{grid-column:1;grid-row:2}}
/*# sourceURL=https://tranceversum.nl/wp-includes/blocks/media-text/style.min.css */
.is-small-text{font-size:.875em}.is-regular-text{font-size:1em}.is-large-text{font-size:2.25em}.is-larger-text{font-size:3em}.has-drop-cap:not(:focus):first-letter{float:left;font-size:8.4em;font-style:normal;font-weight:100;line-height:.68;margin:.05em .1em 0 0;text-transform:uppercase}body.rtl .has-drop-cap:not(:focus):first-letter{float:none;margin-left:.1em}p.has-drop-cap.has-background{overflow:hidden}:root :where(p.has-background){padding:1.25em 2.375em}:where(p.has-text-color:not(.has-link-color)) a{color:inherit}p.has-text-align-left[style*="writing-mode:vertical-lr"],p.has-text-align-right[style*="writing-mode:vertical-rl"]{rotate:180deg}
/*# sourceURL=https://tranceversum.nl/wp-includes/blocks/paragraph/style.min.css */
.wp-block-group{box-sizing:border-box}:where(.wp-block-group.wp-block-group-is-layout-constrained){position:relative}
/*# sourceURL=https://tranceversum.nl/wp-includes/blocks/group/style.min.css */
:where(.wp-block-group.has-background){padding:1.25em 2.375em}
/*# sourceURL=https://tranceversum.nl/wp-includes/blocks/group/theme.min.css */
.wp-block-spacer{clear:both}
/*# sourceURL=https://tranceversum.nl/wp-includes/blocks/spacer/style.min.css */
/*! This file is auto-generated */
.wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none}
/*# sourceURL=/wp-includes/css/classic-themes.min.css */
:root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgb(252,185,0) 0%,rgb(255,105,0) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgb(255,105,0) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);--wp--preset--shadow--crisp: 6px 6px 0px rgb(0, 0, 0);}.wp-block-button{--wp--preset--dimension--25: 25%;--wp--preset--dimension--50: 50%;--wp--preset--dimension--75: 75%;--wp--preset--dimension--100: 100%;}:where(body) { margin: 0; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}body{padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;}:root :where(.wp-element-button, .wp-block-button__link){background-color: #32373c;border-width: 0;color: #fff;font-family: inherit;font-size: inherit;font-style: inherit;font-weight: inherit;letter-spacing: inherit;line-height: inherit;padding-top: calc(0.667em + 2px);padding-right: calc(1.333em + 2px);padding-bottom: calc(0.667em + 2px);padding-left: calc(1.333em + 2px);text-decoration: none;text-transform: inherit;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;}
/*# sourceURL=global-styles-inline-css */
/*
===========================================
# STYLE.CSS — THEME MANIFEST — TRANCEVERSUM
# =========================================
# Dit bestand bevat:
# - Theme metadata
# - Documentatie
# - Architectuurprincipes
#
# Dit bestand bevat NIET:
# - CSS-regels
# - Layout
# - Styling
#
# Uitgangspunten:
# - sober
# - onderhoudsarm
# - robuust
# - toekomstbestendig
============================================
*/
Theme Name: Tranceversum
Theme URI: https://tranceversum.nl
Author: Knippels
Description: Minimalistisch, autonoom en onderhoudsarm WordPress thema voor Tranceversum dat gerichte layout‑ en componentlogica toevoegt: volledige typografie‑controle (hyphenation, justify, heading‑spacing), custom full‑bleed hero (server‑side injectie), complete autonome footer‑architectuur, ultra‑compact contactformulier (styling, server‑side handler, UX‑helpers), autonome contactmodule (2‑koloms layout met formulier + afbeelding), autonome diensten‑ & tarieventabel (responsive, scrollmodule, crisp header/footnote), volledige ICS‑agenda‑stack (fetch, cache, parser, filtering, renderer), Gutenberg‑neutralisatie, media‑normalisatie, security‑hardening, diagnose‑modus en voorspelbare, failsafe asset‑loading. Custom header.php en footer.php, geen bloat — uitsluitend stabiele, onderhoudsarme functionaliteit.
Version: 1.0
Text Domain: tranceversum
/*
========================================
# DOCUMENTATIE — ARCHITECTUUR
# ======================================
# CSS-bestanden worden extern geladen:
# - /css/base.css
# - /css/layout.css
# - /css/components.css
# - /css/gutenberg.css
#
# JS-bestanden worden extern geladen:
# - /js/script.js
#
# Theme structuur:
# - header.php
# - footer.php
# - functions.php
# - index.php
# - page.php
# - single.php
#
# Dit manifest blijft altijd schoon.
========================================
*/
/* -------------------------------------------------------
⭐ KORTE DEFINITIE VAN TRANCEVERSUM THEMA‑ARCHITECTUUR
----------------------------------------------------------
**Een autonoom, klassiek‑modern hybride thema waarin Gutenberg uitsluitend als content‑editor fungeert, terwijl het thema zelf de volledige layout‑laag beheert — sober, voorspelbaar, onderhoudsarm en future‑proof.**
-------------------------------------------------------
⭐ ARCHITECTUURMATRIX
----------------------------------------------------------
#1 WAT WE OVERNEMEN VAN GUTENBERG
(= “Gutenberg mag dit doen, want het is stabiel en veilig”)
- **HTML‑structuur** van blokken
- **Grid‑layout** van Media‑&‑Tekst
- **Stacking behavior** op mobiel
- **Block semantics** (heading, paragraph, image)
- **Editor‑ervaring**
- **Lazy loading**
- **Accessibility defaults**
Gutenberg is hier sterk → we laten het werken.
---
#2 WAT WE OVERRULEN
(= “Gutenberg doet dit onvoorspelbaar of inconsistent”)
- **Padding** van Media‑&‑Tekst
- **Alignment** van Media‑&‑Tekst
- **Typografie** van headings
- **Spacing** tussen blokken
- **Link‑interactie**
- **Bullet‑weergave**
- **Content‑breedtes**
- **Visuele rust**
Eigen domein → zelf de layout kunnen bepalen.
---
#3 WAT WE ZELF BOUWEN
(= “autonome, stabiele, future‑proof componenten”)
- **Bullet‑architectuur** (techniekenlijst)
- **Typografische normalisatie**
- **Design tokens**
- **Responsieve spacing**
- **Therapeutische visuele stijl**
- **Consistente kolombreedtes**
- **Rustige link‑interactie**
Dit is jouw signature → jouw thema‑identiteit.
---
#4 WAAROM DIT PERFECT PAST BIJ JOUW THEMA
✔ Geen regressies bij WP‑updates
→ Deze architectuur voorkomt dat volledig.
✔ Geen layout‑engine oorlogen.
→ We overrulen alleen spacing/alignment, niet grid/flex.
✔ Rust, soberheid, voorspelbaarheid
→ Dit is de meest minimalistische stabiele variant.
✔ Autonomie zonder strijd
→ Gutenberg doet content, jij doet layout.
✔ Custom styling, passend bij therapiepraktijk
→ Typografie + spacing + bullets zijn volledig onder eigen controle.
/* ============================================================
base.css — Tranceversum
============================================================
DOEL:
- Globale veilige defaults
- Typografie, kleuren, tokens
- Media-normalisatie (globaal)
- Geen component- of layout-ownership
ARCHITECTUURNOTITIE:
------------------------------------------------------------
Dit thema gebruikt GEEN .entry-content wrapper.
De architectuur werkt met twee duidelijke scopes:
1) .tv-site → globale UI-laag (typografie, kleuren, resets)
2) .tv-main → content-laag (Gutenberg blocks & tekstgedrag)
Base.css beheert uitsluitend de globale laag (.tv-site) en
laat alle content- en block-specifieke styling over aan
gutenberg.css binnen .tv-main.
============================================================ */
/* ============================================================
1. BOX-SIZING RESET
============================================================ */
html {
box-sizing: border-box;
scroll-behavior: smooth;
}
*, *::before, *::after {
box-sizing: inherit;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
/* ============================================================
2. FONTS — LOKAAL GEHOST (Carlito bodyfont + Abyssinica SIL merkfont)
============================================================ */
@font-face {
font-family: 'Carlito';
src: url('/wp-content/themes/tranceversum/fonts/Carlito-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Carlito';
src: url('/wp-content/themes/tranceversum/fonts/Carlito-Italic.woff2') format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Carlito';
src: url('/wp-content/themes/tranceversum/fonts/Carlito-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Carlito';
src: url('/wp-content/themes/tranceversum/fonts/Carlito-BoldItalic.woff2') format('woff2');
font-weight: 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Abyssinica SIL";
src: url("/wp-content/themes/tranceversum/fonts/AbyssinicaSIL-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* ============================================================
3. CSS VARIABELEN (TOKENS)
============================================================ */
:root {
/* kleuren */
--color-green-light: #25650d;
--color-green-dark: #164406;
--color-offwhite: #fafaf9;
--color-black: #000000;
--color-offblack: #585858;
--color-white: #ffffff;
--color-grey-light: #dddddd;
/* Legacy accentkleur (klaverkalk geel). Niet actief in huidige UI, maar beschikbaar als design-token. */
--color-yellow-hover: #FCE883;
--color-accent-bg: #EDF2EE;
--color-accent-bg-soft: rgba(37, 101, 13, 0.05);
--color-border: #d0ddcf;
--color-zebra: #EDF2EE;
--color-bg: var(--color-offwhite);
--color-text: var(--color-offblack);
--color-heading: var(--color-black);
/* typografie */
--font-body: "Carlito", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--font-heading: "Abyssinica SIL", Georgia, "Times New Roman", serif;
--body-size: 22px;
--body-lineheight: 1.5;
/* layout */
--container-width: 1150px;
--gutter: 1.5rem;
--media-text-gap: clamp(2rem, 4vw, 4rem);
/* breakpoints */
--bp-mobile: 480px;
--bp-tablet: 768px;
--bp-desktop: 1024px;
}
/* ============================================================
4. RESPONSIVE TYPOGRAFIE
============================================================ */
@media (max-width: 1024px) {
:root { --body-size: 20px; }
}
@media (max-width: 768px) {
:root { --body-size: 18px; }
}
/* ============================================================
5. RESET (SOFT)
============================================================ */
:where(.tv-site) h1,
:where(.tv-site) h2,
:where(.tv-site) h3,
:where(.tv-site) h4,
:where(.tv-site) h5,
:where(.tv-site) h6,
:where(.tv-site) p,
:where(.tv-site) ul,
:where(.tv-site) ol {
margin: 0;
padding: 0;
}
/* ===============================================================
6. BODY DEFAULTS
=============================================================== */
.tv-site {
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-body);
font-size: var(--body-size);
line-height: var(--body-lineheight);
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
/* ============================================================
MOBILE TEXT-INFLATION FIX
------------------------------------------------------------
DOEL:
- voorkomt dat mobiele browsers tekst automatisch vergroten
in landscape-modus
- houdt bodytekst consistent met Media & Tekst blokken
- maakt responsive typografie 100% voorspelbaar
============================================================ */
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
/* ============================================================
7. HEADINGS — Carlito (bodyfont)
============================================================ */
:where(.tv-site) h1,
:where(.tv-site) h2,
:where(.tv-site) h3,
:where(.tv-site) h4,
:where(.tv-site) h5,
:where(.tv-site) h6 {
font-family: var(--font-body);
font-weight: 400;
font-size: calc(var(--body-size) + 2px);
line-height: 1.5;
letter-spacing: normal;
color: var(--color-black);
margin-top: 1.4rem;
margin-bottom: 0.8rem;
}
@media (max-width: 1024px) {
:root { --body-size: 22px; }
}
@media (max-width: 768px) {
:root { --body-size: 20px; }
}
/* ============================================================
8. H1-UITZONDERINGEN (HEADER & FOOTER)
============================================================ */
:where(header) h1,
:where(footer) h1 {
font-weight: 400;
}
/* ============================================================
9. PRAKTIJKNAAM — HEADER & FOOTER
============================================================ */
.tv-header .tv-site-title,
.tv-footer .praktijknaam {
font-family: var(--font-heading);
font-weight: 400;
}
/* ============================================================
10. PARAGRAFEN & TEKST
============================================================ */
:where(.tv-site) p { margin-bottom: 0.51em; }
:where(.tv-site) strong { font-weight: 400; color: var(--color-offblack); }
:where(.tv-site) em { font-style: italic; }
/* ============================================================
11. LIJSTEN
============================================================ */
:where(.tv-site) ul,
:where(.tv-site) ol {
margin-left: 1.4em;
margin-bottom: 0.8em;
}
:where(.tv-site) li { margin-bottom: 0.3em; }
/* ============================================================
12. MEDIA NORMALISATIE
============================================================ */
:where(.tv-site) img,
:where(.tv-site) video {
max-width: 100%;
height: auto;
display: block;
}
/* ============================================================
13. FORMULIEREN (BASIS)
============================================================ */
:where(.tv-site) input,
:where(.tv-site) textarea,
:where(.tv-site) select {
font-family: var(--font-body);
font-size: var(--body-size);
padding: 0.6rem;
border: 1px solid var(--color-border);
background: var(--color-accent-bg);
color: var(--color-offblack);
}
:where(.tv-site) input:focus,
:where(.tv-site) textarea:focus,
:where(.tv-site) select:focus {
outline: 2px solid var(--color-green-light);
}
/* ============================================================
14. HYPHENATION (OPTIE‑C)
============================================================ */
:where(.tv-site) .tv-main,
:where(.tv-site) .tv-main p,
:where(.tv-site) .tv-main li,
:where(.tv-site) .tv-main .wp-block-group,
:where(.tv-site) .tv-main .wp-block-stack,
:where(.tv-site) .tv-main .wp-block-columns,
:where(.tv-site) .tv-main .wp-block-column,
:where(.tv-site) .tv-main .wp-block-media-text,
:where(.tv-site) .tv-main .wp-block-list {
hyphens: auto;
overflow-wrap: break-word;
word-break: normal;
}
/* ============================================================
15. JUSTIFY (OPTIE‑C)
============================================================ */
:where(.tv-site) .tv-main,
:where(.tv-site) .tv-main p,
:where(.tv-site) .tv-main li,
:where(.tv-site) .tv-main .wp-block-group,
:where(.tv-site) .tv-main .wp-block-group p,
:where(.tv-site) .tv-main .wp-block-stack,
:where(.tv-site) .tv-main .wp-block-stack p,
:where(.tv-site) .tv-main .wp-block-media-text,
:where(.tv-site) .tv-main .wp-block-media-text p,
:where(.tv-site) .tv-main .wp-block-columns p,
:where(.tv-site) .tv-main .wp-block-column p,
:where(.tv-site) .tv-main .wp-block-list,
:where(.tv-site) .tv-main .wp-block-list li {
text-align: justify;
text-justify: inter-word;
}
:where(.tv-site) .no-justify,
:where(.tv-site) .no-justify p,
:where(.tv-site) .no-justify li {
text-align: left;
}
/* ============================================================
16. GUTENBERG HEADING LETTERSPACING (OPTIE‑C)
============================================================ */
:where(.tv-site) .tv-main h1,
:where(.tv-site) .tv-main h2,
:where(.tv-site) .tv-main h3,
:where(.tv-site) .tv-main h4,
:where(.tv-site) .tv-main h5,
:where(.tv-site) .tv-main h6,
:where(.tv-site) .tv-main .wp-block-heading {
letter-spacing: normal !important;
}
/* ============================================================
17. INTRO-LIJST (OPTIE‑C)
============================================================ */
:where(.tv-site) .tv-main ul.tv-intro-list {
margin-top: 0;
margin-bottom: 0.25em;
margin-left: 0 !important;
padding-left: 0.80em !important;
}
:where(.tv-site) .tv-main ul.tv-intro-list li::marker {
font-size: 0.75em;
}
/* ============================================================
18. FIGURE & FIGCAPTION
============================================================ */
:where(.tv-site) figure {
margin: 0 0 1em 0;
}
:where(.tv-site) figcaption {
font-size: 0.85em;
color: var(--color-offblack);
text-align: center;
margin-top: 0.4em;
}
/* Visually-hidden: semantische heading blijft in de DOM/accessibility-tree,
* maar is visueel verborgen (géén display:none / visibility:hidden / aria-hidden). */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* ============================================================
layout.css — Tranceversum
===============================================================
DOEL:
- Layoutfundament (.tv-site): containers, grids, spacing en UI-interactie
- Geen typografie (base.css)
- Geen Gutenberg-logica (gutenberg.css)
ARCHITECTUUR:
- base.css = design tokens + typografie
- layout.css = structuur + containers + UI-interactie
- gutenberg.css = block-specifieke logica
BELANGRIJK:
layout.css is de enige bron voor globale layoutregels.
============================================================ */
/* ============================================================
1. ALGEMENE LAYOUTSTRUCTUUR — PAGE FOUNDATION (HEADER / MAIN / FOOTER)
============================================================ */
:where(.tv-site) {
display: block;
}
body.tv-site {
min-height: 100vh;
display: flex;
flex-direction: column;
}
:where(.tv-site) header,
:where(.tv-site) main,
:where(.tv-site) footer {
width: 100%;
margin: 0;
padding: 0;
}
.tv-site main,
#tv-main {
flex: 1;
width: 100%;
}
/* ------------------------------------------------------------
CENTRALE CONTENTCONTAINER — .tv-main
------------------------------------------------------------ */
:where(.tv-site) .tv-main {
max-width: var(--container-width);
margin-inline: auto;
width: 100%;
box-sizing: border-box;
padding-inline: var(--gutter);
}
:where(.tv-site) .tv-main > :last-child {
margin-bottom: var(--gutter);
}
/* ============================================================
2. TEKSTFLOW BESCHERMING — overflow safety
============================================================ */
:where(.tv-site) main {
overflow-wrap: break-word;
}
/* ============================================================
3. SECTIES & VERTICALE RITMIEK — globale page spacing
============================================================ */
:where(.tv-site) section {
padding-block: 2.5rem;
}
@media (max-width: var(--bp-tablet)) {
:where(.tv-site) section {
padding-block: 2rem;
}
}
@media (max-width: var(--bp-mobile)) {
:where(.tv-site) section {
padding-block: 1.5rem;
}
}
/* ============================================================
4. GRID UTILITIES — herbruikbare layout systemen
============================================================ */
:where(.tv-site) .tv-grid {
display: grid;
gap: 1.5rem;
}
:where(.tv-site) .tv-grid--2 {
grid-template-columns: repeat(2, 1fr);
}
@media (max-width: var(--bp-tablet)) {
:where(.tv-site) .tv-grid--2 {
grid-template-columns: 1fr;
}
}
/* ============================================================
5. FLEX UTILITIES — layout helpers voor UI compositie
============================================================ */
:where(.tv-site) .tv-flex {
display: flex;
gap: 1.5rem;
}
:where(.tv-site) .tv-flex--center {
justify-content: center;
align-items: center;
}
/* ============================================================
6. HEADER LAYOUT — container + navigatie-interactie
============================================================ */
:where(.tv-site) .tv-site-header-inner {
width: 100%;
max-width: var(--container-width);
margin-inline: auto;
padding-inline: var(--gutter);
}
:where(.tv-site) .tv-site-header-inner a:hover {
color: var(--color-green-light);
}
:where(.tv-site) .tv-site-header-inner a:focus-visible,
:where(.tv-site) .custom-logo-link:focus-visible {
outline: 1px solid var(--color-green-light);
outline-offset: 2px;
color: inherit;
}
/* ============================================================
7. FOOTER LAYOUT — container + subtiele interactie
============================================================ */
:where(.tv-site) .tv-footer-inner {
width: 100%;
max-width: var(--container-width);
margin-inline: auto;
padding-inline: var(--gutter);
}
:where(.tv-site) footer a:focus-visible {
outline: 1px solid var(--color-offwhite);
outline-offset: 2px;
color: inherit;
}
/* ============================================================
8. RESPONSIVE HELPERS — mobiele stacking utility
============================================================ */
@media (max-width: var(--bp-tablet)) {
:where(.tv-site) .tv-responsive-stack {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
}
/* ============================================================
9. ALGEMENE LINKINTERACTIE — UX + toegankelijkheid
============================================================ */
:where(.tv-site) a {
color: var(--color-offblack);
text-decoration: none;
transition: color 0.2s ease;
}
:where(.tv-site) .tv-main a:hover {
color: var(--color-green-light);
}
/* Tekstlinks in bodyparagrafen, lijstitems en headings: subtiele groene hover-underline.
Inclusief headings (bv. techniekenlijst-headerlinks); buttons/CTA's worden niet geraakt. */
:where(.tv-site) .tv-main :is(p, li, h2, h3, h4, h5, h6) a:hover {
text-decoration: underline;
text-decoration-color: var(--color-green-light);
text-decoration-thickness: 1px;
text-underline-offset: 0.3em;
}
:where(.tv-site) .tv-main a:focus-visible {
color: inherit;
outline: 1px solid var(--color-green-light);
outline-offset: 2px;
}
:where(.tv-site) a:focus {
outline: none;
}
/* ============================================================
10. PAGINA 1133 — TYPOGRAFIE & LIST LOGIC CONTRACT
============================================================ */
.page-id-1133 .tv-main h1,
.page-id-1133 .tv-main h2,
.page-id-1133 .tv-main h3,
.page-id-1133 .tv-main h4,
.page-id-1133 .tv-main h5,
.page-id-1133 .tv-main h6 {
font-size: var(--body-size);
font-weight: 400;
letter-spacing: 0;
line-height: var(--body-lineheight);
color: var(--color-text);
margin: 0 0 0.5em 0;
}
/* list interaction model */
.page-id-1133 .tv-main ul li {
pointer-events: none;
}
.page-id-1133 .tv-main ul li a {
pointer-events: auto;
}
/* ============================================================
11. TECHNIEKENLIJST COMPONENT — GUTENBERG CLASS-BASED BULLET SYSTEM
===============================================================
DOEL:
Visuele bulletlijst zonder extra HTML structuur.
GEBRUIK IN GUTENBERG (NOODZAKELIJK):
Blok → Geavanceerd → Aanvullende CSS-klasse(n)
→ techniekenlijst
Zonder deze class:
→ geen styling toegepast
============================================================ */
.page-id-1133 {
--techniekenlijst-bullet-size: 1em;
--techniekenlijst-indent: 0.75em;
}
.page-id-1133 .techniekenlijst {
position: relative;
display: flex;
align-items: center;
padding-left: var(--techniekenlijst-indent);
gap: 0.4em;
}
.page-id-1133 .techniekenlijst::before {
content: "•";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
font-size: var(--techniekenlijst-bullet-size);
color: var(--color-offblack);
pointer-events: none;
line-height: 1;
}
/* ============================================================
12. MEDIA & TEKST — GUTENBERG MEDIA-TEXT LAYOUT LAYER
===============================================================
DOEL:
Gutenberg beheert:
- kolomstructuur
- responsive stacking
- media position (left/right)
THEMA BEHEERT:
- containerbreedte
- image normalisatie
- basis layout stabiliteit
REGEL:
Geen grid-template-columns overrides in theme.
============================================================ */
.wp-block-media-text {
max-width: var(--container-width);
margin-inline: auto;
}
.wp-block-media-text__media {
align-self: start;
}
.wp-block-media-text__media img {
display: block;
width: 100%;
height: auto;
}
.wp-block-media-text__content {
min-width: 0;
padding: 0;
}
/* ============================================================
EINDE LAYOUT.CSS
============================================================ */
/* ============================================================
components.css — Tranceversum (OPTIE‑C DEFINITIEF)
============================================================
DOEL:
- UI-componenten (buttons, forms, hero, footer, modules)
- Geen layout-ownership (breedtes → layout.css)
- Geen typografie-ownership (base.css)
- Geen Gutenberg-ownership (gutenberg.css)
- Sober, robuust, onderhoudsarm
ARCHITECTUURNOTITIE:
------------------------------------------------------------
Dit thema gebruikt GEEN .entry-content wrapper.
De architectuur werkt met twee duidelijke scopes:
1) .tv-site → globale UI- en layoutlaag
(utilities, fullbleed, modules, tokens)
2) .tv-main → contentlaag voor Gutenberg blocks
(tekstgedrag, hyphenation, justify, block logic)
components.css definieert uitsluitend tv-* componenten.
tv-* componenten zijn autonoom → GEEN encapsulatie.
Utilities en globale modules → WEL encapsulatie.
============================================================ */
/* ============================================================
1. Global settings (safe defaults)
============================================================ */
:root {
color-scheme: light;
}
@media (prefers-reduced-motion: reduce) {
:where(.tv-site) * {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ============================================================
2. Buttons (component → GEEN encapsulatie)
============================================================ */
.tv-button,
button.tv-button,
input[type="submit"].tv-button {
display: inline-block;
padding: 0.6rem 1.2rem;
background-color: var(--color-green-light, #4f8a3f);
color: var(--color-white, #ffffff);
border: none;
cursor: pointer;
font-family: var(--font-body, sans-serif);
font-size: 1rem;
transition: background-color 0.2s ease;
}
.tv-button:hover,
button.tv-button:hover,
input[type="submit"].tv-button:hover {
background-color: var(--color-green-dark, #2f5e1f);
}
.tv-button:focus-visible,
button.tv-button:focus-visible,
input[type="submit"].tv-button:focus-visible {
outline: 2px solid var(--color-green-dark, #2f5e1f);
outline-offset: 3px;
}
/* ============================================================
3. Formulieren (globale module → WEL encapsulatie)
============================================================ */
:where(.tv-site) .tv-contact-form label {
display: block;
margin-bottom: 0.3rem;
font-family: var(--font-body, sans-serif);
color: var(--color-black, #000000);
}
:where(.tv-site) .tv-contact-form input,
:where(.tv-site) .tv-contact-form textarea,
:where(.tv-site) .tv-contact-form select {
width: 100%;
margin-bottom: 1rem;
border-radius: 4px;
box-sizing: border-box;
}
:where(.tv-site) .tv-contact-form textarea {
min-height: 120px;
}
:where(.tv-site) .tv-contact-form input:focus-visible,
:where(.tv-site) .tv-contact-form textarea:focus-visible,
:where(.tv-site) .tv-contact-form select:focus-visible {
outline: 2px solid var(--color-green-light, #4f8a3f);
outline-offset: 3px;
}
/* ============================================================
4. Utilities (globaal → WEL encapsulatie)
============================================================ */
:where(.tv-site) .tv-u-text-center { text-align: center; }
:where(.tv-site) .tv-u-text-right { text-align: right; }
:where(.tv-site) .tv-u-mt-1 { margin-top: 1rem; }
:where(.tv-site) .tv-u-mt-2 { margin-top: 2rem; }
:where(.tv-site) .tv-u-mt-3 { margin-top: 3rem; }
:where(.tv-site) .tv-u-mb-1 { margin-bottom: 1rem; }
:where(.tv-site) .tv-u-mb-2 { margin-bottom: 2rem; }
:where(.tv-site) .tv-u-mb-3 { margin-bottom: 3rem; }
/* ============================================================
5. HEADER (component → GEEN encapsulatie)
============================================================
DOEL:
- Structuur + typografie van de header.
- Hover = kleur (lichtgroen)
- TAB = outline (lichtgroen)
- Hover en TAB strikt gescheiden
============================================================ */
.tv-header {
background-color: var(--color-offwhite, #fafaf9);
border-bottom: 1px solid var(--color-green-light, #EDF2EE); /* scheidingslijn onder headersectie */
padding-top: var(--gutter, 1.5rem);
padding-bottom: 1.2rem;
}
.tv-header-inner {
max-width: var(--container-width, 1200px);
margin: 0 auto;
padding: 0 var(--gutter, 1.6rem);
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
position: relative;
min-width: 0;
}
.tv-branding {
display: flex;
align-items: center;
gap: 2rem;
min-width: 0;
}
.tv-logo-space {
width: 220px;
height: auto;
}
.tv-logo img,
.tv-logo .custom-logo {
width: 100%;
height: auto;
}
.tv-title-group {
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: 1.2;
min-width: 0;
}
.tv-site-title {
margin: 0;
text-transform: uppercase;
font-family: "Abyssinica SIL", Georgia, serif;
font-weight: 400;
letter-spacing: 0.10em;
color: var(--color-green-light);
line-height: 1.0;
}
.tv-site-title a {
color: inherit;
text-decoration: none;
}
/* Hover → geen kleurverandering (merknaam blijft stabiel) */
.tv-site-title a:hover {
color: inherit;
text-decoration: none;
cursor: pointer;
}
.tv-site-tagline {
margin: 0.25rem 0 0 0;
color: var(--color-offblack);
line-height: 1.35;
letter-spacing: 0.01em;
font-size: calc(var(--body-size) * 0.925);
display: inline-block;
width: 100%;
max-width: 100%;
}
@media (min-width: 769px) {
.tv-title-group {
--tv-title-size: clamp(3.1rem, calc(18vw - 86px), 3.6rem);
--tv-tagline-size: calc(var(--tv-title-size) * 0.3694);
}
.tv-site-title { font-size: var(--tv-title-size); }
.tv-site-tagline { font-size: var(--tv-tagline-size); }
}
@media (max-width: 768px) {
.tv-site-title { font-size: clamp(1.70rem, 6.5vw + 0.5rem, 3.60rem); }
}
.tv-header-nav {
align-self: flex-end;
}
.tv-header-nav .tv-menu {
display: flex;
flex-direction: row;
gap: 2rem;
font: inherit;
}
.tv-header-nav .tv-menu > li::after {
content: "";
display: inline-block;
width: 2px;
height: 1em;
background: currentColor;
margin-left: 1rem;
}
/* BUGFIX */
.tv-header-nav .tv-menu > li:last-child::after {
display: none;
}
/* ============================================================
5A. HEADER – OVERFLOW FIX
============================================================ */
.tv-header-inner,
.tv-header,
body,
html {
overflow-x: hidden;
}
/* ============================================================
5B. HEADER – HORIZONTALE OVERFLOW-BEHAVIOR (MOBIEL)
------------------------------------------------------------
Doel:
- Voorkomt horizontale scroll/glijden op kleine schermen.
- Neutraliseert overflow veroorzaakt door brede header/nav.
- Houdt alle content (incl. tabellen) binnen de viewport.
- Werkt samen met de .js-class (geactiveerd in header.php).
============================================================ */
.tv-header-inner,
.tv-header,
body,
html {
overflow-x: hidden;
}
/* ============================================================
HEADER – MOBIEL (≤768px): gestapelde, gecentreerde branding
(synchroniseert branding met het 768/769 Eleventy-breakpoint)
============================================================ */
@media (max-width: 768px) {
.tv-branding {
align-self: center;
width: 100%;
}
.tv-logo-row {
flex-direction: column;
align-items: center;
text-align: center;
width: 100%;
}
.tv-title-group {
align-items: center;
text-align: center;
width: min-content;
}
.tv-site-title {
margin: 0 auto 0.4rem auto;
text-align: center;
}
.tv-site-tagline {
width: 100%;
max-width: 100%;
margin: 0 auto;
text-align: center;
}
}
/* ============================================================
6. NAVIGATIE (component → GEEN encapsulatie)
============================================================
DOEL:
- Structuur + interactie van het hoofdmenu.
- Hover = lichtgroen (#25650d)
- TAB = subtiele groene outline (1px solid)
- Hover en TAB strikt gescheiden (geen kleur bij TAB)
- Klik-focus → geen outline (alleen via :focus-visible)
============================================================ */
/* Layout-structuur van de drie header-rijen */
.tv-header-row-branding {
width: 100%;
}
.tv-header-row-spacer {
width: 100%;
display: flex;
justify-content: flex-start;
}
.tv-header-row-menu {
width: 100%;
display: flex;
}
/* Hoofdmenu-container */
.tv-nav {
display: flex;
gap: 2rem;
list-style: none;
padding: 0;
margin: 0;
margin-left: auto;
/* Zichtbaar en interactief (desktop) */
visibility: visible;
opacity: 1;
pointer-events: auto;
}
/* Menu-links */
.tv-nav a {
font-family: var(--font-body, sans-serif);
font-size: var(--body-size);
color: var(--color-offblack);
text-decoration: none;
transition: color 0.2s ease;
}
/* ------------------------------------------------------------
INTERACTIE
------------------------------------------------------------ */
/* Hover = kleur (lichtgroen) + subtiele onderstreping in dezelfde kleur */
.tv-nav a:hover {
color: var(--color-green-light);
text-decoration: underline;
text-decoration-color: var(--color-green-light);
text-decoration-thickness: 1px;
text-underline-offset: 0.3em;
}
/* Klik-focus verwijderen (browser default) */
.tv-nav a:focus {
outline: none;
}
/* TAB-focus = outline, géén kleurverandering */
.tv-nav a:focus-visible {
outline: 1px solid var(--color-green-light);
outline-offset: 2px;
color: inherit; /* expliciet: behoud normale linkkleur */
}
/* ------------------------------------------------------------
Logo-rij (branding)
------------------------------------------------------------ */
.tv-logo-row {
display: flex;
align-items: center;
gap: 1.2rem;
}
/* ------------------------------------------------------------
Menu-lijst (UL)
------------------------------------------------------------ */
.tv-menu {
display: flex;
flex-direction: row;
list-style: none;
margin: 0;
padding: 0;
gap: 2rem;
}
/* ------------------------------------------------------------
Toggle-button (progressive enhancement)
------------------------------------------------------------ */
.tv-nav-toggle {
display: none;
background: none;
border: none;
font-size: 1.75rem;
cursor: pointer;
color: var(--color-green-dark);
}
.tv-nav-toggle-icon {
display: inline-block;
position: relative;
width: 24px;
height: 2px;
background: currentColor;
vertical-align: middle;
}
.tv-nav-toggle-icon::before,
.tv-nav-toggle-icon::after {
content: "";
position: absolute;
left: 0;
width: 100%;
height: 2px;
background: currentColor;
}
.tv-nav-toggle-icon::before {
top: -6px;
}
.tv-nav-toggle-icon::after {
top: 6px;
}
/* ------------------------------------------------------------
Mobile menu (JS-controlled) — breakpoint 768px
------------------------------------------------------------ */
@media (max-width: 768px) {
.tv-nav {
flex-direction: column;
gap: 1rem;
text-align: center;
}
.tv-menu {
flex-direction: column;
gap: 1rem;
align-items: center;
}
.tv-menu > li::after {
display: none;
}
.js .tv-nav-toggle {
display: block;
margin-top: 0.5rem;
}
.js .tv-nav {
display: none;
flex-direction: column;
gap: 1rem;
margin-top: 1rem;
margin-left: 0;
text-align: center;
}
.js .tv-nav.is-open {
display: flex;
}
}
@media (min-width: 769px) {
.tv-nav {
display: flex;
}
}
/* ============================================================
7. FOOTER (component → GEEN encapsulatie)
============================================================
DOEL:
- Footer krijgt een EIGEN basis-fontgrootte (0.90rem)
- Rijen 1, 2 en 3 correct uitgelijnd en gestileerd
- Rustige, warme, therapeutische uitstraling
============================================================ */
.tv-footer {
background: var(--color-green-dark, #164406);
color: rgba(250, 250, 249, 0.95);
margin: 0;
padding: 0;
font-size: 0.90rem; /* cruciaal voor rem-waarden */
}
/* Rij 1: centreren + verticale ruimte + scheidingslijn */
.tv-footer-row-top {
text-align: center;
padding: 1.6rem 0 0.85rem;
border-bottom: 1px solid rgba(250, 250, 249, 0.95); /* dikte en kleur scheidingslijn,
#FAFAF9 = achtergrondkleur pagina-content */
}
/* ============================================================
7A. FOOTER RIJ 1 — PRAKTIJKNAAM + EIGEN NAAM
============================================================ */
.tv-footer-row-top .praktijknaam {
font-family: var(--font-heading, serif);
font-size: clamp(1.6rem, 4.3vw + 0.73rem, 2.025rem);
letter-spacing: 0.34em;
text-transform: uppercase;
margin: 0;
color: rgba(250, 250, 249, 0.95);
}
.tv-footer-row-top .eigen-naam {
font-size: 0.85rem;
font-weight: 400; /* was 300; mogelijk te subtiel */
letter-spacing: 0.04em;
margin-top: 0.35rem;
line-height: 1.30;
}
/* ============================================================
7A. FOOTER RIJ 2 — 4 KOLOMMEN
============================================================
DOEL:
- Kolomtekst: 0.85rem
- Kolomtitels: 0.90rem + 600 gewicht
- Kolomtitels nooit italic
- Address-element neutraliseren (browser default = italic)
============================================================ */
.tv-footer-row-middle {
display: grid;
grid-template-columns: repeat(4, 1fr);
column-gap: 40px;
row-gap: 1.50rem;
padding: 1.35rem 0;
font-size: 0.90rem;
line-height: 1.50;
}
/* Responsive footer-grid 1/2/4: mobiel 1 · tablet 2 · desktop 4 */
@media (max-width: 1023px) {
.tv-footer-row-middle {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.tv-footer-row-middle {
grid-template-columns: 1fr;
}
}
.tv-footer-heading {
font-size: 0.85rem;
font-weight: 600;
font-style: normal; /* expliciet: nooit italic */
margin: 0 0 0.60rem 0;
}
/* FIX: address-element is standaard italic → neutraliseren */
.tv-footer address,
.tv-footer address * {
font-style: normal !important;
}
/* ============================================================
7A. FOOTER — FIX VOOR KOLOM 1 (ADRES)
============================================================
DOEL:
- Regels in kolom 1 exact uitlijnen met kolommen 2–4
- Uniforme line-height
- Uniforme marges
- Optische baseline-correctie
============================================================ */
/* 1. Normaliseer alle tekstregels in kolom 1 */
.tv-footer-row-middle .footer-col-adres p {
margin: 0 0 0.50em 0; /* zelfde ritme als andere kolommen */
line-height: 1.50; /* exact gelijk aan andere kolommen */
padding: 0;
}
/* 2. Normaliseer
zodat ze dezelfde spacing geven als */
.tv-footer-row-middle .footer-col-adres br {
display: block;
margin-bottom: 0.50em;
line-height: 1.50;
}
/* 3. Optische correctie: eerste regel laten zakken */
.tv-footer-row-middle .footer-col-adres {
padding-top: 0.15em; /* subtiele baseline-correctie */
}
/* ============================================================
7A. FOOTER — Openingstijden (kolom 2)
============================================================
DOEL:
- Weekdagen links uitlijnen
- Openingstijden gecentreerd
- Typografisch robuuste breedtes via ch-eenheden
============================================================ */
.footer-col-openingstijden .tijd-row {
display: flex;
justify-content: flex-start;
gap: 0.75rem;
}
.footer-col-openingstijden .dag {
width: 3ch;
text-align: left;
}
.footer-col-openingstijden .uren {
width: 15ch;
text-align: center;
}
/* ============================================================
7A. FOOTER RIJ 3 — MINIFOOTER
============================================================
DOEL:
- Subtieler dan rij 2
- Gecentreerd
============================================================ */
.tv-footer-row-bottom {
font-size: 0.75rem;
text-align: center;
padding: 0.85rem 0;
}
/* ============================================================
7B. FOOTER — SOBERE LINKINTERACTIE (NIEUWE ARCHITECTUUR)
============================================================
DOEL:
- Hover = subtiele off-white underline (#fafaf9), geen kleurwijziging
- TAB = subtiele off-white outline (#fafaf9)
- Klik-focus → geen outline
- Telefoonnummer → geen hover, geen TAB, geen interactie
============================================================ */
/* Permanente linkkleur */
.tv-footer a {
color: rgba(250, 250, 249, 0.95);
text-decoration: none;
transition: color 0.2s ease;
}
/* Hover = subtiele off-white underline (maar NIET voor tel-links) */
/* Footer-hover: uitsluitend subtiele off-white underline (géén geel/klaverkalk).
Tekstkleur behoudt de normale footer-tekstkleur. */
.tv-footer a:hover:not([href^="tel:"]) {
text-decoration: underline;
text-decoration-color: var(--color-offwhite, #fafaf9);
text-decoration-thickness: 1px;
text-underline-offset: 0.3em;
}
/* Telefoonnummer → volledig inert */
.tv-footer a[href^="tel:"] {
pointer-events: none;
color: inherit;
}
/* Klik-focus verwijderen */
.tv-footer a:focus {
outline: none;
}
/* TAB = outline, géén kleurverandering */
.tv-footer a:focus-visible:not([href^="tel:"]) {
outline: 1px solid var(--color-offwhite, #fafaf9);
outline-offset: 2px;
color: inherit;
}
/* ============================================================
7C. WORDPRESS SYSTEM-FOOTER NEUTRALISEREN
============================================================
DOEL:
- Verwijdert ongewenste witruimte onder de eigen footer.
- WordPress plaatst altijd een extra