[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-608-Underwater-Aquatico":3},"# SYSTEM PROMPT — BUILD THE \"UNDERWATER \u002F AQUATIC\" INFOGRAPHIC LANDING PAGE\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete, production-ready landing page on the first attempt — no stubs, no TODOs, no placeholder sections. The page must be fully functional, responsive, accessible, and polished in **both Light and Dark modes**.\n\n## 1. PROJECT BRIEF & THEME DIRECTION\n\n**1.1 Theme:** \"Underwater \u002F Aquatic\" — an infographic-style landing page. Mood: calming, peaceful, exploratory, marine, deep-sea. The page should read as a descent through ocean depth zones: sunlit shallows at the top, gradually deepening toward the footer.\n\n**1.2 Required Sections (in order):**\n1. Sticky Header\u002FNav\n2. Hero\n3. Features (3 cards)\n4. How It Works (3 steps)\n5. Testimonials\n6. Pricing (3 tiers)\n7. FAQ (accordion)\n8. Final CTA\n9. Footer with secondary links\n\n**1.3 Copy Language:** ALL user-facing copy must be written in **English**. Invent one coherent fictional product (e.g., a marine-education \u002F ocean-exploration platform) and write real, themed marketing copy for it. Do not use lorem ipsum anywhere real copy is expected; `#` hrefs are permitted only for genuinely unspecified targets such as social URLs.\n\n**1.4 Color Palette (every value must be bound to a CSS variable — never hard-code hex values in component rules):**\n- Primary: Light Aqua `#E0F6FF`, Deep Navy `#0B3C5D`, Ocean Blue `#006994`, Cerulean `#0277BD`\n- Secondary: Dark Blue `#01579B`, Teal `#004D73`, Steel Blue `#005885`, Cobalt `#0D47A1`\n\n**1.5 Visual Effects to implement:** cool blue illumination, underwater light shafts, bubble floating animations, wave motion, fish swimming paths, coral sway, depth layering with blur for distance.\n\n**1.6 Infographic Character:** numbered steps, a stat row in the hero, connected flow lines between steps, depth-zone visual markers — information presented visually, not as plain text blocks.\n\n## 2. STRICT RULES & ARCHITECTURE\n\n**2.1 CSS-First Architecture & Zero Inline CSS**\n- All styling lives in `style.css`. **Forbidden:** the `style=\"...\"` attribute anywhere in the HTML.\n- Target all design properties, layout rules, and states via class\u002FID selectors only.\n- HTML remains semantic and style-agnostic: re-theming the site must require editing only the CSS file, never the markup.\n\n**2.2 CSS Variables & Theme Tokens**\nDefine all tokens in `:root` (Light) and override in `.dark` (mirrored under `@media (prefers-color-scheme: dark)` for users with no stored preference):\n\n```css\n:root { \u002F* Light mode — \"Sunlit Shallows\" *\u002F\n  --primary: #006994;          \u002F* Ocean Blue — buttons, links, accents *\u002F\n  --secondary: #0277BD;        \u002F* Cerulean — secondary accents *\u002F\n  --bg-primary: #E0F6FF;       \u002F* Light Aqua page background *\u002F\n  --bg-secondary: #fefefe;     \u002F* near-white card surfaces *\u002F\n  --text-primary: #0B3C5D;     \u002F* Deep Navy — pairs with light backgrounds *\u002F\n  --text-secondary: #01579B;   \u002F* Dark Blue *\u002F\n  --text-success: #0B7A4B;  --text-error: #C62828;\n  --border-default: rgba(0,105,148,0.25);\n  --border-success: #0B7A4B; --border-error: #C62828;\n  --accent-teal: #004D73; --accent-steel: #005885; --accent-cobalt: #0D47A1;\n  --font-heading: 'Quicksand', sans-serif; --font-base: 'Inter', sans-serif;\n  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 24px;\n  --shadow-sm \u002F --shadow-md: theme-aware, defined as variables;\n  --spacing-gap: 1.5rem;\n  --transition-fast: 150ms; --transition-normal: 300ms;\n  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);\n  --z-dropdown: 100; --z-modal: 1000; --z-toast: 1100;\n}\n.dark { \u002F* Dark mode — \"Deep Sea\" *\u002F\n  --bg-primary: #0B3C5D;       \u002F* Deep Navy *\u002F\n  --bg-secondary: #004D73;     \u002F* Teal card surfaces *\u002F\n  --text-primary: #E0F6FF;     \u002F* Light Aqua — pairs with dark backgrounds *\u002F\n  --text-secondary: #A9D6EA;\n  --primary: #4FA8DC;          \u002F* brightened Cerulean for AA contrast on dark *\u002F\n  --secondary: #63B8E8;\n  --text-success: #4CAF8E;  --text-error: #EF9A9A;\n  --border-default: rgba(224,246,255,0.2);\n  \u002F* shadows darken; all other structural tokens persist *\u002F\n}\n```\n\n- **Contrast pairing (mandatory in BOTH themes):** every light background token pairs with a dark text token, and every dark background token pairs with a light text token. Verify WCAG AA — ≥ 4.5:1 for body text, ≥ 3:1 for large text and UI components — in Light AND Dark mode.\n- Never default to pure white `#ffffff`; use `#fefefe` where a near-white is required.\n- Dark-mode shadows must be deeper (e.g., `rgba(0,0,0,0.4)`) — define them as variables so they flip with the theme.\n\n**2.3 Mandatory Dark Mode**\n- Provide dark tokens under BOTH a `.dark` class and `@media (prefers-color-scheme: dark)`; switching themes must never require HTML restructuring.\n- Persistence: store the user's choice in `localStorage`; on first visit fall back to `prefers-color-scheme`.\n- Visible toggle control in the header using Material Symbols (`light_mode` \u002F `dark_mode`) with correct `aria-pressed` and `aria-label` (\"Switch to dark theme\" \u002F \"Switch to light theme\").\n- **Exception to the inline-script rule:** a minimal theme-bootstrap snippet in `\u003Chead>` is the single permitted inline script, required to prevent a light-mode flash for dark-mode users.\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 explicitly justified exception exists (e.g., top-aligned step columns).\n- Mobile-first: rows collapse to columns below 768px; zero horizontal scrolling at any viewport width (320px+). All decorative animated layers must live inside `overflow: hidden` containers.\n\n**2.5 Framework Default**\n- Use Tailwind CSS (CDN) OR clean custom CSS organized with `@layer` \u002F `@apply` semantics — pick one and stay consistent. All reusable components must exist as semantic classes (`.btn`, `.card`, `.input-group`) bound to the CSS variables above; utility classes must never hard-code hex values.\n\n**2.6 Typography & Icons (Google Fonts Mandatory)**\n- Load via Google Fonts `\u003Clink>`: **Quicksand** (headings, 500\u002F700) and **Inter** (body, 400\u002F500\u002F600), bound to `--font-heading` \u002F `--font-base`.\n- All functional icons: **Google Material Symbols (Rounded style** — suits the soft aquatic aesthetic). Forbidden: raw inline SVGs or local icon files for icons.\n- **Explicit exception (theme requirement):** purely decorative marine art — sine-curve wave dividers, fish, coral, seaweed silhouettes, bubbles — MAY be inline SVG or CSS-drawn shapes, because the theme spec explicitly demands SVG marine elements. These must be `aria-hidden=\"true\"`, `pointer-events: none`, and contain no interactive content. Functional UI icons must still be Material Symbols. (Note: Material Symbols has no fish glyph — render decorative fish under this exception.)\n\n## 3. UNDERWATER VISUAL SYSTEM\n\n**3.1 Depth Layering (signature of this theme)**\n- Compose scenes in stacked layers on a documented z-scale: background gradient (deepest) → distant marine silhouettes (`filter: blur(3px)` + reduced opacity for distance) → mid-ground coral\u002Fplants → content → foreground bubbles.\n- Interactive layers (dropdown, modal, toast) must use `--z-dropdown` \u002F `--z-modal` \u002F `--z-toast` so decorative art never overlaps functional UI.\n\n**3.2 Signature Animations (CSS keyframes; animate only `transform` and `opacity`)**\n- `bubble-rise`: CSS radial-gradient bubbles drift upward with a gentle horizontal sway; staggered sizes, delays, and durations.\n- `wave-drift`: two overlapping wave layers translating horizontally at different speeds (parallax) along section dividers.\n- `fish-swim`: decorative fish traverse horizontally with a subtle vertical bob.\n- `coral-sway`: gentle ±2° rotation, `transform-origin: bottom center`.\n- `light-rays`: cool blue illumination — a low-opacity gradient overlay slowly shifting position\u002Fopacity to simulate underwater light shafts.\n- Hero background: `linear-gradient(180deg, #E0F6FF, #006994)` in Light; a Deep Navy-to-abyss gradient (e.g., `#0B3C5D → #012A40`) in Dark.\n\n**3.3 Wave Dividers:** sine-curve SVG (or CSS-equivalent) dividers between major sections, colored via `currentColor` or CSS variables so they flip correctly with the theme.\n\n## 4. COMPONENT DESIGN SPECIFICATIONS\n\n**4.1 Buttons — every state as a CSS class, never inline:**\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px; `border-radius: var(--radius-md)`.\n- **Variants:** `.btn--primary` (filled Ocean Blue), `.btn--secondary` (outlined Cerulean), `.btn--ghost`, `.btn--danger` (visually distinct in BOTH themes).\n- **Hover:** brightness\u002Fshadow shift with `cursor: pointer`.\n- **Focus:** distinct `:focus-visible` ring built from CSS variables for keyboard navigation.\n- **Active:** `transform: scale(0.97)` click feedback.\n- **Loading (`.is-loading`):** disables interaction, prevents double-clicks, renders a CSS spinner that does not change button dimensions; set `aria-busy=\"true\"`.\n- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n- **Success\u002FError (`.is-success` \u002F `.is-error`):** temporary feedback tinted by `--text-success` \u002F `--text-error`.\n\n**4.2 Cards**\n- **Default:** flexible Flexbox layout, `--bg-secondary` surface, `--border-default`, `--shadow-sm`, `--radius-lg`.\n- **Hover:** `transform: translateY(-2px)` + elevation shift to `--shadow-md`.\n- **Focus-within:** border highlights when a child link\u002Fbutton receives focus.\n- **Loading (skeleton):** `.skeleton` shimmer animation with fixed heights to prevent layout jumps.\n- **Empty state:** centered Google Icon + guidance text pattern defined in CSS.\n\n**4.3 Forms & Inputs** (newsletter signup in the footer; demo form inside the modal)\n- **Structure:** `.input-group` flex container wrapping a `\u003Clabel>`, the input field, and a dedicated error feedback container.\n- **States:** empty, `:focus` (outline ring via variables), filled, valid (success border + check icon), invalid (error border, error text, error icon — never color alone), disabled, read-only.\n- **Feedback:** errors and confirmations announced via an `aria-live=\"polite\"` region.\n\n**4.4 Modal \u002F Popup** (opened from Pricing CTAs)\n- **States:** opening, open, loading, success\u002Ferror, closing — all animated via CSS transitions.\n- **UX:** centered flex overlay (`align-items: center`), backdrop, Material Symbol `close` button, keyboard focus trapping, close via `Esc` and overlay click, `role=\"dialog\"` + `aria-modal=\"true\"`, `z-index: var(--z-modal)`.\n\n## 5. SECTION-BY-SECTION BUILD REQUIREMENTS\n\n**5.1 Header (sticky):** logo (`waves` icon + wordmark), anchor links to every section, theme toggle, mobile hamburger (`aria-expanded`, keyboard operable, animated panel). Gains a translucent backdrop on scroll.\n\n**5.2 Hero:** full-viewport underwater scene — layered gradient, light rays, distant blurred fish, rising bubbles, coral at the base; headline + subheadline + primary CTA (\"Start Exploring\") + secondary CTA; an infographic stat row (3 themed stats); wave divider at the bottom flowing into Features.\n\n**5.3 Features — 3 cards:** each with a themed Material Symbol icon (e.g., `scuba_diving`, `explore`, `school`), title, and description; full card state set from §4.2; staggered scroll-reveal.\n\n**5.4 How It Works — 3 steps:** numbered badges (01\u002F02\u002F03) connected by a flowing \"current\" line (CSS), one icon + text per step; infographic style; collapses to a vertical flow on mobile.\n\n**5.5 Testimonials:** 3 quote cards — `format_quote` icon, quote, avatar (initial circle or `person` icon), name + role, star rating (`star` icons). Use `figure` \u002F `blockquote` \u002F `cite` semantics.\n\n**5.6 Pricing — 3 tiers:** themed names (e.g., Shallows \u002F Reef \u002F Abyss); middle tier featured (`.card--featured`: accent border, slight scale, \"Most Popular\" badge); price, feature list with `check_circle` icons, one CTA per tier; optional monthly\u002Fannual toggle (`aria-pressed`) that visibly updates prices; each CTA opens the §4.4 modal and demonstrates the loading → success button states.\n\n**5.7 FAQ — accordion:** 5–6 themed questions; each question is a `\u003Cbutton>` with `aria-expanded` + `aria-controls`, answer region with `role=\"region\"`; CSS-animated open\u002Fclose with a rotating chevron; fully keyboard operable.\n\n**5.8 Final CTA:** immersive deep-gradient band (the deepest visual point of the page), headline + primary button + bubble accents.\n\n**5.9 Footer:** wave divider on top; logo + tagline; secondary link columns (Product, Company, Support, Legal); social icons (Material Symbols with `aria-label`s); newsletter `.input-group` with full validation states + `aria-live` feedback; copyright line; all links keyboard focusable with visible focus rings.\n\n## 6. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid sizing, no horizontal overflow from 320px up.\n- **Smooth animations:** `transition: var(--transition-normal)` on all state changes; animate only `transform`\u002F`opacity`.\n- **Reduced motion:** under `prefers-reduced-motion: reduce`, disable bubble\u002Ffish\u002Fwave\u002Flight-ray animations and scroll reveals; keep all hover\u002Ffocus state feedback intact.\n- **Accessibility (a11y):** semantic HTML5 landmarks; a skip-to-content link; a single `h1`; logical DOM\u002Ffocus order; full keyboard operability (nav, accordion, modal, toggle); ARIA roles\u002Flabels on all custom widgets; `aria-live` regions for dynamic feedback; never communicate state by color alone; all decorative layers `aria-hidden=\"true\"`.\n- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.\n- **Destructive actions:** `.btn--danger` must be visually distinct in both Light and Dark themes.\n\n## 7. DELIVERABLE & OUTPUT FORMAT\n\n- **File structure:** exactly three files — `index.html`, `style.css`, `script.js`. The only permitted inline script is the minimal theme-bootstrap snippet in `\u003Chead>` (§2.3); `script.js` is referenced once with `defer`.\n- **Naming convention:** BEM (`block__element--modifier`) everywhere — never mix conventions.\n- **script.js responsibilities:** theme toggle + `localStorage` persistence, mobile menu, FAQ accordion, modal open\u002Fclose + focus trap, form validation, IntersectionObserver scroll reveals, pricing toggle. No external libraries.\n- **No unrequested placeholders:** write real English copy per §1.3; no lorem ipsum.\n- **Final output:** the complete contents of all three files, ready to run by opening `index.html` in a browser.\n",1791954989914]