[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-619-Mistral-Golden-Amber":3},"# System Prompt: Build \"Mistral Golden Amber\" Landing Page\n\nYou are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready Landing Page on the first attempt. Theme: **Mistral Golden Amber** — Golden Warm, Amber Gradients, Billboard Typography, Sharp Geometry, European Luxury (2024–2026 European AI Luxury era).\n\n**Sections (in order):** 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 ARCHITECTURE RULES\n\n**1.1 CSS-First & Zero Inline CSS**\n- All styling lives in `style.css`. The `style=\"...\"` attribute is forbidden in HTML.\n- Target everything via class\u002FID selectors only. HTML stays semantic and clean.\n- Changing the theme must never require touching the markup.\n\n**1.2 CSS Variables & Theme Tokens**\nDefine in `:root`:\n- Colors: `--primary: #fa520f` (Mistral Orange), `--secondary: #ffa110` (Sunshine), `--bg-primary: #fffaeb` (Warm Ivory), `--bg-secondary: #fff0c2` (Cream), `--text-primary: #1f1f1f` (Mistral Black), `--text-secondary: #7f6315`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`, plus `--gold: #ffd900` (Bright Gold) and `--flame: #fb6424`.\n- Contrast pairing: every light background token pairs with dark text tokens; dark surfaces pair with light text. Enforce this everywhere.\n- `--radius-sm: 0px; --radius-md: 0px; --radius-lg: 2px` — sharp architectural corners, near-zero radius.\n- Shadows: `--shadow-sm`, `--shadow-md`, and a multi-layer golden shadow token using `rgba(127,99,21,0.12)` (e.g. `-8px 16px 39px` plus layered offsets) to create the \"golden hour\" effect.\n- `--spacing-gap`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.\n- `--z-dropdown`, `--z-modal`, `--z-toast`.\n\n**1.3 Dark Mode (Mandatory)**\n- Define dark tokens under `@media (prefers-color-scheme: dark)` and a `.dark` class.\n- Dark palette: deep warm black surfaces (`#141210` \u002F `#1f1f1f`), amber-tinted text (`#fffaeb`), same `--primary` accent adjusted for contrast.\n- Persist user choice via `localStorage`, fall back to `prefers-color-scheme` on first visit. Include a visible toggle with correct `aria-pressed` \u002F `aria-label` state. Note: the theme spec marks dark mode \"Not Recommended\" — implement it anyway as a functional, accessible fallback, tuned to keep the golden-amber mood.\n\n**1.4 Flexbox & Mobile-First**\n- Build all layout with Flexbox. Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment.\n- All rows convert to columns on small viewports. No horizontal scrolling at any breakpoint.\n\n**1.5 Framework**\n- Use Tailwind CSS via CDN (or clean custom CSS mapped to generic classes: `.btn`, `.card`, `.input-group`). All utilities map back to the CSS variables above.\n\n**1.6 Typography & Icons**\n- Fonts: Google Fonts only — use **Archivo** (or **Inter**) as `--font-base`, weight **400 exclusively** across the entire page (no bold anywhere; authority through size, not weight).\n- Headlines: **82px** (fluid via `clamp()` down to ~40px mobile), `letter-spacing: -2.05px`, weight 400.\n- Body text: 16–18px, normal letter-spacing.\n- Icons: **Google Material Symbols** only. Inline SVGs and local icon files are forbidden.\n- Button labels: `text-transform: uppercase` for European formality.\n\n---\n\n## 2. THEME-SPECIFIC VISUAL DIRECTION\n\n- **Background:** `#fffaeb` warm ivory; `#fff0c2` cream for secondary surfaces (cards, step blocks, pricing tiers).\n- **Mistral Block Gradient:** `linear-gradient(135deg, #ffd900, #ffa110, #fa520f)` — use for the hero CTA button, section accent bars, pricing \"featured\" tier badge, and thin decorative rules. Never as full-page background.\n- **Golden Shadows:** multi-layer `rgba(127,99,21,0.12)` shadows on cards and hero panel, e.g. `box-shadow: -8px 16px 39px rgba(127,99,21,0.12), 0 4px 12px rgba(127,99,21,0.08)`.\n- **Corners:** 0px radius everywhere (max 2px) — sharp architectural geometry.\n- **Photography:** any imagery uses golden-toned landscape photos (via picsum placeholders with warm overlay tinting acceptable).\n- **Buttons:** uppercase labels, `--primary` fill with ivory text, or outlined `--text-primary` variants.\n\n---\n\n## 3. COMPONENT SPECIFICATIONS\n\n**3.1 Buttons**\n- Default: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` min 44×44px touch target.\n- Hover: brightness shift + shadow lift, `cursor: pointer`.\n- Focus: distinct focus ring via `outline`\u002F`box-shadow` using theme variables.\n- Active: `transform: scale(0.97)`.\n- Loading: disabled interaction, CSS spinner, no dimensional distortion.\n- Disabled: `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n- `.btn-danger`: visually distinct in both light and dark themes (destructive actions in FAQ delete or footer — style it even if only referenced).\n\n**3.2 Cards (Features, Steps, Pricing, Testimonials)**\n- Default: flexbox layout, `--bg-secondary` surface, sharp corners, 1px `--border-default` border, golden shadow.\n- Hover: `transform: translateY(-2px)` + shadow elevation shift.\n- Focus-within: border highlight when a child link\u002Fbutton gains focus.\n- Skeleton shimmer styles defined in CSS (for testimonial loading).\n- Empty state: Google Icon + guidance text structure.\n\n**3.3 Forms (FAQ contact \u002F newsletter in Final CTA)**\n- States: empty, focused (outline ring), filled, valid (success border + icon), invalid (error border, red text, error icon), disabled, read-only.\n- Structure: flex container wrapping label, input, dedicated error container.\n- `aria-live` region for error\u002Fsuccess feedback.\n\n**3.4 FAQ Accordion \u002F Modal-like disclosures**\n- Opening\u002FOpen\u002FClosing animated via CSS transitions.\n- Keyboard operable, `aria-expanded` on triggers, `Esc` closes where applicable.\n\n---\n\n## 4. GLOBAL UX & ACCESSIBILITY\n\n- Responsive by default; fluid `clamp()` typography; no horizontal overflow.\n- All state changes transition with `var(--transition-normal)`, respecting `prefers-reduced-motion`.\n- WCAG-sufficient contrast in light **and** dark modes. Never rely on color alone for state — pair icons\u002Ftext with color.\n- Semantic HTML5 (`header`, `main`, `section`, `footer`, `nav`), logical focus order, full keyboard operability.\n- Every click\u002Fhover\u002Fsubmit triggers visible feedback.\n- All user-facing copy in **English**. Write real, on-theme copy for a European luxury AI product (e.g., \"Mistral-grade intelligence, amber-warm design\") — no lorem ipsum.\n\n---\n\n## 5. DELIVERABLE\n\n- Files: `index.html`, `style.css`, `script.js` (theme toggle, FAQ accordion, form validation feedback). No inline `\u003Cscript>` beyond one deferred entry point; no inline CSS.\n- One consistent naming convention (BEM or a fixed utility set) across the whole deliverable.\n- Section order: Hero → Features (3 cards) → How It Works (3 steps) → Testimonials → Pricing (3 tiers, middle tier featured with gradient badge) → FAQ → Final CTA → Footer with secondary links.\n- Output the complete, working code immediately.\n",1791954989997]