[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-495-Earthy-Organic":3},"# CODING AGENT PROMPT — Complete Landing Page: \"Earthy & Organic\" (Sustainable Packaging Brand)\n\n**Role & Mission:** Act as a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready landing page on the **first attempt** — no TODOs, no stubs, no lorem ipsum. Deliver finished, fully functional code for a sustainable, handcrafted packaging brand (invent a fitting brand name). All user-facing copy must be written in **English**, in a warm, authentic, sustainability-focused brand voice.\n\n**Theme Identity — \"Earthy & Organic\":** Natural, Warm, Sustainable, Authentic. Contemporary Sustainable Design. Keywords: organic, earthy, sustainable, packaging, natural, eco-friendly, handcrafted, botanical, warm, calm.\n\n**Design Language — enforce strict 60\u002F30\u002F10 palette discipline:**\n- **60% — Warm Beige `#F5E6CC`:** dominant neutral for page backgrounds and packaging-surface visuals.\n- **30% — Forest Green `#2D4F1E` + Slate Grey `#4A4A4A`:** structure, headings, body text, natural illustrations, functional information.\n- **10% — Terracotta `#E27D60`:** badges\u002Fseals, calls-to-action, product highlights, active states. Never exceed ~10% of visual weight.\n- **Signature effects:** subtle recycled-paper dot texture, organic (asymmetric) border radii, soft micro-animations at 220–280ms.\n\n**Page sections, in this exact order:** Sticky Header\u002FNav → 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 lives in `style.css`. **The `style=\"...\"` attribute is forbidden anywhere in the HTML.**\n- Target every element exclusively via class or ID selectors.\n- HTML must remain semantic and style-agnostic: retheming the entire page must be achievable by editing `style.css` alone, with zero markup changes.\n\n### 1.2 CSS Variables & Theme Tokens\nDefine all tokens in `:root`, then override under `.dark`. Use exactly these mandatory names (you may add tokens; never rename these):\n\n```css\n:root {\n  \u002F* Color *\u002F\n  --primary: #2D4F1E;            \u002F* Forest Green — brand, headings, primary buttons *\u002F\n  --secondary: #4A4A4A;          \u002F* Slate Grey — body copy, functional info *\u002F\n  --accent: #E27D60;             \u002F* Terracotta — badges, highlights, key CTAs *\u002F\n  --accent-strong: #C2583B;     \u002F* Darkened terracotta — CTA fills carrying #FEFEFE text at AA contrast *\u002F\n  --bg-primary: #F5E6CC;         \u002F* Warm Beige — page background (the 60%) *\u002F\n  --bg-secondary: #FAF1DE;       \u002F* Elevated card surfaces *\u002F\n  --bg-inverse: #2D4F1E;         \u002F* Deep bands: Final CTA, footer *\u002F\n  --text-primary: #2D4F1E;\n  --text-secondary: #4A4A4A;\n  --text-on-primary: #F5E6CC;    \u002F* Text on green\u002Fterracotta fills *\u002F\n  --text-success: #3E6B2E;\n  --text-error: #B3402A;\n  --border-default: rgba(45, 79, 30, 0.18);\n  --border-error: #B3402A;\n  --border-success: #3E6B2E;\n  \u002F* Shape & depth *\u002F\n  --radius-sm: 8px;\n  --radius-md: 14px;\n  --radius-lg: 24px;\n  --radius-organic: 255px 15px 225px 15px \u002F 15px 225px 15px 255px; \u002F* hand-drawn wobble — decorative shapes only *\u002F\n  --shadow-sm: 0 4px 14px rgba(74, 74, 74, 0.12);\n  --shadow-md: 0 10px 28px rgba(74, 74, 74, 0.18);\n  \u002F* Motion & space *\u002F\n  --spacing-gap: 1.5rem;\n  --transition-fast: 220ms;\n  --transition-normal: 280ms;\n  --ease-standard: cubic-bezier(0.25, 0.8, 0.25, 1);\n  \u002F* Elevation *\u002F\n  --z-dropdown: 100;\n  --z-modal: 1000;\n  --z-toast: 1100;\n  \u002F* Type *\u002F\n  --font-display: \"Fraunces\", serif;\n  --font-base: \"Nunito Sans\", sans-serif;\n}\n```\n\nDark mode overrides (suggested starting values — **verify WCAG AA before shipping**):\n\n```css\n.dark {\n  --bg-primary: #1E2419;        \u002F* deep forest floor *\u002F\n  --bg-secondary: #2A3122;\n  --bg-inverse: #F5E6CC;\n  --text-primary: #F2E8D5;\n  --text-secondary: #C7BFA6;\n  --primary: #8FB573;           \u002F* sage green for accents\u002Flinks on dark *\u002F\n  --accent: #E8906F;\n  --accent-strong: #E27D60;\n  --text-on-primary: #1E2419;   \u002F* primary buttons invert: cream fill, dark text *\u002F\n  --text-success: #9CCB7C;\n  --text-error: #F2927D;\n  --border-default: rgba(245, 230, 204, 0.16);\n  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.35);\n  --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.45);\n}\n```\n\n- **Contrast pairing is mandatory in every theme:** light background tokens pair with dark text tokens, dark background tokens with light text tokens. No theme may ship a `--bg-*` \u002F `--text-*` combination failing WCAG AA (4.5:1 body text, 3:1 large text\u002FUI components).\n- Never use pure `#ffffff`; where a near-white is required (e.g., text on `--accent-strong`), use `#FEFEFE`.\n- **Recycled-paper texture (signature effect):** apply to `body` (and to inverse bands with an inverted dot color):\n  `background-image: radial-gradient(rgba(74, 74, 74, 0.04) 1px, transparent 1px); background-size: 12px 12px;`\n  In dark mode, switch the dot color to `rgba(245, 230, 204, 0.05)`. The texture must remain subtle and never compete with content.\n\n### 1.3 Mandatory Dark Mode Support\n- Implement via a `.dark` class on `\u003Chtml>`, and respect `@media (prefers-color-scheme: dark)` for first-visit behavior.\n- **Persistence:** store the user's choice in `localStorage` (e.g., key `\"theme\"`); on load, apply the stored value, otherwise fall back to the OS preference. Apply the theme before first paint — no wrong-theme flash.\n- **Visible toggle:** a header button using Material Symbols (`light_mode` \u002F `dark_mode`), with `aria-pressed` reflecting the current state and a descriptive `aria-label` (e.g., \"Toggle dark mode\"). All color switching must happen purely through CSS variables — zero HTML restructuring.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n- Build all layout structures with Flexbox (`display: flex` \u002F Tailwind flex utilities).\n- **Every flex container defaults to `align-items: center`** unless an explicitly justified exception exists (e.g., stacked form fields use `stretch`).\n- **Mobile-first:** single-column stacks below 768px; multi-column layouts at ≥768px and ≥1024px. **No horizontal scrolling at any viewport from 320px up.**\n\n### 1.5 Framework Default & Tailwind CSS Integration\n- Use Tailwind CSS (Play CDN acceptable) plus a custom `style.css` driving all theming.\n- Reusable component classes (`.btn`, `.card`, `.input-group`, `.badge`, `.accordion`) must be defined once — via `@layer components` \u002F `@apply` or plain CSS — and map back to the CSS variables above. Utilities handle layout only; color, radius, and shadow identity always come from tokens.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n- Load **Google Fonts** in `\u003Chead>`: `Fraunces` (display\u002Fheadings — soft, botanical serif) and `Nunito Sans` (body). Bind to `--font-display` \u002F `--font-base`.\n- Icons: **Google Material Symbols (Rounded variant)** via the Google Fonts link. **Inline SVGs, local icon files, and emoji icons are forbidden.** Suggested set: `eco`, `recycling`, `spa`, `inventory_2`, `local_shipping`, `workspace_premium`, `format_quote`, `star`, `check_circle`, `expand_more`, `arrow_forward`, `light_mode`, `dark_mode`, `menu`, `close`, `arrow_upward`, `progress_activity` (spinner).\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Button Component Requirements\nStyle all states via CSS classes — `.btn` base plus variants `.btn--primary`, `.btn--accent`, `.btn--outline`, `.btn--ghost`, `.btn--danger`:\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px; font-weight 600.\n- **Variants:** `.btn--primary` = `--primary` fill + `--text-on-primary` text (inverts to cream fill\u002Fdark text in dark mode); `.btn--accent` = `--accent-strong` fill + `#FEFEFE` text (guaranteed AA) — reserve for the single key CTA per viewport; `.btn--outline` = transparent fill, `1px solid var(--border-default)`, `--primary` text.\n- **Hover:** brightness shift and\u002For `--shadow-sm`; `cursor: pointer`.\n- **Focus:** distinct ring — `outline: 2px solid var(--accent); outline-offset: 3px;` — clearly visible in both themes.\n- **Active\u002FPressed:** `transform: scale(0.97)`.\n- **Loading:** `.is-loading` class — disables pointer events (prevents double-clicks\u002Fdouble submits), swaps the label for a rotating `progress_activity` icon (CSS `@keyframes` spin), and preserves exact button dimensions.\n- **Disabled:** `opacity: 0.5; filter: grayscale(0.6); cursor: not-allowed;` with hover\u002Factive transforms removed.\n- **Success\u002FError:** transient `.is-success` \u002F `.is-error` states tinted by `--text-success` \u002F `--text-error`, announced through an `aria-live` region.\n- **`.btn--danger`** must be visually distinct in both light and dark themes.\n\n### 2.2 Card Component Requirements\nBase `.card`: `--bg-secondary` fill, `1px solid var(--border-default)`, `--radius-lg` (a gentle asymmetric variant is welcome for the handcrafted feel), `--shadow-sm`, internal flexbox layout.\n- **Hover (interactive cards — features, pricing):** `transform: translateY(-2px)` + `--shadow-md`, at `--transition-fast`.\n- **Focus-within:** border color shifts to `--primary` when a child link\u002Fbutton receives focus.\n- **Loading (Skeleton):** define a `.skeleton` shimmer (animated `linear-gradient` sweep) matching final card dimensions so any async content never causes layout shift.\n- **Empty State:** reusable fallback pattern — Material Symbol + clear guidance text.\n\n### 2.3 Form & Input Requirements\nUsed by the Final CTA email capture. Structure `.input-group` as a flex column: `\u003Clabel>` + `\u003Cinput>` + dedicated error-message container.\n- **States:** empty; focused (`outline: 2px solid var(--primary); outline-offset: 2px`); filled; **valid** (`--border-success` + `check_circle` icon); **invalid** (`--border-error`, error icon, message in `--text-error`); disabled; read-only.\n- Errors render in the dedicated container wired to `aria-live=\"polite\"` and `aria-describedby`. Never rely on color alone — always pair icon + text.\n- **Submit flow:** click → `.is-loading` on the button → simulated async → success feedback (icon swap + `aria-live` announcement). Validate email format client-side in `script.js`.\n\n### 2.4 FAQ Accordion & Mobile Menu (Disclosure\u002FOverlay Components)\n**FAQ accordion:**\n- Each item: `\u003Cbutton class=\"faq__trigger\" aria-expanded=\"false\" aria-controls=\"...\">` + panel. Animate open\u002Fclose via CSS (`grid-template-rows: 0fr → 1fr` or max-height) at `--transition-normal`.\n- Trigger shows the question plus an `expand_more` icon rotating 180° when open. Fully keyboard operable (Enter\u002FSpace); focus ring per 2.1. JS keeps `aria-expanded` accurate; only one open panel at a time is allowed.\n**Mobile menu (overlay):**\n- Full-screen overlay at `--z-modal`, centered flex container (`align-items: center`), dimmed backdrop, `close` icon button; closes on `Esc` and backdrop click; traps focus while open; restores focus to the hamburger on close. Hamburger carries `aria-expanded` + `aria-label`.\n- The sticky header itself stacks at `--z-dropdown`.\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid type via `clamp()`, fluid spacing, breakpoints at 768px\u002F1024px; verify zero horizontal overflow down to 320px.\n- **Smooth animations:** every state change transitions with `var(--transition-fast)` (220ms) or `var(--transition-normal)` (280ms) and `var(--ease-standard)`. Wrap all motion — floats, transforms, smooth scrolling — in `@media (prefers-reduced-motion: reduce)` to disable it.\n- **Scroll reveals:** sections fade\u002Frise in (`opacity`, `translateY(12px)`) via `IntersectionObserver` in `script.js`; disabled under reduced motion. Keep the motion calm and subtle — this is a warm, grounded brand, not a showy one.\n- **Accessibility (a11y):** WCAG AA contrast in both themes; semantic HTML5 landmarks (`header`, `nav`, `main`, `section[aria-labelledby]`, `footer`); a skip-to-content link; logical DOM\u002Ffocus order; full keyboard operability with no mouse-only interactions; `aria-live` regions for all dynamic feedback; never communicate state by color alone.\n- **Mandatory visual feedback:** every hover, click, toggle, and submission triggers a visible state change.\n- **Organic borders:** apply `--radius-organic` to decorative shapes (hero visual, illustration frames, badges); keep standard radii on inputs and dense UI for usability.\n- **Sticky header:** gains `--shadow-sm` and a solid background after scrolling past the hero (JS class toggle).\n- **Anchor navigation:** in-page links smooth-scroll (`scroll-behavior: smooth` + `scroll-margin-top` compensating the sticky header).\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **Files:** `index.html`, `style.css`, `script.js`, delivered complete in a single response. `\u003Chead>` may load Google Fonts, Material Symbols, and Tailwind via external links. The only script reference is `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` — **no inline `\u003Cscript>` blocks, no inline styles, no inline SVGs.**\n- **Naming convention:** BEM throughout (`block__element--modifier`), e.g., `.hero`, `.hero__title`, `.card--featured`. Never mix conventions.\n- **Copy:** all user-facing text in **English**, written as real, finished marketing copy for the sustainable packaging brand — lorem ipsum and placeholder strings are prohibited.\n- **Completeness:** theme toggle, accordion, mobile menu, form validation, scroll reveals, and all states in Section 2 must work on first delivery.\n\n## 5. PAGE BLUEPRINT — SECTION-BY-SECTION REQUIREMENTS\n\n### 5.1 Header (sticky)\nFlex row: brand wordmark + `eco` icon; nav links (Features, How It Works, Testimonials, Pricing, FAQ); theme toggle (per 1.3); `menu` hamburger below 768px. Translucent `--bg-primary` with `backdrop-filter: blur`.\n\n### 5.2 Hero\nTwo-column flex (stacks on mobile). **Left:** terracotta eyebrow badge (`eco` icon + \"Sustainable Packaging\"), H1 in `--font-display` (e.g., \"Packaging that returns to the earth.\"), subheadline in `--text-secondary`, CTA pair — `.btn--accent` \"Get a Quote\" + `.btn--outline` \"See How It Works\" — and a compact trust row (three mini-stats or certification chips). **Right:** a pure CSS\u002FHTML packaging mockup — layered organic-radius shapes suggesting a kraft box\u002Fpouch, a terracotta seal badge (`workspace_premium`), `recycling` icon accents, gentle floating animation (reduced-motion aware). Background: paper texture plus one soft, low-opacity radial green blob and one terracotta blob.\n\n### 5.3 Features — 3 cards\nSection header (eyebrow, H2, one-line intro) + responsive grid (1 → 3 columns). Cards per 2.2, each with a Material Symbol in a `--primary`-tinted icon chip, a title, and a 2–3 sentence description. Suggested angles: 100% compostable materials, handcrafted custom design, carbon-neutral delivery.\n\n### 5.4 How It Works — 3 steps\nHorizontal flex on desktop with a connecting line; vertical on mobile. Each step: terracotta number badge (01\u002F02\u002F03), Material Symbol (`design_services`, `precision_manufacturing`, `local_shipping`), step title, short supporting text.\n\n### 5.5 Testimonials\nThree cards: `format_quote` icon, five `star` icons in `--accent`, quote text, avatar as an initials circle (`--primary` fill, `--text-on-primary` initials — no external images), name + role\u002Fcompany. Write realistic English quotes.\n\n### 5.6 Pricing — 3 tiers\nGrid of `.card` variants: \"Seedling\" (starter), \"Grove\" (featured), \"Forest\" (enterprise). Featured card: `.card--featured` — terracotta \"Most Popular\" badge, emphasized border, slight elevation\u002Fscale. Each tier: name, price, feature list with `check_circle` icons, CTA (`.btn--outline` for side tiers, `.btn--accent` for the featured tier). Invent coherent English pricing.\n\n### 5.7 FAQ\n5–6 realistic questions (materials, compostability certifications, minimum order quantities, customization, shipping, returns). Accordion behavior per 2.4.\n\n### 5.8 Final CTA\nFull-bleed band on `--bg-inverse` (forest green in light mode; cream in dark mode — pair text tokens per the contrast rule in 1.2). H2 + supporting line + email capture form (per 2.3) with a `.btn--accent` submit and `aria-live` feedback.\n\n### 5.9 Footer\nOn `--bg-inverse` (or a slightly deeper band): brand block (wordmark, one-line mission, social\u002Ftext links), three secondary link columns (Company, Support, Legal — real, descriptive anchor labels linking to page sections where applicable), and a bottom bar with an auto-updated © year (via JS) and an `arrow_upward` back-to-top button that smooth-scrolls to the header.\n",1791954988154]