LUMEN CAVERNS demo
LUMEN CAVERNS

A translucent glassmorphism aesthetic evoking glowing crystal caverns, with frosted blur layers, luminous accents, and ethereal depth.
Category: Glass & Soft UI
Era: 2020s Modern
Prompt: 18.3 KB · 2485 words
# SYSTEM PROMPT — BUILD THE "LUMEN CAVERNS" GLASSMORPHISM LANDING PAGE

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build the complete, production-quality landing page specified below on the first attempt. Every rule in this document is mandatory. Where a value is given, use it; where copy direction is given, write finished, realistic copy in that voice.

---

## 0. PROJECT BRIEF & DESIGN DIRECTION

**Product:** "LUMEN CAVERNS — an explorable crystal cave." A landing page marketing a fictional guided, explorable crystal-cave experience: bioluminescent chambers, expert-led expeditions, and real-time cave mapping.

**Style:** Glassmorphism, 2020s Digital. Keywords: crystal, cave, glass, translucent, gradient, blur.

**Visual language:**
- Frosted-glass panels (`backdrop-filter: blur`) floating over layered gradient "cave light" backgrounds.
- Ambient, heavily blurred color orbs (cyan / violet / mint) behind the glass, built with pure CSS.
- Crystal-gradient accents, soft glows, generous border radii, subtle text-shadow glow on display headings in dark mode.
- **Light mode (DEFAULT)** = "cave entrance at dawn": misty, pale, airy glass. **Dark mode (MANDATORY)** = "deep cavern": near-black backgrounds with glowing crystals.

**Mandatory palette:**
- Deep cave tones: `#07090e`, `#0d1119`, `#151b26`
- Crystal accents: `#3fd8e8` (glacial cyan), `#9a6cf0` (amethyst violet), `#57e6b0` (luminescent mint)

**Required techniques:** Flexbox, `backdrop-filter`, CSS filters (`filter: blur()`), transitions, transforms, gradients, box shadows, text shadows, border radius.

**Page structure (in order):** sticky glass header/nav → Hero → Features (3 cards) → How It Works (3 steps) → Testimonials → Pricing (3 tiers) → FAQ (accordion) → Final CTA (email capture) → Footer with secondary links.

**Copy:** All user-facing copy in English, on-theme, specific, and realistic (expedition details, safety notes, pricing rationale). **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:** All design properties, layout rules, and states are targeted via class or ID selectors in `style.css`.
- **Minimal HTML Modifications:** HTML must remain clean, semantic (header/nav/main/section/footer, h1–h3 hierarchy), and agnostic of visual styling. Reskinning the page must require editing only `style.css`.

### 1.2 CSS Variables & Theme Tokens
Store every visual token in CSS variables. Use this mandated foundation (you may extend it, never remove from it):

**Shared tokens (both themes):**
```css
--font-display: "Space Grotesk", sans-serif;
--font-base: "Inter", sans-serif;
--accent-cyan: #3fd8e8;  --accent-violet: #9a6cf0;  --accent-mint: #57e6b0;
--gradient-crystal: linear-gradient(135deg, #3fd8e8, #9a6cf0 55%, #57e6b0);
--text-on-gradient: #07090e;
--radius-sm: 10px; --radius-md: 18px; --radius-lg: 28px;
--spacing-gap: 1.5rem;
--transition-fast: 150ms; --transition-normal: 300ms;
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
--z-dropdown: 100; --z-modal: 200; --z-toast: 300;
--glass-blur: 18px;
```

**Light theme (`:root` and `.light`):**
```css
--bg-primary: #edf2f8; --bg-secondary: #e3eaf3; --bg-surface: #f6f9fc;
--text-primary: #07090e; --text-secondary: #46505f;
--primary: #151b26; --secondary: #6d43d8;
--text-success: #0e7a52; --text-error: #b3261e;
--border-default: rgba(21, 27, 38, 0.14);
--border-error: #b3261e; --border-success: #0e7a52;
--glass-bg: rgba(254, 254, 254, 0.55);
--glass-border: rgba(21, 27, 38, 0.12);
--glass-highlight: rgba(255, 255, 255, 0.65);
--accent-cyan-text: #0b7c8c; --accent-violet-text: #6d43d8; --accent-mint-text: #0d7d59;
```

