Underwater / Aquatic demo
Underwater / Aquatic

A modern underwater-themed infographic style featuring deep blue gradients, flowing wave shapes, bubbles, and marine imagery suited for contemporary landing pages.
Category: Nature & Organic
Era: 2020s Modern
Prompt: 14.2 KB · 1962 words
# SYSTEM PROMPT — BUILD THE "UNDERWATER / AQUATIC" INFOGRAPHIC LANDING PAGE

**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**.

## 1. PROJECT BRIEF & THEME DIRECTION

**1.1 Theme:** "Underwater / 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.

**1.2 Required Sections (in order):**
1. Sticky Header/Nav
2. Hero
3. Features (3 cards)
4. How It Works (3 steps)
5. Testimonials
6. Pricing (3 tiers)
7. FAQ (accordion)
8. Final CTA
9. Footer with secondary links

**1.3 Copy Language:** ALL user-facing copy must be written in **English**. Invent one coherent fictional product (e.g., a marine-education / 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.

**1.4 Color Palette (every value must be bound to a CSS variable — never hard-code hex values in component rules):**
- Primary: Light Aqua `#E0F6FF`, Deep Navy `#0B3C5D`, Ocean Blue `#006994`, Cerulean `#0277BD`
- Secondary: Dark Blue `#01579B`, Teal `#004D73`, Steel Blue `#005885`, Cobalt `#0D47A1`

**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.

**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.

## 2. STRICT RULES & ARCHITECTURE

**2.1 CSS-First Architecture & Zero Inline CSS**
- All styling lives in `style.css`. **Forbidden:** the `style="..."` attribute anywhere in the HTML.
- Target all design properties, layout rules, and states via class/ID selectors only.
- HTML remains semantic and style-agnostic: re-theming the site must require editing only the CSS file, never the markup.

**2.2 CSS Variables & Theme Tokens**
Define all tokens in `:root` (Light) and override in `.dark` (mirrored under `@media (prefers-color-scheme: dark)` for users with no stored preference):

```css
:root { /* Light mode — "Sunlit Shallows" */
  --primary: #006994;          /* Ocean Blue — buttons, links, accents */
  --secondary: #0277BD;        /* Cerulean — secondary accents */
  --bg-primary: #E0F6FF;       /* Light Aqua page background */
  --bg-secondary: #fefefe;     /* near-white card surfaces */
  --text-primary: #0B3C5D;     /* Deep Navy — pairs with light backgrounds */
  --text-secondary: #01579B;   /* Dark Blue */
  --text-success: #0B7A4B;  --text-error: #C62828;
  --border-default: rgba(0,105,148,0.25);
  --border-success: #0B7A4B; --border-error: #C62828;
  --accent-teal: #004D73; --accent-steel: #005885; --accent-cobalt: #0D47A1;
  --font-heading: 'Quicksand', sans-serif; --font-base: 'Inter', sans-serif;
  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 24px;
  --shadow-sm / --shadow-md: theme-aware, defined as variables;
  --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: 1000; --z-toast: 1100;
}
.dark { /* Dark mode — "Deep Sea" */
  --bg-primary: #0B3C5D;       /* Deep Navy */
  --bg-secondary: #004D73;     /* Teal card surfaces */
  --text-primary: #E0F6FF;     /* Light Aqua — pairs with dark backgrounds */
  --text-secondary: #A9D6EA;
  --primary: #4FA8DC;          /* brightened Cerulean for AA contrast on dark */
  --secondary: #63B8E8;
  --text-success: #4CAF8E;  --text-error: #EF9A9A;
  --border-default: rgba(224,246,255,0.2);
  /* shadows darken; all other structural tokens persist */
}
```

- **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.
- Never default to pure white `#ffffff`; use `#fefefe` where a near-white is required.
- Dark-mode shadows must be deeper (e.g., `rgba(0,0,0,0.4)`) — define them as variables so they flip with the theme.

**2.3 Mandatory Dark Mode**
- Provide dark tokens under BOTH a `.dark` class and `@media (prefers-color-scheme: dark)`; switching themes must never require HTML restructuring.
- Persistence: store the user's choice in `localStorage`; on first visit fall back to `prefers-color-scheme`.
- Visible toggle control in the header using Material Symbols (`light_mode` / `dark_mode`) with correct `aria-pressed` and `aria-label` ("Switch to dark theme" / "Switch to light theme").
- **Exception to the inline-script rule:** a minimal theme-bootstrap snippet in `<head>` is the single permitted inline script, required to prevent a light-mode flash for dark-mode users.

**2.4 Flexbox Layout & Mobile-First**
- 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).
- 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.

