Signal Lost — Channel 47 demo
Signal Lost — Channel 47

A cyberpunk glitch aesthetic evoking a corrupted TV broadcast, with static noise, scanlines, blend-mode color distortion, and animated signal interference effects.
Category: Dark Tech & Cyber
Era: 2020s Modern
Prompt: 18.0 KB · 2523 words
# BUILD PROMPT — Landing Page: "SIGNAL LOST — channel 47" (Cyberpunk)

**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).

**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.**

**Required Sections:** Header, Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.

---

## 1. STRICT RULES & ARCHITECTURE

### 1.1 CSS-First Architecture & Zero Inline CSS
* **No Inline CSS:** The `style="..."` attribute and `<style>` blocks are forbidden anywhere in the HTML.
* **Class/ID Selectors Only:** Every design property, layout rule, and state must live in `style.css` and be targeted via class or ID selectors.
* **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.

### 1.2 CSS Variables & Theme Tokens
Store **all** visual tokens in `:root`, overridden by `.dark` and a no-JS `@media (prefers-color-scheme: dark)` block. These exact tokens are mandatory:

* **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/surfaces; `#ffffff` is banned) · `--text-primary: #050505` · `--text-secondary: #5a5a5a` · `--text-success: #1b5e20` · `--text-error: #b3261e` · `--border-default: #c8c8c8` · `--border-error: #c23b22` · `--border-success: #1b5e20`.
* **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`.
* **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.
* **Shape & Depth:** `--radius-sm: 2px` · `--radius-md: 4px` · `--radius-lg: 8px` (keep corners sharp — cyberpunk) · `--shadow-sm` / `--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.
* **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)`.
* **Stacking:** `--z-dropdown: 60` · `--z-grain: 90` · `--z-modal: 100` · `--z-toast: 110`.
* **Theme-only extras (permitted):** `--glitch-a: #c23b22` and `--glitch-b: #2dd4bf` for chromatic-split glitch animations only; `--font-display`, `--font-base`, `--font-mono`.

### 1.3 Mandatory Dark Mode Support
* **Implementation:** Define dark tokens both under `@media (prefers-color-scheme: dark)` (no-JS fallback) and a `.dark` class on `<html>` (JS-controlled). Variable swaps must be seamless — zero HTML restructuring.
* **Persistence:** Store choice in `localStorage` (key `signal47-theme`, values `light` / `dark`); fall back to `prefers-color-scheme` on first visit. Header contains a visible toggle `<button>` with correct `aria-pressed` and `aria-label` state, swapping Google Material icons `dark_mode` / `light_mode` via CSS (`.dark` visibility rules — no DOM text swapping).

### 1.4 Flexbox Layout & Mobile-First Alignment
* **Flexbox Only:** All structural layout uses `display: flex` — do **not** use CSS Grid anywhere.
* **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`).
* **Mobile-Friendly First:** Single-column stacks below 768px, two/three-up rows at ≥ 768px / ≥ 1024px. Fluid `clamp()` typography and spacing. Zero horizontal overflow at 320px viewport width.
* **Aspect Ratio:** Hero CRT frame uses `aspect-ratio: 4/3`; testimonial avatars use `aspect-ratio: 1/1`.

### 1.5 Framework Default & Tailwind CSS Integration
* 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`/`@apply` composed into BEM classes — utility classes must never appear in the HTML.

### 1.6 Typography & Icons (Google Fonts Mandatory)
* **Text:** Google Fonts only — `Chakra Petch` (500/600/700) bound to `--font-display` for headings; `Space Grotesk` (400/500/600) bound to `--font-base` for body; `IBM Plex Mono` (400/500) bound to `--font-mono` for technical labels, step numbers, status lines, prices, and footer sign-offs. Load via `<link>` in `<head>`.
* **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.*

---

## 2. COMPONENT DESIGN SPECIFICATIONS

### 2.1 Button Component — `.btn` + `.btn--primary`, `.btn--ghost`, `.btn--accent`
Style **all** states via CSS classes; no JS-applied inline styles:
* **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`.
* **Hover:** `filter: brightness(1.06)` + subtle `--shadow-accent` glow (primary/accent) or border shift (ghost); `cursor: pointer`.
* **Focus:** Distinct `:focus-visible` ring via `box-shadow` using `--secondary`, 2px offset, never removed.
* **Active:** `transform: scale(0.97)`.
* **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"`.
* **Disabled (`[disabled]`):** `opacity: 0.5`, grayscale filter, `cursor: not-allowed`.
* **Success/Error (`.is-success` / `.is-error`):** Temporary feedback tints driven by `--text-success` / `--text-error` (icon swap to `check`/`error` allowed). Define a global `.btn-danger` distinct in both themes.

### 2.2 Card Component — `.card` (Features, Pricing, Testimonials)
* **Default:** Flex column, `--bg-secondary`, 1px `--border-default`, `--radius-md`, `--shadow-sm`; optional cyber notched corner via `clip-path` on featured elements.
* **Hover:** `transform: translateY(-2px)` + `--shadow-md` + border color shifts to `--secondary` (feature/testimonial cards).
* **Focus-within:** Card border highlights when a child link/button receives focus.
* **Loading (Skeleton):** Define `.card--skeleton` with a shimmer `keyframe` animation (gradient sweep) sized to prevent layout jumps.
* **Empty State:** Define `.empty-state` (Material icon + short guidance text) as part of the design system.

### 2.3 Form & Input — Final CTA email capture
* **Structure:** `.input-group` flex container (column, stretch — documented exception) wrapping a `<label for>`, the `<input type="email">`, and a dedicated `<p class="input-group__error">` feedback container.
* **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.
* **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.

