Acanthus demo
Acanthus

A refined landing page style built around carved acanthus leaf ornamentation from Greek and Roman architecture, pairing sophisticated serif typography with elegant print-like layouts suited to museums and architectural detail.
Category: Cultural & Heritage
Era: Neoclassical Revival
Prompt: 11.9 KB · 1597 words
# SYSTEM PROMPT — CODING AI BUILD SPECIFICATION

**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Build the complete **"Acanthus" Landing Page** (Classical / Decorative / Architectural / Leaf-Pattern theme, Ancient Greece & Rome era, Cultural & Heritage category) on the first attempt. Full light and dark mode support is mandatory. All user-facing copy must be written in **English**.

---

## 1. STRICT RULES & ARCHITECTURE

### 1.1 CSS-First Architecture & Zero Inline CSS
* **No Inline CSS:** The `style="..."` attribute is forbidden anywhere in the HTML. All styling lives in `style.css`.
* **Class/ID Selectors Only:** Every design property, layout rule, and state is applied via class or ID selectors.
* **Minimal HTML Modifications:** HTML stays semantic and style-agnostic — reskinning the page must require CSS edits only, never markup changes.

### 1.2 CSS Variables (`var(--...)`) & Theme Tokens
Store all visual tokens in `:root` and override them in the dark theme block. Map the Acanthus palette as follows:

