[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-724-LUMEN-CAVERNS-an-explorable-crystal-cave":3},"# SYSTEM PROMPT — CODING AGENT TASK: \"LUMEN CAVERNS\" GLASSMORPHISM LANDING PAGE\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete, production-quality landing page in a single attempt. Every rule below is mandatory. All user-facing copy must be written in **English**.\n\n**Project:** Landing page for **LUMEN CAVERNS — an explorable crystal cave**.\n**Style:** Glassmorphism · 2020s Digital · Keywords: crystal, cave, glass, translucent, gradient, blur.\n**Palette:** Stone\u002Fink `#07090e`, `#0d1119`, `#151b26` · Crystal accents: cyan `#3fd8e8`, violet `#9a6cf0`, mint `#57e6b0`.\n**Required techniques:** Flexbox, `backdrop-filter`, CSS filters, transitions, transforms, linear\u002Fradial gradients, box-shadows, text-shadows, border-radius.\n**Page order:** Glass Header\u002FNav (required chrome for the theme toggle), Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.\n\n**Creative direction:** Light mode = \"cavern dawn\": a soft luminous backdrop wrapped in drifting aurora gradients (cyan → violet → mint) behind frosted-glass panels. Dark mode = \"deep cave\": near-black stone surfaces (`#07090e` → `#151b26`) pierced by glowing crystal accents. Glass recipe: translucent fill + 1px translucent border + `backdrop-filter: blur() saturate()` + layered soft shadows. Crystal glow: accent-tinted box\u002Ftext shadows. All decorative crystals, shards, and aurora blobs are CSS-only (blurred gradient shapes) — no raster images anywhere on the page.\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 in HTML. Zero 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, semantic, and agnostic of visual styling; retheming the site must require editing `style.css` only, never the markup.\n\n**1.2 CSS Variables (`var(--...)`) & Theme Tokens**\nStore every visual token in `:root` (and theme classes). Minimum required tokens:\n\n* **Colors:** `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.\n* **LUMEN CAVERNS mapping (light mode, default):**\n  * `--bg-primary`: soft cavern-mist base (e.g. `#eef3f9`) — never pure white; use `#fefefe` only where a near-white surface is required.\n  * `--bg-secondary`: translucent glass surface (e.g. `rgba(255, 255, 255, 0.55)`), always paired with dark text.\n  * `--text-primary`: `#07090e` · `--text-secondary`: a muted ink tone (e.g. `#3c4657`) with verified AA contrast.\n  * `--primary`: `#9a6cf0` (crystal violet) · `--secondary`: `#3fd8e8` (crystal cyan) · additional theme tokens: `--crystal-mint: #57e6b0`, `--glass-bg`, `--glass-border`, `--glow-cyan`, `--glow-violet`, `--glow-mint`.\n  * **Accent contrast rule:** The bright crystal accents are decorative-only on light surfaces (glows, borders, gradients, large fills). Whenever an accent appears as text or meaningful UI on a light background, use a darkened \"deep\" variant (e.g. `--primary-deep`, `--secondary-deep`) that passes WCAG AA (4.5:1 body text \u002F 3:1 large text). Verify every pairing.\n  * Gradient CTA buttons must also meet AA — prefer dark ink (`#07090e`) text on the bright crystal gradient, or a deepened gradient under white text.\n* **Contrast Pairing:** Every light background token pairs with dark text, every dark background token pairs with light text — enforced in every theme, not only the default.\n* **Border Radius & Shadows:** `--radius-sm` (chips), `--radius-md` (buttons\u002Finputs), `--radius-lg` (glass cards), `--shadow-sm`, `--shadow-md` (soft glass elevation); glow shadows as theme tokens (e.g. `--glow-violet`).\n* **Spacing & Transitions:** `--spacing-gap` (1.5rem), `--transition-fast` (~150ms), `--transition-normal` (~300ms), `--ease-standard` (e.g. `cubic-bezier(0.4, 0, 0.2, 1)`).\n* **Elevation\u002FStacking:** `--z-dropdown`, `--z-modal`, `--z-toast` — sticky header sits below dropdown; the mobile drawer\u002Fbackdrop uses `--z-modal`; reserve `--z-toast` highest.\n\n**1.3 Mandatory Dark Mode Support**\n* **Implementation:** Define dark tokens (\"deep cave\": `--bg-primary: #07090e`, `--bg-secondary: #151b26` or translucent `rgba(21, 27, 38, 0.6)` glass, `--text-primary: #f2f6fb`, bright crystal accents now usable as text where AA passes) under both `@media (prefers-color-scheme: dark)` and a `.dark` class.\n* **Theme Switching:** Background and text variables must flip seamlessly with zero HTML restructuring.\n* **Persistence:** Store the user's choice in `localStorage`; on first visit fall back to `prefers-color-scheme`. Provide a visible toggle in the header with correct `aria-pressed` and `aria-label` (\"Switch to dark mode\" \u002F \"Switch to light mode\"), swapping a Google icon (`dark_mode` \u002F `light_mode`).\n* **Exception clause:** The source theme marks Light as primary — Light remains the default presentation, but a fully designed Dark Mode is mandatory and must never be omitted.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n* **Flexbox is the layout engine** for every structural container (`display: flex` or Tailwind flex utilities).\n* **Default Alignment Rule:** Every flex container defaults to `align-items: center` (`items-center`) unless an exception is explicitly justified with a CSS comment — e.g. `align-items: stretch` for equal-height card rows (`\u002F* exception: equal-height cards *\u002F`).\n* **Mobile-Friendly First:** Build column stacks for small viewports first, then expand to rows at `md`\u002F`lg` breakpoints via `flex-wrap` and width rules. No horizontal scrolling at any width down to 320px; contain decorative blobs inside `overflow: hidden` sections.\n\n**1.5 Framework Default & Tailwind CSS Integration**\n* Use **Tailwind CSS** (CDN script is acceptable) for structural layout utilities only. All visual theming lives in `style.css` as component classes (`.glass-panel`, `.btn`, `.card`, `.input-group`) driven by `@layer` \u002F `@apply` or plain selectors bound to the CSS variables — never hardcode hex values inside HTML-side utility soup. Every utility class used must map back to tokens or generic reusable class names.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* **Text:** Load **Sora** (display) and **Inter** (body) via Google Fonts `\u003Clink>` tags with preconnect; bind them as `--font-display` and `--font-base`.\n* **Icons:** Use **Google Material Symbols (Rounded)** for every icon (e.g. `diamond`, `explore`, `auto_awesome`, `layers`, `visibility`, `star`, `check_circle`, `expand_more`, `close`, `arrow_forward`, `dark_mode`, `light_mode`, `mail`). Raw inline SVGs and local icon files are explicitly forbidden.\n* Decorative icons are `aria-hidden=\"true\"`; meaningful icons carry accessible labels.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component**\nAll states via CSS classes; variants: `.btn--primary` (crystal-gradient CTA), `.btn--secondary` (glass outline), `.btn--danger` (if ever used).\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` with a minimum touch target of 44×44px.\n* **Hover:** Brightness\u002Fshadow shift plus a subtle crystal glow; `cursor: pointer`.\n* **Focus:** Distinct focus ring built from CSS variables (`outline`\u002F`box-shadow`) for keyboard navigation.\n* **Active\u002FPressed:** `transform: scale(0.97)` feedback.\n* **Loading:** Disables interaction and prevents double-clicks; renders a CSS spinner or animated Google icon without distorting button dimensions (reserve spinner space).\n* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n* **Success\u002FError:** Temporary feedback styles driven by `--text-success` \u002F `--text-error` (used by the newsletter submit flow).\n\n**2.2 Card Component (Glass)**\n* **Default:** Flexbox layout, translucent `--glass-bg` fill with `backdrop-filter`, 1px `--glass-border`, `--radius-lg`, `--shadow-sm`.\n* **Hover:** `transform: translateY(-2px)` plus glow-shadow shift and border brightening.\n* **Focus-within:** Card border highlights when a child link\u002Fbutton receives focus.\n* **Loading (Skeleton):** Define a `.card--skeleton` shimmer animation in CSS (no layout jumps) even if unused on the static page.\n* **Empty State:** Define a `.card--empty` fallback pattern (Google icon + guidance text) in CSS.\n\n**2.3 Form & Input Requirements**\nThe Final CTA contains an email-capture form; account for every state:\n* **States:** Empty, Focused (outline ring from variables), Filled, Valid (success border + `check_circle` icon), Invalid (error border, `--text-error` message + error icon), Disabled, Read-only.\n* **Structure:** `.input-group` flex container wrapping `\u003Clabel>`, `\u003Cinput>`, and a dedicated error-feedback element; the input uses `aria-describedby` pointing at the error container; a `polite` `aria-live` region announces validation\u002Fsubmit status. Use `novalidate` with custom client-side validation; submit shows the button loading state, then a success state — all with visible feedback.\n\n**2.4 Overlay, Accordion & Modal Requirements**\n* **Mobile nav drawer (the page's overlay):** Animated opening\u002Fopen\u002Fclosing via CSS transitions; backdrop overlay click and `Esc` close it; Google icon (`close`) button; keyboard focus is trapped inside while open; trigger carries `aria-expanded` \u002F `aria-controls`; layered at `--z-modal`.\n* **FAQ accordion:** Each item is a `\u003Cbutton>` with `aria-expanded` + `aria-controls`, a rotating `expand_more` chevron, and a panel animated via CSS transition (e.g. `grid-template-rows: 0fr → 1fr` or `max-height`); fully keyboard operable; never color-only state.\n* **If any modal is added (not required):** It must cover opening, open, loading, success\u002Ferror, and closing states, all animated, in a centered flex container with backdrop, icon close button, focus trap, and `Esc`\u002Foverlay dismissal.\n\n**2.5 Landing Page Section Requirements**\n* **Header\u002FNav (chrome):** Skip-to-content link; sticky glass bar (`backdrop-filter` blur, translucent border-bottom); gradient-text wordmark \"LUMEN CAVERNS\"; anchor links (Features, How It Works, Testimonials, Pricing, FAQ) with hover feedback; theme toggle (per 1.3); compact CTA; on mobile, a `menu` icon opens the overlay drawer (per 2.4).\n* **Hero:** Full-viewport flex column, centered; decorative `aria-hidden` aurora blobs (radial gradients, heavy blur, slow float animation) and CSS-only crystal shards (gradient + `clip-path` diamonds, `pointer-events: none`); a glass panel containing an eyebrow chip, `h1` with one gradient-clipped accent word and a subtle text-shadow glow, supporting copy, and two CTAs — `.btn--primary` and a `.btn--secondary` anchor that smooth-scrolls to `#pricing`; a scroll-cue chevron animated (disabled under reduced motion).\n* **Features (3 cards):** Section eyebrow + `h2` + intro; three equal-height glass `.card`s (flex row wrapping to column on mobile); each with a Material Symbol icon inside a gradient glass chip, `h3`, concise copy; hover lift + glow; include a \"Learn more\" ghost link per card to exercise `:focus-within`.\n* **How It Works (3 steps):** Three numbered glass cards (01\u002F02\u002F03 with gradient-clipped numbers), step icon, title, description; a gradient connector line between steps on desktop (pseudo-element) that becomes a vertical line on mobile.\n* **Testimonials (3 cards):** Glass cards with CSS-only avatars (gradient circle + initials), a 5-star rating built from Material `star` glyphs with an `aria-label` (\"Rated 5 out of 5 stars\"), quote, fictional name and role; subtle hover elevation.\n* **Pricing (3 tiers):** Three glass cards in a flex row (column on mobile); the middle tier uses `.card--featured` — \"Most popular\" badge chip, gradient border treatment, stronger glow, slight lift on desktop; each card: tier name, monthly price, blurb, feature list with `check_circle` icons, CTA (featured → `.btn--primary`, others → `.btn--secondary`) that smooth-scrolls to the Final CTA form.\n* **FAQ:** Centered single column (max-width ~720px), 5–6 realistic on-theme Q&A pairs, accordion behavior per 2.4.\n* **Final CTA (`id=\"final-cta\"`):** Full-width glass panel over a dense aurora gradient; `h2`, supporting copy, and the inline `.input-group` email form with full validation per 2.3, plus a secondary link back to Pricing.\n* **Footer with secondary links:** Flex-wrap columns: brand block (wordmark + tagline + social links styled as glass chips with `aria-label`s — text labels or generic Material glyphs only, no SVG brand icons); link groups (Product → in-page anchors; Company, Resources, Legal → `href=\"#\"` acceptable only for targets that genuinely don't exist); bottom row with copyright and a \"Back to top\" link.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by Default:** Fluid `clamp()` typography and flex wrapping from 320px upward; zero horizontal overflow anywhere.\n* **Smooth Animations:** Every state change transitions with `var(--transition-normal)`; under `prefers-reduced-motion: reduce`, disable float\u002Ftransform animations and smooth scrolling, keeping only essential opacity\u002Fcolor fades.\n* **Accessibility (a11y):** AA contrast in both Light and Dark modes (verify every accent pairing); never rely on color alone (error = border + icon + text; accordion = chevron + `aria-expanded`; loading = spinner + text); semantic HTML5 landmarks (`header`, `nav`, `main`, `section`, `footer`) with one `h1` and a logical heading order; correct ARIA on the toggle, drawer, accordion, and form; logical DOM\u002Ffocus order; full keyboard operability; `aria-live` for all dynamic feedback.\n* **Mandatory Visual Feedback:** Every click, hover, and submission triggers a visible state change — nav hovers, button states, card hover, chevron rotation, focus rings, form states.\n* **Destructive Actions:** Not expected on this page, but any `.btn--danger` must be visually distinct in both Light and Dark themes.\n* **Glass Fallback:** Provide `@supports not (backdrop-filter: blur(1px))` fallbacks (higher background alpha for readability) and include the `-webkit-backdrop-filter` prefix.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n* **File Structure:** Separate `index.html`, `style.css`, and `script.js`. A single `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` reference is the only script tag allowed — no other inline `\u003Cscript>` blocks, no inline styles anywhere.\n* **script.js Scope (nothing else, no libraries):** Theme init\u002Ftoggle\u002Fpersistence; mobile drawer open\u002Fclose with focus trap + `Esc`; FAQ accordion toggling; newsletter validation and submit states; smooth anchor scrolling (respecting reduced motion); optional IntersectionObserver reveal-on-scroll adding an `.is-visible` class.\n* **Naming Convention:** One consistent convention across the entire deliverable — **BEM** (`.card`, `.card--featured`, `card__title`, `.btn--primary`, `.input-group__error`). Never mix conventions.\n* **Copy:** Write original, concise, evocative English copy presenting LUMEN CAVERNS as an immersive explorable crystal-cave experience. **No lorem ipsum.** Fictional testimonial names\u002Froles are allowed; footer meta\u002Flegal links may use `href=\"#\"` only because their targets were genuinely unspecified.\n* **Completeness:** Deliver the full page in one attempt — all sections built, both themes functional, forms validating, every button and link wired to a real anchor or state change. Before finishing, verify: no horizontal scroll at 320px, full keyboard pass, and contrast pass in both Light and Dark modes.\n",1791954991681]