[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-164-Soft-UI-Evolution":3},"# CODING AI PROMPT — \"Soft UI Evolution\" Landing Page (Glass & Soft UI)\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete, production-quality marketing Landing Page on the first attempt — no partial builds, no TODOs, no placeholder copy.\n\n**Objective:** Build a single-page landing page in the **\"Soft UI Evolution\"** design language (Glass & Soft UI category): an evolved, accessibility-first interpretation of soft UI — pastel-tinted surfaces, soft multi-layer shadows (softer than flat design, clearer than pure neumorphism), always-visible 1px borders, subtle glassmorphism accents, 200–300ms motion, WCAG AA+ contrast, and complete Light + Dark themes. Write all user-facing copy in **English**. Invent one coherent fictional product (e.g., a pastel-themed productivity\u002Fdesign SaaS) and write realistic marketing copy for it — lorem ipsum is forbidden.\n\n**Required sections:** Header\u002Fnav, Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, 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`. The `style=\"...\"` attribute, inline `\u003Cstyle>` blocks, and presentational HTML attributes are **forbidden**.\n- Target all design properties, layout rules, and states via class\u002FID selectors (BEM — see Section 5).\n- HTML must remain semantic and style-agnostic: re-theming the page must never require markup changes.\n\n**1.2 CSS Variables & Theme Tokens**\nDefine all visual tokens as CSS variables in `:root` (light theme) with a complete dark override set (see 1.3). Use these exact token names with the Soft UI Evolution values below (you may fine-tune hex values only if every contrast rule in Section 3 still holds):\n\n*Colors (Light theme):*\n- `--primary: #1F6FB2` — accessible \"ink\" blue derived from Soft Blue; used for primary buttons, links, focus rings.\n- `--primary-pastel: #87CEEB` — raw pastel; decorative fills\u002Ftints only, never text on light backgrounds.\n- `--secondary: #B8436B` — accessible ink derived from Soft Pink; `--secondary-pastel: #FFB6C1`.\n- `--accent-green-pastel: #90EE90` paired with accessible ink `--text-success: #1E7A34`.\n- `--bg-primary: #F4F8FC` (soft blue-tinted off-white — never `#ffffff`; use `#fefefe` only where a near-white surface is unavoidable).\n- `--bg-secondary: #FEFEFE` (elevated card surface).\n- `--text-primary: #22303C`; `--text-secondary: #52616F`.\n- `--text-error: #B3261E`; `--border-default: #D9E4EF`; `--border-error: #E0655B`; `--border-success: #4C9E68`.\n\n*Colors (Dark theme overrides):* `--bg-primary: #0F1724`; `--bg-secondary: #1A2536`; `--text-primary: #E9F0F8`; `--text-secondary: #9DAEC2`; `--primary: #7EC8F0` (brightened soft blue — safe as accent text on dark); `--secondary: #F5A8B8`; `--text-success: #7EDC8F`; `--text-error: #FF9B8E`; `--border-default: rgba(233,240,248,0.16)`; error\u002Fsuccess borders brightened to remain visible.\n\n*Contrast pairing (mandatory in every theme):* light backgrounds always pair with dark text tokens and vice versa. Raw pastels (`#87CEEB`, `#FFB6C1`, `#90EE90`) may be used only as surface tints, gradient washes, icon-chip fills (with dark ink icons), and badge fills (with dark ink text) — never as text color on light backgrounds. In dark mode, pastels may serve as accent text only where contrast ≥ 4.5:1.\n\n*Depth — the \"evolved\" part (this is NOT pure neumorphism):* every elevated surface pairs a visible 1px `--border-default` border with a soft multi-layer shadow:\n- `--shadow-sm: 0 2px 4px rgba(30,45,62,0.06), 0 1px 2px rgba(30,45,62,0.04)`\n- `--shadow-md: 0 2px 4px rgba(30,45,62,0.06), 0 10px 28px rgba(30,45,62,0.10)`\n- Dark theme shadows: deeper black layers (e.g., `0 2px 4px rgba(0,0,0,0.4), 0 10px 28px rgba(0,0,0,0.5)`).\n\n*Geometry & motion:* `--radius-sm: 8px; --radius-md: 10px; --radius-lg: 12px; --radius-pill: 999px` (pill reserved for buttons, badges, chips); `--transition-fast: 200ms; --transition-normal: 300ms; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.\n\n*Layout & stacking:* `--spacing-gap: 1.25rem`; `--spacing-section: clamp(4rem, 8vw, 7rem)`; `--z-header: 100; --z-dropdown: 150; --z-modal: 200; --z-toast: 300`.\n\n*Glass tokens:* `--glass-bg: rgba(254,254,254,0.68)` \u002F dark `rgba(15,23,36,0.68)`; `--glass-blur: 14px`; `--glass-border: rgba(255,255,255,0.55)` \u002F dark `rgba(233,240,248,0.12)`. Apply glass only to the sticky header, hero decorative orbs, and Final CTA accents — never to text containers without a solid fallback.\n\n**1.3 Mandatory Dark Mode Support**\n- Define dark tokens both under a `.dark` class on `\u003Chtml>` **and** inside `@media (prefers-color-scheme: dark)` scoped as `:root:not(.light)` — so the OS preference renders correctly before JS runs and the stored choice wins afterward.\n- `script.js` reads `localStorage` key `soft-ui-theme`; falls back to `prefers-color-scheme` on first visit; applies `.dark` or `.light` to `\u003Chtml>`; sets `color-scheme` accordingly.\n- The header contains a visible theme toggle button (Material Symbols `light_mode` \u002F `dark_mode`) with correct `aria-pressed` state and a dynamic `aria-label` (\"Activate dark mode\" \u002F \"Activate light mode\"). Theme switching must require zero HTML restructuring.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- Build every layout structure with Flexbox. Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment (the only permitted default exception: equal-height card rows may use `align-items: stretch`).\n- Mobile-first: nav collapses to a hamburger panel at ≤ 768px; card rows (Features, Steps, Testimonials, Pricing) stack single-column on mobile and expand to 3-across on desktop via `flex-wrap`; no horizontal scrolling at any width; fluid type via `clamp()`.\n\n**1.5 Framework Default**\n- Write clean custom CSS organized with Tailwind-style cascade layers: `@layer tokens, base, layout, components, utilities`. Do not mix utility classes with component classes — component styling is expressed exclusively through BEM classes bound to the CSS variables above.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Load **Nunito** (headings, weights 600–800) and **Inter** (body, 400–600) from Google Fonts via `\u003Clink>` with `preconnect`; bind them to `--font-display` and `--font-base`. Body text ≥ 16px with a fluid `clamp()` type scale.\n- Icons: **Google Material Symbols Rounded** via its Google Fonts stylesheet, e.g., `\u003Cspan class=\"material-symbols-rounded\" aria-hidden=\"true\">check_circle\u003C\u002Fspan>`. Inline SVGs, local icon files, and emoji-as-icons are **forbidden**. Filled variants (e.g., testimonial stars) use `font-variation-settings: 'FILL' 1` via a CSS class.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component** (`.btn`; variants `.btn--primary`, `.btn--secondary`, `.btn--ghost`, `.btn--danger`)\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` pill radius, font-weight 600, minimum touch target 44×44px. Primary = `--primary` fill with white text in light mode; in dark mode the primary button uses a pastel fill with dark ink text (contrast pairing rule).\n- **Hover:** brightness lift + `--shadow-md`, `cursor: pointer`.\n- **Focus-visible:** distinct 2–3px outline (`outline: 2px solid var(--primary); outline-offset: 2px`) — never remove it.\n- **Active\u002Fpressed:** `transform: scale(0.97)`.\n- **Loading (`.is-loading`):** blocks interaction and double-clicks (`pointer-events: none`), sets `aria-busy=\"true\"`, renders a CSS spinner or rotating Material Symbol `progress` icon without changing button dimensions.\n- **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`.\n- **Success\u002FError (`.is-success` \u002F `.is-error`):** temporary feedback states colored by `--text-success` \u002F `--text-error`, always accompanied by an icon and\u002For text — never color alone.\n- `.btn--danger` must be visually distinct in both themes (only if a destructive\u002Freset action exists).\n\n**2.2 Card Component** (`.card` — powers Features, Steps, Testimonials, Pricing, FAQ items)\n- **Default:** `--bg-secondary` surface, 1px `--border-default` border, `--radius-lg`, `--shadow-sm`, flex column layout, generous padding.\n- **Hover:** `transform: translateY(-2px)` + shadow shift to `--shadow-md` over `--transition-fast` (apply to Features and Testimonials cards).\n- **Focus-within:** border color shifts to `--primary` when a child link\u002Fbutton receives focus.\n- **Loading (skeleton):** define a `.skeleton` shimmer keyframe utility (subtle gradient sweep) so future async content never causes layout jumps; disable the shimmer under `prefers-reduced-motion`.\n- **Empty state:** define the pattern (Material Symbol + guidance text) only if any region can render empty; otherwise omit mounting it.\n\n**2.3 Form & Input Requirements** (Final CTA email capture)\n- Structure: `.input-group` flex column wrapping a `\u003Clabel>`, the `\u003Cinput>`, and a dedicated `.input-group__feedback` container (`aria-live=\"polite\"`).\n- States via classes\u002Fpseudo-classes: empty, `:focus` (2–3px ring using `--primary`), filled, `.is-valid` (success border + check icon), `.is-invalid` (error border, `--text-error` message, error icon — icon + text, never color alone), disabled, read-only.\n- Behavior: validate email format on blur and on submit; on submit the button enters `.is-loading` (~1s simulated), then `.is-success` with a confirmation message in the live region; reset after a delay. No backend calls.\n\n**2.4 Modal \u002F Popup**\n- No modal is required. If you add any overlay (e.g., a hero video lightbox), it must: be a centered flex container (`align-items: center`) with a dimmed\u002Fblurred backdrop, animate open\u002Fclose in 200–300ms, close via `Esc` and overlay click, trap focus, restore focus on close, use `role=\"dialog\"` + `aria-modal=\"true\"`, and provide a Material Symbol close button. Otherwise, do not add one.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid sizing, no horizontal overflow, mobile-first breakpoints.\n- **Smooth animations:** every state change transitions in 200–300ms with `--ease-standard`. Under `prefers-reduced-motion: reduce`, disable transforms, parallax, shimmer, and scroll reveals; keep state changes instant but visible.\n- **Accessibility (a11y):** WCAG AA in both themes — body text ≥ 4.5:1, large text ≥ 3:1, UI borders ≥ 3:1. Never communicate state by color alone. Use semantic HTML5 landmarks (`header`, `nav`, `main`, `section[aria-labelledby]`, `footer`), a skip-to-content link, a single `h1` with logical heading order, full keyboard operability (theme toggle, mobile nav, FAQ accordion, form), visible focus everywhere, `aria-live` regions for dynamic feedback, and ≥ 44px touch targets. Decorative elements (orbs, gradients) are `aria-hidden=\"true\"`.\n- **Mandatory visual feedback:** every click, hover, focus, and submission produces a visible state change.\n- **Destructive actions:** none expected; if any reset\u002Fclear control is added, style it `.btn--danger` and keep it distinct in both themes.\n\n---\n\n## 4. PAGE COMPOSITION (all copy in English, realistic and product-coherent)\n\n**4.1 Header — sticky glass nav:** logo (Material Symbol + wordmark), anchor links (Features, How It Works, Testimonials, Pricing, FAQ), theme toggle, compact primary CTA. Glass surface per 1.2 with an `@supports (backdrop-filter)` fallback to solid `--bg-secondary`. Mobile: hamburger button (`aria-expanded`, `aria-controls`) opening a glass panel; closes on `Esc`, link click, and outside click; focus moves into the panel and returns on close. Anchor links smooth-scroll (respecting reduced motion).\n\n**4.2 Hero:** `h1` headline, supporting subheadline, two CTAs — `.btn--primary` \"Get started free\" (→ `#pricing`) and `.btn--ghost` \"See how it works\" (→ `#how-it-works`) — plus a trust row (filled star Material Symbols + short social-proof line). Decorations are CSS-only: soft pastel radial-gradient orbs (blue\u002Fpink\u002Fgreen, blurred) and one glass mockup card, all `aria-hidden=\"true\"`. No meaning may be carried by decorations alone.\n\n**4.3 Features — 3 cards:** section `h2` + intro line; three `.card`s, each with an icon chip (Material Symbol on a pastel tint — rotate soft blue, soft pink, soft green across the three, icon rendered in dark ink), `h3` title, and a 1–2 sentence description. Hover lift per 2.2.\n\n**4.4 How It Works — 3 steps:** numbered badges (01\u002F02\u002F03) + Material Symbol per step, title, short text; a subtle connector line between steps on desktop, hidden on mobile; optional staggered entrance reveal (IntersectionObserver, reduced-motion aware).\n\n**4.5 Testimonials — 3 cards:** five filled-star rating (Material Symbols), quote, avatar circle (initials on pastel fill with dark ink), name + role. Realistic fictional personas.\n\n**4.6 Pricing — 3 tiers:** each with tier name, monthly price, feature list (check Material Symbols per item), and CTA. The middle tier is featured: \"Most popular\" badge (pastel fill + dark ink text), stronger border\u002Fshadow, slight scale\u002Felevation on desktop. Featured CTA = `.btn--primary`; others = `.btn--secondary`. An optional monthly\u002Fannual toggle is permitted only if implemented as an accessible switch (`role=\"switch\"`, `aria-checked`) with `aria-live` price updates; otherwise omit it.\n\n**4.7 FAQ — 5–6 items, ARIA accordion:** each item is a `\u003Cbutton>` trigger (44px+ target, chevron Material Symbol rotating 200–300ms, `aria-expanded`, `aria-controls`) controlling a region panel with a smooth height animation. Fully keyboard operable; first item open by default.\n\n**4.8 Final CTA:** full-width panel with a soft pastel gradient wash and glass accents (contrast-safe), `h2`, short copy, and the email capture form per 2.3 alongside a `.btn--primary` alternative. Success feedback must be visible and announced.\n\n**4.9 Footer:** brand block (logo + one-line tagline), three columns of secondary links (Product, Company, Legal — anchor to page sections where possible, plain stubs otherwise), social icons (Material Symbols with `aria-label`), and a copyright line. Fully readable in both themes.\n\n---\n\n## 5. DELIVERABLE & OUTPUT FORMAT\n\n- **Files:** `index.html`, `style.css`, `script.js` — three separate files. The only script reference is a single `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`; no inline script blocks.\n- **Naming convention:** BEM only (`block__element--modifier`), applied consistently across HTML, CSS, and JS hooks — never mix conventions.\n- **Completeness:** deliver the finished page in one attempt — every section built, every state styled, no lorem ipsum, no TODOs, no unstyled breakpoints.\n- **script.js scope:** theme init\u002Ftoggle + persistence, mobile nav, smooth anchor scrolling, FAQ accordion, form validation + simulated submit, optional reveal animations, optional pricing toggle. No external libraries, no build step.\n- **Self-check before finishing:** zero `style=\"...\"` attributes; zero inline SVGs; all required tokens from 1.2 defined in both themes; dark mode fully token-swapped; keyboard-only pass (toggle, nav, FAQ, form); reduced-motion pass; no horizontal scroll from 320px to 1920px.\n",1791954982657]