[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-517-That-Girl-Clean-Girl":3},"# CODING-AI BUILD PROMPT — \"That Girl \u002F Clean Girl\" Landing Page\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality landing page on the first attempt. Do not ask clarifying questions; make decisive, tasteful choices within this specification.\n\n**Theme:** That Girl \u002F Clean Girl (2021–present wellness lifestyle aesthetic) — airy neutrals (beige, white, sage), minimal and clean, aspirational wellness, matcha\u002Fjournaling\u002Fgym culture, soft serif display + clean sans body, generous whitespace, ultra-soft shadows instead of loud borders. Nothing shouts.\n\n**Product concept (write ALL copy yourself in this voice):** Brand the page as **\"Rise\"** — a clean-girl routine app (gentle habit tracking, guided journaling, morning\u002Fmatcha rituals, movement). Copy is calm, aspirational, second-person English (\"Become her.\"). **Lorem ipsum is forbidden** — write real, finished copy for every section.\n\n**Sections (in this order):** Sticky Navigation → Hero → Features (3 cards) → How It Works (3 steps) → Testimonials → Pricing (3 tiers) → FAQ (accordion) → Final CTA (email capture) → 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:** `style=\"...\"` attributes, `\u003Cstyle>` blocks in HTML, and presentational HTML attributes.\n- Target everything via class\u002FID selectors. HTML must remain semantic and style-agnostic — a re-theme requires touching only `style.css`.\n- Use clean custom CSS (no framework was requested). Organize the file: tokens → base\u002Freset → components → sections. All reusable classes (`.btn`, `.card`, `.input-group`, `.badge`, `.nav`) must map back to CSS variables — never hardcode hex values in component or section rules.\n\n**1.2 CSS Variables & Theme Tokens**\nDefine all tokens in `:root` (light) and override in `.dark` (see 1.3). Required names and light-mode values:\n\n- **Colors:** `--primary: #9caf88` (sage), `--secondary: #c99f7a` (warm tan), `--bg-primary: #f7f3ec` (page), `--bg-secondary: #fefefe` (card surface — **required adjustment:** the source spec's `#ffffff` surface must be `#fefefe` per near-white rule), `--text-primary: #4a4238`, `--text-secondary: #8a7f6d`, `--text-success: #4f6b3d`, `--text-error: #ad4a38`, `--border-default: #e4dcc9`, `--border-error: #d99585`, `--border-success: #cdd9c0`.\n- **Supplementary theme tokens (keep from source spec):** `--surface-strong: #f0ebe1`, `--text-on-primary: #232a1c`, `--air-wash: linear-gradient(180deg, #fbf9f4 0%, #f7f3ec 100%)`, `--sage-ring: 0 0 0 3px rgba(156,175,136,0.18)`, `--font-base: 'Inter'`, `--font-display: 'Fraunces'`.\n- **Contrast pairing (mandatory, both themes):** light backgrounds pair with dark text; dark backgrounds pair with light text. `--text-secondary` is for secondary\u002Flarge text only (it is ~3.3:1 on `--bg-primary`); body copy uses `--text-primary`. Verify every text\u002Fbackground pair meets WCAG AA (≥4.5:1) and adjust values if any pair fails.\n- **Required accessibility adjustment to source spec:** solid sage buttons must use dark text (`--text-on-primary`) on `--primary` — white-on-sage fails contrast. Do not ship white text on `#9caf88`.\n- **Radius & shadows:** `--radius-sm: 10px`, `--radius-md: 16px`, `--radius-lg: 24px`, `--radius-pill: 999px`, `--shadow-sm\u002Fmd\u002Flg` exactly as given in the source token block.\n- **Spacing & transitions:** `--spacing-gap: 24px` plus the source `--space-*` scale; `--transition-fast: 150ms`, `--transition-normal: 250ms`, `--ease-standard: cubic-bezier(0.2, 0, 0, 1)`.\n- **Elevation\u002Fstacking:** `--z-nav: 40`, `--z-dropdown: 100`, `--z-modal: 1000`, `--z-toast: 1100`. Apply to sticky nav, mobile menu, and any overlay\u002Ftoast so layers never conflict.\n\n**1.3 Mandatory Dark Mode Support**\nThe source spec declares no color modes (\"source does not declare modes; validate in light and dark before publishing\") — therefore **you must design the dark theme yourself** and validate both modes before considering the build done. Required starting palette (verify AA, adjust if needed):\n\n- `--bg-primary: #201d17`, `--bg-secondary: #2a261f`, `--surface-strong: #342f26`, `--border-default: #3f3a30`, `--text-primary: #f1ece2`, `--text-secondary: #b0a692`, `--primary: #b9cba6`, `--secondary: #dcb691`, `--text-success: #a9c794`, `--text-error: #e5a08f`, `--border-error: #a05c4b`, `--border-success: #5c7048`, `--text-on-primary: #1d2415`, `--air-wash: linear-gradient(180deg, #26221b 0%, #201d17 100%)`, `--sage-ring: 0 0 0 3px rgba(185,203,166,0.22)`. Darken shadows (e.g., `rgba(0,0,0,0.35)`).\n\n- Implement tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `\u003Chtml>`; the class must win so the toggle always works.\n- **Persistence:** store the user's choice in `localStorage` (e.g., key `rise-theme`); on first visit fall back to `prefers-color-scheme`. Apply the theme in `script.js` (the only permitted script entry point).\n- **Toggle control:** a visible button in the nav showing Material Symbols `light_mode` \u002F `dark_mode`, with correct `aria-pressed` state and `aria-label` (\"Switch to dark theme\" \u002F \"Switch to light theme\"). No HTML restructuring when switching — only variable swaps.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- Build every layout with Flexbox (or CSS Grid where a 3-column card row genuinely needs it — the grid container's children must still be flex-aligned internally).\n- **Every flex container defaults to `align-items: center`** unless an explicitly justified exception is documented in a CSS comment.\n- Mobile-first: all multi-column rows (features, steps, pricing, testimonials, footer columns) collapse to a single column on small viewports. **No horizontal scrolling at any width — test down to 320px.**\n\n**1.5 Typography & Icons (Google Fonts Mandatory)**\n- Load **Fraunces** (display serif — all headlines, section titles, prices) and **Inter** (body\u002FUI) via Google Fonts `\u003Clink>` tags; bind to `--font-display` and `--font-base`.\n- Icons: **Google Material Symbols (Rounded style)** via its official stylesheet. **Raw inline SVGs and local icon files are forbidden.** Note: Material Symbols contains no brand logos — footer social links must be text links (optionally with a generic symbol like `arrow_outward`), never fake logo icons.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Buttons**\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px; pill radius; variants `.btn` (soft surface + border + `--shadow-sm`), `.btn--primary` (sage bg + `--text-on-primary`), `.btn--ghost` (transparent, sage text).\n- **Hover:** lift (`translateY(-1px)`) + shadow shift to `--shadow-md`, `cursor: pointer`.\n- **Focus-visible:** remove default outline, apply `--sage-ring` — distinct in both themes.\n- **Active\u002Fpressed:** `transform: scale(0.97)`.\n- **Loading:** class `.is-loading` — disables pointer events, prevents double-submit in JS, swaps label for a CSS spinner (animated Material Symbol `progress_activity` or border spinner) **without changing button dimensions**.\n- **Disabled:** `opacity: 0.5`, grayscale filter, `cursor: not-allowed`.\n- **Success\u002FError:** `.is-success` \u002F `.is-error` feedback styles driven by `--text-success` \u002F `--text-error` (used by the Final CTA form).\n\n**2.2 Cards**\n- **Default:** flex layout, `--bg-secondary` surface, `1px solid --border-default`, `--radius-lg`, `--shadow-md`, generous internal padding (`--space-8`).\n- **Hover:** `translateY(-2px)` + elevation to `--shadow-lg`.\n- **Focus-within:** sage border highlight when a child button\u002Flink is focused.\n- **Skeleton:** define a shimmer keyframe utility in CSS; apply only if you simulate async loading. **Empty state:** not applicable to this static page — do not invent dead code.\n\n**2.3 Form & Input (Final CTA email capture)**\n- Structure: flex `.input-group` wrapping a visible `\u003Clabel>`, the `.input` field, and a dedicated error\u002Fstatus container below.\n- **States via classes:** empty, focused (sage border + `--sage-ring`), filled, valid (`--border-success` + `check_circle` symbol), invalid (`--border-error`, error text in `--text-error`, `error` symbol, `aria-invalid=\"true\"`, message linked via `aria-describedby`), disabled, read-only.\n- Submit status (sending\u002Fsuccess\u002Ferror) is announced through an `aria-live=\"polite\"` status region — never by color alone.\n\n**2.4 FAQ Accordion**\n- Each item: a `\u003Cbutton>` (visible focus ring, chevron `expand_more` rotating 180° via CSS) with `aria-expanded` + `aria-controls`, controlling a region with matching `id` and `role=\"region\"`.\n- Animate open\u002Fclose in pure CSS (e.g., `grid-template-rows: 0fr → 1fr`). Fully keyboard-operable; no mouse-only interactions. No modals are required — if you introduce any overlay, it must follow the full modal spec (animated open\u002Fclose states, backdrop, Material `close` button, focus trap, `Esc` and overlay-click dismissal, `--z-modal`).\n\n**2.5 Navigation & Mobile Menu**\n- Sticky pill-shaped nav (source `.nav` pattern): Fraunces wordmark \"Rise,\" anchor links (Features, How It Works, Testimonials, Pricing, FAQ), theme toggle, primary CTA \"Start free.\"\n- Below ~820px: links collapse behind a `menu` icon button; panel uses `--z-dropdown`, opens\u002Fcloses with `aria-expanded`, closes on `Esc` and outside click, and moves focus into the panel on open.\n- Include a visually hidden \"Skip to content\" link as the first focusable element. Use CSS `scroll-behavior: smooth` + `scroll-margin-top` on sections for anchor offsets.\n\n---\n\n## 3. PAGE SECTIONS & CONTENT SPECIFICATION\n\n- **Hero:** badge pill (`spa` symbol + \"The clean girl operating system\"), Fraunces H1 (\"Become her.\" or equivalent), Inter subcopy explaining Rise, primary CTA \"Start your routine — free\" + secondary \"See how it works.\" Visual is **CSS-only** (no external images): layered floating cards — a journal card (ruled lines via `repeating-linear-gradient`), a matcha card (`local_cafe`), a workout card (`self_improvement`) — over soft radial sage\u002Ftan gradient blobs at low alpha. Subtle entrance animation.\n- **Features (3 cards):** \"Gentle habit tracking\" (`checklist`), \"Guided journaling\" (`edit_note`), \"Movement that fits\" (`fitness_center`) — icon, Fraunces title, real benefit copy. Card hover\u002Ffocus-within per 2.2.\n- **How It Works (3 steps):** numbered 01\u002F02\u002F03 (\"Design your sunrise\" → \"Live the routine\" → \"Reflect & rise\"), icons, connecting line; horizontal 3-column on desktop, vertical timeline on mobile.\n- **Testimonials:** 3 quote cards, 5-star ratings using `star` symbols (never color-only — include the rating as text for screen readers via `aria-label`), first name + descriptor (\"Maya R. — 5AM club, member since 2023\").\n- **Pricing (3 tiers):** \"Morning Flow\" (Free), \"That Girl\" ($9\u002Fmo — highlighted: sage ring\u002Fborder, \"Most popular\" badge, slight elevation), \"Studio\" ($18\u002Fmo). Feature lists with `check` symbols; each tier has a CTA button with full 2.1 states.\n- **FAQ:** 5 real Q&As (cancellation, equipment needs, offline use, \"is this another guilt-trip app?\", dark mode) built per 2.4.\n- **Final CTA:** full-width panel on `--surface-strong` \u002F `--air-wash`, Fraunces headline (\"Your era starts tomorrow, 6AM.\"), email form per 2.3 with loading → success (\"You're on the list\") and error states.\n- **Footer:** brand block + tagline; four secondary-link columns (Product, Company, Resources, Legal) with real link labels; social as text links; copyright line. All links get `:focus-visible` sage ring.\n\n---\n\n## 4. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid type via clamp(), breakpoints at ~640\u002F820\u002F1024px, zero horizontal overflow.\n- **Smooth animations:** `transition: var(--transition-normal) var(--ease-standard)` on all state changes; optional IntersectionObserver fade-up reveals that default to visible without JS and are fully disabled under `prefers-reduced-motion: reduce` (which also sets `scroll-behavior: auto` and removes all transforms).\n- **Accessibility:** AA contrast in light AND dark; never rely on color alone for state; semantic HTML5 landmarks (`header`, `nav`, `main`, `section` with `aria-labelledby`, `footer`); logical focus order; full keyboard operability; `aria-live` for all dynamic feedback.\n- **Mandatory visual feedback:** every hover, click, focus, and submission produces a visible state change.\n- **Destructive actions:** none in scope; if any appear, they must be visually distinct in both themes.\n\n---\n\n## 5. DELIVERABLE & OUTPUT FORMAT\n\n- **Files:** separate `index.html`, `style.css`, `script.js`. `script.js` is the only script, referenced once with `defer` — no inline script blocks. Only external `\u003Clink>` tags (Google Fonts, Material Symbols) in `\u003Chead>`.\n- **Naming:** consistent **BEM** throughout (`.btn`, `.btn--primary`, `.card`, `.card__title`, `.input-group__error`) — never mix conventions.\n- **No placeholders:** all copy is final, real English text in the theme voice; no lorem ipsum, no TODOs, no stub sections.\n- **Final validation before delivery:** render and verify both light and dark themes — token pairing, toggle persistence, AA contrast, keyboard-only navigation of nav, FAQ, form, and focus rings. The build is not complete until both modes are validated.\n",1791954988577]