[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-764-VIGIL-a-quiet-memorial-of-candlelight":3},"# BUILD PROMPT — \"VIGIL — A Quiet Memorial of Candlelight\" Landing Page\n\n**Your role:** Senior Frontend Engineer & Expert UI Designer. Build the complete, production-grade landing page now, in one attempt, to the specification below. Output finished code only — no scaffolding, no TODOs, no partial output.\n\n---\n\n## 0. PROJECT BRIEF & ART DIRECTION\n\n**Theme:** VIGIL — a quiet memorial of candlelight\n**Style:** Glassmorphism, 2020s Digital\n**Mood keywords:** candle, vigil, glass, translucent, gradient, blur, hushed, reverent, luminous\n**Mandatory techniques:** Flexbox, Backdrop Filter, CSS Filters, Keyframe Animations, Transitions, Transforms, Gradients, Box Shadows, Border Radius\n**Mandatory effects:** Blur, Glass Effect, Gradients, Hover Effects\n**Palette (authoritative):** `#080609` (deep ink plum), `#c9bdc9` (pale lavender), `#0a070c` (ink), `#0d090f` (charred plum), `#120b0c` (dark plum), `#d8c8d8` (pale lilac)\n\n**Art direction:** Candles are rendered as *light, not objects* — soft radial glows in pale lavender, low-amplitude flicker keyframes, and slow drifting blurred orbs behind translucent glass panels. In Light mode, dark \"ink glass\" panes float over a lavender-mist gradient; in Dark mode, frosted lavender-tinted panes float over layered near-black plum. All motion is restrained: everything moves like a flame in still air.\n\n**Typography:** Google Fonts only — **Cormorant Garamond** for display\u002Fheadings (`--font-display`), **Inter** for body\u002FUI (`--font-base`).\n**Icons:** Google Material Symbols (Rounded) only, via `\u003Clink>` and `\u003Cspan class=\"material-symbols-rounded\">`. **Inline SVGs, icon fonts, and local icon files are forbidden.**\n**Copy:** Write ALL user-facing copy in **English** — finished, real copy in a hushed, warm, reverent voice (e.g., \"Light a candle. Hold a name in memory.\"). **No lorem ipsum.**\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* Every design property, layout rule, and state is applied via **class or ID selectors only**.\n* HTML stays semantic and presentation-agnostic — re-skinning the page must never require touching the markup.\n\n**1.2 CSS Variables (`var(--...)`) & Theme Tokens**\nDefine all tokens in `:root` (Light) and override under `.dark` and `@media (prefers-color-scheme: dark)`:\n* **Colors:** `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.\n* **Suggested values — Light (default):** `--bg-primary: #f1ecf2` (lavender mist; **never `#ffffff`** — use `#fefefe` where near-white is required), `--bg-secondary: #e6dee7`, `--text-primary: #080609`, `--text-secondary: rgba(18,11,12,0.68)`, `--primary: #080609` (button ink), `--secondary: #c9bdc9`.\n* **Suggested values — Dark:** `--bg-primary: #0a070c`, `--bg-secondary: #120b0c` (elevated surfaces, `#0d090f` for depth layers), `--text-primary: #d8c8d8`, `--text-secondary: rgba(201,189,201,0.72)`, `--primary: #c9bdc9` (button), `--secondary: #c9bdc9`.\n* **Glass tokens:** `--glass-bg` (Light: `rgba(254,254,254,0.38)` \u002F Dark: `rgba(201,189,201,0.07)`), `--glass-border` (Light: `rgba(8,6,9,0.10)` \u002F Dark: `rgba(216,200,216,0.14)`), `--glass-blur: 18px`, `--glow` (pale lavender flame-glow radial).\n* **Contrast pairing:** every light background token pairs with dark text, every dark background token pairs with light text — enforced in **both** themes (WCAG AA minimum).\n* **Shape, depth, motion, stacking:** `--radius-sm\u002Fmd\u002Flg`, `--shadow-sm\u002Fmd`, plus `--glow-shadow` for candlelight; `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`; `--z-dropdown`, `--z-modal`, `--z-toast`.\n\n**1.3 Mandatory Dark Mode Support**\n* Dark mode **must always be fully defined** under `.dark` **and** `@media (prefers-color-scheme: dark)`; switching swaps CSS variables only, with zero HTML restructuring.\n* Provide a visible theme toggle (Material Symbols `dark_mode` \u002F `light_mode`) with correct `aria-pressed` and `aria-label`.\n* Persist the user's choice in `localStorage`; initialization order: saved choice → `prefers-color-scheme` → Light.\n* **Exception clause:** Per the design spec, Light mode is this theme's designated primary presentation — it is the default showcase and must be fully art-directed; Dark mode nonetheless ships with equal completeness per this rule.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n* Build all layout structure with **Flexbox** (`display: flex` \u002F Tailwind flex utilities). CSS Grid is permitted only for pricing\u002Ftestimonial card rows if documented.\n* Every flex container **must default to `align-items: center`** unless an exception is explicitly justified in a code comment (e.g., `.input-group` label stacking, footer link columns using stretch).\n* Mobile-first: single-column base, rows scale up at breakpoints; **zero horizontal scrolling** from 320px up.\n\n**1.5 Framework Default & Tailwind CSS Integration**\n* Use **Tailwind CSS (Play CDN)** configured with the tokens above for layout\u002Futilities; the visual identity — glass, glow, gradients, keyframes, component states — lives in `style.css` as BEM component classes.\n* All utilities must resolve to CSS variables — **no hardcoded hex values outside `:root`\u002F`.dark` token definitions**.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* Include Google Fonts `\u003Clink>` tags; bind `--font-base: 'Inter'` and `--font-display: 'Cormorant Garamond'`.\n* Use Google Material Symbols (Rounded) exclusively for all iconography.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component**\n* **Default:** `.btn` — `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px touch target, Inter font, transition on all state changes. Variants: `.btn--primary` (ink\u002Fpale-lavender pairing per theme), `.btn--ghost` (glass variant), `.btn--danger` (e.g., \"Extinguish\") — visually distinct in **both** themes.\n* **Hover:** brightness\u002Fsoft candle-glow shadow shift, `cursor: pointer`.\n* **Focus:** distinct focus ring via `outline`\u002F`box-shadow` using CSS variables — keyboard navigable.\n* **Active\u002FPressed:** `transform: scale(0.97)`.\n* **Loading:** `.is-loading` — disables interaction (prevents double-clicks, `aria-busy=\"true\"`), renders an animated Material icon (`hourglass_empty` rotation) or CSS spinner **without changing button dimensions**.\n* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n* **Success\u002FError:** temporary state classes driven by `--text-success` \u002F `--text-error`.\n\n**2.2 Card Component (`.card` + `.glass`)**\n* **Default:** flexbox layout, `background: var(--glass-bg)`, `backdrop-filter: blur(var(--glass-blur))` + `-webkit-backdrop-filter`, 1px `var(--border-default)`, `border-radius: var(--radius-lg)`, `box-shadow: var(--shadow-sm)`. Provide a solid fallback background inside `@supports not (backdrop-filter: blur(1px))`.\n* **Hover:** `transform: translateY(-2px)` lift with shadow\u002Fglow shift.\n* **Focus-within:** border highlights when a child link\u002Fbutton receives focus.\n* **Loading (skeleton):** shimmer keyframe (gradient sweep) with reserved dimensions — no layout shift.\n* **Empty state:** `.card--empty` fallback layout with a Google icon and clear guidance text.\n\n**2.3 Form & Input Requirements**\n* `.input-group` is a flex **column** (documented exception to centering default) wrapping: `\u003Clabel>`, input field, and a **dedicated error-feedback container**.\n* Style all states via classes: empty, focused (outline ring using `--glow`), filled, valid (`--border-success` + check icon), invalid (`--border-error`, error icon, error text), disabled, read-only.\n* Error\u002Fsuccess messages must be announced through an `aria-live=\"polite\"` region.\n\n**2.4 Modal \u002F Popup Requirements**\n* The FAQ must use an accessible **inline accordion, not a modal** (see 4.7). If any overlay is introduced anyway (e.g., a pricing detail dialog): states for opening\u002Fopen\u002Floading\u002Fsuccess\u002Ferror\u002Fclosing all animated via CSS transitions; centered flex container (`align-items: center`); backdrop overlay; Material icon close button; keyboard focus trapping; close via `Esc` and overlay click; `role=\"dialog\"` + `aria-modal=\"true\"`.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by default:** fluid type via `clamp()`, Tailwind breakpoints, no horizontal overflow at any width.\n* **Smooth animations:** transitions on all state changes (`transition: var(--transition-normal)`); keyframes for candle flicker (subtle, irregular multi-step opacity\u002Fscale oscillation ~3–5% amplitude), drifting ambient orbs (2–4 large blurred gradient orbs, 20–40s loops, low opacity, `filter: blur()` or pre-blurred radial gradients), skeleton shimmer, and section reveals.\n* **Reduced motion:** wrap all motion in `@media (prefers-reduced-motion: reduce)` — disable drift\u002Fflicker, reduce reveals to opacity fades.\n* **Accessibility:** WCAG AA contrast in both Light and Dark modes; never rely on color alone — pair every state with an icon or text; semantic HTML5 (`header`, `nav`, `main`, `section`, `article`, `footer`); correct ARIA roles\u002Flabels on custom widgets; logical DOM\u002Ffocus order; **full keyboard operability**; `aria-live` regions for dynamic feedback (form results, FAQ optional).\n* **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.\n* **Scroll reveals:** sections\u002Fcards fade-up on entry via `IntersectionObserver` toggling a class; CSS handles the transition.\n\n---\n\n## 4. SECTION-BY-SECTION BUILD SPECIFICATION\n\n**4.1 Navigation:** Sticky glass navbar (`backdrop-filter` blur, `--glass-bg`), wordmark \"VIGIL\" in Cormorant Garamond, anchor links to every section, theme toggle, primary CTA. On mobile it collapses to a column behind a hamburger control (`aria-expanded`, keyboard operable, closes on link click and `Esc`).\n\n**4.2 Hero:** Full-viewport (`min-height`), layered radial + linear gradients using the palette; a pale lavender candle-glow radial that gently flickers (pure CSS — no images); display headline in Cormorant Garamond, subcopy in Inter, two CTAs (`Light a Candle` primary; `Learn More` ghost that smooth-scrolls to How It Works); a subtle scroll cue.\n\n**4.3 Features (3 glass cards):** e.g., *Light a Candle*, *Share a Memory*, *Keep the Vigil* — each with a Material icon inside a frosted circle, serif card title, body copy, and a learn-more link. Flex row on desktop, column on mobile; staggered reveal.\n\n**4.4 How It Works (3 steps):** Steps 01\u002F02\u002F03 in oversized serif figures (e.g., *Dedicate → Share → Remember*); horizontal flex row with connector lines on desktop (CSS `::before` gradient rules — no extra markup), vertical timeline on mobile.\n\n**4.5 Testimonials:** 3 glass quote cards — serif italic quotation, attribution with **initials monogram** inside a frosted circle (no photos, no external images anywhere in the build), and a relationship line (\"Daughter of Margaret\", etc.). Hover lift per 2.2.\n\n**4.6 Pricing (3 tiers):** e.g., *Single Flame* (free), *Vigil Keeper* (featured), *Eternal Light* — featured middle tier elevated with border glow, slight scale on desktop, and a \"Most Cherished\" badge; feature lists with Material `check` icons; distinct CTA variants (primary on featured, ghost on others). All pricing buttons implement full button states per 2.1.\n\n**4.7 FAQ:** 4–6 questions as an accessible accordion — `\u003Cbutton aria-expanded aria-controls>` + panel (`role=\"region\"`, `aria-labelledby`), animated open\u002Fclose via CSS transition (grid-rows or max-height), Material `expand_more` icon rotating with state, operable via keyboard (Enter\u002FSpace).\n\n**4.8 Final CTA:** Full-width glass banner with a breathing candle glow; email `.input-group` with full validation states per 2.3 and client-side validation; submit button transitions Default → Loading → Success (\"A candle has been lit.\") or Error, all announced in an `aria-live` region; never lose user input on failure.\n\n**4.9 Footer with secondary links:** Brand + one-line mission, grouped secondary links (Product, Company, Support, Legal), social links as Material icons with `aria-label`s, copyright small print, optional back-to-top anchor. All links are meaningful anchors — no dead `#` stubs without labels.\n\n---\n\n## 5. DELIVERABLE & OUTPUT FORMAT\n\n* **Files:** `index.html`, `style.css`, `script.js` — fully separated. No inline CSS; no inline `\u003Cscript>` blocks beyond a single deferred `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` entry point.\n* **Naming:** BEM throughout (`.card`, `card__title`, `card--featured`) — never mix conventions.\n* **`script.js` scope (vanilla JS only):** theme toggle + `localStorage` persistence, mobile nav, `IntersectionObserver` reveals, FAQ accordion, email validation + button state machine, smooth anchor scrolling.\n* **Placeholders:** none — all copy is final, real, English text in the vigil voice; content is unspecified only where the brief left it open, and there you author it.\n* **Pre-delivery verification:** no horizontal scroll at 320px+, both themes pass WCAG AA, every interactive element keyboard reachable, `prefers-reduced-motion` respected, no console errors, no external images.\n\nOutput the complete contents of `index.html`, `style.css`, and `script.js` now.\n",1791954992516]