[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-221-Artesanato-Organico-e-Acolhedor":3},"# BUILD SPECIFICATION FOR CODING AI — \"Organic & Cozy Handcraft\" Landing Page\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build the complete, production-ready landing page described below in a single attempt — all sections, all states, both themes, fully functional.\n\n---\n\n## PROJECT BRIEF\n\n- **Product:** A single-page marketing landing page for an online artisan craft store (handmade ceramics, textiles, woodwork, woven décor). Output category: **Nature & Organic**.\n- **Theme:** \"Organic & Cozy Handcraft\" — organic, warm, authentic. Keywords: handmade, craft, artisan, organic, warm, authentic, unique, natural, cozy, friendly. Era: 2026+ Artisanal Value.\n- **Visual direction:** A warm, hand-drawn-feeling page: natural textures (wood, fabric) simulated in CSS, calligraphy-style display typography, organic imperfect illustrations, hand-finished borders, \"handmade touch\" hover micro-interactions, smooth natural section transitions, olive green and burnt orange accents, an authentic and cozy feel.\n- **Sections (in this order):**\n  1. **Sticky Header** — store logo (calligraphy font), anchor navigation, theme toggle, mobile menu button (standard landing-page chrome; hosts the mandatory theme toggle).\n  2. **Hero** — calligraphy headline, supporting copy, primary + secondary CTA buttons, CSS organic illustration, natural-texture background.\n  3. **Features** — exactly 3 cards.\n  4. **How It Works** — exactly 3 numbered steps.\n  5. **Testimonials** — 3 quote cards with ratings.\n  6. **Pricing** — 3 tiers, middle tier visually featured.\n  7. **FAQ** — accessible accordion, 5–6 themed questions.\n  8. **Final CTA** — warm accent band with newsletter signup form.\n  9. **Footer** — Earth Brown background, secondary link columns, social icons, copyright.\n- **Copy:** Write all user-facing copy in **English**. Invent a cozy artisan store name and write complete, authentic, themed copy for every section (no lorem ipsum, no placeholder text). Tone: warm, friendly, human — like a handwritten note from the maker.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n### 1.1 CSS-First Architecture & Zero Inline CSS\n- **No inline CSS:** the `style=\"...\"` attribute is forbidden anywhere in the HTML.\n- **Class\u002FID selectors only:** every design property, layout rule, and state is applied via classes\u002FIDs defined in `style.css`.\n- **Minimal HTML modifications:** markup stays clean, semantic, and styling-agnostic; re-theming the site must only require editing `style.css`.\n- **No inline JavaScript:** no `onclick`-style handler attributes; all behavior lives in `script.js`, attached via `addEventListener`.\n\n### 1.2 CSS Variables & Theme Tokens\nStore every visual token in `:root` and override in `.dark`. Map the source spec's base values (`background: #F5F5DC`, `color: #333333`, `border: 1px solid #D2B48C`) into tokens — never hardcode them. Suggested starting values (fine-tune only if a contrast check fails):\n\n**Light (default):**\n- `--primary: #6B8E23` (Olive Green) · `--secondary: #CC5500` (Burnt Orange)\n- `--bg-primary: #F5F5DC` (Beige — page background; never pure `#FFFFFF` for large surfaces) · `--bg-secondary: #FEFEFE` (cards\u002Fsurfaces)\n- `--text-primary: #333333` · `--text-secondary: #6B5B4E` (warm stone)\n- `--text-success: #4E7A27` (deep olive) · `--text-error: #B3402A` (brick red — must stay distinguishable from Burnt Orange)\n- `--border-default: #D2B48C` (tan) · `--border-error: #B3402A` · `--border-success: #4E7A27`\n- Decorative accents: `--accent-sky: #87CEEB`, `--accent-rose: #E0BBE4`, `--accent-earth: #8B4513`, `--accent-stone: #A9A9A9` — Sky, Rose, and Stone are for illustration blobs, badges, and dividers only, never body text.\n- Deep button fills: `--primary-deep: #55701C`, `--secondary-deep: #A64B00` — solid fills paired with `#FEFEFE` text to guarantee AA (bright `--primary`\u002F`--secondary` remain for large display accents, borders, icons, and hovers).\n- `--radius-sm: 10px` · `--radius-md: 18px` · `--radius-lg: 28px` · `--radius-handmade: 255px 15px 225px 15px \u002F 15px 225px 15px 255px` (the signature hand-drawn wobble)\n- `--shadow-sm: 0 2px 6px rgba(90,70,40,0.12)` · `--shadow-md: 0 10px 26px rgba(90,70,40,0.20)` — warm-tinted, never cold black\n- `--spacing-gap: 1.5rem` · `--transition-fast: 0.25s ease-in-out` · `--transition-normal: 0.6s ease-in-out` (theme signature) · `--ease-standard: ease-in-out`\n- `--z-dropdown: 100` · `--z-modal: 1000` · `--z-toast: 1100`\n- `--font-display: \"Dancing Script\", cursive` · `--font-base: \"Nunito\", sans-serif`\n\n**Dark (override under `.dark` and `@media (prefers-color-scheme: dark)`):**\n- `--bg-primary: #241C14` (deep espresso) · `--bg-secondary: #33291E`\n- `--text-primary: #F5EDDE` (warm cream) · `--text-secondary: #C9B9A3`\n- `--primary: #A9C25E` · `--secondary: #F08A4B` (lightened for dark backgrounds; button fills flip to bright tokens paired with dark `--bg-primary` text)\n- `--text-success: #9BC06A` · `--text-error: #E8836B` · `--border-default: #5C4A38`; deepen shadows and adjust decorative accents for dark surfaces.\n\n**Contrast pairing (mandatory in both themes):** every light background token pairs with a dark text token and every dark background token with a light text token. Verify WCAG AA (≥4.5:1 body text, ≥3:1 large text and UI components) in Light and Dark; if a pair fails, adjust the token value — never ship a failing pair.\n\n### 1.3 Mandatory Dark Mode Support\n- Provide dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `\u003Chtml>` so switching never requires HTML restructuring.\n- Persist the user's choice in `localStorage`; fall back to `prefers-color-scheme` on first visit.\n- Include a visible toggle in the header: a button with a Material Symbols `light_mode`\u002F`dark_mode` icon, `aria-pressed` reflecting the current state, and a dynamic `aria-label` (\"Switch to dark theme\" \u002F \"Switch to light theme\").\n- **Exception clause:** the source style spec marked dark mode as excluded (Light ✓ Full \u002F Dark ✗ No), but dark mode is a mandatory architectural rule — implement it regardless, using warm dark-earth tones (espresso, cream, lightened olive\u002Forange) so the cozy mood survives; cold blue-black palettes are forbidden.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n- Build every layout structure with Flexbox.\n- **Default alignment:** every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment.\n- **Mobile-first:** single-column by default; multi-column rows only at ≥768px (and ≥1024px where useful). Use `flex-wrap` wherever content can overflow. No horizontal scrolling at any viewport width from 320px up.\n\n### 1.5 Styling Approach — Vanilla CSS, No Framework\n- The source spec's CSS technical block dictates hand-written custom CSS: do **not** add Tailwind, Bootstrap, or any framework.\n- All styling lives in `style.css` as reusable component classes (`.btn`, `.card`, `.input-group`, `.handmade-border`, `.natural-texture-bg`, `.organic-illustration`) mapped to the CSS variables above.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n- Load via Google Fonts `\u003Clink>` (with `preconnect`): **\"Dancing Script\"** (display) and **\"Nunito\"** (body), bound to `--font-display` and `--font-base`.\n- **Hierarchy:** Dancing Script for the logo, hero headline, section titles, and badge\u002Feyebrow accents; Nunito for all body copy, buttons, forms, and footer. Calligraphy type is never used for long body text — readability is mandatory. Generous line-height (1.6–1.7) and fluid sizes via `clamp()`.\n- **Icons:** Google Material Symbols (**Rounded** variant) via the official `\u003Clink>`. Forbidden: raw inline SVGs, local icon files, emoji-as-icons.\n- **Illustration rule:** the theme's \"organic imperfect illustrations\" must be built exclusively with CSS — uneven `border-radius` blobs (e.g., `60% 40% 30% 70% \u002F 60% 30% 70% 40%`), leaf shapes (`border-radius: 0 70% 0 70%` + rotation), pseudo-elements, and layered gradients. No SVG illustration.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Buttons (`.btn` + variants)\nAll states styled via classes:\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px. Variants: `.btn--primary` (deep olive fill, `#FEFEFE` text), `.btn--secondary` (deep burnt-orange fill, `#FEFEFE` text), `.btn--ghost` (transparent, 2px dashed `--border-default`, `--text-primary` text). The hero primary CTA additionally uses the `.handmade-border` wobble for signature charm.\n- **Hover:** the \"handmade touch\" — `translateY(-2px)` plus a tiny `rotate(-0.5deg)`, shadow shifts to `--shadow-md`, `cursor: pointer`. Apply this language consistently across all interactive elements.\n- **Focus:** distinct visible ring (`outline: 2px solid var(--primary); outline-offset: 3px`) for keyboard navigation; never remove outlines without replacement.\n- **Active\u002FPressed:** `transform: scale(0.97)`.\n- **Loading:** `.is-loading` — disables pointer events (prevents double submits), swaps the label for a CSS spinner or rotating Material Symbol without changing button dimensions; set `aria-busy=\"true\"`.\n- **Disabled:** `opacity: 0.5`, grayscale filter, `cursor: not-allowed`.\n- **Success\u002FError:** `.is-success` \u002F `.is-error` temporary feedback states using `--text-success` \u002F `--text-error`, always icon + text (never color alone).\n- **Danger:** `.btn-danger` must be visually distinct from all other variants in both themes.\n\n### 2.2 Cards (`.card`)\nUsed for Features, Testimonials, and Pricing tiers:\n- **Default:** flex column layout, `--bg-secondary` surface, 1–2px solid `--border-default` (or the `.handmade-border` wobble, with a dashed \"stitch\" modifier for select cards), `--shadow-sm`, generous padding, `--radius-lg`.\n- **Hover:** `translateY(-2px)` with `rotate(±0.5deg)` — alternate direction per card for the imperfect handmade feel — plus `--shadow-md`.\n- **Focus-within:** border-color shifts to `--primary` when a child link\u002Fbutton receives focus.\n- **Loading (skeleton):** define a shimmer animation (gradient sweep) for card content to prevent layout jumps.\n- **Empty state:** structured fallback with a Material Symbol and guidance text — define the pattern even if unused.\n- **Featured pricing tier:** `.card--featured` — Burnt Orange border, slight elevation\u002Fscale, and a Dancing Script badge (e.g., \"Most Popular\") overlapping the top edge.\n\n### 2.3 Forms & Inputs (`.input-group`)\nThe Final CTA contains a newsletter signup:\n- **Structure:** flex `.input-group` wrapping a `\u003Clabel>`, the `\u003Cinput type=\"email\">`, and a dedicated error\u002Fsuccess feedback container.\n- **States (all styled):** empty, focused (visible ring using `--primary`), filled, valid (success border + `check_circle` icon), invalid (error border, `--text-error` message + error icon), disabled, read-only.\n- **Feedback:** the message container has `aria-live=\"polite\"`; messages are text + icon, never color alone. Submit runs through the button's loading state, then resolves to success (\"You're on the list!\") or error feedback.\n\n### 2.4 Modal \u002F Popup (conditional)\nNo modal is required by the section list. If — and only if — you add one that serves the brief, it must include: opening\u002Fopen\u002Fclosing CSS transitions, a centered flex overlay (`align-items: center`) with backdrop, a Material Symbol close button, keyboard focus trapping, closing via `Esc` and overlay clicks, and loading\u002Fsuccess\u002Ferror states. Otherwise omit entirely — do not add unrequested dialogs.\n\n### 2.5 FAQ Accordion (custom widget)\n- Semantic pattern: `\u003Cbutton aria-expanded aria-controls>` + associated panel (or native `\u003Cdetails>`\u002F`\u003Csummary>` enhanced with CSS).\n- Smooth open\u002Fclose via CSS transition (e.g., the `grid-template-rows: 0fr → 1fr` technique); a Material Symbol `expand_more` rotates 180° on open.\n- Fully keyboard operable, visible focus states, panels labeled with `role=\"region\"`.\n- 5–6 real themed questions (materials, shipping, custom orders, care, returns) with genuine answers.\n\n### 2.6 Header, Navigation & Footer\n- Sticky header on `--bg-primary` with a 1px solid `--border-default` bottom edge; logo in Dancing Script.\n- Anchor links to all sections; `scroll-behavior: smooth` plus `scroll-margin-top` on sections; honor `prefers-reduced-motion` (no smooth scroll).\n- Mobile: hamburger (Material Symbol `menu`) toggles a dropdown panel (`z-index: var(--z-dropdown)`); the button carries `aria-expanded`\u002F`aria-controls`; the menu closes on `Esc` and on link selection.\n- Include a skip-to-content link as the first focusable element.\n- Footer: Earth Brown (`--accent-earth`) background in light mode (deepened espresso in dark mode), always paired with cream text; secondary link columns (Shop, Support, Company), social icons via Material Symbols, and copyright line.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid `clamp()` typography, flexible widths, breakpoints at ~480\u002F768\u002F1024px; zero horizontal overflow from 320px up.\n- **Smooth animations:** every state change transitions with `var(--transition-normal)` (0.6s ease-in-out — the theme signature); prefer explicit properties (`transform`, `box-shadow`, `border-color`, `background-color`, `color`) over `transition: all` for performance. Section content reveals on scroll via `IntersectionObserver` adding an `.is-visible` class (gentle fade + 12px rise, staggered) — implemented in `script.js`.\n- **`prefers-reduced-motion`:** disable transforms, scroll animation, and reveal motion; keep instant state changes; no parallax.\n- **Natural section transitions:** no hard edges between sections — use CSS-only organic dividers (pseudo-elements with oversized uneven `border-radius` curves) or gradual warm tone shifts of `--bg-primary`.\n- **Natural textures:** `.natural-texture-bg` simulates linen weave and wood grain purely with layered `repeating-linear-gradient`\u002F`radial-gradient` at subtle opacity (≤6% effective tint) — no image files; text over textures must still pass AA contrast.\n- **Handmade borders:** `.handmade-border` = 2px solid `--border-default` + `border-radius: var(--radius-handmade)`; a stitched modifier uses a dashed border to mimic hand stitching. `.organic-illustration` = the CSS blob\u002Fleaf composition described in 1.6, used in the hero and as decorative accents.\n- **Accessibility (a11y):** semantic HTML5 landmarks (`header`\u002F`nav`\u002F`main`\u002F`section`\u002F`footer`), a single `h1`, logical heading order, AA contrast in both themes, state never communicated by color alone (pair with icons\u002Ftext), full keyboard operability, logical focus order, and `aria-live` regions for dynamic feedback (form results, toasts).\n- **Mandatory visual feedback:** every click, hover, focus, and submission produces a visible change.\n- **Destructive actions:** any `.btn-danger` stays visually distinct in both themes.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **Files:** `index.html`, `style.css`, `script.js` — three separate files. The only script reference is a single `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`; no inline `\u003Cscript>` blocks, no inline handlers.\n- **Naming convention:** BEM (`block__element--modifier`) for all components, with exactly one fixed utility set: `.natural-texture-bg`, `.organic-illustration`, `.handmade-border`. Never mix conventions.\n- **Copy:** all user-facing copy in English, complete and themed — store name, hero, feature copy, 3 steps, testimonials with names and ratings, pricing tiers with real feature lists, FAQ answers, footer link labels. No lorem ipsum; no placeholders (none are needed here).\n- **Definition of done:** all 9 sections present in order; every button\u002Finput\u002Fcard state implemented; light and dark themes both pass AA; theme toggle persists via `localStorage`; FAQ accordion and mobile menu keyboard operable; newsletter form validates with loading\u002Fsuccess\u002Ferror feedback; no horizontal scroll at 320px+; zero inline CSS\u002FJS; page works error-free on first run.\n",1791954983236]