**Dark theme (`.dark`, and `:root:not(.light)` inside `@media (prefers-color-scheme: dark)`):**
```css
--bg-primary: #07090e; --bg-secondary: #0d1119; --bg-surface: #151b26;
--text-primary: #edf2f8; --text-secondary: #9aa8ba;
--primary: #3fd8e8; --secondary: #9a6cf0;
--text-success: #57e6b0; --text-error: #ff8a80;
--border-default: rgba(237, 242, 248, 0.14);
--border-error: #ff8a80; --border-success: #57e6b0;
--glass-bg: rgba(21, 27, 38, 0.55);
--glass-border: rgba(237, 242, 248, 0.14);
--glass-highlight: rgba(255, 255, 255, 0.06);
--accent-cyan-text: #3fd8e8; --accent-violet-text: #9a6cf0; --accent-mint-text: #57e6b0;
```

- **Contrast Pairing:** Light background tokens pair exclusively with dark text tokens and vice versa, in every theme. Body text must reach WCAG AA (≥ 4.5:1); large text ≥ 3:1. Because glass is translucent, verify contrast **with the glass layer composited over the actual background** — if it fails, raise `--glass-bg` alpha until it passes.
- **Light Mode Background:** Never pure white. The misty `#edf2f8` family is the base; use `#fefefe` (never `#ffffff`) where a near-white is required.
- **Accent usage rule:** Raw accent tokens (`--accent-*`) are for gradients, borders, glows, and decorative fills. For accent-colored **text**, always use the `--accent-*-text` variants, which are contrast-safe per theme.
- **Shadows:** Define `--shadow-sm` / `--shadow-md` per theme (soft and diffuse in light; deeper + tinted glow in dark, e.g., `--glow-cyan: 0 0 24px rgba(63,216,232,0.35)`).

### 1.3 Mandatory Dark Mode Support
- **Implementation:** Dark tokens live under both the `.dark` class selector and `@media (prefers-color-scheme: dark) { :root:not(.light) }`, exactly as specified in 1.2, so system-preference users get correct colors before JS runs (no flash of wrong theme).
- **Theme Switching:** Backgrounds, text, borders, and glass surfaces must flip seamlessly via variables only — no HTML restructuring, no duplicate markup.
- **Persistence:** On load, `script.js` must immediately (first statement, before any other logic) read `localStorage.getItem("lumen-theme")`; if absent, fall back to `matchMedia("(prefers-color-scheme: dark)")`; then set `.light` or `.dark` on `<html>`. The toggle persists the choice on every change.
- **Toggle Control:** A visible button in the sticky header showing a Material Symbols sun/moon icon. It must expose `aria-pressed` (true when dark mode is active) and a dynamic `aria-label` ("Switch to dark theme" / "Switch to light theme"), and swap its icon per state.

### 1.4 Flexbox Layout & Mobile-First Alignment
- **Default Alignment Rule:** Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment (e.g., stretch for equal-height card columns).
- **Mobile-Friendly First:** Author all layouts mobile-first; multi-column rows (feature grid, steps, pricing, testimonials, footer columns) collapse to a single column on small viewports. **Horizontal scrolling is forbidden at any width.**
- All interactive targets ≥ 44×44px.

### 1.5 Framework: Clean Custom CSS (No Framework)
- Use hand-authored, token-driven custom CSS only — no Tailwind, no Bootstrap, no CSS framework, no build step. This is the sanctioned "clean custom CSS" branch: the deliverable requires a fully self-contained `style.css`.
- Every class must map back to CSS variables or generic reusable component names (`.btn`, `.card`, `.input-group`). Do not mix utility-style classes with component classes.

