[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-622-Zapier-Warm-Automation":3},"# SYSTEM PROMPT — BUILD THE \"ZAPPIER WARM AUTOMATION\" LANDING PAGE\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete, production-quality landing page on the first attempt. Theme: **\"Zapier Warm Automation\"** — a warm cream canvas like unbleached paper, Zapier Orange accents, border-forward structure, tab underlines, ultra-compressed display typography, and editorial serif moments. Era: 2024–2026 Warm Automation. All user-facing copy must be written in **English**.\n\n**Required sections, in 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* **No Inline CSS:** The `style=\"...\"` attribute is forbidden anywhere in the HTML.\n* **Class\u002FID Selectors Only:** Every design property, layout rule, and state lives in `style.css`, targeted via class or ID selectors.\n* **Minimal HTML Modifications:** Markup stays clean, semantic, and agnostic of visual styling — retheming the site must require editing only `style.css`, never the markup.\n\n### 1.2 CSS Variables & Theme Tokens\nAll visual tokens must be stored in `:root` (and the dark theme scope), exactly as defined below. You may extend, never rename:\n\n```css\n:root {\n  \u002F* Color — Zapier Warm Automation *\u002F\n  --primary: #ff4f00;          \u002F* Zapier Orange — primary CTAs, active tab underline *\u002F\n  --primary-strong: #d14300;   \u002F* darkened orange for small text\u002Flinks (WCAG AA) *\u002F\n  --primary-hover: #e64700;\n  --secondary: #c5c0b1;        \u002F* sand — secondary accent, dividers *\u002F\n  --bg-primary: #fffefb;        \u002F* warm cream canvas — never #ffffff *\u002F\n  --bg-secondary: #eceae3;      \u002F* light sand *\u002F\n  --bg-inverse: #201515;       \u002F* warm black — Final CTA section, dark buttons *\u002F\n  --text-primary: #201515;     \u002F* near-black with reddish warmth *\u002F\n  --text-secondary: #36342e;   \u002F* charcoal — functional muted copy *\u002F\n  --text-muted: #939084;       \u002F* warm gray — large\u002Fdecorative text only *\u002F\n  --text-inverse: #fffefb;     \u002F* cream text on dark surfaces *\u002F\n  --text-on-accent: #fffefb;   \u002F* label color on orange buttons *\u002F\n  --text-success: #1a7f37;\n  --text-error: #b3261e;\n  --border-default: #c5c0b1;   \u002F* sand — the primary structural element *\u002F\n  --border-strong: #201515;\n  --border-hover: #b5b2aa;     \u002F* mid warm *\u002F\n  --border-error: #b3261e;\n  --border-success: #1a7f37;\n\n  \u002F* Radius *\u002F\n  --radius-sm: 4px;   \u002F* orange primary CTA buttons *\u002F\n  --radius-md: 8px;   \u002F* dark\u002Fghost buttons, cards, inputs, accordion items *\u002F\n  --radius-lg: 20px;  \u002F* pills, badges, avatars, kicker chips *\u002F\n\n  \u002F* Shadow — minimal by design (border-forward theme) *\u002F\n  --shadow-sm: 0 1px 2px rgba(32, 21, 21, 0.05);\n  --shadow-md: 0 6px 16px rgba(32, 21, 21, 0.08);\n\n  \u002F* Spacing & motion *\u002F\n  --spacing-gap: 1.5rem;\n  --transition-fast: 120ms;\n  --transition-normal: 240ms;\n  --ease-standard: cubic-bezier(0.2, 0, 0, 1);\n\n  \u002F* Elevation\u002Fstacking *\u002F\n  --z-dropdown: 100;\n  --z-modal: 200;\n  --z-toast: 300;\n\n  \u002F* Type *\u002F\n  --font-display: 'Gabarito', 'Inter', sans-serif;    \u002F* Degular Display substitute *\u002F\n  --font-serif: 'Cormorant Garamond', Georgia, serif;  \u002F* GT Alpina substitute *\u002F\n  --font-base: 'Inter', sans-serif;\n}\n```\n\n* **Contrast Pairing:** Every light background token pairs with a dark text token and every dark background token with a light text token — enforced in both themes. Note: `--text-muted` (#939084) fails AA for body copy on cream; use it only for text ≥ 24px or decorative labels. Small orange text must use `--primary-strong`, never `--primary`.\n* **Light Mode Background:** The canvas is warm cream `#fffefb` (unbleached paper) — never pure white; where a near-white is required, use `#fefefe`.\n\n### 1.3 Mandatory Dark Mode Support\n* **Implementation:** Define a complete warm-dark token set under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `\u003Chtml>`: `--bg-primary: #201515; --bg-secondary: #2b2020; --text-primary: #fffefb; --text-secondary: #eceae3; --text-muted: #939084; --border-default: #4a3b38; --bg-inverse: #fffefb; --text-inverse: #201515;` keep `--primary: #ff4f00` (optionally brightened to `#ff5a0f` for contrast); shadows deepen to `rgba(0,0,0,0.4)`. No neutral grays — preserve the warm, reddish undertone.\n* **Theme Switching:** Background and text variables must flip seamlessly with zero HTML restructuring.\n* **Persistence:** Store the user's choice in `localStorage`; render a visible toggle (Material Symbol `light_mode`\u002F`dark_mode`) with correct `aria-pressed` and `aria-label` states.\n* **Exception clause:** The source style spec marks dark mode as \"Not Recommended\" — light mode is the canonical experience, so default to light on first visit (overriding `prefers-color-scheme` for the initial render), while still honoring any saved dark preference and delivering a fully styled warm-dark mode.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n* Build all layout structure with **Flexbox** (`display: flex` \u002F Tailwind flex utilities).\n* **Default Alignment Rule:** Every flex container defaults to `align-items: center` (`items-center`) unless an exception is explicitly justified (form control groups use `align-items: stretch`; stacked text sections may use `flex-start` where centering harms readability).\n* **Mobile-Friendly First:** Rows collapse to columns on small viewports; no horizontal scrolling at any width from 320px up; fluid `clamp()` sizing throughout.\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: `.btn`, `.card`, `.input-group`, `.tab`, `.accordion`.\n* Component classes are defined once in `@layer components` and reference only the tokens in 1.2 — no hard-coded hex values inside component rules.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n* **Text:** Load via Google Fonts `\u003Clink>` tags: **Gabarito** (400;500;600;700) bound to `--font-display`, **Inter** (400;500;600;700) bound to `--font-base`, **Cormorant Garamond** (300;400 + italic 300) bound to `--font-serif`.\n* **Exception clause:** The source spec names commercial fonts (Degular Display, GT Alpina) unavailable on Google Fonts — per the mandatory Google Fonts rule, use the approved substitutes above (Gabarito approximates Degular Display's rounded geometric warmth; Cormorant Garamond at weight 300 approximates GT Alpina's thin editorial serif). Do not hotlink or self-host font files.\n* **Icons:** Google Material Symbols (Outlined or Rounded) via the official stylesheet. Raw inline SVGs and local icon files are forbidden. Icons are `aria-hidden=\"true\"` when decorative.\n* **Display type discipline:** Hero and section headlines use `--font-display` at weight 500, `line-height: 0.90`, `letter-spacing: -0.01em`, sized `clamp(3rem, 5.5vw + 1rem, 5rem)` (48–80px). Editorial moments (testimonial quotes, serif accent lines) use `--font-serif` weight 300. All functional UI uses `--font-base`.\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Button Component (`.btn`)\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 20px 24px; font-family: var(--font-base); font-weight: 600;` minimum touch target 44×44px.\n* **Variants:** `.btn--primary` (bg `--primary`, color `--text-on-accent`, `border-radius: var(--radius-sm)`; label ≥ 1.1875rem\u002F19px at weight 600 so the orange\u002Fcream pair meets AA as large text); `.btn--dark` (bg `--bg-inverse`, color `--text-inverse`, `--radius-md`); `.btn--ghost` (transparent bg, `1px solid var(--border-default)`, `--radius-md`, color `--text-primary`; hover: border `--border-strong` + bg `--bg-secondary`).\n* **Hover:** brightness shift \u002F `--primary-hover` with `cursor: pointer`.\n* **Focus:** Distinct `:focus-visible` ring — `outline: 2px solid var(--primary); outline-offset: 2px;` — visible in both themes.\n* **Active\u002FPressed:** `transform: scale(0.97)`.\n* **Loading:** `.btn--loading` — disables interactions, prevents double-clicks, renders a CSS-only spinner (border spinner using `currentColor`) that replaces the label without changing button dimensions.\n* **Disabled:** `opacity: 0.5; filter: grayscale(1); cursor: not-allowed;`.\n* **Success\u002FError:** `.btn--success` \u002F `.btn--error` temporary feedback states driven by `--text-success` \u002F `--text-error` (used by the newsletter submit).\n* **Danger:** `.btn--danger` must remain visually distinct in both themes if used.\n\n### 2.2 Card Component (`.card`)\n* **Default:** Flexible flexbox layout, `background: var(--bg-primary)` or `var(--bg-secondary)`, `border: 1px solid var(--border-default); border-radius: var(--radius-md);` generous padding (24–32px). **Border-forward:** borders are the structural element — never rely on shadows for elevation.\n* **Hover (interactive cards):** `border-color: var(--primary)` or `--border-strong` + `transform: translateY(-2px)` + optional `--shadow-sm`.\n* **Focus-within:** Card border highlights when a child link\u002Fbutton receives focus.\n* **Loading (Skeleton):** Shimmer keyframe animation defined in CSS (sand-tinted gradient sweep) that preserves layout dimensions.\n* **Empty State:** Structured fallback (Material Symbol + clear guidance text) for any dynamic region that can render empty.\n\n### 2.3 Form & Input (`.input-group`)\n* **Structure:** Flex container wrapping a `\u003Clabel>`, the control, and a dedicated error feedback element (`\u003Cp class=\"input-group__error\">` with `aria-live=\"polite\"`). Justified exception: `align-items: stretch` (stacked label\u002Fcontrol).\n* **States — all styled via CSS:** Empty, Focused (`border-color: var(--primary)` + ring via `box-shadow: 0 0 0 3px rgba(255, 79, 0, 0.25)`), Filled, Valid (success border + `check` Material Symbol), Invalid (`aria-invalid=\"true\"`, error border, `--text-error` message, `error` icon), Disabled, Read-only.\n* Applied to the footer newsletter email capture with client-side validation and announced feedback.\n\n### 2.4 Accordion & Modal\n* **FAQ accordion:** Each item = `\u003Cbutton class=\"accordion__trigger\" aria-expanded=\"…\" aria-controls=\"…\">` + panel with `role=\"region\"` and `aria-labelledby`. Border-forward: `1px solid var(--border-default)` dividers between items. Chevron Material Symbol rotates 180° on open. Height animates via CSS (`grid-template-rows: 0fr → 1fr` or equivalent) with `var(--transition-normal)`. First item open by default; items toggle independently; fully keyboard operable.\n* **Modal (if any trigger opens one, e.g., a demo dialog):** States Opening, Open, Loading, Success\u002FError, Closing — all animated via CSS transitions. Centered flex container (`align-items: center`), backdrop `rgba(32, 21, 21, 0.55)` at `--z-modal`, Material Symbol `close` button, keyboard focus trapping, close via `Esc` and overlay click, `role=\"dialog\"` + `aria-modal=\"true\"`.\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by Default:** Fluid sizing and responsive breakpoints without horizontal overflow; verify 320px → 1440px.\n* **Smooth Animations:** `transition: var(--transition-normal) var(--ease-standard)` on all state changes; under `@media (prefers-reduced-motion: reduce)` disable transforms, shimmer, and auto-scrolling while keeping opacity changes.\n* **Tab Underline Signature:** Active tabs (nav links, billing toggle, any tab strips) use the exact inset technique from the spec — `box-shadow: rgb(255, 79, 0) 0px -4px 0px 0px inset;` — never `border-bottom`. Inactive tabs carry a transparent inset that transitions to orange on hover\u002Factive.\n* **Accessibility (a11y):** Semantic HTML5 landmarks (`header`, `nav`, `main`, `section` with `aria-labelledby`, `footer`); one `h1` with logical heading hierarchy; skip-to-content link; full keyboard operability; visible focus at all times; never color alone to communicate state (pair icons\u002Ftext with color); `aria-live` regions for dynamic feedback (form errors, newsletter success, price changes); AA contrast in both themes.\n* **Mandatory Visual Feedback:** Every click, hover, and submission triggers a visible state change.\n\n## 4. PAGE STRUCTURE & SECTION-BY-SECTION REQUIREMENTS\n\nInvent a warm-automation product brand (e.g., **\"Emberflow\"**). Write real, specific English copy about workflow automation — no lorem ipsum.\n\n* **4.1 Header (sticky):** Cream background with `1px solid var(--border-default)` bottom border; wordmark (orange `bolt` Material Symbol + display-font logotype); nav links (Features, How it works, Pricing, FAQ) using the tab-underline hover\u002Factive pattern; theme toggle; \"Start free\" `.btn--primary` (compact padding variant allowed, min 44px target). Mobile: `menu` icon toggles a flex-column panel (`aria-expanded`; closes on `Esc` and link click).\n* **4.2 Hero:** Kicker chip (`--radius-lg` pill, sand border, e.g., \"New — AI workflow builder\"); `h1` in `--font-display` weight 500, `line-height: 0.90`, 56–80px via clamp (e.g., \"Automate the busywork out of your work.\"); one editorial serif line (`--font-serif`, weight 300, italic) as a warm counterpoint; Inter sub-paragraph in `--text-secondary`; CTA pair: `.btn--primary` \"Start free\" + `.btn--dark` \"See how it works\" (anchor-scrolls to How It Works). Visual: a CSS-built workflow diagram — bordered mini-cards (Material Symbols: `mail`, `chat`, `table_chart`, `event`) connected by sand connector lines, plus a 3-item tab strip (\"Popular · New · Your apps\") demonstrating the inset box-shadow active underline. No external images. Trust row: \"Trusted by 3M+ teams\" + text-only company wordmarks in `--text-muted` at AA-safe sizes.\n* **4.3 Features (3 cards):** Section heading (display font) + serif intro line; three `.card--feature` in a responsive grid (3-up desktop → 1-up mobile): Material Symbol in a bordered square (`--radius-md`), title, 2–3 sentence copy, \"Learn more →\" link. Topics: multi-step workflows, AI-built automation, 7,000+ app integrations. Hover\u002Ffocus-within per 2.2.\n* **4.4 How It Works (3 steps):** \"Pick your apps\" → \"Set your trigger\" → \"Let it run\", each with an oversized display-font number (01\u002F02\u002F03 in `--primary`), Material Symbol, title, copy. Desktop: horizontal flex row joined by sand border connectors; mobile: stacked column with a vertical sand rule. Close with a serif editorial pull-quote.\n* **4.5 Testimonials:** Three `.card--testimonial`: quote in `--font-serif` weight 300 at ~1.375–1.5rem, initials avatar (`--radius-lg` circle, sand border, `--bg-secondary`), name + role in Inter. Border-forward cards; optionally one featured larger quote.\n* **4.6 Pricing (3 tiers):** Free, Professional (featured), Team. Featured card: `2px solid var(--primary)` border + \"Most popular\" pill badge (`--radius-lg`, orange bg, cream text). Billing toggle: Monthly\u002FAnnual as a two-item tab strip using the inset box-shadow active underline; switching updates prices via `data-*` attributes and announces the change in an `aria-live=\"polite\"` region. Each tier: display-font price, feature list with `check` Material Symbols, CTA (featured → `.btn--primary`; others → `.btn--dark` or `.btn--ghost`).\n* **4.7 FAQ:** 5–6 real questions (security, no-code setup, limits, cancellation, integrations) as an accessible accordion per 2.4, with sand border dividers and generous padding.\n* **4.8 Final CTA:** Full-bleed inverted section: `background: var(--bg-inverse)` (warm black), cream display headline (`line-height: 0.90`), serif accent line, one `.btn--primary` CTA + one ghost button with `1px solid var(--text-inverse)` border. Tokens swap automatically in dark mode — verify contrast both ways.\n* **4.9 Footer:** `--bg-secondary` background with sand top border. Columns: brand + tagline + newsletter `.input-group` (email input + `.btn--primary` submit demonstrating loading → success states with `aria-live` feedback); secondary link columns (Product, Company, Resources, Legal); social links as `--radius-lg` bordered circle buttons using Material Symbols or text labels (never inline SVG brand logos); copyright line.\n\n## 5. DELIVERABLE & OUTPUT FORMAT\n\n* **File Structure:** Separate `index.html`, `style.css`, and `script.js` — complete and runnable by opening `index.html`. No inline `\u003Cscript>` blocks beyond a single `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`.\n* **Head:** `\u003Chtml lang=\"en\">`, meta viewport, Google Fonts links (Gabarito, Inter, Cormorant Garamond), Material Symbols stylesheet.\n* **Naming Convention:** Strict BEM (`block__element--modifier`) across HTML, CSS, and JS — never mix conventions.\n* **JS Scope (`script.js`):** Theme toggle (localStorage, default light per 1.3 exception, `aria-pressed`), mobile nav, FAQ accordion, pricing billing toggle, newsletter fake-async submit with loading\u002Fsuccess\u002Ferror states, optional IntersectionObserver reveal animations (reduced-motion aware). No other behavioral code.\n* **No Unrequested Placeholders:** All copy is real, specific, English automation-product copy; placeholders only where content was genuinely unspecified.\n* **No External Images:** All visuals are CSS-built (borders, icons, type); avatars are initials.\n* **First-Attempt Completeness:** Ship the full page in one output — every section, every state, both themes.\n",1791954990024]