* **Light theme ("Parchment Day" — default):** `--bg-primary: #F2E8D0` (Parchment), `--bg-secondary: #F5EDD6` (Warm Cream), `--text-primary: #2D3A2D` (Deep Forest), `--text-secondary: #6B5F4E` (Aged Bronze darkened for AA contrast), `--primary: #A08C3A` (Olive Gold), `--secondary: #C67A4B` (Terracotta), `--border-default: #A08C3A`, plus accents `--accent-stone: #8C8C7A`, `--accent-bronze: #8B7355`, `--accent-sage: #7A8B6A`.
* **Dark theme ("Deep Forest Night"):** `--bg-primary: #1F2A1F`, `--bg-secondary: #2D3A2D`, `--text-primary: #F2E8D0`, `--text-secondary: #C9BC9C`, `--primary: #C0A84A` (brightened Olive Gold), `--secondary: #D98E63` (brightened Terracotta), `--border-default: #C0A84A`.
* **Feedback tokens (both themes):** `--text-success`, `--text-error`, `--border-success`, `--border-error` — light mode uses `#4E5D42` / `#9C3D2E`; dark mode uses lightened `#9DB38B` / `#E08A70`.
* **Contrast Pairing:** Parchment backgrounds pair exclusively with Deep Forest text; Deep Forest backgrounds pair exclusively with Parchment text — enforced in both themes. **Contrast guard:** Olive Gold and Terracotta fills may only carry Deep Forest text at large-text sizes (≥18.66px bold / 24px regular); for body-size button labels, use Deep Forest fills with Parchment text. Verify WCAG AA (4.5:1 normal, 3:1 large); adjust token lightness ±10% (preserving hue) if a pairing fails.
* **Light Mode Background:** Never default to pure white — Parchment is the canvas. If a near-white is ever required, use `#fefefe`, never `#ffffff`.
* **Shape & Depth:** `--radius-sm: 2px`, `--radius-md: 4px`, `--radius-lg: 8px` (small radii evoke cut stone), `--shadow-sm: 0 2px 8px rgba(0,0,0,0.08)`, `--shadow-md: 0 4px 16px rgba(0,0,0,0.08)` (deepen to `rgba(0,0,0,0.4)` in dark mode).
* **Motion & Spacing:** `--spacing-gap: 1.5rem`, `--transition-fast: 150ms`, `--transition-normal: 350ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.
* **Elevation/Stacking:** `--z-dropdown: 1000`, `--z-modal: 1100`, `--z-toast: 1200`.
* **Emboss tokens:** `--emboss: 0 1px 2px rgba(0,0,0,0.1)` in light mode; `0 1px 1px rgba(242,232,208,0.12)` in dark mode — applied to all Cinzel headings.

### 1.3 Mandatory Dark Mode Support
* **Implementation:** Define dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `<html>` so toggling never requires HTML restructuring.
* **Persistence:** Store the user's choice in `localStorage`; on first visit, fall back to `prefers-color-scheme`.
* **Toggle Control:** A visible header toggle using a Google Material Symbol (`dark_mode` / `light_mode`) with correct `aria-pressed` and `aria-label` state. Parchment textures, emboss shadows, and ornament tints must all flip via CSS variables.

### 1.4 Flexbox Layout & Mobile-First Alignment
* **Default Alignment Rule:** Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment (e.g., card body text columns use `flex-start` for reading comfort).
* **Mobile-Friendly First:** All layouts start single-column and expand to multi-column at `≥640px` and `≥1024px`. Horizontal scrolling is prohibited at every viewport width.

### 1.5 CSS Approach
* Use clean custom CSS organized in Tailwind-style `@layer base, components, utilities` blocks (no build step). Reusable component classes — `.btn`, `.card`, `.input-group`, `.section`, `.container`, `.ornament-divider` — and every utility value must trace back to the tokens in 1.2.

### 1.6 Typography & Icons (Google Fonts Mandatory)
* **Text:** Load **Cinzel** (400/600/700) for display headings and **EB Garamond** (400/500 + italic) for body copy via Google Fonts `<link>` tags. Bind `--font-display: 'Cinzel', serif` and `--font-base: 'EB Garamond', serif`. Headings use `letter-spacing: 0.04em`; uppercase labels use `0.08em`.
* **Icons:** Functional icons use Google Material Symbols (Rounded) via the Google Fonts link. Raw inline `<svg>` elements and local icon files are forbidden.
* **Exception clause (decorative ornaments only):** Acanthus leaf scrollwork, ornamental borders, and parchment texture may be implemented as SVG data-URIs referenced exclusively from CSS (`background-image`, `border-image-source`) — never as inline `<svg>` nodes in the HTML; functional icons remain Material Symbols.

### 2. COMPONENT DESIGN SPECIFICATIONS

#### 2.1 Button Component
* **Default:** `.btn` — `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px touch target, Cinzel 600 uppercase, `--radius-sm`, 1px `--primary` border. Variants: `.btn--primary` (Deep Forest fill, Parchment text, Olive Gold hairline), `.btn--secondary` (transparent, themed text, gold border), `.btn--danger` for any destructive action (visually distinct in both themes).
* **Hover:** Brightness/shadow shift with `cursor: pointer`.
* **Focus:** Distinct offset outline ring using `--primary`, visible on both parchment and forest backgrounds.
* **Active/Pressed:** `transform: scale(0.97)`.
* **Loading:** `.is-loading` disables pointer events, prevents double-submission, and renders a CSS spinner (border-top ring) that does not alter button dimensions.
* **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`.
* **Success/Error:** `.is-success` / `.is-error` temporary states tinted by `--text-success` / `--text-error`, each paired with a Material Symbol — never color alone.

#### 2.2 Card Component
* **Default:** `.card` — flex column, `--bg-secondary`, 1px `--border-default`, `--radius-md`, `--shadow-sm`.
* **Hover:** `--shadow-md` plus `transform: translateY(-2px)`.
* **Focus-within:** Gold border highlight when a child link/button receives focus.
* **Loading (Skeleton):** `.card--skeleton` shimmer sweep animation for testimonial/pricing async states; no layout shift.
* **Empty State:** Material Symbol plus guidance text fallback.
* **Theme variants:** Feature cards carry an engraved circular medallion holding a Material Symbol; pricing cards support `.card--featured` (2px Olive Gold border, engraved "Most Chosen" plaque badge); testimonial cards render an oversized serif quotation glyph via CSS `::before` and a circular initials medallion for attribution.

#### 2.3 Form & Input Requirements
* The Final CTA contains an email signup: `.input-group` wraps a `<label>`, `<input type="email">`, a dedicated error `<p>` container, and the submit `.btn` — flex column on mobile, row on desktop.
* **States:** Empty, Focused (gold outline ring), Filled, Valid (success border + check symbol), Invalid (error border, `--text-error` message, error symbol), Disabled, Read-only. Validate on submit and blur; feedback renders in an `aria-live` region; state is never communicated by color alone.

#### 2.4 Modal / Popup Requirements
* If any dialog is used (e.g., pricing plan details): centered flex container, backdrop `rgba(45,58,45,0.6)`, Material Symbol close button, 350ms open/close transitions, `Esc` and overlay-click closing, focus trapping, focus return to trigger, `role="dialog"` / `aria-modal`.
* **Toast:** Fixed-position, `--z-toast`, `aria-live="polite"`, auto-dismiss, themed success/error variants — used for form submission feedback.
* **FAQ Accordion:** `<button aria-expanded>` triggers plus panels, chevron Material Symbol rotating over 350ms, fully keyboard operable.

### 3. CORE UX & MICRO-INTERACTION RULES
* **Responsive by Default:** Fluid type via `clamp()`; zero horizontal overflow at any width.
* **Smooth Animations:** All state changes use `transition: var(--transition-normal)` (350ms) with `--ease-standard`; under `prefers-reduced-motion`, disable parallax and reduce transitions to opacity-only.
* **Accessibility (a11y):** Semantic landmarks (`header`, `nav`, `main`, `section`, `article`, `footer`), correct ARIA on the theme toggle, accordion, and toast, logical focus order, full keyboard operability, AA contrast in both themes, always-visible focus rings.
* **Mandatory Visual Feedback:** Every click, hover, and submission triggers a visible state change.
* **Gentle Parallax:** Apply only to decorative elements (hero ornament frame, divider flourishes) via `requestAnimationFrame`-throttled `translate3d`, maximum ±12px, disabled under `prefers-reduced-motion`.

### 4. DELIVERABLE & OUTPUT FORMAT
* **File Structure:** Separate `index.html`, `style.css`, `script.js`. A single `<script src="script.js" defer>` reference — no inline scripts.
* **Naming Convention:** BEM throughout (`.hero__title`, `.card--featured`, `.input-group__error`); never mix conventions.
* **Copy:** Write complete, polished English copy in a Cultural & Heritage voice — timeless, craftsmanlike, classical-atelier tone (e.g., brand the site "Acanthus — The Classical Design Atelier"). **Lorem ipsum is prohibited.** No unrequested placeholders; every section ships with final copy.

### 5. PAGE STRUCTURE & THEME DIRECTION (build all, in order)
* **Global Header (sticky):** Cinzel wordmark with emboss, anchor nav (Features, How It Works, Testimonials, Pricing, FAQ), theme toggle, Material Symbol hamburger for the mobile menu (`aria-expanded`), smooth-scroll anchors.
1. **Hero:** Full-height Parchment panel with layered texture (radial vignette + SVG-noise data-URI), acanthus scroll frame via CSS `border-image` (fallback: `1px solid #A08C3A`), embossed Cinzel display headline, Garamond subheadline, primary + secondary CTAs, parallax ornament layers, and a column-inspired divider at its base (fluted `repeating-linear-gradient` shaft with capital/base border stacks).
2. **Features (3 cards):** Engraved-plaque section heading; three `.card` items with Material Symbol medallions, Cinzel titles, Garamond copy; grid 1 → 3 columns.
3. **How It Works (3 steps):** Roman-numeral medallions (I, II, III as real text, engraved styling), connecting gold hairline (hidden on mobile), step titles + copy; flex column → row.
4. **Testimonials:** Three quote cards with quotation-glyph ornament and attribution medallions; skeleton state if loaded asynchronously.
5. **Pricing (3 tiers):** Middle tier `.card--featured` with plaque badge; per-tier feature lists with Material Symbol checks; one `.btn` per tier with full button states.
6. **FAQ:** 4–6 accordion items styled as classical panels (cream on parchment / forest on forest), full keyboard + ARIA support.
7. **Final CTA:** Full-width band framed by acanthus border ornaments top and bottom, Cinzel headline, email signup `.input-group` with all form states; success triggers the button success state plus a toast.
8. **Footer:** Deep Forest band with Parchment text in light mode (inverted in dark), secondary link columns (About, Contact, Privacy, Terms, social icons via Material Symbols), small print, subtle top `border-image` ornament.

**Visual signature checklist:** parchment texture backgrounds, embossed Cinzel headings (`text-shadow: 0 1px 2px rgba(0,0,0,0.1)` light / light emboss dark), gold hairline borders, classical column dividers, acanthus scroll ornaments (CSS-referenced SVG data-URIs only), 350ms transitions, `letter-spacing: 0.04em` on headings.