[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-282-Emboss-Deboss":3},"# CODING PROMPT — Complete Landing Page · Theme: \"Emboss \u002F Deboss\"\n\n**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Build the complete landing page described below in a single attempt — full, production-ready code. No clarifying questions, no partial deliverables.\n\n**Project Brief**\n\n- **Deliverable:** A one-page marketing landing page for one coherent, fictional product you invent to fit the theme — a premium, tactile, print-heritage concept (e.g., an artisan stationery house, a letterpress design studio, or a premium typography toolkit). Write all user-facing copy yourself, in **English**, around that single concept.\n- **Theme:** Emboss \u002F Deboss — letterpress UI. Type looks stamped into or raised from tinted, tactile surfaces via a subtle 1px light\u002Fdark text-shadow pair. Keywords: pressed type, letterpress UI, tactile premium feel, morphism. Era: 2000s–present.\n- **Output Category:** Glass & Soft UI — express soft-UI morphism through inset\u002Foutset tactile shadow pairs. No glass blur or `backdrop-filter` is required; the emboss\u002Fdeboss system *is* the morphism signature.\n- **Sections, in order:** Sticky header\u002Fnav → Hero → Features (3 cards) → How It Works (3 steps) → Testimonials → Pricing (3 tiers) → FAQ → Final CTA → Footer with secondary links.\n- **Color Modes:** The source style declares no light\u002Fdark modes; therefore you must design, implement, and validate **both Light and Dark themes** before considering the build complete.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n### 1.1 CSS-First Architecture & Zero Inline CSS\n\n- **No Inline CSS:** The `style=\"...\"` attribute is forbidden anywhere in the HTML.\n- **Class\u002FID Selectors Only:** All design properties, layout rules, and states must be targeted via class or ID selectors defined in `style.css`.\n- **Minimal HTML Modifications:** HTML must remain clean, semantic, and agnostic of visual styling — retheming the site must require editing only the CSS file.\n- **Script Isolation:** Exactly one `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` reference. No inline `\u003Cscript>` blocks. (An external Tailwind CDN `\u003Cscript src=\"...\">` tag is permitted; any *inline* Tailwind config block is not.)\n\n### 1.2 CSS Variables & Theme Tokens\n\nStore every visual token in `:root`, with dark-mode overrides under a `.dark` class and `@media (prefers-color-scheme: dark)`. Use this canonical token block (adapted from the theme reference — keep these exact names):\n\n```css\n:root {\n  \u002F* backgrounds & text (light) *\u002F\n  --bg-primary: #dbd6cb;    \u002F* page background — warm paper; never #ffffff *\u002F\n  --bg-secondary: #d3cebf;  \u002F* raised surfaces: header, cards *\u002F\n  --bg-inset: #c8c2b0;      \u002F* pressed wells: inputs, badges, icon wells *\u002F\n  --text-primary: #4a4538;\n  --text-secondary: #6e6857;\n  \u002F* brand *\u002F\n  --primary: #7a5a3a;\n  --secondary: #a8763f;\n  \u002F* feedback — pick muted green\u002Fbrick-red hues harmonized with the warm\n     palette; must pass WCAG AA on BOTH themes (suggested light-mode starts:\n     --text-success: #4e6b3f; --text-error: #9c3a28) *\u002F\n  --text-success: \u002F* ... *\u002F;\n  --text-error: \u002F* ... *\u002F;\n  --border-default: #b8b1a0;\n  --border-success: \u002F* ... *\u002F;\n  --border-error: \u002F* ... *\u002F;\n  \u002F* signature emboss\u002Fdeboss pair *\u002F\n  --shadow-lo: rgba(60, 55, 40, 0.45);\n  --shadow-hi: rgba(255, 255, 250, 0.65);\n  --emboss-text: 1px 1px 0 var(--shadow-hi), -1px -1px 1px var(--shadow-lo);\n  --deboss-text: -1px -1px 0 var(--shadow-hi), 1px 1px 1px var(--shadow-lo);\n  \u002F* radius \u002F shadow \u002F spacing \u002F motion \u002F stacking *\u002F\n  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-pill: 999px;\n  --shadow-sm: 1px 1px 2px var(--shadow-lo), -1px -1px 1px var(--shadow-hi);\n  --shadow-md: inset 2px 2px 3px var(--shadow-lo), inset -2px -2px 3px var(--shadow-hi);\n  --shadow-lg: inset 3px 3px 6px var(--shadow-lo), inset -3px -3px 6px var(--shadow-hi);\n  --spacing-gap: 24px; \u002F* plus the --space-1 … --space-24 scale *\u002F\n  --transition-fast: 150ms; --transition-normal: 300ms;\n  --ease-standard: cubic-bezier(0.2, 0, 0, 1);\n  --z-dropdown: 1000; --z-modal: 1100; --z-toast: 1200;\n  \u002F* typography — Google Fonts, bound to --font-base *\u002F\n  --font-base: 'Lora', 'EB Garamond', serif;   \u002F* choose & load via Google Fonts *\u002F\n  --font-display: 'Libre Caslon Display', 'Playfair Display', serif;\n}\n```\n\n- **Contrast Pairing:** Every light background token must pair with a dark text token, and every dark background token with a light text token — enforce this pairing in **every** theme, not only the default.\n- **Light Background Rule:** Never default to pure white; the warm paper tones above are the light-mode surfaces. If a near-white is genuinely needed, use `#fefefe`, never `#ffffff`.\n- **Token Renaming:** The theme reference uses `--color-*` names; you must normalize everything into the canonical names above. `--bg-inset`, `--shadow-hi`, `--shadow-lo`, `--emboss-text`, and `--deboss-text` are approved theme extensions.\n\n### 1.3 Mandatory Dark Mode Support\n\n- **Implementation:** Provide dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `\u003Chtml>`; the class must override the media query.\n- **Dark Palette:** Design a warm dark counterpart (suggested starting point — validate and adjust for WCAG AA): `--bg-primary: #26221c; --bg-secondary: #2f2a22; --bg-inset: #1f1b15; --text-primary: #ece5d6; --text-secondary: #b3aa97; --primary: #c79a63; --secondary: #d9a86a; --border-default: #453f33; --shadow-lo: rgba(0,0,0,0.6); --shadow-hi: rgba(255,250,235,0.14)`.\n- **Shadow Recalibration:** The emboss\u002Fdeboss light\u002Fdark pair must be recalibrated for dark surfaces so stamped type remains legible — never reuse light-mode shadow values verbatim in dark mode.\n- **Theme Switching:** Background and text variables must switch seamlessly with zero HTML restructuring.\n- **Persistence:** Store the user's choice in `localStorage` (fall back to `prefers-color-scheme` on first visit) and provide a visible toggle control in the header with correct `aria-pressed` and a dynamic `aria-label` (\"Switch to dark theme\" \u002F \"Switch to light theme\"). Initialize the theme at the top of `script.js` to minimize flash of the wrong theme.\n- **Validation Clause:** The source style declares no color modes — treat dual-mode validation as a release gate, not an option.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n\n- **Default Alignment Rule:** Every flex container must default to `align-items: center` unless an exception is explicitly justified in a CSS comment.\n- **Mobile-Friendly First:** All flex layouts must be responsive out of the box — rows convert to columns on smaller viewports. No horizontal scrolling at any width from 320px up.\n- **Sticky Header Offset:** Apply `scroll-margin-top` to all anchored sections so the sticky header never covers section headings.\n\n### 1.5 Framework Default & Tailwind CSS Integration\n\n- Use Tailwind CSS or clean custom CSS driven by `@layer` \u002F `@apply`. If using the Tailwind CDN, do so **without an inline config block** — bind utilities to CSS variables via arbitrary values (e.g., `bg-[var(--bg-secondary)]`).\n- All utility classes must map back to CSS variables or generic reusable class names (`.btn`, `.card`, `.input-group`). No hardcoded hex values outside `:root` and the theme override blocks.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n\n- **Text:** Load Google Fonts via `\u003Clink>` (with preconnect) and bind them to `--font-base` and `--font-display`. Honor the theme's Georgia\u002FCaslon letterpress intent with Google Fonts serif equivalents (e.g., `Lora` or `EB Garamond` for body, `Libre Caslon Display` or `Playfair Display` for headings). *Exception clause: the theme's Georgia\u002FCaslon references express serif intent only — do not ship local or system font stacks as the primary faces.*\n- **Icons:** Use Google Material Symbols (Rounded variant) for every icon — navigation, feature icons, checkmarks, stars, expand arrows, theme-toggle sun\u002Fmoon, social glyphs, close buttons. Raw inline SVGs, local icon files, and emoji icons are forbidden.\n- **Avatars:** Render testimonial avatars as initials set in a debossed circular well, or as a Material Symbol `person` icon.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Button Component Requirements\n\nStyle all states via BEM classes (`.btn`, `.btn--primary`, `.btn--ghost`, `.btn--loading`, `.btn-danger`):\n\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` Minimum touch target 44×44px. Embossed label (`--emboss-text`) on a raised surface (`--shadow-sm` combined with a soft drop shadow).\n- **Hover:** Elevation\u002Fshadow shift or subtle brightness change, with `cursor: pointer`.\n- **Focus:** Distinct `:focus-visible` ring built from `--primary` (`outline`\u002F`box-shadow`, 2px offset) for keyboard navigation.\n- **Active\u002FPressed:** The signature tactile moment — text flips to `--deboss-text`, surface swaps to inset `--shadow-lg`, plus `transform: scale(0.97)`.\n- **Loading:** Disables interaction and prevents double-clicks\u002Fdouble-submits; renders a CSS border spinner or pulsing Material Symbol without changing button dimensions; expose `aria-busy=\"true\"`.\n- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n- **Success\u002FError:** Temporary feedback states driven by `--text-success` \u002F `--text-error`, always paired with an icon or text — never color alone.\n- **Danger:** `.btn-danger` must be visually distinct in both light and dark themes.\n- The Final CTA submit button must demonstrate the full sequence: idle → loading → success (or error).\n\n### 2.2 Card Component Requirements\n\nApplies to Features cards, Testimonial cards, and Pricing tiers:\n\n- **Default:** Flexible Flexbox (column) layout, `--bg-secondary`, `--radius-lg`, 1px `--border-default`, subtle elevation.\n- **Hover:** `transform: translateY(-2px)` plus a shadow shift — apply one consistent hover behavior across all card types.\n- **Focus-within:** Card border\u002Faccent highlights when a child link or button receives focus.\n- **Loading (Skeleton):** Define a shimmer animation in CSS (`.card--skeleton`) that prevents layout jumps, even if only demonstrated on one card.\n- **Empty State:** Define a structured fallback layout (`.card--empty`) featuring a Google Material Symbol and clear guidance text; use it for the form feedback area.\n\n### 2.3 Form & Input Requirements (Final CTA email capture)\n\n- **States:** Empty, Focused (debossed well deepens + `--primary` ring via `color-mix`), Filled, Valid (`--border-success` + check icon), Invalid (`--border-error`, red text, error icon, message), Disabled, Read-only.\n- **Structure:** `.input-group` as a flex column wrapping a visible `\u003Clabel>`, the `.input` field (debossed well: `--bg-inset` + `--shadow-md`), and a dedicated error\u002Fsuccess feedback container with `aria-live=\"polite\"`.\n- **Validation:** Validate email format on blur and on submit; render inline messages; on success show a check icon and confirmation copy.\n\n### 2.4 Modal \u002F Popup Requirements\n\nApplies to any overlay you choose to add (optional — e.g., a \"compare plans\" dialog). If none is implemented, keep `--z-modal` reserved and unused:\n\n- **States:** Opening, Open, Loading, Success\u002FError, Closing — all animated via CSS transitions.\n- **UX Features:** Centered flex container (`align-items: center`), backdrop overlay, Google Material Symbol close button, keyboard focus trapping, `role=\"dialog\"` + `aria-modal`, and closing via `Esc` or overlay click.\n\n### 2.5 FAQ Accordion Requirements\n\n- Prefer native `\u003Cdetails>` \u002F `\u003Csummary>`; otherwise use the ARIA button + region pattern with `aria-expanded` and `aria-controls`.\n- Summary row: embossed question text, rotating Material Symbol `expand_more` icon, full-width touch target, clearly visible focus state.\n- Animate expansion with CSS only; collapse animations under `prefers-reduced-motion`.\n\n### 2.6 Pricing Requirements\n\n- Three tiers; the middle tier is featured with a stronger raised treatment (deeper outset shadow or `--secondary` border) and a debossed `.badge` reading \"Most Popular\".\n- Each tier: name, price set in embossed display type, billing period, feature list with Material Symbol `check` icons, and a CTA button with full §2.1 states (featured tier uses `.btn--primary`).\n- Stack to a single column on mobile.\n\n### 2.7 Testimonials Requirements\n\n- Three cards: quote text, star rating (Material Symbol `star`), avatar (initials in a debossed circle), name, and role.\n- Card hover and focus-within behavior per §2.2.\n\n### 2.8 Header, Navigation & Theme Toggle Requirements\n\n- Sticky header built on the theme's `.nav` pattern: flex, `align-items: center`, `--bg-secondary`, inset shadow, `--z-dropdown`.\n- Desktop: inline anchor links to every section. Mobile: hamburger (Material Symbol `menu`) opening a drawer with focus trapping and `Esc`-to-close.\n- Theme toggle per §1.3, placed in the header. Anchor navigation uses smooth scrolling, disabled under reduced motion.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by Default:** Fluid sizing and responsive breakpoints with zero horizontal overflow.\n- **Smooth Animations:** CSS transitions on all state changes (`transition: var(--transition-normal)`), fully respecting `prefers-reduced-motion` (disable transforms, shimmer, and drawer\u002Fmodal slides).\n- **Accessibility (a11y):** WCAG AA contrast in both Light and Dark modes. Never rely solely on color to communicate state. Semantic HTML5 landmarks (`header`, `nav`, `main`, `section`, `footer`), exactly one `\u003Ch1>` (in the Hero), logical DOM\u002Ffocus order, full keyboard operability, `aria-live` regions for dynamic feedback (form errors, success messages, loading states), and a skip-to-content link.\n- **Mandatory Visual Feedback:** Every click, hover, or submission must trigger a visible state change.\n- **Emboss Legibility Guard:** Text-shadow pairs must stay 1px-subtle and must never substitute for real color contrast.\n- **Destructive Actions:** Any `.btn-danger` or delete-style action must be visually distinct in both themes.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **File Structure:** Separate `index.html`, `style.css`, and `script.js`. No inline `\u003Cscript>` blocks beyond the single deferred entry-point reference. Zero `style=` attributes.\n- **Naming Convention:** BEM only (`block__element--modifier`) across the entire deliverable — never mix conventions.\n- **Copy:** Write realistic, on-brand English copy around your invented product concept. No lorem-ipsum-only submissions; placeholders only where content is genuinely unspecified.\n- **script.js Scope:** Theme toggle + persistence, mobile drawer, optional FAQ single-open enhancement, email form validation with loading\u002Fsuccess\u002Ferror flow, and footer year. No other behavior; no external JS libraries.\n- **Quality Gate:** Valid semantic HTML, no console errors, both themes visually validated, no horizontal scroll from 320px up.\n\n---\n\n## 5. EMBoss \u002F DEBOSS SIGNATURE TECHNIQUE — REFERENCE\n\nCondensed from the reference specification; port into your BEM class structure using the canonical token names from §1.2 (do not keep `--color-*` names):\n\n- **Usage Map:** Headings, nav links, buttons, prices, and section titles are **embossed** (`--emboss-text`). Inputs, badges, step-number wells, icon wells, and placeholders are **debossed** (`--deboss-text`). Button `:active` flips emboss → deboss — that press is the theme's signature micro-interaction.\n- **Component Reference:** `body` uses `--bg-primary` \u002F `--text-primary` \u002F `--font-base`. `.nav` is a flex bar on `--bg-secondary` with `--shadow-md`. `.btn` combines `--shadow-sm` + `--shadow-md`, transitions shadows with `--ease-standard`, and its `.btn--primary` variant uses `--secondary` as surface with a dark warm text color. `.card` sits on `--bg-secondary` with `--radius-lg` and a soft drop shadow. `.input` is a debossed well on `--bg-inset`. `.badge` is a debossed pill on `--bg-inset` with `--radius-pill`.\n- **Textured Background:** Optionally add a subtle paper-grain texture using CSS gradients only (no image files); it must not reduce text contrast in either theme.\n- **Dark Mode:** Recalibrate `--shadow-hi` \u002F `--shadow-lo` per §1.3 and re-validate the stamped-type legibility.\n\n---\n\n## 6. SECTION-BY-SECTION REQUIREMENTS\n\n1. **Header:** Sticky nav — wordmark in embossed display type, anchor links, theme toggle, compact CTA button; mobile hamburger drawer per §2.8.\n2. **Hero:** Debossed `.badge` value proposition, `\u003Ch1>` in embossed display type, supporting subcopy in `--text-secondary`, primary + secondary CTA buttons, and a tactile visual composition built purely from embossed\u002Fdebossed CSS surfaces (no image files required).\n3. **Features:** Section heading + intro, then 3 cards — each with a Material Symbol icon inside a debossed circular well, embossed `\u003Ch3>`, and descriptive copy.\n4. **How It Works:** 3 steps — each with a debossed number well (01\u002F02\u002F03), title, and description; horizontal with a connecting rule on desktop, stacked on mobile.\n5. **Testimonials:** 3 cards per §2.7.\n6. **Pricing:** 3 tiers per §2.6.\n7. **FAQ:** 5–6 accordion items per §2.5.\n8. **Final CTA:** A raised panel (`--radius-lg`) with embossed heading, subcopy, and the email-capture `.input-group` per §2.3, including the full submit lifecycle (idle → loading → success\u002Ferror with `aria-live` feedback).\n9. **Footer:** Secondary links grouped into 3–4 columns, social icons (Material Symbols), auto-updating copyright year, and a small embossed wordmark.\n\n**Definition of Done:** All sections present and populated with real English copy · both themes toggleable, persisted, and AA-validated · every component state from §2 implemented in CSS · zero inline styles or inline scripts · keyboard-navigable end to end · no horizontal scroll · no console errors.\n",1791954984215]