[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-579-Dark-SaaS-Hero-with-Liquid-Glass":3},"# CODING PROMPT — \"APEX\" Landing Page: Dark SaaS Hero with Liquid Glass\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Your task is to code a **complete, production-quality landing page on the first attempt** — fully functional, responsive, accessible, and visually polished. No drafts, no stubs, no TODOs.\n\n**Project:** A single-page marketing site for **APEX**, a 2025–2026 era AI revenue-growth SaaS startup. Aesthetic: dark SaaS, liquid glass (glassmorphism), full-screen video background hero, infinite marquee social proof, bright green accent, backdrop blur, navbar pill, announcement badge, pill CTA buttons.\n\n---\n\n## 1. PROJECT BRIEF & DESIGN DIRECTION\n\n**1.1 Theme Identity**\n- **Name:** Dark SaaS Hero with Liquid Glass\n- **Type:** Dark SaaS · Liquid Glass · Video Background · Marquee Social Proof\n- **Keywords:** dark SaaS, liquid glass, video background, hero section, marquee, social proof, green accent, backdrop blur, glass morphism, navbar pill, announcement badge, CTA buttons\n- **Era:** 2025–2026 SaaS\u002FAI startup\n- **Theme modes:** Dark only (see exception clause in 2.3)\n\n**1.2 Color Palette → CSS Variable Tokens (define all in `:root`)**\n- `--bg-primary: hsl(260, 87%, 3%)` — page background, near-black with a purple tint\n- `--bg-secondary: hsl(240, 4%, 16%)` — raised surfaces \u002F card fallback\n- `--text-primary: hsl(40, 6%, 95%)` — warm off-white body text\n- `--text-secondary: hsl(40, 6%, 82%)` — subheadings, muted text\n- `--heading: hsl(40, 10%, 96%)` — hero and section headings\n- `--primary: hsl(121, 95%, 76%)` (`#87FB89`) — bright green accent, primary buttons, highlights\n- `--primary-foreground: hsl(0, 0%, 5%)` — text on green surfaces\n- `--muted: hsl(240, 4%, 16%)`\n- `--border-default: hsl(240, 4%, 20%)`\n- `--text-success: hsl(121, 95%, 76%)` · `--text-error: hsl(0, 85%, 72%)` (light-tinted red, readable on dark)\n- `--border-success: hsl(121, 95%, 76%)` · `--border-error: hsl(0, 85%, 60%)`\n- Glass tokens: `--glass-bg: rgba(255, 255, 255, 0.01)`, `--glass-highlight: inset 0 1px 1px rgba(255, 255, 255, 0.1)`\n- Shape\u002Felevation\u002Fmotion tokens: `--radius-sm: 0.5rem`, `--radius-md: 0.75rem`, `--radius-lg: 1.5rem` (matches `rounded-3xl`), `--radius-full: 9999px`, `--shadow-sm`, `--shadow-md` (deep black shadows suited to dark UI), `--spacing-gap: 1.5rem`, `--transition-fast: 200ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`\n- Stacking: `--z-navbar: 100`, `--z-dropdown: 200`, `--z-modal: 300`, `--z-toast: 400`\n- **Contrast pairing (mandatory):** dark backgrounds pair with light text tokens; the light green `--primary` pairs exclusively with dark `--primary-foreground`. Never place light text on `--primary` or dark text on `--bg-primary`.\n\n**1.3 Signature Visual Effects — implement exactly**\n\nLiquid glass (reusable utility class, verbatim from the design spec):\n```css\n.liquid-glass {\n  background: rgba(255, 255, 255, 0.01);\n  background-blend-mode: luminosity;\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n  border: none;\n  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);\n  overflow: hidden;\n  position: relative;\n}\n.liquid-glass::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  padding: 1.4px;\n  background: linear-gradient(180deg,\n    rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.15) 20%,\n    rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 60%,\n    rgba(255, 255, 255, 0.15) 80%, rgba(255, 255, 255, 0.45) 100%);\n  border-radius: inherit;\n  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n  -webkit-mask-composite: xor;\n  mask-composite: exclude;\n  pointer-events: none;\n}\n```\n- **Clipping warning:** `.liquid-glass` uses `overflow: hidden` — never nest dropdown menus, popovers, or toasts inside it. Render the mobile nav dropdown as a **sibling** panel, not a child.\n\nVideo background (hero only): full-screen video of the **Earth rotating as seen from space**, with `autoplay loop muted playsinline`, `object-fit: cover`, `position: absolute; inset: 0`, covering the entire hero. Source it from a royalty-free direct MP4 CDN link (Coverr, Pexels Videos, or Wikimedia Commons); always include a `poster` attribute and a CSS fallback layer (dark purple radial gradient) beneath the video so the hero degrades gracefully if the video fails.\n\nMarquee (social proof):\n```css\n@keyframes marquee { 0% { transform: translateX(0%); } 100% { transform: translateX(-50%); } }\n.marquee-track { animation: marquee 20s linear infinite; }\n```\nTrack is `display: flex; width: max-content;` with the brand list duplicated once for a seamless loop.\n\nHover feedback: all buttons and links transition smoothly in **200ms** (`var(--transition-fast)`).\n\n**1.4 Typography & Iconography**\n- Font: **Geist** (weights 400–700) loaded from Google Fonts; bind to `--font-base: 'Geist', 'Geist Sans', system-ui, sans-serif`.\n- Icons: **Google Material Symbols (Rounded)** via Google Fonts CDN.\n\n**1.5 Copy Rules**\n- All user-facing copy in **English**. Write real, concise SaaS marketing copy for any text not specified below — **lorem ipsum is forbidden**.\n- Use these strings **verbatim**: brand \"APEX\"; nav items \"Features\", \"Solutions\", \"Plans\", \"Learning\"; \"Sign Up\"; badge \"Nova+ Launched!\" with chip \"Explore\"; H1 \"Accelerate Your Revenue Growth Now\"; CTAs \"Start Free Right Now\" and \"Schedule a Consult\"; marquee brands \"Vortex\", \"Nimbus\", \"Prysma\", \"Cirrus\", \"Kynder\", \"Halcyn\".\n\n---\n\n## 2. STRICT RULES & ARCHITECTURE\n\n**2.1 CSS-First Architecture & Zero Inline CSS**\n- **No inline CSS:** the `style=\"...\"` attribute is forbidden anywhere in the HTML.\n- **Class\u002FID selectors only:** all design properties, layout rules, and states are targeted via classes\u002FIDs defined in `style.css`.\n- **Minimal HTML modifications:** HTML stays clean, semantic, and styling-agnostic — changing the site's look must require editing only `style.css`, never the markup.\n\n**2.2 CSS Variables & Theme Tokens**\n- Every color, radius, shadow, spacing, transition, and z-index value must come from the tokens in 1.2. No hardcoded hex\u002Fhsl values in component rules.\n- Sole exception: the literal `rgba()` stops inside the `.liquid-glass` gradient recipe, which is a fixed effect specification.\n\n**2.3 Dark Mode**\n- Dark mode is the site's only and default theme; the full palette in 1.2 is the dark palette and must be defined entirely through CSS variables so a future light theme could be added by editing `style.css` only.\n- **Exception clause:** per the requested style (\"Dark only — full\"), ship a single dark theme; no light variant, no theme toggle, and no `localStorage` theme persistence are required for this project.\n\n**2.4 Flexbox Layout & Mobile-First Alignment**\n- Build all layout structures with **Flexbox**.\n- **Every flex container defaults to `align-items: center`** unless there is an explicitly justified exception (e.g., `align-items: stretch` for equal-height pricing cards) — justify every exception with a CSS comment.\n- Mobile-first: rows convert to columns on small viewports; **horizontal scrolling must never occur** on any breakpoint (pay special attention to the hero video and marquee).\n\n**2.5 Framework & CSS Organization**\n- Use clean, hand-written custom CSS organized in native cascade layers: `@layer tokens, base, layout, components, utilities`. Do not add Tailwind, Bootstrap, or any other framework.\n- All styles map to CSS variables and reusable class names (`.btn`, `.card`, `.input-group`, `.liquid-glass`, `.marquee-track`).\n\n**2.6 Typography & Icons (Google Fonts Mandatory)**\n- Load Geist and Material Symbols Rounded via Google Fonts `\u003Clink>` tags (with `preconnect`) in `\u003Chead>`; bind the font to `--font-base`.\n- Icons are Material Symbols only (e.g., `\u003Cspan class=\"material-symbols-rounded\">chevron_right\u003C\u002Fspan>`), styled (size, fill, weight) via CSS classes. Raw inline SVGs and local icon files are forbidden.\n- **Exception clause:** the APEX logo's crosshair mark may be a single inline SVG per the design direction; no other inline SVG is permitted anywhere in the project.\n\n---\n\n## 3. COMPONENT DESIGN SPECIFICATIONS\n\n**3.1 Button Component (`.btn` + variants)**\n- **Base:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px, `border-radius: var(--radius-full)` for this design, `cursor: pointer`, `transition: var(--transition-fast)`.\n- **Variants:** `.btn--primary` (green `--primary` bg, `--primary-foreground` text), `.btn--glass` (`.liquid-glass` pill), `.btn--ghost` (transparent, border).\n- **Hover:** brightness shift and\u002For shadow change.\n- **Focus:** distinct `:focus-visible` ring using `--primary` (outline + offset) for keyboard navigation.\n- **Active\u002Fpressed:** `transform: scale(0.97)`.\n- **Loading (`.is-loading` + `aria-busy=\"true\"`):** disables interaction, prevents double-clicks, renders a CSS spinner or animated Material Symbol (`progress`) **without changing button dimensions**.\n- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n- **Success (`.is-success`):** temporary feedback driven by `--text-success` with a `check` icon.\n- No destructive actions exist on this page; if one is ever added, it must use a visually distinct `.btn--danger` readable on dark backgrounds.\n\n**3.2 Card Component (`.card`)**\n- **Default:** flexible Flexbox column layout, `.liquid-glass` surface (or `--bg-secondary` + `--border-default` where glass is too heavy), `--radius-lg`, generous padding.\n- **Hover:** `transform: translateY(-2px)` plus shadow\u002Felevation shift and border brightening.\n- **Focus-within:** card border highlights (`--primary`) when a child link\u002Fbutton receives focus.\n- **Loading (skeleton):** define a `.skeleton` shimmer keyframe animation utility in CSS that preserves layout dimensions; apply it to any asynchronously loaded content.\n- **Empty state:** not required (no dynamic lists), but any dynamically rendered list must ship a structured empty state with a Material Symbol and guidance text.\n\n**3.3 Form & Input Component (`.input-group`)**\n- **Structure:** flex column wrapping a `\u003Clabel>`, the input field, and a dedicated error-feedback container (`aria-live=\"polite\"`).\n- **States (all styled via classes):** empty, focused (outline ring), filled, valid (success border + `check` icon), invalid (`--border-error`, `--text-error` message, `error` icon, `aria-invalid=\"true\"`, message linked via `aria-describedby`), disabled, read-only.\n- Validate on submit and on blur; never communicate errors by color alone — always icon + text.\n\n**3.4 Modal \u002F Popup (consult modal)**\n- **States:** opening, open, loading, success\u002Ferror, closing — all animated via CSS transitions (opacity + scale, ~250ms, reversible).\n- **UX:** centered flex container (`align-items: center; justify-content: center`), dark blurred backdrop overlay, Material Symbol `close` button with `aria-label=\"Close dialog\"`, keyboard **focus trapping** while open, focus returned to the trigger on close, close via `Esc` and overlay click, body scroll locked, `role=\"dialog\"` `aria-modal=\"true\"` `aria-labelledby`, z-index `--z-modal`. Submit runs the button loading state, then a success state with `check` icon and an `aria-live` confirmation before auto-closing. Using the native `\u003Cdialog>` element with `showModal()` is recommended (it provides focus trap and `Esc` for free) but all listed requirements must hold either way.\n\n**3.5 Toast Notification**\n- Fixed position (bottom-right), z-index `--z-toast`, glass or `--bg-secondary` surface, `role=\"status\"` with `aria-live=\"polite\"`, slide-up entrance animation, auto-dismiss after ~4s, optional `close` button. Used for pricing CTA feedback and newsletter success.\n\n---\n\n## 4. PAGE SECTIONS & CONTENT REQUIREMENTS\n\n**4.1 Hero (`#hero`)**\n- `\u003Csection>` with `position: relative; min-height: 100svh;` flex column, centered content, `overflow: hidden`.\n- **Video background:** Earth rotating from space — `autoplay loop muted playsinline`, `object-fit: cover`, `absolute inset: 0`, `aria-hidden=\"true\"`, `tabindex=\"-1\"`, `disablepictureinpicture`. Add a non-interactive gradient overlay (`::after` or dedicated layer) darkening toward `--bg-primary` at the bottom to guarantee WCAG AA text contrast over the video.\n- **Navbar (fixed `\u003Cheader>` at top):** `.liquid-glass` pill, `border-radius: var(--radius-lg)`, `max-width: 850px`, centered, flex `align-items: center; justify-content: space-between`. Left: logo — a small gradient square (green gradient, `--radius-sm`) containing the crosshair mark, followed by the wordmark \"APEX\" (bold, tight letter-spacing). Nav links: Features \u002F Solutions \u002F Plans \u002F Learning, anchoring to `#features` \u002F `#how-it-works` \u002F `#pricing` \u002F `#faq` respectively, `--text-secondary` → `--text-primary` on hover (200ms). Right: \"Sign Up\" `.btn--primary` pill. **Mobile (\u003C768px):** links hidden; hamburger button (Material Symbol `menu`, `aria-expanded`, `aria-controls`) toggles a `.liquid-glass` dropdown panel rendered as a **sibling** of the pill (not clipped by `overflow: hidden`), z-index `--z-dropdown`, flex column of links + Sign Up; closes on link click and `Esc`.\n- **Announcement badge:** `.liquid-glass` `rounded-full` pill link → `#features`, flex `align-items: center`: text \"Nova+ Launched!\", a small \"Explore\" chip, and a `chevron_right` icon.\n- **H1:** \"Accelerate Your Revenue Growth Now\" — `clamp(2.5rem, 6vw, 4.5rem)`, `font-weight: 600`, tight letter-spacing (`-0.02em`), color `--heading`, centered, `text-wrap: balance`.\n- **Subheading:** one concise sentence (write real copy about AI-driven revenue growth), `~1.125rem`, `--text-secondary` at ~80% emphasis, max-width ~60ch, centered.\n- **CTA row:** flex `align-items: center`, gap, wraps to full-width stacked buttons on small screens. \"Start Free Right Now\" → `.btn--primary`, smooth-scrolls to `#pricing`. \"Schedule a Consult\" → `.btn--glass`, opens the consult modal (3.4).\n- **Social proof marquee (bottom of hero):** small muted label (\"Trusted by high-growth teams at\"), then `.marquee` (`overflow: hidden`, edge fade via `mask-image`) containing `.marquee-track` (flex, `align-items: center`, large gap, `width: max-content`, 20s linear infinite animation) with the six brand wordmarks **duplicated exactly once** — the duplicate list carries `aria-hidden=\"true\"`. Wordmarks: bold, wide letter-spacing, `--text-secondary` at reduced opacity. Pause animation on hover\u002Ffocus-within.\n\n**4.2 Features (`#features`) — 3 cards**\n- Section header (h2 + supporting subheading), then a flexbox row (wraps to column on mobile) of three `.liquid-glass` cards, flex column `align-items: center`, text centered: icon tile (44px+, green-tinted background, Material Symbol in `--primary`), h3 title, description, and a \"Learn more\" link with `arrow_forward` (demonstrates focus-within). Suggested features: AI Revenue Insights (`insights`), Pipeline Automation (`bolt`), Accurate Forecasting (`trending_up`). All card states per 3.2.\n\n**4.3 How It Works (`#how-it-works`) — 3 steps**\n- Three steps in a flex row on desktop (connected by a CSS pseudo-element line using `--border-default`), stacked column on mobile. Each step: numbered badge (\"01\"\u002F\"02\"\u002F\"03\"), Material Symbol icon, h3, description. Suggested flow: Connect your stack (`cable`) → Let AI find revenue (`auto_awesome`) → Close and scale (`rocket_launch`).\n\n**4.4 Testimonials**\n- Section header + three cards (flex row → column). Each card: five `star` Material Symbols (filled via `font-variation-settings`, `--primary`, with an `aria-label` such as \"Rated 5 out of 5 stars\" and icons `aria-hidden`), a realistic quote, and a footer with a CSS-only initials avatar (gradient circle), name, and role\u002Fcompany. Write real invented names, roles, and quotes — no placeholders.\n\n**4.5 Pricing (`#pricing`) — 3 tiers**\n- Section header + a **billing toggle**: glass segmented control with \"Monthly\" \u002F \"Annual\" (plus a \"Save 20%\" chip), `role=\"group\"` with `aria-label`, buttons using `aria-pressed`, active state highlighted in green; price changes announced via an `aria-live=\"polite\"` region.\n- Three tier cards in a flex row (`align-items: stretch` — commented exception for equal heights) → column on mobile. Middle tier (\"Growth\") is highlighted: `--primary` border or green glow, a \"Most Popular\" pill badge, slight scale on desktop. Each card: tier name, large price with per-month and billing-period note, feature list (`ul` with `check` icons in `--primary`), CTA button. Suggested tiers: Starter $29\u002F$23, Growth $79\u002F$63, Scale $199\u002F$159 (monthly\u002Fannual).\n- Tier CTA click behavior: trigger `.is-loading` (spinner, interactions blocked) for ~1.5s → `.is-success` with a `check` icon + a toast confirmation → reset. All button states per 3.1.\n\n**4.6 FAQ (`#faq`)**\n- 5–6 accordion items. Each: a `\u003Cbutton>` trigger with `aria-expanded` \u002F `aria-controls`, flex `align-items: center; justify-content: space-between`, question text + `expand_more` icon that rotates 180° when open (200ms). Panel: `role=\"region\"` + `aria-labelledby`, animated open\u002Fclose via the `grid-template-rows: 0fr → 1fr` technique. Single-open behavior (opening one closes the others). Write real questions (free trial, cancellation, integrations, security, support, team size) with real answers.\n\n**4.7 Final CTA**\n- Centered flex column section with a subtle green radial glow background (CSS only): h2, subheading, and the same two CTA buttons as the hero (\"Start Free Right Now\" → `#pricing`; \"Schedule a Consult\" → modal). Reuse the exact hero button components.\n\n**4.8 Footer**\n- Top border `--border-default`. Upper area (flex, wraps): brand column (logo + one-line tagline) and three link columns (Product, Company, Resources — e.g., Features, Pricing, Integrations, Changelog \u002F About, Careers, Blog, Contact \u002F Documentation, API Reference, Community, Status). All links show 200ms hover\u002Ffocus feedback.\n- **Newsletter form:** `.input-group` with email input + \"Subscribe\" `.btn--primary` — full state suite per 3.3 (focus ring, invalid with icon + `aria-live` error, success toast + inline confirmation).\n- Bottom bar (flex `align-items: center; justify-content: space-between`, wraps): \"© 2025 Apex Inc. All rights reserved.\" + secondary links (Privacy Policy, Terms of Service, Security).\n\n---\n\n## 5. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** mobile-first with breakpoints (~480\u002F768\u002F1024px), fluid `clamp()` typography, no horizontal overflow anywhere, all touch targets ≥ 44×44px.\n- **Smooth animations:** CSS transitions on every state change using the motion tokens; `prefers-reduced-motion: reduce` must disable the marquee animation, pause the hero video, and minimize transitions.\n- **Accessibility (a11y):** skip-to-content link; semantic landmarks (`header`, `nav` with `aria-label`, `main`, `section` with `aria-labelledby`, `footer`); strict heading order h1 → h2 → h3; visible `:focus-visible` rings everywhere; WCAG AA contrast over the video (enforced by the overlay); never rely on color alone; full keyboard operability; `aria-live` regions for form errors, toasts, loading, and price changes.\n- **Mandatory visual feedback:** every click, hover, and submission produces a visible state change.\n- **Smooth anchor scrolling:** CSS `scroll-behavior: smooth` plus `scroll-padding-top` sized to the fixed navbar.\n\n---\n\n## 6. DELIVERABLES & OUTPUT FORMAT\n\n- **File structure:** separate `index.html`, `style.css`, and `script.js`. Exactly one `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` reference — no inline `\u003Cscript>` blocks, no inline styles, no `style` attributes.\n- **Naming convention:** BEM (`.block__element--modifier`) throughout, with these reserved utility classes from the design spec: `.liquid-glass`, `.marquee-track`, `.skeleton`, `.visually-hidden`, `.container`, `.btn` variants. Never mix conventions.\n- **JavaScript scope (`script.js`):** mobile nav toggle, FAQ accordion, billing toggle, modal open\u002Fclose with focus management, form validation with `aria-live` feedback, button loading\u002Fsuccess simulation, toast system, and reduced-motion video handling only.\n- **No unrequested placeholders:** use the verbatim strings from 1.5; write real English marketing copy everywhere else. Lorem ipsum is forbidden.\n- **Runs on first attempt:** valid HTML5, all external assets (Google Fonts, Material Symbols, stock video) loaded from public CDNs, no build step — the page must work by opening `index.html` in a browser.\n",1791954989512]