New Era Bold Hero demo
New Era Bold Hero

A bold cinematic hero design featuring full-screen background video with a dark blue fallback, crafted for creative agencies, striking portfolios, editorial landing pages, and fashion brands.
Category: Luxury & Editorial
Era: 2020s Modern
Prompt: 15.2 KB · 2063 words
# SYSTEM PROMPT — CODING AGENT: "NEW ERA BOLD HERO" LANDING PAGE

**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Build the complete, production-quality landing page specified below in a single attempt. Every rule in this document is mandatory unless explicitly marked as an exception.

**Theme:** "New Era Bold Hero" — Bold, Uppercase, Cinematic, Video-Background editorial style (2024–2026 Editorial Cinematic era). Keywords: bold, uppercase, cinematic, full-screen background video, massive typography, Rubik, custom SVG button, dark blue, impactful, editorial.

**Theme Polarity:** Dark-first. Dark mode is the default and primary experience (the source spec marks light mode as "not recommended"); the light palette is secondary and must still satisfy every contrast and accessibility rule.

---

## 0. DESIGN TOKENS & THEME SPECIFICATION

**0.1 Color Palette → CSS Variable Mapping**

Dark theme (default, defined in `:root`):
- `--primary: #21346e` (Dark Blue) · `--secondary: #2A4080` (Medium Blue)
- `--bg-primary: #161a20` (Deep Black-Blue — page background) · `--bg-secondary: #1A1A1A` (Dark Gray — card/surface background)
- `--text-primary: #FFFFFF` (White) · `--text-secondary: #CCCCCC` (Light Gray)
- `--text-success: #4ade80` · `--text-error: #f87171`
- `--border-default: rgba(204, 204, 204, 0.16)` · `--border-success` / `--border-error`: success/error tones at ~50% alpha
- `--bg-hero: #21346e` (hero/video fallback — theme-invariant) · `--cta-bg: #FFFFFF` / `--cta-text: #161a20` (SVG CTA pairing)

Light theme (`.light` class on `<html>` + `@media (prefers-color-scheme: light)`):
- `--bg-primary: #F5F5F5` (Soft White — never pure white) · `--bg-secondary: #fefefe`
- `--text-primary: #161a20` · `--text-secondary: #2A4080`
- `--text-success: #15803d` · `--text-error: #dc2626` · `--border-default: rgba(33, 52, 110, 0.18)`
- The hero and Final CTA regions keep the dark cinematic treatment (`--bg-hero` + white text) in both themes.

Contrast pairing is mandatory in both themes: light backgrounds pair with dark text tokens; dark backgrounds pair with light text tokens.

**0.2 Typography (Google Fonts — Mandatory)**
- Font: **Rubik** (weights 400, 500, 700) via Google Fonts `<link>`; `--font-base: 'Rubik', sans-serif`.
- Hero H1: weight 700, `text-transform: uppercase`, `font-size: clamp(3.5rem, 10vw, 100px)`, `line-height: 0.98`, `letter-spacing: -4px`, three stacked lines, white.
- Section H2: 700, uppercase, `clamp(2rem, 5vw, 3.25rem)`, line-height ~1.05, `letter-spacing: -2px`.
- Card/step H3: 700, uppercase, slight negative tracking.
- Eyebrow labels: 500–700, uppercase, 0.75–0.875rem, `letter-spacing: 0.2em`, colored `--secondary` or `--text-secondary`.
- Body: 400/500, sentence case, 1–1.125rem, line-height 1.65, `--text-secondary`.
- Button labels: 700, uppercase, `letter-spacing: 0.08em`.

