[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-710-SIGNAL-LOST-channel-47":3},"# BUILD PROMPT — Landing Page: \"SIGNAL LOST — channel 47\" (Cyberpunk)\n\n**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality landing page in a single first-attempt response — full `index.html`, `style.css`, and `script.js`. All user-facing copy must be written in English, fully on-theme, and concrete (no lorem ipsum).\n\n**Theme Summary:** \"SIGNAL LOST — channel 47\" — a 2020s-contemporary cyberpunk broadcast aesthetic: dead-channel TV static, CRT scanlines, chromatic glitch, and a strict monochrome gray family (`#050505`, `#0a0a0a`, `#7a7a7a`, `#c8c8c8`, `#e8e8e8`) punctured exclusively by signal-red `#c23b22`. Sharp corners, notched clip-paths, mono type for technical labels. **Light mode is the default mode per the theme spec — the mandatory Dark Mode requirement is NOT waived; both modes must be fully implemented and user-toggleable.**\n\n**Required Sections:** Header, 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* **No Inline CSS:** The `style=\"...\"` attribute and `\u003Cstyle>` blocks are forbidden anywhere in the HTML.\n* **Class\u002FID Selectors Only:** Every design property, layout rule, and state must live in `style.css` and be targeted via class or ID selectors.\n* **Minimal HTML Modifications:** HTML stays semantic and style-agnostic — changing the look must never require markup edits. `data-*` attributes (e.g., `data-text` mirroring headline text for CSS glitch pseudo-layers) are permitted as pure style hooks; no presentational wrapper elements.\n\n### 1.2 CSS Variables & Theme Tokens\nStore **all** visual tokens in `:root`, overridden by `.dark` and a no-JS `@media (prefers-color-scheme: dark)` block. These exact tokens are mandatory:\n\n* **Colors (Light — default):** `--primary: #050505` (ink: primary buttons, key surfaces) · `--secondary: #c23b22` (signal red: accents, featured elements, focus) · `--bg-primary: #e8e8e8` (industrial light gray — never pure white) · `--bg-secondary: #fefefe` (raised cards\u002Fsurfaces; `#ffffff` is banned) · `--text-primary: #050505` · `--text-secondary: #5a5a5a` · `--text-success: #1b5e20` · `--text-error: #b3261e` · `--border-default: #c8c8c8` · `--border-error: #c23b22` · `--border-success: #1b5e20`.\n* **Colors (Dark):** `--primary: #e8e8e8` (inverted primary buttons: light bg, dark text) · `--secondary: #c23b22` · `--bg-primary: #0a0a0a` · `--bg-secondary: #141414` · `--text-primary: #e8e8e8` · `--text-secondary: #9a9a9a` · `--text-success: #69db7c` · `--text-error: #ff6f56` · `--border-default: #2e2e2e` · `--border-error: #ff6f56` · `--border-success: #69db7c`.\n* **Contrast Pairing:** Every light background pairs with dark text and every dark background with light text in **both** themes. Body text must hit ≥ 4.5:1 in both modes — verify. `#7a7a7a` is reserved for large (≥ 24px) decorative mono labels only. Red `#c23b22` as small-text color must use the lightened dark-mode variant (`#ff6f56`); on light backgrounds use `#b3261e` for small error text.\n* **Shape & Depth:** `--radius-sm: 2px` · `--radius-md: 4px` · `--radius-lg: 8px` (keep corners sharp — cyberpunk) · `--shadow-sm` \u002F `--shadow-md` (soft in light mode, subtle in dark) · optional `--shadow-accent: 0 0 24px rgba(194,59,34,0.35)` for the featured pricing tier and primary CTA glow.\n* **Motion & Space:** `--spacing-gap: 1.5rem` · `--spacing-section: clamp(4rem, 10vw, 7.5rem)` · `--transition-fast: 150ms` · `--transition-normal: 300ms` · `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.\n* **Stacking:** `--z-dropdown: 60` · `--z-grain: 90` · `--z-modal: 100` · `--z-toast: 110`.\n* **Theme-only extras (permitted):** `--glitch-a: #c23b22` and `--glitch-b: #2dd4bf` for chromatic-split glitch animations only; `--font-display`, `--font-base`, `--font-mono`.\n\n### 1.3 Mandatory Dark Mode Support\n* **Implementation:** Define dark tokens both under `@media (prefers-color-scheme: dark)` (no-JS fallback) and a `.dark` class on `\u003Chtml>` (JS-controlled). Variable swaps must be seamless — zero HTML restructuring.\n* **Persistence:** Store choice in `localStorage` (key `signal47-theme`, values `light` \u002F `dark`); fall back to `prefers-color-scheme` on first visit. Header contains a visible toggle `\u003Cbutton>` with correct `aria-pressed` and `aria-label` state, swapping Google Material icons `dark_mode` \u002F `light_mode` via CSS (`.dark` visibility rules — no DOM text swapping).\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n* **Flexbox Only:** All structural layout uses `display: flex` — do **not** use CSS Grid anywhere.\n* **Default Alignment Rule:** Every flex container defaults to `align-items: center`. Documented exceptions are limited to: `.input-group` (column, `align-items: stretch`), step rows in How It Works (`flex-start` with self-centered icons), and card bodies (column, `stretch`).\n* **Mobile-Friendly First:** Single-column stacks below 768px, two\u002Fthree-up rows at ≥ 768px \u002F ≥ 1024px. Fluid `clamp()` typography and spacing. Zero horizontal overflow at 320px viewport width.\n* **Aspect Ratio:** Hero CRT frame uses `aspect-ratio: 4\u002F3`; testimonial avatars use `aspect-ratio: 1\u002F1`.\n\n### 1.5 Framework Default & Tailwind CSS Integration\n* Use clean, hand-authored custom CSS (the framework-default clause) with **zero framework CDNs**. If any Tailwind directive is used, it may only appear inside `style.css` via `@layer`\u002F`@apply` composed into BEM classes — utility classes must never appear in the HTML.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n* **Text:** Google Fonts only — `Chakra Petch` (500\u002F600\u002F700) bound to `--font-display` for headings; `Space Grotesk` (400\u002F500\u002F600) bound to `--font-base` for body; `IBM Plex Mono` (400\u002F500) bound to `--font-mono` for technical labels, step numbers, status lines, prices, and footer sign-offs. Load via `\u003Clink>` in `\u003Chead>`.\n* **Icons:** Google Material Symbols (Outlined) via the official Google Fonts link. **Raw inline SVG icons and local icon files are forbidden.** *Exception clause: an SVG data-URI is permitted only as a CSS `background-image` texture for the film-grain overlay (feTurbulence) — it is a texture, not an icon; every visible icon must be a Material Symbol.*\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Button Component — `.btn` + `.btn--primary`, `.btn--ghost`, `.btn--accent`\nStyle **all** states via CSS classes; no JS-applied inline styles:\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px. `.btn--primary` = `--primary` bg + contrasting text token; `.btn--ghost` = transparent, 1px `--border-default`; `.btn--accent` = red `--secondary`.\n* **Hover:** `filter: brightness(1.06)` + subtle `--shadow-accent` glow (primary\u002Faccent) or border shift (ghost); `cursor: pointer`.\n* **Focus:** Distinct `:focus-visible` ring via `box-shadow` using `--secondary`, 2px offset, never removed.\n* **Active:** `transform: scale(0.97)`.\n* **Loading (`.is-loading`):** Blocks interaction and double-clicks; renders a CSS ring spinner (animated `border` element or rotating Material `progress` icon) without changing button dimensions; sets `aria-busy=\"true\"`.\n* **Disabled (`[disabled]`):** `opacity: 0.5`, grayscale filter, `cursor: not-allowed`.\n* **Success\u002FError (`.is-success` \u002F `.is-error`):** Temporary feedback tints driven by `--text-success` \u002F `--text-error` (icon swap to `check`\u002F`error` allowed). Define a global `.btn-danger` distinct in both themes.\n\n### 2.2 Card Component — `.card` (Features, Pricing, Testimonials)\n* **Default:** Flex column, `--bg-secondary`, 1px `--border-default`, `--radius-md`, `--shadow-sm`; optional cyber notched corner via `clip-path` on featured elements.\n* **Hover:** `transform: translateY(-2px)` + `--shadow-md` + border color shifts to `--secondary` (feature\u002Ftestimonial cards).\n* **Focus-within:** Card border highlights when a child link\u002Fbutton receives focus.\n* **Loading (Skeleton):** Define `.card--skeleton` with a shimmer `keyframe` animation (gradient sweep) sized to prevent layout jumps.\n* **Empty State:** Define `.empty-state` (Material icon + short guidance text) as part of the design system.\n\n### 2.3 Form & Input — Final CTA email capture\n* **Structure:** `.input-group` flex container (column, stretch — documented exception) wrapping a `\u003Clabel for>`, the `\u003Cinput type=\"email\">`, and a dedicated `\u003Cp class=\"input-group__error\">` feedback container.\n* **States:** Empty · Focused (`:focus` outline ring via `--secondary`) · Filled · Valid (`.is-valid`: success border + `check` icon) · Invalid (`.is-invalid`: `--border-error`, red text, `error` icon, message in the error container with `aria-live=\"polite\"`) · Disabled · Read-only.\n* **Behavior:** JS validates the email format on submit (never color-only — icon + text + border). Submit button runs `.is-loading` (simulated async) → `.is-success` with confirmation copy \"SIGNAL ACQUIRED\" announced via an `aria-live` status region. No page reload.\n\n### 2.4 Disclosure \u002F FAQ Accordion (+ Modal Contingency)\n* **FAQ:** Native `\u003Cdetails class=\"faq__item\">` + `\u003Csummary class=\"faq__summary\">` for guaranteed keyboard operability. Summary contains the question, a `:focus-visible` ring, and a trailing Material `expand_more` icon that rotates 180° via CSS on `[open]`; content gets a short fade\u002Fslide keyframe on open. No JS needed for the FAQ.\n* **Modal Contingency (not required by the section list):** If any overlay is ever added, it must implement: opening\u002Fopen\u002Floading\u002Fsuccess\u002Fclosing states animated via CSS; centered flex container (`align-items: center`) with backdrop overlay; Material icon close button; keyboard focus trapping; close via `Esc` and overlay click.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by Default:** Fluid sizing, breakpoint stacks, zero horizontal overflow.\n* **Smooth Animations:** `transition: var(--transition-normal)` on all state changes; hover transforms per component specs.\n* **Reduced Motion:** Under `prefers-reduced-motion: disable` the glitch flicker, static-noise motion, blinking cursors, and reveal animations (show content instantly). **No animation may flash more than 3 times per second.** Decorative animated layers are `aria-hidden=\"true\"` and `pointer-events: none`.\n* **Accessibility (a11y):** `lang=\"en\"`; landmarks (`header`, `nav`, `main`, `section` with `aria-labelledby`, `footer`); visually-hidden skip-to-content link; logical focus order; full keyboard operability; visible `:focus-visible` styles everywhere; `aria-live` regions for form feedback; WCAG AA contrast verified in **both** modes; never rely on color alone to communicate state.\n* **Mandatory Visual Feedback:** Every click, hover, and submission triggers a visible state change.\n* **Theme-Mandated Effect Stack (all required):**\n  * **Grain\u002FNoise:** `body::after` fixed overlay — feTurbulence SVG data-URI background (per 1.6 exception), `mix-blend-mode: overlay`, opacity ≤ 0.06 light \u002F ≤ 0.09 dark, `pointer-events: none`, `z-index: var(--z-grain)`.\n  * **Scanlines:** `body::before` fixed overlay — `repeating-linear-gradient` CRT scanlines, low opacity, `pointer-events: none`.\n  * **Glitch Headline:** Hero H1 carries `data-text`; `::before`\u002F`::after` layers animate with `clip-path` keyframe steps, `translate` offsets (±2px), and `--glitch-a`\u002F`--glitch-b` color splits; an ambient keyframe triggers a brief split every few seconds (≥ 90% of the timeline static).\n  * **Blend Modes:** Use `mix-blend-mode` in at least two places (grain overlay, scanline or CRT-screen layer, or logo `difference` hover).\n  * **CSS Filters:** Use in at least two places (button `brightness`, avatar `grayscale(1)` → 0 on hover, CRT screen `contrast(1.1)`).\n  * **Reveal on Scroll:** `IntersectionObserver` adds `.is-visible`; initial hidden states are gated behind a `.js` class added to `\u003Chtml>` by script so no content is ever hidden without JS; reduced-motion users get instant reveals.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n* **File Structure:** Separate `index.html`, `style.css`, `script.js`. The only script reference is a single `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`; no other inline scripts. Google Fonts + Material Symbols links live in `\u003Chead>`.\n* **Naming Convention:** BEM exclusively (`hero__title`, `card--featured`, `faq__summary`, `input-group__error`). Never mix conventions.\n* **Script Scope (vanilla JS only):** theme persistence + toggle; accessible mobile nav (button with `aria-expanded`\u002F`aria-controls`, closes on `Esc`); reveal observer; Final CTA form validation + simulated async submit. Nothing else.\n* **Copy:** All English, on-theme, concrete — no lorem ipsum. `href=\"#\"` is acceptable only for genuinely unspecified destinations (e.g., legal links); section nav links must be real in-page anchors.\n* **First-Attempt Output:** Deliver the complete code for all three files in one response — no partial builds, no \"to be continued.\"\n\n---\n\n## 5. THEME DIRECTION — \"SIGNAL LOST — channel 47\"\n\n* **Mood:** A dead-channel broadcast hijacked back to life. Technical, urgent, analog-horror meets clean 2020s product design. Roughly 90% monochrome; signal-red `#c23b22` restricted to ~10% of visual weight (accents, focus, featured tier, glitch layers) so it always reads as an alarm.\n* **Type Roles:** Chakra Petch headlines in uppercase with tight tracking; Space Grotesk body; IBM Plex Mono for eyebrows, status lines, step numbers, prices, and the footer sign-off — mono text is the \"broadcast metadata\" voice.\n* **Texture Stack (back-to-front):** base gradient → content → scanlines → grain → (modals above grain).\n* **Dos:** Notched `clip-path` corners on the featured pricing card and primary CTA; sharp radii; `--shadow-accent` glow on red elements; gradients used as animated static inside the CRT frame and as subtle section washes.\n* **Don'ts:** No rainbow neon, no glassmorphism card soup, no purple-blue cyberpunk clichés, no pure white, no rounded 16px+ corners, no heavy drop shadows in dark mode (use borders).\n\n---\n\n## 6. PAGE STRUCTURE & SECTION SPECIFICATIONS\n\n*(Copy below is suggested direction — refine wording freely, but stay on-theme and in English.)*\n\n**6.1 Header (sticky):** Flex row, `align-items: center`. Left: wordmark \"SIGNAL LOST\" with mono tag `\u002F\u002FCH·47`. Center\u002Fright: anchor nav (Features · How It Works · Testimonials · Pricing · FAQ), theme toggle, compact `.btn--accent` \"Get Access\". Mobile: nav collapses behind a labeled hamburger (`menu`\u002F`close` Material icons, `aria-expanded`, `Esc` closes). Header background uses `--bg-primary` with a bottom hairline border.\n\n**6.2 Hero (min-height ~90vh, flex column, centered):** Mono eyebrow `CH·47 \u002F\u002F BROADCAST INTERRUPTED` · glitch-animated H1 \"SIGNAL LOST\" · subhead (\"The feed went dark at 00:47. Channel 47 is the underground relay rebuilding the broadcast — uncensored, unbuffered, unlost.\") · dual CTAs: `.btn--accent` \"Restore the Signal\" + `.btn--ghost` \"See How It Works\" · blinking-cursor status line `▸ REACQUIRING FEED… STAND BY`. Beside\u002Fbelow: a pure-CSS **CRT frame** — `aspect-ratio: 4\u002F3`, bordered bezel, inner screen with animated static gradient (`background-position` keyframes), scanline overlay, `sensors_off` Material icon, and mono caption `NO SIGNAL — CH 47`. All layers decorative\u002F`aria-hidden` where appropriate.\n\n**6.3 Features (3 `.card`s, flex row → column):** Icons `filter_alt` \u002F `graphic_eq` \u002F `bolt`. Suggested titles: \"Ghost Frequency Filter\" (carves broadcast clarity out of carrier noise), \"Static Uplink\" (encrypted dead-band connection that survives grid drops), \"Zero-Latency Relay\" (repeats your feed across the dark network in under 47ms).\n\n**6.4 How It Works (3 steps, flex row → column):** Mono oversized step numbers `01 \u002F 02 \u002F 03`, icons `tune` \u002F `graphic_eq` \u002F `podcasts`, titles TUNE \u002F AMPLIFY \u002F BROADCAST, one-sentence descriptions, connected by a flex-driven horizontal track that becomes vertical on mobile.\n\n**6.5 Testimonials (3 `.card`s):** Quote, CSS-drawn monogram avatars (`aspect-ratio: 1\u002F1`, mono initials, `grayscale(1)` → color on hover), fictional names + handles (e.g., \"Mara V. — Pirate Radio Operator · @nightwave_47\"). Quotes reference static, dead air, and reacquired signals.\n\n**6.6 Pricing (3 `.card`s):** STATIC — $0 (one feed, standard noise floor, community relay) · SIGNAL — $9\u002Fmo (**featured**: red 1px border, `--shadow-accent`, notched corner, \"BEST SIGNAL\" badge, slight scale ≥ 1024px; ghost filter, 3 parallel feeds, priority bandwidth) · BROADCAST — $29\u002Fmo (unlimited feeds, dead-drop relay, 24\u002F7 watchtower support). Feature lists use Material `check` icons; each tier gets a CTA (featured uses `.btn--accent`, others `.btn--ghost`).\n\n**6.7 FAQ (5 items, `\u003Cdetails>` accordion per 2.4):** What is Channel 47? · Why does dark mode feel like night watch? (toggle hint) · Does it work when the grid is down? · Can I cancel my relay? · Is my signal private?\n\n**6.8 Final CTA:** Glitch-styled H2 \"RESTORE THE SIGNAL\", supporting line, and the email capture form per 2.3 (placeholder \"you@darkrelay.net\", button \"Reacquire Feed\", success announcement \"SIGNAL ACQUIRED — welcome to the broadcast.\").\n\n**6.9 Footer:** Three secondary link groups (Product: Features\u002FPricing\u002FFAQ · Relay: About\u002FTransmission Log\u002FContact · Legal: Privacy\u002FTerms), social icons (`rss_feed`, `podcasts`, `alternate_email`), copyright \"© 2025 Channel 47 Relay Cooperative. All frequencies reserved.\", and a mono sign-off line `\u002F\u002F END OF TRANSMISSION — CH·47`.\n\n---\n\n## 7. TECHNIQUE COVERAGE & QA CHECKLIST\n\n* **Required CSS techniques (all must appear):** Flexbox · Blend Modes (≥ 2 usages) · CSS Filters (≥ 2 usages) · Keyframe Animations (glitch, static, shimmer, spinner, reveal) · Transitions · Transforms · Gradients (≥ 2 usages) · Border Radius (via tokens) · Aspect Ratio.\n* **Before submitting, verify:** zero inline styles\u002Fscripts · all mandatory tokens present with valid light\u002Fdark pairs · dark mode toggles and persists via `localStorage` · no horizontal scroll at 320px · every interactive element has hover, focus-visible, and active feedback · all states in 2.1–2.3 defined in CSS · reduced-motion disables flicker\u002Fmarquee-style motion · all icons are Material Symbols · all copy is English, on-theme, and concrete · BEM naming only · all three files complete and delivered in one response.\n",1791954991577]