[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-095-Framelix-3D-Studios":3},"# CODING AI PROMPT — LANDING PAGE: \"Framelix 3D Studios\"\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Your task is to code the complete Landing Page described below on the first attempt — fully functional, production-ready, with no TODOs, no stubs, and no follow-up questions.\n\n**Objective:** Build a single-page marketing site for **Framelix 3D Studios**, a cinematic 3D motion-design studio. Aesthetic: 2024–2026 creative studio — pure black canvas, lavender accent, infinite marquee banner, two distinct video sections, Inter typography, and full Light + Dark theme support. Output category: Dark Tech & Cyber, executed as a cinematic creative studio.\n\n---\n\n## 0. THEME DEFINITION — \"Framelix 3D Studios\"\n\n**0.1 Brand & Mood**\n- Keywords: 3D, cinematic, motion studio, marquee banner, multiple videos, animated entrances, Inter font, pure black, lavender accent, ticket icon, video sections.\n- **Language:** Write ALL user-facing copy in English (e.g., \"Buy Now\", \"Explore\", \"Cinematic 3D, delivered frame by frame\"). No Portuguese or non-English text anywhere in the UI, comments, class names, or file names.\n\n**0.2 Color System** — map exactly into the CSS variables of §1.2:\n\n| Token | Light Mode | Dark Mode |\n|---|---|---|\n| `--bg-primary` | `#EAEAEA` | `#000000` |\n| `--bg-secondary` | `#FEFEFE` | `#0E0E12` |\n| `--text-primary` | `#000000` | `#FFFFFF` |\n| `--text-secondary` | `#6B7280` | `rgba(255,255,255,0.6)` |\n| `--primary` (lavender accent) | `#A6A4FF` | `#A6A4FF` |\n| `--secondary` | `#000000` | `#EAEAEA` |\n| `--border-default` | `rgba(0,0,0,0.12)` | `rgba(255,255,255,0.14)` |\n\n- Pure white `#FFFFFF` is reserved for dark-mode text and button surfaces only — never as a light-mode page background (light surfaces are `#EAEAEA` \u002F `#FEFEFE`).\n- **Marquee band:** background `#A6A4FF`, text `#000000` in BOTH themes (brand constant).\n- **Primary buttons:** light mode → `#000000` fill + `#FFFFFF` text; dark mode → `#A6A4FF` fill + `#000000` text.\n- **Shipping section:** dark mode → `#EAEAEA` background with `#000000` text (the deliberate light break in the black page); light mode → inverted to near-black `#0A0A0A` with `#FFFFFF` text, preserving its contrast-break role. Bottom corners rounded 40px in both themes.\n- Enforce the light\u002Fdark pairing rule for every token in every theme: light backgrounds pair with dark text, dark backgrounds pair with light text.\n\n**0.3 Typography & Logo**\n- Google Font **Inter** (weights 400\u002F500\u002F600\u002F700\u002F800) via `\u003Clink>`, bound to `--font-base`. Headings: heavy weight, tight letter-spacing; body: 400\u002F500.\n- Logo: Inter wordmark + ticket icon. Dark mode: apply `filter: brightness(0) invert(1)` to the logo mark (renders it pure white). Light mode: apply `filter: brightness(0)` (renders it pure black). Drive this with a theme-scoped CSS class — never inline styles.\n\n**0.4 Media Assets (two distinct videos)**\n- **Hero video:** full-width cinematic 3D motion-design showreel — `object-fit: cover`, filling a hero container whose height is defined in CSS (e.g., `min-height: 85vh`), with `autoplay muted loop playsinline`. The video sits inside a positioned container that holds the absolute text overlays.\n- **Shipping video:** square 800×800 3D product demo (rotating object or animated scene), centered inside the Shipping section, rounded corners, rendered with `controls`, capped at `min(800px, 100%)` with `aspect-ratio: 1 \u002F 1`.\n- No real assets were supplied: use royalty-free placeholder MP4 URLs from public CDNs (Mixkit, Pixabay, Coverr, or similar direct links) with `poster` images, clearly commented as placeholders. If a video fails to load, its poster or solid surface must remain visually intact. Provide a keyboard-accessible pause control for the hero video.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n- All styling lives in `style.css`. The `style=\"...\"` attribute is **forbidden** anywhere in `index.html`.\n- All design properties, layout rules, and states are targeted via class\u002FID selectors only.\n- HTML stays semantic and style-agnostic — re-skinning the site must require editing CSS only, never the markup.\n\n**1.2 CSS Variables & Theme Tokens**\n- Define all tokens in `:root` (light) and override under a `.dark` class (plus a `@media (prefers-color-scheme: dark)` block guarded so saved preferences win): `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success` (light `#16A34A` \u002F dark `#4ADE80`), `--text-error` (light `#DC2626` \u002F dark `#F87171`), `--border-default`, `--border-error`, `--border-success`, `--radius-sm` (8px), `--radius-md` (16px), `--radius-lg` (40px — the Shipping section's bottom corners), `--shadow-sm`, `--shadow-md`, `--spacing-gap` (60px — marquee item gap), `--transition-fast` (150ms), `--transition-normal` (400ms), `--ease-standard` (`cubic-bezier(0.22, 1, 0.36, 1)`), `--z-dropdown` (1000), `--z-modal` (2000), `--z-toast` (3000), `--font-base` (`'Inter', sans-serif`).\n- Apply the contrast pairing of §0.2 in every theme.\n\n**1.3 Mandatory Dark Mode Support**\n- Dark mode is a first-class theme. Persist the user's choice in `localStorage` (key: `framelix-theme`), falling back to `prefers-color-scheme` on first visit.\n- Provide a visible toggle (sun\u002Fmoon Material Symbols) with correct `aria-pressed` state and `aria-label=\"Toggle dark mode\"`. Switching themes swaps CSS variables only — no HTML restructuring.\n- Both themes must pass WCAG AA contrast; the hero video carries a gradient scrim in both themes so overlay text stays readable.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- Build all layout structure with Flexbox. Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment.\n- Mobile-first responsiveness: nav columns, feature rows, steps, pricing tiers, and footer columns stack into single columns on small viewports. No horizontal scrolling at any width — the marquee wrapper is `overflow: hidden` and videos are width-capped.\n\n**1.5 Framework Default & Tailwind CSS Integration**\n- Use Tailwind CSS (Play CDN or build) with component classes defined via `@layer components` \u002F `@apply` in `style.css`: `.btn`, `.card`, `.input-group`, `.marquee`, `.nav`, `.step`, `.faq-item`, `.modal`. Utilities and components must resolve to the CSS variables — no hardcoded hex values inside component classes, no arbitrary color utilities in markup.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Inter via Google Fonts `\u003Clink>`; icons via **Google Material Symbols** (variable font).\n- The ticket mark uses the `confirmation_number` Material Symbol.\n- Raw inline SVGs, icon fonts, and local icon files are forbidden. **Exception clause:** the source spec requests a ticket SVG — a single bespoke inline SVG is permitted for the ticket logo mark only if a custom glyph is essential; every other icon must remain a Material Symbol.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component Requirements** — `.btn` + `.btn--primary` \u002F `.btn--ghost` \u002F `.btn--danger`:\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px, Inter 600.\n- **Hover:** brightness\u002Fshadow shift + `cursor: pointer`.\n- **Focus:** distinct lavender ring via `box-shadow` using `--primary` for keyboard navigation.\n- **Active\u002FPressed:** `transform: scale(0.97)`.\n- **Loading** (`aria-busy=\"true\"`): blocks pointer events, prevents double-clicks, renders a CSS spinner without changing button dimensions.\n- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n- **Success\u002FError:** temporary feedback states tinted by `--text-success` \u002F `--text-error`.\n- Required instances: hero \"Explore\" (ghost over video) and \"Buy Now\" (primary — Shipping, Pricing, nav CTA).\n\n**2.2 Card Component Requirements** — powers Features, How It Works steps, Testimonials, Pricing:\n- **Default:** flex layout on `--bg-secondary`, 1px `--border-default`, `--radius-md`, `--shadow-sm`.\n- **Hover:** elevation shift + `transform: translateY(-2px)`.\n- **Focus-within:** lavender border when a child link\u002Fbutton receives focus.\n- **Loading:** shimmer skeleton keyframes preserving layout height (no jumps).\n- **Empty state:** centered Material Symbol + guidance text fallback.\n- Pricing middle tier: `.card--featured` with lavender border, \"Most Popular\" badge, and desktop scale-up.\n\n**2.3 Form & Input Requirements** — Final CTA email capture:\n- `.input-group`: flex container wrapping `\u003Clabel>`, `\u003Cinput type=\"email\">`, and a dedicated error feedback container (`aria-live=\"polite\"`).\n- **States:** empty, focused (lavender outline ring), filled, valid (success border + `check_circle` icon), invalid (error border + `error` icon + message in `--text-error`), disabled, read-only.\n- Validate in `script.js` with inline per-field messages; never rely on color alone — pair icon + text.\n\n**2.4 Modal \u002F Popup Requirements** — \"Buy Now\" order modal:\n- **States:** opening, open, loading, success\u002Ferror, closing — all animated via CSS transitions (`--transition-normal`).\n- **UX:** centered flex overlay (`align-items: center`), blurred dark backdrop, Material Symbol `close` button, keyboard focus trapping, close via `Esc` and backdrop click, focus returns to the trigger; `role=\"dialog\"`, `aria-modal=\"true\"`.\n- Status changes announced via `aria-live`.\n\n**2.5 Page Section Blueprint** — build exactly these sections, in order:\n1. **Navbar (sticky):** three columns — left and right columns of stacked links (e.g., Work \u002F Studio \u002F Services and Pricing \u002F FAQ \u002F Contact) with the ticket logo centered between them; backdrop-blur over the hero. Mobile: collapses to a `menu` Material Symbol button + animated slide-down panel (`aria-expanded`, keyboard operable). Theme toggle lives here.\n2. **Hero:** full-width cinematic showreel video (§0.4) with absolute-positioned text overlays — eyebrow (\"3D Motion Studio\"), H1, subline, \"Explore\" ghost + \"Buy Now\" primary buttons. Overlays animate in with fade+slide (0.8s, staggered ~120ms). Gradient scrim guarantees contrast in both themes.\n3. **Marquee banner:** full-width band, `#A6A4FF` background, `#000000` uppercase Inter 700 items separated by ticket icons, `gap: 60px` (`--spacing-gap`). Track content duplicated for a seamless loop; animation `translateX(0) → translateX(-50%)`, **20s linear infinite**; wrapper `overflow: hidden`; duplicate track `aria-hidden=\"true\"`; pauses on hover; disabled under `prefers-reduced-motion`.\n4. **Features:** 3 cards (e.g., Cinematic Renders, Motion Systems, VFX & Compositing), each with a Material Symbol, title, and real copy; fade+slide entrance on scroll.\n5. **How It Works:** 3 numbered steps in a flex row (stacked on mobile) with a connecting line and arrow symbols.\n6. **Shipping showcase:** section per §0.2 (contrast break, `border-radius: 0 0 40px 40px`), centered 800×800 square video (§0.4) with rounded corners, headline, supporting copy, and a \"Buy Now\" button.\n7. **Testimonials:** 3 quote cards with avatar initials, name, role, and five `star` Material Symbols.\n8. **Pricing:** 3 tiers (e.g., Starter \u002F Studio \u002F Enterprise) with feature lists and \"Buy Now\" buttons that open the modal (§2.4); featured middle tier.\n9. **FAQ:** accessible accordion — `\u003Cdetails>`\u002F`\u003Csummary>` or button + region with `aria-expanded`\u002F`aria-controls`; animated open\u002Fclose; keyboard operable; 5–6 real questions (process, revisions, deliverable formats, licensing, pricing).\n10. **Final CTA:** high-impact panel with headline, the email `.input-group` (§2.3), and a submit button with loading → success states plus a toast confirmation (`--z-toast`).\n11. **Footer:** secondary links in stacked columns (Studio, Resources, Legal), text-based social links, copyright, and a back-to-top control (`arrow_upward`).\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid `clamp()` typography, standard breakpoints, zero horizontal overflow anywhere (marquee and videos included).\n- **Smooth animations:** every state change transitions with `var(--transition-normal)`. Entrance choreography is Framer-Motion-style fade+slide — opacity 0→1, `translateY(24px)` → 0, **0.8s**, `--ease-standard`, staggered — implemented as CSS classes toggled by an `IntersectionObserver` in `script.js`. **Exception clause:** the source spec references Framer Motion (a React library); do not introduce React — replicate its fade+slide timing in vanilla CSS\u002FJS exactly as specified here.\n- **Reduced motion:** `prefers-reduced-motion` disables the marquee animation, entrance slides, and hero video autoplay; all content remains fully visible and reachable.\n- **Accessibility:** WCAG AA contrast in both themes; semantic HTML5 landmarks (`header`, `nav`, `main`, `section`, `footer`); skip-to-content link; correct ARIA roles\u002Flabels on the theme toggle, mobile menu, accordion, and modal; logical DOM\u002Ffocus order; full keyboard operability (no mouse-only interactions); `aria-live` regions for form errors, modal status, and CTA feedback. Never communicate state by color alone.\n- **Mandatory visual feedback:** every click, hover, focus, and submission triggers a visible state change.\n- **Destructive actions:** any destructive control (e.g., \"Clear form\") uses `.btn--danger` with `--text-error` \u002F `--border-error` styling, visually distinct in both themes.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **File structure:** separate `index.html`, `style.css`, and `script.js` — complete and production-ready. No `style=\"...\"` attributes; no inline `\u003Cscript>` blocks beyond the single deferred entry point (`\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`).\n- **Naming convention:** BEM everywhere — `.hero__title`, `.marquee__track`, `.card--featured`, `.btn--primary`, `.input-group__error`, `.faq__item`. Never mix conventions; all names in English\u002FASCII.\n- **Copy:** write real, on-brand English marketing copy for every section — no lorem ipsum (the theme and section list fully specify the content). Placeholder video URLs are the only permitted placeholders.\n- **First-attempt completeness:** output the entire build in one response — all 11 sections, both themes, all component states, all interactions. No TODOs, no stubs, no follow-up questions.\n",1791954981310]