**0.3 Hero Background Video**
- Full-screen `<video>` behind hero content: `autoplay`, `loop`, `muted`, `playsinline`, `aria-hidden="true"` (decorative), `object-fit: cover`, absolutely positioned, stacked below content.
- Source: local placeholder path `assets/hero-bg.mp4` (no video asset was supplied — this is the only sanctioned placeholder). The `#21346e` fallback must render seamlessly when the video is absent; the hero must look finished on the fallback alone.
- Asset direction: abstract, fluid, dynamic motion in dark blue tones — geometric shapes or moving particles conveying energy and modernity; cinematic style with smooth transitions.
- Add a dark gradient overlay (e.g., `linear-gradient(rgba(22,26,32,0.55), rgba(22,26,32,0.25))`) between video and text to guarantee WCAG contrast.
- Optional: a CSS-only ambient animated gradient overlay on the fallback layer (disabled under `prefers-reduced-motion`).

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
- All styling lives in `style.css`. The `style="..."` attribute is forbidden in HTML.
- All design properties, layout rules, and states are targeted via class/ID selectors only. SVG fills/strokes must also be set via CSS classes, never presentation attributes.
- HTML remains clean, semantic, and style-agnostic: re-theming the site must require editing only `style.css`.

**1.2 CSS Variables & Theme Tokens**
- Every token in Section 0.1 must exist in `:root`, with light overrides under `.light` and the light media query.
- Required structural tokens: `--radius-sm: 4px`, `--radius-md: 8px`, `--radius-lg: 16px`; `--shadow-sm`, `--shadow-md` (deep, dark-theme-friendly); `--spacing-gap: 1.5rem`; `--transition-fast: 150ms`, `--transition-normal: 250ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`; `--z-dropdown: 10`, `--z-modal: 100`, `--z-toast: 200` (header uses `--z-dropdown`; define modal/toast tokens even if unused).
- The theme favors sharp, angular, editorial edges: cards use `--radius-sm`/`--radius-md`; the CTA shape is fully custom.

**1.3 Mandatory Dark Mode**
- Dark tokens are the `:root` default; light tokens switch seamlessly via the `.light` class — no HTML restructuring.
- Provide a visible theme toggle (Material Symbol `dark_mode`/`light_mode`) with correct `aria-pressed` and dynamically updated `aria-label`; persist the user's choice in `localStorage`.
- **Exception (theme spec):** this theme is dark-first — when no stored preference exists, default to dark; the toggle, persistence, and full light-palette quality remain mandatory.

**1.4 Flexbox Layout & Mobile-First Alignment**
- Build all layout structures with Flexbox (Tailwind flex utilities permitted).
- Every flex container defaults to `align-items: center` unless an exception is explicitly justified and commented in the CSS (documented exceptions: hero content column = `flex-start` left-aligned editorial composition; card internals = `flex-start`/`stretch` where content lengths vary).
- Mobile-first: rows collapse to columns on small viewports; zero horizontal scrolling anywhere (guard `overflow-x`; use `clamp()` typography).

**1.5 Framework Default: Tailwind CSS**
- Use Tailwind CSS via Play CDN. All design decisions (colors, radii, shadows, states) must map back to the CSS variables above; reusable component classes (`.btn`, `.card`, `.input-group`, BEM blocks) are defined in `style.css` via `@layer`/`@apply`.
- Tailwind utilities in markup are allowed for responsive layout/spacing only — never for theme colors or state styling.

**1.6 Typography & Icons (Google Fonts Mandatory)**
- Text: Rubik via Google Fonts (Section 0.2). Icons: Google Material Symbols (Outlined) — raw inline SVG icons and local icon files are forbidden.
- **Exception (theme spec):** the hero/final CTA button's custom shape is a single inline SVG path (184×65, white fill, dark text) — the only permitted inline SVG in the deliverable; every other icon must be a Material Symbol.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Button Component**
- `.btn` base: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px; uppercase 700; `cursor: pointer`; token-driven transitions.
- `.btn--cta` (custom SVG shape — hero + Final CTA): exactly **184×65px**; `position: relative`; inline SVG (`viewBox="0 0 184 65"`) absolutely filling the button with `pointer-events: none`, path fill `var(--cta-bg)` applied via CSS class; label `<span>` overlaid in `var(--cta-text)`. Design a bold, angular/slanted editorial path shape. **Hover: `transform: scale(1.05)`. Active: `scale(0.95)`. Transition: `transform 200ms`** (spec override). Focus-visible: a distinct ring (via `--secondary`, offset so it reads against the white shape).
- `.btn--secondary` (ghost): transparent background, 1px `--border-default`, `--text-primary`; hover: background shift + border brightening.
- `.btn--small`: compact header/pricing variant, ≥44px height.
- States, all via CSS classes: hover (brightness/shadow shift); focus-visible ring; active `scale(0.97)` (CTA uses 0.95 per spec); `.is-loading` (spinner — animated Material Symbol `progress` or CSS ring — swaps with the label without changing button dimensions; `aria-busy="true"`; pointer-events blocked to prevent double submits); `[disabled]` (`opacity: 0.5`, grayscale, `cursor: not-allowed`); success/error feedback styles driven by `--text-success`/`--text-error`.
- No destructive actions exist on this page — do not invent any.

