/*
* On The Rocks Media — main.css
* Design system: tokens, cascade layers, scoped reset, base styles, @font-face placeholders
*
* TOKEN SOURCE: Figma file hZvkcpB5xRDUqllEwaeDYJ, frame 68:3 (Home desktop).
* COLOR EXTRACTION: Verified via get_variable_defs MCP tool on 2026-06-12.
* Figma variables: Wit/Beige #f4efea, Donker blauw #002125, Licht blauw 2 #2abdcc.
* Spacing/typography: standard scale — verify exact values against Figma once fonts delivered.
*
* UNIT TRANSLATION RULES (RESEARCH.md Pitfall #11):
* Figma px → rem : divide by 16
* Figma letter-spacing % → em : divide by 100 (e.g. 2% → 0.02em)
* Figma line-height px → unitless : lineHeightPx / fontSizePx
*
* BREAKPOINT CONSTANTS (cannot live in custom props — document here, use literally):
* mobile : base styles (no media query) — ≤ 767px (Figma mobile frame 91:1008)
* tablet : @media (min-width: 768px) — aligns with Elementor tablet breakpoint
* desktop : @media (min-width: 1280px) — Figma Home desktop frame 68:3 implied ~1440px wide
* wide : @media (min-width: 1440px) — Figma standard desktop canvas
*
* ALL CSS CLASSES MUST BE .otr- PREFIXED — prevents WordPress/Elementor collisions (CLAUDE.md).
* NEVER use a global * {} reset — scoped only under .otr-page (SETUP-05, Pitfall #2).
* Use relative paths for all asset references (Pitfall #4).
*/
/* ==========================================================================
1. DESIGN TOKENS — :root custom properties (SETUP-03, Pattern 2)
Consumed everywhere via var(). Defined outside layers so they cascade
to all layers without specificity games.
========================================================================== */
:root {
/* ---------- Colors ----------
* SOURCE: Figma variables extracted via get_variable_defs on file hZvkcpB5xRDUqllEwaeDYJ
* Figma variables: Wit/Beige #f4efea, Donker blauw #002125, Licht blauw 2 #2abdcc */
--otr-color-bg: #002125; /* Figma "Donker blauw" — dark teal/navy background */
--otr-color-bg-alt: #002c32; /* slightly lighter section bg */
--otr-color-surface: #003a40; /* card / elevated surface */
--otr-color-border: #00484f; /* subtle border */
--otr-color-primary: #f4efea; /* Figma "Wit/Beige" — warm cream text */
--otr-color-secondary: #b8d8da; /* muted teal-tinted secondary text */
--otr-color-accent: #2abdcc; /* Figma "Licht blauw 2" — teal/cyan accent */
--otr-color-accent-hover: #4ecfdd; /* lighter teal on hover */
--otr-color-muted: #6a9ea3; /* muted / disabled text */
--otr-color-white: #f4efea; /* Figma "Wit" — warm white */
/* ---------- Spacing scale (rem — base 16 px) ----------
* Consistent 4-point scale up to xl, larger jumps for section-level spacing.
* Sourced from typical 8-point grid; confirm against Figma frame 68:3 padding values. */
--otr-space-2xs: 0.25rem; /* 4px */
--otr-space-xs: 0.5rem; /* 8px */
--otr-space-sm: 0.75rem; /* 12px */
--otr-space-md: 1rem; /* 16px */
--otr-space-lg: 1.5rem; /* 24px */
--otr-space-xl: 2rem; /* 32px */
--otr-space-2xl: 3rem; /* 48px */
--otr-space-3xl: 4rem; /* 64px */
--otr-space-4xl: 6rem; /* 96px */
--otr-space-5xl: 8rem; /* 128px */
/* ---------- Typography — font stacks ----------
* "OTR Heading" and "OTR Body" are placeholder names matching the @font-face blocks below.
* The metric-matched fallback family ("OTR Heading Fallback" / "OTR Body Fallback") sits
* second, then system-ui as ultimate fallback, then the generic category.
* SWAP to real family names when client delivers WOFF2 files. */
--otr-font-heading: "OTR Heading", "OTR Heading Fallback", system-ui, sans-serif;
--otr-font-body: "OTR Body", "OTR Body Fallback", system-ui, sans-serif;
--otr-font-mono: "Courier New", "Courier", monospace;
/* Blijft bestaan zodat de nav-knop apart te sturen is, maar wijst nu gewoon
naar de body-letter — die is zelf Google Sans geworden. */
--otr-font-nav-cta: var(--otr-font-body);
}
/* De hero-kaartenstrip. Precies twee kaarten breed, met een marge rechts, zodat
de strip binnen het scherm eindigt in plaats van er half uit te lopen. De
rechtermarge volgt dezelfde 1600px-cap als --otr-section-px, anders drijft de
strip op ultrabrede schermen weg van de tekstkolom. */
:root {
--otr-hero-card-w: clamp(180px, min(20.5vw, 34vh), 400px);
--otr-hero-card-gap: 1.25rem;
--otr-hero-strip-w: calc(var(--otr-hero-card-w) * 3 + var(--otr-hero-card-gap) * 2);
/* Negatief: de derde kaart hoort half buiten beeld te vallen. */
--otr-hero-strip-right: calc(var(--otr-hero-card-w) * -0.5);
/* Wat er tussen de contentrand links en de strip overblijft, min een marge. */
--otr-hero-col: calc(100vw - var(--otr-section-px) - var(--otr-hero-strip-right)
- var(--otr-hero-strip-w) + var(--otr-hero-card-w) * 0.4
- 2rem);
/* ---------- Font sizes (rem — divide Figma px by 16) ----------
* Minor-third scale (×1.25) starting from 1rem base; confirm display/hero sizes
* against Figma 68:3 heading hierarchy. */
--otr-fs-xs: 0.75rem; /* 12px */
--otr-fs-sm: 0.875rem; /* 14px */
--otr-fs-base: 1rem; /* 16px — body copy */
--otr-fs-md: 1.125rem; /* 18px */
--otr-fs-lg: 1.25rem; /* 20px */
--otr-fs-xl: 1.5rem; /* 24px */
--otr-fs-2xl: 1.875rem; /* 30px */
--otr-fs-3xl: 2.25rem; /* 36px */
--otr-fs-4xl: 3rem; /* 48px — section heading */
--otr-fs-5xl: 3.75rem; /* 60px — hero heading desktop */
--otr-fs-6xl: 4.5rem; /* 72px — display / hero XL */
/* ---------- Line heights (unitless — lineHeightPx / fontSizePx) ---------- */
--otr-lh-tight: 1.1;
--otr-lh-snug: 1.25;
--otr-lh-normal: 1.5;
--otr-lh-relaxed: 1.625;
--otr-lh-loose: 2;
/* ---------- Letter spacing (em — Figma % / 100) ---------- */
--otr-ls-tighter: -0.02em; /* -2% (tight heading) */
--otr-ls-tight: -0.01em; /* -1% */
--otr-ls-normal: 0em;
--otr-ls-wide: 0.05em; /* 5% (label / caps) */
--otr-ls-wider: 0.1em; /* 10% */
/* ---------- Border radii ---------- */
--otr-radius-sm: 0.25rem; /* 4px */
--otr-radius-md: 0.5rem; /* 8px */
--otr-radius-lg: 1rem; /* 16px */
--otr-radius-full: 9999px; /* pill */
/* ---------- Transition defaults ---------- */
--otr-transition-fast: 150ms ease;
--otr-transition-base: 250ms ease;
--otr-transition-slow: 400ms ease;
}
/* ==========================================================================
2. CASCADE LAYER ORDER — declared once here, never redeclared (SETUP-05, Pattern 1)
Later stylesheets APPEND to these layers; they NEVER redefine the order.
Unlayered WP/Elementor CSS wins over ALL layered CSS regardless of specificity —
the .otr- namespace is the primary conflict-prevention mechanism (Pitfall #2).
========================================================================== */
@layer otr-reset, otr-base, otr-components, otr-utilities;
/* ==========================================================================
3. otr-reset LAYER — scoped reset under .otr-page (SETUP-05, Pattern 1)
NEVER a global-star reset — scoped under the layout root to coexist with WP host.
========================================================================== */
@layer otr-reset {
/* box-sizing: border-box via root + inherit (avoids bare star selector) */
.otr-page {
box-sizing: border-box;
}
/* Propagate border-box to all descendants without a bare star selector */
.otr-page section,
.otr-page article,
.otr-page aside,
.otr-page main,
.otr-page header,
.otr-page footer,
.otr-page nav,
.otr-page div,
.otr-page span,
.otr-page a,
.otr-page h1,
.otr-page h2,
.otr-page h3,
.otr-page h4,
.otr-page h5,
.otr-page h6,
.otr-page p,
.otr-page ul,
.otr-page ol,
.otr-page li,
.otr-page figure,
.otr-page figcaption,
.otr-page blockquote,
.otr-page input,
.otr-page button,
.otr-page textarea,
.otr-page select,
.otr-page form,
.otr-page label {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Prevent media from overflowing their containers (Pitfall #9) */
.otr-page img,
.otr-page picture,
.otr-page svg,
.otr-page video {
max-width: 100%;
display: block;
box-sizing: border-box;
}
/* Remove list styling — restore as needed in components */
.otr-page ul,
.otr-page ol {
list-style: none;
}
/* Inherit font in form elements */
.otr-page input,
.otr-page button,
.otr-page textarea,
.otr-page select {
font: inherit;
}
}
/* ==========================================================================
3b. Drag-to-scroll carousels
Every carousel is a real overflow-x scroller, so touch gets native momentum
swiping for free. OTR.dragScroll adds mouse dragging on top and sets
.otr-dragging for the duration of the gesture.
========================================================================== */
.otr-hero__cards,
.otr-cases__grid,
.otr-cases__row,
.otr-reviews__track {
cursor: grab;
overscroll-behavior-x: contain;
}
.otr-dragging {
cursor: grabbing;
user-select: none;
-webkit-user-select: none;
scroll-behavior: auto; /* never fight a smooth-scroll mid-drag */
}
/* Suppress hover states and image ghosting while a drag is in progress. */
.otr-dragging a,
.otr-dragging img { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
.otr-hero__cards,
.otr-cases__grid,
.otr-cases__row,
.otr-reviews__track { scroll-behavior: auto; }
}
/* ==========================================================================
4. otr-base LAYER — base/global styles scoped to .otr-page (Pattern 1)
========================================================================== */
@layer otr-base {
.otr-page {
font-family: var(--otr-font-body);
font-size: var(--otr-fs-base);
line-height: var(--otr-lh-normal);
color: var(--otr-color-primary);
background-color: var(--otr-color-bg);
overflow-x: clip;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
.otr-page h1,
.otr-page h2,
.otr-page h3,
.otr-page h4,
.otr-page h5,
.otr-page h6 {
font-family: var(--otr-font-heading);
line-height: var(--otr-lh-tight);
letter-spacing: var(--otr-ls-tighter);
color: var(--otr-color-primary);
}
.otr-page a {
color: var(--otr-color-accent);
text-decoration: none;
transition: color var(--otr-transition-fast);
}
.otr-page a:hover,
.otr-page a:focus {
color: var(--otr-color-accent-hover);
}
.otr-page p {
max-width: 70ch;
line-height: var(--otr-lh-relaxed);
}
}
/* Global: remove browser default body margin */
html, body { margin: 0; padding: 0; }
/* Extra tokens for Home page components */
:root {
--otr-font-heading: "Google Sans", "DM Sans", system-ui, sans-serif;
--otr-font-body: "Google Sans", "DM Sans", system-ui, sans-serif;
/* Het cursieve accent: de em-woorden in de koppen, de eyebrows, de namen
onder de reviews en het scroll-label. Roboto Serif Light Italic — de
schreefletter is hier het contrast met de rechte Google Sans. */
--otr-font-accent: "Roboto Serif", Georgia, "Times New Roman", serif;
--otr-color-bg-light: #f7f7f7;
--otr-color-bg-warm: #f4efea;
--otr-fs-display: clamp(2rem, 4.4vw, 5.3125rem);
--otr-fs-headline: clamp(2rem, 3.39vw, 4.0625rem);
--otr-fs-section: clamp(1.5rem, 2.34vw, 2.8125rem);
--otr-fs-body-lg: clamp(1rem, 1.25vw, 1.5625rem);
/* De dienstpagina's dragen een hele zin als titel waar de home één woord
heeft. Op dezelfde displaymaat liep die zin naar vijf regels en vulde hij
het halve scherm; Figma houdt er drie. Een stap kleiner (70px @1920). */
--otr-fs-display-sub: clamp(1.875rem, 3.6vw, 4.375rem);
--otr-fs-nav: 1.125rem;
--otr-radius-card: 1.25rem;
/* Horizontal section margin. The clamp is the original behaviour; the
second max() term takes over once the viewport passes ~2000px, growing the
margins so the content column never exceeds 1600px and stays centred.
Below that width nothing changes — laptop and tablet keep the old values.
Full-bleed elements (hero cards, marquee, sliders) don't use this token,
so they keep running to the screen edge. */
--otr-content-max: 1600px;
--otr-section-px: max(clamp(1.5rem, 10.4vw, 12.4375rem), calc((100vw - var(--otr-content-max)) / 2));
--otr-section-py: clamp(4rem, 7vw, 7.5rem);
}
/* Mobile padding token — must be unlayered to beat the unlayered :root above */
@media (max-width: 767px) {
:root { --otr-section-px: 1rem; }
}
/* ==========================================================================
5. otr-components LAYER — all page components
========================================================================== */
@layer otr-components {
/* --------------------------------------------------
BUTTONS
-------------------------------------------------- */
.otr-btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: clamp(2.75rem, 4vw, 3.6875rem);
padding: 0 clamp(1.125rem, 1.5vw, 1.75rem);
border-radius: var(--otr-radius-full);
font-family: var(--otr-font-body);
font-size: clamp(0.9375rem, 1.2vw, var(--otr-fs-nav));
font-weight: 400;
line-height: 1;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
border: none;
transition: opacity 150ms ease, background 150ms ease, transform 150ms ease;
}
.otr-btn--light { background: var(--otr-color-primary); color: var(--otr-color-bg); }
.otr-btn--light:hover { background: #e8e4df; color: var(--otr-color-bg); }
.otr-btn--dark { background: var(--otr-color-bg); color: var(--otr-color-primary); }
.otr-btn--dark:hover { opacity: .85; color: var(--otr-color-primary); }
.otr-btn--accent { background: var(--otr-color-accent); color: var(--otr-color-primary); }
.otr-btn--accent:hover { background: var(--otr-color-accent-hover); color: var(--otr-color-primary); }
.otr-btn--outline { background: transparent; color: var(--otr-color-primary); border: 1px solid var(--otr-color-primary); }
.otr-btn--outline:hover { background: rgba(244,239,234,.1); color: var(--otr-color-primary); }
.otr-btn-circle {
display: inline-flex; align-items: center; justify-content: center;
width: clamp(2.75rem, 4vw, 3.6875rem); height: clamp(2.75rem, 4vw, 3.6875rem);
border-radius: 50%;
text-decoration: none; cursor: pointer; border: none; flex-shrink: 0;
transition: transform 150ms ease, opacity 150ms ease;
}
.otr-btn-circle:hover { transform: scale(1.06); }
.otr-btn-circle--light { background: var(--otr-color-primary); color: var(--otr-color-bg); }
.otr-btn-circle--dark { background: var(--otr-color-bg); color: var(--otr-color-primary); }
.otr-btn-circle--outline { background: transparent; color: var(--otr-color-primary); border: 1px solid var(--otr-color-primary); }
.otr-btn-circle--accent { background: var(--otr-color-accent); color: var(--otr-color-primary); border-color: var(--otr-color-accent); }
/* ── Paired buttons ─────────────────────────────────────────────────────────
Een tekstpil en zijn pijlbol lezen als één knop, dus hover op de ene helft
moet de andere meenemen. Bij hover zwelt er een cirkel vanaf de bol die pil,
tussenruimte en bol tot één capsule vult, terwijl de omtrek van diezelfde
capsule wordt getrokken.
De richting komt uit de documentvolgorde en niet uit een lijst per groep,
omdat de bol op sommige plekken links van de pil staat en op andere rechts.
Het blijven twee losse links naar dezelfde href, zodat toetsenbordfocus,
middelklik en rechtsklik per element blijven werken.
Bewust niet meegenomen: .otr-reviews__nav (vorige en volgende zijn losse
knoppen) en .otr-dienst-item__row (een rij in een lijst, geen knoppaar). */
:root {
/* Half the logo bar's height, so the bar sits half in the dark section and
half in the light one. Keep in step with .otr-marquee's padding. */
--otr-marquee-overlap: 2.75rem;
}
:root {
--otr-pair-gap: 0.5rem; /* de tussenruimte in elke knopgroep */
}
/* OTR.ctaPairs wikkelt pil en bol in deze omhulling. Die is nodig omdat de
knopgroepen zelf padding en marges dragen (.otr-cases__more heeft de
sectiemarge, .otr-cta__actions een ondermarge): een capsule op de groep
zou zo breed worden als de sectie. */
.otr-cta-pair {
position: relative; display: inline-flex; align-items: center;
gap: var(--otr-pair-gap);
border-radius: var(--otr-radius-full);
/* Niet cosmetisch: de vullende cirkel schaalt tot negen keer zijn maat en
moet door deze vorm worden bijgeknipt, anders groeit hij over de pagina. */
overflow: hidden;
isolation: isolate;
}
.otr-cta-pair > * { position: relative; z-index: 1; }
/* De vulling zwelt vanaf de bol, zodat pil, gat en bol één vorm worden. */
.otr-cta-pair::after {
content: ''; position: absolute; inset: 0; z-index: 0;
background: var(--otr-pair-vulling, var(--otr-color-primary));
clip-path: circle(0% at var(--otr-pair-hart, 100%) 50%);
transition: clip-path 560ms cubic-bezier(.22,.61,.36,1) 90ms;
}
/* De bol staat links in sommige groepen en rechts in andere; de vulling
begint in het hart van de bol, anders komt hij van de verkeerde kant. */
.otr-cta-pair--bol-rechts { --otr-pair-hart: calc(100% - var(--otr-pair-bol, 3.6875rem) / 2); }
.otr-cta-pair--bol-links { --otr-pair-hart: calc(var(--otr-pair-bol, 3.6875rem) / 2); }
.otr-cta-pair:is(:hover, :focus-within)::after {
clip-path: circle(160% at var(--otr-pair-hart, 100%) 50%);
}
/* De omtrek wordt op maat getekend (zie OTR.ctaPairs): een uitgerekte
rechthoek maakt van de ronde uiteinden ovalen. */
.otr-cta-pair__trace {
position: absolute; inset: 0; z-index: 3;
width: 100%; height: 100%; pointer-events: none; overflow: visible;
}
.otr-cta-pair__trace path {
fill: none; stroke-width: 2;
stroke: var(--otr-pair-lijn-start, var(--otr-color-accent));
stroke-dasharray: 1; stroke-dashoffset: 1;
transition: stroke-dashoffset 620ms cubic-bezier(.22,.61,.36,1), stroke 300ms linear;
}
.otr-cta-pair:is(:hover, :focus-within) .otr-cta-pair__trace path {
stroke-dashoffset: 0;
stroke: var(--otr-pair-lijn-eind, var(--otr-color-bg));
transition-delay: 0ms, 300ms;
}
/* De variant van een knop zegt op welke ondergrond hij staat, dus die bepaalt
ook waar de lijn begint en eindigt: hij wordt getekend op de ondergrond van
dat moment en eindigt op de vulling die er ondertussen onder schuift. */
.otr-cta-pair:has(.otr-btn--outline) {
--otr-pair-vulling: var(--otr-color-primary);
--otr-pair-lijn-start: var(--otr-color-accent);
--otr-pair-lijn-eind: var(--otr-color-bg);
}
.otr-cta-pair:has(.otr-btn--dark) {
--otr-pair-vulling: #fff;
--otr-pair-lijn-start: var(--otr-color-primary);
--otr-pair-lijn-eind: var(--otr-color-bg);
}
/* Cyaan op cyaan zou wegvallen, dus deze begint crème. */
.otr-cta-pair:has(.otr-btn--accent) {
--otr-pair-vulling: var(--otr-color-accent-hover);
--otr-pair-lijn-start: var(--otr-color-primary);
--otr-pair-lijn-eind: var(--otr-color-bg);
}
.otr-cta-pair:has(.otr-btn--light) {
--otr-pair-vulling: #e8e4df;
--otr-pair-lijn-start: var(--otr-color-bg);
--otr-pair-lijn-eind: var(--otr-color-bg);
}
/* De randen van de losse helften vallen weg zodra de capsule dichtloopt, en de
tekst neemt de kleur van de ondergrond over — dezelfde omkering die het
systeem al doet, nu ook tijdens de beweging. */
.otr-cta-pair:is(:hover, :focus-within) :is(.otr-btn, .otr-btn-circle) {
border-color: transparent;
}
.otr-cta-pair:is(:hover, :focus-within) :is(.otr-btn--outline, .otr-btn-circle--outline),
.otr-cta-pair:is(:hover, :focus-within) :is(.otr-btn--accent, .otr-btn-circle--accent) {
background: transparent; color: var(--otr-color-bg);
}
.otr-cta-pair:is(:hover, :focus-within) :is(.otr-btn--dark, .otr-btn-circle--dark),
.otr-cta-pair:is(:hover, :focus-within) :is(.otr-btn--light, .otr-btn-circle--light) {
background: transparent;
}
.otr-cta-pair:is(:hover, :focus-within) :is(.otr-btn--dark, .otr-btn-circle--dark) {
color: var(--otr-color-bg); opacity: 1;
}
/* De bol groeit los van de capsule; binnen de omhulling zou de rand daardoor
tegen de bijgeknipte vorm aanlopen. */
.otr-cta-pair:is(:hover, :focus-within) .otr-btn-circle { transform: none; }
/* Zonder JavaScript blijft de omhulling weg. Dan geldt nog steeds de gewone
omkering per helft, zodat de knop niet dood aanvoelt. Waar de omhulling er
wél is moet deze regel zwijgen: hij weegt zwaarder dan de capsuleregels en
zou de pil anders vol crème zetten terwijl de vulling eroverheen loopt. */
:is(.otr-hero__cta-group, .otr-cta__actions, .otr-services__cta, .otr-cases__more,
.otr-sdienst-hero__ctas, .otr-dienst-hero__cta, .otr-svac-form__actions,
.otr-contact-form__actions, .otr-free-card__actions):not(:has(.otr-cta-pair)):is(:has(:hover), :has(:focus-visible))
:is(.otr-btn--outline, .otr-btn-circle--outline) {
background: var(--otr-color-primary);
border-color: var(--otr-color-primary);
color: var(--otr-color-bg);
}
@media (prefers-reduced-motion: reduce) {
.otr-cta-pair::after { transition: none; }
.otr-cta-pair__trace path { transition: none; }
}
.otr-tag {
display: inline-flex; align-items: center;
padding: 0.4375rem 0.875rem;
border-radius: var(--otr-radius-full);
border: 1px solid var(--otr-color-primary);
color: var(--otr-color-primary);
font-size: 1rem; font-weight: 400; line-height: 1;
white-space: nowrap;
}
/* --------------------------------------------------
HOUSE ICONS
Drawn for On The Rocks rather than taken from the emoji font, which renders
differently on every device. They size with the surrounding text (1em) and
inherit its colour, so one rule covers every place they appear.
-------------------------------------------------- */
.otr-icon {
display: inline-block;
vertical-align: -0.12em;
flex: none;
}
/* Flame beside the Cases link: accent colour so it reads as a mark, not a letter. */
.otr-nav__flame {
color: var(--otr-color-accent);
font-size: 1.15em;
/* Zet het vak gelijk met het woord. De vlam staat binnen dat vak al
gecentreerd (zie de translate in otr_icon), dus hier hoeft geen tweede
correctie voor de tekening zelf meer bij. */
vertical-align: -0.32em;
margin-left: 0.08em;
}
/* --------------------------------------------------
MEGA MENU
-------------------------------------------------- */
.otr-megamenu {
position: absolute; top: 100%; left: 0; right: 0;
background: var(--otr-color-bg-warm);
border-radius: 0 0 var(--otr-radius-card) var(--otr-radius-card);
z-index: 98;
clip-path: inset(0 0 100% 0 round 0 0 1.25rem 1.25rem);
transition: clip-path 380ms cubic-bezier(.4,0,.2,1);
pointer-events: none;
}
.otr-megamenu--open {
clip-path: inset(0 0 0% 0 round 0 0 1.25rem 1.25rem);
pointer-events: all;
}
/* Het raster zette elke groep op een vaste rij, dus onder Branding en Foto —
met hun drie subdiensten — bleef een gat staan tot Video met zijn zes was
uitgelopen. Met kolommen stroomt elke groep door naar de eerste vrije plek,
zodat Website en Graphic Design meteen aansluiten. Out of the Box staat
ernaast als eigen blok. */
.otr-megamenu {
max-height: calc(100vh - 6rem);
overflow-y: auto;
overscroll-behavior: contain;
}
.otr-megamenu__inner {
padding: clamp(1.5rem,2.6vw,2.5rem) var(--otr-section-px) clamp(1.5rem,2.4vw,2.25rem);
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(14rem, 19rem);
gap: clamp(1.5rem, 3vw, 3.5rem);
align-items: start;
}
.otr-megamenu__grid {
column-count: 3;
column-gap: clamp(2rem,5vw,5rem);
}
.otr-megamenu__col {
break-inside: avoid;
display: flex; flex-direction: column;
padding-bottom: clamp(1.25rem,2.4vw,2.25rem);
}
.otr-megamenu__label {
display: inline-flex; align-items: center; justify-content: center;
align-self: flex-start;
height: 2.875rem; padding: 0 1.125rem;
border: 1px solid var(--otr-color-bg);
border-radius: var(--otr-radius-full);
font-size: clamp(1rem, 1.5vw, 1.5625rem); font-weight: 400;
color: var(--otr-color-bg); text-decoration: none;
margin-bottom: var(--otr-space-md);
transition: background 150ms ease, color 150ms ease;
}
.otr-megamenu__label:hover { background: var(--otr-color-bg); color: var(--otr-color-primary); }
.otr-megamenu__list { list-style: none; padding-left: 1.375rem; }
.otr-megamenu__item { border-bottom: 1px solid var(--otr-color-bg); }
.otr-megamenu__link {
display: flex; align-items: center; justify-content: space-between;
gap: 1rem; padding: clamp(0.4375rem,0.7vw,0.625rem) 0;
text-decoration: none; color: var(--otr-color-bg);
transition: opacity 150ms ease;
}
.otr-megamenu__link:hover { opacity: .7; color: var(--otr-color-bg); }
.otr-megamenu__link-info { display: flex; flex-direction: column; gap: 0.2rem; }
.otr-megamenu__link-title { font-size: var(--otr-fs-nav); font-weight: 400; color: var(--otr-color-bg); }
.otr-megamenu__link-sub { font-size: var(--otr-fs-sm); color: rgba(0,33,37,.5); }
/* Minder breedte: het blok onder de kolommen, en twee kolommen in plaats van
drie — anders worden de rijtjes zo smal dat de titels gaan afbreken. Geen
media query maar een klasse: het menu wordt geschaald, en de effectieve
breedte (menubreedte ÷ schaal) weet alleen het script. */
.otr-megamenu--smal .otr-megamenu__inner { grid-template-columns: 1fr; }
.otr-megamenu--smal .otr-megamenu__grid { column-count: 2; }
/* ── Out of the Box ──────────────────────────────────────────────────────
Geen rijtje subdiensten maar een uitnodiging: donker blok, een zin waarin
het laatste woord blijft wisselen, en één weg naar contact. */
.otr-megamenu__oob {
display: flex; flex-direction: column;
gap: clamp(.625rem, 1vw, 1rem);
padding: clamp(1.25rem, 1.9vw, 1.875rem);
border-radius: var(--otr-radius-card);
background: var(--otr-color-bg);
color: var(--otr-color-primary);
text-decoration: none;
transition: transform 300ms cubic-bezier(.22,.61,.36,1), box-shadow 300ms ease;
}
.otr-megamenu__oob:hover {
transform: translateY(-3px);
box-shadow: 0 1.25rem 2.5rem rgba(0,33,37,.22);
color: var(--otr-color-primary);
}
.otr-megamenu__oob-label {
align-self: flex-start;
padding: .4rem .9rem;
border: 1px solid var(--otr-color-primary);
border-radius: var(--otr-radius-full);
font-size: var(--otr-fs-sm);
}
.otr-megamenu__oob-zin {
font-size: clamp(1.125rem, 1.6vw, 1.5rem);
line-height: 1.25;
}
.otr-megamenu__oob-tekst {
font-size: var(--otr-fs-sm);
line-height: 1.55;
opacity: .7;
}
.otr-megamenu__oob-cta {
display: inline-flex; align-items: center; gap: .4rem;
font-size: var(--otr-fs-sm);
color: var(--otr-color-accent);
}
/* Het wisselende woord. De doos houdt de breedte van het langste woord aan,
dus de zin ervoor blijft staan in plaats van heen en weer te springen. */
.otr-woordwissel {
display: inline-grid;
vertical-align: bottom;
overflow: hidden;
}
.otr-woordwissel__woord {
grid-area: 1 / 1;
font-family: var(--otr-font-accent);
font-style: italic; font-weight: 400;
/* De lichte accenttint: gewicht 300 in het donkere cyaan viel weg op het
donkere blok. */
color: var(--otr-color-accent-hover);
white-space: nowrap;
}
.otr-beweegt .otr-woordwissel__woord {
transition: transform 420ms cubic-bezier(.22,.61,.36,1), opacity 420ms ease;
}
.otr-beweegt .otr-woordwissel__woord--uit { transform: translateY(-0.9em); opacity: 0; }
.otr-beweegt .otr-woordwissel__woord--in { transform: translateY(0.9em); opacity: 0; }
@media (prefers-reduced-motion: reduce) {
.otr-woordwissel__woord { transition: none; }
}
.otr-megamenu__arrow {
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0; color: var(--otr-color-bg);
width: 2.25rem; height: 2.25rem; border-radius: 50%;
background: transparent;
transition: background 200ms ease, color 200ms ease, transform 200ms ease;
}
.otr-megamenu__arrow svg { transition: transform 200ms ease; }
.otr-megamenu__link:hover .otr-megamenu__arrow {
background: var(--otr-color-accent);
color: #fff;
transform: scale(1.05);
}
.otr-megamenu__link:hover .otr-megamenu__arrow svg { transform: rotate(45deg); }
.otr-megamenu__link:hover { opacity: 1; }
/* active "What we do" state */
.otr-nav__link--sub.otr-nav__link--active { font-weight: 700; }
.otr-nav__link--sub.otr-nav__link--active .otr-nav__chevron { transform: rotate(180deg); }
.otr-nav__chevron { transition: transform 250ms ease; }
/* --------------------------------------------------
NAV
-------------------------------------------------- */
.otr-nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
display: flex; align-items: center;
gap: var(--otr-space-xl);
padding: 1.1875rem var(--otr-section-px);
transition: background 250ms ease;
}
.otr-nav--scrolled,
.otr-nav--menu-open {
background: rgba(0,33,37,.95);
backdrop-filter: blur(20px) saturate(1.4);
-webkit-backdrop-filter: blur(20px) saturate(1.4);
border-bottom: 1px solid rgba(244,239,234,.06);
}
.otr-nav--dark {
background: rgba(0,33,37,.95);
backdrop-filter: blur(20px) saturate(1.4);
-webkit-backdrop-filter: blur(20px) saturate(1.4);
}
@media (min-width: 768px) {
.otr-nav--dark {
left: clamp(1rem, 5.2vw, 6.25rem);
right: clamp(1rem, 5.2vw, 6.25rem);
top: 1.25rem;
border-radius: 100px;
padding-left: clamp(0.5rem, 5.2vw, 6.1875rem);
padding-right: clamp(0.5rem, 5.2vw, 6.1875rem);
/* Same cap as the content column: the insets stop growing at 100px each,
so past 1920px viewport the pill would keep widening — the max-width
freezes it at its 1920px size and margin-inline centres it (works on a
fixed element because left and right are both set). */
max-width: 1720px;
margin-inline: auto;
}
/* The megamenu tucks up behind the pill, so its square top corners are out
of sight and the pill's rounded corners overlap the panel. A child cannot
paint behind its parent's own background, so the pill face lives on a
::before that sits above the panel (z -1 vs -2) while the links and logo
stay on top of both. The inner padding grows by the same 3.5rem the panel
moved up, keeping the menu text exactly where it was. */
.otr-nav--dark {
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.otr-nav--dark::before {
content: '';
position: absolute; inset: 0; z-index: -1;
border-radius: inherit;
background: rgba(0,33,37,.95);
backdrop-filter: blur(20px) saturate(1.4);
-webkit-backdrop-filter: blur(20px) saturate(1.4);
}
.otr-nav--dark .otr-megamenu {
top: calc(100% - 3.5rem);
z-index: -2;
/* Rounded on top too: the tucked square corners otherwise peek a few px
outside the pill's curved ends. Both clip states need the radius, since
the clip-path is what actually shapes the panel. */
border-radius: var(--otr-radius-card);
clip-path: inset(0 0 100% 0 round 1.25rem);
}
.otr-nav--dark .otr-megamenu--open {
clip-path: inset(0 0 0% 0 round 1.25rem);
}
.otr-nav--dark .otr-megamenu__inner {
padding-top: calc(clamp(2rem, 4vw, 3.5rem) + 3.5rem);
/* The panel is only as wide as the pill, but --otr-section-px measures
from the viewport edge — inside the narrower panel that squeezed the
columns, and on ultra-wide screens (where the token turns into a huge
centering margin) it shoved them off to the right. Subtracting the
pill's own inset puts the menu content on exactly the same x-position
as under the full-width nav, at every viewport width. */
padding-left: calc(var(--otr-section-px) - max(clamp(1rem, 5.2vw, 6.25rem), (100vw - 1720px) / 2));
padding-right: calc(var(--otr-section-px) - max(clamp(1rem, 5.2vw, 6.25rem), (100vw - 1720px) / 2));
}
}
/* WordPress admin bar. It is fixed at the top of the viewport, so anything of
ours that is also fixed to the top has to move down by its height — otherwise
the nav slides underneath it and the logo gets clipped. Only ever applies for
logged-in users; on the static build .admin-bar never exists. */
.admin-bar .otr-nav { top: 32px; }
.admin-bar .otr-mobile-menu { top: 32px; }
@media (min-width: 768px) {
.admin-bar .otr-nav--dark { top: calc(1.25rem + 32px); }
}
@media screen and (max-width: 782px) {
.admin-bar .otr-nav { top: 46px; }
.admin-bar .otr-mobile-menu { top: 46px; }
.admin-bar .otr-nav--dark { top: 46px; }
}
.otr-nav__logo img { display: block; width: 125px; height: auto; }
.otr-nav__links {
display: flex; align-items: center;
gap: clamp(1.25rem, 3vw, 4.5rem);
margin-left: auto;
}
.otr-nav__link {
display: inline-flex; align-items: center; gap: .375rem;
font-size: clamp(0.9375rem, 1.2vw, 1.125rem); font-weight: 400;
color: var(--otr-color-primary); text-decoration: none;
white-space: nowrap;
background: none; border: none; padding: 0; cursor: pointer;
transition: opacity 150ms ease;
}
.otr-nav__link:hover { opacity: .65; color: var(--otr-color-primary); }
.otr-nav__chevron { width: .75rem; flex-shrink: 0; }
.otr-nav__actions { display: flex; align-items: center; gap: 0.5rem; }
/* Geen eigen maat meer: de knop in de balk is dezelfde knop als overal elders
op de site, inclusief gewicht 400. */
.otr-nav__lang {
display: flex; align-items: center; justify-content: center;
width: clamp(2.75rem, 4vw, 3.6875rem); height: clamp(2.75rem, 4vw, 3.6875rem);
border-radius: 50%; border: 1px solid var(--otr-color-primary);
background: transparent; cursor: pointer; padding: 0;
transition: background 150ms ease;
}
.otr-nav__lang:hover { background: rgba(244,239,234,.1); }
.otr-nav__lang img { pointer-events: none; width: 20px; height: auto; }
.otr-nav__actions .otr-nav__lang img { width: 20px; }
.otr-nav__hamburger {
display: none; align-items: center; justify-content: center;
width: 2.5rem; height: 2.5rem;
margin-left: auto;
background: transparent; border: none; cursor: pointer; padding: 0;
color: var(--otr-color-primary);
position: relative; z-index: 301;
}
.otr-icon-close { display: none; }
.otr-nav--menu-open .otr-icon-bars { display: none; }
.otr-nav--menu-open .otr-icon-close { display: block; }
/* --------------------------------------------------
MOBILE MENU
-------------------------------------------------- */
.otr-mobile-menu {
position: fixed; inset: 0; z-index: 300;
background: var(--otr-color-bg-warm);
transform: translateY(-105%);
transition: transform 480ms cubic-bezier(.4,0,.2,1);
overflow-y: auto; overflow-x: hidden;
pointer-events: none;
display: none;
flex-direction: column;
}
.otr-mobile-menu--open { transform: translateY(0); pointer-events: all; }
/* top bar: logo + close */
.otr-mobile-menu__bar {
display: flex; align-items: center; justify-content: space-between;
padding: 1.125rem 1.25rem;
background: rgba(0,33,37,.98);
backdrop-filter: blur(12px);
flex-shrink: 0;
position: sticky; top: 0; z-index: 1;
}
.otr-mobile-menu__logo img { display: block; }
.otr-mobile-menu__close {
display: flex; align-items: center; justify-content: center;
width: 2.5rem; height: 2.5rem;
background: none; border: none; cursor: pointer; padding: 0;
color: var(--otr-color-primary);
}
.otr-mobile-menu__inner {
display: flex; flex-direction: column; justify-content: space-between;
flex: 1;
padding: 2rem 1.25rem 2.5rem;
}
.otr-mobile-menu__nav { display: flex; flex-direction: column; gap: 0; flex: 1; }
.otr-mobile-menu__link {
display: flex; align-items: center; justify-content: space-between;
width: 100%; padding: 1rem 0;
font-family: var(--otr-font-body);
font-size: clamp(1.75rem, 8vw, 2.25rem);
font-weight: 400; line-height: 1.1;
color: var(--otr-color-bg);
text-decoration: none;
border: none; border-bottom: 1px solid rgba(0,33,37,.12);
background: none; cursor: pointer;
transition: color 150ms ease;
letter-spacing: -0.02em;
}
.otr-mobile-menu__group { border-top: 1px solid rgba(0,33,37,.12); }
.otr-mobile-menu__link:hover { color: var(--otr-color-accent); }
.otr-mobile-menu__link--toggle { border-bottom: none; }
.otr-mobile-menu__chevron {
flex-shrink: 0;
color: rgba(0,33,37,.3);
transition: transform 300ms ease;
}
.otr-mobile-menu__link--toggle[aria-expanded="true"] .otr-mobile-menu__chevron {
transform: rotate(180deg);
color: var(--otr-color-accent);
}
/* services accordion */
.otr-mobile-menu__sub {
overflow: hidden;
max-height: 0;
transition: max-height 450ms cubic-bezier(.4,0,.2,1);
border-bottom: 1px solid rgba(0,33,37,.12);
}
.otr-mobile-menu__sub--open { max-height: 80rem; }
.otr-mobile-menu__services {
display: grid; grid-template-columns: 1fr 1fr;
gap: 1.5rem 1rem;
padding: 1.25rem 0 1.75rem;
}
.otr-mobile-menu__svc-label {
display: inline-flex; align-items: center;
padding: 0.375rem 0.875rem;
font-size: 0.875rem; font-weight: 500; letter-spacing: .01em;
color: var(--otr-color-bg);
border: 1px solid rgba(0,33,37,.3);
border-radius: var(--otr-radius-full);
text-decoration: none; margin-bottom: 0.625rem;
transition: background 150ms ease, color 150ms ease;
}
.otr-mobile-menu__svc-label:hover {
background: var(--otr-color-bg);
color: var(--otr-color-primary);
border-color: var(--otr-color-bg);
}
.otr-mobile-menu__svc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; }
.otr-mobile-menu__svc-link {
display: flex; flex-direction: column; gap: 0.1rem;
padding: 0.375rem 0;
text-decoration: none;
border-bottom: 1px solid rgba(0,33,37,.06);
transition: opacity 150ms ease;
}
.otr-mobile-menu__svc-list li:last-child .otr-mobile-menu__svc-link { border-bottom: none; }
.otr-mobile-menu__svc-link strong {
font-size: 0.875rem; font-weight: 400; line-height: 1.2;
color: var(--otr-color-bg);
}
.otr-mobile-menu__svc-link span {
font-size: 0.6875rem; font-weight: 400; line-height: 1.3;
color: rgba(0,33,37,.45);
}
.otr-mobile-menu__svc-link:hover { opacity: .6; }
/* footer */
.otr-mobile-menu__footer {
padding-top: 2rem;
display: flex; flex-direction: column; gap: 1.25rem;
border-top: 1px solid rgba(0,33,37,.12);
margin-top: 2rem;
}
.otr-mobile-menu__footer .otr-btn {
align-self: flex-start; padding-left: 1.25rem; padding-right: 1.25rem;
font-family: var(--otr-font-nav-cta); font-weight: 700;
}
.otr-mobile-menu__contacts { display: flex; flex-direction: column; gap: 0.375rem; }
.otr-mobile-menu__contact-link {
display: flex; align-items: center; gap: 0.75rem;
font-size: 0.9375rem; color: rgba(0,33,37,.5);
text-decoration: none; transition: color 150ms ease;
}
.otr-mobile-menu__contact-link:hover { color: var(--otr-color-bg); }
.otr-mobile-menu__label {
font-weight: 700; font-size: 0.6875rem; letter-spacing: .1em;
color: rgba(0,33,37,.3); text-transform: uppercase;
flex-shrink: 0; width: 1rem;
}
/* --------------------------------------------------
HERO
-------------------------------------------------- */
.otr-hero {
position: relative;
/* Volle viewport, zoals in het ontwerp: de logobalk komt onderaan net in
beeld. De kaartenstrip heeft een vaste hoogte, dus alle extra hoogte komt
als lucht om de strip heen te staan. */
height: 100vh;
height: 100svh;
min-height: 680px;
background: var(--otr-color-bg);
overflow: hidden;
display: flex; align-items: stretch;
}
.otr-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.otr-hero__bg-img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: lighten; opacity: .6; display: block; }
.otr-hero__inner {
position: relative; z-index: 2;
pointer-events: none;
width: calc(100% - var(--otr-hero-strip-right) - var(--otr-hero-strip-w)
+ var(--otr-hero-card-w) * 0.4);
/* Symmetric padding: the card carousel on the right centers itself in the
full hero height (same 5rem top/bottom), so with the stack centered the
same way both middles coincide at every viewport size. The right padding
deliberately keeps the pre-cap clamp: that edge sits mid-screen (against
the card strip), so the centering margin from --otr-section-px would
squeeze the title column on very wide screens. */
padding: 5rem 3rem clamp(5rem, 26vh, 15rem) var(--otr-section-px);
display: flex; flex-direction: column; justify-content: center;
}
.otr-hero__inner > * { pointer-events: auto; }
.otr-hero__title {
font-family: var(--otr-font-body);
/* A touch under the display size: at the full size the title column is
only 6.5em wide, too narrow for "voor ambitieuze" to sit on one line. */
/* 7.6em is de maat die de drie regels afdwingt (zie max-width hieronder), dus
kolombreedte / 7.6 is precies de grootte waarop de titel de kolom vult. De
eerste term is het plafond, zodat hij op ultrabrede schermen niet doorgroeit. */
font-size: min(calc(var(--otr-fs-display) * 1.2), calc(var(--otr-hero-col) / 7.6));
font-weight: 400;
line-height: 1.06;
letter-spacing: -.01em;
color: var(--otr-color-primary);
/* Three lines: "Digital agency" / "voor ambitieuze" / "merken.". The
measure is in em, so it scales with the font and the break falls in
the same place at every width — a
would only be right at one. */
max-width: 7.6em;
/* Same 2rem to the CTA as the CTA has to the scroll-down hint below it. */
margin-bottom: 2rem;
}
.otr-hero__title em { font-family: var(--otr-font-accent); font-style: italic; font-weight: 300; }
.otr-hero__cta-group { display: flex; align-items: center; gap: 0.5rem; }
.otr-hero__circle-btn { display: block; width: clamp(2.75rem, 4vw, 3.6875rem); height: clamp(2.75rem, 4vw, 3.6875rem); flex-shrink: 0; transition: transform 300ms ease; }
.otr-hero__circle-btn:hover { transform: scale(1.06); }
.otr-hero__circle-btn img { display: block; width: 100%; height: 100%; }
.otr-hero__scroll {
position: absolute; z-index: 2;
left: var(--otr-section-px);
bottom: 2.5rem;
display: flex; flex-direction: column; align-items: center; gap: .75rem;
color: var(--otr-color-primary); opacity: .8;
}
.otr-hero__scroll-text {
writing-mode: vertical-lr;
font-size: var(--otr-fs-nav); font-weight: 200; font-style: italic;
font-family: var(--otr-font-accent); letter-spacing: .04em;
}
.otr-hero__scroll-arrow { display: block; }
.otr-hero__fade-left {
position: absolute; top: 0; bottom: 0; z-index: 1;
pointer-events: none;
/* De lagen hieronder vervagen wat erachter langs schuift; het verloop op dit
element zelf laat het daarna in de achtergrond oplossen. */
/* Anderhalve kaart breed en de rechterrand blijft op zijn plek, dus het
verloop steekt een half kaartje voorbij de kniprand van de strook. Daar
ligt geen kaart meer, alleen achtergrond — en juist dat maakt dat de
overgang nergens een lijn krijgt. */
width: calc(var(--otr-hero-card-w) * 1.5);
right: calc(var(--otr-hero-strip-right) + var(--otr-hero-strip-w)
- var(--otr-hero-card-w));
/* Geen dekkende kleur meer op dit element: sinds er gloed, korrel en
ijskristallen achter de ring liggen, tekende dat verloop een harde lijn
op zijn linkerrand. Het wegvagen van de kaarten doet nu een mask op de
ring-box zelf (zie KOUD LICHT onderaan); hier blijft alleen de blur. */
background: none;
}
/* Vier lagen, want een element kan maar één backdrop-filter dragen. Ze stapelen
op elkaar: hoe verder naar links, hoe meer lagen er nog meedoen en hoe sterker
de vervaging. Zo loopt het op in plaats van in stappen te springen — dat
laatste zie je meteen als banden. */
.otr-hero__fade-left i {
position: absolute; inset: 0;
pointer-events: none;
}
.otr-hero__fade-left i:nth-child(1) {
-webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
-webkit-mask-image: linear-gradient(to right, #000 0%, #000 82%, transparent 100%);
mask-image: linear-gradient(to right, #000 0%, #000 82%, transparent 100%);
}
.otr-hero__fade-left i:nth-child(2) {
-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
-webkit-mask-image: linear-gradient(to right, #000 0%, #000 54%, transparent 78%);
mask-image: linear-gradient(to right, #000 0%, #000 54%, transparent 78%);
}
.otr-hero__fade-left i:nth-child(3) {
-webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
-webkit-mask-image: linear-gradient(to right, #000 0%, #000 30%, transparent 54%);
mask-image: linear-gradient(to right, #000 0%, #000 30%, transparent 54%);
}
.otr-hero__fade-left i:nth-child(4) {
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
-webkit-mask-image: linear-gradient(to right, #000 0%, #000 8%, transparent 30%);
mask-image: linear-gradient(to right, #000 0%, #000 8%, transparent 30%);
}
.otr-hero__cards {
position: absolute; top: 0; bottom: 0;
left: auto; right: var(--otr-hero-strip-right);
width: var(--otr-hero-strip-w);
display: flex; align-items: center;
gap: var(--otr-hero-card-gap);
padding: clamp(2.5rem, 6vh, 5rem) 0 clamp(3rem, 8vh, 6rem);
overflow-x: auto;
scrollbar-width: none; -webkit-overflow-scrolling: touch;
pointer-events: all; cursor: grab;
/* Het oogpunt schuift met de muis mee, dus je kijkt langs de wand in plaats
van er frontaal op. Dat kost niets: er beweegt geen enkel element. */
perspective: 2200px;
perspective-origin: calc(50% + var(--otr-hero-oog-x, 0) * 1%)
calc(50% + var(--otr-hero-oog-y, 0) * 1%);
}
.otr-hero__cards::-webkit-scrollbar { display: none; }
.otr-hero__cards--dragging { cursor: grabbing; user-select: none; }
/* The 19vw keeps roughly two and a half cards in the strip at any desktop
width; the old 260px cap broke that above ~1370px, where it let a fourth
card in and the strip stopped reading as "more, just off-screen". The 33vh
ceiling is what keeps air above and below the strip on a 1080p screen — the
card is sized off its width, so without it a wide viewport grew the card
until it nearly touched the nav and the logo bar. */
/* De hoveropbouw loopt via een geregistreerde eigenschap, want een gewone
custom property springt: alleen een getypeerde waarde laat zich animeren.
Zonder @property valt hij terug op een directe sprong, wat niemand breekt. */
@property --otr-card-hover {
syntax: ''; inherits: false; initial-value: 0;
}
.otr-hero__card {
display: block; flex: 0 0 var(--otr-hero-card-w);
aspect-ratio: 387/676; border-radius: var(--otr-radius-card);
overflow: hidden; position: relative;
/* Negatief, dus de kaarten schuiven over elkaar heen. Een flex-gap kan niet
onder nul; dit wel, en OTR.heroWall meet de steek uit de plaatsing zelf. */
margin-right: calc(var(--otr-hero-card-w) * -0.14);
/* OTR.heroWall schrijft deze vier per frame. De beginwaarden zijn wat een
kaart in het midden van de strook krijgt, zodat de wand ook zonder JS
recht en heel oogt. */
--otr-card-draai: 0deg;
--otr-card-kantel: 0deg;
--otr-card-schuif: 0px;
--otr-card-diep: 0px;
--otr-card-zak: 0px;
--otr-card-hover: 0;
transform:
translate3d(var(--otr-card-schuif), var(--otr-card-zak),
calc(var(--otr-card-diep) + var(--otr-card-hover) * 110px))
rotateY(var(--otr-card-draai))
rotate(var(--otr-card-kantel));
/* Geen transition op de transform: die waarden komen per frame binnen, een
overgang zou er alleen achteraan lopen. De hover animeert via de
eigenschap hierboven. */
transition: --otr-card-hover 420ms cubic-bezier(.22,.61,.36,1),
box-shadow 420ms linear;
box-shadow: 0 calc(1.5rem + var(--otr-card-hover) * 1rem)
calc(2.5rem + var(--otr-card-hover) * 1.5rem)
rgba(0, 12, 14, calc(0.28 + var(--otr-card-hover) * 0.22));
backface-visibility: hidden;
}
.otr-hero__card:hover { --otr-card-hover: 1; }
/* De kaarten die schuin wegdraaien vangen minder licht. Dat verschil maakt de
diepte pas leesbaar — zonder dit blijft het een rij rechthoeken. */
.otr-hero__card::after {
content: ''; position: absolute; inset: 0; pointer-events: none;
background: var(--otr-color-bg);
opacity: var(--otr-card-schaduw, 0);
}
.otr-hero__card-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.otr-hero__card-gradient {
position: absolute; bottom: 0; left: 0; right: 0; height: 45%;
background: linear-gradient(to bottom, transparent, var(--otr-color-bg));
pointer-events: none;
}
.otr-hero__card-gradient--right {
top: 0; bottom: 0; right: 0; left: auto;
height: auto; width: 55%;
background: linear-gradient(to right, transparent, var(--otr-color-bg));
}
/* --------------------------------------------------
MARQUEE
-------------------------------------------------- */
.otr-marquee {
background: var(--otr-color-bg-warm);
margin: calc(var(--otr-marquee-overlap) * -1) clamp(1rem,5.2vw,6.25rem)
calc(var(--otr-marquee-overlap) * -1);
border-radius: var(--otr-radius-card);
position: relative; z-index: 10;
overflow: hidden;
padding: 1.625rem 0;
}
.otr-marquee__track {
display: flex; align-items: center;
gap: clamp(2rem,8vw,8rem);
animation: otr-marquee 48s linear infinite;
width: max-content;
}
/* No pause on hover: on wide screens the cursor easily comes to rest on the
strip and the marquee then looked like it had stopped for no reason. */
.otr-marquee__name {
display: flex; align-items: center; height: 2.25rem; flex-shrink: 0;
font-family: var(--otr-font-body);
font-size: clamp(1.125rem, 1.6vw, 1.5rem);
font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--otr-color-bg); white-space: nowrap;
}
.otr-marquee__logo {
height: 2.25rem; width: auto; max-width: 11.25rem;
object-fit: contain; flex-shrink: 0; display: block;
}
@keyframes otr-marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* --------------------------------------------------
SERVICES / WHAT WE DO
-------------------------------------------------- */
.otr-services {
background: var(--otr-color-bg-light);
padding: calc(var(--otr-section-py) + var(--otr-marquee-overlap) + 2.5rem) 0 var(--otr-section-py);
}
.otr-services__inner {
padding: 0 var(--otr-section-px);
display: grid; grid-template-columns: 1fr 1fr;
gap: clamp(2rem,5vw,6rem); align-items: start;
}
.otr-services__title {
font-family: var(--otr-font-body);
font-size: var(--otr-fs-display);
font-weight: 400; line-height: 1.06; letter-spacing: -.01em;
color: var(--otr-color-bg); margin-bottom: var(--otr-space-xl);
}
.otr-services__title em { font-family: var(--otr-font-accent); font-style: italic; font-weight: 300; }
.otr-services__body { font-size: var(--otr-fs-body-lg); line-height: 1.6; color: var(--otr-color-bg); margin-bottom: var(--otr-space-xl); max-width: 32ch; }
.otr-services__prompt { font-size: var(--otr-fs-nav); color: var(--otr-color-bg); margin-bottom: var(--otr-space-lg); max-width: none; }
.otr-services__cta { display: flex; align-items: center; gap: 0.5rem; }
.otr-services__meta { font-size: var(--otr-fs-body-lg); color: rgba(0,33,37,.5); margin-bottom: var(--otr-space-lg); max-width: none; }
/* No rule above the first row or below the last one — the list is bounded by
the white around it, not by a box. */
.otr-services__list { list-style: none; }
.otr-services__item + .otr-services__item { border-top: 1px solid var(--otr-color-bg); }
.otr-services__link {
display: flex; align-items: center; justify-content: space-between;
padding: clamp(1.375rem,2.4vw,2.125rem) 0;
text-decoration: none; color: var(--otr-color-bg);
transition: color 150ms ease;
}
.otr-services__text { display: flex; flex-direction: column; gap: .375rem; }
.otr-services__name { font-size: var(--otr-fs-section); font-weight: 400; line-height: 1.06; }
.otr-services__tags {
font-size: var(--otr-fs-nav); color: rgba(0,33,37,.45);
max-height: 0; overflow: hidden; opacity: 0;
transition: max-height 250ms ease, opacity 200ms ease;
}
.otr-services__link:hover .otr-services__tags {
max-height: 2em; opacity: 1;
}
.otr-services__arrow-circle {
display: inline-flex; align-items: center; justify-content: center;
width: 2.75rem; height: 2.75rem; flex-shrink: 0;
border-radius: 50%; border: 1px solid var(--otr-color-bg);
color: var(--otr-color-bg);
transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}
.otr-services__arrow-circle svg {
transition: transform 200ms ease;
}
.otr-services__link:hover .otr-services__arrow-circle {
background: var(--otr-color-accent);
border-color: var(--otr-color-accent);
color: #fff;
}
.otr-services__link:hover .otr-services__arrow-circle svg {
transform: rotate(45deg);
}
/* --------------------------------------------------
CASES / PORTFOLIO
-------------------------------------------------- */
.otr-cases { background: var(--otr-color-bg-warm); padding: var(--otr-section-py) 0; overflow: hidden; }
.otr-cases__header { padding: 0 var(--otr-section-px); text-align: center; margin-bottom: clamp(2rem,4vw,4rem); }
.otr-cases__eyebrow { font-family: var(--otr-font-accent); font-style: italic; font-weight: 300; font-size: var(--otr-fs-nav); color: var(--otr-color-bg); margin-bottom: var(--otr-space-md); max-width: none; }
.otr-cases__title { font-family: var(--otr-font-body); font-size: var(--otr-fs-headline); font-weight: 400; line-height: 1.15; letter-spacing: -.01em; color: var(--otr-color-bg); }
.otr-cases__title em { font-family: var(--otr-font-accent); font-style: italic; font-weight: 300; }
.otr-cases__grid {
display: flex; gap: 1.25rem;
padding: 0 var(--otr-section-px);
overflow-x: auto; scroll-snap-type: none;
-webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.otr-cases__grid::-webkit-scrollbar { display: none; }
/* Desktop: rows are invisible wrappers — cards participate directly in grid flex */
.otr-cases__row { display: contents; }
.otr-case-card { flex: 0 0 clamp(220px,28vw,454px); position: relative; }
.otr-case-card__link { display: block; text-decoration: none; color: inherit; }
.otr-case-card__img-wrap {
position: relative; border-radius: var(--otr-radius-card); overflow: hidden;
aspect-ratio: 454/676;
}
.otr-case-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 400ms ease; }
.otr-case-card__link:hover .otr-case-card__img { transform: scale(1.04); }
.otr-case-card__overlay {
position: absolute; inset: 0;
background: linear-gradient(to bottom, rgba(0,33,37,.5) 0%, transparent 30%, transparent 55%, var(--otr-color-bg) 100%);
pointer-events: none;
}
.otr-case-card__arrow {
position: absolute; top: 1rem; right: 1rem;
width: 2rem; height: 2rem; border-radius: 50%;
background: rgba(244,239,234,.15); border: 1px solid rgba(244,239,234,.35);
display: inline-flex; align-items: center; justify-content: center;
color: var(--otr-color-primary); pointer-events: none;
}
.otr-case-card__title {
position: absolute; top: var(--otr-space-xl); left: var(--otr-space-xl); right: var(--otr-space-xl);
font-family: var(--otr-font-body); font-size: clamp(1.5rem,2.5vw,2.8125rem);
font-weight: 400; line-height: 1.06; color: var(--otr-color-primary);
}
.otr-case-card__title em { font-family: var(--otr-font-accent); font-style: italic; font-weight: 300; }
.otr-case-card__tags {
position: absolute; bottom: var(--otr-space-xl); left: var(--otr-space-xl);
display: flex; flex-wrap: wrap; gap: .5rem;
z-index: 2;
}
/* Clickable tag on a card: goes to the work page with this filter active.
Same hover recipe as the work-page filter pills. */
a.otr-tag { text-decoration: none; }
.otr-tag--link { cursor: pointer; transition: background 200ms ease, border-color 200ms ease; }
.otr-tag--link:hover,
.otr-tag--link:focus-visible {
border-color: var(--otr-color-accent);
background: rgba(244,239,234,0.08);
}
.otr-cases__more { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: clamp(2rem,4vw,4.5rem); padding: 0 var(--otr-section-px); }
/* --------------------------------------------------
REVIEWS
-------------------------------------------------- */
.otr-reviews { background: var(--otr-color-bg); padding: var(--otr-section-py) var(--otr-section-px); }
.otr-reviews__inner {
display: grid; grid-template-columns: 1fr 2fr;
gap: clamp(3rem,6vw,8rem); align-items: start;
}
.otr-reviews__title { font-family: var(--otr-font-body); font-size: var(--otr-fs-display); font-weight: 400; line-height: 1.18; color: var(--otr-color-primary); margin-bottom: var(--otr-space-xl); }
.otr-reviews__title em { font-family: var(--otr-font-accent); font-style: italic; font-weight: 300; }
.otr-reviews__meta { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem); margin-bottom: var(--otr-space-md); flex-wrap: wrap; }
.otr-reviews__count { font-size: var(--otr-fs-body-lg); color: var(--otr-color-primary); margin-bottom: 0; max-width: none; }
.otr-reviews__count-link { color: inherit; text-decoration: none; }
.otr-reviews__count-link:hover,
.otr-reviews__count-link:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.otr-reviews__rating-stars { font-size: 1.25rem; color: var(--otr-color-accent); display: inline-flex; gap: .12em; white-space: nowrap; }
/* Real horizontal scroller, not a translated slider: that is what gives touch
its native momentum swipe. The prev/next buttons scroll it by one card. */
.otr-reviews__right { min-width: 0; }
.otr-reviews__track {
overflow-x: auto;
overflow-y: hidden;
margin-bottom: var(--otr-space-xl);
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
cursor: grab;
}
.otr-reviews__track::-webkit-scrollbar { display: none; }
.otr-reviews__slider {
display: flex; gap: 1.5rem;
}
.otr-reviews__nav { display: flex; gap: 1rem; }
.otr-reviews__btn { flex-shrink: 0; }
.otr-reviews__btn[disabled] { opacity: .35; cursor: default; }
.otr-review-card {
flex: 0 0 calc(50% - 0.75rem);
display: grid; grid-template-columns: 1fr auto; gap: var(--otr-space-lg) var(--otr-space-md);
padding: clamp(1.5rem,2.5vw,2.5rem) clamp(1.5rem,2.5vw,2.5rem) clamp(1.5rem,2.5vw,2.5rem) 0;
border-radius: var(--otr-radius-card);
}
/* Logo's in hun eigen kleur. Let op: een donker logo verdwijnt op deze kaart —
daar is een lichte variant van de klant voor nodig. */
.otr-review-card__logo {
height: 4.5rem; width: auto; max-width: 15rem;
object-fit: contain; object-position: left center; display: block;
grid-column: 1 / -1; grid-row: 1; align-self: center;
}
.otr-review-card__logo-link { display: block; grid-column: 1 / -1; grid-row: 1; align-self: center; }
/* Geen logo geleverd: de bedrijfsnaam neemt exact dezelfde plek in, zodat een
kaart mét en zonder logo dezelfde hoogte houdt. */
.otr-review-card__brand {
grid-column: 1 / -1; grid-row: 1; align-self: center;
height: 4.5rem; display: flex; align-items: center;
margin: 0; max-width: none;
font-family: var(--otr-font-body);
font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
letter-spacing: .01em;
color: var(--otr-color-primary); opacity: .85;
}
.otr-review-card__brand a { color: inherit; text-decoration: none; }
.otr-review-card__brand a:hover { text-decoration: underline; }
.otr-review-card__logo-link { transition: opacity 150ms ease; }
.otr-review-card__logo-link:hover,
.otr-review-card__logo-link:focus-visible { opacity: .8; }
.otr-review-card__stars { font-size: 1.375rem; color: var(--otr-color-accent); display: flex; gap: .1em; grid-column: 1 / -1; grid-row: 2; align-self: center; white-space: nowrap; }
/* Services as small pills instead of a text line. */
.otr-review-card__service { display: flex; flex-wrap: wrap; gap: 0.375rem; max-width: none; grid-column: 1 / -1; }
.otr-review-card__service-pill {
display: inline-flex; align-items: center;
padding: 0.3125rem 0.75rem;
border: 1px solid rgba(244,239,234,.35);
border-radius: var(--otr-radius-full);
font-size: 0.9375rem; font-weight: 400; line-height: 1;
color: var(--otr-color-primary);
white-space: nowrap;
}
/* Vijf regels, zodat elke kaart even hoog is wat de klant ook schrijft. De
langste review is bijna 400 tekens, de kortste 235 — zonder deze cap
verschilt de hoogte per kaart en staat de rij scheef. */
.otr-review-card__text {
font-family: var(--otr-font-body); font-size: var(--otr-fs-nav); line-height: 1.67;
color: var(--otr-color-primary); max-width: none; grid-column: 1 / -1;
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5;
overflow: hidden;
max-height: calc(5 * 1.67em);
transition: max-height 380ms cubic-bezier(.4, 0, .2, 1);
}
.otr-review-card--open .otr-review-card__text {
-webkit-line-clamp: 999;
max-height: var(--otr-review-full, 60em);
}
@media (prefers-reduced-motion: reduce) {
.otr-review-card__text { transition: none; }
}
/* OTR.reviewMore haalt hidden weg zodra er echt iets is afgekapt; kaarten die
binnen vijf regels passen houden de knop verborgen. */
.otr-review-card__more {
grid-column: 1 / -1; justify-self: start;
margin: -0.25rem 0 0; padding: 0;
background: none; border: 0; cursor: pointer;
font-family: var(--otr-font-accent); font-style: italic; font-weight: 300;
font-size: 0.875rem; color: var(--otr-color-accent);
transition: opacity 150ms ease;
}
.otr-review-card__more:hover { opacity: .75; text-decoration: underline; }
.otr-review-card__footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; grid-column: 1 / -1; }
.otr-review-card__author { font-family: var(--otr-font-accent); font-style: italic; font-weight: 300; font-size: var(--otr-fs-nav); color: var(--otr-color-primary); }
.otr-review-card__verified { font-family: var(--otr-font-accent); font-style: italic; font-weight: 300; font-size: var(--otr-fs-nav); color: var(--otr-color-accent); }
/* --------------------------------------------------
CTA
-------------------------------------------------- */
.otr-cta { position: relative; display: flex; flex-direction: column; align-items: stretch; overflow: hidden; background: var(--otr-color-bg); }
.otr-cta__bg { position: absolute; inset: 0; pointer-events: none; }
.otr-cta__bg-img { width: 100%; height: 100%; object-fit: cover; object-position: center 80%; display: block; }
.otr-cta__bg-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,33,37,1) 0%, rgba(0,33,37,.97) 30%, rgba(0,33,37,.90) 58%, rgba(0,33,37,.83) 80%, rgba(0,33,37,.78) 100%); }
.otr-cta__content { position: relative; z-index: 2; text-align: center; padding: clamp(6rem,12vw,10rem) var(--otr-section-px) clamp(4rem,8vw,7rem); }
.otr-cta--footer-only { padding-top: clamp(5rem, 9vw, 9rem); }
.otr-cta__title { font-family: var(--otr-font-body); font-size: var(--otr-fs-display); font-weight: 400; line-height: 1.06; letter-spacing: -.01em; color: var(--otr-color-primary); margin-bottom: var(--otr-space-2xl); }
.otr-cta__title em { font-family: var(--otr-font-accent); font-style: italic; font-weight: 300; }
.otr-cta__actions { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: var(--otr-space-2xl); }
.otr-cta__contacts { display: flex; align-items: center; justify-content: center; gap: clamp(1.5rem,5vw,5rem); }
.otr-cta__contacts p { font-size: var(--otr-fs-nav); color: var(--otr-color-primary); max-width: none; }
.otr-cta__contacts a { color: var(--otr-color-primary); text-decoration: none; }
.otr-cta__contacts a:hover { color: var(--otr-color-accent); }
.otr-cta__label { color: var(--otr-color-accent); font-weight: 700; }
/* --------------------------------------------------
FOOTER
-------------------------------------------------- */
.otr-footer { background: transparent; position: relative; z-index: 3; }
.otr-footer__inner {
display: grid; grid-template-columns: auto 1fr auto auto;
gap: clamp(3rem,6vw,8rem); align-items: start;
padding: clamp(4rem,6vw,7rem) var(--otr-section-px) clamp(3rem,4vw,5rem);
border-bottom: 1px solid rgba(244,239,234,.2);
}
.otr-footer__logo { display: block; width: 125px; height: auto; margin-bottom: var(--otr-space-xl); }
.otr-footer__tagline { font-size: var(--otr-fs-body-lg); line-height: 1.2; color: var(--otr-color-primary); max-width: none; }
.otr-footer__tagline em { font-family: var(--otr-font-accent); font-style: italic; font-weight: 300; }
.otr-footer__nav { display: flex; flex-direction: column; gap: var(--otr-space-lg); }
.otr-footer__nav a { font-size: var(--otr-fs-nav); font-weight: 400; color: var(--otr-color-primary); text-decoration: none; line-height: 1; transition: opacity 150ms ease; }
.otr-footer__nav a:hover { opacity: .6; color: var(--otr-color-primary); }
.otr-footer__contact { display: flex; flex-direction: column; gap: var(--otr-space-lg); }
.otr-footer__contact p { font-size: var(--otr-fs-nav); font-weight: 400; color: var(--otr-color-primary); max-width: none; }
.otr-footer__contact a { color: var(--otr-color-primary); text-decoration: none; }
.otr-footer__contact a:hover { color: var(--otr-color-accent); }
.otr-footer__label { color: var(--otr-color-accent); font-weight: 700; }
.otr-footer__address { font-style: normal; font-size: var(--otr-fs-nav); font-weight: 400; line-height: 1.8; color: var(--otr-color-primary); }
.otr-footer__social-grid { display: flex; gap: .5rem; }
.otr-footer__social-dot { display: flex; align-items: center; justify-content: center; width: 2.375rem; height: 2.375rem; border-radius: 50%; background: rgba(217,217,217,.2); flex-shrink: 0; color: var(--otr-color-primary); transition: background 150ms ease; }
.otr-footer__social-dot:hover { background: rgba(217,217,217,.35); }
.otr-footer__social-dot svg { width: 1rem; height: 1rem; display: block; }
.otr-footer__meta { display: flex; flex-direction: column; align-items: flex-end; gap: var(--otr-space-xl); }
/* Leadinfo badge: flattened to white with a soft opacity so it sits quietly
in the footer like the other meta items. */
/* Certified Partner-badge heeft een eigen achtergrond en kleur; die niet
platslaan zoals bij een los logo. */
.otr-footer__certified { display: block; border-radius: 4px; }
.otr-footer__bottom {
display: flex; align-items: center; justify-content: space-between; gap: var(--otr-space-xl);
padding: var(--otr-space-xl) var(--otr-section-px);
border-top: 1px solid rgba(244,239,234,.2);
background: var(--otr-color-bg);
}
.otr-footer__copy { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; font-size: 0.8125rem; font-weight: 300; color: var(--otr-color-primary); max-width: none; }
.otr-footer__copy a { color: var(--otr-color-primary); text-decoration: none; }
.otr-footer__copy a:hover { color: var(--otr-color-accent); }
.otr-footer__credit-logo {
height: 1.125rem; width: auto; vertical-align: -0.28em;
margin-left: 0.4em; opacity: 0.9;
}
.otr-footer__credit a:hover .otr-footer__credit-logo { opacity: 1; }
.otr-footer__credit { font-size: 0.8125rem; font-weight: 300; color: var(--otr-color-primary); max-width: none; white-space: nowrap; }
.otr-footer__credit-naam { font-weight: 600; letter-spacing: .04em; }
/* --------------------------------------------------
RESPONSIVE
-------------------------------------------------- */
/* Short viewport */
@media (max-height: 720px) {
.otr-hero { min-height: 560px; }
}
/* Tablet ≤ 1023px */
@media (max-width: 1023px) {
.otr-nav__actions > .otr-btn { padding-left: 0.875rem; padding-right: 0.875rem; font-size: 0.875rem; }
.otr-hero__inner { width: 100%; padding-right: var(--otr-section-px); }
.otr-hero__title { font-size: var(--otr-fs-display); }
.otr-hero__cards,
.otr-hero__fade-left { display: none; }
.otr-services__inner { grid-template-columns: 1fr; }
.otr-reviews__inner { grid-template-columns: 1fr; gap: var(--otr-space-2xl); }
.otr-footer__inner { grid-template-columns: 1fr 1fr; }
}
/* Mobile ≤ 767px */
@media (max-width: 767px) {
:root { --otr-section-px: 1rem; }
/* Nav */
.otr-nav { padding-left: 1rem; padding-right: 1rem; }
.otr-nav__links { display: none; }
.otr-nav__actions > .otr-btn { display: none; }
.otr-nav__lang { display: none; }
.otr-nav__hamburger { display: flex; }
.otr-mobile-menu { display: flex; }
/* Hero — Figma: 745px tall, title@108px, btn@311px, cards@420px */
.otr-hero {
height: 745px;
min-height: unset;
flex-direction: column;
overflow: hidden;
position: relative;
}
.otr-hero__inner {
position: relative; z-index: 2;
width: 100%;
padding: 108px 1.875rem 0;
text-align: center;
align-items: center;
justify-content: flex-start;
flex: 0 0 auto;
gap: 2.375rem;
}
/* Fluid below 430px: a fixed 45px keeps its size while the column shrinks
with the screen, and "voor ambitieuze" then no longer fits on one line.
The divisor is the measure that keeps the three lines intact. */
.otr-hero__title { font-size: min(2.8125rem, calc((100vw - 4.7rem) / 7.9)); line-height: 1.22; margin-bottom: 0; }
.otr-hero__cta-group { justify-content: center; margin-top: 0; padding-bottom: 0; }
.otr-hero__cta-group .otr-btn { padding-left: 1.5rem; padding-right: 1.5rem; }
.otr-hero__cta-group .otr-btn-circle { display: none; }
.otr-hero::before,
.otr-hero::after {
content: ''; position: absolute; top: 0; bottom: 0; width: 3rem; z-index: 4; pointer-events: none;
}
.otr-hero::before { left: 0; background: linear-gradient(90deg, var(--otr-color-bg) 0%, transparent 100%); }
.otr-hero::after { right: 0; background: linear-gradient(-90deg, var(--otr-color-bg) 0%, transparent 100%); }
/* Cards — absolute, exact Figma position */
.otr-hero__cards {
display: flex;
position: absolute;
top: 420px;
bottom: auto;
left: 0;
right: auto;
width: 100%;
height: 242px;
padding: 0;
gap: 10px;
align-items: stretch;
/* Must stay a scroller on mobile, otherwise the strip cannot be swiped —
overflow:hidden here silently killed the touch gesture. */
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
z-index: 1;
}
.otr-hero__cards::-webkit-scrollbar { display: none; }
.otr-hero__cards { perspective: none; }
.otr-hero__card {
flex: 0 0 163px; height: 242px;
margin-right: 0;
box-shadow: none;
}
/* Marquee: no overlap on mobile (Figma: starts at exact hero bottom) */
.otr-marquee { margin: 0; border-radius: 0; }
/* Services: reset desktop overlap, reduce gap after marquee */
.otr-services { margin-top: 0; padding-top: clamp(2.5rem, 6vw, 4rem); }
.otr-services__link { padding: 1.375rem 0; }
.otr-services__name { font-size: 2.1875rem; }
.otr-cases__grid {
display: flex; flex-direction: column; gap: 0.75rem;
overflow-x: visible; padding: 0;
}
.otr-cases__grid > .otr-case-card { display: none; }
.otr-cases__row {
display: flex; gap: 0.75rem;
overflow-x: auto; scroll-snap-type: none;
-webkit-overflow-scrolling: touch; scrollbar-width: none;
padding: 0 1rem;
}
.otr-cases__row::-webkit-scrollbar { display: none; }
.otr-cases__row--offset { padding-left: 1.5rem; }
.otr-case-card { flex: 0 0 75vw; scroll-snap-align: start; }
.otr-reviews__inner { display: block; }
.otr-reviews__left { text-align: center; padding-bottom: var(--otr-space-md); }
.otr-reviews__title { margin-bottom: var(--otr-space-lg); }
.otr-cases__title { font-size: 2.8125rem; }
.otr-services__title { font-size: 2.8125rem; }
.otr-reviews__meta { justify-content: center; margin-bottom: 0; }
.otr-reviews__nav { justify-content: center; margin-top: var(--otr-space-xl); gap: 1.25rem; }
.otr-reviews__btn { width: 3.75rem; height: 3.75rem; }
.otr-review-card { flex: 0 0 80vw; }
.otr-cta { min-height: 0; }
.otr-cta__bg { bottom: auto; height: 55vh; }
.otr-cta__bg-overlay { background: linear-gradient(to bottom, rgba(0,33,37,1) 0%, rgba(0,33,37,.88) 20%, rgba(0,33,37,.80) 45%, rgba(0,33,37,.92) 70%, rgba(0,33,37,1) 100%); }
.otr-cta__content { padding-top: 3rem; padding-bottom: 3rem; }
.otr-cta__title { font-size: clamp(2.5rem, 12vw, var(--otr-fs-display)); margin-bottom: var(--otr-space-xl); }
.otr-cta__actions { margin-bottom: var(--otr-space-xl); flex-wrap: wrap; justify-content: center; }
.otr-cta__contacts { flex-direction: column; gap: var(--otr-space-md); }
.otr-footer__inner {
grid-template-columns: auto 1fr;
gap: var(--otr-space-md) clamp(1.5rem, 8vw, 3rem);
}
.otr-footer__logo { margin-bottom: 0; }
.otr-footer__brand { display: contents; }
.otr-footer__brand > a { grid-column: 1; grid-row: 1; align-self: start; }
.otr-footer__tagline { grid-column: 2; grid-row: 1; align-self: start; margin-top: 0; font-size: 1.5625rem; line-height: 1.2; }
.otr-footer__nav { grid-column: 1; grid-row: 2; align-self: start; }
.otr-footer__meta { grid-column: 2; grid-row: 2; align-self: start; align-items: flex-start; }
.otr-footer__contact { grid-column: 1 / -1; grid-row: 3; gap: 0.25rem; margin-top: var(--otr-space-xl); }
.otr-footer__address { margin-top: var(--otr-space-sm); }
.otr-footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--otr-space-sm); }
}
/* Small mobile ≤ 480px */
@media (max-width: 480px) {
.otr-hero__cta-group { flex-wrap: wrap; }
.otr-hero__cta-group { gap: 0.375rem; }
}
}
/* ==========================================================================
6. otr-utilities LAYER — reserved for utility classes (Phase 2+)
========================================================================== */
@layer otr-utilities {
/* Visually hidden (accessible hidden — screen-reader visible) */
.otr-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
}
/* ==========================================================================
7. @font-face PLACEHOLDERS (SETUP-04, Pattern 4)
PHASE 1: Metric-matched SYSTEM FONT placeholders only.
No real WOFF2 files exist yet — client font delivery is deferred.
Phase 1 ships with local() system fonts using size-adjust/ascent-override
to minimize CLS when real fonts are swapped in.
When client delivers WOFF2 files:
1. Add WOFF2 files to assets/fonts/
2. Uncomment the real @font-face blocks below
3. Tune size-adjust + ascent-override to match the specific metrics of the
delivered typeface (numbers below are starting-point estimates)
4. Add for the 1-2 critical weights
(DO NOT preload until WOFF2 files exist — double-download risk)
========================================================================== */
/* --- PLACEHOLDER: metric-matched heading fallback (Phase 1) --- */
@font-face {
font-family: "OTR Heading Fallback";
src: local("Arial Black"), local("Arial");
size-adjust: 98%;
ascent-override: 95%;
descent-override: 22%;
line-gap-override: 0%;
}
/* --- PLACEHOLDER: metric-matched body fallback (Phase 1) --- */
@font-face {
font-family: "OTR Body Fallback";
src: local("Arial"), local("Helvetica");
size-adjust: 100%;
ascent-override: 100%;
descent-override: 25%;
line-gap-override: 0%;
}
/* ==========================================================================
DIENST PAGE — what-we-do.html
========================================================================== */
.otr-page--light { background: #fff; }
/* HERO */
.otr-dienst-hero {
position: relative;
/* Korter dan een vol scherm: er moet onderaan iets van de volgende sectie
meekomen, anders lijkt de pagina hier op te houden. */
min-height: clamp(26rem, 58vh, 40rem);
display: flex;
align-items: center;
overflow: hidden;
background: var(--otr-color-bg);
}
.otr-dienst-hero__bg { position: absolute; inset: 0; }
.otr-dienst-hero__bg-img { width: 100%; height: 100%; object-fit: cover; object-position: right center; display: block; }
.otr-dienst-hero__bg-overlay {
position: absolute; inset: 0;
background: linear-gradient(to right, rgba(0,33,37,1) 0%, rgba(0,33,37,.95) 28%, rgba(0,33,37,.5) 52%, rgba(0,33,37,0) 72%);
}
.otr-dienst-hero__content {
position: relative; z-index: 2;
/* Left edge follows the content column; the right edge sits mid-screen, so
it keeps the pre-cap clamp — the centering margin would fold the title
into a word-per-line column on ultra-wide screens. */
padding: clamp(7rem,10vw,9.5rem) clamp(1.5rem, 10.4vw, 12.4375rem) clamp(4rem,6vw,6rem) var(--otr-section-px);
max-width: 65%;
}
.otr-dienst-hero__title {
font-size: var(--otr-fs-display-sub); font-weight: 400;
color: var(--otr-color-primary); line-height: 1.18;
margin-bottom: var(--otr-space-xl);
max-width: 49.2vw;
}
.otr-dienst-hero__title em { font-family: var(--otr-font-accent); font-style: italic; font-weight: 300; }
.otr-dienst-hero__body {
font-size: var(--otr-fs-nav); color: var(--otr-color-primary);
line-height: 1.67; margin-bottom: var(--otr-space-3xl);
max-width: 42ch; opacity: .85;
}
.otr-dienst-hero__cta { display: flex; align-items: center; gap: 0.5rem; }
/* DIENSTEN GRID */
.otr-dienst-grid {
background: #fff;
padding: clamp(5rem,9vw,9rem) var(--otr-section-px);
padding-top: calc(clamp(5rem,9vw,9rem) + var(--otr-marquee-overlap));
}
.otr-dienst-grid__title {
font-size: var(--otr-fs-display); font-weight: 400;
color: var(--otr-color-bg); line-height: 1.0;
margin-bottom: clamp(3rem,5vw,5rem);
}
.otr-dienst-grid__title em { font-family: var(--otr-font-accent); font-style: italic; font-weight: 300; }
.otr-dienst-grid__list {
display: grid; grid-template-columns: 1fr 1fr;
column-gap: clamp(2rem,5vw,6rem);
list-style: none; padding: 0; margin: 0;
}
.otr-dienst-item {
padding: clamp(2rem,3.5vw,3.5rem) 0;
border-bottom: 1px solid var(--otr-color-bg);
}
.otr-dienst-item__name {
font-size: clamp(1.75rem,2.5vw,2.8125rem); font-weight: 400;
color: var(--otr-color-bg); line-height: 1.1;
margin-bottom: var(--otr-space-xl);
}
.otr-dienst-item__row {
display: flex; align-items: flex-start;
justify-content: space-between; gap: var(--otr-space-xl);
}
.otr-dienst-item__body {
font-size: var(--otr-fs-nav); color: var(--otr-color-bg);
line-height: 1.67; flex: 1; opacity: .7;
}
.otr-dienst-item { position: relative; cursor: pointer; }
.otr-dienst-item .otr-btn-circle { flex-shrink: 0; align-self: center; }
.otr-dienst-item .otr-btn-circle--outline {
color: var(--otr-color-bg);
border-color: var(--otr-color-bg);
}
/* stretch the circle link across the whole item so the full row is clickable */
.otr-dienst-item .otr-btn-circle::after {
content: ""; position: absolute; inset: 0; z-index: 1;
}
/* hover whole item -> fill button blue (pointer devices only, avoids stuck hover on touch) */
@media (hover: hover) {
.otr-dienst-item:hover .otr-btn-circle--outline {
background: var(--otr-color-accent);
border-color: var(--otr-color-accent);
color: var(--otr-color-primary);
}
}
/* --------------------------------------------------
SINGLE DIENST — wrapper + hero + floating image + media
-------------------------------------------------- */
/* Wrapper — custom props als single source of truth voor hero/float sizing */
.otr-sdienst-top {
position: relative;
--_hero-h: clamp(480px, 44vw, 646px);
--_hero-pt: clamp(9rem, 14vw, 13rem);
--_media-pt: clamp(5rem, 9vw, 9rem);
}
/* Hero: full-width, zelfde dark teal bg als homepage */
.otr-sdienst-hero {
background: var(--otr-color-bg);
position: relative; overflow: hidden;
padding: var(--_hero-pt) var(--otr-section-px) clamp(5rem,10vw,9rem);
min-height: var(--_hero-h);
}
.otr-sdienst-hero__bg {
position: absolute; inset: 0; pointer-events: none;
}
.otr-sdienst-hero__bg-img {
width: 100%; height: 100%; object-fit: cover; mix-blend-mode: lighten; display: block;
}
.otr-sdienst-hero__content {
position: relative; z-index: 2;
/* tekst eindigt altijd aan linkerkant van float; min 260px zodat het nooit te smal wordt */
max-width: max(260px, calc(100% - (var(--_hero-h) + var(--_media-pt) - var(--_hero-pt)) - clamp(2rem, 4vw, 4rem)));
}
.otr-sdienst-hero__title {
font-family: var(--otr-font-body); font-size: var(--otr-fs-display);
font-weight: 400; line-height: 1.05; letter-spacing: -.02em;
color: var(--otr-color-primary); margin: 0 0 var(--otr-space-lg);
}
.otr-sdienst-hero__body {
font-size: var(--otr-fs-body); line-height: 1.65;
color: var(--otr-color-primary); opacity: .85;
margin: 0 0 var(--otr-space-xl);
}
.otr-sdienst-hero__ctas { display: flex; align-items: center; gap: 0.5rem; }
/* "Scroll down" hint under the hero CTAs: label rotated to read downward,
with a long thin arrow beneath it. Desktop only — hidden on mobile. */
.otr-scrolldown {
display: inline-flex; flex-direction: column; align-items: center;
/* In a flex-column parent the box would stretch full-width and the content
would visually center — pin it to the left edge instead. */
align-self: flex-start;
gap: 1.25rem;
margin-top: clamp(2.5rem, 5vw, 4.5rem);
color: var(--otr-color-primary);
opacity: .65;
}
/* In the home hero the hint is pinned to the foot of the section rather than
flowing under the CTAs, so it sits at the same height whatever the title
does — and well clear of the button, as in the design. It hangs off
.otr-hero__inner, which stretches the full hero height; the left offset
matches the inner's own padding, so it lines up with the title. */
.otr-hero .otr-scrolldown {
position: absolute;
left: var(--otr-section-px);
bottom: clamp(6rem, 17.5vh, 12rem);
margin-top: 0;
}
/* Short viewports: instead of dropping the hint, the title+CTA stack scales
down uniformly (proportions intact) so everything keeps fitting in the
80vh hero. Only on really cramped screens the decorative hint goes. */
@media (min-width: 768px) and (max-height: 920px) {
.otr-hero__stack { transform: scale(.85); transform-origin: left center; }
}
@media (min-width: 768px) and (max-height: 700px) {
.otr-hero .otr-scrolldown { display: none; }
}
.otr-scrolldown__label {
writing-mode: vertical-rl;
font-family: var(--otr-font-accent);
font-style: italic; font-weight: 300;
font-size: 1rem; line-height: 1;
letter-spacing: .02em;
white-space: nowrap;
}
/* Short arrow like the design — the viewBox scales the head down with it. */
.otr-scrolldown__arrow { display: block; height: 2.25rem; width: auto; }
/* Floating product image — overlapt hero + media via absolute + pointer-events none */
.otr-sdienst-float {
position: absolute;
right: var(--otr-section-px);
top: var(--_hero-pt); /* = hero padding-top, H1 bovenrand */
/* width/height gekoppeld: bottom = hero_h + media_pt → lijnt uit met video card top */
width: calc(var(--_hero-h) + var(--_media-pt) - var(--_hero-pt));
height: calc(var(--_hero-h) + var(--_media-pt) - var(--_hero-pt)); /* 1:1 */
border-radius: var(--otr-radius-card);
overflow: hidden;
z-index: 5;
pointer-events: none;
}
.otr-sdienst-float__img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Media sectie: 2 kolommen, beige bg */
.otr-sdienst-media {
display: grid; grid-template-columns: 1fr 1fr;
background: var(--otr-color-primary);
}
.otr-sdienst-media__left {
padding: var(--_media-pt) clamp(1rem,2vw,2rem) var(--_media-pt) var(--otr-section-px);
}
.otr-sdienst-media__video {
position: relative; overflow: hidden;
background: var(--otr-color-bg);
border-radius: var(--otr-radius-card);
height: clamp(320px, 40vw, 652px);
}
.otr-sdienst-media__thumb {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.otr-sdienst-media__overlay {
position: absolute; inset: 0; background: rgba(0,33,37,.92);
}
.otr-sdienst-media__play {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
background: none; border: none; cursor: pointer; color: var(--otr-color-primary);
}
.otr-sdienst-media__play svg { width: 64px; height: 64px; opacity: .7; transition: opacity 200ms; }
.otr-sdienst-media__play:hover svg { opacity: 1; }
/* Rechts: tekst op zelfde hoogte als video card top */
.otr-sdienst-media__right {
display: flex; flex-direction: column; justify-content: center;
/* padding-left = linkerkant float = 50vw - section_px - float_breedte */
padding: var(--_media-pt) var(--otr-section-px) var(--_media-pt)
max(1.5rem, calc(50vw - var(--otr-section-px) - (var(--_hero-h) + var(--_media-pt) - var(--_hero-pt))));
}
.otr-sdienst-media__quote {
font-family: var(--otr-font-body); font-size: clamp(3rem,5.5vw,5.3125rem);
font-weight: 400; line-height: 1.05; letter-spacing: -.02em;
color: var(--otr-color-bg); margin: 0 0 var(--otr-space-lg);
}
.otr-sdienst-media__quote em {
font-family: var(--otr-font-accent); font-style: italic; font-weight: 300;
}
.otr-sdienst-media__body {
font-size: var(--otr-fs-body); line-height: 1.65; color: var(--otr-color-bg); margin: 0;
}
/* SINGLE DIENST — Het proces */
.otr-proces {
background: var(--otr-color-bg);
padding: var(--otr-section-py) 0;
overflow: hidden;
}
.otr-proces__header {
padding: 0 var(--otr-section-px);
margin-bottom: clamp(1.5rem,3vw,3rem);
}
.otr-proces__title {
font-family: var(--otr-font-body); font-size: var(--otr-fs-display);
font-weight: 400; letter-spacing: -.02em; color: var(--otr-color-primary);
margin: 0;
}
.otr-proces__title em {
font-family: var(--otr-font-accent); font-style: italic; font-weight: 300;
}
.otr-proces__steps {
position: relative;
padding: 0 var(--otr-section-px);
}
/* Soft accent glow that flies from step to step: the scroll handler picks the
active step and drops the blob on its text block, so it zigzags left/right
down the timeline. The left/top transition is the flight; the drift
keyframes add a slow floating-blob feel on top. Desktop only. */
.otr-proces__glow {
position: absolute; left: 50%; top: 0;
width: clamp(18rem, 30vw, 30rem);
height: clamp(18rem, 30vw, 30rem);
border-radius: 50%;
background: radial-gradient(circle, rgba(42,189,204,.30) 0%, rgba(42,189,204,.12) 40%, transparent 70%);
filter: blur(40px);
pointer-events: none;
transition: top 800ms cubic-bezier(.4,0,.2,1), left 800ms cubic-bezier(.4,0,.2,1);
animation: otr-glow-drift 9s ease-in-out infinite alternate;
will-change: top, left, transform;
}
@keyframes otr-glow-drift {
0% { transform: translate(-62%, -50%) scale(1); }
50% { transform: translate(-42%, -46%) scale(1.15); }
100% { transform: translate(-58%, -54%) scale(0.95); }
}
@media (prefers-reduced-motion: reduce) {
.otr-proces__glow { animation: none; transform: translate(-50%, -50%); }
}
/* Steps stay above the glow. */
.otr-proces__step { position: relative; z-index: 1; }
.otr-proces__centerline {
position: absolute; left: 50%; top: 0; bottom: 0;
width: 1px; transform: translateX(-50%);
pointer-events: none;
}
.otr-proces__centerline-track {
position: absolute; inset: 0;
background: var(--otr-color-primary); opacity: .25;
}
.otr-proces__centerline-progress {
position: absolute; top: 0; left: -2px;
height: 0; width: 5px;
background: var(--otr-color-accent);
will-change: height;
}
.otr-proces__centerline-marker {
position: absolute; bottom: -8px; left: 50%;
width: 14px; height: 14px;
background: var(--otr-color-bg); /* dekt blauwe lijn af */
border: 4px solid var(--otr-color-bg-warm);
transform-origin: center center;
transform: translateX(-50%) rotate(45deg);
will-change: transform;
}
.otr-proces__step {
display: flex;
align-items: flex-start;
gap: clamp(1rem, 2vw, 2rem);
padding: clamp(2rem,4vw,3.5rem) 0;
}
.otr-proces__step-spacer { display: none; }
/* Links: content groeit, circle rechts ervan — allebei in linker helft */
.otr-proces__step--left {
padding-right: calc(50% + clamp(2rem, 3vw, 3.5rem));
}
.otr-proces__step--left .otr-proces__step-content { flex: 1; order: 1; }
.otr-proces__step--left .otr-proces__step-num { order: 2; flex-shrink: 0; }
/* Rechts: circle links, content groeit rechts ervan — allebei in rechter helft */
.otr-proces__step--right {
padding-left: calc(50% + clamp(2rem, 3vw, 3.5rem));
}
.otr-proces__step--right .otr-proces__step-content { flex: 1; order: 2; }
.otr-proces__step--right .otr-proces__step-num { order: 1; flex-shrink: 0; }
.otr-proces__step-title {
font-family: var(--otr-font-body); font-size: clamp(1.75rem,3.5vw,2.8125rem);
font-weight: 400; line-height: 1.1; color: var(--otr-color-primary);
margin: 0 0 clamp(1rem, 2vw, 1.5rem);
}
.otr-proces__step-title em {
font-family: var(--otr-font-accent); font-style: italic; font-weight: 300;
}
.otr-proces__step-rule {
border: none; border-top: 2px solid rgba(244,239,234,.35);
margin: 1.25rem 0 0;
}
.otr-proces__step-body {
font-size: var(--otr-fs-body); line-height: 1.65;
color: var(--otr-color-primary); opacity: .75; margin: 0;
}
.otr-proces__step-num {
width: 44px; height: 44px; border: 1px solid rgba(244,239,234,.4);
border-radius: 50%; display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
background: var(--otr-color-bg);
position: relative; z-index: 2;
align-self: start;
margin-top: calc(clamp(1.75rem, 3.5vw, 2.8125rem) * 1.1 + clamp(1rem, 2vw, 1.5rem) + 0.5rem);
}
.otr-proces__step-num span {
font-family: var(--otr-font-accent); font-style: italic;
font-size: 1.5rem; line-height: 1; color: var(--otr-color-primary);
}
.otr-proces__cta {
display: flex; align-items: center; gap: 0.5rem;
padding: clamp(3rem,6vw,5rem) var(--otr-section-px) 0;
justify-content: center;
}
/* Single dienst + proces mobile */
@media (max-width: 767px) {
.otr-sdienst-float { display: none; }
.otr-sdienst-media { grid-template-columns: 1fr; }
.otr-sdienst-media__left { padding: var(--otr-space-xl) var(--otr-section-px) 0; }
.otr-sdienst-media__video { height: 240px; }
.otr-sdienst-media__right {
justify-content: flex-start;
padding: var(--otr-space-xl) var(--otr-section-px);
}
.otr-proces__steps { padding: 0 var(--otr-section-px); }
.otr-proces__glow { display: none; }
.otr-scrolldown { display: none; }
/* Mobile: rij — circle links, content rechts, lijn door circles */
.otr-proces__step,
.otr-proces__step--left,
.otr-proces__step--right {
flex-direction: row;
align-items: flex-start;
padding-left: 0;
padding-right: 0;
gap: 1.25rem;
}
.otr-proces__step--left .otr-proces__step-num,
.otr-proces__step--right .otr-proces__step-num {
order: 1;
flex-shrink: 0;
margin-top: 0; /* reset desktop offset */
}
.otr-proces__step--left .otr-proces__step-content,
.otr-proces__step--right .otr-proces__step-content {
order: 2;
flex: 1;
}
/* Centerlijn door midden van 44px circle: section-px + 22px */
.otr-proces__centerline {
left: calc(var(--otr-section-px) + 22px);
transform: translateX(-50%);
}
}
/* CASES LIGHT VARIANT */
.otr-cases--light { background: var(--otr-color-primary); }
.otr-cases--light .otr-cases__eyebrow { color: var(--otr-color-bg); opacity: .5; }
.otr-cases--light .otr-cases__title { color: var(--otr-color-bg); }
.otr-cases--light .otr-cases__title em { color: var(--otr-color-bg); }
/* Infinite scroll grid: stack rows vertically, each row is its own scrollable strip */
.otr-cases__infinite-grid {
display: flex; flex-direction: column; gap: 0.75rem;
padding: 0;
}
.otr-cases__infinite-grid .otr-cases__row {
display: flex; flex-direction: row; gap: 0.75rem;
overflow-x: auto; scrollbar-width: none;
padding: 0; flex: none;
}
.otr-cases__infinite-grid .otr-cases__row::-webkit-scrollbar { display: none; }
.otr-cases__infinite-grid .otr-case-card { flex: 0 0 clamp(220px, 28vw, 454px); }
/* FILTER TABS */
.otr-cases__filters {
display: flex; flex-wrap: wrap; gap: 0.5rem;
justify-content: center;
padding: 0 var(--otr-section-px);
margin-bottom: var(--otr-space-xl);
}
.otr-cases__filter {
padding: 0.5rem 1.25rem; border-radius: 999px;
border: 1px solid var(--otr-color-bg);
background: transparent; color: var(--otr-color-bg);
font-family: var(--otr-font-body); font-size: var(--otr-fs-sm);
cursor: pointer; transition: background 150ms ease, color 150ms ease;
}
.otr-cases__filter:hover { background: rgba(0,33,37,.08); }
.otr-cases__filter--active { background: var(--otr-color-bg); color: var(--otr-color-primary); }
/* An active filter must not react to hover — you are already on it. Needed
explicitly because :hover on the base class (0,2,0) outweighs the single
--active class (0,1,0), so the hover tint would win and land behind the
light active text. */
.otr-cases__filter--active:hover { background: var(--otr-color-bg); color: var(--otr-color-primary); }
/* MOBILE — dienst page */
@media (max-width: 767px) {
.otr-break-desktop { display: none; }
.otr-dienst-hero__content { max-width: 100%; padding-top: 8rem; }
.otr-dienst-hero__title { font-size: clamp(2.5rem,10vw,4rem); }
.otr-dienst-grid { padding-left: var(--otr-section-px); padding-right: var(--otr-section-px); }
.otr-dienst-grid__title { font-size: clamp(2.5rem,10vw,4rem); }
.otr-dienst-grid__list { grid-template-columns: 1fr; }
.otr-dienst-item { border-bottom-width: 0.5px; }
.otr-dienst-item__name { font-size: 2.1875rem; }
.otr-cases--light .otr-cases__filters { padding-left: var(--otr-section-px); padding-right: var(--otr-section-px); }
.otr-cases__infinite-grid .otr-case-card { flex: 0 0 75vw; }
}
/* --------------------------------------------------
WORK / CASES OVERVIEW PAGE
-------------------------------------------------- */
/* Active nav link (non-sub) */
.otr-nav__link--active:not(.otr-nav__link--sub) { font-weight: 700; }
/* Hero */
.otr-work-hero {
position: relative; z-index: 0;
background: var(--otr-color-bg);
overflow: hidden;
/* Bottom padding matches the grid's -22rem overlap pull exactly, so the gap
between the filters and the first card is only the grid's own top padding
and stops growing with the viewport. */
padding: clamp(8rem,14vw,13rem) var(--otr-section-px) 22rem;
}
.otr-work-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.otr-work-hero__bg-img {
width: 100%; height: 100%; object-fit: cover;
mix-blend-mode: lighten; opacity: 0.55;
}
.otr-work-hero__title {
font-family: var(--otr-font-body);
font-size: clamp(2.5rem, 6vw, 5.3125rem);
font-weight: 400;
line-height: 1.1;
letter-spacing: -0.01em;
color: var(--otr-color-primary);
margin: 0 0 clamp(2rem, 4vw, 3.5rem);
}
.otr-work-hero__title em {
font-family: var(--otr-font-accent);
font-style: italic; font-weight: 300;
}
/* Filter pills */
.otr-work-filters {
display: flex; flex-wrap: wrap;
gap: clamp(0.4rem, 0.75vw, 0.75rem);
}
.otr-work-filter {
display: inline-flex; align-items: center; gap: 0.5rem;
height: clamp(2.75rem, 4vw, 3.6875rem);
padding: 0 clamp(1rem, 1.5vw, 1.5rem);
border-radius: var(--otr-radius-full);
border: 1px solid rgba(244,239,234,0.35);
background: transparent;
color: var(--otr-color-primary);
font-family: var(--otr-font-body);
font-size: clamp(0.875rem, 1.1vw, var(--otr-fs-nav));
font-weight: 400; white-space: nowrap; cursor: pointer;
transition: background 200ms ease, border-color 200ms ease, opacity 200ms ease;
}
.otr-work-filter:hover {
border-color: var(--otr-color-accent);
background: rgba(244,239,234,0.08);
}
.otr-work-filter--active {
border-color: var(--otr-color-primary);
background: rgba(244,239,234,0.12);
}
/* Same specificity fix as .otr-cases__filter--active above: hold the active
look while hovered instead of letting the base hover tint through. */
.otr-work-filter--active:hover {
border-color: var(--otr-color-primary);
background: rgba(244,239,234,0.12);
}
.otr-work-filter__x {
display: none;
position: relative; width: 0.75rem; height: 0.75rem; flex-shrink: 0;
}
.otr-work-filter__x::before,
.otr-work-filter__x::after {
content: ''; position: absolute; top: 50%; left: 50%;
width: 0.75rem; height: 1.5px; background: currentColor;
border-radius: 1px; transform-origin: center center;
}
.otr-work-filter__x::before { transform: translate(-50%,-50%) rotate(45deg); }
.otr-work-filter__x::after { transform: translate(-50%,-50%) rotate(-45deg); }
.otr-work-filter--active .otr-work-filter__x { display: block; }
.otr-work-filter--clear { border-color: transparent; opacity: 0.55; }
.otr-work-filter--clear:hover { opacity: 1; border-color: rgba(244,239,234,0.35); }
/* Grid wrapper */
.otr-work-grid-wrap {
background: var(--otr-color-bg-warm);
padding: clamp(3rem, 5vw, 6rem) var(--otr-section-px) clamp(1rem, 1.5vw, 2rem);
}
.otr-work-grid-wrap--overlap {
position: relative; z-index: 1;
margin-top: -22rem;
background: linear-gradient(to bottom, transparent 22rem, var(--otr-color-bg-warm) 22rem);
}
.otr-work-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(1rem, 1.25vw, 1.5rem);
}
.otr-work-item--full { grid-column: 1 / -1; }
/* Case item */
.otr-work-item__link { display: block; text-decoration: none; }
.otr-work-item__img-wrap {
border-radius: var(--otr-radius-card);
overflow: hidden; position: relative;
aspect-ratio: 750 / 804;
}
.otr-work-item--full .otr-work-item__img-wrap { aspect-ratio: 1520 / 804; }
.otr-work-item__img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform 500ms ease;
}
.otr-work-item__link:hover .otr-work-item__img { transform: scale(1.04); }
/* The overlaid CTA sits on whatever the photo happens to show, and on a light
or busy bottom edge it disappeared. A scrim under it darkens only the bottom
of the frame, so the pill always has something to sit against. */
.otr-work-item__img-wrap::after {
content: ''; position: absolute; inset: auto 0 0 0; z-index: 1;
height: 45%;
background: linear-gradient(to top, rgba(0,33,37,.72), rgba(0,33,37,0));
pointer-events: none;
}
/* CTA overlay (pill + circle) on case image */
.otr-work-item__cta-wrap {
position: absolute; z-index: 2;
bottom: clamp(0.75rem,1.5vw,1.25rem); left: clamp(0.75rem,1.5vw,1.25rem);
display: inline-flex; align-items: center; gap: 0.375rem;
pointer-events: none; user-select: none;
transition: transform 250ms ease;
}
.otr-work-item__cta {
display: inline-flex; align-items: center;
height: 2.625rem; padding: 0 1.25rem;
border-radius: var(--otr-radius-full);
border: 1px solid var(--otr-color-primary);
background: rgba(255,255,255,.15);
-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
color: #fff;
font-family: var(--otr-font-body); font-size: 0.875rem;
font-weight: 400; white-space: nowrap; line-height: 1;
}
.otr-work-item__cta-circle {
display: inline-flex; align-items: center; justify-content: center;
width: 2.625rem; height: 2.625rem;
border-radius: 50%; flex-shrink: 0;
border: 1px solid var(--otr-color-primary);
background: rgba(255,255,255,.15);
-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
color: #fff;
}
.otr-work-item__link:hover .otr-work-item__cta-wrap { transform: translateY(-3px); }
/* Meta below image */
.otr-work-item__meta {
padding: clamp(1.25rem, 2vw, 2rem) 0 clamp(2rem, 4vw, 4.5rem);
}
.otr-work-item__top {
display: flex; align-items: center; flex-wrap: wrap;
gap: 0.75rem;
margin-bottom: clamp(0.75rem, 1.5vw, 1.25rem);
}
.otr-work-item__brand {
font-family: var(--otr-font-accent);
font-style: italic; font-weight: 300;
font-size: clamp(1rem, 1.5vw, 1.5625rem);
color: var(--otr-color-bg); line-height: 1; margin: 0; white-space: nowrap;
}
.otr-work-item__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.otr-work-item__tag {
display: inline-flex; align-items: center;
height: 2.5rem; padding: 0 1rem;
border-radius: var(--otr-radius-full);
border: 1px solid var(--otr-color-bg);
color: var(--otr-color-bg);
font-family: var(--otr-font-body);
font-size: clamp(0.875rem, 1vw, var(--otr-fs-nav));
font-weight: 400; line-height: 1; white-space: nowrap;
}
.otr-work-item__title {
font-family: var(--otr-font-body);
font-size: clamp(1.75rem, 3.5vw, 4.0625rem);
font-weight: 400; line-height: 1.23; letter-spacing: -0.01em;
color: var(--otr-color-bg); margin: 0;
}
/* No results */
.otr-work-empty {
text-align: center; padding: 4rem 0;
color: var(--otr-color-bg); font-size: var(--otr-fs-lg);
margin: 0;
}
.otr-work-grid-wrap--light { background: #ffffff; padding-top: clamp(3rem, 5vw, 6rem); padding-bottom: clamp(3rem, 5vw, 6rem); }
/* Dark section: cases 4-6 + quote. Gradient fades in ~20% from top of case 4. */
.otr-work-grid-wrap--dark {
padding-top: 0;
background-color: var(--otr-color-bg);
background-image:
linear-gradient(to bottom, var(--otr-color-bg-warm) 7%, transparent 7%),
url('../assets/images/cases/backgroundcasesnew.jpg');
background-blend-mode: normal, lighten;
background-size: 100% auto, cover;
background-repeat: no-repeat, no-repeat;
background-position: top, center top;
position: relative;
overflow: hidden;
padding-bottom: 0;
}
.otr-work-grid-wrap--dark .otr-work-grid,
.otr-work-grid-wrap--dark .otr-work-quote { position: relative; z-index: 1; }
.otr-work-grid-wrap--dark .otr-work-item__brand,
.otr-work-grid-wrap--dark .otr-work-item__title { color: var(--otr-color-primary); }
.otr-work-grid-wrap--dark .otr-work-item__tag {
color: var(--otr-color-primary); border-color: rgba(244,239,234,0.35);
}
/* Quote / testimonial */
.otr-work-quote {
position: relative; z-index: 1;
/* Pre-cap clamp, not the section token: on the work page this block sits
inside a band that already carries the token, so the centering margin
would be counted twice and squeeze the text to nothing on ultra-wide
screens. The inner max-width keeps it centred either way. */
padding: clamp(5rem, 9vw, 10rem) clamp(1.5rem, 10.4vw, 12.4375rem);
text-align: center;
}
.otr-work-quote__inner { position: relative; max-width: 70rem; margin: 0 auto; }
.otr-work-quote__inner::before,
.otr-work-quote__inner::after {
position: absolute; font-family: var(--otr-font-accent); font-style: normal; font-weight: 400;
font-size: clamp(8rem, 16vw, 16rem); line-height: 1;
color: var(--otr-color-accent); opacity: 0.1; pointer-events: none;
}
.otr-work-quote__inner::before { content: '\201C'; top: -3rem; left: 0rem; }
.otr-work-quote__inner::after { content: '\201D'; top: calc(100% - 3rem); right: 1rem; }
.otr-work-quote__text {
font-family: var(--otr-font-body);
font-size: clamp(1.5rem, 2.8vw, 2.8125rem);
font-weight: 400; line-height: 1.35;
color: var(--otr-color-primary); margin: 0; max-width: none;
}
.otr-work-quote__author {
display: block;
margin-top: clamp(1.5rem, 2.5vw, 2.25rem);
font-family: var(--otr-font-body);
font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
font-style: normal;
letter-spacing: 0.02em;
color: var(--otr-color-primary);
opacity: 0.65;
}
.otr-work-quote__text em {
font-family: var(--otr-font-accent);
font-style: italic; font-weight: 300;
}
.otr-work-quote--light {
padding-top: clamp(7rem, 12vw, 12rem);
padding-bottom: clamp(10rem, 16vw, 16rem);
}
.otr-work-quote--light .otr-work-quote__inner {
max-width: 52rem;
}
.otr-work-quote--light .otr-work-quote__author { color: var(--otr-color-bg); }
.otr-work-quote--light .otr-work-quote__text {
color: var(--otr-color-bg);
}
/* --------------------------------------------------
SINGLE CASE PAGE
-------------------------------------------------- */
/* Hero */
.otr-case-hero {
position: relative;
background: var(--otr-color-bg);
/* Bottom padding is the image overlap (22rem) plus a fixed 4rem gap between
the tags/title and the photo — same recipe as the work-page hero, so the
gap no longer grows with the viewport. */
padding: clamp(8rem,13vw,12rem) var(--otr-section-px) 26rem;
}
.otr-case-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.otr-case-hero__bg-img {
width: 100%; height: 100%; object-fit: cover;
mix-blend-mode: lighten; opacity: 0.55;
}
.otr-case-hero__meta {
display: flex; align-items: center; flex-wrap: wrap;
gap: 0.75rem; margin-bottom: clamp(1rem, 2vw, 2rem);
position: relative; z-index: 2;
}
.otr-case-hero__brand {
font-family: var(--otr-font-accent);
font-style: italic; font-weight: 300;
font-size: clamp(1rem, 1.5vw, 1.5625rem);
color: var(--otr-color-primary); margin: 0; line-height: 1; white-space: nowrap;
}
/* Uploaded brand mark in place of the brand text. Height-bound so any aspect
ratio sits on the same baseline as the tags next to it. The filter flattens
whatever colour the upload has to solid white (alpha untouched), so every
logo reads the same on the dark hero. */
.otr-case-hero__brand-logo {
display: block;
height: clamp(1.75rem, 2.4vw, 2.5rem);
width: auto;
max-width: 14rem;
object-fit: contain;
object-position: left center;
filter: brightness(0) invert(1);
}
.otr-case-hero__tag {
display: inline-flex; align-items: center;
height: 2.5rem; padding: 0 1rem;
border-radius: var(--otr-radius-full);
border: 1px solid var(--otr-color-primary);
color: var(--otr-color-primary);
font-family: var(--otr-font-body);
font-size: clamp(0.875rem, 1vw, var(--otr-fs-nav));
font-weight: 400; line-height: 1; white-space: nowrap;
}
.otr-case-hero__title {
font-family: var(--otr-font-body);
font-size: clamp(2rem, 3.5vw, 4.0625rem);
font-weight: 400; line-height: 1.23; letter-spacing: -0.01em;
color: var(--otr-color-primary); margin: 0;
position: relative; z-index: 2;
}
/* Hero image: sits at bottom of dark section, extends into light below */
.otr-case-hero__img-wrap {
margin-top: -22rem;
margin-bottom: 0;
padding-left: var(--otr-section-px);
padding-right: var(--otr-section-px);
position: relative; z-index: 2;
}
.otr-case-hero__img-card {
border-radius: var(--otr-radius-card);
overflow: hidden; aspect-ratio: 1520/804;
/* Staat er een film in plaats van een still, dan ligt die speler absoluut in
dit kader — dus hier het ankerpunt. */
position: relative;
}
.otr-case-hero__img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Body wrapper — light beige bg */
.otr-case-body {
background: var(--otr-color-bg-warm);
padding-top: 0;
}
/* Content: text left + team credits right */
.otr-case-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(3rem, 8vw, 10rem);
padding: clamp(3rem, 5vw, 5rem) var(--otr-section-px) clamp(3rem, 5vw, 6rem);
align-items: end;
}
.otr-case-content__title {
font-family: var(--otr-font-body);
font-size: clamp(2rem, 3.5vw, 4.0625rem);
font-weight: 400; line-height: 1.23; letter-spacing: -0.01em;
color: var(--otr-color-bg); margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
}
.otr-case-content__title em {
font-family: var(--otr-font-accent);
font-style: italic; font-weight: 300;
}
.otr-case-content__body {
font-family: var(--otr-font-body);
font-size: var(--otr-fs-nav);
line-height: 1.7; color: var(--otr-color-bg);
margin: 0; max-width: 55ch;
}
/* Team credits */
.otr-case-credits {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(1.5rem, 3vw, 3rem) clamp(2rem, 4vw, 5rem);
align-content: end;
}
.otr-case-credits__group { display: flex; flex-direction: column; gap: 0.25rem; }
.otr-case-credits__role {
font-family: var(--otr-font-accent);
font-style: italic; font-weight: 300;
font-size: clamp(1rem, 1.5vw, 1.5625rem);
color: var(--otr-color-bg); margin: 0; line-height: 1.4;
}
.otr-case-credits__name {
font-family: var(--otr-font-body);
font-size: var(--otr-fs-nav); line-height: 1.5;
color: var(--otr-color-bg); margin: 0;
}
/* Gallery */
.otr-case-gallery {
padding: 0 var(--otr-section-px) clamp(3rem, 5vw, 5rem);
display: flex; flex-direction: column;
gap: clamp(1rem, 1.25vw, 1.5rem);
}
.otr-case-gallery + .otr-case-gallery { padding-top: 0; }
.otr-case-gallery:has(+ .otr-case-gallery) { padding-bottom: clamp(1rem, 1.25vw, 1.5rem); }
.otr-case-gallery__mixed {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(1rem, 1.25vw, 1.5rem);
}
.otr-case-gallery__stack {
display: flex; flex-direction: column;
gap: clamp(1rem, 1.25vw, 1.5rem);
}
.otr-case-gallery__img-wrap {
border-radius: var(--otr-radius-card);
overflow: hidden; position: relative;
}
.otr-case-gallery__img-wrap--tall { aspect-ratio: 750/804; }
.otr-case-gallery__img-wrap--short { aspect-ratio: 750/392; }
.otr-case-gallery__img-wrap--wide { aspect-ratio: 1520/804; }
.otr-case-gallery__img-wrap--wide-short { aspect-ratio: 1520/392; }
.otr-case-gallery__img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Rows of equal boxes: one, two or three across, matching the chosen layout.
The mixed row above keeps its own grid because its boxes differ in shape. */
.otr-case-gallery__row {
display: grid;
gap: clamp(1rem, 1.25vw, 1.5rem);
}
.otr-case-gallery__row--2 { grid-template-columns: repeat(2, 1fr); }
.otr-case-gallery__row--3 { grid-template-columns: repeat(3, 1fr); }
.otr-case-gallery__img-wrap--square { aspect-ratio: 1 / 1; }
.otr-case-gallery__img-wrap--portrait { aspect-ratio: 9 / 16; }
/* --------------------------------------------------
CASE MEDIA — a gallery slot or reel holding a photo, an uploaded video or
an embed. Every variant fills its frame the same way, so swapping a photo
for a video never changes the layout.
-------------------------------------------------- */
.otr-case-media__img {
width: 100%; height: 100%; object-fit: cover; display: block;
background: var(--otr-color-bg);
}
.otr-case-media__player { position: absolute; inset: 0; }
.otr-case-media__player iframe {
position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
background: #000;
}
/* Zodra er gespeeld wordt is het kader zwart: de Vimeo-speler is zelf
doorzichtig tijdens het laden, anders schemert de pagina erdoorheen. */
.otr-case-media__player--playing { background: #000; }
/* Play button, same mark as the dienst pages. It sits over the poster and
steps aside once the embed has loaded. */
.otr-case-media__play {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
background: rgba(0,33,37,.35); border: none; cursor: pointer;
color: var(--otr-color-primary);
transition: background 250ms ease;
}
.otr-case-media__play:hover { background: rgba(0,33,37,.5); }
.otr-case-media__play svg { width: clamp(40px, 4vw, 64px); height: auto; opacity: .85; transition: opacity 200ms ease, transform 250ms ease; }
.otr-case-media__play:hover svg { opacity: 1; transform: scale(1.06); }
.otr-case-media__player--playing .otr-case-media__play { display: none; }
/* Reels — portrait video, up to three side by side. Same column rhythm and
radius as the gallery, so the row reads as part of the same set. */
.otr-case-reels {
padding: 0 var(--otr-section-px) clamp(3rem, 5vw, 5rem);
}
.otr-case-reels__row {
display: grid;
gap: clamp(1rem, 1.25vw, 1.5rem);
grid-template-columns: repeat(3, 1fr);
justify-content: center;
}
/* One or two reels stay reel-sized instead of stretching across the column. */
.otr-case-reels--1 { grid-template-columns: minmax(0, 33%); }
.otr-case-reels--2 { grid-template-columns: repeat(2, minmax(0, 33%)); }
.otr-case-reels__item {
position: relative;
aspect-ratio: 9 / 16;
border-radius: var(--otr-radius-card);
overflow: hidden;
background: var(--otr-color-bg);
}
/* Single case quote — light bg, dark text */
.otr-case-quote {
position: relative; text-align: center; overflow: hidden;
padding: clamp(5rem, 9vw, 10rem) var(--otr-section-px);
}
.otr-case-quote__deco {
position: absolute; font-family: var(--otr-font-body); font-weight: 400;
font-size: clamp(8rem, 18vw, 25rem); line-height: 1;
color: rgba(42,189,204,0.08); pointer-events: none; user-select: none;
}
.otr-case-quote__deco--open { top: -0.1em; left: var(--otr-section-px); }
.otr-case-quote__deco--close { bottom: -0.4em; right: var(--otr-section-px); }
.otr-case-quote__inner { position: relative; max-width: 70rem; margin: 0 auto; }
.otr-case-quote__text {
font-family: var(--otr-font-body);
font-size: clamp(1.5rem, 2.8vw, 2.8125rem);
font-weight: 400; line-height: 1.35;
color: var(--otr-color-bg); /* dark on light */
margin: 0; max-width: none;
}
.otr-case-quote__text em {
font-family: var(--otr-font-accent);
font-style: italic; font-weight: 300;
}
.otr-case-quote__author {
margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
font-family: var(--otr-font-accent);
font-style: italic; font-weight: 300;
font-size: clamp(1rem, 1.5vw, 1.5625rem);
color: var(--otr-color-accent);
}
/* Single case — mobile */
@media (max-width: 767px) {
.otr-case-hero { padding-bottom: 9rem; }
.otr-case-hero__brand { font-size: 1.5rem; }
.otr-case-hero__title { font-size: clamp(2.5rem, 9vw, 3.5rem); }
.otr-case-hero__img-wrap { margin-top: -7rem; margin-bottom: 0; }
.otr-case-body { padding-top: 0; }
.otr-case-content { grid-template-columns: 1fr; gap: 3rem; padding-bottom: 2rem; }
.otr-case-credits { grid-template-columns: 1fr 1fr; }
.otr-case-gallery__mixed { grid-template-columns: 1fr; }
.otr-case-gallery__img-wrap--tall,
.otr-case-gallery__img-wrap--short { aspect-ratio: 4/3; }
.otr-case-gallery__img-wrap--wide,
.otr-case-gallery__img-wrap--wide-short { aspect-ratio: 4/3; }
/* Three reels side by side would be thumbnail-sized on a phone; two per row
keeps them watchable, and a single reel stays full width. */
/* Three boxes across is too small on a phone: pair them up, and let a
single wide box keep the full width. */
.otr-case-gallery__row--3 { grid-template-columns: repeat(2, 1fr); }
.otr-case-gallery__row--2 { grid-template-columns: 1fr; }
.otr-case-gallery__img-wrap--square { aspect-ratio: 1 / 1; }
.otr-case-reels__row,
.otr-case-reels--2 { grid-template-columns: repeat(2, 1fr); }
.otr-case-reels--1 { grid-template-columns: 1fr; }
}
/* Mobile */
@media (max-width: 767px) {
.otr-work-hero { padding-bottom: 5rem; }
.otr-work-grid-wrap--overlap {
margin-top: -7rem;
background: linear-gradient(to bottom, transparent 7rem, var(--otr-color-bg-warm) 7rem);
}
.otr-work-filter { height: 2.625rem; font-size: 0.875rem; padding: 0 0.875rem; }
.otr-work-grid { grid-template-columns: 1fr; }
.otr-work-item--full { grid-column: 1; }
.otr-work-item__img-wrap,
.otr-work-item--full .otr-work-item__img-wrap { aspect-ratio: 4/3; }
.otr-work-item__title { font-size: clamp(1.5rem, 7vw, 2.5rem); }
}
/* ==========================================================================
CULTURE PAGE
========================================================================== */
/* Hero */
.otr-culture-hero {
background: var(--otr-color-bg);
color: var(--otr-color-primary);
padding: clamp(8rem, 13vw, 12rem) var(--otr-section-px) clamp(8rem, 12vw, 10rem);
position: relative;
overflow: hidden;
}
.otr-culture-hero__bg {
position: absolute;
inset: 0;
pointer-events: none;
}
.otr-culture-hero__bg-img {
width: 100%;
height: 100%;
object-fit: cover;
mix-blend-mode: lighten;
opacity: 0.6;
display: block;
}
.otr-culture-hero__inner {
position: relative;
z-index: 1;
padding-bottom: clamp(4rem, 7vw, 7rem);
}
.otr-culture-hero__title {
font-family: var(--otr-font-body);
font-size: clamp(2.5rem, 6vw, 5.3125rem);
font-weight: 400;
line-height: 1.1;
letter-spacing: -0.01em;
color: var(--otr-color-primary);
margin-bottom: clamp(1.5rem, 2.5vw, 2rem);
}
.otr-culture-hero__title em {
font-family: var(--otr-font-accent);
font-style: italic;
font-weight: 300;
}
.otr-culture-hero__intro {
font-family: var(--otr-font-body);
font-size: var(--otr-fs-nav);
line-height: 1.7;
color: var(--otr-color-primary);
opacity: 0.85;
max-width: 65ch;
}
/* Beige body wrapper */
.otr-culture-body {
background: var(--otr-color-bg-warm);
padding-top: 0;
}
/* Culture cards — overlap dark hero into beige */
.otr-culture-cards-wrap {
padding: 0 var(--otr-section-px) clamp(3rem, 5vw, 5rem);
margin-top: calc(-1 * clamp(6rem, 10vw, 8rem));
position: relative;
z-index: 2;
}
.otr-culture-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(0.75rem, 1.5vw, 1.5rem);
}
.otr-culture-card {
position: relative;
overflow: hidden;
border-radius: var(--otr-radius-card);
/* Not a link — no pointer cursor; the hover reveal still runs. */
}
.otr-culture-card__img-wrap {
aspect-ratio: 3/4;
}
.otr-culture-card__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.6s ease;
}
.otr-culture-card:hover .otr-culture-card__img {
transform: scale(1.04);
}
.otr-culture-card__panel {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 33, 37, 0.92);
color: #fff;
padding: 1.5rem 1.75rem 2rem;
transform: translateY(calc(100% - 5rem));
transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.otr-culture-card:hover .otr-culture-card__panel {
transform: translateY(0);
}
.otr-culture-card__title {
font-family: var(--otr-font-body);
font-size: clamp(1rem, 1.75vw, 1.5rem);
font-weight: 400;
letter-spacing: -0.01em;
line-height: 1.2;
margin: 0;
}
.otr-culture-card__title em {
font-family: var(--otr-font-accent);
font-style: italic;
font-weight: 300;
}
.otr-culture-card__text {
font-family: var(--otr-font-body);
font-size: var(--otr-fs-base);
line-height: 1.65;
color: #fff;
margin-top: 0.875rem;
opacity: 0;
transition: opacity 0.3s ease 0.15s;
}
.otr-culture-card:hover .otr-culture-card__text {
opacity: 0.75;
}
/* Werkwijze */
.otr-culture-werkwijze {
padding: clamp(2.5rem, 5vw, 5rem) var(--otr-section-px) clamp(5rem, 9vw, 9rem);
}
.otr-culture-werkwijze__inner {
display: block;
}
.otr-culture-werkwijze__lead {
margin: clamp(0.75rem, 1.5vw, 1.25rem) 0 0;
font-family: var(--otr-font-accent);
font-style: italic; font-weight: 300;
font-size: clamp(1.125rem, 1.8vw, 1.625rem);
color: var(--otr-color-primary); opacity: 0.75;
}
.otr-culture-werkwijze__heading {
font-family: var(--otr-font-body);
font-size: clamp(2.5rem, 5vw, 5.3125rem);
font-weight: 400;
line-height: 1.1;
letter-spacing: -0.01em;
color: var(--otr-color-bg);
text-align: center;
margin-bottom: clamp(3rem, 5vw, 4.5rem);
}
.otr-culture-werkwijze__heading em {
font-family: var(--otr-font-accent);
font-style: italic;
font-weight: 300;
}
.otr-werkwijze-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(2.5rem, 5vw, 6rem);
align-items: start;
}
.otr-werkwijze-item {
}
.otr-werkwijze-item__head {
display: flex;
align-items: baseline;
gap: 0.5rem;
margin-bottom: 1.75rem;
}
.otr-werkwijze-item__num {
font-family: var(--otr-font-accent);
font-style: italic;
font-weight: 300;
font-size: clamp(1.75rem, 2.5vw, 2.8125rem);
line-height: 1.1;
color: var(--otr-color-bg);
flex-shrink: 0;
}
.otr-werkwijze-item__title {
font-family: var(--otr-font-body);
font-size: clamp(1.75rem, 2.5vw, 2.8125rem);
font-weight: 400;
color: var(--otr-color-bg);
line-height: 1.1;
letter-spacing: -0.01em;
}
.otr-werkwijze-item__text {
font-family: var(--otr-font-body);
font-size: var(--otr-fs-nav);
line-height: 1.75;
color: var(--otr-color-bg);
}
/* Team section */
.otr-culture-team {
background: var(--otr-color-bg-warm);
position: relative;
z-index: 1;
/* De strip is het laatste in de sectie; met de oude staart bleef daar een
leeg donker vlak onder staan. */
padding: clamp(8rem, 12vw, 12rem) var(--otr-section-px) clamp(3.5rem, 5.5vw, 5.5rem);
color: var(--otr-color-primary);
overflow: hidden;
}
.otr-culture-team__bg {
position: absolute;
top: 0; left: 0; right: 0;
/* Eindigt in de onderste rij kaarten, niet eronder — die steken er in de
ontwerpen onderuit. */
bottom: clamp(5rem, 20vw, 24rem);
/* Slightly oversized so the drift and the pointer offset never expose an
edge. OTR.cultureBg writes the two offsets; with no JS the backdrop simply
sits still, exactly as it did before. */
transform: scale(1.06)
translate3d(var(--otr-culture-x, 0px), var(--otr-culture-y, 0px), 0);
will-change: transform;
background-color: #042226;
background-image:
radial-gradient(42% 26% at 13% 10%, rgba(42,189,204,.26), transparent 70%),
radial-gradient(38% 22% at 50% 20%, rgba(42,189,204,.20), transparent 72%),
radial-gradient(34% 20% at 88% 30%, rgba(42,189,204,.13), transparent 74%),
radial-gradient(40% 24% at 37% 70%, rgba(42,189,204,.17), transparent 72%),
radial-gradient(36% 22% at 80% 82%, rgba(42,189,204,.19), transparent 72%);
pointer-events: none;
}
/* De lijn zelf. Hij ligt in dezelfde doos als de gloed maar krijgt een eigen,
grotere verschuiving, zodat hij bij het bewegen van de muis lóskomt van de
achtergrond in plaats van er als één plaatje mee te schuiven.
--otr-lijn-trek loopt van 1 naar 0 als de sectie in beeld komt: dat is het
tekenen. --otr-lijn-licht schuift daarna een korte lichtflits over het pad. */
.otr-culture-lijn {
position: absolute; inset: 0;
width: 100%; height: 100%;
overflow: visible;
transform: translate3d(var(--otr-lijn-x, 0px), var(--otr-lijn-y, 0px), 0);
will-change: transform;
pointer-events: none;
}
.otr-culture-lijn__pad {
fill: none;
stroke: var(--otr-color-accent);
stroke-width: 4;
/* Het origineel was een neonlijn; zonder die bloom valt hij weg tegen de
gloed eronder. */
filter: drop-shadow(0 0 7px rgba(42,189,204,.55));
stroke-linecap: round;
stroke-dasharray: var(--otr-lijn-lengte, 4000);
stroke-dashoffset: calc(var(--otr-lijn-lengte, 4000) * var(--otr-lijn-trek, 1));
transition: stroke-dashoffset 1600ms cubic-bezier(.22,.61,.36,1);
}
/* De flits is hetzelfde pad, maar wit en met een korte streep die er overheen
loopt. Pas zichtbaar als de lijn klaar is met tekenen. */
.otr-culture-lijn__licht {
fill: none;
stroke: #eafcff;
stroke-width: 4;
stroke-linecap: round;
opacity: 0;
filter: drop-shadow(0 0 8px rgba(42,189,204,.9));
}
.otr-culture-lijn--klaar .otr-culture-lijn__licht { opacity: .85; }
@media (prefers-reduced-motion: reduce) {
.otr-culture-lijn { transform: none; }
.otr-culture-lijn__pad { stroke-dashoffset: 0; transition: none; }
.otr-culture-lijn__licht { display: none; }
}
.otr-culture-team__inner {
position: relative;
z-index: 1;
}
.otr-culture-team__header {
display: flex;
justify-content: flex-end;
margin-bottom: clamp(3rem, 6vw, 6rem);
}
.otr-culture-team__heading {
font-family: var(--otr-font-body);
font-size: clamp(2.5rem, 5vw, 5.3125rem);
font-weight: 400;
line-height: 1.1;
letter-spacing: -0.01em;
color: var(--otr-color-primary);
}
.otr-culture-team__heading em {
font-family: var(--otr-font-accent);
font-style: italic;
font-weight: 300;
}
/* Two rows of stills drifting past each other under the team, the section the
client marked as missing. Reuses the marquee keyframes, so one pass has to
be printed twice or the loop jumps. */
/* Het donkere vlak onderaan de culturepagina, tussen de values en de footer. */
.otr-culture-fotos {
background: var(--otr-color-bg);
padding: clamp(3.5rem, 7vw, 7rem) 0;
overflow: hidden;
}
.otr-culture-strip {
margin: 0;
display: flex; flex-direction: column;
gap: clamp(0.75rem, 1.2vw, 1.25rem);
}
.otr-culture-strip__row { overflow: hidden; }
.otr-culture-strip__track {
display: flex; width: max-content;
gap: clamp(0.75rem, 1.2vw, 1.25rem);
animation: otr-marquee 55s linear infinite;
}
/* Omgekeerd én een stuk verder in de lus, anders staat dezelfde foto telkens
recht onder zichzelf — dat is wat het als één geplakt blok liet lezen. */
.otr-culture-strip__row--reverse .otr-culture-strip__track {
animation-direction: reverse;
animation-delay: -23s;
}
.otr-culture-strip__img {
display: block; flex-shrink: 0;
/* Breder en groter dan eerst: in de ontwerpen lopen hier een handvol forse
beelden langs in plaats van een rij kleine kaartjes. */
height: clamp(130px, 16vw, 250px); width: auto;
aspect-ratio: 5 / 3; object-fit: cover;
border-radius: var(--otr-radius-card);
transition: transform 400ms ease;
}
.otr-culture-strip__img:hover {
transform: scale(1.03);
}
.otr-culture-strip__img--wide { aspect-ratio: 21 / 9; }
@media (prefers-reduced-motion: reduce) {
.otr-culture-strip__track { animation: none; }
.otr-culture-strip__img { transition: none; }
.otr-culture-strip__img:hover { transform: none; }
}
.otr-culture-team__intro {
font-family: var(--otr-font-body);
font-size: var(--otr-fs-body-lg);
line-height: 1.75;
color: var(--otr-color-primary);
opacity: 0.6;
max-width: 36rem;
}
.otr-team-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(1.5rem, 2.5vw, 2.5rem);
}
.otr-team-card__imgs {
position: relative;
aspect-ratio: 3/4;
border-radius: var(--otr-radius-card);
overflow: hidden;
background: var(--otr-color-surface);
}
.otr-team-card__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 0.5s ease;
}
/* Three-layer sandwich: the featured photo (with its studio backdrop) sits at
the bottom, the name + role above it, and the cut-out PNG of the same person
on top — so at rest the person's foot falls in FRONT of the name. On hover
the name jumps above the cut-out. Only the stacking order changes, which is
why the cut-out never hides the photo underneath it. */
.otr-team-card__img--hover {
z-index: 2;
opacity: 1;
}
.otr-team-card__meta {
position: absolute;
left: clamp(1rem, 1.6vw, 1.75rem);
right: clamp(1rem, 1.6vw, 1.75rem);
bottom: clamp(0.875rem, 1.4vw, 1.5rem);
z-index: 1;
}
/* z-index cannot be transitioned, so the block is printed a second time above
the cut-out and fades in on hover. That reads as the text moving smoothly to
the front while the copy underneath keeps the resting state intact. */
.otr-team-card__meta--front {
z-index: 3;
opacity: 0;
transition: opacity 320ms cubic-bezier(.4,0,.2,1);
pointer-events: none;
}
.otr-team-card:hover .otr-team-card__meta--front,
.otr-team-card:focus-within .otr-team-card__meta--front {
opacity: 1;
}
/* Soft halo hugging the letters, on the hover copy only: at rest the name sits
flat behind the person, and on hover the glow fades in with the text so the
dark blue stays readable over a dark shoe or trouser leg. The tint (#afbec5)
matches the studio backdrop, so the halo reads as part of the photo. */
.otr-team-card__meta--front .otr-team-card__name,
.otr-team-card__meta--front .otr-team-card__role {
text-shadow:
0 0 10px rgba(175,190,197,.9),
0 0 22px rgba(175,190,197,.8),
0 0 44px rgba(175,190,197,.65),
0 0 80px rgba(175,190,197,.45);
}
.otr-team-card__name {
font-family: var(--otr-font-body);
font-size: clamp(1.25rem, 1.9vw, 1.9375rem);
font-weight: 400;
line-height: 1.1;
letter-spacing: -0.01em;
color: var(--otr-color-bg);
margin: 0 0 0.125rem;
max-width: none;
}
.otr-team-card__name em {
font-family: var(--otr-font-accent);
font-style: italic;
font-weight: 300;
}
.otr-team-card__role {
font-family: var(--otr-font-body);
font-size: clamp(0.75rem, 0.9vw, 0.9375rem);
font-weight: 400;
line-height: 1.3;
color: var(--otr-color-bg);
opacity: .75;
margin: 0;
max-width: none;
}
/* Values */
.otr-culture-values {
background: var(--otr-color-bg-warm);
padding: clamp(1.5rem, 3vw, 3rem) var(--otr-section-px) clamp(6rem, 10vw, 10rem);
margin-top: 0;
position: relative;
z-index: 2;
}
.otr-culture-values__heading {
font-family: var(--otr-font-body);
font-size: clamp(2.5rem, 5vw, 5.3125rem);
font-weight: 400;
line-height: 1.1;
letter-spacing: -0.01em;
color: var(--otr-color-bg);
margin-bottom: clamp(0.5rem, 1vw, 1rem);
}
.otr-culture-values__heading em {
font-family: var(--otr-font-accent);
font-style: italic;
font-weight: 300;
}
.otr-values-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: clamp(3rem, 6vw, 8rem);
}
.otr-values-item {
padding: clamp(2rem, 3.5vw, 3.5rem) 0;
border-bottom: 1px solid var(--otr-color-bg);
}
.otr-values-item:nth-child(odd) {
padding-right: 0;
}
.otr-values-item:nth-child(even) {
padding-left: 0;
}
.otr-values-item__title {
font-family: var(--otr-font-body);
font-size: clamp(1.375rem, 2.5vw, 2.5rem);
font-weight: 400;
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--otr-color-bg);
margin-bottom: 1.75rem;
}
.otr-values-item__title em {
font-family: var(--otr-font-accent);
font-style: italic;
font-weight: 300;
}
.otr-values-item__text {
font-family: var(--otr-font-body);
font-size: var(--otr-fs-base);
line-height: 1.75;
color: var(--otr-color-bg);
}
/* Instagram */
.otr-culture-instagram {
background: var(--otr-color-bg);
padding: clamp(6rem, 10vw, 10rem) var(--otr-section-px);
overflow: hidden;
}
.otr-culture-instagram__header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 2rem;
margin-bottom: clamp(2rem, 4vw, 4rem);
}
.otr-culture-instagram__heading {
font-family: var(--otr-font-body);
font-size: clamp(2.5rem, 5vw, 5.3125rem);
font-weight: 400;
line-height: 1.1;
letter-spacing: -0.01em;
color: var(--otr-color-primary);
}
.otr-culture-instagram__heading em {
font-family: var(--otr-font-accent);
font-style: italic;
font-weight: 300;
}
.otr-culture-instagram__handle {
font-family: var(--otr-font-accent);
font-style: italic;
font-weight: 300;
font-size: var(--otr-fs-body-lg);
color: var(--otr-color-accent);
text-decoration: none;
white-space: nowrap;
border-bottom: 1px solid currentColor;
padding-bottom: 0.125rem;
}
.otr-instagram-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(0.5rem, 1vw, 1rem);
}
.otr-instagram-item {
aspect-ratio: 1;
background: var(--otr-color-surface);
border-radius: var(--otr-radius-md);
}
/* Culture page — mobile */
@media (max-width: 767px) {
.otr-culture-hero { padding-bottom: 7rem; }
.otr-culture-cards-wrap {
margin-top: -5rem;
padding-left: 1rem;
padding-right: 1rem;
padding-bottom: 3rem;
}
.otr-culture-cards { grid-template-columns: 1fr; gap: 1rem; }
.otr-culture-card__title { font-size: 1.375rem; }
.otr-culture-card__img-wrap { aspect-ratio: 4/3; }
.otr-culture-card__panel {
transform: translateY(0);
position: static;
border-radius: 0 0 var(--otr-radius-card) var(--otr-radius-card);
}
.otr-culture-card__text { opacity: 0.75; }
.otr-werkwijze-grid { grid-template-columns: 1fr; gap: 2rem; }
.otr-culture-team__header { grid-template-columns: 1fr; }
.otr-team-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
/* No hover on touch, so the layered reveal has nothing to trigger it: the
name moves into a solid bar across the bottom of the card, above the
cut-out, and scales with the viewport so it stays on one line. */
.otr-team-card__meta {
left: 0; right: 0; bottom: 0;
z-index: 3;
background: #fff;
padding: 0.5rem 0.625rem 0.5625rem;
}
.otr-team-card__meta--front { display: none; }
.otr-team-card__name {
font-size: clamp(0.75rem, 3.2vw, 1.0625rem);
margin-bottom: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.otr-team-card__role {
font-size: clamp(0.625rem, 2.4vw, 0.8125rem);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.otr-culture-team__bg { bottom: 3rem; }
.otr-culture-values { padding-top: 1rem; margin-top: 0; }
.otr-values-grid { grid-template-columns: 1fr; }
.otr-values-item:nth-child(-n+2) { border-top: none; }
.otr-values-item:first-child { border-top: 1px solid rgba(0,33,37,0.15); }
.otr-values-item:nth-child(odd) { border-right: none; padding-right: 0; }
.otr-values-item:nth-child(even) { padding-left: 0; }
.otr-instagram-grid { grid-template-columns: repeat(2, 1fr); }
.otr-culture-instagram__header { flex-direction: column; gap: 0.75rem; }
}
/*
* REAL @font-face BLOCKS — uncomment when WOFF2 files are delivered to assets/fonts/
* Relative paths resolve correctly in both dev (browser-sync) and WordPress child theme
* (get_stylesheet_directory_uri() + '/css/main.css' → '../assets/fonts/' steps back to theme root).
*
* @font-face {
* font-family: "OTR Heading";
* src: url("../assets/fonts/otr-heading-700.woff2") format("woff2");
* font-weight: 700;
* font-style: normal;
* font-display: swap;
* }
*
* @font-face {
* font-family: "OTR Heading";
* src: url("../assets/fonts/otr-heading-400.woff2") format("woff2");
* font-weight: 400;
* font-style: normal;
* font-display: swap;
* }
*
* @font-face {
* font-family: "OTR Body";
* src: url("../assets/fonts/otr-body-400.woff2") format("woff2");
* font-weight: 400;
* font-style: normal;
* font-display: swap;
* }
*
* @font-face {
* font-family: "OTR Body";
* src: url("../assets/fonts/otr-body-700.woff2") format("woff2");
* font-weight: 700;
* font-style: normal;
* font-display: swap;
* }
*/
/* ============================================================
VACATURE PAGE
============================================================ */
/* Screen-reader only utility */
.otr-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* HERO */
.otr-vacature-hero {
background: var(--otr-color-bg-warm);
padding: clamp(10rem, 16vw, 19rem) var(--otr-section-px) clamp(3rem, 5vw, 5rem);
position: relative;
z-index: 1;
}
.otr-vacature-hero__inner {
display: flex;
align-items: flex-start;
gap: clamp(2rem, 4vw, 5rem);
margin-bottom: clamp(3rem, 5vw, 6rem);
}
.otr-vacature-hero__content {
flex: 1;
}
.otr-vacature-hero__heading {
font-family: var(--otr-font-body);
font-size: clamp(2.75rem, 4.5vw, 5.3125rem);
font-weight: 400;
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--otr-color-bg);
margin-bottom: clamp(1.75rem, 3vw, 3rem);
}
.otr-vacature-hero__heading em {
font-family: var(--otr-font-accent);
font-style: italic;
font-weight: 300;
}
.otr-vacature-hero__text {
font-family: var(--otr-font-body);
font-size: clamp(0.9rem, 1vw + 0.5rem, 1.125rem);
line-height: 1.75;
color: var(--otr-color-bg);
max-width: 38rem;
}
.otr-vacature-hero__portrait {
flex: 0 0 clamp(280px, 43%, 655px);
border-radius: 20px;
overflow: hidden;
aspect-ratio: 655 / 538;
}
.otr-vacature-hero__portrait img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Banner bridge — own element between hero and jobs so both bg colors show behind it */
.otr-vacature-banner {
position: relative;
z-index: 5;
margin-top: clamp(-5rem, -9.4vw, -11.25rem);
margin-bottom: clamp(-5rem, -9.4vw, -11.25rem);
margin-left: var(--otr-section-px);
margin-right: var(--otr-section-px);
border-radius: 20px;
overflow: hidden;
height: clamp(180px, 20vw, 362px);
}
.otr-vacature-banner img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* VACATURES JOBS */
.otr-vacature-jobs {
background: var(--otr-color-bg);
padding: clamp(8rem, 12vw, 14rem) var(--otr-section-px) clamp(5rem, 8vw, 10rem);
color: var(--otr-color-primary);
position: relative;
z-index: 1;
}
.otr-vacature-jobs__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: clamp(4rem, 8vw, 10rem);
}
.otr-job-item {
padding: clamp(2.5rem, 4vw, 4rem) 0 clamp(1.5rem, 2.5vw, 2.5rem);
border-bottom: 1px solid var(--otr-color-primary);
position: relative;
}
.otr-job-item__arrow::after {
content: '';
position: absolute;
inset: 0;
}
.otr-job-item__title {
font-family: var(--otr-font-body);
font-size: clamp(1.75rem, 2.5vw, 2.8125rem);
font-weight: 400;
line-height: 1.1;
letter-spacing: -0.01em;
color: var(--otr-color-primary);
margin-bottom: clamp(1.25rem, 2vw, 2rem);
}
.otr-job-item__body {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 2rem;
}
.otr-job-item__text {
font-family: var(--otr-font-body);
font-size: clamp(0.9rem, 1vw + 0.5rem, 1.125rem);
line-height: 1.75;
color: var(--otr-color-primary);
flex: 1;
}
.otr-job-item__arrow {
flex-shrink: 0;
width: 59px;
height: 59px;
border: 1px solid var(--otr-color-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--otr-color-primary);
text-decoration: none;
transition: background 0.2s ease, color 0.2s ease;
}
.otr-job-item__arrow:hover {
background: var(--otr-color-primary);
color: var(--otr-color-bg);
}
/* Cases on beige bg (vacature page) */
.otr-cases--beige {
background: var(--otr-color-bg-warm);
padding-top: clamp(6rem, 10vw, 12rem);
}
.otr-cases--overlap-top {
position: relative;
z-index: 1;
margin-top: 0;
padding-top: clamp(8rem, 12vw, 14rem);
}
.otr-culture-team--bridge {
z-index: 2;
padding-bottom: 0;
}
.otr-culture-team--bridge::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: clamp(4rem, 7vw, 8rem);
background: var(--otr-color-bg-warm);
z-index: 0;
}
/* Mobile */
@media (max-width: 767px) {
.otr-vacature-hero {
padding-top: clamp(6rem, 14vw, 9rem);
padding-bottom: clamp(7rem, 14vw, 11rem);
}
.otr-vacature-hero__inner {
flex-direction: column;
gap: 2rem;
margin-bottom: 2rem;
}
.otr-vacature-hero__content {
padding-top: 0;
}
.otr-vacature-hero__portrait {
flex: 0 0 auto;
width: 100%;
aspect-ratio: 4 / 3;
}
.otr-vacature-hero__banner {
height: clamp(140px, 45vw, 220px);
margin-bottom: -4rem;
border-radius: 14px;
}
.otr-vacature-jobs {
padding-top: clamp(6rem, 10vw, 9rem);
}
.otr-vacature-jobs__grid {
grid-template-columns: 1fr;
}
.otr-job-item__title {
font-size: clamp(1.5rem, 5vw, 2rem);
}
}
/* ================================================
SINGLE VACATURE (svac)
================================================ */
.otr-svac-hero {
background: var(--otr-color-bg-warm);
padding: clamp(10rem, 16vw, 19rem) var(--otr-section-px) clamp(1rem, 1.5vw, 1.5rem);
position: relative;
z-index: 1;
}
.otr-svac-hero__inner {
display: flex;
align-items: flex-start;
gap: clamp(3rem, 5vw, 6rem);
}
.otr-svac-hero__content { flex: 1; min-width: 0; }
.otr-svac-hero__heading {
font-family: var(--otr-font-body);
font-size: clamp(2.75rem, 4.5vw, 5.3125rem);
font-weight: 400;
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--otr-color-bg);
margin-bottom: clamp(1.5rem, 2.5vw, 2.5rem);
}
.otr-svac-hero__heading em {
font-family: var(--otr-font-accent);
font-style: italic;
font-weight: 300;
}
.otr-svac-hero__text {
font-size: clamp(0.9rem, 1vw + 0.5rem, 1.125rem);
line-height: 1.75;
color: var(--otr-color-bg);
max-width: 38rem;
}
.otr-svac-hero__text + .otr-svac-hero__text { margin-top: 1.5rem; }
.otr-svac-hero__portrait {
flex: 0 0 clamp(260px, 40%, 655px);
border-radius: 20px;
overflow: hidden;
aspect-ratio: 655 / 635;
}
.otr-svac-hero__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.otr-svac-body {
background: var(--otr-color-bg-warm);
padding: 0 var(--otr-section-px) clamp(4rem, 6vw, 8rem);
position: relative;
z-index: 1;
}
.otr-svac-section { padding-top: clamp(4rem, 6vw, 8rem); }
.otr-svac-section:first-child { padding-top: clamp(1rem, 1.5vw, 1.5rem); }
.otr-svac-section__heading {
font-family: var(--otr-font-body);
font-size: clamp(1.875rem, 2.8vw, 2.8125rem);
font-weight: 400;
line-height: 1.1;
letter-spacing: -0.01em;
color: var(--otr-color-bg);
margin-bottom: clamp(1.5rem, 2.5vw, 2.5rem);
}
.otr-svac-section__heading em { font-family: var(--otr-font-accent); font-style: italic; font-weight: 300; }
.otr-svac-section__list {
max-width: 44rem;
padding-left: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.otr-svac-section__list li {
font-size: clamp(0.9rem, 1vw + 0.5rem, 1.125rem);
line-height: 1.75;
color: var(--otr-color-bg);
}
.otr-svac-section__text {
font-size: clamp(0.9rem, 1vw + 0.5rem, 1.125rem);
line-height: 1.75;
color: var(--otr-color-bg);
max-width: 44rem;
margin-top: 1.5rem;
}
.otr-svac-section__link { color: var(--otr-color-bg); text-decoration: underline; text-underline-offset: 3px; }
.otr-svac-divider {
background: var(--otr-color-bg-warm);
padding: 0 var(--otr-section-px);
position: relative;
z-index: 1;
}
.otr-svac-divider__line { height: 1px; background: var(--otr-color-bg); }
.otr-svac-form {
background: var(--otr-color-bg-warm);
padding: clamp(4rem, 6vw, 8rem) var(--otr-section-px) clamp(5rem, 8vw, 10rem);
position: relative;
z-index: 1;
}
.otr-svac-form__heading {
font-family: var(--otr-font-body);
font-size: clamp(2.75rem, 4.5vw, 5.3125rem);
font-weight: 400;
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--otr-color-bg);
margin-bottom: clamp(2rem, 3vw, 3.5rem);
}
.otr-svac-form__heading em { font-family: var(--otr-font-accent); font-style: italic; font-weight: 300; }
.otr-svac-form__fields {
display: flex;
flex-direction: column;
gap: 0.875rem;
max-width: clamp(28rem, 55%, 54rem);
margin-bottom: clamp(2rem, 3vw, 3rem);
}
.otr-svac-form__input {
width: 100%;
height: 51px;
border: 1px solid var(--otr-color-bg);
border-radius: 100px;
padding: 0 1.5rem;
font-family: var(--otr-font-body);
font-size: 1.125rem;
color: var(--otr-color-bg);
background: transparent;
outline: none;
appearance: none;
}
.otr-svac-form__input::placeholder { color: rgba(0,33,37,0.5); }
.otr-svac-form__input:focus { border-color: var(--otr-color-bg); box-shadow: 0 0 0 2px rgba(0,33,37,0.12); }
.otr-svac-form__file-row { display: contents; }
.otr-svac-form__file-label {
display: flex;
align-items: center;
justify-content: space-between;
height: 51px;
border: 1px solid var(--otr-color-bg);
border-radius: 100px;
padding: 0 0.5rem 0 1.5rem;
cursor: pointer;
gap: 1rem;
}
.otr-svac-form__file-text {
font-family: var(--otr-font-body);
font-size: 1.125rem;
color: rgba(0,33,37,0.5);
flex: 1;
}
.otr-svac-form__file-btn {
height: 39px;
padding: 0 1.25rem;
border-radius: 100px;
background: rgba(0,33,37,0.1);
border: 1px solid rgba(0,33,37,0.2);
font-family: var(--otr-font-body);
font-size: 1rem;
color: rgba(0,33,37,0.6);
white-space: nowrap;
display: flex;
align-items: center;
}
.otr-svac-form__file-note { font-size: 0.875rem; color: rgba(0,33,37,0.5); padding-left: 1.5rem; }
.otr-svac-form__actions {
display: flex;
align-items: center;
gap: 0.5rem;
}
.otr-cases--dark { background: var(--otr-color-bg); }
.otr-cases--dark .otr-cases__eyebrow,
.otr-cases--dark .otr-cases__title,
.otr-cases--dark .otr-cases__title em { color: var(--otr-color-primary); }
.otr-cases--dark .otr-cases__more a { color: var(--otr-color-primary); }
.otr-btn-circle--light { border-color: var(--otr-color-primary); color: var(--otr-color-primary); }
.otr-team {
background: var(--otr-color-bg);
padding: clamp(5rem, 8vw, 10rem) 0;
overflow: hidden;
position: relative;
z-index: 1;
}
.otr-team__heading {
font-family: var(--otr-font-body);
font-size: clamp(3rem, 5.5vw, 6.25rem);
font-weight: 400;
line-height: 1.0;
letter-spacing: -0.02em;
color: var(--otr-color-primary);
text-align: right;
padding: 0 var(--otr-section-px);
margin-bottom: clamp(2.5rem, 4vw, 5rem);
}
.otr-team__heading em { font-family: var(--otr-font-accent); font-style: italic; font-weight: 300; }
.otr-team__wave {
width: 100%;
height: clamp(60px, 7vw, 110px);
margin-bottom: clamp(3rem, 5vw, 6rem);
}
.otr-team__wave svg { width: 100%; height: 100%; display: block; }
/* The old .otr-team__grid / __photo card markup is gone from every template;
its __name and __role rules lived after the culture team card and silently
overrode it, so they are dropped with the rest of the block. */
@media (max-width: 767px) {
.otr-svac-hero {
padding-top: clamp(8rem, 18vw, 11rem);
padding-bottom: clamp(3rem, 5vw, 5rem);
}
.otr-svac-hero__inner { flex-direction: column; gap: 2rem; }
.otr-svac-hero__portrait { flex: 0 0 auto; width: 100%; aspect-ratio: 4 / 3; }
.otr-svac-form__fields { max-width: 100%; }
}
/* ==========================================================================
CONTACT
========================================================================== */
.otr-contact-hero {
background: var(--otr-color-bg-warm);
padding: clamp(10rem, 16vw, 18rem) var(--otr-section-px) clamp(6rem, 10vw, 12rem);
}
.otr-contact-hero__inner {
display: flex;
gap: clamp(4rem, 8vw, 10rem);
align-items: flex-start;
}
.otr-contact-hero__info {
flex: 0 0 clamp(240px, 30%, 480px);
}
.otr-contact-hero__heading {
font-family: var(--otr-font-body);
font-size: clamp(3rem, 5.5vw, 5.3125rem);
font-weight: 400;
line-height: 1.0;
letter-spacing: -0.02em;
color: var(--otr-color-bg);
margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.otr-contact-hero__meta {
display: flex;
flex-direction: column;
gap: 0.2rem;
font-size: var(--otr-fs-body-lg);
color: var(--otr-color-bg);
line-height: 1.7;
}
.otr-contact-hero__meta a {
color: inherit;
text-decoration: none;
}
.otr-contact-hero__meta a:hover { text-decoration: underline; }
.otr-contact-hero__label {
font-weight: 700;
color: var(--otr-color-accent);
}
.otr-contact-hero__address {
margin-top: 1rem;
font-style: normal;
line-height: 1.7;
}
.otr-contact-form {
flex: 1;
min-width: 0;
}
.otr-contact-form__heading {
font-family: var(--otr-font-body);
font-size: clamp(3rem, 5.5vw, 5.3125rem);
font-weight: 400;
line-height: 1.0;
letter-spacing: -0.02em;
color: var(--otr-color-bg);
margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.otr-contact-form__heading em {
font-family: var(--otr-font-accent);
font-style: italic;
font-weight: 300;
}
.otr-contact-form__fields {
display: flex;
flex-direction: column;
gap: 0.875rem;
margin-bottom: clamp(1.5rem, 2.5vw, 2rem);
}
.otr-contact-form__input {
width: 100%;
height: 51px;
border: 1px solid var(--otr-color-bg);
border-radius: 100px;
padding: 0 1.5rem;
font-family: var(--otr-font-body);
font-size: 1.125rem;
color: var(--otr-color-bg);
background: transparent;
outline: none;
appearance: none;
-webkit-appearance: none;
}
.otr-contact-form__input::placeholder { color: rgba(0,33,37,0.5); }
.otr-contact-form__input:focus { border-color: var(--otr-color-accent); }
.otr-contact-form__textarea {
width: 100%;
min-height: 130px;
border: 1px solid var(--otr-color-bg);
border-radius: 25px;
padding: 1rem 1.5rem;
font-family: var(--otr-font-body);
font-size: 1.125rem;
color: var(--otr-color-bg);
background: transparent;
outline: none;
resize: vertical;
appearance: none;
-webkit-appearance: none;
}
.otr-contact-form__textarea::placeholder { color: rgba(0,33,37,0.5); }
.otr-contact-form__textarea:focus { border-color: var(--otr-color-accent); }
.otr-contact-form__actions {
display: flex;
align-items: center;
gap: 0.5rem;
}
/* Mobile */
@media (max-width: 767px) {
.otr-contact-hero { padding-top: clamp(8rem, 18vw, 11rem); }
.otr-contact-hero__inner { flex-direction: column; gap: 3rem; }
.otr-contact-hero__info { flex: none; width: 100%; }
}
/* ═══════════════════════════════════════════════════════════════════════════
AWARDS
One row per prize on the warm band: year in the accent serif on the left,
the award itself as the heading, festival and project underneath.
═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════
AWARDS
Donkere lijst, per prijs het verhaal links en het bekroonde werk rechts.
Maten komen uit Figma (canvas 1920): tekstkolom 709, beeld 333x445 met een
ronding van 20, eyebrow 25px in het lichtblauw, titel 45px, body 18px.
═══════════════════════════════════════════════════════════════════════════ */
.otr-awards {
background: var(--otr-color-bg);
color: var(--otr-color-primary);
padding: clamp(4rem, 8vw, 8rem) var(--otr-section-px) clamp(5rem, 10vw, 10rem);
}
/* De knoppen staan buiten de lijst maar binnen dit vlak, zodat ze zich op de
hoogte van de hele lijst kunnen centreren in plaats van op één rij. */
.otr-awards__wrap { position: relative; }
.otr-awards__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: clamp(3rem, 6.5vw, 6.25rem);
}
.otr-awards__row {
display: grid;
/* 709 : 333 uit het ontwerp, met de ruimte ertussen als vrije kolom. */
grid-template-columns: minmax(0, 709fr) minmax(0, 289fr) minmax(0, 333fr);
align-items: start;
}
.otr-awards__body {
min-width: 0; grid-column: 1;
/* De streep sluit het hele blok af, onder de tekst — niet tussen de titel en
het verhaal in. */
padding-bottom: clamp(1.75rem, 3.4vw, 3.25rem);
border-bottom: 1px solid var(--otr-color-primary);
}
.otr-awards__eyebrow {
margin: 0 0 clamp(1rem, 1.9vw, 1.75rem);
font-family: var(--otr-font-body);
font-size: clamp(1rem, 1.3vw, 1.5625rem);
line-height: 1.2;
color: var(--otr-color-accent);
max-width: none;
}
.otr-awards__title {
margin: 0;
font-family: var(--otr-font-body);
font-size: var(--otr-fs-section);
font-weight: 400;
line-height: 1.11;
color: var(--otr-color-primary);
}
.otr-awards__title em {
font-family: var(--otr-font-accent);
font-style: italic;
font-weight: 300;
}
.otr-awards__title em::before { content: '— '; font-style: normal; }
.otr-awards__text {
margin: clamp(1rem, 1.9vw, 1.75rem) 0 0;
font-family: var(--otr-font-body);
font-size: var(--otr-fs-nav);
line-height: 1.67;
color: var(--otr-color-primary);
opacity: .8;
max-width: 58ch;
}
.otr-awards__link {
display: inline-flex; align-items: center; gap: .4rem;
margin-top: clamp(1rem, 1.6vw, 1.5rem);
font-size: var(--otr-fs-nav);
color: var(--otr-color-accent);
text-decoration: none;
}
.otr-awards__link:hover { color: var(--otr-color-primary); }
.otr-awards__beeld {
grid-column: 3;
border-radius: 20px;
overflow: hidden;
aspect-ratio: 333 / 445;
}
.otr-awards__img {
width: 100%; height: 100%;
object-fit: cover; display: block;
transition: transform 600ms cubic-bezier(.22,.61,.36,1);
}
.otr-awards__row:hover .otr-awards__img { transform: scale(1.04); }
@media (max-width: 64rem) {
.otr-awards__row { grid-template-columns: minmax(0, 1fr) minmax(0, 0.42fr); gap: clamp(1.5rem, 4vw, 3rem); }
.otr-awards__beeld { grid-column: 2; }
}
@media (max-width: 48rem) {
.otr-awards__row { grid-template-columns: 1fr; gap: 1.25rem; }
.otr-awards__beeld { grid-column: 1; max-width: 16rem; }
}
/* ═══════════════════════════════════════════════════════════════════════════
FREE STUFF
Cards on the warm band, each with its own e-mail gate.
═══════════════════════════════════════════════════════════════════════════ */
.otr-free-filters { margin-top: clamp(1.75rem, 3vw, 2.75rem); }
/* Neither page overlaps anything into its hero, so the deep bottom the
culture hero needs just reads as a gap here. */
.otr-culture-hero--short { padding-bottom: clamp(3.5rem, 6vw, 5.5rem); }
.otr-culture-hero--short .otr-culture-hero__inner { padding-bottom: 0; }
.otr-free {
background: var(--otr-color-bg-warm);
padding: clamp(4rem, 8vw, 7rem) clamp(1rem, 5.2vw, 6.25rem) clamp(5rem, 10vw, 10rem);
}
.otr-free__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
gap: clamp(1.25rem, 2.4vw, 2rem);
max-width: 82rem;
margin: 0 auto;
}
.otr-free-card {
display: flex;
flex-direction: column;
background: var(--otr-color-bg);
border-radius: var(--otr-radius-card);
padding: clamp(1.75rem, 3vw, 2.5rem);
}
.otr-free-card[hidden] { display: none; }
.otr-free-card__cat {
align-self: flex-start;
font-family: var(--otr-font-body);
font-size: 0.75rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--otr-color-accent);
border: 1px solid var(--otr-color-accent);
border-radius: 999px;
padding: 0.3rem 0.8rem;
}
.otr-free-card__title {
margin: 1.25rem 0 0;
font-family: var(--otr-font-body);
font-size: clamp(1.25rem, 1.8vw, 1.625rem);
font-weight: 400;
line-height: 1.2;
color: var(--otr-color-primary);
}
.otr-free-card__text {
margin: 0.75rem 0 0;
font-family: var(--otr-font-body);
font-size: 0.9375rem;
line-height: 1.65;
color: var(--otr-color-primary);
opacity: 0.78;
}
.otr-free-card__form { margin-top: auto; padding-top: clamp(1.5rem, 2.5vw, 2rem); }
.otr-free-card__label {
display: block;
font-family: var(--otr-font-body);
font-size: 0.75rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--otr-color-primary);
opacity: 0.6;
margin-bottom: 0.5rem;
}
.otr-free-card__row { display: flex; flex-wrap: wrap; gap: 0.625rem; }
/* Pill + arrow circle, so the download button is the same control as every
other CTA on the site instead of a lone solid block. */
.otr-free-card__actions { display: flex; align-items: center; gap: var(--otr-pair-gap); }
.otr-free-card__input {
flex: 1 1 10rem;
min-width: 0;
background: transparent;
border: 1px solid var(--otr-color-border);
border-radius: 999px;
padding: 0.75rem 1.125rem;
font-family: var(--otr-font-body);
font-size: 0.9375rem;
color: var(--otr-color-primary);
}
.otr-free-card__input::placeholder { color: var(--otr-color-muted); }
.otr-free-card__input:focus {
outline: none;
border-color: var(--otr-color-accent);
}
.otr-free-card__btn { flex: 0 0 auto; }
.otr-free-card__note {
margin: 0.75rem 0 0;
font-family: var(--otr-font-body);
font-size: 0.75rem;
line-height: 1.5;
color: var(--otr-color-primary);
opacity: 0.5;
}
/* ---------------------------------------------------------------------------
* Juridische pagina's — privacy, cookies, voorwaarden
*
* Deze pagina's komen uit de editor, dus er zijn geen klassen om op te sturen:
* de opmaak hangt aan de elementen zelf. Ze staan op crème, terwijl de body
* crème tekst zet voor de donkere secties — vandaar dat de kleuren hier
* expliciet terug moeten.
* ------------------------------------------------------------------------- */
.otr-legal {
background: var(--otr-color-bg-warm);
padding: clamp(3.5rem, 6vw, 6rem) var(--otr-section-px) clamp(5rem, 8vw, 8rem);
}
.otr-legal__body {
max-width: 46rem;
font-family: var(--otr-font-body);
font-size: 1.0625rem;
line-height: 1.75;
color: var(--otr-color-bg);
}
.otr-legal__body > :first-child { margin-top: 0; }
.otr-legal__body > :last-child { margin-bottom: 0; }
/* De openingsalinea draagt de samenvatting van de hele pagina. */
.otr-legal__body > p:first-of-type {
font-size: clamp(1.125rem, 1.6vw, 1.375rem);
line-height: 1.6;
margin-bottom: 2rem;
}
.otr-legal__body p { margin: 0 0 1.25rem; }
.otr-legal__body h2 {
font-family: var(--otr-font-body);
font-size: clamp(1.375rem, 2.2vw, 1.75rem);
font-weight: 400;
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--otr-color-bg);
margin: clamp(2.5rem, 4vw, 3.5rem) 0 1rem;
padding-top: clamp(1.5rem, 2.5vw, 2rem);
border-top: 1px solid rgba(0, 33, 37, 0.14);
}
.otr-legal__body h3 {
font-family: var(--otr-font-body);
font-size: 1.125rem;
font-weight: 500;
line-height: 1.4;
color: var(--otr-color-bg);
margin: 2rem 0 0.75rem;
}
.otr-legal__body ul { list-style: disc; margin: 0 0 1.25rem; padding-left: 1.25rem; }
.otr-legal__body ol { list-style: decimal; margin: 0 0 1.25rem; padding-left: 1.25rem; }
.otr-legal__body li { margin-bottom: 0.625rem; }
.otr-legal__body li::marker { color: rgba(0, 33, 37, 0.45); }
.otr-legal__body strong { font-weight: 600; }
/* Cyaan valt weg op crème, dus de link krijgt een donkerder variant. */
.otr-legal__body a {
color: #0f6d79;
text-decoration: underline;
text-underline-offset: 0.15em;
text-decoration-thickness: 1px;
}
.otr-legal__body a:hover { color: var(--otr-color-bg); }
.otr-legal__body :is(img, iframe) { max-width: 100%; height: auto; border-radius: var(--otr-radius-card); }
.otr-legal__body table { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; }
.otr-legal__body :is(th, td) {
text-align: left;
padding: 0.625rem 0.75rem;
border-bottom: 1px solid rgba(0, 33, 37, 0.14);
}
/* De slotregel is de datum van bijwerken en hoort niet als lopende tekst te wegen. */
.otr-legal__body > p:last-child {
font-size: 0.875rem;
color: rgba(0, 33, 37, 0.6);
}
/* ---------------------------------------------------------------------------
* Live-label bij een case
*
* Staat de site online, dan zet de klant het adres in het veld Live URL en
* verschijnt dit naast de categorie. Het is de enige pil die een link is, dus
* hij moet als knop leesbaar zijn zonder de rij uit elkaar te trekken: zelfde
* hoogte en ronding als de categoriepillen, alleen het bolletje verschilt.
* ------------------------------------------------------------------------- */
:root {
/* Op crème moet het groen donker genoeg zijn om te lezen; op de donkere
hero juist licht. Vandaar twee waarden in plaats van één. */
--otr-color-live: #15803d;
}
.otr-live {
display: inline-flex; align-items: center; gap: 0.5rem;
height: 2.5rem; padding: 0 1rem;
border-radius: var(--otr-radius-full);
border: 1px solid currentColor;
color: var(--otr-color-bg);
font-family: var(--otr-font-body);
font-size: clamp(0.875rem, 1vw, var(--otr-fs-nav));
font-weight: 400; line-height: 1; white-space: nowrap;
text-decoration: none;
transition: background-color 200ms ease, color 200ms ease;
}
.otr-live--op-donker { color: var(--otr-color-primary); --otr-color-live: #4ade80; }
.otr-work-grid-wrap--dark .otr-live { color: var(--otr-color-primary); --otr-color-live: #4ade80; }
.otr-live:hover,
.otr-live:focus-visible {
background: var(--otr-color-live);
border-color: var(--otr-color-live);
color: var(--otr-color-bg);
}
.otr-live__dot {
width: 0.5rem; height: 0.5rem; flex: none;
border-radius: 50%;
background: var(--otr-color-live);
/* De ring is een schaduw en geen tweede element, zodat hij buiten het
bolletje kan uitdijen zonder de regel te verbreden. */
animation: otr-live-puls 2s ease-out infinite;
}
.otr-live:hover .otr-live__dot,
.otr-live:focus-visible .otr-live__dot { background: var(--otr-color-bg); }
@keyframes otr-live-puls {
0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--otr-color-live) 70%, transparent); }
70%, 100% { box-shadow: 0 0 0 0.5rem transparent; }
}
@media (prefers-reduced-motion: reduce) {
.otr-live__dot { animation: none; }
}
/* ---------------------------------------------------------------------------
* Het licht en de ring die de muis volgen — zie OTR.aanwijzer
*
* Beide worden door JS aangemaakt, dus ze bestaan niet op een aanraakscherm en
* ook niet bij prefers-reduced-motion. Er staat hier daarom geen media query:
* wat er niet is hoeft niet verborgen te worden.
* ------------------------------------------------------------------------- */
.otr-licht,
.otr-ring {
position: fixed;
pointer-events: none;
opacity: 0;
transition: opacity 700ms ease;
}
.otr-heeft-aanwijzer .otr-licht,
.otr-heeft-aanwijzer .otr-ring { opacity: 1; }
.otr-licht {
inset: 0;
/* Laag 1: boven de achtergrond van een sectie, onder de tekst — die staat op
2 of hoger. Zo licht het achter de woorden op in plaats van eroverheen. */
z-index: 1;
background: radial-gradient(
30rem 30rem at var(--otr-licht-x, 50%) var(--otr-licht-y, 50%),
rgba(42, 189, 204, 0.11) 0%,
rgba(42, 189, 204, 0.05) 35%,
rgba(42, 189, 204, 0.02) 60%,
transparent 75%);
}
.otr-ring {
top: 0; left: 0;
width: 2rem; height: 2rem;
margin: -1rem 0 0 -1rem; /* het hart van de ring op de muis */
border: 1px solid var(--otr-color-accent);
border-radius: 50%;
z-index: 9999;
transition: opacity 700ms ease, width 260ms cubic-bezier(.22,.61,.36,1),
height 260ms cubic-bezier(.22,.61,.36,1),
margin 260ms cubic-bezier(.22,.61,.36,1),
background-color 260ms linear, border-color 260ms linear;
}
/* Boven iets klikbaars: groter, en net genoeg vulling om te merken dat er iets
te doen valt. */
.otr-ring--actief {
width: 3.5rem; height: 3.5rem;
margin: -1.75rem 0 0 -1.75rem;
background: rgba(42, 189, 204, 0.14);
border-color: rgba(42, 189, 204, 0.55);
}
/* ---------------------------------------------------------------------------
* Binnenkomen bij het scrollen — zie OTR.onthullen
*
* Alles hangt aan .otr-beweegt op , en die klasse zet JS er zelf op.
* Zonder JS staat er dus niets verborgen: een pagina die zichzelf pas toont
* als een script draait is een pagina die soms niets toont.
* ------------------------------------------------------------------------- */
.otr-beweegt .otr-op--tekst,
.otr-beweegt .otr-op--beeld {
transition-delay: var(--otr-op-wacht, 0ms);
}
/* Tekst: anderhalve regel omhoog en neerzetten. */
.otr-beweegt .otr-op--tekst {
opacity: 0;
transform: translate3d(0, 1.5rem, 0);
transition: opacity 700ms cubic-bezier(.22,.61,.36,1),
transform 700ms cubic-bezier(.22,.61,.36,1);
}
/* Beeld: iets verder omhoog dan tekst en trager, zodat het zwaarder aanvoelt. */
.otr-beweegt .otr-op--beeld {
opacity: 0;
transform: translate3d(0, 2.5rem, 0);
transition: opacity 900ms cubic-bezier(.22,.61,.36,1),
transform 900ms cubic-bezier(.22,.61,.36,1);
}
/* De foto komt tot stilstand in plaats van mee omhoog te schuiven: hij staat
iets te groot en zakt terug naar zijn eigen maat. */
.otr-beweegt .otr-op--beeld img {
transform: scale(1.06);
transition: transform 1200ms cubic-bezier(.22,.61,.36,1);
transition-delay: var(--otr-op-wacht, 0ms);
}
.otr-beweegt .otr-op--binnen.otr-op--tekst {
opacity: 1;
transform: none;
}
.otr-beweegt .otr-op--binnen.otr-op--beeld {
opacity: 1;
transform: none;
}
.otr-beweegt .otr-op--binnen.otr-op--beeld img {
transform: none;
}
/* ---------------------------------------------------------------------------
* De zoeker die langs een kop loopt — zie OTR.scherpstellen
*
* Buiten .otr-scherp--bezig staat er niets te gebeuren: de kop is dan gewoon
* een kop. Alleen tijdens de loop staan de woorden onscherp.
* ------------------------------------------------------------------------- */
.otr-scherp { position: relative; }
.otr-scherp__woord {
transition: filter 320ms ease, opacity 320ms ease;
}
.otr-scherp--bezig .otr-scherp__woord {
filter: blur(4px);
opacity: .55;
}
.otr-scherp--bezig .otr-scherp__woord--aan {
filter: none;
opacity: 1;
}
/* Het kader: vier hoeken, geen doorlopende rand. Een hele rechthoek eromheen
leest als een knop; hoeken lezen als een zoeker. */
.otr-scherp__kader {
position: absolute;
top: 0; left: 0;
pointer-events: none;
opacity: 0;
transition: transform 320ms cubic-bezier(.22,.61,.36,1),
width 320ms cubic-bezier(.22,.61,.36,1),
height 320ms cubic-bezier(.22,.61,.36,1),
opacity 220ms linear;
}
.otr-scherp__kader--aan { opacity: 1; }
.otr-scherp__kader i {
position: absolute;
width: 0.75rem; height: 0.75rem;
border: 2px solid var(--otr-color-accent);
}
/* De hoeken zetten alleen de twee randen die ze nodig hebben. */
.otr-scherp__kader i:nth-child(1) { top: -.35rem; left: -.45rem; border-right: 0; border-bottom: 0; }
.otr-scherp__kader i:nth-child(2) { top: -.35rem; right: -.45rem; border-left: 0; border-bottom: 0; }
.otr-scherp__kader i:nth-child(3) { bottom: -.35rem; left: -.45rem; border-right: 0; border-top: 0; }
.otr-scherp__kader i:nth-child(4) { bottom: -.35rem; right: -.45rem; border-left: 0; border-top: 0; }
/* Het oplopende getal — zie OTR.tellen. Cijfers met gelijke breedte, anders
verspringt de regel bij elke wissel ook binnen hetzelfde aantal tekens. */
.otr-tel {
display: inline-block;
font-variant-numeric: tabular-nums;
text-align: right;
}
/* ── Werkpagina: het laatste werk valt over de afsluiter ─────────────────
Niet de afsluiter omhoog, maar het laatste raster omlaag: de band houdt zijn
eigen achtergrond, en alleen de kaarten steken er onderuit het donker in.
Trek je de hele sectie omhoog, dan dekt die achtergrond de overlap juist af.
De kop eronder krijgt extra lucht zodat hij niet achter de kaarten verdwijnt. */
/* :last-of-type werkt hier niet: de afsluiter is zelf ook een en is
dus de laatste. Het gaat om de band die er direct voor staat. */
/* De donkere band knipt zijn eigen achtergrond bij met overflow: hidden. Laat
je dat staan, dan snijdt hij ook de kaarten af die er juist uit moeten
steken. Achtergronden knippen sowieso op de rand van het element, dus hier
kan dat gerust open. */
.otr-work-grid-wrap:has(+ .otr-cta) { padding-bottom: 0; overflow: visible; }
/* Het verloop houdt de bovenste 7% van de donkere band crème, zodat hij op de
band erboven aansluit. Staat de quote vooraan, dan valt lichte tekst daar
weg; die moet er dus onder beginnen. */
.otr-work-grid-wrap--quote-boven {
/* Het crème verloop over de bovenste 7% bestond om een hoge kaart te laten
aansluiten op de band erboven. Met de quote vooraan is er niets om op aan
te sluiten en bleef er alleen een lap wit over — bijna tweehonderd pixels
tussen de laatste titel en het donker. Dus: meteen donker, en de quote
krijgt daarbinnen zijn eigen lucht. */
background-image: url('../assets/images/cases/backgroundcasesnew.jpg');
background-blend-mode: normal;
background-size: cover;
background-position: center top;
padding-top: clamp(4rem, 7vw, 7rem);
}
/* En de band erboven houdt zelf wat meer ruimte onder de titels, zodat de
overgang gelijkmatig oogt in plaats van een krappe marge gevolgd door een
groot gat. */
.otr-work-grid-wrap:has(+ .otr-work-grid-wrap--quote-boven) {
padding-bottom: clamp(3rem, 5vw, 5.5rem);
}
.otr-work-grid-wrap:has(+ .otr-cta) .otr-work-grid {
position: relative;
z-index: 2;
margin-bottom: calc(-1 * clamp(3rem, 7vw, 8rem));
}
.otr-cta--werk .otr-cta__content {
padding-top: clamp(9rem, 16vw, 17rem);
}
.otr-cta--werk .otr-cta__actions { margin-bottom: 0; }
/* ═══════════════════════════════════════════════════════════════════════════
CONTACT — het glas en het formulier
Links het glas (3D in js/contact-glas.js), rechts het formulier. Het script
zet .otr-glas--aan (scène draait), .otr-glas--klaar (eerste beeld staat),
data-otr-stap (schenk → proost → klaar) en data-otr-vol (0/1/2).
Zonder script: alleen het formulier, gecentreerd.
═══════════════════════════════════════════════════════════════════════════ */
.otr-glas {
background: var(--otr-color-bg);
color: var(--otr-color-primary);
position: relative;
min-height: 100vh;
display: grid;
place-items: center;
padding: clamp(6rem, 11vh, 9rem) var(--otr-section-px) clamp(3rem, 6vh, 5rem);
overflow: hidden;
}
.otr-glas__plek { display: none; }
/* De 3D-canvas. Komt pas in beeld als het eerste frame er echt staat; tot
die tijd gloeit de plek zacht, zodat er niets "inploft". */
.otr-glas__doek {
position: absolute; inset: 0; z-index: 0;
width: 100%; height: 100%; display: block;
pointer-events: none;
opacity: 0; transition: opacity 900ms ease;
}
.otr-glas--klaar .otr-glas__doek { opacity: 1; }
/* ── Met de scène: twee kolommen ──────────────────────────────────────── */
.otr-glas--aan {
height: 100vh;
grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
grid-template-areas: "glas paneel";
column-gap: clamp(2rem, 6vw, 7rem);
align-items: center; justify-items: stretch;
padding: clamp(7rem, 13vh, 10rem) max(var(--otr-section-px), calc((100% - 100rem) / 2)) clamp(2rem, 5vh, 4rem);
}
.otr-glas--aan .otr-glas__plek,
.otr-glas--wacht .otr-glas__plek {
display: block; grid-area: glas;
width: 100%; height: 100%; min-height: 0;
pointer-events: none;
background: radial-gradient(42% 36% at 50% 56%, rgba(42,189,204,.14), transparent 70%);
transition: opacity 900ms ease;
}
.otr-glas--klaar .otr-glas__plek { opacity: 0; }
/* ── Het paneel: kop, formulier, en op dezelfde plek later het A4'tje ──── */
.otr-glas__paneel {
grid-area: paneel;
width: min(32rem, 100%); margin-inline: auto;
position: relative; z-index: 3;
display: grid;
grid-template-rows: auto auto;
row-gap: clamp(1.25rem, 2.5vh, 2rem);
align-content: center;
}
.otr-glas__kop { grid-row: 1; grid-column: 1; }
.otr-glas__formulier,
.otr-glas__a4 { grid-row: 2; grid-column: 1; }
.otr-glas__titel {
font-family: var(--otr-font-body);
font-size: var(--otr-fs-headline);
font-weight: 400; line-height: 1.06;
margin: 0 0 .5rem;
}
.otr-glas__titel em { font-family: var(--otr-font-accent); font-style: italic; font-weight: 300; }
.otr-glas__hint {
font-family: var(--otr-font-accent);
font-style: italic; font-weight: 300;
font-size: var(--otr-fs-nav);
opacity: .62; margin: 0; max-width: none;
display: grid; min-height: 1.5em;
}
.otr-glas__hint span { grid-area: 1 / 1; opacity: 0; transition: opacity 400ms ease; }
.otr-glas[data-otr-vol="0"] .otr-glas__hint-0,
.otr-glas[data-otr-vol="1"] .otr-glas__hint-1,
.otr-glas[data-otr-vol="2"] .otr-glas__hint-2,
.otr-glas[data-otr-vol="3"] .otr-glas__hint-3 { opacity: 1; }
.otr-glas[data-otr-stap="klaar"] .otr-glas__hint { opacity: 0; }
.otr-glas__formulier {
/* Geen backdrop-filter: boven een live canvas rekent de compositor die
elk frame opnieuw uit. Een vaste, iets lichtere vlakvulling leest
hetzelfde. */
background: rgba(8, 54, 60, .82);
border: 1px solid rgba(244,239,234,.14);
border-radius: var(--otr-radius-card);
padding: clamp(1.5rem, 2.2vw, 2rem);
box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .25);
transition: opacity 500ms ease, transform 500ms ease, visibility 0s 0s;
}
.otr-glas[data-otr-stap="proost"] .otr-glas__formulier { pointer-events: none; }
.otr-glas[data-otr-stap="klaar"] .otr-glas__formulier {
opacity: 0; transform: translateY(-1rem) scale(.98);
pointer-events: none; visibility: hidden;
transition: opacity 500ms ease, transform 500ms ease, visibility 0s 500ms;
}
.otr-glas--verstuurt .otr-contact-form__actions .otr-btn { opacity: .6; pointer-events: none; }
.otr-contact-form__fout {
color: #ffb4b4; font-size: var(--otr-fs-sm);
margin: .75rem 0 0; max-width: none;
}
.otr-contact-form__fout[hidden] { display: none; }
.otr-glas__klein {
font-size: var(--otr-fs-sm);
opacity: .6; margin: var(--otr-space-md) 0 0; max-width: none;
}
.otr-glas__klein a { color: var(--otr-color-accent); text-decoration: none; }
.otr-glas__formulier .otr-contact-form__input,
.otr-glas__formulier .otr-contact-form__textarea {
background: rgba(0,33,37,.4);
border: 1px solid rgba(244,239,234,.2);
color: var(--otr-color-primary);
}
.otr-glas__formulier .otr-contact-form__input::placeholder,
.otr-glas__formulier .otr-contact-form__textarea::placeholder { color: rgba(244,239,234,.45); }
.otr-glas__formulier .otr-contact-form__input:focus-visible,
.otr-glas__formulier .otr-contact-form__textarea:focus-visible {
outline: 2px solid var(--otr-color-accent); outline-offset: 2px;
}
/* ── Het A4'tje ──────────────────────────────────────────────────────────
Een vel papier, geen kaart: scherpe hoeken, crème, een echte schaduw. Het
komt van onderen naar je toe gekanteld, als een vel dat je wordt
aangereikt. */
.otr-glas__a4 { perspective: 1200px; justify-self: center; width: 100%; }
.otr-glas__a4[hidden] { display: none; }
.otr-glas__papier {
box-sizing: border-box;
height: min(66vh, 38rem); aspect-ratio: 210 / 297; width: auto;
max-width: 100%;
margin-inline: auto;
background: var(--otr-color-bg-warm);
color: var(--otr-color-bg);
padding: clamp(1.5rem, 2.4vw, 2.25rem) clamp(1.5rem, 2.6vw, 2.5rem);
border-radius: .25rem;
box-shadow: 0 2.5rem 4rem rgba(0,0,0,.45), 0 .25rem .5rem rgba(0,0,0,.2);
display: flex; flex-direction: column; gap: .75rem;
transform-origin: 50% 100%;
animation: otr-a4-in 1100ms cubic-bezier(.22,.61,.36,1) both;
}
@keyframes otr-a4-in {
from { opacity: 0; transform: translateY(45%) rotateX(28deg) scale(.86); }
60% { opacity: 1; }
to { opacity: 1; transform: none; }
}
.otr-glas__a4-boven {
font-size: var(--otr-fs-sm); text-transform: uppercase; letter-spacing: .08em;
opacity: .6; margin: 0; max-width: none;
}
.otr-glas__a4-titel {
font-family: var(--otr-font-body);
font-size: clamp(2rem, 3vw, 3rem); font-weight: 400; line-height: 1.05;
margin: 0; color: var(--otr-color-bg);
}
.otr-glas__a4-naam { font-family: var(--otr-font-accent); font-style: italic; font-weight: 300; }
.otr-glas__a4-tekst { margin: .25rem 0 0; line-height: 1.55; max-width: none; }
.otr-glas__a4-gegevens {
list-style: none; padding: 1rem 0 0; margin: auto 0 0;
display: grid; gap: .35rem;
border-top: 1px solid rgba(0,33,37,.2);
}
.otr-glas__a4-gegevens a { color: inherit; text-decoration: none; }
.otr-glas__a4-gegevens a:hover { text-decoration: underline; }
.otr-glas__a4-onder { margin: 1rem 0 0; max-width: none; }
.otr-glas__a4-onder img { height: 1.75rem; width: auto; display: block; filter: brightness(0) opacity(.85); }
/* Honeypot: weg van het scherm, maar niet display:none — sommige bots slaan
juist over wat verborgen is. */
.otr-vangnet {
position: absolute !important;
width: 1px; height: 1px;
overflow: hidden; clip-path: inset(50%);
white-space: nowrap;
}
.otr-contact-melding {
border-radius: var(--otr-radius-card);
padding: .875rem 1.125rem;
margin-bottom: 1rem;
font-size: var(--otr-fs-sm);
}
.otr-contact-melding--goed { background: rgba(42,189,204,.16); border: 1px solid rgba(42,189,204,.4); }
.otr-contact-melding--fout { background: rgba(255,110,110,.14); border: 1px solid rgba(255,110,110,.4); }
.otr-contact-melding a { color: var(--otr-color-accent); }
/* Smal scherm: glas als band boven, paneel eronder. */
@media (max-width: 62rem) {
.otr-glas--aan {
height: auto; min-height: 100vh;
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "glas" "paneel";
row-gap: 1.25rem; column-gap: 0;
align-content: start;
padding: clamp(5.5rem, 10vh, 8rem) var(--otr-section-px) clamp(3rem, 6vh, 5rem);
}
.otr-glas--aan .otr-glas__plek { height: min(40vh, 22rem); }
.otr-glas__papier { height: auto; aspect-ratio: auto; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.otr-glas__papier { animation: none; }
.otr-glas__formulier, .otr-glas__doek, .otr-glas__hint span { transition: none; }
}
/* ═══════════════════════════════════════════════════════════════════════════
FEEDBACK 06-10-2026 — buiten de lagen, zodat het de banden hierboven wint.
═══════════════════════════════════════════════════════════════════════════ */
/* ── Work: elke band begint met een rij die over de kleurwissel heen valt ──
De bovenste rand van de donkere band blijft crème over een vaste hoogte, en
de witte band erna wordt over de donkere heen getrokken. Zo hangt de eerste
kaart van elke band half in het vorige vlak — zoals overal op de site. */
.otr-work-grid-wrap { --otr-werk-overlap: clamp(9rem, 17vw, 17rem); }
.otr-work-grid-wrap--dark {
background-image:
linear-gradient(to bottom, var(--otr-color-bg-warm) 0 var(--otr-werk-overlap), transparent var(--otr-werk-overlap)),
url('../assets/images/cases/backgroundcasesnew.jpg');
background-blend-mode: normal, lighten;
background-size: 100% auto, cover;
background-position: top, center top;
}
/* Ruimte onderin de donkere band voor de witte rij die eroverheen komt. */
.otr-work-grid-wrap--dark:has(+ .otr-work-grid-wrap--light) {
padding-bottom: calc(var(--otr-werk-overlap) + clamp(1rem, 1.5vw, 2rem));
overflow: visible;
}
.otr-work-grid-wrap--light {
position: relative; z-index: 1;
margin-top: calc(-1 * var(--otr-werk-overlap));
padding-top: 0;
background: linear-gradient(to bottom, transparent var(--otr-werk-overlap), #ffffff var(--otr-werk-overlap));
}
/* Onderaan de laatste donkere band loopt de gloed uit in het vlak van de
afsluiter, in plaats van hard af te breken op de sectierand. */
.otr-work-grid-wrap--dark:has(+ .otr-cta)::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0;
height: clamp(10rem, 24vw, 22rem);
background: linear-gradient(to bottom, rgba(0, 33, 37, 0), var(--otr-color-bg));
pointer-events: none;
}
.otr-work-grid-wrap--dark > .otr-work-grid { position: relative; z-index: 1; }
@media (max-width: 767px) {
.otr-work-grid-wrap { --otr-werk-overlap: 5rem; }
}
/* ── Culture: de bovenste fotostrook half in het crème, half in het donker,
en daaronder minder lucht naar de afsluiter. ─────────────────────────── */
.otr-culture-values { padding-bottom: clamp(3rem, 5vw, 5rem); }
.otr-culture-fotos {
--otr-strip-h: clamp(130px, 16vw, 250px);
padding-top: 0;
padding-bottom: clamp(1.5rem, 3vw, 3rem);
background: linear-gradient(to bottom,
var(--otr-color-bg-warm) 0 calc(var(--otr-strip-h) / 2),
var(--otr-color-bg) calc(var(--otr-strip-h) / 2));
}
/* ── Vacatures: aan de voorkant hooguit drie regels. ──────────────────── */
.otr-job-item__text {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ── Megamenu op lage schermen (14-inch laptops): dezelfde opstelling,
alleen kleiner. Eén schaalfactor op het hele interieur, van 1 op schermen
van 850 px en hoger naar 0,7 op 740 px en lager — zo past het menu in
beeld zonder te scrollen en blijven de verhoudingen exact. ──────────── */
/* De schaal zelf zet js/main.js (OTR.megaMenu.pas) als inline zoom op
.otr-megamenu__inner: gemeten op de echte schermhoogte, niet geraden. */
/* ── Cookiebanner: donker glas, linksonder. ───────────────────────────── */
.otr-cookies {
position: fixed; left: 1.25rem; bottom: 1.25rem; z-index: 1200;
width: min(26rem, calc(100vw - 2.5rem));
color: var(--otr-color-primary);
font-size: var(--otr-fs-sm);
}
.otr-cookies[hidden] { display: none; }
/* De kaart krijgt bij openen de focus (tabindex -1) en mag dan geen ring
tonen; de algemene focus-visible-regel staat later in de cascade. */
.otr-cookies__kaart:focus, .otr-cookies__kaart:focus-visible { outline: none !important; }
.otr-cookies__kaart {
/* Donker glas: iets doorlaten, flink blur, en een lichte sheen langs de
bovenrand zodat het als een plaat glas leest in plaats van een vlak. */
background:
linear-gradient(165deg, rgba(244, 239, 234, .08), rgba(244, 239, 234, 0) 45%),
rgba(0, 33, 37, .78);
backdrop-filter: blur(22px) saturate(1.4);
-webkit-backdrop-filter: blur(22px) saturate(1.4);
border: 1px solid rgba(244, 239, 234, .18);
border-radius: var(--otr-radius-card);
padding: 1.5rem;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1.5rem 3rem rgba(0, 0, 0, .35);
animation: otr-cookies-in 480ms cubic-bezier(.22, .61, .36, 1) both;
}
/* Boven de live 3D-canvas geen blur: die zou elk frame opnieuw gerekend worden. */
body.page-template-page-contact .otr-cookies__kaart {
backdrop-filter: none; -webkit-backdrop-filter: none;
background: rgba(0, 33, 37, .95);
}
@keyframes otr-cookies-in {
from { opacity: 0; transform: translateY(1.25rem); }
to { opacity: 1; transform: none; }
}
.otr-cookies__kop { display: flex; align-items: center; gap: .75rem; margin: 0 0 .75rem; }
.otr-cookies__ijs { width: 2rem; height: 2rem; flex: none; }
.otr-cookies__titel {
font-family: var(--otr-font-body);
font-size: 1.375rem; font-weight: 400; line-height: 1.15;
margin: 0;
}
.otr-cookies__titel em { font-family: var(--otr-font-accent); font-style: italic; font-weight: 300; }
.otr-cookies__tekst { margin: 0 0 1.25rem; line-height: 1.55; opacity: .85; max-width: none; }
.otr-cookies__tekst a { color: var(--otr-color-accent); }
.otr-cookies__opties { display: grid; gap: .5rem; margin: 0 0 1.25rem; }
.otr-cookies__optie {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
padding: .625rem .75rem;
border: 1px solid rgba(244, 239, 234, .14);
border-radius: var(--otr-radius-lg);
cursor: pointer;
}
.otr-cookies__optie strong { display: block; font-weight: 500; }
.otr-cookies__optie small { display: block; opacity: .65; font-size: .8125rem; }
.otr-cookies__schakel {
appearance: none; -webkit-appearance: none;
width: 2.75rem; height: 1.5rem; margin: 0; flex: none;
border-radius: var(--otr-radius-full);
background: rgba(244, 239, 234, .22);
position: relative; cursor: pointer;
transition: background 200ms ease;
}
.otr-cookies__schakel::after {
content: '';
position: absolute; top: .1875rem; left: .1875rem;
width: 1.125rem; height: 1.125rem; border-radius: 50%;
background: var(--otr-color-primary);
transition: transform 200ms ease;
}
.otr-cookies__schakel:checked { background: var(--otr-color-accent); }
.otr-cookies__schakel:checked::after { transform: translateX(1.25rem); }
.otr-cookies__schakel:disabled { opacity: .55; cursor: default; }
.otr-cookies__schakel:focus-visible { outline: 2px solid var(--otr-color-accent); outline-offset: 2px; }
/* Knoppen: twee even brede pillen naast elkaar, de derde keuze als rustige
regel eronder in het midden. Zo staat alles op één raster. */
.otr-cookies__acties { display: grid; grid-template-columns: 1fr 1fr; gap: .625rem; align-items: stretch; }
.otr-cookies__acties .otr-btn {
width: 100%; min-height: 3rem; padding: 0 .875rem;
justify-content: center; text-align: center; white-space: nowrap;
font-size: .9375rem;
}
.otr-cookies__meer {
grid-column: 1 / -1; justify-self: center;
background: none; border: 0; padding: .375rem .5rem; margin: .125rem 0 -.375rem;
color: var(--otr-color-primary); opacity: .7; font: inherit; font-size: .875rem;
text-decoration: underline; text-underline-offset: .2em; cursor: pointer;
}
.otr-cookies__meer:hover { opacity: 1; }
@media (max-width: 40rem) {
.otr-cookies { left: .75rem; right: .75rem; bottom: .75rem; width: auto; }
.otr-cookies__kaart { padding: 1.25rem; }
}
/* Smal: de twee pillen onder elkaar, over de volle breedte. */
@media (max-width: 26rem) {
.otr-cookies__acties { grid-template-columns: 1fr; }
}
/* In de footer ziet de knop eruit als de links ernaast. */
.otr-footer__copy .otr-cookies-open {
background: none; border: 0; padding: 0;
font: inherit; color: inherit; cursor: pointer;
}
.otr-footer__copy .otr-cookies-open:hover { text-decoration: underline; }
/* De banner staat buiten .otr-page (scoped reset), dus het lettertype moet
hier expliciet; en [hidden] moet winnen van display:grid/flex hierboven. */
.otr-cookies { font-family: var(--otr-font-body); line-height: 1.5; }
.otr-cookies [hidden] { display: none !important; }
/* ── Hero: de kaartenring (OTR.ring) ─────────────────────────────────────
Een cilinder van kaarten, schuin van boven bekeken en een tikje gerold.
Het script bouwt stage > camera > ring en zet de tegels; hier staan maat,
kijkhoek en de vlakken. Zonder script: een gewone rij kaarten. */
.otr-hero__ring {
position: absolute; top: 0; bottom: 0; z-index: 0;
left: calc(50% - var(--otr-hero-card-w) * 0.35);
right: calc(var(--otr-hero-card-w) * -0.9);
--otr-ring-kaart: var(--otr-hero-card-w);
--otr-ring-fade: var(--otr-color-bg);
--otr-ring-radius: var(--otr-radius-card);
--otr-ring-binnen: .45; /* hoe donker de ruggen zijn (1 = niet) */
--otr-ring-tilt: -13deg; /* camera kijkt van boven */
--otr-ring-rol: -6deg; /* schuin over het beeld */
/* Waar het midden van de ring komt (deel van de hoogte van dit vak) en
hoeveel van die hoogte hij maximaal mag innemen. Op desktop zit boven de
balk en onder de logostrook; het midden daartussen ligt net onder 50%. */
--otr-ring-centrum: .5;
--otr-ring-vulling: .76;
touch-action: pan-y;
user-select: none; -webkit-user-select: none;
-webkit-tap-highlight-color: transparent;
outline: none; cursor: grab;
pointer-events: all;
}
.otr-hero__ring--sleept { cursor: grabbing; }
/* Zonder script: rij. */
.otr-hero__ring:not(.otr-hero__ring--aan) { display: flex; align-items: center; gap: var(--otr-hero-card-gap); overflow: hidden; }
.otr-hero__ring:not(.otr-hero__ring--aan) .otr-ring__card { flex: 0 0 var(--otr-hero-card-w); aspect-ratio: 387/676; border-radius: var(--otr-radius-card); overflow: hidden; }
.otr-ring__plat { width: 100%; height: 100%; object-fit: cover; display: block; }
.otr-ring__stage {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
opacity: 0; transition: opacity .45s ease;
}
.otr-hero__ring--klaar .otr-ring__stage { opacity: 1; }
.otr-ring__camera, .otr-ring__ring, .otr-ring__card { width: 0; height: 0; transform-style: preserve-3d; }
.otr-ring__camera { position: relative; }
.otr-ring__ring, .otr-ring__card { position: absolute; left: 0; top: 0; }
.otr-hero__ring--aan .otr-ring__card { display: block; }
.otr-ring__tegel {
position: absolute;
outline: 1px solid transparent;
backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.otr-ring__kader { position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; }
.otr-ring__foto {
position: absolute; display: block; max-width: none; object-fit: cover;
pointer-events: none; user-select: none; -webkit-user-drag: none;
}
.otr-ring__schaduw, .otr-ring__binnen { position: absolute; inset: 0; pointer-events: none; }
.otr-ring__schaduw { background: var(--otr-ring-fade); opacity: var(--otr-ring-diep, 0); }
.otr-ring__binnen { background: #000; opacity: var(--otr-ring-binnen); }
@media (max-width: 1023px) {
.otr-hero__ring { display: none; }
}
@media (max-width: 767px) {
/* Als band onder de kop, zoals de strook eerder stond. */
.otr-hero__ring {
display: block; position: absolute;
top: 335px; bottom: auto; height: 360px;
left: 0; right: 0;
--otr-ring-kaart: 150px;
--otr-ring-tilt: -10deg;
--otr-ring-rol: -4deg;
--otr-ring-centrum: .5;
--otr-ring-vulling: .9;
z-index: 1;
}
.otr-hero__ring:not(.otr-hero__ring--aan) { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
.otr-ring__stage { transition: none; }
}
/* ═══════════════════════════════════════════════════════════════════════════
SFEER (js/sfeer.js). IJsklik, koude cursor, echt glas en smeltblok zijn
gebouwd en op verzoek van de klant weer verwijderd (ijsklik op 29-10-2026).
═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════
KOUD LICHT — de belevenis zit in licht, niet in techniek (zie elevel):
zachte teal gloed + ijskorrel op elk donker vlak, ijskristallen in de hero,
de kop die woord voor woord scherp komt, en een koud licht dat op kaarten
met de muis meeloopt. Lagen worden door js/sfeer.js gezet.
═══════════════════════════════════════════════════════════════════════════ */
:root {
--otr-korrel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ── Hero ──────────────────────────────────────────────────────────────── */
.otr-hero__bg::before {
content: ''; position: absolute; inset: -18%;
background:
radial-gradient(44% 50% at 74% 34%, rgba(42, 189, 204, .32), transparent 70%),
radial-gradient(38% 42% at 14% 86%, rgba(0, 122, 134, .52), transparent 70%),
radial-gradient(24% 28% at 42% 6%, rgba(184, 216, 218, .10), transparent 70%);
animation: otr-gloed-drift 26s ease-in-out infinite alternate;
will-change: transform;
}
.otr-hero__bg::after {
content: ''; position: absolute; inset: 0;
background-image: var(--otr-korrel); background-size: 180px 180px;
opacity: .085; mix-blend-mode: overlay; pointer-events: none;
}
.otr-glinster { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
@keyframes otr-gloed-drift {
from { transform: translate3d(-2%, -1%, 0) scale(1); }
to { transform: translate3d(2%, 2%, 0) scale(1.06); }
}
/* De kop komt woord voor woord scherp (ReactBits BlurText). */
.otr-kopin .otr-kopin__w {
display: inline-block;
opacity: 0; filter: blur(10px); transform: translateY(.35em);
animation: otr-kopin 900ms cubic-bezier(.22, .61, .36, 1) forwards;
animation-delay: calc(var(--i, 0) * 90ms + 120ms);
}
@keyframes otr-kopin { to { opacity: 1; filter: blur(0); transform: none; } }
/* ── Donkere vlakken: gloed + korrel ───────────────────────────────────── */
.otr-heeft-licht { position: relative; isolation: isolate; }
.otr-gloed, .otr-korrel { position: absolute; inset: 0; pointer-events: none; display: block; }
.otr-gloed {
background:
radial-gradient(38% 46% at 82% 18%, rgba(42, 189, 204, .20), transparent 70%),
radial-gradient(34% 40% at 10% 90%, rgba(0, 122, 134, .40), transparent 70%);
}
.otr-korrel { background-image: var(--otr-korrel); background-size: 180px 180px; opacity: .07; mix-blend-mode: overlay; }
@media (prefers-reduced-motion: reduce) {
.otr-hero__bg::before { animation: none; }
}
/* ── De ring lost links op in de achtergrond ───────────────────────────────
Een mask op de ring-box in plaats van een dekkend verloop erbovenop: zo
blijft wat achter de ring ligt (gloed, korrel, kristallen) overal doorlopen
en is er nergens een rand. De blur-lagen van .otr-hero__fade-left blijven. */
@media (min-width: 1024px) {
.otr-hero__ring {
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 calc(var(--otr-hero-card-w) * 1.15));
mask-image: linear-gradient(to right, transparent 0, #000 calc(var(--otr-hero-card-w) * 1.15));
}
}
/* ═══════════════════════════════════════════════════════════════════════════
CASE-BLOKKENBOUWER — het raster (single-case.php, otr_case_blokken)
Drie kolommen; rijen van een halve kolombreedte (via container query
units), dus 1×2 is een vierkant. Donkere vlakken zijn eigen rasteritems
achter de blokken: ze beginnen een stuk onder de bovenrand van hun rijen en
lopen een stuk voorbij de onderrand, zodat de blokken over de kleurwissel
hangen zoals overal op de site.
═══════════════════════════════════════════════════════════════════════════ */
.otr-case-body { --otr-case-overlap: clamp(4rem, 8vw, 7rem); }
.otr-case-grid-wrap {
container-type: inline-size;
padding: 0 0 clamp(3rem, 5vw, 5rem);
}
/* Eindigt het raster donker, dan geen lucht: het vlak loopt in de afsluiter. */
.otr-case-grid-wrap--eindigt-donker { padding-bottom: 0; }
.otr-case-grid {
--otr-gr-gap: clamp(1rem, 1.25vw, 1.5rem);
--otr-gr-kolom: calc((100cqw - 2 * var(--otr-section-px) - 2 * var(--otr-gr-gap)) / 3);
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-auto-rows: calc((var(--otr-gr-kolom) - var(--otr-gr-gap)) / 2);
gap: var(--otr-gr-gap);
padding: 0 var(--otr-section-px);
position: relative;
}
.otr-case-grid__blok {
position: relative; z-index: 1;
border-radius: var(--otr-radius-card);
overflow: hidden;
background: var(--otr-color-bg);
}
.otr-case-grid__vlak {
position: relative; z-index: 0; display: block;
grid-column: 1 / -1;
margin: var(--otr-case-overlap) calc(-1 * var(--otr-section-px)) calc(-1 * var(--otr-case-overlap));
background: var(--otr-color-bg);
isolation: isolate;
pointer-events: none;
}
/* Een vlak dat tot de laatste rij loopt, loopt door tot in de afsluiter. */
.otr-case-grid-wrap--eindigt-donker .otr-case-grid { padding-bottom: clamp(3rem, 5vw, 5rem); }
.otr-case-grid-wrap--eindigt-donker .otr-case-grid__vlak--tot-eind { margin-bottom: calc(-1 * clamp(3rem, 5vw, 5rem)); }
@media (max-width: 767px) {
/* Mobiel: twee kolommen, blokken in leesvolgorde met hun eigen verhouding;
de donkere vlakken vallen hier weg. */
.otr-case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; grid-auto-flow: dense; }
.otr-case-grid__blok { grid-column: auto / span var(--otr-mw, 1) !important; grid-row: auto !important; aspect-ratio: var(--otr-ar, 1); }
.otr-case-grid__vlak { display: none; }
}
/* ── Case: speler, quote en het donkere einde ──────────────────────────────
Een YouTube/Vimeo-speler in een kader dat breder is dan de film: zo breed
als het kader, onderaan uitgelijnd (de bediening blijft in beeld), bovenin
valt een strook weg. In een smaller kader past de film erin; de poster
verdwijnt zodra hij speelt, zodat er geen foto naast de film uitsteekt. */
.otr-case-grid__blok--dek .otr-case-media__player iframe,
.otr-case-hero__img-card--dek .otr-case-media__player iframe {
top: auto; bottom: 0; height: auto; aspect-ratio: var(--otr-video-ar, 16 / 9);
}
.otr-case-media__player--playing > img { visibility: hidden; }
/* De quote op een casepagina: minder lucht dan op de work-pagina, waar hij
een band afsluit. */
.otr-case-body .otr-work-quote--light {
padding-top: clamp(3.5rem, 6vw, 6rem);
padding-bottom: clamp(3.5rem, 6vw, 6rem);
}
.otr-case-grid-wrap:has(+ .otr-work-quote) { padding-bottom: clamp(1rem, 2vw, 2rem); }
/* Eindigt de pagina donker, dan loopt het vlak zonder naad in de afsluiter:
de gloed dooft onderin het vlak, en de foto van de afsluiter komt van
boven uit het donker op. */
.otr-case-grid__vlak--tot-eind::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
height: clamp(6rem, 12vw, 12rem);
background: linear-gradient(to bottom, rgba(0, 33, 37, 0), var(--otr-color-bg));
}
.otr-case-body--eindigt-donker + .otr-cta .otr-cta__bg::after {
content: ''; position: absolute; left: 0; right: 0; top: 0;
height: clamp(8rem, 16vw, 16rem);
background: linear-gradient(to bottom, var(--otr-color-bg), rgba(0, 33, 37, 0));
}
/* ── Work: de donkere band boven de afsluiter ──────────────────────────────
De laatste rij kaarten hangt in de afsluiter. De sfeerlaag maakte van de
band een eigen stapel (isolation), waardoor de afsluiter de kaarten en de
fade afsneed. De band ligt nu boven de afsluiter, en de foto van de
afsluiter komt van boven uit het donker op — zelfde overgang als op een
casepagina die donker eindigt. */
.otr-work-grid-wrap--dark:has(+ .otr-cta) { z-index: 1; }
.otr-cta--werk .otr-cta__bg::after {
content: ''; position: absolute; left: 0; right: 0; top: 0;
height: clamp(8rem, 16vw, 16rem);
background: linear-gradient(to bottom, var(--otr-color-bg), rgba(0, 33, 37, 0));
}
/* ═══════════════════════════════════════════════════════════════════════════
LANDINGSPAGINA (SEO) — page-landing.php / inc/landing.php
De gemigreerde pagina's: stadspagina's, "video laten maken", kosten,
artikelen. Donkere hero met de letterlijke H1, openingsvideo over de
kleurwissel (hergebruikt .otr-case-hero__img-wrap), leeskolom met
inhoudsopgave, video's op een donker vlak, FAQ als accordeon.
═══════════════════════════════════════════════════════════════════════════ */
.otr-landing-hero {
position: relative; overflow: hidden;
background: var(--otr-color-bg);
padding: clamp(8rem, 13vw, 12rem) var(--otr-section-px) clamp(5rem, 8vw, 7rem);
}
/* Met een openingsbeeld: ruimte onderin voor de kaart die eroverheen hangt
(zelfde maat als de casepagina: 22rem overlap + 4rem lucht). */
.otr-landing-hero--met-beeld { padding-bottom: 26rem; }
.otr-landing-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.otr-landing-hero__bg-img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: lighten; opacity: .55; display: block; }
.otr-landing-hero__inner { position: relative; z-index: 2; max-width: 56rem; }
.otr-landing-hero__eyebrow,
.otr-landing__eyebrow {
font-family: var(--otr-font-accent); font-style: italic; font-weight: 300;
font-size: var(--otr-fs-nav); color: var(--otr-color-accent);
margin: 0 0 var(--otr-space-md); max-width: none;
}
.otr-landing-hero__title {
font-family: var(--otr-font-body);
font-size: clamp(2rem, 3.5vw, 4.0625rem);
font-weight: 400; line-height: 1.15; letter-spacing: -.01em;
color: var(--otr-color-primary); margin: 0 0 1.5rem;
text-wrap: balance;
}
.otr-landing-hero__intro {
color: var(--otr-color-primary); opacity: .9;
font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.6;
max-width: 44rem;
}
.otr-landing-hero__intro p { margin: 0 0 1rem; max-width: none; }
.otr-landing-hero__intro p:last-child { margin-bottom: 0; }
.otr-landing-hero__cta { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.otr-landing-body { background: var(--otr-color-bg-warm); }
/* Leeskolom + inhoudsopgave */
.otr-landing__raster {
display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 46rem);
justify-content: center; column-gap: clamp(3rem, 6vw, 7rem);
padding: clamp(4rem, 7vw, 7rem) var(--otr-section-px) clamp(3rem, 5vw, 5rem);
}
.otr-landing__raster:has(> .otr-landing__artikel:only-child) { grid-template-columns: minmax(0, 46rem); }
.otr-landing__zij-vast { position: sticky; top: 7rem; }
.otr-landing__zij-kop { font-size: var(--otr-fs-sm); text-transform: uppercase; letter-spacing: .08em; color: var(--otr-color-bg); opacity: .6; margin: 0 0 .75rem; max-width: none; }
.otr-landing__inhoud { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .35rem; }
.otr-landing__inhoud a {
display: block; padding: .35rem 0 .35rem .9rem; border-left: 2px solid rgba(0, 33, 37, .14);
color: var(--otr-color-bg); text-decoration: none; font-size: var(--otr-fs-sm); line-height: 1.4;
transition: border-color 200ms ease, color 200ms ease;
}
.otr-landing__inhoud a:hover { border-color: var(--otr-color-accent); color: var(--otr-color-accent); }
.otr-landing__zij-knop { width: 100%; justify-content: center; }
.otr-landing__artikel {
font-family: var(--otr-font-body); font-size: 1.0625rem; line-height: 1.75;
color: var(--otr-color-bg); min-width: 0;
}
.otr-landing__artikel > :first-child { margin-top: 0; }
.otr-landing__artikel p { margin: 0 0 1.25rem; max-width: none; }
.otr-landing__artikel ul, .otr-landing__artikel ol { margin: 0 0 1.25rem; padding-left: 1.25rem; }
.otr-landing__artikel li { margin: 0 0 .4rem; }
.otr-landing__artikel ul li::marker { color: var(--otr-color-accent); }
.otr-landing__artikel a { color: var(--otr-color-accent); text-underline-offset: .15em; }
.otr-landing__artikel strong { font-weight: 600; }
.otr-landing__artikel img {
display: block; width: 100%; height: auto; max-width: none;
border-radius: var(--otr-radius-card); margin: 2rem 0;
}
.otr-landing__artikel blockquote {
margin: 2rem 0; padding: 0 0 0 1.25rem; border-left: 3px solid var(--otr-color-accent);
font-family: var(--otr-font-accent); font-style: italic; font-weight: 300; font-size: 1.25rem; line-height: 1.5;
}
.otr-landing__kop--h2 {
font-family: var(--otr-font-body); font-size: clamp(1.625rem, 2.4vw, 2.25rem);
font-weight: 400; line-height: 1.2; letter-spacing: -.01em; color: var(--otr-color-bg);
margin: clamp(3rem, 5vw, 4.5rem) 0 1rem; scroll-margin-top: 7rem; text-wrap: balance;
}
.otr-landing__kop--h2 em { font-family: var(--otr-font-accent); font-style: italic; font-weight: 300; }
.otr-landing__kop--h3 {
font-family: var(--otr-font-body); font-size: clamp(1.25rem, 1.7vw, 1.5rem);
font-weight: 500; line-height: 1.3; color: var(--otr-color-bg);
margin: 2.25rem 0 .75rem; scroll-margin-top: 7rem;
}
.otr-landing__artikel h4, .otr-landing__artikel h5 {
font-family: var(--otr-font-body); font-size: 1.0625rem; font-weight: 600; line-height: 1.4;
color: var(--otr-color-bg); margin: 1.5rem 0 .5rem;
}
/* Video's op een donker vlak (gloed via OTR.koudLicht) */
.otr-landing__videos {
background: var(--otr-color-bg); color: var(--otr-color-primary);
padding: clamp(4rem, 7vw, 7rem) var(--otr-section-px);
}
.otr-landing__videos-inner { max-width: 100%; }
.otr-landing__videos-kop { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.otr-landing__titel {
font-family: var(--otr-font-body); font-size: var(--otr-fs-headline);
font-weight: 400; line-height: 1.12; letter-spacing: -.01em; margin: 0; text-wrap: balance;
}
.otr-landing__titel em { font-family: var(--otr-font-accent); font-style: italic; font-weight: 300; }
.otr-landing__videos .otr-landing__titel { color: var(--otr-color-primary); }
.otr-landing__videos-raster { display: grid; gap: clamp(1rem, 1.25vw, 1.5rem); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.otr-landing__videos-raster--1 { grid-template-columns: minmax(0, 1fr); }
.otr-landing__videos-raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.otr-landing__video {
position: relative; aspect-ratio: 16 / 9;
border-radius: var(--otr-radius-card); overflow: hidden; background: var(--otr-color-surface);
}
/* FAQ — zelfde opzet als het dienstenblok op de homepage: titel links, rijen
met hairlines rechts, rond plus-knopje dat omklapt naar een min. Geen
kaartjes, zodat het blok op elk scherm dezelfde breedte volgt als de rest. */
.otr-faq { padding: var(--otr-section-py) var(--otr-section-px); scroll-margin-top: 6rem; }
.otr-faq__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 6rem); align-items: start; }
.otr-faq__kop .otr-landing__titel { color: var(--otr-color-bg); font-size: var(--otr-fs-display); line-height: 1.06; }
.otr-faq__lijst { border-top: 1px solid var(--otr-color-bg); }
.otr-faq__item { border-bottom: 1px solid var(--otr-color-bg); }
.otr-faq__vraag {
list-style: none; cursor: pointer;
display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
padding: clamp(1.25rem, 2.2vw, 1.875rem) 0;
font-size: clamp(1.125rem, 1.5vw, 1.5rem); font-weight: 400; line-height: 1.3; color: var(--otr-color-bg);
}
.otr-faq__vraag::-webkit-details-marker { display: none; }
.otr-faq__plus {
position: relative; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%;
border: 1px solid var(--otr-color-bg); color: var(--otr-color-bg);
transition: background 200ms ease, color 200ms ease;
}
.otr-faq__plus::before, .otr-faq__plus::after {
content: ''; position: absolute; left: 50%; top: 50%; width: .875rem; height: 1.5px;
background: currentColor; transform: translate(-50%, -50%); transition: transform 240ms ease;
}
.otr-faq__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.otr-faq__item[open] .otr-faq__plus::after { transform: translate(-50%, -50%) rotate(0); }
.otr-faq__item[open] .otr-faq__plus, .otr-faq__vraag:hover .otr-faq__plus { background: var(--otr-color-bg); color: var(--otr-color-primary); }
.otr-faq__antwoord {
padding: 0 4.25rem clamp(1.5rem, 2.4vw, 2.125rem) 0; max-width: 42rem;
color: var(--otr-color-bg); font-size: var(--otr-fs-body-lg); line-height: 1.6;
}
.otr-faq__antwoord p { margin: 0 0 .75rem; max-width: none; }
.otr-faq__antwoord p:last-child { margin-bottom: 0; }
@media (max-width: 1023px) {
.otr-landing__raster { grid-template-columns: minmax(0, 1fr); row-gap: 2rem; }
.otr-landing__zij-vast { position: static; }
.otr-landing__inhoud { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem .75rem; }
.otr-landing__zij-knop { width: auto; }
.otr-faq__inner { grid-template-columns: minmax(0, 1fr); row-gap: 1.5rem; }
.otr-faq__antwoord { padding-right: 3.5rem; }
}
@media (max-width: 767px) {
.otr-landing-hero { padding-top: 7rem; }
.otr-landing-hero--met-beeld { padding-bottom: 14rem; }
.otr-landing-body .otr-case-hero__img-wrap { margin-top: -11rem; }
.otr-landing__inhoud { grid-template-columns: minmax(0, 1fr); }
.otr-landing__videos-raster, .otr-landing__videos-raster--2 { grid-template-columns: minmax(0, 1fr); }
}
/* ── Kennisbank-overzicht (page-kennisbank.php) ────────────────────────────
Artikelen als rijen met hairlines (zoals het dienstenblok), begrippen als
rustige kaarten in een raster van drie. */
.otr-kennis { padding: var(--otr-section-py) var(--otr-section-px) 0; }
.otr-kennis:last-of-type { padding-bottom: var(--otr-section-py); }
.otr-kennis__kop { margin-bottom: clamp(2rem, 4vw, 3.5rem); max-width: 44rem; }
.otr-kennis__kop .otr-landing__titel { color: var(--otr-color-bg); }
.otr-kennis__lijst { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--otr-color-bg); }
.otr-kennis__item { border-bottom: 1px solid var(--otr-color-bg); }
.otr-kennis__link {
display: flex; align-items: center; justify-content: space-between; gap: 2rem;
padding: clamp(1.375rem, 2.4vw, 2.125rem) 0; text-decoration: none; color: var(--otr-color-bg);
}
.otr-kennis__tekst { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.otr-kennis__naam { font-size: clamp(1.25rem, 1.9vw, 1.875rem); font-weight: 400; line-height: 1.15; letter-spacing: -.01em; }
.otr-kennis__regel { font-size: var(--otr-fs-nav); color: rgba(0, 33, 37, .6); line-height: 1.45; max-width: 60ch; }
.otr-kennis__pijl {
display: inline-flex; align-items: center; justify-content: center; flex: none;
width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--otr-color-bg); color: var(--otr-color-bg);
transition: background 200ms ease, color 200ms ease, transform 200ms ease;
}
.otr-kennis__link:hover .otr-kennis__pijl, .otr-kennis__kaart:hover .otr-kennis__pijl { background: var(--otr-color-bg); color: var(--otr-color-primary); transform: rotate(45deg); }
.otr-kennis__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 1.25vw, 1.5rem); }
.otr-kennis__kaart {
display: flex; flex-direction: column; gap: .5rem; min-height: 11rem;
padding: clamp(1.25rem, 2vw, 1.75rem); border-radius: var(--otr-radius-card);
background: rgba(255, 255, 255, .55); border: 1px solid rgba(0, 33, 37, .1);
color: var(--otr-color-bg); text-decoration: none;
transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.otr-kennis__kaart:hover { background: #fff; border-color: rgba(0, 33, 37, .25); transform: translateY(-2px); }
.otr-kennis__kaart-naam { font-size: clamp(1.125rem, 1.4vw, 1.375rem); font-weight: 400; line-height: 1.2; }
.otr-kennis__kaart-regel { font-size: var(--otr-fs-sm); color: rgba(0, 33, 37, .62); line-height: 1.5; }
.otr-kennis__kaart--alles { background: var(--otr-color-bg); color: var(--otr-color-primary); border-color: var(--otr-color-bg); justify-content: space-between; }
.otr-kennis__kaart--alles .otr-kennis__kaart-regel { color: rgba(244, 239, 234, .7); }
.otr-kennis__kaart--alles .otr-kennis__pijl { border-color: rgba(244, 239, 234, .5); color: var(--otr-color-primary); align-self: flex-end; }
.otr-kennis__kaart--alles:hover { background: var(--otr-color-bg-alt); }
.otr-kennis__kaart--alles:hover .otr-kennis__pijl { background: var(--otr-color-primary); color: var(--otr-color-bg); }
@media (max-width: 1023px) { .otr-kennis__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .otr-kennis__raster { grid-template-columns: minmax(0, 1fr); } .otr-kennis__kaart { min-height: 0; } }
/* ==================================================================
FORMULIEREN — meldingen en extra velden (mailflow 29-10-2026)
.otr-melding is de algemene variant van .otr-contact-melding, voor de
lichte pagina's (vacature, free stuff). Zelfde kleuren, donkere tekst.
================================================================== */
.otr-melding {
border-radius: var(--otr-radius-card);
padding: .875rem 1.125rem;
margin-bottom: 1.25rem;
font-size: var(--otr-fs-sm);
color: var(--otr-color-bg);
}
.otr-melding p { margin: 0; }
.otr-melding--goed { background: rgba(42,189,204,.16); border: 1px solid rgba(42,189,204,.45); }
.otr-melding--fout { background: rgba(255,110,110,.14); border: 1px solid rgba(255,110,110,.45); }
.otr-melding a { color: inherit; text-decoration: underline; }
.otr-svac-form .otr-melding { max-width: 40rem; }
.otr-free-card__form .otr-melding { margin-bottom: 0; }
/* Motivatie-veld op de vacaturepagina: zelfde lijn als de invoervelden, maar hoger en met ronde hoeken in plaats van een pil. */
.otr-svac-form__textarea {
width: 100%;
min-height: 7.5rem;
border: 1px solid var(--otr-color-bg);
border-radius: 1.5rem;
padding: 1rem 1.5rem;
font-family: var(--otr-font-body);
font-size: 1.125rem;
line-height: 1.5;
color: var(--otr-color-bg);
background: transparent;
outline: none;
appearance: none;
resize: vertical;
}
.otr-svac-form__textarea::placeholder { color: rgba(0,33,37,0.5); }
.otr-svac-form__textarea:focus { border-color: var(--otr-color-bg); box-shadow: 0 0 0 2px rgba(0,33,37,0.12); }
.otr-svac-form__file-text--gekozen { color: var(--otr-color-bg); font-weight: 500; }
/* Fotostrip culture: focus hoger dan het midden, anders vallen in het 5:3-kader
de hoofden van staande foto's weg (klant 29-10-2026). */
.otr-culture-strip__img { object-position: 50% 30%; }
.otr-culture-strip__img--portret { object-position: 50% 8%; }
/* Vacaturebanner: de gezichten staan hoog in de foto, dus het uitsnedevenster omhoog
(klant 29-10-2026: "gezicht mooier centreren"). */
.otr-vacature-banner img { object-position: 50% 18%; }
/* Offerteformulier op landingspagina's (hergebruikt het vacatureformulier):
kop in de maat van de andere landingskoppen, korte intro eronder. */
.otr-landing__offerte { padding-bottom: clamp(4rem, 6vw, 7rem); }
.otr-landing__offerte .otr-svac-form__heading { font-size: clamp(2.125rem, 3.4vw, 3.5rem); margin-bottom: .75rem; }
.otr-landing__offerte-intro { max-width: 40rem; margin: 0 0 clamp(1.5rem, 2.5vw, 2.5rem); color: rgba(0, 33, 37, .72); line-height: 1.55; }
/* ═══════════════════════════════════════════════════════════════════════════
CONTACT 29-10-2026 — eerst alleen het glas, klik erop, dan het formulier.
Stappen: klik → ijs (inschenken + blokjes) → schenk (formulier) → proost → klaar.
═══════════════════════════════════════════════════════════════════════════ */
.otr-glas--aan[data-otr-stap="klik"],
.otr-glas--aan[data-otr-stap="ijs"] {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "glas" "paneel";
grid-template-rows: minmax(0, 1fr) auto;
column-gap: 0; row-gap: clamp(1rem, 2vh, 1.5rem);
align-content: stretch; justify-items: center;
}
.otr-glas--aan[data-otr-stap="klik"] .otr-glas__paneel,
.otr-glas--aan[data-otr-stap="ijs"] .otr-glas__paneel {
text-align: center; width: min(36rem, 100%);
grid-template-rows: auto; justify-items: center;
}
.otr-glas--aan[data-otr-stap="klik"] .otr-glas__hint,
.otr-glas--aan[data-otr-stap="ijs"] .otr-glas__hint { justify-items: center; }
.otr-glas--aan[data-otr-stap="klik"] .otr-glas__formulier,
.otr-glas--aan[data-otr-stap="ijs"] .otr-glas__formulier,
.otr-glas--wacht[data-otr-stap="klik"] .otr-glas__formulier { display: none; }
/* Zolang het glas laadt: precies dezelfde opmaak als met glas (één kolom, paneel onderin,
gecentreerd), zodat niets verspringt als het canvas invloeit. Zonder dit zet grid-area
"paneel" het paneel in een impliciete tweede kolom, rechts. */
.otr-glas--wacht:not(.otr-glas--aan)[data-otr-stap="klik"] {
height: 100vh;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr) auto;
grid-template-areas: "glas" "paneel";
column-gap: 0; row-gap: clamp(1rem, 2vh, 1.5rem);
align-content: stretch; align-items: center; justify-items: center;
padding: clamp(7rem, 13vh, 10rem) max(var(--otr-section-px), calc((100% - 100rem) / 2)) clamp(2rem, 5vh, 4rem);
}
.otr-glas--wacht:not(.otr-glas--aan)[data-otr-stap="klik"] .otr-glas__paneel { text-align: center; justify-items: center; width: min(36rem, 100%); grid-template-rows: auto; }
.otr-glas--wacht:not(.otr-glas--aan)[data-otr-stap="klik"] .otr-glas__hint { justify-items: center; }
@media (max-width: 62rem) {
.otr-glas--wacht:not(.otr-glas--aan)[data-otr-stap="klik"] {
height: auto; min-height: 100vh; align-content: start;
padding: clamp(5.5rem, 10vh, 8rem) var(--otr-section-px) clamp(3rem, 6vh, 5rem);
}
.otr-glas--wacht:not(.otr-glas--aan)[data-otr-stap="klik"] .otr-glas__plek { height: min(46vh, 26rem); }
}
/* Het formulier komt van onderen op, nadat het ijs erin ligt. */
.otr-glas--aan[data-otr-stap="schenk"] .otr-glas__formulier { animation: otr-glas-form-in 700ms cubic-bezier(.22,.61,.36,1) backwards; }
@keyframes otr-glas-form-in {
from { opacity: 0; transform: translateY(1.25rem); }
to { opacity: 1; transform: none; }
}
/* Smal scherm: het glas iets hoger in beeld zolang het alleen staat. */
@media (max-width: 62rem) {
.otr-glas--aan[data-otr-stap="klik"] .otr-glas__plek,
.otr-glas--aan[data-otr-stap="ijs"] .otr-glas__plek { height: min(46vh, 26rem); }
}
@media (prefers-reduced-motion: reduce) {
.otr-glas--aan[data-otr-stap="schenk"] .otr-glas__formulier { animation: none; }
}
/* ── Case-kaart "hele afbeelding tonen" (vinkje bij de case) ──────────────────────
De kaart houdt dezelfde vorm als de andere kaarten; het beeld wordt er in zijn
geheel in gepast (geen uitsnede) op een witte achtergrond. */
.otr-case-card--passend .otr-case-card__img,
.otr-work-item--passend .otr-work-item__img { object-fit: contain; background: #ffffff; }
/* ── Dienstpagina: zwevende foto in zijn geheel (vinkje bij de pagina) ───────────── */
.otr-sdienst-float--passend .otr-sdienst-float__img { object-fit: contain; background: #ffffff; }