[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-547-Framelix-3D-Studios":3},"# Coding Prompt — \"Framelix 3D Studios\" Cinematic 3D Landing Page\n\n**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Build the complete, production-ready landing page for **Framelix 3D Studios** — a cinematic 3D motion-design studio — on the first attempt. Output the final code in full: no truncation, no TODOs, no stubs beyond the explicitly permitted video sources.\n\n---\n\n## 1. Project Overview & Design System\n\n**1.1 Theme Identity**\n- **Name:** Framelix 3D Studios\n- **Type:** Creative · 3D · Cinematic · Marquee Banner · Multi-Video Sections\n- **Era:** 2024–2026 creative-studio aesthetic\n- **Keywords (translated from source):** 3D, cinematic, motion studio, marquee banner, multiple videos, pure black, lavender accent, ticket icon, video sections, Inter font\n- **Modes:** Full light **and** full dark support — **pure black dark mode is the default look**\n\n**1.2 Page Map (build in this exact order)**\n1. **Navbar** — sticky; ticket-icon logo, 3 columns of stacked links, theme toggle, \"Buy Now\" button; mobile hamburger dropdown.\n2. **Hero** — full-width cinematic showreel video (`width:100%; height:auto; object-fit:cover`) with absolute text overlays animated fade+slide (0.8s); \"Explore Our Work\" + \"Buy Now\" CTAs.\n3. **Marquee Banner** — lavender `#A6A4FF` strip, black uppercase text, infinite `translateX` loop, 20s linear, 60px gap.\n4. **Features** — 3 cards: 3D Motion Design \u002F Cinematic CGI Renders \u002F VFX & Compositing.\n5. **How It Works** — 3 numbered steps: 01 Brief & Concept \u002F 02 Design & Animation \u002F 03 Render & Delivery.\n6. **Showcase (\"Shipping\") Section** — fixed light-grey `#EAEAEA` stage, `border-radius: 0 0 40px 40px`, centered square 800×800 looping 3D product-demo video, \"Buy Now\" CTA.\n7. **Testimonials** — 3 quote cards with star ratings and initials avatars.\n8. **Pricing** — 3 tiers (Starter \u002F Studio \u002F Enterprise), middle tier featured.\n9. **FAQ** — 5-item accessible accordion.\n10. **Final CTA** — large closing panel with \"Buy Now\" + \"Explore\" buttons.\n11. **Footer** — secondary link columns, social icons, copyright.\n\n**1.3 Color Tokens (define exactly)**\n```css\n:root, html.dark {\n  --primary: #A6A4FF;                 \u002F* lavender accent *\u002F\n  --secondary: #EAEAEA;               \u002F* light grey *\u002F\n  --bg-primary: #000000;              \u002F* pure black *\u002F\n  --bg-secondary: #0D0D0D;            \u002F* card surface on black *\u002F\n  --text-primary: #FFFFFF;\n  --text-secondary: rgba(255,255,255,0.6);\n  --text-success: #4ADE80;  --text-error: #F87171;\n  --border-default: rgba(255,255,255,0.14);\n  --border-success: #4ADE80; --border-error: #F87171;\n  --btn-primary-bg: #A6A4FF; --btn-primary-text: #000000;\n  --radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px;\n  --shadow-sm: 0 2px 10px rgba(0,0,0,0.4); --shadow-md: 0 10px 30px rgba(0,0,0,0.5);\n  --spacing-gap: 60px; --spacing-md: 24px; --spacing-sm: 12px;\n  --transition-fast: 150ms; --transition-normal: 300ms; --transition-slow: 800ms;\n  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);\n  --z-dropdown: 1000; --z-modal: 1100; --z-toast: 1200;\n  --font-base: 'Inter', 'Segoe UI', system-ui, sans-serif;\n}\nhtml.light {\n  --bg-primary: #EAEAEA;\n  --bg-secondary: #FEFEFE;            \u002F* never #ffffff *\u002F\n  --text-primary: #000000;\n  --text-secondary: #6B7280;          \u002F* darken to #4B5563 for body-size text to hold AA *\u002F\n  --text-success: #16A34A;  --text-error: #DC2626;\n  --border-default: rgba(0,0,0,0.14);\n  --btn-primary-bg: #000000; --btn-primary-text: #FFFFFF;\n  --shadow-sm: 0 2px 10px rgba(0,0,0,0.08); --shadow-md: 0 10px 30px rgba(0,0,0,0.12);\n}\n```\n- **Theme-invariant surfaces (never switch):** marquee (`#A6A4FF` bg \u002F `#000000` text) and the showcase stage (`#EAEAEA` bg \u002F `#000000` text). These stay light in both themes and always pair with black text.\n- **Contrast pairing rule:** every light background token pairs with dark text and every dark background token with light text — in both themes, no exceptions. Set `color-scheme: dark` on `:root`\u002F`html.dark` and `color-scheme: light` on `html.light`.\n\n---\n\n## 2. Architecture & Coding Standards\n\n**2.1 CSS-First Architecture & Zero Inline CSS**\n- All styling lives in `style.css`. The `style=\"...\"` attribute is forbidden anywhere in the HTML.\n- All design properties, layout rules, and states are targeted via class\u002FID selectors only.\n- HTML stays semantic and style-agnostic: retheming the site must require editing `style.css` only, never the markup.\n\n**2.2 CSS Variables & Theme Tokens**\n- Every color, radius, shadow, spacing, transition, easing, and z-index value must come from the tokens in 1.3 — no magic numbers in component rules (the spec-mandated literals `20s`, `60px`, `40px`, and `0.8s` are the only permitted exceptions, each with a CSS comment).\n\n**2.3 Mandatory Light\u002FDark Theming**\n- Dark is the default. Provide a visible navbar toggle using Material Symbols `dark_mode`\u002F`light_mode` with `aria-pressed` (true = dark active) and `aria-label=\"Toggle dark mode\"`.\n- First visit: consult `prefers-color-scheme`; if `light`, add `.light` to `\u003Chtml>`. Persist the user's explicit choice in `localStorage` (key `framelix-theme`); a stored choice always wins over the media query.\n- Theme switching swaps CSS variables only — no HTML restructuring, no reload. Announce changes through an `aria-live=\"polite\"` region.\n\n**2.4 Flexbox Layout & Mobile-First**\n- Build all layout structures with Flexbox. Every flex container defaults to `align-items: center` unless an exception is justified in a CSS comment (permitted here: vertical link stacks and card content columns may use `align-items: flex-start` so text left-aligns).\n- Mobile-first: rows collapse to columns below 768px; fluid `clamp()` typography; content container `max-width: 1200px` centered; sections get generous block padding (~96px desktop \u002F 64px mobile); **zero horizontal scrolling at any width** — the marquee track is the only element allowed to exceed the viewport, inside an `overflow: hidden` wrapper.\n\n**2.5 Framework & Animation Exceptions**\n- **Exception (Tailwind utilities):** the source spec's utility names (`w-full`, `h-auto`, `object-cover`, `brightness-0`, `invert`) are descriptive shorthand — implement them as equivalent custom CSS rules; do not load any CSS framework or CDN library.\n- **Exception (Framer Motion):** Framer Motion is React-only and incompatible with the mandated vanilla file structure — replicate its fade+slide 0.8s entrance animations exactly: elements start `opacity: 0; transform: translateY(28px)` and transition to visible over **0.8s** with `--ease-standard`, staggered ~0.12s, triggered on load (hero) and via `IntersectionObserver` (all other sections).\n\n**2.6 Typography & Icons (Google Fonts Mandatory)**\n- Load **Inter** (weights 400–800) from Google Fonts via `\u003Clink>`; bind to `--font-base` and apply globally. Headlines: Inter 700–800, tight letter-spacing, fluid `clamp()` sizes.\n- Icons: **Google Material Symbols (Rounded)** via `\u003Clink>`. Raw inline `\u003Csvg>` elements and local icon files are forbidden.\n- **Exception (ticket icon):** the source spec asks for a \"ticket SVG icon\" — render it as the Google Material Symbol `confirmation_number` with the mandated filter treatment via a `.logo__mark` class: `filter: brightness(0) invert(1)` in dark mode (renders pure white) and `filter: brightness(0)` in light mode (renders pure black). The filter technique is mandatory — do not substitute a plain `color`.\n\n---\n\n## 3. Component Specifications\n\n**3.1 Buttons**\n- Base `.btn`: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px touch target, Inter 600, `border-radius: var(--radius-md)`, `transition: var(--transition-fast) var(--ease-standard)`.\n- Variants: `.btn--primary` (uses `--btn-primary-bg`\u002F`--btn-primary-text`), `.btn--secondary` (ghost: transparent bg, 1px `--border-default`, `--text-primary` text), `.btn--danger` (visually distinct in both themes; defined even though unused).\n- **Hover:** brightness shift + `--shadow-sm`, `cursor: pointer`. **Focus-visible:** 2px `--primary` outline, 2px offset — never remove. **Active:** `transform: scale(0.97)`. **Loading (`.is-loading`):** `pointer-events: none`, CSS border spinner or rotating Material `progress_activity` icon — button dimensions must not change; double-clicks blocked. **Disabled:** `opacity: 0.5; filter: grayscale(1); cursor: not-allowed`. **Success\u002FError (`.is-success`\u002F`.is-error`):** feedback via `--text-success`\u002F`--text-error` plus check\u002Ferror Material icons.\n- Wire every \"Buy Now\" button: click → `.is-loading` (~1.2s) → `.is-success` (check icon + \"Added\" label) announced via `aria-live=\"polite\"` → auto-reset after ~2.5s.\n\n**3.2 Cards**\n- Base `.card`: `--bg-secondary` surface, 1px `--border-default`, `border-radius: var(--radius-lg)`, flex column, comfortable padding.\n- **Hover:** `transform: translateY(-2px)` + `--shadow-md`. **Focus-within:** border turns `--primary` when a child control is focused. **Loading:** define a `.skeleton` shimmer keyframe utility and apply it to each video wrapper until the video fires `canplay` (reserve space with `aspect-ratio` so nothing shifts). **Empty state:** not applicable — no async data-driven cards; do not invent one.\n- Feature cards: lavender icon tile (Material `view_in_ar` \u002F `movie` \u002F `auto_awesome`), title, description. Testimonial cards: Material `format_quote`, 5-star row (Material `star`, rating also stated in text — never color-only), initials avatar (lavender circle, black initials), name + role. Pricing cards: tier name, price, check-icon feature list, CTA; the middle `.card--featured` gets a 2px lavender border, a \"MOST POPULAR\" badge (lavender bg, black text), and higher elevation.\n\n**3.3 Video Sections (two distinct videos)**\n- **Hero showreel:** `\u003Cvideo class=\"hero__video\" autoplay muted loop playsinline preload=\"auto\">` — CSS: `width: 100%; height: auto; object-fit: cover; display: block;`. Use a publicly hosted sample MP4 (e.g., Google's gtv-videos-bucket samples) as the source with an HTML comment `\u003C!-- REPLACE with studio showreel -->` so the page plays on first load.\n- **Showcase (\"shipping\") demo:** square 800×800 — CSS: `width: min(800px, 100%); aspect-ratio: 1 \u002F 1; object-fit: cover; border-radius: var(--radius-lg);` centered on the fixed `#EAEAEA` stage. Same autoplay\u002Fmuted\u002Floop attributes and a commented sample source.\n- Hero container is `position: relative`; add a legibility gradient via `.hero::after` (bottom fade to `rgba(0,0,0,0.75)`, `pointer-events: none`).\n\n**3.4 Marquee Banner**\n- `.marquee`: `background: #A6A4FF; color: #000000;` (fixed in both themes), `overflow: hidden`, vertical padding.\n- `.marquee__track`: `display: flex; width: max-content;` containing **two identical** `.marquee__group` elements (the second `aria-hidden=\"true\"`). Each group: `display: flex; gap: 60px; padding-inline-end: 60px;` so the loop seam is seamless.\n- Animation: `@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }` applied as `marquee 20s linear infinite`.\n- Items: uppercase Inter 700, letter-spacing ~0.08em, black text, separated by a small Material Symbol (`asterisk` or the ticket `confirmation_number`). Content: \"3D MOTION DESIGN · CINEMATIC RENDERS · VFX & COMPOSITING · PRODUCT VISUALIZATION · FRAMELIX STUDIOS\".\n- `prefers-reduced-motion`: `animation: none` (static, non-overflowing row).\n\n**3.5 Navbar**\n- `position: sticky; top: 0;` translucent backdrop (`backdrop-filter: blur(12px)` + rgba bg per theme), z-index just below `--z-dropdown`.\n- Flex row, `align-items: center`, `justify-content: space-between`: left = logo (ticket mark with the mandated filter + \"FRAMELIX\" wordmark, Inter 800, uppercase, letter-spaced); center = `.nav__columns` — **exactly 3 columns of stacked links** (a flex row of three `.nav__column` flex-columns, 2 anchors each, mapping to page sections: Features\u002FProcess, Pricing\u002FFAQ, Testimonials\u002FShowcase); right = theme toggle + `.btn--primary` \"Buy Now\".\n- Links: `--text-secondary` → `--text-primary` on hover with an animated underline.\n- **Mobile (\u003C768px):** hide the columns; show a hamburger (Material `menu`, `aria-expanded`, `aria-controls`) toggling `.nav__dropdown` — an absolutely positioned panel at `--z-dropdown` with links stacked; closes on `Esc`, outside click, and link click; focus returns to the hamburger.\n\n**3.6 Hero Text Overlays**\n- `.hero__overlay`: absolutely positioned over the video (bottom-aligned, generous padding), flex column, `gap: var(--spacing-md)`.\n- Content: eyebrow (\"FRAMELIX 3D STUDIOS — MOTION · CGI · VFX\"), H1 (e.g., \"We craft cinematic 3D worlds.\"), subline, CTA row: `.btn--primary` \"Explore Our Work\" (smooth-scrolls to `#features`) + `.btn--secondary` \"Buy Now\".\n- Entrance: each child animates fade+slide (0.8s, `--ease-standard`) with 0.12s stagger on page load, per 2.5.\n\n**3.7 FAQ Accordion**\n- 5 realistic questions (turnaround time, revision rounds, deliverable formats, pricing model, licensing\u002Frights). Build with native `\u003Cdetails class=\"faq__item\">` \u002F `\u003Csummary>` for free keyboard and screen-reader support; style the summary with a rotating Material `expand_more` icon (`[open]` → 180°), clear hover\u002Ffocus-visible states, and an animated open\u002Fclose (grid-rows or height technique).\n\n**3.8 Forms & Modals — Out of Scope**\n- Do not add contact forms, newsletter inputs, or modals; they were not requested. (If one ever becomes necessary, it must follow the full label + input + dedicated error-container structure with empty\u002Ffocused\u002Ffilled\u002Fvalid\u002Finvalid\u002Fdisabled\u002Fread-only states and `aria-live` error feedback.)\n\n---\n\n## 4. UX, Accessibility & Micro-Interaction Rules\n\n- **Responsive by default:** fluid `clamp()` type, 768px\u002F1024px breakpoints, `scroll-margin-top` on all anchored sections (sticky navbar offset), no horizontal overflow.\n- **Smooth animations:** `transition: var(--transition-normal)` on all state changes; respect `prefers-reduced-motion` — disable the marquee, entrance transforms, and smooth scrolling, and pause both videos via a `matchMedia` check in JS.\n- **Accessibility:** AA contrast in both themes (darken light-mode `--text-secondary` to `#4B5563` for body-size text); never communicate state by color alone; semantic HTML5 landmarks (`header`, `nav`, `main`, `section`, `footer`), a single `h1`, logical heading order; a visually hidden \"Skip to content\" link; correct ARIA on the theme toggle, hamburger, and accordion; an `aria-live=\"polite\"` region for button feedback and theme announcements; full keyboard operability with visible focus rings on every interactive element.\n- **Mandatory visual feedback:** every click, hover, and focus produces a visible state change.\n- **Anchors:** in-page links smooth-scroll (`scroll-behavior: smooth`; `auto` under reduced motion).\n\n---\n\n## 5. Deliverables & Output Requirements\n\n- **Files:** `index.html`, `style.css`, `script.js` — three separate files. The HTML contains exactly one `\u003Cscript src=\"script.js\" defer>` and zero inline script blocks, zero inline styles, zero inline SVGs.\n- **Naming:** strict BEM (`block__element--modifier`) everywhere; never mix conventions.\n- **JS scope (vanilla only, no frameworks, no build step):** theme init\u002Fpersistence\u002Ftoggle, mobile nav, IntersectionObserver reveals, hero stagger, Buy Now loading→success simulation, skeleton removal on video `canplay`, reduced-motion video pausing.\n- **Copy:** all user-facing copy in **English**, realistic and specific to a 3D motion studio — no lorem ipsum. Only the video `src` values (and footer legal link `href`s) are placeholders; each video source must be a working public sample URL clearly commented for replacement.\n- **Document head:** `lang=\"en\"`, viewport meta, `\u003Ctitle>` \"Framelix 3D Studios — Cinematic 3D Motion Design\", meta description.\n- **Completeness:** deliver the entire page in one response — every section fully coded and styled on the first attempt, nothing omitted.\n",1791954989034]