[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-544-Weblex-Dark-Hero":3},"# CODING-AGENT SYSTEM PROMPT — \"WEBLEX DARK HERO\" LANDING PAGE\n\n**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete, production-quality landing page on the first attempt. Generate the final code immediately, following every rule in this document. All user-facing copy must be written in **English**.\n\n---\n\n## 0. PROJECT BRIEF & DESIGN DIRECTION\n\n**Product:** \"Weblex\" — a modern website builder (2024–2026 aesthetic).\n**Theme:** Weblex Dark Hero — full-screen dark hero video with a seamless `requestAnimationFrame` loop fade, lime-green accent, HSL CSS variables, bottom-aligned hero content, pill buttons, fully transparent navbar.\n\n**Sections (build in this exact order):**\n1. **Hero** — full-viewport video background, transparent navbar, pill badge with border, 62px headline, primary lime CTA with up-right arrow icon, secondary white CTA.\n2. **Features** — 3 cards.\n3. **How It Works** — 3 numbered steps.\n4. **Testimonials** — 3 cards with star ratings.\n5. **Pricing** — 3 tiers, middle tier highlighted.\n6. **FAQ** — accordion (5–6 items).\n7. **Final CTA** — headline + email-capture form.\n8. **Footer** — secondary link columns + copyright.\n\n**Color palette (exact values, HSL channel format — consume as `hsl(var(--token))`):**\n\n| Token | Value | Usage |\n|---|---|---|\n| `--background` \u002F `--bg-primary` | `240 67% 1%` | Page & hero background (near-black) |\n| `--foreground` \u002F `--text-primary` | `0 0% 100%` | Headings & body text on dark |\n| `--primary` | `73 98% 57%` | Lime green — primary CTA, accents |\n| `--primary-foreground` | `240 67% 1%` | Near-black text on lime surfaces |\n| `--secondary` | `0 0% 100%` | Secondary white button |\n| `--muted` \u002F `--bg-secondary` | `240 10% 12%` | Card surfaces |\n| `--muted-foreground` \u002F `--text-secondary` | `0 0% 82%` | Muted copy — consume with `\u002F 0.8` alpha |\n| `--border` \u002F `--border-default` | `0 0% 100%` | Borders — consume with `\u002F 0.1` alpha |\n\n**Hero specification:**\n- Hero fills the viewport (`min-height: 100svh` with `100vh` fallback); video absolutely positioned, `object-fit: cover`, full bleed. **No dark overlay layer of any kind** — the video plays at full opacity.\n- Navbar is **fully transparent** (no background fill), positioned over the hero.\n- Hero content is **bottom-aligned**: flex column, content pushed to the bottom, `padding-bottom: 100px`, content block `max-width: 603px`, horizontally centered.\n- Pill badge with 1px border above the headline (e.g., lime dot or `auto_awesome` icon + short copy such as \"New · AI Builder 2.0\").\n- Headline: `62px` desktop \u002F `48px` tablet \u002F `36px` mobile, `line-height: 1.1`, tight letter-spacing, display font.\n- CTA row: primary lime pill button with an up-right arrow icon + secondary white pill button.\n\n**Video specification:**\n- Abstract, fluid, smooth motion in dark tones — organic shapes or continuously transitioning gradients; modern, technological atmosphere.\n- Attributes: `autoplay muted loop playsinline`, no controls, `aria-hidden=\"true\"`, `pointer-events: none`, `poster` attribute.\n- **Seamless loop fade:** fade-out to black over the final **1.5s** of the video and fade-in over the first **1s** after restart, driven by `requestAnimationFrame` for perfect smoothness (full algorithm in Section 3.1).\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n### 1.1 CSS-First Architecture & Zero Inline CSS\n- **No Inline CSS:** The `style=\"...\"` attribute is forbidden in all HTML. No inline event handlers (`onclick`, etc.) — use `addEventListener` only.\n- **Class\u002FID Selectors Only:** All design properties, layout rules, and states live in `style.css`, targeted via class or ID selectors.\n- **JS Discipline:** JavaScript may only (a) toggle state classes and (b) update CSS custom properties (e.g., `--video-fade`). It must never assign raw CSS declarations. Changing the site's look must require editing CSS only, never the markup.\n- **Minimal HTML Modifications:** HTML stays clean, semantic, and style-agnostic.\n\n### 1.2 CSS Variables (HSL Channel Format) & Theme Tokens\n- Store all tokens in `:root` in **HSL channel format** (e.g., `--primary: 73 98% 57%;`) and consume them as `hsl(var(--primary))` or with alpha: `hsl(var(--border) \u002F 0.1)`.\n- **Mandatory semantic tokens** (in addition to the palette above): `--text-success: 142 71% 45%`, `--text-error: 0 84% 60%`, `--border-success`, `--border-error` (matching hue).\n- **Contrast pairing (enforced everywhere):** lime backgrounds pair with near-black text; dark backgrounds pair with white\u002Flight text; white backgrounds pair with near-black text.\n- **Radius:** `--radius-sm: 8px`, `--radius-md: 12px`, `--radius-lg: 20px`, `--radius-pill: 9999px`.\n- **Shadows:** `--shadow-sm`, `--shadow-md` (soft, low-opacity glows suited to dark UI).\n- **Spacing & transitions:** `--spacing-gap`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.\n- **Elevation\u002Fstacking:** `--z-dropdown: 1000`, `--z-modal: 1100`, `--z-toast: 1200`, plus `--z-navbar` and `--z-video` for the hero stack.\n- Precise spec values (`603px`, `100px`, `62px`, `9999px`) must be defined as tokens or semantic classes — no scattered magic numbers.\n\n### 1.3 Mandatory Dark Mode — Dark-Only Theme\n- The complete dark token set is defined at `:root` as the **permanent theme**; the page must render identically dark regardless of OS color-scheme setting (do not add `prefers-color-scheme: light` overrides).\n- **Explicit exception:** Per the Weblex Dark Hero specification, light mode is marked ✗ Not Recommended — therefore no light palette, no theme toggle, and no `localStorage` theme persistence are required; the dark token set is the single, always-on theme.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n- Build all layout structures with **Flexbox**.\n- **Default alignment rule:** every flex container defaults to `align-items: center` unless there is an explicitly justified exception (equal-height card rows may use `stretch` — flag it as the exception).\n- **Mobile-first:** features, steps, testimonials, pricing tiers, and footer link columns stack into a single column on small viewports; no horizontal scrolling at any width down to 320px.\n\n### 1.5 Framework & Class Strategy\n- Use **Tailwind CSS** (utilities mapped to the HSL tokens) **or** clean custom CSS driven by Tailwind's `@layer` \u002F `@apply`. Either way, all reusable patterns must resolve to generic classes: `.btn`, `.card`, `.badge`, `.input-group`.\n- Pick **one** naming convention (BEM recommended: `block__element--modifier`) and apply it across the entire deliverable — never mix conventions.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n- **Text:** Load Google Fonts via `\u003Clink>` with `preconnect` — a display font for the headline (recommend **Space Grotesk** or **Sora**) plus **Inter** for body; bind to `--font-display` and `--font-base`.\n- **Icons:** Use **Google Material Symbols (Outlined)** via the official Google Fonts stylesheet. Raw inline SVGs and local icon files are forbidden.\n- **Explicit exception (icon mapping):** The spec's \"ArrowUpRight\" must be rendered with Material Symbols `arrow_outward` (fallback: `north_east`) — do not substitute an inline SVG.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Button Component (Pill CTAs)\nStyle all states via CSS classes:\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px, `border-radius: var(--radius-pill)`, `transition: var(--transition-fast)`.\n- **`.btn--primary`:** lime background, near-black text, `arrow_outward` icon. **Hover:** brightness lift and\u002For lime glow shadow; the arrow icon nudges diagonally (`translate(2px, -2px)`). **Focus-visible:** distinct lime outline ring with offset, clearly visible on dark. **Active:** `transform: scale(0.97)`.\n- **`.btn--secondary`:** white background, near-black text — identical state matrix.\n- **Optional `.btn--outline`:** transparent background, 1px `hsl(var(--border) \u002F 0.2)` border, white text; hover brightens the border.\n- **Loading:** `aria-busy=\"true\"`, pointer-events disabled (prevents double-clicks), CSS spinner or rotating Material icon — button dimensions must not change.\n- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n- **Success\u002FError:** temporary feedback classes driven by `--text-success` \u002F `--text-error` (used by the email form submit).\n- No destructive actions exist on this page; if one is ever added, it must use a distinct `.btn--danger` that reads clearly on dark.\n\n### 2.2 Card Components (Features \u002F Steps \u002F Testimonials \u002F Pricing)\n- **Default:** flexbox layout, `hsl(var(--bg-secondary))` surface (or transparent + 1px `hsl(var(--border) \u002F 0.1)` border), `--radius-lg`, tokenized padding.\n- **Hover:** `transform: translateY(-2px)` plus shadow elevation shift and border alpha increase (0.1 → 0.25).\n- **Focus-within:** card border highlights (lime tint) when a child link\u002Fbutton receives focus.\n- **Loading (skeleton):** define shimmer animation styles in CSS to prevent layout jumps.\n- **Empty state:** define a reusable fallback pattern — Material icon + clear guidance text.\n- **Features:** 3 cards, lime Material icon (e.g., `bolt`, `design_services`, `devices`), title, concise description.\n- **Steps:** numbered `01 \u002F 02 \u002F 03`, icon, title, description; optional connector line between steps.\n- **Testimonials:** 3 cards; five `star` icons (lime), quote, avatar circle with initials on a CSS gradient (no external images), name, role.\n- **Pricing:** 3 tiers; the middle tier is highlighted with a lime border and a \"Most popular\" pill badge; feature lists use lime `check` icons; each tier gets a CTA (primary style on the popular tier, outline\u002Fsecondary elsewhere).\n\n### 2.3 Form & Input (Email Capture in Final CTA)\n- Structure: `.input-group` flex container wrapping a `\u003Clabel>`, a pill-shaped `\u003Cinput type=\"email\">`, and a dedicated error\u002Fsuccess feedback container.\n- **States (all styled in CSS):** empty, focused (lime outline ring), filled, valid (success border + `check_circle` icon), invalid (error border, `--text-error` message, `error` icon), disabled, read-only.\n- **Behavior:** on submit, validate the email; invalid → error message rendered in an `aria-live=\"polite\"` region; valid → button enters loading state (~1s) → success state with `check_circle` and an `aria-live` announcement. Double submits prevented.\n- Never rely on color alone — pair every border change with an icon and text.\n\n### 2.4 FAQ Accordion (Disclosure)\n- Each item: `\u003Cbutton aria-expanded aria-controls>` question + `expand_more` icon; panel with `role=\"region\"` and `aria-labelledby`.\n- **Animation:** CSS-only height transition (e.g., `grid-template-rows: 0fr → 1fr` technique) — no JS height math; chevron rotates 180°; instant toggle under reduced motion.\n- **Keyboard:** native buttons, logical tab order, visible focus ring, hover state on the question row; single-open behavior via JS class toggles.\n- No modals\u002Fpopups are part of this build; if one becomes strictly necessary, apply backdrop overlay, `Esc`\u002Foverlay-click close, focus trapping, and `--z-modal`.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n### 3.1 Hero Video Loop Engine (requestAnimationFrame)\n- Implement the seamless loop fade by updating a CSS custom property from a rAF loop — never a raw style assignment:\n  - Constants: `FADE_IN = 1s`, `FADE_OUT = 1.5s`.\n  - Each frame: if `currentTime \u003C FADE_IN` → opacity = `currentTime \u002F FADE_IN`; else if `currentTime > duration - FADE_OUT` → opacity = `(duration - currentTime) \u002F FADE_OUT`; else opacity = `1`. Clamp to 0–1.\n  - Write via `video.style.setProperty('--video-fade', value)`; CSS maps it: `.hero__video { opacity: var(--video-fade, 1); }`.\n- Start the loop on first play \u002F `loadeddata`; cancel on pause and when the tab is hidden; resume on play \u002F visibility return.\n- If `duration` is `Infinity` or `NaN` (streaming sources), skip the fade and keep opacity at 1.\n- **Fallbacks:** always render a CSS gradient background (layered radial gradients in near-black with a subtle lime glow) behind the video; on `error`\u002F`stalled`, add a state class that hides the video so the gradient shows. The hero must look finished even if the video never loads.\n- **Reduced motion:** do not autoplay; show the poster\u002Fgradient; do not run the rAF loop.\n\n### 3.2 Responsive & Motion\n- Fluid sizing and breakpoints with zero horizontal overflow; hero headline scales 62 → 48 → 36px.\n- Every state change transitions with `var(--transition-normal)`; `prefers-reduced-motion` disables transforms, fades, smooth scrolling, and video autoplay.\n- Nav links are in-page anchors with smooth scrolling (guarded by reduced motion) and `scroll-margin-top` on target sections.\n\n### 3.3 Accessibility (a11y)\n- Sufficient contrast throughout the dark theme: white\u002Fnear-black on dark backgrounds; near-black text on lime CTAs; lime reserved for accents and large elements.\n- Semantic HTML5 landmarks: skip-to-content link, `header`\u002F`nav`, `main`, `footer`; one `h1` (hero) → `h2` per section → `h3` inside cards; each `section` referenced by `aria-labelledby`.\n- Correct ARIA: mobile menu button (`aria-expanded`\u002F`aria-controls`), accordion per 2.4, `aria-live` for form feedback, decorative icons `aria-hidden`.\n- Full keyboard operability — no mouse-only interactions; visible focus rings on every interactive element.\n- Never communicate state by color alone.\n\n### 3.4 Navigation & Feedback\n- Navbar stays **fully transparent** at all positions (the page shares the near-black background, so transparency remains readable); an optional 1px bottom hairline may appear after scrolling past the hero via an `.is-scrolled` state class.\n- Mobile menu: hamburger (`menu` \u002F `close` Material icons), slide-down panel, closes on `Esc` and link click, body scroll locked while open, focus managed.\n- Every click, hover, and submission triggers a visible state change (hover shifts, pressed scale, loading spinners, success\u002Ferror feedback).\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **File structure:** separate `index.html`, `style.css`, and `script.js`. No inline `\u003Cscript>` blocks beyond a single deferred entry point (`\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`). No inline styles, no inline handlers.\n- **Naming:** one consistent convention across the entire deliverable (BEM recommended) — never mix conventions.\n- **Copy:** write realistic, specific, benefit-driven **English** copy for the Weblex website builder — no lorem ipsum, no filler placeholders.\n- **Explicit exception (video asset):** no video file was supplied — wire a single, clearly commented `\u003Csource src=\"...\">` placeholder (any stable public sample), include a `poster`, and guarantee the gradient fallback renders if it fails. This is the only permitted placeholder.\n- **Definition of done:** all 8 sections fully built and styled on the first attempt; every component state from Section 2 implemented; video loop engine, accordion, mobile menu, and form validation working; page runs by opening `index.html` in a browser with no build step; no TODOs.\n",1791954988983]