Immersive Entertainment Style demo
Immersive Entertainment Style

A cinematic, dark-toned landing page style with dramatic visuals and immersive layouts designed to promote interactive entertainment experiences.
Category: Dark Tech & Cyber
Era: 2020s Modern
Prompt: 18.0 KB · 2410 words
# BUILD PROMPT — Cinematic "Immersive Entertainment" Landing Page (Dark Tech & Cyber)

**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Build the complete, production-quality landing page specified below **in a single pass, on the first attempt**. Every architectural and design decision has already been made — do not ask clarifying questions. Where user-facing copy is required, write realistic, on-theme **English** copy (no lorem ipsum).

**Product Concept:** A next-generation streaming platform launching a fictional **AI-powered interactive series** — viewers shape the story through choices, and the platform delivers personalized recommendations. Invent a short brand name (e.g., "Plotline," "Chronica") and a series title (e.g., "Signal Lost"), and use them consistently.

---

## 0. PROJECT BRIEF & CREATIVE DIRECTION

**0.1 Theme:** "Immersive Entertainment Style" — cinematic, engaging, personalized; era: 2026+ interactive storytelling. Output category: **Dark Tech & Cyber** — blend the streaming-cinematic look (black surfaces, streaming-red glow, bold condensed type) with subtle cyber undertones (neon red/purple glows, faint grid or scanline textures, monospaced tech labels).

**0.2 Copy Language:** All user-facing copy, labels, alt text, and ARIA labels must be written in **English**.

**0.3 Color Roles:**
- **Streaming Red `#E50914`** → primary: CTAs, glows, highlights, focus accents.
- **Black `#000000`** → page background; **Dark Gray `#222222`** → cards, surfaces, modal.
- **White `#FFFFFF`** → primary text (text only — never a background); **Light Gray `#CCCCCC`** → secondary text.
- **Gold `#FFD700`** → ratings, premium accents, "AI Recommends" chips.
- **Purple `#800080`** → AI/storytelling decorative accent; **Blue `#0000FF`** → cyber decorative accent. **Both fail contrast on black — decorative use only** (gradient stops, borders, glows, large graphics); never text or meaning-bearing icons.

**0.4 Mandatory Visual Effects:** looping video background; dynamic movie covers; content-selection micro-interactions; bold sans-serif typography; personalized recommendation elements; cinematic transitions (scroll reveals, modal); blur-and-focus effects (glass panels via backdrop-filter, sibling blur on cover hover).

**0.5 Signature CSS Techniques:** `text-shadow: 0 0 10px rgba(229,9,20,0.5)` on display type; `box-shadow: inset 0 0 20px rgba(0,0,0,0.7)` for depth; `backdrop-filter: blur(10px) saturate(1.5)` on glass panels; `0.4s ease-in-out` motion timing (as `--transition-normal`).

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
- All styling lives in `style.css`. **The `style="..."` attribute is forbidden anywhere in the HTML.**
- All design properties, layout rules, and states are targeted via class/ID selectors only.
- HTML stays clean, semantic, and style-agnostic — re-theming must require editing `style.css` only, never the markup.
- No inline event handlers (`onclick`, etc.); bind all behavior in `script.js` via `addEventListener`.

**1.2 CSS Variables & Theme Tokens**
Define exactly this token sheet in `:root` (you may add tokens; never remove or rename these):

```css
:root {
  color-scheme: dark;

  /* Colors */
  --primary: #E50914;
  --primary-hover: #F40612;
  --secondary: #FFD700;
  --accent-purple: #800080;
  --accent-blue: #0000FF;
  --bg-primary: #000000;
  --bg-secondary: #222222;
  --text-primary: #FFFFFF;
  --text-secondary: #CCCCCC;
  --text-success: #2ECC71;
  --text-error: #FF5252;
  --border-default: #333333;
  --border-error: #FF5252;
  --border-success: #2ECC71;

  /* Effects */
  --glow-red: 0 0 10px rgba(229, 9, 20, 0.5);
  --shadow-inset: inset 0 0 20px rgba(0, 0, 0, 0.7);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.7);
  --blur-panel: blur(10px) saturate(1.5);

  /* Radius, spacing, motion */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --spacing-gap: 1.5rem;
  --transition-fast: 0.2s ease-in-out;
  --transition-normal: 0.4s ease-in-out;
  --ease-standard: ease-in-out;

  /* Elevation */
  --z-dropdown: 1000;
  --z-modal: 2000;
  --z-toast: 3000;

  /* Type */
  --font-display: "Bebas Neue", "Helvetica Neue", Arial, sans-serif;
  --font-base: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", monospace;
}
```

