[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-347-Indie-Sleaze":3},"# CODING AGENT PROMPT — \"INDIE SLEAZE\" LANDING PAGE (COMPLETE BUILD, FIRST ATTEMPT)\n\n**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Produce the complete, working code for a single-page Landing Page in one pass, on the first attempt. Do not ask clarifying questions and do not output placeholders — every requirement is defined below. All user-facing copy must be written in **English** (the source specification was Portuguese; translate all labels, keywords, and descriptions to English before use).\n\n**Project:** Marketing landing page for a fictional nightlife photo-sharing app called **FLASHBANG** (\"the party photoblog, reborn\"). Theme: **Indie Sleaze** — the late-2000s hipster\u002Fblog-house party aesthetic (2006–2012, revived 2021): harsh on-camera flash photography, grain, messy taped-collage layouts, neon-on-black grit, ironic hedonistic tone, deliberately lo-fi.\n\n**Sections to build (in order):** Sticky Nav → 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:** any `style=\"...\"` attribute in the HTML.\n* All design properties, layout rules, and states are applied exclusively via class\u002FID selectors.\n* HTML stays semantic and style-agnostic: re-theming the page must require editing only `style.css`.\n* Decorative effects (grain, tilts, flash glows, highlighter sweeps, dashed connectors) must be built with CSS pseudo-elements and gradients — never by adding extra empty DOM nodes.\n\n**1.2 CSS Variables & Theme Tokens**\nStore every visual token in `:root` and theme classes. Use exactly this canonical token block (values come from the approved Indie Sleaze spec; do not invent replacements):\n\n```css\n:root {\n  \u002F* color — semantic tokens (dark theme is the DEFAULT look) *\u002F\n  --bg-primary: #0c0c0c;\n  --bg-secondary: #161616;\n  --bg-tertiary: #1f1f1f;\n  --text-primary: #f5f5f2;\n  --text-secondary: #b8b3ad;\n  --primary: #ff2d9c;        \u002F* hot pink neon *\u002F\n  --secondary: #ccff00;      \u002F* acid green accent *\u002F\n  --flash: #ffffff;         \u002F* blown-out flash white *\u002F\n  --border-default: #3a3a3a;\n  --text-success: #ccff00;\n  --text-error: #ff5252;     \u002F* distinct from brand pink so errors never read as branding *\u002F\n  --border-success: #ccff00;\n  --border-error: #ff5252;\n\n  \u002F* radius — snapshots have no rounding logic *\u002F\n  --radius-sm: 1px; --radius-md: 2px; --radius-lg: 3px; --radius-pill: 999px;\n\n  \u002F* shadow — blown-out on-camera flash halos, not soft drop shadows *\u002F\n  --shadow-sm: 0 0 0 1px rgba(255,255,255,0.08), 0 2px 10px rgba(0,0,0,0.6);\n  --shadow-md: 0 0 24px rgba(255,255,255,0.14), 0 8px 24px rgba(0,0,0,0.7);\n  --shadow-lg: 0 0 40px rgba(255,255,255,0.18), 0 16px 40px rgba(0,0,0,0.75);\n\n  \u002F* spacing \u002F motion *\u002F\n  --spacing-gap: 1rem;\n  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;\n  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;\n  --transition-fast: 150ms; --transition-normal: 300ms;\n  --ease-standard: cubic-bezier(0.3, 0, 0.4, 1);\n\n  \u002F* elevation *\u002F\n  --z-dropdown: 1000; --z-modal: 2000; --z-toast: 3000;\n\n  \u002F* type — Google Fonts first; system stacks are fallbacks only *\u002F\n  --font-sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;\n  --font-display: 'Anton', 'Impact', 'Arial Black', sans-serif;\n  --font-mono: 'Space Mono', 'Courier New', ui-monospace, monospace;\n\n  \u002F* signature moves *\u002F\n  --flash-grain: url(\"data:image\u002Fsvg+xml;utf8,\u003Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='140' height='140'>\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  --collage-tilt: rotate(-1.5deg);\n  --collage-tilt-alt: rotate(1deg);\n}\n```\n\n* **Contrast pairing:** every light background token pairs with a dark text token and vice versa, in both themes. The acid green `--secondary` may never be used as small-text color on light backgrounds — in light mode it is a chip\u002Fhighlight background paired with black text only.\n* **Light mode background:** never `#ffffff`; use `#fefefe` and washed print-greys (see 1.3).\n* **Validation mandate:** the source spec declares no modes — before finishing, verify every text\u002Fbackground pair in BOTH themes meets WCAG AA (≥ 4.5:1 body text, ≥ 3:1 large text and UI borders); adjust the light-mode pink\u002Fgreen values if any pair fails.\n\n**1.3 Mandatory Dark Mode Support**\n* The provided palette IS the dark theme and is the default. Additionally define a full **light theme** as an \"overexposed drugstore print\" variant under a `.light` class on `\u003Chtml>` (mirrored under `@media (prefers-color-scheme: light)` for first visit): `--bg-primary: #fefefe`, `--bg-secondary: #f2f0ea`, `--bg-tertiary: #e9e5dd`, `--text-primary: #141414`, `--text-secondary: #57524b`, `--border-default: #c9c3b8`, darkened brand pink for text usage (e.g., `--primary: #c4006e`); keep flash halos and grain (reduce grain opacity to ~0.25 in light mode).\n* Theme switching swaps variables only — no HTML restructuring.\n* **Persistence:** store the choice in `localStorage` (key `indie-sleaze-theme`); first visit falls back to `prefers-color-scheme`.\n* **Toggle:** visible button in the nav with a Google Material Symbols icon (`dark_mode` \u002F `light_mode`), correct `aria-pressed` and an `aria-label` that updates with state.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n* Build every layout structure with Flexbox (`display: flex`).\n* Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment.\n* Mobile-first: multi-column rows collapse to single columns on small viewports; **the page must never scroll horizontally** (in-section horizontal scroll-snap carousels are allowed if they clip within their container).\n* All interactive targets ≥ 44×44px.\n\n**1.5 Framework & Naming Convention**\n* Plain, framework-free custom CSS in `style.css` (no Tailwind build step, no CSS-in-JS).\n* **BEM naming only** (`block`, `block__element`, `block--modifier`, e.g., `.btn`, `.btn--primary`, `.card__title`) — one convention across the whole deliverable, never mixed.\n* Required reusable generic classes: `.btn`, `.btn--primary`, `.btn--ghost`, `.btn--danger`, `.card`, `.input`, `.badge`, `.nav`, `.section`, `.container`.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* Load via `\u003Clink>` in `\u003Chead>`: **Anton** (display), **Archivo** (sans), **Space Mono** (mono), plus **Google Material Symbols** (outlined variant) for all icons.\n* Bind them to `--font-display`, `--font-sans`, `--font-mono`. The system fonts from the source stacks (Impact, Helvetica Neue, Courier New) remain as fallbacks only.\n* **No raw inline SVGs and no local icon files.** *Explicit exception:* the `--flash-grain` data-URI SVG defined in the tokens is the single permitted SVG — it is a background texture, not an icon.\n* Decorative icons get `aria-hidden=\"true\"`; meaningful icons always carry text labels.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\nImplement the base component styles from the approved reference CSS (grain on `body`\u002F`.nav`\u002F`.btn`\u002F`.card`, collage tilts, flash-halo shadows, mono\u002Fdisplay type), then extend each component with the full state matrix below.\n\n**2.1 Button (`.btn` and variants)**\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` display font, uppercase, ≥ 44px height, `transform: var(--collage-tilt-alt)`, grain background, 1px `--border-default`, `--shadow-sm`, `cursor: pointer`.\n* **Hover:** straightens (`rotate(0deg) translateY(-1px)`) + `--shadow-md`.\n* **Focus:** distinct `:focus-visible` ring in acid green (`outline: 2px solid var(--secondary); outline-offset: 2px`).\n* **Active\u002FPressed:** `rotate(0deg) translateY(0)` + `--shadow-sm`.\n* **Loading:** `[aria-busy=\"true\"]` \u002F `.btn--loading` disables interaction (prevents double submits) and swaps the label for a rotating Material Symbol (`progress`) or CSS spinner without changing button dimensions.\n* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`, no tilt.\n* **Success\u002FError:** temporary feedback classes tinted by `--text-success` \u002F `--text-error`, always paired with an icon + text (never color alone).\n* **Danger (`.btn--danger`):** visually distinct in both themes via `--text-error` \u002F `--border-error`.\n\n**2.2 Card (`.card`)**\n* **Default:** flexbox column, `--bg-secondary` + grain, 1px `--border-default`, `--radius-md`, `--shadow-md`, `transform: var(--collage-tilt)`; alternate siblings use `--collage-tilt-alt` for the taped-collage mess.\n* **Hover:** straightens to `rotate(0deg) translateY(-2px)` + `--shadow-lg`.\n* **Focus-within:** border shifts to `--primary` when a child link\u002Fbutton receives focus.\n* **Loading (Skeleton):** `.card--skeleton` shimmer (CSS gradient animation) that preserves final dimensions — no layout jump.\n* **Empty state:** fallback layout with a Material Symbol, a mono caption, and clear guidance text.\n\n**2.3 Form & Input (`.input-group`, `.input`)**\n* Structure: flex `.input-group` wrapping a `\u003Clabel>`, the field, and a dedicated error\u002Ffeedback container.\n* States via classes\u002Fattributes: empty, focused (pink ring: `box-shadow: 0 0 0 3px rgba(255,45,156,0.3)`), filled, valid (`--border-success` + check icon), invalid (`--border-error`, error icon, error message in an `aria-live=\"polite\"` container), disabled, read-only.\n* Placeholder color `--text-secondary`; full-width inputs use `box-sizing: border-box`.\n\n**2.4 Modal \u002F Popup (`.modal`)**\n* Used for the Pricing \"Start now\" action: a lightweight signup modal (email input + submit).\n* **States:** opening, open, loading, success\u002Ferror, closing — all animated via CSS transitions (`var(--transition-normal)`).\n* **UX:** fixed overlay, flex-centered (`align-items: center`), grainy dark backdrop, close button with Material Symbol `close`, focus trapped while open, focus returns to the trigger on close, closes on `Esc` and backdrop click, `role=\"dialog\"` + `aria-modal=\"true\"` + labelled title, z-index `--z-modal`.\n\n**2.5 Accordion (FAQ)**\n* Button-triggered panels: `aria-expanded`, `aria-controls`, Material Symbol `expand_more` rotating 180° when open, CSS-animated height, fully keyboard operable.\n\n**2.6 Toast (`.toast`)**\n* For form success\u002Ferror feedback: fixed region, `role=\"status\"` \u002F `aria-live=\"polite\"`, z-index `--z-toast`, auto-dismiss, colored edge + icon + text (never color alone).\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by default:** fluid `clamp()` type scale, flex-wrap layouts, zero horizontal overflow.\n* **Smooth animations:** `transition: var(--transition-normal)` on all state changes; **respect `prefers-reduced-motion`** — disable the marquee, tilts, transforms, shimmer, and smooth scrolling when set.\n* **Accessibility (a11y):** skip-to-content link; semantic landmarks (`header`, `nav`, `main`, `section` with `aria-labelledby`, `footer`); exactly one `\u003Ch1>`; logical heading order; full keyboard operability (no mouse-only interactions); visible `:focus-visible` styles everywhere; never rely on color alone to communicate state; AA contrast in both themes; `aria-live` regions for all dynamic feedback.\n* **Mandatory visual feedback:** every click, hover, focus, and submission produces 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* Exactly three files: `index.html`, `style.css`, `script.js`. The only script tag is one deferred `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` before `\u003C\u002Fbody>` — no inline `\u003Cscript>` blocks, no inline styles.\n* `script.js` (vanilla, no libraries) handles: theme toggle + `localStorage` persistence + `prefers-color-scheme` fallback; mobile nav; smooth anchor scrolling (reduced-motion aware); FAQ accordion; modal open\u002Fclose + focus trap; email validation + loading\u002Fsuccess states + toast.\n* BEM naming throughout; no mixed conventions.\n* **No lorem ipsum.** Write real, on-theme English copy for every section (see §7).\n* Output the complete code for all three files in one response, immediately, on the first attempt.\n\n---\n\n## 5. THEME DIRECTION — \"INDIE SLEAZE\" AESTHETIC RULES\n\nTranslate these mandatory aesthetic moves into CSS only (no extra DOM):\n\n* **Harsh on-camera flash:** all elevation uses the white flash-halo `--shadow-*` tokens; Hero and Final CTA get a radial `--flash` glow (blown-out flash blowout) behind the headline.\n* **Grain everywhere:** `--flash-grain` overlay on `body`, `.nav`, `.card`, `.btn`, and testimonial polaroids — the whole page must feel shot on a point-and-shoot at 1 AM.\n* **Taped collage:** crooked tilts (`--collage-tilt` \u002F `--collage-tilt-alt`) on cards, buttons, and polaroids; elements straighten on hover\u002Ffocus.\n* **Neon-on-black:** hot pink `--primary` and acid green `--secondary` against near-black; acid-green highlighter sweep behind one key display word (CSS background on the text, not extra elements).\n* **Lo-fi details:** Space Mono for timestamps, captions, kickers, and numbering; dashed borders like cut tape on step connectors; uppercase Anton headlines with tight tracking.\n* **Ironic, hedonistic tone:** copy winks at blog-house culture (flash photography, party photoblogs, American Apparel-era fashion, MySpace-era internet) without naming real brands.\n* **Marquee ticker:** a CSS-animated scrolling strip of party phrases under the Hero (e.g., \"ONE MORE SONG\", \"EVERYONE'S A DJ\", \"NO CAMERA, NO ENTRY\", \"SEE YOU AT 2 AM\"); duplicate loop content is `aria-hidden=\"true\"`; animation paused under reduced motion.\n\n---\n\n## 6. PAGE STRUCTURE — SECTION-BY-SECTION SPEC\n\n1. **Sticky Nav (`.nav`):** flex, `align-items: center`; FLASHBANG wordmark in display font; anchor links (Features, How It Works, Testimonials, Pricing, FAQ); theme toggle; primary CTA button. Mobile: Material Symbol `menu` toggles a dropdown panel (`--z-dropdown`, `aria-expanded`, closes on `Esc`\u002Flink click).\n2. **Hero:** `.badge` (acid green, e.g., \"EST. 2008 · REVIVED 2021\"); giant uppercase `\u003Ch1>` with an acid-green highlight on one word; subcopy in `--text-secondary`; two CTAs (`.btn--primary` + `.btn--ghost`); mono caption (\"shot on a point-and-shoot, 1:47 AM\"); flash-blowout glow + grain; marquee ticker at the bottom.\n3. **Features — 3 `.card`s:** mono kicker + display `\u003Ch2>`; each card: Material Symbol in a flash-halo chip, `\u003Ch3>`, copy, mono tag; alternating tilts; hover\u002Ffocus-within per §2.2.\n4. **How It Works — 3 steps:** mono numbers `01 \u002F 02 \u002F 03`, display step titles, short copy; desktop 3-column flex row, mobile single column joined by a dashed CSS connector.\n5. **Testimonials:** 3–4 polaroid cards — light frame, thick bottom caption area, alternating tilts, Space Mono caption with name, handle, and timestamp; photo area uses seeded `https:\u002F\u002Fpicsum.photos` images with descriptive `alt` text (or a CSS gradient + grain placeholder if images are omitted); horizontal scroll-snap on mobile, wrapped flex row on desktop.\n6. **Pricing — 3 tiers:** three `.card`s; middle tier featured with `.badge` \"MOST WANTED\", opposite tilt, `--shadow-lg`; tier names, big display prices + mono suffix, feature lists with Material Symbol `check`, one `.btn` per tier; featured tier uses `.btn--primary`; every tier CTA opens the signup modal (§2.4).\n7. **FAQ:** 5–6 ironic-but-informative questions using the §2.5 accordion; mono numbering (`Q.01`…).\n8. **Final CTA:** full-width flash-blowout section; display headline; email `.input-group` per §2.3; submit runs loading → success state + toast; inline validation errors announced via `aria-live`.\n9. **Footer:** flex columns — brand blurb, secondary link groups (Product, Company, Legal), social links as text or generic Material Symbols with descriptive `aria-label`s (no brand SVGs); mono copyright line with an ironic sign-off.\n\n---\n\n## 7. CONTENT & COPY RULES\n\n* **All user-facing copy in English.**\n* Tone: ironic, hedonistic, lo-fi, confident — blog-house party energy, never corporate.\n* Write real copy for every heading, button, card, step, testimonial, tier, FAQ answer, and footer link. No lorem ipsum, no \"TBD\", no empty sections.\n",1791954985268]