/* ============================================================
FAQ SECTION STYLES — Light Studio palette
============================================================
Used by: Templates/partials/faq_section.html
Include in your base layout once:
Design notes:
- Inherits Light Studio's editorial-cream palette via --ls-* tokens
when rendered inside (all studio layouts).
- The --faq-* variables resolve to --ls-* tokens with hardcoded
Light Studio values as fallback, so the FAQ still looks coherent
if used on a page without .ls-app.
- Native / for built-in keyboard accessibility.
- No JS required, no layout shift, no animation jank.
============================================================ */
/* Container ----------------------------------------------- */
.faq-section {
/* Bind FAQ variables to Light Studio tokens (with LS hex fallbacks) */
--faq-bg: var(--ls-bg2, #FDFAF3);
--faq-text: var(--ls-text, #2A2218);
--faq-heading: var(--ls-ink, #1A1408);
--faq-border: var(--ls-border, rgba(92,72,42,0.14));
--faq-border-open: rgba(92,72,42,0.28);
--faq-border-hover: rgba(92,72,42,0.22);
--faq-focus: var(--ls-accent, #8A3A1A);
--faq-icon-color: var(--ls-text3, #9A8D70);
--faq-answer-text: var(--ls-text2, #6B5E48);
--faq-link: var(--ls-accent, #8A3A1A);
--faq-code-bg: var(--ls-bg3, #EFE8D8);
max-width: 760px;
margin: 4rem auto 2rem;
padding: 0 1.25rem;
font-family: var(--ls-sans, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
color: var(--faq-text);
}
.faq-heading {
/* Match Light Studio's editorial Fraunces headings */
font-family: var(--ls-serif, "Fraunces", Georgia, serif);
font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
font-weight: 500;
letter-spacing: -0.01em;
margin: 0 0 1.5rem;
color: var(--faq-heading);
}
/* List ---------------------------------------------------- */
.faq-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
/* Individual FAQ item ------------------------------------- */
.faq-item {
border: 1px solid var(--faq-border);
border-radius: 10px;
background: var(--faq-bg);
overflow: hidden;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.faq-item[open] {
border-color: var(--faq-border-open);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.faq-item:hover {
border-color: var(--faq-border-hover);
}
/* Question (clickable summary) ---------------------------- */
.faq-question {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1.25rem;
cursor: pointer;
font-size: 1rem;
font-weight: 500;
line-height: 1.4;
list-style: none; /* Hide default disclosure triangle */
user-select: none;
}
/* Remove default marker in all browsers */
.faq-question::-webkit-details-marker { display: none; }
.faq-question::marker { display: none; }
/* Focus ring for keyboard navigation (accessibility) */
.faq-question:focus-visible {
outline: 2px solid var(--faq-focus);
outline-offset: -2px;
border-radius: 10px;
}
.faq-question-text {
flex: 1;
}
/* Plus/minus icon ----------------------------------------- */
.faq-icon {
position: relative;
flex-shrink: 0;
width: 18px;
height: 18px;
transition: transform 0.2s ease;
}
.faq-icon::before,
.faq-icon::after {
content: "";
position: absolute;
background: var(--faq-icon-color);
border-radius: 1px;
}
/* Horizontal bar of the + */
.faq-icon::before {
top: 50%;
left: 0;
right: 0;
height: 2px;
transform: translateY(-50%);
}
/* Vertical bar of the + (rotates away when open) */
.faq-icon::after {
top: 0;
bottom: 0;
left: 50%;
width: 2px;
transform: translateX(-50%);
transition: transform 0.2s ease, opacity 0.2s ease;
}
.faq-item[open] .faq-icon::after {
transform: translateX(-50%) rotate(90deg);
opacity: 0;
}
/* Answer panel -------------------------------------------- */
.faq-answer {
padding: 0 1.25rem 1.25rem;
font-size: 0.95rem;
line-height: 1.6;
color: var(--faq-answer-text);
}
.faq-answer p {
margin: 0 0 0.75rem;
}
.faq-answer p:last-child {
margin-bottom: 0;
}
.faq-answer a {
color: var(--faq-link);
text-decoration: underline;
text-underline-offset: 2px;
}
.faq-answer a:hover {
text-decoration-thickness: 2px;
}
.faq-answer code {
font-family: var(--ls-mono, ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace);
font-size: 0.875em;
padding: 0.125rem 0.375rem;
background: var(--faq-code-bg);
border-radius: 4px;
}
/* Mobile tweaks ------------------------------------------- */
@media (max-width: 480px) {
.faq-section {
margin-top: 2.5rem;
padding: 0 1rem;
}
.faq-question {
padding: 0.875rem 1rem;
font-size: 0.95rem;
}
.faq-answer {
padding: 0 1rem 1rem;
font-size: 0.9rem;
}
}