- **Contrast Pairing:** every background token here is dark and must pair with light text tokens. `#FFFFFF` is reserved for text on dark surfaces; if any light surface is ever introduced, it must be `#FEFEFE` (never `#FFFFFF`) paired with dark text.
- **Contrast Requirements:** white on `--primary` passes AA — keep button labels bold. Red `#E50914` as text on black is permitted only at large sizes (≥24px, or ≥18.66px bold). All text must meet WCAG AA (4.5:1 normal, 3:1 large).

**1.3 Mandatory Dark Mode (Dark-Only Theme)**
- Dark mode is the permanent, single theme: the full dark token set lives in `:root`, and `color-scheme: dark` is set so native controls, scrollbars, and form UI render dark.
- **Exception (user-specified):** the source specification explicitly excludes a light mode ("✗ No light / ✓ Full dark"). Do **not** build a light palette, a theme toggle, or localStorage theme persistence — the dark palette is the only theme, and no media query or class may produce a light result.

**1.4 Flexbox Layout & Mobile-First Alignment**
- Build every layout structure with Flexbox.
- **Every flex container defaults to `align-items: center`** unless an explicitly justified exception is declared (as a CSS comment). The only declared exceptions on this page: `.input-group` (stretch, so inputs fill their container), feature/price lists inside cards (`flex-start` for readable left-aligned text), and footer link columns (`flex-start`).
- Mobile-first: single-column by default; promote to rows at `≥768px` (and `≥1024px` where useful). No horizontal scrolling at any viewport from 320px up. Use fluid type via `clamp()`.

**1.5 Framework & Naming Convention**
- **No CSS framework.** The source specification defines a custom-CSS architecture (raw CSS properties and custom classes such as `.video-background` and `.dynamic-cover-hover`), so hand-write all CSS in `style.css`. Do not load Tailwind or any other framework.
- Use **BEM** exclusively and consistently: `.hero__title`, `.card--featured`, `.btn--primary`, `.faq__question`, `.pricing__tier--popular`. Never mix conventions.
- Maintain generic reusable classes — `.btn`, `.card`, `.input-group`, `.section`, `.container` — mapped to the tokens above.

