.kg-hero {
--kg-wissel: 900ms;
--kg-wachttijd: 6000ms;
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
background: var(--wp--preset--color--base);
overflow: clip;
}
.kg-hero__film {
position: relative;
aspect-ratio: 3 / 2;
max-height: 54svh;
overflow: clip;
background: #0e1310;
}
.kg-hero__slides {
position: absolute;
inset: 0;
isolation: isolate;
}
.kg-hero__slide {
position: absolute;
inset: 0;
display: block;
opacity: 0;
z-index: 0;
}
.kg-hero__slide img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.kg-hero__slide--vorig {
opacity: 1;
z-index: 1;
}
.kg-hero__slide--actief {
opacity: 1;
z-index: 2;
transition: opacity var(--kg-wissel) ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
.kg-hero__slide--actief {
transition: none;
}
}
.kg-hero__waas {
position: absolute;
inset: 0;
pointer-events: none;
background-image:
radial-gradient(120% 100% at 50% 45%, transparent 38%, rgb(0 0 0 / 55%) 100%),
linear-gradient(to bottom, var(--wp--preset--color--base) 0%, rgb(11 11 12 / 0%) 22%),
linear-gradient(to top, var(--wp--preset--color--base) 0%, rgb(11 11 12 / 88%) 12%, rgb(11 11 12 / 0%) 46%);
background-size: cover;
background-repeat: no-repeat;
}
.kg-hero__waas::after {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23k)' opacity='0.22'/%3E%3C/svg%3E");
background-size: 160px 160px;
background-repeat: repeat;
-webkit-mask-image: linear-gradient(to top, transparent 0%, #000 20%);
mask-image: linear-gradient(to top, transparent 0%, #000 20%);
}
.kg-hero__inhoud {
position: relative;
z-index: 2;
margin-block-start: -2rem;
padding-block-end: clamp(2rem, 6vw, 3.5rem);
}
.kg-hero__kicker {
margin-block-end: 0.75rem;
line-height: 1.6;
text-wrap: balance;
}
.kg-hero__titel {
margin: 0 0 1.25rem;
font-family: var(--wp--preset--font-family--display);
font-size: var(--wp--custom--tekst--hero);
font-weight: 800;
line-height: 0.88;
letter-spacing: -0.025em;
text-transform: uppercase;
display: flex;
flex-direction: column;
text-shadow: 0 2px 24px rgb(0 0 0 / 55%);
}
.kg-hero__lead {
max-width: 44ch;
margin: 0 0 var(--wp--preset--spacing--40);
color: var(--kg-tekst);
font-size: var(--wp--preset--font-size--large);
line-height: 1.5;
text-wrap: pretty;
}
.kg-hero__knoppen {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.kg-hero__knoppen .kg-hero__knop--rooster {
display: none;
}
.kg-hero__voet {
position: relative;
z-index: 2;
border-block-start: 1px solid var(--kg-lijn);
}
.kg-hero__feiten {
display: flex;
flex-wrap: wrap;
gap: 0.4rem 1.25rem;
margin: 0;
padding-block: 0.9rem;
list-style: none;
color: var(--kg-zacht);
font-size: var(--wp--preset--font-size--small);
}
.kg-hero__feiten .kg-hero__feit--sinds {
display: none;
}
@media (pointer: coarse) {
.kg-hero__feit a {
position: relative;
}
.kg-hero__feit a::after {
content: "";
position: absolute;
inset-block: -0.6875rem;
inset-inline: 0;
}
}
.kg-hero__feit {
display: flex;
align-items: baseline;
gap: 0.4rem;
}
.kg-hero__feit strong {
color: var(--kg-tekst);
font-weight: 700;
}
.kg-hero__feit a {
color: inherit;
text-decoration: none;
text-underline-offset: 0.25em;
}
.kg-hero__feit a:hover {
color: var(--kg-tekst);
text-decoration: underline;
}
.kg-hero__sterren {
color: var(--kg-rood);
}
@media (min-width: 56em) {
.kg-hero {
min-height: calc(100svh - var(--kg-kophoogte, 4.5rem));
justify-content: flex-end;
}
.kg-hero__film {
position: absolute;
inset: 0;
aspect-ratio: auto;
max-height: none;
}
.kg-hero__waas {
background-image:
radial-gradient(115% 90% at 55% 42%, transparent 30%, rgb(0 0 0 / 62%) 100%),
linear-gradient(to right, rgb(11 11 12 / 82%) 0%, rgb(11 11 12 / 45%) 38%, rgb(11 11 12 / 0%) 72%),
linear-gradient(to bottom, rgb(11 11 12 / 72%) 0%, rgb(11 11 12 / 0%) 18%),
linear-gradient(to top, var(--wp--preset--color--base) 0%, rgb(11 11 12 / 72%) 26%, rgb(11 11 12 / 0%) 58%);
background-size: cover;
background-repeat: no-repeat;
}
.kg-hero__waas::after {
-webkit-mask-image: linear-gradient(to top, transparent 0%, #000 30%);
mask-image: linear-gradient(to top, transparent 0%, #000 30%);
}
.kg-hero__inhoud {
margin-block-start: 0;
padding-block: clamp(2rem, 5vh, 4rem);
}
.kg-hero__titel {
font-size: clamp(3.5rem, 7.5vw, 7rem);
}
.kg-hero__lead {
max-width: 48ch;
}
.kg-hero__knoppen .kg-hero__knop--rooster {
display: inline-block;
}
.kg-hero__feiten .kg-hero__feit--sinds {
display: flex;
}
.kg-hero__feiten {
gap: 0.5rem 2rem;
padding-block: 1.1rem;
}
.kg-hero__feit + .kg-hero__feit::before {
content: "";
align-self: center;
width: 3px;
height: 3px;
margin-inline-end: 1.6rem;
border-radius: 50%;
background: currentColor;
opacity: 0.5;
}
}