[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-346-Illuminated-Manuscript":3},"# CODING AGENT PROMPT — \"Illuminated Manuscript\" Landing Page (Cultural & Heritage)\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready landing page on the first attempt — full markup, styles, and behavior in one pass, with no TODOs, no placeholder stubs, and no follow-up questions.\n\n**Product Concept:** A fictional Cultural & Heritage product: **\"Scriptorium\"** — a digital archive offering high-resolution facsimiles of illuminated manuscripts, scholarly marginalia, and conservation-grade color rendering. (You may refine the name, but the concept must stay coherent across every section.)\n\n**Copy Language:** All user-facing copy must be written in **English** — refined, scholarly, warm modern English with a medieval flavor (e.g., \"Begin your folio journey\"). Never actual Middle English, never gimmicky. Write real copy for every section; lorem ipsum is forbidden.\n\n**Reference Specification:** The design token block labeled `references\u002F00-flagship-implementation-specs\u002Filluminated-manuscript.md` (provided below in Section 2) is canonical. Extend it — never replace, rename, or delete its signature tokens.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n* **No Inline CSS:** The `style=\"...\"` attribute is forbidden. No `\u003Cstyle>` blocks in the HTML.\n* **Class\u002FID Selectors Only:** All design properties, layout rules, and states must be targeted via class or ID selectors in `style.css`.\n* **Minimal HTML Modifications:** HTML must remain clean, semantic (header\u002Fnav\u002Fmain\u002Fsection\u002Farticle\u002Ffooter), and agnostic of visual styling. Re-theming the page must require editing only `style.css`.\n\n**1.2 CSS Variables & Theme Tokens**\nStore all visual tokens in `:root` using this canonical naming, mapped to the Illuminated Manuscript palette:\n\n* **Colors (Light Mode):** `--bg-primary: #f3e6c4` (aged vellum), `--bg-secondary: #f8edd0` (parchment surface), plus theme extension `--bg-strong: #efdbaa`; `--text-primary: #2a1a10` (iron-gall ink), `--text-secondary: #5a4632` (muted umber); `--primary: #7a1f2b` (rubric red), `--secondary: #b8860b` (goldenrod accent); theme extensions `--gold: #c9971f` (gold leaf) and `--blue: #1e3a6e` (ultramarine); `--border-default: #7a5a1e` (sepia rule).\n* **Feedback Tokens (must be defined):** `--text-success` \u002F `--border-success` in a verdigris green (a historically accurate manuscript pigment, e.g., `#2f6b4f` in light mode) and `--text-error` \u002F `--border-error` in a saturated crimson clearly distinct from `--primary` (e.g., `#b3261e`). Validate both for WCAG AA contrast in light and dark.\n* **Contrast Pairing:** Every light background token must pair with a dark text token and every dark background token with a light text token — enforced in every theme, not just the default.\n* **No Pure White:** The page background is vellum `#f3e6c4`, never `#ffffff`. Where a near-white is genuinely needed, use `#fefefe`.\n* **Radius:** `--radius-sm`, `--radius-md`, `--radius-lg: 2px`; `--radius-pill: 999px`. Manuscripts are hand-ruled, not rounded — sharp panels with ornamented borders standing in for corner treatments.\n* **Shadows:** `--shadow-sm: 0 1px 3px rgba(42,26,16,0.25)`, `--shadow-md: 0 4px 10px rgba(42,26,16,0.3)` (soft, low, like candlelight on vellum; a `--shadow-lg` extension is permitted).\n* **Spacing & Transitions:** `--spacing-gap`, plus `--transition-fast` (~150ms), `--transition-normal` (~300ms), `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.\n* **Elevation:** `--z-dropdown: 100`, `--z-modal: 1000`, `--z-toast: 1100` — all layered components must use these to prevent overlap conflicts.\n* **Signature Tokens (keep verbatim):** `--gilt-border`, `--vine-rule`, `--illum-corner` exactly as defined in the reference block.\n* **Fonts:** `--font-base: 'EB Garamond', 'Palatino', Georgia, serif`; `--font-display: 'UnifrakturMaguntia', 'Cinzel', serif`.\n\n**1.3 Mandatory Dark Mode Support — \"Candlelit Scriptorium\"**\nThe source specification declares no modes and requires validating in both light and dark before publishing. Therefore:\n* **Implementation:** Define dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `\u003Chtml>`. Suggested palette (validate and adjust for AA contrast): `--bg-primary: #1e1409`, `--bg-secondary: #2a1c0f`, `--bg-strong: #33220f`, `--text-primary: #f3e6c4`, `--text-secondary: #cbb488`, `--primary: #a63a46` (lightened rubric red), `--secondary: #d4a017`, `--gold: #e3b64e`, `--blue: #6b8cc4`, `--border-default: #8a6a2a`. Pure black (`#000`) is forbidden — the darkest value remains ink brown.\n* **Theme Switching:** Background and text variables must switch seamlessly with no HTML restructuring.\n* **Persistence:** Store the user's choice in `localStorage` (key `theme`), falling back to `prefers-color-scheme` on first visit. Provide a visible toggle in the nav using Google Material Symbols (`light_mode` \u002F `dark_mode`) with correct `aria-pressed` and a dynamic `aria-label` (\"Switch to dark mode\" \u002F \"Switch to light mode\").\n* **Pigment Identity:** Gold leaf, rubric red, and ultramarine must remain clearly identifiable in dark mode.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n* Build all layout structures with Flexbox. Every flex container must default to `align-items: center` unless an exception is explicitly justified with a CSS comment (e.g., `align-items: stretch` for equal-height pricing cards, `flex-start` for long-form text columns).\n* Mobile-first: single-column by default; multi-column rows collapse to columns on small viewports; no horizontal scrolling at any width from 320px up. Center content in a max-width container (~72rem).\n\n**1.5 Styling Approach**\n* Use clean custom CSS organized in `@layer` blocks (tokens → base → layout → components → utilities), Tailwind-style layer discipline without requiring a build step. If you opt for Tailwind instead, drive all components via `@layer`\u002F`@apply` mapping back to the CSS variables.\n* **Naming Convention:** BEM (`block__element--modifier`) exclusively, consistent with `.btn--primary` in the reference block. Never mix conventions. Reusable component classes: `.btn`, `.card`, `.input-group`, `.badge`, etc.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* **Text:** Load Google Fonts via `\u003Clink>` with `preconnect`: EB Garamond (400\u002F500\u002F600\u002F700 + italics) bound to `--font-base`; UnifrakturMaguntia (400) bound to `--font-display`; Cinzel optional for subheads and Roman numerals.\n* **Blackletter Restriction:** `--font-display` is for large display headings and the wordmark ONLY — never for body copy, buttons, labels, or error text (legibility first).\n* **Icons:** Google Material Symbols (Rounded), loaded from Google Fonts. **Raw inline SVGs, local icon files, and emoji-as-icons are explicitly forbidden.**\n* **CSS-Only Illumination:** All decorative ornament — vine rules, corner flourishes, gold medallions, drop caps, marginalia — must be built from gradients, borders, and pseudo-elements. No image assets.\n\n---\n\n## 2. THEME IMPLEMENTATION — ILLUMINATED MANUSCRIPT (500–1500 CE)\n\n**2.1 Signature Visual Language** — repeat these moves on nav, cards, and inputs so gold trim reads as the page's structure, not one-off decoration:\n* **Gilt Frame:** `--gilt-border` plus an inner 1px gold rule (via `::before`) framing every surface like a page margin.\n* **Vine Rule:** `--vine-rule` as ornamental horizontal rules under the nav, between major sections, and connecting the How-It-Works steps.\n* **Corner Flourishes:** `--illum-corner` gold dots on cards and framed panels.\n* **Ornate Drop Caps:** Gilded initial capitals — gold letter on a rubric-red medallion (or rubric letter on gold) opening the hero prose and one paragraph per major section. Implement via `::first-letter` or a `.drop-cap` class; the full word must remain intact for screen readers.\n* **Marginalia:** Small italic annotations offset into the margins on wide viewports (≥48rem); repositioned inline or hidden on mobile; must never cause overflow.\n* **Rubrication:** Section eyebrows\u002Flabels in `--primary` red, letter-spaced small caps.\n* **Vellum Ground:** Body background uses the radial gold glow from the reference block; subdue it in dark mode.\n\n**2.2 Historical Fidelity**\n* Colors must read as pigment on vellum — minium red, ultramarine, gold leaf, sepia. No neon, no pure black.\n* Panels are sharp and hand-ruled (2px radii); ornament, not rounding, decorates corners.\n* Shadows stay soft and low (candlelight), never harsh.\n\n**2.3 Validation Requirement**\nBefore considering the work complete, validate every section, component, and interactive state in BOTH light and dark mode, including WCAG AA contrast for text, focus rings, borders, and badges.\n\n---\n\n## 3. COMPONENT DESIGN SPECIFICATIONS\n\n**3.1 Button** — all states via CSS classes:\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px; EB Garamond 600; styled per the reference block (`.btn--primary`: rubric red ground, parchment text, gold border).\n* **Hover:** brightness\u002Fshadow shift with `cursor: pointer` and a subtle lift (`translateY(-1px)` per reference).\n* **Focus:** Distinct `:focus-visible` ring using `--secondary`\u002F`--gold` with 2px offset — clearly visible in both themes.\n* **Active\u002FPressed:** Click feedback (`transform: scale(0.97)` or the reference's `translateY(0)` settle — pick one and apply it consistently to all buttons).\n* **Loading:** Sets `aria-busy=\"true\"`, disables pointer events to prevent double-clicks\u002Fdouble-submits, and renders a CSS spinner or rotating Material icon without changing button dimensions.\n* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n* **Success\u002FError:** Temporary feedback states driven by `--text-success` \u002F `--text-error` (used by the Final CTA form).\n* **Danger:** Any destructive action (e.g., a form \"Clear\" control) uses `.btn-danger`, visually distinct in both light and dark themes.\n\n**3.2 Card** (Features, Testimonials, Pricing):\n* **Default:** Flexible Flexbox column layout, `--bg-secondary` ground, 2px `--border-default`, `--radius-lg`, `--shadow-md`, gilt inner rule and `--illum-corner` flourishes per the reference block.\n* **Hover:** `transform: translateY(-2px)` with `--shadow-md` → `--shadow-lg` elevation shift (or a gold-border glow).\n* **Focus-within:** Card borders highlight (gold\u002Fred) when a child link or button receives focus.\n* **Loading (Skeleton):** Define `.card--skeleton` with a CSS shimmer gradient sweep that prevents layout jumps.\n* **Empty State:** Define a structured fallback pattern — Material icon plus clear guidance text — even if the static page never triggers it.\n\n**3.3 Form & Input** (Final CTA email capture):\n* **Structure:** A flex `.input-group` wrapping a `\u003Clabel>`, the `\u003Cinput class=\"input\">`, and a dedicated error feedback element (`\u003Cp>` with `aria-live=\"polite\"`).\n* **States:** Empty; Focused (gold ring per reference: `--primary` border + 3px gold-tinted shadow); Filled; Valid (`--border-success` + Material check icon); Invalid (`--border-error`, error text in `--text-error`, error icon, message rendered in the error container, `aria-invalid=\"true\"`, `aria-describedby`); Disabled; Read-only.\n* **Behavior:** Validate email format in `script.js`; `preventDefault()` on submit; button enters Loading → Success; inline confirmation announced via `aria-live`. Errors are never communicated by color alone.\n\n**3.4 Modal \u002F Popup** — applies to any dialog implemented (e.g., a submission confirmation for the Final CTA):\n* **States:** Opening, Open, Loading, Success\u002FError, Closing — all animated via CSS transitions.\n* **UX:** Centered flex overlay (`align-items: center`), dimmed vellum\u002Fink backdrop at `--z-modal`, Material icon close button (`aria-label=\"Close\"`), keyboard focus trapping, focus returned to the trigger on close, closable via `Esc` and overlay clicks, `role=\"dialog\"` \u002F `aria-modal=\"true\"` with an accessible title.\n\n---\n\n## 4. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by Default:** Fluid type via `clamp()`; responsive breakpoints; zero horizontal overflow; `scroll-margin-top` on anchored sections so the sticky nav never covers headings.\n* **Smooth Animations:** CSS transitions on all state changes using `var(--transition-normal)` \u002F `var(--ease-standard)`; fully honor `prefers-reduced-motion` (disable transforms, shimmer, and smooth scroll).\n* **Accessibility (a11y):** Semantic HTML5 landmarks; a skip link; exactly one `\u003Ch1>` with logical heading order; visible focus on every interactive element; keyboard-operable FAQ accordion and theme toggle; `aria-live` regions for dynamic feedback; state never communicated by color alone; WCAG AA contrast in both modes.\n* **Mandatory Visual Feedback:** Every click, hover, focus, and submission triggers a visible state change.\n* **Destructive Actions:** Visually distinct in both themes.\n\n---\n\n## 5. PAGE STRUCTURE & CONTENT\n\n**5.1 Header \u002F Nav (sticky):** Blackletter wordmark; anchor links (Features, How It Works, Testimonials, Pricing, FAQ); theme toggle per 1.3; primary CTA (\"Enter the Archive\"). Gilt bottom border plus `--vine-rule` underneath. On mobile, links wrap or collapse — never scroll horizontally.\n\n**5.2 Hero:** Rubricated eyebrow; blackletter `\u003Ch1>`; opening paragraph with a gilded drop cap; supporting subheading; two CTAs (`.btn--primary` + secondary); decorative marginalia; a `.badge` (e.g., \"A Digital Scriptorium\").\n\n**5.3 Features (3 cards):** E.g., \"Gold-Leaf Facsimiles\" (high-resolution digitization), \"Living Marginalia\" (scholarly annotations layered on every folio), \"Conservation-Grade Color\" (pigment-accurate rendering). Each card: Material icon set in a gold medallion, title, prose with a drop cap or rubricated initial, hover lift per 3.2.\n\n**5.4 How It Works (3 steps):** Roman numerals I, II, III in gold medallions (Cinzel or blackletter), connected by the `--vine-rule` on desktop; vertical column on mobile. Steps follow the concept: Digitize the folio → Curate the scholarship → Illuminate the reading experience.\n\n**5.5 Testimonials (3):** Quotes styled as manuscript quotations — rubricated opening marks, italic EB Garamond — in cards with corner flourishes. Attributions with plausible fictional names and roles (a conservator, a professor of medieval studies, a curator).\n\n**5.6 Pricing (3 tiers):** E.g., \"Apprentice\" (free), \"Scribe\" (featured), \"Patron\". The featured tier carries a gold `.badge` (\"Most Illuminated\"), emphasized gilt border, and slightly elevated styling. Each tier: price, feature list with Material check icons, and a CTA button implementing all states from 3.1 (featured tier uses `.btn--primary`). Equal-height cards via `align-items: stretch` (documented exception per 1.4).\n\n**5.7 FAQ (5–6 items):** Accessible accordion — each question is a `\u003Cbutton>` with `aria-expanded` and a Material `expand_more` icon that rotates on open; answer panels animate via CSS (grid-rows or max-height technique); fully keyboard operable; smooth open\u002Fclose respecting reduced motion.\n\n**5.8 Final CTA:** A framed panel (gilt border + `--vine-rule`) with a blackletter headline, a supporting line, and the email signup form per 3.3 (Loading → Success with inline `aria-live` confirmation; a modal, if used, must satisfy 3.4).\n\n**5.9 Footer:** `--vine-rule` top border; secondary links (About the Scriptorium, Collections, Conservation, Privacy, Terms, Contact); fictional copyright small print in `--text-secondary`; all links keyboard-focusable with visible focus rings.\n\n---\n\n## 6. DELIVERABLE & OUTPUT FORMAT\n\n* **File Structure:** Separate `index.html`, `style.css`, and `script.js`. No inline `\u003Cscript>` blocks beyond a single deferred entry-point reference (`\u003Cscript src=\"script.js\" defer>`). No inline styles. No `\u003Cstyle>` blocks.\n* **Naming Convention:** BEM throughout — one consistent convention across all files.\n* **Assets:** Google Fonts (EB Garamond, UnifrakturMaguntia, optional Cinzel) and Google Material Symbols via `\u003Clink>` with `preconnect`. No local fonts, no icon files, no inline SVGs, no image assets.\n* **No Unrequested Placeholders:** All copy is real, on-theme, and in English. Placeholders are permitted only where content was genuinely left unspecified — nowhere in this build.\n* **First Attempt:** Deliver the complete, production-ready page in one pass, validated in both light and dark mode, with no TODOs and no deferred work.\n",1791954985263]