[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-513-CRM-Copper-Sand":3},"**ROLE & MISSION**\n\nAct as a Senior Frontend Engineer and Expert UI Designer. Code a complete, production-ready landing page on the first attempt — final, full file contents, no drafts, no clarifying questions.\n\n**Project:** \"CRM Copper Sand\" — a single-page marketing site for a fictional modern SaaS CRM (invent a consistent brand name, e.g., \"Copperline\", and use it throughout).\n**Aesthetic (2020s Modern SaaS CRM):** Clean and analytical; Geist typography; modular light cards floating on a warm sand canvas; a copper header with strong contrast; simple CSS-drawn charts; a consistent line-icon system for actions, statuses, and navigation; focus on commercial activity (pipeline, contacts, deals).\n**Sections (in this order):** Sticky Header + Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.\n**Language:** Write ALL user-facing copy in English.\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`. **Forbidden:** `style=\"...\"` attributes, `\u003Cstyle>` blocks, and presentational markup.\n- Target everything via class\u002FID selectors only.\n- Keep HTML semantic and visually agnostic: restyling the site must never require markup changes.\n\n**1.2 CSS Variables & Theme Tokens**\nDefine all tokens in `:root`, then theme overrides (see 1.3). Bind every color, radius, shadow, spacing, and motion value to a variable — no raw hex values outside the token block.\n\n```css\n:root {\n  --font-base: 'Geist', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  --primary: #C08532;            \u002F* copper *\u002F\n  --on-primary: #111827;         \u002F* FIXED graphite text on copper — never flips with theme *\u002F\n  --secondary: #111827;          \u002F* graphite *\u002F\n  --bg-primary: #F2F1ED;         \u002F* sand page background — never pure white *\u002F\n  --bg-secondary: #FEFEFE;       \u002F* card surfaces — use #fefefe, never #ffffff *\u002F\n  --bg-inverse: #111827;         \u002F* footer band *\u002F\n  --text-primary: #111827;\n  --text-secondary: #4B5563;\n  --text-muted: #6B7280;         \u002F* placeholders, meta, disabled ONLY — never body copy *\u002F\n  --text-on-inverse: #F2F1ED;\n  --text-success: #16A34A;\n  --text-error: #DC2626;\n  --border-default: #E5E1D8;     \u002F* sand-tinted soft border *\u002F\n  --border-success: #16A34A;\n  --border-error: #DC2626;\n  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px;\n  --radius-card: var(--radius-md);        \u002F* spec alias *\u002F\n  --shadow-sm: 0 6px 16px rgba(15, 23, 42, 0.06);\n  --shadow-md: 0 18px 45px rgba(15, 23, 42, 0.08);  \u002F* spec shadow *\u002F\n  --spacing-gap: 1.5rem;\n  --transition-fast: 150ms; --transition-normal: 300ms;\n  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);\n  --z-dropdown: 1000; --z-modal: 1100; --z-toast: 1200;\n  \u002F* Optional aliases honoring source-spec names: --crm-primary: var(--primary); --crm-neutral: var(--bg-primary); *\u002F\n}\n```\n\n- **Contrast pairing (mandatory, both themes):** every light background token pairs only with dark text tokens, every dark background token only with light text tokens. Copper (`#C08532`) is a midtone: any fixed copper surface (header, CTA band, badges, primary buttons) must always use `--on-primary` (graphite) text in BOTH themes. `#9CA3AF` is never body text.\n- **Global typography:** `letter-spacing: -0.15px` on body; headings may tighten to `-0.02em` at display sizes.\n\n**1.3 Mandatory Dark Mode (FULL support — upgrade the spec's \"Full\u002FPartial\" to Full)**\n- Define dark tokens via this cascade so there is no first-paint flash and no inline scripts:\n  1. `:root { color-scheme: light; …light tokens… }`\n  2. `@media (prefers-color-scheme: dark) { :root { color-scheme: dark; …dark tokens… } }`\n  3. `:root.light { …light tokens… }` and `:root.dark { …dark tokens… }` (higher specificity — user choice wins)\n- Dark palette: `--bg-primary: #111827; --bg-secondary: #1F2937; --bg-inverse: #0B1220; --text-primary: #F2F1ED; --text-secondary: #9CA3AF; --text-muted: #9CA3AF; --border-default: #374151; --shadow-md: 0 18px 45px rgba(0,0,0,0.5);` Keep `--primary: #C08532` and `--on-primary: #111827` unchanged.\n- **Theme switch:** visible toggle button in the header (`dark_mode` \u002F `light_mode` icons, `aria-pressed`, `aria-label=\"Toggle dark mode\"`); persists via `localStorage`; falls back to `prefers-color-scheme` on first visit. Theme switching must require zero HTML restructuring.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- Build all layout with Flexbox. **Every flex container defaults to `align-items: center`** unless a documented exception applies (permitted exceptions: `stretch` for full-width stacked card\u002Fform content, `flex-end` for chart bar baselines — comment each exception).\n- Mobile-first: rows wrap or collapse to columns below ~768px; **zero horizontal scrolling at any width down to 320px**.\n\n**1.5 Framework Default**\n- Use clean custom CSS only — no Tailwind, no external CSS frameworks, no CDNs. All reusable classes (`.btn`, `.card`, `.input-group`) are driven by the tokens above.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Fonts via Google Fonts `\u003Clink>` tags with preconnect: `family=Geist:wght@300..800` and `family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,300..600,0..1,0`. Bind `--font-base: 'Geist'`.\n- Icons: Material Symbols Rounded with `font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24`; usage: `\u003Cspan class=\"material-symbols-rounded\" aria-hidden=\"true\">icon_name\u003C\u002Fspan>`.\n- **Icon Exception (one-line):** The source spec names \"Hugeicons\"; per the Google Fonts\u002FIcons mandate, use Google Material Symbols Rounded exclusively — outlined, weight-400 glyphs whose clean geometry approximates the Hugeicons look; inline SVGs, icon packages, and local icon files are forbidden.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Buttons** — `.btn`, `.btn--primary` (copper bg + `--on-primary` text), `.btn--secondary` (graphite bg + sand text), `.btn--ghost`, `.btn--inverse` (graphite bg + sand text, for the copper CTA band), `.btn--danger` (red `#DC2626`, distinct in BOTH themes — define even if unused).\n- **Default:** flex, `align-items: center`, `justify-content: center`, `gap: 0.5rem`, min touch target 44×44px.\n- **Hover:** darken\u002Fbrightness shift + `--shadow-sm`, `cursor: pointer`. **Focus-visible:** 2px outline, 2px offset, using a ring color that contrasts the surface (copper ring on light\u002Fdark cards; graphite ring on copper header). **Active:** `transform: scale(0.97)`.\n- **Loading:** `.btn--loading` + `aria-busy=\"true\"` — disables interaction, prevents double-clicks, renders a CSS spinner that never changes button dimensions.\n- **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`. **Success\u002FError:** temporary `.btn--success` \u002F `.btn--error` states with `check_circle` \u002F `error` icons in `--text-success` \u002F `--text-error`.\n\n**2.2 Cards** — `.card`: `--bg-secondary`, 1px `--border-default`, `var(--radius-card)`, `--shadow-sm`.\n- **Hover:** `--shadow-md` + `translateY(-2px)`. **Focus-within:** border shifts to copper when a child control is focused. **Skeleton:** `.card--skeleton` shimmer animation (safe under `prefers-reduced-motion`). **Empty state:** `.card__empty` with a Material icon + guidance text. **Highlight:** `.card--highlight` (2px copper border + \"Most popular\" copper badge with `--on-primary` text) for the featured pricing tier.\n\n**2.3 Forms & Inputs** — `.input-group`: flex column (`align-items: stretch` — documented exception) wrapping `\u003Clabel>`, `\u003Cinput>`, and a dedicated error container with `aria-live=\"polite\"` (icon + text; never color-only).\n- **States:** empty, focused (copper ring), filled, valid (`--border-success` + `check_circle`), invalid (`--border-error`, `--text-error`, `error` icon + message), disabled, read-only. Used by the footer newsletter form and the demo modal form.\n\n**2.4 Modal \u002F Popup** — \"Book a demo\" modal: fixed overlay (graphite-tinted backdrop, `--z-modal`), centered flex container.\n- **States:** opening (fade + scale from 0.96), open, loading (submit button enters loading state), success panel (`check_circle` + confirmation copy), error, closing — all via CSS transitions.\n- **UX:** `role=\"dialog\"`, `aria-modal=\"true\"`, icon close button (44px, top-right), focus trapping, focus restored to trigger on close, close via `Esc` and overlay click, body scroll locked.\n\n**2.5 FAQ Accordion** — each item: trigger `\u003Cbutton aria-expanded aria-controls>` + panel region; `expand_more` chevron rotates; panel opens\u002Fcloses via CSS height\u002Fopacity transitions; fully keyboard operable; state never signaled by color alone.\n\n**2.6 Header, Mobile Menu, Theme Toggle** — sticky `.header` with **fixed copper background and `--on-primary` graphite text in both themes** (strong contrast per spec); wordmark logo (Material icon + brand name); anchor nav links (Features, How It Works, Pricing, FAQ) with `scroll-margin-top` compensation and smooth scrolling (auto under reduced motion); header CTA opens the demo modal.\n- Mobile: hamburger (`menu`\u002F`close` icons) toggles a panel at `--z-dropdown`; `aria-expanded`, closes on `Esc` and link selection, manages focus in\u002Fout.\n\n**2.7 CSS Charts (Hero mockup)** — pure CSS\u002Fflex bar charts: flex row of `.chart__bar` divs with percentage heights, `align-items: flex-end` (documented exception), bars animate growth on reveal (skipped under reduced motion); each bar carries an `aria-label` with its value — never color-only data.\n\n---\n\n## 3. LANDING PAGE SECTION REQUIREMENTS\n\n**3.1 Hero** — Two-part layout: copy block (eyebrow, H1, subheadline, primary CTA \"Start free trial\" → scrolls to Pricing, secondary CTA \"Book a demo\" → opens modal) beside a **dashboard-style preview mockup** built from modular cards on the sand background: a Pipeline card (stages with deal counts + progress bars), an Activities feed card, and a Revenue chart card (CSS bars). Add a compact stats row (e.g., win-rate lift, active teams, average response time). On page load, the activities card shows `.card--skeleton` shimmer ~800ms, then populates from a mock array in `script.js`; if the array is empty, render the `.card__empty` pattern (icon + \"No activity yet\" guidance).\n\n**3.2 Features (3 cards)** — Equal-height flex\u002Fgrid row (documented `stretch` exception), collapsing to a column on mobile. Three CRM pillars matching the spec: **Pipeline Management** (`view_kanban`), **Contact Intelligence** (`contacts`), **Activity Tracking & Analytics** (`monitoring`). Each card: circular copper-tinted icon chip, H3 title, realistic description, hover lift.\n\n**3.3 How It Works (3 steps)** — Steps 01\u002F02\u002F03 with icon badges (`upload` → `view_kanban` → `insights`), titles, and descriptions; a connector line between steps on desktop, vertical stack on mobile.\n\n**3.4 Testimonials** — 3 cards: `format_quote` icon, 5-star row using `star` icons with `aria-label=\"Rated 5 out of 5\"`, quote text, CSS initials-avatar circle (no external images), name + role\u002Fcompany. Realistic English quotes about pipeline visibility and closing more deals.\n\n**3.5 Pricing (3 tiers)** — Segmented Monthly\u002FAnnual toggle (`aria-pressed` on each button, ~20% annual discount) with an `aria-live=\"polite\"` region announcing price changes. Three tier cards (e.g., Starter $19, Professional $49 — `.card--highlight` with \"Most popular\" badge, Enterprise $99 or \"Custom\"); per-user\u002Fmonth labels; feature lists with `check_circle` icons in `--text-success`; each tier CTA wires to trial scroll or demo modal.\n\n**3.6 FAQ** — 5–6 realistic Q&As (free trial, data import\u002Fmigration, integrations, security, cancellation, support) using the 2.5 accordion.\n\n**3.7 Final CTA** — Full-width copper band: `--on-primary` graphite heading + subcopy, `.btn--inverse` primary action, and an underlined \"Book a demo\" secondary link (graphite). Strong contrast in both themes.\n\n**3.8 Footer** — `--bg-inverse` graphite band with `--text-on-inverse` sand text. Four secondary-link columns (Product, Company, Resources, Legal), a newsletter `.input-group` with validation + `aria-live` feedback and a loading-state submit button, accessible icon-only social buttons using available Material Symbols (e.g., `alternate_email`, `rss_feed`, `public`) with `aria-label`s, and a copyright line.\n\n---\n\n## 4. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid sizing, breakpoints at ~480\u002F768\u002F1024px, no horizontal overflow.\n- **Smooth motion:** all state changes use `transition: var(--transition-normal) var(--ease-standard)`; **every animation (shimmer, chart growth, accordion, modal) is disabled under `prefers-reduced-motion`.**\n- **Accessibility:** skip link; semantic landmarks (`header`, `nav`, `main`, `section[aria-labelledby]`, `footer`); single H1 with logical h2→h3 hierarchy; contrast ≥ 4.5:1 body \u002F ≥ 3:1 large text in BOTH themes; state never communicated by color alone (icons + text everywhere); visible `:focus-visible` rings on all interactive elements; full keyboard operability; `aria-live` regions for form feedback, price changes, and loading states.\n- **Mandatory feedback:** every click, hover, and submission produces a visible state change.\n\n---\n\n## 5. DELIVERABLE & OUTPUT FORMAT\n\n- **Files:** separate `index.html`, `style.css`, `script.js` (vanilla ES6, no dependencies, defensive null checks). `index.html` includes: `lang=\"en\"`, viewport + title + meta description, preconnect + Google Fonts links (Geist, Material Symbols Rounded), and exactly ONE script reference — `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`. No other inline scripts.\n- **Naming:** strict BEM (`block__element--modifier`) everywhere. Only permitted non-BEM classes: `.dark`, `.light`, `.material-symbols-rounded`, `.visually-hidden`.\n- **Copy:** realistic, specific English marketing copy — lorem ipsum is prohibited; invent all unspecified content coherently.\n- **Output:** the complete contents of all three files in a single response, on the first attempt.\n",1791954988504]