[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-537-VHS-Analog-Video":3},"# CODING AGENT PROMPT — LANDING PAGE: \"VHS \u002F ANALOG VIDEO\"\n\n**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Deliver a complete, production-quality landing page in a single attempt.\n\n**Project Brief:** Build a marketing landing page themed **VHS \u002F Analog Video** — the 1980s–90s home-video aesthetic: scanlines\u002Finterlacing, chromatic (cyan\u002Fmagenta) text bleed, tracking distortion, tape warble, grain, a REC\u002Ftimestamp HUD, and warm nostalgic degradation. Invent ONE coherent fictional product that fits this theme (e.g., a VHS-tape digitization & restoration service, or a retro streaming platform for analog-era media) and write ALL user-facing copy in English around that single concept. Required sections: Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links. Deliverables: `index.html`, `style.css`, `script.js`.\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, inline `\u003Cstyle>` blocks, and presentational HTML attributes are forbidden.\n* Target every design property, layout rule, and state via class or ID selectors only.\n* Keep HTML semantic and styling-agnostic: retheming the page must require editing CSS only, never markup.\n\n**1.2 CSS Variables & Theme Tokens**\n* Store all visual tokens in `:root` (dark theme = default) using the canonical block in Section 5. Extend it — never weaken it — with these mandatory semantic aliases: `--primary: var(--color-primary); --secondary: var(--color-accent); --bg-primary: var(--color-bg); --bg-secondary: var(--color-surface); --text-primary: var(--color-text); --text-secondary: var(--color-text-muted); --border-default: var(--color-border);`\n* Define the missing feedback tokens: `--text-success`, `--text-error`, `--border-success`, `--border-error` (success may derive from accent cyan `#2de2e6`; error from the red family, e.g. `#ff5c5c` — chosen values must pass WCAG AA contrast wherever used as text).\n* Replace every hardcoded hex inside component rules (e.g., `.btn--primary { color: #0a0a0f }`, `.badge { color: #0a0a0f }`) with dedicated tokens such as `--color-on-primary` so both themes can flip them.\n* Add the tokens the spec omits: `--spacing-gap: var(--space-4); --transition-fast: 120ms; --transition-normal: 240ms;` plus `--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1)` for large fades (the spec's `--ease-standard: steps(6, end)` remains the signature for micro-interactions).\n* Define stacking tokens `--z-dropdown: 100; --z-modal: 400; --z-toast: 500;` and use them for the mobile nav panel, any overlay, and feedback messages.\n* Contrast pairing: every light background token must pair with a dark text token and every dark background token with a light text token — enforced in BOTH themes, not only the default.\n\n**1.3 Mandatory Dark Mode & Light Mode Support**\n* The source palette is dark-first: dark is the canonical look and the default in `:root`. BOTH themes are still mandatory — the source spec explicitly requires validating in light and dark before publishing.\n* Implement switching via a `.light` class on `\u003Chtml>` that overrides color and texture tokens; switching must require zero HTML restructuring.\n* Light mode direction — \"daylight dub \u002F faded tape label\": warm off-white backgrounds (never `#ffffff`; use `#fefefe` or warm paper tones from the `#f0ece0` family), dark ink text (`#1a1a22` family), surfaces one step darker than the page background, clearly visible borders. It must feel like a designed light theme, not a washed-out dark theme.\n* All texture variables (`--scanlines`, `--tape-grain`, `--chroma-shadow`) must be redefined per theme: light mode uses dark scanlines (`rgba(0,0,0,0.05)`–`0.08`) and adjusted chroma ghosts so artifacts remain visible on light surfaces.\n* Toggle: a visible button in the nav with a Material Symbol icon, correct `aria-pressed` and `aria-label` (\"Switch to light theme\" \u002F \"Switch to dark theme\"). Persist the choice in `localStorage` (e.g., key `vhs-theme`); on first visit fall back to `prefers-color-scheme`, and if no preference is expressed, default to dark. Apply the stored theme at the top of `script.js` on execution; do not add any extra inline scripts.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n* Build every layout structure with Flexbox. Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment (e.g., text blocks inside cards may use `flex-start`).\n* Mobile-first: single-column stacks on small viewports expanding to rows on desktop; zero horizontal scrolling at any viewport from 320px upward.\n\n**1.5 CSS Architecture & Naming Convention**\n* Use clean custom CSS — the provided spec is the foundation; no utility framework is required for this build. Any utility class you introduce must map back to the tokens.\n* Naming convention: BEM only (`block__element--modifier`), matching the spec's `.btn--primary` pattern. Never mix conventions.\n* Organize `style.css` with section comments in this order: tokens → base → components → page sections → themes → animations → reduced-motion.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* Load text fonts from Google Fonts via `\u003Clink>`. Body sans: the spec's `'Helvetica Neue', Arial` is not a Google font, so lead with a Google-hosted equivalent (e.g., **Inter**) keeping the original fallbacks. Display\u002Fmono: the spec's `'VCR OSD Mono'` is not available on Google Fonts, so substitute a Google Fonts CRT-style monospace — **VT323** (recommended) or Share Tech Mono — keeping `'Courier New', monospace` fallbacks. Exception clause: do not load VCR OSD Mono or any font from non-Google sources; Google Fonts only.\n* Bind fonts to tokens: `--font-base` (body), `--font-display` (headings, HUD, labels, buttons), `--font-mono` (timestamps, counters, attributions).\n* Icons: Google Material Symbols via the standard `\u003Clink>` stylesheet — used for feature icons, FAQ chevrons, theme toggle, form validation icons, footer\u002Fsocial icons, and status icons. Raw inline SVGs, local icon files, and emoji-as-icons are forbidden.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button** (base `.btn`, variant `.btn--primary` per Section 5)\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` with a minimum touch target of 44×44px (`min-height: 44px`); typography per spec.\n* **Hover:** the spec's signature — `translateX(1px)`, chromatic text-shadow, accent border — plus `cursor: pointer` and a visible brightness\u002Fshadow shift.\n* **Focus:** distinct `:focus-visible` ring using tokens (spec: `outline: 2px solid var(--color-accent); outline-offset: 2px`). Never remove outlines.\n* **Active\u002FPressed:** stepped click feedback (spec's `translateX(0)` plus `transform: scale(0.97)`) — must be perceptible.\n* **Loading:** `.btn--loading` with `aria-busy=\"true\"` and `disabled`: blocks interaction and double-clicks, renders a CSS spinner (border\u002Fconic animation) or animated Material Symbol, and preserves the button's exact dimensions.\n* **Disabled:** `opacity: 0.5`, greyscale filter, `cursor: not-allowed`, no hover\u002Ftransform\u002Ftext-shadow effects (per spec).\n* **Success\u002FError:** temporary `.btn--success` \u002F `.btn--error` classes driven by `--text-success` \u002F `--text-error`, always paired with a Material Symbol icon (check\u002Ferror) — never color alone — reverting to default afterward.\n* Also define `.btn-danger` for destructive actions, visually distinct in both themes.\n\n**2.2 Card** (base `.card` per Section 5)\n* **Default:** flexible Flexbox column layout, `--color-surface` background, `1px solid var(--color-border)`, `--radius-md`, `--shadow-md`, scanline overlay, `position: relative`.\n* **Hover** (interactive cards only): elevation shift plus `transform: translateY(-2px)`; `cursor: pointer` only if genuinely clickable.\n* **Focus-within:** card border highlights when a child link\u002Fbutton receives keyboard focus.\n* **Loading (Skeleton):** `.card--skeleton` shimmer animation (gradient sweep) styled in CSS to match final dimensions and prevent layout jumps.\n* **Empty State:** `.card--empty` fallback layout with a Material Symbol and clear guidance text.\n\n**2.3 Form & Input** (base `.input` per Section 5)\n* Include at least one real form: an email\u002Fnewsletter signup in the Final CTA (or footer). Structure: a flex `.input-group` wrapping a `\u003Clabel>`, the `\u003Cinput class=\"input\">`, and a dedicated feedback element wired with `aria-describedby` and `aria-live=\"polite\"`.\n* **States**, all class-driven: empty, focused (accent ring per spec), filled, valid (`.input--valid`: success border + check icon), invalid (`.input--invalid`: error border, error icon, error message text — never color alone), disabled, read-only.\n* `script.js` validates email format on submit, shows inline errors, sets the submit button to loading, then shows a success message.\n\n**2.4 Accordion (FAQ) & Modal\u002FPopup**\n* FAQ is an accessible accordion: each item uses a `\u003Cbutton class=\"faq__trigger\" aria-expanded=\"false\" aria-controls=\"…\">` inside an `\u003Ch3>`, with a panel carrying `role=\"region\"` + `aria-labelledby`; a Material Symbol chevron rotates on toggle; open\u002Fclose animated via CSS transitions (`--transition-normal`); JS only toggles ARIA\u002Fhidden state.\n* Fully keyboard operable (Enter\u002FSpace), logical focus order, no mouse-only interactions.\n* If any modal is introduced (optional): centered flex overlay (`align-items: center`), backdrop, animated opening\u002Fopen\u002Fclosing states, loading and success\u002Ferror states, Material Symbol close button, keyboard focus trap, close via `Esc` and overlay click, `--z-modal` stacking.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by default:** fluid type via `clamp()` where appropriate; no horizontal overflow from 320px up.\n* **Smooth animations:** every state change transitions with `--transition-fast` \u002F `--transition-normal`; the stepped `--ease-standard` delivers the mechanical dubbed-tape feel on micro-states.\n* **Reduced motion:** extend the spec's `prefers-reduced-motion` block to disable every animation — tracking sweeps, tape warble, grain flicker, REC blink, shimmer, spinner motion, smooth scrolling — while keeping every state perceivable without motion.\n* **Accessibility:** WCAG AA contrast in both themes for all text, including muted text on surfaces. Chromatic bleed is permitted on headings\u002Flabels only — never body copy — with offsets ≤ 2px so legibility is preserved. Never rely on color alone: the REC dot always pairs with the \"REC\" text; validation always pairs icon + message. Semantic HTML5 landmarks (`header`, `nav`, `main`, `section`, `footer`), a single `\u003Ch1>`, logical heading order, a skip link, correct ARIA on the theme toggle and accordion, visible focus everywhere, and `aria-live` regions for all dynamic feedback.\n* **Mandatory visual feedback:** every click, hover, 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. DELIVERABLES & OUTPUT FORMAT\n\n* **Files:** separate `index.html`, `style.css`, `script.js`. Exactly one `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` reference; no other inline scripts; no inline styles.\n* **Naming:** BEM only, consistent across the entire deliverable.\n* **Copy:** author original, coherent, on-theme English copy for the invented product — nav labels, hero headline and subcopy, 3 feature cards, 3 steps, 3 testimonials (names + roles), 3 pricing tiers (names, prices, feature lists, one highlighted), 6+ substantive FAQ entries, final CTA, and footer. Lorem ipsum is forbidden.\n* **No external assets:** no images, no icon files, no JS libraries — only Google Fonts and Google Material Symbols via `\u003Clink>`. All visuals are CSS (gradients, pseudo-elements, keyframes).\n* **script.js scope:** theme toggle + persistence, FAQ accordion, form validation with loading\u002Fsuccess\u002Ferror, live HUD timestamp clock, and mobile nav menu behavior. Nothing else.\n\n---\n\n## 5. VHS \u002F ANALOG VIDEO THEME SPECIFICATION\n\nUse this token block as the canonical foundation (dark = default); the additions from Section 1.2 are mandatory:\n\n```css\n:root {\n  --color-bg: #0a0a0f; --color-surface: #16161f; --color-surface-strong: #1e1e2a; --color-border: #3a3a4a;\n  --color-text: #f0ece0; --color-text-muted: #a3a0ae; --color-primary: #ff3b5c; --color-accent: #2de2e6; --color-tape-yellow: #f5c518;\n  --radius-sm: 2px; --radius-md: 4px; --radius-lg: 6px; --radius-pill: 999px;\n  --shadow-sm: 0 2px 6px rgba(0,0,0,.5); --shadow-md: 0 6px 18px rgba(0,0,0,.55); --shadow-lg: 0 12px 32px rgba(0,0,0,.6);\n  --font-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;\n  --font-display: 'VT323', 'VCR OSD Mono', 'Courier New', monospace;\n  --font-mono: 'VT323', 'Share Tech Mono', 'Courier New', ui-monospace, monospace;\n  --text-xs: .75rem; --text-sm: .875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem;\n  --text-2xl: 1.75rem; --text-3xl: 2.25rem; --text-4xl: 3rem; --text-5xl: 4rem;\n  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;\n  --ease-standard: steps(6, end);\n  --chroma-shadow: -1.5px 0 var(--color-accent), 1.5px 0 var(--color-primary);\n  --scanlines: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px);\n  --tape-grain: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.06), transparent 70%);\n}\n```\n\nCanonical base components — extend with every state from Section 2; do not weaken:\n\n```css\nbody { margin: 0; color: var(--color-text); font-family: var(--font-sans); background: var(--color-bg) var(--tape-grain); }\n.nav { display: flex; gap: var(--space-4); align-items: center; padding: var(--space-3) var(--space-6); background: var(--color-surface); border-bottom: 2px solid var(--color-primary); background-image: var(--scanlines); position: relative; }\n.nav strong { font-family: var(--font-display); letter-spacing: .04em; text-shadow: var(--chroma-shadow); }\n.btn { font: 600 var(--text-base)\u002F1 var(--font-display); color: var(--color-text); padding: var(--space-3) var(--space-6); border-radius: var(--radius-sm); background: var(--color-surface-strong); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); cursor: pointer; transition: transform .1s var(--ease-standard), text-shadow .1s var(--ease-standard); }\n.btn:hover { transform: translateX(1px); text-shadow: var(--chroma-shadow); border-color: var(--color-accent); }\n.btn:active { transform: translateX(0); }\n.btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }\n.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; text-shadow: none; }\n.btn--primary { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }\n.card { background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: var(--space-6); border: 1px solid var(--color-border); background-image: var(--scanlines); position: relative; }\n.card h3 { text-shadow: var(--chroma-shadow); }\n.input { width: 100%; box-sizing: border-box; color: var(--color-text); font: var(--text-base) var(--font-mono); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--color-surface-strong); border: 1px solid var(--color-border); }\n.input::placeholder { color: var(--color-text-muted); }\n.input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 35%, transparent); }\n.badge { display: inline-flex; align-items: center; gap: .4em; font: 700 var(--text-xs) var(--font-display); padding: .3em .8em; border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-on-primary); }\n```\n\n**Signature effects to implement (all pure CSS, all reduced-motion-aware):**\n* **Scanlines \u002F interlacing:** the `--scanlines` overlay on every raised surface (nav, cards, hero, footer) via `background-image` layering or a `::before` pseudo-element with `pointer-events: none`; keep overlay alpha low so text stays crisp.\n* **Chromatic bleed:** `--chroma-shadow` on headings, the nav wordmark, card titles, and badges — cyan ghost left, red ghost right. Headings\u002Flabels only; never body copy.\n* **Tracking distortion:** an occasional horizontal \"tracking error\" band (light, slightly skewed strip) that sweeps down the viewport via keyframes every ~8–14s over ~700ms, implemented on a fixed pseudo-element.\n* **Tape warble:** subtle, low-frequency horizontal jitter\u002Fskew (≤ 2px, stepped easing) on the hero heading only — never impeding readability.\n* **Grain \u002F warm degradation:** `--tape-grain` on the body background; optionally a very subtle opacity-flicker layer (alpha ≤ 0.06).\n* **Date\u002FREC HUD:** a fixed corner HUD in `--font-mono`: a blinking \"REC\" indicator (CSS-animated dot or Material Symbol, always paired with the \"REC\" text) plus a live VHS-style timestamp (e.g., `PM 11:58 12.24.87`) updated by `script.js`. Decorative: `aria-hidden=\"true\"`, `pointer-events: none`, stacked above content but below any modal, and repositioned or hidden on small viewports if it risks overlapping interactive elements.\n* **Light-mode texture variants:** redefine `--scanlines`, `--tape-grain`, and `--chroma-shadow` under the `.light` theme (dark scanline lines, adjusted ghost alpha\u002Foffsets) so artifacts survive on light surfaces. Validate both themes before finishing.\n\n---\n\n## 6. LANDING PAGE SECTION REQUIREMENTS\n\nAll sections live inside `\u003Cmain>`, carry anchor `id`s matching the nav, share a consistent max-width container (~1100–1200px) with token-based padding, and stack in this order:\n\n* **Nav (global):** `.nav` per Section 5 — wordmark in `--font-display` with chroma bleed; links to every section; theme toggle; primary CTA button. Mobile: links collapse behind a menu button opening a dropdown panel (`--z-dropdown`), fully keyboard operable. Smooth in-page scrolling (disabled under reduced motion).\n* **Hero:** near-full-viewport flex column, centered; a `.badge` eyebrow; `\u003Ch1>` in `--font-display` with chroma bleed and the tape-warble animation; supporting paragraph; two CTAs (`.btn--primary` + default `.btn`); decorative HUD elements (REC indicator, timestamp, \"SP\u002FLP\" mode label); tracking-sweep animation active; background = `--color-bg` + grain + scanlines.\n* **Features:** section heading (display font, chroma bleed) + exactly 3 `.card` articles in a responsive flex row (1 column mobile → 3 columns desktop, equal heights via stretch). Each card: Material Symbol icon (accent or tape-yellow), `\u003Ch3>`, description, and a \"Learn more\" link so `:focus-within` highlighting is demonstrable.\n* **How It Works:** exactly 3 steps styled as tape-counter tracks — numerals in `--font-mono` (\"TRACK 01\u002F02\u002F03\" or \"COUNTER 0001\"), each with a title and text; visually connected on desktop (flex row with connector borders) and stacked on mobile.\n* **Testimonials:** 3 quote cards styled as \"tape labels\" — quote, attribution in mono (\"name \u002F role\" like credits), a small `.badge` (e.g., \"VERIFIED PLAYBACK\"), tape-yellow accents; hover elevation per Section 2.2.\n* **Pricing:** exactly 3 tiers; the middle tier highlighted (`.badge` \"BEST VALUE\" in tape-yellow, accent border, `--shadow-lg`, slightly larger on desktop). Each tier: name in display font, price in large mono, feature list with Material check icons, CTA button (`.btn--primary` on the highlighted tier). Pricing CTAs scroll to the Final CTA form.\n* **FAQ:** accessible accordion per Section 2.4 with 6+ substantive on-theme Q&As; chevron rotation; consistent initial state (all closed or first open — pick one).\n* **Final CTA:** high-impact band on `--color-surface-strong` with scanlines; display heading with chromatic bleed; the newsletter `.input-group` from Section 2.3 with the full state machine (focus, valid, invalid, loading, success) and `aria-live` feedback.\n* **Footer:** flex layout wrapping to columns on mobile — brand + one-line description, 2–3 groups of secondary links (pointing to in-page anchors where targets exist), Material Symbol social icons, a mono-font copyright line, and a decorative \"EJECT\" tape legend using a Material Symbol eject icon. Muted footer text must still pass AA contrast in both themes.\n",1791954988739]