/* CTXR — site.css · geport uit de oude site (App.css, Vue-SPA).
Wijzigingen bij de port: @font-face → woff2/woff op /assets/fonts/montserrat/;
verder 1-op-1 — zelfde ids/classes als de geporte markup. */
@font-face {
font-family: 'Montserrat';
src: url('/assets/fonts/montserrat/montserrat-medium.woff2') format('woff2'),
url('/assets/fonts/montserrat/montserrat-medium.woff') format('woff');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Montserrat';
src: url('/assets/fonts/montserrat/montserrat-regular.woff2') format('woff2'),
url('/assets/fonts/montserrat/montserrat-regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Montserrat';
src: url('/assets/fonts/montserrat/montserrat-bold.woff2') format('woff2'),
url('/assets/fonts/montserrat/montserrat-bold.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Montserrat';
src: url('/assets/fonts/montserrat/montserrat-mediumitalic.woff2') format('woff2'),
url('/assets/fonts/montserrat/montserrat-mediumitalic.woff') format('woff');
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Montserrat';
src: url('/assets/fonts/montserrat/montserrat-italic.woff2') format('woff2'),
url('/assets/fonts/montserrat/montserrat-italic.woff') format('woff');
font-weight: normal;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Montserrat';
src: url('/assets/fonts/montserrat/montserrat-bolditalic.woff2') format('woff2'),
url('/assets/fonts/montserrat/montserrat-bolditalic.woff') format('woff');
font-weight: bold;
font-style: italic;
font-display: swap;
}
@keyframes fadeIn {
0% { transform:translateY(1em); opacity: 0; }
100% { transform:translateY(0em); opacity: 1; }
}
@keyframes spinAround {
100% {
-webkit-transform: rotate(360deg);
transform:rotate(360deg);
}
}
html, body {
--color-text:#640d0d;
--color-background:#ffde17;
--color-primary:#FA5D00;
--color-secondary:#ECF6FC;
--color-calltoaction: #006CFF;
--color-highlight: #ffde17;
margin: 0; padding: 0; width:100vw; height:100vh; overflow: hidden;
& *, *::before, *::after {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
}
body {
/* 1080 = 67.5em and 1920 = 120em if em = 16 --- (((vw * viewport total width in px) / 100) / em size) */
font-family: 'Montserrat', sans-serif;
/* this goes to 1920 */
/* font-size: clamp(1rem, 0rem + 2.5vw, 3rem); line-height: 1.2em; overflow: hidden; */
/* this goes to 2160 */
font-size: clamp(1rem, 0.5789rem + 1.0526vw, 2rem); line-height: 1.4em; text-align: center;
background-color: var(--color-background); color: var(--color-text); transition: color 175ms linear, background-color 375ms linear; overflow-x: hidden;
&.theme-dark {
--color-background:#640d0d;
--color-text:#fff;
}
}
h1, h2, h3, h4, h5, h6 { font-weight: 900; line-height: 1em; margin:0;}
h1 { font-size: 2.4em;}
h2 { font-size: 2em; line-height: 1.1em; }
h3 { font-size: 1.4em; line-height: 1.2em; }
h4 { font-size: 1.2em; }
h5 { font-size: 1em; }
h6 { font-size: 1em; }
figure {
margin:0px; padding:0px;
& > picture {
& > img {
vertical-align: bottom; max-width: 100%; max-height: 100%; object-fit: cover;
}
& > svg {
vertical-align: bottom; max-width: 100%; max-height: 100%; object-fit: contain;
}
}
}
a {
color: inherit;
&:hover {
text-decoration: underline!important; cursor: pointer;
}
&.cta {
display: inline-block;
padding:0.75em 1em; background-color: var(--color-text); color: var(--color-background);
text-decoration: none; position: relative;
& span { white-space: nowrap; font-weight: 700; text-decoration: none;}
&::before {
content:''; position: absolute; left:0px; top:0px;
display: block; width:0.5em; height:0.5em; background-color: var(--color-text);
transform: translate(-0.5em, -0.5em) translateZ(0); backface-visibility: hidden; will-change: left, top;
}
&::after {
content:''; position: absolute; right:0px; bottom:0px;
display: block; width:0.75em; height:0.75em; background-color: var(--color-text);
transform: translate(0.75em, 0.75em) translateZ(0); backface-visibility: hidden; will-change: right, bottom;
}
&:hover {
text-decoration: none!important;
&::before {
animation: ctaBefore .75s forwards;
}
&::after {
animation: ctaAfter .75s forwards;
}
}
}
}
@keyframes ctaBefore {
0% { left:0px; top:0px; }
20% { left:calc(100% + 0.5em); top:0px; }
40% { left:calc(100% + 0.5em); top:calc(100% + 0.5em); }
100% { left:0px; top:calc(100% + 0.5em); }
/* 100% { left:0px; top:0px; } */
}
@keyframes ctaAfter{
0% { right:0px; bottom:0px; }
20% { right:calc(100% + 0.75em); bottom:0px; }
40% { right:calc(100% + 0.75em); bottom:calc(100% + 0.75em); }
100% { right:0px; bottom:calc(100% + 0.75em); }
/* 100% { left:0px; top:0px; } */
}
button, .button {
display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; margin: 0; padding: 0.75em 1.5em; border: none; cursor: pointer; position: relative;
font-family: inherit; font-size: 1em; line-height: 1em; font-weight: bold; transition: background-color 0.3s; column-gap: 1em; color: inherit; text-decoration: none!important; box-shadow: none;
& * { pointer-events: none; }
& > i {
height:1em; font-style: normal;
& > * {
height:1em; width: 1em; object-fit:contain;
}
}
& > span { font-size: inherit; font-weight: inherit; }
&:hover { cursor: pointer; text-decoration: none!important; }
}
mark {
background-color: transparent; color:inherit; position: relative; white-space: nowrap;
&::after {
content:''; position: absolute; left:0px; bottom:0px; width: 100%; height:100%; z-index: -1;
mask-image: url('data:image/svg+xml;utf8,');
mask-size: 95% auto;
mask-repeat: no-repeat;
mask-position: left bottom;
transition: background-color 200ms;
background-color: #F4FB48;
}
}
u {
display: inline-block; white-space: nowrap;
position: relative; text-decoration: none;
background-image: url('data:image/svg+xml;utf8,');
background-size: auto 0.3em;
background-repeat: repeat-x;
background-position: left bottom;
&::before {
content:'Get it?'; display: block; position: absolute; left:calc(100% + 2em); bottom:calc(100%);
font-size: 0.6em; line-height: 1em; white-space: nowrap;
}
&::after {
display:block; content:''; position: absolute; z-index: -1;
left:calc(100% + 0.5em); top:0em; width: 2em; height:2em; transform: rotate(110deg);
mask-image: url('data:image/svg+xml;utf8,');
mask-size: 100%;
mask-repeat: no-repeat;
mask-position: center center;
transition: background-color 200ms;
background-color: #000;
}
}
b { font-weight: 700; }
p { font-weight: 500;}
[fadein] {
opacity: 0;
&.in-view {
animation: fadeIn .275s forwards .375s;
}
}
/* @media (prefers-color-scheme: dark) {
body { background-color: #000; color: #fff;}
mark {
&::after { background-color: #ece832;}
}
} */
#app {
--page-padding-x: 2em;
--page-padding-y: 3em;
height:100vh;
/* padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); */
overflow: hidden; overflow-y:auto; scroll-behavior: smooth;
}
#top {
display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center;
padding-top: env(safe-area-inset-top);
padding-left: 0em; padding-right: 1em;
position: sticky; top:0; z-index: 100; transition: background 275ms linear;
& > .nav-toggle {
display: none; flex-direction: column; justify-content: center; gap: 0.32em;
width: 3em; height: 3em; padding: 0.85em; margin: 0; flex-shrink: 0;
background: transparent; border: none; cursor: pointer;
& > span {
display: block; width: 100%; height: 2px; background-color: var(--color-text);
transition: none;
}
}
& > figure {
display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center;
background-color: var(--color-background); padding:2em;
& > picture {
& svg {
width: 3em;
}
}
& > figcaption {
display: none;
font-size: 0.8em; font-weight: 800;
& a { color: inherit; text-decoration: none;}
}
}
& > nav {
margin-left: auto; transition: opacity 275ms linear; padding-right: 1em;
& > ul {
display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; list-style: none; padding: 0px; margin: 0; column-gap: 2em;
& > li {
display: inline-block;
& a {
text-decoration: none; font-weight: 700;
}
}
}
}
& > .nav-cta { flex-shrink: 0; }
/* Mobiel: hamburger links · logo midden · cta rechts; menu klapt uit onder de header */
@media (max-width: 767px) {
display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 0.5em;
padding-right: 0; transition: none;
& > .nav-toggle { display: flex; grid-column: 1; justify-self: start; }
& > figure { grid-column: 2; justify-self: center; padding: 1em; }
& > .nav-cta { grid-column: 3; justify-self: end; margin-right: 1em; font-size: 0.85em; }
& > nav {
position: absolute; top: 100%; left: 0; right: 0;
margin: 0; padding: 0; overflow: hidden; max-height: 0;
background-color: var(--color-background); transition: none;
& > ul {
flex-direction: column; align-items: stretch; column-gap: 0;
padding: 0.5em 0 1.25em;
& > li {
display: block; text-align: center;
& a { display: block; padding: 0.7em 1em; }
}
}
}
}
}
#top.menu-open {
@media (max-width: 767px) {
background-color: var(--color-background);
& > nav { max-height: 24em; transition: max-height 275ms ease; }
& > .nav-toggle {
& > span { transition: transform 200ms ease, opacity 200ms ease; }
& > span:nth-child(1) { transform: translateY(0.45em) rotate(45deg); }
& > span:nth-child(2) { opacity: 0; }
& > span:nth-child(3) { transform: translateY(-0.45em) rotate(-45deg); }
}
}
}
/* Donkere overlay over de pagina wanneer het mobiele menu open is.
Ligt onder de header (z 100) maar boven de pagina-inhoud. */
.nav-scrim {
position: fixed; inset: 0; z-index: 90;
background-color: rgba(0,0,0,0.5);
opacity: 0; pointer-events: none;
transition: none;
}
@media (min-width: 768px) {
.nav-scrim { display: none; }
}
@media (max-width: 767px) {
.nav-scrim.show { opacity: 1; pointer-events: auto; transition: opacity 275ms ease; }
}
#article {
display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center;
padding-left: 2em; padding-right: 2em;
}
#hero {
flex-basis: 100%; text-align: left; scroll-margin-top: 12em;
display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center;
& section {
position: relative; z-index: 1;
flex-basis: 100%; text-align: center; padding-top:2em;
& > a { margin-top: 1em!important;}
}
& figure {
flex-basis: 100%; align-self: stretch;
display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center;
overflow: hidden; position: relative; z-index: 0;
& > picture {
display:block; position: relative; width:100%; aspect-ratio: 1/1;
mask-image: url('data:image/svg+xml;utf8,');
mask-position: center center; mask-size: 100% 100%; mask-repeat: no-repeat; overflow: hidden;
& > video {
position: absolute; top:50%; left:50%; transform: translate(-50%, -50%);
width: auto; height:100%; margin:0; padding:0px;
border:none; object-fit: cover; vertical-align: bottom;
}
}
}
@media (max-width: 640px) {
& > figure {
transform: scale(1.25); transform-origin: center bottom;
}
}
@media (min-width: 640px) {
& > section {
flex-basis: 40%; text-align: left; padding-top: 0px;
& > h1 { padding-right: 1em;}
}
& > figure {
flex-basis: 40%; flex-grow: 1; transform: translateX(2em);
& > picture {
min-width: 640px; height:640px;
}
}
}
@media (min-width: 1280px) {
& > section {
flex-basis: min(560px, 40%); padding-left:0em;
}
& > figure {
flex-basis: min(720px, 60%); flex-grow: 0; justify-content: center; transform: none;
}
}
}
#tours {
padding-top: 4em; padding-bottom: 2em; flex-basis: 820px; scroll-margin-top: 4em;
& h2 { max-width: 640px; margin: 0 auto;}
}
#phone {
flex-basis: 100%; margin-bottom: 4em;
& > picture {
--app-icon-offset: 2.5em;
--app-icon-width: 2.5em;
--app-music-height: 4.5em;
display: block; width: 100%; height:18em; margin: 0 auto;
position: relative;
& > span.phone-outer {
position: absolute; left:50%; top:50%; border:var(--color-text) 2px solid; width:14em; height:18em; transform: translate(-50%, -50%);
}
& > span.phone-inner {
position: absolute; left:50%; top:calc(50% + .5em); border:var(--color-text) 2px solid; width:13em; height:18em; transform: translate(-50%, calc(-50%));
background-color: #fff;
}
& > span.phone-border {
position: absolute; left:50%; top:calc(100% - 1em); border-top:var(--color-text) 2px solid; background-color: var(--color-background); width:20em; height:2em; transform: translate(-50%, 0%);
}
& > span.phone-music {
position: absolute; left:50%; top:calc(50% - 0.75em + var(--app-icon-offset)); transform: translate(-50%, -50%);
width:11.5em; height:var(--app-music-height); background-color: var(--color-text);
display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; padding:0.5em; column-gap: 0.5em;
& > i {
display:inline-block; flex-basis: 2em; width:2em; height:2em; background-color: #fff; color: #fff; flex-shrink: 0; padding:0.25em;
}
& > p {
font-size: 0.5em; line-height: 1.2em; text-align: left; color: #fff; font-weight: 700; margin: 0px; flex-grow: 1;
& > small { font-size: 1em; font-weight: 500;}
}
& > b {
flex-basis: 100%; color: #fff;
display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; column-gap: 0.5em;
& > span.buttie {
width:1em; height:1em;
& > svg {
width: 100%; height:100%;
}
}
& > span.track {
flex-grow: 1; height:2em; background-color: #fff;
mask-image: url('data:image/svg+xml;utf8,');
mask-position: center center; mask-size: 256px 100%; mask-repeat: repeat;
animation: wavyLine 5s infinite; animation-timing-function: linear;
}
}
}
& > span.phone-message {
position: absolute; left:50%; top:1em; transform: translate(-50%, 0%);
width:12em; height:3em; background-color: var(--color-background); z-index: 10; border:var(--color-text) 1px solid;
display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; padding:0.5em; column-gap: 0.5em;
opacity: 0;
& > i {
display:inline-block; width:2em; height:2em; background-color: var(--color-text); color: #fff; flex-shrink: 0; padding:0.25em;
& > svg { width: 100%; height:100%; vertical-align: bottom;}
}
& > p {
font-size: 0.5em; line-height: 1.2em; text-align: left; font-weight: 700; margin: 0px;
}
& > b {
font-size: 0.5em; line-height: 1.2em; padding:1em; background-color: var(--color-text); color: #fff; font-weight: 700; flex-shrink: 0;
}
}
& > i.phone-app {
position: absolute; left:50%; top:50%; transform: translate(-50%, -50%);
width:var(--app-icon-width); height:var(--app-icon-width); background-color: var(--color-text);
&:nth-of-type(1) { top: calc(50% - 7.5em + var(--app-icon-offset)); left:calc(50% - 4.5em);}
&:nth-of-type(2) { top: calc(50% - 7.5em + var(--app-icon-offset)); left:calc(50% - 1.5em);}
&:nth-of-type(3) { top: calc(50% - 7.5em + var(--app-icon-offset)); left:calc(50% + 1.5em);}
&:nth-of-type(4) { top: calc(50% - 7.5em + var(--app-icon-offset)); left:calc(50% + 4.5em);}
&:nth-of-type(5) { top: calc(50% - 4.5em + var(--app-icon-offset)); left:calc(50% - 4.5em);}
&:nth-of-type(6) { top: calc(50% - 4.5em + var(--app-icon-offset)); left:calc(50% - 1.5em);}
&:nth-of-type(7) { top: calc(50% - 4.5em + var(--app-icon-offset)); left:calc(50% + 1.5em);}
&:nth-of-type(8) { top: calc(50% - 4.5em + var(--app-icon-offset)); left:calc(50% + 4.5em);}
&:nth-of-type(9) { top: calc(50% - 1.5em + var(--app-icon-offset) + var(--app-music-height) + 0.5em ); left:calc(50% - 4.5em);}
&:nth-of-type(10) { top: calc(50% - 1.5em + var(--app-icon-offset) + var(--app-music-height) + 0.5em ); left:calc(50% - 1.5em);}
}
}
&.show-notification {
& > picture {
& > span.phone-message {
animation: showNotification 275ms forwards;
}
}
}
}
@keyframes wavyLine {
0% { mask-position: -256px center;}
100% { mask-position: 0% center;}
}
@keyframes showNotification {
0% { opacity: 0; top:0em;}
100% { opacity: 1; top:1em;}
}
#arrange {
display:flex; flex-basis: 100%; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center;
#works {
flex-basis: min(640px, 100%); padding-bottom: 2em; padding-top: 1em; text-align: left;
}
#reorder {
flex-basis: min(640px, 100%); margin-bottom: 3em; overflow: hidden;
& > picture {
display: block; height:18em; width:100%;
position:relative;
& > span {
display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center;
width: 80%; height:3em; margin:.5em auto;
border:currentcolor 2px solid; line-height: 1em; background-color: var(--color-background);
position: absolute; left:50%; top:50%; transform: translate(-50%, -50%) scale(1); will-change: transform;
& > i {
display:inline-block; padding-left:1em;
& > svg { vertical-align: bottom;}
}
& > b { display:inline-block; padding-left:1em;}
&:nth-child(1) { top:1.5em; background-color: #fff; color:#000; animation:reorderFirst 6s infinite; z-index: 1;}
&:nth-child(2) { top:5em; animation:reorderOthers 6s infinite;}
&:nth-child(3) { top:8.5em; animation:reorderOthers 6s infinite; animation-delay: 275ms;}
&:nth-child(4) { top:12em; animation:reorderOthers 6s infinite; animation-delay: 550ms;}
&:nth-child(5) { top:15.5em; animation:reorderOthers 6s infinite; animation-delay: 825ms;}
}
}
}
@media (max-width: 640px) {
max-width: 100vw; justify-content: flex-start;
& > #works { padding-left: 2em;}
& > #reorder { min-width: 640px;}
}
}
@keyframes reorderFirst {
0% { top:1.5em; transform: translate(-50%, -50%) scale(1); }
5% { top:1.5em; transform: translate(-50%, -50%) scale(1.1);}
10% { top: 15.5em; transform: translate(-50%, -50%) scale(1.1);}
30% { top: 15.5em; transform: translate(-50%, -50%) scale(1);}
40% { top: 15.5em; transform: translate(-50%, -50%) scale(1);}
45% { top: 15.5em; transform: translate(-50%, -50%) scale(1.1); }
50% { top: 1.5em; transform: translate(-50%, -50%) scale(1.1); }
60% { top:1.5em; transform: translate(-50%, -50%) scale(1); }
100% { top:1.5em; transform: translate(-50%, -50%) scale(1); }
}
@keyframes reorderOthers {
0% { transform:translate(-50%, -50%); }
10% { transform:translate(-50%, calc(-50% - 3.5em) );}
50% { transform:translate(-50%, calc(-50% - 3.5em) ); }
60% { transform:translate(-50%, -50%); }
100% { transform:translate(-50%, -50%); }
}
#support { flex-basis: min(960px, 100%); padding-bottom: 2em; padding-top: 1em; }
#media {
flex-basis: 100%;
& ul {
display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center;
list-style: none; padding:0px; margin: 0; column-gap: 0em;
& > li {
flex-basis: 8em; padding:1em 2em; flex-shrink: 0; aspect-ratio: 2/1;
}
}
}
#xr {
display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center;
padding-left: 2em; padding-right: 2em; scroll-margin-top: 0em;
}
#immerse {
flex-basis: 100%; padding-top: 8em; padding-bottom: 2em; position: relative; z-index: 1;
& h1 {
position:relative;
&::before {
content:''; display: block; width:1.25em; height:1.25em;
position: absolute; z-index: 1; left:50%; bottom:100%; transform: translate(-50%, -10%); background: #fff;
mask-image: url('data:image/svg+xml;utf8,');
mask-position: center center; mask-size: 100% 100%; mask-repeat: no-repeat;
}
&::after {
content:''; display: block; width:5em; height:5em;
position: absolute; z-index: -1; left:50%; top:50%; transform: translate(-50%, -50%); background: #F500FF;
mask-image: url('data:image/svg+xml;utf8,');
mask-position: center center; mask-size: 100% 100%; mask-repeat: no-repeat;
}
}
}
#tools {
flex-basis: 100%;
display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center;
& #mapping {
flex-basis: min(560px, 50%); text-align: left; align-self: stretch;
display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch;
position: relative; overflow: hidden; min-height: 560px;
& > picture {
display:block; position: absolute; left:0; top:0; right:0; bottom:0; width:100%; height:100%;
}
& figcaption {
position: relative; z-index: 1; padding:1em;
background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
& > h3 { max-width: 320px;}
}
}
& #goggles {
flex-basis: min(560px, 50%); text-align: left; align-self: stretch;
display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch;
position: relative; overflow: hidden; min-height: 560px;
& > picture {
display:block; position: absolute; z-index: 0; left:0; top:0; right:0; bottom:0; width:100%; height:100%;
& > img { width: 100%; height:100%;}
}
& figcaption {
position: relative; z-index: 1; padding:1em;
background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
& > h3 { max-width: 320px;}
}
}
@media (max-width: 1280px) {
}
@media (max-width: 640px) {
min-width: 100vw;
& #mapping {
min-height: 320px; overflow: visible;
}
& #goggles {
min-height: 320px; overflow: visible;
}
}
}
#cases {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
column-gap: 1em; row-gap: 1em; align-items: stretch;
padding-top: 4em; padding-bottom: 4em;
& > h3 {
align-self: start;
text-align: left; padding-top: 2em; padding-bottom: 1em;
}
& > figure {
display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch;
position: relative; overflow: hidden; min-height: 520px;
& > span.certified {
position: absolute; top:1em; left:1em; z-index: 2;
display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center;
column-gap: 0.5em; text-align: left;
& > i {
& > svg { width:2em; height:2em; vertical-align: bottom;}
}
& > span { font-size: 0.6em; font-weight: 700; line-height: 1.2em;}
}
& > picture {
display:block; position: absolute; z-index: 0; left:0; top:0; right:0; bottom:0; width:100%; height:100%;
}
& figcaption {
position: relative; z-index: 1; padding:1em; text-align: left; padding-top: 4em;
background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
& > small { display: block; max-width: 10em; line-height: 1.1em; font-weight: 500; margin-bottom: 0.4em;}
& > h4 { max-width: 10em;}
}
}
/* Tablet: 2-koloms raster, titel blijft de eerste cel */
@media (max-width: 1023px) {
grid-template-columns: 1fr 1fr;
& > figure { min-height: 420px;}
}
/* Mobiel: alles onder elkaar */
@media (max-width: 640px) {
grid-template-columns: 1fr;
& > h3 { text-align: center;}
& > figure { min-height: 320px;}
}
}
#faq {
padding-bottom: 4em; padding-top: 3em; scroll-margin-top: 8em;
& > h2 { margin-bottom: 0.8em; text-align: center; }
& details {
text-align: left; max-width: 720px; width: 100%;
margin-left: auto; margin-right: auto;
& summary {
position: relative; padding:1em 2em 1em 0; list-style: none;
& h4 {
text-align: left;
}
&::-webkit-details-marker {
display: none;
}
&::after {
content:''; display: block; position: absolute; right:0px; top:1em; width:1em; height:1em;
background-color: var(--color-text); transition: transform 175ms ease-in-out;
mask-image: url('data:image/svg+xml;utf8,');
mask-position: center center; mask-size: 100% 100%; mask-repeat: no-repeat;
}
&:hover { cursor: pointer;}
}
&:not(:last-of-type) { border-bottom: var(--color-text) 1px solid;}
&[open] {
& summary {
&::after { transform: rotate(135deg);}
}
}
}
}
#bottom {
/* De footer draagt altijd z'n eigen donkere thema — onafhankelijk van de
geel→zwart-overgang op de home. Zo is hij op élke pagina donker. */
--color-text: #fff;
--color-background: #640d0d;
background-color: #640d0d; color: #fff;
padding-bottom: calc( ( var(--page-padding-y) * 2 ) + env(safe-area-inset-bottom) );
}
#tailored {
position: relative;
& > picture {
display:block; position: absolute; z-index: 0; left:0px; top:0px; width:100%; height:100%;
overflow: hidden;
& > video {
position: absolute; top:50%; left:50%; transform: translate(-50%, -50%);
width: 100%; height:100%; margin:0; padding:0px;
border:none; object-fit: cover; vertical-align: bottom;
}
}
& > figcaption {
position: relative; z-index: 1; padding-top:10em; padding-bottom: 4em; padding-left: max(2em, calc( (100vw - 1280px) / 2 ));
text-align: left; max-width: 50%;
& h2 {
& i { font-style: normal; color: var(--color-highlight);}
}
}
&::after {
content:''; display: block; width:6em; height:6em;
position: absolute; z-index: 3; right: max(2em, calc( (100vw - 1280px) / 2 )); bottom:-2em; background-color: var(--color-highlight);
mask-image: url('data:image/svg+xml;utf8,');
mask-position: center center; mask-size: 100% 100%; mask-repeat: no-repeat;
}
@media (max-width: 640px) {
& > figcaption {
max-width: 65%;
}
}
}
#partners {
padding-top: 2em; padding-left: 2em; padding-right: 2em;
& > ul {
/* Uniforme logo-grid: elk logo in een gelijke cel, gecentreerd en begrensd
op max-hoogte én max-breedte → optisch uitgelijnd ongeacht de vorm. */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1.5em 1em; align-items: center; justify-items: center;
list-style: none; padding: 0; margin: 0 auto 1em; max-width: 1280px;
& > li {
display: flex; align-items: center; justify-content: center;
width: 100%; height: 8em; overflow: hidden;
& > a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
& img { max-height: 5em; max-width: 100%; width: auto; height: auto; object-fit: contain; }
&:first-of-type {
grid-column: 1 / -1;
height: auto; justify-content: flex-start;
text-align: left; padding-bottom: 0.5em;
}
}
}
}
/* Desktop: menu verbergt zich bij scrollen, komt terug bij hover op de header.
Op mobiel niet van toepassing — daar stuurt de hamburger het menu. */
@media (min-width: 768px) {
body.is-scrolled #top nav { opacity: 0; pointer-events: none; }
body.is-scrolled #top:hover { background-color: var(--color-background); }
body.is-scrolled #top:hover nav { opacity: 1; pointer-events: all; }
}
/* actieve menu-link in de gedeelde header */
#top nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.3em; }
/* ============================================================
Subpagina's (about / services / contact) — zelfde vormtaal als home
============================================================ */
.page {
max-width: 1180px; margin: 0 auto;
padding: 4.5em var(--page-padding-x) var(--page-padding-y);
text-align: left;
}
.page-hero { margin-bottom: 3em; }
.page-hero h1 { margin-bottom: 0.4em; }
.lead { font-size: 1.15em; max-width: 38em; }
/* About/Contact-intro: tekst met media (video of afbeelding) ernaast */
.page-about .page-hero,
.page-contact .page-hero {
display: flex; flex-direction: row; align-items: stretch; gap: 2.5em;
}
.page-about .hero-text,
.page-contact .hero-text { flex: 1 1 30em; min-width: 0; align-self: center; }
.page-about .hero-media,
.page-contact .hero-media {
flex: 1 1 24em; min-width: 0; margin: 0; overflow: hidden; min-height: 360px;
}
.page-about .hero-media > video,
.page-contact .hero-media > img {
display: block; width: 100%; height: 100%; object-fit: cover; vertical-align: bottom;
}
@media (max-width: 768px) {
.page-about .page-hero,
.page-contact .page-hero { flex-direction: column; align-items: stretch; gap: 1em; }
/* in kolom-richting werkt flex-basis op de hoogte: reset naar inhoud-hoogte */
.page-about .hero-text, .page-contact .hero-text,
.page-about .hero-media, .page-contact .hero-media { flex: 0 0 auto; }
.page-about .hero-media,
.page-contact .hero-media { min-height: 260px; }
}
/* Sectie met afbeelding naast de tekst (bijv. "Who are you dealing with?") */
.section-split .split {
display: flex; flex-direction: row; align-items: stretch; gap: 2.5em; margin-top: 0.5em;
}
.section-split .split-media { flex: 1 1 22em; min-width: 0; margin: 0; overflow: hidden; min-height: 320px; }
.section-split .split-media > img {
display: block; width: 100%; height: 100%; object-fit: cover; vertical-align: bottom;
}
/* Logo-/grafiek-animatie: niet bijsnijden, gewoon volledig tonen */
.section-split .split-media--contain > img { object-fit: contain; }
.section-split .split-text { flex: 1 1 28em; min-width: 0; align-self: center; }
.section-split .split-text > p { max-width: 44em; margin: 0 0 0.8em; }
@media (max-width: 768px) {
.section-split .split { flex-direction: column; align-items: stretch; gap: 1em; }
.section-split .split-text, .section-split .split-media { flex: 0 0 auto; }
.section-split .split-media { min-height: 240px; }
}
.page-section { padding: 3em 0; border-top: var(--color-text) 1px solid; }
.page-section > h2 { margin-bottom: 0.6em; }
.page-section > p { max-width: 44em; margin: 0 0 0.8em; }
.btn-row { display: flex; flex-wrap: wrap; gap: 1em; margin-top: 1.5em; }
.page .button { border: var(--color-text) 2px solid; }
.page .button:hover { background-color: var(--color-text); color: var(--color-background); }
.cols { display: flex; flex-wrap: wrap; gap: 1.5em; margin-top: 1.5em; }
.cols > * { flex: 1 1 16em; }
.card { border: var(--color-text) 2px solid; padding: 1.5em; }
.card > h3, .card > h4 { margin-bottom: 0.6em; }
.card ul { margin: 0; padding-left: 1.1em; }
.card li { margin: 0.25em 0; }
/* services — prijzen */
.switch { display: inline-flex; gap: 0.5em; margin-top: 1.5em; }
.switch > button {
background-color: transparent; border: var(--color-text) 2px solid;
padding: 0.5em 1.25em; font-weight: 700;
}
.switch > button.active { background-color: var(--color-text); color: var(--color-background); }
.pricing { display: flex; flex-wrap: wrap; gap: 1.25em; align-items: stretch; margin-bottom: 1em; }
.tier {
flex: 1 1 15em; border: var(--color-text) 2px solid; padding: 1.5em;
display: flex; flex-direction: column;
}
.tier > h3 { margin-bottom: 0.3em; }
.tier > p { margin: 0 0 0.5em; }
.tier .price { font-size: 1.8em; font-weight: 900; line-height: 1em; margin: 0.5em 0; }
.tier .price > small { display: block; font-size: 0.45em; font-weight: 500; opacity: 0.7; }
.tier > ul { list-style: none; padding: 0; margin: 0.75em 0; flex-grow: 1; }
.tier > ul > li { padding: 0.3em 0; border-bottom: rgba(0,0,0,0.12) 1px solid; font-size: 0.9em; }
.tier .cta { align-self: flex-start; margin-top: 0.5em; }
.tier .tagline { font-style: italic; opacity: 0.75; margin: 0.75em 0 0; font-size: 0.9em; }
/* contact */
.contact-grid { display: flex; flex-wrap: wrap; gap: 2em 3em; margin-top: 1em; }
.contact-grid > div { flex: 1 1 18em; }
.contact-grid h4 { margin-bottom: 0.5em; }
.contact-grid dl { margin: 0; }
.contact-grid dt { font-weight: 800; margin-top: 0.8em; }
.contact-grid dd { margin: 0; }
.contact-grid a { font-weight: 700; }
/* quotes + merk-afsluiter */
.quote-block { display: flex; flex-direction: row; align-items: center; gap: 2em; margin: 1.5em 0 0; }
.quote-block > .quote-body { min-width: 0; }
.quote-portrait { flex: 0 0 auto; width: 200px; height: 200px; object-fit: cover; vertical-align: bottom; }
.quote { font-size: 1.35em; font-weight: 700; line-height: 1.3em; max-width: 22em; margin: 0.5em 0; }
.quote-author { font-weight: 500; opacity: 0.75; font-size: 0.9em; margin: 0.5em 0 0; }
@media (max-width: 640px) {
.quote-block { flex-direction: column; align-items: flex-start; gap: 1em; }
}
.closure { display: block; text-align: center; font-size: 0.7em; opacity: 0.7; padding: 2.5em var(--page-padding-x) 0; }
@media (max-width: 640px) {
.page { padding-top: 3.5em; }
}