/* ========================================================================= Silk & Seduction — Design System v2 "Quiet luxury" / refined editorial minimalism. Deliberately restrained: the accent colour appears only in small, controlled doses (labels, a hairline rule, a hover state) — never as a gradient, a badge fill or a glowing background blob. Contrast comes from type scale and whitespace, not decoration. System fonts only (perf + privacy: zero font requests). ========================================================================= */ :root { color-scheme: dark; /* Surfaces — warm near-black, not blue-black */ --ink: #0c0b09; --ink-1: #14130f; --ink-2: #1c1a15; --border: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.16); /* Inverted ("paper") surface — used sparingly for one deliberate pause per page */ --paper: #eee8da; --paper-dim: #e2dcc9; --on-paper: #16140f; --on-paper-muted: #5b5648; /* Ink */ --text-primary: #f2eee4; --text-secondary: #aca69a; --text-muted: #837d71; /* lightened from #726d62 — original failed WCAG AA (3.82:1) for the small labels/captions it's used on; this hits 4.81:1 */ /* Accent — muted, desaturated brass. Reserved for labels, hairlines, hover states and the focus ring. Never a fill, never a gradient. */ --accent: #a5875a; --accent-dim: #7c6a4c; /* Status ink (text-only, no badge fills) */ --good-ink: #7c9a7c; /* Type */ --font-display: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif; --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --container: 1180px; --ease: cubic-bezier(.16,.8,.24,1); } /* ---------- reset ---------- */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--ink); color: var(--text-secondary); font-family: var(--font-body); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; animation: page-fade-in .6s var(--ease) both; /* quiet entrance on every load, no JS dependency */ } @keyframes page-fade-in { from { opacity: 0; } to { opacity: 1; } } img, picture, svg { max-width: 100%; display: block; } a { color: var(--text-primary); text-decoration: none; } a:not([class]) { color: var(--text-primary); border-bottom: 1px solid var(--border-strong); transition: border-color .3s var(--ease), color .3s var(--ease); } a:not([class]):hover { border-color: var(--accent); color: var(--accent); } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text-primary); font-weight: 400; line-height: 1.12; margin: 0 0 .5em 0; letter-spacing: -0.01em; } h1 { font-size: clamp(2.6rem, 6vw, 5rem); letter-spacing: -0.025em; } h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); letter-spacing: -0.02em; } h3 { font-size: 1.3rem; } h4 { font-size: 1.02rem; font-family: var(--font-body); font-weight: 600; letter-spacing: 0; } p { margin: 0 0 1em 0; max-width: 62ch; } ul, ol { padding-left: 1.2em; } button { font-family: inherit; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ---------- scroll reveal (progressive enhancement — see js-anim on ) ---------- */ html.js-anim [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); } html.js-anim [data-reveal].is-visible { opacity: 1; transform: none; } html.js-anim [data-reveal-group] > * { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); } html.js-anim [data-reveal-group].is-visible > * { opacity: 1; transform: none; } html.js-anim [data-reveal-group].is-visible > *:nth-child(2) { transition-delay: .08s; } html.js-anim [data-reveal-group].is-visible > *:nth-child(3) { transition-delay: .16s; } html.js-anim [data-reveal-group].is-visible > *:nth-child(4) { transition-delay: .24s; } html.js-anim [data-reveal-group].is-visible > *:nth-child(5) { transition-delay: .32s; } html.js-anim [data-reveal-group].is-visible > *:nth-child(6) { transition-delay: .4s; } /* ---------- focus & accessibility ---------- */ :focus-visible { outline: 1.5px solid var(--accent); outline-offset: 3px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--paper); color: var(--on-paper); padding: 10px 16px; font-weight: 600; } .skip-link:focus { left: 0; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } /* ---------- layout helpers ---------- */ .container { max-width: var(--container); margin: 0 auto; padding: 0 24px; } .container-wide { max-width: 1360px; margin: 0 auto; padding: 0 24px; } .section { padding: 108px 0; } .section-sm { padding: 64px 0; } .section-tight { padding: 48px 0; } /* Desktop section padding is tuned for a wide viewport with lots of horizontal breathing room; carried straight onto a narrow phone it reads as oversized gaps chopping the page into disconnected chunks. Scale all three down together so the ratio between them stays the same, just compressed. */ @media (max-width: 640px) { .section { padding: 64px 0; } .section-sm { padding: 48px 0; } .section-tight { padding: 36px 0; } } .grid { display: grid; gap: 28px; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } } /* Card grids (profiles, etc.) stay 2-up on phones instead of stacking to a single column — a long single-column list of large cards is slower to scan and forces far more scrolling than a compact 2-column layout most visitors already expect from directory/listing apps. Text-pair grids (.grid-2: photo+bio, form+info) stay single-column above, since those hold full sentences that need the width. */ @media (max-width: 640px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); gap: 14px; } } .center { text-align: center; margin-left: auto; margin-right: auto; } .tracked { font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--accent); margin-bottom: 20px; } .eyebrow { font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; } .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--accent-dim); display: inline-block; } .lede { color: var(--text-secondary); font-size: 1.12rem; max-width: 560px; line-height: 1.7; } .divider { border: none; border-top: 1px solid var(--border); margin: 0; } .rule { width: 100%; height: 1px; background: var(--border); border: none; margin: 0; } /* ---------- buttons — no gradients, no gold pills ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 30px; font-weight: 600; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; border: 1px solid transparent; cursor: pointer; line-height: 1; border-radius: 3px; transition: opacity .35s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease), color .35s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease); white-space: nowrap; } .btn-gold { background: var(--paper); color: var(--on-paper); } /* primary: inverted paper fill */ .btn-gold:hover { opacity: .88; transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(0,0,0,.45); } .btn-ghost { background: transparent; color: var(--text-primary); border-color: var(--border-strong); } .btn-ghost:hover { border-color: var(--text-primary); transform: translateY(-2px); } .btn:active { transform: translateY(0) scale(.97); box-shadow: none; } .btn-block { width: 100%; } .btn-lg { padding: 18px 34px; font-size: 13px; } .btn[disabled] { opacity: .5; cursor: not-allowed; } @media (max-width: 480px) { /* longer button labels (e.g. "Stuur een vrijblijvend bericht") can't stay on one line at phone widths without forcing horizontal scroll */ .btn { white-space: normal; text-align: center; max-width: 100%; } } /* ---------- top nav ---------- */ .topbar { position: sticky; top: 0; z-index: 60; background: rgba(12,11,9,0.94); border-bottom: 1px solid var(--border); } .topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 84px; } .topbar .container { max-width: 1340px; } /* extra room for longer brand names next to the full nav */ .brand { display: flex; align-items: baseline; gap: 0; color: var(--text-primary); font-family: var(--font-display); font-size: 1.2rem; letter-spacing: .04em; white-space: nowrap; flex-shrink: 0; } .brand:hover { color: var(--text-primary); } .nav-links { display: flex; align-items: center; gap: 20px; } .nav-links a { color: var(--text-secondary); font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; font-weight: 600; position: relative; padding: 6px 0; white-space: nowrap; } .nav-links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--text-primary); transition: right .35s var(--ease); } .nav-links a:hover::after, .nav-links a.active::after, .nav-links a[aria-current="page"]::after { right: 0; } .nav-links a.active, .nav-links a[aria-current="page"] { color: var(--text-primary); } .nav-links a:hover { color: var(--text-primary); } .nav-cta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .nav-toggle { display: none; background: none; border: none; width: 40px; height: 40px; align-items: center; justify-content: center; color: var(--text-primary); } @media (max-width: 1200px) { .nav-links { position: fixed; inset: 84px 0 0 0; background: var(--ink); flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 36px 24px; gap: 4px; transform: translateX(100%); transition: transform .4s var(--ease); overflow-y: auto; } .nav-links.open { transform: translateX(0); } .nav-links a { width: 100%; padding: 18px 2px; border-bottom: 1px solid var(--border); font-size: 15px; } .nav-links a::after { display: none; } .nav-toggle { display: flex; } .nav-cta .btn-ghost { display: none; } } @media (max-width: 420px) { /* On common phone widths (360–414px) the brand name and the remaining WhatsApp + menu-toggle controls were touching with zero gap — trim both sides rather than let them collide. */ .brand { font-size: 1.02rem; flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .nav-cta { gap: 8px; } .nav-cta .btn-gold { padding: 13px 16px; font-size: 11px; letter-spacing: .08em; } } /* ---------- hero — editorial, no glow blobs, no card ---------- */ .hero { padding: 76px 0 0; } .hero-top { max-width: 900px; } .hero h1 { margin-bottom: 28px; } .hero-actions { display: flex; gap: 18px; margin-top: 38px; flex-wrap: wrap; align-items: center; } .hero-actions .textlink { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--text-primary); border-bottom: 1px solid var(--border-strong); padding-bottom: 6px; transition: border-color .3s var(--ease); } .hero-actions .textlink:hover { border-color: var(--accent); color: var(--accent); } .fact-strip { display: flex; margin-top: 88px; border-top: 1px solid var(--border); } .fact { flex: 1; padding: 26px 28px 0 0; border-right: 1px solid var(--border); } .fact:last-child { border-right: none; padding-right: 0; } .fact b { display: block; font-family: var(--font-display); font-size: clamp(1.5rem,2.6vw,2.1rem); color: var(--text-primary); font-weight: 400; margin-bottom: 6px; } .fact span { font-size: 12px; color: var(--text-muted); letter-spacing: .04em; } /* Stays a horizontal row of 3 stats on phones too — three short numbers with one-line labels are a classic "trust bar" pattern (compare any app store listing's rating/downloads/age row) and stacking them stretches a glanceable strip into a tall block that pushes real content further down the page. */ @media (max-width: 780px) { .fact-strip { margin-top: 48px; } .fact { padding: 14px 8px 0 0; } .fact b { font-size: clamp(1.05rem, 5.6vw, 1.5rem); margin-bottom: 3px; } .fact span { font-size: 10px; line-height: 1.3; display: block; } } @media (max-width: 360px) { .fact { padding-right: 5px; } .fact b { font-size: 1rem; } .fact span { font-size: 9px; } } /* ---------- editorial index list (replaces icon-badge cards) ---------- */ .index-list { border-top: 1px solid var(--border); } .index-row { display: grid; grid-template-columns: 90px 1fr; gap: 30px; padding: 40px 0; border-bottom: 1px solid var(--border); } .index-row .num { font-family: var(--font-display); font-size: 1.4rem; color: var(--text-muted); } /* On a narrow phone, a run of near-identical stacked text rows (number, heading, paragraph) with no color or imagery reads as one undifferentiated wall of text. Coloring just the number — already reserved by the design system for labels/ hairlines/hover-states, never a fill — gives each row a distinct anchor the eye can land on without adding an icon or a card, which the system deliberately avoids. */ @media (max-width: 640px) { .index-row .num { color: var(--accent); } } .index-row h3 { margin-bottom: 10px; } .index-row p { color: var(--text-secondary); max-width: 46ch; margin: 0; } @media (max-width: 640px) { .index-row { grid-template-columns: 1fr; gap: 10px; padding: 26px 0; } } /* ---------- profile grid (aanbod) — lookbook style, no badge chips ---------- */ .profile-card { display: flex; flex-direction: column; transition: transform .35s var(--ease); } .profile-card:hover, .profile-card:focus-within, html.js-anim [data-reveal-group].is-visible > .profile-card:hover, html.js-anim [data-reveal-group].is-visible > .profile-card:focus-within { transform: translateY(-4px); } .profile-media { position: relative; aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center; overflow: hidden; } .profile-media::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(165deg, var(--ink-2), var(--ink-1)); transition: transform .6s var(--ease), filter .6s var(--ease); } .profile-card:hover .profile-media::before, .profile-media:focus-visible::before { transform: scale(1.08); filter: brightness(1.15); } .profile-media .initial { position: relative; z-index: 1; font-family: var(--font-display); font-size: 3.6rem; color: var(--text-muted); font-weight: 400; transition: transform .5s var(--ease); } .profile-card:hover .profile-media .initial, .profile-media:focus-visible .initial { transform: scale(1.05); } .profile-media .placeholder-note { position: absolute; z-index: 1; bottom: 0; left: 0; right: 0; font-size: 10px; letter-spacing: .04em; color: var(--text-muted); background: rgba(12,11,9,0.75); padding: 7px 10px; text-align: center; } .verified-mark { position: absolute; z-index: 1; top: 14px; left: 14px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-primary); background: rgba(12,11,9,0.55); padding: 6px 10px; font-weight: 600; } .profile-body { padding: 20px 2px 0; display: flex; flex-direction: column; gap: 6px; flex: 1; } .profile-body .name-row { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--border); padding-bottom: 12px; margin-bottom: 4px; } .profile-body h3 { margin: 0; font-size: 1.15rem; } .profile-body .loc { font-size: 11.5px; color: var(--text-muted); letter-spacing: .06em; text-transform: uppercase; } .tag-row { font-size: 12.5px; color: var(--text-muted); margin: 2px 0 8px; } .tag-row .sep { margin: 0 7px; opacity: .5; } .profile-body .cta-row { margin-top: auto; padding-top: 14px; } .profile-body .cta-row a.textlink { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--text-primary); border-bottom: 1px solid var(--border-strong); padding-bottom: 5px; } .profile-body .cta-row a.textlink:hover { border-color: var(--accent); color: var(--accent); } /* Compact 2-up card layout on phones: smaller type, tighter spacing, name and location stacked instead of side-by-side (not enough width for both on one line at ~150px card width), and the bio line clamped to 2 lines so cards in the same row stay roughly the same height instead of one running on. */ @media (max-width: 640px) { .profile-media .initial { font-size: 2.4rem; } .profile-media .placeholder-note { font-size: 8.5px; padding: 5px 6px; line-height: 1.35; } .verified-mark { top: 8px; left: 8px; font-size: 8.5px; letter-spacing: .08em; padding: 4px 7px; } .profile-body { padding: 12px 1px 0; gap: 4px; } .profile-body .name-row { flex-direction: column; align-items: flex-start; gap: 2px; padding-bottom: 8px; margin-bottom: 2px; } .profile-body h3 { font-size: 0.98rem; } .profile-body .loc { font-size: 9.5px; } .tag-row { font-size: 10.5px; margin: 0 0 2px; } .profile-body p { font-size: 12px !important; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .profile-body .cta-row { padding-top: 8px; } .profile-body .cta-row a.textlink { font-size: 9.5px; } } /* ---------- homepage "featured profiles" — swipeable carousel below desktop ---------- */ /* Below the desktop breakpoint the 3 featured cards no longer fit side by side at a comfortable size, so instead of stacking/wrapping them we turn the row into a horizontally swipeable, snap-to-card carousel. Each card is sized so the next one visibly "peeks" in from the edge — that partial edge is the standard visual cue that there's more to swipe to, reinforced on first view by a brief auto-nudge (see initProfileCarouselHint in main.js). At desktop width the section reverts to the plain static 3-column grid it always was. */ @media (max-width: 980px) { .profile-carousel { display: flex; grid-template-columns: none; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin: 0 -24px; padding: 0 24px 8px; scroll-padding-left: 24px; /* without this, scroll-snap silently starts the container pre-scrolled by exactly the left padding, eating the inset so the first card sits flush against the screen edge */ scrollbar-width: none; } .profile-carousel::-webkit-scrollbar { display: none; } .profile-carousel > .profile-card { scroll-snap-align: start; flex: 0 0 auto; width: 72%; max-width: 280px; } } @media (min-width: 641px) and (max-width: 980px) { .profile-carousel > .profile-card { width: 44%; max-width: 320px; } } /* ---------- testimonials / quote ---------- */ .quote-card { padding: 0; } .quote-card .mark-quote { font-family: var(--font-display); font-size: 3.4rem; color: var(--accent-dim); line-height: .5; display: block; margin-bottom: 6px; } .quote-card p { font-family: var(--font-display); color: var(--text-primary); font-size: 1.2rem; line-height: 1.5; font-style: normal; } .quote-card .who { color: var(--text-muted); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; margin-top: 14px; } /* ---------- FAQ accordion ---------- */ .faq-item { border-bottom: 1px solid var(--border); } .faq-q { width: 100%; text-align: left; background: none; border: none; color: var(--text-primary); font-size: 1.08rem; font-family: var(--font-display); padding: 26px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; cursor: pointer; } .faq-q .plus { flex-shrink: 0; width: 20px; height: 20px; position: relative; } .faq-q .plus::before, .faq-q .plus::after { content: ""; position: absolute; background: var(--text-primary); } .faq-q .plus::before { width: 100%; height: 1px; top: 50%; left: 0; transform: translateY(-50%); } .faq-q .plus::after { width: 1px; height: 100%; left: 50%; top: 0; transform: translateX(-50%); transition: transform .25s var(--ease); } .faq-item[open] .plus::after { transform: translateX(-50%) rotate(90deg); opacity: 0; } .faq-a { padding: 0 0 26px 0; color: var(--text-secondary); max-width: 64ch; } /* ---------- forms ---------- */ label { display: block; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; font-weight: 600; } input, textarea, select { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--border-strong); color: var(--text-primary); padding: 12px 2px; font-size: 16px; font-family: inherit; min-height: 44px; border-radius: 0; } textarea { min-height: 110px; resize: vertical; } input:focus, textarea:focus, select:focus { border-color: var(--accent); } .field { margin-bottom: 26px; } .field-hint { font-size: 12.5px; color: var(--text-muted); margin-top: 8px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } @media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } } .checkbox-row { display: flex; align-items: flex-start; gap: 10px; } .checkbox-row input { width: 18px; height: 18px; min-height: auto; flex-shrink: 0; margin-top: 2px; border: 1px solid var(--border-strong); } .checkbox-row label { margin-bottom: 0; font-weight: 400; color: var(--text-secondary); text-transform: none; letter-spacing: 0; font-size: 14px; } /* ---------- pricing table ---------- */ .price-table { width: 100%; border-collapse: collapse; } .price-table th, .price-table td { padding: 20px 16px; text-align: left; border-bottom: 1px solid var(--border); } .price-table th { color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; } .price-table td { color: var(--text-secondary); font-family: var(--font-display); font-size: 1.02rem; } .price-table td:first-child, .price-table th:first-child { color: var(--text-primary); } .price-note { font-size: 12.5px; color: var(--text-muted); margin-top: 18px; } /* ---------- steps / timeline ---------- */ .steps-h { display: grid; grid-template-columns: repeat(4,1fr); gap: 32px 24px; } .steps-h.steps-h-3 { grid-template-columns: repeat(3,1fr); } @media (max-width: 900px) { .steps-h, .steps-h.steps-h-3 { grid-template-columns: repeat(2,1fr); } } @media (max-width: 560px) { .steps-h, .steps-h.steps-h-3 { grid-template-columns: 1fr; gap: 24px; } } .step-h { position: relative; padding-top: 20px; border-top: 1px solid var(--border); } .step-h .n { font-family: var(--font-display); font-size: 1.5rem; color: var(--text-muted); } @media (max-width: 640px) { .step-h .n { color: var(--accent); } } .step-h h3 { font-size: 1.02rem; font-family: var(--font-body); font-weight: 600; letter-spacing: 0; margin: 10px 0 8px; } .step-h p { font-size: 14px; color: var(--text-secondary); margin: 0; } /* ---------- inverted (paper) section — the one deliberate visual pause ---------- */ .invert { background: var(--paper); color: var(--on-paper-muted); } .invert h1, .invert h2, .invert h3, .invert h4 { color: var(--on-paper); } .invert p, .invert .lede { color: var(--on-paper-muted); } .invert .eyebrow { color: #766548; } /* darkened from --accent-dim — that was 4.27:1 on paper, just under WCAG AA; this hits 4.61:1 */ .invert .eyebrow::before { background: var(--accent-dim); } .invert .divider, .invert .rule { border-color: rgba(20,18,15,0.14); background: rgba(20,18,15,0.14); } .invert .btn-gold { background: var(--on-paper); color: var(--paper); } .invert .btn-ghost { color: var(--on-paper); border-color: rgba(20,18,15,0.3); } .invert .btn-ghost:hover { border-color: var(--on-paper); } .invert .textlink, .invert .profile-body .cta-row a.textlink, .invert .hero-actions .textlink { color: var(--on-paper); border-color: rgba(20,18,15,0.3); } .invert .textlink:hover, .invert .profile-body .cta-row a.textlink:hover, .invert .hero-actions .textlink:hover { color: var(--accent-dim); border-color: var(--accent-dim); } .invert .name-row, .invert .fact, .invert .index-row, .invert .kicker-list li { border-color: rgba(20,18,15,0.14); } .invert .loc, .invert .tag-row, .invert .fact span, .invert .num { color: var(--on-paper-muted); } .invert .verified-mark { color: var(--text-primary); } .invert :focus-visible { outline-color: #766548; } /* default --accent focus ring is only 2.77:1 on paper, under the 3:1 WCAG minimum for UI indicators */ /* ---------- footer ---------- */ footer.site-footer { border-top: 1px solid var(--border); padding: 72px 0 32px; margin-top: 40px; } @media (max-width: 640px) { footer.site-footer { padding: 48px 0 28px; margin-top: 20px; } } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 56px; } .footer-grid > div { min-width: 0; } /* let grid tracks shrink below a column's longest word instead of the whole grid overflowing to fit it */ /* Below desktop the 3 link columns (Navigatie/Informatie/Juridisch) stay side by side at a smaller size instead of stacking into one long column — three short lists read faster scanned across than scrolled through, and the brand block keeps the full row to itself since it's a different kind of content (logo + a sentence of body text, not a short link list). */ @media (max-width: 780px) { .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 28px 20px; } .footer-grid > div:first-child { grid-column: 1 / -1; } /* Narrow columns can be less wide than a single long word (e.g. "Klachtenregeling", or the KVK-nummer placeholder) — allow those to break instead of overflowing the column and the page. hyphens:auto (where the browser has a hyphenation dictionary for the page's lang) breaks at a sensible syllable point rather than an arbitrary spot. */ .footer-grid a, .footer-grid p { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; } } @media (max-width: 480px) { .footer-grid { gap: 20px 12px; margin-bottom: 40px; } /* Even with hyphenation, 3 columns get too narrow for words like "voorwaarden" or "verificatie" to break nicely — drop to 2 so each column keeps enough room; still side by side, not stacked. */ .footer-grid { grid-template-columns: repeat(2, 1fr); } .footer-grid > div:first-child { grid-column: 1 / -1; } .footer-grid h2 { font-size: 9.5px; margin-bottom: 12px; letter-spacing: .08em; } .footer-grid ul { gap: 9px; } .footer-grid a { font-size: 12px; line-height: 1.35; } } .footer-grid h2 { color: var(--text-muted); font-size: 11px; margin-bottom: 18px; font-family: var(--font-body); text-transform: uppercase; letter-spacing: .12em; font-weight: 600; } .footer-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .footer-grid a { color: var(--text-secondary); font-size: 14px; } .footer-grid a:hover { color: var(--text-primary); } .footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 28px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-muted); } .footer-badges { display: flex; gap: 20px; flex-wrap: wrap; font-size: 12px; letter-spacing: .04em; } /* ---------- age gate ---------- */ .age-gate { position: fixed; inset: 0; background: rgba(6,6,5,0.97); z-index: 500; display: flex; align-items: center; justify-content: center; padding: 24px; } .age-gate[hidden] { display: none; } .age-gate-card { max-width: 440px; width: 100%; text-align: center; } .age-gate-card .gate-mark { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: .12em; color: var(--text-muted); margin-bottom: 30px; } .age-gate-actions { display: flex; flex-direction: column; gap: 14px; margin-top: 30px; } .age-gate-fine { font-size: 12px; color: var(--text-muted); margin: 22px auto 0; max-width: 340px; } /* ---------- whatsapp floating cta ---------- */ .wa-float { position: fixed; bottom: 22px; right: 22px; z-index: 400; display: flex; align-items: center; gap: 10px; background: var(--paper); color: var(--on-paper); padding: 15px 22px; font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 14px 34px rgba(0,0,0,0.5); transition: opacity .3s var(--ease), transform .3s var(--ease); } .wa-float:hover { opacity: .85; } .wa-float svg { width: 17px; height: 17px; } @media (max-width: 640px) { .wa-float span { display: none; } .wa-float { padding: 15px; } /* On short phone viewports a persistent fixed button can land on top of whatever the page's initial content happens to end with (a profile's name, a price row, ...). Stay hidden until the visitor has scrolled a little, by which point that initial content has moved out of the way. */ html.js-anim .wa-float { opacity: 0; transform: translateY(12px); pointer-events: none; } html.js-anim .wa-float.wa-visible { opacity: 1; transform: none; pointer-events: auto; } } /* ---------- misc ---------- */ .kicker-list { display: flex; flex-direction: column; gap: 0; } .kicker-list li { display: flex; gap: 16px; align-items: flex-start; list-style: none; padding: 16px 0; border-bottom: 1px solid var(--border); } .kicker-list .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); margin-top: 9px; flex-shrink: 0; } .page-hero { padding: 64px 0 48px; border-bottom: 1px solid var(--border); } .table-wrap { overflow-x: auto; } .pill-list { display: flex; gap: 28px; flex-wrap: wrap; } .pill { font-size: 12.5px; letter-spacing: .04em; color: var(--text-secondary); } .legal-content h2 { margin-top: 2.2em; font-size: 1.5rem; } .legal-content h3 { margin-top: 1.6em; } .legal-content p, .legal-content li { color: var(--text-secondary); } .legal-content { max-width: 720px; } .back-top { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; } .profile-media-detail { aspect-ratio: 3 / 4; } @media (max-width: 640px) { /* A tall 3:4 portrait plus the sticky header left just enough content height on phones for the stats line (age/height/languages) to land directly under the fixed WhatsApp button — shortening the photo here gives it clearance. */ .profile-media-detail { aspect-ratio: 1 / 1; } } /* ---------- disclaimer / note box (template placeholders etc.) ---------- */ .note { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 22px 0; font-size: 13.5px; color: var(--text-secondary); } .note strong { color: var(--text-primary); } /* ---------- plain content column (replaces boxed icon cards) ---------- */ .col-block .eyebrow { margin-bottom: 14px; } /* simple two-col text block (about page etc.) */ .text-block { max-width: 680px; } .text-block h2 { margin-top: 2.4rem; } .text-block h2:first-child { margin-top: 0; }