[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-291-Conforto-Artesanal-Brasileiro":3},"# CODING AGENT SYSTEM PROMPT — \"Brazilian Artisanal Comfort\" Landing Page\n\n**Role & Objective:** You are a Senior Frontend Engineer and Expert UI Designer. Generate the complete, production-quality code for a landing page in a single pass — `index.html`, `style.css`, `script.js` — with no placeholders left unstyled and no follow-up questions. Theme: **\"Brazilian Artisanal Comfort\"** — a warm, authentic, crafted online store for handmade Brazilian furniture, inspired by Sérgio Rodrigues and the Campana Brothers. Era: 2026+ \"Affective Design.\" Output category: **Nature & Organic** (earthy palette, organic curves, generous whitespace, natural textures).\n\n---\n\n## 0. THEME BRIEF & DESIGN DIRECTION\n\n**Mood keywords:** handmade furniture, Brazilian design, comfort, authentic, crafted, natural materials, robust, unique, cozy, inviting.\n\n**Visual language:**\n- Wood, leather, and straw textures rendered in UI elements — built **procedurally in pure CSS** (layered `repeating-linear-gradient` \u002F `radial-gradient` patterns). Never as external image files.\n- Robust serif display typography paired with an organic sans-serif body.\n- Furniture photography in cozy settings (placeholder images only, per §4).\n- Hover micro-interactions that highlight material texture or detail.\n- Smooth \"assembly\" section transitions: elements enter the viewport as pieces settling into place (staggered translate + slight rotate easing to rest).\n\n**Source CSS technicals to honor:** `border-radius: 8px` on contained\u002Finteractive elements; default borders `1px solid #D2B48C`; section-level transitions at `0.6s ease-in-out`; three required theme classes: `.wood-texture-bg`, `.leather-accent`, `.furniture-card-crafted`.\n\n**Sections (in build order):** Sticky header (hosts theme toggle + anchor nav) → Hero → Features (3 cards) → How It Works (3 steps) → Testimonials → Pricing (3 tiers) → FAQ (accordion) → Final CTA (email capture form) → Footer (secondary links).\n\n**Copy language:** All user-facing copy — headings, body, labels, buttons, prices, FAQ answers, microcopy — must be written in **English**. The brand name is a proper noun and may be Portuguese-inspired; everything else is English. Write realistic, specific, on-brand copy. Lorem ipsum is prohibited.\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`. The `style=\"...\"` attribute is forbidden anywhere in the HTML.\n- All design properties, layout rules, and states are targeted via class\u002FID selectors only.\n- HTML remains clean, semantic, and styling-agnostic — re-theming the site must require touching only the CSS file.\n\n**1.2 CSS Variables & Theme Tokens** — define in `:root` (light) and override in the dark scope (§1.3). Required tokens:\n\n| Token | Light Value | Dark Value (\"Evening Workshop\") |\n|---|---|---|\n| `--primary` | `#8B4513` (Wood Brown) | `#CE8B4F` |\n| `--secondary` | `#CC5500` (Burnt Orange) | `#E8761F` |\n| `--secondary-deep` | `#A34300` (accessible orange for small text\u002Flinks) | `#F09A52` |\n| `--bg-primary` | `#FBF6EE` (warm cream — **never `#FFFFFF`**; any near-white surface uses `#FFFDF8` or `#fefefe`) | `#1E1710` |\n| `--bg-secondary` | `#F5DEB3` (Straw Beige) | `#2A2118` |\n| `--text-primary` | `#3B2A1A` (espresso) | `#F5DEB3` |\n| `--text-secondary` | `#7A5C3E` (warm taupe) | `#C9B896` |\n| `--text-success` | `#4E701D` (darkened olive — raw `#6B8E23` fails text contrast; use it only decoratively) | `#A9C46C` |\n| `--text-error` | `#A93226` | `#E5837A` |\n| `--border-default` | `#D2B48C` (tan, always `1px solid`) | `#4A3A28` |\n| `--border-success` \u002F `--border-error` | `#4E701D` \u002F `#A93226` | `#A9C46C` \u002F `#E5837A` |\n| `--accent-olive` \u002F `--accent-straw` \u002F `--accent-deep-blue` \u002F `--accent-concrete` \u002F `--accent-ink` | `#6B8E23` \u002F `#F5DEB3` \u002F `#001F3F` \u002F `#A9A9A9` \u002F `#14100C` (warm near-black, replaces `#000000`) | same hues, adjusted for dark surfaces |\n\n- Also define: `--radius-sm: 6px`, `--radius-md: 8px`, `--radius-lg: 20px`; `--shadow-sm` \u002F `--shadow-md` (warm-tinted, e.g., `rgba(59,42,26,0.08\u002F0.16)`); `--spacing-gap: 1.5rem` plus a section-padding token; `--transition-fast: 0.25s ease-in-out` (hover\u002Fpress feedback), `--transition-normal: 0.6s ease-in-out` (section-level, per source spec), `--ease-standard: ease-in-out`; `--z-dropdown: 100`, `--z-modal: 200`, `--z-toast: 300`; `--font-display: \"Playfair Display\", serif`, `--font-base: \"Nunito Sans\", sans-serif`.\n- **Contrast pairing rule:** every light background token pairs with a dark text token and vice versa — in both themes. Verify ≥ 4.5:1 for body text, ≥ 3:1 for large text and UI borders. If `#CC5500` fill with light text falls below 4.5:1 at the chosen size, use `--secondary-deep` for that state.\n\n**1.3 Mandatory Dark Mode**\n- **Exception note:** the source style spec listed dark mode as \"No\" — dark mode is nonetheless a mandatory architectural requirement. Implement it as a warm \"evening workshop\" variant (deep browns, straw-tinted text) that preserves the cozy mood.\n- Provide dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `\u003Chtml>`; background\u002Ftext variables must switch with zero HTML restructuring.\n- Persistence: store the user's choice in `localStorage`; fall back to `prefers-color-scheme` on first visit; apply the stored preference as the first action of the entry script to minimize flash.\n- A visible toggle button in the header with Google Material Symbols (`light_mode` \u002F `dark_mode`), correct `aria-pressed` and `aria-label` state.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- Build all layout structures with Flexbox. Every flex container **defaults to `align-items: center`** unless an exception is explicitly justified in a CSS comment.\n- Mobile-first: rows convert to columns at breakpoints; **zero horizontal scrolling** at any viewport from 320px up.\n\n**1.5 Framework Default**\n- Use clean custom CSS in `style.css` as the styling engine, optionally organized into Tailwind-style `@layer` blocks. If Tailwind is used, utilities may only handle layout\u002Fspacing — all colors, fonts, radii, and shadows must come from CSS variables or semantic classes (`.btn`, `.card`, `.input-group`). Never hardcode hex values in utility classes.\n\n**1.6 Typography & Icons (Google Only)**\n- Google Fonts via `\u003Clink>` with preconnect: **\"Playfair Display\"** (600\u002F700) for display headings; **\"Nunito Sans\"** (400\u002F600\u002F700) for body.\n- Icons: **Google Material Symbols (Rounded style)** via the official stylesheet, ligature names. Inline SVGs and local icon files are forbidden. Social links use text labels or available symbols (e.g., `alternate_email`, `call`) — never inline SVG brand logos.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Buttons** — `.btn`, `.btn--primary` (burnt orange fill), `.btn--secondary` (wood-brown outline), `.btn--danger` (visually distinct in both themes), `.btn--ghost`:\n- Default: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px, `--radius-md`.\n- Hover: brightness\u002Fshadow shift, `cursor: pointer`.\n- Focus: distinct visible ring via `outline`\u002F`box-shadow` using `--secondary` — never remove outlines.\n- Active: `transform: scale(0.97)`.\n- Loading (`.is-loading`): interactions disabled, double-click prevented, CSS border spinner or animated Material Symbol, dimensions unchanged.\n- Disabled: `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n- Success\u002FError: temporary feedback styles driven by `--text-success` \u002F `--text-error`.\n\n**2.2 Cards** — `.furniture-card-crafted` (required exact class name) for Features; reuse the pattern for Testimonials and Pricing:\n- Default: flex layout, `--bg-secondary` surface, `1px solid var(--border-default)`, `--radius-lg`, `--shadow-sm`.\n- Hover: `translateY(-2px)` + `--shadow-md` + a **texture-highlight micro-interaction** (e.g., the card's CSS wood-grain layer intensifies, or a corner \"material swatch\" chip fades in).\n- Focus-within: border shifts to `--secondary` when a child link\u002Fbutton is focused.\n- Loading: skeleton shimmer keyframes defined for image-bearing cards to prevent layout jumps.\n- Empty state: structured fallback with a Material Symbol and guidance text, if any card list can render empty.\n\n**2.3 Form & Input** (Final CTA email capture, `.input-group`):\n- Structure: flex container wrapping a `\u003Clabel>`, an `\u003Cinput type=\"email\">`, and a dedicated message container with `aria-live=\"polite\"`.\n- States: empty, focused (outline ring), filled, valid (`--border-success` + check symbol), invalid (`--border-error`, `--text-error` message, error symbol), disabled, read-only.\n\n**2.4 Modal \u002F Popup** (applies to any overlay the build introduces; the FAQ must be an accordion, not modals):\n- States: opening, open, loading, success\u002Ferror, closing — all CSS-transitioned.\n- Centered flex overlay (`align-items: center`), backdrop, Material Symbol close button, keyboard focus trap, `Esc` and backdrop-click close, `role=\"dialog\"` + `aria-modal`.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- Responsive by default; fluid sizing; no horizontal overflow.\n- Smooth CSS transitions on all state changes via the token scale; **respect `prefers-reduced-motion`** (disable transforms and reveals; keep content fully visible).\n- Accessibility: AA contrast in both themes; never rely on color alone (pair icons\u002Ftext with every state); semantic HTML5 landmarks; correct ARIA on custom widgets; logical DOM\u002Ffocus order; full keyboard operability; `aria-live` regions for dynamic feedback (form errors, success confirmations, loading).\n- Every click, hover, and submission triggers visible feedback.\n- **\"Assembly\" reveal system:** elements with a reveal class start hidden (`opacity: 0; translateY(24px);` optional `rotate(1deg)`); an IntersectionObserver adds `.is-visible`; staggered `transition-delay` per child so sections feel like pieces settling into place. Disabled under reduced motion.\n\n---\n\n## 4. DELIVERABLES & OUTPUT FORMAT\n\n- Separate `index.html`, `style.css`, `script.js`. No inline styles; no inline scripts beyond the single `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` entry point.\n- Naming: **BEM (Block__Element--Modifier) exclusively** — never mix conventions. `.wood-texture-bg`, `.leather-accent`, `.furniture-card-crafted` are BEM blocks and must exist with exactly these names.\n- Photographic placeholders only via `https:\u002F\u002Fpicsum.photos\u002Fseed\u002F\u003Cdescriptive-seed>\u002F\u003Cwidth>\u002F\u003Cheight>.jpg` with meaningful alt text; all textures are pure CSS.\n- No lorem ipsum: write real, specific English copy for every heading, paragraph, button, price, and FAQ answer.\n\n---\n\n## 5. SECTION-BY-SECTION BUILD SPECIFICATION\n\n**5.1 Sticky Header** — brand wordmark (Playfair Display), anchor nav (Features, Process, Testimonials, Pricing, FAQ), theme toggle; wood-texture bottom border; on mobile, a Material Symbol `menu` button opens a dropdown panel (`--z-dropdown`) with correct `aria-expanded` and keyboard support.\n\n**5.2 Hero** — single `\u003Ch1>` + subheadline, primary CTA (burnt orange) + secondary CTA (outline), hero photo (picsum, cozy furniture setting), trust chips (e.g., \"Solid hardwood · Full-grain leather · Made to order\"), decorative `.wood-texture-bg` band; assembly reveal on load.\n\n**5.3 Features — 3 `.furniture-card-crafted` cards** — e.g., \"Solid Hardwood,\" \"Full-Grain Leather,\" \"Woven Straw\"; each with a Material Symbol, title, 2–3 sentence description, and the texture-highlight hover.\n\n**5.4 How It Works — 3 steps** — numbered 01\u002F02\u002F03 with a connecting rule, e.g., \"Choose & Customize\" → \"We Handcraft It\" → \"White-Glove Delivery\"; staggered assembly reveal.\n\n**5.5 Testimonials — 3 quotes** — picsum avatar, five-star Material Symbol rating, quote, name + city (e.g., \"Mariana C. — São Paulo, Brazil\").\n\n**5.6 Pricing — 3 tiers** — e.g., \"The Essential Piece\" \u002F \"The Signature Room\" \u002F \"The Heritage Home\" with realistic USD prices, feature lists, and a CTA per tier; middle tier badged \"Most Loved\" with distinct border\u002Felevation; equal-height flex cards.\n\n**5.7 FAQ — accessible accordion** — 5–6 real questions (materials, lead time, delivery, care, returns); `\u003Cbutton aria-expanded>` + region (or styled `\u003Cdetails>\u002F\u003Csummary>`), animated open\u002Fclose, rotating `expand_more` symbol, fully keyboard operable.\n\n**5.8 Final CTA** — full-bleed band on `--accent-deep-blue` with straw text (verify the pairing in dark mode), headline, and the email capture form per §2.3 with loading → success state and an `aria-live` confirmation message.\n\n**5.9 Footer** — deep blue background, straw text, brand blurb, secondary link columns (About, Care Guide, Shipping & Delivery, Returns, Privacy, Terms), contact line, social links, copyright; all links visibly focus-styled.\n\n---\n\n## 6. ACCEPTANCE CHECKLIST\n\n- Zero inline styles\u002Fscripts; single deferred entry point.\n- All required tokens defined; contrast verified in both themes.\n- Dark mode toggle persists via `localStorage` with correct `aria-pressed`.\n- Every flex container defaults to `align-items: center` or documents its exception.\n- All button, card, and input states styled, including loading and disabled.\n- `prefers-reduced-motion` honored; no horizontal scroll at 320px.\n- BEM only; `.wood-texture-bg`, `.leather-accent`, `.furniture-card-crafted` present.\n- All copy is real, specific English — no lorem ipsum.\n",1791954984542]