:root{ --bg:#ffffff; --card:#ffffff; --text:#111111; --muted:#6b6b6b; --border:rgba(17,17,17,.12); --shadow:0 10px 30px rgba(17,17,17,.06); --radius:18px; --maxw:980px; } .fp-faq-wrap{ max-width:var(--maxw); margin:0 auto; padding:72px 18px 90px; text-align:center; font-family:inherit; background:var(--bg); color:var(--text); } @media (max-width:640px){ .fp-faq-wrap{ padding:48px 14px 70px; } } .fp-faq-kicker{ display:inline-flex; align-items:center; gap:10px; color:var(--muted); font-weight:600; font-size:14px; letter-spacing:.2px; margin-bottom:18px; } .fp-faq-dot{ width:10px;height:10px;border-radius:999px; background:#111; display:inline-block; box-shadow:0 0 0 4px rgba(17,17,17,.08); } .fp-faq-title{ margin:0 0 10px; font-size:40px; line-height:1.05; letter-spacing:-1.2px; font-weight:900; } .fp-faq-meta{ margin:0 auto 44px; max-width:780px; color:var(--muted); font-size:15px; line-height:1.6; } @media (max-width:640px){ .fp-faq-title{ font-size:36px; } } .fp-faq{ margin:0 auto; text-align:left; display:flex; flex-direction:column; gap:18px; } .fp-faq-section{ margin-top:18px; } .fp-faq-section-title{ margin:26px 2px 10px; font-size:14px; font-weight:800; letter-spacing:.12em; color:rgba(17,17,17,.55); text-transform:uppercase; } /* Accordion card */ .fp-item{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; transition: background-color .18s ease, border-color .18s ease; } /* Question row */ .fp-q{ width:100%; border:0; background:transparent; padding:22px 22px; display:flex; align-items:center; justify-content:space-between; gap:18px; cursor:pointer; font-size:20px; font-weight:600; color:var(--text); text-align:left; font-family:inherit; transition: background-color .18s ease, color .18s ease; } .fp-q:focus-visible{ outline:3px solid rgba(17,17,17,.18); outline-offset:2px; border-radius:14px; } .fp-icon{ width:34px;height:34px; border-radius:999px; border:1px solid rgba(17,17,17,.14); display:grid; place-items:center; flex:0 0 auto; transition:transform .18s ease, border-color .18s ease, background-color .18s ease; background:transparent; } .fp-icon svg{ width:16px;height:16px; display:block; } .fp-icon line{ stroke:#111; stroke-width:2.2; stroke-linecap:round; transition: stroke .18s ease; } /* Answer container */ .fp-a-wrap{ height:0; opacity:0; overflow:hidden; will-change:height, opacity; border-top:1px solid rgba(17,17,17,.08); background:#fff; } .fp-a{ padding:18px 22px 22px; color:#111; font-size:16px; line-height:1.55; font-family:inherit; } .fp-a ul{ margin:10px 0 0 18px; padding:0; } .fp-a li{ margin:6px 0; } .fp-item[data-open="true"] .fp-icon{ transform:rotate(45deg); } /* Hover: black question row only */ .fp-item:hover .fp-q{ background:#111; color:#fff; } .fp-item:hover .fp-icon{ border-color:rgba(255,255,255,.55); } .fp-item:hover .fp-icon line{ stroke:#fff; } .fp-item:hover .fp-a-wrap{ background:#fff; } .fp-item:hover .fp-a{ color:#111; } .fp-link{ color:#111; font-weight:700; text-decoration:underline; text-underline-offset:3px; } (function(){ const faq = document.getElementById('fpFaq'); if(!faq) return; const items = Array.from(faq.querySelectorAll('.fp-item')); function closeItem(item){ item.dataset.open = "false"; const btn = item.querySelector('.fp-q'); const wrap = item.querySelector('.fp-a-wrap'); btn.setAttribute('aria-expanded','false'); wrap.setAttribute('aria-hidden','true'); const startH = wrap.getBoundingClientRect().height; wrap.style.height = startH + 'px'; wrap.style.opacity = '1'; wrap.animate( [{ height: startH + 'px', opacity: 1 }, { height: '0px', opacity: 0 }], { duration: 240, easing: 'cubic-bezier(.2,.8,.2,1)' } ).onfinish = () => { wrap.style.height = '0px'; wrap.style.opacity = '0'; }; } function openItem(item){ item.dataset.open = "true"; const btn = item.querySelector('.fp-q'); const wrap = item.querySelector('.fp-a-wrap'); btn.setAttribute('aria-expanded','true'); wrap.setAttribute('aria-hidden','false'); wrap.style.height = 'auto'; const endH = wrap.getBoundingClientRect().height; wrap.style.height = '0px'; wrap.style.opacity = '0'; wrap.animate( [{ height: '0px', opacity: 0 }, { height: endH + 'px', opacity: 1 }], { duration: 260, easing: 'cubic-bezier(.2,.8,.2,1)' } ).onfinish = () => { wrap.style.height = 'auto'; wrap.style.opacity = '1'; }; } faq.addEventListener('click', (e) => { const btn = e.target.closest('.fp-q'); if(!btn) return; const item = btn.closest('.fp-item'); const isOpen = item.dataset.open === "true"; // single-open behavior items.forEach(it => { if(it !== item && it.dataset.open === "true") closeItem(it); }); if(isOpen) closeItem(item); else openItem(item); }); items.forEach(it => it.dataset.open = "false"); })();