[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-456-Pointillism-Stipple-Art":3},"# SYSTEM PROMPT — BUILD THE \"STIPPLE\" POINTILLISM \u002F STIPPLE-ART LANDING PAGE (SINGLE-ATTEMPT DELIVERABLE)\n\n**Your Role:** You are a Senior Frontend Engineer and Expert UI Designer. Produce a complete, polished, production-ready landing page **in one attempt** — every section, component state, and interaction fully implemented. No partial builds, no \"left for later.\"\n\n**Product Concept (write all copy around this):** *Stipple* — a fictional browser-based design tool that transforms photographs into pointillist \u002F stipple artwork through an adaptive dot engine. The page sells this tool to designers, illustrators, and art directors. **All user-facing copy must be written in English** — real, themed, persuasive copy for headlines, features, testimonials, pricing, and FAQ answers. Lorem ipsum and placeholder-only content are forbidden.\n\n**Page Blueprint (build in this exact order):** Sticky Header (logo, anchor nav, theme toggle, CTA) → Hero → Features (3 cards) → How It Works (3 steps) → Testimonials → Pricing (3 tiers) → FAQ (accordion) → Final CTA (email capture) → Footer (secondary links).\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 must be targeted via class or ID selectors in `style.css`.\n* **Minimal HTML Modifications:** HTML must remain clean and semantic (`header`, `nav`, `main`, `section`, `article`, `footer`), agnostic of visual styling. Re-theming the site must require editing only `style.css`.\n\n### 1.2 CSS Variables & Theme Tokens\nStore every visual token in `:root` (light) and override under dark mode (see 1.3):\n\n* **Colors (Light):** `--primary: #2E5090` (Stipple Blue); `--secondary: #C0392B` (Stipple Red); `--bg-primary: #FAF8F0` (Warm White); `--bg-secondary: #F5F0E0` (Soft Cream); `--text-primary: #1A1A1A` (Ink Black); `--text-secondary: #5F6D6E` (deepened Warm Grey — the raw `#7F8C8D` fails WCAG AA on Warm White and may be used **only** for decorative dots\u002Fdividers); `--text-success: #18703F` (deepened Stipple Green for text — raw `#27AE60` is reserved for icons\u002Fdecoration); `--text-error: #C0392B`; `--border-default: rgba(26,26,26,0.4)`; `--border-error: rgba(192,57,43,0.6)`; `--border-success: rgba(24,112,63,0.6)`.\n* **Decorative Accents:** `--accent-yellow: #F1C40F` (decorative dots and star ratings only — never as text on light backgrounds); `--accent-green: #27AE60`; `--accent-grey: #7F8C8D`.\n* **Dot-Field Tokens:** `--dot-ink: rgba(26,26,26,0.55)`, `--dot-blue: rgba(46,80,144,0.5)`, `--dot-red: rgba(192,57,43,0.45)`, `--dot-yellow: rgba(241,196,15,0.55)`, `--dot-green: rgba(39,174,96,0.45)` — these drive every pattern in Section 1.7.\n* **Contrast Pairing:** Every light background token must pair with a dark text token and every dark background token with a light text token — enforced in **both** themes and on every component (buttons, badges, cards, footer).\n* **Never Pure White:** `#ffffff` is forbidden; the theme surface is `#FAF8F0`. If a near-white is ever unavoidable, use `#fefefe`.\n* **Radius & Shadows:** `--radius-sm: 4px`, `--radius-md: 12px`, `--radius-lg: 24px` (soft, organic). `--shadow-sm` and `--shadow-md` must be defined, but per this theme's aesthetic `box-shadow` stays `none` on all surfaces — elevation is expressed as **stipple halos** (Section 1.7).\n* **Spacing & Transitions:** `--spacing-gap: 1.5rem`, `--spacing-section: clamp(4rem, 10vw, 8rem)`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.\n* **Elevation\u002FStacking:** `--z-dropdown: 10`, `--z-modal: 100`, `--z-toast: 200` — the sticky header uses `--z-dropdown`; the modal and any feedback toasts must never collide.\n\n### 1.3 Mandatory Dark Mode Support\n* **Implementation:** Define dark tokens under **both** `@media (prefers-color-scheme: dark)` and a `.dark` class on `\u003Chtml>`. Dark palette: `--bg-primary: #1A1A1A`; `--bg-secondary: #262420` (warm ink elevation); `--text-primary: #FAF8F0`; `--text-secondary: #B7BDC0`; `--primary: #8FA8DC` (lightened Stipple Blue, ≥ 4.5:1); `--secondary: #E67E73`; `--text-success: #4CD487`; `--text-error: #E67E73`; `--border-default: rgba(250,248,240,0.35)`; all `--dot-*` tokens flip to warm-white\u002Fsoft-cream dots at reduced opacity.\n* **Theme Switching:** Background and text variables must swap seamlessly with zero HTML restructuring.\n* **Persistence:** `script.js` reads\u002Fwrites `localStorage` (key `stipple-theme`), falling back to `prefers-color-scheme` on first visit. A visible toggle button in the header must reflect state via `aria-pressed` and a dynamically updated `aria-label`, swapping Google Material icons (`dark_mode` \u002F `light_mode`).\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n* Build all layout structure with **Flexbox**. Every flex container must default to `align-items: center` unless an exception is explicitly justified (e.g., stretching equal-height pricing cards) — document any exception with a CSS comment.\n* **Mobile-first:** All multi-column rows (features, steps, testimonials, pricing, footer columns) collapse to a single column below 768px. No horizontal scrolling at any viewport width; use `flex-wrap: wrap` where content can grow.\n\n### 1.5 Framework Default & Tailwind CSS Integration\n* Use Tailwind CSS (Play CDN) **for layout utilities only** (flex, spacing, responsive breakpoints), or clean custom CSS organized with `@layer` \u002F `@apply`. All visual design must live in reusable component classes (`.btn`, `.card`, `.input-group`, `.accordion`, `.modal`) in `style.css`, and every utility\u002Fcomponent must map back to the CSS variables in 1.2.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n* **Text:** Load **Source Serif Pro** (weights 400\u002F600\u002F700\u002F900) via Google Fonts `\u003Clink>` as `--font-base` — the global voice of the page. Load **Inter** (400\u002F500\u002F600) as `--font-ui`, permitted **only** for nav links, buttons, badges, form labels, and pricing figures (clean sans contrasting the dotted textures). Body text: `line-height: 1.8`, `letter-spacing: 0.03em`; headings: `line-height: 1.2–1.3`, fluid `clamp()` sizing.\n* **Icons:** Google Material Symbols (Rounded style) via `\u003Clink>`. Raw inline SVGs and local icon files are forbidden.\n* **Explicit Exception Clause:** One hidden inline `\u003Csvg>` containing a single `feTurbulence` grain filter (`id=\"grain\"`) is permitted solely for the noise overlay in 1.7. It must never be used for icons, and no other inline SVG may appear.\n\n### 1.7 Pointillist Visual System (Theme-Specific, Mandatory)\n* **Dot-Pattern Utilities:** `.dots-fine` — `radial-gradient(circle, var(--dot-ink) 1px, transparent 1px)`, `background-size: 8px 8px`; `.dots-medium` — 1.5px dots on a 12px grid; `.dots-coarse` — 2px dots on an 18px grid. Stagger `background-position` per layer so dot grids never read as mechanical.\n* **Pointillist Gradients:** Large surfaces (hero, final CTA) must use **gradients made of dots** — layered multi-color `radial-gradient` dot fields (blue\u002Fred\u002Fyellow\u002Fgreen at varying sizes, densities, opacities), never smooth `linear-gradient` washes. Keep dot density low directly behind text for legibility.\n* **Dot Dividers:** Between sections, render dissolving dot trails (coarse dots dissolving into fine dots) via layered radial-gradients — never solid `hr` lines.\n* **Borders:** No solid borders anywhere. Separation uses `border-style: dotted` or pseudo-element dot lines built from the `--border-*` tokens.\n* **Stipple Halos (elevation):** Cards and featured elements gain depth via pseudo-element radial dot fields faded with `mask-image` — the visual stand-in for `--shadow-sm` \u002F `--shadow-md`.\n* **Grain Overlay:** A fixed, full-page pseudo-element applying `filter: url(#grain)` at 0.04–0.08 opacity, `pointer-events: none`.\n* **Hover Dot Animation:** Dotted surfaces subtly drift (`background-position`) or increase dot density on hover — hypnotic, gentle, 200–600ms.\n* **No External Images:** All imagery is CSS dot composition + Material icons. Avatars are stipple-pattern circles with initials.\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Button Component (`.btn`, `.btn--primary`, `.btn--ghost`, `.btn--danger`)\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px, `--font-ui`.\n* **Hover:** A fine dot texture fades into the fill + slight brightness shift; `cursor: pointer`.\n* **Focus:** Distinct dotted focus ring — `outline: 2px dotted var(--primary); outline-offset: 3px` — never removed.\n* **Active\u002FPressed:** `transform: scale(0.97)`.\n* **Loading:** `aria-busy=\"true\"`, pointer-events disabled (prevents double submits), and a rotating dotted-ring spinner (`border: 2px dotted; border-radius: 50%; animation: spin`) that never changes button dimensions.\n* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n* **Success\u002FError:** Temporary state classes swapping the icon to `check_circle` \u002F `error` with `--text-success` \u002F `--text-error`, announced via an `aria-live` region.\n* **`.btn--danger`:** Visually distinct (Stipple Red) in both light and dark themes.\n\n### 2.2 Card Component (`.card`)\n* **Default:** `--bg-secondary` surface, `--radius-lg`, dotted frame (`2px dotted var(--border-default)`), low-opacity stipple texture overlay pseudo-element, flex layout.\n* **Hover:** `transform: translateY(-2px)`, halo intensifies, dot-overlay density animates.\n* **Focus-within:** Frame color shifts to `--primary` when any child link\u002Fbutton receives focus.\n* **Loading (Skeleton):** Define `.card--skeleton` with a stipple-shimmer animation (drifting dot field) that preserves layout — define the class even if not triggered on first paint.\n* **Empty State:** Define `.card--empty` — a Material icon plus clear guidance text.\n\n### 2.3 Form & Input (`.input-group`)\n* **Structure:** Flex column wrapping `\u003Clabel>`, `\u003Cinput>`, and a dedicated error\u002Ffeedback element linked via `aria-describedby`.\n* **States (all styled in CSS):** Empty, Focused (dotted ring), Filled, Valid (green dotted border + `check` icon), Invalid (red dotted border, `aria-invalid=\"true\"`, error icon + message), Disabled, Read-only.\n* **Behavior:** `script.js` validates the email with a regex; errors and success are announced through an `aria-live=\"polite\"` region; the submit button runs its Loading → Success\u002FError lifecycle.\n\n### 2.4 Modal \u002F Popup (`.modal`)\n* **Trigger:** The Hero's secondary CTA (\"See the gallery\") opens a demo\u002Fgallery modal containing a CSS pointillist composition (no external media).\n* **States:** Opening, Open, Loading, Success\u002FError, Closing — all animated via CSS transitions using `--transition-normal`.\n* **UX Features:** Backdrop is a fixed flex container (`align-items: center; justify-content: center`) with ink-tinted overlay; panel uses `role=\"dialog\"`, `aria-modal=\"true\"`, `aria-labelledby`; keyboard focus is trapped (Tab \u002F Shift+Tab cycle); initial focus lands on the Material `close` icon button; closes via `Esc`, overlay click, and close button; body scroll locked while open; z-index uses `--z-modal`.\n\n### 2.5 FAQ Accordion (`.accordion`)\n* Use native `\u003Cdetails>` \u002F `\u003Csummary>` (no JS required): `summary` shows the question plus a `expand_more` icon rotating 180° when `[open]`; dotted dividers between items; `summary` touch target ≥ 44px with a visible dotted focus ring; open content fades\u002Fslides in via CSS animation.\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by Default:** Fluid `clamp()` typography and breakpoints; zero horizontal overflow at any width.\n* **Smooth Animations:** Every state change transitions with `var(--transition-normal)` \u002F `var(--ease-standard)`; all dot drifts, shimmer, and reveal animations are wrapped in `@media (prefers-reduced-motion: no-preference)` — under reduced motion, keep only essential fades ≤ 200ms.\n* **Accessibility (a11y):** WCAG AA contrast in both themes (use the darkened text variants from 1.2 — never raw `#7F8C8D` or `#27AE60` as light-mode text). Never rely on color alone — pair every state with an icon and\u002For text. Semantic landmarks, a skip-link as the first focusable element, `aria-labelledby` on every `\u003Csection>`, logical DOM\u002Ffocus order, full keyboard operability, and `aria-live` regions for form feedback and theme changes.\n* **Mandatory Visual Feedback:** Every click, hover, focus, and submission triggers a visible state change.\n* **Reveal on Scroll:** An IntersectionObserver adds `.is-visible` so sections and dot fields \"coalesce\" into view (opacity + slight translate) — disabled under reduced motion.\n* **Destructive Actions:** Any destructive control uses `.btn--danger`, distinct in both themes.\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n* **File Structure:** Separate `index.html`, `style.css`, `script.js`. No inline `\u003Cscript>` blocks beyond a single `\u003Cscript src=\"script.js\" defer>`. Google Fonts and Material Symbols loaded via `\u003Clink>` in `\u003Chead>`.\n* **Naming Convention:** Strict BEM (`block__element--modifier`) across the entire deliverable — never mix conventions.\n* **No Unrequested Placeholders:** All copy is real, English, on-theme content for the *Stipple* product. Placeholders are permitted only where content was genuinely unspecified.\n* **Complete on First Attempt:** All nine blueprint sections, all component states, dark mode, and all behaviors delivered working in this single output.\n\n## 5. SECTION-BY-SECTION REQUIREMENTS\n\n* **Header:** Sticky, Warm White translucent with `.dots-fine` texture, `--z-dropdown`. Logo = CSS dotted-circle mark + \"Stipple\" wordmark (Source Serif Pro 700). Anchor links (Features, How It Works, Testimonials, Pricing, FAQ) with dotted-underline hover; theme toggle (per 1.3); compact `.btn--primary` \"Start free\". On mobile, anchor links hide — logo, toggle, and CTA remain.\n* **Hero:** ~90vh flex-centered. Pointillist gradient background — multi-color dot field densening toward the corners, dissolving to clean Warm White behind the text. Dotted-pill eyebrow badge (\"A Neo-Impressionist design tool\"), fluid H1 (e.g., about ten thousand dots becoming one masterpiece), subcopy, primary CTA (\"Dot your first photo\") + ghost CTA opening the modal (per 2.4), and a dotted scroll cue with `arrow_downward`. Optional slow-drifting dot clusters under the reduced-motion guard.\n* **Features (3 cards):** Section kicker + H2 + intro, then three `.card`s: \"Adaptive Dot Engine\" (`grain` icon), \"Living Palettes\" (`palette`), \"Museum-Grade Export\" (`download`) — each with a dotted-ring icon badge, Source Serif Pro title, real descriptive copy, and a dotted-underline \"Learn more\" link. All 2.2 states apply.\n* **How It Works (3 steps):** Steps 01 Upload (`upload`), 02 Dotify (`auto_awesome`), 03 Export & Share (`share`) in a flex row, connected by dotted pseudo-element trails between dotted number badges; trails rotate vertical on mobile.\n* **Testimonials:** Three quote cards: `format_quote` icon in Stipple Blue, italic Source Serif Pro quote, five `star` icons in `--accent-yellow`, stippled-circle avatar with initials, fictional-but-realistic name and role (illustrator, gallery curator, brand director).\n* **Pricing (3 tiers):** \"Sketch\" $0, \"Studio\" $12\u002Fmo (featured — denser dotted frame, stronger halo, dotted \"Most popular\" badge), \"Atelier\" $29\u002Fmo. Feature lists use `check` icons in `--text-success`; per-tier CTAs (ghost \u002F primary \u002F ghost). Optional monthly\u002Fyearly toggle only if implemented as an accessible `aria-pressed` button with prices announced via `aria-live`.\n* **FAQ (5–6 items):** Real questions (what stippling is, supported formats, commercial use, performance, refunds, dark mode) built per 2.5.\n* **Final CTA:** Full-width band with a dense pointillist \"sunrise\" dot gradient (yellow\u002Fred\u002Fblue blending). H2, supporting line, and the email-capture `.input-group` (per 2.3) with submit lifecycle idle → loading → success (\"You're on the list\") \u002F error, plus consent microcopy.\n* **Footer:** Ink-black band in light mode (deepened ink in dark mode) with Warm White text — contrast pairing enforced. Columns: brand (logo, tagline, social links as Material icons in dotted circles), Product links, Company links, Support links; bottom bar with copyright, Privacy, Terms, and a themed sign-off line. All links use dotted-underline hover.\n",1791954987476]