[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-322-Gradient-Mesh-Aurora-Evolved":3},"# SYSTEM PROMPT — CODING AGENT TASK: \"Aurora Evolved\" Gradient Mesh Landing Page\n\n**Your Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Build the complete, production-quality landing page described below **in a single attempt** — final code only, no drafts, no TODOs, no partial deliverables.\n\n**Product Concept:** The visual theme is *Gradient Mesh \u002F Aurora Evolved* (complex multi-color mesh gradients, aurora\u002Fnorthern-lights flow, iridescent overlays, holographic shimmer, prismatic morphing). Invent **one coherent fictional product** that matches this theme (e.g., a real-time gradient\u002Fmesh design engine for creative teams) and author all copy in **English** around it. All user-facing text must be real, thematic copy — lorem ipsum is forbidden.\n\n**Required Page Sections (in this exact order):** Global Header, Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n* All styling must live exclusively in a dedicated `style.css` file. **The `style=\"...\"` attribute is forbidden anywhere in the HTML.**\n* Every design property, layout rule, and state must be targeted via **class or ID selectors only**.\n* HTML must remain clean, semantic, and style-agnostic (use `header`, `nav`, `main`, `section`, `article`, `footer`, correct `h1`–`h3` hierarchy). Changing the site's entire look must require editing only `style.css`, never the markup.\n* No inline event handlers (`onclick`, `onsubmit`, etc.) — all behavior attaches via `addEventListener` in `script.js`.\n\n**1.2 CSS Variables (`var(--...)`) & Theme Tokens**\nAll visual tokens must be defined in `:root` and consumed via `var()` — no raw hex values inside component rules. Required token set:\n\n* **Colors:** `--primary` (use `#0066FF` — the anchor blue for solid-color needs such as links and focus), `--secondary` (use `#FF00FF`), `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.\n* **Aurora palette:** `--aurora-cyan: #00FFFF`, `--aurora-magenta: #FF00FF`, `--aurora-yellow: #FFFF00`, `--aurora-blue: #0066FF`, `--aurora-green: #00FF66`.\n* **Gradients (as variables):** `--gradient-aurora` (the full five-stop linear gradient, ~135°, sized `200% 200%` so `background-position` can animate), `--gradient-accent` (2–3 stop gradient for buttons\u002Fbadges), `--gradient-holo` (a conic-gradient cycling all five stops for iridescent borders), and per-layer mesh gradient variables for the background composition.\n* **Contrast pairing (mandatory in every theme):** light background tokens pair with dark text tokens, dark background tokens pair with light text tokens. Define `--text-on-gradient: #0a0b16` (dark ink) for text sitting on the bright aurora gradient surfaces — cyan\u002Fyellow\u002Fgreen stops are high-luminance, so dark ink is the only compliant pairing.\n* **Light mode background:** never pure white — use a cool, aurora-tinted near-white (e.g., `#f4f6fc`); where a near-white is truly needed, use `#fefefe`, never `#ffffff`.\n* **Shape & depth:** `--radius-sm` (~8px), `--radius-md` (~14px), `--radius-lg` (~22px), `--shadow-sm`, `--shadow-md`, plus `--glow` (a colored aurora glow shadow using the aurora tokens at low alpha).\n* **Motion & spacing:** `--spacing-gap`, `--transition-fast` (~150ms), `--transition-normal` (~300ms), `--ease-standard` (e.g., `cubic-bezier(0.4, 0, 0.2, 1)`), `--aurora-duration` (~20s+ for ambient loops).\n* **Elevation\u002Fstacking:** `--z-dropdown`, `--z-modal`, `--z-toast` — the sticky header and mobile menu use the dropdown tier; nothing may overlap out of order.\n* **Glass tokens:** `--glass-bg` (translucent surface), `--glass-border` (translucent hairline).\n\n**1.3 Mandatory Dark Mode Support**\n* Dark mode **must always be defined**. Provide the dark token overrides both under a `.dark` class on `\u003Chtml>` **and** under `@media (prefers-color-scheme: dark)` (scoped so the class wins when set) — this guarantees the first paint matches the OS preference even before JS runs.\n* **Persistence:** `script.js` reads the stored theme from `localStorage`, applies `.dark`\u002F`.light` on `\u003Chtml>`, and falls back to `prefers-color-scheme` on first visit. No HTML restructuring may ever be needed to switch themes — only variable values swap.\n* **Toggle control:** a visible theme toggle in the header containing two Google Material Symbols (`light_mode` \u002F `dark_mode`) — CSS shows the correct icon per theme class. It must expose `aria-pressed` (`true` when dark) and an `aria-label` updated by JS (\"Switch to dark theme\" \u002F \"Switch to light theme\").\n* **Per-theme aurora tuning:** light mode uses softened, lower-opacity mesh (no screen blend); dark mode uses full-saturation mesh with `mix-blend-mode: screen` and stronger glow. Drive this with theme variables (`--aurora-opacity`, `--aurora-blend`) so switching is pure CSS.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n* Build all layout structures with **Flexbox**. Every flex container must default to `align-items: center` unless there is an explicitly justified exception — the only permitted exception is `align-items: stretch` for equal-height card rows (Pricing, Features, Testimonials), which must be documented with a CSS comment.\n* **Mobile-first:** base styles are single-column; use `min-width` media queries to scale up. Rows must collapse to columns on small viewports. There must be **zero horizontal scrolling** at any viewport width down to 320px. All interactive targets ≥ 44×44px.\n\n**1.5 Framework & Naming Convention**\n* Use clean, dependency-free custom CSS organized with CSS `@layer` (order: `tokens, base, layout, components, utilities`) — this avoids any CDN\u002Fbuild dependency and guarantees the zero-inline constraints. No other framework is permitted.\n* **One naming convention only: BEM** (`block__element--modifier`) across the entire deliverable. Never mix conventions. Maintain a fixed vocabulary of reusable component classes: `.btn`, `.card`, `.input-group`, `.section`, `.container`, `.badge`, `.faq-item`, `.holo-border`, `.text-gradient`.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* **Text:** load **Space Grotesk** (500\u002F600\u002F700) as `--font-display` for headings and **Inter** (400\u002F500\u002F600) as `--font-base` for body, via Google Fonts `\u003Clink>` tags with `preconnect`. Bind tokens with proper font-family fallback stacks.\n* **Icons:** use **Google Material Symbols (Rounded)** via the Google Fonts link. Use filled variants via `font-variation-settings: 'FILL' 1` where needed (e.g., stars). **Raw inline SVGs, local icon files, icon fonts from other sources, and emoji-as-icons are all forbidden.**\n* **Exception clause (overrides the source style spec):** although the style specification lists \"SVG gradients\" and \"canvas gradients\" as techniques, all mesh\u002Faurora visuals **must be implemented in pure CSS** (layered gradients, blend modes, filter animations) — no `\u003Csvg>` or `\u003Ccanvas>` elements may appear in the markup. Material Symbols remain the only icon source.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component Requirements**\nAll states styled via classes on a `.btn` base (flex; `align-items: center`; `justify-content: center`; `gap: 0.5rem`; min 44×44px; `border-radius: var(--radius-md)`):\n* **Variants:** `.btn--primary` (animated `--gradient-aurora` fill with a subtle dark overlay layer atop the stops + `--text-on-gradient` ink label, guaranteeing ≥ 4.5:1 across the whole surface), `.btn--secondary` (glass\u002Foutline), `.btn--ghost`, and `.btn--danger` (defined in the system even if unused — must read unmistakably as destructive in **both** themes, distinct from the magenta aurora accents).\n* **Hover:** brightness\u002Fshadow shift plus a `background-position` slide on gradient buttons; `cursor: pointer`.\n* **Focus:** distinct `:focus-visible` ring using a focus token (2px outline\u002Fbox-shadow offset) — visible over gradients and on both themes.\n* **Active\u002FPressed:** `transform: scale(0.97)`.\n* **Loading (`.is-loading`):** JS sets `disabled` and the class; interactions blocked (no double submits); a CSS border spinner (or rotating Material Symbol `progress`) renders **without changing button dimensions** — keep the label in the DOM but visually hidden, spinner absolutely centered.\n* **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`.\n* **Success\u002FError (`.is-success` \u002F `.is-error`):** temporary feedback states driven by `--text-success` \u002F `--text-error` with a `check_circle` \u002F `error` icon; all dynamic feedback announced via an `aria-live` region.\n\n**2.2 Card Component Requirements**\n* **Default:** flexible Flexbox column, glass styling (`--glass-bg`, `--glass-border`, `backdrop-filter`) or `--bg-secondary`, subtle border, `--radius-lg`, `--shadow-sm`.\n* **Hover:** `translateY(-2px)`, shadow elevation, and a holographic border reveal via `.holo-border`.\n* **Focus-within:** card border shifts to the aurora-blue glow when any child link\u002Fbutton receives focus.\n* **Loading (skeleton):** define a `.skeleton` class with a shimmer keyframe animation (sweeping gradient highlight) that preserves layout dimensions.\n* **Empty state:** define a `.card--empty` fallback pattern — centered Google Material Symbol, short heading, guidance text — available for any card slot lacking content.\n\n**2.3 Form & Input Requirements** (applies to the Final CTA email capture)\n* **Structure:** `.input-group` is a flex container wrapping a `\u003Clabel>` (associated via `for`\u002F`id`), the `\u003Cinput>`, and a dedicated `.input-group__error` feedback container with `aria-live=\"polite\"`.\n* **States to style:** empty (`:placeholder-shown`), focused (outline\u002Fglow ring), filled, valid (`.is-valid` — success border + `check_circle`), invalid (`.is-error` — error border, `--text-error` message **with icon + text, never color-only**), disabled, read-only.\n* Submission drives the button's loading → success\u002Ferror states; validation logic lives in `script.js`.\n\n**2.4 Modal \u002F Popup Requirements** *(conditional — no modal is requested; if you introduce any overlay, it must meet all of the following)*\n* **States:** opening, open, loading, success\u002Ferror, closing — all animated via CSS transitions (opacity + scale).\n* **UX:** centered flex overlay (`align-items: center`), backdrop, 44px Google Material Symbol `close` button, `role=\"dialog\"`, `aria-modal=\"true\"`, `aria-labelledby`, keyboard focus trapping with focus restored on close, close via `Esc` and backdrop click, layered at `--z-modal`.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by default:** fluid `clamp()` type scale and spacing; no horizontal overflow at any width.\n* **Smooth animations:** every state change transitions with `transition: var(--transition-normal)` \u002F `var(--transition-fast)` and `--ease-standard`. Respect `prefers-reduced-motion: reduce` — disable all aurora flow loops, hue-rotation, transforms, and smooth scrolling; keep functionality intact (opacity-only transitions allowed).\n* **Accessibility (a11y):** ≥ 4.5:1 body-text contrast in **both** modes — never place raw neon aurora stops as text on light backgrounds (define a per-theme `--accent-text`: darkened variant in light mode, aurora cyan in dark mode). Never rely on color alone to communicate state. Semantic HTML5 landmarks, a single `h1`, logical DOM\u002Ffocus order, a visually-hidden skip-to-content link, correct ARIA roles\u002Flabels on custom widgets (theme toggle, mobile menu, accordion), full keyboard operability, and `aria-live` regions for form errors, loading, and success feedback.\n* **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.\n* **Destructive actions:** `.btn--danger` must be visually distinct in both light and dark themes.\n* **Aurora performance:** animate only `transform`, `opacity`, `filter`, and `background-position`; no layout-thrashing properties; ambient loops must run smoothly.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n* **File structure:** separate `index.html`, `style.css`, and `script.js`. Exactly **one** `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` reference before `\u003C\u002Fbody>` — no other script tags, no inline script blocks.\n* **script.js scope (unobtrusive, progressive enhancement only):** theme init\u002Ftoggle\u002Fpersistence (`localStorage`); mobile menu toggle (`aria-expanded`, `Esc` closes); header scrolled-state class; Final CTA form validation with loading\u002Fsuccess\u002Ferror states and `aria-live` announcements; optional IntersectionObserver scroll-reveal (disabled under reduced motion); FAQ is native `\u003Cdetails>`\u002F`\u003Csummary>` (JS optional for single-open behavior).\n* **Naming:** strict BEM everywhere — never mix conventions.\n* **Assets:** zero image files — every visual (meshes, avatars, wordmark accents, shapes) is pure CSS. Avatars are CSS gradient circles with initials.\n* **Copy:** all user-facing copy in English, authored for the fictional product — no lorem ipsum. Footer link targets that genuinely don't exist may use `href=\"#\"`; visible link text must always be real copy.\n* Deliver the complete, working page in one attempt.\n\n---\n\n## 5. THEME VISUAL SYSTEM — GRADIENT MESH \u002F AURORA EVOLVED\n\n* **Mesh background:** a fixed full-viewport aurora layer behind all content (composed from at least 4 `radial-gradient` color fields — one per major stop — with soft transparent falloff), so colors blend like a true mesh. Individual layers animate at different `--aurora-duration` values with alternating `background-position`\u002F`transform` keyframes to create the flowing, morphing aurora feel.\n* **Prismatic shimmer:** a slow `hue-rotate` filter loop on one accent layer\u002Felement for chromatic, iridescent shifting — subtle, performance-safe.\n* **Holographic borders:** `.holo-border` implements `--gradient-holo` as a 1px frame using the conic-gradient + double-mask (content-box\u002Fborder-box composite) technique — used on the highlighted pricing tier and revealed on feature-card hover.\n* **Iridescent text:** `.text-gradient` uses gradient + `background-clip: text` with animated `background-position`; apply only to display-size keywords (hero keyword, section eyebrows) — never body text — with a solid fallback color.\n* **Glass surfaces:** cards, header, and the CTA scrim use `backdrop-filter: blur()` + `--glass-bg`; provide a solid `--bg-secondary` fallback via `@supports`.\n* **Per-theme tuning:** light mode = airy pastel-leaning mesh at reduced opacity, normal blend; dark mode = vivid full-saturation mesh, `mix-blend-mode: screen`, stronger `--glow`. Text never sits directly on peak-saturation mesh — glass scrims guarantee contrast in both modes.\n* **Local auroras:** the Hero and Final CTA get their own intensified mesh panels; global ambient mesh stays calmer.\n\n---\n\n## 6. PAGE SECTION REQUIREMENTS\n\n* **6.1 Global Header (sticky):** glass background (strengthens on scroll via `.is-scrolled`), flex row `align-items: center` — gradient wordmark, anchor nav (Features, How It Works, Testimonials, Pricing, FAQ) with gradient underline hover, theme toggle, compact `.btn--primary` CTA. On mobile: accessible hamburger (Material Symbols `menu`\u002F`close`, `aria-expanded`) toggling a dropdown panel at `--z-dropdown`.\n* **6.2 Hero:** full-intensity aurora background; gradient-bordered badge chip; `h1` with one gradient-morphing keyword (`clamp()` sizing); subheadline; two CTAs — `.btn--primary` (\"Start free\", anchors to CTA\u002Fpricing) + `.btn--secondary` glass (\"See how it works\", anchors to steps); an optional stats strip (3 metrics, `--text-secondary`) and\u002For a CSS-composed abstract product-visual panel inside a glass frame.\n* **6.3 Features:** section header (eyebrow + `h2` + intro) above three `.card--glass` items (row → column). Each: 48px gradient icon circle with ink Material Symbol (use symbols like `gradient`, `blur_on`, `auto_awesome`, `animation`, `palette`), `h3`, copy, \"Learn more\" link with `arrow_forward`. Hover lift + holo border; focus-within glow.\n* **6.4 How It Works:** 3 steps in a flex row on desktop joined by a horizontal gradient connector line (pseudo-element; vertical line on mobile). Each step: gradient number circle (1\u002F2\u002F3, ink numerals) or icon, `h3`, copy — structured as a clear three-stage narrative (e.g., generate → morph\u002Fblend → export).\n* **6.5 Testimonials:** 3 glass cards (row → column): `format_quote` accent symbol, quote, 5-star row (filled Material Symbol `star`, with a per-theme `--star-color` tuned for contrast), gradient-circle avatar with initials, name + role in `--text-secondary`.\n* **6.6 Pricing:** 3 tiers (Free \u002F Pro \u002F Studio), flex row with the justified `align-items: stretch` exception; equal heights. Each card: tier name, large display-font price with \"\u002Fmonth\" microcopy, feature list with `check` symbols in `--text-success`, CTA (highlighted tier gets `.btn--primary`; others `.btn--secondary`). The middle tier is highlighted: `.holo-border`, `--glow` shadow, extra padding, and a \"Most popular\" badge (absolute, gradient fill, ink text). No billing toggle — static pricing.\n* **6.7 FAQ:** 5–6 native `\u003Cdetails class=\"faq-item\">` \u002F `\u003Csummary>` pairs (natively keyboard accessible), max-width ~760px centered. Summary is a flex row (`space-between`, `align-items: center`) with a `expand_more` icon that rotates 180° on `[open]` (state conveyed by rotation, not color alone); hover\u002Ffocus-visible states; open body animates in (e.g., `grid-template-rows` 0fr→1fr or fade\u002Fslide).\n* **6.8 Final CTA:** full-width intensified aurora panel with an inner glass scrim panel guaranteeing text contrast; `h2` with gradient keyword, paragraph, then the email capture `.input-group` + `.btn--primary` inline (row → column on mobile). JS flow: invalid email → `.is-error` + `aria-live` message; valid → button loading → success state + confirmation message (\"You're on the list\" style).\n* **6.9 Footer:** `--bg-secondary` surface with top border. Top area is a wrapping flex row: brand column (wordmark, one-line blurb, a row of five small gradient swatch dots showcasing the palette) + three secondary link columns (Product, Resources, Company) with real English labels. Bottom bar (flex, `space-between`): © 2025 + product name, and small Privacy\u002FTerms links. All links show hover state shifts to `--accent-text`.\n",1791954984992]