**1.6 Typography & Icons (Google Fonts Mandatory)**
- Load via `<link>` in `<head>`: **Bebas Neue** (display: hero, section titles, cover titles), **Inter** (body/UI), **JetBrains Mono** (eyebrow labels, step numbers, badges). Bind them to `--font-display`, `--font-base`, `--font-mono`.
- **Exception (spec fallback stack):** the source spec's `font-family: "Helvetica, Arial, sans-serif"` is implemented only as the fallback stack behind the Google Font primary — never as the primary font.
- Icons: **Google Material Symbols (Rounded)** via its stylesheet, e.g. `<span class="material-symbols-rounded" aria-hidden="true">play_arrow</span>`. **Forbidden:** inline SVGs, local icon files, emoji used as icons.
- Useful icons for this page: `play_arrow`, `auto_awesome`, `smart_toy`, `movie`, `tune`, `star`, `check`, `close`, `add`, `arrow_forward`, `mail`, `expand_more`, `menu`.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Button (`.btn` + variants `.btn--primary`, `.btn--ghost`, `.btn--gold`, `.btn--danger`)**
- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px, `border-radius: var(--radius-md)`, bold label, transitions on explicit properties (`background-color`, `box-shadow`, `transform`) using the motion tokens.
- **Primary:** `background: var(--primary); color: var(--text-primary)`. Ghost: transparent with `1px solid var(--text-secondary)` border and glass blur. Gold: `var(--secondary)` background with black text.
- **Hover:** brightness lift + `box-shadow: var(--glow-red)` (primary), `cursor: pointer`.
- **Focus:** distinct `:focus-visible` ring — `outline: 2px solid var(--secondary); outline-offset: 2px` — for keyboard navigation.
- **Active/Pressed:** `transform: scale(0.97)`.
- **Loading (`.is-loading` + `aria-busy="true"`):** disables pointer events to prevent double-clicks and renders a pure-CSS spinner (border-ring animation) or spinning Material icon **without changing button dimensions**.
- **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`.
- **Success/Error (`.is-success` / `.is-error`):** temporary feedback driven by `--text-success` / `--text-error`, always paired with an icon or text change — never color alone.
- **Danger:** `.btn--danger` must be visually distinct on black (error-red border/fill + icon).

**2.2 Card (`.card` + modifiers)**
- **Default:** flex column, `background: var(--bg-secondary)`, `border: 1px solid var(--border-default)`, `border-radius: var(--radius-lg)`, `box-shadow: var(--shadow-sm)`, generous padding, `--spacing-gap` internal gaps.
- **Hover:** `transform: translateY(-2px)` + `box-shadow: var(--shadow-md)` + subtle border glow.
- **Focus-within:** border shifts to `var(--primary)` when a child link/button receives focus.
- **Loading (`.card--skeleton`):** shimmer keyframe animation over gray blocks with fixed `min-height`s to prevent layout jumps; region marked `aria-busy="true"`, skeleton `aria-hidden="true"`.
- **Empty State (`.card--empty`):** centered Material icon + clear guidance text.
- Applies to: feature cards, testimonial cards, pricing tiers, and movie covers (`.cover`).

**2.3 Form & Input (`.input-group`)**
- **Structure:** flex column (declared stretch exception) wrapping a `<label>`, the input, and a dedicated error container `.input-group__error` with `aria-live="polite"`.
- **States — all styled via classes/pseudo-classes:** empty (`:placeholder-shown`), focused (`:focus` ring: `border-color: var(--primary)` + `box-shadow: 0 0 0 3px rgba(229,9,20,0.35)`), filled, valid (`.is-valid`: success border + check icon), invalid (`.is-invalid`: error border, error icon, red message text — icon + text, never color alone), disabled, read-only.
- Wire `aria-invalid` and `aria-describedby` to the error container; validate the email with a regex in `script.js` on submit and on blur.

**2.4 Modal (`.modal` — trailer modal)**
- **States:** opening (fade + scale from 0.95), open, loading (CSS spinner while the video buffers), closing (reverse animation) — all via CSS transitions.
- **Structure:** fixed overlay flex container (`align-items: center; justify-content: center`), backdrop with `rgba(0,0,0,0.8)` + `backdrop-filter: var(--blur-panel)` (with a solid-color `@supports` fallback), dialog on `var(--bg-secondary)` with `--radius-lg`, `--shadow-md`, `z-index: var(--z-modal)`, `width: min(90vw, 800px)`.
- **UX:** `role="dialog"`, `aria-modal="true"`, `aria-labelledby`; close button with Material `close` icon, `aria-label="Close trailer"`, 44×44px; keyboard focus trapping (Tab/Shift+Tab cycle inside); closes via `Esc` and backdrop click; body scroll locked while open; focus returns to the trigger on close; video pauses on close.

---

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by Default:** fluid sizing, breakpoints at 480/768/1024px, zero horizontal overflow from 320px up.
- **Smooth Animations:** every state change transitions via the motion tokens. Transition **specific properties**, not `all` — the spec's `transition: all 0.4s ease-in-out` is captured as `--transition-normal` and applied to explicit properties.
- **Reduced Motion:** under `@media (prefers-reduced-motion: reduce)` disable transforms, scroll reveals, and shimmer; pause and fade out video backgrounds (poster/gradient remains); make modal transitions instant; disable smooth scrolling.
- **Accessibility:** WCAG AA contrast throughout; never rely on color alone to communicate state; semantic HTML5 landmarks (`header`, `nav`, `main`, `section`, `footer`) and a strict `h1 → h2 → h3` hierarchy; correct ARIA roles/labels on the accordion, modal, and mobile menu; logical DOM/focus order; full keyboard operability (no mouse-only interactions); `aria-live` regions for form errors, loading states, and any toast; a visible "Skip to content" link; global `:focus-visible` styling.
- **Mandatory Visual Feedback:** every click, hover, and submission triggers a visible state change.
- **Destructive Actions:** `.btn--danger` remains visually distinct against the black theme.
- **Navigation:** anchor links scroll smoothly (`scroll-behavior: smooth`) with `scroll-margin-top` compensating for the fixed header.

---

## 4. DELIVERABLE & OUTPUT FORMAT

- **Files:** separate `index.html`, `style.css`, `script.js`. The only script reference is a single `<script src="script.js" defer></script>` — no inline script blocks. Google Fonts and Material Symbols links live in `<head>`.
- **Naming:** BEM only, everywhere (see 1.5).
- **Copy:** realistic English product copy throughout — lorem ipsum is prohibited. Invent specific, on-theme copy (episode names, testimonial names/roles, FAQ answers, pricing features).
- **Assets:** movie covers are built from layered CSS gradients + Bebas Neue titles (no external images). The hero video is the one genuinely unspecified asset: reference `assets/series-background.mp4` on a `<video>` element with a `poster` attribute and an always-rendered cinematic gradient fallback, so the page is fully complete even if the file is missing. Note: CSS `background-image` cannot load video — implement the spec's video background as a `.video-background` wrapper containing the `<video>` tag plus a legibility gradient overlay.
- **Completeness:** deliver the full page, all sections, all component states, and all interactions working on the first attempt.

---

## 5. PAGE SECTION SPECIFICATIONS

**5.1 Header (site chrome):** fixed; transparent over the hero, then `.header--scrolled` adds `backdrop-filter: var(--blur-panel)`, a dark fill, and a bottom border. Typographic logo with red accent; anchor links (Features, How It Works, Testimonials, Pricing, FAQ) with hover underline + focus ring; compact `.btn--primary` CTA. On mobile the nav collapses behind a hamburger (Material `menu` icon, `aria-expanded`, `aria-controls`, animated panel, `z-index: var(--z-dropdown)`).

**5.2 Hero:** full viewport (`min-height: 100svh`). `.video-background` (absolute, `<video autoplay muted loop playsinline>` + gradient overlay for text legibility). `h1` in `--font-display` with `text-shadow: var(--glow-red)`; mono eyebrow label; tagline referencing personalization ("An interactive series that adapts to you"). CTAs: `.btn--primary` "Start Watching" (`play_arrow`) and `.btn--ghost` "Watch Trailer" (opens the modal). A personalized **"AI Pick for You"** glass chip (`auto_awesome` icon, backdrop blur). A row of 4–5 **dynamic movie covers** ("Selected for You"): gradient poster cards with `.dynamic-cover-hover` micro-interactions — the hovered cover scales (`scale(1.05)`), gains a red glow and a `play_arrow` overlay, while siblings blur and dim (`.covers-list:hover .cover:not(:hover) { filter: blur(2px); opacity: 0.6; }`). Show a brief skeleton shimmer on load (JS-driven; covers remain visible by default if JS is unavailable). Animated scroll cue at the bottom. Staggered cinematic entrance animations (reduced-motion aware).

**5.3 Features — 3 cards:** section heading + three `.card`s, each with a Material icon, `h3`, and copy: (1) AI-Driven Storytelling (`auto_awesome`, purple glow accent), (2) Interactive Choices (`tune`, red accent), (3) Cinematic 4K Streaming (`movie`, gold accent). Full card hover/focus-within states.

**5.4 How It Works — 3 steps:** semantic `<ol>` with three steps (01 Create your profile → 02 The AI learns your taste → 03 Choose your path), mono step numbers, icons, and a connector line (pseudo-element) on desktop; stacked column on mobile.

**5.5 Testimonials:** three `.card--testimonial`s — quote, gold star row (Material `star` icons with `aria-label="Rated 5 out of 5 stars"`), initials avatar circle, name + role.

**5.6 Pricing — 3 tiers:** Viewer / Director / Studio. Middle tier `.pricing__tier--popular`: "Most Popular" badge, red border + glow, slight scale-up, plus a gold **"AI Recommends"** chip (personalization element). Each tier: price, left-aligned feature list with `check` icons (declared flex-start exception), and a CTA that demonstrates the loading → success button states on click.

**5.7 FAQ:** 5–6 items. Each: `<button class="faq__question" aria-expanded="false" aria-controls="...">` + rotating `expand_more` chevron + `<div class="faq__answer" role="region">` with a smooth height animation. One panel open at a time; fully keyboard operable; state conveyed by icon rotation + `aria-expanded`, never color alone.

**5.8 Final CTA:** cinematic full-width band — red radial glow, blurred glass panel, bold `--font-display` headline. Email capture: `.input-group` + `.btn--primary` "Get Early Access". Full validation states with the `aria-live` error container; on valid submit the button shows loading then success, with an inline confirmation message. Optional toast confirmation using `z-index: var(--z-toast)`.

**5.9 Footer:** `var(--bg-secondary)` surface with top border. Brand mark, four columns of secondary links (Product, Company, Support, Legal) with hover/focus styles, Material social icons, and a copyright line with dynamic year.

---

## 6. ACCEPTANCE CHECKLIST

- Zero `style="..."` attributes; all styling in `style.css` via class/ID selectors.
- Complete token sheet from 1.2 in `:root`; `color-scheme: dark`; dark-only (no light palette, no toggle).
- BEM naming only; three separate files; single deferred `script.js`.
- Google Fonts (Bebas Neue, Inter, JetBrains Mono) + Material Symbols; no inline SVGs.
- All button, card, input, and modal states implemented — including loading, disabled, success/error, skeleton, and empty patterns.
- Flexbox everywhere with `align-items: center` default (declared exceptions only); mobile-first; no horizontal scroll at 320px+.
- Keyboard operability, focus trapping, `aria-live` feedback, AA contrast, reduced-motion support.
- Every interaction produces visible feedback; all copy in realistic English.