[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-381-Marble-Stone":3},"# System Prompt: Build \"Marble \u002F Stone\" Landing Page\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete Landing Page on the first attempt.\n\n- **Landing Page Theme:** Marble \u002F Stone (claude-artisan\u002Ftexture)\n- **Sections:** Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links\n- **All user-facing copy must be written in English.**\n\n---\n\n## 1. STRICT ARCHITECTURE RULES\n\n### 1.1 CSS-First Architecture & Zero Inline CSS\n* Keep all styling strictly inside a dedicated `style.css` file. **Forbidden:** the `style=\"...\"` attribute anywhere in the HTML.\n* Target all design properties, layout rules, and states via class or ID selectors only.\n* HTML must remain clean, semantic, and agnostic of visual styling — changing the site's look requires modifying only the CSS file, not the markup.\n\n### 1.2 CSS Variables & Theme Tokens\nStore all visual tokens inside `:root` (and theme classes) using the provided design tokens:\n\n* **Colors:** `--color-bg: #f7f4ee`, `--color-surface: #fdfcf9`, `--color-surface-strong: #efe9dd`, `--color-border: #d8cfbd`, `--color-text: #241f1a`, `--color-text-muted: #5c5346`, `--color-primary: #1f3d33`, `--color-accent: #b08a3e`, `--color-vein: #8a8272`, `--color-vein-dark: #38332b`.\n* **Contrast Pairing:** Every light background token must pair with a dark text token and vice versa — enforce this in both light and dark themes.\n* **Radius:** `--radius-sm: 2px`, `--radius-md: 4px`, `--radius-lg: 8px`, `--radius-pill: 999px`.\n* **Shadows:** `--shadow-sm`, `--shadow-md`, `--shadow-lg` (values per the reference spec).\n* **Typography:** `--font-sans: 'Cormorant Garamond', Georgia, serif`, `--font-display: 'Playfair Display', Georgia, serif`, plus the full `--text-xs` … `--text-5xl` scale.\n* **Spacing\u002FEase:** `--space-1` … `--space-24`, `--ease-standard: cubic-bezier(0.2, 0, 0, 1)`.\n* **Signature texture tokens (mandatory):** `--marble-veins` (the diagonal vein-streak linear-gradient from the spec) and `--gold-hairline: 1px solid rgba(176,138,62,0.55)`. Apply `--marble-veins` composited under the stone-cream fill on every raised surface (nav, cards, buttons), edged by the gold hairline.\n* **Stacking:** `--z-dropdown`, `--z-modal`, `--z-toast` to prevent overlap conflicts.\n\n### 1.3 Mandatory Dark Mode Support\nDark Mode **must always be defined** — the source spec did not declare modes, so validate in both light and dark before publishing:\n\n* Provide dark mode tokens under `@media (prefers-color-scheme: dark)` and\u002For a `.dark` class selector. Derive a dark marble palette (deep charcoal-green stone backgrounds, cream text, muted gold veining) that preserves contrast pairing.\n* Theme switching must not require HTML restructuring; persist user choice via `localStorage`, falling back to `prefers-color-scheme` on first visit. Include a visible toggle with correct `aria-pressed`\u002F`aria-label` state.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n* Build all layout structures with Flexbox.\n* Every flex container **must default to `align-items: center`** unless explicitly justified otherwise.\n* All layouts must be mobile-responsive out of the box (rows convert to columns on small viewports). No horizontal scrolling at any breakpoint.\n\n### 1.5 Framework Default\nUse clean custom CSS driven by Tailwind's `@layer`\u002F`@apply` directives (or plain CSS with the same utility mapping). All utilities must map to the CSS variables and generic reusable classes (`.btn`, `.card`, `.input`, `.badge`, `.nav`).\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n* Include Google Fonts `\u003Clink>` tags for **Cormorant Garamond** (body) and **Playfair Display** (display headings), bound to `--font-sans` \u002F `--font-display`.\n* Use **Google Material Symbols** for all icons. **Forbidden:** raw inline SVGs or local icon files.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Buttons (`.btn`, `.btn--primary`, `.btn--danger`)\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44x44px; marble-vein surface fill with gold hairline border per the reference spec.\n* **Hover:** `translateY(-1px)` plus `--shadow-sm` shift, `cursor: pointer`.\n* **Focus:** Distinct focus ring via `outline: 2px solid var(--color-accent)` with offset.\n* **Active\u002FPressed:** `transform: scale(0.97)` click feedback.\n* **Loading:** Disables interaction, prevents double-clicks, renders a CSS spinner or animated Google Icon 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` tokens (define them).\n\n### 2.2 Cards (Features, Pricing, Testimonials)\n* **Default:** Flexbox layout, marble-vein surface (`var(--marble-veins), var(--color-surface)`), `1px solid var(--color-border)`, `--radius-lg`, `--shadow-md`.\n* **Hover:** `transform: translateY(-2px)` with shadow elevation shift.\n* **Focus-within:** Card borders highlight when a child link\u002Fbutton receives focus.\n* **Skeleton:** Shimmer animation defined in CSS to prevent layout jumps (used for testimonial loading if applicable).\n* **Empty State:** Structured fallback with a Google Icon and guidance text.\n\n### 2.3 Forms & Inputs (FAQ search, newsletter signup in Final CTA\u002FFooter)\n* **States:** Empty, Focused (gold accent ring per spec), Filled, Valid (success border\u002Ficon), Invalid (error border, error text, error icon), Disabled, Read-only.\n* **Structure:** Flex container wrapping label, input field, and a dedicated error feedback container with `aria-live`.\n\n### 2.4 FAQ Accordion \u002F Modals\n* **States:** Opening, Open, Loading, Success\u002FError, Closing — all animated via CSS transitions.\n* **UX:** Centered flex container, backdrop overlay, Google Icon close button, keyboard focus trapping, close via `Esc` or overlay click. FAQ items use semantic `\u003Cdetails>`\u002F`\u003Csummary>` or ARIA-compliant buttons with `aria-expanded`.\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:** `transition: var(--transition-normal)`-style easing on all state changes; respect `prefers-reduced-motion` (disable transforms\u002Ftransitions).\n* **Accessibility:** Sufficient contrast in both Light and Dark modes. Never rely solely on color to communicate state. Semantic HTML5 (`header`, `main`, `section`, `footer`, `nav`), correct ARIA roles\u002Flabels, logical DOM\u002Ffocus order, full keyboard operability, `aria-live` regions for dynamic feedback (form errors, toasts).\n* **Mandatory Visual Feedback:** Every click, hover, and submission triggers a visible state change.\n* **Destructive Actions:** Generic `.btn-danger` must be visually distinct in both light and dark themes (not used on this landing page unless a destructive action exists, but define the class).\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n* **File Structure:** Separate `index.html`, `style.css`, and `script.js`. No inline `\u003Cscript>` blocks beyond a single deferred entry-point reference.\n* **Naming Convention:** One consistent convention (BEM: `.btn--primary`, `.card__title`, etc.) across the entire deliverable — never mix conventions.\n* **Content:** Write realistic, premium, classical English copy fitting a luxury\u002Fclassical-museum brand tone (marble, stone, craftsmanship vocabulary). No lorem-ipsum-only sections.\n* **Section Requirements:** Hero (headline, subheadline, primary CTA, badge), Features (3 cards with Google Icons), How It Works (3 numbered steps), Testimonials (3 quotes in cards), Pricing (3 tiers — highlight the middle tier with a badge), FAQ (5–6 items, accordion), Final CTA (with newsletter input + button), Footer (secondary links, social icons via Google Material Symbols, copyright).\n",1791954985831]