**2.2 Card Component (Features, Testimonials, Pricing tiers)**
- `.card`: flex column, gap, generous padding, `background: var(--bg-secondary)`, 1px `--border-default`, `--radius-sm`, `--shadow-sm`.
- Hover (interactive cards — features and pricing): `translateY(-2px)` + `--shadow-md` + border brightening; `transition: var(--transition-normal)`.
- `:focus-within`: card border highlights when a child button/link receives focus.
- Define a reusable `.skeleton` shimmer animation (CSS-only) in `style.css` for future async content; static sections ship without skeletons but the utility must exist.
- Empty states: not applicable (all content is static and real) — do not fabricate empty regions.

**2.3 Form & Input (Final CTA email capture)**
- `.input-group`: flex column wrapping `<label>`, `<input type="email">`, and a dedicated feedback container (`role="status"`, `aria-live="polite"`).
- States, all via CSS: empty; focused (outline ring via `--secondary`); filled; valid (`--border-success` + Material `check_circle`); invalid (`--border-error`, error text in `--text-error`, Material `error` icon, message announced via `aria-live`); disabled; read-only.
- Submit = the 184×65 SVG CTA button with a full loading → success sequence (simulated async ~1.2s; front-end demo only, no backend).
- Client-side validation on blur/submit; never rely on color alone — pair borders/icons with text messages.

**2.4 FAQ Accordion (no modal exists in this build)**
- Each item: `<button aria-expanded aria-controls>` + matching panel (`role="region"`, `aria-labelledby`).
- Material Symbol `expand_more` chevron rotates 180° via CSS when open; panel height animates via CSS (`grid-template-rows: 0fr → 1fr` or equivalent) with `var(--transition-normal)`.
- Fully keyboard operable (native buttons), visible focus rings, one-open-at-a-time via JS, respects `prefers-reduced-motion`.

---

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by default:** fluid `clamp()` sizing, mobile-first flex layouts, zero horizontal overflow.
- **Smooth animations:** CSS transitions on every state change; under `prefers-reduced-motion`, disable transforms, shimmer, chevron/panel animation, and the ambient overlay, and pause the video (no autoplay).
- **Accessibility (a11y):** semantic HTML5 (`header`/`main`/`section`/`nav`/`footer`, `lang="en"`, a "Skip to content" link as first focusable element, one `h1` → `h2` per section → `h3` cards); correct ARIA on toggle, accordion, and form feedback; logical DOM/focus order; full keyboard operability; WCAG AA contrast in dark (default) and light; never color-alone state communication.
- **Mandatory visual feedback:** every click, hover, focus, and submission triggers a visible state change.
- Smooth in-page anchor scrolling (`scroll-behavior: smooth`; `auto` under reduced motion).

---

## 4. DELIVERABLE & OUTPUT FORMAT

- **Files:** separate, complete `index.html`, `style.css`, `script.js`. No inline `<script>` beyond one deferred `<script src="script.js" defer>`; no inline event handlers (`addEventListener` only).
- **Naming:** strict BEM (`block__element--modifier`) for all custom classes; `.is-*`/`.has-*` state classes permitted; Tailwind utilities only for responsive layout/spacing. Never mix conventions.
- **script.js scope:** theme toggle + `localStorage`, FAQ accordion, email form validation/states, reduced-motion video handling, optional header scroll state. No other behavioral JS.
- **Copy:** all user-facing copy in **English** — bold, confident, minimal, editorial. Write real on-brand copy for a fictional next-generation digital product (hero headline direction: three uppercase lines, e.g., "THE NEW ERA / OF DIGITAL / STARTS NOW" — final wording is yours). Lorem ipsum is forbidden; placeholders are permitted only for the video asset path and `href="#"` for unbuilt footer pages.
- Deliver everything in one response: complete `index.html`, `style.css`, and `script.js`.

