[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-796-NAUTILUS-the-drop":3},"# BUILD SPECIFICATION — \"NAUTILUS — the drop\" Glassmorphism Landing Page\n\n**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Produce a complete, production-ready landing page on the first attempt — full HTML, CSS, and JS. No partial deliveries, no \"the rest can be added on request.\"\n\n**Objective:** Build the marketing landing page for **NAUTILUS — the drop** — a glassmorphism page themed around a bathyscaphe's descent through the water column. The page must read as a slow, elegant dive: the hero sits in sunlit, misty surface water; each section deepens the atmosphere; the footer rests on the abyss floor.\n\n---\n\n## 0. THEME & ART DIRECTION\n\n- **Name:** NAUTILUS — the drop\n- **Style:** Glassmorphism · Era: 2020s Digital\n- **Keywords:** bathyscaphe, descent, glass, translucent, gradient, blur\n- **Concept:** Translucent glass panels float over layered aquatic gradients; soft teal glows behave like filtered light shafts in deep water; every card, button, and panel is a porthole of frosted glass.\n- **Color Palette:**\n  - **Primary:** `#d8e4f0` (surface mist) · `#0a2028` (abyss navy) · `#4aa0b8` (ocean teal)\n  - **Secondary:** `#0a3a4a` (deep teal) · `#051820` (midnight teal) · `#02060c` (abyss black)\n- **Required Visual Effects:** Blur (`backdrop-filter`), Glow, Glass Effect, Gradients, Hover Effects\n- **Required CSS Techniques:** Flexbox, Backdrop Filter (include the `-webkit-` prefix and an `@supports` fallback with a solid translucent background), CSS Filters (`brightness`, `saturate`, `drop-shadow`), Transitions, Transforms, Gradients, Box Shadows, Border Radius\n\n**Token Mapping (mandated):**\n\n| Token | Light (default) | Dark |\n|---|---|---|\n| `--primary` | `#4aa0b8` | `#4aa0b8` |\n| `--secondary` | `#0a3a4a` | `#d8e4f0` (muted) |\n| `--bg-primary` | `#d8e4f0` | `#02060c` |\n| `--bg-secondary` (glass) | `rgba(254,254,254,0.45)` | `rgba(10,58,74,0.35)` |\n| `--text-primary` | `#0a2028` | `#d8e4f0` |\n| `--text-secondary` | `rgba(10,32,40,0.72)` | `rgba(216,228,240,0.72)` |\n| `--border-default` | `rgba(10,32,40,0.12)` | `rgba(216,228,240,0.16)` |\n\nDefine all remaining mandatory tokens: `--text-success`, `--text-error`, `--border-success`, `--border-error`, `--radius-sm\u002Fmd\u002Flg`, `--shadow-sm\u002Fmd`, `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`, `--z-dropdown`, `--z-modal`, `--z-toast`, `--font-base`, `--font-heading`. Add theme extensions: `--glass-blur`, `--glass-border`, `--glow` (e.g., `0 0 40px rgba(74,160,184,0.35)`), and `--gradient-*` tokens for surface-to-depth background layers.\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 anywhere in the HTML.\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:** Keep markup semantic and style-agnostic — glass surfaces, gradients, glow orbs, and all decorative effects must be achievable by editing CSS only. Prefer `::before`\u002F`::after` pseudo-elements for decorative orbs\u002Fbubbles so the HTML stays clean.\n\n### 1.2 CSS Variables (`var(--...)`) & Theme Tokens\n- **All tokens live in `:root`** (light theme) and are overridden in a `.dark` class scope, using exactly the names in the table above plus the mandatory list.\n- **Contrast Pairing:** Every light background token pairs with a dark text token and vice versa, in both themes. `#4aa0b8` is an accent for gradients, glows, large icons, and decorative surfaces only — never for body text on light backgrounds (it fails AA); use `--secondary` or `--text-primary` for interactive text.\n- **Light Mode Background:** Never default to pure white. The light surface is built from misty `#d8e4f0` gradient layers. Where a near-white is genuinely needed, use `#fefefe`, never `#ffffff`.\n\n### 1.3 Mandatory Dark Mode Support\n- **Implementation:** Define dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `\u003Chtml>`; the dark theme is the abyss palette — backgrounds built from `#02060c` → `#051820` → `#0a3a4a`, with `#d8e4f0` text and `#4aa0b8` glows.\n- **Theme Switching:** Background and text variables must flip seamlessly with no HTML restructuring.\n- **Persistence:** Persist the choice in `localStorage`, fall back to `prefers-color-scheme` on first visit, and provide a visible toggle button (Material Symbols `light_mode` \u002F `dark_mode`) with correct `aria-pressed` and `aria-label` state.\n- **Theme Exception Clause:** This theme is light-first by mood, so Light is the default presentation on first visit — but full Dark Mode support remains mandatory and must be built to the same polish as Light.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n- **Default Alignment Rule:** Every flex container defaults to `align-items: center` unless an exception is explicitly justified in CSS comments.\n- **Mobile-Friendly First:** All multi-column rows (features, steps, testimonials, pricing, footer) wrap into a single column below `768px`; prevent horizontal scrolling at every viewport width down to `320px`; all touch targets are at least 44×44px.\n\n### 1.5 Framework Default\n- Use clean custom CSS in `style.css` (this theme requires bespoke glassmorphism effects). If Tailwind is used, it may only appear via `@layer`\u002F`@apply` utilities that map back to the CSS variables. Never mix conventions — one system only.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n- **Text:** Load **Space Grotesk** (headings) and **Inter** (body) via Google Fonts `\u003Clink>`; bind them to `--font-heading` and `--font-base`.\n- **Icons:** Use **Google Material Symbols (Rounded)** via the Google Fonts link. Raw inline SVGs and local icon files are forbidden. Suggested icon names: `water_drop`, `waves`, `anchor`, `visibility`, `bolt`, `shield`, `check`, `close`, `expand_more`, `format_quote`, `star`, `workspace_premium`, `arrow_downward`, `arrow_upward`, `arrow_forward`, `light_mode`, `dark_mode`, `person`.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Button Component (`.btn`, variants `.btn--primary`, `.btn--glass`)\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px, `--radius-md`.\n- **Hover:** Brightness\u002Fshadow shift plus intensified `--glow`; `cursor: pointer`.\n- **Focus:** Distinct focus ring built from CSS variables (`box-shadow` ring) for keyboard navigation.\n- **Active\u002FPressed:** `transform: scale(0.97)`.\n- **Loading:** Disables interaction, prevents double-clicks, and renders an animated Material Symbol (`progress_activity`) spinner without changing button dimensions.\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 Final CTA form).\n\n### 2.2 Card Component (`.card` — used by Features, Testimonials, Pricing)\n- **Default:** Flexbox glass panel using `--bg-secondary`, `--glass-border`, `backdrop-filter: var(--glass-blur)`, `--radius-lg`, `--shadow-md`.\n- **Hover:** `transform: translateY(-2px)` plus glow elevation shift.\n- **Focus-within:** Card border highlights when any child link\u002Fbutton receives focus.\n- **Loading (Skeleton):** Define a `.card--skeleton` shimmer animation (CSS keyframes, no layout shift) in the stylesheet.\n- **Empty State:** Define a `.card--empty` fallback layout with a Google Icon and guidance text.\n\n### 2.3 Form & Input Requirements (Final CTA email capture)\n- **States:** Empty, Focused (outline ring), Filled, Valid (`--border-success` + check icon), Invalid (`--border-error`, red text, error icon), Disabled, Read-only.\n- **Structure:** `.input-group` flex container wrapping a real `\u003Clabel>`, the input, and a dedicated error feedback container wired to `aria-live=\"polite\"`. Validate the email in JS; on submit show the button loading state, then an inline success message (`role=\"status\"`).\n\n### 2.4 Accordion (FAQ)\n- Use native `\u003Cdetails>`\u002F`\u003Csummary>` styled with BEM classes, or a `button` + region pattern with `aria-expanded`\u002F`aria-controls` — keyboard operable in either case.\n- Chevron (`expand_more`) rotates on open; the open state is communicated by both the icon rotation and ARIA, never color alone. Animate open\u002Fclose with a CSS height\u002Fgrid transition; respect `prefers-reduced-motion`.\n\n### 2.5 Modal \u002F Popup\n- **None of the requested sections require a modal — do not add one.** (For reference only: any future modal must implement a centered flex overlay, backdrop, icon close button, `Esc`\u002Foverlay-click closing, focus trap, and animated open\u002Fclose.)\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by Default:** Fluid type and spacing; no horizontal overflow at any width.\n- **Smooth Animations:** `transition: var(--transition-normal) var(--ease-standard)` on all state changes; fully disable transforms\u002Fanimations under `prefers-reduced-motion: reduce`.\n- **Accessibility (a11y):** WCAG AA contrast in both Light and Dark modes (glass panels must never compromise text legibility — increase surface opacity until AA passes). Semantic HTML5 landmarks (`header`, `main`, `section` with `aria-labelledby`, `footer`), exactly one `\u003Ch1>`, logical DOM\u002Ffocus order, a skip link, visible `:focus-visible` styles on every interactive element, `aria-hidden=\"true\"` on decorative orbs\u002Fgradients, full keyboard operability, and `aria-live` regions for all dynamic feedback.\n- **Mandatory Visual Feedback:** Every click, hover, focus, and submission triggers a visible state change.\n- **Destructive Actions:** None are present; if one is ever introduced, style it with a distinct `.btn--danger` that reads clearly in both themes.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **File Structure:** Three files — `index.html` (semantic, `\u003Chtml lang=\"en\">`, viewport meta, Google Fonts links, one `\u003Clink>` to `style.css`, exactly one `\u003Cscript src=\"script.js\" defer>` — no inline scripts), `style.css` (all styling, ordered: tokens → base → layout → components → sections → utilities), `script.js` (theme toggle + persistence, accordion behavior, email form validation with loading\u002Fsuccess feedback, and an optional `IntersectionObserver` scroll-reveal that respects reduced motion).\n- **Naming Convention:** BEM only (`.hero__title`, `.feature-card__icon`, `.btn--primary`) — never mix conventions.\n- **No Unrequested Placeholders:** Author original, coherent English marketing copy throughout — lorem ipsum is forbidden. Write realistic testimonials (names, roles, 5-star ratings), consistent pricing, and substantive FAQ answers. Do not add sections or components beyond those specified below.\n- **Self-Contained Visuals:** No external raster images. Build all backgrounds from CSS gradients, glow orbs, and glass panels; avatars are initials inside gradient circles.\n- **Acceptance Checklist:** zero inline styles; both themes toggle and persist; both themes pass AA; no horizontal scroll at 320px; the page is fully operable by keyboard alone.\n\n---\n\n## 5. PAGE SECTION REQUIREMENTS & CONTENT DIRECTION\n\n0. **Glass Header (fixed):** Slim translucent bar with backdrop blur hosting the brand (\"NAUTILUS\" + `water_drop` icon), anchor links to each section, and the mandatory theme toggle.\n1. **Hero (surface zone):** Misty `#d8e4f0` gradient with teal glow orbs; kicker, one `\u003Ch1>` with a gradient-text treatment using the palette, subcopy, a primary CTA (\"Begin the Descent\") and a glass ghost CTA anchoring to Features; three floating glass stat pills; an animated `arrow_downward` scroll cue (`aria-hidden`).\n2. **Features — 3 glass cards:** Each with a glowing glass icon chip (`waves`, `anchor`, `visibility`), title, and copy framing the product's deep-focus benefits (e.g., pressure-tested focus, depth controls, silence). Cards lift and glow on hover; stack on mobile.\n3. **How It Works — 3 numbered steps:** \"01 \u002F 02 \u002F 03\" in glass circles with a connecting descent line, each with title and copy (surface check → ballast release → full descent); column layout on mobile.\n4. **Testimonials — 3 glass cards:** `format_quote` icon, authored quote, initials avatar, name, role, and a 5-star `star` icon row with `aria-label=\"Rated 5 out of 5\"`.\n5. **Pricing — 3 tiers:** \"Shallows\" (free), \"Midwater\" (featured — glow border, `workspace_premium` \"Most Popular\" badge, primary button), \"Abyss\" (premium, glass button). Feature lists use `check` icons; columns stack on mobile.\n6. **FAQ — 5 questions:** Realistic product Q&A in the accordion pattern from Section 2.4.\n7. **Final CTA:** Full-width glass panel with a strong teal glow; headline, supporting line, and the `.input-group` email capture from Section 2.3 (\"Get your invite\") with loading → success flow and `aria-live` feedback.\n8. **Footer (abyss zone):** Darkest surface of the page — in Light mode it uses the dark teal panel (`#0a2028`\u002F`#0a3a4a`) with `#d8e4f0` text (dark background + light text pairing enforced); brand block with tagline, two to three columns of secondary links, social icons, copyright, and a \"Back to surface\" link with `arrow_upward`.\n",1791954993204]