[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-341-Hyperpop-Visuals":3},"# CODING-AI BUILD PROMPT — \"HYPERPOP VISUALS\" LANDING PAGE\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-grade landing page in a single response — full HTML, full CSS, full JS. No questions, no partial output, no TODOs.\n\n**Theme Definition:** **Hyperpop Visuals** (2019–present) — oversaturated candy colors + glitch chaos, 3D chrome type, distorted display headlines, motion blur, and ironic, maximal, internet-native energy. Reference vibe: 100 gecs \u002F SOPHIE-adjacent visuals. Tone: playful & youth, loud, fast, chaotic. The signature move is an **RGB chromatic-aberration split** (cyan\u002Fmagenta double outline or shadow) repeated on the nav border, card shadows, and headline text-shadows. Chaos is decorative — readability and accessibility always win.\n\n**Source Baseline:** The design-token CSS provided in the reference spec (`references\u002F00-flagship-implementation-specs\u002Fhyperpop.md`) is your baseline. Keep its values, class vocabulary (`.nav`, `.btn`, `.btn--primary`, `.card`, `.input`, `.badge`), chromatic shadows, candy gradient, and glitch text-shadow — but rename its `--color-*` tokens to the canonical names in Rule 1.2 and extend it per the rules below.\n\n---\n\n## 1. STRICT ARCHITECTURE RULES\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n* All styling lives in `style.css`. **Forbidden:** `style=\"...\"` attributes, inline `\u003Cstyle>` blocks, and presentation attributes.\n* Target all design properties, layout rules, and states via **class or ID selectors only**.\n* HTML must remain clean, semantic, and style-agnostic — restyling the site must never require touching the markup.\n\n**1.2 CSS Variables & Theme Tokens**\nStore every visual token in `:root` (light theme) and theme overrides (dark). Canonical tokens — **required names**, dark-theme values from the source palette:\n\n* `--bg-primary: #0d0018` · `--bg-secondary: #1a0330` · `--bg-tertiary: #290548`\n* `--text-primary: #fbf3ff` · `--text-secondary: #d6a9f0`\n* `--primary: #ff2fd0` · `--secondary: #2ff3ff` · `--lime: #c6ff2f`\n* `--border-default: #ff2fd0`\n* `--text-success \u002F --border-success: #c6ff2f` (lime reads on dark)\n* `--text-error \u002F --border-error:` a hot red (e.g., `#ff5d5d`) that is **visually distinct from `--primary` magenta**\n\n**Light theme (derived — the source spec does not declare modes, so you must create it):**\n* `--bg-primary:` near-white with a magenta\u002Flavender tint (e.g., `#fef6ff`); `#fefefe` is the acceptable neutral baseline — **never `#ffffff`**.\n* `--bg-secondary: #f4eaff` · `--bg-tertiary: #ead9fb`\n* `--text-primary: #1a0330` · `--text-secondary: #6b2fa8`\n* Keep `--primary`, `--secondary`, `--lime` saturated for borders, buttons, and gradients.\n* `--text-success: #4d7c0f` · `--text-error: #c9184a` (saturated hues fail AA as text on light backgrounds).\n* **Saturated-text rule:** if a candy hue fails WCAG AA when used as text, keep the base token for surfaces\u002Fborders and add a `-text` variant (e.g., `--primary-text: #c100a3`, `--secondary-text: #0087a8`). Never dull the base candy tokens.\n\n**Contrast pairing (mandatory, per theme):** every light background token pairs with dark text tokens and every dark background token pairs with light text tokens. Candy-gradient surfaces always pair with `#0d0018` text in **both** themes.\n\n**Supplementary tokens (keep from source, both themes):** `--radius-sm: 4px`, `--radius-md: 10px`, `--radius-lg: 18px`, `--radius-pill: 999px`; chromatic-aberration shadows `--shadow-sm\u002Fmd\u002Flg` (cyan\u002Fmagenta split; in light mode keep the split but reduce glow alphas ~50%); `--spacing-gap: 16px` plus the `--space-1…24` scale; `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.68, -0.55, 0.27, 1.55)`; `--z-nav: 40`, `--z-dropdown: 50`, `--z-modal: 100`, `--z-toast: 200`; `--font-base: 'Space Grotesk'`, `--font-display: 'Rubik'`, `--font-mono: 'JetBrains Mono'` with the `--text-xs…5xl` scale (use `clamp()` for display sizes); `--candy-gradient: linear-gradient(120deg, var(--primary), var(--secondary) 50%, var(--lime))`; `--glitch-text-shadow: -1px 0 var(--secondary), 1px 0 var(--primary)`.\n\n**1.3 Mandatory Dark Mode & Theme Switching**\n* Dark mode **must always be defined**: `:root` holds light tokens; the `.dark` class **and** `@media (prefers-color-scheme: dark)` hold the dark tokens (the media query covers no-JS\u002Ffirst visit; the class overrides it once JS runs). Add `\u003Cmeta name=\"color-scheme\" content=\"light dark\">`.\n* Theme switching swaps CSS variables only — **no HTML restructuring**.\n* Persist the user's choice in `localStorage` (key `hyperpop-theme`); fall back to `prefers-color-scheme` on first visit.\n* Ship a visible pill-shaped toggle in the nav with a Google Material Symbols icon (`dark_mode`\u002F`light_mode`), correct `aria-pressed`, and a dynamic `aria-label` (\"Switch to dark mode\" \u002F \"Switch to light mode\").\n* The source spec explicitly notes: *the source does not declare modes — validate the page in both light and dark before publishing.* Do so.\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 there is a documented exception (note it in a CSS comment).\n* Mobile-first: rows convert to columns at small viewports (≤768px), content wraps, and **horizontal scrolling never occurs** (wrap any marquee in `overflow: hidden`).\n\n**1.5 Framework: Tailwind CSS**\n* Use Tailwind CSS (Play CDN acceptable) for layout\u002Fspacing\u002Fresponsive utilities only. All component styling must live in `style.css` inside `@layer components`, bound to CSS variables and generic reusable class names: `.nav`, `.btn` (+ variants), `.card`, `.input`, `.input-group`, `.badge`, `.faq`, `.modal`, `.toast`, `.skeleton`. Never style components with long anonymous utility chains.\n\n**1.6 Typography & Icons — Google Only**\n* Load via `\u003Clink>`: **Space Grotesk** (base, 400–700), **Rubik** (display, up to 900), **JetBrains Mono** (labels\u002Fmicrocopy, 400\u002F700). Bind to `--font-base`, `--font-display`, `--font-mono`.\n* Icons: **Google Material Symbols (Rounded)** only. **Forbidden:** inline SVGs, local icon files, emoji-as-icons.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Buttons**\n* **Default:** `.btn` per source baseline — flex, `align-items: center`, `justify-content: center`, `gap: 0.5rem`, pill radius, 800-weight Rubik uppercase, minimum touch target **44×44px**. Variants: `.btn--primary` (candy gradient, `#0d0018` text), `.btn--secondary` (surface-strong bg, primary border), `.btn--danger` (defined and visually distinct in both themes).\n* **Hover:** `scale(1.04) rotate(-1deg)` + `--shadow-md`, `cursor: pointer`. **Focus:** `:focus-visible` — 3px lime outline, 3px offset. **Active:** `transform: scale(0.97)`.\n* **Loading (`.is-loading`):** CSS spinner via `::after` or animated Material icon; `pointer-events: none`; `aria-busy=\"true\"`; button dimensions must not change.\n* **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`.\n* **Success\u002FError (`.is-success` \u002F `.is-error`):** temporary feedback using `--text-success`\u002F`--text-error` **plus an icon and\u002For text — never color alone**.\n\n**2.2 Cards**\n* **Default:** `.card` per source — flex column, `--bg-secondary`, 2px `--border-default`, `--radius-lg`, chromatic `--shadow-md`, `--space-6` padding.\n* **Hover:** `translateY(-2px)` + `--shadow-lg` on interactive cards. **Focus-within:** border shifts to `--secondary` when a child link\u002Fbutton receives focus.\n* **Loading:** define `.skeleton` shimmer keyframes in CSS to prevent layout jumps. **Empty state:** define a `.card--empty` fallback pattern (Material icon + guidance text).\n\n**2.3 Forms & Inputs**\n* The Final CTA email capture uses `.input-group`: a flex container wrapping a `\u003Clabel>`, `\u003Cinput class=\"input\">`, and a dedicated error `\u003Cp>` wired to `aria-live=\"polite\"` and `aria-describedby`.\n* **States:** empty, `:focus` (primary border + `--shadow-sm` ring), filled, `.is-valid` (success border + check icon), `.is-invalid` (error border + error icon + message, `aria-invalid=\"true\"`), disabled, read-only. Validate email in JS; never communicate validity by color alone.\n\n**2.4 Modal**\n* Include one modal (Hero's \"See it in action\" or a Pricing plan-details dialog). **States:** opening, open, loading, success\u002Ferror, closing — all animated via CSS transitions (scale + opacity).\n* Fixed overlay, centered flex container (`align-items: center; justify-content: center`), backdrop tinted from `--bg-primary`; Material icon close button (`aria-label=\"Close\"`); `role=\"dialog\"`, `aria-modal=\"true\"`, `aria-labelledby`; keyboard **focus trap** with focus restored to the trigger on close; closes via `Esc` and overlay click; stacked at `--z-modal`.\n\n**2.5 Toast**\n* Fixed toast at `--z-toast`, `role=\"status\"`\u002F`aria-live` region, success and error variants with Material icons, auto-dismiss (~4s). Use it for form success and demo action feedback.\n\n**2.6 FAQ Accordion**\n* Each item: `\u003Cbutton aria-expanded aria-controls>` + panel; animate open\u002Fclose via CSS (`grid-template-rows: 0fr → 1fr`); icon rotates on expand; state is conveyed by icon\u002Fmotion, not color alone; fully keyboard operable.\n\n**2.7 Navigation**\n* Sticky pill `.nav` per source baseline: wordmark (Rubik 900 + glitch shadow), anchor links, theme toggle, primary CTA. On mobile, collapse links behind a menu button (`aria-expanded`, `aria-controls`) toggling a dropdown panel at `--z-dropdown`. Include a skip-to-content link; smooth-scroll anchors with `scroll-margin-top` on sections.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by default:** fluid `clamp()` type, standard breakpoints, zero horizontal overflow.\n* **Smooth animations:** every state change transitions with `var(--transition-normal)` and `var(--ease-standard)`.\n* **Reduced motion:** under `prefers-reduced-motion: reduce`, disable the marquee, glitch flicker, shimmer, hover\u002Factive transforms, and smooth scrolling; keep color-based state changes.\n* **Accessibility:** WCAG AA contrast in **both** modes; never rely on color alone; semantic HTML5 (`header`\u002F`nav`\u002F`main`\u002F`section`\u002F`footer`, exactly one `h1`, logical heading order); correct ARIA on the toggle, mobile menu, accordion, and modal; full keyboard operability; visible focus rings; `aria-live` regions for form errors, toasts, and loading states.\n* **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.\n* **Glitch safety:** flicker effects stay subtle (never more than 3 flashes per second — ideally a slow single twitch) and apply to decorative layers only. Body text is never distorted; distortion is reserved for display headlines.\n\n---\n\n## 4. PAGE SECTION BUILD SPECIFICATION\n\n**Copy voice:** loud, ironic, internet-native, playful & youth. Short punchy Rubik-uppercase headlines; JetBrains Mono kicker labels (e.g., `\u002F\u002F 001 — FEATURES`). Write real, original **English** copy — no lorem ipsum. Invent one coherent fictional product (e.g., a browser-based toolkit for making hyperpop-grade visuals and motion assets) and keep all copy consistent with it.\n\n* **4.1 Header\u002FNav:** per Rule 2.7.\n* **4.2 Hero:** badge pill (\"v2.0 — NOW 200% LOUDER\"); `h1` with candy gradient via `background-clip: text`, `--glitch-text-shadow`, and an optional chrome-sheen layer (CSS gradients only, no images); 1–2 sentence subhead; primary CTA + secondary \"See it in action\" (opens the modal). Background: layered radial candy glows (`--primary`\u002F`--secondary`\u002F`--lime` at low alpha). Optional marquee strip below the hero (duplicated `aria-hidden` content, `overflow: hidden`, paused under reduced motion).\n* **4.3 Features (3 cards):** section header (mono kicker + `h2`); three `.card`s in a flex-wrap grid (1 column mobile → 3 columns desktop); each with a gradient icon badge + Material Symbol, `h3` with glitch shadow, and a 2–3 sentence description; hover lift + focus-within.\n* **4.4 How It Works (3 steps):** mono numerals `01\u002F02\u002F03` in gradient badges, step title + description, connected by a dashed line on desktop that collapses gracefully on mobile.\n* **4.5 Testimonials:** three `.card`s; avatar = gradient circle with initials (**no external images**); quote; name + `@handle` in mono; filled Material star icons.\n* **4.6 Pricing (3 tiers):** middle tier highlighted — badge \"MOST LOUD\", `--shadow-lg`, slight `scale(1.03)` on desktop; each card: plan name (display font), price + \"\u002Fmonth\", feature list with Material check icons, CTA button (primary on the highlighted tier, secondary elsewhere); CTAs trigger the modal or a toast; mono microcopy (\"No credit card required.\").\n* **4.7 FAQ:** 4–6 accordion items per Rule 2.6, with real questions about the fictional product.\n* **4.8 Final CTA:** full-width panel on `--bg-tertiary` or a gradient-tinted surface; display headline; email capture form per Rule 2.3; submit flow: validate → `.is-loading` → success state + toast; mono privacy microcopy.\n* **4.9 Footer:** wordmark; secondary link groups (Product, Company, Legal — `href=\"#\"` allowed but must carry hover\u002Ffocus styles); social links as Material Symbols with `aria-label`s; copyright with the current year; flex-wrap bottom bar.\n\n---\n\n## 5. DELIVERABLES & OUTPUT FORMAT\n\n* **Files:** separate `index.html`, `style.css`, `script.js`. Exactly one `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` — no other inline scripts. Google Fonts, Material Symbols, and Tailwind `\u003Clink>` tags in `\u003Chead>` are permitted.\n* **Naming:** one consistent **BEM** convention everywhere (`.btn--primary`, `.card__title`, `.faq__panel`…). Never mix conventions.\n* **Copy:** all user-facing copy in **English** (the source spec's non-English notes are requirements to implement, not copy to ship). No lorem ipsum; placeholders only where content is genuinely unspecified.\n* **No external image dependencies** — avatars and decorative art are CSS\u002Fgradient\u002Finitial\u002Ficon based.\n* **Definition of done:** every component state in Sections 2.1–2.6 is implemented; theme toggle persists and respects OS preference; both light and dark modes validated for contrast and layout; keyboard-only pass completes nav → sections → form → modal → FAQ without traps; reduced-motion pass disables all decorative animation. Ship the complete build on the first attempt.\n",1791954985230]