[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-546-VSCO-Girl":3},"# System Prompt: Build \"VSCO Girl\" Landing Page (2019 Summer Aesthetic)\n\n**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Build a **complete, production-quality landing page on the first attempt**. Theme: **VSCO Girl** — the 2019 summer teen aesthetic (faded warm film-filter photos, scrunchies, Hydro Flasks, seashells, beige\u002Fteal beachy palette, casual, sunny, laid-back). Generate the full final code immediately, following every rule below.\n\n**Sections to build:** Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links — plus a sticky Navigation bar with theme toggle.\n\n**Copy Locale:** All user-facing copy must be written in **English**. Write original, on-theme copy in the casual, sunny 2019 VSCO Girl voice (e.g., \"golden hour\", \"save the turtles\", \"sksksk\" used sparingly and tastefully). **No lorem ipsum.** Invent one coherent fictional product — a summer essentials kit brand (metal straws, Hydro Flask, scrunchies, puka shells) — and keep every headline, feature, testimonial, and FAQ answer consistent with it.\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 Selectors Only:** All design properties, layout rules, and states must be targeted via class or ID selectors defined in `style.css`.\n* **Minimal HTML Modifications:** HTML must remain clean and semantic; changing the site's look must only require editing `style.css`, never the markup.\n\n### 1.2 CSS Variables & Theme Tokens\nStore **all** visual tokens in `:root` using CSS variables. Use the mandatory token names below, seeded with the VSCO Girl palette:\n\n```css\n:root {\n  \u002F* Mandatory theme tokens *\u002F\n  --bg-primary: #f3ece1;       \u002F* warm beige page background *\u002F\n  --bg-secondary: #fbf7f0;     \u002F* sand surface *\u002F\n  --primary: #6fa8a3;           \u002F* soft teal *\u002F\n  --secondary: #e8a598;         \u002F* sun-faded coral *\u002F\n  --text-primary: #4a4038;      \u002F* warm cocoa *\u002F\n  --text-secondary: #8a7c68;    \u002F* muted taupe *\u002F\n  --text-success: #4d8f88;\n  --text-error: #c96a5e;\n  --border-default: #d8c9ae;\n  --border-success: #4d8f88;\n  --border-error: #c96a5e;\n\n  \u002F* VSCO Girl extended tokens *\u002F\n  --surface-strong: #ece2d0;\n  --shell: #f0d9c0;\n  --radius-sm: 10px; --radius-md: 18px; --radius-lg: 28px; --radius-pill: 999px;\n  --shadow-sm: 0 2px 8px rgba(74,64,56,0.08);\n  --shadow-md: 0 6px 18px rgba(74,64,56,0.12);\n  --shadow-lg: 0 12px 32px rgba(74,64,56,0.15);\n  --font-base: 'Poppins', 'Segoe UI', sans-serif;\n  --font-display: 'Caveat', 'Poppins', cursive;\n  --spacing-gap: 1rem;\n  --transition-fast: 0.15s var(--ease-standard);\n  --transition-normal: 0.25s var(--ease-standard);\n  --ease-standard: cubic-bezier(0.3, 0, 0.2, 1);\n  --z-dropdown: 100; --z-modal: 200; --z-toast: 300;\n\n  \u002F* Signature VSCO Girl effects *\u002F\n  --faded-wash: linear-gradient(135deg, rgba(255,255,255,0.5), rgba(232,165,152,0.15));\n  --scrunchie-underline: 3px dashed var(--secondary);\n  --film-grain-opacity: 0.05;\n}\n```\n\n* **Contrast Pairing:** Every light background token pairs with a dark text token and vice versa — enforce this in **both** light and dark themes. Never pair `--primary` (`#6fa8a3`) as a button background with white text at below 4.5:1 contrast; instead define a darker `--primary-strong: #4d807b` for filled primary buttons in light mode (or use `--text-primary` on light teal). **Verify contrast numerically; do not assume.**\n* **Light Mode Background:** Do not use pure white. Where a near-white is needed, use `#fefefe`, never `#ffffff`.\n* **Border Radius, Shadows, Spacing, Transitions, Z-index:** Always consume the tokens above — never hardcode values that duplicate them.\n\n### 1.3 Mandatory Dark Mode Support\nThe source specification does not declare color modes — **you must design and validate dark mode yourself before publishing.** Dark mode must keep the warm, beachy mood (deep warm cocoa-teal backgrounds, sand-colored text — never pure black or cold gray):\n\n```css\n\u002F* Suggested dark tokens — verify contrast before shipping *\u002F\n--bg-primary: #211d17;  --bg-secondary: #2b261e;  --surface-strong: #373026;\n--shell: #3e352a;  --text-primary: #f3ece1;  --text-secondary: #b5a68f;\n--primary: #8fc0bb;  --secondary: #f0b3a6;  --primary-strong: #8fc0bb;\n--text-success: #7fc4bc;  --text-error: #e89488;\n--border-default: #4a4038;  --border-success: #7fc4bc;  --border-error: #e89488;\n--faded-wash: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(232,165,152,0.10));\n\u002F* shadows switch to rgba(0,0,0,0.4–0.6) equivalents *\u002F\n```\n\n* **Implementation:** Provide dark tokens under both `@media (prefers-color-scheme: dark)` (applied when `:root` has no explicit class) and a `.dark` class selector. Backgrounds and text must switch seamlessly via variables only — no HTML restructuring.\n* **Persistence:** Persist the user's choice in `localStorage` (key e.g. `theme`), falling back to `prefers-color-scheme` on first visit. Render a visible toggle in the nav using a Google Material Symbol (`light_mode` \u002F `dark_mode`) with correct `aria-pressed` and `aria-label` state, swapped via `script.js`.\n* **Dark-mode filled buttons:** On dark backgrounds, filled primary buttons may use `--primary` (`#8fc0bb`) with dark text (`#1b2624`) — again, verify ≥ 4.5:1.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n* Build every layout structure with **Flexbox** (`display: flex`).\n* **Default Alignment Rule:** Every flex container must default to `align-items: center` unless there is an explicitly justified exception (document the exception in a CSS comment).\n* **Mobile-First:** All multi-column rows (features, steps, pricing, footer link columns) must collapse to a single column on small viewports (≤ 768px). **No horizontal scrolling at any breakpoint** — use fluid widths, `clamp()` type scaling, and `min-width: 0` where needed.\n\n### 1.5 Framework & Styling Approach\nUse **clean custom CSS** driven by the token block above (no Tailwind, no CSS frameworks, no build step). Map utilities to generic reusable class names (`.btn`, `.card`, `.input`, `.badge`, `.nav`) and extend with BEM.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n* **Text Fonts:** Load **Poppins** (weights 400\u002F500\u002F600\u002F700) for body text and **Caveat** (weights 500\u002F600\u002F700) for display headlines via Google Fonts `\u003Clink>` tags in `\u003Chead>`. Bind them to `--font-base` and `--font-display`. Use `--font-display` (Caveat) for the hero headline, section titles, and the logo wordmark; Poppins everywhere else.\n* **Icons:** Use **Google Material Symbols** (e.g., `wb_sunny`, `beach_access`, `water_drop`, `eco`, `favorite`, `star`, `check_circle`, `expand_more`, `light_mode`, `dark_mode`) loaded via the official Google Fonts stylesheet.\n* **Explicitly forbidden:** raw inline SVGs, local icon files, emoji used as icons, and icon fonts other than Material Symbols.\n\n---\n\n## 2. VSCO GIRL ART DIRECTION (SIGNATURE MOVES)\n\nApply these three signature treatments consistently across nav, cards, buttons, and hero — they are the theme's identity:\n\n* **Faded Wash:** Every raised surface (`.nav`, `.card`, `.btn`, hero panel, pricing tiers) layers `background-image: var(--faded-wash)` over its background color, like a warm film filter.\n* **Scrunchie Underline:** Links, badges, and card bottoms use `border-bottom: var(--scrunchie-underline)` (3px dashed coral). Use it for the FAQ chevron divider, section eyebrow labels, and the featured pricing tier.\n* **Film Grain + Faded Photos:** Add a CSS-only grain overlay (a fixed pseudo-element using layered `repeating-radial-gradient` dots at `--film-grain-opacity`, `pointer-events: none`) over photo panels. Treat all photos with a faded warm film filter via CSS: `filter: saturate(0.85) contrast(0.95) sepia(0.18) brightness(1.05)` plus the `--faded-wash` overlay. If photos are used, source them from `https:\u002F\u002Fpicsum.photos\u002Fseed\u002F\u003Cseed>\u002F\u003Cw>\u002F\u003Ch>` with meaningful `alt` text; otherwise build CSS-only decorative panels (shell-toned gradients + large Material Symbol motifs). Never use inline SVG illustrations.\n* **Mood:** Casual, sunny, laid-back, generous whitespace, pill-shaped everything, soft shadows — never corporate, never sharp.\n\n---\n\n## 3. COMPONENT DESIGN SPECIFICATIONS\n\n### 3.1 Button Component (`.btn`, `.btn--primary`, `.btn--secondary`, `.btn--ghost`)\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` pill radius, `--faded-wash` overlay, minimum touch target **44×44px**, `cursor: pointer`.\n* **Hover:** Brightness\u002Fshadow shift (`box-shadow: var(--shadow-md)`; subtle `translateY(-1px)`).\n* **Focus:** Distinct `:focus-visible` ring using `outline: 2px solid var(--primary); outline-offset: 2px` — never remove it.\n* **Active\u002FPressed:** `transform: scale(0.97)` feedback.\n* **Loading:** `.btn--loading` disables pointer events, prevents double-clicks, and renders a **CSS-only spinner** (border-based rotating ring) or animated Material Symbol — button dimensions must not change.\n* **Disabled:** `opacity: 0.5`, desaturated, `cursor: not-allowed`.\n* **Success\u002FError:** `.btn--success` \u002F `.btn--error` temporary feedback styles driven by `--text-success` \u002F `--text-error` (used by the Final CTA form submit).\n* **Destructive:** If any destructive\u002Freset action exists, style it via `.btn--danger`, visually distinct in **both** themes.\n\n### 3.2 Card Component (`.card`, variants: `.feature-card`, `.pricing-card`, `.testimonial-card`)\n* **Default:** Flexible flexbox column layout, `--bg-secondary` background, `--faded-wash` overlay, `1px solid var(--border-default)` border, `--radius-lg`, `--shadow-md`, scrunchie-dashed bottom border.\n* **Hover:** `transform: translateY(-2px)` and shadow elevation to `--shadow-lg`.\n* **Focus-within:** Card border highlights (`--primary`) when a child link\u002Fbutton receives keyboard focus.\n* **Loading (Skeleton):** Define `.skeleton` shimmer animation (gradient sweep, `prefers-reduced-motion`-safe) and apply it to the Features grid on initial page load via `script.js` (simulated ~800ms fetch, then swap in real content) to prevent layout jumps.\n* **Empty State:** Define a `.empty-state` pattern (large Google Material Symbol + short guidance text) available for any dynamic region.\n\n### 3.3 Form & Input (`.input`, used in Final CTA email capture)\n* **States:** Empty, Focused (teal outline ring: `box-shadow: 0 0 0 3px rgba(111,168,163,0.25)`), Filled, Valid (`--border-success` + `check_circle` icon), Invalid (`--border-error`, error text in `--text-error`, `error` icon), Disabled, Read-only.\n* **Structure:** Flex container wrapping a `\u003Clabel>`, the `\u003Cinput type=\"email\">`, a dedicated error-feedback `\u003Cp>` bound with `aria-describedby`, and an `aria-live=\"polite\"` status region announcing validation and submit results.\n* **Never rely on color alone:** pair error borders with icon + text messages.\n\n### 3.4 FAQ Accordion (accessible disclosure — no modals on this page)\n* Each FAQ item is a `\u003Cbutton aria-expanded>` trigger (44×44px target, `expand_more` Material Symbol that rotates 180° on open) controlling a panel with `role=\"region\"` and `aria-labelledby`.\n* **Open\u002Fclose animated** via CSS transition on `grid-template-rows` (or max-height) — smooth in both themes, disabled under `prefers-reduced-motion`.\n* Fully keyboard operable (Enter\u002FSpace toggles), visible focus rings, multiple items may be open independently. No JS-free `\u003Cdetails>` styling shortcuts that break the animation or ARIA contract.\n\n---\n\n## 4. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by Default:** Fluid sizing, `clamp()` typography, zero horizontal overflow at every breakpoint from 320px up.\n* **Smooth Animations:** `transition: var(--transition-normal)` on all state changes; wrap all motion (reveals, shimmer, spinner, accordion) in `@media (prefers-reduced-motion: reduce)` overrides that disable transform\u002Ftransition motion.\n* **Accessibility (a11y):** ≥ 4.5:1 text contrast in **both** light and dark modes (verify numerically). Semantic HTML5 landmarks (`header`, `nav`, `main`, `section` with `aria-labelledby`, `footer`), exactly one `\u003Ch1>`, logical heading hierarchy, a skip-to-content link, logical DOM\u002Ffocus order, full keyboard operability, `aria-live` regions for dynamic feedback (form errors, submit status, theme change), and icon-only controls (theme toggle, social links) carrying `aria-label`.\n* **Mandatory Visual Feedback:** Every click, hover, and submission triggers a visible state change.\n* **Scroll behavior:** Anchor navigation uses smooth scrolling that respects `prefers-reduced-motion`; the active nav link is visually indicated.\n\n---\n\n## 5. PAGE STRUCTURE & SECTION SPECIFICATIONS\n\n* **5.1 Navigation (sticky):** Pill-shaped `.nav` per the signature style — Caveat logo wordmark, anchor links (Features, How It Works, Pricing, FAQ), theme toggle, and a small `.btn--primary` CTA. On ≤ 640px, collapse links behind a hamburger disclosure button (`aria-expanded`, animated panel, `--z-dropdown` stacking) — never overflow or wrap awkwardly.\n* **5.2 Hero:** Badge (\"Summer 2019, revived\"), Caveat display headline, one-sentence value proposition, primary CTA (\"Get the kit\") + ghost CTA (\"See how it works\"), and a film-filter photo\u002Fdecorative panel with grain overlay. Headline and CTAs in a flex row on desktop, column on mobile.\n* **5.3 Features (3 cards):** Three `.feature-card`s with Material Symbol icons — e.g., metal straws \u002F \"save the turtles\" (`eco`), all-day Hydro Flask hydration (`water_drop`), scrunchies & shells accessories (`favorite`) — each with title + 2-line description. Skeleton load on first render (see 3.2).\n* **5.4 How It Works (3 steps):** Three numbered steps (01 Pick your vibe → 02 We pack the essentials → 03 Unbox golden hour) connected by a dashed scrunchie-style line on desktop; stacked column on mobile.\n* **5.5 Testimonials:** Three `.testimonial-card`s with 5-star Material Symbol `star` ratings, casual quotes in the VSCO voice, and initial-based avatar circles (shell background, initials in `--text-primary`).\n* **5.6 Pricing (3 tiers):** \"Beach Bum\" (free), \"Golden Hour\" (mid, **featured** — elevated with `--primary-strong` background, paired light text, \"most loved\" badge, scrunchie border), \"Full Send\" (top). Each tier: name, price, feature list with `check_circle` icons, and a CTA button (featured tier gets `.btn--primary`).\n* **5.7 FAQ:** 5–6 questions in the accessible accordion (shipping, what's in the kit, returns, eco credentials, gifting).\n* **5.8 Final CTA:** Email capture card — label, `.input`, `.btn--primary` submit. Flow: client-side validation → `.btn--loading` (CSS spinner, ~1.2s simulated) → `.btn--success` with confirmation message announced via `aria-live`. Error state for invalid email.\n* **5.9 Footer:** Brand blurb, three secondary link columns (Shop, Help, Company), social icon links (Material Symbols with `aria-label`), eco tagline, and copyright. Links use scrunchie-dashed hover underline.\n\n---\n\n## 6. DELIVERABLE & OUTPUT FORMAT\n\n* **Files:** Three separate files — `index.html`, `style.css`, `script.js`. The HTML contains **one single `\u003Cscript src=\"script.js\" defer>` reference** and no inline `\u003Cscript>` blocks.\n* **Naming Convention:** **BEM** (`block__element--modifier`) exclusively — e.g., `.hero__title`, `.feature-card__icon`, `.pricing-card--featured`, `.faq__trigger`. Never mix conventions.\n* **script.js scope (vanilla JS only, no libraries):** theme toggle + `localStorage` persistence; mobile nav disclosure; FAQ accordion; email form validation\u002Floading\u002Fsuccess flow; features-grid skeleton simulation; optional `IntersectionObserver` scroll reveals (reduced-motion aware).\n* **No Unrequested Placeholders:** All copy must be real, on-theme English text. Placeholder images are permitted only for photos (picsum with seeds + descriptive `alt`).\n* **First-attempt completeness:** Ship the entire landing page — every section, every state, both themes — in one output. Do not leave TODOs, stubs, or \"to be implemented\" sections.\n",1791954989001]