[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-222-Corporate-Memphis":3},"# SYSTEM PROMPT — CODING AGENT SPECIFICATION\n## Landing Page: \"Corporate Memphis\" (Art & Illustration) — Single-Pass Build\n\n**Mission:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready landing page in your first response — no iterations, no placeholders, no TODOs. The page promotes a fictional illustration studio (invent a friendly brand name, e.g., \"Alegria Studio\") that creates custom Corporate Memphis–style artwork for tech companies and startups. All user-facing copy must be authored by you, in English, in a warm, inclusive, playful-professional tone. Lorem ipsum is forbidden.\n\n**Theme:** Corporate Memphis \u002F Alegria (2017–present) — flat vector people with tiny heads, long bendy limbs, simple geometric bodies, bold flat colors, friendly and inclusive, wrapped in a soft, rounded, minimal-organic UI with subtle shadow and blur.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n### 1.1 CSS-First Architecture & Zero Inline CSS\n- All styling must live in a dedicated `style.css` file. **The `style=\"...\"` attribute is forbidden anywhere in the HTML.**\n- All design properties, layout rules, and states must be targeted via class or ID selectors.\n- HTML must remain clean, semantic (`header`\u002F`nav`\u002F`main`\u002F`section`\u002F`footer`), and style-agnostic — changing the site's look must only require editing `style.css`.\n\n### 1.2 CSS Variables & Theme Tokens\nDefine all tokens in `:root`, re-declare the dark set under `.dark`, and organize the file with `@layer` cascade layers (`tokens`, `base`, `layout`, `components`, `utilities`). The source design system provides token-wired base classes (`.nav`, `.btn`, `.btn--primary`, `.card`, `.input`, `.badge`) — adopt and extend them; do not restyle from scratch. Canonical token names:\n\n- **Colors (Light — default):** `--bg-primary: #fefefe` (**Exception:** the source palette declares `#ffffff`; per the no-pure-white rule, use `#fefefe` for the page background and reserve `#ffffff` only for elevated card surfaces), `--bg-secondary: #f7f5ff`, extended `--surface-2: #eef0ff`, `--text-primary: #1f2233`, `--text-secondary: #5b607a`, `--primary: #6c5ce7`, `--secondary: #00b894`, extended `--accent: #ff7a8a` and `--yellow: #ffd166`, `--text-success: #00b894`, `--text-error: #e5484d`, `--border-default: #e4e3f4`, `--border-error: #e5484d`, `--border-success: #00b894`.\n- **Contrast pairing:** every light background token must pair with a dark text token and every dark background with a light text token — enforced in every theme, not just the default.\n- **Shape & depth:** `--radius-sm: 8px`, `--radius-md: 16px`, `--radius-lg: 24px`, `--radius-pill: 999px`, `--shadow-sm: 0 4px 12px rgba(108,92,231,0.10)`, `--shadow-md: 0 10px 30px rgba(108,92,231,0.14)` (purple-tinted shadows are part of the signature).\n- **Spacing:** `--space-1: 4px` through `--space-24: 96px` (4\u002F8\u002F12\u002F16\u002F24\u002F32\u002F48\u002F64\u002F96), plus `--spacing-gap: 24px`.\n- **Motion:** `--transition-fast: 120ms`, `--transition-normal: 240ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.\n- **Stacking:** `--z-dropdown: 1000`, `--z-modal: 1100`, `--z-toast: 1200`.\n- **Signature gradient:** `--blob: radial-gradient(circle at 30% 30%, #ff7a8a, #6c5ce7)`.\n- **Typography:** `--font-base` and `--font-display` bound to Poppins; fluid type scale `--text-xs` (0.75rem) through `--text-5xl` (4rem) applied with `clamp()`.\n\n### 1.3 Mandatory Dark Mode Support\nThe source specification does not declare color modes — you must derive a dark theme and validate it in both light and dark before publishing.\n- Provide dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `\u003Chtml>`. Suggested set (verify WCAG AA, adjust if needed): `--bg-primary: #171a2b`, `--bg-secondary: #232741`, `--text-primary: #f7f5ff`, `--text-secondary: #b6bbd8`, `--primary: #a29bfe`, `--secondary: #1fd9b4`, `--accent: #ff9aa7`, `--yellow: #ffd166`, `--border-default: #343a5c`, `--text-error\u002F--border-error: #ff8f9a`, `--text-success\u002F--border-success: #1fd9b4`.\n- In dark mode, buttons filled with the lightened `--primary` must switch to dark text (`#1f2233`) to preserve contrast pairing.\n- Theme switching swaps variables only — no HTML restructuring.\n- Persist the user's choice in `localStorage` (key `theme`), falling back to `prefers-color-scheme` on first visit.\n- The header must contain a visible toggle button using a Google Material Symbol (`dark_mode`\u002F`light_mode`) with correct `aria-pressed` state and a dynamic `aria-label` (\"Switch to dark mode\" \u002F \"Switch to light mode\").\n- **Exception:** a single inline `\u003Cscript>` bootstrap in `\u003Chead>` is permitted solely to read `localStorage` and apply the `.dark` class before first paint (prevents flash of the wrong theme); all other JavaScript lives in `script.js`.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n- Build all layout structures with Flexbox. Every flex container must default to `align-items: center` unless an explicitly justified exception is documented in a CSS comment.\n- Mobile-first: rows wrap or convert to columns on small viewports; horizontal scrolling is forbidden at any width. Use one centered container (`max-width: 1200px`, token-based padding) for all sections.\n\n### 1.5 Framework Default\n- Use clean, token-driven custom CSS organized with `@layer` (per 1.2). If you opt for Tailwind, every utility value must map back to the CSS variables above; reusable classes (`.btn`, `.card`, `.input-group`) remain the primary styling interface.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n- Load **Poppins** (weights 400\u002F500\u002F600\u002F700\u002F800) from Google Fonts via `\u003Clink>` and bind it to `--font-base`\u002F`--font-display`.\n- Load **Google Material Symbols (Rounded)** for every icon. **Raw inline SVGs, local icon files, and emoji-as-icons are forbidden.**\n- All illustrations must be constructed from pure CSS (Section 6) — no inline SVG illustration assets, no external images, no photos.\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Buttons\nStyle all states via BEM classes (`.btn`, `.btn--primary`, `.btn--ghost`, `.btn--accent`, `.btn--danger`):\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px touch target, bold Poppins.\n- **Hover:** brightness\u002Fshadow shift with `cursor: pointer` and `translateY(-1px)`.\n- **Focus:** distinct `:focus-visible` ring built from CSS variables with offset.\n- **Active\u002FPressed:** `transform: scale(0.97)`.\n- **Loading:** disables interaction, prevents double-clicks, renders a rotating Material Symbol (`progress_activity`) or CSS spinner without distorting button dimensions.\n- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n- **Success\u002FError:** temporary feedback states driven by `--text-success`\u002F`--text-error` (required by the Final CTA form).\n\n### 2.2 Cards\nBase `.card` shared by Features, Testimonials, and Pricing:\n- **Default:** flexible Flexbox layout, `--bg-secondary` (or `#ffffff`\u002Fdark equivalent elevated over the page background), `--radius-lg`, 1px `--border-default`, `--shadow-sm`.\n- **Hover:** elevation shift to `--shadow-md` with `transform: translateY(-2px)`.\n- **Focus-within:** border highlight when a child link\u002Fbutton receives focus.\n- **Loading (Skeleton):** define a `.card--skeleton` shimmer animation that preserves layout dimensions.\n- **Empty State:** define a fallback pattern with a Google Icon and clear guidance text.\n\n### 2.3 Forms & Inputs (Final CTA Email Capture)\n- **Structure:** `.input-group` flex container wrapping a `\u003Clabel>`, the input, and a dedicated error\u002Fsuccess feedback container.\n- **States:** empty, focused (outline ring via `--primary`), filled, valid (`--border-success` + check Material Symbol), invalid (`--border-error`, error text in `--text-error`, error icon), disabled, read-only.\n- Validate the email in `script.js`; feedback renders in the dedicated container wired with `aria-live=\"polite\"` and `aria-describedby`. Never signal errors by color alone — always text plus icon.\n- On valid submit: button enters loading state, then a success state (check icon + confirmation message), then resets.\n\n### 2.4 Modal \u002F Overlay (Mobile Navigation Drawer)\n- The hamburger opens a slide-over drawer: centered flex panel, blurred backdrop overlay, `--z-modal` stacking, animated opening\u002Fclosing via CSS transitions.\n- Close via `Esc`, overlay click, and a Material Symbol close button; trap keyboard focus while open; lock body scroll; use `role=\"dialog\"`, `aria-modal=\"true\"`, and correct `aria-expanded`\u002F`aria-label` on the hamburger.\n- Any dialog containing async actions must also define loading and success\u002Ferror states.\n\n### 2.5 FAQ Accordion\n- Button-per-item pattern: `aria-expanded`, `aria-controls`, panel with `role=\"region\"`; chevron Material Symbol rotates on open; smooth CSS height animation; fully keyboard operable (Enter\u002FSpace); multiple items may be open simultaneously.\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid `clamp()` typography, breakpoints at ~640\u002F768\u002F1024px, zero horizontal overflow; `scroll-margin-top` on anchored sections to clear the sticky header; smooth scrolling disabled under reduced motion.\n- **Smooth animations:** `transition: var(--transition-normal) var(--ease-standard)` on all state changes; every `prefers-reduced-motion: reduce` query disables transforms, floats, and shimmer.\n- **Accessibility (a11y):** WCAG AA contrast in both light and dark modes; never rely on color alone to communicate state; semantic HTML5 landmarks; logical DOM\u002Ffocus order; a \"Skip to content\" link; full keyboard operability (no mouse-only interactions); `aria-live` regions for dynamic feedback (form errors, theme changes, loading states).\n- **Mandatory visual feedback:** every click, hover, focus, and submission triggers a visible state change.\n- **Destructive actions:** define `.btn--danger` as visually distinct in both themes (not used by this page's copy, but the class must exist).\n- **Micro-interactions:** sticky header gains shadow\u002Fblur on scroll (JS toggles a class); hero decorations gently float; scroll-reveal is allowed only if it respects reduced motion and never hides content when JS fails.\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **Files:** separate `index.html`, `style.css`, and `script.js`. No inline `\u003Cscript>` blocks beyond the single permitted theme-bootstrap exception in 1.3; `script.js` is referenced once with `defer`.\n- **Naming:** BEM (`block__element--modifier`) consistently across HTML, CSS, and JS — never mix conventions.\n- **Copy:** author real, on-brand English copy for every section; placeholders are forbidden because no content was left unspecified.\n- **Completeness:** deliver the full, runnable page in your first response — every section below fully built, styled in both themes, and interactive.\n\n## 5. PAGE STRUCTURE & CONTENT (ALL SECTIONS MANDATORY)\n\n1. **Header\u002FNav (sticky):** wordmark + geometric logo mark, links to each section, theme toggle, primary CTA; collapses to hamburger + drawer below 768px.\n2. **Hero:** eyebrow badge, benefit-driven headline, subhead, dual CTAs (primary + ghost), and a CSS-composed Corporate Memphis scene (Section 6) layered over `--blob` background shapes.\n3. **Features — 3 cards:** each with a Material Symbol icon inside a colored geometric tile (rotate tiles across `--primary`\u002F`--accent`\u002F`--secondary`\u002F`--yellow`), title, and description. Suggested angles: custom illustrations, brand-consistent style systems, fast delivery.\n4. **How It Works — 3 steps:** numbered geometric badges (pill\u002Fcircle), short titles and descriptions, connected by a dashed line on desktop, stacked on mobile.\n5. **Testimonials — 3 cards:** quote Material Symbol, quote text, CSS avatar (colored circle with initials), fictional name, role, and company.\n6. **Pricing — 3 tiers:** feature lists with check Material Symbols, price + \"\u002Fmo\", per-tier CTA; the middle tier is highlighted with a \"Most popular\" badge, stronger elevation, and `--primary` accents — visually distinct in both themes.\n7. **FAQ — 5–6 items:** accordion per 2.5, with real questions about the illustration service.\n8. **Final CTA:** full-width band with `--blob` gradient background, headline, and the email capture form per 2.3.\n9. **Footer:** brand blurb, 3–4 columns of secondary links (Product, Company, Resources, Legal), circular social icon buttons (Material Symbols with `aria-label`s), and a copyright line with the current year injected by JS.\n\n## 6. CORPORATE MEMPHIS VISUAL DIRECTION (SIGNATURE LOOK)\n\n- **Figures:** build 2–3 flat people in the hero (optionally echoed in the Final CTA) from pure CSS — tiny circular heads, simple geometric bodies (rounded rectangles), long bendy limbs (thin pill-shaped divs rotated via `transform`), flat solid colors only; no gradients or shadows on the figures themselves.\n- **Props:** oversized flat geometric objects (giant pencil, brush, rocket, or lightbulb) built from divs using `border-radius`\u002F`clip-path` and palette colors.\n- **Decorations:** floating confetti (circles, rings, quarter-circles, zigzags) and blob shapes using `--blob`; subtle `translateY` float animation (6–8s loop), disabled under reduced motion.\n- **Soft rounded UI:** `--radius-lg` cards, pill buttons and badges, purple-tinted shadows, `backdrop-filter: blur()` on the header and drawer.\n- All decorative elements must be `aria-hidden=\"true\"` with `pointer-events: none`; the hero scene container uses `role=\"img\"` with a descriptive `aria-label`.\n- Keep the composition friendly, inclusive, and generous with whitespace — the minimal-organic feel comes from soft corners, airy spacing, and calm geometry surrounding bold flat color.\n",1791954983241]