[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-281-Cerrado-Minimalista":3},"# CODING PROMPT — \"CERRADO MINIMALISTA\" LANDING PAGE (Nature & Organic)\n\n**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete Landing Page on the first attempt. Follow every rule in this specification without exception. Deliver the full, runnable code in a single response.\n\n**Project Brief:** Build a single-page landing site themed **Cerrado Minimalista** — an organic, minimal, warm, natural aesthetic inspired by the Brazilian Cerrado savanna: golden grass, red earth, dry green vegetation, sparse organic forms, and a sustainable eco mood. Output category: **Nature & Organic**. Choose one coherent fictional brand concept (e.g., a sustainable lifestyle brand, conscious Cerrado tourism, or a savanna-restoration subscription) and write realistic English marketing copy for it.\n\n**Required page structure, in this exact order:**\n1. Global sticky header (brand mark, anchor nav, theme toggle, mobile menu button)\n2. Hero\n3. Features — exactly 3 cards\n4. How It Works — exactly 3 steps\n5. Testimonials\n6. Pricing — exactly 3 tiers\n7. FAQ — accordion\n8. Final CTA — full-width conversion band\n9. Footer — secondary link columns + newsletter signup\n\n---\n\n## DESIGN DIRECTION — CERRADO MINIMALISTA\n\n**Palette (map to tokens):**\n\n| Token | Name | Hex |\n|---|---|---|\n| `--primary` | Cerrado Gold | `#C8A951` |\n| `--secondary` | Terracotta | `#CC5533` |\n| `--accent-sand` | Sand Beige | `#E8D5B7` |\n| `--accent-green` | Dry Green | `#7A8B5C` |\n| `--text-primary` | Earth Brown | `#6B4226` |\n| `--text-secondary` | Stone Gray | `#8B8680` |\n| `--bg-primary` | Cotton White | `#FAF7F2` |\n| `--accent-sky` | Dry Sky Blue | `#87CEEB` (sparingly, e.g., hero sky) |\n\n**Typography:** Body — `'DM Sans', 'Nunito Sans', sans-serif` bound to `--font-base`. Accents\u002Fheadings — `'Libre Baskerville', serif` bound to `--font-accent`. Load via Google Fonts `\u003Clink>` tags.\n\n**Signature visual effects (all CSS-only, no external image files):**\n- **Generous spacing:** `padding: 5rem 0` per section, evoking the vastness of the savanna; content container `max-width: 1100px`.\n- **Organic irregular borders:** `border-radius: 8px 16px 8px 16px` (token: `--radius-organic`) on cards, buttons, inputs, images, and decorative shapes.\n- **Soft earthy elevation:** `box-shadow: 0 4px 16px rgba(107,66,38,0.08)` as `--shadow-md`.\n- **Recycled-paper texture:** subtle grain on `--bg-primary` generated in CSS (layered gradients or a data-URI noise filter embedded in the stylesheet — this background texture is the sole permitted non-icon SVG usage).\n- **Dry grass elements:** decorative grass blades built from `div`s with organic border-radius and gradient fills, animated with `@keyframes sway` (`animation: sway 8s ease-in-out infinite`), staggered `animation-delay`, `transform-origin: bottom`.\n- **Subtle asymmetry:** offset hero art, staggered card offsets (desktop only, via `nth-child` transforms) — never breaking reading order, focus order, or the alignment grid.\n- **Breeze-like micro-animations:** gentle fade-up entrance reveals and sway motion throughout.\n\n**Section-by-section specs:**\n- **Hero:** asymmetric flex row — text column (~55%) beside a CSS-composed savanna illustration (~45%): Dry Sky Blue gradient sky disc, gold sun, layered red-earth mounds, and swaying `.grass` blades. Eyebrow badge, H1 with one serif accent word in Terracotta, supporting paragraph, primary CTA + ghost secondary CTA, trust microcopy.\n- **Features:** heading + intro, then 3 `.card`s in a responsive grid (3 → 1 columns). Each card: Material Symbol inside an organic icon chip (sand background, green\u002Fgold icon), title, description. Staggered vertical offsets on desktop.\n- **How It Works:** 3 steps with numbered organic badges (`01`\u002F`02`\u002F`03` in Libre Baskerville), a connecting dashed line on desktop (CSS pseudo-element, hidden on mobile), each step with icon, title, text.\n- **Testimonials:** 3 `.card`s — quote Material Symbol, italic serif quote, avatar circle with CSS-gradient background and initials (no external images), name, role. Staggered offsets.\n- **Pricing:** 3 tiers with organic names (e.g., Sprout \u002F Bloom \u002F Canopy); middle tier `.card--featured` with gold border, \"Most Popular\" badge, and elevated shadow; each tier: name, price, billing period, feature list with check Material Symbols, CTA button (featured = primary, others = secondary).\n- **FAQ:** 5–6 realistic questions about the brand concept, built as an accessible accordion (see 2.4).\n- **Final CTA:** full-width band using `--secondary` background with light text (correct contrast pairing); inverted CTA button (`--bg-primary` background, Earth Brown text).\n- **Footer:** brand block + tagline, 2–3 secondary link columns (real labels; anchor to page sections where applicable, `href=\"#\"` otherwise), newsletter signup (see 2.3), bottom bar with copyright and social icon links (Material Symbols).\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:** all design properties, layout rules, and states live in `style.css`, targeted via class or ID selectors.\n- **Minimal HTML Modifications:** markup stays clean, semantic (HTML5 landmarks: `header`, `nav`, `main`, `section`, `article`, `footer`), and agnostic of visual styling — changing the look must require editing only the CSS file.\n\n**1.2 CSS Variables (`var(--...)`) & Theme Tokens**\nStore all tokens in `:root`:\n- **Colors:** `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary` (light: a sand tint such as `#F3E9D6`), `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`, plus the palette extras from the Design Direction and `--text-on-primary` \u002F `--text-on-secondary` for text placed on colored backgrounds.\n- **Contrast Pairing:** every light background token pairs with dark Earth Brown text; every dark background token pairs with light Cotton\u002FSand text — enforced in every theme, not just the default. Choose success\u002Ferror hues that pass WCAG AA in both modes and remain distinct from Terracotta.\n- **Light Mode Background:** `#FAF7F2` (Cotton White) with the paper grain — never pure white; use `#fefefe` if a near-white panel is needed.\n- **Border Radius & Shadows:** `--radius-sm: 8px`, `--radius-md: 16px`, `--radius-lg`, `--radius-organic: 8px 16px 8px 16px`, `--shadow-sm`, `--shadow-md: 0 4px 16px rgba(107,66,38,0.08)`.\n- **Spacing & Transitions:** `--spacing-gap`, `--section-padding: 5rem 0`, `--transition-fast`, `--transition-normal`, `--ease-standard`.\n- **Elevation\u002FStacking:** `--z-dropdown`, `--z-modal`, `--z-toast` to prevent overlap conflicts (header, mobile menu, any overlay).\n\n**1.3 Mandatory Dark Mode Support**\n- **Exception clause:** the source specification requested light-mode-only; dark mode is nonetheless mandatory — implement it as a \"Dry Night Savanna\" variant: deep earth-brown backgrounds (`#241A12` primary, `#2E2118` secondary), light sand\u002Fcotton text, gold accents preserved, and Terracotta lightened (e.g., `#E07B57`) to maintain contrast.\n- **Implementation:** dark tokens defined under both `@media (prefers-color-scheme: dark)` and a `.dark` class selector; background and text variables switch seamlessly with no HTML restructuring.\n- **Persistence:** user choice persists via `localStorage`, falling back to `prefers-color-scheme` on first visit; a visible toggle (sun\u002Fmoon Material Symbols) carries correct `aria-pressed` and `aria-label` state and announces the change via an `aria-live` region.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- **Default Alignment Rule:** every flex container defaults to `align-items: center` unless an explicitly justified exception exists.\n- **Mobile-Friendly First:** all flex layouts are responsive out of the box — rows collapse to columns on smaller viewports; zero horizontal scrolling from 320px up.\n\n**1.5 Framework Default & Tailwind CSS Integration**\n- Use Tailwind CSS, or clean custom CSS driven by Tailwind's `@layer` \u002F `@apply` directives. All utility classes must map back to CSS variables or generic reusable class names: `.container`, `.section`, `.btn`, `.card`, `.input-group`, `.accordion`, `.grass`, `.badge`.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- **Text:** Google Fonts `\u003Clink>` tags for DM Sans (400\u002F500\u002F700), Nunito Sans (fallback), and Libre Baskerville (400\u002F700 + italic), bound to `--font-base` and `--font-accent`.\n- **Icons:** Google Material Symbols (Rounded style) only. Raw inline SVGs and local icon files are explicitly forbidden — the single exception is the CSS-embedded paper-grain texture noted in the Design Direction, which is a background, never an icon.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component Requirements**\nStyle all states via CSS classes (`.btn`, `.btn--primary`, `.btn--secondary`, `.btn--ghost`, `.btn--danger`):\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px, organic radius.\n- **Hover:** brightness\u002Fshadow shift with `cursor: pointer`.\n- **Focus:** distinct focus ring via `outline` \u002F `box-shadow` using CSS variables, visible in both themes.\n- **Active\u002FPressed:** `transform: scale(0.97)`.\n- **Loading:** `.is-loading` disables interaction, prevents double-clicks, and renders a CSS spinner (border-based) without distorting button dimensions.\n- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n- **Success\u002FError:** temporary feedback styles driven by `--text-success` \u002F `--text-error` (e.g., newsletter submit).\n- Primary CTA = Cerrado Gold background with deep-earth text; secondary = Terracotta; `.btn--danger` visually distinct in both themes.\n\n**2.2 Card Component Requirements**\nApplies to Features, Testimonials, and Pricing cards:\n- **Default:** flexible flexbox layout with subtle borders and elevation using `--bg-secondary` and CSS variables.\n- **Hover:** shadow shift to `--shadow-md` plus subtle `transform: translateY(-2px)`.\n- **Focus-within:** card borders highlight when a child link\u002Fbutton receives focus.\n- **Loading (Skeleton):** shimmer animation class defined in CSS, causing no layout jumps.\n- **Empty State:** structured fallback pattern with a Google Icon and clear guidance text (define the CSS pattern even if unused).\n\n**2.3 Form & Input Requirements**\nApplies to the footer newsletter signup:\n- **States:** empty, focused (outline ring), filled, valid (success border + check icon), invalid (error border, error text, error icon), disabled, read-only.\n- **Structure:** flex `.input-group` wrapping a `\u003Clabel>`, the `\u003Cinput>`, and a dedicated error feedback element wired via `aria-describedby` and an `aria-live=\"polite\"` region.\n- **Behavior:** validate the email on submit; show inline errors; on success, show a success state with `aria-live` confirmation while the button passes through the loading state.\n\n**2.4 FAQ Accordion (Disclosure Widget)**\n- Build with styled native `\u003Cdetails>\u002F\u003Csummary>` or a button + region pattern carrying `aria-expanded` \u002F `aria-controls`.\n- Fully keyboard operable with visible focus; animated open\u002Fclose via CSS transitions; chevron Material Symbol rotates on toggle.\n- State changes must be communicated by more than color (icon rotation + height change).\n\n**2.5 Modal \u002F Popup Requirements (conditional)**\nOnly if you introduce any overlay: opening, open, loading, success\u002Ferror, and closing states animated via CSS transitions; centered flex container (`align-items: center`); backdrop overlay; Google Icon close button; keyboard focus trapping; close via `Esc` or overlay click; `role=\"dialog\"` and `aria-modal=\"true\"`.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by Default:** fluid sizing (`clamp()` for type) and breakpoints with no horizontal overflow at any viewport width.\n- **Smooth Animations:** `transition: var(--transition-normal)` on all state changes; grass sway at `8s ease-in-out infinite` with staggered delays; entrance reveals via fade-up. **Respect `prefers-reduced-motion`** — disable sway, transforms, and smooth scrolling; retain only color\u002Fopacity transitions.\n- **Accessibility (a11y):** WCAG AA contrast in both Light and Dark modes; never rely solely on color to communicate state; semantic HTML5 elements; correct ARIA roles\u002Flabels on custom widgets (accordion, toggle, mobile menu); logical DOM\u002Ffocus order; full keyboard operability; a skip-to-content link; `aria-live` regions for dynamic feedback (form errors, theme toggle, FAQ).\n- **Mandatory Visual Feedback:** every click, hover, or submission triggers a visible state change.\n- **Destructive Actions:** any destructive control uses `.btn--danger` and is visually distinct in both light and dark themes.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **File Structure:** separate `index.html`, `style.css`, and `script.js` files. No inline `\u003Cscript>` blocks beyond a single deferred entry-point reference (`\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`). `script.js` handles only: theme toggle + persistence, mobile menu, accordion behavior, newsletter validation\u002Fsubmit simulation, and optional IntersectionObserver reveals.\n- **Naming Convention:** BEM throughout (`.card`, `.card__title`, `.card--featured`) — never mix conventions.\n- **Copy:** all user-facing copy written in **English** — realistic, on-theme marketing copy for the chosen brand concept (the brand name may retain a light Portuguese flavor as a proper noun, e.g., \"Raiz do Cerrado\"); no lorem ipsum anywhere.\n- **No Unrequested Placeholders:** every heading, label, button, testimonial, FAQ entry, and pricing feature must be real, coherent copy; `href=\"#\"` is acceptable only for links with no in-page target.\n- **Visuals:** all imagery is CSS-composed (gradients, organic shapes, Material Symbols, initials avatars) — no external image files.\n- **Output:** the complete, runnable code for all three files in one response, on the first attempt.\n",1791954984210]