[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-737-AER-climate-dial":3},"# CODING AGENT PROMPT — \"AER — Climate Dial\" Neumorphic Landing Page (Full Build, First Attempt)\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Your task is to code the **complete, production-ready landing page described below in a single first attempt**. Every rule in this document is mandatory. Do not output partial code, do not ask clarifying questions, and do not skip states or sections.\n\n## 0. PROJECT BRIEF & ART DIRECTION\n\n* **Product:** AER — a smart climate control dial for the home. The brand identity is a physical-feeling, soft circular dial that lets users set their ideal indoor climate.\n* **Theme:** \"AER — climate dial\" — **Neumorphism (softneum)** with **gradients**, 2020s Digital aesthetic.\n* **Light\u002FDark:** Light-first aesthetic (see exception clause in 1.3).\n* **Keyword anchors:** softneum, dial, climate, neumorphism, gradient.\n* **Color Palette (source of truth):** Primary surfaces `#E8EEF2`, `#c3ccd4`, `#ffffff`; Secondary accents\u002Ftext `#4db8e8`, `#4a5a66`, `#8a99a5`.\n* **Visual Effects:** Neumorphism (dual box-shadow extrusion: light highlight top-left, dark shadow bottom-right, on a `#E8EEF2` canvas), soft gradients (`#4db8e8` blended into `#E8EEF2`\u002F`#c3ccd4`), CSS Filters, CSS Masks.\n* **Required CSS Techniques:** Flexbox, CSS Filters, Transitions, Transforms, Gradients, Box Shadows, Border Radius, CSS Masks.\n* **Sections (in this exact order):** Header\u002FNav → Hero → Features (3 cards) → How It Works (3 steps) → Testimonials → Pricing (3 tiers) → FAQ → Final CTA → Footer with secondary links.\n* **Copy:** Write all user-facing copy in **English**, as realistic product marketing copy for AER (no lorem ipsum).\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n* Keep **all** styling in a dedicated `style.css` file. **Explicitly forbidden:** the `style=\"...\"` attribute anywhere in the HTML.\n* Target all design properties, layout rules, and states via class or ID selectors only.\n* Keep the HTML semantic and styling-agnostic: changing the site's look must require editing only CSS, never markup.\n\n**1.2 CSS Variables (`var(--...)`) & Theme Tokens**\nStore every visual token in `:root` (and theme classes). Required tokens:\n\n* **Colors:** `--primary: #4db8e8`, `--secondary: #4a5a66`, `--bg-primary: #E8EEF2`, `--bg-secondary: #ffffff`, `--text-primary: #4a5a66`, `--text-secondary: #8a99a5`, plus `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.\n* **Accent Text Rule:** `#4db8e8` fails contrast on `#E8EEF2` for text. Define `--primary-strong` as a darker derived shade of `#4db8e8` (e.g., `#1f7fb0`) and use it for any accent-colored *text*, links, and focus rings. Reserve `#4db8e8` itself for non-text accents (dial arc, gradient fills, icon fills).\n* **Neumorphic Shadow Tokens:** `--neu-light: #ffffff` and `--neu-dark: #c3ccd4`, composed into `--shadow-neu-out` (e.g., `8px 8px 16px var(--neu-dark), -8px -8px 16px var(--neu-light)`), `--shadow-neu-in` (the inverted pair for pressed\u002Finset surfaces), and `--shadow-neu-flat`.\n* **Gradient Tokens:** `--gradient-accent` (a soft blend of `#4db8e8` toward `#E8EEF2`\u002F`#c3ccd4`) used for dial arcs, featured pricing borders, and Final CTA panel tinting — gradients must stay within the source palette.\n* **Contrast Pairing:** Every light background token pairs with a dark text token and every dark background token pairs with a light text token — enforce this in **all** themes, not only the default.\n* **Light Mode Background:** Never default to pure white; the canvas is `#E8EEF2`. Where a near-white surface is required, use `#fefefe`, never `#ffffff` as a page background (`#ffffff` is reserved for shadow highlights and card surfaces).\n* **Radius, Shadows, Motion, Depth:** `--radius-sm`, `--radius-md`, `--radius-lg` (use a generous `--radius-lg`\u002F`50%` on dial and pill shapes — softneum demands soft edges), `--shadow-sm`, `--shadow-md`, `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`, `--z-dropdown`, `--z-modal`, `--z-toast`.\n\n**1.3 Mandatory Dark Mode Support**\nDark Mode **must always be defined**, even though this theme is Light-first. **Exception clause:** the source spec requests a Light-primary aesthetic, so Light neumorphism is the default presentation — but a complete, high-contrast dark mode must still be shipped alongside it.\n* Define dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `\u003Chtml>`\u002F`\u003Cbody>`.\n* Dark neumorphism tokens: derive the dark canvas from the `#4a5a66` family (e.g., `--bg-primary: #232a30`), with `--neu-light` and `--neu-dark` redefined as lighter\u002Fdarker lifts of that canvas (e.g., `#2c343b` \u002F `#171c21`) so extrusions remain visible.\n* Theme switching must swap variables seamlessly with zero HTML restructuring.\n* Persist the user's choice via `localStorage`, falling back to `prefers-color-scheme` on first visit. Provide a **visible neumorphic toggle** in the header with correct `aria-pressed` and `aria-label` (\"Switch to dark mode\" \u002F \"Switch to light mode\"), containing a Google Material Symbols icon.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n* Build every layout structure with Flexbox.\n* **Every flex container must default to `align-items: center`** unless an explicitly justified exception is documented in a CSS comment.\n* Mobile-first: all rows (feature grid, pricing tiers, footer columns, hero content) collapse to columns on small viewports via breakpoints. **No horizontal scrolling at any viewport width.**\n\n**1.5 Framework Default & Tailwind CSS Integration**\n* Use Tailwind CSS as the utility base, with all theme-aware styling driven through `@layer` \u002F `@apply` and CSS variables.\n* Every repeated pattern must map to generic reusable classes — at minimum `.neu-card`, `.neu-btn`, `.neu-input`, `.neu-inset`, `.section`, `.container`, `.dial` — never one-off utility soup for component states.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* Load via `\u003Clink>`: **Sora** (display\u002Fheadings) and **Inter** (body), bound to `--font-display` and `--font-base`. Apply fluid sizing with `clamp()` for the hero headline.\n* Icons: **Google Material Symbols, Rounded variant** (`settings`, `thermostat`, `bolt`, `savings`, `arrow_forward`, `check_circle`, `expand_more`, etc.) — the rounded set matches the softneum aesthetic. **Explicitly forbidden:** raw inline SVGs and local icon files. **Exception clause for this project:** the hero climate dial graphic must also be constructed from pure CSS (divs, `conic-gradient`, `repeating-conic-gradient`, box-shadows, CSS masks) plus Material Symbols glyphs — no SVG anywhere on the page.\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component Requirements**\nStyle every state via CSS classes (`.btn`, `.btn--primary`, `.btn--ghost`, `.btn--danger`):\n\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px. Raised neumorphic look via `--shadow-neu-out`; the `.btn--primary` variant instead uses the `--gradient-accent` fill with white text.\n* **Hover:** subtle lift or shadow intensification plus a `filter: brightness()` shift; `cursor: pointer`.\n* **Focus:** distinct ring built from `--primary-strong` (`box-shadow` ring that does not collide with the neumorphic shadows) for keyboard navigation.\n* **Active\u002FPressed:** the signature neumorphic press — `box-shadow: var(--shadow-neu-in)` plus `transform: scale(0.97)`.\n* **Loading:** disable interactions, prevent double-clicks, render an animated Material Symbols glyph or CSS spinner **without changing button dimensions**.\n* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n* **Success\u002FError:** temporary feedback styles driven by `--text-success` \u002F `--text-error` (used on the Final CTA form submit).\n\n**2.2 Card Component Requirements**\nApply to Features cards, Testimonial cards, and Pricing tiers:\n\n* **Default:** flexible Flexbox layout, `--bg-secondary` surface sitting on the `--bg-primary` canvas, styled with `--shadow-neu-out` and a soft `--border-default`.\n* **Hover:** `transform: translateY(-2px)` with a shifted\u002Fdeepened shadow.\n* **Focus-within:** card borders highlight via `--primary` when a child link\u002Fbutton receives focus.\n* **Loading (Skeleton):** define a shimmer animation in CSS on `.neu-card--skeleton` that preserves final dimensions (no layout shift).\n* **Empty State:** a structured fallback with a Material Symbols icon inside a neumorphic inset circle and guidance text.\n* **Testimonials:** each card contains a quote, a star rating rendered with Material Symbols `star`\u002F`star_half` glyphs, and an avatar built as initials inside a `--gradient-accent` circle (no external images).\n* **Pricing tiers:** exactly 3; the middle tier is the featured one — larger padding, a `--gradient-accent` border or glow, and a \"Most Popular\" badge; each tier's CTA uses the button states from 2.1.\n\n**2.3 Form & Input Requirements**\nUsed for the Final CTA email signup:\n\n* **States:** empty, focused (neumorphic inset + `--primary-strong` ring), filled, valid (`--border-success` + `check_circle` icon), invalid (`--border-error`, `--text-error` message, `error` icon), disabled, read-only.\n* **Structure:** a flex container (default `align-items: center`) wrapping a `\u003Clabel>`, a neumorphic **inset** input (`--shadow-neu-in`) with an explicit `type=\"email\"`, and a dedicated error feedback element wired to `aria-live=\"polite\"` and `aria-describedby`.\n* The submit button must cycle through default → loading → success with visible feedback.\n\n**2.4 Accordion \u002F FAQ Requirements**\nThe FAQ is a custom widget and must never be mouse-only:\n\n* **Structure:** each item is a `\u003Cbutton aria-expanded=\"true|false\" aria-controls=\"faq-panel-n\">` heading plus a panel with `role=\"region\"` and matching `id`.\n* **States:** collapsed, hover, keyboard focus (ring per 2.1), open. Animate open\u002Fclose purely with CSS (e.g., `grid-template-rows: 0fr → 1fr` or `max-height` transition) using `var(--transition-normal)`.\n* **Interaction:** operable with `Enter`\u002F`Space`; the chevron (Material Symbols `expand_more`) rotates 180° via `transform`. Dynamic content changes announced politely.\n\n**2.5 Climate Dial (Hero Centerpiece)**\n* **Construction:** pure CSS — nested circular divs: outer raised ring (`--shadow-neu-out`), inner inset well (`--shadow-neu-in`), a progress arc drawn with `conic-gradient` from `--gradient-accent`, tick marks via `repeating-conic-gradient`, an arc fade using **CSS Masks**, and a needle rotated with `transform: rotate()`. A Material Symbols `thermostat` glyph and a numeric readout sit at the center.\n* **Interaction:** make the dial a functioning widget — pointer drag rotates the needle and updates a temperature readout; expose it as `role=\"slider\"` with `aria-valuemin=\"16\"`, `aria-valuemax=\"28\"`, `aria-valuenow`, `aria-label=\"Target temperature\"`, and full keyboard support (`ArrowUp`\u002F`ArrowDown`\u002F`ArrowLeft`\u002F`ArrowRight` adjust by 0.5°).\n* **Idle animation:** a slow, subtle rotation of the gradient arc. It **must** be disabled under `prefers-reduced-motion`.\n* All motion uses `var(--transition-normal)` and `var(--ease-standard)`; use CSS Filters (`drop-shadow`, slight `saturate()`) only where they don't harm performance.\n\n**2.6 Section-by-Section Requirements**\n1. **Header\u002FNav:** sticky, neumorphic bar, wordmark \"AER\", anchor links to each section, the theme toggle (1.3), and a primary CTA. On mobile, collapse links into a neumorphic icon button that opens a dropdown menu (`--z-dropdown`, `aria-expanded`, closable with `Esc`, managed focus).\n2. **Hero:** flex layout pairing headline + subheadline + dual CTAs (\"Get AER\", \"See it in action\" ghost button) with the interactive dial (2.5). Headline uses `--font-display` with fluid `clamp()` sizing.\n3. **Features:** exactly 3 neumorphic cards, each with an icon in an inset circle, title, and body copy (e.g., precision comfort, adaptive learning, energy insight).\n4. **How It Works:** exactly 3 steps with numbered neumorphic markers connected by a thin `--gradient-accent` line (implemented so it never causes overflow on mobile), each step with title + description.\n5. **Testimonials:** 3 cards per 2.2.\n6. **Pricing:** 3 tiers per 2.2, with a neumorphic segmented Monthly\u002FYearly toggle (`aria-pressed`, prices update via `script.js` from `data-` attributes, changes announced via `aria-live`).\n7. **FAQ:** 5–6 items in the accordion pattern defined in 2.4.\n8. **Final CTA:** a full-width panel tinted with `--gradient-accent` (masked so it fades softly), headline, and the email form per 2.3.\n9. **Footer:** brand block, secondary link columns (Product, Company, Support, Legal), social links as neumorphic icon-only buttons with accessible names, and a copyright line. All links must have real `href`s pointing to page anchors where possible.\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by default:** fluid sizing, standard breakpoints, zero horizontal overflow.\n* **Smooth animations:** every state change transitions with `var(--transition-normal)`; all ambient\u002Fhero animations respect `prefers-reduced-motion`.\n* **Accessibility (a11y):** maintain WCAG-level contrast in **both** modes. Because neumorphism communicates depth with low-contrast shadows, **never rely on shadow or elevation alone to communicate state** — pair every pressed\u002Factive\u002Finset state with a border, icon, or color shift. Text uses `--text-primary`\u002F`--text-secondary` (secondary only at sufficiently large sizes); accent text uses `--primary-strong`. Use semantic HTML5 (`header`, `nav`, `main`, `section`, `footer`), correct ARIA roles\u002Flabels on all custom widgets (dial, accordion, toggle, mobile menu), logical DOM\u002Ffocus order, full keyboard operability, and `aria-live` regions for dynamic feedback (form errors, pricing toggle, theme change).\n* **Mandatory visual feedback:** every click, hover, focus, and submission triggers a visible state change.\n* **Destructive actions:** any destructive or opt-out affordance uses a visually distinct `.btn--danger` \u002F error-styled treatment that remains distinct in both light and dark themes.\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n* **Files:** separate `index.html`, `style.css`, and `script.js`. No inline `\u003Cscript>` blocks beyond a single deferred `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` reference. No inline CSS anywhere.\n* **Naming convention:** BEM exclusively (`block__element--modifier`) for all custom classes across the entire deliverable — never mix conventions.\n* **Copy:** all user-facing copy in English, written as realistic AER marketing content — no lorem ipsum, and no placeholders for content that this brief has fully specified.\n* **Completeness:** the first output must be the full, runnable landing page covering every section, component state, and rule above — nothing deferred, nothing stubbed.\n",1791954992040]