[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-301-Culinaria-Afetiva-Brasileira":3},"# CODING AGENT SYSTEM PROMPT — LANDING PAGE: \"CULINÁRIA AFETIVA BRASILEIRA\" (Brazilian Affective Cuisine)\n\n**Your Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality landing page on the first attempt. Generate the final code immediately, fully styled, fully interactive, with no TODOs, stubs, or placeholders.\n\n---\n\n## 0. PROJECT BRIEF & THEME DIRECTION\n\n* **Product:** A warm, community-driven landing page for a homemade-recipe and affective-cuisine sharing platform inspired by Brazilian vernacular culture.\n* **Theme Name:** \"Culinária Afetiva Brasileira\" (Brazilian Affective Cuisine) — keep as the brand's proper name; write **all user-facing copy in English**.\n* **Era:** \"Flavors of Memory\" (2026+) — nostalgic, memory-driven warmth rendered with modern, forward-looking polish.\n* **Mood \u002F Keywords:** homemade recipes, affective cuisine, Brazilian, warm, authentic, community, cozy, traditional, shared, friendly.\n* **Visual Language:** chita tablecloth textures (traditional Brazilian floral-print cotton fabric) and old kitchen utensil motifs; handwritten, recipe-notebook typography; cozy homemade-dish photo frames; \"steam\u002Faroma\" hover micro-interactions; smooth \"flipping through a cookbook\" section transitions.\n* **Required Sections:** Sticky Header\u002FNav, Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.\n* **Output Category:** Cultural & Heritage.\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 must be targeted via class or ID selectors inside `style.css`.\n* **Minimal HTML Modifications:** HTML must remain clean, semantic (header, nav, main, section, footer), and agnostic of visual styling — changing the site's look must only require editing `style.css`.\n\n### 1.2 CSS Variables & Theme Tokens\nStore all visual tokens in `:root` and the dark theme class. Use exactly these names, with these theme values:\n\n**Light theme (`:root`):**\n* Colors: `--primary: #FFD700` (Corn Yellow — fill\u002Faccent only, never text on light backgrounds), `--secondary: #6B8E23` (Herb Green), `--secondary-strong: #55771A` (darkened herb green for AA-safe fills and text), `--accent: #ED7014` (Carrot Orange — large display headings only), `--bg-primary: #FFF8E8` (warm cream), `--bg-secondary: #F6EBD9` (parchment), `--text-primary: #4A3525` (deep warm brown), `--text-secondary: #7C6A52`, `--text-success: #55771A`, `--text-error: #D14333`, `--border-default: #D2B48C` (tan; the notebook signature style is `1px dashed`), `--border-error: #D14333`, `--border-success: #6B8E23`.\n* **Near-White Rule:** Where the palette specifies `#FFFFFF`, substitute `#FEFEFE` — never use pure white.\n* Shape & Depth: `--radius-sm: 6px`, `--radius-md: 10px`, `--radius-lg: 22px`, `--shadow-sm: 0 2px 8px rgba(139,69,19,0.10)`, `--shadow-md: 0 8px 24px rgba(139,69,19,0.16)`.\n* Motion & Space: `--spacing-gap: 1.5rem`, `--transition-fast: 0.25s ease-in-out`, `--transition-normal: 0.7s ease-in-out` (the theme's signature slow transition, used for section reveals and theme switches), `--ease-standard: ease-in-out`.\n* Stacking: `--z-dropdown: 100`, `--z-modal: 200`, `--z-toast: 300`.\n* Typography: `--font-base: 'Nunito', sans-serif`, `--font-handwritten: 'Caveat', cursive`.\n\n**Contrast Pairing (mandatory in both themes):** Corn Yellow backgrounds always carry dark brown text; cream\u002Fparchment backgrounds always carry deep brown text; dark cocoa backgrounds always carry cream text. Carrot Orange is only permitted for headings at large sizes (≥ 24px, or ≥ 19px bold); body text uses `--text-primary`\u002F`--text-secondary`.\n\n**Signature utility classes (preserve verbatim):** `.chita-texture-bg`, `.handwritten-recipe`, `.cookbook-flip-transition`.\n\n### 1.3 Mandatory Dark Mode Support\n* **Tokens:** Define a full dark token set under both `@media (prefers-color-scheme: dark)` and a `.dark` class: `--bg-primary: #211610` (deep cocoa), `--bg-secondary: #2E2015`, `--text-primary: #F6EBDC` (cream), `--text-secondary: #C9B69C`, `--secondary: #9BC24D`, `--secondary-strong: #9BC24D` (paired with dark text), `--accent: #FF9A57`, `--text-success: #A9D46A`, `--text-error: #FF8A75`, `--border-default: #6B5138`, shadows in deep `rgba(0,0,0,0.45)`. Corn Yellow `#FFD700` is retained in dark mode, always paired with `#241A0F` text.\n* **Theme Switching:** Background and text variables must switch seamlessly with no HTML restructuring; apply `--transition-normal` to `body` for a smooth cross-fade.\n* **Persistence & Toggle:** Persist the user's choice via `localStorage` (falling back to `prefers-color-scheme` on first visit) and expose a visible toggle in the header with correct `aria-pressed` and `aria-label` states, swapping Google Material icons `light_mode` \u002F `dark_mode`.\n* **Exception clause:** Although the source style spec lists dark mode as excluded, dark mode is mandatory for this deliverable — implement it as a warm \"night kitchen\" variant (deep cocoa backgrounds, cream text, glowing corn-yellow accents) that preserves the cozy mood.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n* Build all layout structures with Flexbox (`display: flex` \u002F Tailwind flex utilities).\n* **Default Alignment Rule:** Every flex container defaults to `align-items: center` (`items-center`) unless an explicitly justified exception is documented (e.g., pricing feature lists and footer link columns may use `flex-start` for readability — state the exception in a CSS comment).\n* **Mobile-Friendly First:** Rows must convert to columns on small viewports; prevent horizontal scrolling at every breakpoint; no fixed widths that break below 360px.\n\n### 1.5 Framework Default & Tailwind CSS Integration\n* Use Tailwind CSS (Play CDN is acceptable) for layout, spacing, and responsive utilities. All visual identity (colors, borders, effects, states) must live in `style.css` as generic reusable component classes (`.btn`, `.card`, `.input-group`, etc.) driven by the CSS variables above — never hard-coded hex values inside component classes.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n* **Text:** Load Google Fonts via `\u003Clink>` in `\u003Chead>`: **Caveat** (handwritten headings, recipe cards, numerals) and **Nunito** (base body text). Bind them to `--font-handwritten` and `--font-base`.\n* **Icons:** Use Google Material Symbols (Rounded style) via the official `\u003Clink>` tag. **Explicitly forbidden:** raw inline SVGs, local icon files, and emoji used as icons.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Button Component\nStyle all states via CSS classes; base `.btn`: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px, `border-radius: var(--radius-md)`, `transition: var(--transition-fast)`.\n* **Variants:** `.btn--primary` (Corn Yellow bg, dark brown text), `.btn--secondary` (Herb Green `--secondary-strong` bg, cream text; in dark mode brightened green bg with dark text), `.btn--outline` (transparent, herb green border + text, fills on hover), `.btn--danger` (darkened tomato `#D14333` bg with cream text in light mode; `#FF6347` bg with very dark brown text in dark mode — visually distinct in both themes).\n* **Hover:** brightness shift + `--shadow-md`, `cursor: pointer`.\n* **Focus:** distinct `:focus-visible` ring using `--primary` at ~45% alpha (3px offset) — never remove outlines without replacement.\n* **Active\u002FPressed:** `transform: scale(0.97)`.\n* **Loading (`.is-loading`):** disables pointer events, prevents double-clicks, swaps the label for a rotating Material `progress` icon or CSS spinner **without changing button dimensions**; set `aria-busy=\"true\"`.\n* **Disabled:** `opacity: 0.5`, greyscale filter, `cursor: not-allowed`, no hover\u002Factive effects.\n* **Success\u002FError (`.is-success`, `.is-error`):** transient feedback states using `--text-success` \u002F `--text-error` borders **plus** a check or error Material icon — never color alone.\n\n### 2.2 Card Component\nBase `.card`: Flexbox layout, `--bg-secondary` background, `1px dashed var(--border-default)` border, `--radius-md`, `--shadow-sm`, generous padding.\n* **Hover:** `transform: translateY(-2px)` + elevation shift to `--shadow-md` + border color shift toward `--secondary`.\n* **Focus-within:** card border highlights (`--accent`) when a child link\u002Fbutton receives focus.\n* **Loading (Skeleton):** define `.card--skeleton` shimmer animation (gradient sweep) with reserved min-heights to prevent layout jumps.\n* **Empty State:** define a structured fallback with a centered Material icon (`menu_book`) and clear guidance text.\n\n### 2.3 Form & Input Requirements\nStructure: `.input-group` as a flex column wrapping a `\u003Clabel>`, an `.input-field` wrapper (input + validation icon), and a dedicated error message container with reserved min-height and `aria-live=\"polite\"`.\n* **States to style:** Empty, Focused (herb green border + corn yellow ring), Filled, Valid (`--border-success` + `check_circle` icon), Invalid (`--border-error` + `error` icon + red message text), Disabled, Read-only (dashed border, muted background). Inputs: min-height 44px, `--radius-md`.\n\n### 2.4 Modal \u002F Popup — \"Share Your Recipe\" Dialog\nTriggered by the Hero's primary CTA. Overlay: fixed, `rgba(42,26,12,0.55)` + subtle backdrop blur, `display: flex; align-items: center; justify-content: center;`, `z-index: var(--z-modal)`. Panel: `--bg-primary`, dashed tan border, `--radius-lg`, max-width 480px.\n* **States:** Opening (fade + scale 0.95→1), Open, Loading (submit button enters `.is-loading` for a simulated ~1.2s), Success (check icon + \"Your recipe is on the table!\" message, auto-closes), Closing (reverse animation).\n* **UX Features:** Material `close` icon button (44px target, `aria-label=\"Close dialog\"`), keyboard focus trap, `Esc` and overlay-click closing, focus returned to the trigger, `role=\"dialog\"` + `aria-modal=\"true\"` + `aria-labelledby`. Contains a short form (name, recipe title, email) exercising all Section 2.3 states.\n\n### 2.5 Toast \u002F Live Feedback\nDefine a fixed toast region (`aria-live=\"polite\"`, `z-index: var(--z-toast)`) with success and error variants (icon + message), slide-up entrance, ~3.5s auto-dismiss, used for form submissions and modal confirmations.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n### 3.1 Global UX Rules\n* **Responsive by Default:** fluid sizing, no horizontal overflow, sections stack on mobile.\n* **Smooth Animations:** CSS transitions on all state changes; use `--transition-fast` for interactive controls and `--transition-normal` (the spec's `all 0.7s ease-in-out`) for section reveals and theme changes. Fully respect `prefers-reduced-motion` (disable steam, flip transforms, and shimmer; reduce transitions to near-zero).\n* **Accessibility (a11y):** AA contrast in both themes; never rely on color alone; semantic HTML5; correct ARIA roles\u002Flabels on the accordion, modal, toggle, and mobile menu; logical focus order; full keyboard operability; a \"Skip to content\" link; `aria-live` for all dynamic feedback.\n* **Mandatory Visual Feedback:** every click, hover, and submission triggers a visible state change.\n* **Destructive Actions:** `.btn--danger` must be visually distinct in both light and dark themes.\n\n### 3.2 Theme-Specific Effects (all CSS-only, no external assets)\n* **Chita Texture (`.chita-texture-bg`):** Simulate the floral chita print with layered `repeating-linear-gradient` \u002F `repeating-radial-gradient` patterns (small corn-yellow, tomato-red, and sky-blue floral dots on a cream base), kept subtle and low-contrast so text remains readable; provide a muted dark-mode variant. Apply to the Hero backdrop band, the Final CTA band, and the footer's top edge.\n* **Steam \u002F Aroma Hover:** On `.card` hover (feature cards especially), animate `::before`\u002F`::after` pseudo-elements — blurred, semi-transparent warm-white radial gradients rising upward with opacity keyframes — evoking steam or aroma. Infinite while hovered; disabled under reduced motion.\n* **Cookbook Flip (`.cookbook-flip-transition`):** Sections begin slightly rotated (`perspective` + `rotateY(-8deg)` + `translateY`) at 0 opacity and settle to normal over `--transition-normal` when scrolled into view (IntersectionObserver adds `.is-visible`). Under reduced motion, degrade to a simple fade. No layout shift.\n* **Handwritten Recipe (`.handwritten-recipe`):** Caveat typography, notebook ruled-line background via `repeating-linear-gradient`, `1px dashed #D2B48C` border, `border-radius: 10px`, a slight `-1deg` rotation, and an optional washi-tape strip via pseudo-element.\n* **Dish \"Photos\":** No external image files — build warm gradient placeholder frames styled as polaroid\u002Frecipe cards with a Material Symbol (`soup_kitchen`, `restaurant`, `bakery_dining`) and a Caveat caption.\n\n---\n\n## 4. PAGE SECTIONS & CONTENT SPECIFICATION\n\n### 4.0 Header (Sticky)\nFlex row, `align-items: center`, `justify-content: space-between`, semi-transparent `--bg-primary` with blur, dashed bottom border. Left: `soup_kitchen` icon + Caveat wordmark \"Sabores da Memória\" with English tagline \"Flavors of Memory\". Center\u002Fright: anchor nav (Features, How It Works, Testimonials, Pricing, FAQ) with smooth scrolling and `scroll-margin-top` on targets; theme toggle (Section 1.3); below 768px collapse nav into a `menu`-icon dropdown panel (`z-index: var(--z-dropdown)`, keyboard accessible, `Esc` closes).\n\n### 4.1 Hero\nTwo-column flex (stacks on mobile). Left: eyebrow badge (\"Flavors of Memory · Est. in every kitchen\"), Caveat H1 \"Recipes That Taste Like Home\" in `--accent`, warm subcopy about sharing the recipes and stories behind them, CTA row (primary \"Share Your Recipe\" → opens modal; outline \"Explore Recipes\" → anchor), and a trust row (three gradient initial avatars + \"Joined by 12,000+ home cooks\"). Right: a `.handwritten-recipe` polaroid card with a gradient dish placeholder, Caveat caption (\"Grandma's Sunday feijoada\"), and a gentle continuous steam animation that intensifies on hover. Chita texture accents behind.\n\n### 4.2 Features — 3 Cards\nResponsive 3→1 column grid of `.card`s, each with a circular tinted icon badge, H3, and copy:\n1. `menu_book` — \"Grandma's Notebook\" — \"Write recipes the way they were passed down to you — by hand, with smudges, shortcuts, and all.\"\n2. `groups` — \"One Big Community Table\" — \"Share your dishes, swap secrets in the comments, and cook along with families across Brazil and beyond.\"\n3. `auto_stories` — \"Stories Behind the Pot\" — \"Every recipe carries a memory. Attach the story of who taught it to you and keep the flame alive.\"\nHover triggers lift + steam wisps.\n\n### 4.3 How It Works — 3 Steps\nHorizontal on desktop with a dashed tan connector line behind, vertical stack on mobile. Each step: large Caveat numeral in a corn-yellow circle, Material icon, title, copy:\n1. `edit` — \"Write It Down\" — \"Jot your recipe onto a handwritten-style card — ingredients, steps, and that secret touch.\"\n2. `history_edu` — \"Season It with Memory\" — \"Add the story behind the dish: who taught it, when it's served, why it matters.\"\n3. `dinner_dining` — \"Set the Table Together\" — \"Publish it to the community, cook along with others, and pass the flavor forward.\"\n\n### 4.4 Testimonials\nThree `.card` quotes with `format_quote` icon, five `star` icons (with an accessible \"Rated 5 out of 5\" label), gradient initial avatar, name + city:\n* \"Maria C. — Belo Horizonte\": \"I posted my mother's pão de queijo recipe with her story. A stranger cooked it and thanked me crying. This place is a hug.\"\n* \"João P. — Recife\": \"The handwritten cards make me feel like I'm reading my grandma's notebook again. I cook more now than I have in years.\"\n* \"Ana L. — São Paulo\": \"Every Sunday our community table cooks one recipe together. It's the warmest corner of the internet I know.\"\n\n### 4.5 Pricing — 3 Tiers\nResponsive 3→1 grid; middle tier featured (solid herb-green border, slight scale, Caveat \"Most Loved\" badge):\n1. **Kitchen Helper — Free:** 10 handwritten recipe cards; community feed access; 1 memory story per recipe. CTA: outline \"Start Free\".\n2. **Family Table — $4.90\u002Fmonth (featured):** unlimited recipe cards; private family groups; printable notebook export; ad-free kitchen. CTA: primary \"Set Our Table\".\n3. **Community Chef — $9.90\u002Fmonth:** everything in Family Table; monthly live cook-alongs; printed hardcover cookbook of your recipes; priority support. CTA: outline \"Become a Chef\".\nFeature lists use `check_circle` icons in `--secondary-strong`. All pricing CTAs smooth-scroll to the Final CTA and move focus to the email input.\n\n### 4.6 FAQ\nAccessible accordion of five `\u003Cbutton>` questions (`aria-expanded`, `aria-controls`) with `expand_more` icons rotating 180° and animated panels: \"Do I need to be an experienced cook?\" (no — burned-rice stories welcome); \"What is 'affective cuisine'?\" (food made with memory and affection); \"Can I keep family recipes private?\" (yes, private groups); \"Can I print or export my recipes?\" (Family Table plan and up); \"Is it free to join?\" (Kitchen Helper is free forever).\n\n### 4.7 Final CTA\nFull-width `.chita-texture-bg` band, centered flex column: Caveat H2 \"Pull Up a Chair — The Table Is Set\", warm copy, and an inline newsletter `.input-group` (email + primary button \"Join the Table\"). Validation: empty → \"Please add your email so we can save you a seat.\"; invalid format → \"That email looks undercooked — mind checking it?\"; success → button shows `.is-success` and a toast confirms \"Welcome to the table! Check your inbox for your first recipe.\"\n\n### 4.8 Footer\n`--bg-secondary` band with dashed top border. Columns: brand (logo + one-liner), Explore (All Recipes, Community Table, Cook-Alongs), Support (Help Center, Contact, Community Guidelines), Legal (Privacy Policy, Terms of Service, Cookies) — link to on-page anchors where a matching section exists, otherwise `href=\"#\"` with descriptive accessible names. Contact row uses Material icons (`mail`, `share`). Copyright: \"© 2026 Sabores da Memória — Made with affection, one recipe at a time.\"\n\n---\n\n## 5. DELIVERABLE & OUTPUT FORMAT\n\n* **File Structure:** Separate `index.html`, `style.css`, and `script.js`. No inline `\u003Cscript>` blocks beyond a single deferred `script.js` entry point; Google Fonts, Material Symbols, and Tailwind CDN references go in `\u003Chead>`.\n* **Naming Convention:** BEM (`block__element--modifier`) for all components, with `.is-*` state classes — plus exactly three standalone utility classes preserved verbatim: `.chita-texture-bg`, `.handwritten-recipe`, `.cookbook-flip-transition`. Never mix in other conventions.\n* **Copy:** All user-facing copy in English, warm and community-toned, matching the content specified in Section 4 — no lorem ipsum. Brazilian dish names (feijoada, pão de queijo, brigadeiro) may appear as proper nouns.\n* **JavaScript Scope:** theme toggle with `localStorage` persistence, mobile menu, FAQ accordion, IntersectionObserver reveals, modal with focus trap, form validation, toasts, and button loading states — all in `script.js`, no behavioral logic in HTML.\n* **First Attempt Complete:** Ship the full landing page in one response — both themes verified for contrast, all states implemented, fully keyboard operable, responsive from 360px up.\n",1791954984615]