/* ======================================== VOLTUX — Veelgestelde vragen (faq.php, volledig nieuw 2026-09-25). Rustige, brede kaartenlijst: grote kop, zoekveld, chips en accordeons. Geen enkele klasse uit de oude pagina. Alles begint met fq-. ======================================== */ @import url('/shared/voltux-variables.css'); .fq { --fq-rand: rgba(15, 23, 42, 0.07); --fq-schaduw: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px -20px rgba(15, 23, 42, 0.25); max-width: 880px; margin: 0 auto; padding: 0 20px 96px; overflow-x: clip; /* de gloed hieronder mag nooit de pagina breed maken */ } .fq *, .fq *::before, .fq *::after { box-sizing: border-box; } /* ══ Kop ══ */ .fq-kop { position: relative; padding: 72px 0 40px; text-align: center; } /* De zachte gloed bovenaan. Hij staat op en niet op de kop zelf: de kop zit in een kolom van 880 px, dus daar hield de achtergrond bij de rand op en zag je een streep (gemeld door gebruiker 2026-09-25). Op body loopt hij over de volle breedte — óók achter de menubalk, wat rustiger oogt — en kan hij nooit een horizontale schuifbalk geven, zoals een bleed in vw wél deed. faq.php zet hiervoor $pageBodyClass. */ body.fq-body { background-color: var(--white); background-image: radial-gradient(1100px 460px at 50% -60px, rgba(29, 158, 117, 0.15), transparent 68%), radial-gradient(620px 300px at 6% 180px, rgba(29, 158, 117, 0.06), transparent 70%); background-repeat: no-repeat; } .fq-label { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px 7px 12px; border-radius: 999px; background: var(--green-50); color: var(--green-700); font-size: 13px; font-weight: 700; letter-spacing: 0.01em; } .fq-label i { font-size: 16px; } .fq-kop h1 { margin: 20px 0 0; font-size: clamp(32px, 5.4vw, 50px); line-height: 1.1; font-weight: 800; letter-spacing: -1.4px; color: var(--dark-900); text-wrap: balance; } .fq-kop > p { max-width: 520px; margin: 16px auto 0; font-size: 17px; line-height: 1.6; color: var(--dark-500); } /* ══ Zoeken ══ */ .fq-zoek { position: relative; max-width: 520px; margin: 30px auto 0; } .fq-zoek > i { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--dark-400); pointer-events: none; } .fq-zoek input { width: 100%; height: 60px; padding: 0 52px 0 52px; border: 1px solid var(--fq-rand); border-radius: 18px; background: var(--white); color: var(--dark-900); font: inherit; font-size: 16px; box-shadow: var(--fq-schaduw); transition: border-color 0.15s, box-shadow 0.15s; -webkit-appearance: none; appearance: none; } .fq-zoek input::placeholder { color: var(--dark-400); } .fq-zoek input:focus { outline: none; border-color: var(--green-400, var(--green-500)); box-shadow: var(--fq-schaduw), 0 0 0 4px rgba(29, 158, 117, 0.15); } .fq-zoek input::-webkit-search-cancel-button { display: none; } .fq-zoek-wis { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--dark-100); color: var(--dark-600); display: grid; place-items: center; cursor: pointer; font-size: 16px; } .fq-zoek-wis:hover { background: var(--dark-200); color: var(--dark-900); } .fq-zoek-wis[hidden] { display: none; } /* ══ Chips ══ */ .fq-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 28px 0 36px; } .fq-chip { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--fq-rand); background: var(--white); font: inherit; font-size: 14px; font-weight: 600; color: var(--dark-600); cursor: pointer; white-space: nowrap; transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s; } .fq-chip i { font-size: 16px; } .fq-chip:hover { border-color: var(--green-300); color: var(--dark-900); } .fq-chip.actief { background: var(--dark-900); border-color: var(--dark-900); color: var(--white); } .fq-chip:focus-visible { outline: 3px solid var(--green-300); outline-offset: 2px; } /* ══ Groepen ══ */ .fq-groep { margin-bottom: 40px; } .fq-groep[hidden] { display: none; } .fq-groep-kop { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding-left: 4px; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dark-400); } .fq-groep-kop i { font-size: 17px; color: var(--green-500); } /* ══ Eén vraag ══ */ .fq-item { margin-bottom: 10px; border: 1px solid var(--fq-rand); border-radius: 18px; background: var(--white); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03); transition: box-shadow 0.2s, border-color 0.2s; overflow: hidden; } .fq-item[hidden] { display: none; } .fq-item:hover { border-color: rgba(29, 158, 117, 0.35); } .fq-item[open] { border-color: rgba(29, 158, 117, 0.35); box-shadow: var(--fq-schaduw); } .fq-item summary { display: flex; align-items: center; gap: 16px; padding: 20px 22px; cursor: pointer; list-style: none; user-select: none; } .fq-item summary::-webkit-details-marker { display: none; } .fq-item summary:focus-visible { outline: 3px solid var(--green-300); outline-offset: -3px; border-radius: 18px; } .fq-vraag { flex: 1; font-size: 17px; line-height: 1.45; font-weight: 700; color: var(--dark-900); letter-spacing: -0.2px; } .fq-item[open] .fq-vraag { color: var(--green-700); } /* Plusje dat een minnetje wordt */ .fq-plus { position: relative; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--green-50); transition: background 0.2s, transform 0.25s; } .fq-plus::before, .fq-plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; border-radius: 2px; background: var(--green-700); transform: translate(-50%, -50%); transition: opacity 0.2s, transform 0.25s; } .fq-plus::after { transform: translate(-50%, -50%) rotate(90deg); } .fq-item[open] .fq-plus { background: var(--green-500); transform: rotate(180deg); } .fq-item[open] .fq-plus::before, .fq-item[open] .fq-plus::after { background: var(--white); } .fq-item[open] .fq-plus::after { opacity: 0; } /* Antwoord: openvouwen met grid (werkt zonder hoogte te meten) */ .fq-antwoord-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); } .fq-item[open] .fq-antwoord-wrap { grid-template-rows: 1fr; } .fq-antwoord { overflow: hidden; } .fq-antwoord > :first-child { margin-top: 0; } .fq-antwoord > * { padding-left: 22px; padding-right: 22px; } .fq-antwoord p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.7; color: var(--dark-600); } .fq-antwoord strong { color: var(--dark-900); font-weight: 700; } .fq-lijst { margin: 0 0 14px; padding-left: 40px; list-style: none; } .fq-lijst li { position: relative; margin-bottom: 8px; font-size: 15.5px; line-height: 1.6; color: var(--dark-600); } .fq-lijst li::before { content: ''; position: absolute; left: -18px; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--green-400, var(--green-500)); } .fq-link { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 20px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: var(--dark-400); transition: color 0.15s; } .fq-link:hover { color: var(--green-700); } .fq-link i { font-size: 15px; } /* Even oplichten na het volgen van een link naar een vraag */ @keyframes fq-wijs { 0%, 100% { box-shadow: var(--fq-schaduw); } 30% { box-shadow: var(--fq-schaduw), 0 0 0 4px rgba(29, 158, 117, 0.25); } } .fq-item.fq-gewezen { animation: fq-wijs 1.6s ease-in-out; } /* ══ Niets gevonden ══ */ .fq-leeg { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; padding: 56px 20px; text-align: center; } .fq-leeg[hidden] { display: none; } .fq-leeg i { font-size: 34px; color: var(--dark-300); margin-bottom: 6px; } .fq-leeg strong { font-size: 17px; font-weight: 700; color: var(--dark-900); } .fq-leeg span { font-size: 15px; color: var(--dark-500); } /* ══ Slot ══ */ .fq-slot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-top: 16px; padding: 34px 36px; border-radius: 26px; background: linear-gradient(135deg, #0B3B30 0%, #0F6E56 100%); color: var(--white); box-shadow: 0 30px 60px -30px rgba(11, 59, 48, 0.6); } .fq-slot-tekst { flex: 1 1 280px; } .fq-slot h2 { margin: 0; font-size: 24px; line-height: 1.25; font-weight: 800; letter-spacing: -0.5px; } .fq-slot p { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.82); } .fq-slot-knoppen { display: flex; flex-wrap: wrap; gap: 10px; } .fq-knop { display: inline-flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 22px; border-radius: 14px; background: var(--white); color: #0B3B30; font: inherit; font-size: 15px; font-weight: 700; text-decoration: none; transition: transform 0.15s, background 0.15s; } .fq-knop:hover { transform: translateY(-1px); } .fq-knop-stil { background: rgba(255, 255, 255, 0.12); color: var(--white); border: 1px solid rgba(255, 255, 255, 0.24); } .fq-knop-stil:hover { background: rgba(255, 255, 255, 0.2); } .fq-knop:focus-visible { outline: 3px solid rgba(255, 255, 255, 0.7); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .fq-antwoord-wrap { transition: none; } .fq-item.fq-gewezen { animation: none; } .fq-knop:hover, .fq-chip:hover { transform: none; } } @media (max-width: 640px) { .fq { padding: 0 16px 72px; } .fq-kop { padding: 48px 0 28px; } .fq-zoek input { height: 54px; font-size: 15px; } .fq-chips { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; margin-inline: -16px; padding-inline: 16px; } .fq-chips::-webkit-scrollbar { display: none; } .fq-item summary { padding: 17px 18px; gap: 12px; } .fq-vraag { font-size: 16px; } .fq-antwoord > * { padding-left: 18px; padding-right: 18px; } .fq-lijst { padding-left: 36px; } .fq-slot { padding: 28px 22px; border-radius: 22px; } .fq-slot h2 { font-size: 21px; } .fq-knop { width: 100%; justify-content: center; } .fq-slot-knoppen { width: 100%; } }