[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-354-Merriweather-Typography":3},"# System Prompt: Build \"Merriweather Typography\" Landing Page\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready Landing Page on the first attempt. Theme: **Merriweather Typography** — a typography-driven, editorial, classic-serif aesthetic optimized for screens.\n\n**Sections required:** Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.\n\n---\n\n## 1. Architecture & Strict Rules\n\n**1.1 CSS-First & Zero Inline CSS**\n* All styling lives in `style.css`. The `style=\"...\"` attribute is forbidden in HTML.\n* Style only via class\u002FID selectors. HTML stays semantic and clean; changing the theme must require editing only the CSS file.\n\n**1.2 CSS Variables & Theme Tokens**\nDefine in `:root` (and `.dark`):\n* Colors: `--primary: #FFE3C3`, `--secondary: #5B3A30`, plus `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.\n* **Contrast pairing:** Light Mode uses `#FFE3C3`-tinted backgrounds (never pure white; use `#fefefe` where near-white is needed) paired with dark `#5B3A30` text. Dark Mode uses deep `#5B3A30`-derived backgrounds paired with `#FFE3C3` light text. Enforce this pairing in both themes.\n* Radius\u002Fshadows: `--radius-sm`, `--radius-md`, `--radius-lg`, `--shadow-sm`, `--shadow-md`.\n* Spacing\u002Ftransitions: `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`.\n* Stacking: `--z-dropdown`, `--z-modal`, `--z-toast`.\n\n**1.3 Mandatory Dark Mode**\n* Provide dark tokens via `@media (prefers-color-scheme: dark)` **and** a `.dark` class toggle.\n* Persist user choice in `localStorage`; fall back to `prefers-color-scheme` on first visit. Include a visible toggle with correct `aria-pressed` \u002F `aria-label`.\n\n**1.4 Flexbox Layout & Mobile-First**\n* Build all layouts with Flexbox. Every flex container defaults to `align-items: center` unless explicitly justified otherwise.\n* All rows convert to columns on small viewports. No horizontal scrolling at any width.\n\n**1.5 Framework**\n* Use Tailwind CSS (CDN) or clean custom CSS via `@layer`\u002F`@apply`, mapping utilities back to the CSS variables above. Use consistent generic class names (`.btn`, `.card`, `.input-group`).\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* Load **Merriweather** from Google Fonts and bind to `--font-base`. This is the identity font for the entire page.\n* Icons: Google Material Symbols only. Raw inline SVGs and local icon files are forbidden.\n\n**1.7 Typography Effects (Theme Signature)**\nApply globally to headings and hero display text:\n```css\nfont-family: 'Merriweather', serif;\nletter-spacing: -0.03em;\nline-height: 0.9;\n```\nBody copy may relax to `line-height: 1.6` for readability, but headings, hero, and section titles must carry the tight-tracking \u002F 90% leading signature. All text left-aligned (centered only for short hero\u002FCTA lines if explicitly chosen — justify the choice).\n\n---\n\n## 2. Component Specifications\n\n**2.1 Buttons** — Flex, `align-items: center`, `justify-content: center`, `gap: 0.5rem`, min 44×44px. States: hover (brightness\u002Fshadow shift, `cursor: pointer`), focus (visible ring from CSS variables), active (`transform: scale(0.97)`), loading (spinner via animated Google Icon, dimensions preserved, double-click prevented), disabled (`opacity: 0.5`, greyscale, `cursor: not-allowed`), success\u002Ferror feedback via `--text-success`\u002F`--text-error`. `.btn-danger` visually distinct in both themes.\n\n**2.2 Cards (Features, Pricing, Testimonials)** — Flexbox layout, `--bg-secondary` surfaces, subtle `--border-default` + `--shadow-sm`. Hover: `translateY(-2px)` + shadow shift. `:focus-within` highlights border when a child link\u002Fbutton is focused. Skeleton shimmer styles defined in CSS. Empty-state fallback: Google Icon + guidance text.\n\n**2.3 FAQ** — Use `\u003Cdetails>`\u002F`\u003Csummary>` or ARIA-correct accordion; keyboard operable, visible focus, animated open\u002Fclose via CSS transitions, `aria-expanded`\u002F`aria-controls` wired correctly.\n\n**2.4 Forms (Newsletter in Footer\u002FCTA)** — Flex container: label, input, dedicated error container. States: empty, focused (outline ring), filled, valid (success border\u002Ficon), invalid (error border, `--text-error` text, error icon), disabled, read-only. Errors announced via `aria-live=\"polite\"`.\n\n**2.5 Modals (if any FAQ\u002Fpricing detail uses one)** — Centered flex overlay, backdrop, Google Icon close button, focus trapping, `Esc` + overlay-click closing, animated open\u002Fclose via CSS.\n\n---\n\n## 3. Global UX Rules\n\n* **Responsive by default:** fluid sizing, no overflow, mobile-first breakpoints.\n* **Animations:** `transition: var(--transition-normal)` on all state changes; respect `prefers-reduced-motion`.\n* **Accessibility:** WCAG-sufficient contrast in both modes (verify `#FFE3C3` on `#5B3A30` and inverse). Never communicate state by color alone — pair with icons\u002Ftext. Semantic HTML5, logical focus order, full keyboard operability, `aria-live` for dynamic feedback.\n* **Visual feedback:** every click, hover, and submission produces a visible state change.\n\n---\n\n## 4. Deliverables\n\n* **Files:** `index.html`, `style.css`, `script.js` (theme toggle, FAQ accordion, form validation, any carousel logic). No inline `\u003Cscript>` beyond one deferred entry-point reference.\n* **Naming:** one consistent convention (BEM or fixed utility set) throughout.\n* **Copy:** Write all user-facing copy in **English**, editorial in tone, matching the Merriweather classic-serif identity. No lorem ipsum — write real, theme-appropriate copy for every section.\n* **Content:** 3 feature cards, 3 how-it-works steps, 3 testimonials, 3 pricing tiers (middle tier highlighted), 6+ FAQ items, footer with secondary links (About, Privacy, Terms, Contact) and newsletter form.\n\nBuild the complete page in one pass. Do not ask clarifying questions.\n",1791954985577]