[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-525-ClearInvoice-SaaS-Hero":3},"# BUILD PROMPT — \"ClearInvoice\" SaaS Landing Page (Dark Video Hero, Gradient CTA)\n\n**Your Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build the complete, production-quality landing page described below in a single attempt. Every rule in this document is mandatory; do not improvise around it.\n\n**Objective:** A dark, conversion-focused 2024–2026 SaaS landing page for **ClearInvoice**, an invoicing product for freelancers and agencies. Signature elements: full-opacity HLS background video hero (no overlay), 5px multicolor gradient top bar, orange-gradient primary CTA with glow + inner stroke + sliding arrow, overlapping-avatar social proof, staggered entrance animations, Switzer headings \u002F Geist body.\n\n**Sections (in this order):** Gradient top bar → Sticky navigation → Hero → Features (3 cards) → How It Works (3 steps) → Testimonials → Pricing (3 tiers) → FAQ → Final CTA → Footer with secondary links.\n\n**Copy Direction:** Write ALL user-facing copy in **English** (never Portuguese or any other language). Realistic, specific invoicing\u002FSaaS copy — no lorem ipsum. Value props to draw from: get paid faster, automated payment reminders, AI invoice drafting, real-time payment tracking. Tone: confident, plain, benefit-led.\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 anywhere in the HTML. Zero inline styles.\n* **Class\u002FID Selectors Only:** All design properties, layout rules, and states are targeted via class or ID selectors in `style.css`.\n* **Minimal HTML Modifications:** Markup stays semantic and styling-agnostic; restyling the site must require editing `style.css` only.\n* **Script Tags:** The only permitted `\u003Cscript>` tags are CDN references (Tailwind, hls.js, fonts) and one `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` entry point. No inline script logic.\n\n### 1.2 CSS Variables & Theme Tokens\nAll visual tokens live in `:root` inside `style.css`. Use exactly this palette:\n\n```css\n:root {\n  \u002F* Color *\u002F\n  --primary: #FF3300;\n  --secondary: #EA580C;                       \u002F* orange glow *\u002F\n  --gradient-primary: linear-gradient(135deg, #FF3300 0%, #EE7926 100%);\n  --gradient-topbar: linear-gradient(90deg, #ccccff 0%, #e7d04c 50%, #31fb78 100%);\n  --bg-primary: #000000;\n  --bg-secondary: #0a0a0a;                    \u002F* card surface *\u002F\n  --surface-light: rgba(255,255,255,0.9);    \u002F* secondary CTA surface *\u002F\n  --text-primary: #FFFFFF;                    \u002F* pairs with --bg-primary \u002F --bg-secondary *\u002F\n  --text-secondary: rgba(255,255,255,0.65);\n  --text-on-light: #000000;                   \u002F* pairs with --surface-light *\u002F\n  --text-success: #31FB78;\n  --text-error: #FF6B6B;\n  --border-default: rgba(255,255,255,0.2);    \u002F* inner stroke *\u002F\n  --border-subtle: rgba(255,255,255,0.1);\n  --border-dark: rgba(0,0,0,0.05);            \u002F* borders on light surfaces only *\u002F\n  --border-error: #EF4444;\n  --border-success: #31FB78;\n  \u002F* Radius & Shadow *\u002F\n  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px;\n  --shadow-sm: 0 2px 8px rgba(0,0,0,0.45);\n  --shadow-md: 0 12px 32px rgba(0,0,0,0.55);\n  --glow-primary: 0 0 48px rgba(234,88,12,0.35);\n  \u002F* Spacing & Motion *\u002F\n  --spacing-gap: 1.5rem;\n  --transition-fast: 200ms;\n  --transition-normal: 300ms;\n  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);\n  \u002F* Elevation *\u002F\n  --z-dropdown: 100; --z-modal: 1000; --z-toast: 1100; --z-topbar: 1200;\n  \u002F* Type *\u002F\n  --font-heading: 'Switzer', 'Inter', sans-serif;\n  --font-base: 'Geist', 'Inter', sans-serif;\n}\n```\n\n* **Contrast Pairing:** Every dark background token (`--bg-primary`, `--bg-secondary`) pairs only with light text tokens; every light surface (`--surface-light`) pairs only with dark text (`--text-on-light`). Never place white text on `--surface-light` or black text on `--bg-primary`.\n* **Light surfaces:** Never use pure `#ffffff` as a page background; if a near-white surface is ever needed, use `#fefefe`.\n* Every color, radius, shadow, and transition used in component rules must reference these variables — no hard-coded hex values in component CSS.\n\n### 1.3 Mandatory Dark Mode\n* **Dark is the default and only theme:** The `:root` block above IS the dark palette; the page renders dark on first paint with no flash of light content.\n* **Exception (per style spec):** Light mode is explicitly not recommended for this theme — ship dark-only: no light token set, no `prefers-color-scheme: light` overrides, no theme toggle, and no `localStorage` theme persistence are required. Dark tokens at `:root` remain mandatory, and every color must stay behind a CSS variable so the palette remains swappable without touching markup.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n* Build every layout structure with Flexbox (`display: flex` \u002F Tailwind flex utilities).\n* **Default Alignment Rule:** Every flex container defaults to `align-items: center` (`items-center`) unless an exception is explicitly commented in the CSS (the only permitted exceptions: equal-height card grids using `stretch`).\n* **Mobile-Friendly First:** All rows convert to columns below the Tailwind `md` breakpoint; typography uses fluid `clamp()` sizing; there is zero horizontal scrolling at any viewport width from 320px upward.\n\n### 1.5 Framework Default & Tailwind CSS Integration\n* Use Tailwind CSS via the Play CDN for layout, spacing, and alignment utilities only. Do **not** add an inline `tailwind.config` script — all custom design values belong in `style.css`.\n* All brand styling (gradients, glows, component classes) lives in `style.css`, either as plain CSS or inside `@layer components` with `@apply`, and binds to the `:root` variables.\n* Required reusable component classes: `.btn`, `.btn--primary`, `.btn--secondary`, `.btn--ghost`, `.btn--danger`, `.card`, `.input-group`, `.badge`, `.section`, `.container`.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n* **Headings:** Switzer (weights 500–700) bound to `--font-heading`.\n* **Body:** Geist loaded from Google Fonts (`fonts.googleapis.com\u002Fcss2?family=Geist:wght@400;500;600&display=swap`) and bound to `--font-base`.\n* **Exception (Switzer):** Switzer is not distributed on Google Fonts — load it from the Fontshare CDN (`https:\u002F\u002Fapi.fontshare.com\u002Fv2\u002Fcss?f[]=switzer@400,500,600,700&display=swap`). All other fonts and all icons remain Google-hosted.\n* **Icons:** Google Material Symbols only (Rounded variable font via Google Fonts), used as `\u003Cspan class=\"material-symbols-rounded\">icon_name\u003C\u002Fspan>` with `font-variation-settings` for filled variants.\n* **Forbidden:** raw inline SVGs, local icon files, emoji used as icons. Photographs (avatars, testimonial portraits, video poster) are images, not icons, and may use documented placeholder URLs.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Button Component (`.btn` + variants)\n* **Base `.btn`:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px, `font-family: var(--font-base)`, `font-weight: 600`, `border-radius: var(--radius-md)`, `cursor: pointer`, transitions bound to `var(--transition-fast) var(--ease-standard)`.\n* **Primary CTA (`.btn--primary`) — the signature element:**\n  * Background `var(--gradient-primary)`; text `var(--text-primary)`.\n  * **Inner stroke:** `border: 1.5px solid var(--border-default)`.\n  * **Glow:** a `::before` pseudo-element behind the button carrying the same gradient with `filter: blur(24px); opacity: 0.2; z-index: -1; border-radius: inherit;`.\n  * **Hover:** `transform: scale(1.05)`; glow animates to `opacity: 0.6`; **sliding arrow:** an `arrow_forward` Material Symbol inside the button starts at `opacity: 0; transform: translateX(-8px)` and slides to `opacity: 1; transform: translateX(0)` on hover\u002Ffocus. Reserve the arrow's gap so the animation never changes button dimensions.\n  * **Focus-visible:** distinct ring (`outline: 2px solid var(--text-primary); outline-offset: 3px`) visible against both the black page and the orange button.\n  * **Active\u002FPressed:** `transform: scale(0.97)`.\n  * **Loading (`.is-loading`):** `pointer-events: none` (prevents double-clicks); label swaps to a rotating `progress_activity` Material Symbol driven by a CSS keyframe; button dimensions never change.\n  * **Disabled:** `opacity: 0.5; filter: grayscale(1); cursor: not-allowed;` no hover transform.\n  * **Success\u002FError (`.is-success` \u002F `.is-error`):** temporary feedback recoloring to `--border-success`\u002F`--text-success` or `--border-error`\u002F`--text-error`, always paired with an icon and text — never color alone.\n* **Secondary CTA (`.btn--secondary`):** `background: var(--surface-light); color: var(--text-on-light); backdrop-filter: blur(12px); border: 1.5px solid var(--border-dark);` hover = subtle brightness lift + `--shadow-sm`; inherits all base states (focus, active, loading, disabled).\n* **Ghost (`.btn--ghost`):** transparent background, `--border-default` border, white text — used in pricing and footer.\n* **Danger (`.btn--danger`):** distinct red treatment built from `--text-error`\u002F`--border-error`; must be unmistakably different from the orange primary at all times.\n\n### 2.2 Card Component (`.card`)\nUsed by Features, Testimonials, Pricing, and FAQ items.\n* **Default:** Flexbox column layout, `background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 1.5rem;`.\n* **Hover (interactive cards only):** `transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-default);`.\n* **Focus-within:** card border highlights when any child link\u002Fbutton receives focus.\n* **Loading skeleton (`.card--skeleton`):** shimmer keyframe (`linear-gradient(90deg, #111 25%, #1c1c1c 50%, #111 75%)`, `background-size: 200% 100%`, infinite) on placeholder blocks sized to the final content — no layout shift.\n* **Empty state (`.card--empty`):** centered Material Symbol (e.g., `receipt_long`) plus one line of guidance text.\n\n### 2.3 Form & Input Requirements (`.input-group`)\nUsed by the Final CTA email capture.\n* **Structure:** Flex container wrapping a `\u003Clabel>` (visually hidden is acceptable, but always associated via `for`\u002F`id`), the `\u003Cinput type=\"email\">`, and a dedicated error-feedback element wired with `aria-describedby` and `aria-live=\"polite\"`.\n* **States — all class-driven:** empty; focused (orange ring: `box-shadow: 0 0 0 3px rgba(234,88,12,0.35)` plus `--border-default`); filled; valid (`.is-valid`: `--border-success` + small `check_circle` icon + green hint text); invalid (`.is-invalid`: `--border-error` + error icon + red message text — icon and text required, never color alone); disabled (`opacity: 0.5; cursor: not-allowed`); read-only.\n* **Validation flow:** validate email format on submit in `script.js`; render the message inside the live region; move focus to the invalid input; on success the button enters loading → success and a confirmation toast fires.\n\n### 2.4 Modal \u002F Popup Requirements (`.modal`) — \"Watch demo\"\nThe hero's secondary CTA opens a demo-video modal.\n* **Structure:** fixed backdrop (`background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); z-index: var(--z-modal)`) wrapping a centered flex container (`display: flex; align-items: center; justify-content: center`) that holds the dialog (`role=\"dialog\"`, `aria-modal=\"true\"`, `aria-labelledby`).\n* **States:** opening (fade + scale-up, ~200ms), open, loading (spinner\u002Fskeleton while the demo stream buffers), success\u002Ferror (stream-failure message with a retry action), closing (reverse animation, then hidden).\n* **UX:** close button is a Material Symbol `close` (44×44px, `aria-label=\"Close dialog\"`); closes via `Esc` and backdrop click; keyboard focus is trapped inside while open; focus returns to the invoking button on close; body scroll is locked while open.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by Default:** Fluid `clamp()` typography and responsive breakpoints with no horizontal overflow; all grids collapse to a single column on mobile; verify 320px–1920px.\n* **Smooth Animations:** Every state change transitions with `var(--transition-normal) var(--ease-standard)` (buttons use `var(--transition-fast)` per the 200ms scale spec). All entrance animations and hover transforms are disabled under `prefers-reduced-motion`, and the background video is paused with its poster shown.\n* **Accessibility (a11y):** Minimum 4.5:1 contrast everywhere on the black theme; never rely on color alone to communicate state; semantic HTML5 (`header`, `nav`, `main`, `section`, `footer`, correct `h1`–`h3` hierarchy); ARIA roles\u002Flabels on the accordion, modal, and mobile menu; logical DOM\u002Ffocus order; full keyboard operability (no mouse-only interactions); `aria-live` regions for form errors, toasts, and loading feedback; a global `:focus-visible` ring; `scroll-margin-top` on sections so the sticky nav never covers headings.\n* **Mandatory Visual Feedback:** Every click, hover, and submission triggers a visible state change.\n* **Destructive Actions:** `.btn--danger` must be visually distinct from the orange primary in this dark theme.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n* **File Structure:** Exactly three files: `index.html`, `style.css`, `script.js`. No inline `\u003Cscript>` blocks beyond CDN references and the single deferred entry point.\n* **Naming Convention:** BEM for every custom class (`.btn--primary`, `.card--pricing`, `.faq__item`, `.hero__title`). Tailwind utilities are permitted for layout\u002Fspacing\u002Falignment only. Never mix conventions.\n* **No Unrequested Placeholders:** Write real, specific English copy for ClearInvoice — headlines, feature descriptions, testimonial quotes with realistic names and roles, pricing tiers with feature lists, FAQ answers. Lorem ipsum is forbidden. Only genuinely unspecified assets may use documented placeholders: the HLS stream URL (see 5.2) and avatar\u002Fposter photos (placeholder image service such as `i.pravatar.cc` \u002F `picsum.photos`).\n* **JS Scope:** Vanilla JavaScript only — no build step, no frameworks. All behavior (HLS init, modal, accordion, mobile menu, form validation, toast, nav scroll state, IntersectionObserver reveals) lives in `script.js`.\n\n---\n\n## 5. PAGE STRUCTURE & SECTION-BY-SECTION SPECIFICATION\n\n### 5.0 Gradient Top Bar\nFixed, full-width, `height: 5px`, `background: var(--gradient-topbar)` (from `#ccccff` via `#e7d04c` to `#31fb78`), `z-index: var(--z-topbar)`. Present above the navigation at all times.\n\n### 5.1 Sticky Navigation\nTransparent over the hero; after 24px of scroll it gains `background: rgba(0,0,0,0.7); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-subtle)`. Left: `receipt_long` icon + \"ClearInvoice\" wordmark (Switzer 700). Center: anchor links — Features, How It Works, Testimonials, Pricing, FAQ — with smooth scrolling and visible focus states. Right: compact `.btn--primary` \"Start free\". Mobile: links collapse behind a `menu` icon button (`aria-expanded`, `aria-controls`) toggling an animated panel at `z-index: var(--z-dropdown)`; the panel closes on link click and `Esc`.\n\n### 5.2 Hero (signature section)\n* **HLS background video:** `\u003Cvideo>` absolutely positioned (`inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0`) with `autoplay loop muted playsinline preload=\"auto\"`, `aria-hidden=\"true\"`, `tabindex=\"-1\"`. **Opacity 100% — no dark overlay or scrim layer of any kind.** Content: abstract dark fluid organic shapes with subtle luminous highlights, widescreen (~16:9) source, ~14s loop.\n  * Load via **hls.js** (pinned CDN version): attach when `Hls.isSupported()`, fall back to native HLS `src` on Safari\u002FiOS, and on error silently swap to an animated dark CSS gradient fallback — the hero must never look broken.\n  * Define the source once at the top of `script.js` as `const HLS_SRC = '\u003Cpublic test stream .m3u8>'` using a working public HLS test stream (e.g., the Mux test stream), commented as the replaceable production source.\n  * Provide a dark abstract `poster` image so first paint never shows an empty black box; hero text renders immediately — the video must not block LCP.\n  * Under `prefers-reduced-motion`, pause the video and keep the poster.\n* **Content** (z-index above the video, max-width ~48rem, centered, hero `min-height: 100svh`): eyebrow `.badge` pill with `--border-default` (e.g., \"New · AI invoice drafting\"); H1 in Switzer (e.g., \"Invoices that get paid twice as fast\"); subcopy in Geist using `--text-secondary`; CTA row with `.btn--primary` \"Start free — 14-day trial\" (sliding arrow per 2.1) and `.btn--secondary` \"Watch demo\" (opens the 2.4 modal).\n* **Legibility without an overlay:** white text must hold 4.5:1 over the video; a subtle `text-shadow` on the H1 is permitted — adding any overlay\u002Fgradient scrim div is not.\n* **Social proof row:** five overlapping circular avatars (~40px, `margin-left: -12px`, `border: 2px solid var(--bg-primary)`, `border-radius: 50%`) + \"Trusted by 12,000+ freelancers and agencies\" + a five-star row of filled `star` Material Symbols in `#e7d04c`.\n* **Staggered entrance:** one shared `fade-up` keyframe (opacity 0→1, `translateY(16px)`→0) applied in DOM order with delays of 0 \u002F 80 \u002F 160 \u002F 240 \u002F 320ms across badge → title → subcopy → CTAs → social proof. Runs once on load; skipped entirely under reduced motion.\n\n### 5.3 Features — 3 Cards\nSection heading (Switzer) + subcopy, then a 3-column grid collapsing to one column on mobile. Each `.card`: a Material Symbol icon in a gradient-tinted rounded square, a title, and real English copy about invoicing pain points (suggested: `auto_awesome` — AI invoice drafting; `notifications` — automated payment reminders; `insights` — real-time payment tracking). Hover lift per 2.2.\n\n### 5.4 How It Works — 3 Steps\nThree steps with oversized numerals \"01 \u002F 02 \u002F 03\" in Switzer rendered as gradient text (`background: var(--gradient-primary)` + `background-clip: text`), each with an icon and short copy (e.g., connect your clients → send automated invoices → get paid 2× faster). Desktop: horizontal row joined by a `--border-subtle` connecting line; mobile: vertical stack. Reveal with staggered `IntersectionObserver` animations (`.is-visible`), disabled under reduced motion.\n\n### 5.5 Testimonials\nThree `.card`s, each with a `format_quote` icon, a realistic quote, a five-star row (`#e7d04c`), and an avatar + name + role (e.g., \"Freelance designer\", \"Agency owner\"). Grid → single column on mobile.\n\n### 5.6 Pricing — 3 Tiers\nTiers: Starter (Free), Pro (e.g., $19\u002Fmo — highlighted), Agency (e.g., $49\u002Fmo). Real feature lists with `check_circle` icons; missing features shown honestly as \"—\". **Highlighted middle card:** 1.5px gradient border (`--gradient-primary` via the padding-box\u002Fborder-box double-background technique), a \"Most popular\" `.badge` with gradient background, and slight elevation on desktop. CTAs: `.btn--primary` on the popular tier, `.btn--ghost` on the others — all button states per 2.1.\n\n### 5.7 FAQ — Accordion\nFive to six real Q&As about the invoicing product (free trial, recurring invoices, payment methods, data export, support). Each item: a `\u003Cbutton>` with `aria-expanded` + `aria-controls`, a chevron (`expand_more`) rotating 180° on open, and a panel animated via `grid-template-rows: 0fr → 1fr`. Fully keyboard operable with visible focus states.\n\n### 5.8 Final CTA\nCentered Switzer headline + subcopy on a `--bg-secondary` band with a subtle radial orange glow (opacity ≤ 0.2) behind the heading. Email capture `.input-group`: \"Work email\" label + input + `.btn--primary` \"Get started\" — full input state coverage per 2.3, loading → success button flow, `aria-live` feedback, and a confirmation toast (fixed bottom, `z-index: var(--z-toast)`, `role=\"status\"`, slide-up entrance, auto-dismiss after 4s, `close` button).\n\n### 5.9 Footer — Secondary Links\nBrand block (wordmark + one-line tagline) plus link columns: Product (Features, Pricing, FAQ — anchor to existing sections), Company (About, Careers, Contact), Resources (Blog, Help center, Invoicing guide), Legal (Privacy, Terms). Links without existing targets may use `href=\"#\"` since their destinations are unspecified. Bottom bar: \"© 2025 ClearInvoice. All rights reserved.\" plus secondary links (Privacy, Terms, Status). Social presence as text links or generic Material Symbols — no inline SVG brand marks.\n",1791954988614]