# One-Shot Prompt

**Theme**: Deep Sea Research Station — Sublevel 7
**Generated**: 2026-04-25

## Prompt

Write complete HTML, CSS, and JavaScript in a single self-contained file for an immersive, cinematic website about **Sublevel 7**, a fictional deep sea research station operating below the thermocline.

The site must feel like a living brand experience — sections that breathe as you scroll, typography that has weight and presence, and atmosphere you can almost feel. It should feel like it was commissioned by a world-class oceanographic institute.

### Visual Palette (exactly these colours)

- Midnight navy: `#050d1a` (background primary)
- Bioluminescent cyan: `#00f5c4` (accent, highlights)
- Abyssal purple: `#1a0a2e` (alternate section background)
- Surface foam white: `#e8f0f0` (body text)
- Dim text: `#6b8299` (secondary text)
- Porthole glass: `rgba(0, 245, 196, 0.08)` (transparent overlays)

### Typography

- Display headings: `IBM Plex Mono` or `Space Mono` (monospace, all caps, tight tracking)
- Body text: `Lato` or any clean sans-serif
- Specimen log / data: monospace throughout
- All fonts loaded from Google Fonts with `font-display: swap`

### Sections (at minimum these 6)

1. **Hero** — "SUBLEVEL 7" in massive monospace type, subtitle "Research Below the Thermocline". A depth meter on the right margin reading 0m at the top, increasing as you scroll. Faint drifting bioluminescent particles in the background via Canvas.

2. **Station Overview** — Three columns: "Depth", "Pressure", "Est." with large figures. Each reveals with a subtle upward slide on scroll.

3. **Research Log** — ASCII-art marine specimens (use pre/code styling, draw creatures with characters like jellyfish, anglerfish, and a giant squid). Each log entry has a specimen ID, date, depth, and description. The entries reveal one by one.

4. **Station Specifications** — A grid showing station specs: Maximum Depth, Hull Material, Crew Capacity, Power Source, Year Established, Oxygen Supply. Each as a labelled data point. Use a porthole-style card design with cyan borders.

5. **Crew** — Five crew member cards with fictional names, roles, and specialisations. Each card has a cyan top border and a silhouette drawn with inline SVG (no images). Hover reveals a subtle glow.

6. **Contact / Sonar Room** — A section with a large CSS sonar ping animation (concentric expanding rings). Contact info: a fictional email and coordinates. This section inverts to an abyssal purple background for surprise. Include a scrolling horizontal ticker at the bottom with oceanographic terms in monospace.

### Technical Requirements (NON-NEGOTIABLE)

- Single file: all HTML, CSS, JS in one `.html` file
- No external images: use CSS gradients, SVG inline, Canvas API only
- No external dependencies except Google Fonts (loaded via @import or link tag)
- Must work as a static file opened in any browser
- Smooth scroll behaviour on `html`
- All animated sections use Intersection Observer (not scroll event listeners) for reveal triggers
- `will-change: transform` on all animated elements
- `prefers-reduced-motion` media query to disable animations
- Mobile-responsive: use flexbox/grid, no fixed pixel widths on containers

### Interactive Details

- A subtle grain/noise texture overlay on the background using SVG filter
- A custom cursor: a small cyan dot that follows the mouse, shrinking on hover over links
- A depth meter on the right edge: shows "0m" at top, increments to "7600m" at bottom, updates as the user scrolls
- Navigation dots on the left side showing current section
- Hover states on all interactive elements with transform and glow effects
- The specimen ASCII section should have a monitor-scanline overlay effect
- A sonar ping animation in the contact section: CSS concentric circles expanding and fading

### Quality Bar

This is NOT a simple landing page. It should feel like it was commissioned for a next-gen oceanographic institute. Every detail matters. The atmosphere should be one of isolation, discovery, and the quiet hum of a station miles beneath the surface.

Write every line of code in full. No placeholders, no "similar styles", no truncation.

### Brand Details

- Station name: SUBLEVEL 7
- Tagline: Research Below the Thermocline
- Fictional coordinates: 47°36'S 176°55'E (somewhere off the Kermadec Trench)
- Fictional year established: 2047
- Fictional email: ops@sublevel7.deep

## Notes

- Canvas particles follow sine-wave paths for organic bioluminescent drift
- Depth meter uses window scroll position mapped linearly from 0 to 7600 metres
- ASCII creatures: jellyfish, anglerfish, and giant squid drawn with Unicode and monospace characters
- Sonar ping uses CSS keyframe animation on concentric rings
- Grain texture: SVG `feTurbulence` filter applied via a fixed pseudo-element overlay
- Font pair: IBM Plex Mono (headings/mono) + Lato (body) loaded from Google Fonts
- Hosting: works as `index.html` on any static host