:root { /* BASISVARIABELEN Kies een palette in index.html via: Beschikbare palettes: - terragroen (default) - salie-klei - mos-zand - eucalyptus-terracotta */ --bg: #f4f1eb; --surface: #fcfbf8; --surface-alt: #e9ebe4; --text: #2f342f; --muted: #5e655e; --primary: #b25b3f; --primary-strong: #8f4630; --ring: rgba(141, 94, 79, 0.28); --shadow: 0 16px 35px rgba(56, 67, 58, 0.14); --bg-glow: #ece7dc; --radius: 18px; --radius-sm: 12px; --container: 1100px; } /* Palette 1: Terracotta + groen/grijs (default) */ :root[data-theme="terragroen"] { --bg: #f4f1eb; --surface: #fcfbf8; --surface-alt: #e9ebe4; --text: #2f342f; --muted: #5e655e; --primary: #b25b3f; --primary-strong: #8f4630; --ring: rgba(141, 94, 79, 0.28); --shadow: 0 16px 35px rgba(56, 67, 58, 0.14); --bg-glow: #ece7dc; } /* Palette 2: Salie + klei */ :root[data-theme="salie-klei"] { --bg: #f2f0ea; --surface: #fcfaf6; --surface-alt: #e5e9de; --text: #323731; --muted: #646c63; --primary: #b3684a; --primary-strong: #8f5039; --ring: rgba(129, 151, 126, 0.3); --shadow: 0 16px 35px rgba(69, 84, 70, 0.14); --bg-glow: #e4e0d2; } /* Palette 3: Mos + zand */ :root[data-theme="mos-zand"] { --bg: #f0eee6; --surface: #fbfaf5; --surface-alt: #e2e5d7; --text: #2e352d; --muted: #5f6659; --primary: #a85b3a; --primary-strong: #84462f; --ring: rgba(104, 124, 96, 0.3); --shadow: 0 16px 35px rgba(61, 78, 55, 0.14); --bg-glow: #e8e2d3; } /* Palette 4: Eucalyptus + terracotta zacht */ :root[data-theme="eucalyptus-terracotta"] { --bg: #eef1ec; --surface: #fafcf8; --surface-alt: #e2e8df; --text: #2c3430; --muted: #5b6760; --primary: #ba6b4d; --primary-strong: #96533b; --ring: rgba(111, 137, 121, 0.3); --shadow: 0 16px 35px rgba(55, 76, 63, 0.14); --bg-glow: #dde4d7; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--text); background: radial-gradient(circle at top left, var(--bg-glow) 0%, var(--bg) 55%); line-height: 1.6; } img { max-width: 100%; display: block; } a { color: var(--primary-strong); font-weight: 600; text-decoration-color: color-mix(in srgb, var(--primary-strong) 55%, transparent); text-underline-offset: 0.18em; text-decoration-thickness: 1.5px; transition: color 120ms ease, text-decoration-color 120ms ease; } a:hover { color: var(--primary); text-decoration-color: var(--primary); } .container { width: min(var(--container), 92vw); margin-inline: auto; } .narrow { width: min(720px, 92vw); } .hero { padding: 3rem 0 2rem; } .hero__grid { display: grid; gap: 2rem; align-items: start; } .eyebrow { margin: 0 0 0.5rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--primary-strong); } h1, h2, h3 { line-height: 1.2; } h1 { margin: 0; font-size: clamp(1.8rem, 4vw, 3rem); } h2 { margin-top: 0; font-size: clamp(1.4rem, 3vw, 2rem); } .lead { color: var(--muted); max-width: 56ch; } .countdown-card { margin-top: 1.5rem; padding: 1rem; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); } .time-grid { display: grid; grid-template-columns: repeat(2, minmax(90px, 1fr)); gap: 0.75rem; } .time-item { background: var(--surface-alt); border-radius: var(--radius-sm); padding: 0.8rem; text-align: center; } .time-item span { display: block; font-weight: 800; font-size: clamp(1.4rem, 3vw, 2rem); } .time-item small { color: var(--muted); } .countdown-note { margin: 0.75rem 0 0; color: var(--muted); font-size: 0.92rem; } .hero__image-wrap { position: relative; } .hero__image { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); object-fit: cover; object-position: top center; max-height: 520px; } .image-note { margin: 0.75rem 0 0; color: var(--muted); font-size: 0.9rem; } .button { appearance: none; border: none; background: var(--primary); color: white; padding: 0.75rem 1rem; border-radius: 999px; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; transition: transform 120ms ease, background-color 120ms ease; } .button:hover { transform: translateY(-1px); background: var(--primary-strong); } .button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; } .button--ghost { margin-top: 1rem; } .section { padding: 3rem 0; } .section--alt { background: var(--surface-alt); } .access { border-top: 1px solid #e7dfd4; border-bottom: 1px solid #e7dfd4; } .access-form { margin-top: 1rem; } .input-row { display: flex; gap: 0.75rem; flex-wrap: wrap; } input[type="password"], input[type="text"], input[type="email"], input[type="number"], select, textarea { flex: 1; padding: 0.75rem 0.9rem; border-radius: 12px; border: 1px solid #ccc1b4; font: inherit; background: var(--surface); color: var(--text); } input[type="password"] { min-width: 220px; } textarea { width: 100%; resize: vertical; } .rsvp-form { margin-top: 1rem; display: grid; gap: 0.9rem; } .rsvp-form label { display: inline-block; margin-bottom: 0.35rem; font-weight: 600; } .form-grid { display: grid; gap: 0.75rem; } .rsvp-form .button { justify-self: start; } .feedback { min-height: 1.4em; margin-top: 0.5rem; font-weight: 600; } .feedback--ok { color: #216b43; } .feedback--error { color: #9f2133; } .card-grid { display: grid; gap: 1rem; } .card { background: var(--surface); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 1rem; } .location-card__content { display: grid; gap: 1rem; align-items: start; } .location-photo-placeholder { min-height: 180px; border: 0; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-alt); } .location-photo { width: 100%; height: 100%; min-height: 180px; object-fit: cover; object-position: center; } .timeline { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.75rem; } .timeline li { background: var(--surface); border-radius: var(--radius-sm); padding: 0.8rem 1rem; box-shadow: var(--shadow); } .timeline span { display: inline-block; min-width: 4.5rem; font-weight: 700; color: var(--primary-strong); } .faq-list { display: grid; gap: 0.75rem; } details { background: var(--surface); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 0.75rem 1rem; } summary { cursor: pointer; font-weight: 700; } .gallery-placeholder { border: 2px dashed #d9cec1; border-radius: var(--radius-sm); padding: 2rem; text-align: center; color: var(--muted); background: var(--surface); } .footer { border-top: 1px solid #e7dfd4; padding: 1.2rem 0; background: #fff; } .footer__inner { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .footer a { color: var(--primary-strong); font-weight: 700; } .hidden { display: none !important; } @media (min-width: 900px) { .hero { padding: 4rem 0 2.5rem; } .hero__grid { grid-template-columns: 1.1fr 0.9fr; } .time-grid { grid-template-columns: repeat(4, minmax(80px, 1fr)); } .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .location-card { grid-column: 1 / -1; } .location-card__content { grid-template-columns: 1fr minmax(220px, 340px); align-items: center; } .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }