[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-767-GNOMON-the-sundial-garden":3},"# CODING AGENT PROMPT — Build: \"GNOMON — the sundial garden\" Landing Page\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality landing page in a single pass — your first attempt must be shippable. No partial scaffolds, no TODOs.\n\n**Project:** GNOMON — the sundial garden. A minimal\u002Fzen, 2020s-contemporary landing page for a conceptual sundial garden. The mood: a walled morning garden, warm earth tones, frosted-glass panels, quiet serif typography, and light-driven CSS motifs (a gnomon blade, its cast shadow, hour arcs). Every visual effect — glass, blur, hover, transitions — must feel calm and deliberate, never busy.\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** anywhere in `index.html`.\n* **Class\u002FID Selectors Only:** Every color, layout rule, effect, and state is defined in `style.css` and targeted via classes\u002FIDs.\n* **Minimal HTML Modifications:** HTML stays semantic and style-agnostic. All theming must be achievable by editing `style.css` alone.\n\n### 1.2 CSS Variables & Theme Tokens\nStore **all** visual tokens in `:root` and theme classes. Use exactly this palette mapping:\n\n| Token | Value |\n|---|---|\n| `--primary` | `#4a3a28` (deep umber — headings, strong accents) |\n| `--secondary` | `#5a4a32` (warm bronze) |\n| `--accent` | `#a08c6a` |\n| `--accent-deep` | `#8a6e44` (focus rings, active accents) |\n| `--sand` | `#c9b896` |\n| `--bg-primary` | `#f6eee0` (warm cream — page background) |\n| `--bg-secondary` | `#fefefe` (cards\u002Fpanels — **never `#ffffff`**) |\n| `--text-primary` | `#4a3a28` |\n| `--text-secondary` | `#5a4a32` |\n| `--text-success` \u002F `--text-error` | Muted sage green and terracotta meeting WCAG AA on cream (e.g., `#3f6d50` \u002F `#a8462e`) |\n| `--border-default` \u002F `--border-error` \u002F `--border-success` | Low-opacity umber\u002Fsand borders + success\u002Ferror variants |\n| `--glass-bg` \u002F `--glass-blur` \u002F `--glass-border` | Translucent panel tokens (see Section 2.1) |\n\nAdditionally define: `--font-base`, `--font-display`, `--radius-sm: 6px`, `--radius-md: 14px`, `--radius-lg: 26px`, `--shadow-sm`, `--shadow-md` (warm-tinted, e.g., `0 12px 32px rgba(74,58,40,0.14)`), `--spacing-gap: 1.5rem`, `--transition-fast: 150ms`, `--transition-normal: 320ms`, `--ease-standard: cubic-bezier(0.22, 1, 0.36, 1)`, `--z-dropdown: 100`, `--z-modal: 200`, `--z-toast: 300` (define z tokens even if unused).\n\n* **Contrast Pairing (mandatory, every theme):** Light backgrounds always pair with dark text tokens; dark backgrounds always pair with light text tokens.\n* **Accent Color Discipline:** `#a08c6a`, `#c9b896`, and `#8a6e44` are reserved for **large display text (≥24px), icons, borders, gradients, and decorative accents only** — never small body text, to preserve AA contrast.\n* **Pure white is forbidden** — use `#fefefe` where a near-white surface is needed.\n\n### 1.3 Mandatory Dark Mode Support\n* **Dark Mode is not optional.** Define dark tokens under both a `.dark` class selector and `@media (prefers-color-scheme: dark)` — implement via variable overrides only, no HTML restructuring.\n* **Night-garden palette:** Derive dark mode from the umber hue — warm espresso\u002Fink backgrounds (e.g., `--bg-primary: #201a13`, `--bg-secondary: #2b241b`), text `--text-primary: #f6eee0`, `--text-secondary: #c9b896`, borders `rgba(160,140,106,0.28)`, dark glass tokens, deeper shadows, and adjusted success\u002Ferror tokens (e.g., `#a3c293` \u002F `#e8917a`). **Never cold gray, navy, or pure black.**\n* **Button inversion:** The primary button must invert per theme — Light: `#4a3a28` background + `#f6eee0` text; Dark: `#f6eee0` background + `#4a3a28` text — guaranteeing the contrast pairing in both themes.\n* **Exception clause:** The source style spec is light-first. The Zen Garden light theme is the hero presentation, but this does **not** waive Dark Mode — the night-garden variant must be equally polished.\n* **Toggle & Persistence:** A visible toggle in the header (Material Symbols `light_mode` \u002F `dark_mode`) with correct `aria-pressed` and a dynamically updated `aria-label`. Persist choice in `localStorage` (`gnomon-theme`); on first visit fall back to `prefers-color-scheme`, defaulting to light.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n* Build all layout structure with Flexbox (Tailwind flex utilities or `display: flex`).\n* **Every flex container must default to `align-items: center`** unless an exception is explicitly justified in a CSS comment.\n* Mobile-first: card rows and step rows become columns below ~768px; fluid type via `clamp()`; no horizontal scrolling at any width; minimum touch target 44×44px.\n\n### 1.5 Framework: Tailwind CSS\n* Use Tailwind CSS (CDN) for layout\u002Fspacing utilities **unless** a build step makes clean custom CSS simpler — either way, all visual identity, tokens, component classes, and states live in `style.css`.\n* Utilities must map back to CSS variables via generic reusable component classes: `.btn`, `.card`, `.glass-panel`, `.input-group`, `.accordion-item`, `.pricing-card`.\n* One fixed naming convention across the whole deliverable — never mix conventions.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n* **Fonts:** Google Fonts — `Cormorant Garamond` (500\u002F600 + italic, display\u002Fheadings) and `Inter` (400\u002F500, body). Bind via `\u003Clink>` tags to `--font-display` and `--font-base`.\n* **Icons:** Google Material Symbols (Rounded style). **Inline SVGs, local icon files, and emoji icons are forbidden.**\n* **Decorative motifs (gnomon blade, cast shadow, hour arcs, sun glow) must be built with pure CSS** — gradients, borders, `clip-path`, pseudo-elements, transforms.\n\n---\n\n## 2. VISUAL LANGUAGE — GLASS, BLUR, HOVER\n\n### 2.1 Glass Effect Specification\n* Glass panels (`header bar, hero panel, cards, final CTA`): `background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(1.15); -webkit-backdrop-filter: …; border: 1px solid var(--glass-border); border-radius: var(--radius-lg);`\n* **Fallback required:** wrap `backdrop-filter` in `@supports not (backdrop-filter: blur(1px))` → increase background opacity to ~0.9, no blur.\n* Light glass: `rgba(254,254,254,0.55)` bg \u002F `rgba(255,255,255,0.6)` border. Dark glass: `rgba(43,36,27,0.55)` bg \u002F `rgba(201,184,150,0.18)` border.\n\n### 2.2 Hover & Motion Language\n* Hover shifts are gentle: `translateY(-2px)`, `--shadow-md`, `filter: brightness(1.03)`, icon color drift toward `--accent-deep`. Nothing bounces or scales dramatically.\n* All interactive state changes use `transition: var(--transition-normal) var(--ease-standard)`.\n* Hero may include one subtle ambient animation (a 24s \"shadow drift\" across the gnomon motif). **All animations and transitions must be disabled\u002Fminimized under `prefers-reduced-motion: reduce`.**\n\n---\n\n## 3. SECTION-BY-SECTION SPECIFICATIONS\n\nWrite **all user-facing copy in English** in Gnomon's quiet, precise, light-imagery voice (e.g., hero headline: *\"Time, told in light.\"*). Real copy everywhere — no lorem ipsum, no placeholder text.\n\n### 3.1 Header — Sticky Glass Navigation\nWordmark \"GNOMON\" in the serif display font; anchor links (Features, How It Works, Testimonials, Pricing, FAQ); theme toggle; small primary CTA. Sticky with `--z-dropdown`, glass background, hairline bottom border appearing on scroll. Below 768px, collapse links into a keyboard-operable menu button (`aria-expanded`, `aria-controls`).\n\n### 3.2 Hero\nFull viewport height on desktop. Background layers built in CSS: warm radial-gradient sun glow (top right), faint concentric \"hour arc\" circles (1px borders, low-opacity sand), and a translucent gnomon blade (a `clip-path` triangle) casting a soft skewed gradient \"shadow\" across the section. Centered glass panel contains: eyebrow (\"A garden that keeps time\"), a single `\u003Ch1>`, one line of subcopy, and two CTAs — primary \"Enter the garden\" and secondary anchor-link \"See how it works\". Include a quiet scroll cue (Material Symbols `expand_more`).\n\n### 3.3 Features — 3 Cards\nFlex row → column on mobile, `var(--spacing-gap)` gutters. Three glass cards, each: Material Symbols icon in a soft circle (`wb_sunny`, `spa`, `self_improvement` suggested), serif title, 2-line body copy. Suggested themes: honest solar time, design for stillness, hours you can watch pass. Cards apply all states from Section 4.2.\n\n### 3.4 How It Works — 3 Steps\nThree steps with oversized serif numerals (01 \u002F 02 \u002F 03), titles, and short copy (suggested: \"The blade stands\" \u002F \"The sun writes\" \u002F \"You simply notice\"), joined by a thin `--border-default` connector line on desktop; stacked vertically on mobile. Subtle hover highlight per step.\n\n### 3.5 Testimonials\nThree quote cards: Material Symbols `format_quote`, italic serif quote, name + role, and a circular avatar placeholder using a Material Symbols `person` icon (no external images). Realistic names and full quotes in the Gnomon voice.\n\n### 3.6 Pricing — 3 Tiers\nTiers named **Dawn** (free), **Meridian** (recommended), **Dusk** (premium), with monthly prices, feature lists using Material Symbols `check` icons, and a CTA button per tier. The Meridian card is visually elevated: 1px `--accent` border, a \"Recommended\" text badge (not color-only), desktop `translateY(-8px)`, stronger shadow, and the primary button; other tiers use secondary buttons. All button states from Section 4.1 apply.\n\n### 3.7 FAQ — Accordion\n5–6 written questions (e.g., \"What is a gnomon, exactly?\", \"Does the garden work on cloudy days?\", \"Can I visit at night?\", \"Is the garden accessible?\", \"Can I cancel my membership?\"). ARIA accordion: each item is a `\u003Cbutton aria-expanded aria-controls>` header plus a panel (`role=\"region\"`), animated open\u002Fclose via the `grid-template-rows: 0fr → 1fr` technique, chevron (`expand_more`) rotating 180°. Fully keyboard operable; state is communicated by chevron rotation **and** `aria-expanded`, never color alone.\n\n### 3.8 Final CTA\nFull-bleed glass panel over a warm gradient sun-glow band: serif `\u003Ch2>`, one line of copy, primary button (\"Begin your visit\") and a secondary text link.\n\n### 3.9 Footer — Secondary Links\nWordmark + one-line tagline; three muted link columns (e.g., Garden: Visit \u002F Hours \u002F Journal \u002F Contact; Explore: Features \u002F How it works \u002F Pricing \u002F FAQ; Legal: Privacy \u002F Terms \u002F Accessibility); social icon links (Material Symbols with `aria-label`); copyright line; back-to-top link with smooth scrolling guarded by `prefers-reduced-motion`.\n\n---\n\n## 4. COMPONENT DESIGN SPECIFICATIONS\n\n### 4.1 Buttons\nAll states styled via classes; variants: `.btn-primary`, `.btn-secondary` (glass\u002Foutline), `.btn-ghost`, and `.btn-danger` (distinct in **both** themes).\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px.\n* **Hover:** brightness\u002Fshadow shift, `cursor: pointer`.\n* **Focus:** distinct `:focus-visible` ring (2px `--accent-deep`, 2px offset — `--sand` in dark mode).\n* **Active:** `transform: scale(0.97)`.\n* **Loading:** disables interaction, prevents double-clicks, renders a CSS spinner or animated Material Symbol **without changing button dimensions**.\n* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n* **Success\u002FError:** temporary feedback styles driven by `--text-success` \u002F `--text-error` and matching border tokens.\n\n### 4.2 Cards\n* **Default:** Flexbox layout, glass or `--bg-secondary` surface, subtle `--border-default`, `--shadow-sm`, `--radius-md`\u002F`--radius-lg`.\n* **Hover:** elevation shift + `translateY(-2px)`.\n* **Focus-within:** border highlights `--accent-deep` when a child link\u002Fbutton receives focus.\n* **Loading (Skeleton):** define shimmer animation styles that prevent layout jumps.\n* **Empty State:** structured fallback (Material Symbol + guidance text) defined in CSS.\n\n### 4.3 Forms & Inputs\nIf any input appears anywhere on the page (e.g., an optional newsletter field), it must implement: **empty, focused (outline ring), filled, valid (success border + icon), invalid (error border + error icon + message — not color alone, announced via `aria-live`), disabled, read-only.** Structure: `.input-group` flex container wrapping label, field, and a dedicated error message container.\n\n### 4.4 Accordion \u002F Modal\n* The FAQ accordion (Section 3.7) is mandatory and must meet its full ARIA\u002Fkeyboard spec.\n* A modal is **not required** for this page. If you introduce one, it must include: centered flex overlay with backdrop, Google Icon close button, focus trapping, `Esc` and overlay-click closing, and animated opening\u002Fopen\u002Floading\u002Fsuccess-error\u002Fclosing states via CSS transitions.\n\n---\n\n## 5. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by default:** fluid sizing, standard breakpoints, zero horizontal overflow.\n* **Smooth animations:** CSS transitions on all state changes; fully respect `prefers-reduced-motion`.\n* **Accessibility (a11y):** AA contrast in light and dark modes; semantic HTML5 landmarks (`header`, `nav`, `main`, `footer`); a skip-to-content link; exactly one `\u003Ch1>` with logical heading order; ARIA roles\u002Flabels on all custom widgets (toggle, menu, accordion); logical DOM\u002Ffocus order; full keyboard operability — no mouse-only interactions; `aria-live` regions for any dynamic feedback.\n* **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.\n* **Destructive actions** (if any appear) must be visually distinct in both themes.\n* **JS scope (in `script.js` only):** theme toggle + persistence, accordion behavior, subtle IntersectionObserver reveal-on-scroll (fade\u002Ftranslate 16px — skipped or instant under reduced motion), guarded smooth anchor scrolling. Keep JavaScript minimal and unobtrusive.\n\n---\n\n## 6. DELIVERABLE & OUTPUT FORMAT\n\n* **Files:** `index.html`, `style.css`, `script.js` — separate, clean files.\n* **Scripts:** `index.html` may reference only external scripts (Tailwind CDN engine if used) plus a single `\u003Cscript src=\"script.js\" defer>`. **No inline script code blocks, no inline styles.** Google Fonts and Material Symbols load via `\u003Clink>` tags.\n* **Naming:** one consistent convention (generic component classes + Tailwind layout utilities, or one fixed custom set) — never mixed.\n* **Copy:** complete, real English copy for every headline, paragraph, testimonial, FAQ answer, and pricing feature in the voice defined in Section 3 — placeholders are permitted only where genuinely unspecified content cannot be invented.\n* All class names, IDs, variables, and file names in English\u002FASCII.\n",1791954992597]