[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-138-Underwater-Aquatico-Deep-Sea":3},"# System Prompt: Build \"Underwater Aquático Deep Sea\" Landing Page\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready Landing Page on the first attempt. Theme: **Underwater Aquático Deep Sea** — immersive, calming, exploratory. All user-facing copy must be written in **English**.\n\n**Sections (in order):** Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n- All styling lives in `style.css`. **Forbidden:** the `style=\"...\"` attribute anywhere in HTML.\n- Target all design properties, layout rules, and states via class or ID selectors only.\n- Keep HTML semantic and clean; changing the theme must require editing only CSS.\n\n**1.2 CSS Variables & Theme Tokens**\nDefine in `:root` (theme-specific tokens required by the spec, plus standard tokens):\n- **Theme colors:** `--light-aqua: #E0F6FF`, `--deep-navy: #006994`, `--ocean-blue` (gradient pair), plus Cerulean, Sea Green, and Coral accent tokens.\n- **Standard tokens:** `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`, `--radius-sm\u002Fmd\u002Flg`, `--shadow-sm\u002Fmd`, `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`, `--z-dropdown`, `--z-modal`, `--z-toast`, `--bubble-size`, `--bubble-duration`, `--font-base`.\n- **Contrast pairing:** every light background token pairs with dark text, every dark background pairs with light text.\n- Light mode background: use `#fefefe` where near-white is needed — never `#ffffff`; default page background is the aqua-to-navy ocean gradient (`linear-gradient(180deg, #E0F6FF, #006994)`).\n\n**1.3 Mandatory Dark Mode**\n- The source spec marks \"Full Light \u002F No Dark\" — **exception:** dark mode remains mandatory per system rules. Implement a deep-sea dark theme (near-black navy backgrounds, bioluminescent aqua\u002Fcoral accents) via `@media (prefers-color-scheme: dark)` and a `.dark` class, with `localStorage` persistence and `prefers-color-scheme` fallback. Include a visible theme toggle with correct `aria-pressed`\u002F`aria-label` state. Theme switching must not require HTML restructuring.\n\n**1.4 Flexbox Layout & Mobile-First**\n- Every flex container defaults to `align-items: center` unless explicitly justified otherwise.\n- Mobile-first: rows convert to columns on small viewports; no horizontal scrolling at any width.\n\n**1.5 Framework Default**\n- Use Tailwind CSS (or custom CSS via `@layer`\u002F`@apply`) with utility classes mapped to CSS variables and reusable generic classes (`.btn`, `.card`, `.input-group`, `.section`, `.wave-separator`).\n\n**1.6 Typography & Icons**\n- Google Fonts only: use a calm, modern font (e.g., Poppins or Inter) bound to `--font-base` via `\u003Clink>` or `@import`.\n- Icons: Google Material Symbols\u002FIcons only. **No raw inline SVGs or local icon files.**\n- **Exception:** the spec explicitly requires **SVG wave separators** between sections — inline `\u003Csvg>` wave shapes are permitted *only* for these decorative separators (with `aria-hidden=\"true\"`); all icons must still be Google Material Symbols.\n\n---\n\n## 2. THEME-SPECIFIC VISUAL EFFECTS (MANDATORY)\n\n- **Bubble animations:** decorative floating bubbles using `@keyframes bubble` with `translateY`, `opacity`, and `scale`, driven by `--bubble-size` and `--bubble-duration`; vary sizes\u002Fdurations for organic feel. Respect `prefers-reduced-motion` (disable bubble\u002Fparallax animation).\n- **Wave separators:** SVG wave dividers between major sections, colored to blend with adjacent section backgrounds.\n- **Depth layering:** use `--z-*` tokens and parallax-style layering (blurred background plants\u002Fsilhouettes in front of\u002Fbehind content) to simulate underwater depth.\n- **Background blur:** `filter: blur()` on background decorative elements (water plants, distant marine silhouettes) to simulate distance.\n- **Ocean gradient:** page background flows light-aqua → deep-navy top to bottom, evoking descent into the deep sea.\n\n---\n\n## 3. COMPONENT SPECIFICATIONS\n\n**3.1 Buttons**\n- Default: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px touch target.\n- Hover: brightness\u002Fshadow shift, `cursor: pointer`. Focus: distinct focus ring via CSS variables. Active: `transform: scale(0.97)`.\n- Loading: disables interaction, CSS spinner (no dimension distortion). Disabled: `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n- Primary CTA uses Coral accent; destructive\u002Fdanger actions (`.btn-danger`) visually distinct in both themes.\n\n**3.2 Cards (Features, Pricing tiers, Testimonials)**\n- Default: flexbox layout, `--bg-secondary`, subtle borders, `--shadow-sm`.\n- Hover: `transform: translateY(-2px)` + shadow shift. Focus-within: highlighted border when a child link\u002Fbutton is focused.\n- Pricing cards: highlight the recommended tier (Coral accent border\u002Fbadge); include per-tier feature lists with Google Icons.\n- Testimonials: avatar placeholder, quote, name\u002Frole; never color-only state communication.\n\n**3.3 How It Works (3 steps)**\n- Numbered step cards in a flex row → column on mobile, connected visually (e.g., dashed border or wave connector), each with a Google Icon.\n\n**3.4 FAQ**\n- Use `\u003Cdetails>`\u002F`\u003Csummary>` or ARIA-correct accordion; animated open\u002Fclose via CSS transitions; keyboard operable; chevron icon rotates on open.\n\n**3.5 Forms (Final CTA \u002F newsletter signup, if included)**\n- States: empty, focused (outline ring), filled, valid (success border\u002Ficon), invalid (error border, red text, error icon), disabled, read-only.\n- Flex container wrapping label, input, and dedicated error feedback container; errors announced via `aria-live=\"polite\"`.\n\n**3.6 Footer**\n- Secondary links in a flex column\u002Frow, theme toggle accessible, copyright line, consistent naming convention with the rest of the page.\n\n---\n\n## 4. GLOBAL UX & ACCESSIBILITY\n\n- **Responsive by default:** fluid sizing, breakpoints, zero horizontal overflow.\n- **Animations:** `transition: var(--transition-normal)` on all state changes; respect `prefers-reduced-motion`.\n- **a11y:** sufficient contrast in light AND dark modes; semantic HTML5; correct ARIA roles\u002Flabels; logical focus order; full keyboard operability; `aria-live` regions for dynamic feedback.\n- **Visual feedback:** every click\u002Fhover\u002Fsubmission triggers a visible state change.\n- **Copy:** all user-facing text in English, real thematic copy (no lorem ipsum) — e.g., deep-sea exploration, marine discovery, calm underwater product framing.\n\n---\n\n## 5. DELIVERABLE\n\n- **Files:** `index.html`, `style.css`, `script.js` (theme toggle, FAQ accordion behavior, any form feedback). No inline `\u003Cscript>` beyond a single deferred entry point; no inline CSS.\n- **Naming:** one consistent convention (BEM or fixed utility set) across all files — never mix.\n- Build the complete page in one attempt: all eight sections fully styled, all states covered, dark mode working, bubble animations and wave separators in place.\n",1791954982145]