Byzantine Mosaic demo
Byzantine Mosaic

A sacred, opulent style inspired by Eastern Roman church mosaics, featuring gilded gold-ground surfaces, jewel-toned glass tesserae, and ornate religious iconography from Ravenna to Constantinople.
Category: Cultural & Heritage
Era: Byzantine (330–1453)
Prompt: 9.2 KB · 1251 words
# System Prompt: Build a "Byzantine Mosaic" Landing Page

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready Landing Page on the first attempt. Do not output partial code or ask clarifying questions about the design system — it is fully specified below.

**Project:** Byzantine Mosaic Landing Page — Cultural & Heritage category
**Sections (in order):** Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
* All styling must live in a dedicated `style.css` file. The `style="..."` attribute is **forbidden** anywhere in the HTML.
* Target every element via class or ID selectors only.
* HTML must remain semantic and clean (`header`, `nav`, `main`, `section`, `article`, `footer`, `figure`, `blockquote`); no presentational wrappers whose only purpose is styling that CSS pseudo-elements could handle.

**1.2 CSS Variables & Theme Tokens**
Use the provided Byzantine Mosaic token set as the foundation, mapped into the canonical token names:

```css
:root {
  /* colors */
  --primary: #d4af37;            /* gold */
  --secondary: #7a1f3d;          /* ruby accent */
  --bg-primary: #0d1b3d;         /* deep sapphire night */
  --bg-secondary: #142a5c;       /* surface */
  --text-primary: #f5e6b8;       /* parchment gold text */
  --text-secondary: #c9b57a;     /* muted gold */
  --text-success: #7fd6a4;
  --text-error: #ff8f8f;
  --border-default: #caa036;     /* gold-ground */
  --border-error: #ff8f8f;
  --border-success: #7fd6a4;
  /* extended palette */
  --color-surface-2: #1c3a7a;
  --color-emerald-tile: #1f6b4a;
  --color-gold-ground: #caa036;
  /* radius / shadow / spacing / motion */
  --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px;
  --shadow-sm: 0 2px 0 rgba(0,0,0,0.35);
  --shadow-md: 0 0 20px rgba(212,175,55,0.40), 0 8px 20px rgba(0,0,0,0.45);
  --spacing-gap: 1.5rem;
  --transition-fast: .15s var(--ease-standard);
  --transition-normal: .25s var(--ease-standard);
  --ease-standard: cubic-bezier(0.3, 0, 0.2, 1);
  /* z-index */
  --z-dropdown: 100; --z-modal: 200; --z-toast: 300;
  /* signature effects */
  --tesserae-gradient: linear-gradient(135deg, #caa036 0%, #d4af37 20%, #b8860b 40%, #d4af37 60%, #caa036 80%, #b8860b 100%);
  --tile-grid: repeating-linear-gradient(45deg, rgba(0,0,0,0.12) 0 2px, transparent 2px 8px);
  /* typography */
  --font-base: 'Cormorant Garamond', serif;
  --font-display: 'Cinzel', 'Cormorant Garamond', serif;
}
```

* **Contrast pairing:** dark sapphire backgrounds always pair with light gold text (`--text-primary` / `--text-secondary`); gold-gradient surfaces (`.btn--primary`) always pair with near-black text (`#12100a`). Enforce this pairing in both themes.

**1.3 Mandatory Dark Mode**
* The default palette above is the **dark theme** (deep sapphire night). Define a **light mode** under a `.light` class (and `@media (prefers-color-scheme: light)` fallback) using a luminous gold-ground interpretation: `--bg-primary: #f2e3b3; --bg-secondary: #e8d49a; --text-primary: #1a2a4a; --text-secondary: #4a3d1a;` keeping jewel tones for accents. Never use pure white — use `#fefefe` if a near-white is required.
* Provide a visible theme toggle in the nav with `aria-pressed` and `aria-label` ("Switch to light/dark mode"), persisting choice via `localStorage` and falling back to `prefers-color-scheme` on first visit. Switching must require zero HTML restructuring.

**1.4 Flexbox Layout & Mobile-First**
* Every flex container defaults to `align-items: center` unless an exception is justified in a CSS comment.
* All section layouts (feature card rows, pricing tiers, step sequences, footer columns) must collapse to single-column stacks on small viewports. No horizontal scrolling at any breakpoint.

**1.5 Framework**
* Use plain semantic CSS (no framework) driven by the provided component classes (`.nav`, `.btn`, `.btn--primary`, `.card`, `.input`, `.badge`). Extend with BEM naming (`card__title`, `pricing__tier`, `faq__item`) — one convention, never mixed.

**1.6 Typography & Icons (Google Fonts Mandatory)**
* Load **Cinzel** (display) and **Cormorant Garamond** (body) via Google Fonts `<link>`.
* All icons must be **Google Material Symbols** loaded via the official stylesheet. Raw inline SVGs and local icon files are **forbidden**.
* Headings use `--font-display` with wide letter-spacing to evoke inscribed Greek capitals; body uses `--font-base` at generous line-height.

