[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-186-Neumorphism":3},"# System Prompt: Neumorphism Landing Page — Complete Build Specification\n\nYou are a Senior Frontend Engineer and Expert UI Designer. Build a **complete, production-ready Neumorphism (\"Soft UI\") Landing Page** in a single attempt. Follow every rule below exactly.\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 styling, layout, and states must be defined in `style.css` via class\u002FID selectors.\n- **Semantic, Clean HTML:** Markup must remain agnostic of visual styling. The neumorphic look must be achievable by editing CSS alone.\n\n### 1.2 CSS Variables & Theme Tokens\nDefine all tokens in `:root` and theme classes:\n\n- **Colors:** `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.\n- **Neumorphism-Specific Tokens (mandatory):**\n  - `--shadow-light: rgba(255,255,255,0.8)` and `--shadow-dark: rgba(0,0,0,0.1)` — these MUST be redefined per theme so emboss\u002Fdeboss effects survive both light and dark modes.\n  - `--emboss: -5px -5px 15px var(--shadow-light), 5px 5px 15px var(--shadow-dark);`\n  - `--deboss: inset -5px -5px 15px var(--shadow-light), inset 5px 5px 15px var(--shadow-dark);`\n  - `--surface-gradient: linear-gradient(145deg, var(--grad-a), var(--grad-b));`\n- **Palette:** Light pastels — Soft Blue `#C8E0F4`, Soft Pink `#F5E0E8`, Soft Grey `#E8E8E8`. Derive secondary tones as ±30% tints\u002Fshades. The light-mode page background must be a soft grey\u002Fblue pastel (e.g., `#E8E8E8`–`#e4ebf2` range), **never pure white**; use `#fefefe` only if a near-white is required.\n- **Contrast Pairing:** Every light background token pairs with a dark text token and vice versa, in **all** themes. Text on pastel surfaces must meet WCAG AA contrast — darken text tokens (e.g., deep slate `#3a4a5a`) rather than using mid-greys.\n- **Geometry & Motion:** `--radius-sm: 12px`, `--radius-md: 14px`, `--radius-lg: 16px`, `--shadow-sm`, `--shadow-md`, `--spacing-gap`, `--transition-fast: 150ms`, `--transition-normal`, `--ease-standard`.\n- **Stacking:** `--z-dropdown`, `--z-modal`, `--z-toast`.\n\n### 1.3 Mandatory Dark Mode\n- Define dark tokens under `@media (prefers-color-scheme: dark)` **and** a `.dark` class.\n- Dark mode must remain **monochromatic soft**: deep desaturated slate\u002Fgrey surfaces (e.g., `#2a2d33` range) with inverted neumorphic shadows (`--shadow-light` becomes a subtle lighter glow, `--shadow-dark` a deeper black). No hard lines or high-contrast edges.\n- Provide a visible theme toggle (Google Icon `light_mode` \u002F `dark_mode`) with correct `aria-pressed` and `aria-label`. Persist choice in `localStorage`, falling back to `prefers-color-scheme` on first visit. Switching must require zero HTML restructuring.\n\n### 1.4 Flexbox Layout & Mobile-First\n- All layout containers use Flexbox. **Every flex container defaults to `align-items: center`** unless explicitly justified otherwise.\n- Mobile-first: card grids, pricing tiers, and step rows stack into columns on small viewports. No horizontal scrolling at any breakpoint.\n\n### 1.5 Framework\n- Use **Tailwind CSS** (CDN or build) with custom component classes (`.btn`, `.card`, `.neu-input`, `.pricing-card`) defined via `@layer` \u002F `@apply`, all mapping back to the CSS variables above. Do not mix naming conventions — pick BEM or a fixed utility set and stay consistent.\n\n### 1.6 Typography & Icons (Google Only)\n- **Fonts:** Google Fonts only — use **Poppins** for headings and **Inter** for body, bound to `--font-base` \u002F `--font-heading`.\n- **Icons:** Google Material Symbols only. **Inline SVGs and local icon files are forbidden.**\n\n---\n\n## 2. NEUMORPHISM STYLE SPECIFICATION (Apply Globally)\n\n- **Surfaces:** Every card, button, input, and toggle uses `background: var(--surface-gradient)` (145deg, two adjacent pastel tints) with `border-radius: var(--radius-md\u002Flg)` (12–16px).\n- **Embossed (raised):** `box-shadow: var(--emboss)` on cards, buttons, icons.\n- **Debossed (pressed):** `box-shadow: var(--deboss)` on inputs, active buttons, toggle tracks, progress bars.\n- **Press Feedback:** On `:active`, buttons transition to the debossed shadow with `transform: scale(0.97)` over `var(--transition-fast)` (150ms).\n- **No hard borders:** Do not use solid 1px borders as primary styling; rely on shadow depth. Use `--border-default` only as an extremely subtle focus aid where shadows alone fail accessibility.\n- **Monochromatic discipline:** Accent colors (soft blue\u002Fpink) appear only in gradients, icon tints, and highlights — never as flat saturated blocks.\n\n---\n\n## 3. SECTIONS TO BUILD\n\nAll user-facing copy in **English**. Write real, persuasive copy — no lorem ipsum.\n\n1. **Header\u002FNav:** Logo, nav links, theme toggle, primary CTA button (embossed).\n2. **Hero:** Headline, subheadline, dual CTA (embossed primary + debossed ghost), and a soft neumorphic visual element (e.g., an embossed card cluster or mock app panel). No images required — build the visual with CSS shapes and Material Icons.\n3. **Features (3 cards):** Embossed cards, each with a debossed circular icon well, title, description. Include hover lift (`translateY(-2px)` + shadow shift) and `:focus-within` border highlight.\n4. **How It Works (3 steps):** Numbered steps with debossed step indicators connected by soft lines; vertical stack on mobile.\n5. **Testimonials:** At least 2 testimonial cards with debossed avatar circles (Material Icon `person`), quote, name, role.\n6. **Pricing (3 tiers):** Middle tier visually elevated (stronger emboss + accent tint). Each card: tier name, price, feature list (Material Icon `check` \u002F `close`), CTA button. Destructive\u002Fsecondary distinctions must remain visible in both themes.\n7. **FAQ:** Accessible accordion (`\u003Cdetails>`\u002F`\u003Csummary>` or ARIA-compliant custom) with smooth CSS open\u002Fclose transitions, chevron icon rotation, keyboard operable.\n8. **Final CTA:** Full-width soft panel with headline, subheadline, and a large embossed button with loading\u002Fsuccess states wired in JS.\n9. **Footer:** Secondary links grouped in columns, social icons (Material Icons in debossed circles), copyright.\n\n---\n\n## 4. COMPONENT STATE REQUIREMENTS (Mandatory)\n\n### 4.1 Buttons (`.btn`, `.btn-primary`, `.btn-ghost`, `.btn-danger`)\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` min 44×44px touch target, embossed shadow.\n- **Hover:** Shadow brightens\u002Fshifts, `cursor: pointer`.\n- **Focus:** Distinct focus ring via `outline`\u002F`box-shadow` using CSS variables — must be visible against soft shadows in both themes.\n- **Active:** Debossed shadow + `transform: scale(0.97)`, 150ms.\n- **Loading:** Disabled, spinner (animated Material Icon or CSS spinner) that does not change button dimensions.\n- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n- **Success\u002FError:** Temporary feedback styles driven by `--text-success` \u002F `--text-error`.\n\n### 4.2 Cards (`.card`)\n- Default embossed with pastel gradient; hover elevation shift; `:focus-within` highlight; skeleton shimmer class (`.card--skeleton`) defined in CSS; empty-state layout with Google Icon + guidance text.\n\n### 4.3 Forms\u002FInputs (`.neu-input`)\n- Debossed fields with states: empty, focused (soft outer ring), filled, valid (success tint + `check` icon), invalid (error tint + `error` icon + message in a dedicated error container), disabled, read-only. Structure: flex wrapper → label, input, error container. Use `aria-live` for error feedback.\n\n### 4.4 Modal (used for a \"Get Started\" dialog triggered by CTAs)\n- States: opening, open, loading, success\u002Ferror, closing — all CSS-animated. Centered flex container, backdrop overlay, Material Icon close button, focus trapping, close via `Esc` and overlay click.\n\n---\n\n## 5. CORE UX & ACCESSIBILITY\n\n- **Responsive by default**, no horizontal overflow.\n- **Smooth animations** on all state changes via `transition: var(--transition-normal)`; fully respect `prefers-reduced-motion` (disable transforms\u002Fshimmer).\n- **Accessibility:** WCAG AA contrast in both modes; never rely on color alone for state; semantic HTML5 (`header`, `main`, `section`, `footer`, `nav`); correct ARIA roles\u002Flabels on accordion, modal, toggle; logical focus order; full keyboard operability; `aria-live` regions for dynamic feedback.\n- **Every interaction produces visible feedback.**\n\n---\n\n## 6. DELIVERABLES\n\n- **Files:** `index.html`, `style.css`, `script.js` — separate files. Only a single deferred `\u003Cscript src=\"script.js\" defer>` reference in HTML; no inline script blocks.\n- **Naming:** One consistent convention (BEM recommended: `.pricing-card__title`, `.pricing-card--featured`) across the entire deliverable.\n- **Copy:** Real English copy for every section; placeholders only where content is genuinely unspecified.\n- **JS scope:** Theme toggle with persistence, modal open\u002Fclose with focus trap, FAQ accordion behavior (if custom), CTA loading\u002Fsuccess simulation, and mobile nav toggle. No other behavioral JS.\n\nBuild the complete landing page now, in one attempt, with all files fully written out.\n",1791954982757]