[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-249-Dark-Academia":3},"# BUILD SPECIFICATION — \"DARK ACADEMIA\" LANDING PAGE (CULTURAL & HERITAGE)\n\n**Your role:** You are a Senior Frontend Engineer and Expert UI Designer. Build the complete, production-ready landing page defined below in a single attempt — deliver the final code immediately, without clarifying questions. Where a detail is unspecified, make a tasteful decision consistent with this specification. All user-facing copy must be written in English.\n\n---\n\n## 0. PROJECT BRIEF & PAGE SPECIFICATION\n\n**0.1 Theme & Voice.** The theme is **Dark Academia**: moody browns, oxblood, forest green, cream; serif typography; old books, candlelight, tweed, Gothic\u002FIvy-League architecture motifs; scholarly, nostalgic, melancholic — the mood of *Dead Poets Society* and *The Secret History*. Invent a fictional Cultural & Heritage product and name it (e.g., \"The Athenaeum — a private digital society for classical study: a curated library of rare texts, annotated lectures, and weekly reading circles\"). Write all headlines, body copy, testimonials, pricing labels, and FAQ entries yourself, in this voice. No lorem ipsum.\n\n**0.2 Required sections, in order:**\n- **Global frame:** sticky header (`.nav`) with wordmark, anchor links to each section, theme toggle, and a primary CTA (\"Apply\") anchoring to Pricing. On mobile, collapse links behind a Material Symbol `menu` button. Include a \"Skip to content\" link.\n- **Hero:** mono eyebrow (e.g., \"EST. MMXXIV · A SOCIETY OF READERS\"), display headline in Cormorant Garamond, subcopy, two CTAs (primary + ghost). Decorate with CSS only: a candlelight radial glow (gold at low opacity), hairline rules, and an arched frame (`--radius-arch`) holding an oversized drop cap or Material Symbol. No external images.\n- **Features (3 cards):** icons `auto_stories` (rare text collection), `history_edu` (annotated lectures), `forum` (reading circles); title + 2–3 sentence copy each.\n- **How It Works (3 steps):** Courier Prime numerals \"01 \u002F 02 \u002F 03\" in gold, connected by a hairline rule; each step has number, title, copy. Row on desktop, column on mobile.\n- **Testimonials:** three quote cards with `format_quote` icon, italic serif quote, attribution (name + epithet, e.g., \"Fellow, Class of MMXIX\").\n- **Pricing (3 tiers):** Reader \u002F Scholar \u002F Fellow. Middle tier featured: gold border, `.badge` \"Most Chosen\", elevated shadow. Prices in Courier Prime; feature lists with `check` icons; one CTA per tier.\n- **FAQ:** accessible accordion, 5 Q&As, `expand_more` icon rotating on toggle.\n- **Final CTA:** panel with candlelight glow containing headline, copy, and a newsletter email form (see 2.3).\n- **Footer:** wordmark + tagline, three columns of secondary links (Society \u002F Library \u002F Legal), bottom bar with \"© MMXXV …\" small print. Unspecified link destinations may use `href=\"#\"`.\n\n**0.3 Section rhythm.** Every section uses a consistent heading pattern (mono eyebrow + Cormorant H2 + optional intro), `--space-24` between sections, `--space-12` internal gaps, centered container max-width 72rem.\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`. **Never** use `style=\"...\"` attributes.\n- Target everything via class\u002FID selectors. Keep HTML semantic and visually agnostic (`header\u002Fnav\u002Fmain\u002Fsection\u002Farticle\u002Ffooter`, `aria-labelledby` on sections) so a re-theme requires CSS edits only.\n- No inline `\u003Cscript>` blocks; HTML references `script.js` once, with `defer`.\n\n**1.2 CSS Variables & Theme Tokens**\nAdopt the supplied base component CSS (`.btn`, `.card`, `.nav`, `.input`, `.badge`) as your foundation, re-pointed at the mandatory token set below. The source spec's token names (`--color-bg`, `--color-surface`, …) may be kept as supplementary aliases, but the mandatory set is required and must drive every component:\n\n```css\n:root { \u002F* DARK — the theme's native mode *\u002F\n  --bg-primary: #1c1712;    --bg-secondary: #26201a;   --bg-tertiary: #332a20;\n  --text-primary: #e8ddc7; --text-secondary: #a99a7f;\n  --primary: #8b5e34;       --secondary: #5a6b4f;\n  --text-success: #a3b78c;  --text-error: #d98c80;\n  --border-default: #4a3f30; --border-success: #6d8159; --border-error: #a34a42;\n  --accent-gold: #b89b5e;   --oxblood: #6e2b2b;        \u002F* supplementary *\u002F\n  --radius-sm: 2px; --radius-md: 4px; --radius-lg: 6px; --radius-pill: 999px;\n  --radius-arch: 12rem 12rem 0 0;                      \u002F* gothic arch motif *\u002F\n  --shadow-sm: 0 2px 8px rgba(0,0,0,0.5); --shadow-md: 0 8px 24px rgba(0,0,0,0.45);\n  --spacing-gap: 1rem;  \u002F* plus the --space-1 … --space-24 scale *\u002F\n  --transition-fast: 120ms; --transition-normal: 240ms; --ease-standard: cubic-bezier(0.4,0,0.2,1);\n  --z-header: 100; --z-dropdown: 1000; --z-modal: 2000; --z-toast: 3000;\n  --font-base: 'EB Garamond', Georgia, serif;\n  --font-display: 'Cormorant Garamond', 'EB Garamond', serif;\n  --font-mono: 'Courier Prime', monospace;\n  \u002F* plus the --text-xs … --text-5xl type scale *\u002F\n}\n```\n\n- **Light \"parchment\" theme** overrides under `[data-theme=\"light\"]`: `--bg-primary: #ece3cd; --bg-secondary: #f6f0e0; --bg-tertiary: #e0d3b4; --text-primary: #2b2117; --text-secondary: #6d5f49; --secondary: #4f5f45; --text-success: #4f6135; --text-error: #8a2f2a; --border-default: #c6b795; --border-success: #7d8f66; --border-error: #b0564d; --accent-gold: #9a7c3f;` with softer shadows `0 2px 8px rgba(43,33,23,0.12)` \u002F `0 8px 24px rgba(43,33,23,0.16)`.\n- **Contrast pairing is mandatory in every theme:** light backgrounds pair with dark text tokens, dark backgrounds with light text tokens. Never mix.\n- Never use `#ffffff`; where a near-white is required (e.g., text on `.btn--primary`), use `#fefefe`.\n\n**1.3 Mandatory Dual-Theme Support**\nThe source spec does not declare modes — you must define and validate both light and dark before publishing.\n- Dark is the native default (`:root`). Also ship the parchment light theme above.\n- First visit honors the OS: add `@media (prefers-color-scheme: light) { :root:not([data-theme]) { …parchment tokens… } }`.\n- `script.js` reads `localStorage` on execution; if a stored choice exists, set `data-theme` on `\u003Chtml>` immediately, otherwise leave the media query in charge.\n- The header contains a visible toggle (Material Symbols `dark_mode` \u002F `light_mode`) with `aria-pressed` reflecting the active dark state and an `aria-label` describing the action. Clicking it sets `data-theme`, persists to `localStorage`, and never requires HTML restructuring.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- Build all layout with Flexbox. Every flex container defaults to `align-items: center` unless a specific exception is justified in a CSS comment.\n- Mobile-first: single column by default; promote to rows at ~640px and ~960px. No horizontal scrolling at any width down to 320px.\n\n**1.5 Styling Approach — Clean Custom CSS**\n*Exception clause:* the default framework is Tailwind, but the source specification supplies vanilla CSS component classes, so use framework-free custom CSS in `style.css` — no Tailwind, no build step — extending the supplied base classes with BEM.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Load via Google Fonts `\u003Clink>`: **EB Garamond** (body), **Cormorant Garamond** (display headings), **Courier Prime** (eyebrows, numerals, prices), bound to `--font-base`, `--font-display`, `--font-mono`.\n- Icons are **Google Material Symbols (Outlined)** loaded from Google Fonts. **Inline SVGs and local icon files are forbidden.** Size icons with `font-size` and color with `currentColor` inside flex rows.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Buttons** — base `.btn` is flex, `align-items: center`, `justify-content: center`, `gap: 0.5rem`, minimum touch target 44×44px; all states via classes:\n- **Default:** `.btn--primary` (leather brown, `#fefefe` text), `.btn--ghost` (transparent, hairline border), `.btn--danger` (oxblood — visually distinct in both themes).\n- **Hover:** brightness\u002Fshadow shift, `cursor: pointer`.\n- **Focus:** distinct `:focus-visible` ring (2px `--accent-gold` on dark \u002F `--primary` on light, offset 2px).\n- **Active:** `transform: scale(0.97)`.\n- **Loading (`.is-loading`):** disables interaction and double-clicks, renders a CSS spinner or animated Material Symbol without changing button dimensions; set `aria-busy=\"true\"`.\n- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`, no transform.\n- **Success\u002FError:** temporary feedback classes tinted by `--text-success` \u002F `--text-error` (used by the newsletter submit).\n\n**2.2 Cards**\n- **Default:** `.card` — `--bg-secondary`, hairline `--border-default`, `--radius-md`, `--shadow-sm`, padding `--space-6`, flex column.\n- **Hover (interactive cards):** `translateY(-2px)` + `--shadow-md`.\n- **Focus-within:** gold border highlight when a child link\u002Fbutton is focused.\n- **Loading (skeleton):** define a `.skeleton` shimmer keyframe utility for any asynchronously loaded content.\n- **Empty state:** define a fallback layout (Material Symbol + guidance text) for any dynamic region.\n- **Featured:** `.card--featured` for the middle pricing tier — gold border, `.badge`, `--shadow-md`.\n\n**2.3 Forms & Inputs** — the Final CTA contains a newsletter `.input-group`: flex column wrapping `\u003Clabel>`, `.input`, and a reserved error-feedback container (`aria-live=\"polite\"`).\n- **States:** empty; focused (2px `--primary` outline ring); filled; valid (`--border-success` + `check` icon); invalid (`--border-error`, `--text-error` message + error icon, `aria-invalid=\"true\"`, `aria-describedby`); disabled; read-only if used.\n- On submit: button enters loading, simulated async (~900ms), then success (check icon + confirmation in the live region) or error (inline validation message). Prevent double submissions.\n\n**2.4 Modals & Overlays** — any dialog\u002Fdrawer (e.g., a mobile nav overlay or detail dialog) must implement: opening\u002Fopen\u002Fclosing states animated via CSS transitions; a centered flex overlay (`align-items: center`) with dark backdrop + `backdrop-filter: blur(4px)` at `--z-modal`; a Material Symbol `close` button (`aria-label=\"Close\"`); `role=\"dialog\"`, `aria-modal`, keyboard focus trapping, closing via `Esc` and overlay clicks, and focus returned to the trigger. Content-level loading\u002Fsuccess\u002Ferror states where async.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid `clamp()` display type, breakpoints without overflow, `scroll-margin-top` on anchored sections for the sticky header.\n- **Smooth animations:** transition all state changes with `var(--transition-normal)`; wrap `scroll-behavior: smooth` in `@media (prefers-reduced-motion: no-preference)`; under `prefers-reduced-motion: reduce`, disable transforms, decorative animation, and shimmer (swap the spinner for text such as \"Enrolling…\").\n- **Accessibility:** AA contrast in both themes — validate light and dark before publishing. Never communicate state by color alone (pair icons + text). Semantic HTML5, correct ARIA (accordion `aria-expanded`\u002F`aria-controls`, toggle `aria-pressed`, `aria-live` for form feedback), logical focus order, full keyboard operability — no mouse-only interactions.\n- **Mandatory visual feedback:** every hover, click, toggle, and submission produces a visible change (chevron rotation, button press, glow\u002Flift, live-region message).\n- **Destructive actions:** `.btn--danger` in oxblood, distinct in both themes (define it even if unused on this page).\n\n---\n\n## 4. DELIVERABLES & OUTPUT FORMAT\n\n- **Files:** `index.html`, `style.css`, `script.js`. HTML links Google Fonts, Material Symbols, and `style.css`, and references `script.js` once with `defer`. No inline styles, no inline scripts.\n- **Naming:** one convention throughout — BEM (`block__element--modifier`), extending the supplied base classes. Never mix conventions.\n- **Copy:** original English copy in the Dark Academia voice; placeholders only where content is genuinely unspecified (e.g., `href=\"#\"` legal links). No lorem ipsum.\n- **Definition of done:** complete page rendered in one attempt; both themes toggle and persist; keyboard-only pass; reduced motion respected; 320px viewport clean; zero inline CSS\u002FJS.\n",1791954983735]