[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-779-Knolling-Pastel-Flat-Lay":3},"**ROLE & MISSION**\n\nYou are a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete, production-grade Landing Page on the first attempt. Build every section defined in Section 0, and obey Sections 1–4 without exception. Write all user-facing copy in English.\n\n---\n\n## 0. PROJECT BRIEF — THEME: \"KNOLLING PASTEL FLAT LAY\"\n\n**0.1 Theme & Visual Direction**\n- **Style:** Knolling Pastel Flat Lay — Organized, Instructional, Calm. Keywords: knolling, flat lay, organized, pastel, clean, photography, symmetrical, grid. Era: Modern Photography.\n- **Visual direction:** knolling landing page, flat-lay style, organized objects, pastel background, clean 90-degree alignment, overhead photography look.\n- **Effects to emulate:** stationery-item aesthetic, a 50\u002F50 vertical background split, a tech-and-analog mixture, soft natural shadows, matte paper stock.\n- **Product context:** Invent one coherent fictional product fitting the theme (e.g., a workspace-organization and flat-lay planning studio). Write realistic, calm, instructional English copy for every headline, label, testimonial, pricing tier, and FAQ answer. Lorem ipsum is forbidden.\n\n**0.2 Design Tokens (Light mode — default, in `:root`)**\n- `--bg-primary: #F6D0D6` (pastel pink canvas); `--bg-secondary: #FEFEFE` (matte paper card surface — never `#ffffff`).\n- `--text-primary: #2D2D2D`; `--text-secondary: #5A5556` (must verify ≥ 4.5:1 on both backgrounds).\n- `--primary: #2D2D2D` with `--primary-contrast: #FEFEFE` (charcoal matte action surfaces); `--secondary: #CBE4F0` with `--secondary-contrast: #2D2D2D`.\n- `--accent-mint: #D0F0C0`; `--accent-lavender: #E6E6FA` (tertiary pastel surfaces, always paired with `--text-primary`).\n- `--text-success: #2F6B4F`; `--text-error: #A93226`; `--border-default: rgba(45,45,45,0.15)`; `--border-success` \u002F `--border-error` derived from the success\u002Ferror tokens.\n- Shadows use the palette's Shadow Grey family: `--shadow-sm: 2px 2px 5px rgba(0,0,0,0.1)`; `--shadow-md: 4px 6px 16px rgba(0,0,0,0.12)`.\n- Knolling is 90-degree aligned: keep radii small — `--radius-sm: 2px`; `--radius-md: 4px`; `--radius-lg: 8px`.\n- `--spacing-gap: 20px`; `--transition-fast: 150ms`; `--transition-normal: 300ms`; `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`; `--z-dropdown: 10`; `--z-nav: 40`; `--z-modal: 100`; `--z-toast: 200`.\n- `--font-base: 'Lato', sans-serif` (loaded from Google Fonts).\n\n**0.3 Page Structure Requirements (in order)**\n- **Header\u002FNav:** Sticky, matte paper background with bottom border; Flexbox row, `align-items: center`; wordmark; anchor links to every section; visible theme toggle (2.5); primary CTA button. On mobile, collapse links behind a toggle button (`aria-expanded` \u002F `aria-controls`) — no horizontal scrolling.\n- **Hero:** 50\u002F50 vertical background split — left half `--bg-primary` pink, right half `--secondary` blue, achieved with a hard-stop `linear-gradient(90deg, … 50%, … 50%)` or two equal flex columns. Left: eyebrow, single `h1`, subcopy, primary + secondary CTA. Right: the **knolling board** — a decorative object arrangement using the permitted CSS Grid (`grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: var(--spacing-gap)`), composed of CSS-built stationery tiles (paper cards, polaroid frames, washi-tape strips, ruler\u002Fpen bars) plus Google Material Symbols (`photo_camera`, `straighten`, `sticky_note_2`, `edit`, `palette`, `content_cut`). Every tile sits at right angles with matte pastel fills (mint\u002Flavender\u002Fblue rotation) and a soft natural `--shadow-sm` — the tech + analog mixture.\n- **Features:** 3 cards in a flex row that becomes a column on mobile; each card on a different pastel (`--accent-mint`, `--accent-lavender`, `--secondary`) with charcoal text; Material Symbol icon tile, title, description; full card state set per 2.2.\n- **How It Works:** 3 numbered steps, symmetrical and 90° aligned; pastel number tiles (01\u002F02\u002F03), thin connecting rule lines, icon + short instructional copy per step.\n- **Testimonials:** 3 quote cards on `--bg-secondary`; quote icon, quote, author name + role; avatar rendered as a Material Symbol `person` inside a pastel tile (no external images).\n- **Pricing:** 3 tiers; the middle tier marked \"Most Popular\" via a charcoal badge, stronger border, and elevation; each card lists tier name, price, and features with success-colored check icons; CTA per tier — `btn-primary` on the middle tier, outlined\u002Fsecondary elsewhere. Every pricing CTA opens the plan modal (2.4) and implements the full button state set (2.1).\n- **FAQ:** Accordion of 5–6 real Q&As per 2.6.\n- **Final CTA:** Full-width band reusing the 50\u002F50 split motif; headline; email capture form per 2.3 (label + input + submit + dedicated error container); client-side validation with `aria-live` success\u002Ferror feedback and a button success state; no page reload.\n- **Footer:** `--bg-primary` background; brand, grouped secondary link columns (Product, Company, Support), social icon links (Material Symbols), and copyright with dynamic year; all links keyboard-focusable.\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`. **No `style=\"...\"` attributes anywhere.** Target all design properties, layout rules, and states via class or ID selectors only.\n- Keep HTML semantic, clean, and styling-agnostic — changing the site's look must require editing only the CSS file.\n\n**1.2 CSS Variables & Theme Tokens**\n- Every visual token defined in 0.2 must live in `:root` (and theme classes). Enforce contrast pairing for every theme: light backgrounds pair with dark text tokens, dark backgrounds pair with light text tokens — including dark mode.\n\n**1.3 Mandatory Dark Mode Support**\n- Define a \"Dim Flat Lay\" dark theme under both `@media (prefers-color-scheme: dark)` and a `.dark` class: `--bg-primary: #221F23`; `--bg-secondary: #2C282E`; `--text-primary: #F2EDEE`; `--text-secondary: #B9B2B6`; action surfaces flip to pastel (`--primary: #CBE4F0`, contrast `#2D2D2D`); accents stay recognizable; success\u002Ferror lighten (`#7FC79E` \u002F `#E38B82`); borders become `rgba(242,237,238,0.16)`; shadows deepen. Background\u002Ftext variables must swap seamlessly with no HTML restructuring.\n- Persist the user's choice via `localStorage`, falling back to `prefers-color-scheme` on first visit; provide a visible toggle with correct `aria-pressed` \u002F `aria-label` state.\n- **Exception clause:** the source theme spec lists dark mode as \"No\" — dark mode is nevertheless mandatory; implement the muted charcoal variant above rather than omitting it.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- Build all structural layout with Flexbox. Every flex container **must default to `align-items: center`** unless an exception is explicitly justified.\n- All flex layouts must be mobile-responsive out of the box (rows convert to columns on small viewports); prevent horizontal scrolling at every width.\n- **Exception clause:** CSS Grid is permitted exclusively for the Hero's decorative knolling board (`repeat(auto-fill, minmax(100px, 1fr))`, 20px gap) because the grid motif is definitional to the theme; all structural layout remains Flexbox.\n\n**1.5 Framework Default & Tailwind Integration**\n- Use Tailwind CSS, or clean custom CSS authored through Tailwind's `@layer` \u002F `@apply` directives. All styling must map back to the design tokens or reusable class names (`.btn`, `.card`, `.input-group`).\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Load `Lato` from Google Fonts via `\u003Clink>` and bind it to `--font-base`. Load all icons from Google Material Symbols. **Raw inline SVGs and local icon files are forbidden.**\n- **Exception clause:** the theme's \"photorealistic \u002F overhead photography\" feel is realized through CSS-composed matte stationery tiles, Material Symbols, and soft natural shadows — no external or local image assets in the deliverable.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component**\n- Style all states via CSS classes: `.btn-primary`, `.btn-secondary`, `.btn-ghost`, `.btn-danger`.\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px touch target.\n- **Hover:** brightness\u002Fshadow shift with `cursor: pointer`. **Focus:** distinct ring via `outline`\u002F`box-shadow` using CSS variables. **Active:** `transform: scale(0.97)`.\n- **Loading:** disables interaction and double-clicks; renders an animated Google Icon spinner **without changing button dimensions**. **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`. **Success\u002FError:** temporary feedback states driven by `--text-success` \u002F `--text-error`. `.btn-danger` must be visually distinct in both light and dark themes.\n\n**2.2 Card Component**\n- **Default:** flexible Flexbox layout on `--bg-secondary` with subtle `--border-default` and `--shadow-sm`. **Hover:** `translateY(-2px)` plus shadow shift. **Focus-within:** highlighted border when a child link\u002Fbutton is focused.\n- **Loading (Skeleton):** CSS shimmer animation with stable dimensions to prevent layout jumps. **Empty State:** fallback layout with a Google Icon and clear guidance text.\n- Variants required: feature card, step card, testimonial quote card, pricing tier card (with popular-tier emphasis).\n\n**2.3 Form & Input Requirements**\n- Structure as a flex `.input-group` wrapping: label, input field, dedicated error feedback container.\n- States: Empty, Focused (outline ring), Filled, Valid (success border + icon), Invalid (error border, red text, error icon, `aria-live` message), Disabled, Read-only.\n- Apply to the Final CTA email capture: validate email format, announce errors via `aria-live`, and trigger the button success state on valid submission.\n\n**2.4 Modal \u002F Popup Requirements**\n- Pricing CTAs open a plan-selection modal. States: Opening, Open, Loading, Success\u002FError, Closing — all animated via CSS transitions.\n- UX: centered flex container (`align-items: center`) over a backdrop overlay; Google Icon close button; keyboard focus trapping; `role=\"dialog\"` + `aria-modal`; close via `Esc` or overlay click; focus returns to the triggering button. The confirm button must demonstrate the Loading → Success flow.\n\n**2.5 Navigation & Theme Toggle**\n- Sticky header per 0.3; theme toggle renders sun\u002Fmoon Material Symbols with correct `aria-pressed`\u002F`aria-label` and persistence per 1.3; mobile menu toggle with `aria-expanded`\u002F`aria-controls`.\n\n**2.6 FAQ Accordion**\n- Use `\u003Cdetails>\u002F\u003Csummary>` or a button + region ARIA pattern; chevron icon rotates 90° on open; `aria-expanded` on triggers; single-open behavior; smooth height animation; fully keyboard operable.\n\n**2.7 Toast**\n- Toast region for form success\u002Ferror and modal confirmations, using `aria-live` and `--z-toast`; never rely on color alone — pair icon and text.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid sizing, standard breakpoints, zero horizontal overflow.\n- **Smooth animations:** `transition: var(--transition-normal)` on all state changes; fully respect `prefers-reduced-motion` (replace transforms\u002Fspinners\u002Fshimmer with simple opacity changes).\n- **Accessibility:** ≥ 4.5:1 contrast in both modes; never communicate state by color alone; semantic HTML5 (`header`, `nav`, `main`, `section`, `footer`), one `h1`, logical heading order; correct ARIA roles\u002Flabels on custom widgets; logical DOM\u002Ffocus order; full keyboard operability; `aria-live` regions for form errors, toasts, and loading states; include a skip-to-content link.\n- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.\n- **Destructive actions:** any `.btn-danger` usage must be distinct in both themes.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **Files:** separate `index.html`, `style.css`, and `script.js`. No inline `\u003Cscript>` blocks beyond a single deferred entry-point reference (`\u003Cscript src=\"script.js\" defer>`). No inline styles.\n- **Naming:** one consistent convention only — BEM (`block__element--modifier`) authored in `style.css`, optionally via Tailwind `@layer`\u002F`@apply`. Never mix BEM with raw utility classes on the same element.\n- **Copy:** all user-facing copy in coherent, realistic English matching the product context; no lorem ipsum; placeholders only where content is genuinely unspecified (there should be none).\n- **Assets:** fonts exclusively from Google Fonts (`Lato`); icons exclusively Google Material Symbols; no external images, inline SVGs, or local asset files.\n- **Final self-audit before delivery:** zero inline styles; zero inline SVGs; dark mode toggle works and persists; all button, card, input, and modal states implemented; keyboard-only pass succeeds; contrast verified in both themes; no horizontal scroll at 320px width.\n",1791954992673]