/* ============================================================ Poolz – Page & section styles Design tokens, layout, chrome: site.css (load first in ) ============================================================ */ /* ── Reset ─────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── Base ──────────────────────────────────────────────── */ html { scroll-behavior: smooth; } body { font-family: var(--font-sans); font-size: 16px; line-height: var(--leading-normal); color: var(--text-color); background-color: var(--color-background); } main { overflow-x: clip; } h1, h2, h3, h4 { font-family: var(--font-heading); } ::selection { background: rgba(0, 103, 130, 0.18); color: inherit; } a { color: var(--link-color); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--link-hover); } img { display: block; max-width: 100%; height: auto; } figure { margin: 0; } ul { list-style: none; } /* ── Breadcrumbs ───────────────────────────────────────── */ .breadcrumbs { padding: 12px 0; font-size: 0.875rem; } .breadcrumbs__list { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; list-style: none; } .breadcrumbs__sep { color: var(--border-color); margin: 0 2px; } .breadcrumbs__link { color: var(--color-primary); } .breadcrumbs__link:hover { color: var(--color-secondary); } .breadcrumbs__item--current { color: var(--text-color); } /* ── Hero (immersive — NEW HTML) ───────────────────────── */ .hero--cover { position: relative; min-height: min(88vh, 54rem); display: flex; align-items: center; padding: 0; margin: 0; overflow: hidden; background: var(--hero-fallback-gradient); } .hero__media { position: absolute; inset: 0; z-index: 0; } .hero__img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.02); } /* Hero cover variant: matches reference HTML (zoomed image, stronger blue scrim, white copy) */ .hero--cover--reference .hero__img { transform: scale(1.22); transform-origin: center; filter: grayscale(0.2) brightness(0.85) saturate(1.05); } .hero--cover--reference .hero__scrim { background: linear-gradient( 90deg, rgba(0, 83, 130, 0.55) 0%, rgba(0, 83, 130, 0.22) 42%, rgba(0, 83, 130, 0.06) 75%, transparent 100% ); } .hero__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient( 90deg, var(--color-background) 0%, rgba(247, 249, 251, 0.72) 42%, rgba(247, 249, 251, 0.15) 82%, transparent 100% ); pointer-events: none; } .hero__inner { position: relative; z-index: 2; padding-block: var(--space-24) var(--space-16); } .hero__content { max-width: 38rem; text-align: left; } .hero__split { display: grid; grid-template-columns: 1fr; gap: var(--space-8); align-items: start; } @media (min-width: 1100px) { .hero__split { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--space-10); } } .hero__eyebrow { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--font-weight-bold); letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-secondary); margin-bottom: var(--space-4); } .hero--cover--reference .hero__eyebrow { display: inline-block; padding: 4px 12px; border-radius: var(--radius-full); color: rgba(206, 229, 255, 0.95); background: rgba(0, 83, 130, 0.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .hero__heading { font-size: var(--text-3xl); font-weight: 200; color: var(--heading-color); line-height: var(--leading-tight); letter-spacing: -0.02em; margin-bottom: var(--space-6); } .hero--cover--reference .hero__heading { color: #fff; letter-spacing: -0.03em; font-size: clamp(3.25rem, 7vw, 5.25rem); line-height: 0.95; } .hero--cover--reference .hero__content { margin-top: var(--space-6); } @media (min-width: 1024px) { .hero--cover--reference .hero__content { margin-left: calc(-1 * var(--space-4)); } } .hero__heading--rich strong { font-weight: 700; } .hero__intro { font-size: var(--text-md); color: var(--text-muted); max-width: 36rem; margin-bottom: var(--space-8); } .hero--cover--reference .hero__intro { color: rgba(255, 255, 255, 0.9); border-left: 4px solid rgba(206, 229, 255, 0.85); padding-left: var(--space-6); max-width: 42rem; font-size: clamp(1.125rem, 2vw, 1.5rem); } .hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-4); } .hero__cta .btn { padding: var(--space-5) var(--space-8); font-size: var(--text-md); } .hero__form-card { background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(255, 255, 255, 0.75); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg, 0 16px 40px rgba(15, 23, 42, 0.18)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: var(--space-6); margin-top: var(--space-4); } .hero__form-heading { font-size: var(--text-xl); color: var(--color-primary); margin-bottom: var(--space-2); } .hero__form-intro { color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-relaxed); margin-bottom: var(--space-5); } .hero__form-card .form-status, .hero__form-card .contact-form, .hero__form-card .form-hint { max-width: none; } .hero__form-card .contact-form textarea { min-height: 5.5rem; } .contact-form--compact { gap: var(--space-3); } .contact-form--compact .contact-form__field label, .contact-form--compact .contact-form__label { margin-bottom: 4px; font-size: var(--text-sm); } .contact-form--compact .contact-form__input { padding: 9px 11px; } .contact-form--compact .contact-form__submit { width: 100%; justify-content: center; margin-top: var(--space-2); } .contact-form--compact textarea.contact-form__input { min-height: 5.5rem; } .form-status--compact { margin-bottom: var(--space-3); padding: 10px 12px; } /* Inner pages: compact hero */ .hero--simple { background: linear-gradient(180deg, var(--color-surface-container-low) 0%, var(--color-background) 100%); border-bottom: 1px solid var(--border-subtle); } .hero--simple .hero__inner { padding-block: var(--space-16) var(--space-12); } .hero--simple .hero__heading { font-size: var(--text-2xl); } .hero__content--centered { margin-inline: auto; text-align: center; max-width: 44rem; } .hero__cta--centered { justify-content: center; } .hero--simple .hero__scrim, .hero--simple .hero__media { display: none; } /* ── Hero split (team page) ────────────────────────── */ .hero--split { background: linear-gradient(180deg, var(--color-surface-container-low) 0%, var(--color-background) 100%); overflow: hidden; } .hero--split .hero__inner { display: grid; grid-template-columns: 1fr; gap: var(--space-12); align-items: center; padding-block: var(--space-16) var(--space-20); } @media (min-width: 900px) { .hero--split .hero__inner { grid-template-columns: 1fr 1fr; gap: var(--space-16); padding-block: var(--space-20) var(--space-24); } } .hero--split .hero__content { max-width: none; } .hero--split .hero__heading { font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 300; letter-spacing: -0.03em; margin-bottom: var(--space-6); } .hero--split .hero__intro { font-size: var(--text-lg); margin-bottom: 0; } .hero__split-media { position: relative; padding-bottom: var(--space-16); } .hero__split-img-wrap { aspect-ratio: 4 / 5; max-height: 36rem; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); transform: rotate(2deg); } .hero__split-img { width: 100%; height: 100%; object-fit: cover; } .hero__split-quote-card { position: absolute; bottom: 0; left: -2rem; max-width: 20rem; background: var(--color-surface-container-high); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-8) var(--space-10); transform: rotate(-3deg); } .hero__split-quote-text { font-family: var(--font-heading); font-weight: var(--font-weight-bold); font-style: italic; font-size: var(--text-lg); color: var(--color-primary); margin-bottom: var(--space-3); line-height: var(--leading-snug); } .hero__split-quote-sub { font-size: var(--text-base); color: var(--text-muted); line-height: var(--leading-normal); margin: 0; } @media (max-width: 899px) { .hero__split-media { max-width: 22rem; margin-inline: auto; padding-bottom: var(--space-14, 3.5rem); } .hero__split-img-wrap { max-height: 24rem; } .hero__split-quote-card { left: -0.5rem; max-width: 16rem; padding: var(--space-5) var(--space-6); } .hero__split-quote-text { font-size: var(--text-base); } } /* ── Stats USP bar (overlaps immersive hero only) ──────── */ .stats--overlap { padding: 0 0 var(--space-16); position: relative; z-index: 3; } .hero--cover ~ .stats--overlap { margin-top: -2.75rem; } .hero--simple ~ .stats--overlap { margin-top: 0; padding-top: var(--space-12); } .stats__panel { background: var(--color-surface-container-low); border-radius: var(--radius-md); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); } .stats__grid { display: grid; grid-template-columns: 1fr; gap: 0; } @media (min-width: 768px) { .stats__grid { grid-template-columns: repeat(3, 1fr); } .stat { border-right: 1px solid var(--border-subtle); } .stat:last-child { border-right: none; } } .stat { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-8); } .stat__icon { flex-shrink: 0; width: 2.25rem; height: 2.25rem; color: var(--color-secondary); } .stat__icon svg { width: 100%; height: 100%; } .stat__label { font-family: var(--font-sans); font-weight: var(--font-weight-bold); font-size: var(--text-sm); color: var(--color-primary); text-transform: lowercase; margin-bottom: var(--space-1); } .stat__hint { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-snug); } /* ── Service showcase (dark glass band) ─────────────────── */ .service-showcase { position: relative; padding: var(--space-24) 0; overflow: hidden; } .service-showcase__bg { position: absolute; inset: 0; background: radial-gradient(ellipse 120% 80% at 30% 20%, rgba(0, 103, 130, 0.35), transparent 55%), linear-gradient(165deg, #0f172a 0%, #0c2538 50%, #070f18 100%); opacity: 1; } .service-showcase__bg::before { content: ""; position: absolute; inset: 0; background-image: url("/assets/images/backgrounds/bg-random-waves.svg"); background-repeat: no-repeat; background-size: cover; background-position: center center; opacity: 0.18; pointer-events: none; } .service-showcase__bg::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; pointer-events: none; } .service-showcase__inner { position: relative; z-index: 1; } .service-showcase__heading { font-size: clamp(1.5rem, 3vw, 1.875rem); font-weight: 300; color: #f8fafc; text-align: left; max-width: none; margin: 0 0 var(--space-16); line-height: var(--leading-snug); } .service-showcase__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-12); } @media (min-width: 768px) { .service-showcase__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-12); } } @media (min-width: 1200px) { .service-showcase__grid { grid-template-columns: repeat(3, 1fr); } .service-showcase__grid:has(> :last-child:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; margin-inline: auto; } } .service-showcase__card { position: relative; display: flex; flex-direction: column; padding: var(--space-10); border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.12); transition: background-color var(--transition-slow), border-color var(--transition-slow); } .service-showcase__card:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.2); } .service-showcase__symbol { display: block; margin-bottom: var(--space-6); width: 3.75rem; height: 3.75rem; color: var(--color-secondary-fixed); } .service-showcase__symbol svg { width: 100%; height: 100%; } .service-showcase__symbol img { width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.95; } .service-showcase__title { font-size: clamp(1.5rem, 2.5vw, 1.875rem); font-weight: 300; color: #f8fafc; margin-bottom: var(--space-4); } .service-showcase__text { font-size: var(--text-md); color: rgba(224, 242, 254, 0.78); line-height: var(--leading-relaxed); margin-bottom: var(--space-8); } .service-showcase__card .btn { margin-top: auto; } .text-grid { padding: var(--section-y) 0; } .text-grid__inner { display: grid; grid-template-columns: 1fr; gap: var(--space-6); } @media (min-width: 900px) { .text-grid__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .text-grid__item { background: var(--color-surface-container-low); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-8); display: flex; flex-direction: column; } .text-grid__heading { font-size: var(--text-xl); font-weight: var(--font-weight-semibold); color: var(--heading-color); margin-bottom: var(--space-4); } .text-grid__body { color: var(--text-color); line-height: var(--leading-relaxed); } .text-grid__buttons { margin-top: auto; padding-top: var(--space-6); } /* ── Text single (all sections in one card) ─────────────────── */ .text-single { padding: var(--section-y) 0; } .text-single__card { background: var(--color-surface-container-low); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-8) var(--space-10); } .text-single__inner { display: grid; grid-template-columns: 1fr; gap: var(--space-8); } @media (min-width: 900px) { .text-single__inner { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } .text-single__block + .text-single__block { padding-left: var(--space-8); border-left: 1px solid var(--border-subtle); } } .text-single__block { display: flex; flex-direction: column; } .text-single__heading { font-size: var(--text-xl); font-weight: var(--font-weight-semibold); color: var(--heading-color); margin-bottom: var(--space-4); } .text-single__body { color: var(--text-color); line-height: var(--leading-relaxed); } .text-single__buttons { margin-top: auto; padding-top: var(--space-6); display: flex; gap: var(--space-3); flex-wrap: wrap; } /* ── Text Block ────────────────────────────────────────── */ .text-block { padding: var(--section-y) 0; text-align: center; } .text-block__heading { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 300; color: var(--heading-color); margin-bottom: var(--space-6); } .text-block__body { max-width: 52rem; margin: 0 auto var(--space-8); color: var(--text-muted); font-size: var(--text-md); line-height: var(--leading-relaxed); } .text-block__note { max-width: 700px; margin: -15px auto 25px; font-size: 0.9rem; color: var(--text-color); font-style: italic; } .text-block__quote { max-width: 800px; margin: 0 auto 25px; padding: 20px 24px; border-left: 4px solid var(--color-primary); background-color: #fafafa; font-style: italic; color: #444; text-align: left; } .text-block__buttons { display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; } /* ── Realisations / before-after ─────────────────────── */ .realisations { background-color: var(--color-background); padding: var(--space-24) 0; } .realisations__head { margin-bottom: var(--space-12); text-align: left; } .realisations__heading { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 200; color: var(--heading-color); margin-bottom: var(--space-2); } .realisations__accent { display: block; width: 5rem; height: 0.25rem; background: var(--color-secondary); border-radius: var(--radius-full); } .before-after-sets { display: flex; flex-direction: column; gap: var(--space-16); } .realisations__featured { display: grid; grid-template-columns: 1fr; gap: var(--space-8); align-items: start; } @media (min-width: 1024px) { .realisations__featured { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-8); } } .realisations__split { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; border-radius: var(--radius-md); overflow: hidden; background: var(--border-subtle); min-height: 16rem; } @media (min-width: 768px) { .realisations__split { min-height: 22rem; } } .realisations__half { position: relative; margin: 0; } .realisations__split-img { width: 100%; height: 100%; min-height: 14rem; object-fit: cover; display: block; } .realisations__half:first-child .realisations__split-img { filter: grayscale(0.5) contrast(1.02); } .realisations__split-wrap { position: relative; border-radius: var(--radius-md); } .realisations__split-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; } .realisations__split-handle-line { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(255, 255, 255, 0.55); box-shadow: 0 0 12px rgba(0, 0, 0, 0.12); } .realisations__split-handle-grip { position: relative; display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-white); box-shadow: var(--shadow-md, 0 4px 14px rgba(0, 0, 0, 0.15)); } .realisations__aside-card--bento { padding: var(--space-8); } .realisations__aside-deco { position: absolute; top: -0.25rem; right: -0.25rem; font-size: 6rem; line-height: 1; color: rgba(255, 255, 255, 0.35); pointer-events: none; } .realisations__aside-card--bento .realisations__aside-title { position: relative; z-index: 1; } .realisations__aside-text { position: relative; z-index: 1; color: var(--text-color); line-height: var(--leading-relaxed); margin: 0 0 var(--space-6); } .realisations__aside-stats { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } .realisations__aside-stat { background: var(--color-white); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-6); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } .realisations__aside-stat-value { display: block; font-size: clamp(1.75rem, 4vw, 2.25rem); font-weight: 300; color: var(--color-secondary); line-height: 1.1; margin-bottom: var(--space-2); } .realisations__aside-stat-label { font-size: var(--text-xs); font-weight: var(--font-weight-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); } .realisations__badge { position: absolute; top: var(--space-4); left: var(--space-4); padding: var(--space-1) var(--space-3); font-size: var(--text-xs); font-weight: var(--font-weight-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary); background: rgba(255, 255, 255, 0.68); backdrop-filter: blur(8px); border-radius: var(--radius-sm); } .realisations__badge--end { left: auto; right: var(--space-4); } .realisations__aside-card { position: relative; overflow: hidden; background: var(--color-surface-container-high); border-radius: var(--radius-md); padding: var(--space-8); border: 1px solid var(--border-subtle); height: 100%; } .realisations__aside-card--focus { background: var(--color-white); border-color: rgba(2, 132, 199, 0.12); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } .realisations__aside-kicker { font-size: var(--text-xs); font-weight: var(--font-weight-bold); color: var(--color-secondary); text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: var(--space-4); } .realisations__aside-bullets { display: flex; flex-direction: column; gap: var(--space-3); margin: 0 0 var(--space-8); } .realisations__aside-bullet { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--text-color); line-height: var(--leading-relaxed); } .realisations__aside-bullet-icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-secondary); margin-top: 2px; } .realisations__aside-bullet-icon svg { width: 100%; height: 100%; } .realisations__aside-cta { width: 100%; } .realisations__aside-title { font-size: var(--text-lg); font-weight: var(--font-weight-semibold); color: var(--heading-color); margin-bottom: var(--space-4); line-height: var(--leading-snug); } .realisations__aside-figure { border-radius: var(--radius); overflow: hidden; } .realisations__aside-img { width: 100%; height: auto; max-height: 14rem; object-fit: cover; display: block; } .before-after { display: flex; gap: var(--space-5); justify-content: center; flex-wrap: wrap; } .before-after__item { width: 260px; max-width: 100%; text-align: center; } .before-after__img { width: 100%; height: 10rem; object-fit: cover; border-radius: var(--radius-md); background-color: var(--color-surface-muted); } .before-after__caption { margin-top: var(--space-2); font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--text-muted); } /* ── Contact Banner ────────────────────────────────────── */ .contact-banner { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-container) 100%); color: var(--color-white); padding: var(--space-24) 0; text-align: center; } .contact-banner__heading { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 300; color: var(--color-white); margin-bottom: var(--space-4); } .contact-banner__body { max-width: 38rem; margin: 0 auto var(--space-8); color: rgba(255, 255, 255, 0.88); font-size: var(--text-md); line-height: var(--leading-relaxed); } /* ── Page (generic content) ────────────────────────────── */ .page-content { padding: 60px 0; } /* ── Carefree (onderhoud CTA block) ────────────────────── */ .carefree { padding: 48px 0; text-align: center; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); } .carefree__heading { font-size: 24px; font-weight: 500; color: var(--heading-color); text-transform: lowercase; margin-bottom: 12px; } .carefree__body { max-width: 640px; margin: 0 auto 20px; color: var(--text-color); } /* ── Team page ─────────────────────────────────────────── */ /* Quote section */ .team-quote { background: var(--color-surface-container-low); padding: var(--space-24) 0; text-align: center; } .team-quote__container { max-width: 64rem; } .team-quote__icon { display: block; width: 2.5rem; height: 2.5rem; margin: 0 auto var(--space-8); opacity: 0.55; } .team-quote__icon img { width: 100%; height: 100%; object-fit: contain; } .team-quote__text { font-family: var(--font-heading); font-size: clamp(1.5rem, 2.8vw, 2.125rem); font-weight: 300; font-style: italic; color: var(--color-primary); line-height: var(--leading-snug); } .team-quote__text p { margin: 0; } /* Team cards */ .team-cards { padding: var(--space-24) 0; } .team-cards__head { margin-bottom: var(--space-16); } .team-cards__title { font-size: clamp(2rem, 4vw, 3rem); font-weight: var(--font-weight-bold); color: var(--color-primary); line-height: 1; margin-bottom: var(--space-2); } .team-cards__accent { display: block; width: 5rem; height: 0.25rem; background: var(--color-primary); border-radius: var(--radius-full); } .team-cards__desc { margin-top: var(--space-5); color: var(--text-muted); font-size: var(--text-base); line-height: var(--leading-relaxed); } .team-cards__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8); } @media (min-width: 768px) { .team-cards__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-10); } } .team-card { background: var(--color-surface-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-8); transition: box-shadow var(--transition-slow); } .team-card:hover { box-shadow: var(--shadow-lg); } .team-card__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); text-align: center; } @media (min-width: 480px) { .team-card__inner { flex-direction: row; align-items: center; text-align: left; } } .team-card__photo-wrap { flex-shrink: 0; width: 10rem; height: 10rem; border-radius: var(--radius-full); overflow: hidden; border: 4px solid var(--color-surface-muted); background: var(--color-surface-muted); } .team-card__photo { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); background-color: var(--color-surface-muted); } .team-card:hover .team-card__photo { transform: scale(1.06); } .team-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; } .team-card__name { font-family: var(--font-heading); font-size: clamp(1.375rem, 3vw, 1.75rem); font-weight: var(--font-weight-bold); color: var(--color-primary); margin-bottom: var(--space-1); line-height: var(--leading-tight); } .team-card__region { font-size: var(--text-sm); font-weight: var(--font-weight-semibold); color: var(--color-primary); margin-bottom: var(--space-5); } .team-card__phone-link { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--color-primary); color: var(--color-white); padding: var(--space-3) var(--space-6); border-radius: var(--radius-full); font-weight: var(--font-weight-bold); font-size: var(--text-sm); text-decoration: none; margin-bottom: var(--space-5); box-shadow: var(--shadow-sm); transition: background-color var(--transition-base), transform var(--transition-fast); } .team-card__phone-link:hover { background: #002a45; color: var(--color-white); transform: scale(1.02); } .team-card__phone-icon { width: 1rem; height: 1rem; flex-shrink: 0; } .team-card__badge { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-muted); } @media (max-width: 479px) { .team-card__badge { justify-content: center; } } .team-card__badge-icon { width: 1.1rem; height: 1.1rem; color: var(--color-primary); flex-shrink: 0; } .team-card__badge-label { font-size: var(--text-sm); font-weight: var(--font-weight-semibold); } /* Team CTA */ .team-cta { position: relative; background: var(--color-primary); padding: var(--space-24) 0; overflow: hidden; text-align: center; } .team-cta__bg { position: absolute; inset: 0; pointer-events: none; } .team-cta__bg-circle { position: absolute; border-radius: var(--radius-full); filter: blur(60px); opacity: 0.12; } .team-cta__bg-circle--tr { width: 24rem; height: 24rem; top: -8rem; right: -8rem; background: var(--color-white); } .team-cta__bg-circle--bl { width: 24rem; height: 24rem; bottom: -8rem; left: -8rem; background: var(--color-secondary); } .team-cta__inner { position: relative; z-index: 1; } .team-cta__heading { font-size: clamp(1.75rem, 4vw, 3rem); font-weight: var(--font-weight-bold); color: var(--color-white); text-transform: uppercase; letter-spacing: -0.01em; margin-bottom: var(--space-6); } .team-cta__body { font-size: var(--text-md); color: rgba(255, 255, 255, 0.82); line-height: var(--leading-relaxed); max-width: 58rem; margin: 0 auto var(--space-12); } .team-cta__actions { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); } @media (min-width: 480px) { .team-cta__actions { flex-direction: row; justify-content: center; } } .team-cta__btn { display: inline-flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-10); border-radius: var(--radius-md); font-weight: var(--font-weight-bold); font-size: var(--text-md); text-decoration: none; box-shadow: var(--shadow-md); transition: all var(--transition-base); } .team-cta__btn:active { transform: scale(0.98); } .team-cta__btn-icon { width: 1.4rem; height: 1.4rem; flex-shrink: 0; filter: brightness(0) invert(1); } .team-cta__btn--ghost { background: transparent; color: var(--color-white); border: 2px solid rgba(255, 255, 255, 0.5); } .team-cta__btn--ghost:hover { background: rgba(255, 255, 255, 0.1); color: var(--color-white); border-color: rgba(255, 255, 255, 0.8); } .team-cta__btn--white { background: var(--color-white); color: var(--color-primary); } .team-cta__btn--white:hover { background: var(--color-surface-container-low); color: var(--color-primary); } .team-cta__btn--white .team-cta__btn-icon { filter: brightness(0) saturate(100%) invert(12%) sepia(62%) saturate(815%) hue-rotate(175deg) brightness(90%) contrast(102%); } /* ── Contact page ─────────────────────────────────────── */ .contact-page__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; padding: 40px 0 20px; } .contact-card__heading { font-size: 18px; color: var(--heading-color); margin-bottom: 12px; font-weight: 500; } .contact-card__list { list-style: none; } .contact-card__item { margin-bottom: 10px; color: var(--text-color); } .contact-card__label { display: inline-block; min-width: 2.5rem; font-weight: 600; color: var(--heading-color); } .contact-card__value { color: var(--text-color); } .contact-page__form-section { padding: 40px 0; border-top: 1px solid var(--border-color); } .contact-page__form-heading { font-size: 22px; color: var(--heading-color); margin-bottom: 24px; font-weight: 500; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .form-hint { font-size: 0.875rem; color: var(--text-color); opacity: 0.88; line-height: 1.4; margin-bottom: 8px; max-width: 42rem; } .form-hint + .form-hint { margin-top: -4px; } .form-status { max-width: 560px; padding: 16px 18px; margin-bottom: 20px; border-radius: var(--radius); border: 1px solid var(--border-color); } .form-status__title { font-weight: 600; color: var(--heading-color); margin-bottom: 6px; } .form-status--success { background: rgba(0, 129, 102, 0.08); border-color: rgba(0, 129, 102, 0.35); } .form-status--error { background: rgba(180, 45, 45, 0.06); border-color: rgba(180, 45, 45, 0.35); } .contact-form__config-warning { max-width: 560px; padding: 14px 16px; margin-bottom: 16px; border-radius: var(--radius); border: 1px solid var(--border-color); background: rgba(200, 130, 0, 0.12); font-size: 0.95rem; } .contact-form { max-width: 560px; display: flex; flex-direction: column; gap: 18px; } .contact-form__legend { margin-bottom: 4px; } .contact-form__req { margin-left: 0.15em; text-decoration: none; font-weight: 700; font-size: 0.95em; } .contact-form__field label, .contact-form__label { display: block; font-weight: 500; margin-bottom: 6px; color: var(--heading-color); } .contact-form input, .contact-form textarea, .contact-form select, .contact-form__input { width: 100%; padding: 10px 12px; font: inherit; border: 1px solid var(--border-color); border-radius: var(--radius); color: var(--text-color); } .contact-form__field--checkbox .contact-form__checkbox-label { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; } .contact-form__field--checkbox input { width: auto; margin-top: 4px; } .contact-form__submit { align-self: flex-start; border: none; cursor: pointer; } .contact-page__map { padding: 40px 0; } .contact-page__map-heading { font-size: 22px; color: var(--heading-color); margin-bottom: 16px; font-weight: 500; } .contact-page__iframe { width: 100%; min-height: 280px; border: 0; border-radius: var(--radius); } .contact-page__map-link-wrap { margin-top: 16px; } /* ── Blog post ─────────────────────────────────────────── */ .blog-post__header { max-width: 720px; margin: 0 auto 24px; text-align: center; } .blog-post__meta { font-size: 0.9rem; color: var(--text-color); margin-bottom: 8px; } .blog-post__title { font-size: clamp(1.75rem, 4vw, 2.25rem); font-weight: 500; color: var(--heading-color); line-height: 1.2; } .blog-post__excerpt { margin-top: 16px; font-size: 1.1rem; color: var(--text-color); } .blog-post__figure { max-width: 900px; margin: 0 auto 32px; } .blog-post__image { width: 100%; border-radius: var(--radius); } .blog-post__body { max-width: 720px; margin: 0 auto; } .blog-post__body h2 { font-size: 1.35rem; color: var(--heading-color); margin: 2rem 0 0.75rem; font-weight: 500; } .blog-post__body p { margin-bottom: 1rem; } .blog-post__body ul { list-style: disc; margin: 0 0 1rem 1.25rem; } /* ── Blog listing (Nieuws / Actualités) ───────────────────── */ .blog-listing-hero { padding: var(--space-12) 0 var(--space-8); background: linear-gradient( 180deg, var(--color-background) 0%, var(--surface-container-low, #f2f4f6) 100% ); } .blog-listing-hero__inner { max-width: 48rem; } .blog-listing-hero__eyebrow { display: inline-block; margin-bottom: var(--space-4); padding: 4px 12px; font-size: var(--text-xs); font-weight: var(--font-weight-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-secondary); background: rgba(0, 103, 130, 0.12); border-radius: var(--radius-full); } .blog-listing-hero__title { font-size: clamp(2rem, 5vw, 3rem); font-weight: 300; color: var(--heading-color); line-height: 1.1; margin-bottom: var(--space-4); } .blog-listing-hero__intro { font-size: 1.1rem; color: var(--text-color); line-height: var(--leading-relaxed); } .blog-listing { list-style: none; margin: 0; padding: 0 0 var(--space-12); display: flex; flex-direction: column; gap: var(--space-8); } .blog-listing-card { display: grid; gap: var(--space-6); padding: var(--space-6); background: var(--color-white); border-radius: var(--radius); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.06)); } @media (min-width: 768px) { .blog-listing-card { grid-template-columns: minmax(200px, 320px) 1fr; align-items: stretch; } } .blog-listing-card__media { display: block; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 10; } .blog-listing-card__img { width: 100%; height: 100%; object-fit: cover; } .blog-listing-card__meta { font-size: var(--text-sm); color: var(--color-secondary); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-2); } .blog-listing-card__title { font-size: 1.35rem; font-weight: var(--font-weight-semibold); line-height: 1.25; margin-bottom: var(--space-3); } .blog-listing-card__title a { color: var(--heading-color); text-decoration: none; } .blog-listing-card__title a:hover { color: var(--link-color); } .blog-listing-card__excerpt { color: var(--text-color); margin-bottom: var(--space-4); line-height: var(--leading-relaxed); } .blog-listing-card__more { font-weight: var(--font-weight-semibold); color: var(--color-primary); text-decoration: none; } .blog-listing-card__more:hover { color: var(--link-color); } .blog-listing__empty { padding: var(--space-8) 0; color: var(--text-muted); } /* ── Projects index & detail ─────────────────────────────── */ .projects-index { padding-bottom: var(--space-12); } .projects-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-8); } @media (min-width: 768px) { .projects-grid { grid-template-columns: repeat(2, 1fr); } } .project-card { display: flex; flex-direction: column; background: var(--color-white); border-radius: var(--radius); border: 1px solid var(--border-subtle); overflow: hidden; box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.06)); } .project-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; } .project-card__img { width: 100%; height: 100%; object-fit: cover; } .project-card__body { padding: var(--space-6); flex: 1; display: flex; flex-direction: column; } .project-card__eyebrow { font-size: var(--text-xs); font-weight: var(--font-weight-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-secondary); margin-bottom: var(--space-2); } .project-card__title { font-size: 1.25rem; margin-bottom: var(--space-3); } .project-card__title a { color: var(--heading-color); text-decoration: none; } .project-card__title a:hover { color: var(--link-color); } .project-card__teaser { color: var(--text-color); line-height: var(--leading-relaxed); margin-bottom: var(--space-4); flex: 1; } .project-card__more { font-weight: var(--font-weight-semibold); color: var(--color-primary); text-decoration: none; align-self: flex-start; } .project-card__more:hover { color: var(--link-color); } .project-detail__prose { max-width: 720px; margin: 0 auto; padding: var(--space-8) var(--container-pad) var(--space-12); } .project-detail__prose h2 { font-size: 1.35rem; color: var(--heading-color); margin: 2rem 0 0.75rem; font-weight: 500; } .project-detail__prose p { margin-bottom: 1rem; line-height: var(--leading-relaxed); } /* ── Responsive ────────────────────────────────────────── */ @media (max-width: 768px) { .hero--cover { min-height: min(88vh, 44rem); } .hero__scrim { background: linear-gradient( 180deg, var(--color-background) 0%, rgba(247, 249, 251, 0.88) 35%, rgba(247, 249, 251, 0.55) 100% ); } .hero__content { text-align: center; margin-inline: auto; } .hero__cta { justify-content: center; } .stats--overlap { margin-top: -1.5rem; padding-inline: var(--space-2); } .stat { border-right: none; border-bottom: 1px solid var(--border-subtle); } .stat:last-child { border-bottom: none; } .realisations__split { grid-template-columns: 1fr; } .realisations__half:first-child { border-bottom: 2px solid var(--border-subtle); } .before-after__item { width: 100%; max-width: 320px; } .text-block__buttons { flex-direction: column; align-items: center; } }