/* styles.css */ /* Fonts worden geladen via voor betere performance */ /* ========================================= TOKENS / DESIGN SYSTEM ========================================= */ :root{ --bg: #F3EAE6; --surface: #FFFFFF; --surface-2: #E4DDD6; --line: #D0C1B2; --text: #6B4B37; --muted: #B0967E; --text-muted: #B0967E; --accent: #986048; --radius: 18px; --radius-lg: 26px; --shadow: 0 14px 40px rgba(107, 75, 55, .12); --shadow-soft: 0 18px 50px rgba(107,75,55,.10); --container: 1120px; --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-serif: "Playfair Display", Georgia, serif; --font-script: "Allura", cursive; --font-elegant: "Playfair Display", Georgia, serif; --font-script-elegant: "Allura", cursive; } /* ========================================= BASE ========================================= */ html, body{ width: 100%; max-width: 100%; overflow-x: clip; } body{ position: relative; } img, video, iframe{ max-width: 100%; height: auto; } *{ box-sizing: border-box; } html,body{ margin:0; padding:0; } body{ font-family: var(--font-body); color: var(--text); line-height: 1.55; background: radial-gradient(1200px 600px at 20% -10%, rgba(152,96,72,.08), transparent 60%), radial-gradient(900px 500px at 90% 10%, rgba(176,150,126,.10), transparent 55%), linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 30%), var(--bg); } h1,h2,h3{ font-family: var(--font-serif); letter-spacing: .2px; color: var(--text); margin: 0; } p{ margin: 0 0 14px; } .container{ width: min(var(--container), calc(100% - 40px)); margin: 0 auto; } /* ========================================= HEADER ========================================= */ .site-header{ position: sticky; top: 0; z-index: 50; background: rgba(243,234,230,.85); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(208,193,178,.55); } .site-header__inner{ position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; } .brand{ display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); flex: 0 1 auto; min-width: 0; } .brand-mark{ height: 60px; width: auto; display: block; flex-shrink: 0; } .brand-name{ font-family: var(--font-script); font-size: 28px; line-height: 1; color: var(--text); white-space: nowrap; } .nav{ display: flex; align-items: center; gap: 18px; } .nav a{ position: relative; text-decoration: none; color: var(--muted); font-size: 18px; transition: color .25s ease; } .nav a::after{ content: ""; position: absolute; left: 0; bottom: -4px; width: 0; height: 1px; background: var(--accent); transition: width .25s ease; } .nav a:hover{ color: var(--text); } .nav a:hover::after{ width: 100%; } /* ========================================= HEADER ICONS ========================================= */ .header-actions{ display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } .header-icon{ width: 42px; height: 42px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid rgba(208,193,178,.6); backdrop-filter: blur(6px); transition: transform .25s ease, box-shadow .25s ease, background .25s ease; } .header-icon img{ width: 18px; height: 18px; object-fit: contain; filter: brightness(0) saturate(100%) invert(29%) sepia(20%) saturate(800%) hue-rotate(340deg); } .header-icon:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px rgba(107,75,55,.14); background: rgba(255,255,255,.92); } /* ========================================= MOBILE NAV ========================================= */ .mobile-nav{ border-top: 1px solid rgba(208,193,178,.55); padding: 24px 0 28px; background: rgba(243,234,230,.95); backdrop-filter: blur(12px); text-align: center; transition: opacity .3s ease, transform .3s ease; } .mobile-nav[hidden]{ display: none !important; opacity: 0; transform: translateY(-10px); } .mobile-nav:not([hidden]){ opacity: 1; transform: translateY(0); } .mobile-nav a{ display: block; text-decoration: none; color: var(--text); font-size: 18px; padding: 18px 0; width: 100%; max-width: 480px; margin: 0 auto; } .mobile-nav a + a{ border-top: 1px solid rgba(208,193,178,.35); } /* ========================================= HAMBURGER ========================================= */ .nav-toggle{ display: none; width: 44px; height: 44px; border: 1px solid rgba(208,193,178,.65); background: rgba(255,255,255,.55); border-radius: 999px; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 4px; flex: 0 0 auto; } .nav-toggle__bar{ width: 18px; height: 2px; background: var(--text); border-radius: 999px; opacity: .85; } /* ========================================= RESPONSIVE HEADER / MOBILE LAYOUT ========================================= */ @media (max-width: 900px){ .nav{ display: none; } .brand{ gap: 10px; } .brand-mark{ height: 50px; } .brand-name{ font-size: 22px; } .header-actions{ gap: 8px; } .header-icon{ width: 38px; height: 38px; } .header-icon img{ width: 16px; height: 16px; } .nav-toggle{ display: flex; position: absolute; left: 50%; transform: translateX(-50%); } } @media (max-width: 560px){ .site-header__inner{ gap: 6px; } .brand{ gap: 8px; } .brand-mark{ height: 44px; } .brand-name{ font-size: 18px; } .header-icon{ width: 36px; height: 36px; } .header-icon img{ width: 15px; height: 15px; } .nav-toggle{ width: 40px; height: 40px; } } /* ========================================= BUTTONS / CARDS ========================================= */ .button{ display:inline-block; padding: 12px 16px; border-radius: 999px; text-decoration:none; font-weight: 650; border: 1px solid var(--line); color: var(--text); } /* ========================================= BUTTON INTERACTION POLISH ========================================= */ .button{ transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease; } .button:hover{ transform: translateY(-2px); box-shadow: 0 18px 40px rgba(107,75,55,.16); } .button:active{ transform: translateY(0); box-shadow: 0 10px 24px rgba(107,75,55,.12); } .button:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(152,96,72,.25), 0 12px 28px rgba(107,75,55,.12); } .button.primary{ background: var(--accent); color: #fff; border: 1px solid transparent; } .button.ghost{ background: transparent; } .button.small{ padding: 10px 14px; font-size: 14px; } .card{ background: var(--surface); border: 1px solid rgba(208, 193, 178, .55); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; } /* ========================================= HERO ========================================= */ .hero{ position: relative; padding: 96px 0 72px; background: linear-gradient(rgba(243,234,230,.90), rgba(243,234,230,.82)), url("assets/img/css/hero-bg.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; } .hero-card{ position: relative; background: rgba(255,255,255,.55); border: 1px solid rgba(208,193,178,.45); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); padding: 26px; display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 34px; align-items: center; overflow: hidden; } .hero-card::before{ content:""; position:absolute; inset: -40px -60px auto auto; width: 420px; height: 420px; background: radial-gradient(circle at 35% 35%, rgba(152,96,72,.18), rgba(176,150,126,.10), rgba(255,255,255,0) 65%); filter: blur(18px); opacity: .10; pointer-events: none; z-index: 0; } .hero-card::after{ content:""; position: absolute; right: -22%; bottom: 25%; width: 620px; height: 620px; background: url("assets/img/SVG/logo.svg") no-repeat center / contain; opacity: 0.10; pointer-events: none; z-index: 1; } .hero-media{ position: relative; z-index: 2; display:flex; justify-content:center; } .hero-copy{ position: relative; z-index: 2; text-align: center; max-width: 620px; margin: 0 auto; } .eyebrow{ font-family: var(--font-script-elegant); font-size: 28px; font-weight: 400; letter-spacing: .5px; } .hero h1{ font-size: clamp(32px, 4vw, 54px); line-height: 1.05; margin: 0 0 14px; } .lead{ max-width: 62ch; color: var(--muted); font-size: 18px; margin: 0 auto 22px; } .hero-note{ margin-top: 1rem; font-size: 0.85rem; color: var(--muted); opacity: 0.7; letter-spacing: 0.02em; } .hero-actions{ display: flex; justify-content: center; } /* Arch image frame */ .arch{ width: min(360px, 100%); aspect-ratio: 3 / 4; border-radius: 999px 999px 28px 28px; border: 1px solid rgba(208,193,178,.6); box-shadow: 0 24px 60px rgba(107,75,55,.12); position: relative; overflow: hidden; background: rgba(255,255,255,.35); } /* ========================================= ARCH POLISH ========================================= */ .arch{ transition: transform .6s ease, box-shadow .6s ease; } .arch:hover{ transform: translateY(-4px); box-shadow: 0 30px 70px rgba(107,75,55,.14); } .arch img{ width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .arch::after{ content:""; position:absolute; inset: 6px; border-radius: 999px 999px 22px 22px; border: 1px solid rgba(255,255,255,.55); opacity: .8; pointer-events: none; } /* ========================================= FEATURE ========================================= */ .feature{ padding: 56px 0; position: relative; /* tweakbare “knoppen” voor ornament */ --art-size: 620px; --art-opacity: 0.14; --art-x: 27%; --art-y: 10%; } .feature::before{ content:""; position: absolute; left: var(--art-x); top: var(--art-y); width: var(--art-size); height: var(--art-size); background: url("assets/img/css/straal.webp") no-repeat center / contain; opacity: var(--art-opacity); pointer-events: none; z-index: 0; } .feature-grid{ position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: 34px; align-items: center; } .feature-left{ text-align: center; max-width: 520px; margin: 0 auto; padding: 24px 0; } .feature-left h2{ margin: 0 0 12px; font-size: 34px; } .feature-kicker{ margin: 0 0 14px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .feature-image{ width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); border: 1px solid rgba(208,193,178,.55); box-shadow: var(--shadow-soft); display: block; } /* ========================================= SERVICES GRID (AANBOD) ========================================= */ .services{ padding: 70px 0; background: rgba(255,255,255,.35); border-top: 1px solid rgba(208,193,178,.45); border-bottom: 1px solid rgba(208,193,178,.45); } .services-head{ text-align: center; margin-bottom: 28px; } .services-kicker{ margin: 0 0 10px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .services-head h2{ margin: 0; font-size: 34px; } .services-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; } .service-card{ text-align: center; padding: 18px 16px 20px; border-radius: 22px; background: rgba(255,255,255,.55); border: 1px solid rgba(208,193,178,.45); box-shadow: 0 18px 50px rgba(107,75,55,.08); } /* ========================================= CARD MICRO-INTERACTION ========================================= */ .service-card{ transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; } .service-card:hover{ transform: translateY(-6px); box-shadow: 0 28px 60px rgba(107,75,55,.12); border-color: rgba(152,96,72,.35); } .service-media{ width: 100%; max-width: 220px; margin: 0 auto 14px; aspect-ratio: 1 / 1; border-radius: 999px 999px 26px 26px; overflow: hidden; border: 1px solid rgba(208,193,178,.55); box-shadow: 0 18px 50px rgba(107,75,55,.10); } .service-media img{ width: 100%; height: 100%; object-fit: cover; display: block; } .service-card h3{ margin: 6px 0 6px; font-size: 20px; } .muted{ color: var(--muted); margin: 0 0 12px; } /* ========================================= SERVICES DETAIL (AFWISSELEND) ========================================= */ .services-detail{ padding: 90px 0; } .detail-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 40px 0; border-top: 1px solid rgba(208,193,178,.45); } .detail-row:first-child{ border-top: none; } .detail-row--reverse .detail-row__media{ order: 2; } .detail-row__media{ display: flex; justify-content: center; } .detail-row__img{ width: min(420px, 100%); aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius); border: 1px solid rgba(208,193,178,.55); box-shadow: var(--shadow-soft); display: block; } .detail-row__copy{ max-width: 520px; margin: 0 auto; text-align: center; } .detail-row__copy .button{ display: inline-block; margin-top: 10px; } .detail-row__kicker{ margin: 0 0 10px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .detail-row__title{ font-size: 34px; margin: 0 0 12px; } .detail-row__text{ margin: 0 0 16px; } .detail-row__list{ margin: 0 0 22px; padding: 0; list-style-position: inside; } .detail-row__list li{ margin: 0 0 8px; } /* ========================================= GENERIC SECTIONS / FOOTER ========================================= */ .section{ padding: 56px 0; position: relative; } .section::before{ content:""; position:absolute; left:0; right:0; top:0; height: 1px; background: linear-gradient(90deg, transparent, rgba(208,193,178,.65), transparent); } .section h2{ font-size: 28px; margin: 0 0 8px; } .site-footer{ border-top: 1px solid var(--line); padding: 18px 0; color: var(--muted); } /* ========================================= FOOTER ICONS ========================================= */ .footer-contact__icons{ display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; } .footer-contact__icon{ width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(208,193,178,.6); background: rgba(255,255,255,.4); display: flex; align-items: center; justify-content: center; } .footer-contact__icon img, .footer-contact__icon svg{ width: 22px; height: 22px; display: block; } /* ========================================= FOOTER GRID FIX (3 KOLOMMEN) ========================================= */ .footer-links{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 30px; text-align: center; /* alles gecentreerd */ } /* kolommen consistent */ .footer-column{ display: flex; flex-direction: column; align-items: center; /* centreren fix */ } /* titels */ .footer-title{ margin-bottom: 12px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } /* links netjes onder elkaar en gecentreerd */ .footer-nav--stack{ display: flex; flex-direction: column; gap: 10px; align-items: center; /* BELANGRIJK */ } /* contact kolom */ .footer-column--contact{ text-align: center; } /* ========================================= RESPONSIVE ========================================= */ @media (max-width: 900px){ .nav{ display:none; } .nav-toggle{ display:flex; } .hero{ padding: 56px 0 40px; } .hero-card{ grid-template-columns: 1fr; padding: 20px; gap: 18px; } .feature-grid{ grid-template-columns: 1fr; } .services-grid{ grid-template-columns: 1fr; } .detail-row{ grid-template-columns: 1fr; } .detail-row--reverse .detail-row__media{ order: 0; } } /* ========================================= ABOUT PAGE (REBUILD) - schoon: geen dubbele regels - 1 sfeerlaag (logo watermark) voor blok 1 + 2 - blok 2: tekst links + rechthoekige foto rechts ========================================= */ .about{ overflow: hidden; } /* ========================================= SHARED LAYOUT TOKENS (ABOUT) ========================================= */ .about{ --about-pad-top: 100px; --about-pad-bottom: 100px; /* 2-kolom grid basis (blok 1 en 2 gelijk) */ --about-col-left: 1fr; --about-col-right: 1fr; --about-gap: 60px; /* Watermark (logo) - stuurbaar */ --wm-opacity: .10; --wm-size: 360px; --wm-x: 62%; /* horizontale anchor (0% links, 100% rechts) */ --wm-y: 3%; /* verticale offset */ /* Achtergrondfoto voor blok 2 (optioneel) */ --bg2-overlay-top: rgba(243,234,230,.98); --bg2-overlay-bot: rgba(243,234,230,.97); --bg2-image: url("assets/img/css/sand-bg.webp"); /* Rechthoekige foto in blok 2 */ --panel-radius: 18px; --panel-aspect: 4 / 3; --panel-maxw: 460px; } .about-hero, .about-section, .about-method, .about-philosophy{ padding: 100px 0; } /* Consistente container voor contentbreedte binnen about */ .about .container{ position: relative; z-index: 1; } /* ========================================= SFEERLAAG (LOGO WATERMARK) — BLOK 1 + 2 Gebruik .about-surface als wrapper class op secties ========================================= */ .about-surface{ position: relative; overflow: hidden; } .about-surface::before{ /* zachte glow (niet te hard) */ content:""; position: absolute; inset: -220px -220px auto auto; width: 680px; height: 680px; background: radial-gradient(circle at 35% 35%, rgba(152,96,72,.16), rgba(176,150,126,.10), rgba(255,255,255,0) 65%); filter: blur(22px); opacity: .38; pointer-events: none; z-index: 0; } .about-surface::after{ /* logo watermark */ content:""; position: absolute; left: var(--wm-x); top: var(--wm-y); width: var(--wm-size); height: var(--wm-size); transform: translateX(-50%); background: url("assets/img/SVG/logo.svg") no-repeat center / contain; opacity: var(--wm-opacity); pointer-events: none; z-index: 0; } /* ========================================= BLOK 1 — HERO ========================================= */ .about-hero{ padding: var(--about-pad-top) 0 var(--about-pad-bottom); } /* hero grid: gelijk aan blok 2 */ .about-hero__grid{ display: grid; grid-template-columns: var(--about-col-left) var(--about-col-right); gap: var(--about-gap); align-items: center; } /* media */ .about-hero__media{ display: flex; justify-content: center; } /* copy */ .about-hero__copy{ text-align: center; max-width: 72ch; margin: 0 auto; } .about-hero__copy h1{ font-size: clamp(32px, 4vw, 52px); line-height: 1.08; margin: 0 0 16px; } /* ========================================= BLOK 2 — BETEKENIS (SPLIT: TEKST LINKS / FOTO RECHTS) - achtergrondfoto + overlay - zelfde grid als hero ========================================= */ .about-section{ padding: var(--about-pad-top) 0 var(--about-pad-bottom); } /* achtergrondfoto (alleen wanneer deze class aanwezig is) */ .about-section--bg{ position: relative; overflow: hidden; } .about-section--bg::before{ content:""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--bg2-overlay-top), var(--bg2-overlay-bot)), var(--bg2-image); background-size: cover; background-position: center; background-repeat: no-repeat; pointer-events: none; z-index: 0; } /* split layout */ .about-split{ display: grid; grid-template-columns: var(--about-col-left) var(--about-col-right); gap: var(--about-gap); align-items: center; } /* tekst links (uw wens) */ .about-split__copy{ text-align: left; max-width: 70ch; } /* foto rechts */ .about-split__media{ display: flex; justify-content: center; } /* rechthoekige foto (geen arch) */ .about-panel{ width: min(var(--panel-maxw), 100%); aspect-ratio: var(--panel-aspect); border-radius: var(--panel-radius); overflow: hidden; border: 1px solid rgba(208,193,178,.55); box-shadow: var(--shadow-soft); background: rgba(255,255,255,.35); } .about-panel img{ width: 100%; height: 100%; object-fit: cover; display: block; } /* headings in sections */ .about-section h2{ font-size: 34px; margin: 0 0 14px; } /* ========================================= BLOK 3 — ACHTERGROND (SOFT) ========================================= */ .about-section--soft{ background: rgba(255,255,255,.35); border-top: 1px solid rgba(208,193,178,.45); border-bottom: 1px solid rgba(208,193,178,.45); } .about-section__inner{ max-width: 820px; margin: 0 auto; text-align: center; } .about-section__inner p{ max-width: 72ch; margin-left: auto; margin-right: auto; } /* ========================================= METHOD ========================================= */ .about-method{ padding: 100px 0; } .about-method__head{ text-align: center; margin-bottom: 40px; max-width: 72ch; margin-left: auto; margin-right: auto; } .about-method__head h2{ font-size: 34px; margin: 0 0 8px; } .about-method__grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; } .method-card{ padding: 28px; border-radius: var(--radius-lg); background: rgba(255,255,255,.55); border: 1px solid rgba(208,193,178,.45); box-shadow: var(--shadow-soft); text-align: center; } .method-card h3{ font-size: 22px; margin: 0 0 12px; } /* ========================================= PHILOSOPHY ========================================= */ .about-philosophy{ padding: 110px 0; text-align: center; position: relative; } .about-philosophy__inner{ max-width: 72ch; margin: 0 auto; } .about-philosophy__quote{ font-family: var(--font-script-elegant); font-size: clamp(30px, 3vw, 40px); font-weight: 400; letter-spacing: .5px; color: var(--accent); margin: 18px 0 28px; } /* ========================================= RESPONSIVE ========================================= */ @media (max-width: 900px){ .about-hero__grid, .about-split{ grid-template-columns: 1fr; gap: 28px; text-align: center; } .about-split__copy{ text-align: center; margin-left: auto; margin-right: auto; } .about{ --wm-opacity: .08; --wm-size: 620px; --wm-x: 50%; --wm-y: -20%; } .about-method__grid{ grid-template-columns: 1fr; } } /* ========================================= ABOUT — METHOD BACKGROUND IMAGE ========================================= */ .about-method{ position: relative; overflow: hidden; /* afstelknoppen */ --method-bg-opacity: .33; --method-bg: url("assets/img/css/straal.webp"); } /* achtergrond + warme overlay */ .about-method::before{ content:""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(243,234,230,.92), rgba(243,234,230,.92) ), var(--method-bg); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: var(--method-bg-opacity); pointer-events: none; z-index: 0; } /* content boven de achtergrond */ .about-method .container{ position: relative; z-index: 1; } /* ========================================= ABOUT — ACHTERGROND BLOK (HIGHLIGHT CARD) ========================================= */ .about-highlight{ max-width: 860px; margin: 0 auto; text-align: center; padding: 46px 34px; border-radius: var(--radius-lg); background: rgba(255,255,255,.55); border: 1px solid rgba(208,193,178,.45); box-shadow: var(--shadow-soft); position: relative; overflow: hidden; } /* subtiel ornament (geen logo, alleen sfeer) */ .about-highlight::before{ content:""; position: absolute; inset: -30% -40% auto auto; width: 520px; height: 520px; background: radial-gradient(circle at 30% 30%, rgba(152,96,72,.14), rgba(176,150,126,.10), rgba(255,255,255,0) 60%); filter: blur(18px); opacity: .35; pointer-events: none; } .about-highlight h2{ margin: 0 0 12px; font-size: 34px; } .about-highlight p{ max-width: 72ch; margin: 0 auto 14px; color: var(--text); } .about-highlight p:last-child{ margin-bottom: 0; } @media (max-width: 900px){ .about-highlight{ padding: 34px 20px; } } /* ========================================= ABOUT — EXPERIENCE BADGE ========================================= */ .about-highlight{ position: relative; } /* badge container */ .about-highlight__badge{ position: absolute; top: 28px; right: 34px; text-align: center; line-height: 1; opacity: .85; } /* groot getal */ .about-highlight__badge span{ display: block; font-family: var(--font-serif); font-size: 54px; font-weight: 600; color: var(--accent); letter-spacing: -1px; } /* kleine tekst eronder */ .about-highlight__badge small{ display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-top: 6px; } /* mobiel: badge boven gecentreerd */ @media (max-width: 900px){ .about-highlight__badge{ position: static; margin-bottom: 18px; } .about-highlight__badge span{ font-size: 42px; } } /* ========================================= REVEAL ON SCROLL (SUBTLE) - gebruikt enkel opacity + transform (smooth, cheap) - respecteert prefers-reduced-motion ========================================= */ .reveal{ opacity: 0; transform: translateY(12px); transition: opacity .7s ease, transform .7s ease; will-change: opacity, transform; } .reveal.is-visible{ opacity: 1; transform: translateY(0); } /* varianten (optioneel) */ .reveal--soft{ transform: translateY(8px); transition-duration: .9s; } .reveal--delay-1{ transition-delay: .06s; } .reveal--delay-2{ transition-delay: .12s; } .reveal--delay-3{ transition-delay: .18s; } /* toegankelijkheid: motion uit = direct zichtbaar */ @media (prefers-reduced-motion: reduce){ .reveal{ opacity: 1 !important; transform: none !important; transition: none !important; } } /* ========================================= BLOG - overzicht + post template - sluit aan op bestaande tokens/knoppen/cards ========================================= */ .blog{ overflow: hidden; } /* BLOG HERO */ .blog-hero{ padding: 90px 0 40px; position: relative; } .blog-hero__inner{ text-align: center; max-width: 78ch; margin: 0 auto; } .blog-hero__kicker{ margin: 0 0 10px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .blog-hero h1{ font-size: clamp(34px, 4vw, 54px); line-height: 1.06; margin: 0 0 12px; } .blog-hero__lead{ margin: 0 auto 18px; max-width: 70ch; color: var(--muted); font-size: 18px; } .blog-hero__meta{ display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; } /* pill */ .blog-pill{ display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(208,193,178,.55); background: rgba(255,255,255,.40); color: var(--text); font-size: 13px; white-space: nowrap; } /* BLOG LIST */ .blog-list{ padding: 28px 0 90px; } .blog-list__head{ text-align: center; margin-bottom: 26px; } .blog-list__head h2{ font-size: 34px; margin: 0 0 8px; } /* GRID */ .blog-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; } .blog-card{ border-radius: 22px; background: rgba(255,255,255,.55); border: 1px solid rgba(208,193,178,.45); box-shadow: 0 18px 50px rgba(107,75,55,.08); overflow: hidden; display: grid; grid-template-rows: auto 1fr; transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; } .blog-card:hover{ transform: translateY(-6px); box-shadow: 0 28px 60px rgba(107,75,55,.12); border-color: rgba(152,96,72,.35); } .blog-card__media{ display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; } .blog-card__media img{ width: 100%; height: 100%; object-fit: cover; display: block; } .blog-card__body{ padding: 16px 16px 18px; text-align: left; } .blog-card__meta{ margin: 0 0 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .blog-dot{ opacity: .55; } .blog-card__title{ margin: 0 0 10px; font-size: 20px; line-height: 1.18; } .blog-card__title a{ color: var(--text); text-decoration: none; } .blog-card__title a:hover{ text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .blog-card__excerpt{ margin: 0 0 14px; color: var(--text); opacity: .92; } /* PAGINATION */ .blog-pagination{ margin-top: 26px; display: flex; justify-content: center; gap: 12px; align-items: center; } .blog-pagination__count{ font-size: 13px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; } /* ========================================= POST PAGE ========================================= */ .post-hero{ padding: 90px 0 34px; } .post-hero__inner{ max-width: 86ch; margin: 0 auto; text-align: center; } .post-back{ display: inline-block; margin-bottom: 16px; text-decoration: none; color: var(--muted); font-size: 14px; } .post-back:hover{ color: var(--text); } .post-meta{ margin: 0 0 12px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; } .post-hero h1{ font-size: clamp(32px, 4vw, 52px); line-height: 1.08; margin: 0 0 14px; } .post-lead{ margin: 0 auto; max-width: 72ch; color: var(--muted); font-size: 18px; } /* post layout */ .post{ padding: 28px 0 110px; } .post__grid{ display: grid; grid-template-columns: 1.35fr .65fr; gap: 28px; align-items: start; } .post__content{ background: rgba(255,255,255,.55); border: 1px solid rgba(208,193,178,.45); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); padding: 30px 26px; } .post__content p{ margin: 0 0 14px; max-width: 72ch; } .post__content h2{ font-size: 28px; margin: 26px 0 10px; } .post-signature{ margin-top: 22px; font-family: var(--font-script-elegant); color: var(--accent); font-size: 26px; } /* aside */ .post-aside h3{ font-size: 18px; margin: 0 0 8px; } .post-aside .button{ margin-top: 10px; display: inline-block; } /* ========================================= RESPONSIVE ========================================= */ @media (max-width: 900px){ .blog-grid{ grid-template-columns: 1fr; } .post__grid{ grid-template-columns: 1fr; } .blog-card__body{ text-align: left; } } /* ========================================= FOOTER ========================================= */ .site-footer{ margin-top: 80px; border-top: 1px solid rgba(208,193,178,.45); background: rgba(255,255,255,.35); } /* hoofdblok */ .footer-inner{ text-align: center; padding: 50px 0 40px; display: flex; flex-direction: column; gap: 20px; } /* spreuk */ .footer-mantra{ font-family: var(--font-script-elegant); font-size: 26px; color: var(--accent); margin: 0; } /* menu */ .footer-nav{ display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; } .footer-nav a{ text-decoration: none; color: var(--muted); font-size: 15px; } .footer-nav a:hover{ color: var(--text); } /* iconen */ .footer-icons{ display: flex; justify-content: center; gap: 14px; margin-top: 6px; } .footer-icons a{ width: 42px; height: 42px; border-radius: 999px; display: flex; align-items: center; justify-content: center; text-decoration: none; color: white; font-size: 16px; background: var(--accent); transition: transform .25s ease, box-shadow .25s ease; } .footer-icons a:hover{ transform: translateY(-2px); box-shadow: 0 10px 26px rgba(107,75,55,.18); } /* quote banner */ .footer-quote{ margin-top: 40px; padding: 26px 0; border-top: 1px solid rgba(208,193,178,.35); border-bottom: 1px solid rgba(208,193,178,.35); background: rgba(152,96,72,.06); text-align: center; } .footer-quote p{ margin: 0; font-family: var(--font-elegant); font-style: italic; color: var(--text); } /* copyright */ .footer-bottom{ text-align: center; padding: 18px 0; font-size: 13px; color: var(--muted); } /* ========================================= AANBOD & TARIEVEN PAGE ========================================= */ .pricing-page{ overflow: hidden; } .pricing-card{ display: block; text-decoration: none; color: inherit; } .pricing-hero{ padding: 96px 0 44px; position: relative; } .pricing-hero__inner{ max-width: 82ch; margin: 0 auto; text-align: center; } .pricing-hero__kicker{ margin: 0 0 10px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .pricing-hero h1{ font-size: clamp(34px, 4vw, 54px); line-height: 1.08; margin: 0 0 14px; } .pricing-hero__lead{ max-width: 68ch; margin: 0 auto; color: var(--muted); font-size: 18px; } .pricing-section{ padding: 72px 0; position: relative; } .pricing-section--soft{ background: rgba(255,255,255,.35); border-top: 1px solid rgba(208,193,178,.45); border-bottom: 1px solid rgba(208,193,178,.45); } .pricing-section__head{ text-align: center; max-width: 74ch; margin: 0 auto 30px; } .pricing-section__kicker{ margin: 0 0 10px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .pricing-section__head h2{ font-size: 34px; margin: 0 0 10px; } .pricing-grid{ display: grid; gap: 18px; align-items: stretch; } .pricing-grid--3{ grid-template-columns: repeat(3, 1fr); } .pricing-grid--2{ grid-template-columns: repeat(2, 1fr); } .pricing-card{ background: rgba(255,255,255,.58); border: 1px solid rgba(208,193,178,.45); box-shadow: 0 18px 50px rgba(107,75,55,.08); border-radius: 22px; padding: 24px 22px; text-align: center; transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; } .pricing-card:hover{ transform: translateY(-6px); box-shadow: 0 28px 60px rgba(107,75,55,.12); border-color: rgba(152,96,72,.35); cursor: pointer; } .pricing-card--featured{ background: linear-gradient( 180deg, rgba(255,255,255,.72), rgba(243,234,230,.78) ); } .pricing-card__label{ margin: 0 0 8px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .pricing-card h3{ margin: 0 0 8px; font-size: 28px; } .pricing-card__meta{ margin: 0 0 10px; color: var(--muted); font-size: 15px; } .pricing-card__price{ margin: 0 0 14px; font-family: var(--font-serif); font-size: 32px; line-height: 1.1; color: var(--accent); } .pricing-card__text{ margin: 0; } .pricing-card__list{ list-style: none; margin: 18px 0 18px; padding: 0; } .pricing-card__list li{ padding: 8px 0; border-top: 1px solid rgba(208,193,178,.35); } .pricing-card__list li:last-child{ border-bottom: 1px solid rgba(208,193,178,.35); } .pricing-card__benefit{ margin: 0 0 6px; font-weight: 700; color: var(--text); } .pricing-card__note{ margin: 0; color: var(--muted); } .pricing-info-card{ max-width: 900px; margin: 24px auto 0; padding: 22px 24px; border-radius: var(--radius-lg); background: rgba(255,255,255,.52); border: 1px solid rgba(208,193,178,.45); box-shadow: var(--shadow-soft); text-align: center; } .pricing-info-card h3{ margin: 0 0 10px; font-size: 24px; } .pricing-info-card p:last-child{ margin-bottom: 0; } .pricing-payment{ max-width: 820px; margin: 0 auto; text-align: center; padding: 38px 30px; border-radius: var(--radius-lg); background: rgba(255,255,255,.58); border: 1px solid rgba(208,193,178,.45); box-shadow: var(--shadow-soft); } .pricing-payment h2{ margin: 0 0 14px; font-size: 34px; } .pricing-payment__actions{ display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 22px; } .pricing-card{ position: relative; } .pricing-card::after{ content: "→"; position: absolute; right: 20px; bottom: 20px; opacity: 0; transition: opacity .3s ease, transform .3s ease; } .pricing-card:hover::after{ opacity: 1; transform: translateX(4px); } @media (max-width: 900px){ .pricing-hero{ padding: 68px 0 28px; } .pricing-grid--3, .pricing-grid--2{ grid-template-columns: 1fr; } .pricing-payment{ padding: 30px 20px; } } /* ========================================= INDEX PAGE FIXES / COOKIE / MEDIA / FOOTER ========================================= */ body.has-cookie-banner{ overflow: hidden; } .media-section{ padding: 80px 0; text-align: center; } .media-section__inner{ display: flex; flex-direction: column; align-items: center; max-width: 960px; } .media-section__head{ margin-bottom: 28px; } .contact-card{ max-width: 640px; } .site-footer--extended{ margin-top: 80px; border-top: 1px solid rgba(208,193,178,.45); background: linear-gradient(180deg, rgba(255,255,255,.52) 0%, rgba(246,239,234,.86) 100%); position: relative; overflow: hidden; } .site-footer--extended::before{ content: ""; position: absolute; inset: 0 auto auto 50%; width: 680px; height: 680px; transform: translateX(-50%); background: radial-gradient(circle, rgba(152,96,72,.08) 0%, rgba(152,96,72,0) 70%); pointer-events: none; } .site-footer--extended .footer-inner{ position: relative; z-index: 1; padding: 64px 0 44px; display: block; text-align: left; } .footer-top{ display: grid; grid-template-columns: 1.1fr 1.4fr; gap: 52px; align-items: start; } .footer-branding{ max-width: 420px; } .site-footer--extended .footer-mantra{ margin: 0 0 14px; font-family: var(--font-script-elegant); font-size: clamp(28px, 3.2vw, 38px); line-height: 1.1; color: var(--accent); } .footer-copy{ margin: 0; color: var(--muted); font-size: 15px; line-height: 1.75; } .footer-links{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } .footer-column{ display: flex; flex-direction: column; gap: 14px; } .footer-title{ margin: 0; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .site-footer--extended .footer-nav{ display: flex; justify-content: flex-start; gap: 22px; flex-wrap: wrap; } .footer-nav--stack{ flex-direction: column; gap: 10px; } .site-footer--extended .footer-nav a, .footer-contact a{ text-decoration: none; color: var(--text); font-size: 15px; line-height: 1.5; transition: color .22s ease, opacity .22s ease, transform .22s ease; } .site-footer--extended .footer-nav a:hover, .footer-contact a:hover{ color: var(--accent); transform: translateX(2px); } .footer-nav--legal a{ color: var(--muted); } .site-footer--extended .footer-icons{ display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-start; margin-top: 0; } .site-footer--extended .footer-icons a{ width: 46px; height: 46px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(152,96,72,.1); border: 1px solid rgba(152,96,72,.18); transition: transform .22s ease, background .22s ease, box-shadow .22s ease; } .site-footer--extended .footer-icons a:hover{ transform: translateY(-2px); background: rgba(152,96,72,.16); box-shadow: 0 12px 28px rgba(107,75,55,.12); } .site-footer--extended .footer-icons img{ width: 18px; height: 18px; display: block; object-fit: contain; opacity: .9; } .footer-cookie-link{ appearance: none; background: transparent; border: 0; padding: 0; color: var(--muted); font: inherit; text-align: left; cursor: pointer; } .footer-cookie-link:hover{ color: var(--accent); } .footer-contact{ display: flex; flex-direction: column; gap: 8px; } .site-footer--extended .footer-bottom{ position: relative; z-index: 1; text-align: initial; padding: 0; font-size: initial; color: initial; } .footer-bottom__inner{ padding: 18px 0 24px; text-align: center; } .footer-bottom small{ font-size: 13px; color: var(--muted); } .cookie-banner[hidden]{ display: none !important; } .cookie-banner{ position: fixed; inset: 0; z-index: 120; } .cookie-banner__backdrop{ position: absolute; inset: 0; background: rgba(72, 48, 35, .26); backdrop-filter: blur(6px); } .cookie-banner__panel{ position: absolute; right: 24px; bottom: 24px; width: min(560px, calc(100% - 48px)); max-width: 560px; } .cookie-banner__inner{ position: relative; background: rgba(255,255,255,.94); border: 1px solid rgba(208,193,178,.7); border-radius: 26px; box-shadow: 0 24px 64px rgba(107,75,55,.18); padding: 26px 24px 22px; overflow: hidden; } .cookie-banner__inner::before{ content: ""; position: absolute; top: -140px; right: -120px; width: 320px; height: 320px; background: radial-gradient(circle, rgba(152,96,72,.10) 0%, rgba(152,96,72,0) 72%); pointer-events: none; } .cookie-banner__eyebrow{ margin: 0 0 10px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); } .cookie-banner__title{ margin: 0 0 12px; font-size: clamp(28px, 3vw, 36px); line-height: 1.1; } .cookie-banner__text{ margin: 0 0 18px; color: var(--text); opacity: .9; font-size: 15px; line-height: 1.7; } .cookie-banner__options{ display: grid; gap: 12px; margin-bottom: 16px; } .cookie-option{ display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; border: 1px solid rgba(208,193,178,.55); background: rgba(243,234,230,.45); cursor: pointer; } .cookie-option--locked{ cursor: default; } .cookie-option__copy{ display: grid; gap: 4px; } .cookie-option__title{ font-size: 15px; font-weight: 700; color: var(--text); } .cookie-option__desc{ font-size: 13px; line-height: 1.55; color: var(--muted); } .cookie-checkbox{ position: absolute; opacity: 0; pointer-events: none; } .cookie-switch{ width: 52px; height: 30px; border-radius: 999px; background: rgba(176,150,126,.35); border: 1px solid rgba(176,150,126,.45); position: relative; transition: background .22s ease, border-color .22s ease; } .cookie-switch::after{ content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.12); transition: transform .22s ease; } .cookie-checkbox:checked + .cookie-switch, .cookie-switch--active{ background: rgba(152,96,72,.88); border-color: rgba(152,96,72,.88); } .cookie-checkbox:checked + .cookie-switch::after, .cookie-switch--active::after{ transform: translateX(22px); } .cookie-banner__legal{ margin: 0 0 18px; font-size: 13px; line-height: 1.6; color: var(--muted); } .cookie-banner__legal a{ color: var(--text); text-decoration: none; border-bottom: 1px solid rgba(152,96,72,.35); } .cookie-banner__actions{ display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; } .cookie-btn{ min-width: 140px; text-align: center; } .deferred-media{ position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(208,193,178,.55); background: rgba(255,255,255,.45); box-shadow: var(--shadow-soft); } .deferred-media__placeholder{ width: 100%; height: 100%; display: grid; place-items: center; text-align: center; padding: 24px; background: linear-gradient(rgba(243,234,230,.82), rgba(243,234,230,.92)), radial-gradient(circle at 50% 20%, rgba(152,96,72,.08), transparent 55%); } .deferred-media__placeholder p{ max-width: 34ch; margin: 0 0 14px; color: var(--text); } .deferred-media__frame{ width: 100%; height: 100%; border: 0; display: block; } @media (max-width: 900px){ .footer-top{ grid-template-columns: 1fr; gap: 34px; } .footer-branding{ max-width: none; text-align: center; } .footer-links{ grid-template-columns: 1fr; gap: 26px; } .footer-column{ align-items: center; text-align: center; } .site-footer--extended .footer-nav{ justify-content: center; } .site-footer--extended .footer-nav a:hover, .footer-contact a:hover{ transform: none; } .site-footer--extended .footer-icons{ justify-content: center; } .footer-cookie-link{ text-align: center; } .cookie-banner__panel{ left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; } .cookie-banner__inner{ padding: 22px 18px 18px; border-radius: 22px; } .cookie-banner__actions{ justify-content: stretch; } .cookie-btn{ flex: 1 1 100%; min-width: 0; } .cookie-option{ grid-template-columns: 1fr; } .cookie-switch{ justify-self: start; } } /* ========================================= FOOTER INTRO (QUOTE BLOK) ========================================= */ .footer-intro{ position: relative; max-width: 720px; margin: 0 auto 70px; padding: 20px 20px 10px; text-align: center; overflow: hidden; } .footer-intro::before{ content:""; position: absolute; inset: 0; background: url("assets/img/SVG/ornament.svg") center / 110px no-repeat; opacity: .06; pointer-events: none; } .footer-quote{ font-family: "Allura", "Cormorant Garamond", serif; font-size: 32px; line-height: 1.4; color: #986048; margin-bottom: 16px; letter-spacing: .03em; } .footer-description{ max-width: 520px; margin: 0 auto; font-size: 15px; line-height: 1.7; color: #6f635a; } .footer-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 70px; max-width: 920px; margin: 0 auto; } .footer-title{ font-size: 11px; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 20px; color: #9d8e82; } .footer-icons{ display: flex; gap: 16px; margin-bottom: 20px; } .footer-icons a{ width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(152,96,72,.25); display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.45); transition: all .25s ease; } .footer-icons a:hover{ background: #986048; transform: translateY(-2px); } .footer-icons img{ width: 22px; height: 22px; } /* ========================================= CONTACT SECTION ========================================= */ .contact-section{ padding: 90px 0; } .contact-card--split{ width: 100%; max-width: none; /* belangrijk: geen smalle kaart meer */ display: grid; grid-template-columns: minmax(260px, 0.8fr) minmax(420px, 1.2fr); gap: 56px; align-items: start; padding: 40px 42px; background: rgba(255,255,255,.55); border: 1px solid rgba(208,193,178,.45); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); } /* Linkerkolom */ .contact-card__intro{ max-width: 320px; padding-top: 6px; } .contact-card__kicker{ margin: 0 0 14px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .contact-card__title{ margin: 0 0 18px; font-size: clamp(40px, 4vw, 58px); line-height: 1.02; } .contact-card__text{ margin: 0; color: var(--muted); font-size: 16px; line-height: 1.65; } /* Linkerkolom centreren */ .contact-card__intro{ max-width: 320px; padding-top: 6px; display: flex; flex-direction: column; align-items: center; /* <-- kern */ text-align: center; /* <-- kern */ } /* Rechterkolom */ .contact-form{ width: 100%; max-width: none; } .contact-form__grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; } .form-field{ display: flex; flex-direction: column; gap: 7px; } .form-field--full{ grid-column: 1 / -1; } .form-field label{ font-size: 13px; color: var(--text); } .form-field input, .form-field textarea{ width: 100%; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(208,193,178,.55); background: rgba(255,255,255,.7); font-family: var(--font-body); font-size: 14px; color: var(--text); } .form-field textarea{ min-height: 150px; resize: vertical; } .contact-submit{ margin-top: 20px; padding: 12px 22px; min-width: 160px; border: 0; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 650; font-size: 14px; cursor: pointer; } /* Responsive */ @media (max-width: 900px){ .contact-card--split{ grid-template-columns: 1fr; gap: 28px; padding: 26px 20px; } .contact-card__intro{ max-width: none; text-align: center; } .contact-card__title{ font-size: clamp(34px, 8vw, 48px); } .contact-form__grid{ grid-template-columns: 1fr; } .contact-submit{ width: 100%; } } /* ========================================= CONTACT FORM STATUS ========================================= */ .contact-form-wrap{ width: 100%; } .form-status{ display: none; margin-bottom: 16px; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(208,193,178,.55); font-size: 14px; line-height: 1.55; } .form-status.is-visible{ display: block; } .form-status--success{ background: rgba(255,255,255,.72); border-color: rgba(152,96,72,.35); color: var(--text); } .form-status--error{ background: rgba(255,255,255,.72); border-color: rgba(160,90,70,.35); color: var(--text); } .form-field--hp{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .contact-form__legal{ margin: 14px 0 0; font-size: 12px; line-height: 1.6; color: var(--muted); } /* ========================================= CEREMONIES & TEACHINGS PAGE - opgeschoond ========================================= */ .teachings-page{ overflow: hidden; } /* HERO / BASISBLOK */ .teachings-hero, .teachings-event{ position: relative; padding: 96px 0 54px; } .teachings-hero__card{ position: relative; display: grid; grid-template-columns: .95fr 1.05fr; gap: 32px; align-items: center; padding: 22px; border-radius: var(--radius-lg); background: rgba(255,255,255,.58); border: 1px solid rgba(208,193,178,.45); box-shadow: var(--shadow-soft); overflow: hidden; } .teachings-hero__card::before{ content: ""; position: absolute; inset: -40px -80px auto auto; width: 460px; height: 460px; background: radial-gradient( circle at 35% 35%, rgba(152,96,72,.18), rgba(176,150,126,.10), rgba(255,255,255,0) 68% ); filter: blur(18px); opacity: .35; pointer-events: none; } .teachings-hero__card::after{ content: ""; position: absolute; right: -16%; bottom: 10%; width: 540px; height: 540px; background: url("assets/img/SVG/logo.svg") no-repeat center / contain; opacity: .08; pointer-events: none; } .teachings-hero__media, .teachings-hero__copy{ position: relative; z-index: 1; } .teachings-hero__media{ display: flex; justify-content: center; } .teachings-arch{ width: min(360px, 100%); } .teachings-hero__copy{ text-align: center; max-width: 680px; margin: 0 auto; } .teachings-eyebrow{ margin: 0 0 12px; font-family: var(--font-script-elegant); font-size: 34px; line-height: 1; color: var(--accent); } .teachings-hero h1, .teachings-hero h2, .teachings-event h2{ font-size: clamp(34px, 4vw, 56px); line-height: 1.05; margin: 0 0 16px; } .teachings-hero__lead{ color: var(--muted); font-size: 18px; margin-bottom: 16px; } .teachings-hero__note{ color: var(--text); opacity: .88; margin-bottom: 24px; } .teachings-hero__actions{ display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; } /* FLOW SYSTEEM */ .teachings-flow{ text-align: center; } .flow-narrow{ max-width: 420px; margin-left: auto; margin-right: auto; } .flow-medium{ max-width: 560px; margin-left: auto; margin-right: auto; } .flow-wide{ max-width: 680px; margin-left: auto; margin-right: auto; } /* EVENT TEKST */ .teachings-list{ list-style: none; padding: 0; margin: 10px auto 18px; } .teachings-list li{ margin: 6px 0; color: var(--text); } .teachings-highlight{ margin: 10px auto 16px; font-weight: 600; font-size: 18px; line-height: 1.5; } .teachings-closing{ margin-top: 18px; font-family: var(--font-script-elegant); color: var(--accent); font-size: 22px; } /* ========================================= EFFORTLESS EVENT FIX ========================================= */ .teachings-hero__copy.teachings-flow{ max-width: 620px; margin: 0 auto; text-align: center; } .teachings-hero__copy.teachings-flow > *{ margin-left: auto; margin-right: auto; } .teachings-hero__copy.teachings-flow h2{ max-width: 420px; margin-bottom: 14px; } .teachings-hero__copy.teachings-flow .teachings-hero__lead{ max-width: 460px; margin-bottom: 22px; } .teachings-hero__copy.teachings-flow .flow-medium{ max-width: 560px; } .teachings-hero__copy.teachings-flow .flow-wide{ max-width: 620px; } .teachings-hero__copy.teachings-flow .flow-narrow{ max-width: 420px; } .teachings-list{ list-style: none; padding: 0; margin: 12px auto 20px; max-width: 420px; text-align: center; } .teachings-list li{ margin: 8px 0; } .teachings-highlight{ max-width: 620px; margin: 18px auto 18px; font-weight: 600; font-size: 18px; line-height: 1.45; } .teachings-hero__note{ max-width: 420px; margin: 18px auto 24px; line-height: 1.6; } .teachings-hero__actions{ justify-content: center; margin: 0 auto 16px; } .teachings-closing{ max-width: 420px; margin: 0 auto; text-align: center; } /* INTRO KAARTEN */ .teachings-intro{ padding: 0 0 18px; } .teachings-section:first-of-type{ padding-top: 40px; } .teachings-intro__grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .teachings-mini-card{ padding: 18px 20px; border-radius: 22px; background: rgba(255,255,255,.48); border: 1px solid rgba(208,193,178,.45); box-shadow: 0 18px 50px rgba(107,75,55,.08); text-align: center; transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; } .teachings-mini-card:hover{ transform: translateY(-5px); box-shadow: 0 28px 60px rgba(107,75,55,.11); border-color: rgba(152,96,72,.30); } .teachings-mini-card--link{ display: block; text-decoration: none; color: inherit; cursor: pointer; } .teachings-mini-card--link h2, .teachings-mini-card--link p{ color: inherit; } .teachings-mini-card--link:hover{ text-decoration: none; } .teachings-mini-card--link:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(152,96,72,.20), 0 28px 60px rgba(107,75,55,.11); border-color: rgba(152,96,72,.35); } .teachings-mini-card__kicker{ margin: 0 0 8px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .teachings-mini-card h2{ margin: 0 0 10px; font-size: 26px; } .teachings-mini-card p{ margin: 0; } /* ALGEMENE TEACHINGS SECTIES */ .teachings-section, .ceremony-section{ padding: 74px 0; } .teachings-section__kicker{ margin: 0 0 10px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .teachings-shell{ position: relative; padding: 34px; border-radius: 28px; background: rgba(255,255,255,.56); border: 1px solid rgba(208,193,178,.45); box-shadow: var(--shadow-soft); overflow: hidden; } .teachings-shell::before{ content: ""; position: absolute; inset: auto auto -180px -120px; width: 420px; height: 420px; background: radial-gradient( circle at 50% 50%, rgba(152,96,72,.10), rgba(152,96,72,0) 70% ); pointer-events: none; } .teachings-shell__head{ position: relative; z-index: 1; text-align: center; max-width: 72ch; margin: 0 auto 26px; } .teachings-shell__head h2{ font-size: clamp(32px, 3.4vw, 46px); margin: 0 0 8px; } .teachings-shell__sub{ margin: 0; color: var(--accent); font-family: var(--font-elegant); font-size: 24px; } .teachings-shell__intro{ position: relative; z-index: 1; max-width: 76ch; margin: 0 auto 30px; text-align: center; } .teachings-grid{ position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .teachings-panel{ padding: 24px 22px; border-radius: 22px; background: rgba(255,255,255,.58); border: 1px solid rgba(208,193,178,.42); box-shadow: 0 16px 40px rgba(107,75,55,.07); } .teachings-panel h3{ margin: 0 0 14px; font-size: 24px; } .teachings-panel__note{ margin: 14px 0 0; color: var(--muted); } .teachings-list--compact li{ margin-bottom: 8px; } .teachings-investment{ position: relative; z-index: 1; margin-top: 24px; padding: 24px 22px; border-radius: 24px; background: linear-gradient( 180deg, rgba(255,255,255,.72), rgba(243,234,230,.72) ); border: 1px solid rgba(208,193,178,.45); display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; align-items: center; } .teachings-investment h3{ margin: 0 0 12px; font-size: 28px; } .teachings-investment__copy p:last-child{ margin-bottom: 0; } .teachings-investment__actions{ display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; } /* CEREMONY FEATURES */ .ceremony-section--soft{ background: rgba(255,255,255,.35); border-top: 1px solid rgba(208,193,178,.45); border-bottom: 1px solid rgba(208,193,178,.45); } .ceremony-feature{ display: grid; grid-template-columns: .92fr 1.08fr; gap: 42px; align-items: center; margin-bottom: 30px; } /* ========================================= LEVEL UP COACHING ========================================= */ #level-up-coaching{ padding-top: 52px; padding-bottom: 52px; } #level-up-coaching .ceremony-feature{ margin-bottom: 0; } #level-up-coaching .teachings-list{ margin: 18px 0 24px; padding-left: 18px; } #level-up-coaching .teachings-list li{ margin-bottom: 8px; } #level-up-coaching .button{ margin-top: 4px; } .ceremony-feature--reverse .ceremony-feature__media{ order: 2; } .ceremony-feature__media{ display: flex; justify-content: center; } .ceremony-visual{ width: min(440px, 100%); aspect-ratio: 1 / 1; border-radius: 28px; overflow: hidden; border: 1px solid rgba(208,193,178,.55); box-shadow: var(--shadow-soft); background: rgba(255,255,255,.40); } .ceremony-visual img{ width: 100%; height: 100%; object-fit: cover; display: block; } .ceremony-feature__copy{ max-width: 640px; } .ceremony-feature__kicker{ margin: 0 0 10px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .ceremony-feature h2{ margin: 0 0 12px; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.08; } .ceremony-feature__lead{ margin: 0 0 16px; color: var(--accent); font-family: var(--font-script-elegant); font-size: 30px; line-height: 1.1; } /* ========================================= LEVEL UP COACHING — CENTER ALIGN ========================================= */ #level-up-coaching .ceremony-feature__copy{ text-align: center; max-width: 560px; margin: 0 auto; } /* subtitel (script-font regel) */ #level-up-coaching .ceremony-feature__lead{ display: block; text-align: center; } /* alinea's */ #level-up-coaching .ceremony-feature__copy p{ text-align: center; } /* ========================================= LEVEL UP COACHING — LIJST STRAK CENTREREN ========================================= */ #level-up-coaching .teachings-list{ list-style: none; padding: 0; margin: 18px auto 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; } #level-up-coaching .teachings-list li{ display: block; width: 100%; margin: 0; padding: 0; text-align: center; } /* knop netjes in het midden */ #level-up-coaching .button{ display: inline-block; margin: 8px auto 0; } /* CEREMONY CARDS */ .ceremony-cards{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 12px; } .ceremony-card{ padding: 24px 22px; border-radius: 22px; background: rgba(255,255,255,.58); border: 1px solid rgba(208,193,178,.45); box-shadow: 0 18px 50px rgba(107,75,55,.08); text-align: center; transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; } .ceremony-card:hover{ transform: translateY(-6px); box-shadow: 0 28px 60px rgba(107,75,55,.12); border-color: rgba(152,96,72,.35); } .ceremony-card__label{ margin: 0 0 8px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .ceremony-card h3{ margin: 0 0 12px; font-size: 24px; } .ceremony-card__text{ margin: 0 0 14px; } .ceremony-card__meta{ margin: 0 0 8px; color: var(--muted); } .ceremony-card__price{ margin: 0; font-family: var(--font-serif); font-size: 30px; line-height: 1.1; color: var(--accent); } .ceremony-card__small{ margin: 8px 0 0; color: var(--muted); font-size: 14px; } /* CEREMONY NOTE */ .ceremony-note{ max-width: 920px; margin: 26px auto 0; padding: 26px 24px; border-radius: 24px; background: rgba(255,255,255,.52); border: 1px solid rgba(208,193,178,.45); box-shadow: var(--shadow-soft); text-align: center; } .ceremony-note h3{ margin: 0 0 12px; font-size: 26px; } .ceremony-note p:last-of-type{ margin-bottom: 0; } .ceremony-note .button{ margin-top: 14px; } .ceremony-split{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 8px; } .ceremony-note-card{ padding: 24px 22px; border-radius: 22px; background: rgba(255,255,255,.52); border: 1px solid rgba(208,193,178,.42); box-shadow: 0 16px 40px rgba(107,75,55,.07); } .ceremony-note-card h3{ margin: 0 0 12px; font-size: 24px; } /* RESPONSIVE */ @media (max-width: 900px){ .teachings-hero, .teachings-event{ padding: 72px 0 28px; } .teachings-hero__card, .teachings-investment, .ceremony-feature{ grid-template-columns: 1fr; } .ceremony-feature--reverse .ceremony-feature__media{ order: 0; } .teachings-intro__grid, .teachings-grid, .ceremony-cards, .ceremony-split{ grid-template-columns: 1fr; } .teachings-shell{ padding: 26px 18px; } .teachings-hero__copy, .teachings-shell__intro, .ceremony-feature__copy{ text-align: center; margin-left: auto; margin-right: auto; } .teachings-eyebrow{ font-size: 28px; } .ceremony-feature__lead{ font-size: 26px; } .flow-narrow, .flow-medium, .flow-wide{ max-width: 100%; } } html{ scroll-behavior: smooth; } .footer-column--contact{ align-items: center; text-align: center; } .site-footer--extended .footer-column--contact .footer-icons{ justify-content: center; } .footer-column--contact .footer-cookie-link{ text-align: center; } .footer-column--contact .footer-contact{ align-items: center; } /* ========================================= REVIEWS – HORIZONTAAL SCROLLEND ========================================= */ .reviews-strip{ padding: 34px 0 0; overflow: hidden; } .reviews-strip__head{ text-align: center; max-width: 74ch; margin: 0 auto 30px; } .reviews-strip__kicker{ margin: 0 0 10px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .reviews-strip__head h2{ font-size: 34px; margin: 0 0 10px; } .reviews-strip__lead{ margin: 0 auto; max-width: 64ch; color: var(--muted); } .reviews-marquee{ position: relative; width: 100%; overflow: hidden; padding: 16px 0 20px; } .reviews-marquee::before, .reviews-marquee::after{ content: ""; position: absolute; top: 0; bottom: 0; width: 72px; z-index: 2; pointer-events: none; } .reviews-marquee::before{ left: 0; background: linear-gradient(90deg, var(--bg) 0%, rgba(243,234,230,0) 100%); } .reviews-marquee::after{ right: 0; background: linear-gradient(270deg, var(--bg) 0%, rgba(243,234,230,0) 100%); } .reviews-marquee__track{ display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: 22px; width: max-content; min-width: max-content; animation: reviews-scroll 120s linear infinite; will-change: transform; } .reviews-marquee:hover .reviews-marquee__track{ animation-play-state: paused; } .review-card{ flex: 0 0 480px; width: 480px; max-width: 480px; display: block; } .review-card__inner{ min-height: 360px; height: 100%; padding: 28px 26px 22px; border-radius: 22px; background: rgba(255,255,255,.60); border: 1px solid rgba(208,193,178,.45); box-shadow: 0 18px 50px rgba(107,75,55,.08); display: grid; grid-template-rows: 32px 1fr 36px; justify-items: center; text-align: center; } .review-card__stars{ height: 32px; display: flex; align-items: center; justify-content: center; font-size: 16px; letter-spacing: 3px; color: var(--accent); } .review-card__text{ margin: 0; max-width: 42ch; font-size: 15px; line-height: 1.65; color: var(--text); } .review-card__author{ align-self: end; margin: 0; font-family: var(--font-serif); font-size: 18px; color: var(--accent); } @keyframes reviews-scroll{ from{ transform: translateX(0); } to{ transform: translateX(calc(-50% - 11px)); } } @media (max-width: 900px){ .reviews-strip__head h2{ font-size: 28px; } .review-card{ flex: 0 0 84vw; width: 84vw; max-width: 84vw; } .review-card__inner{ min-height: auto; } .review-card__text{ max-width: 32ch; } .reviews-marquee::before, .reviews-marquee::after{ width: 28px; } } @media (prefers-reduced-motion: reduce){ .reviews-marquee__track{ animation: none; } .reviews-marquee{ overflow-x: auto; } } /* ========================================= E-BOOK ========================================= */ .ebook-section{ padding: 72px 0; position: relative; } .ebook-section__grid{ display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 34px; align-items: center; background: rgba(255,255,255,.55); border: 1px solid rgba(208,193,178,.45); border-radius: 26px; box-shadow: var(--shadow-soft); padding: 28px; } .ebook-section__media{ display: flex; justify-content: center; } .ebook-section__copy{ text-align: left; max-width: 560px; } .ebook-section__copy h2{ font-size: clamp(28px, 3vw, 42px); line-height: 1.12; margin: 0 0 14px; } .ebook-section__actions{ margin-top: 20px; } /* COVER */ .ebook-cover{ width: min(320px, 100%); aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; border: 1px solid rgba(208,193,178,.55); box-shadow: 0 20px 50px rgba(107,75,55,.12); background: rgba(255,255,255,.4); display: block; margin: 0 auto; } .ebook-cover--large{ width: min(380px, 100%); } .ebook-cover img{ width: 100%; height: 100%; object-fit: cover; display: block; } /* LIJST */ .ebook-points{ margin: 18px 0 0; padding-left: 18px; } .ebook-points li{ margin-bottom: 10px; color: var(--text); } /* ========================================= EBOOK PAGINA ========================================= */ .ebook-page{ overflow: hidden; } .ebook-hero{ padding: 96px 0 42px; } .ebook-hero__grid{ display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 40px; align-items: center; } /* MEDIA FIX (BELANGRIJK) */ .ebook-hero__media{ display: flex; justify-content: center; } /* COPY */ .ebook-hero__copy{ max-width: 620px; } .ebook-hero__copy h1{ font-size: clamp(34px, 4vw, 54px); line-height: 1.08; margin: 0 0 14px; } .ebook-hero__lead{ font-size: 18px; color: var(--muted); margin: 0 0 18px; } .ebook-points--hero{ margin-top: 10px; } /* ========================================= FORM ========================================= */ .ebook-form-section{ padding: 24px 0 90px; } .ebook-form-card{ max-width: 860px; margin: 0 auto; padding: 34px 30px; border-radius: 26px; background: rgba(255,255,255,.58); border: 1px solid rgba(208,193,178,.45); box-shadow: var(--shadow-soft); } .ebook-form-card__intro{ text-align: center; max-width: 64ch; margin: 0 auto 24px; } .ebook-form-card__intro h2{ font-size: 34px; margin: 0 0 10px; } .ebook-form{ max-width: 680px; margin: 0 auto; } .ebook-form__grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .form-field--full{ grid-column: 1 / -1; } .ebook-check{ display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.6; color: var(--text); } .ebook-check input{ margin-top: 4px; } .ebook-form__legal{ margin: 18px 0 22px; font-size: 14px; color: var(--muted); line-height: 1.7; } .ebook-form__legal a{ color: var(--text); } .ebook-download-box{ margin-top: 28px; padding: 22px 24px; text-align: center; border-radius: 22px; background: rgba(243,234,230,.45); border: 1px solid rgba(208,193,178,.45); } .ebook-download-box h3{ margin: 0 0 10px; font-size: 24px; } .ebook-download-box p{ margin-bottom: 16px; } /* ========================================= RESPONSIVE ========================================= */ @media (max-width: 900px){ .ebook-section__grid, .ebook-hero__grid, .ebook-form__grid{ grid-template-columns: 1fr; } .ebook-section__copy, .ebook-hero__copy{ text-align: center; margin: 0 auto; } .ebook-section__actions{ display: flex; justify-content: center; } .ebook-hero__media{ justify-content: center; } .ebook-cover{ margin: 0 auto; } .ebook-form-card{ padding: 28px 20px; } } /* ========================================= PROMO POPUP ========================================= */ .promo-popup[hidden]{ display: none !important; } .promo-popup{ position: fixed; inset: 0; z-index: 140; } .promo-popup__backdrop{ position: absolute; inset: 0; background: rgba(63, 44, 33, .42); backdrop-filter: blur(6px); } .promo-popup__panel{ position: relative; width: min(560px, calc(100% - 32px)); margin: min(8vh, 60px) auto 0; background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(243,234,230,.96)); border: 1px solid rgba(208,193,178,.65); border-radius: 28px; box-shadow: 0 30px 80px rgba(107,75,55,.18); overflow: hidden; } .promo-popup__panel::before{ content: ""; position: absolute; inset: -90px -80px auto auto; width: 260px; height: 260px; background: radial-gradient( circle at 35% 35%, rgba(152,96,72,.20), rgba(176,150,126,.10), rgba(255,255,255,0) 70% ); pointer-events: none; } .promo-popup__panel::after{ content: ""; position: absolute; left: -60px; bottom: -90px; width: 240px; height: 240px; background: radial-gradient( circle at 50% 50%, rgba(152,96,72,.10), rgba(255,255,255,0) 72% ); pointer-events: none; } .promo-popup__inner{ position: relative; z-index: 1; padding: 34px 28px 28px; text-align: center; } .promo-popup__close{ position: absolute; top: 14px; right: 14px; z-index: 2; width: 42px; height: 42px; border: 1px solid rgba(208,193,178,.65); border-radius: 999px; background: rgba(255,255,255,.9); color: var(--text); font-size: 24px; line-height: 1; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease; } .promo-popup__close:hover{ transform: translateY(-1px); box-shadow: 0 12px 28px rgba(107,75,55,.14); } .promo-popup__eyebrow{ margin: 0 0 10px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .promo-popup__title{ font-size: clamp(30px, 4vw, 42px); line-height: 1.08; margin: 0 0 14px; } .promo-popup__text{ max-width: 34ch; margin: 0 auto 20px; color: var(--text); } .promo-popup__code-wrap{ max-width: 340px; margin: 0 auto 18px; padding: 16px; border-radius: 20px; background: rgba(255,255,255,.72); border: 1px solid rgba(208,193,178,.55); box-shadow: 0 18px 40px rgba(107,75,55,.08); } .promo-popup__code-label{ display: block; margin-bottom: 8px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .promo-popup__code-row{ display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; } .promo-popup__code{ display: inline-flex; align-items: center; justify-content: center; min-width: 120px; padding: 12px 18px; border-radius: 999px; background: var(--accent); color: #fff; font-family: var(--font-serif); font-size: 22px; letter-spacing: .08em; } .promo-popup__note{ margin: 0 auto 20px; max-width: 38ch; color: var(--muted); font-size: 14px; } .promo-popup__actions{ display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; } body.has-promo-popup{ overflow: hidden; } @media (max-width: 640px){ .promo-popup__inner{ padding: 30px 18px 22px; } .promo-popup__panel{ width: min(100% - 20px, 560px); margin-top: 24px; } .promo-popup__title{ font-size: clamp(26px, 7vw, 34px); } .promo-popup__code-row{ flex-direction: column; } .promo-popup__code{ width: 100%; } .promo-popup__actions{ flex-direction: column; } .promo-popup__actions .button{ width: 100%; } } /* ========================================= SESSIES OVERZICHTSPAGINA ========================================= */ .sessions-page{ overflow: hidden; } .sessions-page .container{ width: min(var(--container), calc(100% - 40px)); margin: 0 auto; } .sessions-page a{ color: inherit; text-decoration: none; } .sessions-page a:hover{ text-decoration: none; } .sessions-page h1, .sessions-page h2, .sessions-page h3{ font-family: var(--font-serif); letter-spacing: -.01em; } .sessions-page p{ line-height: 1.7; } /* ========================================= HERO ========================================= */ .sessions-hero{ padding: 96px 0 44px; position: relative; } .sessions-hero__inner{ max-width: 80ch; margin: 0 auto; text-align: center; } .sessions-hero__kicker{ margin: 0 0 10px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .sessions-hero h1{ font-size: clamp(34px, 4vw, 54px); line-height: 1.08; margin: 0 0 14px; } .sessions-hero__lead{ max-width: 70ch; margin: 0 auto; color: var(--muted); font-size: 18px; } /* ========================================= SNEL OVERZICHT ========================================= */ .sessions-overview{ padding: 24px 0 72px; } .sessions-overview__grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; } .sessions-jump-card{ display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px 16px 22px; border-radius: 22px; background: rgba(255,255,255,.55); border: 1px solid rgba(208,193,178,.45); box-shadow: 0 18px 50px rgba(107,75,55,.08); transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; } .sessions-jump-card:hover{ transform: translateY(-6px); box-shadow: 0 28px 60px rgba(107,75,55,.12); border-color: rgba(152,96,72,.35); } .sessions-jump-card__media{ width: 100%; max-width: 210px; margin: 0 auto 14px; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 999px 999px 24px 24px; border: 1px solid rgba(208,193,178,.55); box-shadow: 0 16px 40px rgba(107,75,55,.08); background: rgba(255,255,255,.4); } .sessions-jump-card__media img{ width: 100%; height: 100%; object-fit: cover; display: block; } .sessions-jump-card h2{ font-size: 22px; line-height: 1.18; margin: 8px 0 8px; } .sessions-jump-card p{ margin: 0; color: var(--muted); max-width: 26ch; } /* ========================================= DETAIL BLOKKEN ========================================= */ .sessions-detail{ padding: 8px 0 88px; } .session-block{ display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; padding: 80px 0; border-top: 1px solid rgba(208,193,178,.45); } .session-block:first-child{ border-top: none; } .session-block--reverse .session-block__media{ order: 2; } .session-block__media{ display: flex; justify-content: center; } .session-block__frame{ width: min(460px, 100%); aspect-ratio: 4 / 5; overflow: hidden; border-radius: 26px; border: 1px solid rgba(208,193,178,.55); box-shadow: 0 18px 50px rgba(107,75,55,.10); background: rgba(255,255,255,.4); } .session-block__frame img{ width: 100%; height: 100%; object-fit: cover; display: block; } .session-block__copy{ max-width: 560px; margin: 0 auto; text-align: left; } .session-block__kicker{ margin: 0 0 10px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .session-block__copy h2{ font-size: 36px; line-height: 1.14; margin: 0 0 14px; } .session-block__copy p{ margin: 0 0 14px; color: var(--text); } .session-block__list{ margin: 0 0 22px; padding-left: 18px; } .session-block__list li{ margin: 0 0 8px; color: var(--text); } .session-block__actions{ display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 18px; } /* ========================================= CTA ========================================= */ .sessions-cta{ padding: 0 0 100px; } .sessions-cta__card{ max-width: 860px; margin: 0 auto; text-align: center; padding: 42px 30px; border-radius: var(--radius-lg); background: rgba(255,255,255,.55); border: 1px solid rgba(208,193,178,.45); box-shadow: var(--shadow-soft); } .sessions-cta__kicker{ margin: 0 0 10px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .sessions-cta__card h2{ font-size: 34px; line-height: 1.16; margin: 0 0 12px; } .sessions-cta__card p{ max-width: 64ch; margin-left: auto; margin-right: auto; } /* ========================================= RESPONSIVE ========================================= */ @media (max-width: 900px){ .sessions-hero{ padding: 72px 0 34px; } .sessions-overview{ padding: 20px 0 56px; } .sessions-overview__grid{ grid-template-columns: 1fr; } .session-block{ grid-template-columns: 1fr; gap: 30px; padding: 56px 0; } .session-block--reverse .session-block__media{ order: 0; } .session-block__copy{ text-align: center; } .session-block__copy h2{ font-size: 32px; } .session-block__list{ display: inline-block; text-align: left; margin-left: auto; margin-right: auto; } .session-block__actions{ justify-content: center; } .sessions-cta__card{ padding: 34px 22px; } .sessions-cta__card h2{ font-size: 30px; } }