[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-703-HELIOS-9-MISSION-CONTROL":3},"# SYSTEM PROMPT — CODING AI BUILD SPECIFICATION\n\n**Project:** Complete Landing Page — **\"HELIOS-9 \u002F\u002F MISSION CONTROL\"**\n**Your Role:** Senior Frontend Engineer & Expert UI Designer.\n**Objective:** Produce the final, production-grade code for the entire landing page **on the first attempt** — every section, every component state, both themes, fully functional. No partial output, no \"to be continued,\" no lorem ipsum.\n\n---\n\n## 0. DESIGN BRIEF — \"HELIOS-9 \u002F\u002F MISSION CONTROL\"\n\n**0.1 Theme Identity**\nBuild an **interactive\u002Fanimated** landing page for a fictional solar-operations platform styled as a modern mission-control console. The mood is **2020s Contemporary**: warm amber signal accents against deep space navy and warm cream paper, technical monospaced micro-labels (`\u002F\u002F EYEBROW LABELS`), soft elevations, generous whitespace, subtle grid textures, and constant micro-feedback on every interaction. Visual language: precision instrumentation, orbital diagrams, telemetry readouts, launch sequencing.\n\n**0.2 Palette Mapping — Mandatory Token Values**\n\n| Token | Light Theme (DEFAULT) | Dark Theme (`.dark`) |\n|---|---|---|\n| `--primary` (Helios Amber) | `#FFB347` | `#FFB347` |\n| `--secondary` (Signal Taupe) | `#8A8272` | `#8A8272` |\n| `--bg-primary` | `#F5F0E4` (warm paper derived from `#E8DCC8` — **never** `#ffffff`) | `#0C0F14` |\n| `--bg-secondary` (cards\u002Fpanels) | `#E8DCC8` | `#11151C` (raised surfaces may use `#141922`) |\n| `--text-primary` | `#0C0F14` | `#E8DCC8` |\n| `--text-secondary` | `#5C5546` (darkened taupe — raw `#8A8272` fails AA as text) | `#A9A28E` (lightened taupe) |\n| `--accent-text` (amber usable as text\u002Flinks) | `#A36200` (darkened amber) | `#FFB347` |\n| `--border-default` | `#D6CBB2` | `#2A2F3A` |\n| `--text-success` \u002F `--border-success` | `#15803D` \u002F `#16A34A` | `#4ADE80` \u002F `#22C55E` |\n| `--text-error` \u002F `--border-error` | `#B3261E` \u002F `#DC2626` | `#F87171` \u002F `#EF4444` |\n\n**Contrast-pairing rules (enforced in BOTH themes):**\n* Every light background pairs with dark text; every dark background pairs with light text.\n* Raw `#FFB347` is **never** used as text on light backgrounds (fails contrast) — in light mode it is a fill\u002Fborder color paired with `#0C0F14` text (~10:1); amber-toned text uses `--accent-text`.\n* All text\u002Fbackground pairs must pass **WCAG AA (4.5:1)** in both themes.\n\n**0.3 Typography (Google Fonts Only)**\n* `--font-base: 'Inter'` (body), `--font-display: 'Space Grotesk'` (headings), `--font-mono: 'JetBrains Mono'` (eyebrow labels, telemetry chips, prices, step indices).\n* Load all via Google Fonts `\u003Clink>` tags with `preconnect`. Never use system fonts as the identity.\n\n**0.4 Iconography**\n* Google **Material Symbols (Rounded)** via the Google Fonts stylesheet. Consistent style throughout.\n* **Explicitly forbidden:** raw inline SVGs, local icon files, emoji-as-icons.\n* Usage: `\u003Cspan class=\"material-symbols-rounded\" aria-hidden=\"true\">rocket_launch\u003C\u002Fspan>`.\n\n**0.5 Signature Visual Effects (all pure CSS)**\n* **Amber Signal Glow:** radial-gradient halo behind the hero; per-theme tuned opacity.\n* **Console Grid:** low-opacity `repeating-linear-gradient` grid texture with a radial mask fade.\n* **Radar Sweep:** concentric rings with a slow-rotating `conic-gradient` sweep (`@keyframes spin`, ~12s linear infinite).\n* **Pulse Beacon:** expanding `box-shadow` ring keyframe on live status dots.\n* **Gradient Ink:** headline `\u003Cspan>` gradient text — light mode blends `#0C0F14 → #A36200`; dark mode blends `#FFB347 → #E8DCC8` — must maintain ≥3:1 contrast in both themes.\n* **Shimmer:** skeleton loading and featured-badge shimmer via `background-position` keyframes.\n* **Lift & Press:** hover `translateY(-2px)` + shadow shift; active `transform: scale(0.97)`.\n* **Stagger Reveal:** scroll-triggered entry animations — implemented so content is visible by default if JS fails; JS only applies the pre-reveal state before observing.\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 everywhere in the HTML. No exceptions.\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:** HTML stays clean and semantic; changing the site's look must require editing only the CSS. Stagger delays must be achieved via `:nth-child()` selectors, not inline styles.\n\n### 1.2 CSS Variables & Theme Tokens\n* **All tokens in `:root`** (light defaults) and overridden in the dark theme: the full set from §0.2 plus `--radius-sm: 6px`, `--radius-md: 12px`, `--radius-lg: 20px`, `--shadow-sm`, `--shadow-md` (warm-tinted in light mode, deep black in dark mode), `--spacing-gap: clamp(1rem, 3vw, 2rem)`, `--transition-fast: 140ms`, `--transition-normal: 280ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`, `--z-nav: 900`, `--z-dropdown: 1000`, `--z-modal: 1050`, `--z-toast: 1100`.\n* No hardcoded hex values in rules that should be themed — always `var(--...)`.\n* **Light backgrounds are never pure white**; where a near-white chip is genuinely needed, use `#fefefe`.\n\n### 1.3 Mandatory Dark Mode Support\n* **Dark Mode must always be defined**, under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `\u003Chtml>`, even though **Light is the brand default theme** for this build.\n* **First visit:** apply the light theme (spec default), but honor `prefers-color-scheme: dark` if the user's OS explicitly requests dark.\n* **Persistence:** store the user's choice in `localStorage` (e.g., key `helios-theme`) and restore it on every load; all theming happens by swapping CSS variable values — **zero HTML restructuring**.\n* **Visible toggle control** in the navbar: Material Symbols `light_mode` \u002F `dark_mode`, with correct `aria-pressed` and dynamic `aria-label` (\"Switch to dark theme\" \u002F \"Switch to light theme\").\n* All theme logic lives in the deferred `script.js` — no inline script blocks.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n* **Flexbox governs all component and linear layouts**, with `align-items: center` as the **default** on every flex container unless an exception is explicitly justified (documented exceptions: form `.input-group` uses `stretch`; multi-line quote cards may use `flex-start` for body text).\n* **CSS Grid is required** for the 2D section layouts this theme demands (hero split, 3-card grids, step sequences) — always `repeat(auto-fit, minmax(...))` or explicit columns that collapse to a single column below ~768px.\n* **Mobile-first:** build the single-column layout first, then enhance upward. **No horizontal scrolling at any viewport width, down to 320px.**\n\n### 1.5 Framework Default & Tailwind CSS Integration\n* Use **Tailwind CSS via the Play CDN** (external `\u003Cscript src=\"https:\u002F\u002Fcdn.tailwindcss.com\">\u003C\u002Fscript>` in `\u003Chead>` — permitted as an external reference alongside the single deferred entry point). If network access is unavailable, fall back to clean custom CSS in `style.css` following the same conventions.\n* Tailwind utilities are for **layout\u002Fspacing only** (`flex`, `grid`, `gap`, `p-*`, `items-center`). **All colors, radii, shadows, transitions, fonts, and component states come from CSS variables via reusable classes** (`.btn`, `.card`, `.input-group`, `.section-header`) defined in `style.css`. Never hardcode colors in utility classes; never use an inline Tailwind config script.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n* Google Fonts `\u003Clink>` for Inter, Space Grotesk, and JetBrains Mono; Google Fonts stylesheet for Material Symbols Rounded. No other font or icon source. All user-facing copy in **English**.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Button Component Requirements\nAll states via CSS classes — never inline styles:\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` Minimum touch target **44×44px**. Variants: `.btn--primary` (amber gradient fill + `#0C0F14` text), `.btn--secondary` (bordered ghost, themed text), `.btn--danger` (visually distinct in **both** themes).\n* **Hover:** brightness\u002Fshadow shift with `cursor: pointer` (`transition: var(--transition-fast)`).\n* **Focus:** distinct focus ring from CSS variables (`box-shadow` ring) visible in both themes; keyboard navigable.\n* **Active\u002FPressed:** `transform: scale(0.97)`.\n* **Loading:** disables interaction, prevents double-clicks, renders a CSS spinner (animated border ring or rotating Material Symbol `progress`) **without changing button dimensions**.\n* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n* **Success\u002FError:** temporary feedback styles driven by `--text-success` \u002F `--text-error` (e.g., CTA form submit swaps to check icon + confirmation).\n\n### 2.2 Card Component Requirements\n* **Default:** flexible layout, `--bg-secondary` fill, `--border-default` border, `--radius-md`, `--shadow-sm`.\n* **Hover:** `translateY(-2px)` + elevation shift + border shifts toward amber.\n* **Focus-within:** card border highlights when a child link\u002Fbutton receives focus.\n* **Loading (Skeleton):** `.card--skeleton` shimmer animation with stable dimensions — no layout jumps.\n* **Empty State:** `.card--empty` fallback pattern: Google Icon + short guidance text.\n* **Featured variant:** `.card--featured` for the highlighted pricing tier — gradient border treatment + shimmering badge, distinct in both themes.\n\n### 2.3 Form & Input Requirements\n* **Structure:** `.input-group` as a flex container wrapping a `\u003Clabel>`, the input, and a dedicated error feedback element.\n* **States — all styled:** empty, focused (outline ring via `--primary`), filled, valid (`--border-success` + `check` icon), invalid (`--border-error`, error text in `--text-error`, `error` icon), disabled, read-only.\n* Invalid feedback is announced via an `aria-live=\"polite\"` region. Never color-only: pair borders\u002Ficons with text.\n\n### 2.4 Modal \u002F Popup Requirements\nBuild one **\"Mission Brief\" modal** opened by the Hero's secondary CTA:\n* **States:** opening (fade + scale-in via CSS transition), open, loading (brief \"Decrypting transmission…\" simulated delay), content, closing (animated out).\n* **UX:** centered flex overlay (`align-items: center; justify-content: center;`), backdrop with blur, Material Symbol `close` button (`aria-label=\"Close dialog\"`), `role=\"dialog\"` + `aria-modal=\"true\"`, keyboard **focus trapping**, close on `Esc` and overlay click, focus returns to the trigger. Layered at `--z-modal`.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by default:** fluid type\u002Fsizing, breakpoints without horizontal overflow; verified at 320px.\n* **Smooth animations:** `transition: all var(--transition-normal) var(--ease-standard)` on state changes; **all keyframe animations and transitions disabled\u002Freduced under `@media (prefers-reduced-motion: reduce)`** — content must never remain hidden.\n* **Accessibility:** AA contrast in both themes; semantic HTML5 landmarks (`header`, `nav`, `main`, `section[aria-labelledby]`, `footer`); a skip-to-content link; correct ARIA (`aria-expanded` on accordion\u002Fmenu, `aria-pressed` on toggles, `aria-live` on form feedback and dynamic status); logical DOM\u002Ffocus order; **full keyboard operability — no mouse-only interactions**.\n* **Mandatory visual feedback:** every click, hover, anchor jump, and submission produces a visible state change.\n* **Destructive actions:** `.btn--danger` is distinct in both light and dark themes.\n* **Anchors:** smooth scrolling via `scroll-behavior: smooth` (disabled under reduced motion) + `scroll-margin-top` to clear the sticky navbar.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n* **Files:** separate `index.html`, `style.css`, `script.js`. Only **one** `\u003Cscript>` reference in the HTML: `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`. No inline script blocks. **No inline event-handler attributes** (`onclick` etc.) — all listeners via `addEventListener`.\n* **Naming convention:** **BEM** for every custom class (`.hero__title`, `.card--featured`, `.faq__item`); Tailwind utilities for layout only. Never mix conventions — no ad-hoc camelCase or abbreviated class names.\n* **No unrequested placeholders:** author concise, themed **English** marketing copy in a mission-control voice. **No lorem ipsum anywhere.** `href=\"#\"` only for footer links with no real target; in-page links must use real section IDs.\n* **No external images:** all illustrations (orbital radar, avatars, glows, grids) are CSS-generated; testimonial avatars are initials in gradient circles; icons are Material Symbols.\n* All JavaScript behaviors (theme toggle\u002Fpersistence, mobile menu, modal, accordion, scroll reveals, email form validation\u002Ffeedback, pricing toggle, button loading simulation) live in `script.js` and degrade gracefully without JS.\n\n---\n\n## 5. PAGE ARCHITECTURE — REQUIRED SECTIONS\n\n**Global:** single `main` with a max-width (~72rem) container; a reused `.section-header` pattern (mono eyebrow `\u002F\u002F` label, display-font H2, lead paragraph) for every section.\n\n**5.1 Navbar (sticky):** Logo tile (Material Symbol `sunny` in amber gradient) + mono wordmark \"HELIOS-9 \u002F\u002F MISSION CONTROL\"; anchor links (Features, How It Works, Testimonials, Pricing, FAQ); theme toggle per §1.3; primary CTA \"Initiate Launch\"; backdrop blur + shadow after scroll. Mobile: keyboard-accessible hamburger disclosure menu (`aria-expanded`, closes on `Esc`\u002Flink click).\n\n**5.2 Hero:** CSS Grid, two columns → one on mobile. Mono eyebrow (\"\u002F\u002F SOLAR OPERATIONS PLATFORM — MISSION 09\"), gradient-span H1 (per §0.5), subcopy, primary CTA (scrolls to `#pricing`) + secondary CTA (\"View Mission Brief\" — opens modal per §2.4). Below: a live status strip of three mono telemetry chips with pulsing dots (\"ALL SYSTEMS NOMINAL\", \"UPLINK 98.7%\", \"SOLAR FLUX STABLE\"). Right column: decorative `aria-hidden=\"true\"` orbital radar panel — `aspect-ratio: 1\u002F1`, concentric rings, rotating conic sweep, pulsing amber core, corner mono readouts. Page background: radial amber glow + console grid texture.\n\n**5.3 Features — 3 cards:** Grid `3 → 1` columns. Cards per §2.2: icon tile (`aspect-ratio: 1\u002F1`, amber-tinted gradient, Material Symbol), mono index (`01`–`03`), H3, copy, \"Learn more\" link. Suggested: Real-Time Telemetry (`insights`), Autonomous Course Correction (`explore`), Radiation-Hardened Security (`shield`). Define skeleton and empty-state styles for the card class.\n\n**5.4 How It Works — 3 steps:** \"Mission Sequence.\" Grid `3 → 1` with connector line on desktop. Steps with large mono numerals in amber, icon, H3, copy: `01 CALIBRATE` (define mission parameters), `02 LAUNCH` (one-command deployment), `03 COMMAND` (live dashboards + alerts). Staggered scroll-reveal per §0.5; visible without JS.\n\n**5.5 Testimonials:** 3 quote cards in a responsive grid: `format_quote` icon, quote text, gradient-initials avatar, name + role (fictional, e.g., \"Dr. Mara Voss — Flight Director, Aegis Orbital\"), star rating via Material Symbols with an accessible text alternative. Subtle hover lift.\n\n**5.6 Pricing — 3 tiers:** Grid `3 → 1`. Tiers: **Probe** ($0), **Orbiter** ($49\u002Fmo — `.card--featured`, shimmering \"MOST POPULAR\" badge, stronger CTA), **Flagship** (custom). Each: mono tier eyebrow, mono price, description, feature list with `check` icons, full-width `.btn` per §2.1. Include a monthly\u002Fannual billing toggle (`aria-pressed`, animated price swap, reduced-motion fallback). CTA clicks demonstrate the loading state.\n\n**5.7 FAQ:** Accordion, 5–6 themed Q&As. Each item: `\u003Cbutton>` with `aria-expanded` + `aria-controls`, rotating `expand_more` chevron, panel with animated open (CSS height\u002Fmax-height transition). Keyboard operable, visible focus, hover feedback, state never communicated by color alone.\n\n**5.8 Final CTA:** Full-width gradient band (theme-aware, AA in both modes): headline (\"Ready for liftoff?\" voice), supporting line, and an email capture `.input-group` per §2.3 — submit demonstrates **loading → success** with `aria-live` confirmation, and inline error state for invalid input.\n\n**5.9 Footer:** Dark ink band in light mode (`#0C0F14` + cream text — contrast-paired); differentiated surface in dark mode. Brand blurb, secondary link columns (Product, Company, Resources, Legal), social\u002Fcontact icons (`mail`, `language`, `rss_feed`), and \"© 2025 HELIOS-9 \u002F\u002F MISSION CONTROL. All systems nominal.\" Links: hover amber underline, visible focus rings.\n\n---\n\n## 6. DEFINITION OF DONE — SELF-CHECK BEFORE OUTPUT\n\n1. Zero `style=\"...\"` attributes; zero inline event handlers; zero inline `\u003Cscript>` blocks beyond the single deferred `script.js`.\n2. Light **and** dark themes fully tokenized; toggle works, persists via `localStorage`, `aria-pressed`\u002F`aria-label` correct.\n3. All text pairs pass AA in both themes; `#FFB347` never used as text on light backgrounds.\n4. All component states from §2.1–2.4 exist and are reachable via keyboard.\n5. No horizontal overflow at 320px; all grids collapse to one column.\n6. `prefers-reduced-motion` disables all keyframes and smooth scroll; nothing stays hidden without JS.\n7. One naming convention (BEM) throughout; all three files complete; all copy authored in themed English.\n\n**Output the complete `index.html`, `style.css`, and `script.js` now.**\n",1791954991520]