/* ======================================== VOLTUX — Contact (volledig nieuw 2026-09-26) Twee kolommen: links het formulier op een witte kaart, rechts de andere manieren om ons te bereiken. Daaronder de vier vragen die het vaakst gesteld worden. Markup: contact.php. Alles begint met ct-; geen klasse uit de oude pagina. De zachte gloed staat op en niet op een blok binnen de kolom: binnen een kolom met max-width zie je een rand, en een bleed in vw geeft een horizontale schuifbalk (allebei gebeurd op faq.php, 2026-09-25). Basis-reset in :where() — anders wint `.ct h2 { margin: 0 }` van elke klasse die hieronder ruimte instelt, en plakt alles tegen elkaar (les van de footer, 2026-09-26). ======================================== */ @import url('/shared/voltux-variables.css'); body.ct-body { background-color: var(--white); background-image: radial-gradient(1200px 500px at 50% -80px, rgba(29, 158, 117, 0.16), transparent 68%), radial-gradient(700px 340px at 100% 320px, rgba(29, 158, 117, 0.07), transparent 72%); background-repeat: no-repeat; } .ct { --ct-rand: rgba(15, 23, 42, 0.08); --ct-schaduw: 0 1px 2px rgba(15, 23, 42, 0.04), 0 18px 44px -28px rgba(15, 23, 42, 0.35); max-width: 1160px; margin: 0 auto; padding: 0 24px 104px; font-family: var(--font-sans); color: var(--dark-600); } .ct *, .ct *::before, .ct *::after { box-sizing: border-box; } /* [hidden] verliest het van elke eigen display-waarde: .ct-veld staat op flex, dus het veld "Afspraaknummer" bleef gewoon staan (gezien 2026-09-26). Deze regel zet dat recht voor alles in de pagina — ook voor het formulier dat na het versturen verdwijnt. */ .ct [hidden] { display: none !important; } :where(.ct) :where(h1, h2, p) { margin: 0; } :where(.ct) :where(ul) { list-style: none; margin: 0; padding: 0; } /* ══ Kop ══ */ .ct-kop { padding: 76px 0 52px; text-align: center; } .ct-label { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px 7px 12px; border-radius: var(--radius-full); background: var(--green-50); color: var(--green-700); font-size: var(--text-sm); font-weight: var(--font-bold); } .ct-label i { font-size: 16px; } .ct-kop h1 { margin-top: 22px; font-size: clamp(32px, 5.2vw, 50px); line-height: 1.1; font-weight: var(--font-extrabold); letter-spacing: -1.4px; color: var(--dark-900); text-wrap: balance; } .ct-kop > p { max-width: 560px; margin: 18px auto 0; font-size: var(--text-lg); line-height: var(--leading-normal); } .ct-kop strong { color: var(--dark-900); font-weight: var(--font-bold); } .ct-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; margin-top: 28px; } .ct-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border: 1px solid var(--ct-rand); border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.8); font-size: var(--text-base); font-weight: var(--font-medium); color: var(--dark-700); } .ct-chips i { font-size: 17px; color: var(--green-500); } /* ══ De twee kolommen ══ */ .ct-lagen { display: grid; grid-template-columns: 1.35fr 1fr; gap: 28px; align-items: start; } .ct-kaart { border: 1px solid var(--ct-rand); border-radius: var(--radius-2xl); background: var(--white); box-shadow: var(--ct-schaduw); } .ct-formulier { padding: 34px 36px 32px; } .ct-formulier-kop { margin-bottom: 30px; } .ct-formulier-kop h2 { font-size: var(--text-2xl); line-height: 1.2; font-weight: var(--font-extrabold); letter-spacing: -0.6px; color: var(--dark-900); } .ct-formulier-kop p { margin-top: 10px; font-size: var(--text-md); line-height: var(--leading-normal); } /* ══ Velden ══ */ .ct-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .ct-veld { display: flex; flex-direction: column; min-width: 0; margin-bottom: 20px; } .ct-rij .ct-veld { margin-bottom: 0; } .ct-rij + .ct-rij { margin-top: 20px; } .ct-rij + .ct-veld, .ct-rij + .ct-afspraak { margin-top: 20px; } .ct-veld label { margin-bottom: 9px; font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--dark-800); } .ct-optioneel { margin-left: 6px; font-size: var(--text-xs); font-weight: var(--font-medium); color: var(--dark-400); } .ct-veld input, .ct-veld textarea, .ct-select select { width: 100%; padding: 13px 15px; border: 1px solid var(--dark-200); border-radius: var(--radius-xl); background: var(--white); font-family: inherit; font-size: var(--text-md); line-height: 1.5; color: var(--dark-900); transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; appearance: none; } .ct-veld textarea { resize: vertical; min-height: 140px; } .ct-veld input::placeholder, .ct-veld textarea::placeholder { color: var(--dark-400); } .ct-veld input:hover, .ct-veld textarea:hover, .ct-select select:hover { border-color: var(--dark-300); } .ct-veld input:focus, .ct-veld textarea:focus, .ct-select select:focus { outline: none; border-color: var(--green-400); box-shadow: 0 0 0 4px rgba(29, 158, 117, 0.14); } .ct-veld.ct-veld-fout input, .ct-veld.ct-veld-fout textarea, .ct-veld.ct-veld-fout .ct-select select { border-color: #dc2626; box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.10); } .ct-select { position: relative; } .ct-select select { padding-right: 42px; cursor: pointer; } .ct-select i { position: absolute; top: 50%; right: 15px; transform: translateY(-50%); font-size: 18px; color: var(--dark-400); pointer-events: none; } .ct-fout { margin-top: 7px; font-size: var(--text-sm); font-weight: var(--font-medium); color: #b91c1c; } .ct-onder-veld { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 7px; } .ct-onder-veld .ct-fout { margin-top: 0; } .ct-teller { margin-left: auto; font-size: var(--text-xs); color: var(--dark-400); font-variant-numeric: tabular-nums; } .ct-teller.ct-teller-vol { color: #b91c1c; } /* Honeypot: uit beeld, maar niet display:none — sommige bots slaan dat juist over */ .ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .ct-turnstile:not(:empty) { margin-bottom: 20px; } /* ══ Versturen ══ */ .ct-verstuur { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; } .ct-knop { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; padding: 0 26px; border: 0; border-radius: var(--radius-full); background: var(--green-500); color: var(--white); font-family: inherit; font-size: var(--text-md); font-weight: var(--font-bold); text-decoration: none; cursor: pointer; white-space: nowrap; box-shadow: var(--shadow-green); transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .ct-knop:hover { background: var(--green-600); transform: translateY(-2px); box-shadow: var(--shadow-green-lg); } .ct-knop:disabled { opacity: 0.65; cursor: default; transform: none; box-shadow: none; } .ct-knop i { font-size: 18px; } .ct-knop-stil { background: var(--white); border: 1px solid var(--ct-rand); color: var(--dark-800); box-shadow: none; } .ct-knop-stil:hover { background: var(--dark-50); border-color: var(--dark-300); box-shadow: none; } /* Draaiend rondje in de knop tijdens het versturen */ .ct-knop.ct-bezig .ct-knop-tekst { opacity: 0.85; } .ct-knop.ct-bezig i { display: none; } .ct-knop.ct-bezig::after { content: ''; width: 17px; height: 17px; border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: var(--white); border-radius: 50%; animation: ct-draai 0.7s linear infinite; } @keyframes ct-draai { to { transform: rotate(360deg); } } .ct-privacy { flex: 1 1 240px; font-size: var(--text-sm); line-height: 1.5; color: var(--dark-500); } .ct-privacy a { color: var(--green-600); font-weight: var(--font-semibold); } .ct-melding { margin-top: 20px; padding: 14px 16px; border-radius: var(--radius-xl); background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-size: var(--text-base); line-height: 1.5; } /* ══ Gelukt ══ */ .ct-gelukt { padding: 20px 0 8px; text-align: center; } .ct-gelukt-vink { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 22px; border-radius: 50%; background: var(--green-50); color: var(--green-600); font-size: 32px; } .ct-gelukt h2 { font-size: var(--text-2xl); font-weight: var(--font-extrabold); letter-spacing: -0.5px; color: var(--dark-900); } .ct-gelukt p { max-width: 460px; margin: 14px auto 0; font-size: var(--text-md); line-height: var(--leading-normal); } .ct-gelukt strong { color: var(--dark-900); } .ct-gelukt-knoppen { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; } /* ══ De andere manieren ══ */ .ct-kanalen { display: flex; flex-direction: column; gap: 14px; } .ct-kanaal { display: flex; align-items: flex-start; gap: 16px; padding: 20px 22px; border: 1px solid var(--ct-rand); border-radius: var(--radius-2xl); background: var(--white); color: inherit; text-decoration: none; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03); transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } a.ct-kanaal:hover { border-color: var(--green-300); transform: translateY(-2px); box-shadow: var(--ct-schaduw); } .ct-kanaal-icoon { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 auto; border-radius: var(--radius-xl); background: var(--green-50); color: var(--green-600); font-size: 22px; } .ct-kanaal-wa .ct-kanaal-icoon { background: #e7f9ef; color: #1faa53; } .ct-kanaal-tekst { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .ct-kanaal-tekst strong { font-size: var(--text-base); font-weight: var(--font-bold); color: var(--dark-900); } .ct-kanaal-waarde { font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--dark-800); overflow-wrap: anywhere; } .ct-kanaal-tekst small { font-size: var(--text-sm); line-height: 1.5; color: var(--dark-500); } .ct-kanaal-pijl { margin-left: auto; align-self: center; font-size: 18px; color: var(--dark-300); transition: color 0.2s ease, transform 0.2s ease; } a.ct-kanaal:hover .ct-kanaal-pijl { color: var(--green-500); transform: translateX(3px); } .ct-kanaal-stil { background: var(--dark-50); box-shadow: none; } .ct-kanaal-stil .ct-kanaal-icoon { background: var(--white); color: var(--dark-500); } /* Nu open / gesloten */ .ct-status { display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; padding: 5px 11px 5px 9px; align-self: flex-start; border-radius: var(--radius-full); background: var(--dark-100); font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--dark-600); } .ct-stip { width: 7px; height: 7px; border-radius: 50%; background: var(--dark-400); } .ct-status-open { background: var(--green-50); color: var(--green-700); } .ct-status-open .ct-stip { background: var(--green-500); } .ct-boeken { padding: 24px 22px; border-radius: var(--radius-2xl); background: radial-gradient(420px 200px at 100% 0%, rgba(45, 255, 154, 0.16), transparent 70%), linear-gradient(140deg, var(--green-600), var(--dark-900)); color: rgba(255, 255, 255, 0.78); } .ct-boeken h2 { font-size: var(--text-xl); font-weight: var(--font-extrabold); letter-spacing: -0.4px; color: var(--white); } .ct-boeken p { margin-top: 10px; font-size: var(--text-base); line-height: var(--leading-normal); } .ct-boeken .ct-knop { margin-top: 20px; } /* ══ Vragen ══ */ .ct-vragen { margin-top: 56px; text-align: center; } .ct-vragen h2 { font-size: var(--text-2xl); font-weight: var(--font-extrabold); letter-spacing: -0.6px; color: var(--dark-900); } .ct-vragen ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; margin-top: 26px; text-align: left; } .ct-vragen a { display: flex; align-items: center; gap: 12px; height: 100%; padding: 17px 19px; border: 1px solid var(--ct-rand); border-radius: var(--radius-xl); background: var(--white); font-size: var(--text-md); font-weight: var(--font-semibold); color: var(--dark-800); text-decoration: none; transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .ct-vragen a i { margin-left: auto; font-size: 17px; color: var(--dark-300); transition: color 0.2s ease, transform 0.2s ease; } .ct-vragen a:hover { border-color: var(--green-300); transform: translateY(-2px); box-shadow: var(--ct-schaduw); } .ct-vragen a:hover i { color: var(--green-500); transform: translateX(3px); } .ct-alle-vragen { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; font-size: var(--text-md); font-weight: var(--font-bold); color: var(--green-600); text-decoration: none; } .ct-alle-vragen:hover { text-decoration: underline; text-underline-offset: 4px; } /* ══ Focus ══ */ .ct a:focus-visible, .ct button:focus-visible { outline: 2px solid var(--green-500); outline-offset: 3px; border-radius: var(--radius-sm); } /* ══ Smaller dan een laptop ══ */ @media (max-width: 980px) { .ct-lagen { grid-template-columns: 1fr; } .ct-kanalen { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .ct-boeken { grid-column: 1 / -1; } } @media (max-width: 640px) { .ct { padding-bottom: 72px; } .ct-kop { padding: 52px 0 40px; } .ct-formulier { padding: 26px 20px 24px; } .ct-rij { grid-template-columns: 1fr; gap: 20px; } .ct-verstuur .ct-knop { width: 100%; } .ct-vragen { margin-top: 44px; } } @media (prefers-reduced-motion: reduce) { .ct a, .ct button { transition: none; } .ct a:hover, .ct button:hover { transform: none; } .ct-knop.ct-bezig::after { animation: none; } }