[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-461-Kawaii":3},"# KAWAII LANDING PAGE — FULL BUILD SPECIFICATION FOR CODING AI\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality, single-page Kawaii-themed landing page on the first attempt. Every rule below is mandatory. All user-facing copy must be written in English.\n\n---\n\n## 1. Project Brief & Theme Direction\n\n- **Theme:** Kawaii — pastel, rounded, adorable, cartoon-like, inspired by Japanese cute culture (1970s–present). Mood: soft, bubbly, friendly.\n- **Fictional Product:** Invent one coherent concept (e.g., \"Mochi — the cutest way to plan your day,\" a kawaii planner app) and write all real copy in a bubbly, friendly English voice. No lorem ipsum.\n- **Required sections, in order:** Sticky Header\u002FNav → Hero → Features (3 cards) → How It Works (3 steps) → Testimonials → Pricing (3 tiers) → FAQ → Final CTA → Footer with secondary links.\n- **Visual language:** very rounded shapes (24–32px radii), bouncy overshoot animations, soft pastel gradients, kawaii face mascots (dot eyes, tiny mouth, blush), sparkle\u002Fstar decorations, gentle wobble animations, cloud-shaped section dividers.\n\n---\n\n## 2. Strict Rules & Architecture\n\n**2.1 CSS-First Architecture & Zero Inline CSS**\n- All styling lives in `style.css`. The `style=\"...\"` attribute is forbidden anywhere in the HTML.\n- Target all design properties, layout rules, and states exclusively via class or ID selectors.\n- Keep HTML semantic and styling-agnostic: changing the site's look must never require markup edits.\n\n**2.2 CSS Variables & Theme Tokens**\nDefine exactly these tokens in `:root`:\n\n```css\n:root {\n  \u002F* Kawaii palette — Light (default) *\u002F\n  --primary: #FFB6C1;            \u002F* Pastel Pink *\u002F\n  --secondary: #ADD8E6;          \u002F* Pastel Blue *\u002F\n  --accent-yellow: #FFFACD;      \u002F* Pastel Yellow *\u002F\n  --accent-mint: #B2F2BB;        \u002F* Pastel Mint *\u002F\n  --accent-lavender: #D8B4FE;    \u002F* Pastel Lavender *\u002F\n  --accent-peach: #FFDAB9;       \u002F* Pastel Peach *\u002F\n  --accent-grey: #E8E8E8;        \u002F* Soft Grey *\u002F\n\n  --bg-primary: #FFF5F5;         \u002F* Soft White page background — never #ffffff *\u002F\n  --bg-secondary: #FFFACD;       \u002F* alternating section background *\u002F\n  --bg-card: #FEFEFE;           \u002F* card surface *\u002F\n\n  --text-primary: #5A4A5A;      \u002F* Soft Plum — pairs with light backgrounds *\u002F\n  --text-secondary: #8A7590;\n  --text-success: #2F7D5D;      \u002F* deep mint, AA on pastels *\u002F\n  --text-error: #D94A6E;        \u002F* deep rose, AA on pastels *\u002F\n\n  --border-default: #FFB6C1;\n  --border-success: #B2F2BB;\n  --border-error: #FF9FB6;\n\n  --radius-sm: 16px;\n  --radius-md: 24px;\n  --radius-lg: 32px;\n  --radius-pill: 999px;\n\n  --shadow-sm: 0 4px 12px rgba(255, 182, 193, 0.2);\n  --shadow-md: 0 8px 24px rgba(255, 182, 193, 0.35);\n\n  --spacing-gap: 1.5rem;\n  --transition-fast: 150ms cubic-bezier(0.34, 1.56, 0.64, 1);\n  --transition-normal: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);\n  --ease-standard: cubic-bezier(0.34, 1.56, 0.64, 1);\n\n  --z-dropdown: 100;\n  --z-modal: 200;\n  --z-toast: 300;\n\n  --font-base: 'Quicksand', sans-serif;\n  --font-heading: 'Nunito', sans-serif;\n}\n```\n\n- **Contrast pairing is mandatory in every theme:** light background tokens pair with dark text tokens, dark background tokens pair with light text tokens. Never place white body text on pastel fills — pastel-filled components always use `--text-primary` (Soft Plum).\n- Never use `#ffffff`; where a near-white is needed, use `#fefefe`.\n\n**2.3 Mandatory Dark Mode Support**\n- Define dark token overrides both under a `.dark` class on `\u003Chtml>` and under `@media (prefers-color-scheme: dark) { :root:not(.light) { … } }` so system-preference users get dark mode before JS runs:\n\n```css\n.dark { \u002F* mirrored in the media query block *\u002F\n  --bg-primary: #2B2233;         \u002F* soft deep plum *\u002F\n  --bg-secondary: #352A40;\n  --bg-card: #3C3048;\n  --text-primary: #FFF5F5;       \u002F* light text on dark bg — pairing enforced *\u002F\n  --text-secondary: #D9C7DC;\n  --text-success: #8FE3B8;\n  --text-error: #FF9FB6;\n  --border-default: rgba(255, 182, 193, 0.45);\n  --border-success: rgba(178, 242, 187, 0.5);\n  --border-error: rgba(255, 159, 182, 0.6);\n  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.35);\n  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);\n}\n```\n\n- Keep the pastel accents (`--primary`, `--secondary`, `--accent-*`) unchanged in dark mode — they pop against deep plum.\n- `script.js` must persist the user's choice in `localStorage` (key `kawaii-theme`), fall back to `prefers-color-scheme` on first visit, and toggle `.dark`\u002F`.light` on `\u003Chtml>` without any HTML restructuring.\n- The header must contain a visible toggle button using Material Symbols `light_mode`\u002F`dark_mode`, with correct `aria-pressed` and a dynamically updated `aria-label`.\n- **Exception clause:** The source style spec marks dark mode as \"Not Recommended\"; it is nevertheless mandatory for this build — implement it as a soft deep-plum night palette that preserves the pastel accents so the page stays kawaii in both modes.\n\n**2.4 Flexbox Layout & Mobile-First Alignment**\n- Build every layout structure with Flexbox. Every flex container defaults to `align-items: center` unless a rule explicitly justifies another value (the only sanctioned exception: `align-items: stretch` for equal-height pricing cards).\n- Mobile-first: all multi-column rows (features, steps, testimonials, pricing, footer columns) collapse to a single column below 768px. No horizontal scrolling at any viewport; use fluid `clamp()` sizing and a centered `.container` (max-width 1200px, horizontal padding via `clamp()`).\n\n**2.5 Framework Default**\n- Use clean, hand-authored custom CSS in `style.css` — no framework build step. Any utility-style class must map back to the CSS variables above. Never mix naming conventions.\n\n**2.6 Typography & Icons (Google Fonts Mandatory)**\n- Load via `\u003Clink>` with `preconnect`: **Nunito** (headings, weights 700–800) and **Quicksand** (body, weights 500–700), bound to `--font-heading` \u002F `--font-base`.\n- Load **Google Material Symbols Rounded** (FILL 1) and use it for every functional icon: `cruelty_free` (bunny logo), `favorite`, `auto_awesome`, `check_circle`, `star`, `expand_more`, `dark_mode`\u002F`light_mode`, `menu`, `close`, `mail`, `person`, `celebration`, `error`, `task_alt`, `palette`, `forum`, `share`, `arrow_forward`. Raw inline SVGs and local icon files are forbidden for icons.\n- **Exception clause:** Bespoke kawaii decorative artwork — face mascots (dot eyes, tiny mouth, blush), cloud-shaped section dividers, and sparkle\u002Fstar shapes — may be hand-authored inline SVG because it is custom artwork unavailable in Material Symbols; every functional icon must still be a Google Material Symbol.\n\n---\n\n## 3. Component Design Specifications\n\n**3.1 Buttons**\n- **Default:** `.btn` — `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px, `border-radius: var(--radius-pill)`, 2px border, font-weight 700, padding `0.75rem 1.75rem`. Variants: `.btn--primary` (pink fill, plum text), `.btn--secondary` (pastel blue fill, plum text), `.btn--ghost` (transparent, pink border), `.btn--danger` (deep rose fill, visually distinct in both themes).\n- **Hover:** `transform: translateY(-2px) scale(1.03)` + `box-shadow: var(--shadow-md)` with the bouncy easing; `cursor: pointer`.\n- **Focus:** `:focus-visible` renders a distinct ring — `outline: 3px solid var(--accent-lavender); outline-offset: 2px;`.\n- **Active\u002FPressed:** `transform: scale(0.97)`.\n- **Loading:** `.btn--is-loading` — `pointer-events: none`, `aria-busy=\"true\"`, CSS border spinner via `::after` (`spin` keyframe) that does not change button dimensions (fixed `min-width`); prevents double-clicks.\n- **Disabled:** `opacity: 0.5`, `filter: grayscale(0.6)`, `cursor: not-allowed`, no transform\u002Fshadow.\n- **Success\u002FError:** temporary `.btn--success` (mint) \u002F `.btn--error` (rose) feedback states driven by `--text-success` \u002F `--text-error` tokens.\n\n**3.2 Cards**\n- **Default:** `.card` — `background: var(--bg-card)`, `border: 2px solid var(--border-default)`, `border-radius: var(--radius-lg)`, `box-shadow: var(--shadow-sm)`, flex column, `gap: var(--spacing-gap)`.\n- **Hover:** `transform: translateY(-2px)` + `--shadow-md` with bouncy easing.\n- **Focus-within:** border shifts to lavender with a soft ring when a child link\u002Fbutton is focused.\n- **Loading (Skeleton):** `.card--skeleton` with a `shimmer` gradient animation that preserves layout dimensions.\n- **Empty State:** `.card--empty` fallback layout with a Material Symbol in a pastel circle and clear guidance text.\n\n**3.3 Forms & Inputs**\n- **Structure:** `.input-group` flex column wrapping a `\u003Clabel>`, the input, and a dedicated `.input-group__error` feedback container with `aria-live=\"polite\"`.\n- **States:** Empty, Focused (lavender outline ring), Filled, Valid (mint border + `check_circle` icon), Invalid (rose border, `--text-error` message + `error` icon), Disabled, Read-only. Inputs: `min-height: 44px`, `border-radius: var(--radius-md)`, 2px border.\n- **Usage:** the Final CTA email capture uses this pattern; validate in JS and show `.input-group--error` \u002F `.input-group--success` with friendly microcopy (\"Yay! You're on the list!\" + `celebration` icon).\n\n**3.4 Modal \u002F Popup (applies to any modal used)**\n- **States:** Opening, Open, Loading, Success\u002FError, Closing — all animated via CSS transitions.\n- **UX:** centered flex container (`align-items: center`), backdrop overlay, Material `close` icon button, keyboard focus trapping, close via `Esc` and overlay click, `role=\"dialog\"` + `aria-modal=\"true\"`, `z-index: var(--z-modal)`.\n\n**3.5 FAQ Accordion**\n- Each item: `\u003Cbutton class=\"faq-item__question\" aria-expanded=\"false\" aria-controls=\"…\">` toggling an answer region (`role=\"region\"`), `expand_more` icon rotating 180°, animated height (CSS `grid-template-rows: 0fr → 1fr` or `max-height`), fully keyboard operable, `aria-expanded` always accurate.\n\n---\n\n## 4. Core UX & Micro-Interaction Rules\n\n- **Responsive by default:** fluid sizing, no horizontal overflow, `scroll-behavior: smooth` wrapped in a no-reduced-motion media query, `scroll-margin-top` on sections for the sticky header.\n- **Smooth animations:** every state change transitions with `var(--transition-normal)` (bouncy overshoot `cubic-bezier(0.34, 1.56, 0.64, 1)`).\n- **Required keyframes:** `wobble` (gentle ±2.5° rotate, 0.5s — mascots and decorations), `float` (translateY ±8px — hero mascot), `twinkle` (opacity\u002Fscale pulse — sparkles), `shimmer` (skeletons), `spin` (loading).\n- **Reduced motion:** `@media (prefers-reduced-motion: reduce)` disables wobble\u002Ffloat\u002Ftwinkle\u002Fbounce and smooth scroll; instant state feedback remains.\n- **Accessibility:** AA contrast in both modes; never rely on color alone (pair icons\u002Ftext with every state); semantic HTML5 (`header`\u002F`nav`\u002F`main`\u002F`section`\u002F`footer`, one `h1`, sections labeled via `aria-labelledby`); a skip-to-content link; logical DOM\u002Ffocus order; full keyboard operability; `aria-live` regions for form feedback (any toast uses `z-index: var(--z-toast)`); all decorative SVG\u002Ficons marked `aria-hidden=\"true\"`.\n- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.\n\n---\n\n## 5. Page Section Requirements\n\n**5.1 Header (sticky)** — Logo: `cruelty_free` bunny icon in a pink circle + Nunito wordmark. Anchor nav (Features, How It Works, Testimonials, Pricing, FAQ), theme toggle, primary CTA \"Get Started\". Mobile: `menu` icon button (`aria-expanded`) opens a dropdown panel (`z-index: var(--z-dropdown)`). Soft translucent `backdrop-filter` background.\n\n**5.2 Hero** — Two-column flex (text | mascot), column on mobile. `h1` in Nunito 800 with one accent word highlighted by a pastel marker underline; subcopy in `--text-secondary`; CTAs: `.btn--primary` \"Get Started\" + `.btn--ghost` \"See How It Works\" (anchor). Right side: kawaii cloud mascot SVG (dot eyes, tiny mouth, blush) with `float` + `wobble`, scattered `auto_awesome` sparkles with `twinkle`, and low-opacity floating pastel blobs (pink\u002Fblue\u002Fmint). Bottom: cloud-shaped divider into the next section.\n\n**5.3 Features** — Section heading + 3 `.card`s in a flex row (column on mobile). Each card: Material icon in a pastel circle (alternate `--primary` \u002F `--secondary` \u002F `--accent-mint` or lavender), title, friendly description. Hover bounce; focus-within ring.\n\n**5.4 How It Works** — 3 steps in a flex row (column on mobile): numbered pastel badge (1\u002F2\u002F3), Material icon, title, description; dashed connector line between badges (hidden on mobile).\n\n**5.5 Testimonials** — 3 `.card`s: avatar circle (pastel background + `person` icon or initials), quote, name + role, 5-star row (Material `star`, group labeled `aria-label=\"Rated 5 out of 5 stars\"`). Optional playful ±1° tilt.\n\n**5.6 Pricing** — 3 `.card`s with equal heights (`align-items: stretch` — sanctioned exception). Middle `.card--featured`: \"Most Popular\" pill badge (lavender), slight scale\u002Flift, pink glow shadow. Each tier: name, price, feature list with `check_circle` (mint), CTA (featured = `.btn--primary`; others = `.btn--ghost` \u002F `.btn--secondary`).\n\n**5.7 FAQ** — 5–6 real Q&As about the fictional product using the accordion pattern (3.5).\n\n**5.8 Final CTA** — Full-width `.card`-style panel with a soft pastel gradient (`linear-gradient(135deg, #FFB6C1, #D8B4FE, #ADD8E6)` at reduced opacity over `--bg-card`; deep-plum-tinted gradient in dark mode), sparkles, headline, and the email capture form (3.3) whose button demonstrates loading → success states.\n\n**5.9 Footer** — `--bg-secondary` background: brand block (logo + tagline), secondary link columns (\"Product\": Features, Pricing, FAQ; \"Company\": About, Blog, Careers; \"Support\": Help Center, Contact, Privacy, Terms), social row (Material `mail`, `forum`, `share`), copyright line with a pink `favorite` icon. Links in `--text-secondary`, hover → `--primary` with a bouncy underline. Cloud divider above the footer.\n\n**5.10 Decorations** — All mascots, sparkles, blobs, and cloud dividers: `aria-hidden=\"true\"`, `pointer-events: none`, and disabled under reduced motion.\n\n---\n\n## 6. Deliverable & Output Format\n\n- **Files:** exactly `index.html`, `style.css`, `script.js`. One `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` in `\u003Chead>` — no other inline scripts, no inline styles anywhere.\n- **Naming:** BEM only (`.btn`, `.btn--primary`, `.card`, `.card__title`, `.faq-item__question`, …) — one consistent convention across the entire deliverable.\n- **`script.js` scope:** theme toggle + `localStorage` persistence, mobile nav toggle, FAQ accordion, email form validation demo, CTA loading-state demo, smooth-scroll fallback. No external libraries.\n- **Copy:** all user-facing copy in English, real and on-theme; placeholders only where content was genuinely unspecified.\n- **Completeness:** ship the entire page on the first attempt — every section fully built and styled for both light and dark themes.\n",1791954987520]