[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-450-Tenebrism":3},"## System Prompt: Tenebrism Landing Page — Build Specification\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready Landing Page on the first attempt, following every rule below. All user-facing copy must be written in English.\n\n---\n\n### 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n* All styling lives in a dedicated `style.css`. **Forbidden:** any `style=\"...\"` attribute in HTML.\n* All design properties, layout rules, and states must be targeted via class or ID selectors only.\n* HTML must remain semantic and clean; changing the theme must require editing only `style.css`.\n\n**1.2 CSS Variables & Theme Tokens**\nDefine in `:root` (light) and mirror under `@media (prefers-color-scheme: dark)` and a `.dark` class:\n\n* **Colors:** `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.\n* **Tenebrism palette mapping:** `--bg-primary: #050505` (Deep Black), `--primary: #F5D5A0` (Warm Spotlight), `--secondary: #B8860B` (Deep Gold), `--bg-secondary: #3A2A1A` (Rich Brown), `--text-primary: #FFF8E7` (Ivory Highlight), `--text-secondary: #F5D5A0`, accents: `#8B0000` (Blood Red), `#0D1B2A` (Midnight Blue), `#4A4A3A` (Warm Grey).\n* **Contrast pairing:** every light background token pairs with dark text and vice versa — enforced in both themes. Light mode must NOT use pure white; use `#fefefe` where near-white is required, tinted warm (`#FFF8E7`) where it fits the moody mood.\n* **Radius\u002Fshadows:** `--radius-sm`, `--radius-md`, `--radius-lg`, `--shadow-sm`, `--shadow-md`.\n* **Spacing\u002Ftransitions:** `--spacing-gap`, `--transition-fast`, `--transition-normal` (set to `800ms` for reveal animations), `--ease-standard`.\n* **Stacking:** `--z-dropdown`, `--z-modal`, `--z-toast`.\n\n**1.3 Mandatory Dark Mode**\n* Dark mode is the **default aesthetic** of this theme (deep black backgrounds, spotlight lighting). Still define a light-mode token set (warm ivory\u002Fivory-tinted backgrounds with dark brown text) and support switching.\n* Implement via `@media (prefers-color-scheme: dark)` **and** a `.dark` class; switching must not require HTML restructuring.\n* Persist choice in `localStorage`, fall back to `prefers-color-scheme` on first visit, and render a visible theme toggle with correct `aria-pressed` \u002F `aria-label`.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n* Build all layouts with Flexbox (`display: flex` \u002F Tailwind flex utilities).\n* Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment.\n* All layouts must be mobile-responsive (rows → columns on small viewports). No horizontal scrolling, ever.\n\n**1.5 Framework Default**\n* Use Tailwind CSS (or clean custom CSS via `@layer` \u002F `@apply`). All utilities map back to CSS variables or reusable generic classes (`.btn`, `.card`, `.input-group`).\n\n**1.6 Typography & Icons — Google Only**\n* Text: load **Cormorant** (serif, headings) and **Inter** (body) via Google Fonts `\u003Clink>`; bind to `--font-base` \u002F `--font-heading`.\n* Icons: **Google Material Symbols** only. No inline SVGs, no local icon files.\n\n---\n\n### 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Buttons**\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` min touch target 44×44px.\n* **Hover:** brightness\u002Fshadow shift, `cursor: pointer`.\n* **Focus:** distinct focus ring via CSS variables (`outline`\u002F`box-shadow`) for keyboard nav.\n* **Active:** `transform: scale(0.97)`.\n* **Loading:** disables interaction, prevents double-clicks, CSS spinner or animated Google Icon, no dimensional distortion.\n* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n* **Success\u002FError:** temporary feedback states driven by `--text-success` \u002F `--text-error`.\n* **Danger:** `.btn-danger` uses Blood Red `#8B0000`, visually distinct in both themes.\n\n**2.2 Cards (Features, Pricing tiers, Testimonials)**\n* **Default:** flexbox layout, `--bg-secondary` (Rich Brown `#3A2A1A`), `border: 1px solid rgba(184,134,11,0.3)` (gold-tinted), subtle elevation.\n* **Hover:** `transform: translateY(-2px)` plus a warm glow intensifying (spotlight brightens on the hovered card).\n* **Focus-within:** gold border highlight when a child link\u002Fbutton receives focus.\n* **Loading (skeleton):** shimmer animation defined in CSS, no layout jumps.\n* **Empty state:** Google Icon + guidance text fallback.\n\n**2.3 Forms (Newsletter signup in Footer\u002FFinal CTA)**\n* States: empty, focused (outline ring), filled, valid (success border\u002Ficon), invalid (error border, red text, error icon), disabled, read-only.\n* Structure: flex container wrapping label, input, dedicated error feedback container. Use `aria-live` for error messages.\n\n**2.4 Modal (FAQ answers may expand inline — if a modal is used for any detail view)**\n* States: opening, open, loading, success\u002Ferror, closing — all CSS transitions.\n* Centered flex container, backdrop overlay, Google Icon close button, keyboard focus trapping, closes via `Esc` and overlay click.\n\n---\n\n### 3. TENEBRISM VISUAL DIRECTION (Theme-Specific)\n\n* **Spotlight backgrounds:** `background: radial-gradient(ellipse at center, #3A2A1A, #050505 70%)` on hero and section backgrounds — content appears lit by a single dramatic light source.\n* **Vignette:** heavy vignette overlays via `box-shadow: inset 0 0 100px rgba(0,0,0,0.8)` on section containers and fixed overlay layers.\n* **Text from shadow:** `text-shadow: 0 0 40px rgba(245,213,160,0.3)` on headings; layered text-shadows for depth.\n* **Reveal animations:** content fades\u002Femerges from darkness with `transition: opacity 800ms` (`var(--transition-normal)`); use IntersectionObserver in `script.js` to add `.revealed` classes.\n* **Accents:** Blood Red `#8B0000` for destructive\u002Furgent elements; Deep Gold `#B8860B` for borders, links, and highlights; Midnight Blue `#0D1B2A` sparingly for depth layers.\n* **Borders:** `border: 1px solid rgba(184,134,11,0.3)` gold-tinted on cards and dividers.\n* Respect `prefers-reduced-motion`: disable reveal transforms, keep opacity fades instant.\n\n---\n\n### 4. REQUIRED SECTIONS (in order)\n\n1. **Hero** — full-viewport, radial spotlight gradient behind headline, Cormorant display heading emerging from shadow, primary CTA button, supporting subtext.\n2. **Features** — 3 cards in a responsive flex row (column on mobile), each with a Google Material Symbol icon, title, description.\n3. **How It Works** — 3 numbered steps with connecting visual flow (CSS-only connectors), spotlight-lit step markers.\n4. **Testimonials** — 3 quote cards, gold-bordered, attribution with warm spotlight text color.\n5. **Pricing** — 3 tiers; middle tier visually elevated (brighter spotlight, gold border, \"Featured\" badge). Include `.btn` and `.btn-danger`-styled cancel\u002Fdowngrade where relevant.\n6. **FAQ** — accordion built with semantic `\u003Cdetails>\u002F\u003Csummary>` or ARIA-compliant custom widget; keyboard operable; animated open\u002Fclose.\n7. **Final CTA** — dramatic centered spotlight section with primary action button.\n8. **Footer** — secondary links (About, Contact, Privacy, Terms), social icons (Google Material Symbols), newsletter input group with validation states, copyright.\n\n**Sticky navigation bar** at top with theme toggle, logo text in Cormorant, and anchor links — must remain readable over dark backgrounds (use `--z-dropdown` stacking).\n\n---\n\n### 5. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by default:** fluid sizing, breakpoints, zero horizontal overflow.\n* **Smooth animations:** `transition: var(--transition-normal)` on all state changes; respect `prefers-reduced-motion`.\n* **Accessibility:** sufficient contrast in both light and dark modes; never rely on color alone to communicate state; semantic HTML5; correct ARIA roles\u002Flabels on custom widgets; logical focus order; full keyboard operability; `aria-live` regions for form feedback and toasts.\n* **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.\n* **Destructive actions:** visually distinct in both themes.\n\n---\n\n### 6. DELIVERABLE & OUTPUT FORMAT\n\n* **Files:** separate `index.html`, `style.css`, `script.js`. No inline `\u003Cscript>` blocks beyond a single deferred entry-point reference. No inline CSS.\n* **Naming:** one consistent convention (BEM or a fixed utility set) across the entire deliverable — never mix.\n* **Copy:** write all real section copy, headings, feature descriptions, testimonials, pricing details, and FAQ answers in English. No lorem-ipsum where content was specified; placeholders only where genuinely unspecified.\n* **Fonts\u002FIcons:** Google Fonts (Cormorant + Inter) and Google Material Symbols via CDN links only.\n\nProduce the complete, working code now — first attempt, no clarifying questions.\n",1791954987292]