[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-066-Terracota-Mediterraneo":3},"# System Prompt: Build “Terracotta Mediterranean” 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:** Terracotta Mediterranean — warm, rustic-elegant, sun-kissed, evoking a timeless Mediterranean villa with olive groves, arch motifs, earthenware, and coastal artisanal craft. **Output category:** Nature & Organic.\n\n**Sections required (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 RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n- All styling must live in a dedicated `style.css`. The `style=\"...\"` attribute is **forbidden** in HTML.\n- Target everything via class\u002FID selectors. HTML must remain semantic and styling-agnostic — changing the theme must require editing only CSS.\n- Use semantic HTML5: `\u003Cheader>`, `\u003Cnav>`, `\u003Cmain>`, `\u003Csection>`, `\u003Carticle>`, `\u003Cfooter>`.\n\n**1.2 CSS Variables & Theme Tokens**\nDefine all tokens in `:root`:\n- **Colors:** `--primary: #C2452D` (Terracotta), `--secondary: #1565C0` (Mediterranean Blue), `--accent-olive: #6B7F3B`, `--accent-clay: #D4956B`, `--accent-fig: #4A1942`, `--accent-foam: #A8D8C8`, `--bg-primary: #FFF8F0` (Sun White — never `#ffffff`; use `#fefefe` if a near-white is needed), `--bg-secondary: #E8D5B7` (Sandy Beige), `--text-primary: #4A1942`, `--text-secondary: #6B4A3F`, `--text-success: #6B7F3B`, `--text-error: #C2452D`, `--border-default: #D4956B`, `--border-error`, `--border-success`.\n- **Contrast pairing:** every background token must pair with a token of sufficient contrast (light bg ↔ dark text, dark bg ↔ light text). Verify pairs in both themes.\n- **Shape & depth:** `--radius-sm: 8px`, `--radius-md: 16px`, `--radius-lg: 24px`, `--arch-radius: 50% 50% 0 0 \u002F 100% 100% 0 0` (the signature Mediterranean arch), `--shadow-sm`, `--shadow-md: 0 6px 20px rgba(194,69,45,0.12)` (terracotta shadow layering).\n- **Spacing\u002Fmotion:** `--spacing-gap`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.\n- **Stacking:** `--z-dropdown`, `--z-modal`, `--z-toast`.\n\n**1.3 Dark Mode — Mandatory**\nThe source spec requested light-only; this is overridden by the mandatory dark mode rule. Implement a “Mediterranean Night” dark theme:\n- Provide tokens under `@media (prefers-color-scheme: dark)` **and** a `.dark` class on `\u003Chtml>`.\n- Dark palette: deep fig backgrounds (`#2A0F26` \u002F `#3A1533`), sun-white text, terracotta and sea foam accents — keep all contrast pairings valid.\n- Persist user choice via `localStorage`, falling back to `prefers-color-scheme` on first visit. Include a visible toggle button (Google Material Symbols `dark_mode` \u002F `light_mode` icon) with correct `aria-pressed` and `aria-label` states.\n\n**1.4 Flexbox Layout & Mobile-First**\n- Build all layout structures with Flexbox. Every flex container defaults to `align-items: center` unless a documented exception exists (e.g., feature card body copy uses `stretch`).\n- All layouts must be mobile-responsive: multi-column rows (features, pricing, steps) collapse to single columns on small viewports. **No horizontal scrolling at any breakpoint.**\n\n**1.5 Framework**\nUse Tailwind CSS via CDN, with custom component classes (`.btn`, `.card`, `.input-group`, `.arch-frame`, `.section-title`) defined via `@layer components` \u002F `@apply`, all mapping back to the CSS variables. Keep one consistent naming convention throughout.\n\n**1.6 Typography & Icons — Google Only**\n- Fonts: Google Fonts — **DM Serif Display** for headings (`--font-heading`), **Nunito Sans** or **Inter** for body (`--font-base`). Include via `\u003Clink>` tags.\n- Icons: Google Material Symbols only. **No inline SVGs, no local icon files.**\n\n---\n\n## 2. THEME-SPECIFIC VISUAL DIRECTION\n\nApply these signature effects via CSS only:\n- **Arch motifs:** Hero image container, testimonial avatars, and feature card media areas use `border-radius: var(--arch-radius)`.\n- **Golden hour gradients:** `background: linear-gradient(...)` blending Sun White → Sandy Beige → Warm Clay; animate a subtle `golden-hour` keyframe (6s ease infinite alternate) shifting gradient position on the hero.\n- **Plaster texture:** Simulate textured plaster with layered CSS gradients (e.g., repeating radial-gradients with `background-blend-mode: soft-light`) — do not rely on external image files; if a texture image is used, it must be a CSS `background-image` only.\n- **Olive branch dividers:** Between sections, render a divider using a Google Material Symbols icon (e.g., `eco` \u002F `spa`) flanked by gradient lines — no SVG.\n- **Mosaic tile accents:** Pricing tier headers and CTA sections use a repeating-conic-gradient or repeating-linear-gradient strip evoking mosaic tiles.\n- **Coastal parallax:** Subtle parallax on hero decorative elements via CSS `transform` driven by a scroll listener in `script.js`; disable under `prefers-reduced-motion`.\n\n---\n\n## 3. COMPONENT SPECIFICATIONS\n\n**3.1 Buttons (`.btn`, `.btn-primary`, `.btn-secondary`, `.btn-danger`)**\n- Default: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` with a Google icon + label. Minimum 44×44px touch target.\n- Hover: brightness\u002Fshadow shift, `cursor: pointer`. Focus: distinct focus ring from CSS variables. Active: `transform: scale(0.97)`.\n- Loading: disabled + CSS spinner (or animated Material icon) without changing button dimensions. Disabled: `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n- Primary buttons: terracotta bg + sun-white text; secondary: Mediterranean blue; danger: visually distinct in both themes.\n\n**3.2 Cards (Features, Testimonials, Pricing)**\n- Default: `--bg-secondary` surface, `border: 2px solid var(--border-default)`, `--shadow-sm`, flex column layout.\n- Hover: `transform: translateY(-2px)` + shadow elevation shift. Focus-within: highlighted border.\n- Include skeleton shimmer styles and an empty-state pattern (Material icon + guidance text) in CSS.\n\n**3.3 Forms (FAQ search if included, Final CTA email capture)**\n- Input states: empty, focused (outline ring), filled, valid (olive-leaf border + check icon), invalid (terracotta error border, error icon, error message), disabled, read-only.\n- Structure: flex `.input-group` wrapping label, input, and a dedicated error container. Announce errors via `aria-live=\"polite\"`.\n\n**3.4 FAQ Accordion**\n- Use native `\u003Cdetails>\u002F\u003Csummary>` or ARIA-compliant custom accordion; animated open\u002Fclose via CSS transitions; keyboard operable; visible focus states.\n\n**3.5 Modals (if any interactive element requires one, e.g., pricing details)**\n- Centered flex overlay with backdrop, animated open\u002Fclose states, Material icon close button, focus trapping, `Esc` and overlay-click closing.\n\n---\n\n## 4. UX, A11Y & INTERACTION RULES\n\n- Responsive by default; fluid typography (`clamp()`); no horizontal overflow.\n- Smooth transitions (`var(--transition-normal)`) on all state changes; fully respect `prefers-reduced-motion` (disable parallax, golden-hour animation, shimmer).\n- Accessibility: WCAG-sufficient contrast in light and dark themes; never rely on color alone for state; semantic HTML; logical focus order; full keyboard operability; `aria-live` regions for dynamic feedback (form errors, toasts, loading).\n- Every click\u002Fhover\u002Fsubmission produces visible feedback.\n- Theme toggle, FAQ interactions, form validation, and parallax logic live in `script.js`.\n\n---\n\n## 5. DELIVERABLES\n\n- **Files:** `index.html`, `style.css`, `script.js`. Only one deferred `\u003Cscript src=\"script.js\" defer>` reference in HTML — no inline script blocks.\n- **Copy:** Write all user-facing copy in **English**, in a warm artisanal Mediterranean voice (olive groves, sun-baked craft, coastal living). No lorem ipsum — write real headlines, feature descriptions, step titles, testimonial quotes, pricing tier details, FAQ Q&As, and footer links.\n- **Naming:** One consistent convention (BEM or fixed utility set) across all files.\n- **Pricing:** 3 tiers with a visually emphasized “recommended” middle tier (mosaic-accent header, slight scale\u002Felevation).\n- **Footer:** secondary links (About, Contact, Privacy, Terms, Social) plus a small olive-branch motif.\n\nBuild the complete page now — all sections fully styled, both themes functional, no placeholders left unstyled.\n",1791954981156]