Questions, Set in Serif — An Editorial FAQ
Editorial magazine-style FAQ page on a warm cream canvas: an oversized sticky Fraunces serif 'Frequently Asked Questions' title beside a hairline-ruled column of serif Q/A rows (numbered, rotating plus-to-x, one pre-opened in wine), an ink context band and footer, with a 'Question not here?' contact card.
Summary
A warm, editorial magazine-style FAQ page. A near-full-height sticky oversized serif title block ('Frequently Asked Questions') sits in a left column beside a right reading column of hairline-ruled serif question/answer rows: each row is a tabular question number, a large Fraunces question, and a plus icon that rotates to an x and tints the open question wine. One row ships pre-opened. A full-bleed ink context band sits under the sticky nav, and a full-bleed ink footer plus an inline 'Question not here?' contact card close the page.
Style
Refined editorial / print aesthetic on a warm paper palette. The page background is a cream #faf6ef with slightly lighter paper #fffdf9 cards; ink #1c1815 is the near-black text and the inverted nav-band/footer fill; inksoft #5a534c is the muted body grey; a single wine #7b2d3b accent (deepening to winedeep #5e2029 on hover) carries every highlight: question numbers, the open question color, list icons, the 'Ask a human' / 'Talk to us' pills and link underlines. Hairlines are a 13-16% ink rgba rule that reads as a fine engraved rule. Type pairs Fraunces (variable optical-size serif, used display/light for the giant title and questions, italic for lead/footer lines) with Inter (300-600) for body, UI and the 0.26em-tracked uppercase 'micro' eyebrows. Generous editorial whitespace, tabular-nums numerals, smooth cubic-bezier accordion easing, and a small wine ornament dot motif.
Layout & Structure
A sticky cream nav, a full-bleed ink eyebrow context band, then a centered max-w-[1180px] two-column grid: a left sticky column with an oversized serif title + italic lead + a 'Still stuck?' pill, and a right max-w-[640px] reading column of hairline-ruled <details> Q/A rows ending in an inline contact card. A full-bleed ink footer closes the page.
Sticky nav
Context band (full-bleed)
Left sticky title column
Q/A row (closed)
Q/A row (open / active)
Inline contact card + footer
Special Notes
Centered max-w-[1180px] container throughout; the FAQ uses a left sticky title column + a right max-w-[640px] reading column. Palette is fixed: cream #faf6ef base, paper #fffdf9 cards, ink #1c1815 text + inverted bands, inksoft #5a534c body, a single wine #7b2d3b accent (winedeep #5e2029 on hover). Fonts are Fraunces (display/serif, variable optical size) + Inter (body/UI). Icons are Lucide via Iconify. Exactly one row ships pre-expanded. Responsive: nav center links hide below md, the two columns stack on small screens, the title scales via clamp, and the contact card stacks to a column. No em-dashes in copy; voice is warm and human ('Still stuck?', 'ping us and we will sort it together', 'Real people read every message').