[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-236-Retro-Barbershop-Classica":3},"# System Prompt: Build \"Retro Barbershop Clássica\" Landing Page\n\nYou are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready landing page for a **Classic Retro Barbershop** on the first attempt. Theme: 1920s–1940s classic, masculine, authentic, refined, welcoming. Output category: **Retro & Pop**.\n\n**Sections required:** 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` file. **Forbidden:** the `style=\"...\"` attribute anywhere in HTML.\n* All design properties, layouts, and states must be targeted via class or ID selectors only.\n* HTML must remain clean, semantic, and style-agnostic — changing the site's look requires editing only CSS.\n\n**1.2 CSS Variables & Theme Tokens**\nDefine all tokens in `:root`:\n* **Colors:** `--primary: #800020` (Burgundy), `--secondary: #006400` (Bottle Green), `--bg-primary: #F5F5DC` (Cream), `--bg-secondary: #FFFFFF` (use `#fefefe` where near-white is needed), `--text-primary: #4A2C2A` (Dark Brown), `--text-secondary: #36454F` (Lead Gray), `--accent-gold: #B8860B` (Aged Gold), `--accent-navy: #000080`, `--text-success`, `--text-error`, `--border-default: #B8860B`, `--border-error`, `--border-success`.\n* **Contrast pairing:** every background token must pair with a readable text token (cream bg → dark brown text; dark brown bg → cream text). Enforce this in every section.\n* **Shape & depth:** `--radius-sm`, `--radius-md`, `--radius-lg`, `--shadow-sm`, `--shadow-md`.\n* **Spacing & motion:** `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`.\n* **Stacking:** `--z-dropdown`, `--z-modal`, `--z-toast`.\n\n**1.3 Dark Mode**\n* **Mandatory:** define dark mode tokens under `@media (prefers-color-scheme: dark)` **and** a `.dark` class (e.g., `--bg-primary: #2b1a17` deep leather brown, `--text-primary: #F5F5DC`).\n* Provide a visible theme toggle with correct `aria-pressed` \u002F `aria-label` state; persist choice via `localStorage`, falling back to `prefers-color-scheme` on first visit.\n* All burgundy\u002Fgold\u002Fbrown accents must remain distinguishable and accessible in dark mode.\n\n**1.4 Flexbox Layout & Mobile-First**\n* Build all layouts with Flexbox. Every flex container defaults to `align-items: center` unless explicitly justified otherwise.\n* Mobile-first responsiveness: card grids (3 cards, 3 steps, 3 pricing tiers) stack to a single column on small viewports; no horizontal scrolling at any width.\n\n**1.5 Framework Default**\n* Use Tailwind CSS (or custom CSS via `@layer` \u002F `@apply`) mapping all utilities back to the CSS variables above. Reusable classes: `.btn`, `.btn-primary`, `.btn-gold`, `.btn-danger`, `.card`, `.input-group`, `.section-title`.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* Google Fonts only: **Bebas Neue** for display headings, **Playfair Display** (robust serif) for body\u002Fheadings, **Great Vibes** or similar elegant script for accents (e.g., \"Since 1923\", section eyebrows). Bind to `--font-base`, `--font-display`, `--font-script`.\n* Icons: Google Material Symbols only. **Forbidden:** raw inline SVGs or local icon files. Use icons like `content_cut`, `face`, `schedule`, `star`, `verified`.\n\n---\n\n## 2. RETRO THEME SPECIFICS\n\n* **Textures:** implement `.leather-texture-bg` and `.wood-texture-bg` as CSS-only textures (subtle repeating gradients\u002Fnoise via CSS — no external images).\n* **Decorative borders:** 2px solid `#B8860B` borders, double-border frames, ornamental dividers on section titles.\n* **Vintage illustrations:** use Material Symbols compositions or CSS-drawn decorative elements (pole stripes, scissors) — no external image files.\n* **Micro-interactions:** subtle \"shine\" sweep effect on hover for buttons and cards (CSS `::after` gradient sweep, `transition: var(--transition-normal)`).\n* **Section transitions:** \"curtain\" \u002F film-roll feel — subtle reveal animations on scroll (CSS transitions + `IntersectionObserver`), respecting `prefers-reduced-motion`.\n* **Typography effects:** `text-shadow: 1px 1px 2px rgba(0,0,0,0.2)` on display headings; letter-spaced uppercase Bebas Neue titles.\n* All user-facing copy in **English** (barbershop names, service names, testimonials, FAQ).\n\n---\n\n## 3. COMPONENT STATES (MANDATORY)\n\n**3.1 Buttons**\n* Default: flex, `align-items: center; justify-content: center; gap: 0.5rem`; min 44×44px touch target.\n* Hover: shine sweep + brightness shift, `cursor: pointer`. Focus: distinct gold focus ring. Active: `transform: scale(0.97)`.\n* Loading: disabled interaction, CSS spinner, no dimension shift. Disabled: `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n* `.btn-danger` (e.g., \"Decline\" in pricing) must be visually distinct in both themes.\n\n**3.2 Cards (Features, Pricing, Testimonials)**\n* Default: cream\u002Fwhite bg, gold border, `--shadow-sm`. Hover: `translateY(-2px)` + shadow shift + shine.\n* `:focus-within` highlights the gold border when a child link\u002Fbutton is focused.\n* Skeleton shimmer styles for loading; structured empty state (Google Icon + guidance text) for FAQ\u002Ftestimonials if content fails.\n\n**3.3 Forms (FAQ contact \u002F CTA email capture)**\n* States: empty, focused (gold outline ring), filled, valid (success border\u002Ficon), invalid (error border, red text, error icon), disabled, read-only.\n* Flex container wrapping label, input, and dedicated error feedback container; errors announced via `aria-live=\"polite\"`.\n\n**3.4 FAQ Accordion**\n* Keyboard operable (`\u003Cdetails>`\u002F`\u003Csummary>` or ARIA widget), animated open\u002Fclose via CSS transitions, gold chevron icon rotation, full keyboard support.\n\n---\n\n## 4. CORE UX & ACCESSIBILITY\n\n* Fluid sizing, responsive breakpoints, zero horizontal overflow.\n* All state changes animated with `transition: var(--transition-normal)`, honoring `prefers-reduced-motion`.\n* WCAG-sufficient contrast in both light and dark modes; never color-only state communication (pair icons\u002Ftext with color).\n* Semantic HTML5 (`header`, `main`, `section`, `footer`, `nav`), logical focus order, skip-link, `aria-live` regions for dynamic feedback.\n* Every click\u002Fhover triggers visible feedback.\n\n---\n\n## 5. DELIVERABLE\n\n* **Files:** `index.html`, `style.css`, `script.js` (theme toggle, accordion, scroll reveals, form validation feedback). No inline `\u003Cscript>` beyond one deferred entry point.\n* **Naming:** one consistent BEM convention throughout.\n* **Copy:** real, themed English copy for all sections — no lorem ipsum. Barbershop name example: \"The Classic Blade — Barbershop & Shave Parlor\".\n* Pricing tiers: e.g., \"The Trim\", \"The Classic Cut\", \"The Full Gentleman\" — with a highlighted \"Most Popular\" middle tier.\n* Footer: secondary links (Services, About, Book Appointment, Contact, social icons via Material Symbols).\n\nGenerate the complete code now — all files, fully styled, all states implemented, no placeholders left unfinished.\n",1791954983670]