/* ========================================================================== SIGMA SCANNER — faq.css §10 Questions · a native
accordion, styled and GSAP-animated. --------------------------------------------------------------------------- NO-JS CONTRACT — the strongest version of it in this project --------------------------------------------------------------------------- Every other section's contract is "content ships visible, JS hides it only at runtime." This one goes further: each accordion row is a real
/ element, which is a COMPLETE, CORRECT, keyboard- and screen-reader-operable accordion with zero JS and zero CSS at all. This file only makes it look premium; js/faq.js only makes the open/close animated instead of an instant snap. Deleting either still leaves a working FAQ section. --------------------------------------------------------------------------- OPEN STATE IS THE NATIVE [open] ATTRIBUTE, NOT A CLASS --------------------------------------------------------------------------- Every "when open" rule below keys off .faq-item[open] — the browser's own state — rather than a JS-added class. js/faq.js sets the real `open` property at the right moments around its height animation, so this one selector stays correct whether GSAP is driving the transition or the browser is handling the whole thing natively. --------------------------------------------------------------------------- LAYER DISCIPLINE --------------------------------------------------------------------------- Base rules and every responsive override live together in @layer components — an override left in @layer layout has silently lost to a components-layer base rule twice already in this project, regardless of specificity or matching media query. ========================================================================== */ @layer components { /* ======================================================================== SECTION SHELL ======================================================================== */ .faq { position: relative; isolation: isolate; overflow: clip; } .faq__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(50% 45% at 6% 10%, rgb(16 160 80 / .07) 0%, rgb(16 160 80 / 0) 70%), radial-gradient(55% 50% at 98% 92%, rgb(34 197 94 / .06) 0%, rgb(34 197 94 / 0) 70%); } .faq .ss-container { position: relative; z-index: 1; } .faq__board { display: flex; flex-direction: column; gap: var(--sp-9); } .faq__header { margin-block-end: var(--sp-8); } .faq__title { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); color: var(--ink-900); margin-block-start: var(--sp-3); max-inline-size: 20ch; } /* ======================================================================== LIST ======================================================================== */ .faq__list { display: flex; flex-direction: column; } /* ---------- SECTION CTA — "View All FAQ" → faq.html ---------------------- The list's last row ends on a hairline (.faq-item's border-block-end), so without this the button sits flush against that line. Spacing only — every other property comes from .ss-btn in style.css, which is the whole point of reusing the component rather than restyling a link here. display:inline-flex is inherited from .ss-btn, so the button hugs its text at every breakpoint and never stretches; .faq__main is a plain block container below 1024px and a flex ITEM above it, and in neither case does an inline-flex child get stretched. That matches §3 Overview's "See all capabilities" button, which is deliberately not full-width on mobile either. */ .faq__cta { margin-block-start: var(--sp-7); } /* ======================================================================== ITEM — a real
element ======================================================================== */ .faq-item { border-block-end: 1px solid var(--ink-150); } .faq-item:first-child { border-block-start: 1px solid var(--ink-150); } .faq-item__trigger { display: flex; align-items: center; gap: var(--sp-4); padding-block: var(--sp-5); cursor: pointer; list-style: none; transition: background-color var(--dur-fast) var(--ease-out-quad); } /* Two selectors, one purpose: Chrome/Firefox use the standard pseudo- element, Safari still needs its own — both must go for the custom plus/cross icon to be the only disclosure indicator. */ .faq-item__trigger::marker { content: ""; } .faq-item__trigger::-webkit-details-marker { display: none; } .faq-item__trigger:hover { background: var(--ink-050); } .faq-item__trigger:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--r-sm); } /* ---------- LEADING ICON ------------------------------------------------- */ .faq-item__icon { display: flex; align-items: center; justify-content: center; flex: none; inline-size: 40px; block-size: 40px; border-radius: var(--r-lg); background: var(--ink-050); color: var(--ink-500); transition: background-color var(--dur-base) var(--ease-out-cubic), color var(--dur-base) var(--ease-out-cubic), transform var(--dur-base) var(--ease-out-cubic); } .faq-item[open] .faq-item__icon { background: var(--signal-050); color: var(--signal-600); transform: scale(1.06); } /* ---------- QUESTION ------------------------------------------------------- A

now (was a plain ) so the accordion's questions form a real heading outline — screen-reader users can jump straight between them, the WAI-ARIA APG's own recommended pattern for a
-based accordion. line-height and letter-spacing are pinned explicitly because base.css's element-selector `h3 { line-height: var(--lh-h3); letter-spacing: var(--ls-h3) }` would otherwise now match (it never did on a span) and quietly tighten this text — a visual change with no visible reason behind it. Every other h3 property this rule cares about (font-family/weight/size/color) was already being overridden here regardless of tag. */ .faq-item__q { flex: 1; font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: normal; color: var(--ink-900); } /* ---------- ANSWER-FACT PREVIEW -------------------------------------------- The whole point of answerFact: a reader gets the answer to every question without opening a single one. It fades out once the real answer is open, since it would just be repeating itself. */ .faq-item__fact { flex: none; padding: 3px var(--sp-3); border-radius: var(--r-full); background: var(--ink-100); color: var(--ink-600); font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; transition: opacity var(--dur-fast) var(--ease-out-quad), transform var(--dur-fast) var(--ease-out-quad); } .faq-item[open] .faq-item__fact { opacity: 0; transform: scale(.85); } /* ---------- TOGGLE ICON — plus rotates into a cross ------------------------ */ .faq-item__toggle { display: flex; align-items: center; justify-content: center; flex: none; inline-size: 28px; block-size: 28px; border-radius: 50%; border: 1px solid var(--ink-200); color: var(--ink-500); } .faq-item__toggle .ss-icon { inline-size: 14px; block-size: 14px; transition: transform var(--dur-base) var(--ease-out-cubic); } .faq-item[open] .faq-item__toggle { border-color: var(--signal-200); color: var(--signal-600); } .faq-item[open] .faq-item__toggle .ss-icon { transform: rotate(45deg); } /* ---------- PANEL ----------------------------------------------------------- overflow:hidden is what makes js/faq.js's height tween clip correctly; without JS, the browser's own display:block/none on
content needs nothing further from this file at all. */ .faq-item__panel { overflow: hidden; } .faq-item__panel-inner { padding-block: 0 var(--sp-6); padding-inline-start: calc(40px + var(--sp-4)); } .faq-item__panel-inner p { max-inline-size: 62ch; font-size: var(--fs-sm); line-height: 1.7; color: var(--ink-600); } /* ---------- MULTI-BLOCK ANSWERS ------------------------------------------- The "How does Sigma Scanner work?" panel is now

+

    +

    rather than a single paragraph, because an ordered list is what Google parses for step-style featured snippets. Two things the reset makes mandatory here: it zeroes every margin (so the rhythm between blocks has to be restored) and every padding (so without an explicit padding-inline-start the list's CSS-generated numbers render outside the content box and clip). Scoped to the panel so single-paragraph answers are untouched. */ .faq-item__panel-inner > * + * { margin-block-start: var(--sp-4); } .faq-item__steps { max-inline-size: 62ch; padding-inline-start: var(--sp-6); font-size: var(--fs-sm); line-height: 1.7; color: var(--ink-600); } .faq-item__steps li { padding-inline-start: var(--sp-1); } .faq-item__steps li + li { margin-block-start: var(--sp-2); } .faq-item__steps li::marker { color: var(--signal-600); font-weight: var(--fw-semibold); } /* ======================================================================== ASIDE — "Still stuck?" ======================================================================== */ .faq__aside { padding: var(--sp-6) var(--sp-7); border-radius: var(--r-xl); background: var(--ink-050); border: 1px solid var(--ink-150); align-self: flex-start; } .faq__aside-label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-700); margin-block-end: var(--sp-4); } .faq__aside-links { display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-start; } /* ======================================================================== RESPONSIVE — all in @layer components, see file header ======================================================================== */ @media (min-width: 640px) { .faq-item__trigger { gap: var(--sp-5); padding-block: var(--sp-6); } .faq-item__q { font-size: var(--fs-lead); } } @media (min-width: 1024px) { .faq__board { flex-direction: row; align-items: flex-start; gap: var(--sp-11); } .faq__main { flex: 1 1 auto; min-inline-size: 0; } .faq__aside { flex: none; inline-size: 280px; position: sticky; top: calc(var(--nav-h-scrolled) + var(--sp-8)); } .faq__header { margin-block-end: var(--sp-9); } } /* Below 1024px the aside reads as a closing card under the list — plain document order already puts the questions first, so no reordering is needed for that switch. */ }