*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scrollbar-gutter: stable;
scroll-padding-top: 5rem;
}
body {
margin: 0;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
:root {
--kg-vlak:     var(--wp--preset--color--base);
--kg-tekst:    var(--wp--preset--color--contrast);
--kg-zacht:    color-mix(in srgb, var(--wp--preset--color--contrast) 65%, transparent);
--kg-lijn:     color-mix(in srgb, var(--wp--preset--color--contrast) 14%, transparent);
--kg-rand:     color-mix(in srgb, var(--wp--preset--color--contrast) 50%, transparent);
--kg-vlak-op:  color-mix(in srgb, var(--wp--preset--color--contrast) 7%, transparent);
--kg-rood:     color-mix(in srgb, var(--wp--preset--color--accent) 60%, var(--wp--preset--color--contrast));
--kg-rood:     hsl(from var(--wp--preset--color--accent) h 100% 62%);
--kg-op-rood:  #fff;
--kg-knopvlak:        var(--wp--preset--color--accent);
--kg-knopvlak-hover:  #f13239;
--kg-knopvlak-actief: #cc1a20;
}
.kg-licht.kg-licht,
.kg-pagina-licht .kg-inhoud {
--kg-vlak:     var(--wp--preset--color--contrast);
--kg-tekst:    var(--wp--preset--color--base);
--kg-zacht:    color-mix(in srgb, var(--wp--preset--color--base) 65%, transparent);
--kg-lijn:     color-mix(in srgb, var(--wp--preset--color--base) 14%, transparent);
--kg-rand:     color-mix(in srgb, var(--wp--preset--color--base) 50%, transparent);
--kg-vlak-op:  color-mix(in srgb, var(--wp--preset--color--base) 7%, transparent);
--kg-rood:     color-mix(in srgb, var(--wp--preset--color--accent) 60%, var(--wp--preset--color--base));
--kg-knopvlak:        color-mix(in srgb, var(--wp--preset--color--accent) 60%, var(--wp--preset--color--base));
--kg-knopvlak-hover:  color-mix(in srgb, var(--wp--preset--color--accent) 74%, var(--wp--preset--color--base));
--kg-knopvlak-actief: color-mix(in srgb, var(--wp--preset--color--accent) 48%, var(--wp--preset--color--base));
background: var(--kg-vlak);
color: var(--kg-tekst);
}
::selection {
background: var(--wp--preset--color--accent);
color: #fff;
}
:where(a, button, label, summary, .kg-teamduim, .kg-teamloop__kaart) {
-webkit-tap-highlight-color: transparent;
}
:where(button, label, summary, .kg-teamduim, .kg-teamloop__kaart, .kg-knop) {
-webkit-user-select: none;
user-select: none;
}
img,
svg,
video {
max-width: 100%;
height: auto;
}
:where(a):focus-visible,
:where(button, label, input):focus-visible {
outline: 2px solid var(--wp--preset--color--accent);
outline-offset: 3px;
}
:root {
interpolate-size: allow-keywords;
}
.skip-link:not(:focus) {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
}
.wp-site-blocks > main,
.wp-site-blocks > footer {
margin-block-start: 0;
}
.kg-header {
position: sticky;
top: 0;
z-index: 50;
}
.wp-site-blocks > :has(> .kg-header) {
display: contents;
}
.kg-header__balk {
background: var(--wp--preset--color--base);
border-bottom: 1px solid transparent;
}
.kg-header.is-gescrold .kg-header__balk {
background: var(--wp--preset--color--base);
border-bottom-color: var(--kg-lijn);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
.kg-header.is-gescrold .kg-header__balk {
background: color-mix(in srgb, var(--wp--preset--color--base) 85%, transparent);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
}
@media (prefers-reduced-transparency: reduce) {
.kg-header.is-gescrold .kg-header__balk {
background: var(--wp--preset--color--base);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
}
.kg-header.is-verborgen .kg-header__balk {
translate: 0 -100%;
}
.kg-header:focus-within .kg-header__balk,
.kg-header:has(.kg-header__schakelaar:checked) .kg-header__balk {
translate: none;
}
@media (prefers-reduced-motion: no-preference) {
.kg-header__balk {
transition:
translate 0.3s cubic-bezier(0.4, 0, 0.2, 1),
background-color 0.2s linear,
border-color 0.2s linear;
}
.kg-header__binnen {
transition: padding 0.25s ease;
}
}
.kg-header__binnen {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--wp--preset--spacing--30);
width: min(100%, 1320px);
margin-inline: auto;
padding: 0.65rem var(--wp--preset--spacing--30);
}
.kg-header.is-gescrold .kg-header__binnen {
padding-block: 0.4rem;
}
.kg-header__logo {
display: flex;
align-items: center;
gap: 0.7rem;
line-height: 0;
text-decoration: none;
}
.kg-header__logo img {
width: 48px;
height: 48px;
}
.kg-header__woordmerk {
display: flex;
flex-direction: column;
gap: 0.2rem;
font-family: var(--wp--preset--font-family--display);
line-height: 1;
text-transform: uppercase;
}
.kg-header__naam {
color: var(--kg-tekst);
font-size: 1.0625rem;
font-weight: 800;
letter-spacing: 0.02em;
}
.kg-header__plaats {
color: var(--kg-zacht);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.12em;
}
.kg-header__nav {
display: flex;
align-items: center;
gap: var(--wp--preset--spacing--40);
}
.kg-header__nav a,
.kg-header__nav .kg-header__meerkop {
position: relative;
color: var(--kg-tekst);
font-family: var(--wp--preset--font-family--display);
font-size: 0.9375rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
text-decoration: none;
transition: color 0.15s linear;
}
.kg-header__ingang {
padding-block: 0.4rem;
}
.kg-header__ingang::after {
content: "";
position: absolute;
inset-inline: 0;
bottom: 0;
height: 2px;
background: var(--wp--preset--color--accent);
scale: 0 1;
transform-origin: left center;
transition: scale 0.18s ease;
}
.kg-header__ingang:hover {
color: var(--kg-rood);
}
.kg-header__ingang:hover::after,
.kg-header__ingang[aria-current="page"]::after {
scale: 1 1;
}
.kg-header__nav .kg-header__cta {
padding: 0.55rem 1.15rem;
background: var(--kg-knopvlak);
color: var(--kg-op-rood);
transition: filter 0.15s linear;
}
.kg-header__cta:hover {
background: var(--kg-knopvlak-hover);
}
.kg-header__cta[aria-current="page"] {
box-shadow: 0 0 0 2px var(--kg-rand);
}
.kg-header__meer {
position: relative;
}
.kg-header__meerkop {
cursor: pointer;
list-style: none;
}
.kg-header__meerkop::-webkit-details-marker {
display: none;
}
.kg-header__paneel {
position: absolute;
top: calc(100% + 0.9rem);
left: 50%;
z-index: 5;
display: flex;
flex-direction: column;
min-width: 12rem;
padding: 0.5rem 0;
translate: -50% 0;
background: var(--wp--preset--color--base);
border: 1px solid var(--kg-lijn);
box-shadow: 0 18px 40px rgb(0 0 0 / 35%);
}
.kg-header__paneel::before {
content: "";
position: absolute;
inset-inline: 0;
bottom: 100%;
height: 0.9rem;
}
.kg-header__paneel a {
padding: 0.55rem 1.1rem;
font-size: 0.875rem;
white-space: nowrap;
}
.kg-header__paneel a:hover,
.kg-header__paneel a:focus-visible {
color: var(--kg-rood);
background: var(--kg-vlak-op);
}
.kg-header__paneel a[aria-current="page"] {
color: var(--kg-rood);
}
.kg-header__extern {
display: inline-flex;
align-items: baseline;
gap: 0.4em;
}
.kg-header__externicoon {
width: 0.733em;
height: 0.733em;
flex: none;
}
.kg-header__externtekst {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.kg-header__schakelaar {
display: none;
}
.kg-header__schakelaar:focus-visible ~ .kg-header__balk .kg-header__knop {
outline: 2px solid var(--wp--preset--color--accent);
outline-offset: 4px;
}
.kg-header__knop {
display: none;
flex-direction: column;
gap: 5px;
padding: 10px 4px;
cursor: pointer;
}
.kg-header__knop span {
display: block;
width: 26px;
height: 2px;
background: var(--kg-tekst);
}
.kg-header__overlay {
position: fixed;
inset: 0;
z-index: 60;
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--wp--preset--spacing--40);
padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
background: var(--wp--preset--color--base);
visibility: hidden;
opacity: 0;
overscroll-behavior: contain;
transition:
opacity 0.2s ease,
visibility 0.2s;
}
.kg-header__overlay nav {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.kg-header__overlay nav a {
color: var(--kg-tekst);
font-family: var(--wp--preset--font-family--display);
font-size: clamp(2.25rem, 11vw, 3.5rem);
font-weight: 800;
line-height: 1.05;
text-transform: uppercase;
text-decoration: none;
}
.kg-header__overlay nav .kg-header__overlaycta {
color: var(--kg-rood);
}
.kg-header__meeronder {
color: var(--kg-tekst);
font-family: var(--wp--preset--font-family--display);
font-size: clamp(2.25rem, 11vw, 3.5rem);
font-weight: 800;
line-height: 1.05;
text-transform: uppercase;
cursor: pointer;
list-style: none;
}
.kg-header__meeronder::-webkit-details-marker {
display: none;
}
@supports selector(::details-content) {
.kg-header__meergroep::details-content {
block-size: 0;
overflow: hidden;
transition:
block-size 0.32s cubic-bezier(0.4, 0, 0.2, 1),
content-visibility 0.32s allow-discrete;
}
.kg-header__meergroep[open]::details-content {
block-size: auto;
}
@media (prefers-reduced-motion: reduce) {
.kg-header__meergroep::details-content {
transition: none;
}
}
}
.kg-header__ondergroep {
display: flex;
flex-direction: column;
gap: 0.15rem;
padding-block: 0.4rem 0.6rem;
padding-inline-start: 0.1em;
}
.kg-header__overlay nav .kg-header__onder {
font-size: clamp(1.35rem, 6vw, 1.85rem);
font-weight: 700;
}
.kg-header__overlay .kg-header__extern {
align-self: start;
}
.kg-header__sluit {
position: absolute;
top: 1.25rem;
right: var(--wp--preset--spacing--40);
padding: 0.5rem 1.1rem;
border: 1px solid var(--kg-rand);
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.06em;
cursor: pointer;
}
.kg-header__sociaal {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: var(--wp--preset--spacing--40);
padding-top: var(--wp--preset--spacing--30);
border-top: 1px solid var(--kg-lijn);
}
.kg-header__sociaal a {
padding: 0.4rem 0.9rem;
border: 1px solid var(--kg-rand);
border-radius: 999px;
color: var(--kg-zacht);
font-size: 0.875rem;
text-decoration: none;
}
@media (max-width: 860px) {
.kg-header__schakelaar {
display: block;
position: absolute;
opacity: 0;
pointer-events: none;
}
.kg-header__nav {
display: none;
}
.kg-header__knop {
display: flex;
}
.kg-header__schakelaar:checked ~ .kg-header__overlay {
visibility: visible;
opacity: 1;
}
html:has(.kg-header__schakelaar:checked) {
overflow: hidden;
}
html.is-vergrendeld body {
position: fixed;
inset-inline: 0;
width: 100%;
}
}
@media (max-width: 600px) {
.kg-header__plaats {
display: none;
}
}
@media (forced-colors: active) {
.kg-header__balk {
border-bottom: 1px solid;
}
.kg-hero__knop,
.kg-knop,
.kg-rooster__schakelaar label {
border: 1px solid;
}
.kg-reeks__frame img,
.kg-partner__logo {
forced-color-adjust: none;
}
}