[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-451-Gothic":3},"You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready **Gothic-themed landing page** in a single attempt. Atmosphere: dark, mysterious, cathedral-inspired grandeur — obsidian black, blood red, stone grey, bone white, pointed arches, intricate tracery, fog, eerie glow. Required sections: **Sticky Header\u002FNav, Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.** All user-facing copy must be written in English.\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**, including inside SVG elements.\n- Target everything via class\u002FID selectors only. HTML must remain semantic and style-agnostic — restyling the site must never require touching markup.\n- Decorative SVGs may carry structural\u002Fpresentation attributes (`viewBox`, `fill`, `stroke`) as artwork data, but all interactive or state-driven styling (hover glow, color shifts) must target them via CSS classes.\n\n**1.2 CSS Variables & Theme Tokens**\nStore every visual token in `:root` and bind all components to them:\n\n```css\n:root {\n  \u002F* Palette — Obsidian \u002F Blood \u002F Stone \u002F Bone *\u002F\n  --primary: #8B0000;         \u002F* Blood Red — fills, key accents *\u002F\n  --primary-hover: #A81818;\n  --secondary: #8B7355;       \u002F* Tarnished Gold — accents, focus rings *\u002F\n  --bg-primary: #0B0B0B;      \u002F* Obsidian Black *\u002F\n  --bg-secondary: #1A0A1A;    \u002F* Deep purple-black (fog gradient endpoint) *\u002F\n  --bg-elevated: #141014;     \u002F* Card surfaces *\u002F\n  --bg-accent: #2D0A3E;       \u002F* Deep Purple — featured tier \u002F band tint *\u002F\n  --bg-alt: #0D1B2A;          \u002F* Midnight Blue — alternating section band *\u002F\n  --text-primary: #E8E0D0;    \u002F* Bone White *\u002F\n  --text-secondary: #A8A08C;   \u002F* Aged bone — passes 4.5:1 on obsidian *\u002F\n  --text-success: #8FA876;    \u002F* Lightened Moss (base #4A5A3A = borders only) *\u002F\n  --text-error: #C65656;     \u002F* Lightened Blood Red for text (base #8B0000 = fills only) *\u002F\n  --border-default: #5A5A5A;  \u002F* Stone Grey — borders, ornaments. NEVER body text (fails contrast) *\u002F\n  --border-error: #8B0000;\n  --border-success: #6E7F55;\n  --font-display: 'UnifrakturMaguntia', serif;  \u002F* Blackletter — headings ONLY *\u002F\n  --font-base: 'Cinzel', serif;\n  --radius-sm: 0; --radius-md: 2px; --radius-lg: 4px;  \u002F* Gothic = sharp; shape comes from clip-path, not rounding *\u002F\n  --shadow-sm: 0 2px 8px rgba(0,0,0,.6);\n  --shadow-md: 0 8px 24px rgba(0,0,0,.7);\n  --glow-red: 0 0 30px rgba(139,0,0,.2);\n  --glow-red-strong: 0 0 42px rgba(139,0,0,.45);\n  --glow-text: 0 0 10px rgba(139,0,0,.3);  \u002F* Display headings only — never body text *\u002F\n  --spacing-gap: 1.5rem;\n  --transition-fast: 300ms ease;\n  --transition-normal: 600ms ease;  \u002F* Dramatic gothic pacing *\u002F\n  --ease-standard: ease;\n  --z-dropdown: 100; --z-modal: 200; --z-toast: 300;\n}\n```\n\n- **Contrast pairing is mandatory:** every dark background pairs with Bone White text; every light\u002Fparchment surface pairs with Obsidian text. Blood Red fills always pair with Bone White text (≈7.7:1). Verify pairing in both themes.\n- Light surfaces must never be `#ffffff`; use `#fefefe` if a near-white is unavoidable, otherwise parchment `#E8E0D0`.\n- **clip-path gotcha:** `clip-path` clips `box-shadow`. Apply eerie glows on clipped arch elements via `filter: drop-shadow(...)` or an unclipped wrapper element.\n- Cathedral window frames: since clip-path also clips real borders, build arch-following borders with **two nested clipped elements** (outer element filled with Stone Grey, inner panel inset ~3px filled with the surface color, same polygon).\n\n**1.3 Mandatory Dark Mode Support (Dark-First Theme)**\n- Gothic is a full-dark theme: the dark palette above is the **canonical default** in `:root`. Mirror the same tokens under a `.dark` class and `@media (prefers-color-scheme: dark)` so dark applies regardless of OS setting.\n- Provide a **visible toggle in the header** using Material Symbols (`dark_mode`\u002F`light_mode`) with correct `aria-pressed` and `aria-label`. Persist choice via `localStorage`; fall back to `prefers-color-scheme` on first visit. Switching themes must swap variables only — no HTML restructuring.\n- The alternate \"Candlelit\" light theme: parchment `#E8E0D0` backgrounds, Obsidian `#0B0B0B` text, Blood Red and Tarnished Gold accents preserved, fog\u002Fglow softened — all contrast-paired, never pure white.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- Build every layout container with Flexbox. Every flex container defaults to `align-items: center` unless an exception is explicitly justified (e.g., form `.input-group` uses `flex-direction: column; align-items: stretch` so inputs fill width).\n- Mobile-first: multi-column rows (features, steps, testimonials, pricing) collapse to a single column below ~768px. **No horizontal scrolling at any viewport** — contain fog layers inside their sections and never animate elements past viewport bounds.\n\n**1.5 Framework Default & Tailwind CSS Integration**\n- Use Tailwind CSS for layout\u002Fspacing utilities; define all themed components as reusable classes (`.btn`, `.card`, `.input-group`, `.arch-frame`) in `@layer components` via `@apply` or raw CSS bound to the tokens above. Utility classes must never hardcode hex values — everything maps back to CSS variables.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Load **UnifrakturMaguntia** (blackletter display) and **Cinzel** (serif body) via Google Fonts `\u003Clink>` in `\u003Chead>`; bind to `--font-display` and `--font-base`.\n- Blackletter is decorative and illegible at small sizes: use it **only** for the hero `\u003Ch1>` and section `\u003Ch2>`s. Body copy, navigation, buttons, labels, and inputs use Cinzel (letter-spacing \u002F small-caps for eyebrows and nav links).\n- UI icons: **Google Material Symbols exclusively** — thematic choices include `church`, `castle`, `shield`, `key`, `auto_stories`, `nights_stay`, `candlelight`, `skull`, `expand_more`, `check`. No other icon fonts.\n- **Exception clause:** raw inline SVGs remain forbidden for UI icons, but decorative architectural artwork — tracery patterns and gargoyle\u002Fornament figures — is the single permitted inline-SVG exception; prefer tracery as CSS `background-image` SVG data-URIs so the HTML stays clean, and never place `style=\"...\"` on any SVG.\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component**\nAll states via CSS classes; base: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px touch target, Cinzel uppercase, sharp corners, 2px solid border.\n- **Variants:** `.btn--primary` (Blood Red fill, Bone White text), `.btn--ghost` (transparent, Stone Grey border → Tarnished Gold border on hover), `.btn--danger` (visually distinct in both themes).\n- **Hover:** brightness shift + `--glow-red`, `cursor: pointer`.\n- **Focus-visible:** distinct 2px Tarnished Gold ring with offset for keyboard navigation.\n- **Active:** `transform: scale(0.97)`.\n- **Loading:** `aria-busy=\"true\"`, interactions blocked (no double submits), CSS spinner that does not change button dimensions.\n- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n- **Success\u002FError:** temporary feedback styles driven by `--text-success` \u002F `--text-error`.\n\n**2.2 Card Component**\n- **Default:** `.card` — `--bg-elevated` surface, 2px Stone Grey border, sharp corners, flex column, centered content.\n- **Arch variant:** `.card--arch` — pointed-arch silhouette via `clip-path: polygon()`. Starting value (refine as needed, it scales by percentage):\n  `clip-path: polygon(50% 0%, 60% 2%, 70% 5%, 79% 10%, 87% 16%, 93% 24%, 97% 33%, 100% 42%, 100% 100%, 0% 100%, 0% 42%, 3% 33%, 7% 24%, 13% 16%, 21% 10%, 30% 5%, 40% 2%)`\n- **Hover:** `transform: translateY(-2px)` + eerie glow (`drop-shadow` on clipped elements).\n- **Focus-within:** border shifts to Tarnished Gold when a child link\u002Fbutton receives focus.\n- **Loading:** `.card--skeleton` shimmer animation defined in CSS; no layout jumps.\n- **Empty state:** structured fallback with a Material Symbol icon and guidance text.\n\n**2.3 Form & Input Requirements**\n- `.input-group`: flex column (`align-items: stretch` — justified exception) wrapping label, input, and a dedicated error container with `aria-live=\"polite\"`.\n- **States:** empty, focused (Tarnished Gold ring), filled, valid (moss border + Material check icon), invalid (blood border, `--text-error` message + error icon — never color alone), disabled, read-only.\n- Used for the Final CTA email capture: validate on submit, show inline errors, then a success state with confirmation copy.\n\n**2.4 Accordion (FAQ)**\nEach item: `\u003Cbutton aria-expanded aria-controls>` header + panel region; Material `expand_more` icon rotating over `var(--transition-normal)`; fully keyboard operable; smooth height transition; state never communicated by color alone.\n\n**2.5 Modal \u002F Popup (if any confirmation dialog is used, e.g., plan selection)**\nCentered flex overlay (`align-items: center`), backdrop, Material Symbol close button, close via `Esc` and overlay click, keyboard focus trap, animated open\u002Fclose (600ms), loading and success\u002Ferror states, `z-index: var(--z-modal)`.\n\n**2.6 Page Section Blueprint (Gothic Landing Page)**\n1. **Header (sticky):** Obsidian bar, subtle Stone Grey bottom border with a thin tracery strip; brand name in blackletter; anchor links in Cinzel with gold underline on hover\u002Ffocus; theme toggle; mobile hamburger (`aria-expanded`, animated dropdown panel, `--z-dropdown`). Add `scroll-margin-top` to sections for anchor offset.\n2. **Hero:** ~100vh; background fog = `linear-gradient(to bottom, #0B0B0B, #1A0A1A)` plus layered radial-gradient fog pseudo-elements with a slow drift animation; cathedral window frame (nested clipped elements) wrapping the headline; blackletter `\u003Ch1>` with `--glow-text`; Cinzel subheading; primary + ghost CTAs; gargoyle ornaments flanking (inline-SVG exception, hidden or rescaled on mobile); scroll cue.\n3. **Features:** eyebrow + blackletter `\u003Ch2>`; three `.card--arch` cards in a flex row (column on mobile); Material Symbol icon inside a Tarnished Gold–ringed medallion; hover glow + lift.\n4. **How It Works:** Midnight Blue band (`--bg-alt`); three steps numbered with Roman numerals I \u002F II \u002F III in Tarnished Gold; tracery divider between steps (CSS background pattern).\n5. **Testimonials:** three quotes set in cathedral window frames; gold quotation ornament; name + role attribution; static responsive grid.\n6. **Pricing:** three tiers; middle tier `.card--featured` with Deep Purple tint (`--bg-accent`), Blood Red border, `--glow-red`, and a Tarnished Gold \"Most Coveted\" badge; Material `check` icons for feature lists; one CTA button per tier.\n7. **FAQ:** 5–6 accordion items per 2.4.\n8. **Final CTA:** arch-framed panel over fog and glow; email `.input-group` + `.btn--primary`; `aria-live` feedback; success state.\n9. **Footer:** brand, secondary link columns (e.g., Product \u002F Company \u002F Legal), Material Symbol social icons, copyright; Stone Grey top border with tracery pattern.\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid type via `clamp()`; no horizontal overflow at any width; test arch clip-paths at mobile sizes.\n- **Smooth animations:** every state change transitions with `var(--transition-normal)` (600ms dramatic pacing); transition explicit properties rather than `all`.\n- **Reduced motion:** under `prefers-reduced-motion`, disable fog drift, glow pulses, lifts, spinner rotation, and smooth scrolling; keep instant state changes.\n- **Accessibility:** maintain ≥4.5:1 contrast for body text and ≥3:1 for large text\u002FUI in both themes (the token table above is pre-tuned for this); never rely on color alone; semantic landmarks (`header`, `nav`, `main`, `section`, `footer`); logical heading order h1→h2→h3; skip-to-content link; visible `:focus-visible` styles everywhere; full keyboard operability for nav, toggle, accordion, forms, and any modal; `aria-live` regions for all dynamic feedback.\n- **Mandatory visual feedback:** every click, hover, focus, and submission triggers a visible state change.\n- **Destructive actions:** `.btn-danger` must be visually distinct in both dark and light themes.\n- **Glow discipline:** `text-shadow` glow only on display headings — never on body text, buttons, or inputs.\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **Files:** separate `index.html`, `style.css`, `script.js`. Only a single `\u003Cscript src=\"script.js\" defer>` reference — no inline script blocks, no inline styles.\n- **Naming:** BEM consistently across the entire deliverable (`.hero__title`, `.card--arch`, `.pricing__tier`, `.faq__item`, `.input-group__error`). Never mix conventions.\n- **Head:** Google Fonts links (UnifrakturMaguntia, Cinzel) and the Material Symbols stylesheet.\n- **Copy:** write original, coherent English copy in a mysterious, grand gothic voice — invent a fitting brand name. No lorem ipsum; every section receives real content.\n- **No unrequested placeholders:** deliver a complete, runnable page on the first attempt.\n",1791954987310]