---

## 5. PAGE BLUEPRINT — SECTION-BY-SECTION SPEC

**5.0 Minimal Fixed Header (chrome, not a content section)**
- Fixed top; flex, `align-items: center`, `justify-content: space-between`; translucent `--bg-primary` backdrop with blur; `--z-dropdown`.
- Left: wordmark logo (Rubik 700, uppercase). Right: theme toggle (1.3/2.1) + compact `.btn--small` CTA ("Get Started").

**5.1 Hero**
- `min-height: 100svh`; `background: var(--bg-hero)` fallback; video layer (0.3); overlay; content container.
- Content top-aligned with significant top padding: **pt-32 (8rem) mobile → pt-48 (12rem) desktop** (spec).
- Stack: eyebrow kicker → three-line H1 (0.2, white) → one-line subhead (`--text-secondary`, max-width ~34rem) → CTA row (flex, gap, wrap): `.btn--cta` ("Start Free") + `.btn--secondary` ("See How It Works", anchors to 5.3) → subtle scroll cue (Material `arrow_downward`, `aria-hidden`, gentle bounce).

**5.2 Features — 3 cards**
- Section header: eyebrow + H2 + one intro sentence.
- Flex-wrap row (1 column mobile → 3 columns ≥768px), `gap: var(--spacing-gap)`.
- Each `.card`: Material Symbol icon badge (e.g., `bolt`, `auto_awesome`, `insights`), uppercase H3, 2–3 sentence body. Full 2.2 states.

**5.3 How It Works — 3 steps**
- Editorial numbered layout: oversized numerals "01 / 02 / 03" (Rubik 700, `--secondary`, negative tracking), uppercase step titles, short descriptions.
- Flex column mobile → row desktop; optional CSS connector line between steps on desktop (pseudo-element, hidden on mobile).

**5.4 Testimonials — 3 cards**
- `.card` per 2.2 (static — hover optional/subtle): Material `format_quote` icon, 1–3 sentence quote, author name (700), role (`--text-secondary`), initials avatar circle (CSS-styled, `--secondary` background, white text — no external images).

**5.5 Pricing — 3 tiers**
- Flex-wrap row, 1 column mobile → 3 columns desktop; middle tier highlighted: "MOST POPULAR" badge (uppercase chip, `--secondary` background / white text), brighter border, `--shadow-md`, slight desktop scale.
- Each tier `.card`: uppercase tier name; price (Rubik 700, ~3rem) + period; feature list with Material `check` icons; CTA button (highlighted tier: solid `--primary`/white variant; others: `.btn--secondary`). Full 2.1 states.

**5.6 FAQ**
- Section header + 5–6 accordion items per 2.4; max-width ~48rem, centered.

**5.7 Final CTA**
- Full-bleed panel on `var(--bg-hero)` (#21346e) with white text (theme-invariant, mirrors the hero).
- Massive uppercase H2 (2–3 lines, `clamp(2.5rem, 7vw, 4.5rem)`, `letter-spacing: -2px`), one supporting line, email capture form per 2.3 (input + 184×65 SVG submit button), small privacy microcopy line.

**5.8 Footer — secondary links**
- Background `--bg-secondary` with top border `--border-default`.
- Top row (flex, wrap, column on mobile): brand block (logo + one-line tagline) + 2–3 link columns (e.g., Product: Features/Pricing/FAQ anchors; Company: About/Careers/Contact; Support: Help/Privacy/Terms).
- Links: `--text-secondary`, hover → `--text-primary` with underline; visible focus rings.
- Bottom bar: copyright (current year via JS permitted) + legal links; optional social icon row using available Material Symbols (e.g., `share`, `public`, `mail`).