**2.5 Framework Default**
- Use Tailwind CSS (CDN) OR clean custom CSS organized with `@layer` / `@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.

**2.6 Typography & Icons (Google Fonts Mandatory)**
- Load via Google Fonts `<link>`: **Quicksand** (headings, 500/700) and **Inter** (body, 400/500/600), bound to `--font-heading` / `--font-base`.
- All functional icons: **Google Material Symbols (Rounded style** — suits the soft aquatic aesthetic). Forbidden: raw inline SVGs or local icon files for icons.
- **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.)

## 3. UNDERWATER VISUAL SYSTEM

**3.1 Depth Layering (signature of this theme)**
- 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/plants → content → foreground bubbles.
- Interactive layers (dropdown, modal, toast) must use `--z-dropdown` / `--z-modal` / `--z-toast` so decorative art never overlaps functional UI.

**3.2 Signature Animations (CSS keyframes; animate only `transform` and `opacity`)**
- `bubble-rise`: CSS radial-gradient bubbles drift upward with a gentle horizontal sway; staggered sizes, delays, and durations.
- `wave-drift`: two overlapping wave layers translating horizontally at different speeds (parallax) along section dividers.
- `fish-swim`: decorative fish traverse horizontally with a subtle vertical bob.
- `coral-sway`: gentle ±2° rotation, `transform-origin: bottom center`.
- `light-rays`: cool blue illumination — a low-opacity gradient overlay slowly shifting position/opacity to simulate underwater light shafts.
- Hero background: `linear-gradient(180deg, #E0F6FF, #006994)` in Light; a Deep Navy-to-abyss gradient (e.g., `#0B3C5D → #012A40`) in Dark.

**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.

## 4. COMPONENT DESIGN SPECIFICATIONS

**4.1 Buttons — every state as a CSS class, never inline:**
- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px; `border-radius: var(--radius-md)`.
- **Variants:** `.btn--primary` (filled Ocean Blue), `.btn--secondary` (outlined Cerulean), `.btn--ghost`, `.btn--danger` (visually distinct in BOTH themes).
- **Hover:** brightness/shadow shift with `cursor: pointer`.
- **Focus:** distinct `:focus-visible` ring built from CSS variables for keyboard navigation.
- **Active:** `transform: scale(0.97)` click feedback.
- **Loading (`.is-loading`):** disables interaction, prevents double-clicks, renders a CSS spinner that does not change button dimensions; set `aria-busy="true"`.
- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.
- **Success/Error (`.is-success` / `.is-error`):** temporary feedback tinted by `--text-success` / `--text-error`.

**4.2 Cards**
- **Default:** flexible Flexbox layout, `--bg-secondary` surface, `--border-default`, `--shadow-sm`, `--radius-lg`.
- **Hover:** `transform: translateY(-2px)` + elevation shift to `--shadow-md`.
- **Focus-within:** border highlights when a child link/button receives focus.
- **Loading (skeleton):** `.skeleton` shimmer animation with fixed heights to prevent layout jumps.
- **Empty state:** centered Google Icon + guidance text pattern defined in CSS.

**4.3 Forms & Inputs** (newsletter signup in the footer; demo form inside the modal)
- **Structure:** `.input-group` flex container wrapping a `<label>`, the input field, and a dedicated error feedback container.
- **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.
- **Feedback:** errors and confirmations announced via an `aria-live="polite"` region.

**4.4 Modal / Popup** (opened from Pricing CTAs)
- **States:** opening, open, loading, success/error, closing — all animated via CSS transitions.
- **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)`.

## 5. SECTION-BY-SECTION BUILD REQUIREMENTS

**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.

**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.

**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.

**5.4 How It Works — 3 steps:** numbered badges (01/02/03) connected by a flowing "current" line (CSS), one icon + text per step; infographic style; collapses to a vertical flow on mobile.

**5.5 Testimonials:** 3 quote cards — `format_quote` icon, quote, avatar (initial circle or `person` icon), name + role, star rating (`star` icons). Use `figure` / `blockquote` / `cite` semantics.

**5.6 Pricing — 3 tiers:** themed names (e.g., Shallows / Reef / 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/annual toggle (`aria-pressed`) that visibly updates prices; each CTA opens the §4.4 modal and demonstrates the loading → success button states.

**5.7 FAQ — accordion:** 5–6 themed questions; each question is a `<button>` with `aria-expanded` + `aria-controls`, answer region with `role="region"`; CSS-animated open/close with a rotating chevron; fully keyboard operable.

**5.8 Final CTA:** immersive deep-gradient band (the deepest visual point of the page), headline + primary button + bubble accents.

**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.

## 6. CORE UX & MICRO-INTERACTION RULES

- **Responsive by default:** fluid sizing, no horizontal overflow from 320px up.
- **Smooth animations:** `transition: var(--transition-normal)` on all state changes; animate only `transform`/`opacity`.
- **Reduced motion:** under `prefers-reduced-motion: reduce`, disable bubble/fish/wave/light-ray animations and scroll reveals; keep all hover/focus state feedback intact.
- **Accessibility (a11y):** semantic HTML5 landmarks; a skip-to-content link; a single `h1`; logical DOM/focus order; full keyboard operability (nav, accordion, modal, toggle); ARIA roles/labels on all custom widgets; `aria-live` regions for dynamic feedback; never communicate state by color alone; all decorative layers `aria-hidden="true"`.
- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.
- **Destructive actions:** `.btn--danger` must be visually distinct in both Light and Dark themes.

## 7. DELIVERABLE & OUTPUT FORMAT

- **File structure:** exactly three files — `index.html`, `style.css`, `script.js`. The only permitted inline script is the minimal theme-bootstrap snippet in `<head>` (§2.3); `script.js` is referenced once with `defer`.
- **Naming convention:** BEM (`block__element--modifier`) everywhere — never mix conventions.
- **script.js responsibilities:** theme toggle + `localStorage` persistence, mobile menu, FAQ accordion, modal open/close + focus trap, form validation, IntersectionObserver scroll reveals, pricing toggle. No external libraries.
- **No unrequested placeholders:** write real English copy per §1.3; no lorem ipsum.
- **Final output:** the complete contents of all three files, ready to run by opening `index.html` in a browser.