### 2.4 Disclosure / FAQ Accordion (+ Modal Contingency)
* **FAQ:** Native `<details class="faq__item">` + `<summary 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/slide keyframe on open. No JS needed for the FAQ.
* **Modal Contingency (not required by the section list):** If any overlay is ever added, it must implement: opening/open/loading/success/closing 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.

---

## 3. CORE UX & MICRO-INTERACTION RULES

* **Responsive by Default:** Fluid sizing, breakpoint stacks, zero horizontal overflow.
* **Smooth Animations:** `transition: var(--transition-normal)` on all state changes; hover transforms per component specs.
* **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`.
* **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.
* **Mandatory Visual Feedback:** Every click, hover, and submission triggers a visible state change.
* **Theme-Mandated Effect Stack (all required):**
  * **Grain/Noise:** `body::after` fixed overlay — feTurbulence SVG data-URI background (per 1.6 exception), `mix-blend-mode: overlay`, opacity ≤ 0.06 light / ≤ 0.09 dark, `pointer-events: none`, `z-index: var(--z-grain)`.
  * **Scanlines:** `body::before` fixed overlay — `repeating-linear-gradient` CRT scanlines, low opacity, `pointer-events: none`.
  * **Glitch Headline:** Hero H1 carries `data-text`; `::before`/`::after` layers animate with `clip-path` keyframe steps, `translate` offsets (±2px), and `--glitch-a`/`--glitch-b` color splits; an ambient keyframe triggers a brief split every few seconds (≥ 90% of the timeline static).
  * **Blend Modes:** Use `mix-blend-mode` in at least two places (grain overlay, scanline or CRT-screen layer, or logo `difference` hover).
  * **CSS Filters:** Use in at least two places (button `brightness`, avatar `grayscale(1)` → 0 on hover, CRT screen `contrast(1.1)`).
  * **Reveal on Scroll:** `IntersectionObserver` adds `.is-visible`; initial hidden states are gated behind a `.js` class added to `<html>` by script so no content is ever hidden without JS; reduced-motion users get instant reveals.

---

## 4. DELIVERABLE & OUTPUT FORMAT

* **File Structure:** Separate `index.html`, `style.css`, `script.js`. The only script reference is a single `<script src="script.js" defer></script>`; no other inline scripts. Google Fonts + Material Symbols links live in `<head>`.
* **Naming Convention:** BEM exclusively (`hero__title`, `card--featured`, `faq__summary`, `input-group__error`). Never mix conventions.
* **Script Scope (vanilla JS only):** theme persistence + toggle; accessible mobile nav (button with `aria-expanded`/`aria-controls`, closes on `Esc`); reveal observer; Final CTA form validation + simulated async submit. Nothing else.
* **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.
* **First-Attempt Output:** Deliver the complete code for all three files in one response — no partial builds, no "to be continued."

---

## 5. THEME DIRECTION — "SIGNAL LOST — channel 47"

* **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.
* **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.
* **Texture Stack (back-to-front):** base gradient → content → scanlines → grain → (modals above grain).
* **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.
* **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).

---

## 6. PAGE STRUCTURE & SECTION SPECIFICATIONS

*(Copy below is suggested direction — refine wording freely, but stay on-theme and in English.)*

**6.1 Header (sticky):** Flex row, `align-items: center`. Left: wordmark "SIGNAL LOST" with mono tag `//CH·47`. Center/right: anchor nav (Features · How It Works · Testimonials · Pricing · FAQ), theme toggle, compact `.btn--accent` "Get Access". Mobile: nav collapses behind a labeled hamburger (`menu`/`close` Material icons, `aria-expanded`, `Esc` closes). Header background uses `--bg-primary` with a bottom hairline border.

**6.2 Hero (min-height ~90vh, flex column, centered):** Mono eyebrow `CH·47 // 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/below: a pure-CSS **CRT frame** — `aspect-ratio: 4/3`, 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/`aria-hidden` where appropriate.

**6.3 Features (3 `.card`s, flex row → column):** Icons `filter_alt` / `graphic_eq` / `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).

**6.4 How It Works (3 steps, flex row → column):** Mono oversized step numbers `01 / 02 / 03`, icons `tune` / `graphic_eq` / `podcasts`, titles TUNE / AMPLIFY / BROADCAST, one-sentence descriptions, connected by a flex-driven horizontal track that becomes vertical on mobile.

**6.5 Testimonials (3 `.card`s):** Quote, CSS-drawn monogram avatars (`aspect-ratio: 1/1`, 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.

**6.6 Pricing (3 `.card`s):** STATIC — $0 (one feed, standard noise floor, community relay) · SIGNAL — $9/mo (**featured**: red 1px border, `--shadow-accent`, notched corner, "BEST SIGNAL" badge, slight scale ≥ 1024px; ghost filter, 3 parallel feeds, priority bandwidth) · BROADCAST — $29/mo (unlimited feeds, dead-drop relay, 24/7 watchtower support). Feature lists use Material `check` icons; each tier gets a CTA (featured uses `.btn--accent`, others `.btn--ghost`).

**6.7 FAQ (5 items, `<details>` 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?

**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.").

**6.9 Footer:** Three secondary link groups (Product: Features/Pricing/FAQ · Relay: About/Transmission Log/Contact · Legal: Privacy/Terms), social icons (`rss_feed`, `podcasts`, `alternate_email`), copyright "© 2025 Channel 47 Relay Cooperative. All frequencies reserved.", and a mono sign-off line `// END OF TRANSMISSION — CH·47`.

---

## 7. TECHNIQUE COVERAGE & QA CHECKLIST

* **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.
* **Before submitting, verify:** zero inline styles/scripts · all mandatory tokens present with valid light/dark 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/marquee-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.