### 1.6 Typography & Icons (Google Fonts Mandatory)
- **Text:** Load **Space Grotesk** (display/headings) and **Inter** (body) from Google Fonts via `<link>` with `preconnect`. Bind them to `--font-display` / `--font-base`. Use fluid `clamp()` sizing for headings and body.
- **Icons:** Use **Google Material Symbols (Rounded style)** loaded from Google Fonts. **Raw inline SVGs, local icon files, and emoji-as-icons are forbidden.** Every icon is `aria-hidden="true"` and always paired with a text or accessible label.
- Apply a subtle `text-shadow` glow to display headings in dark mode only; it must never reduce legibility.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

### 2.1 Button Component (`.btn`)
- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px, `--radius-md`, `--transition-fast` on all animated properties.
- **Variants:** `.btn--primary` (background: `--gradient-crystal`; color: `--text-on-gradient`), `.btn--secondary` (glass: `--glass-bg` + `backdrop-filter` + `--glass-border`), `.btn--ghost` (transparent, bordered), `.btn--danger` (defined and visually distinct in both themes, even if unused on this page).
- **Hover:** Brightness/shadow shift plus a crystal glow (`--glow-*`); `cursor: pointer`.
- **Focus:** Distinct `:focus-visible` ring built from tokens (`outline: 2px solid var(--primary); outline-offset: 2px`) — never remove focus styles.
- **Active/Pressed:** `transform: scale(0.97)` feedback.
- **Loading (`.is-loading`):** Disables interaction (`pointer-events: none`), prevents double-clicks, sets `aria-busy="true"`, and shows a CSS-animated spinner (rotating Material Symbols `sync` icon or CSS border spinner) **without changing button dimensions** — hide the label via `visibility`, not `display`.
- **Disabled:** `opacity: 0.5`, greyscale filter, `cursor: not-allowed`, removed from tab order semantics via `disabled`.
- **Success/Error (`.is-success` / `.is-error`):** Temporary feedback states driven by `--text-success` / `--text-error` (icon + label change, e.g., check + "Confirmed" for ~2.5s, then reset).

### 2.2 Card Component (`.card`)
- **Default:** Flexible Flexbox layout, `background: var(--glass-bg)`, `backdrop-filter: blur(var(--glass-blur))` (with `-webkit-` prefix), `border: 1px solid var(--glass-border)`, `border-radius: var(--radius-lg)`, soft `--shadow-sm`, inner top-edge highlight via `--glass-highlight`.
- **Hover:** `transform: translateY(-2px)` plus shadow/glow shift and a subtle `filter: saturate(1.05)`; `transition: var(--transition-normal) var(--ease-standard)`.
- **Focus-within:** Card border brightens (crystal accent) when any child link/button receives focus.
- **Loading (Skeleton):** Define `.card--skeleton` with a shimmer `@keyframes` animation (gradient sweep) sized to match real cards, preventing layout jumps. Include it in the stylesheet as part of the card system.
- **Empty State:** Define a `.card--empty` fallback pattern — a Google Material Symbol icon, short guidance text, centered flex layout — available for any dynamic content region.
- **Variants to build:** `.card--feature`, `.card--step`, `.card--testimonial`, `.card--pricing`, `.card--pricing--featured`.

### 2.3 Form & Input Requirements (`.input-group`)
- **Structure:** Flex column wrapping a `<label>` (with `for`), the input, and a dedicated error-feedback container with reserved `min-height` so messages never shift layout.
- **States (all styled via classes):** Empty, Focused (crystal outline ring), Filled, Valid (`--border-success` + check icon), Invalid (`--border-error`, error icon, error text in `--text-error`, `aria-invalid="true"`, message linked via `aria-describedby`), Disabled, Read-only.
- **Feedback:** Validation messages render in an `aria-live="polite"` region. Never communicate errors by color alone — always icon + text.
- Used by the Final CTA email capture (`type="email"`, `required`, `autocomplete="email"`, `novalidate` on the form with custom JS validation).

