[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-089-Pop-Art":3},"# BUILD SPECIFICATION — \"POP ART\" COMIC-STRIP LANDING PAGE\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready **Pop Art landing page** in a single first attempt. The design language is the 1950s–60s Pop Art movement: extremely saturated colors (Pop Red `#FF0000`, Pop Yellow `#FFFF00`, Pop Blue `#0000FF`, Hot Pink `#FF69B4`, Bright Orange `#FF8C00`, Lime Green `#32CD32`), thick black outlines (3–4px), hard offset shadows, Ben-Day\u002Fhalftone dot patterns, comic speech bubbles, Warhol-style repetitive grids, sharp corners, and pop-in scale animations. The aesthetic is loud, iconic, and elevates everyday objects. All user-facing copy must be written in **English** with a punchy, comic-strip tone (exclamations like \"POW!\", \"BAM!\", \"WOW!\" are encouraged).\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, semantic, and style-agnostic. Re-theming the page must require editing only `style.css`, never the markup.\n\n### 1.2 CSS Variables & Theme Tokens\nStore **all** visual tokens in `:root` and theme overrides in `.dark`. Use exactly these tokens:\n\n```css\n:root {\n  \u002F* Brand palette *\u002F\n  --primary: #FF0000;         \u002F* Pop Red *\u002F\n  --secondary: #FFFF00;       \u002F* Pop Yellow *\u002F\n  --accent-blue: #0000FF;     \u002F* Pop Blue *\u002F\n  --accent-pink: #FF69B4;     \u002F* Hot Pink *\u002F\n  --accent-orange: #FF8C00;   \u002F* Bright Orange *\u002F\n  --accent-lime: #32CD32;     \u002F* Lime Green *\u002F\n  --ink: #000000;             \u002F* Black — outlines, shadows, text *\u002F\n\n  \u002F* Surfaces *\u002F\n  --bg-primary: #FFFF00;      \u002F* page base — always carries a Ben-Day dot overlay *\u002F\n  --bg-secondary: #FEFEFE;    \u002F* card \u002F speech-bubble surfaces *\u002F\n  --bg-band-red: #FF0000;     \u002F* full-width alternating section bands *\u002F\n  --bg-band-blue: #0000FF;\n  --bg-band-dark: #000000;    \u002F* footer band *\u002F\n\n  \u002F* Text *\u002F\n  --text-primary: #000000;    \u002F* on yellow \u002F near-white surfaces *\u002F\n  --text-secondary: #262626;\n  --text-on-red: #FFFFFF;     \u002F* large\u002Fbold display text ONLY (AA large-text) *\u002F\n  --text-on-blue: #FFFF00;    \u002F* display headings on blue; body on blue = #FFFFFF *\u002F\n  --text-success: #1E7A1E;    \u002F* darkened lime — AA on light surfaces *\u002F\n  --text-error: #CC0000;      \u002F* darkened red — AA on light surfaces *\u002F\n\n  \u002F* Borders *\u002F\n  --border-default: #000000;\n  --border-error: #FF0000;\n  --border-success: #32CD32;\n  --outline-weight: 4px;      \u002F* bold comic outline width *\u002F\n\n  \u002F* Radius — Pop Art exception: sharp corners ONLY *\u002F\n  --radius-sm: 0px;\n  --radius-md: 0px;\n  --radius-lg: 0px;\n\n  \u002F* Hard offset comic shadows *\u002F\n  --shadow-sm: 4px 4px 0 var(--ink);\n  --shadow-md: 6px 6px 0 var(--ink);\n  --shadow-lg: 8px 8px 0 var(--ink);\n\n  \u002F* Spacing \u002F motion *\u002F\n  --spacing-gap: 1.5rem;\n  --transition-fast: 120ms;\n  --transition-normal: 250ms;\n  --ease-standard: cubic-bezier(0.34, 1.56, 0.64, 1); \u002F* pop overshoot *\u002F\n\n  \u002F* Stacking *\u002F\n  --z-dropdown: 1000;\n  --z-modal: 2000;\n  --z-toast: 3000;\n\n  \u002F* Type *\u002F\n  --font-display: 'Bangers', cursive;\n  --font-base: 'Archivo', sans-serif;\n}\n```\n\n* **Contrast Pairing (mandatory, every theme):** Light background ↔ dark text, dark background ↔ light text. Explicit pairings: yellow\u002Fnear-white surfaces ↔ `--text-primary`; red surfaces ↔ `--text-on-red` (display-size text only, never body copy); blue surfaces ↔ `--text-on-blue` headings + `#FFFFFF` body; black surfaces ↔ white\u002Fyellow text. Never place body text directly on red or blue.\n* **Light Mode Background:** Do **not** default to pure white. The page base is Pop Yellow with a Ben-Day dot overlay; where a white surface is needed, use `#FEFEFE`, never `#FFFFFF`. **Exception clause:** `#FFFFFF` is reserved for text on red\u002Fblue and small solid fills (badges, icon chips) — never as a page or card background.\n* **Radius Exception:** Pop Art mandates `border-radius: 0px` everywhere. The `--radius-*` tokens exist but must all resolve to `0px`. Speech-bubble tails must be built with pseudo-elements or `clip-path` polygons — never with border-radius.\n* **Ben-Day Dots:** Implement dot patterns exclusively with `radial-gradient` + `background-size` (e.g., `radial-gradient(circle, rgba(255,0,0,.30) 2px, transparent 2.6px)` at `16px 16px`). Provide reusable classes: `.ben-day--red`, `.ben-day--blue`, `.ben-day--pink`, `.ben-day--black` (black dots on yellow), and `.ben-day--dark` (subtle white dots for dark-mode surfaces). **Legibility rule:** dots may appear only on section backgrounds or decorative strips; any text over a dotted area must sit inside a solid-fill container (card, speech bubble, band).\n\n### 1.3 Mandatory Dark Mode Support\n* **Implementation:** Define full dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `\u003Chtml>`. Dark mode is a \"neon on black\" Pop Art variant: `--bg-primary: #0A0A0A`, `--bg-secondary: #1C1C1C`, `--text-primary: #FEFEFE`, `--text-secondary: #D9D9D9`, `--text-success: #32CD32`, `--text-error: #FF5252`, and `--border-default` plus all hard shadows flip to `#FEFEFE` (white outlines\u002Fshadows on black). Saturated accent tokens and the colored section bands (`--bg-band-*`) with their text pairings remain unchanged in both themes.\n* **Theme Switching:** Background and text variables must switch seamlessly with zero HTML restructuring.\n* **Persistence:** Store the user's choice in `localStorage` (e.g., key `popart-theme`), falling back to `prefers-color-scheme` on first visit. Render a visible comic-styled toggle button (`.theme-toggle`) with correct `aria-pressed` and `aria-label` states, using Material Symbols `dark_mode` \u002F `light_mode` icons.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n* Build all layout structures with **Flexbox** (`display: flex` \u002F Tailwind flex utilities). Every flex container must default to `align-items: center` unless an exception is explicitly justified in CSS comments.\n* **Mobile-first:** All rows convert to columns on small viewports; horizontal scrolling is forbidden at any width down to 320px.\n* **Exception clause:** CSS Grid is permitted **only** for the Warhol-style repetitive mosaic in the Hero (Section 5.2). Everything else is Flexbox.\n\n### 1.5 Framework Default & Tailwind CSS Integration\n* Use **Tailwind CSS (Play CDN)** for structural utilities only (flex, gap, padding, responsive prefixes). Every color, border, shadow, radius, font, and effect must come from the CSS variables via generic reusable component classes (`.btn`, `.card`, `.input-group`, `.speech-bubble`, `.ben-day--*`). Hard-coded Tailwind color utilities (`bg-red-500`, etc.) are **forbidden**.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n* **Text:** Load **Bangers** (display: all headings, buttons, badges, nav, prices — uppercase, `font-weight: 700`, generous letter-spacing) and **Archivo** (body copy, bold weights, sentence case for readability) via Google Fonts `\u003Clink>` tags, bound to `--font-display` and `--font-base`. **Exception clause:** Bangers is display-only; body paragraphs use Archivo for accessibility — never set long-form copy in Bangers.\n* **Icons:** Use **Google Material Symbols** only. Raw inline SVGs, local icon files, and emoji icons are **explicitly forbidden**. Comic starburst badges (\"POW!\", \"MOST POPULAR!\") must be built with `clip-path` polygons + Bangers text — no SVG.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Button Component\nStyle all states via CSS classes on a `.btn` base (flex; `align-items: center`; `justify-content: center`; `gap: 0.5rem`; min touch target 44×44px; Bangers, uppercase; `border: var(--outline-weight) solid var(--border-default)`; `box-shadow: var(--shadow-md)`; `border-radius: 0`):\n* **Variants:** `.btn--primary` (red bg \u002F white text), `.btn--secondary` (yellow bg \u002F black text), `.btn--blue` (blue bg \u002F yellow text), `.btn--ghost` (transparent \u002F black border), `.btn--danger` (visually distinct in both themes: black bg, red border, warning icon).\n* **Hover:** Comic \"lift\" — `translate(-2px, -2px)` with shadow growing to `--shadow-lg`; `cursor: pointer`.\n* **Focus:** Distinct `:focus-visible` ring: `3px dashed` outline with `3px` offset, `#0000FF` in light mode \u002F `#FFFF00` in dark mode — visible over every band color.\n* **Active\u002FPressed:** `transform: scale(0.97)` plus shadow collapsing to `2px 2px 0` (comic press).\n* **Loading (`.is-loading`):** `aria-busy=\"true\"`, pointer events disabled, double-click prevented; render a CSS border-spinner in a contrasting color (or animated Material Symbol) without changing button dimensions.\n* **Disabled:** `opacity: 0.5`, `filter: grayscale(1)`, `cursor: not-allowed`, no hover\u002Factive effects.\n* **Success\u002FError (`.is-success` \u002F `.is-error`):** Temporary feedback states driven by `--text-success` \u002F `--text-error` tokens.\n\n### 2.2 Card Component\n* **Default:** Flexible flexbox column, `--bg-secondary` surface, `--outline-weight` black border, `--shadow-md`, generous padding, `border-radius: 0`.\n* **Hover (interactive cards):** `transform: translateY(-2px)` + shadow shift to `--shadow-lg`.\n* **Focus-within:** Card border highlights (e.g., `--border-default` → `--primary`) when a child link\u002Fbutton receives focus.\n* **Loading (`.card--skeleton`):** Shimmer sweep animation (gradient translate) over Ben-Day-tinted placeholder blocks; must not cause layout jumps.\n* **Empty State (`.card--empty`):** Structured fallback with a Material Symbol icon inside a starburst plus clear guidance text.\n\n### 2.3 Form & Input Requirements\nBuild the newsletter capture (Section 5.8) as an `.input-group`: flex column wrapping a bold Archivo `\u003Clabel>`, the input, and a reserved-height error container.\n* **Input base:** `--outline-weight` black border, `--bg-secondary` fill, `--font-base` bold, min-height 44px.\n* **States:** Empty; Focused (3px offset ring, replacing not removing the default outline); Filled; Valid (`.is-valid` → `--border-success` + `check_circle` Material icon); Invalid (`.is-invalid` → `--border-error`, `--text-error` message, `error` icon, `aria-invalid=\"true\"`); Disabled; Read-only.\n* **Feedback:** Error\u002Fsuccess messages render in an `aria-live=\"polite\"` region wired via `aria-describedby`; never communicate state by color alone.\n\n### 2.4 FAQ Accordion & Modal \u002F Popup\n* **FAQ Accordion (required):** Each item is a `\u003Cbutton class=\"faq__question\">` with `aria-expanded` \u002F `aria-controls`, a rotating Material Symbol `expand_more` chevron, and a panel animated via `grid-template-rows: 0fr → 1fr` (or equivalent) using `--transition-normal`. Fully keyboard operable; panels close independently.\n* **Modal (if any popup is used, e.g., plan details):** States Opening \u002F Open \u002F Loading \u002F Success \u002F Error \u002F Closing, all animated via CSS transitions; fixed overlay with flex-centered (`align-items: center`) backdrop; panel styled as a giant speech bubble; Material Symbol `close` button; keyboard focus trapping; close via `Esc` and overlay click; `role=\"dialog\"` + `aria-modal=\"true\"`; focus returns to the trigger on close; stacking via `--z-modal`.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by Default:** Fluid `clamp()` typography, responsive breakpoints, zero horizontal overflow.\n* **Smooth Animations:** All state changes transition with `var(--transition-normal)` and `var(--ease-standard)`. Implement a `pop-in` keyframe (`scale(0.6) → scale(1.05) → scale(1)` + fade) applied to hero elements (staggered on load) and to sections on scroll via an IntersectionObserver adding `.is-visible`. **`prefers-reduced-motion` must disable all transform\u002Fscale animations and the shimmer**, leaving simple fades or nothing.\n* **Accessibility (a11y):** AA contrast in both Light and Dark modes per the pairing rules in 1.2. Never rely on color alone (icons + text for every state). Semantic HTML5 (`header`\u002F`nav`\u002F`main`\u002F`section`\u002F`footer`, one `h1`, logical heading order), a skip-to-content link, correct ARIA roles\u002Flabels on the theme toggle, mobile menu, accordion, and any custom widget, logical DOM\u002Ffocus order, and full keyboard operability — no mouse-only interactions. `aria-live` regions for dynamic feedback (form errors, loading, success).\n* **Mandatory Visual Feedback:** Every click, hover, and submission triggers a visible state change (comic lift, press, spinner, success flash).\n* **Destructive Actions:** `.btn--danger` must be visually distinct in both themes.\n* **Saturation Filter:** Apply `filter: saturate(1.5)` only to the hero visual\u002Fmosaic containers — never to text surfaces or the whole page.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n* **File Structure:** Three separate files — `index.html`, `style.css`, `script.js`. No inline `\u003Cscript>` blocks beyond a single `\u003Cscript src=\"script.js\" defer>` entry point. `\u003Chead>` contains Google Fonts, Material Symbols, and Tailwind links only.\n* **Naming Convention:** **BEM only** (e.g., `.hero`, `.hero__title`, `.card--featured`, `.btn--primary`, `.faq__item`, `.speech-bubble__tail`) — never mix conventions.\n* **Copy:** Author complete, real, comic-toned **English** copy for every section (invent a fitting brand name). Lorem ipsum, \"Coming soon\", and placeholder-only submissions are forbidden — the user specified all sections, so all content must be real.\n* **JavaScript scope:** Vanilla JS only — theme toggle + persistence, mobile nav, accordion, form validation with loading\u002Fsuccess\u002Ferror states, IntersectionObserver reveals, smooth anchor scrolling with `scroll-margin-top`. No libraries.\n* **First-attempt completeness:** Deliver finished, runnable code with no TODOs.\n\n---\n\n## 5. PAGE BUILD BRIEF — SECTION-BY-SECTION REQUIREMENTS\n\n1. **Sticky Header:** Comic logo (Bangers in a bordered box or starburst), anchor nav (Features, How It Works, Testimonials, Pricing, FAQ), `.theme-toggle`, and a `.btn--primary` \"GET STARTED\" CTA. Bottom `--outline-weight` black border + hard shadow. Mobile: Material Symbol `menu` hamburger toggling a flex-column nav (`aria-expanded`), keyboard accessible.\n2. **Hero:** Red band with Ben-Day dots; giant Bangers headline (fluid `clamp()` sizing, `--text-on-red`), \"POW!\" starburst badge, speech-bubble subheadline, dual CTAs (`.btn--primary` + `.btn--secondary`), and a **Warhol-style 2×2 repetitive mosaic** (the only permitted CSS Grid): four identical visual cells with color-rotated accents (red \u002F blue \u002F yellow \u002F pink), each with 4px black borders, `saturate(1.5)` filter, and staggered `pop-in` on load.\n3. **Features (3 cards):** Yellow band with black Ben-Day dots; Bangers section heading with thick black underline bar; three `.card` blocks (flex column, centered) each with a Material Symbol icon inside a color-rotated starburst, Bangers title, Archivo body, hover lift.\n4. **How It Works (3 steps):** Blue band with white Ben-Day dots; three numbered comic panels — huge Bangers numerals in starbursts (1\u002F2\u002F3), speech-bubble descriptions (`--text-on-blue` headings, white body), connected by dashed lines on desktop that hide on mobile (vertical stack).\n5. **Testimonials:** Yellow band with pink Ben-Day dots; three `.speech-bubble` quotes (4px border, hard shadow, pseudo-element tail), Archivo bold quote, Bangers name, initials avatar in a 4px-bordered colored circle, and star ratings via Material Symbol `star` **plus** a text rating (\"5\u002F5\") — never color\u002Ficon alone.\n6. **Pricing (3 tiers):** Near-white (`#FEFEFE`) band with red Ben-Day dots; three `.card--pricing` tiers with comic tier names, Bangers prices, feature lists using `check_circle` (lime) \u002F `cancel` icons; the middle `.card--featured` is visually elevated (red bg, `--text-on-red` display text, larger shadow, `clip-path` starburst badge reading \"MOST POPULAR!\") with a `.btn--primary` CTA; other tiers use `.btn--secondary`\u002F`.btn--ghost`.\n7. **FAQ:** Yellow band; 5–6 real Q&A items built per Section 2.4 accordion spec.\n8. **Final CTA:** Red band with white Ben-Day dots; giant Bangers headline, speech-bubble support line, and the newsletter `.input-group` (email + `.btn--primary` \"SIGN ME UP!\") implementing every state from Section 2.3, including a success flash (\"You're on the list — BAM!\") in an `aria-live` region.\n9. **Footer:** Black band (both themes); logo, secondary link groups (Product \u002F Company \u002F Support), social icons as Material Symbol buttons (44×44px focus targets with `aria-label`), and copyright small print — white\u002Fyellow text per pairing rules.\n\n**Definition of Done:** Zero inline styles; zero inline SVGs; zero lorem ipsum; both themes toggle and persist; the page is fully navigable by keyboard alone; no horizontal scroll at 320px; every component state in Section 2 is implemented; and all three files are complete and runnable as delivered.\n",1791954981275]