/* ============================================================ FAQ.CSS — Unified accordion FAQ component Dark theme (default) · Light theme (.blog-page) First item open by default via .faq-item--open in HTML ============================================================ */ /* ── Layout ── */ .faq-section { margin-top: 3rem; /* override per-page if needed */ } .faq-list { max-width: 900px; width: 100%; margin: 0 auto; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; } /* ── Item ── */ .faq-item { border-bottom: 1px solid var(--line); position: relative; } .faq-item:last-child { border-bottom: none; } /* Accent bar on left */ .faq-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--red); opacity: 0; transition: opacity 0.25s; } .faq-item.open::before, .faq-item:hover::before { opacity: 1; } /* ── Trigger (button) ── */ .faq-item__trigger { width: 100%; background: rgba(255, 255, 255, 0.02); border: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.5rem 2rem; text-align: left; font-family: var(--font-sans); font-size: 0.96rem; font-weight: 600; color: var(--white); line-height: 1.5; transition: background 0.2s; } .faq-item__trigger:hover { background: rgba(255, 255, 255, 0.04); } .faq-item.open .faq-item__trigger { background: rgba(26, 45, 90, 0.5); } /* ── Plus/minus icon ── */ .faq-item__icon { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(200, 210, 232, 0.2); display: flex; align-items: center; justify-content: center; transition: background 0.2s, border-color 0.2s; font-size: 1.1rem; font-weight: 300; line-height: 1; color: var(--muted); } .faq-item.open .faq-item__icon { background: rgba(204, 31, 31, 0.15); border-color: rgba(204, 31, 31, 0.4); color: #f07070; } /* ── Answer panel ── */ .faq-item__answer { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s cubic-bezier(0.4, 0, 0.2, 1); padding: 0 2rem; } .faq-item.open .faq-item__answer { padding: 0 2rem 1.5rem; } .faq-item__answer p { font-family: var(--font-sans); font-size: 0.88rem; font-weight: 300; color: rgba(200, 210, 232, 0.65); line-height: 1.85; margin: 0; } .faq-item__answer a { color: var(--blue-light); text-decoration: none; transition: color 0.2s; } .faq-item__answer a:hover { color: var(--white); } /* ============================================================ LIGHT THEME — blog article pages (.blog-page on ) ============================================================ */ .blog-page .faq-list { border-color: var(--blog-rule); } .blog-page .faq-item { border-bottom-color: var(--blog-rule); } .blog-page .faq-item::before { background: var(--blog-accent); } .blog-page .faq-item__trigger { background: var(--blog-white); color: var(--blog-ink); } .blog-page .faq-item__trigger:hover { background: var(--blog-accent-lt); } .blog-page .faq-item.open .faq-item__trigger { background: var(--blog-accent-lt); } .blog-page .faq-item__icon { border-color: var(--blog-rule); color: var(--blog-soft); } .blog-page .faq-item.open .faq-item__icon { background: var(--blog-accent-lt); border-color: var(--blog-accent); color: var(--blog-accent); } .blog-page .faq-item__answer p { color: var(--blog-mid); font-weight: 400; } .blog-page .faq-item__answer a { color: var(--blog-accent); } .blog-page .faq-item__answer a:hover { color: var(--blog-ink); } /* ============================================================ Responsive ============================================================ */ @media (max-width: 560px) { .faq-section { margin-top: 2rem; } .faq-item__trigger { font-size: 0.9rem; padding: 1.25rem 1.25rem; } .faq-item__answer { padding: 0 1.25rem; } .faq-item.open .faq-item__answer { padding: 0 1.25rem 1.25rem; } .faq-item__answer p { font-size: 0.86rem; } }