### 2.4 FAQ Accordion (Interactive Disclosure)
- **Pattern:** Each item is a `<button>` (full-width, flex, `align-items: center`, chevron Material icon) with `aria-expanded` and `aria-controls`, controlling a panel with `role="region"` and matching `id`.
- **States:** Collapsed / Expanded; chevron rotates 180°; panel opens/closes animated via CSS (`grid-template-rows: 0fr → 1fr` technique or equivalent) using `--transition-normal`.
- **A11y:** Fully keyboard operable (native buttons), visible `:focus-visible` ring, `prefers-reduced-motion` collapses the animation to an instant state change. Optionally enforce one-open-at-a-time; if so, keep all `aria-expanded` values truthful.

---

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by Default:** Fluid `clamp()` typography, responsive grids (3 → 1 columns), no horizontal overflow, `scroll-margin-top` on all anchored sections so the sticky header never covers headings, `scroll-behavior: smooth` (disabled under reduced motion).
- **Smooth Animations:** Every state change transitions with `var(--transition-normal) var(--ease-standard)`. Under `@media (prefers-reduced-motion: reduce)`, disable transforms, float animations, blur motion, and smooth scroll; keep only essential opacity changes.
- **Accessibility (a11y):** AA contrast in **both** modes (including text on translucent glass — see 1.2). Never rely on color alone for state. Semantic HTML5 landmarks, a skip-to-content link as the first focusable element, logical DOM/focus order, full keyboard operability for the menu, accordion, toggle, and form, and `aria-live` regions for all dynamic feedback.
- **Mandatory Visual Feedback:** Every click, hover, focus, and submission produces a visible state change (nav links, buttons, cards, accordion, pricing CTAs, form).
- **Destructive Actions:** `.btn--danger` must be visually distinct in both light and dark themes (define it even though this page may not use it).

---

## 4. DELIVERABLE & OUTPUT FORMAT

- **File Structure:** Exactly three files — `index.html`, `style.css`, `script.js`. The only script reference is a single `<script src="script.js" defer></script>`; no inline JavaScript, no other script tags.
- **Naming Convention:** BEM exclusively (`.card`, `.card--pricing`, `.card__title`, `.nav__link`). Never mix conventions.
- **No Unrequested Placeholders:** The user supplied no copy, so write complete, finished, on-theme English copy for every section. Lorem ipsum, "TODO", and dummy links (`href="#"` without purpose) are forbidden — every link points to a real anchor on the page or a plausible external `https://` URL.
- **Quality Bar:** No console errors; works offline except the Google Fonts/Icons CDNs; CSS organized with section comments mirroring the page structure; JS in `'use strict'` with small named functions.

---

## 5. PAGE BLUEPRINT — SECTION-BY-SECTION REQUIREMENTS

### 5.0 Global Chrome
- Skip link ("Skip to main content") → sticky glass header: logo (Material `diamond` icon + "LUMEN CAVERNS" wordmark), anchor nav (Features, How It Works, Testimonials, Pricing, FAQ), theme toggle (per 1.3). On mobile, nav links collapse behind a menu button (`aria-expanded`, `aria-controls`) opening a glass dropdown panel at `--z-dropdown` — closable via `Esc`, outside click, and link selection.
- Fixed, pure-CSS ambient background: layered gradient wash plus 3–4 blurred orbs (`filter: blur(70px+)`) in cyan/violet/mint — airy in light mode, glowing in dark. All decorative layers `aria-hidden="true"`.

