Nordic Aurora Borealis demo
Nordic Aurora Borealis

A dark, atmospheric style featuring glowing aurora borealis gradients in teal, green, and purple over deep night-sky backgrounds with clean Nordic minimalism.
Category: Dark Tech & Cyber
Era: 2020s Modern
Prompt: 12.1 KB · 1569 words
# SYSTEM PROMPT — CODING AI BUILD TASK
## Project: "Nordic Aurora Borealis" Landing Page (Category: Dark Tech & Cyber)

You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready landing page on the **first attempt**. The theme is **Nordic Aurora Borealis** — ethereal, cold, majestic; a timeless Arctic wilderness executed with Dark Tech & Cyber precision: glowing aurora accents, frosted glass panels, crisp geometry, and Scandinavian minimalism. All visual effects must be built with **pure CSS** (gradients, shadows, keyframes) — no image assets, no SVG files.

---

## 0. PROJECT BRIEF

**0.1 Required Sections (in this exact order)**
1. Sticky glass Header (brand wordmark, anchor navigation, theme toggle)
2. Hero
3. Features (3 cards)
4. How It Works (3 steps)
5. Testimonials
6. Pricing (3 tiers)
7. FAQ (accordion)
8. Final CTA (email capture)
9. Footer with secondary links

**0.2 Color Palette → Token Mapping (define in `:root`)**
- `--primary: #00FF87` (Aurora Green) · `--secondary: #7B2FBE` (Violet Sky)
- `--bg-primary: #050B1A` (Deep Midnight) · `--bg-secondary: #0A1628` (Arctic Blue)
- `--text-primary: #E8F4F8` (Frost White) · `--text-secondary: rgba(232,244,248,0.72)`
- `--text-success: #00FF87` · `--text-error: #FF4D6D` (cold "frostbite" signal red — Glacier Pink `#FF6EC7` is decorative only, never an error color)
- `--border-default: rgba(0,255,135,0.3)` (signature aurora border) · `--border-error: rgba(255,77,109,0.6)` · `--border-success: rgba(0,255,135,0.6)`
- Extended tokens: `--accent-cyan: #00D4FF`, `--accent-pink: #FF6EC7`, `--surface-snow: #FAFBFC`, `--glass-bg: rgba(10,22,40,0.55)`, `--glow-primary: 0 0 30px rgba(0,255,135,0.1)`, `--aurora-gradient: linear-gradient(180deg, #050B1A 0%, #0A1628 40%, #1A0A3E 70%, #0A1628 100%)`, `--aurora-sweep: linear-gradient(90deg, #00FF87, #00D4FF, #FF6EC7, #7B2FBE)`

**0.3 Signature Visual Effects (all CSS-only)**
- **Aurora wave animation:** apply `--aurora-gradient` with `background-size: 100% 200%` and `@keyframes aurora-wave` shifting `background-position` (`50% 0%` → `50% 100%` → `50% 0%`), `animation: aurora-wave 8s ease-in-out infinite`.
- **Frosted glass panels:** `background: var(--glass-bg)`, `backdrop-filter: blur(10px)`, `border: 1px solid var(--border-default)`, `box-shadow: var(--glow-primary)`.
- **Star field:** pseudo-element with multi-dot `box-shadow` star layers and staggered opacity "twinkle" keyframes.
- **Shimmer:** gradient text on the hero headline via `background-clip: text` over `--aurora-sweep` with animated `background-position`.
- **Cold breath mist:** blurred radial-gradient blobs drifting via slow `transform` keyframes.
- **Glacier reflections:** subtle bottom sheen gradient overlays; **ice crystal texture:** faint low-opacity repeating/conic-gradient overlays.

**0.4 Copy**
Write all user-facing copy in **English**. Invent one coherent fictional Arctic-tech product (e.g., a real-time aurora forecasting / Arctic data platform) and write real, thematic copy for every section. **Lorem ipsum is forbidden.**

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
- **No Inline CSS:** the `style="..."` attribute is forbidden anywhere in the HTML.
- **Class/ID Selectors Only:** every design property, layout rule, and state lives in `style.css`, targeted via classes/IDs.
- **Minimal HTML Modifications:** HTML stays clean, semantic, and styling-agnostic — changing the look requires editing only `style.css`.

