[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-773-PETRICHOR-rain-on-a-night-window":3},"# SYSTEM SPECIFICATION — CODING AGENT BUILD BRIEF\n## Landing Page: \"PETRICHOR — Rain on a Night Window\" (Glassmorphism, Complete Build, First Attempt)\n\nYou are a Senior Frontend Engineer and Expert UI Designer. Build a **complete, production-quality landing page in a single pass**. Do not ask clarifying questions — make reasonable, taste-driven decisions that stay strictly within this specification.\n\n**Theme:** PETRICHOR — rain on a night window. Mood: monsoon, water droplets on glass, diffused city light through a wet window. **Style:** Glassmorphism, 2020s digital. **Signature effects:** blur, translucent glass surfaces, hover feedback. **Copy language:** All user-facing copy must be written in **English**.\n\n**Required sections:** Header\u002FNav · Hero · Features (3 cards) · How It Works (3 steps) · Testimonials · Pricing (3 tiers) · FAQ · Final CTA · Footer with secondary links.\n\n**Theme mode note:** The source spec marks **Light mode as primary** (`✓ Light \u002F ○ Dark`). Light mode is therefore the default presentation — but Dark Mode support **remains mandatory** (see Rule 1.3); in this theme, dark mode is the literal \"night window\" mood and must be fully designed, not an afterthought.\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. No inline event-handler attributes (`onclick`, etc.) either — all JS behavior binds via `addEventListener` in `script.js`.\n- **Class\u002FID selectors only:** Every visual property, layout rule, and state is targeted via class or ID selectors defined in `style.css`.\n- **Clean, semantic markup:** HTML stays structural and agnostic of styling. Changing the look must require editing only `style.css`, never the markup.\n- **No images, no inline SVGs:** All atmosphere (gradients, orbs, shadows, textures) is built purely with CSS. Icons come exclusively from Google Material Symbols.\n\n### 1.2 CSS Variables & Theme Tokens\nAll visual tokens must live in `:root` and the `.dark` class. Use **exactly this mapping** for the PETRICHOR palette:\n\n```css\n:root {\n  \u002F* Light (default) — \"monsoon daylight through wet glass\" *\u002F\n  --primary: #5a7ac9;            \u002F* accent: links, focus rings, highlights *\u002F\n  --secondary: #2a3350;          \u002F* deep navy: primary button surface *\u002F\n  --bg-primary: #dfe8ff;         \u002F* soft rain-light base — NOT pure white *\u002F\n  --bg-secondary: #fefefe;       \u002F* elevated solid surface — never #ffffff *\u002F\n  --text-primary: #2a3350;       \u002F* dark text on light bg (pairing enforced) *\u002F\n  --text-secondary: #7a8699;     \u002F* supporting\u002Fmeta copy *\u002F\n  --text-success: #2e7d63;\n  --text-error: #c2455a;\n  --border-default: rgba(122, 134, 153, 0.30);\n  --border-success: rgba(46, 125, 99, 0.55);\n  --border-error: rgba(194, 69, 90, 0.55);\n  --glass-bg: rgba(254, 254, 254, 0.40);\n  --glass-border: rgba(201, 210, 232, 0.55);\n  --shadow-text: 0 2px 16px rgba(90, 122, 201, 0.18);\n\n  --radius-sm: 8px;  --radius-md: 14px;  --radius-lg: 24px;\n  --shadow-sm: 0 2px 12px rgba(5, 7, 12, 0.08);\n  --shadow-md: 0 14px 36px rgba(5, 7, 12, 0.16);\n  --spacing-gap: 1.5rem;\n  --transition-fast: 140ms;  --transition-normal: 280ms;\n  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);\n  --z-header: 90;  --z-dropdown: 100;  --z-modal: 1000;  --z-toast: 1100;\n  --font-base: 'Inter', sans-serif;\n  --font-display: 'Outfit', sans-serif;\n}\n\n.dark {\n  \u002F* Dark — \"rain on a night window\" (the theme's native mood) *\u002F\n  --bg-primary: #05070c;\n  --bg-secondary: #2a3350;\n  --text-primary: #dfe8ff;       \u002F* light text on dark bg (pairing enforced) *\u002F\n  --text-secondary: #c9d2e8;\n  --text-success: #7fd8b4;\n  --text-error: #ff9099;\n  --border-default: rgba(223, 232, 255, 0.18);\n  --glass-bg: rgba(42, 51, 80, 0.38);\n  --glass-border: rgba(223, 232, 255, 0.14);\n  --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.45);\n  --shadow-md: 0 14px 36px rgba(0, 0, 0, 0.55);\n  --shadow-text: 0 4px 28px rgba(90, 122, 201, 0.35);\n}\n```\n\n- **Contrast pairing is mandatory in every theme:** light backgrounds pair with dark text, dark backgrounds with light text. Verify ≥ 4.5:1 for body text and ≥ 3:1 for large text in **both** modes. `#7a8699` on `#dfe8ff` is only acceptable for large\u002Fweighted meta text — for small secondary copy, derive a darker blend toward `#2a3350` instead of failing contrast.\n- **No foreign hues:** Derive all tints\u002Fshades via `rgba()` blends of the six palette colors. The only permitted additions are the semantic success\u002Ferror tokens above. Where white is needed, use `#fefefe`, never `#ffffff`.\n\n### 1.3 Mandatory Dark Mode Support\n- **Tokens:** Dark values live under the `.dark` class applied to `\u003Chtml>`. Background and text variables must swap seamlessly with zero HTML restructuring.\n- **Persistence:** `script.js` reads `localStorage` on load; on first visit, fall back to `prefers-color-scheme`. The toggle writes the choice back to `localStorage`.\n- **Visible toggle control** in the header: a real `\u003Cbutton>` with dynamic `aria-label` (\"Switch to dark mode\" \u002F \"Switch to light mode\"), correct `aria-pressed` state, and Google Material Symbols `light_mode` \u002F `dark_mode` icons (icon visibility switched via CSS classes, not inline swaps).\n- **Design dark mode with equal care:** it is the literal theme concept — deep night glass, faint neon-blue glow (`--shadow-text`), luminous `#dfe8ff` text.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n- **Build every layout structure with Flexbox.** Every flex container defaults to `align-items: center` unless an exception is explicitly justified below.\n- **Documented exceptions (the only permitted deviations):** `.input-group` uses `flex-direction: column; align-items: stretch` (form fields need full-width labels\u002Finputs); `.card` bodies and footer columns may use `flex-start` for top-aligned text; nav\u002Fheader use `space-between` for main-axis distribution.\n- **Mobile-first:** all rows convert to columns on small viewports via `clamp()` sizing and `@media` breakpoints. **Zero horizontal scrolling at any viewport width.**\n\n### 1.5 Styling Approach\n- Use Tailwind CSS **or** clean custom CSS — pick **one** path and never mix. Every utility must map back to the CSS variables above or to reusable semantic classes: `.btn`, `.card`, `.input-group`, `.glass`.\n- If custom CSS: organize as tokens → base → components → sections, mirroring `@layer` discipline.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n- **Fonts:** Load from Google Fonts — **Outfit** (display headings, `--font-display`) and **Inter** (body, `--font-base`) — via `\u003Clink>` tags with `display=swap`. Bind families only through the CSS variables. Use `clamp()` for fluid type scale; hero `h1` carries a subtle `text-shadow: var(--shadow-text)`.\n- **Icons:** Google Material Symbols (Outlined). Forbid raw inline SVGs, local icon files, emoji-as-icons, and any other icon source. Suggested thematic icons: `water_drop`, `rainy`, `air`, `waves`, `bolt`, `format_quote`, `expand_more`, `arrow_forward`, `check_circle`, `error`, `light_mode`, `dark_mode`, `menu`, `close`, `progress_activity`.\n\n---\n\n## 2. THEME DIRECTION — PETRICHOR GLASSMORPHISM\n\n### 2.1 Atmosphere Layer (pure CSS, decorative)\n- **Background wash:** a soft, layered gradient built from `--bg-primary` with faint bands of `#c9d2e8` \u002F `#2a3350`; in dark mode, a deep night wash of `#05070c` into `#2a3350`.\n- **Ambient \"city light\" orbs:** 2–3 large, heavily blurred radial gradients of `#5a7ac9` and `#7a8699` positioned behind content (`filter: blur(...)`, `pointer-events: none`, `aria-hidden`) — the blurred streetlights of a rainy night.\n- **Optional rain streak layer:** fine diagonal `repeating-linear-gradient` streaks on a fixed pseudo-element, animated slowly with `@keyframes` translation. Extremely subtle, `pointer-events: none`, stacked **below** content, and fully disabled under `prefers-reduced-motion`.\n\n### 2.2 The Glass Recipe\nDefine a reusable `.glass` surface:\n- `background: var(--glass-bg);`\n- `backdrop-filter: blur(16px) saturate(150%);` plus the `-webkit-backdrop-filter` prefix;\n- `border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);`\n- **Fallback:** inside `@supports not (backdrop-filter: blur(1px))`, give `.glass` a more opaque background so content stays readable everywhere.\n- Apply to: header, hero panel, all cards, pricing tiers, testimonial cards, final CTA panel.\n\n### 2.3 Hover & Motion Language\n- **Every interactive glass element** lifts on hover: `transform: translateY(-2px)`, stronger `--shadow-md`, brighter `--glass-border`, subtle `filter: brightness(1.05)`.\n- All state changes transition with `transition: all var(--transition-normal) var(--ease-standard)`; quick feedback uses `--transition-fast`.\n- Use `box-shadow`, `text-shadow`, `transforms`, and `border-radius` generously — this is the spec's requested CSS vocabulary.\n\n---\n\n## 3. COMPONENT DESIGN SPECIFICATIONS\n\n### 3.1 Buttons — `.btn` (all states, styled via CSS classes only)\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px, `border-radius: var(--radius-md)`, `font-family: var(--font-base)`, medium weight.\n- **Variants:** `.btn--primary` = deep navy surface (`var(--secondary)`) with `#dfe8ff` text in both themes; `.btn--secondary` = ghost glass (`var(--glass-bg)`, `var(--glass-border)`, `var(--text-primary)`); `.btn--danger` = visually distinct in both themes via `--text-error` \u002F `--border-error`.\n- **Hover:** brightness\u002Fshadow shift, `cursor: pointer`.\n- **Focus-visible:** distinct ring via CSS variables (`box-shadow: 0 0 0 3px rgba(90, 122, 201, 0.45)` + offset outline) — never remove it.\n- **Active\u002Fpressed:** `transform: scale(0.97)`.\n- **Loading (`.is-loading`):** disables interaction and double-clicks (`pointer-events: none`, `aria-busy=\"true\"`), shows a rotating CSS spinner or animated `progress_activity` Material Symbol, and **never changes button dimensions**.\n- **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`.\n- **Success\u002FError (`.is-success` \u002F `.is-error`):** temporary feedback tinted by `--text-success` \u002F `--text-error`, paired with an icon and, where textual, an `aria-live` announcement — never color alone.\n\n### 3.2 Cards — `.card` (glass)\n- **Default:** flexible Flexbox column, `.glass` recipe, `--bg-secondary`-consistent surfaces, generous `--spacing-gap`.\n- **Hover:** elevation shift + `translateY(-2px)` (see 2.3).\n- **Focus-within:** card border highlights toward `--primary` whenever a child link\u002Fbutton receives focus.\n- **Loading (skeleton):** define a shimmer `@keyframes` animation class (gradient sweep) that preserves layout dimensions.\n- **Empty state:** define a structured fallback — centered Google Material Icon, short guidance text — reusable if any dynamic area renders no content.\n\n### 3.3 Forms & Inputs — `.input-group` (used in the Final CTA email capture)\n- **Structure:** a Flexbox container (`flex-direction: column; align-items: stretch` — the justified exception in 1.4) wrapping a `\u003Clabel>`, the `\u003Cinput>`, and a **dedicated error-feedback element** referenced by `aria-describedby` and announced via `aria-live=\"polite\"`.\n- **States (all styled via classes\u002Fpseudo-classes):** empty; focused (accent outline ring); filled; valid (`.is-valid`: success border + `check_circle` icon); invalid (`.is-invalid`: `--border-error`, error text, `error` icon + message — never color alone); disabled; read-only.\n- **Submission flow:** validate in `script.js`; render button loading state, then success (`is-success` + status message) or error (`is-error` + message) feedback in the `aria-live` region.\n\n### 3.4 Modal \u002F Popup (conditional — only if you implement any overlay, e.g., a plan-details dialog)\n- **States:** opening, open, loading, success\u002Ferror, closing — all animated via CSS transitions.\n- **UX:** centered Flexbox container (`align-items: center`), blurred backdrop overlay, Google Material Symbol `close` button, keyboard **focus trapping**, `role=\"dialog\"` + `aria-modal`, close via `Esc` and overlay click, focus returns to the trigger on close. Stack at `--z-modal`; any toast at `--z-toast`.\n\n### 3.5 FAQ Accordion\n- Each trigger is a real `\u003Cbutton>` with `aria-expanded` and `aria-controls`; each panel carries `role=\"region\"` + `aria-labelledby`. Panels animate open\u002Fclose in pure CSS (e.g., `grid-template-rows: 0fr → 1fr` with inner `overflow: hidden`). The `expand_more` chevron rotates 180° on open. Fully keyboard operable; respect `prefers-reduced-motion`.\n\n### 3.6 Header \u002F Nav\n- **Sticky glass header** (`.glass`, `position: sticky`, `z-index: var(--z-header)`): brand wordmark \"Petrichor\", anchor links with hover + focus-visible treatments, theme toggle (per 1.3).\n- **Mobile:** below ~768px, links collapse behind a `menu`\u002F`close` Material Symbol button; the menu panel is a glass dropdown at `--z-dropdown`, animated, keyboard operable, with a visible focus ring on the toggle.\n\n---\n\n## 4. PAGE STRUCTURE & CONTENT REQUIREMENTS\n\nWrite **original, specific English copy** in the theme's voice — no lorem ipsum, no filler. Invent one coherent product narrative (e.g., an ambient rain\u002Ffocus-sleep companion) and keep every section consistent with it. Use semantic landmarks: `\u003Cheader>`, `\u003Cnav>`, `\u003Cmain>`, `\u003Csection aria-labelledby>`, `\u003Cfooter>`, exactly one `\u003Ch1>`, logical heading order.\n\n1. **Hero** — `h1` display headline with soft `--shadow-text`, supporting subhead, one `.btn--primary` and one `.btn--secondary` CTA (Material Symbol `arrow_forward`), composed on a large `.glass` panel over the atmospheric background.\n2. **Features** — exactly 3 `.card` glass cards: frosted icon circle (Material Symbols, e.g., `water_drop`, `air`, `rainy`), `h3` title, one concise benefit paragraph each.\n3. **How It Works** — 3 numbered steps (`01 \u002F 02 \u002F 03` badges in glass circles), top-aligned, stacking vertically on mobile; a subtle connector line is allowed via CSS pseudo-elements only.\n4. **Testimonials** — 3 glass cards: `format_quote` icon, quoted English copy, attribution with name + role and a monogram initials circle (no photos).\n5. **Pricing** — 3 tiers with themed names (e.g., Drizzle \u002F Monsoon \u002F Tempest): price, feature list with `check_circle` icons, per-tier CTA. The middle tier uses `.card--featured`: accent border, elevation, and a \"Most popular\" badge.\n6. **FAQ** — 5 themed questions as the accordion from 3.5.\n7. **Final CTA** — full-width glass panel: `h2`, one line of persuasive copy, and the email capture `.input-group` from 3.3 with the full validate → loading → success\u002Ferror flow.\n8. **Footer** — secondary link columns (Product \u002F Company \u002F Legal), brand, copyright line; every link has hover and focus-visible feedback.\n\n---\n\n## 5. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid `clamp()` sizing, breakpoints without horizontal overflow, rows → columns on mobile, minimum 44px touch targets everywhere.\n- **Smooth animations:** CSS transitions on all state changes via the token set; **must respect `prefers-reduced-motion`** (disable transforms, orb drift, rain layer, and shimmer when reduced).\n- **Accessibility:** sufficient contrast in both modes; never rely on color alone for any state; semantic HTML5; correct ARIA roles\u002Flabels on the toggle, accordion, form feedback, and any modal; logical DOM\u002Ffocus order; full keyboard operability with visible `:focus-visible` rings; `aria-live` regions for dynamic feedback.\n- **Mandatory visual feedback:** every click, hover, focus, and submission produces a visible state change.\n- **Destructive actions** (`.btn--danger`) must remain visually distinct in both light and dark themes.\n\n---\n\n## 6. DELIVERABLES & OUTPUT FORMAT\n\n- **Files:** `index.html`, `style.css`, `script.js` — separate, clean, commented. The HTML contains Google Fonts + Material Symbols `\u003Clink>` tags and **exactly one** `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` — no other script blocks, no inline styles.\n- **script.js scope:** theme toggle + `localStorage` persistence with `prefers-color-scheme` fallback; mobile menu; FAQ accordion; form validation with loading\u002Fsuccess\u002Ferror states; modal logic (only if a modal exists), including focus trapping.\n- **Naming:** BEM throughout (`block__element--modifier`), anchored on the semantic bases `.btn`, `.card`, `.input-group`, `.glass`. Never mix conventions.\n- **No unrequested placeholders:** since no source copy was supplied, write real, thematic English copy for every section — placeholder text is not permitted.\n- **Self-contained build:** no image assets, no external JS libraries, no inline SVGs. Deliver the complete landing page on this first attempt with nothing stubbed, commented-out, or left as TODO.\n",1791954992638]