[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-812-Gen-Z-Chaos-Maximalism":3},"# CODING AGENT PROMPT — BUILD TASK: \"GEN Z CHAOS \u002F MAXIMALISM\" LANDING PAGE\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Your task is to code a **complete, production-quality landing page** on the **first attempt**. Deliver finished, fully working code with no gaps, no partial scaffolds, and no \"to be implemented\" sections.\n\n**Theme:** Gen Z Chaos \u002F Maximalism — chaotic, maximalist, colorful, expressive. Keywords: chaos, clutter, stickers, raw, collage, mixed media, loud, internet culture, ironic. Era: 2023+ Internet Core.\n\n**Palette (clashing brights):** Neon magenta `#FF00FF`, neon green `#00FF00`, neon yellow `#FFFF00`, electric blue `#0000FF`, plus saturated gradient\u002Frainbow mixes. Light mode reads as a cut-paper **zine collage**; dark mode reads as **neon-on-black internet core**. Both Light and Dark modes are required in full.\n\n**Required sections (in this order):** Global Header\u002FNav (with theme toggle), Hero, Features (3 cards), How It Works (3 steps), Testimonials (3 quotes), Pricing (3 tiers), FAQ (accordion), Final CTA (email capture), Footer with secondary links.\n\n**Copy:** Write ALL user-facing copy in **English**, in an ironic, hyper-online Gen Z internet-culture voice (headline energy: \"BE NORMAL ABOUT THE INTERNET (CHALLENGE: FAILED)\"). Author real copy for every section. **Lorem ipsum is forbidden.**\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`. The `style=\"...\"` attribute is **forbidden** anywhere in the HTML.\n* All design properties, layout rules, and states are applied via class or ID selectors only.\n* HTML stays semantic and style-agnostic; restyling the site must never require markup edits. All chaos effects (rotations, scatter, jitter, marquee, blend modes) are CSS classes — never inline styles.\n\n**1.2 CSS Variables (`var(--...)`) & Theme Tokens**\nDefine all tokens in `:root` (light) and override in `.dark`. Required tokens:\n`--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`, `--radius-sm`, `--radius-md`, `--radius-lg`, `--shadow-sm`, `--shadow-md`, `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`, `--z-dropdown`, `--z-modal`, `--z-toast`.\nTheme-specific extras (also required): `--neon-magenta`, `--neon-green`, `--neon-yellow`, `--neon-blue`, `--font-display`, and rotation utilities for scatter (e.g., `.rotate-1`…`.rotate-4` with fixed values).\n\n**Token rules (mandatory):**\n* **Light mode:** `--bg-primary` is NOT `#ffffff` — use `#fefefe` or a warm zine-paper off-white that fits the collage mood. `--text-primary` is near-black (`#0A0A0A`).\n* **Dark mode:** `--bg-primary` near-black (`#0A0A0A` or darker), `--text-primary` `#fefefe` or neon-tinted light. Neon accents stay saturated and pop against black.\n* **Contrast pairing is mandatory in BOTH themes:** light backgrounds pair with dark text; dark backgrounds pair with light text. No exceptions.\n* **Neon fill\u002Ftext pairing (enforced everywhere):** text on neon-yellow, neon-green, or neon-magenta fills must be near-black (≥ 4.5:1); text on electric-blue fills must be `#fefefe` (black on blue fails contrast). Never place neon text on a same-family background.\n* **Neon as text:** on light backgrounds, neon hues are restricted to **fills, borders, stickers, and large display type** (magenta only, ≥ 3:1) — never body copy. On dark backgrounds, magenta\u002Fgreen\u002Fyellow text is allowed (high contrast); electric blue is **never** used as text on dark at body size — use it for fills, borders, and glows, or a lightened blue variant for display type. Body copy always uses `--text-primary` \u002F `--text-secondary`.\n* Hard offset \"sticker\" shadows (e.g., `4px 4px 0 var(--text-primary)`) may define `--shadow-sm` \u002F `--shadow-md` to fit the theme; tokens must exist and be used.\n\n**1.3 Mandatory Dark Mode Support**\n* Define dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `\u003Chtml>`.\n* `script.js`: on load, read the persisted theme from `localStorage`; if absent, fall back to `prefers-color-scheme`; apply the `.dark` class. The toggle flips and persists the choice.\n* A **visible, sticker-styled toggle in the header** with correct `aria-pressed` state and a descriptive `aria-label`.\n* All effects (blend modes, saturation, shadows, gradients) must be re-tuned per theme — no washed-out or unreadable combinations in either mode.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n* Build all layout structures with Flexbox (Tailwind flex utilities or custom flex classes).\n* Every flex container defaults to `align-items: center` unless an exception is explicitly justified.\n* Mobile-first: hero stacks, cards\u002Fpricing\u002Ftestimonials collapse to one column, marquees remain single-line, nav links wrap gracefully. **Zero horizontal scrolling** — every scattering parent is `position: relative` with `overflow: hidden`, and `overflow-x: clip` is set on `html`\u002F`body`. No absolutely positioned element may create overflow.\n\n**1.5 Framework Default & Tailwind CSS Integration**\n* Use Tailwind CSS, or clean custom CSS driven by Tailwind's `@layer` \u002F `@apply` directives.\n* All utilities must map back to the CSS variables; author reusable component classes: `.btn`, `.card`, `.input-group`, `.sticker`, `.marquee`.\n* One component system with modifiers — do not fork multiple button\u002Fcard variants.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* Include Google Fonts via `\u003Clink>` (with preconnect): **\"Bungee\"** for display\u002Fheadings (bound to `--font-display`) and **\"Space Grotesk\"** for body (bound to `--font-base`). Apply via CSS variables only.\n* Icons: **Google Material Symbols only.** Raw inline SVGs and local icon files are **forbidden**. Build stickers from Material Symbols icons, typographic badges (\"NEW!\", \"100%\", \"certified unhinged\"), sparing emoji as decorative copy, and CSS-drawn shapes (thick borders, `clip-path` starbursts, layered gradients).\n* **Exception clauses for the raw theme spec (mandatory rule kept, adjusted):**\n  * `transform: rotate(random)` is not valid CSS — author **fixed, varied rotation values** (e.g., -6°, 3°, -2°, 5°) per sticker\u002Felement via rotation utility classes to simulate randomness.\n  * \"GIF overload\": real GIF assets cannot be assumed — **simulate GIF energy with pure-CSS animation loops** (pulsing gradients, blinking stickers, spinning starbursts, gradient-shift display text via `background-clip: text`). The page must render fully with zero external image assets.\n  * \"Noise\u002Fglitch\": achieve via layered CSS gradients, `repeating-linear-gradient` scanlines, and RGB-split `text-shadow` offsets. Inline SVG filters are forbidden (no-SVG rule).\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component (`.btn` + `.btn--primary`, `.btn--secondary`, `.btn--danger`)**\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target **44×44px**. Loud sticker styling (thick border, hard offset shadow). Rotation on buttons ≤ 2° and must never compromise the touch target or label readability.\n* **Hover:** brightness\u002Fshadow shift with `cursor: pointer`.\n* **Focus:** distinct high-contrast focus ring (outline + offset, built from tokens) that remains visible over busy backgrounds in **both** themes.\n* **Active\u002FPressed:** `transform: scale(0.97)`.\n* **Loading:** disables interaction, prevents double-clicks, renders an animated Material Symbol (`progress_activity` with CSS rotation) or CSS spinner **without changing button dimensions**.\n* **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`.\n* **Success\u002FError:** temporary feedback states styled with `--text-success` \u002F `--text-error` plus matching borders — communicated via icon **and** text, never color alone.\n* **`.btn-danger`:** visually distinct (hot error color, thick border) and clearly different from primary in both themes.\n\n**2.2 Card Component (`.card` + `--feature`, `--step`, `--quote`, `--pricing`, `--skeleton`, `--empty`)**\n* **Default:** flexible Flexbox layout (column), `--bg-secondary`, thick `--border-default`, radius tokens, hard offset shadow.\n* **Hover:** `transform: translateY(-2px)` with elevated \"peel\" shadow, animated via `--transition-normal`.\n* **Focus-within:** border highlight when a child link\u002Fbutton receives focus.\n* **Loading (skeleton):** define shimmer keyframes and `.card--skeleton` styles in CSS (required in the stylesheet even if not displayed on first paint).\n* **Empty state:** define `.card--empty` pattern with a Material Symbol and clear guidance copy.\n* **Chaos layering:** decorative sticker badges may overlap card corners (`position: absolute`, `aria-hidden=\"true\"`) but must **never cover or clip card text or interactive elements**.\n\n**2.3 Form & Input Requirements (`.input-group`, `.field`, `.field--valid`, `.field--error`)**\n* **Structure:** flex column wrapper containing a visible `\u003Clabel>` (with `for`\u002F`id` binding), the `\u003Cinput>`, and a dedicated error\u002Ffeedback container element.\n* **States (all styled):** empty, focused (outline ring), filled, valid (success border + check Material Symbol), invalid (error border, `--text-error` message, warning icon, message announced via `aria-live=\"polite\"`), disabled, read-only (define styles even if unused).\n* **Final CTA form behavior:** on submit, show loading → then simulated success or error (JS timeout, no backend); feedback text renders in an `aria-live` region; button swaps state classes per 2.1. Double-submission prevented.\n\n**2.4 FAQ Accordion**\n* Each item: heading `\u003Cbutton aria-expanded=\"...\">` + content panel (`role=\"region\"`, labelled by the button).\n* Panels animate open\u002Fclosed via CSS transitions (e.g., `grid-template-rows: 0fr → 1fr`).\n* Fully keyboard operable, visible focus, state indicated by an icon (rotating Material Symbol) **plus** `aria-expanded` — never color alone.\n* Under `prefers-reduced-motion`: instant open\u002Fclose.\n\n**2.5 Modal \u002F Popup (conditional)**\n* Only include a modal if you add a purposeful overlay (e.g., an easter-egg \"chaos mode\" dialog). If implemented, it must have: opening\u002Fopen\u002Fclosing CSS-animated states, loading state if async, success\u002Ferror feedback styles, centered flex overlay (`align-items: center`), backdrop, Material Symbol close button, keyboard focus trap, close via `Esc` and overlay click, `role=\"dialog\"` + `aria-modal` + accessible name, stacked at `--z-modal`.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by default:** fluid sizing, breakpoints, zero horizontal overflow.\n* **Mandatory visual feedback:** every click, hover, focus, and submission triggers a visible state change.\n* **Smooth animations:** all state changes use `--transition-fast` \u002F `--transition-normal` with `--ease-standard`.\n* **`prefers-reduced-motion`:** jitter disabled, marquees render as static text, drag disabled, transitions minimized — the page must be fully usable with **zero motion**.\n* **Marquee implementation:** CSS `translateX` keyframe loop on a track; the animated track is `aria-hidden=\"true\"` (taglines are decorative); never encode essential information only in a marquee. Reduced motion → static.\n* **Jitter:** small translate\u002Frotate keyframes (±1px, ±0.5°) on decorative stickers and the logo only — never on body text.\n* **`mix-blend-mode: multiply\u002Fscreen` and `filter: saturate(150%)`:** decorative layers only. Blended\u002Fsaturated layers must never sit between body text and its background — all text blocks sit on solid backplates (`--bg-primary` \u002F `--bg-secondary`).\n* **z-index chaos (controlled):** decorative scatter stacks freely but always **below** functional layers. Header\u002Fnav sits above scatter; dropdowns, modals, and feedback use `--z-dropdown` \u002F `--z-modal` \u002F `--z-toast`. Nothing decorative may ever cover the header, forms, focus rings, or overlays.\n* **Accessibility (a11y):** semantic HTML5 landmarks (`header`, `nav`, `main`, `section`, `footer`), skip-to-content link, exactly one `\u003Ch1>`, logical heading order, correct ARIA roles\u002Flabels on custom widgets, logical DOM\u002Ffocus order, full keyboard operability for all functional UI, `aria-live` regions for dynamic feedback, AA contrast in both themes, never color-alone state communication.\n* **Decorative scatter:** all stickers\u002Fglows\u002Fstarbursts are `aria-hidden=\"true\"` and `pointer-events: none` — except the optional draggable stickers below.\n* **Drag-and-drop (optional, decorative only):** stickers may be draggable via pointer events in `script.js` as a purely non-functional flourish. They remain `aria-hidden`, must never trap focus or block interactive UI, and are exempt from keyboard operability **only because they are decoration with no function**. Disable under reduced motion. If in doubt, omit — the page must be complete without it.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n* **File structure:** separate `index.html`, `style.css`, `script.js`. The HTML references the stylesheet in `\u003Chead>` and contains exactly **one** `\u003Cscript src=\"script.js\" defer>` — no other inline `\u003Cscript>` blocks.\n* **Naming convention:** one consistent convention across the deliverable — **BEM** for all authored component classes (`.card`, `.card--pricing`, `.card__title`). If Tailwind utilities are used, they handle layout only; never invent ad-hoc non-BEM component classes. Never mix conventions.\n* **`script.js` scope (keep minimal):** theme toggle + `localStorage` persistence, FAQ accordion, CTA form state simulation, optional decorative sticker drag. Nothing else.\n* **No unrequested placeholders:** all copy is authored on-voice English; no lorem ipsum; no fake external assets; the page renders fully offline except Google Fonts\u002FIcons CDN links.\n\n---\n\n## 5. PAGE SECTIONS BUILD SPECIFICATION\n\n**5.0 Global Header:** wordmark in the display font, anchor nav links to all sections, theme toggle (sticker-styled, per 1.3). Links have visible focus rings; header z-index above all scatter, below `--z-modal`.\n\n**5.1 Hero:** one `\u003Ch1>` in the display font, huge (`clamp()` sizing), CSS-only gradient or RGB-split glitch treatment; on-voice ironic headline; short sub-copy; two CTAs (`.btn--primary` neon fill + `.btn--secondary` outline). One or two slightly rotated (±2°) marquee strips on solid backplates. 5–8 scattered stickers (varied fixed rotations, contained, `aria-hidden`). Background: layered CSS gradients + blend-mode blobs, decorative only.\n\n**5.2 Features — 3 cards:** section `\u003Ch2>` + intro line; three `.card--feature` items with a Material Symbol sticker badge, bold title, short body copy; alternating card rotations (−1.5°, 1°, −2°); hover lift per 2.2.\n\n**5.3 How It Works — 3 steps:** three `.card--step` items with oversized neon numerals (01\u002F02\u002F03) in the display font, one-line copy each; connected visually by dashed borders or a rotated marquee divider; column layout on mobile.\n\n**5.4 Testimonials — 3 quotes:** chat-bubble \u002F fake-screenshot `.card--quote` items: `@username` handle, quote copy, star rating via Material Symbols; varied rotations and neon fills with **correct text pairing per 1.2**; optional slow marquee row of short reaction tags.\n\n**5.5 Pricing — 3 tiers:** three `.card--pricing` items; middle tier visually loudest (neon border\u002Ffill, slight scale\u002Frotation, on-voice sticker badge like \"THE MAIN CHARACTER\"). Each tier: name, price, feature list with Material Symbol checks, one fully state-complete `.btn` (primary on the middle tier, secondary on the others).\n\n**5.6 FAQ — accordion:** 5–6 on-voice questions implementing 2.4 exactly.\n\n**5.7 Final CTA:** full-bleed loud block — display-font headline, short copy, email capture `.input-group` + `.btn--primary` with complete state behavior per 2.3.\n\n**5.8 Footer:** secondary links (About, Contact, Privacy, Terms), social icon links (Material Symbols with `aria-label`), small print, on-voice sign-off. All links keyboard-focusable with visible rings.\n\n---\n\n**Execution order:** produce the three complete files in one pass — `index.html`, `style.css`, `script.js` — fully implementing every rule above on the **first attempt**, with no omissions, no inline styles, and no placeholders.\n",1791954993312]