/* ========================================================= Actief65+ wireframe - refresh.css Design-verkenning voor de homepage. Alleen actief op pagina's met en dit bestand geladen. Terugdraaien: verwijder de body-class en de in index.html. Uitgangspunten: rustig en volwassen, geen slagschaduwen, echte fotografie groot, sterke typografische hiërarchie, één donker vlak per pagina, geen verlopen of trends die snel verouderen. ========================================================= */ body.is-refresh { --r-border: rgba(0, 100, 133, 0.16); --r-navy: #004a63; --r-ink: #22343c; --r-radius: 16px; color: var(--r-ink); } /* Elementen die alleen in de refresh bestaan */ .refresh-only { display: none; } body.is-refresh .refresh-only { display: block; } /* ---------- Typografie: hiërarchie ---------- */ body.is-refresh h1 { font-size: 60px; font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; } body.is-refresh h2 { font-size: 40px; font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; } body.is-refresh h3 { font-weight: 600; } body.is-refresh p, body.is-refresh .check-list .check-text, body.is-refresh .hero-intro { color: var(--r-ink); } body.is-refresh .section-heading > h2 + p { max-width: 640px; } /* ---------- Knoppen: strakker, minder rond ---------- */ body.is-refresh .btn { border-radius: 8px; padding: 14px 28px; font-weight: 600; } body.is-refresh .btn--sky { padding: 10px 20px; } body.is-refresh .btn--outline { border-color: var(--color-blue); } /* ---------- Header: lijn i.p.v. schaduw, geen topbar ---------- */ body.is-refresh .header-topbar { display: none; } body.is-refresh .header-main { border-bottom: 1px solid var(--r-border); } body.is-refresh .header-main.is-fixed { box-shadow: none; border-bottom: 1px solid var(--r-border); } /* ---------- Hero: één groot portret i.p.v. zes bewegende thumbnails ---------- */ body.is-refresh .hero { height: auto; padding: 72px 0 64px; } body.is-refresh .hero .container { align-items: center; gap: 64px; } body.is-refresh .hero-copy { flex: 1 1 560px; max-width: 600px; } body.is-refresh .hero-copy h1 { margin-bottom: 28px; } body.is-refresh .hero-gallery-wrap { display: none; } body.is-refresh .hero-photo { flex: 0 0 560px; max-width: 560px; height: 640px; border-radius: var(--r-radius); overflow: hidden; } body.is-refresh .hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; } body.is-refresh .hero-phone { margin-top: 24px; } /* ---------- Trustbalk: witte strook met lijnen ---------- */ body.is-refresh .trust-bar { background: var(--color-white); border-top: 1px solid var(--r-border); border-bottom: 1px solid var(--r-border); padding: 20px 0; } body.is-refresh .trust-bar__item { color: var(--r-ink); font-weight: 500; } body.is-refresh .trust-bar__item strong { color: var(--color-blue); } /* ---------- Partnerlogo's: rustig, grijs ---------- */ body.is-refresh .partner-logos .container { height: 96px; justify-content: center; gap: 56px; } body.is-refresh .partner-logos img { filter: grayscale(1); opacity: 0.7; } /* ---------- Kaarten: vlak met rand, geen schaduw ---------- */ body.is-refresh .card, body.is-refresh .interview-card, body.is-refresh .quote-card, body.is-refresh .side-card, body.is-refresh .audience-card, body.is-refresh .big-form { box-shadow: none; border: 1px solid var(--r-border); border-radius: var(--r-radius); transition: border-color 0.2s ease; } body.is-refresh .card:hover, body.is-refresh .interview-card:hover { border-color: var(--color-blue); } body.is-refresh .card__image img, body.is-refresh .interview-card__image img { border-radius: var(--r-radius) var(--r-radius) 0 0; } body.is-refresh .card__body h3 a, body.is-refresh .interview-card__body h3 { color: var(--color-blue); } body.is-refresh .card__body p, body.is-refresh .interview-card__body p { color: var(--r-ink); } /* ---------- Features: icoon in getinte cirkel ---------- */ body.is-refresh .feature__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--color-mist); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } body.is-refresh .feature__icon svg { width: 28px; height: 28px; } body.is-refresh .feature h3 { color: var(--color-blue); } /* Badge-sticker uit; tekstkolom krijgt de ruimte */ body.is-refresh .candidate-features .badge-col { display: none; } body.is-refresh .candidate-features .features-col { flex: 0 0 760px; max-width: 760px; } /* ---------- Quotes: rustige band ---------- */ body.is-refresh .quote { background: var(--color-mist); padding: 80px 0; } body.is-refresh .quote-card { background: var(--color-white); } body.is-refresh .quote-card__text { font-weight: 600; font-size: 21px; } /* ---------- Werkgevers-split: foto met ronde hoek ---------- */ body.is-refresh .split__photo { border-radius: 0 var(--r-radius) var(--r-radius) 0; } /* ---------- Interviews: wit, kaarten vlak ---------- */ body.is-refresh .interviews { background: var(--color-mist); } body.is-refresh .interviews h2 { text-align: left; align-self: flex-start; } /* ---------- Jubileum: het donkere vlak van de pagina ---------- */ body.is-refresh .stats { background: var(--r-navy); padding: 96px 0; } body.is-refresh .stats h2, body.is-refresh .stats p, body.is-refresh .stats .stat p { color: var(--color-white); } body.is-refresh .stats .stats__copy p { color: rgba(255, 255, 255, 0.85); } body.is-refresh .stats .stat__number { font-size: 64px; font-weight: 700; color: var(--color-white); letter-spacing: -0.02em; } body.is-refresh .stats .stat { border-left: 3px solid var(--color-green); padding-left: 20px; gap: 8px; } body.is-refresh .stats .btn--outline { color: var(--color-white); border-color: rgba(255, 255, 255, 0.7); } body.is-refresh .stats .btn--outline:hover { background: var(--color-white); color: var(--r-navy); } /* ---------- CTA-banner: wit met lijn ---------- */ body.is-refresh .cta-banner { background: var(--color-white); border-top: 1px solid var(--r-border); } body.is-refresh .cta-banner .split__photo { border-radius: 0 var(--r-radius) var(--r-radius) 0; } /* ---------- Contact ---------- */ body.is-refresh .contact { border-top: 1px solid var(--r-border); } body.is-refresh .contact-card h3 { font-weight: 600; } body.is-refresh .contact-card p, body.is-refresh .contact-card a { color: var(--r-ink); } body.is-refresh .contact-card a { text-decoration: none; } /* ---------- Footer: donkerblauw, compact ---------- */ body.is-refresh .footer-top { background: var(--r-navy); border-bottom: 1px solid rgba(255, 255, 255, 0.12); } body.is-refresh .footer-main, body.is-refresh .footer-bottom { background: var(--color-blue); } body.is-refresh .footer-col h4 { color: var(--color-white); font-size: var(--fs-lg); } body.is-refresh .footer-col h4.is-orange { color: #ffc98a; } body.is-refresh .footer-col h4.is-green { color: #cfe89a; } body.is-refresh .footer-links a, body.is-refresh .footer-bottom a { color: rgba(255, 255, 255, 0.85); } body.is-refresh .footer-links a:hover, body.is-refresh .footer-bottom a:hover { color: var(--color-white); } body.is-refresh .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.12); } body.is-refresh .social-icon { background: rgba(255, 255, 255, 0.12); border-radius: 8px; } body.is-refresh .newsletter-form input[type="email"] { border: 0; } /* ---------- Responsive ---------- */ @media (max-width: 1024px) { body.is-refresh .hero .container { flex-direction: column; align-items: stretch; } body.is-refresh .hero-photo { flex: none; max-width: none; height: 420px; } body.is-refresh h1 { font-size: 44px; } body.is-refresh h2 { font-size: 32px; } } @media (max-width: 767px) { body.is-refresh .hero { padding: 40px 0; } body.is-refresh .hero-photo { height: 320px; } body.is-refresh h1 { font-size: 36px; } body.is-refresh h2 { font-size: 28px; } body.is-refresh .stats .stat__number { font-size: 44px; } } /* ---------- Blokken met foto tegen de rand: lucht boven en onder ---------- */ body.is-refresh .employer-features, body.is-refresh .cta-banner { margin: 80px 0; } body.is-refresh .cta-banner { border-top: 0; } body.is-refresh .contact { border-top: 0; padding-top: 0; } @media (max-width: 767px) { body.is-refresh .employer-features, body.is-refresh .cta-banner { margin: 48px 0; } } /* ---------- Fotovlak links: breder (was 485px, 34% van 1440) ---------- */ body.is-refresh .split__photo { flex: 0 0 46%; max-width: 46%; min-height: 520px; } @media (max-width: 1024px) { body.is-refresh .split__photo { flex: 0 0 40%; max-width: 40%; min-height: 420px; } } /* ---------- Kandidatenblok: foto rechts, zelfde vlak als de foto's links (gespiegeld) ---------- */ body.is-refresh .candidate-features { margin: 80px 0; } body.is-refresh .candidate-features .container--wide { max-width: none; padding: 0; align-items: stretch; gap: 0; } body.is-refresh .candidate-features .features-col { flex: 1 1 auto; max-width: none; padding: 80px; justify-content: center; } body.is-refresh .candidate-features .features-grid { max-width: 720px; } body.is-refresh .candidate-features .section-heading { max-width: 720px; } body.is-refresh .candidate-features .features-photo { flex: 0 0 46%; max-width: 46%; min-height: 520px; margin: 0; border-radius: var(--r-radius) 0 0 var(--r-radius); overflow: hidden; } body.is-refresh .candidate-features .features-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; } @media (max-width: 1024px) { body.is-refresh .candidate-features .container--wide { flex-direction: column; padding: 0 var(--container-pad-wide); } body.is-refresh .candidate-features .features-col { padding: 40px 0; } body.is-refresh .candidate-features .features-photo { flex: none; max-width: none; min-height: 360px; border-radius: var(--r-radius); } } @media (max-width: 767px) { body.is-refresh .candidate-features { margin: 48px 0; } } /* ---------- Contact: drie kaarten met icoon, mist-achtergrond ---------- */ body.is-refresh .contact { background: var(--color-mist); border-top: 0; padding: 80px 0 96px; } body.is-refresh .contact > .container > p { max-width: 640px; margin-bottom: 20px; } body.is-refresh .contact-grid { gap: 24px; } body.is-refresh .contact-card { background: var(--color-white); border: 1px solid var(--r-border); border-radius: var(--r-radius); padding: 32px; display: flex; flex-direction: column; gap: 12px; } body.is-refresh .contact-card__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--color-blue); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 8px; } body.is-refresh .contact-card__icon svg { width: 24px; height: 24px; fill: var(--color-white); } body.is-refresh .contact-card h3 { font-size: var(--fs-lg); font-weight: 600; margin: 0; color: var(--color-blue); } body.is-refresh .contact-card p { font-size: var(--fs-base); line-height: 1.5; } body.is-refresh .contact-card__value { display: inline-block; margin-top: 12px; font-size: 22px; font-weight: 700; line-height: 1.3; color: var(--color-blue); text-decoration: none; } body.is-refresh .contact-card__value:hover { color: var(--r-navy); } body.is-refresh .contact-card:nth-child(2) .contact-card__icon { background: var(--color-green); } body.is-refresh .contact-card:nth-child(2) .contact-card__icon svg { fill: var(--r-ink); } /* ---------- Overige pagina's: zelfde kaartbehandeling ---------- */ body.is-refresh .team-card, body.is-refresh .vacancy-box, body.is-refresh .vacancy-card, body.is-refresh .func-card, body.is-refresh .news-card, body.is-refresh .lead-form, body.is-refresh .testimonial-card, body.is-refresh .comparison-col, body.is-refresh .pricing-block__card { box-shadow: none; border: 1px solid var(--r-border); border-radius: var(--r-radius); } body.is-refresh .side-card__image, body.is-refresh .team-card img, body.is-refresh .faq-split__photo img, body.is-refresh .post-hero__image img, body.is-refresh .hub-split img { border-radius: var(--r-radius); } body.is-refresh .interview-card__image img, body.is-refresh .card__image img { border-radius: var(--r-radius) var(--r-radius) 0 0; } body.is-refresh .stats--top { padding: 96px 0; } body.is-refresh .accordion details summary { background: var(--color-white); border: 1px solid var(--r-border); } body.is-refresh .faq-split { padding: 0; } body.is-refresh .lead-band { border-radius: var(--r-radius); } body.is-refresh .photo-hero__content h1 { font-size: 56px; } body.is-refresh .archive-page h1, body.is-refresh .team-page h1, body.is-refresh .faq-page h1, body.is-refresh .form-page h1 { font-size: 52px; } body.is-refresh .form-page { padding-top: 64px; } /* ---------- CTA-knoppen: witte tekst (keuze klant). Vlakken iets donkerder zodat wit minimaal 3:1 haalt (norm voor grote, vette tekst): groen 3,4:1, oranje 3,3:1. Op de originele kleuren zou wit 1,9:1 en 2,6:1 halen. ---------- */ body.is-refresh .btn--green, body.is-refresh .btn--primary, body.is-refresh .btn--orange, body.is-refresh .btn--secondary, body.is-refresh .newsletter-form button { color: var(--color-white); font-size: 20px; font-weight: 600; } body.is-refresh .btn--green, body.is-refresh .btn--primary, body.is-refresh .newsletter-form button { background: #669900; } body.is-refresh .btn--green:hover, body.is-refresh .btn--primary:hover, body.is-refresh .newsletter-form button:hover { background: #578200; } body.is-refresh .btn--orange, body.is-refresh .btn--secondary { background: #d9730a; } body.is-refresh .btn--orange:hover, body.is-refresh .btn--secondary:hover { background: #c26508; } body.is-refresh .newsletter-form button { font-size: var(--fs-base); } body.is-refresh .contact-card:nth-child(2) .contact-card__icon { background: #669900; } body.is-refresh .contact-card:nth-child(2) .contact-card__icon svg { fill: var(--color-white); } body.is-refresh .faq-split__sub { font-size: 24px; font-weight: 600; color: var(--color-blue); margin-top: 24px; } /* ---------- Hub-pagina's: tekstkolom als blokken, geen tekstmuur ---------- */ body.is-refresh .hub-split { gap: 80px; } body.is-refresh .hub-split__main { max-width: 680px; gap: 16px; } body.is-refresh .hub-split__main p { line-height: 1.55; } body.is-refresh .hub-split__main h3 { font-size: 26px; } body.is-refresh .hub-split__main h3:not(:first-child) { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--r-border); } body.is-refresh .hub-split__main .btn { margin-top: 24px; } /* Tekstlink in de foto-hero (secundaire actie naast één knop) */ body.is-refresh .photo-hero .link-more--light { color: var(--color-white); font-weight: 600; margin-top: 4px; } body.is-refresh .photo-hero .link-more--light svg { width: 14px; height: 14px; } /* FAQ-split: foto rekt mee met de vragenlijst */ body.is-refresh .faq-split { align-items: stretch; } body.is-refresh .faq-split__photo { display: flex; } body.is-refresh .faq-split__photo img { height: auto; min-height: 550px; flex: 1; object-fit: cover; } /* ========================================================= werkgevers2.html (variant 3): verkoopvolgorde, aanvraag op de pagina ========================================================= */ body.is-v3 .photo-hero--v3 .photo-hero__content { max-width: 720px; flex-basis: 720px; gap: 24px; } body.is-v3 .photo-hero--v3 h1 { font-size: 56px; } body.is-v3 .check-list--light .check-text { color: var(--color-white); font-size: var(--fs-lg); } body.is-v3 .check-list--light .check-icon svg { fill: #cfe89a; } body.is-v3 .check-list--light li { padding-bottom: 8px; } body.is-v3 .photo-hero--v3 .hero-ctas { align-items: center; gap: 24px; } body.is-v3 .hero-phone--light { margin: 0; color: var(--color-white); } body.is-v3 .hero-phone--light a { color: var(--color-white); text-decoration: underline; } body.is-v3 .proof-strip { border-bottom: 1px solid var(--r-border); padding: 24px 0; } body.is-v3 .proof-strip .container { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; } body.is-v3 .proof-strip__text { font-size: var(--fs-base); color: var(--r-ink); white-space: nowrap; } body.is-v3 .proof-strip__text strong { font-size: 24px; color: var(--color-blue); font-weight: 700; } body.is-v3 .proof-strip__logos { display: flex; align-items: center; gap: 36px; flex-wrap: wrap; } body.is-v3 .proof-strip__logos img { height: 40px; width: auto; max-width: 120px; object-fit: contain; filter: grayscale(1); opacity: 0.75; } body.is-v3 .proof-strip__certs { display: flex; align-items: center; gap: 20px; } body.is-v3 .proof-strip__certs img { height: 40px; width: auto; } body.is-v3 .steps-v3 .container { display: flex; flex-direction: column; gap: 40px; } body.is-v3 .steps-v3__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; counter-reset: none; } body.is-v3 .steps-v3__grid li { display: flex; flex-direction: column; gap: 12px; padding: 32px; border: 1px solid var(--r-border); border-radius: var(--r-radius); } body.is-v3 .steps-v3__num { width: 44px; height: 44px; border-radius: 50%; background: var(--color-blue); color: var(--color-white); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; } body.is-v3 .steps-v3__grid h3 { font-size: 22px; } body.is-v3 .steps-v3__grid p { font-size: var(--fs-lg); line-height: 1.5; } body.is-v3 .text-col { max-width: 720px; display: flex; flex-direction: column; gap: 16px; } body.is-v3 .text-col p { line-height: 1.55; } body.is-v3 .text-col--wide { max-width: 860px; } body.is-v3 .text-col h2 { font-size: 32px; margin-bottom: 8px; } body.is-v3 .text-col h3 { font-size: 24px; margin-top: 8px; } body.is-v3 .pricing-block .container { grid-template-columns: 1.15fr 0.85fr; } body.is-v3 .employer-features { margin-bottom: 0; } body.is-v3 .about-text { padding-top: 40px; } body.is-v3 .quote--multi h2 { text-align: center; } body.is-v3 .quotes-slider { max-width: 960px; } body.is-v3 .quote-card__meta--logo img { width: 72px; height: 72px; border-radius: 8px; object-fit: contain; background: var(--color-white); border: 1px solid var(--r-border); padding: 6px; } body.is-v3 .quotes-more { align-self: center; margin-top: 8px; } body.is-v3 .func-list__title { font-size: 24px; margin-top: 56px; } body.is-v3 .func-list { columns: 3; column-gap: 32px; margin-top: 20px; } body.is-v3 .func-list li { break-inside: avoid; padding: 8px 0; border-bottom: 1px solid var(--r-border); } body.is-v3 .func-list a { color: var(--color-blue); font-size: var(--fs-base); } body.is-v3 .func-list a:hover { text-decoration: underline; } body.is-v3 .whitepaper-box { margin-top: 56px; padding: 32px; border: 1px solid var(--r-border); border-radius: var(--r-radius); display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; background: var(--color-mist); } body.is-v3 .whitepaper-box h3 { font-size: 22px; margin-bottom: 8px; } body.is-v3 .whitepaper-box p { font-size: var(--fs-base); line-height: 1.5; } body.is-v3 .whitepaper-box__form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } body.is-v3 .whitepaper-box__form input { min-height: 48px; padding: 10px 14px; border: 2px solid #9db9c4; border-radius: var(--radius); font-size: var(--fs-base); background: var(--color-white); } body.is-v3 .whitepaper-box__form .btn { grid-column: 1 / -1; } body.is-v3 .whitepaper-box__form .form-note { grid-column: 1 / -1; font-size: 14px; color: var(--color-text); } body.is-v3 .faq-more { margin-top: 8px; } body.is-v3 .form-page--inline { background: var(--color-mist); padding: 80px 0 96px; } body.is-v3 .form-page--inline .form-page__title { grid-column: 1 / -1; font-size: 40px; } body.is-v3 .form-page--inline .form-side { grid-row: 2 / span 2; } body.is-v3 .form-page--inline .side-card { background: var(--color-white); } body.is-v3 .form-page--inline .side-card__link { text-align: left; } @media (max-width: 1024px) { body.is-v3 .steps-v3__grid { grid-template-columns: 1fr; } body.is-v3 .func-list { columns: 2; } body.is-v3 .whitepaper-box { grid-template-columns: 1fr; } body.is-v3 .proof-strip .container { justify-content: center; } } @media (max-width: 767px) { body.is-v3 .func-list { columns: 1; } body.is-v3 .whitepaper-box__form { grid-template-columns: 1fr; } body.is-v3 .photo-hero--v3 h1 { font-size: 36px; } } /* ---------- werkgevers2: afwisselende achtergronden, nooit twee keer dezelfde na elkaar foto > wit (strook) > mist (stappen) > navy (tarief) > wit (kenmerken) > mist (tekst) > wit (quotes) > mist (functies) > wit (faq) > mist (aanvraag) > navy (footer) ---------- */ body.is-v3 .steps-v3 { background: var(--color-mist); } body.is-v3 .steps-v3__grid li { background: var(--color-white); } body.is-v3 .pricing-block { background: var(--r-navy); } body.is-v3 .pricing-block h2, body.is-v3 .pricing-block__copy p { color: var(--color-white); } body.is-v3 .pricing-block__copy p { opacity: 0.92; } body.is-v3 .pricing-block__card { border: 0; } body.is-v3 .employer-features { background: var(--color-white); margin: 0; } body.is-v3 .about-text { background: var(--color-mist); padding: 80px 0; } body.is-v3 .about-text .text-col--wide { max-width: none; display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; } body.is-v3 .about-text h2 { grid-row: 1 / span 4; font-size: 34px; margin: 0; } body.is-v3 .about-text h3 { margin-top: 0; } body.is-v3 .quote--multi { background: var(--color-white); padding: 96px 0; } body.is-v3 .quote--multi .quote-card { background: var(--color-mist); border: 0; } body.is-v3 .quote--multi .quote-card__meta--logo img { border: 0; } body.is-v3 .service-cards { background: var(--color-mist); padding: 80px 0 96px; } body.is-v3 .service-cards .card { border: 0; } body.is-v3 .func-list li { border-bottom-color: rgba(0, 100, 133, 0.22); } body.is-v3 .whitepaper-box { background: var(--color-white); border: 0; } body.is-v3 .form-page--inline { background: var(--color-mist); } body.is-v3 .form-page--inline .big-form { border: 0; } body.is-v3 .form-page--inline .side-card { border: 0; } body.is-v3 .proof-strip { padding: 28px 0; } @media (max-width: 1024px) { body.is-v3 .about-text .text-col--wide { grid-template-columns: 1fr; } body.is-v3 .about-text h2 { grid-row: auto; } } /* ---------- werkgevers2: kenmerkenblok op mist met lucht boven en onder de foto; daarna weer afwisselen: navy > mist > wit > mist > wit > mist > wit > navy ---------- */ body.is-v3 .employer-features { background: var(--color-mist); padding: 80px 0; margin: 0; } body.is-v3 .employer-features .feature__icon { background: var(--color-white); } body.is-v3 .about-text { background: var(--color-white); } body.is-v3 .quote--multi { background: var(--color-mist); } body.is-v3 .quote--multi .quote-card { background: var(--color-white); } body.is-v3 .service-cards { background: var(--color-white); } body.is-v3 .service-cards .card { border: 1px solid var(--r-border); } body.is-v3 .whitepaper-box { background: var(--color-mist); } body.is-v3 [data-section="faq-split"] { background: var(--color-mist); } body.is-v3 [data-section="faq-split"] .accordion details summary { border: 0; } body.is-v3 .form-page--inline { background: var(--color-white); border-top: 1px solid var(--r-border); } body.is-v3 .form-page--inline .big-form, body.is-v3 .form-page--inline .side-card { border: 1px solid var(--r-border); } /* werkgevers2: hero ruimer */ body.is-v3 .photo-hero--v3 .container { padding-top: 110px; padding-bottom: 110px; min-height: 600px; } @media (max-width: 767px) { body.is-v3 .photo-hero--v3 .container { padding-top: 64px; padding-bottom: 64px; min-height: 0; } } /* archief met foto-hero: h2 als sectietitel */ body.is-refresh .archive-page__title { text-align: center; margin-bottom: 20px; } /* ---------- Aanvraagpagina (vacature-werkgevers): band > formulier > stappen > logo's > faq ---------- */ body.is-refresh .form-hero { background: var(--color-mist); padding: 72px 0 64px; } body.is-refresh .form-hero .container { display: flex; flex-direction: column; gap: 20px; max-width: 1040px; } body.is-refresh .form-hero .breadcrumb { font-size: var(--fs-base); color: var(--color-text); } body.is-refresh .form-hero .breadcrumb a { color: var(--color-text); } body.is-refresh .form-hero h1 { font-size: 52px; } body.is-refresh .form-hero__intro { font-size: 20px; line-height: 1.5; max-width: 800px; } body.is-refresh .form-hero__intro a { color: var(--color-blue); font-weight: 600; text-decoration: underline; } body.is-v3 .form-page--white { background: var(--color-white); border-top: 0; padding: 72px 0 80px; } body.is-v3 .form-page--white .container { grid-template-columns: minmax(0, 720px) 400px; } body.is-v3 .form-page--white .big-form { grid-column: 1; grid-row: 1; } body.is-v3 .form-page--white .form-side { grid-column: 2; grid-row: 1; } body.is-v3 .form-page--white .side-card { background: var(--color-mist); border: 0; } body.is-refresh .faq-single { background: var(--color-mist); } body.is-refresh .faq-single .container { max-width: 1000px; display: flex; flex-direction: column; gap: 32px; } body.is-refresh .faq-single .accordion details summary { background: var(--color-white); border: 0; } @media (max-width: 1024px) { body.is-v3 .form-page--white .container { grid-template-columns: 1fr; } body.is-v3 .form-page--white .form-side { grid-column: 1; grid-row: auto; } body.is-refresh .form-hero h1 { font-size: 40px; } } /* ---------- Uitzendkracht-pagina (kandidaten): zelfde opbouw als werkgevers ---------- */ body.is-v3 .proof-strip--candidates .container { justify-content: center; gap: 24px 56px; } body.is-v3 .about-text--region { background: var(--color-white); padding: 80px 0; } body.is-v3 .region-grid { display: grid; grid-template-columns: 1fr 420px; gap: 64px; align-items: center; } body.is-v3 .region-grid__copy { display: flex; flex-direction: column; gap: 16px; } body.is-v3 .region-grid__copy h2 { font-size: 34px; } body.is-v3 .region-links { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; } body.is-v3 .region-grid__map { width: 100%; height: auto; border-radius: var(--r-radius); } body.is-refresh .faq-single--white { background: var(--color-white); } body.is-refresh .faq-single--white .accordion details summary { background: var(--color-mist); } body.is-v3 .form-page--mist { background: var(--color-mist); border-top: 0; padding: 80px 0 96px; } body.is-v3 .form-page--mist .big-form, body.is-v3 .form-page--mist .side-card { border: 0; background: var(--color-white); } body.is-v3 .form-page--inline .form-page__intro { grid-column: 1; } @media (max-width: 1024px) { body.is-v3 .region-grid { grid-template-columns: 1fr; } } body.is-v3 .candidate-features { background: var(--color-mist); margin: 0; padding: 0; } body.is-v3 .candidate-features .feature__icon { background: var(--color-white); } /* kenmerkenblok op mist: 80px lucht boven en onder de foto */ body.is-v3 .candidate-features { padding: 80px 0; } body.is-v3 .candidate-features .features-col { padding: 0 80px; } body.is-v3 .candidate-features .features-photo { margin: 0; } @media (max-width: 1024px) { body.is-v3 .candidate-features .features-col { padding: 0 var(--container-pad-wide); } } /* ---------- "Zo werkt het": typografisch, grote lichte cijfers, geen kaarten ---------- */ body.is-v3 .steps-v3__grid { gap: 48px; } body.is-v3 .steps-v3__grid li { position: relative; padding: 56px 0 0; border: 0; border-top: 2px solid var(--color-blue); border-radius: 0; background: transparent; gap: 12px; } body.is-v3 .steps-v3__num { position: absolute; top: 8px; left: -6px; width: auto; height: auto; background: transparent; border-radius: 0; font-size: 88px; font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: rgba(0, 100, 133, 0.16); display: block; } body.is-v3 .steps-v3__grid h3 { position: relative; font-size: 24px; margin-top: 28px; } body.is-v3 .steps-v3__grid p { position: relative; } body.is-v3 .steps-v3 .container { gap: 48px; } @media (max-width: 767px) { body.is-v3 .steps-v3__num { font-size: 64px; } body.is-v3 .steps-v3__grid li { padding-top: 40px; } } /* ---------- "Zo werkt het": foto links, stappen als verhaal rechts ---------- */ body.is-v3 .steps-v3__split { display: grid; grid-template-columns: 5fr 6fr; gap: 72px; align-items: stretch; } body.is-v3 .steps-v3__photo { border-radius: var(--r-radius); overflow: hidden; min-height: 520px; } body.is-v3 .steps-v3__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; } body.is-v3 .steps-v3__body { display: flex; flex-direction: column; gap: 40px; justify-content: center; } body.is-v3 .steps-v3__body .section-heading > h2 + p { margin-top: 16px; } body.is-v3 .steps-v3__list { display: flex; flex-direction: column; } body.is-v3 .steps-v3__list li { position: relative; padding: 0 0 36px 56px; border-left: 2px solid rgba(0, 100, 133, 0.25); margin-left: 18px; display: flex; flex-direction: column; gap: 8px; } body.is-v3 .steps-v3__list li:last-child { padding-bottom: 0; border-left-color: transparent; } body.is-v3 .steps-v3__list .steps-v3__num { position: absolute; left: -19px; top: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--color-blue); color: var(--color-white); font-size: 16px; font-weight: 700; line-height: 1; letter-spacing: 0; display: inline-flex; align-items: center; justify-content: center; } body.is-v3 .steps-v3__list h3 { font-size: 22px; margin: 4px 0 0; } body.is-v3 .steps-v3__list p { font-size: var(--fs-lg); line-height: 1.5; } @media (max-width: 1024px) { body.is-v3 .steps-v3__split { grid-template-columns: 1fr; gap: 40px; } body.is-v3 .steps-v3__photo { min-height: 360px; } } /* ---------- Vacaturepagina ---------- */ body.is-v3 .vacancies-v3 { background: var(--color-mist); } body.is-v3 .vacancies-v3 .container { display: flex; flex-direction: column; gap: 40px; } body.is-v3 .vacancy-grid-v3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } body.is-v3 .vacancy-card-v3 { background: var(--color-white); border-radius: var(--r-radius); padding: 32px; display: flex; flex-direction: column; gap: 12px; } body.is-v3 .vacancy-card-v3 h3 { font-size: 22px; } body.is-v3 .vacancy-card-v3 p { font-size: var(--fs-lg); line-height: 1.5; flex: 1; } body.is-v3 .vacancy-card-v3 .link-more { margin-top: 8px; } body.is-v3 .steps-v3--white { background: var(--color-white); } body.is-v3 .quote--white { background: var(--color-white); } body.is-v3 .quote--white .quote-card { background: var(--color-mist); } body.is-v3 .stats--top { padding: 96px 0; } body.is-v3 .form-page--white .form-page__title { grid-column: 1 / -1; font-size: 40px; } body.is-v3 .form-page--white .form-page__intro { grid-column: 1; grid-row: 2; } body.is-v3 .form-page--white .big-form { grid-row: 3; } body.is-v3 .form-page--white .form-side { grid-row: 2 / span 2; } @media (max-width: 1024px) { body.is-v3 .vacancy-grid-v3 { grid-template-columns: 1fr; } body.is-v3 .form-page--white .form-page__intro, body.is-v3 .form-page--white .big-form, body.is-v3 .form-page--white .form-side { grid-column: 1; grid-row: auto; } } /* ---------- Artikelpagina (AOW en pensioen) ---------- */ body.is-v3 .photo-hero__lead { font-size: 20px; line-height: 1.5; color: var(--color-white); max-width: 680px; } body.is-v3 .photo-hero__lead a { color: var(--color-white); text-decoration: underline; } body.is-v3 .article-v3 { background: var(--color-white); } body.is-v3 .article-v3__body { max-width: 780px; display: flex; flex-direction: column; gap: 16px; } body.is-v3 .article-v3__body h3 { font-size: 26px; margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--r-border); } body.is-v3 .article-v3__body p { font-size: var(--fs-lg); line-height: 1.6; } body.is-v3 .article-v3__body ul.bullets { list-style: disc; padding-left: 28px; display: flex; flex-direction: column; gap: 10px; } body.is-v3 .article-v3__body li { font-size: var(--fs-lg); line-height: 1.55; color: var(--r-ink); } body.is-v3 .article-v3__body a { color: var(--color-blue); text-decoration: underline; } body.is-v3 .related-v3 { background: var(--color-mist); } body.is-v3 .related-v3 .container { display: flex; flex-direction: column; gap: 32px; } body.is-v3 .related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } body.is-v3 .related-card { background: var(--color-white); border-radius: var(--r-radius); padding: 28px; display: flex; flex-direction: column; gap: 16px; justify-content: space-between; min-height: 160px; transition: transform 0.2s ease; } body.is-v3 .related-card:hover { transform: translateY(-2px); } body.is-v3 .related-card h3 { font-size: 20px; } @media (max-width: 1024px) { body.is-v3 .related-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { body.is-v3 .related-grid { grid-template-columns: 1fr; } } body.is-v3 .candidate-features--white { background: var(--color-white); } body.is-v3 .candidate-features--white .feature__icon { background: var(--color-mist); } /* ---------- Over ons ---------- */ body.is-v3 .story-v3 { background: var(--color-mist); } body.is-v3 .story-v3__grid { display: grid; grid-template-columns: 4fr 7fr; gap: 72px; align-items: start; } body.is-v3 .story-v3__aside { display: flex; flex-direction: column; gap: 24px; } body.is-v3 .story-v3__aside h2 { font-size: 40px; } body.is-v3 .story-v3__founders { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } body.is-v3 .story-v3__founders img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-radius); } body.is-v3 .story-v3__caption { font-size: var(--fs-base); color: var(--color-text); } body.is-v3 .story-v3__body { display: flex; flex-direction: column; gap: 16px; } body.is-v3 .story-v3__body h3 { font-size: 26px; margin-top: 8px; } body.is-v3 .story-v3__body h3:not(:first-child) { margin-top: 28px; padding-top: 28px; border-top: 1px solid rgba(0, 100, 133, 0.2); } body.is-v3 .story-v3__body p { font-size: var(--fs-lg); line-height: 1.6; } body.is-v3 .pull-quotes { background: var(--color-white); } body.is-v3 .pull-quotes__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } body.is-v3 .pull-quote { border-left: 4px solid var(--color-green); padding: 8px 0 8px 28px; display: flex; flex-direction: column; gap: 12px; } body.is-v3 .pull-quote:nth-child(2) { border-left-color: var(--color-orange); } body.is-v3 .pull-quote p { font-size: 26px; font-weight: 600; line-height: 1.3; color: var(--color-blue); } body.is-v3 .pull-quote cite { font-style: normal; font-size: var(--fs-base); color: var(--color-text); } body.is-v3 .team-teaser { background: var(--color-mist); } body.is-v3 .team-teaser .container { display: flex; flex-direction: column; gap: 40px; } body.is-v3 .section-heading--row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; } body.is-v3 .team-mini-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } body.is-v3 .team-mini { background: var(--color-white); border-radius: var(--r-radius); padding: 20px; display: flex; flex-direction: column; gap: 6px; } body.is-v3 .team-mini img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; margin-bottom: 10px; } body.is-v3 .team-mini h3 { font-size: 20px; } body.is-v3 .team-mini p { font-size: var(--fs-base); color: var(--color-text); } body.is-v3 .cta-banner--mist { background: var(--color-mist); border-top: 0; } @media (max-width: 1024px) { body.is-v3 .story-v3__grid, body.is-v3 .pull-quotes__grid { grid-template-columns: 1fr; } body.is-v3 .team-mini-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { body.is-v3 .team-mini-grid { grid-template-columns: 1fr; } } body.is-refresh .cta-banner--mist { padding: 80px 0; margin: 0; } @media (max-width: 767px) { body.is-refresh .cta-banner--mist { padding: 48px 0; } } /* ---------- Teampagina ---------- */ body.is-v3 .team-page { padding: 80px 0 96px; background: var(--color-white); } body.is-v3 .team-page .container { gap: 0; } body.is-v3 .team-grid { gap: 32px; } body.is-v3 .team-card { box-shadow: none; border: 1px solid var(--r-border); border-radius: var(--r-radius); padding: 24px; display: flex; flex-direction: column; gap: 8px; background: var(--color-white); } body.is-v3 .team-card img { width: 100%; aspect-ratio: 1; height: auto; object-fit: cover; object-position: 50% 20%; border-radius: 12px; margin-bottom: 12px; } body.is-v3 .team-card h3 { font-size: 22px; } body.is-v3 .team-card .team-role { font-size: var(--fs-base); font-weight: 600; color: var(--color-sky-dark); margin-bottom: 4px; } body.is-v3 .team-card p { font-size: var(--fs-base); line-height: 1.55; color: var(--r-ink); } body.is-v3 .team-card__contact { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--r-border); display: flex; flex-direction: column; gap: 6px; } body.is-v3 .team-card__contact a { font-size: var(--fs-base); font-weight: 600; color: var(--color-blue); text-decoration: none; } body.is-v3 .team-card__contact a:hover { text-decoration: underline; } body.is-v3 .contact { border-top: 0; } /* ---------- Onze samenwerkingen ---------- */ body.is-v3 .about-text .text-col--wide > h2 + p { grid-row: auto; } body.is-v3 .story-cards { background: var(--color-white); } body.is-v3 .story-cards__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } body.is-v3 .story-card { border: 1px solid var(--r-border); border-radius: var(--r-radius); overflow: hidden; display: flex; flex-direction: column; background: var(--color-white); } body.is-v3 .story-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } body.is-v3 .story-card__body { padding: 32px; display: flex; flex-direction: column; gap: 16px; flex: 1; } body.is-v3 .story-card__body h3 { font-size: 26px; } body.is-v3 .story-card__body p { font-size: var(--fs-lg); line-height: 1.55; flex: 1; } body.is-v3 .story-card__body .btn { align-self: flex-start; } body.is-v3 .story-card--orange { border-top: 6px solid #d9730a; } body.is-v3 .story-card--green { border-top: 6px solid #669900; } body.is-v3 .logo-wall { background: var(--color-mist); } body.is-v3 .logo-wall .container { display: flex; flex-direction: column; gap: 40px; } body.is-v3 .logo-wall__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; } body.is-v3 .logo-wall__grid img { width: 100%; height: 110px; object-fit: contain; padding: 20px; background: var(--color-white); border-radius: 12px; filter: grayscale(1); opacity: 0.85; transition: filter 0.2s ease, opacity 0.2s ease; } body.is-v3 .logo-wall__grid img:hover { filter: none; opacity: 1; } @media (max-width: 1024px) { body.is-v3 .story-cards__grid { grid-template-columns: 1fr; } body.is-v3 .logo-wall__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 767px) { body.is-v3 .logo-wall__grid { grid-template-columns: repeat(2, 1fr); } } body.is-v3 .about-text--mist { background: var(--color-mist); } /* ---------- Nieuws / Pers / FAQ: archief met foto-hero (is-v3) ---------- */ body.is-v3 .eyebrow { display: inline-block; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-blue); } body.is-v3 .featured-post { background: var(--color-mist); padding: 80px 0; } body.is-v3 .featured-post__grid { display: grid; grid-template-columns: 6fr 5fr; gap: 64px; align-items: center; } body.is-v3 .featured-post__image { display: block; } body.is-v3 .featured-post__image img { display: block; width: 100%; height: 100%; min-height: 380px; max-height: 460px; object-fit: cover; border-radius: var(--r-radius); } body.is-v3 .featured-post__body { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; } body.is-v3 .featured-post__body h2 { font-size: 34px; line-height: 1.2; } body.is-v3 .featured-post__body h2 a { color: inherit; text-decoration: none; } body.is-v3 .featured-post__body h2 a:hover { text-decoration: underline; } body.is-v3 .featured-post__body p { color: var(--r-ink); font-size: 18px; line-height: 1.5; margin: 0; } body.is-v3 .featured-post__body .btn { margin-top: 8px; } body.is-v3 .archive-v3 { background: var(--color-white); padding: 80px 0; } body.is-v3 .archive-v3 .container { display: flex; flex-direction: column; gap: 40px; } body.is-v3 .archive-v3__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; border-bottom: 1px solid var(--r-border); padding-bottom: 20px; } body.is-v3 .archive-v3__head h2 { font-size: 34px; } body.is-v3 .archive-v3__head p { color: var(--r-ink); margin: 0; font-size: var(--fs-base); } body.is-v3 .archive-v3 .news-grid { gap: 48px 32px; } body.is-v3 .archive-v3 .interview-card__image img { aspect-ratio: 16 / 10; object-fit: cover; } /* pers */ body.is-v3 .proof-strip--media .container { justify-content: center; gap: 16px 40px; } body.is-v3 .proof-strip__label { font-size: var(--fs-base); color: var(--r-ink); margin: 0; } body.is-v3 .media-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 36px; list-style: none; margin: 0; padding: 0; } body.is-v3 .media-list li { font-size: 20px; font-weight: 700; color: var(--color-blue); opacity: 0.8; } body.is-v3 .press-contact { background: var(--color-mist); padding: 80px 0; } body.is-v3 .press-contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } body.is-v3 .press-card { background: var(--color-white); border-radius: var(--r-radius); padding: 40px; display: flex; flex-direction: column; gap: 16px; } body.is-v3 .press-card h2, body.is-v3 .press-card h3 { font-size: 28px; line-height: 1.2; } body.is-v3 .press-card p { color: var(--r-ink); margin: 0; } body.is-v3 .press-card__links { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; } body.is-v3 .press-card__links a { display: inline-flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 600; color: var(--color-blue); text-decoration: none; } body.is-v3 .press-card__links a:hover { text-decoration: underline; } body.is-v3 .press-card__links a svg { width: 20px; height: 20px; fill: var(--color-blue); flex: 0 0 auto; } body.is-v3 .press-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 8px; } body.is-v3 .press-facts div { border-top: 2px solid var(--color-sky); padding-top: 10px; } body.is-v3 .press-facts strong { display: block; font-size: 28px; color: var(--color-blue); font-weight: 700; line-height: 1.1; } body.is-v3 .press-facts span { font-size: 15px; color: var(--r-ink); } /* faq */ body.is-v3 .faq-group .container { gap: 28px; } body.is-v3 .faq-group__head { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; } body.is-v3 .faq-group__head h2 { font-size: 34px; } body.is-v3 .faq-group__head p { color: var(--r-ink); margin: 0; } body.is-v3 .faq-group .accordion { width: 100%; } body.is-v3 .faq-group .btn { align-self: flex-start; margin-top: 4px; } body.is-v3 .tag { display: inline-block; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-white); } body.is-v3 .tag--green { background: #669900; } body.is-v3 .tag--orange { background: #d9730a; } @media (max-width: 1024px) { body.is-v3 .featured-post__grid { grid-template-columns: 1fr; gap: 32px; } body.is-v3 .featured-post__image img { min-height: 0; max-height: 360px; } body.is-v3 .press-contact__grid { grid-template-columns: 1fr; } } @media (max-width: 767px) { body.is-v3 .featured-post, body.is-v3 .archive-v3, body.is-v3 .press-contact { padding: 56px 0; } body.is-v3 .featured-post__body h2, body.is-v3 .archive-v3__head h2, body.is-v3 .faq-group__head h2 { font-size: 28px; } body.is-v3 .press-card { padding: 28px; } body.is-v3 .press-facts { grid-template-columns: 1fr 1fr; } body.is-v3 .media-list li { font-size: 17px; } } body.is-v3 .contact--white { background: var(--color-white); } /* ---------- Contactpagina (is-v3): hero > contactkaarten > formulier (mist) > kantoor + kaart ---------- */ body.is-v3 .big-form__intro { color: var(--r-ink); font-size: 18px; line-height: 1.5; margin: -8px 0 8px; } body.is-v3 .side-card--actions { display: flex; flex-direction: column; gap: 12px; } body.is-v3 .side-card--actions h3 { margin-bottom: 4px; } body.is-v3 .side-card--actions .btn { width: 100%; text-align: center; } body.is-v3 .office { background: var(--color-white); padding: 80px 0; } body.is-v3 .office__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } body.is-v3 .office__copy { display: flex; flex-direction: column; gap: 20px; } body.is-v3 .office__copy h2 { font-size: 34px; } body.is-v3 .office__copy h3 { font-size: 20px; font-weight: 600; color: var(--color-blue); margin: 0 0 6px; } body.is-v3 .office__copy p { color: var(--r-ink); margin: 0; line-height: 1.6; } body.is-v3 .office__copy p a { color: var(--color-blue); font-weight: 600; text-decoration: none; } body.is-v3 .office__copy p a:hover { text-decoration: underline; } body.is-v3 .office__details { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--r-border); } body.is-v3 .doc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; } body.is-v3 .doc-list a { display: inline-flex; align-items: center; gap: 10px; color: var(--color-blue); font-weight: 600; text-decoration: none; } body.is-v3 .doc-list a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-sky); flex: 0 0 auto; } body.is-v3 .doc-list a:hover { text-decoration: underline; } body.is-v3 .office__logos { display: flex; align-items: center; gap: 24px; margin-top: 8px; } body.is-v3 .office__logos img { height: 48px; width: auto; } body.is-v3 .office__map iframe { display: block; width: 100%; height: 100%; min-height: 460px; border: 0; border-radius: var(--r-radius); } @media (max-width: 1024px) { body.is-v3 .office__grid { grid-template-columns: 1fr; gap: 40px; } body.is-v3 .office__map iframe { min-height: 340px; } } @media (max-width: 767px) { body.is-v3 .office { padding: 56px 0; } body.is-v3 .office__copy h2 { font-size: 28px; } body.is-v3 .office__details, body.is-v3 .doc-list { grid-template-columns: 1fr; } } body.is-v3 .form-page--contact .big-form { grid-column: 1; grid-row: 1; } body.is-v3 .form-page--contact .form-side { grid-column: 2; grid-row: 1; } @media (max-width: 1024px) { body.is-v3 .form-page--contact .form-side { grid-column: 1; grid-row: auto; } } /* ---------- Cases (is-v3): hero > proof > logo-navigatie (mist) > cases > quotes (mist) > cases > cta ---------- */ body.is-v3 .case-nav { background: var(--color-mist); padding: 64px 0; } body.is-v3 .case-nav .container { display: flex; flex-direction: column; gap: 32px; align-items: center; } body.is-v3 .case-nav h2 { font-size: 34px; text-align: center; } body.is-v3 .case-nav__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; width: 100%; } body.is-v3 .case-nav__list a { display: flex; align-items: center; justify-content: center; height: 96px; padding: 16px; background: var(--color-white); border-radius: 12px; border: 1px solid transparent; transition: border-color 0.2s ease; } body.is-v3 .case-nav__list a:hover { border-color: var(--color-blue); } body.is-v3 .case-nav__list img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } body.is-v3 .case-list { background: var(--color-white); padding: 80px 0; } body.is-v3 .case-list .container { display: flex; flex-direction: column; gap: 0; } body.is-v3 .case-v3 { display: grid; grid-template-columns: 260px 1fr; gap: 56px; padding: 48px 0; border-top: 1px solid var(--r-border); scroll-margin-top: 140px; } body.is-v3 .case-v3:first-child { border-top: 0; padding-top: 0; } body.is-v3 .case-v3:last-of-type { padding-bottom: 0; } body.is-v3 .case-v3__logo { display: flex; align-items: flex-start; justify-content: center; } body.is-v3 .case-v3__logo img { width: 100%; max-height: 180px; object-fit: contain; padding: 24px; background: var(--color-white); border: 1px solid var(--r-border); border-radius: var(--r-radius); } body.is-v3 .case-v3__body { display: flex; flex-direction: column; gap: 16px; } body.is-v3 .case-v3__meta { display: flex; flex-wrap: wrap; gap: 8px 12px; } body.is-v3 .case-v3__meta span { font-size: 14px; color: var(--r-ink); background: var(--color-mist); border-radius: 999px; padding: 6px 14px; } body.is-v3 .case-v3__meta strong { color: var(--color-blue); font-weight: 700; margin-right: 4px; } body.is-v3 .case-v3__body h3 { font-size: 28px; line-height: 1.2; } body.is-v3 .case-v3__body p { color: var(--r-ink); font-size: 18px; line-height: 1.6; margin: 0; max-width: 820px; } body.is-v3 .case-list__more { margin: 48px 0 0; padding-top: 32px; border-top: 1px solid var(--r-border); } body.is-v3 .pull-quotes--mist { background: var(--color-mist); } body.is-v3 .pull-quotes--mist .pull-quote:nth-child(1) { border-left-color: var(--color-orange); } body.is-v3 .pull-quotes--mist .pull-quote:nth-child(2) { border-left-color: var(--color-blue); } @media (max-width: 1024px) { body.is-v3 .case-nav__list { grid-template-columns: repeat(3, 1fr); } body.is-v3 .case-v3 { grid-template-columns: 200px 1fr; gap: 32px; } } @media (max-width: 767px) { body.is-v3 .case-nav { padding: 48px 0; } body.is-v3 .case-nav h2 { font-size: 28px; } body.is-v3 .case-nav__list { grid-template-columns: repeat(2, 1fr); } body.is-v3 .case-list { padding: 56px 0; } body.is-v3 .case-v3 { grid-template-columns: 1fr; gap: 20px; padding: 36px 0; } body.is-v3 .case-v3__logo img { max-width: 220px; } body.is-v3 .case-v3__body h3 { font-size: 24px; } } /* ---------- Pers & Media v3: medialogo's, uitgelichte uitzending, mediakaarten, perskit ---------- */ body.is-v3 .media-logos { background: var(--color-white); padding: 40px 0; border-bottom: 1px solid var(--r-border); } body.is-v3 .media-logos .container { display: flex; flex-direction: column; align-items: center; gap: 20px; } body.is-v3 .media-logos__label { margin: 0; font-size: var(--fs-base); color: var(--r-ink); } body.is-v3 .media-logos__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 16px; width: 100%; } body.is-v3 .media-logos__list li { display: flex; align-items: center; justify-content: center; height: 72px; padding: 14px 18px; border: 1px solid var(--r-border); border-radius: 12px; background: var(--color-white); overflow: hidden; } body.is-v3 .media-logos__list img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: 0.8; transition: filter 0.2s ease, opacity 0.2s ease; } body.is-v3 .media-logos__list li:hover img { filter: none; opacity: 1; } body.is-v3 .media-logos__list li.is-dark { padding: 0; } body.is-v3 .media-logos__list li.is-dark img { width: 100%; height: 100%; max-height: none; object-fit: cover; } body.is-v3 .featured-post__image--video { position: relative; } body.is-v3 .play-badge { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: rgba(255,255,255,0.92); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0,0,0,0.18); } body.is-v3 .play-badge svg { width: 40px; height: 40px; fill: var(--color-blue); } body.is-v3 .media-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } body.is-v3 .media-card__outlet { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-white); background: var(--color-blue); border-radius: 999px; padding: 5px 12px; } body.is-v3 .media-card__type { font-size: 13px; font-weight: 600; color: var(--color-blue); background: var(--color-mist); border-radius: 999px; padding: 5px 12px; } body.is-v3 .media-card__meta .date-badge { margin: 0; } body.is-v3 .media-card--logo .interview-card__image { background: var(--color-mist); border-radius: var(--r-radius) var(--r-radius) 0 0; } body.is-v3 .media-card--logo .interview-card__image img { object-fit: contain; padding: 24px; background: var(--color-mist); } body.is-v3 .press-contact__grid--three { grid-template-columns: repeat(3, 1fr); gap: 24px; } body.is-v3 .press-contact__grid--three .press-card { padding: 32px; } body.is-v3 .press-contact__grid--three .press-card h2, body.is-v3 .press-contact__grid--three .press-card h3 { font-size: 24px; } body.is-v3 .press-contact__grid--three .press-card__links a { font-size: 18px; } body.is-v3 .press-contact__grid--three .press-facts { grid-template-columns: 1fr 1fr; } body.is-v3 .press-contact__grid--three .press-facts strong { font-size: 24px; } body.is-v3 .doc-list--single { grid-template-columns: 1fr; } body.is-v3 .press-card__note { font-size: 15px; color: var(--r-ink); margin-top: auto; } @media (max-width: 1024px) { body.is-v3 .media-logos__list { grid-template-columns: repeat(4, 1fr); } body.is-v3 .press-contact__grid--three { grid-template-columns: 1fr; } } @media (max-width: 767px) { body.is-v3 .media-logos__list { grid-template-columns: repeat(2, 1fr); } body.is-v3 .media-logos__list li { height: 64px; } }