[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-333-Grunge-Design":3},"# BUILD PROMPT — \"GRUNGE DESIGN\" LANDING PAGE (1990s Brutalist · David Carson \u002F Ray Gun)\n\n**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Produce a complete, production-quality landing page in a single pass. The theme is **Grunge Design** — distressed, dirty, photocopied, torn-edged, chaotic-overlap, anti-grid brutalism (\"Brutalism & Raw\" category, 1990s era, David Carson \u002F Ray Gun magazine). The *chaos is purely aesthetic and CSS-driven*; the engineering underneath must be strict, semantic, accessible, and fully themeable.\n\n**Sections (in this order):** Header\u002FNav → Hero → Features (3 cards) → How It Works (3 steps) → Testimonials → Pricing (3 tiers) → FAQ → Final CTA (email capture) → Footer with secondary links.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n* All styling lives in `style.css`. **Forbidden:** `style=\"...\"` attributes, inline event handlers (`onclick`, etc.), and `\u003Cstyle>` blocks in HTML.\n* All design properties, layout rules, and states are targeted via **class\u002FID selectors only**.\n* HTML stays clean, semantic, and style-agnostic — re-theming the page must require CSS edits only, never markup changes.\n* All JavaScript lives in `script.js`, attached exclusively via `addEventListener`. The HTML contains exactly **one** `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` reference and nothing else.\n\n**1.2 CSS Variables & Theme Tokens (canonical block — adopt verbatim)**\nUse this token system as the single source of truth. The `--color-*` names below fulfill the mandatory semantic roles (`--color-bg` = bg-primary, `--color-surface` = bg-secondary, `--color-text` = text-primary, `--color-text-muted` = text-secondary, `--color-primary` = primary, `--color-accent` = secondary\u002Faccent, `--color-border` = border-default):\n\n```css\n:root {\n  \u002F* color — DARK theme (default, per source spec) *\u002F\n  --color-bg: #1a1815;\n  --color-surface: #24211c;\n  --color-surface-strong: #2e2a23;\n  --color-border: #55503f;\n  --color-text: #ece6d8;\n  --color-text-muted: #a89f8a;\n  --color-primary: #c1391f;\n  --color-on-primary: #fff2e0;   \u002F* constant pair for primary fills *\u002F\n  --color-accent: #d9b23c;      \u002F* used as FILL; always pair with --color-ink text *\u002F\n  --color-accent-text: #d9b23c; \u002F* accent as foreground; re-tokened per theme *\u002F\n  --color-ink: #0c0b09;\n  \u002F* mandatory state tokens *\u002F\n  --color-success: #9aab61;\n  --color-error: #ff6b4a;\n  --color-border-success: var(--color-success);\n  --color-border-error: var(--color-error);\n\n  \u002F* radius — torn\u002Frough, no clean rounding *\u002F\n  --radius-sm: 0px; --radius-md: 2px; --radius-lg: 0px; --radius-pill: 2px;\n\n  \u002F* shadow — hard offset \"photocopy\" shadows *\u002F\n  --shadow-sm: 2px 2px 0 var(--color-ink);\n  --shadow-md: 4px 4px 0 var(--color-ink);\n  --shadow-lg: 6px 6px 0 var(--color-ink);\n  \u002F* clipped-element equivalents (clip-path kills box-shadow; use filter) *\u002F\n  --drop-sm: drop-shadow(2px 2px 0 var(--color-ink));\n  --drop-md: drop-shadow(4px 4px 0 var(--color-ink));\n  --drop-lg: drop-shadow(6px 6px 0 var(--color-ink));\n\n  \u002F* font — Google Fonts are the effective primaries *\u002F\n  --font-sans: 'Special Elite', 'Courier New', monospace;\n  --font-display: 'Oswald', 'Impact', 'Arial Narrow', sans-serif;\n  --font-mono: 'Special Elite', 'Courier New', ui-monospace, monospace;\n\n  \u002F* text scale *\u002F\n  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem;\n  --text-xl: 1.375rem; --text-2xl: 1.9rem; --text-3xl: 2.6rem;\n  --text-4xl: 3.6rem; --text-5xl: 5rem;\n\n  \u002F* space *\u002F\n  --space-1: 4px; --space-2: 7px; --space-3: 11px; --space-4: 15px; --space-6: 22px;\n  --space-8: 30px; --space-12: 44px; --space-16: 60px; --space-24: 90px;\n  --spacing-gap: var(--space-4);\n\n  \u002F* ease + transitions — stepped \"photocopier jitter\" *\u002F\n  --ease-standard: steps(4, end);\n  --transition-fast: 80ms;\n  --transition-normal: 160ms;\n\n  \u002F* elevation\u002Fstacking *\u002F\n  --z-dropdown: 10; --z-modal: 100; --z-toast: 200;\n\n  \u002F* texture *\u002F\n  --grain-opacity: 0.6;\n  --grain-svg: url(\"data:image\u002Fsvg+xml;utf8,\u003Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg'>\u003Cfilter id='n'>\u003CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'\u002F>\u003CfeColorMatrix type='saturate' values='0'\u002F>\u003C\u002Ffilter>\u003Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'\u002F>\u003C\u002Fsvg>\");\n  --torn-clip: polygon(0% 2%, 3% 0%, 8% 3%, 15% 0%, 22% 2%, 30% 0%, 40% 3%, 50% 0%, 60% 2%, 70% 0%, 80% 3%, 90% 0%, 100% 2%, 100% 98%, 92% 100%, 85% 97%, 75% 100%, 65% 98%, 55% 100%, 45% 97%, 35% 100%, 25% 98%, 15% 100%, 8% 97%, 0% 100%);\n}\n\n\u002F* LIGHT theme — \"photocopied paper\" (never pure white) *\u002F\n.theme-light {\n  --color-bg: #d8d2bf;\n  --color-surface: #cfc8b2;\n  --color-surface-strong: #c3ba9f;\n  --color-border: #55503f;\n  --color-text: #1a1815;\n  --color-text-muted: #57503e;\n  --color-primary: #a92e17;   \u002F* darkened rust for AA on paper *\u002F\n  --color-accent: #d9b23c;    \u002F* constant fill; always pair with --color-ink text *\u002F\n  --color-accent-text: #8a6c14;\n  --color-ink: #0c0b09;\n  --color-success: #4f6223;\n  --color-error: #b32410;\n  --grain-opacity: 0.35;\n}\n```\n\n* **Contrast pairing (mandatory, every theme):** light background tokens pair with dark text tokens; dark background tokens pair with light text tokens. `--color-primary` fills always pair with `--color-on-primary`; `--color-accent` fills always pair with `--color-ink`.\n* **Light mode background:** never pure white. Use the aged-paper tones above; `#fefefe` only if a near-white is genuinely required.\n* **Shadow\u002Fclip-path rule:** `clip-path` clips `box-shadow`. Any element using `--torn-clip` must use `filter: var(--drop-md)` (or sm\u002Flg) instead of `box-shadow` so the hard photocopy shadow follows the torn silhouette.\n\n**1.3 Mandatory Dark Mode Support**\n* The provided palette **is the dark theme** and is the default. The source spec explicitly requires validating in **both light and dark before publishing** — build the `.theme-light` block above and verify contrast in both.\n* **Implementation:** toggle `.theme-light` on `\u003Chtml>`; `:root` holds the dark palette. On first visit, honor `prefers-color-scheme`; afterwards, persist the user's choice in `localStorage` (e.g., key `grunge-theme`). Theme switching must require zero HTML restructuring.\n* **Toggle control:** a visible button in the nav showing a Google Material Symbol (`dark_mode` \u002F `light_mode`), with correct `aria-pressed` (true when dark) and descriptive `aria-label`, styled like a `.btn` variant. Announce the change via an `aria-live=\"polite\"` region.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n* Build all layout structures with **Flexbox**. Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment.\n* Mobile-first: single-column stacks on small viewports, multi-column rows from `768px` up (flex-wrap + `flex: 1 1 \u003Cmin>`). **No horizontal scrolling at any width from 320px to 1920px** — use `clamp()` for display type, `overflow-wrap`, and `body { overflow-x: hidden; }` as a safety net for rotated\u002Foversized decorative elements.\n* Anti-grid chaos is achieved via transforms (rotations, offsets, overlaps) *inside* a flex skeleton — never via layout hacks that break responsiveness.\n\n**1.5 Styling Approach**\n* Hand-written, token-driven custom CSS (the provided token system is the framework for this build). No CSS frameworks; if any utility layer is introduced it must map back to these tokens via `@layer`\u002F`@apply`-style grouping.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* Load **Special Elite** and **Oswald** via Google Fonts `\u003Clink>` in `\u003Chead>`. The source stacks listed `Courier New`\u002F`Impact` first — **explicit adjustment:** Google Fonts must be the effective primaries (as shown in the token block); system fonts remain fallbacks only.\n* Icons: **Google Material Symbols (Sharp style)** via Google Fonts link, e.g., `\u003Cspan class=\"material-symbols-sharp\">check\u003C\u002Fspan>`. **Forbidden:** raw inline SVG icon elements and local icon files.\n* **Exception clause:** the fractal-noise grain SVG data-URI is permitted **strictly as a CSS background texture** (`var(--grain-svg)`). It is a texture, not an icon, and must never appear as an inline HTML element.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button (`.btn`)**\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` — Oswald 700, 2px `--color-ink` border, hard offset shadow, stepped transition, minimum touch target **44×44px**. Variants: `.btn--primary` (primary fill + `--color-on-primary` text), `.btn--ghost` (transparent bg, ink border), `.btn--danger` (error-driven fill\u002Fborder, visually distinct in **both** themes).\n* **Hover:** `translate(-1px,-1px) rotate(-0.5deg)` + shadow steps up (`--shadow-md`), `cursor: pointer`.\n* **Focus:** `:focus-visible` → `outline: 3px solid var(--color-accent-text); outline-offset: 2px;` — never remove.\n* **Active\u002FPressed:** `translate(1px,1px)`, shadow removed — the \"stamped\" feel.\n* **Loading (`.btn--loading`):** disables interaction and prevents double-clicks; renders a CSS spinner (stepped rotation animation) or animated Material Symbol `progress`; **button dimensions must not change**; set `aria-busy=\"true\"`.\n* **Disabled:** `opacity: 0.5`, grayscale filter, `cursor: not-allowed`.\n* **Success\u002FError (`.btn--success` \u002F `.btn--error`):** temporary feedback states driven by `--color-success` \u002F `--color-error`, announced via `aria-live`.\n\n**2.2 Card (`.card`)**\n* **Default:** grain background (`var(--grain-svg)` + `background-blend-mode: overlay`), 2px `--color-border` border, `clip-path: var(--torn-clip)`, `filter: var(--drop-md)`, slight rotation (≤0.6deg on interactive cards; decorative cards may rotate more).\n* **Hover (interactive cards only):** `translateY(-2px)` + rotation shift + shadow steps up to `--drop-lg`.\n* **Focus-within:** border shifts to `--color-accent-text` when a child link\u002Fbutton receives focus.\n* **Loading (`.card--skeleton`):** photocopier \"light-bar\" sweep shimmer animation defined in CSS; must not cause layout jumps; `aria-hidden=\"true\"`; disabled under reduced motion.\n* **Empty state (`.card--empty`):** structured fallback with a Material Symbol and clear guidance text.\n\n**2.3 Form & Input (`.input-group`)**\n* **Structure:** flex-column `.input-group` wrapping `\u003Clabel>`, `\u003Cinput class=\"input\">`, and a dedicated `.input-error` container (`aria-live=\"polite\"`, empty until needed).\n* **States:** empty; focused (primary border + `--shadow-sm` per spec); filled; **valid** (`.input--valid`: success border + Material Symbol `check`); **invalid** (`.input--invalid`: error border, `--color-error` message, Material Symbol `error`, message linked via `aria-describedby`); disabled (opacity + `not-allowed`); read-only (dashed border, muted).\n* Never rely on color alone — icons + text messages always accompany valid\u002Finvalid states.\n\n**2.4 FAQ Accordion (`.faq-item`)**\n* Pattern per item: `\u003Ch3>\u003Cbutton class=\"faq-trigger\" aria-expanded=\"false\" aria-controls=\"faq-panel-N\">Question \u003Cspan class=\"material-symbols-sharp\">expand_more\u003C\u002Fspan>\u003C\u002Fbutton>\u003C\u002Fh3>` + `\u003Cdiv class=\"faq-panel\" id=\"faq-panel-N\" role=\"region\">Answer\u003C\u002Fdiv>`.\n* JS toggles `aria-expanded` and panel visibility; CSS animates open\u002Fclose (`grid-template-rows: 0fr → 1fr` or height) with `var(--transition-normal) var(--ease-standard)`; chevron rotates 90deg.\n* Fully keyboard operable (native button), visible focus, hover feedback on triggers.\n\n**2.5 Overlay\u002FModal (only if introduced)**\n* The requested sections do not require a modal — do not add one gratuitously. If any overlay becomes necessary: centered flex container (`align-items: center`), backdrop, Material Symbol close button, Esc + overlay-click close, focus trapping, animated open\u002Fclose, `z-index: var(--z-modal)`, correct `role=\"dialog\"`\u002F`aria-modal` semantics.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by default:** fluid `clamp()` sizing, flex-wrap breakpoints, zero horizontal overflow.\n* **Smooth (stepped) animations:** every state change transitions with `transition: \u003Cproperty> var(--transition-fast|normal) var(--ease-standard)`. Extend the spec's `prefers-reduced-motion` block to **all** animated elements: no transitions, no transforms, no rotations, no skeleton\u002Fshimmer animation, no grain flicker.\n* **Accessibility (a11y):** WCAG AA contrast in **both** themes (spot-validate: body text, muted text, primary button, accent badge, featured pricing card, success\u002Ferror text). Never color-only state communication. Semantic HTML5 landmarks (`header`, `nav`, `main`, `section`, `article`, `blockquote`, `footer`), exactly one `h1`, logical heading order, a visually-hidden skip-to-content link, correct ARIA on all custom widgets (accordion, theme toggle, mobile menu), full keyboard operability, and `aria-live` regions for dynamic feedback (form errors, loading, theme change, toasts).\n* **Controlled chaos clause:** \"broken legibility\" applies to **decorative display type only** (overlaps, rotations, misprint shadows, stroke ghosts). All informational text — body copy, labels, buttons, prices, FAQ answers — stays unrotated (or ≤0.5deg), ≥4.5:1 contrast, fully legible. Interactive elements keep ≥44×44px hit targets regardless of rotation, and decorative overlaps must never cover interactive elements.\n* **Mandatory visual feedback:** every click, hover, focus, and submission triggers a visible state change.\n* **Destructive actions:** `.btn--danger` must be visually distinct in both light and dark themes.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n* **Files:** separate `index.html`, `style.css`, `script.js`. One deferred `\u003Cscript src=\"script.js\" defer>` reference; Google Fonts links (Special Elite, Oswald, Material Symbols Sharp) in `\u003Chead>`.\n* **Naming:** BEM exclusively (`.block__element--modifier`), consistent with the spec's `.btn--primary` convention (e.g., `.card--featured`, `.faq-trigger`, `.input--invalid`, `.section-label`). Never mix conventions.\n* **CSS organization:** (1) tokens (`:root` + `.theme-light`), (2) base\u002Freset, (3) texture utilities (grain, splatter, misprint), (4) components, (5) section styles, (6) responsive + reduced-motion — with comment headers per layer.\n* **Copy:** invent coherent, original **English** copy for a fictional brand fitting the 1990s underground zine aesthetic (raw, anti-corporate, punchy). **No lorem ipsum.** All user-facing text in English.\n* **No external image assets:** every texture (grain, splatter, torn edges, misprints) is CSS-only via the data-URI, gradients, blend modes, clip-paths, and text-shadows.\n* **JS scope:** theme toggle + persistence, FAQ accordion, mobile nav menu, and Final CTA form validation with loading\u002Fsuccess\u002Ferror states. No libraries, no inline scripts, no unrequested widgets.\n\n---\n\n## 5. PAGE COMPOSITION & SECTION-BY-SECTION REQUIREMENTS\n\n**Global motifs (define once, reuse everywhere):**\n* `.section-label` — every section `h2` rendered as a rotated \"zine tab\" strip: Oswald uppercase, `--color-primary` or `--color-accent` fill with correct contrast pairing, hard shadow, alternating rotation between −1deg and +1.5deg.\n* `.splatter` — CSS-only dirt\u002Fsplatter via layered `radial-gradient`s (`--color-primary`\u002F`--color-ink`, low opacity), absolutely positioned, `aria-hidden=\"true\"`, `pointer-events: none`.\n* `.misprint` — photocopy misregistration on display type: layered `text-shadow` (e.g., `3px 2px 0 var(--color-primary)`) and\u002For `-webkit-text-stroke` ghost offsets.\n* Global grain: `body::before` fixed overlay using `var(--grain-svg)`, `mix-blend-mode: overlay`, `opacity: var(--grain-opacity)`, `pointer-events: none`.\n\n**5.1 Header\u002FNav (`.nav`):** brand wordmark (Oswald, slight rotation), anchor links (Features, How It Works, Testimonials, Pricing, FAQ), theme toggle, `.btn--primary` CTA. Grain background, 3px ink bottom border, `rotate(-0.4deg)` per spec (contained — no horizontal scroll). Mobile: links collapse behind a Material Symbol `menu` button (`aria-expanded`) toggling a flex-column panel at `z-index: var(--z-dropdown)`; Escape closes it.\n\n**5.2 Hero:** layered collage — oversized overlapping headline lines (Oswald, `clamp()` up to `--text-5xl`, mixed rotations, one word in `--color-primary` with `.misprint`), `.badge` rotated −2deg, Special Elite subcopy in `--color-text-muted`, two CTAs (`.btn--primary` + `.btn--ghost`), a torn decorative panel (`--torn-clip`) behind, `.splatter` accents. Single `h1`; logical DOM order; decorations never cover CTAs.\n\n**5.3 Features (3 `.card`s):** Material Symbol icon per card (accent-colored), `h3` Oswald uppercase, Special Elite body; alternating rotations (−0.5deg \u002F 0.4deg \u002F −0.3deg); drop-shadow per the clip-path rule; flex-wrap → three-across at ≥768px.\n\n**5.4 How It Works (3 steps):** giant degraded numerals (01\u002F02\u002F03 — Oswald, text-stroke or low opacity, rotated), step title + copy, torn dashed connector (`repeating-linear-gradient`), staggered vertical offsets on desktop (anti-grid), single column on mobile.\n\n**5.5 Testimonials (3 quotes):** torn \"zine clipping\" cards — `blockquote` (Special Elite), `cite` (author + role), Material Symbol `format_quote`, alternating rotations, one featured with an accent border; grain; flex-wrap responsive.\n\n**5.6 Pricing (3 tiers):** `.card` per tier; middle tier `.card--featured` — `--color-primary` fill with `--color-on-primary` text (contrast pairing enforced), rotated `.badge` \"MOST POPULAR\", `--drop-lg`; Oswald price; feature list with Material Symbol `check` items; `.btn--primary` CTA on the featured tier, `.btn` on the others. Validate the featured card's contrast in both themes.\n\n**5.7 FAQ:** 5–6 items per spec 2.4, separated by 2px `--color-ink`\u002F`--color-border` rules, hover + focus feedback on triggers.\n\n**5.8 Final CTA:** big overlapping Oswald statement; `.input-group` email capture + `.btn--primary` submit (flex row → column on mobile). Full state machine: submit → `.btn--loading` (spinner, `aria-busy`) → invalid email shows `.input--invalid` + `aria-live` error → valid shows `.btn--success` + success message (\"You're on the list\") via `aria-live`. Simulate async with a short `setTimeout`.\n\n**5.9 Footer:** 3–4 flex-wrap columns of secondary links (pointing to page anchors where possible), social icons via Material Symbols, brand wordmark, copyright, 3px ink top border, muted text at ≥4.5:1 contrast.\n\n---\n\n## 6. ACCEPTANCE CHECKLIST (validate before publishing — in LIGHT and DARK)\n\n1. Zero `style=\"\"` attributes, zero inline handlers, exactly one deferred script.\n2. Both themes pass AA contrast on: body text, muted text, primary button, accent badge, featured pricing card, success\u002Ferror text.\n3. Theme toggle persists across reload; first visit honors `prefers-color-scheme`; `aria-pressed`\u002F`aria-label` correct.\n4. Full keyboard-only pass: every interactive element reachable, visible focus ring, accordion and mobile menu operable, no focus traps.\n5. No horizontal scroll from 320px to 1920px.\n6. `prefers-reduced-motion: reduce` disables all transitions, transforms, rotations, and shimmer.\n7. All icons are Material Symbols; no inline SVGs in HTML (grain data-URI in CSS only).\n8. Every requested section present, in order, with real English copy; buttons, cards, and inputs demonstrate all required states.\n",1791954985174]