**1.2 CSS Variables & Theme Tokens**
- Store **all** tokens from Section 0.2 in `:root`, plus: `--radius-sm: 8px`, `--radius-md: 14px`, `--radius-lg: 24px`, `--shadow-sm`, `--shadow-md` (cold, deep shadows), `--spacing-gap: 1.5rem`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.4,0,0.2,1)`, `--z-dropdown: 1000`, `--z-modal: 2000`, `--z-toast: 3000` (plus `--z-header: 900`).
- **Contrast Pairing:** every dark background token pairs with light text tokens and vice versa — enforced in both themes. Aurora Green buttons must carry Deep Midnight `#050B1A` text.
- **Light Mode Background:** never pure white — the light theme uses Snow `#FAFBFC` / Frost `#E8F4F8`; if a near-white is unavoidable, use `#fefefe`, never `#ffffff`.

**1.3 Mandatory Dark Mode Support**
- **Implementation:** Aurora Night (dark) is the default theme at `:root` and under a `.dark` class; the light variant is a **"Polar Day"** frost theme under a `.light` class (Snow/Frost backgrounds, Arctic Blue/Deep Midnight text, `--glass-bg: rgba(250,251,252,0.65)`). Darken accent text colors in light mode (e.g., aurora green text → `#007A4D`, cyan text → `#0077B8`) to preserve ≥4.5:1 contrast.
- **Theme Switching:** background/text variables swap seamlessly with no HTML restructuring.
- **Persistence:** store choice in `localStorage`, fall back to `prefers-color-scheme` on first visit; provide a visible header toggle (Material Symbols `dark_mode`/`light_mode`) with correct `aria-pressed` and dynamic `aria-label`.
- **Exception clause:** the source specification requested a dark-only experience; the mandatory toggle is retained regardless — Aurora Night remains the canonical default, with Polar Day as the compliant light variant.

**1.4 Flexbox Layout & Mobile-First Alignment**
- Build all layout structures with Flexbox.
- **Default Alignment Rule:** every flex container defaults to `align-items: center` unless an exception is explicitly justified (e.g., `stretch` for equal-height card rows).
- **Mobile-Friendly First:** nav row → hamburger dropdown; 3-column card grids → single column; horizontal step connectors → vertical; hero CTA row → column. No horizontal scrolling at any width; minimum touch target 44×44px.

**1.5 Framework Default & Tailwind CSS Integration**
- Use Tailwind CSS (Play CDN acceptable) for **structural layout utilities only**. All component classes (`.btn`, `.card`, `.input-group`, etc.) are defined in `style.css` with BEM naming and consume the `:root` variables. Never mix in another naming convention.

