[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-524-Tidalpunk":3},"# CODING AGENT SYSTEM PROMPT — \"TIDALPUNK\" LANDING PAGE\n\n**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete, production-ready Landing Page on the first attempt.\n\n**Objective:** Build a single-page marketing site themed **Tidalpunk** (oceanpunk \u002F retrofuturism, 2019–present): wave and tidal energy, kelp, coral, blues and teals, salvaged materials, a hopeful, aquatic, resourceful, sustainable seafaring future.\n\n**Required sections, in order:** Hero; Features (3 cards); How It Works (3 steps); Testimonials; Pricing (3 tiers); FAQ; Final CTA; Footer with secondary links — plus a sticky site header with navigation.\n\n**Reference specification:** The design tokens below condense the flagship spec at `references\u002F00-flagship-implementation-specs\u002Ftidalpunk.md`. The source does not declare light\u002Fdark modes; you must define and validate BOTH themes before publishing.\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:** `style=\"...\"` attributes, inline `\u003Cstyle>` blocks, and inline event handlers (`onclick=\"...\"` etc.).\n- Target all design properties, layout rules, and states exclusively via class or ID selectors.\n- HTML must remain semantic and visually agnostic: re-theming the page requires editing CSS only, never markup.\n\n**1.2 CSS Variables & Theme Tokens**\nStore every visual token in `:root` (light theme) and override under `.dark`. The provided palette is the **dark theme (\"Deep Current\")**; derive the **light theme (\"Sunlit Shallows\")** as specified. Canonical token names are mandatory:\n\n- **Dark theme:** `--bg-primary: #0a3d3f; --bg-secondary: #0f4d4f; --bg-tertiary: #145e60; --primary: #22b8a3; --on-primary: #04211f; --secondary: #3f7d4a (kelp); --accent: #d9a441 (driftwood gold); --text-primary: #e8f6f3; --text-secondary: #a9d6cf; --text-success: #8fe3b0; --text-error: #ff8a7a (coral); --border-default: #2f8b83; --border-success: #4fae7a; --border-error: #ff8a7a;` shadows `0 2px 8px \u002F 0 8px 20px \u002F 0 16px 40px rgba(0,0,0,.25\u002F.30\u002F.35)`.\n- **Light theme:** `--bg-primary: #e8f6f3; --bg-secondary: #d7ece7; --bg-tertiary: #bfdcd5; --primary: #0b6e60; --on-primary: #fefefe; --secondary: #2f6b3a; --accent: #8a6420 (darkened gold for text\u002Fborders; #d9a441 permitted only as a fill paired with dark text); --text-primary: #0a3d3f; --text-secondary: #456d67; --text-success: #256b43; --text-error: #b3402e; --border-default: #7fb5ad; --border-success: #2e7d4f; --border-error: #b3402e;` shadows use `rgba(10,61,63,.10\u002F.14\u002F.18)`.\n- Never use pure `#ffffff`; where a near-white is required, use `#fefefe`.\n- **Contrast pairing is mandatory per theme:** light background ↔ dark text, dark background ↔ light text. Validate ≥ 4.5:1 for body text and ≥ 3:1 for large text\u002FUI in BOTH themes before finishing.\n- **Structural tokens:** `--radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-pill: 999px; --shadow-sm\u002F--shadow-md` (+ `--shadow-lg` allowed); `--spacing-gap: 16px` plus the `--space-1…--space-24` scale; `--transition-fast: 150ms; --transition-normal: 250ms; --ease-standard: cubic-bezier(0.2,0,0,1); --z-dropdown: 1000; --z-modal: 1100; --z-toast: 1200;` and the type scale `--text-xs…--text-5xl`.\n- **Typography tokens:** `--font-base` and `--font-display` bound to `'Space Grotesk'` (Google Fonts) with `'Inter'` and `system-ui` fallbacks.\n- **Signature motif tokens (mandatory, from source):** `--wave-crest` (repeating scalloped radial-gradient arc pattern in teal) and `--kelp-fade` (`linear-gradient(180deg, var(--bg-secondary), var(--bg-primary))`). Every raised surface — header bottom edge, card tops, CTA band edges, footer top — carries the wave-crest scallop via `::before`\u002F`::after`, implemented purely in CSS gradients. No image assets anywhere.\n\n**1.3 Mandatory Dark Mode Support**\n- Implement tokens as: `:root` = light theme; `.dark` on `\u003Chtml>` = dark overrides. Set `color-scheme: light` \u002F `dark` accordingly so native controls match.\n- Provide a **visible theme toggle** in the header: Material Symbols icon (`light_mode` \u002F `dark_mode`), correct `aria-pressed` state, and an `aria-label` describing the action (e.g., \"Switch to dark theme\").\n- **Persistence:** store the choice in `localStorage` (key `tidalpunk-theme`); on first visit fall back to `prefers-color-scheme`. Theme initialization must be the first task executed in `script.js` (the single deferred entry point) to minimize flash.\n- Switching themes must require zero HTML restructuring.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- Build all layout structures with Flexbox. Every flex container defaults to `align-items: center` unless an exception is explicitly justified (e.g., card content columns use `flex-start`; equal-height pricing cards use `stretch`) — document each exception in a CSS comment.\n- Mobile-first: all multi-column rows collapse to a single column at ≤ 768px; no horizontal scrolling at any viewport ≥ 320px; fluid typography via `clamp()`.\n\n**1.5 Framework Default & Tailwind CSS Integration**\n- Use Tailwind CSS for layout\u002Fspacing utilities. Define themed component classes (`.btn`, `.card`, `.input`, `.badge`, `.input-group`) once via `@layer components` \u002F `@apply`, driven by the CSS variables above. Where a token exists, never hard-code a one-off value.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Load **Space Grotesk** (weights 400–700) and **Inter** from Google Fonts via `\u003Clink>` with `preconnect`.\n- Icons: **Google Material Symbols (Rounded)**. **Explicitly forbidden:** raw inline SVGs, local icon files, emoji-as-icons. Decorative icons get `aria-hidden=\"true\"`; meaningful icons are paired with adjacent or visually hidden text.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button** — all states via CSS classes:\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px, `--radius-pill`, weight 600.\n- **Variants:** `.btn--primary` (teal fill + `--on-primary` text), `.btn--accent` (gold fill + dark text), `.btn--ghost` (transparent, `--border-default`), `.btn--danger` (coral, visually distinct in both themes).\n- **Hover:** `translateY(-1px)` + `--shadow-md`, `cursor: pointer`. **Focus-visible:** 2px `--accent` outline, 2px offset. **Active:** `transform: scale(0.97)`.\n- **Loading:** sets `aria-busy=\"true\"`, disables pointer events to prevent double submission, renders a CSS spinner (border\u002Fconic circle) or pulsing Material icon inside the button without changing its dimensions.\n- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n- **Success\u002FError:** temporary border\u002Ficon shift driven by `--text-success` \u002F `--text-error`, announced via an `aria-live` region.\n\n**2.2 Card**\n- **Default:** flex column, `--bg-secondary`, 1px `--border-default`, `--radius-lg`, `--shadow-md`, wave-crest `::before` top edge.\n- **Hover:** `translateY(-2px)` + `--shadow-lg`. **Focus-within:** border shifts to `--primary`.\n- Define a `.card--skeleton` shimmer keyframe and an empty-state pattern (Material icon + guidance text) even if the landing page does not currently use them.\n\n**2.3 Form & Input** (newsletter signup in the Final CTA)\n- Structure: flex `.input-group` wrapping a `\u003Clabel>`, the `.input` field, and a dedicated error feedback container (`aria-live=\"polite\"`, wired via `aria-describedby`).\n- **States:** empty; focused (teal ring `0 0 0 3px rgba(34,184,163,0.28)`); filled; valid (`--border-success` + check icon); invalid (`--border-error`, error text + icon — never color alone); disabled; read-only.\n- `script.js` validates the email on submit; the button demonstrates loading → success\u002Ferror with an `aria-live` announcement. Simulate async with `setTimeout`; no backend.\n\n**2.4 Modal \u002F Popup**\n- No modal is required for this build; do not add one unless a section genuinely needs it. If any popup is introduced, it must implement: CSS-animated open\u002Fclose, centered flex overlay with backdrop, Material icon close button, `Esc` and overlay-click closing, keyboard focus trap, ARIA dialog semantics, and `--z-modal` stacking.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid `clamp()` sizing, responsive breakpoints, zero horizontal overflow.\n- **Smooth animations:** `transition: var(--transition-normal)` on all state changes; fully respect `prefers-reduced-motion` (disable transforms, wave motion, shimmer, and scroll animations).\n- **Accessibility:** semantic HTML5 landmarks (`header`\u002F`nav`\u002F`main`\u002F`section`\u002F`footer`); exactly one `h1` with logical heading order; a skip-to-content link; visible focus states; full keyboard operability for nav, accordion, toggle, and forms; ARIA roles\u002Flabels on custom widgets; `aria-live` regions for dynamic feedback; never rely on color alone to communicate state; contrast validated in both themes.\n- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.\n- **Stacking safety:** any dropdown\u002Fmobile menu uses `--z-dropdown`; any toast uses `--z-toast`.\n- Smooth in-page anchor scrolling with `scroll-margin-top` offsets for the sticky header (reduced-motion aware).\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **Files:** separate `index.html`, `style.css`, `script.js`. A single `\u003Cscript src=\"script.js\" defer>` reference; no other inline scripts.\n- **Naming convention:** BEM (`block__element--modifier`) consistently across the entire deliverable — matching the source (`.btn--primary`, `.card`); never mix conventions.\n- **Copy:** author original **English** copy in a hopeful ocean-tech voice (tidal turbines, kelp forests, coral restoration, salvaged hulls, grid parity, seafaring cooperatives). **No lorem ipsum.**\n- Organize `style.css` with section comments mirroring the token groups; every color, radius, shadow, spacing, and duration value must reference a token.\n- **Final check:** validate the page in both light and dark themes before declaring completion — the source spec does not declare modes, so both must be built and verified.\n\n---\n\n## 5. SECTION-BY-SECTION REQUIREMENTS\n\n**5.1 Header (sticky):** flex row — logo (Material `waves` icon + wordmark), anchor links (Features, How It Works, Testimonials, Pricing, FAQ), theme toggle, primary CTA. Wave-crest bottom edge via `::after`. On mobile, use an accessible disclosure menu (`aria-expanded`, `aria-controls`, `--z-dropdown`) or wrapped links — keyboard operable either way.\n\n**5.2 Hero:** kelp `.badge` eyebrow; `h1` in `--font-display` with a teal→gold gradient text fill (`background-clip: text`); subheadline; two CTAs — `.btn--primary` (\"Join the Tide\") and `.btn--ghost` anchor (\"See How It Works\"); a stats row of three flex chips (e.g., deployed capacity, uptime, emissions avoided). Decorative CSS-only wave scene: layered `--kelp-fade` gradients and wave-crest bands, with an optional slow ambient wave animation (reduced-motion aware). No images.\n\n**5.3 Features — 3 cards:** flex grid, 3 columns → 1 column. Each card: Material icon in a circular token chip (`bolt` for tidal energy, `grass` for kelp farming, `recycling` for salvaged materials), `h3`, 2–3 sentences of copy. Card states per 2.2.\n\n**5.4 How It Works — 3 steps:** flex row → column; numbered pill badges (01\u002F02\u002F03) connected by a CSS wave\u002Fline motif; each step has an icon, `h3`, and short copy.\n\n**5.5 Testimonials:** 3 cards; avatar as a circular Material icon (`sailing`, `anchor`, `person`); star rating via `star` icons; quote, name, and role. Cards are non-interactive — no fake links.\n\n**5.6 Pricing — 3 tiers:** themed names (Drift \u002F Current \u002F Tidal); each card: tier name, price + period, feature list with `check` icons, and a CTA with full 2.1 states (middle tier `.btn--primary`, others `.btn--ghost`). Middle tier: gold \"Most Popular\" `.badge`, accent border, elevated shadow. Equal-height cards via `align-items: stretch` (documented exception).\n\n**5.7 FAQ:** 5–6 items using native `\u003Cdetails>`\u002F`\u003Csummary>`; summary is a flex row with the question and an `expand_more` icon rotating 180° when open; panel styled as a card-like surface; animate where CSS allows, reduced-motion aware.\n\n**5.8 Final CTA:** full-bleed band with `--kelp-fade` background and wave-crest top\u002Fbottom edges; headline, supporting line, the newsletter `.input-group` per 2.3 (label, email input, `.btn--primary` submit demonstrating loading → success with `aria-live` feedback), plus a secondary anchor CTA.\n\n**5.9 Footer:** wave-crest top edge; flex\u002Fgrid columns with brand + tagline, three secondary link groups (Product, Company, Resources) as semantic `\u003Cnav>` lists, social icon buttons (Material icons with `aria-label`s, 44px targets), and a copyright line in `--text-secondary`. Secondary links may use `href=\"#\"` only because no targets were specified.\n\n**5.10 Global:** centered container (max-width ~1140px), consistent section spacing from the `--space` scale, eyebrow labels on each section, and a skip link as the first focusable element.\n",1791954988611]