[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-765-LOW-TIDE-an-interactive-tide-pool":3},"# SYSTEM PROMPT — \"LOW TIDE\" Landing Page: Interactive Tide Pool Theme\n\n## 0. ROLE & MISSION\n\nAct as a Senior Frontend Engineer and Expert UI Designer. Build the complete, production-quality landing page specified below in a **single first attempt** — all files delivered fully functional in one response, no follow-up questions. All user-facing copy must be written in **English**.\n\n**Light\u002FDark exception clause:** The source style spec designates Light mode as the primary aesthetic. Light mode is therefore the brand-forward default look — however, per mandatory architecture rules, a complete, persisted Dark Mode (\"tide at night\") is still required as defined in Rule 2.3.\n\n---\n\n## 1. THEME DIRECTION — \"LOW TIDE\" VISUAL LANGUAGE\n\n**1.1 Concept.** A landing page for LOW TIDE, a tide-forecasting\u002Fnature product. The page itself must feel like gazing into a tide pool: translucent glass panels drift over soft seafoam gradient \"water,\" and content reveals itself the way a receding tide uncovers rock pools. Keywords: tidepool, lowtide, weather, nature, glass, translucent, gradient, blur. Era: 2020s contemporary. Mood: calm, curious, organic.\n\n**1.2 Palette.**\n- Deep Current `#20323a` — primary dark anchor, light-mode text and primary buttons\n- Seafoam Mist `#d8e8e4` — light-mode page background, dark-mode text\n- Eucalyptus `#9ab8b4` — muted mid-tone, secondary surfaces\n- Pale Lagoon `#cfe8e0`, Sage Surf `#7a9a94`, Sea Glass `#a8c4be` — supporting tones\n\n**1.3 Signature Effects (all CSS-only).**\n- **Glass:** `backdrop-filter: blur(var(--glass-blur))` over `--glass-bg` translucent fills with 1px `--glass-border`, `--radius-lg` corners; provide a solid higher-opacity `rgba` fallback inside `@supports not (backdrop-filter: blur(1px))`.\n- **Gradients:** layered radial + linear gradients simulating shallow water and sunlit pools; slow-drifting ambient gradient blobs (CSS keyframes, gated by `prefers-reduced-motion`).\n- **Blur\u002FFilters:** backdrop blur on nav, cards, modal; soft tinted shadows.\n- **Text Shadows:** subtle light text-shadow on glass panel headings only.\n- **Transforms\u002FTransitions:** hover lifts, gentle \"bobbing\" drift animations, state transitions via token variables.\n\n**1.4 Framework of Effects.** Flexbox, Backdrop Filter, CSS Filters, Transitions, Transforms, Gradients, Text Shadows, Border Radius — all must appear in the final CSS.\n\n---\n\n## 2. STRICT RULES & ARCHITECTURE\n\n**2.1 CSS-First Architecture & Zero Inline CSS.**\n- No `style=\"...\"` attributes anywhere in the HTML.\n- All design properties, layout, and states targeted via class\u002FID selectors only.\n- HTML stays clean, semantic HTML5; changing the site's look must require editing `style.css` only.\n\n**2.2 CSS Variables & Theme Tokens.** All tokens live in `:root` and are redefined under the dark theme. Mandatory names:\n\n| Token | Light (default) | Dark |\n|---|---|---|\n| `--bg-primary` | `#d8e8e4` | `#14262e` |\n| `--bg-secondary` | `#fefefe` | `#1b3038` |\n| `--text-primary` | `#20323a` | `#d8e8e4` |\n| `--text-secondary` | `#4a6568` | `#a8c4be` |\n| `--primary` | `#20323a` | `#d8e8e4` |\n| `--text-on-primary` | `#d8e8e4` | `#20323a` |\n| `--secondary` | `#9ab8b4` | `#7a9a94` |\n| `--accent` | `#7a9a94` | `#9ab8b4` |\n| `--glass-bg` | `rgba(254,254,254,0.42)` | `rgba(20,38,46,0.55)` |\n| `--glass-border` | `rgba(32,50,58,0.12)` | `rgba(216,232,228,0.14)` |\n| `--border-default` | `rgba(32,50,58,0.16)` | `rgba(216,232,228,0.16)` |\n| `--text-success` \u002F `--border-success` | `#2f7d5f` | `#7ecfa8` |\n| `--text-error` \u002F `--border-error` | `#b3402e` | `#ff9b8a` |\n\nPlus: `--radius-sm: 8px`, `--radius-md: 14px`, `--radius-lg: 22px`, `--shadow-sm`, `--shadow-md` (teal-tinted in light, deep black in dark), `--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` (define even if unused), `--glass-blur: 14px`, `--font-display`, `--font-base`.\n\n- **Contrast pairing is mandatory in every theme:** light background tokens pair with dark text tokens and vice versa. Never render `--primary`-colored text on `--primary`-colored backgrounds.\n- Light mode must not use pure white; where near-white is needed use `#fefefe`.\n- Sage Surf `#7a9a94` fails AA on light backgrounds at body sizes — use it only for decorative\u002Flarge text, icons, and borders; use the derived `#4a6568` for light-mode secondary body text. Verify all text ≥ 4.5:1 and UI borders ≥ 3:1 in both themes; adjust values only if contrast fails.\n\n**2.3 Mandatory Dark Mode.**\n- Define identical token sets under `@media (prefers-color-scheme: dark)` AND a `.dark` class on `\u003Chtml>` (media query provides the no-JS fallback; class enables explicit switching).\n- Theme switching swaps CSS variables only — zero HTML restructuring.\n- Persist choice via `localStorage`, fall back to `prefers-color-scheme` on first visit.\n- Visible toggle control in the header: Material Symbol `dark_mode`\u002F`light_mode` swap, correct `aria-pressed` and `aria-label` (\"Switch to dark mode\" \u002F \"Switch to light mode\").\n- Dark aesthetic: \"tide at night\" — deep teal water, seafoam text, dark-tinted glass panels. Equal quality and contrast to light mode.\n\n**2.4 Flexbox Layout & Mobile-First Alignment.**\n- Build all layout with Flexbox. Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment (e.g., footer link columns and step stacks may use `flex-start`).\n- Mobile-first: multi-column rows convert to a single column at small viewports; no horizontal scrolling anywhere; minimum touch target 44×44px.\n\n**2.5 Framework Default.**\n- Use Tailwind CSS via CDN with theme config mapped to the CSS variables above, OR clean custom CSS in `style.css` (recommended given the heavy glass\u002Fgradient work). Never mix conventions.\n- All utility styling must resolve to `var(--...)` tokens or generic reusable classes: `.btn`, `.btn-primary`, `.btn-secondary`, `.btn-glass`, `.card`, `.glass-panel`, `.input-group`, `.section`, `.container`.\n\n**2.6 Typography & Icons (Google Fonts Mandatory).**\n- Text: Google Fonts — **Fraunces** (display, headings) + **Inter** (base\u002Fbody). Include `\u003Clink>` tags with `preconnect` and `display=swap`; bind to `--font-display` and `--font-base`.\n- Icons: **Google Material Symbols (Rounded)** via the required `\u003Clink>`; control weight\u002Ffill via `font-variation-settings`.\n- **Forbidden:** raw inline SVGs, local icon files, emoji used as icons.\n\n---\n\n## 3. PAGE STRUCTURE & SECTION REQUIREMENTS\n\nOrder: sticky header → Hero → Features → How It Works → Testimonials → Pricing → FAQ → Final CTA → Footer. Write real, thematic English copy for every section (no lorem ipsum). Anchor IDs: `#features`, `#how`, `#testimonials`, `#pricing`, `#faq`.\n\n**3.0 Header (Sticky Glass Nav).** Logo: `waves` icon + \"LOW TIDE\". Anchor links to all sections; theme toggle (Rule 2.3); primary CTA \"Join the waitlist\" opening the modal (Rule 4.4). Nav background is blurred glass that gains shadow\u002Felevation on scroll. Mobile: `menu` icon button (`aria-expanded`) opens a glass dropdown panel (`--z-dropdown`), closes on `Esc` and outside click, focus managed.\n\n**3.1 Hero.** Layered gradient \"tide pool\" background with slow-drifting radial blobs (CSS only, reduced-motion gated). Central glass panel: eyebrow text (\"KNOW THE TIDE\"), single `h1` (e.g., \"The tide goes out. The wonder comes in.\"), supporting copy, and CTAs — primary \"Explore the pools\" (smooth-scrolls to `#features`), secondary \"Join the waitlist\" (opens modal). Below: a tide-strip of three glass stat chips with Material Symbols and realistic values (\"Next low tide 4:32 PM\", \"Water 14°C\", \"Swell 0.6 m\"); an optional simulated JS countdown to low tide is allowed (no external APIs).\n\n**3.2 Features — 3 Cards.** Section heading + intro sentence. Three glass cards, stacked on mobile: **Live Tide Charts** (`waves` icon), **Pool Discovery Maps** (`explore`), **Marine Weather, Decoded** (`thermostat`). Cards follow Rule 4.2 with hover lift and a subtle ripple-ring effect.\n\n**3.3 How It Works — 3 Steps.** Numbered step cards with badge, icon, copy: 1. Check the tide window (`schedule`), 2. Chart your pool walk (`route`), 3. Log what you find (`edit_note`). Horizontal row on desktop with a CSS connector line; vertical stack on mobile.\n\n**3.4 Testimonials — 3 Cards.** Quote icon, review copy, 5-star rating (star icons with `aria-label=\"Rated 5 out of 5\"`), avatar as CSS gradient circle with initials (no external images), realistic name + role (marine biologist, school teacher, lifelong beachcomber).\n\n**3.5 Pricing — 3 Tiers + Billing Toggle.** Toggle Monthly\u002FYearly (`aria-pressed`; yearly label notes \"save ~17%\"; prices cross-fade using `--transition-fast`). Tiers:\n- **Driftwood** — Free, ghost CTA \"Start free\".\n- **Tide Pooler** — $9\u002Fmo · $90\u002Fyr — \"Most popular\" badge, featured styling (accent border, slight scale, `--shadow-md`), primary CTA \"Go Pro\".\n- **Reef Crew** — $24\u002Fmo · $240\u002Fyr, CTA \"Contact us\".\nFeature lists use `check_circle` icons. Equal-height cards; center tier visually elevated.\n\n**3.6 FAQ — Accessible Accordion.** 6 Q&A pairs (data sources, offline coverage, low-tide notifications, family plans, cancellation, accessibility). Pattern: trigger `\u003Cbutton aria-expanded>` + panel region; `expand_more` chevron rotates; height animates via CSS (`grid-template-rows: 0fr → 1fr` or equivalent); one panel open at a time; fully keyboard operable.\n\n**3.7 Final CTA.** Full-width glass panel over a deep gradient band: `h2` (e.g., \"The tide waits for no one — but it'll tell you when to come back.\"), supporting copy, primary \"Join the waitlist\" button (opens modal), microcopy \"No spam — one quiet note when we launch.\"\n\n**3.8 Footer.** Brand block (logo, one-liner, social links as generic Material Symbol icons — e.g., `alternate_email`, `public`, `rss_feed` — each with `aria-label`; brand-logos are not available in Material Symbols and inline SVGs are forbidden). Secondary link columns: Product, Company, Support — anchoring to real sections where possible. Bottom bar: \"© 2025 LOW TIDE\" + tagline \"Built for the intertidal curious.\" Footer columns may use `flex-start` (documented exception).\n\n---\n\n## 4. COMPONENT DESIGN SPECIFICATIONS\n\n**4.1 Buttons.** All states via CSS classes on `.btn` (base: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` min 44×44px, `--radius-md`):\n- **Hover:** brightness\u002Fshadow shift; `cursor: pointer`.\n- **Focus:** distinct visible ring from CSS variables (`outline` + `box-shadow`); never remove.\n- **Active:** `transform: scale(0.97)`.\n- **Loading:** `.is-loading` — pointer-events disabled, JS prevents double submission, spinning Material Symbol `progress_activity` (or CSS spinner), button dimensions unchanged.\n- **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`.\n- **Success\u002FError:** temporary feedback styling from `--text-success`\u002F`--text-error` with an icon, announced politely via `aria-live`.\n- Define a generic `.btn-danger` with distinct styling in both themes, even if unused.\n\n**4.2 Cards.** Base `.card` \u002F `.glass-panel`: glass tokens, `--radius-lg`, `--shadow-sm`, padding `var(--spacing-gap)`. **Hover:** `translateY(-2px)` + `--shadow-md` (+ ripple ring via `::after`). **Focus-within:** accent border highlight when a child control is focused. **Skeleton:** `.card--skeleton` shimmer keyframes defined in CSS for reuse. **Empty state:** `.card--empty` fallback layout — Material Symbol icon + guidance text — defined in the design system.\n\n**4.3 Forms & Inputs.** Waitlist email capture lives inside the modal: `.input-group` wraps `\u003Clabel>`, `\u003Cinput type=\"email\">`, and a dedicated error `\u003Cp>` bound to `aria-live=\"polite\"`. States via classes\u002Fpseudo-classes: **empty**, **focus** (outline ring), **filled**, **valid** (success border + check icon), **invalid** (error border, `--text-error` message + error icon), **disabled**, **read-only** (defined). JS validates on submit and blur; submit flow: loading → inline success panel.\n\n**4.4 Modal (Waitlist).** `role=\"dialog\"` `aria-modal=\"true\"` `aria-labelledby`; centered flex overlay (`align-items: center; justify-content: center`) with blurred, tinted backdrop. **States:** opening (fade + scale transition), open, loading (submitting), success (icon + confirmation message, then \"Close\" button), closing (reverse transition). Close button: Material Symbol `close` with `aria-label=\"Close dialog\"`. Closes on `Esc` and backdrop click. Focus is trapped while open (Tab\u002FShift+Tab cycle inside), focus returns to the trigger on close, and background scrolling is locked. Stacking: `var(--z-modal)`.\n\n---\n\n## 5. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid `clamp()` typography, breakpoints ~640\u002F768\u002F1024px, zero horizontal overflow at any width.\n- **Smooth animations:** every state change transitions via `--transition-fast`\u002F`--transition-normal` with `--ease-standard`; **`prefers-reduced-motion` disables drifting blobs, parallax, and scale effects** (retain simple opacity fades).\n- **Accessibility:** WCAG-AA contrast in both modes; never rely on color alone (errors pair icon + text); semantic landmarks (`header`, `nav`, `main`, `section`, `footer`), one `h1`, logical heading hierarchy; correct ARIA on theme toggle, accordion, billing toggle, modal, social links; full keyboard operability with visible focus and logical order; skip-to-content link; `aria-live` for all dynamic feedback (form errors, loading, success).\n- **Mandatory visual feedback:** every hover, click, toggle, and submission triggers a visible state change.\n- **Scroll behavior:** nav anchors smooth-scroll, gated by reduced-motion preference.\n\n---\n\n## 6. DELIVERABLE & OUTPUT FORMAT\n\n- **Files:** separate `index.html`, `style.css`, `script.js`. No inline `\u003Cscript>` blocks, no inline event-handler attributes — all JS via `addEventListener` in `script.js`, referenced once with `defer`.\n- **Naming:** one consistent convention (BEM: `block__element--modifier`) for all custom classes; `data-*` hooks for JS behavior; never mix conventions.\n- **Copy:** real thematic English copy everywhere per the Section 3 briefs; no lorem ipsum; no fake API calls — all data simulated locally.\n- **Imagery:** CSS-crafted gradients, glass, and type only; if a photo is genuinely required, use `https:\u002F\u002Fpicsum.photos\u002Fseed\u002F\u003Cseed>\u002F\u003Cw>\u002F\u003Ch>` and no other external images.\n- **Dependencies:** Google Fonts + Material Symbols links only; no JS libraries, no build step; the page runs by opening `index.html`.\n- **Definition of Done:** all 8 sections + header rendered; theme toggle persists and respects system preference; FAQ accordion, pricing toggle, waitlist modal, and form validation fully functional; all button\u002Fcard\u002Finput\u002Fmodal states styled; zero inline CSS\u002FJS; both themes AA-contrast compliant; zero horizontal scroll from 320px up. Output all three complete files in one response.\n",1791954992572]