[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-494-Street-Art-Graffiti":3},"# CODING AGENT PROMPT — COMPLETE LANDING PAGE: \"STREET ART \u002F GRAFFITI\" (SINGLE-ATTEMPT BUILD)\n\n**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Produce the complete, final code for a marketing landing page in your **first response** — full `index.html`, `style.css`, and `script.js`. No scaffolding, no TODOs, no clarifying questions.\n\n**Product context (invent coherent details, write real copy):** Build for **\"BURNER\"** — a fictional platform connecting graffiti writers to legal walls, crews, and supply drops. Era direction: 1970s–present writer culture — NYC subway whole-car pieces of the '70s–'80s plus contemporary legal-wall burners. **All user-facing copy must be written in English**, in an energetic writer-culture voice (\"burners,\" \"pieces,\" \"throw-ups,\" \"can control,\" \"crew\"). No lorem ipsum.\n\n**Sections (in this order):** sticky Header\u002FNav → 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. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n- All styling lives in `style.css`. **Forbidden:** `style=\"...\"` attributes, `\u003Cstyle>` blocks in HTML, and presentational HTML attributes.\n- Target everything via class\u002FID selectors. HTML must remain semantic and style-agnostic — retheming the site must require CSS edits only.\n- The token and component specs in §1.2 and §3 below are the **authoritative design spec** (no external reference files exist).\n\n**1.2 CSS Variables & Theme Tokens (Mandatory)**\nDefine ALL tokens in `:root` (dark = default, per source spec) and mirror the full color set in a `.light` theme class (§1.3). Never hardcode hex values outside token definitions.\n\n```css\n:root {\n  \u002F* ===== Street Art \u002F Graffiti — DARK theme (default per source spec) ===== *\u002F\n  \u002F* color *\u002F\n  --color-bg: #2b2b2b;\n  --color-surface: #383838;\n  --color-surface-2: #454545;\n  --color-text: #f5f5f0;\n  --color-text-muted: #b8b8b0;\n  --color-primary: #ff3b3b;\n  --color-accent: #ffd400;\n  --color-cyan: #26c6da;\n  --color-keyline: #0a0a0a;\n  \u002F* mandatory semantic aliases *\u002F\n  --primary: var(--color-primary);\n  --secondary: var(--color-accent);\n  --bg-primary: var(--color-bg);\n  --bg-secondary: var(--color-surface);\n  --text-primary: var(--color-text);\n  --text-secondary: var(--color-text-muted);\n  --text-success: var(--color-cyan);\n  --text-error: #ff6b6b;\n  --border-default: var(--color-keyline);\n  --border-success: var(--color-cyan);\n  --border-error: var(--color-primary);\n  \u002F* on-fill ink tokens (contrast pairing) *\u002F\n  --color-on-primary: var(--color-keyline);  \u002F* black on #ff3b3b ≈ 5.4:1 *\u002F\n  --color-on-accent: var(--color-keyline);   \u002F* black on #ffd400 — both modes *\u002F\n  --color-accent-ink: #ffd400;               \u002F* accent used AS text on dark *\u002F\n  \u002F* radius *\u002F\n  --radius-sm: 2px; --radius-md: 8px; --radius-lg: 18px; --radius-pill: 999px;\n  \u002F* shadow *\u002F\n  --shadow-sm: 0 2px 8px rgba(0,0,0,0.30);\n  --shadow-md: 0 6px 18px rgba(0,0,0,0.40);\n  --shadow-spray: 0 0 0 4px var(--color-keyline), 0 10px 24px rgba(0,0,0,0.45);\n  --shadow-drip: 0 8px 0 -2px rgba(255,59,59,0.35), 0 12px 4px -4px rgba(0,0,0,0.4);\n  \u002F* font *\u002F\n  --font-display: 'Titan One', 'Archivo Black', Impact, sans-serif;\n  --font-sans: 'Archivo Black', 'Helvetica Neue', system-ui, sans-serif;\n  --font-body: 'Archivo', 'Helvetica Neue', system-ui, sans-serif;\n  --font-mono: ui-monospace, monospace;\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.75rem; --text-3xl: 2.25rem; --text-4xl: 3rem; --text-5xl: 4rem;\n  \u002F* space *\u002F\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  --spacing-gap: var(--space-4);\n  \u002F* ease & transitions *\u002F\n  --ease-standard: cubic-bezier(0.3, 0.9, 0.4, 1.2);\n  --transition-fast: 120ms var(--ease-standard);\n  --transition-normal: 240ms var(--ease-standard);\n  \u002F* stacking *\u002F\n  --z-dropdown: 1000; --z-modal: 1100; --z-toast: 1200;\n  \u002F* signature effects *\u002F\n  --spray-texture: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.05) 0, transparent 3%),\n                   radial-gradient(circle at 70% 60%, rgba(255,255,255,0.04) 0, transparent 4%),\n                   radial-gradient(circle at 40% 80%, rgba(255,255,255,0.04) 0, transparent 3%);\n  --wildstyle-outline: 0 0 0 3px var(--color-keyline), 0 0 0 5px var(--color-accent);\n  --bg-image: linear-gradient(165deg, #383838 0%, #2b2b2b 55%, #1f1f1f 100%);\n}\n```\n\n- **Contrast pairing:** every light background token pairs with dark text tokens and every dark background token pairs with light text tokens — enforced in BOTH themes.\n- **Light-mode ground is concrete grey — never pure white.** If a near-white panel is genuinely required, use `#fefefe`, not `#ffffff`.\n- **Ink-vs-fill rule:** `--color-accent` is a FILL color (always paired with `--color-on-accent` black text). When accent, cyan, or red appear AS TEXT, use the ink variants (`--color-accent-ink`, the light-mode `--color-cyan`\u002F`--color-primary` values). In dark mode, `#ff3b3b` is reserved for large text and fills; small red text uses `--text-error`.\n\n**1.3 Mandatory Dark Mode**\n- Source spec note (translated): *\"The source does not declare modes; validate both light and dark before publishing.\"* → Both themes are required and must both pass validation.\n- The provided palette = **dark theme (default `:root`)**. Derive the **light theme** as a concrete-grey ground (suggested tokens below — adjust only as needed to satisfy WCAG AA):\n\n```css\n\u002F* ===== LIGHT theme — concrete-grey ground (derived; validate AA before publishing) ===== *\u002F\n.light {\n  --color-bg: #e3e3db;\n  --color-surface: #ecece4;\n  --color-surface-2: #f5f5ef;   \u002F* near-white; #fefefe if a pure-white panel is ever needed *\u002F\n  --color-text: #141414;\n  --color-text-muted: #52524b;\n  --color-primary: #d61f1f;     \u002F* darkened red ink for light ground *\u002F\n  --color-accent: #ffd400;      \u002F* FILL ONLY — always pair with --color-on-accent *\u002F\n  --color-accent-ink: #8a7000;  \u002F* accent used AS text on light surfaces *\u002F\n  --color-cyan: #0a6f80;        \u002F* darkened cyan ink for light ground *\u002F\n  --color-keyline: #0a0a0a;    \u002F* hard black keylines stay *\u002F\n  --color-on-primary: #fefefe;  \u002F* near-white ink on darkened red ≈ 5.5:1 *\u002F\n  --text-error: #c62828;\n  --shadow-spray: 0 0 0 4px var(--color-keyline), 0 10px 24px rgba(0,0,0,0.18);\n  --shadow-drip: 0 8px 0 -2px rgba(214,31,31,0.25), 0 12px 4px -4px rgba(0,0,0,0.25);\n  --spray-texture: radial-gradient(circle at 20% 30%, rgba(0,0,0,0.05) 0, transparent 3%),\n                   radial-gradient(circle at 70% 60%, rgba(0,0,0,0.04) 0, transparent 4%),\n                   radial-gradient(circle at 40% 80%, rgba(0,0,0,0.04) 0, transparent 3%);\n  --bg-image: linear-gradient(165deg, #ecece4 0%, #e3e3db 55%, #d4d4ca 100%);\n}\n```\n\n- **Implementation:** apply the light token set via the `.light` class AND mirror it inside `@media (prefers-color-scheme: light) { :root:not(.dark) { … } }` so no-JS visitors get their OS preference; the JS-applied `.light`\u002F`.dark` classes always win. Background and text variables must flip with zero HTML restructuring.\n- **Theme toggle:** a visible header button using Material Symbols `light_mode`\u002F`dark_mode`, with correct `aria-pressed` and `aria-label` (\"Switch to light mode\" \u002F \"Switch to dark mode\"); persists via `localStorage` (e.g., key `burner-theme`); falls back to `prefers-color-scheme` on first visit.\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: rows collapse to columns on small viewports; **no horizontal scrolling at any width ≥ 320px**; all tap targets ≥ 44×44px.\n\n**1.5 Styling Approach**\n- The token-driven custom CSS below is the single source of truth. Tailwind is permitted **only** for structural layout utilities (flex\u002Fgrid\u002Fgap), and any utility used must resolve back to the CSS variables above. Never mix naming conventions — BEM everywhere (§6).\n\n**1.6 Google Fonts & Icons (Mandatory)**\n- Google Fonts `\u003Clink>`: **Titan One** (display), **Archivo Black** (headings\u002FUI emphasis), **Archivo** 400\u002F600\u002F700 (body copy, bound to `--font-body` — body paragraphs use `--font-body` for readability).\n- Icons: **Google Material Symbols (Rounded, FILL 1)** loaded via the Google Fonts stylesheet and used by ligature name. **Forbidden:** inline SVGs, local icon files, emoji-as-icons.\n\n---\n\n## 2. THEME VISUAL LANGUAGE — THE GRAFFITI SIGNATURE (repeat everywhere)\n\n- **Signature move:** bold interlocking bubble\u002Fwildstyle letterforms with a hard black keyline plus a thin color pinstripe, spray-can grain texture over a concrete-grey ground. Apply to every major component — this is the identity.\n- **Keyline + pinstripe:** use `--wildstyle-outline` and `--shadow-spray` on primary components (buttons, cards, badges, chips, hero panel, featured pricing tier).\n- **Wildstyle display type:** `--font-display` (Titan One) for the `\u003Ch1>` and section headings; fake the keyline with a stacked `text-shadow` (8-direction black keyline + one accent pinstripe offset + soft drop). Rotate headline words ±1–2° for tagging energy; keep body copy upright and readable.\n- **Spray grain:** layer `--spray-texture` over `body` and card surfaces; add denser grain patches via extra `radial-gradient` layers where the composition needs it.\n- **Drips:** CSS-only drips via `::before`\u002F`::after` (rounded-bottom blobs with keyline `box-shadow`) hanging from the hero headline panel, badges, and the featured pricing card. **No images anywhere.**\n- **High-contrast fills:** red \u002F yellow \u002F cyan appear as bold fill blocks with hard black keylines — never as washed-out pastels.\n- **Optional flourish:** one CSS-only marquee ticker strip (`aria-hidden`, Titan One, keyline text: \"WILDSTYLE • THROW-UP • BURNER • PIECE • TOP-TO-BOTTOM •\") between Hero and Features; must be static under `prefers-reduced-motion`.\n\n---\n\n## 3. COMPONENT DESIGN SPECIFICATIONS\n\nUse these base classes verbatim as the foundation — extend, do not dilute. **One required adjustment:** `.btn--primary` must use `color: var(--color-on-primary)` instead of `var(--color-text)` to pass WCAG AA (black-on-red in dark ≈ 5.4:1; `#fefefe`-on-red in light ≈ 5.5:1) — this also strengthens the keyline aesthetic.\n\n```css\nbody { margin: 0; color: var(--color-text); font-family: var(--font-body); background: var(--bg-image);\n       background-image: var(--spray-texture), var(--bg-image); background-attachment: fixed; min-height: 100vh; }\n.nav { display: flex; gap: var(--space-4); align-items: center; padding: var(--space-3) var(--space-6);\n       background: var(--color-surface); border-bottom: 4px solid var(--color-keyline);\n       box-shadow: 0 2px 0 var(--color-accent); }\n.btn { font: 800 var(--text-base)\u002F1 var(--font-display); letter-spacing: .02em; color: var(--color-text);\n       padding: var(--space-3) var(--space-6); border-radius: var(--radius-md);\n       background: var(--color-surface-2); box-shadow: 0 0 0 3px var(--color-keyline); cursor: pointer;\n       transition: transform var(--transition-fast), box-shadow var(--transition-fast); }\n.btn:hover { transform: rotate(-1deg) translateY(-2px); box-shadow: var(--wildstyle-outline); }\n.btn:active { transform: scale(0.97) rotate(0); }\n.btn:focus-visible { outline: 3px solid var(--color-cyan); outline-offset: 3px; }\n.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: 0 0 0 3px var(--color-keyline); }\n.btn--primary { background: var(--color-primary); color: var(--color-on-primary); font-weight: 900;\n                box-shadow: var(--wildstyle-outline); }\n.btn--primary:hover { box-shadow: var(--wildstyle-outline), var(--shadow-drip); }\n.card { background: var(--color-surface); background-image: var(--spray-texture);\n        border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-spray); }\n.input { width: 100%; box-sizing: border-box; color: var(--color-text); font: var(--text-base) var(--font-body);\n         padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);\n         background: var(--color-surface-2); box-shadow: 0 0 0 3px var(--color-keyline); }\n.input::placeholder { color: var(--color-text-muted); }\n.input:focus { outline: none; box-shadow: 0 0 0 3px var(--color-keyline), 0 0 0 5px var(--color-cyan); }\n.badge { display: inline-flex; align-items: center; gap: .4em; font: 800 var(--text-xs)\u002F1 var(--font-display);\n         letter-spacing: .04em; padding: .35em .85em; border-radius: var(--radius-pill);\n         background: var(--color-accent); color: var(--color-on-accent); box-shadow: 0 0 0 3px var(--color-keyline); }\n@media (prefers-reduced-motion: reduce) { \u002F* extend to cover EVERY animation on the page *\u002F }\n```\n\n**3.1 Buttons — every state, styled via classes**\n- **Default:** flex, `align-items: center`, `justify-content: center`, `gap: 0.5rem`; ≥44px touch target.\n- **Hover:** rotation\u002Flift + `--wildstyle-outline`; `cursor: pointer`.\n- **Focus-visible:** 3px cyan outline, 3px offset — never remove.\n- **Active\u002Fpressed:** `transform: scale(0.97)`, rotation reset.\n- **Loading (`.btn--loading`):** `pointer-events: none` + `aria-busy=\"true\"`; spinner = rotating Material Symbol (`progress`) or CSS ring; button dimensions must not change; prevents double submits.\n- **Disabled:** `opacity: .5`, `filter: grayscale(1)`, `cursor: not-allowed`, transforms off.\n- **Success\u002FError (`.btn--success`, `.btn--error`):** temporary feedback states driven by `--text-success`\u002F`--text-error` (used by the Final CTA form).\n- **Variants:** `.btn` (default surface), `.btn--primary`, `.btn--ghost` (transparent, keyline underline on hover), `.btn--danger` (visually distinct in BOTH themes).\n\n**3.2 Cards**\n- **Default:** flexbox column, surface + spray texture, `--radius-lg`, `--shadow-spray`.\n- **Hover:** `translateY(-2px)` + shadow shift (grow `--shadow-spray` or add `--shadow-drip`).\n- **Focus-within:** keyline\u002Fcyan border highlight when a child link\u002Fbutton receives focus.\n- **Skeleton (`.card--skeleton`):** shimmer animation defined in CSS (gradient sweep) — define it even if the static page never mounts it.\n- **Empty state (`.card--empty`):** Material Symbol + short guidance text layout, defined in CSS.\n\n**3.3 Forms & Inputs (Final CTA email capture)**\n- **Structure:** `.input-group` flex column wrapping a `\u003Clabel>`, the `.input`, and a dedicated error container.\n- **States via classes:** empty, focus (keyline + cyan ring), filled, valid (`.input--valid`: cyan border + `check` icon), invalid (`.input--invalid`: red border + `error` icon + message), disabled, read-only.\n- **Error feedback:** dedicated element linked via `aria-describedby` with `aria-live=\"polite\"`; icon + text — **never color alone**. Success confirmation is also announced via `aria-live`.\n\n**3.4 FAQ Accordion (custom disclosure widget)**\n- Each item: `\u003Cbutton class=\"faq__trigger\" aria-expanded=\"false\" aria-controls=\"faq-panel-n\">` + `\u003Cdiv id=\"faq-panel-n\" role=\"region\">`.\n- Material Symbol `expand_more` rotates 180° on open; animate expansion via CSS (`grid-template-rows: 0fr → 1fr` or equivalent) — instant under reduced motion.\n- Fully keyboard operable (native buttons); single-open policy; first item open by default; visible focus states.\n\n**3.5 Modal \u002F Popup (conditional)**\n- No modal is required by the section list. If you introduce any overlay, it must: use `--z-modal`, be a flex-centered dialog with a backdrop, animate open\u002Fclose, trap focus, close on `Esc` and overlay click, and provide a Material Symbol `close` button.\n\n---\n\n## 4. PAGE SECTIONS BLUEPRINT\n\nAll content sections live in `\u003Cmain>`; exactly one `\u003Ch1>` (Hero); each section is a `\u003Csection>` with an `\u003Ch2>` and an `id` matching the nav anchors. Copy: real, specific, English, writer-culture voice.\n\n**4.1 Header\u002FNav (sticky):** `.nav` per spec. Brand wordmark in Titan One with keyline treatment. Anchor links to every section. Theme toggle (§1.3). Primary CTA \"Find a Wall\". Mobile: hamburger (`menu` icon) disclosure with `aria-expanded`, closing on `Esc` and link click. Include a skip-to-content link.\n\n**4.2 Hero:** full-bleed concrete ground + spray texture; `.badge` (e.g., \"FRESH PAINT • SINCE '73\"); wildstyle `\u003Ch1>` (e.g., \"OWN THE WALL.\") with keyline text-shadow and CSS drips; muted subhead explaining the platform; `.btn--primary` (\"Find Your Wall\") + `.btn--ghost` (\"See the Burners\"); a stat-chip row (legal walls \u002F writers \u002F cities) using keylined pills. Optional marquee ticker below (§2).\n\n**4.3 Features (3 cards):** section heading with keyline underline; three `.card`s color-coded red \u002F yellow \u002F cyan via keylined icon chips with Material Symbols — e.g., Legal Wall Map (`map`), Crew Pages (`groups`), Supply Drops (`local_shipping`). Archivo Black title + 2–3 sentence body each. Hover\u002Ffocus-within per §3.2.\n\n**4.4 How It Works (3 steps):** 01 \"Scout the Wall\" → 02 \"Plan the Piece\" → 03 \"Paint & Burn\". Oversized Titan One numerals with `--shadow-drip`; steps connected by a dashed CSS spray line; icon + title + body each; column stack on mobile.\n\n**4.5 Testimonials:** three quote `.card`s with fictional writer aliases, crews, and cities (e.g., \"REKA — TWS CREW, BROOKLYN\"); 5-star rating via `star` Material Symbols with `aria-label`; avatar = initials in a keylined circle (no external images).\n\n**4.6 Pricing (3 tiers):** `.card` tiers named **Toy** (free) \u002F **Writer** (featured) \u002F **King** (premium). Featured tier: accent fill or `--wildstyle-outline`, slight `rotate(-1deg)`, `--shadow-drip`, and a `.badge` (\"MOST DOPE\"). Feature lists with `check` icons; per-tier CTA (featured uses `.btn--primary`). Real prices and feature copy.\n\n**4.7 FAQ:** 5–6 items per §3.4 covering legal walls, skill level, supplies, crews, and cancellations.\n\n**4.8 Final CTA:** full-width panel with spray texture + drips; wildstyle `\u003Ch2>`; email capture per §3.3 with loading → success button states (\"You're on the list\" + `check` icon).\n\n**4.9 Footer:** brand + one-liner; secondary link groups (About, Walls, Community, Shop, Legal); social icon links with `aria-label`; copyright line; \"Back to top\" link. All links get visible hover\u002Ffocus feedback.\n\n---\n\n## 5. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid type via the token scale with `clamp()`; no horizontal overflow from 320px to desktop.\n- **Smooth animations:** `transition: var(--transition-normal)` on all state changes; `--ease-standard` for the energetic feel; **`prefers-reduced-motion: reduce`** disables transforms, marquee, drip animation, and smooth scrolling — extend the provided block to cover every animation you add.\n- **Accessibility (a11y):** WCAG AA contrast in BOTH modes (validate per the §1.2 ink rules); never rely on color alone for state; semantic HTML5 landmarks; correct ARIA on the theme toggle, mobile menu, accordion, and form; logical DOM\u002Ffocus order; full keyboard operability; `aria-live` regions for dynamic form feedback; visible focus styles everywhere.\n- **Mandatory visual feedback:** every click, hover, focus, and submission produces a visible state change.\n- **Destructive\u002Fdistinct actions:** `.btn--danger` must be visually distinct in both light and dark themes.\n- **JS behaviors (`script.js`):** theme toggle + persistence; mobile menu; FAQ accordion; email validation with loading\u002Fsuccess button states; smooth anchor scrolling (respecting reduced motion, with `scroll-margin-top` for the sticky nav); optional IntersectionObserver reveal animations that activate only when JS adds a readiness class — content must be fully visible without JS.\n\n---\n\n## 6. DELIVERABLE & OUTPUT FORMAT\n\n- **Files:** `index.html`, `style.css`, `script.js`. HTML links the stylesheet in `\u003Chead>` and includes **a single** `\u003Cscript src=\"script.js\" defer>` — no other script blocks.\n- **Naming:** BEM consistently (`.nav__links`, `.btn--primary`, `.faq__trigger`, `.tier--featured`, `.input-group__error`…). Never mix conventions.\n- **Copy:** all user-facing copy in **English**, real and specific; placeholders only where content was genuinely unspecified (there should be none).\n- **Output the complete final code in your first response** — all three files, fully implemented.\n- **Pre-delivery validation checklist:** AA contrast in light AND dark (the source spec declared no modes — both must be validated); keyboard-only walkthrough; no horizontal scroll; reduced motion honored; all component states present (hover\u002Ffocus\u002Factive\u002Floading\u002Fdisabled\u002Fvalid\u002Finvalid); zero inline styles; theme choice persists across reload.\n",1791954988150]