/*============================================================================== Clunky Design System (CDS) File: faq.css Version: 0.1.0 Sprint: 1 Purpose: FAQ layouts, accordions, expandable answers and search-friendly knowledge blocks for flagship resources. ==============================================================================*/ /*============================================================================== SECTION 1 FAQ Section ==============================================================================*/ .faq{ padding-block:5rem; } .faq + .faq{ border-top:1px solid var(--color-border); } .faq-header{ text-align:center; margin-bottom:3rem; max-width:760px; margin-inline:auto; } .faq-header p{ color:var(--color-text-light); } /*============================================================================== SECTION 2 FAQ List ==============================================================================*/ .faq-list{ display:flex; flex-direction:column; gap:1.25rem; max-width:920px; margin-inline:auto; } /*============================================================================== SECTION 3 FAQ Item ==============================================================================*/ .faq-item{ background:#ffffff; border:1px solid var(--color-border); border-radius:20px; overflow:hidden; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; } .faq-item:hover{ border-color:#bfdbfe; box-shadow:0 12px 32px rgba(15,23,42,.06); transform:translateY(-2px); } .faq-item[open]{ border-color:var(--color-primary); } /*============================================================================== SECTION 4 FAQ Question / Native Summary ==============================================================================*/ .faq-item > summary{ width:100%; display:flex; align-items:center; gap:1rem; padding:1.5rem 2rem; background:transparent; cursor:pointer; text-align:left; font:inherit; font-size:1.1rem; font-weight:700; line-height:1.4; color:var(--color-heading); list-style:none; transition:background-color .2s ease; } .faq-item > summary::-webkit-details-marker{ display:none; } .faq-item > summary::after{ content:"+"; margin-left:auto; flex:0 0 auto; font-size:1.5rem; font-weight:400; line-height:1; color:var(--color-primary); transition:transform .2s ease; } .faq-item[open] > summary::after{ content:"−"; } .faq-item > summary:hover{ background:var(--color-surface-subtle); } .faq-item > summary:focus-visible{ outline:3px solid var(--color-focus, var(--color-primary)); outline-offset:-3px; } /*============================================================================== SECTION 5 Chevron Icon ==============================================================================*/ .faq-icon{ width:20px; height:20px; flex-shrink:0; transition:transform .25s ease; } .faq-item[open] .faq-icon{ transform:rotate(180deg); } /*============================================================================== SECTION 6 Answer Panel ==============================================================================*/ .faq-answer{ padding:0 2rem 2rem; background:var(--color-surface); border-top:1px solid var(--color-border); } .faq-answer > *:first-child{ margin-top:1.5rem; } .faq-answer > *:last-child{ margin-bottom:0; } .faq-answer-inner p:first-child{ margin-top:1.5rem; } .faq-answer-inner > *:last-child{ margin-bottom:0; } /*============================================================================== SECTION 7 Lists Within Answers ==============================================================================*/ .faq-answer ul, .faq-answer ol{ margin:1rem 0 1.5rem 1.5rem; } .faq-answer li{ margin-bottom:.5rem; } /*============================================================================== SECTION 8 Inline Callout ==============================================================================*/ .faq-note{ margin-top:1.5rem; padding:1rem 1.25rem; background:#eff6ff; border-left:4px solid var(--color-primary); border-radius:0 14px 14px 0; font-size:.95rem; color:var(--color-text); } /*============================================================================== SECTION 9 Related Link ==============================================================================*/ .faq-related{ margin-top:1.5rem; padding-top:1rem; border-top:1px dashed var(--color-border); font-size:.95rem; } .faq-related a{ font-weight:600; text-decoration:none; color:var(--color-primary); } .faq-related a:hover{ text-decoration:underline; } /*============================================================================== SECTION 10 Category Badge ==============================================================================*/ .faq-category{ display:inline-flex; align-items:center; padding:.35rem .8rem; margin-bottom:1rem; border-radius:999px; background:#dbeafe; color:var(--color-primary); font-size:.8rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; } /*============================================================================== SECTION 11 Featured FAQ ==============================================================================*/ .faq-featured{ margin:4rem auto; max-width:960px; padding:2.5rem; border-radius:28px; background:linear-gradient(135deg,#eff6ff,#ffffff); border:1px solid #dbeafe; } .faq-featured h2{ margin-top:0; } /*============================================================================== SECTION 12 Quick Answers Grid ==============================================================================*/ .faq-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.5rem; margin:3rem 0; } .faq-card{ padding:1.5rem; background:#ffffff; border:1px solid var(--color-border); border-radius:18px; transition: transform .25s ease, box-shadow .25s ease; } .faq-card:hover{ transform:translateY(-4px); box-shadow:0 12px 30px rgba(15,23,42,.08); } .faq-card h3{ margin-top:0; margin-bottom:.75rem; } /*============================================================================== SECTION 13 Jump Links ==============================================================================*/ .faq-links{ display:flex; flex-wrap:wrap; gap:.75rem; margin:2rem 0; } .faq-links a{ padding:.55rem .95rem; border-radius:999px; background:#f8fafc; border:1px solid var(--color-border); text-decoration:none; font-size:.9rem; font-weight:600; color:var(--color-text); transition: background .2s ease, border-color .2s ease; } .faq-links a:hover{ background:#eff6ff; border-color:#bfdbfe; } /*============================================================================== SECTION 14 Empty State ==============================================================================*/ .faq-empty{ padding:2.5rem; text-align:center; background:#f8fafc; border:2px dashed var(--color-border); border-radius:20px; color:var(--color-text-light); } /*============================================================================== SECTION 15 Responsive ==============================================================================*/ @media (max-width:768px){ .faq{ padding-block:3.5rem; } .faq-item > summary{ padding:1.25rem 1.5rem; font-size:1rem; } .faq-answer{ padding:0 1.5rem 1.5rem; } .faq-featured{ padding:2rem; } .faq-grid{ grid-template-columns:1fr; } .faq-links{ justify-content:center; } } /*============================================================================== END OF FILE Version 0.1.0 Future Sections 16 Searchable FAQ 17 Sticky FAQ Navigation 18 FAQ Filters 19 Animated Counters 20 Related Resources Panel 21 FAQ Voting 22 Copy Link Buttons 23 Schema Helpers 24 AI Answer Highlight 25 Print Styles ==============================================================================*/ /* Compatibility for pillar-page FAQ markup */ .article-content > section#faq .section-kicker { color: var(--color-primary); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .article-content > section#faq .faq-answer { padding: 0 2rem 1.5rem; color: var(--color-text); } .article-content > section#faq .faq-answer p { margin: 0; }