### 5.1 Hero
- Eyebrow glass pill (Material `auto_awesome` + "Now booking · 2025 expedition season"), H1 with gradient-clipped accent words (light mode must use the `--accent-*-text` darkened stops to hold AA contrast), subheadline, dual CTAs: `.btn--primary` "Begin the Descent" → `#pricing`, `.btn--secondary` "Explore the Caverns" → `#features`.
- CSS-crafted crystal visual: layered, rotated gradient shards with glow — no images.
- Stats row: three mini glass stats ("12 mapped chambers", "480 m deepest gallery", "4.9 / 5 explorer rating"). Animated scroll cue (chevron icon, `aria-hidden`).

### 5.2 Features — 3 `.card--feature`
1. "Bioluminescent Chambers" (`auto_awesome`) — galleries lit by living crystal that responds to your presence.
2. "Guided Expeditions" (`explore`) — certified cave guides, routes from first-timer to deep-gallery explorer, max 8 per group.
3. "EchoMap Navigation" (`map`) — real-time 3D cave mapping on your expedition band.
Each card: gradient glass icon tile, title, copy, and a "Learn more" text link (exercises focus-within).

### 5.3 How It Works — 3 `.card--step`
Numbered 01/02/03 badges, icons (`alt_route`, `tour`, `edit_map`): "Choose Your Route" → "Descend with a Guide" → "Chart Your Findings". Connecting gradient line: horizontal on desktop, vertical on mobile.

### 5.4 Testimonials — 3 `.card--testimonial`
Material `format_quote` icon, quote, 5-star rating (Material `star` icons, group labeled via `aria-label="Rated 5 out of 5"`), CSS initials avatar with crystal gradient, fictional name + role.

### 5.5 Pricing — 3 `.card--pricing`
"Wanderer" $29 / "Explorer" $59 (featured: "Most Popular" badge, gradient border + glow, `.btn--primary`) / "Cartographer" $99 — per expedition, consistent across tiers. Feature lists with Material `check` icons; non-featured CTAs use `.btn--secondary`. Reassurance microcopy beneath the grid.

### 5.6 FAQ — 5–6 accordion items (per 2.4)
Cover: difficulty/fitness, safety measures, what to bring, accessibility, photography policy, rescheduling/refunds.

### 5.7 Final CTA
Full-width glass panel over intensified glow: H2 "The caverns are waiting.", supporting line, email capture `.input-group` (per 2.3) with `.btn--primary` "Reserve Your Descent". Submit simulates async: loading (~1.2s) → success (button `.is-success` + inline `aria-live` confirmation) or error state for invalid email. Microcopy: "We'll email your expedition guide. No spam — just crystals."

### 5.8 Footer
Brand block (logo + tagline), three secondary link groups (Explore / Company / Support), social icon links (Material Symbols with `aria-label`s), dynamic copyright year, back-to-top link. Links use `--text-secondary` with visible hover/focus states at AA contrast.

### 5.9 `script.js` Scope
Theme manager (per 1.3), mobile menu controller, accordion controller, email form validation + simulated submit with loading/success/error + `aria-live`, footer year. Nothing else — all other behavior is pure CSS.

---

## 6. DEFINITION OF DONE — ACCEPTANCE CHECKLIST

- [ ] Zero inline `style` attributes; zero inline scripts beyond the single deferred `script.js`.
- [ ] All mandated tokens present; light default; dark mode complete, toggleable, persisted, `aria-pressed`/`aria-label` correct.
- [ ] Every flex container defaults to `align-items: center` (or a commented justification).
- [ ] Buttons: all 7 states implemented; cards: hover/focus-within/skeleton/empty defined; form: all 7 input states implemented.
- [ ] No horizontal scroll from 320px up; all grids collapse to one column on mobile.
- [ ] AA contrast verified in both modes, including text over glass; no color-only state communication.
- [ ] `prefers-reduced-motion` respected everywhere.
- [ ] Google Fonts + Material Symbols only; no inline SVGs, no local icon files, no lorem ipsum, no dead links.
- [ ] Full keyboard operability: skip link, menu, toggle, accordion, form, all CTAs.