[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-736-KP-7-aurora-forecast":3},"# BUILD SPECIFICATION — CODING AI PROMPT\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality glassmorphism landing page in a single attempt. Do not ask clarifying questions — make expert decisions wherever this spec leaves room. Every rule below is mandatory unless explicitly marked optional.\n\n---\n\n## 1. PROJECT BRIEF — \"KP 7 — AURORA FORECAST\" LANDING PAGE\n\n**1.1 Product Concept & Art Direction**\n- **Theme:** \"KP 7 — aurora forecast\". **Style:** Glassmorphism. **Era:** 2020s Digital. **Keywords:** aurora, borealis, report, glassmorphism, animated, glass, translucent, gradient, blur.\n- The page markets a fictional aurora-borealis forecasting service (\"KP 7\") that monitors the geomagnetic KP index (0–9) and alerts users before the northern lights appear. \"KP 7\" denotes a strong geomagnetic storm — the product's signature moment. The aesthetic: frosted translucent glass panels floating over a slowly drifting aurora of soft gradients, with layered blur, generous border radii, and subtle glow.\n\n**1.2 Required Sections (mandatory, in this DOM order)**\n1. **Sticky glass navbar** — translucent blurred bar: logo (\"KP 7\" + Material Symbol `flare`), anchor links (Features, How It Works, Pricing, FAQ), visible theme toggle, compact \"Start free\" CTA. On viewports \u003C 768px, links collapse into a `menu`-button-controlled glass dropdown panel.\n2. **Hero (`#hero`)** — full animated aurora background; a live-status glass badge (\"Live KP index: 7 — Strong storm\" with pulsing dot), one `h1`, supporting subcopy, two CTAs (primary gradient button + ghost glass button), and a stats strip (\"27-day solar outlook · 40,000+ locations · 4.9\u002F5 from chasers\"). Optionally include a decorative pure-CSS mini bar chart of tonight's KP values inside a glass panel (marked `aria-hidden` with an `sr-only` text summary).\n3. **Features (`#features`)** — exactly 3 glass cards: *Live KP index tracking* (`monitoring`), *Hyperlocal visibility windows* (`travel_explore`), *Storm alerts that beat the rush* (`notifications_active`). Each: glass icon circle, title, one specific sentence of copy.\n4. **How It Works (`#how-it-works`)** — exactly 3 numbered step cards (01 `pin_drop` \"Set your location\", 02 `satellite_alt` \"We watch the solar wind\", 03 `bolt` \"Your phone lights up first\") with a horizontal connector line on desktop only, hidden on mobile.\n5. **Testimonials (`#testimonials`)** — 3 glass quote cards: 5-star rating, realistic quote, initials avatar in a gradient glass circle, name + location (e.g., Tromsø, Fairbanks, Reykjavík).\n6. **Pricing (`#pricing`)** — exactly 3 tiers: *Stargazer* $0, *Aurora Chaser* $9\u002Fmo (featured: \"Most popular\" ribbon, elevated glass, gradient border, primary CTA), *Expedition* $29\u002Fmo (ghost CTA). Each tier: price, 4–5 feature rows with `check` icons, CTA button. An optional monthly\u002Fyearly billing toggle may be added; if built, it must use a `role=\"group\"` segmented control with `aria-pressed` buttons and update price text accessibly.\n7. **FAQ (`#faq`)** — accordion with 6 items (What does \"KP\" mean? How accurate is the forecast? Do I need total darkness? When is aurora season? Can I cancel anytime? Which countries are covered?). Full accordion spec in §3.4.\n8. **Final CTA (`#cta`)** — centered glass panel over an aurora glow: `h2` \"Never miss a storm again.\", email signup form (spec in §3.3), microcopy \"Free to start. No spam. Unsubscribe anytime.\"\n9. **Footer** — brand blurb, 3 columns of secondary links (Product: Features \u002F Pricing \u002F FAQ; Company: About \u002F Blog \u002F Contact; Legal: Privacy \u002F Terms \u002F Cookies), social links rendered as **text pills** (Material Symbols has no brand logos — do not fake them with icons), and an auto-updating copyright year.\n\n**1.3 Color Palette & Visual Direction (authoritative)**\n- Base palette: `#060a18`, `#dce6f2`, `#03050e`, `#071026`, `#0a1a33`, `#0b1220`. A restrained aurora green (`#3fe0ac` family) is the sole accent, reserved for gradients, glows, focus rings, and success states — never for body text.\n- **Light mode is the default theme** (per source spec) and must receive equal polish: frosted pale-blue surfaces with dark navy text, aurora glows rendered via `mix-blend-mode: soft-light` at reduced opacity. **Exception clause:** although the source spec designates Light as default, a fully tokenized Dark mode remains mandatory per §2.3; on first visit, default to Light unless `prefers-color-scheme` reports dark.\n\n**1.4 Required CSS Techniques (all must appear)**\n- `backdrop-filter` (+ `-webkit-backdrop-filter`) for every glass surface, with an `@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))` fallback that raises glass background alpha to ≥ 0.85 and keeps layout identical.\n- `mix-blend-mode` on aurora blob layers (`screen` in dark mode, `soft-light` in light mode).\n- CSS filters on aurora blobs: `blur()` + slow `hue-rotate()` inside keyframes.\n- Keyframe animations (aurora drift, status-dot pulse, skeleton shimmer, spinner), transitions, transforms, multi-stop gradients, box shadows, border radius — all driven by tokens.\n\n**1.5 Typography & Icons (Google only)**\n- Fonts: **Space Grotesk** (500\u002F600\u002F700) for `--font-display` headings; **Inter** (400\u002F500\u002F600) for `--font-base`. Load via Google Fonts `\u003Clink>` with `preconnect` and `display=swap`.\n- Icons: **Material Symbols Rounded** via Google Fonts stylesheet with `display=block`, base `font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24`, and an `.icon--filled` modifier (`'FILL' 1`) for rating stars. **Inline SVGs, local icon fonts, and emoji icons are forbidden.**\n\n**1.6 Copy Rules**\n- Author all user-facing copy in **English**, specific to the aurora-forecast product (you may adapt the copy brief in §1.2, but keep it concrete). **Lorem ipsum is forbidden.** Every interactive element needs visible, meaningful text.\n\n---\n\n## 2. ARCHITECTURE RULES (MANDATORY)\n\n**2.1 CSS-First Architecture & Zero Inline CSS**\n- All styling lives in `style.css`. The `style=\"...\"` attribute and `\u003Cstyle>` blocks in HTML are **forbidden**.\n- Target everything through class\u002FID selectors; keep HTML semantic and style-agnostic so the theme could be reskinned by editing CSS alone.\n- Organize `style.css` with native cascade `@layer` in this order: `reset`, `tokens`, `base`, `layout`, `components`, `utilities`.\n\n**2.2 CSS Variables & Theme Tokens**\n- Define all visual tokens exactly as follows; extend only with theme-specific tokens (`--glass-bg`, `--glass-border`, `--glass-blur`, `--aurora-1\u002F2\u002F3`, `--focus-ring`, `--z-nav`).\n\n```css\n\u002F* LIGHT — default *\u002F\n:root {\n  --font-base: 'Inter', system-ui, sans-serif;\n  --font-display: 'Space Grotesk', var(--font-base);\n  --primary: #0a1a33;          --secondary: #071026;\n  --bg-primary: #dce6f2;       --bg-secondary: #eef3fa;   \u002F* #fefefe only where near-white is required *\u002F\n  --text-primary: #060a18;     --text-secondary: rgba(6,10,24,0.68);\n  --text-success: #0d7a55;     --text-error: #b3261e;\n  --border-default: rgba(6,10,24,0.14);\n  --border-error: #b3261e;     --border-success: #0d7a55;\n  --accent-aurora: #2fd6a4;    --focus-ring: #0a1a33;\n  --aurora-1: #35e0b0; --aurora-2: #57d0e0; --aurora-3: #dce6f2;\n  --glass-bg: rgba(254,254,254,0.45); --glass-border: rgba(6,10,24,0.10); --glass-blur: 16px;\n  --radius-sm: 8px; --radius-md: 16px; --radius-lg: 28px;\n  --shadow-sm: 0 2px 8px rgba(3,5,14,0.08); --shadow-md: 0 12px 32px rgba(3,5,14,0.16);\n  --spacing-gap: 1.5rem;\n  --transition-fast: 150ms; --transition-normal: 300ms; --ease-standard: cubic-bezier(0.4,0,0.2,1);\n  --z-nav: 900; --z-dropdown: 1000; --z-modal: 1100; --z-toast: 1200;\n  color-scheme: light;\n}\n\u002F* DARK — define BOTH mechanisms, in this source order:\n   1) @media (prefers-color-scheme: dark) { :root { …dark tokens… } }\n   2) .dark { …dark tokens… }   3) .light { …light tokens… } (explicit user choice overrides the media query) *\u002F\n.dark {\n  --primary: #dce6f2;          --secondary: #0a1a33;\n  --bg-primary: #03050e;       --bg-secondary: #0b1220;\n  --text-primary: #dce6f2;     --text-secondary: rgba(220,230,242,0.72);\n  --text-success: #3fe0ac;     --text-error: #ff7d74;\n  --border-default: rgba(220,230,242,0.16);\n  --border-error: #ff7d74;     --border-success: #3fe0ac;\n  --accent-aurora: #3fe0ac;    --focus-ring: #3fe0ac;\n  --glass-bg: rgba(10,26,51,0.45); --glass-border: rgba(220,230,242,0.14);\n  --shadow-sm: 0 2px 10px rgba(0,0,0,0.45); --shadow-md: 0 14px 40px rgba(0,0,0,0.55);\n  color-scheme: dark;\n}\n```\n- **Contrast pairing is mandatory in both themes:** every light background token pairs with `#060a18`-family dark text; every dark background token pairs with `#dce6f2`-family light text. Text placed on translucent glass must sit on enough alpha to pass §4.3 contrast.\n- Never use pure `#ffffff`; use `#fefefe` where a near-white surface is required.\n\n**2.3 Mandatory Dark Mode & Theme Switching**\n- Dark mode must be fully implemented and equally polished (aurora glows via `mix-blend-mode: screen`, optional pure-CSS starfield dot pattern hidden in light mode).\n- JS theme manager: read `localStorage` key `kp7-theme`; apply `.dark` or `.light` class to `\u003Chtml>`; with no stored value, do nothing (CSS media query honors `prefers-color-scheme`; base tokens default to light).\n- The navbar toggle must be a visible icon-only button (`dark_mode` \u002F `light_mode` symbols swapped by state) with `aria-label=\"Toggle dark mode\"` and `aria-pressed` reflecting dark state. No theme switching may alter HTML structure.\n\n**2.4 Flexbox Layout & Mobile-First**\n- Build all layout structures with Flexbox; every flex container **defaults to `align-items: center`** unless an exception is documented with a CSS comment. Sanctioned exceptions: card-grid containers use `stretch` for equal heights; step\u002Ffeature card bodies and footer columns use `flex-start` (top-aligned reading content).\n- Mobile-first: card rows collapse to a single column below 768px via `flex-direction: column`; nav collapses per §1.2. No horizontal scrolling at any width down to 320px — use `overflow-x: clip` on `body` and the aurora container, fluid `clamp()` typography, and wrapped flex rows.\n\n**2.5 Framework Decision**\n- Write **clean custom CSS driven by Tailwind-style layering**: native `@layer` architecture in `style.css` (§2.1). Do **not** load the Tailwind Play CDN (its inline config script would violate §6.1). Every utility\u002Fcomponent class must map back to the tokens above; generic reusable classes (`.btn`, `.card`, `.input-group`, `.glass`) are required.\n\n**2.6 Icons & Fonts Enforcement**\n- Google Fonts and Google Material Symbols only, per §1.5. Decorative icons get `aria-hidden=\"true\"`; icon-only controls require `aria-label`. No exceptions.\n\n---\n\n## 3. COMPONENT DESIGN SPECIFICATIONS\n\n**3.1 Buttons (`.btn` + modifiers `.btn--primary`, `.btn--ghost`, `.btn--danger`)**\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px touch target; primary = aurora gradient fill with `--bg-primary`-family dark text for guaranteed contrast; ghost = glass surface + `--border-default`.\n- **Hover:** brightness\u002Fshadow shift, `cursor: pointer`. **Focus:** distinct 2px ring built from `--focus-ring` (outline + offset), never removed. **Active:** `transform: scale(0.97)`.\n- **Loading (`.is-loading`):** disable interaction and double-clicks; swap label for a CSS spinner (or rotating `progress_activity` symbol) that occupies reserved space — button dimensions must not change.\n- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`. **Success\u002FError (`.is-success`, `.is-error`):** temporary states driven by `--text-success`\u002F`--text-error`, always paired with an icon + text (never color alone).\n- Define `.btn--danger` with distinct styling in both themes even if unused on this page.\n\n**3.2 Cards (`.card`, `.card--featured`)**\n- **Default:** flex layout, `--glass-bg` + `backdrop-filter: blur(var(--glass-blur))`, 1px `--glass-border`, `--radius-lg`, `--shadow-sm`. Featured pricing card: gradient border, stronger elevation, \"Most popular\" ribbon.\n- **Hover (interactive cards only):** `transform: translateY(-2px)` + shadow shift. **Focus-within:** border highlights when a child link\u002Fbutton gains focus.\n- **Skeleton:** define a shimmer keyframe and `.skeleton` utility for any asynchronously rendered content; skeleton dimensions must match final content to prevent layout shift. **Empty state:** define a reusable pattern — Material Symbol in a glass circle plus one guidance sentence.\n\n**3.3 Forms & Inputs (`.input-group`)**\n- Structure: flex `.input-group` wrapping a `\u003Clabel for>`-linked input, the field itself, and a dedicated error container (`aria-live=\"polite\"`).\n- **States via CSS classes:** empty, focused (ring from `--focus-ring`), filled, valid (`.is-valid`: success border + `check_circle` icon), invalid (`.is-error`: error border, error icon, red text message), disabled, read-only.\n- **Final CTA form behavior:** validate email on submit; on failure show `.is-error` + specific message; on success simulate a 1200ms async submit (loading button), then flip to success state, fire a toast (§3.4), and reset after 4s. Wire error text via `aria-describedby`.\n\n**3.4 Accordion, Toast, and Modal**\n- **FAQ accordion:** each item = `\u003Ch3>\u003Cbutton class=\"faq__trigger\" aria-expanded=\"false\" aria-controls=\"faq-panel-N\" id=\"faq-trigger-N\">Question \u003Cspan class=\"material-symbols-rounded\" aria-hidden=\"true\">expand_more\u003C\u002Fspan>\u003C\u002Fbutton>\u003C\u002Fh3>` + `\u003Cdiv class=\"faq__panel\" id=\"faq-panel-N\" role=\"region\" aria-labelledby=\"faq-trigger-N\">`. Animate with `grid-template-rows: 0fr → 1fr`; icon rotates 180°; JS enforces single-open; triggers are native buttons (fully keyboard operable); first item open by default.\n- **Toast (`.toast`, `role=\"status\"`, `aria-live=\"polite\"`):** fixed glass panel at `--z-toast`, slide+fade entrance, auto-dismiss 4s, close button (`close` icon + `aria-label=\"Dismiss notification\"`).\n- **Modal (optional enhancement — you may open a \"What is KP?\" glass explainer from the hero badge; if ANY modal is implemented, all of the following is mandatory):** `role=\"dialog\"` `aria-modal=\"true\"` `aria-labelledby`, blurred backdrop overlay at `--z-modal`, centered flex container (`align-items: center`), CSS-animated opening\u002Fclosing (scale + fade), keyboard **focus trap**, close via `Esc` and overlay click, Google-Icon close button, focus returned to the triggering element, and loading\u002Fsuccess\u002Ferror states for any action it performs.\n\n---\n\n## 4. CORE UX & MICRO-INTERACTION RULES\n\n**4.1 Responsive by Default** — fluid `clamp()` sizing, no overflow, `section[id] { scroll-margin-top: 96px; }` for the sticky-nav offset; `html { scroll-behavior: smooth; }` gated inside `@media (prefers-reduced-motion: no-preference)`.\n\n**4.2 Smooth, Respectful Motion** — every state change transitions with `var(--transition-normal)` and `var(--ease-standard)`. Provide a `prefers-reduced-motion: reduce` block that disables aurora drift, pulses, spins, reveals, and transforms **without hiding content** (keep static gradients visible; replace the loading spinner with an opacity pulse).\n\n**4.3 Accessibility (hard requirements)** — 4.5:1 text contrast (3:1 large text\u002FUI) verified in **both** themes; semantic HTML5 landmarks (`header`, `nav[aria-label]`, `main`, `section`, `footer`) plus a skip link to `#main`; exactly one `h1` with logical heading order; `:focus-visible` ring on every interactive element; state is never communicated by color alone (pair with icon + text); `aria-live` regions for form errors, loading, and toasts; full keyboard operability — no mouse-only interactions.\n\n**4.4 Mandatory Visual Feedback** — every click, hover, toggle, accordion open\u002Fclose, and form submission triggers a visible state change within `--transition-fast`.\n\n**4.5 Destructive\u002FDanger Styling** — any `.btn--danger`-classed action must be visually distinct in both light and dark themes.\n\n---\n\n## 5. JAVASCRIPT REQUIREMENTS (vanilla ES6+, single file, defensive null-guards)\n\nImplement: **5.1** theme manager (§2.3); **5.2** mobile nav toggle (`aria-expanded`, `aria-controls`, `Esc` closes, focus returns to trigger, closes on link click); **5.3** FAQ accordion (§3.4); **5.4** CTA form validation + simulated submit + success\u002Ftoast (§3.3); **5.5** toast utility; **5.6** scroll-reveal via `IntersectionObserver` adding `.is-visible`, with reveal initial states gated behind a `.js-enabled` class on `\u003Chtml>` so the page is fully visible without JS; **5.7** auto-updating footer year; **5.8** modal manager if built (§3.4). No libraries, no frameworks, no polyfills beyond what is written.\n\n---\n\n## 6. DELIVERABLES & OUTPUT FORMAT\n\n**6.1 File Structure** — three files, output in full in one response, each in its own labeled code block: `index.html`, `style.css`, `script.js`. The only script reference permitted is a single `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`; no inline script blocks, no inline CSS, no `\u003Cstyle>` tags.\n\n**6.2 Naming Convention** — BEM only (`block__element--modifier`), applied consistently to every custom class; never mix conventions. Use `id`s exclusively for anchors, form labels, and ARIA relationships.\n\n**6.3 Completeness** — no TODOs, no placeholders, no lorem ipsum; all copy authored per §1.6. The saved files must render a fully functional page with no console errors.\n\n**6.4 Build now** — produce the complete `index.html`, `style.css`, and `script.js` in this single response.\n",1791954992035]