---

## 2. THEME DIRECTION — BYZANTINE MOSAIC (4th–15th century)

Every section must feel like a panel from San Vitale or the Hagia Sophia apse:

* **Gold-ground shimmer:** Hero and Final CTA backgrounds use `--tesserae-gradient` layered with `--tile-grid` and a slow, subtle background-position shimmer animation (respecting `prefers-reduced-motion`).
* **Tessellated borders:** Every card, panel, and section is framed by a geometric tessellated border — implement via layered `repeating-linear-gradient` borders or a `::before` inset frame (as in the provided `.card::before`).
* **Jewel tones:** Feature cards alternate sapphire (`--color-surface-2`), emerald (`--color-emerald-tile`), and ruby (`--secondary`) accents on borders, icons, and badges.
* **Hieratic rigidity:** Figures/avatars in Testimonials are rigid, frontal, symmetrical — centered, no rotation, formal composition. Use Material Symbols person icons in circular gold-ringed medallions rather than photos.
* **Luminosity:** Gold text and borders get a soft `--shadow-md` gold glow on hover/focus; surfaces carry `--shadow-sm` tile depth.
* All user-facing copy must be written in **English**, in a reverent, heritage-appropriate voice (e.g., "Crafted in the tradition of the Eastern Roman Empire", "A treasury of glass and gold").

---

## 3. SECTION & COMPONENT SPECIFICATIONS

**3.1 Nav (`.nav`)** — Sticky, sapphire surface with gold bottom border and tile-grid texture. Logo wordmark in Cinzel. Links + theme toggle + primary CTA button. Collapses to a hamburger (Material Symbol `menu`) opening a flex-column dropdown menu on mobile, with `aria-expanded` and keyboard operability.

**3.2 Hero** — Full-viewport gold-ground shimmer field. Display headline in Cinzel (up to `--text-5xl`), subheadline in muted gold, two buttons (`.btn--primary` + `.btn`). A tessellated geometric border frames the entire hero. Include a subtle badge ("Est. Constantinople, 4th c." style). Buttons follow full state specs: hover glow-lift, `:focus-visible` gold outline, `:active` scale(0.97), loading spinner state (CSS-only, dimension-stable), disabled at 0.45 opacity.

**3.3 Features (3 cards)** — Flex row → column on mobile. Each `.card` has a jewel-toned Material Symbol icon in a gold medallion, title, description. Card states: hover `translateY(-2px)` with gold glow; `:focus-within` border highlight; a skeleton shimmer variant class (`.card--skeleton`) defined in CSS.

**3.4 How It Works (3 steps)** — Numbered steps (Roman numerals I, II, III in Cinzel) connected by a gold tessellated rule; vertical stack on mobile. Each step is a bordered panel with icon + copy.

**3.5 Testimonials** — 3 rigid, frontal, centered figures: circular gold-ringed icon medallion, name, role, `blockquote` in italic Cormorant. Symmetric, hieratic layout.

**3.6 Pricing (3 tiers)** — Middle tier highlighted (`.pricing__tier--featured`) with gold tesserae gradient border and slight elevation. Each tier: price in Cinzel, feature list with Material Symbol check icons, CTA button. Destructive/secondary actions styled distinctly.

**3.7 FAQ** — Use native `<details>/<summary>` (no JS) styled as tessellated-border panels with a rotating Material Symbol `expand_more` chevron; keyboard accessible by default.

**3.8 Final CTA** — Gold-ground shimmer panel mirroring the Hero, centered flex, headline + `.btn--primary`.

**3.9 Footer** — Sapphire surface, gold top border, multi-column (collapsing to stacked) secondary links, small print, theme-agnostic contrast.

**3.10 Forms** — The Final CTA may include an email `.input` + button. Input states: empty, focused (gold ring), filled, valid (success border + check icon), invalid (error border, error text in a dedicated `aria-live="polite"` feedback container), disabled.

**3.11 Toast** — Define a `.toast` component (`--z-toast`) with success/error variants and `aria-live="assertive"`, used for form submission feedback.

---

## 4. UX, A11Y & DELIVERABLES

* Smooth `--transition-normal` on all state changes; all animations disabled under `prefers-reduced-motion`.
* WCAG AA contrast in **both** dark and light themes — validate before finishing. Never communicate state by color alone (pair icons/text with color).
* Semantic HTML5, logical focus order, full keyboard operability, visible focus rings everywhere, minimum 44×44px touch targets.
* Every click/hover/submit produces visible feedback.

**Deliverables:**
* Three files: `index.html`, `style.css`, `script.js` (theme toggle, mobile nav, form validation, toast only — no other behavioral JS; no inline `<script>` beyond one deferred entry point).
* Consistent BEM naming throughout; no lorem ipsum — write real English heritage-themed copy for every section.
* No placeholders for content the spec above defines.