[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-720-NUMBERS-SOFTLY-a-wool-felt-calculator":3},"# BUILD BRIEF FOR CODING AI — Landing Page: \"NUMBERS, SOFTLY — a wool felt calculator\"\n\n**Your Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build the complete, production-ready landing page described in this document in a single attempt. Every rule below is mandatory. All user-facing copy must be authored in English, on-theme, and concrete — no lorem ipsum, no \"TODO\" filler.\n\n**Product narrative:** NUMBERS, SOFTLY is a web calculator whose interface feels like pressed wool felt — extruded soft keycaps, a warm cream surface, gentle ambient glow, a faint grain — rendered entirely in modern CSS Neumorphism (2020s Digital). The landing page sells that feeling.\n\n---\n\n## 1. Theme Identity & Visual Direction\n\n**1.1 Style Core:** Neumorphism (soft\u002Fextruded\u002Fpressed surfaces), wool-felt warmth, animated, gradient washes, grain overlay, CSS-Grid keypad, glow accents. Everything must look touchable and soft — never sharp, never flat.\n\n**1.2 Color Token Mapping (Light mode, in `:root`):**\n- `--primary: #8b8680` (wool gray — accents, focus rings, icon chips)\n- `--secondary: #98938c` (muted mid-tone — gradients, dividers)\n- `--text-primary: #3f3c38` (darkened wool-charcoal derived from `#767170` — REQUIRED to guarantee AA 4.5:1 body-text contrast on cream)\n- `--text-secondary: #767170` (secondary text; large sizes only if AA is verified)\n- `--bg-primary: #efe8d8` (felt cream — main page background; NEVER pure white)\n- `--bg-secondary: #e6ddcc` (deeper cream — alternating section bands, inset wells)\n- `--border-default: #d8cfc0` (hairlines, card edges)\n- `--bg-blush: #d8cfc0` and `--bg-felt: #a49e96` (gradient stops, glow layers)\n- `--text-success: #46694a` \u002F `--border-success` variant; `--text-error: #a1443a` \u002F `--border-error` variant (muted felted green \u002F clay red — must pass AA on cream; adjust if verification fails)\n- Where a near-white is needed anywhere, use `#fefefe`, never `#ffffff`.\n- **Contrast pairing law:** every light background token pairs with a dark text token, every dark background token pairs with a light text token — enforced in every theme, not just the default.\n\n**1.3 Neumorphic Shadow Tokens (the heart of this theme):**\n- `--neu-light: rgba(254, 254, 254, 0.9)` and `--neu-dark: rgba(118, 113, 112, 0.35)`\n- Raised (outset): `--shadow-out-sm: -4px -4px 10px var(--neu-light), 4px 4px 10px var(--neu-dark)`; `--shadow-out-md` at `-8px -8px 18px \u002F 8px 8px 18px`; `--shadow-out-lg` at `-12px -12px 28px \u002F 12px 12px 28px`\n- Pressed (inset): `--shadow-in-sm: inset 3px 3px 7px var(--neu-dark), inset -3px -3px 7px var(--neu-light)`; `--shadow-in-md` at `5px 5px 12px` equivalents\n- Also define generic `--shadow-sm` \u002F `--shadow-md` for standard elevation.\n- **Surface rule:** any element using neumorphic shadows must share the background color family of `--bg-primary` so the dual-shadow illusion reads correctly.\n\n**1.4 Glow, Gradients & Grain:**\n- **Glow:** soft radial-gradient layers built from `#d8cfc0`\u002F`#efe8d8` with `filter: blur(40px+)`, placed behind the hero calculator and around the featured pricing tier; animate with a slow opacity pulse (0.6 → 0.9). Use `mix-blend-mode` (multiply\u002Foverlay) and `isolation: isolate` on blend containers so text is never affected.\n- **Gradients:** page background = layered `linear-gradient` wash from `#efe8d8` toward `#e4dbc9` plus fixed warm radial washes; gradient-clipped headline text is allowed ONLY if AA contrast holds in both themes.\n- **Grain\u002FNoise:** pure-CSS noise only — layered `repeating-radial-gradient`\u002F`repeating-conic-gradient` at 2–3px scale as additional backgrounds on `body` (preferred, avoids stacking issues) or a fixed `body::after` overlay at `opacity: 0.04–0.08` with `pointer-events: none` and an optional slow position-shift keyframe. **Forbidden:** image assets, data-URI SVGs, inline SVGs for texture. Grain must never materially harm text contrast.\n\n**1.5 Typography & Icons (Google-only):**\n- Google Fonts via `\u003Clink>` + preconnect: **Quicksand** (500\u002F600\u002F700) for display\u002Fheadings → `--font-display`; **Nunito Sans** (400\u002F500\u002F600\u002F700) for body → `--font-base`.\n- Icons: **Google Material Symbols (Rounded variant) only** — no inline SVGs, no local icon fonts, no emoji. Expect to use: `calculate`, `touch_app`, `visibility`, `lock`, `arrow_forward`, `star`, `check`, `close`, `chevron`\u002F`expand_more`, `light_mode`, `dark_mode`, `add`, `remove`, `close`, `percent`, `backspace`, `equal`, `person`, `favorite`, `progress_activity`.\n- Calculator readout digits: `font-variant-numeric: tabular-nums`.\n\n**1.6 Shape & Motion Language:** Generous radii — `--radius-sm: 10px`, `--radius-md: 18px`, `--radius-lg: 28px`; pill (999px) allowed for primary CTAs. Easing: `--ease-standard: cubic-bezier(0.25, 0.8, 0.3, 1)` with `--transition-fast: 120ms`, `--transition-normal: 240ms`. Required keyframes: hero float, glow pulse, key press-flash, skeleton shimmer, scroll reveal fade-up — ALL ambient\u002Flooping keyframes wrapped in `@media (prefers-reduced-motion: no-preference)`.\n\n---\n\n## 2. Strict Rules & Architecture\n\n**2.1 CSS-First & Zero Inline CSS:** All styling lives in `style.css`. The `style=\"...\"` attribute is forbidden anywhere in the HTML. All design properties, layout rules, and states are targeted exclusively via class\u002FID selectors. HTML stays semantic, clean, and visually agnostic — restyling the site must require touching CSS only.\n\n**2.2 CSS Variable System:** All tokens in `:root` per §1.2–1.3, plus: `--spacing-gap: clamp(1rem, 2.5vw, 1.5rem)`, `--spacing-section: clamp(4rem, 10vw, 7rem)`, `--z-dropdown: 10`, `--z-modal: 50`, `--z-toast: 60` (plus `--z-header: 40` for the sticky bar). No hardcoded color or shadow values inside component rules — reference tokens.\n\n**2.3 Mandatory Dark Mode:**\n- Define dark tokens under BOTH `@media (prefers-color-scheme: dark)` and a `.dark` class on `\u003Chtml>` (class wins). Dark palette: warm charcoal family — `--bg-primary: #262220`, `--bg-secondary: #2d2825`, `--text-primary: #ece5d8`, `--text-secondary: #b3aca0`, `--border-default: #3d3630`, neumorphic shadows flip (`--neu-light: rgba(255,255,255,0.07)`, `--neu-dark: rgba(0,0,0,0.55)`), success\u002Ferror retuned for AA on charcoal. Include `\u003Cmeta name=\"color-scheme\" content=\"light dark\">`.\n- **Toggle:** visible theme toggle in the header (`light_mode`\u002F`dark_mode` Material Symbol) with correct `aria-pressed` and descriptive `aria-label`. Persist choice via `localStorage`, fall back to `prefers-color-scheme` on first visit. `script.js` must apply the stored theme as its very first action. Background\u002Ftext variables must swap seamlessly with zero HTML restructuring.\n- **Exception clause:** Although the source style designates Light mode as the sole intended presentation, the mandatory Dark Mode tokens and toggle above remain required; Light mode must be the default theme on first visit.\n\n**2.4 Layout Standards — Flexbox First, Grid Where Called For:**\n- Flexbox is the default container model; **every flex container must default to `align-items: center`** unless an exception is justified in a CSS comment.\n- CSS Grid (per the style spec) is required for: the hero calculator keypad (4 columns), feature cards (3-col), steps (3-col), testimonials (3-col), and pricing (3-col) — each collapsing to one column below 768px.\n- **Mobile-first:** base styles are single-column; scale up with `min-width` media queries. Fluid type via `clamp()`. No horizontal scrolling at any viewport from 320px to 1920px.\n\n**2.5 Framework Decision:** Clean, hand-authored custom CSS (no Tailwind) — the spec's technique list (blend modes, filters, keyframes, layered shadows) demands it. All components must be reusable generic classes (`.btn`, `.card`, `.input-group`, `.faq__item`, …) driven by CSS variables.\n\n**2.6 Naming Convention:** **BEM only** — `block__element--modifier` (e.g., `.hero__title`, `.feature-card__icon`, `.pricing__card--featured`, `.faq__question`, `.input-group__error`). Never mix conventions; no utility-class soup.\n\n---\n\n## 3. Component Design Specifications\n\n**3.1 Buttons (`.btn`, `.btn--primary`, `.btn--ghost`, `.btn--danger`):**\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px touch target; neumorphic raised (`--shadow-out-md`) on the surface family; pill radius for primary.\n- **Hover:** shadow deepens + `translateY(-1px)`, `cursor: pointer`; primary may gain a soft glow.\n- **Focus:** distinct `:focus-visible` ring (`outline: 2px solid var(--primary); outline-offset: 3px`) — visible on both cream and charcoal.\n- **Active\u002FPressed:** the keycap \"sinks into felt\" — swap to `--shadow-in-md` + `transform: scale(0.97)`.\n- **Loading (`.is-loading`):** `aria-busy=\"true\"`, interactions disabled to prevent double-clicks, spinner = rotating Material Symbol (`progress_activity`) or CSS ring — button dimensions must not change.\n- **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`, no hover effects.\n- **Success\u002FError (`.is-success` \u002F `.is-error`):** temporary feedback recoloring border\u002Ficon via `--text-success` \u002F `--text-error`, always paired with an icon or text — never color alone.\n- **`.btn--danger`:** clay-red treatment, visually distinct in both light and dark themes (defined even if unused on this page).\n\n**3.2 Cards (`.card` + variants):**\n- **Default:** raised neumorphic panel, background from the `--bg-primary` family, `--radius-lg`, padding via `--spacing-gap`, flexible flex\u002Fgrid interior.\n- **Hover (interactive):** `translateY(-2px)` + deepened shadow, `transition: var(--transition-normal)`.\n- **Focus-within:** border\u002Fglow highlight when a child link or button receives focus.\n- **Loading\u002FSkeleton:** `.skeleton` shimmer utility (gradient-sweep keyframe) sized to final layout to prevent jumps — define it and use it for any scroll-reveal placeholder.\n- **Empty State:** define the pattern — Google Icon + short heading + guidance text — as an exemplar usable in dynamic slots.\n\n**3.3 Forms & Inputs (`.input-group`, `.input`, `.input-group__error`):**\n- **Structure:** flex column wrapper containing a programmatically bound `\u003Clabel for>`, a neumorphic **inset** (pressed-well) input field, and a dedicated error feedback container with `aria-live=\"polite\"`.\n- **States, all via CSS:** empty, focused (outline ring), filled, valid (`.is-valid` — success border + check icon), invalid (`.is-error` — error border, icon, human-readable message; never color alone), disabled, read-only.\n\n**3.4 FAQ Accordion (`.faq__item`):**\n- Each item: `\u003Cbutton class=\"faq__question\" aria-expanded=\"false\" aria-controls=\"…\">` containing question text + chevron Material Symbol; answer inside a labeled region. CSS transitions height\u002Fopacity (grid-rows `0fr→1fr` or max-height) and rotates the chevron 180deg. Fully keyboard operable; JS updates `aria-expanded`; single-open-at-a-time behavior.\n\n**3.5 Modal\u002FOverlay (conditional — only if you introduce any overlay):** centered flex container (`align-items: center`), backdrop, Material Symbol close button, focus trapping, `Esc` + overlay-click close, animated opening\u002Fopen\u002Floading\u002Fsuccess-error\u002Fclosing states via CSS transitions, layered at `--z-modal`. Not required for this page otherwise.\n\n---\n\n## 4. Page Composition — Required Sections (in DOM Order)\n\n**4.0 Global Chrome:** Skip-link (\"Skip to content\") as first focusable element. Slim sticky header: wordmark \"NUMBERS, SOFTLY\" with a `calculate` icon chip, anchor nav (Features, How It Works, Testimonials, Pricing, FAQ), theme toggle (§2.3). Mobile: nav collapses to a labeled menu button (`aria-expanded`) revealing a flex-column panel — keyboard + Esc operable, layered at `--z-dropdown`\u002F`--z-header`.\n\n**4.1 Hero:** Two-column grid (copy | calculator), stacking below 768px. Copy: eyebrow, h1 (\"Numbers, softly.\"), one-sentence value proposition, primary CTA \"Start Calculating\" (`arrow_forward`) + secondary CTA \"See How It Works\" (anchor to §4.3). **Calculator mock:** a raised neumorphic panel with an inset display (tabular-nums readout) and a 4×5 CSS-Grid keypad of neumorphic keycap buttons (digits, `add`\u002F`remove`\u002F`close`\u002F`percent` operators, backspace, `equal`), every key ≥44px. This mock MUST be a functioning basic calculator (digits, + − × ÷, %, decimal, backspace, equals — safe logic, NO `eval`), with readout changes announced via `aria-live=\"polite\"`. Ambient glow behind the calculator (§1.4). Idle animation: gentle float on the calculator plus staggered \"press-flash\" keyframe pulses across keys (offset via `nth-child` animation-delays), all under `prefers-reduced-motion: no-preference`.\n\n**4.2 Features — 3 Cards:** Section heading + 3 `.card`s in a 3-col grid → 1-col. Suggested (write on-voice copy): tactile felt keycaps (`touch_app`), focus-first minimal interface (`visibility`), everything computed locally — privacy (`lock`). Each card: inset icon chip, title, two-line description. Hover lift + focus-within per §3.2.\n\n**4.3 How It Works — 3 Steps:** 3-col grid → stacked. Each step: oversized inset number disc (01 \u002F 02 \u002F 03), step title, one-liner — e.g., Press (keys sink like felt), Read (a warm, calm display), Done (results stay put). Connect steps with a soft dashed gradient line via pure CSS, hidden on mobile.\n\n**4.4 Testimonials:** 3 quote cards in a 3-col grid → 1-col: five `star` Material Symbols, quote, inset avatar chip (`person` icon) + fictional name + role. Optional scroll-reveal via IntersectionObserver adding `.is-visible` (fade-up transition, reduced-motion safe) — content must be fully visible without JS.\n\n**4.5 Pricing — 3 Tiers:** 3-col grid → 1-col. Tiers: \"Cotton\" (free), \"Wool\" (pro — highlighted), \"Merino\" (team). Featured tier: elevated (`translateY(-6px)` ≥768px), glow border, badge \"Most Loved\" (`favorite` icon + text — not color-only). Each tier: name, monthly price, 4–5 feature rows with `check` icons, CTA (middle `.btn--primary`, sides `.btn--ghost`) anchoring to the Final CTA.\n\n**4.6 FAQ:** 5–6 accordion items per §3.4 with on-theme questions (offline use, keyboard support, dark mode, data privacy, platform availability).\n\n**4.7 Final CTA:** Large raised neumorphic panel: headline, one-line subcopy, email capture form (§3.3) with a \"Get early access\" button. On submit: validate → button loading (§3.1) → success state, with an `aria-live=\"polite\"` inline confirmation (or inline validation errors). Simulated locally; no backend calls.\n\n**4.8 Footer:** Brand + one-line tagline; secondary link columns (Product, Company, Support); social icon buttons (Material Symbols, `aria-label`s, 44px targets); copyright with year (JS-updated with a static fallback present in HTML). Subtle top hairline, visible link focus states, text ≥14px.\n\n---\n\n## 5. Core UX & Micro-Interaction Rules\n\n- **Responsive by default:** fluid `clamp()` sizing, breakpoints without horizontal overflow, from 320px up.\n- **Smooth motion:** `transition: var(--transition-normal)` on all state changes; every ambient\u002Flooping keyframe guarded by `prefers-reduced-motion: no-preference`.\n- **Accessibility (a11y):** semantic HTML5 landmarks (`header`, `nav`, `main`, `section` with `aria-labelledby`, `footer`); strict heading hierarchy h1→h2→h3 with no skips; AA 4.5:1 text contrast in BOTH themes verified against cream and charcoal under the grain\u002Fglow overlays; state is never communicated by color alone; every interactive element is keyboard operable with visible focus in logical DOM order; `aria-live` regions for the calculator readout and all form feedback.\n- **Mandatory visual feedback:** every hover, click, keypress, and submission produces a visible state change.\n- **Destructive patterns:** `.btn--danger` visually distinct in both themes.\n- **Blend & filter safety:** blend containers isolated (`isolation: isolate`) so text and focus rings are never visually compromised.\n\n---\n\n## 6. Deliverable & Output Format\n\n- **Files:** `index.html`, `style.css`, `script.js` — nothing else. A single `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` reference; no inline `\u003Cscript>` blocks, no inline styles, no `style` attributes. HTML head includes viewport meta, `color-scheme` meta, title, and meta description.\n- **Naming:** BEM exclusively, per §2.6.\n- **Copy:** all user-facing copy authored in English, on-theme, concrete; placeholders only where content was genuinely unspecified.\n- **`script.js` scope (only):** theme init\u002Ftoggle + persistence + `aria-pressed`; mobile nav toggle; FAQ accordion ARIA + single-open; hero calculator logic (safe, no `eval`, `aria-live` readout); optional IntersectionObserver reveals; email form validation simulation + loading\u002Fsuccess\u002Ferror + `aria-live`; footer year. No libraries, no frameworks, nothing beyond this list.\n- **Definition of done:** opens correctly from `file:\u002F\u002F`; zero console errors; no horizontal scroll 320px→1920px; both themes toggle and persist; fully keyboard operable; reduced motion respected; all sections present in the order of §4.\n",1791954991621]