[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-521-Kawaii-Sweet-Pastel":3},"# CODING-AI PROMPT — Build a Complete \"Kawaii \u002F Sweet Pastel\" 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. Theme: **Kawaii \u002F Sweet Pastel** (Japanese Kawaii culture) — cute, playful, whimsical, rainbow gradients, fluffy clouds, sparkle embellishments, mascots, soft airbrushed, decorative, rounded everything (20px+), glossy highlights, high-key brightness.\n\n**Required Sections:** Sticky Header (nav + theme toggle), Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA (with email capture), Footer with secondary links.\n\n**Copy Direction:** Invent ONE coherent kawaii product concept (e.g., a cute habit-tracking or journaling app) and write all real, thematic, playful English copy around it. All user-facing copy must be written in **English**.\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\u002FID Selectors Only:** All design properties, layout rules, and states must be targeted via class or ID selectors in `style.css`.\n* **Minimal HTML Modifications:** HTML must remain clean, semantic, and agnostic of visual styling — changing the site's look must only require editing the CSS file.\n\n**1.2 CSS Variables & Theme Tokens**\nStore all visual tokens in `:root` (and the `.dark` theme class) using CSS variables:\n\n* **Colors (Light Mode — default):**\n  * `--primary: #FF9AA2` (Salmon — main interactive accent)\n  * `--secondary: #9D84B6` (Lilac — secondary accent, focus rings)\n  * `--bg-primary: #FFF6FA` (soft pink-tinted base — never pure white; use `#fefefe` only where a near-white surface is required)\n  * `--bg-secondary: #FFD1DC` (Soft Pink — cards\u002Fpanels)\n  * `--text-primary: #5B4B6B` (dark plum)\n  * `--text-secondary: #8E7C9F`\n  * `--text-success: #2F9E77` (deep mint — contrast-safe)\n  * `--text-error: #D6455D` (deep rose)\n  * `--border-default: #F3D9E3`, `--border-error: #D6455D`, `--border-success: #2F9E77`\n  * Pastel section accents: `--pastel-lavender: #E0BBE4`, `--pastel-blue: #C3E5F9`, `--pastel-lemon: #FFFACD`, `--pastel-mint: #B5EAD7`\n  * `--gradient-rainbow: linear-gradient(90deg, #FF9AA2, #FFD1DC, #FFFACD, #B5EAD7, #C3E5F9, #E0BBE4)` (animated via `background-size: 200%` + `background-position` keyframes)\n* **Contrast Pairing:** Every light background token must pair with dark text tokens, and every dark background token must pair with light text tokens — enforce this pairing in BOTH themes. Body text must meet 4.5:1 contrast in light and dark modes.\n* **Border Radius & Shadows (kawaii rounding):** `--radius-sm: 12px`, `--radius-md: 20px`, `--radius-lg: 32px`, plus `--radius-pill: 999px` for buttons\u002Fbadges. Shadows must be soft and pastel-colored: `--shadow-sm: 0 4px 12px rgba(255,154,162,0.25)`, `--shadow-md: 0 8px 24px rgba(157,132,182,0.30)`.\n* **Spacing & Transitions:** `--spacing-gap: 1.5rem`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: ease`, plus the mandatory kawaii bounce easing `--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1)` used for all hover\u002Fentrance bounce effects.\n* **Elevation\u002FStacking:** `--z-dropdown: 1000`, `--z-modal: 2000`, `--z-toast: 3000`.\n\n**1.3 Mandatory Dark Mode (\"Kawaii Night\")**\n* **Implementation:** Define a complete dark token set under both `@media (prefers-color-scheme: dark)` and a `.dark` class: `--bg-primary: #2B2340` (deep plum), `--bg-secondary: #372E4F`, `--text-primary: #F7EFF9`, `--text-secondary: #C9BCDA`, brightened accents (`--primary: #FFAAB2`, `--secondary: #B79CD6`), and adjusted borders\u002Fsuccess\u002Ferror tokens. Pastel section accents become muted translucent tints.\n* **Theme Switching:** Background and text variables must switch seamlessly with zero HTML restructuring.\n* **Persistence:** Persist the user's choice via `localStorage` (e.g., key `kawaii-theme`), falling back to `prefers-color-scheme` on first visit. Provide a visible toggle button in the header with correct `aria-pressed` and `aria-label` (\"Toggle dark mode\"), swapping Google Material Symbols `light_mode` \u002F `dark_mode` icons.\n* **Exception clause:** The source style spec marks dark mode as \"partial\" — light pastel mode remains the default presentation, but a complete, fully switchable dark-mode token set must still be delivered.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n* **Default Alignment Rule:** Every flex container must default to `align-items: center` unless an explicitly justified exception exists (document the exception in a CSS comment).\n* **Mobile-Friendly First:** All flex layouts must be responsive out of the box — rows convert to columns on small viewports. No horizontal scrolling at any breakpoint.\n\n**1.5 Framework Default: Tailwind CSS**\n* Use Tailwind CSS (or clean custom CSS driven by Tailwind's `@layer` \u002F `@apply` directives). All utility usage must map back to the CSS variables above or to generic reusable classes (`.btn`, `.card`, `.input-group`, `.section`, `.container`).\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* **Text:** Load Google Fonts via `\u003Clink>`: **Baloo 2** (headings, bound to `--font-display`) and **Quicksand** (body, bound to `--font-base`). Rounded, playful letterforms are mandatory.\n* **Icons:** Use Google Material Symbols (Rounded variant) exclusively. Raw inline SVGs and local icon files are forbidden — mascots, clouds, sparkles, stars, checks, and social icons must all be Material Symbols ligatures or pure-CSS shapes (`::before`\u002F`::after`, `clip-path`, `border-radius` blobs).\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component**\nStyle all states via CSS classes (`.btn`, `.btn--primary`, `.btn--secondary`, `.btn--ghost`, `.btn--danger`):\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` — pill radius, pastel gradient fill, glossy highlight via a `::before` white sheen gradient. Minimum touch target 44×44px.\n* **Hover:** Brightness shift + shadow growth + a cute wobble (rotate ±2° keyframes, ~400ms, `--ease-bounce`), `cursor: pointer`.\n* **Focus:** Distinct focus ring using `--secondary` (`outline` or `box-shadow`) — clearly visible on pastel backgrounds.\n* **Active\u002FPressed:** `transform: scale(0.97)` with bounce easing.\n* **Loading:** Disables interaction, prevents double-clicks, renders a CSS spinner or animated Google Icon without distorting button dimensions.\n* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n* **Success\u002FError:** Temporary feedback styles driven by `--text-success` \u002F `--text-error` (used by the newsletter submit).\n* **Danger:** `.btn--danger` must be visually distinct in both themes (not required by this page's content, but the class must exist and be themed).\n\n**2.2 Card Component**\n* **Default:** Flexbox layout, `--bg-secondary` surface, `--radius-lg`, subtle `--border-default` border and `--shadow-sm`.\n* **Hover:** `transform: translateY(-2px)` + gentle wobble + `--shadow-md`.\n* **Focus-within:** Card border highlights when a child link\u002Fbutton receives focus.\n* **Loading (Skeleton):** Define a shimmer animation class in CSS (gradient sweep) that preserves layout dimensions.\n* **Empty State:** Define a fallback layout class featuring a Google Icon and clear guidance text.\n\n**2.3 Form & Input Component (Newsletter in Final CTA)**\n* **Structure:** Flex container wrapping a visible `\u003Clabel>`, the email input, and a dedicated error\u002Fsuccess feedback element with `aria-live=\"polite\"`.\n* **States — all styled via CSS classes:** Empty, Focused (outline ring via `--secondary`), Filled, Valid (`--border-success` + `check_circle` icon), Invalid (`--border-error`, error text in `--text-error`, `error` icon), Disabled, Read-only.\n* **Behavior:** JS validates email format on submit; invalid submissions show inline error copy and focus the input; valid submissions show a button loading state, then a success message with a `celebration` Material Symbol — all announced via the `aria-live` region.\n\n**2.4 Modal \u002F Popup**\n* No modal is part of this build — do not add unrequested overlays. If any layered component becomes necessary, it must follow: animated opening\u002Fopen\u002Fclosing states via CSS transitions, centered flex container (`align-items: center`), backdrop overlay, Google Icon close button, keyboard focus trapping, and closing via `Esc` or overlay click, stacked at `--z-modal`.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES (Kawaii Effects)\n\n* **Responsive by Default:** Fluid sizing and breakpoints with zero horizontal overflow.\n* **Smooth Animations:** Apply `transition: var(--transition-normal)` to all state changes. Mandatory kawaii effects, all defined as reusable CSS classes\u002Fkeyframes:\n  * **Sparkles:** `::before`\u002F`::after` star shapes (via `clip-path` polygon or Material Symbols ligature content like `auto_awesome`) with twinkle keyframes (scale + opacity), decorating the Hero and Final CTA.\n  * **Bounce:** Entrance animations using `--ease-bounce` (`cubic-bezier(0.34, 1.56, 0.64, 1)`), staggered on hero elements and on scroll-reveal (IntersectionObserver in `script.js`).\n  * **Wobble:** Hover wobble keyframes on cards, buttons, and footer links.\n  * **Rainbow gradient transitions:** Animated `background-position` on the Final CTA panel and the \"Most Popular\" pricing badge using `--gradient-rainbow`.\n  * **Fluffy clouds & mascot:** Pure-CSS cloud shapes (stacked `border-radius` blobs) or Material Symbols `cloud`\u002F`filter_drama` icons with a gentle floating bob animation; mascot rendered as a large Material Symbol (e.g., `cruelty_free` bunny) inside a pastel circle with glossy highlight.\n* **Reduced Motion:** All wobble, bounce, sparkle, and gradient animations must be disabled under `prefers-reduced-motion: reduce` (including the JS scroll-reveal, which must check this preference).\n* **Accessibility (a11y):** Sufficient contrast in both modes; never rely on color alone to communicate state; semantic HTML5 elements (`header`, `main`, `section`, `nav`, `footer`); correct ARIA roles\u002Flabels on the theme toggle, FAQ accordion, and star ratings (e.g., `aria-label=\"Rated 5 out of 5 stars\"`); logical DOM\u002Ffocus order; full keyboard operability; `aria-live` regions for the newsletter feedback.\n* **Mandatory Visual Feedback:** Every click, hover, and submission triggers a visible state change.\n* **Destructive Actions:** Any generic `.btn--danger`\u002Fdelete styling must be visually distinct in both light and dark themes.\n\n---\n\n## 4. LANDING PAGE SECTION SPECIFICATIONS\n\n* **Header (page shell):** Sticky, pastel translucent background with backdrop blur. Logo (Material Symbol + wordmark), anchor nav links with smooth scrolling and visible hover\u002Ffocus states, and the dark-mode toggle (per rule 1.3). Collapses to a wrapped column layout on mobile.\n* **Hero:** Sparkle-adorned badge pill, `H1` headline with one gradient-text accent word, subheadline, primary CTA (scrolls to Pricing) + secondary ghost link, mascot composition (CSS clouds + Material Symbol mascot in a glossy pastel circle), floating sparkle decorations, staggered bounce-in entrance.\n* **Features (3 cards):** Each card = icon tile (Material Symbol in a pastel rounded square), title, 2-line description. Cards follow all rule 2.2 states; alternate pastel accent colors per card.\n* **How It Works (3 steps):** Numbered badges (1\u002F2\u002F3) in pastel circles, step icon, title, copy. Horizontal row with a dotted CSS connector line on desktop; vertical column on mobile.\n* **Testimonials (3 quotes):** Card per quote with 5-star rating (Material Symbols `star` + accessible label), CSS avatar circle containing the person's initials, name, and role. Hover lift per rule 2.2.\n* **Pricing (3 tiers):** Free \u002F mid \u002F premium. Middle tier is visually elevated (thicker border or scale, animated rainbow-gradient \"Most Popular\" badge). Each tier: name, price, feature list with `check_circle` icons, CTA button (primary style on the popular tier, secondary\u002Fghost on the others). Do not add an unrequested monthly\u002Fyearly toggle.\n* **FAQ (5–6 items):** Native `\u003Cdetails>`\u002F`\u003Csummary>` (preferred) or an ARIA-compliant custom accordion. Custom-styled summary with a `expand_more` icon rotating on open, animated answer reveal via CSS, full keyboard operability, visible focus states, answers in `--text-secondary`.\n* **Final CTA:** Full-width panel with the animated rainbow gradient, sparkle decorations, headline + subcopy, and the newsletter email form per rule 2.3.\n* **Footer with secondary links:** Logo recap, 3–4 link columns (Product \u002F Company \u002F Support \u002F Social with Material Symbol icons), copyright line. All secondary links must have visible hover (wobble\u002Funderline) and focus states; link to page sections where applicable.\n\n---\n\n## 5. DELIVERABLE & OUTPUT FORMAT\n\n* **File Structure:** Separate `index.html`, `style.css`, and `script.js`. No inline `\u003Cscript>` blocks beyond a single deferred entry point (`\u003Cscript src=\"script.js\" defer>`). No external JS libraries.\n* **Naming Convention:** BEM throughout (`.hero__title`, `.card--feature`, `.btn--primary`, `.pricing__badge`) — never mix conventions.\n* **No Unrequested Placeholders:** No lorem ipsum — write real, coherent, kawaii-themed English copy for every section. Placeholder text is permitted only where content is genuinely unspecified.\n* **Language:** All user-facing copy, comments, class names, and file names in English\u002FASCII.\n* **Quality Bar:** Deliver the complete, working page on the first attempt — zero console errors, zero horizontal scroll, fully keyboard navigable, and both light (\"Sweet Pastel\") and dark (\"Kawaii Night\") themes fully functional and persisted.\n",1791954988595]