[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-488-Stipple-Pointillism":3},"**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality Landing Page on the first attempt. Follow every rule in this specification exactly. Do not omit states, do not skip dark mode, and do not submit placeholder-only content.\n\n---\n\n## Project Brief\n\n**Theme:** Stipple \u002F Pointillism — WSJ \"hedcut\" editorial dotwork. Tone built from dots of varying density, fine detailed dotwork, refined, tactile, print\u002Fart heritage. Visual references: Wall Street Journal hedcuts, Seurat's pointillism.\n\n**Sections (in this exact order):**\n1. **Header\u002FNav** — sticky, stipple-textured, brand wordmark, anchor links to all sections, theme toggle, primary CTA.\n2. **Hero** — display headline, subcopy, two CTAs (primary + secondary), decorative CSS-only stipple emblem\u002Fmedallion (radial-gradient dither, no images), optional badge.\n3. **Features** — exactly 3 cards (Material Symbol icon, title, copy per card).\n4. **How It Works** — exactly 3 numbered steps (mono-font numerals 01\u002F02\u002F03), visually connected, stacks to a column on mobile.\n5. **Testimonials** — 3 quote cards; avatars rendered as CSS stipple medallions (dither texture + Material Symbol `person`), never raster images.\n6. **Pricing** — 3 tiers; the featured tier distinguished by badge + border + elevation (never color alone); each tier CTA demonstrates the loading state.\n7. **FAQ** — accordion of 5–6 Q&As, fully keyboard operable.\n8. **Final CTA** — stipple-textured panel with an email signup form (full validation states + `aria-live` feedback).\n9. **Footer** — secondary links grouped under headings (Product, Company, Resources, Legal), copyright with current year, small print.\n\n**Copy:** All user-facing copy in English, publication quality, written in a refined editorial voice consistent with the print\u002Fengraving aesthetic. No lorem ipsum.\n\n**Design tokens (adopt verbatim as your foundation in `:root`):**\n```css\n--color-bg: #f7f5ef; --color-surface: #ffffff; --color-surface-strong: #ece8dc;\n--color-border: #cfc9b8; --color-text: #1e1c17; --color-text-muted: #5e594c;\n--color-primary: #2b2620; --color-accent: #a1361c; --color-dot: #1e1c17;\n--radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-pill: 999px;\n--shadow-sm: 0 1px 2px rgba(30,28,23,0.10); --shadow-md: 0 3px 10px rgba(30,28,23,0.12);\n--shadow-lg: 0 10px 24px rgba(30,28,23,0.16);\n--font-sans: 'Source Serif 4', 'Georgia', serif; --font-display: 'Playfair Display', 'Georgia', serif;\n--font-mono: 'Courier Prime', ui-monospace, monospace;\n--text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem;\n--text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem; --text-4xl: 3rem; --text-5xl: 4rem;\n--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;\n--space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;\n--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);\n--stipple-fine: radial-gradient(circle, var(--color-dot) 0.6px, transparent 0.6px);\n--stipple-coarse: radial-gradient(circle, var(--color-dot) 1px, transparent 1px);\n--stipple-size-fine: 4px 4px; --stipple-size-coarse: 7px 7px;\n```\n\n**Base component classes (reproduce and extend, do not replace):**\n- `.nav` — flex, `align-items: center`, stipple-fine background layered over `--color-surface` with `background-blend-mode: multiply`, 1px bottom border.\n- `.btn` — 700-weight serif, 1.5px solid ink border, `--radius-md`, `--shadow-sm`; hover lifts with `--shadow-md`; `:focus-visible` gets a 2px `--color-accent` outline offset 2px; `[disabled]` at `opacity: .5` with `cursor: not-allowed`. `.btn--primary` inverts to ink fill with bg-colored text.\n- `.card` — `--color-surface` background, `--radius-lg`, `--shadow-md`, 1px border, and a `::after` overlay of `--stipple-coarse` at `opacity: .06` (the signature hedcut texture).\n- `.input` — full width, 1.5px border, `--radius-sm`; `:focus` swaps border to `--color-accent` with a 3px `color-mix` accent ring.\n- `.badge` — pill, stipple-fine texture over ink fill with `background-blend-mode: screen`.\n\n**Dark mode note (translated from source spec):** The source declares no light\u002Fdark modes — you must define both and validate them before publishing.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n* **No Inline CSS:** The `style=\"...\"` attribute is forbidden anywhere in the HTML.\n* **Class\u002FID Selectors Only:** All design properties, layout rules, and states live in `style.css`, targeted via class or ID selectors.\n* **Minimal HTML Modifications:** HTML stays semantic and styling-agnostic — restyling the page must require touching only `style.css`.\n\n**1.2 CSS Variables & Theme Tokens**\n* Extend `:root` with these mandatory semantic aliases mapped to the theme tokens: `--primary` (→ `--color-primary`), `--secondary` (→ `--color-accent`), `--bg-primary` (→ `--color-bg`), `--bg-secondary` (→ `--color-surface`), `--text-primary` (→ `--color-text`), `--text-secondary` (→ `--color-text-muted`), `--text-success`, `--text-error`, `--border-default` (→ `--color-border`), `--border-error`, `--border-success`. Define success\u002Ferror values with WCAG AA contrast in both themes.\n* Also add: `--font-base` (→ the serif body stack), `--spacing-gap` (→ `--space-6`), `--transition-fast: 120ms`, `--transition-normal: 240ms`, and stacking tokens `--z-dropdown: 100`, `--z-modal: 1000`, `--z-toast: 1100`.\n* **Contrast Pairing:** Every light background token pairs with a dark text token and every dark background token pairs with a light text token — enforced in both themes, not just the default.\n* **Exception clause:** The source palette declares `--color-surface: #ffffff`; per the no-pure-white rule, set the near-white surface to `#fefefe` instead.\n\n**1.3 Mandatory Dark Mode Support**\n* Define a full dark palette under both `@media (prefers-color-scheme: dark)` and a `.dark` class, suggested: bg `#16140f`, surface `#1e1b15`, surface-strong `#26221a`, border `#453f33`, text `#f2efe4`, text-muted `#a39c8a`, accent lightened to `#d1603f` (validate ≥ 4.5:1 for text usage), and `--color-dot: #f2efe4` so stipple textures remain visible.\n* Re-evaluate blend modes per theme: the light-mode `multiply` stipple layers must switch (e.g., to `screen`\u002F`soft-light` or reduced opacity) so the dither reads correctly on dark surfaces. Filled elements (`.btn--primary`, `.badge`) invert ink\u002Fcream roles in dark mode.\n* **Theme Switching:** Background and text variables must swap with zero HTML restructuring.\n* **Persistence:** Store the choice in `localStorage` (fall back to `prefers-color-scheme` on first visit). The nav toggle must be a real `\u003Cbutton>` with correct `aria-pressed` and `aria-label` state, swapping Material Symbol icons (e.g., `dark_mode`\u002F`light_mode`).\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n* Build all layout structures with Flexbox.\n* **Default Alignment Rule:** Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment (e.g., `stretch` for equal-height pricing cards).\n* **Mobile-Friendly First:** Rows convert to columns on small viewports; no horizontal scrolling anywhere at any breakpoint.\n\n**1.5 Framework & Naming Convention**\n* The theme ships its own custom CSS token sheet and component classes — build with clean custom CSS (Tailwind permitted only as an `@layer`\u002F`@apply` utility layer if desired). All utilities must map back to CSS variables and generic reusable classes.\n* **BEM only:** Use one consistent BEM convention (`.btn`, `.btn--primary`, `.card`, `.faq__item`, `.pricing__tier--featured`) across the entire deliverable. Never mix conventions.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* Load **Playfair Display** (display headings), **Source Serif 4** (body serif), and **Courier Prime** (mono numerals\u002Flabels) via Google Fonts `\u003Clink>` tags with `preconnect`. Bind the body stack to `--font-base`. **Exception clause:** Georgia appears only as a fallback inside the font stacks, never as the primary face.\n* Icons: **Google Material Symbols** only. Raw inline SVGs and local icon files are forbidden.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component**\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px.\n* **Hover:** brightness\u002Fshadow shift with `cursor: pointer`.\n* **Focus:** distinct `:focus-visible` ring using the accent variables for keyboard navigation.\n* **Active\u002FPressed:** `transform: scale(0.97)` click feedback (adapt the base `.btn:active` accordingly).\n* **Loading:** disables interaction, prevents double-clicks (`aria-busy=\"true\"`), and renders a CSS spinner or animated Material Symbol without distorting button dimensions.\n* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n* **Success\u002FError:** temporary feedback styles driven by `--text-success` \u002F `--text-error`, always paired with an icon or text (never color alone).\n* **Danger:** define `.btn--danger` visually distinct in both light and dark themes.\n\n**2.2 Card Component**\n* **Default:** flexible flexbox layout, subtle borders and elevation via `--bg-secondary` and CSS variables, with the stipple `::after` texture.\n* **Hover:** `transform: translateY(-2px)` plus shadow shift.\n* **Focus-within:** card border highlights when a child link\u002Fbutton receives focus.\n* **Loading (Skeleton):** a shimmer animation class defined in CSS to prevent layout jumps.\n* **Empty State:** structured fallback with a Material Symbol and clear guidance text.\n* **Pricing featured tier:** differentiated by badge + border + elevation in both themes.\n\n**2.3 Form & Input Requirements**\n* **States:** empty, focused (accent ring), filled, valid (success border + icon), invalid (error border, error text, error icon), disabled, read-only — extend `.input` with `.input--valid` \u002F `.input--invalid` and a `.field` wrapper.\n* **Structure:** flex container wrapping a `\u003Clabel>`, the input, and a dedicated error feedback element with `aria-live=\"polite\"`. Apply to the Final CTA email form with client-side validation, a loading state on submit, and a success confirmation.\n\n**2.4 FAQ Accordion & Modal Requirements**\n* **FAQ:** each item is a `\u003Cbutton aria-expanded>` controlling its panel (`aria-controls`, region linkage), animated open\u002Fclose via CSS transitions, fully keyboard operable, reduced-motion safe.\n* **Modal (if any overlay is used):** opening\u002Fopen\u002Floading\u002Fsuccess\u002Fclosing states animated via CSS; centered flex container (`align-items: center`), backdrop overlay, Material Symbol close button, keyboard focus trapping, close via `Esc` or overlay click, stacked at `--z-modal`.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by Default:** fluid sizing and breakpoints with zero horizontal overflow; set `scroll-padding-top` so anchor navigation clears the sticky nav.\n* **Smooth Animations:** `transition: var(--transition-normal) var(--ease-standard)` on all state changes; extend the source's reduced-motion block globally — `prefers-reduced-motion: reduce` disables all transforms, animations, and smooth scrolling.\n* **Accessibility (a11y):** WCAG AA contrast in both light and dark modes; never rely on color alone to communicate state; semantic HTML5 (`header`, `nav`, `main`, `section`, `footer`) with a logical heading hierarchy; correct ARIA roles\u002Flabels on custom widgets; logical DOM\u002Ffocus order; full keyboard operability; `aria-live` regions for form errors, loading, and success feedback; include a \"skip to main content\" link.\n* **Mandatory Visual Feedback:** every click, hover, and submission triggers a visible state change — pricing CTAs demonstrate loading → success feedback via an `aria-live` status.\n* **Destructive Actions:** `.btn--danger` remains distinct in both themes.\n* **Texture Legibility:** stipple dither opacity over text areas stays ≤ 0.08; validate that the texture never reduces text contrast below AA in either theme.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n* **File Structure:** separate `index.html`, `style.css`, and `script.js`. No inline `\u003Cscript>` blocks beyond a single deferred entry-point reference (`\u003Cscript src=\"script.js\" defer>`). No inline styles. No raster images — all decorative texture is CSS-generated.\n* **Naming Convention:** BEM throughout, never mixed.\n* **Copy:** real, publication-quality English copy for every section; `href=\"#\"` is acceptable only for footer links with no real destination.\n* **`script.js` scope:** theme toggle with persistence, FAQ accordion, email form validation + `aria-live` feedback, pricing CTA loading simulation, current-year footer date. Nothing more.\n* **Validation gate before publishing:** verify the complete page — all 9 areas — in both light and dark modes, at mobile and desktop widths, with keyboard only.\n",1791954988115]