[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-630-Runway-Cinematic-Editorial":3},"# SYSTEM PROMPT — Build the \"Runway Cinematic Editorial\" Landing Page\n\n**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Produce a complete, production-grade landing page in a single attempt — no partial deliverables, no TODOs, no stub sections.\n\n**Mission:** Create a cinematic, editorial-magazine-style landing page for an AI video generation platform (Runway-inspired), where full-bleed photography and video act as the primary UI elements, typography is composed like film titles, and the interface itself is intentionally invisible — zero shadows, minimal borders, pure editorial craft.\n\n---\n\n## 1. THEME DEFINITION & DESIGN LANGUAGE\n\n* **Name:** Runway Cinematic Editorial\n* **Type:** Cinematic · Full-Bleed Photography · Single Typeface · Zero Shadows · Film-Title Typography\n* **Era:** 2024–2026 AI Cinematic Creative\n* **Keywords:** runway, cinematic, full-bleed photography, single font, film titles, cool neutrals, editorial magazine, AI video\n* **Visual Direction:** Full-bleed cinematic photography and video as primary UI elements. One single typeface for everything — from 48px+ display headlines down to 11px micro labels. Tight headlines (`line-height: 1.0`) with negative tracking (-0.9px to -1.2px) styled like film titles. Zero shadows, minimal borders — an intentionally invisible interface. Cool-toned neutrals. Uppercase labels with positive letter-spacing (0.35px). An unusual font-weight of 450 for labels — precision typographic craft. Editorial magazine layout with mixed-size image grids.\n* **Color Palette (use exactly these values):**\n  * Primary: Black `#000000`, White `#ffffff`, Dark `#1a1a1a`, Cool Cloud `#e9ecf2`\n  * Secondary: Charcoal `#404040`, Cool Slate `#767d88`, Mid Slate `#7d848e`, Border `#27272a`\n\n---\n\n## 2. STRICT RULES & ARCHITECTURE\n\n**2.1 CSS-First Architecture & Zero Inline CSS**\n* No `style=\"...\"` attributes anywhere in the HTML. All styling lives in `style.css`, targeted exclusively via class\u002FID selectors.\n* HTML must remain semantic and style-agnostic — restyling the entire page must only require editing the CSS file, never the markup.\n\n**2.2 CSS Variables & Theme Tokens**\nStore every visual token in `:root` and theme classes:\n* **Colors:** `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.\n* **Dark theme (cinematic default):** `--bg-primary: #000000`, `--bg-secondary: #1a1a1a`, `--text-primary: #ffffff`, `--text-secondary: #767d88` (muted: `#7d848e`), `--border-default: #27272a`, `--primary: #ffffff` (inverted white button carrying black text).\n* **Light theme:** `--bg-primary: #e9ecf2` (Cool Cloud — never pure white), `--bg-secondary: #fefefe`, `--text-primary: #000000`, `--text-secondary: #404040`, muted `#767d88` (uppercase\u002Flarge text only), `--border-default: rgba(0,0,0,0.15)`, `--primary: #000000`.\n* **Functional semantic colors** (outside the brand palette, kept cool\u002Fdesaturated): `--text-error: #e5484d`, `--border-error`, `--text-success: #30a46c`, `--border-success`.\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 just the default.\n* **Radius:** `--radius-sm: 4px`, `--radius-md: 4px` (functional: buttons, inputs, cards, imagery), `--radius-lg: 16px` (alerts\u002Fmodals only).\n* **Shadows:** define `--shadow-sm` and `--shadow-md` but resolve both to `none` — explicit theme exception; elevation is achieved only through 1px borders and background shifts.\n* **Spacing & transitions:** `--spacing-gap`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.\n* **Stacking:** `--z-dropdown`, `--z-modal`, `--z-toast` to prevent layered-component conflicts.\n\n**2.3 Mandatory Dark Mode**\n* Both full light and full dark themes are required. Provide dark tokens under a `.dark` class selector AND an `@media (prefers-color-scheme: dark)` fallback; also set the `color-scheme` property so native controls match.\n* First visit follows `prefers-color-scheme`; when no preference is expressed, default to dark (the cinematic identity). Persist the user's choice in `localStorage` under a named key.\n* Include a visible toggle in the header using Material Symbols `dark_mode`\u002F`light_mode`, with correct `aria-pressed` and `aria-label` state. Switching themes must never require HTML restructuring.\n\n**2.4 Flexbox Layout & Mobile-First Alignment**\n* Build all layout structures with Flexbox. Every flex container defaults to `align-items: center` unless an exception is explicitly justified (allowed exception: `stretch` on mixed-size image-grid cells to preserve aspect ratios).\n* Mixed-size editorial grids must be built with differing `flex-grow`\u002F`flex-basis` values on siblings, collapsing to a single column below 768px. No horizontal scrolling at any viewport width.\n\n**2.5 Framework Default**\n* Use Tailwind CSS (CDN or compiled) or clean custom CSS driven by Tailwind's `@layer`\u002F`@apply` directives. All utility classes must map back to CSS variables or generic reusable classes (`.btn`, `.card`, `.input-group`).\n\n**2.6 Typography & Icons (Google Fonts Mandatory)**\n* **Text:** Google Fonts only. **Exception clause:** the source specification names `abcNormal`, a commercial typeface not available on Google Fonts — keep the Google Fonts rule and load **Inter (variable)** from Google Fonts as the single approved substitute; do not load `abcNormal` or any non-Google-Fonts typeface. The source's `system-ui` fallback is likewise overridden by Inter.\n* **Single typeface for everything:** `--font-base: 'Inter', sans-serif` — from display to micro labels; no secondary font at any size.\n* **Type scale:** Display XL `clamp(48px, 9vw, 96px)`, `line-height: 1.0`, `letter-spacing: -1.2px`, weight 500; section titles 32–40px, `letter-spacing: -0.9px`; body 16px, `line-height: 1.6`, `letter-spacing: 0`; micro labels 11px, uppercase, `letter-spacing: 0.35px`, weight 450 (via the variable font axis).\n* **Icons:** Google Material Symbols (Outlined) only — inline SVGs and local icon files are forbidden. Use icons sparingly; the interface is intentionally invisible.\n\n---\n\n## 3. COMPONENT DESIGN SPECIFICATIONS\n\n**3.1 Buttons** — every state styled via CSS classes:\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;`, minimum 44×44px touch target, radius 4px, zero shadows. Primary = inverted (white bg\u002Fblack text in dark mode; black bg\u002Fwhite text in light mode). Secondary = transparent with 1px `--border-default`.\n* **Hover:** background\u002Fbrightness shift with `cursor: pointer` — never a shadow.\n* **Focus:** distinct 2px `outline` in a high-contrast token with offset — never `box-shadow` (zero-shadow theme).\n* **Active\u002FPressed:** `transform: scale(0.97)`.\n* **Loading:** disables interaction and double-clicks; renders a CSS spinner or animated Material Symbol without changing button dimensions.\n* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n* **Success\u002FError:** temporary feedback states driven by `--text-success` \u002F `--text-error`.\n* **`.btn-danger`:** must be visually distinct in both light and dark themes (define it even if unused on this page).\n\n**3.2 Cards** (feature, testimonial, and pricing cards):\n* **Default:** flexible Flexbox layout, `--bg-secondary` surface, 1px `--border-default`, radius 4px, zero shadow.\n* **Hover:** border-color shift toward `--text-secondary` and\u002For subtle `transform: translateY(-2px)` — no shadow.\n* **Focus-within:** card border highlights when a child link\u002Fbutton receives focus.\n* **Loading:** CSS-only shimmer skeleton that prevents layout jumps.\n* **Empty state:** structured fallback with a Material Symbol and clear guidance text.\n* **Pricing tiers:** the featured middle tier is inverted (background `--primary`, text `--bg-primary`) with an uppercase micro label \"Most popular\" — distinct without shadows.\n\n**3.3 Forms & Inputs** (newsletter email capture):\n* **States:** empty, focused (outline ring), filled, valid (success border + icon), invalid (error border, error text, error icon), disabled, read-only.\n* **Structure:** flex container wrapping a label, the input, and a dedicated error-feedback container with `aria-live=\"polite\"`.\n* Radius 4px, 1px border, zero shadow.\n\n**3.4 Modal** (\"Watch the film\" video modal triggered from the hero):\n* **States:** opening, open, loading, success\u002Ferror, closing — all animated via CSS transitions.\n* **UX:** centered flex container (`align-items: center`), rgba(0,0,0,0.7) backdrop overlay, Material Symbol close button, keyboard focus trapping, close via `Esc` and overlay click. Radius `--radius-lg` (16px).\n\n**3.5 FAQ Accordion:**\n* Semantic pattern: `\u003Cbutton aria-expanded aria-controls>` + panel region (or `\u003Cdetails>`\u002F`\u003Csummary>`).\n* **States:** collapsed, expanded (smooth CSS height animation), hover, focus-visible ring.\n* Feedback via a rotating Material Symbol `expand_more` plus `aria-expanded` — never color alone.\n\n---\n\n## 4. PAGE STRUCTURE & SECTION-BY-SECTION SPECIFICATION\n\n**Global:** sticky minimal header — wordmark set in the uppercase label style, nav anchor links (smooth scroll, disabled under reduced motion), theme toggle, header CTA; 1px bottom border; backdrop blur allowed. Editorial container max-width 1200px. Every section opens with an uppercase micro-label eyebrow (11px \u002F 0.35px \u002F weight 450) using editorial numbering (\"01 — Features\"). **All user-facing copy in English** — real, product-appropriate copy for an AI video platform; lorem ipsum is prohibited. Imagery: `https:\u002F\u002Fpicsum.photos` with seeds and explicit dimensions, using `?grayscale` for cool cinematic monochrome consistency, with descriptive alt text.\n\n**4.1 Hero:** Full-viewport, full-bleed photograph (1920×1080) as the primary UI element, with a dark gradient scrim for legibility and white text in both themes. Film-title headline at Display XL (`line-height: 1.0`, -1.2px tracking). Two CTAs: primary \"Start creating\" and secondary \"Watch the film\" (Material Symbol `play_arrow`, opens the modal). Content anchored bottom-left, editorial style.\n\n**4.2 Features (3 cards):** Mixed-size editorial image grid — the first card spans wider (larger flex-basis) than the other two. Each card: image, uppercase micro label, tight title, one-line body. Topics: text-to-video generation, motion brush, camera control.\n\n**4.3 How It Works (3 steps):** Flex row collapsing to a column on mobile. Oversized numerals (01\u002F02\u002F03) in Cool Slate display type, step title, and description per step.\n\n**4.4 Testimonials:** Mixed-size editorial grid — one featured large quote plus two smaller ones. Quotes set in 24–32px tight type; authors rendered as uppercase micro labels with roles; optional grayscale avatars.\n\n**4.5 Pricing (3 tiers):** Free \u002F Pro \u002F Unlimited with real feature lists (Material Symbol `check`), display-size prices, and a CTA per tier; featured middle tier inverted per 3.2.\n\n**4.6 FAQ:** 5–6 real questions about the AI video platform using the accordion pattern from 3.5.\n\n**4.7 Final CTA:** Full-bleed image band or bold typographic block; Display headline; inline-flex email capture (input + button) implementing all form states from 3.3 with visible success\u002Ferror feedback.\n\n**4.8 Footer:** Secondary link columns (Product, Company, Resources, Legal), wordmark, copyright line, and small print. Links in `--text-secondary`, transitioning to `--text-primary` on hover.\n\n---\n\n## 5. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by default:** fluid `clamp()` sizing and breakpoints with zero horizontal overflow.\n* **Smooth animations:** `transition: var(--transition-normal)` on all state changes; fully respect `prefers-reduced-motion`.\n* **Accessibility:** AA contrast in both themes (Cool Slate `#767d88` on Black ≈ 5:1; Charcoal `#404040` on Cool Cloud passes); never rely on color alone to communicate state; semantic HTML5; correct ARIA roles\u002Flabels on the accordion, modal, and theme toggle; logical DOM\u002Ffocus order; full keyboard operability; `aria-live` regions for form feedback and dynamic states.\n* **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.\n* **Zero shadows everywhere:** elevation via borders and background shifts only.\n* **Destructive actions:** `.btn-danger` visually distinct in both light and dark themes.\n\n---\n\n## 6. DELIVERABLE & OUTPUT FORMAT\n\n* **File structure:** separate `index.html`, `style.css`, and `script.js`. No inline styles; no inline `\u003Cscript>` blocks beyond a single deferred `script.js` reference.\n* **Naming convention:** BEM (`block__element--modifier`) applied consistently across the entire deliverable — never mix conventions.\n* **No unrequested placeholders:** write real English copy for every label, heading, and body text; use picsum imagery only for photographic content.\n* **Completeness:** all 8 sections, every component state, both themes, theme persistence, and all interactions fully functional on the first attempt.\n",1791954990126]