**1.6 Typography & Icons (Google Fonts Mandatory)**
- **Text:** load **Montserrat** (weights 300;400;600;800) via Google Fonts `<link>` with `preconnect`; bind to `--font-base: 'Montserrat', sans-serif`; base body color `#E8F4F8` via `--text-primary`.
- **Icons:** Google Material Symbols only (e.g., `ac_unit`, `dark_mode`, `light_mode`, `auto_awesome`, `insights`, `travel_explore`, `rocket_launch`, `workspace_premium`, `check_circle`, `expand_more`, `close`, `menu`, `star`, `mail`, `arrow_upward`). **Inline SVGs, local icon files, and emoji icons are forbidden.**

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Button Component Requirements** — all states via CSS classes:
- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px. Variants: `.btn--primary` (Aurora Green fill, midnight text, glow), `.btn--ghost` (frosted glass, aurora border), `.btn--danger` (frostbite red — visually distinct in both themes).
- **Hover:** brightness/glow shift, `cursor: pointer`. **Focus:** distinct ring via `outline`/`box-shadow` using CSS variables. **Active:** `transform: scale(0.97)`.
- **Loading:** disables interaction and double-clicks; CSS spinner or rotating Material icon; button dimensions never change.
- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`. **Success/Error:** transient feedback states driven by `--text-success`/`--text-error`.

**2.2 Card Component Requirements** (Features, Testimonials, Pricing):
- **Default:** flex layout, frosted glass recipe from 0.3, `--radius-md`/`--radius-lg`.
- **Hover:** `transform: translateY(-2px)` plus intensified glow. **Focus-within:** border brightens when a child link/button is focused.
- **Loading (Skeleton):** shimmer-sweep `.skeleton` classes matching final dimensions — demonstrate once on the Testimonials cards during a brief simulated initial load.
- **Empty State:** `.card--empty` fallback layout with a Google Icon and guidance text, defined in the CSS component system.

**2.3 Form & Input Requirements** (Final CTA email capture):
- **States:** empty, focused (aurora ring), filled, valid (success border + `check_circle`), invalid (error border, `--text-error` message, error icon), disabled, read-only.
- **Structure:** `.input-group` flex container wrapping label, input, and a dedicated error container with `aria-live="polite"`. Never communicate state by color alone.

**2.4 Modal / Popup Requirements** (subscription confirmation):
- **States:** opening, open, loading, success/error, closing — all animated via CSS transitions.
- **UX:** centered flex overlay (`align-items: center; justify-content: center`), blurred backdrop, Material `close` icon button (44px), keyboard focus trap, close via `Esc` and overlay click, `role="dialog"` / `aria-modal="true"` / `aria-labelledby`, `z-index: var(--z-modal)`.

**2.5 Section-Specific Requirements**
- **Header:** sticky glass bar, aurora bottom border; mobile hamburger opens a dropdown panel (`--z-dropdown`) with `aria-expanded`, animation, and `Esc`/link-click close.
- **Hero:** full-viewport flex column; layered aurora-wave gradient, star field, drifting mist, glacier sheen; shimmer headline; eyebrow tag; subcopy; primary + ghost CTAs.
- **Features:** 3 equal-height glass cards, glowing icon chips, hover lift.
- **How It Works:** 3 numbered steps (01/02/03) with aurora-glow badges and a gradient connector line on desktop, vertical on mobile.
- **Testimonials:** 3 glass cards; avatars are CSS initial-circles with aurora/cyan/pink gradients (no images); `star` icons in `--primary`; skeleton demo per 2.2.
- **Pricing:** 3 tiers; middle tier `.card--featured` with elevated glow, gradient border, and "Most Popular" badge; monthly/annual billing toggle (`aria-pressed`, animated price update, `aria-live` announcement); feature lists with `check_circle`; tier CTAs smooth-scroll to the Final CTA.
- **FAQ:** 5–6 accordion items; question buttons (`aria-expanded`, `aria-controls`) with rotating `expand_more` chevrons; answers animated via `grid-template-rows: 0fr → 1fr`; one-open-at-a-time; fully keyboard operable.
- **Final CTA:** centered glass panel; email `.input-group` + `.btn--primary`; JS validation → invalid state with `aria-live` error, valid → button loading (~1s) → success modal (2.4) + toast; form resets.
- **Footer:** brand blurb, secondary link columns, Material icon links, dynamic copyright year, back-to-top button with smooth scroll; all links have hover/focus glow and 44px targets.
- **Toast:** bottom-positioned, `--z-toast`, `role="status"` / `aria-live="polite"`, auto-dismiss ~4s, success/error variants, slide-in animation.

---

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by Default:** fluid `clamp()` typography, standard breakpoints, zero horizontal overflow.
- **Smooth Animations:** `transition: var(--transition-normal)` on all state changes; `prefers-reduced-motion` disables aurora-wave, twinkle, mist, shimmer, skeleton sweeps, and entrance reveals.
- **Accessibility (a11y):** ≥4.5:1 contrast in both themes; never color-only state communication; semantic HTML5 (`header`/`nav`/`main`/`section`/`footer`, correct heading order); ARIA on accordion, modal, toggle, toast; logical focus order with a skip-to-content link; full keyboard operability; `aria-live` for all dynamic feedback.
- **Mandatory Visual Feedback:** every click, hover, toggle, and submission triggers a visible state change.
- **Destructive Actions:** `.btn--danger` must be visually distinct in both Aurora Night and Polar Day.

---

## 4. DELIVERABLE & OUTPUT FORMAT

- **File Structure:** separate `index.html`, `style.css`, `script.js`; a single deferred `<script src="script.js" defer>` entry point; no inline `<script>` logic blocks and no inline styles.
- **Naming Convention:** BEM only (`.hero__title`, `.card--featured`, `.faq__item`, `.btn--primary`); Tailwind utilities permitted for layout structure only.
- **No Unrequested Placeholders:** all copy is real, thematic English (Section 0.4); lorem ipsum is prohibited.
- **Completion Standard:** deliver the full page — all 9 sections, every component state, both themes, persistence, and all interactions — functional on the first attempt. Keep all variable names, class names, and file names in English/ASCII.