/* css/faq.css FAQ accordion section — matches counters dark background (#0D1E32) and white text. Uses Inter (assumes loaded in ) */ :root{ --faq-bg: #0D1E32 !important; --fg: #ffffff; --muted-fg: rgba(255,255,255,0.78); --panel-bg: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); --accent: #7c5cff; --radius: 12px; --pad: 20px; --maxw: 1100px; --ff: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; } /* Section */ .faq-section{ background: var(--faq-bg) !important; color: var(--fg); padding: 64px 20px; font-family: var(--ff); position: relative; overflow: hidden; } .faq-inner{ max-width: var(--maxw); margin: 0 auto; display:flex; flex-direction:column; gap:22px; } /* Header */ .faq-head{ text-align:center; max-width:900px; margin:0 auto; } .faq-head h2{ margin:0; font-size:28px; font-weight:700; color:#ffffff; letter-spacing:-0.02em; } .faq-head .faq-sub{ margin-top:10px; color:var(--muted-fg); font-size:15px; } /* FAQ list */ .faq-list{ display:flex; flex-direction:column; gap:12px; margin-top:8px; } /* Accordion item */ .accordion-item{ background: var(--panel-bg); border-radius: var(--radius); padding: 10px; border: 1px solid rgba(255,255,255,0.04); position:relative; transition: transform .28s ease, box-shadow .28s ease; overflow:visible; } .accordion-item:hover{ transform: translateY(-6px); box-shadow: 0 18px 50px rgba(6,9,18,0.28); } /* Title button */ .accordion-title{ margin:0; } .accordion-toggle{ width:100%; text-align:left; font-size:16px; font-weight:700; color:#ffffff; background: transparent; border: none; padding: 18px 20px; border-radius: 10px; cursor: pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; outline: none; -webkit-tap-highlight-color: transparent; } .accordion-toggle:focus{ box-shadow: 0 0 0 4px rgba(124,92,255,0.12); } /* caret */ .accordion-toggle::after{ content: "▾"; font-size:18px; color: var(--muted-fg); transition: transform .22s ease; } .accordion-toggle[aria-expanded="true"]::after{ transform: rotate(180deg); color: var(--accent); } /* Panel */ .accordion-panel{ padding: 0 20px 18px 20px; color: var(--muted-fg); font-size:15px; line-height:1.6; overflow: hidden; display: none; /* JS will set to block when opening */ opacity: 0; max-height: 0; transition: max-height .36s cubic-bezier(.2,.9,.26,1), opacity .28s; } /* When JS opens the panel we remove hidden and set styles inline; add a visible state class too */ .accordion-panel.is-open{ opacity:1; } /* small screens */ @media(max-width:520px){ .faq-section{ padding:36px 14px; } .accordion-toggle{ padding:14px 14px; font-size:15px; } .accordion-panel{ font-size:14px; padding: 0 14px 14px 14px; } }