[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-326-Notebook-Tabs":3},"**SYSTEM PROMPT — SENIOR FRONTEND ENGINEER TASK: \"NOTEBOOK TABS\" LANDING PAGE (LUXURY & EDITORIAL)**\n\n**Role & Objective:** Act as a Senior Frontend Engineer and Expert UI Designer. Code a complete, production-ready landing page in a single response, on the first attempt — no partial builds, no truncation. **Landing Page Theme:** Notebook Tabs — editorial, organized, elegant, tactile (2024–2026 Editorial Tactile era). The page must read as a premium notebook: a cream paper container (#f8f6f1) resting on a dark outer background (#2d2d2d), colorful vertical section tabs on the right edge, binder holes on the left, and smooth 300ms page-turn transitions. Output category: Luxury & Editorial — generous whitespace, refined editorial typography, restrained effects. **Sections to add (in order):** sticky Header; Hero; Features (3 cards); How It Works (3 steps); Testimonials; Pricing (3 tiers); FAQ; Final CTA; Footer with secondary links.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n* All styling lives in `style.css`. The `style=\"...\"` attribute is forbidden anywhere in the HTML.\n* Target every design property, layout rule, and state via class or ID selectors only.\n* Keep HTML semantic and style-agnostic: restyling the site must require editing CSS only, never markup.\n\n**1.2 CSS Variables & Theme Tokens**\nStore all visual tokens in `:root` (theme variants per 1.3). Required tokens with Notebook Tabs values:\n* **Colors:** `--primary: #2d2d2d` (Outer Dark — CTA fill on paper); `--secondary: #c7b8ea` (Tab Lavender accent); `--bg-primary: #2d2d2d` (outer dark); `--bg-secondary: #f8f6f1` (Page Cream paper); `--text-primary: #1a1a1a`; `--text-secondary: #5c574e` (warm gray, ≥ 4.5:1 on cream); `--text-on-dark: #f8f6f1`; `--text-success: #1f7a4d`; `--text-error: #b3261e`; `--border-default: #e4ddcd`; `--border-success: #1f7a4d`; `--border-error: #b3261e`.\n* **Tab tokens:** `--tab-mint: #98d4bb`; `--tab-lavender: #c7b8ea`; `--tab-pink: #f4b8c5`; `--tab-sky: #a8d8ea`; `--tab-cream: #ffe6a7`.\n* **Radius:** `--radius-sm: 4px`; `--radius-md: 8px`; `--radius-lg: 16px`.\n* **Shadows:** `--shadow-sm: 0 2px 8px rgba(0,0,0,0.08)`; `--shadow-md: 0 4px 20px rgba(0,0,0,0.15)`; optional `--shadow-lg: 0 12px 32px rgba(0,0,0,0.22)` for hover elevation.\n* **Spacing & transitions:** `--spacing-gap: 1.5rem`; `--transition-fast: 150ms`; `--transition-normal: 300ms`; `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.\n* **Elevation\u002Fstacking:** `--z-dropdown: 10`; `--z-modal: 100`; `--z-toast: 200`. Header and tabs must stack below modal and toast.\n* **Fonts:** `--font-display: 'Bodoni Moda', Georgia, serif`; `--font-base: 'DM Sans', sans-serif`.\n* **Contrast pairing (mandatory in every theme):** light backgrounds pair with `#1a1a1a` text; dark surfaces pair with `#f8f6f1` text. Never default to pure `#ffffff` — if a near-white is needed, use `#fefefe`.\n* Component rules must consume tokens via `var(--...)` — no raw hex values outside `:root`\u002Ftheme blocks.\n\n**1.3 Mandatory Dark Mode Support**\n* Define dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `\u003Chtml>` (class takes precedence for the manual toggle).\n* Background and text variables must switch seamlessly with zero HTML restructuring.\n* Persist the user's choice in `localStorage`; fall back to `prefers-color-scheme` on first visit. Provide a visible header toggle: a real `\u003Cbutton>` with `aria-pressed` and a dynamic `aria-label` (\"Switch to dark mode\" \u002F \"Switch to light mode\"), showing the `dark_mode`\u002F`light_mode` Material Symbol.\n* Dark variant design: deepen `--bg-primary` to `#1a1a1a`; dim the paper `--bg-secondary` to a muted warm cream (e.g., `#eae3d4`); desaturate tab tokens ~10–15%; adjust `--text-secondary`, borders, and shadows; keep every pairing ≥ 4.5:1. Tab text stays `#1a1a1a` (pastels remain light in both themes).\n* **Exception (explicit):** the Notebook Tabs source spec declares dark mode unsupported (\"✗ No\") — implement it anyway as the subdued nocturnal variant described above; the toggle must remain visible and functional.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n* Build every layout structure with Flexbox.\n* Every flex container must default to `align-items: center` unless an exception is explicitly justified (e.g., stretched card columns) in a CSS comment.\n* Mobile-first: convert rows to columns at breakpoints; the page must never scroll horizontally at any width ≥ 320px — do not rely on `overflow-x: hidden` to mask overflow.\n* All interactive targets ≥ 44×44px.\n\n**1.5 Framework Default & Tailwind CSS Integration**\n* Use Tailwind CSS (Play CDN acceptable) for structural utilities only: flexbox, gaps, padding, responsive breakpoints.\n* All visual identity — colors, fonts, shadows, radii, states — must come from `style.css` component classes driven by the tokens in 1.2. Never hardcode theme hex values in utility-class markup; utilities must map back to generic reusable classes: `.btn`, `.card`, `.input-group`, `.tab`, `.page`.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* Load via Google Fonts `\u003Clink>` tags (with preconnect): **Bodoni Moda** 400\u002F700 (italic 400 allowed for quotes) for all display\u002Fheadings; **DM Sans** 400\u002F500 for body and UI, bound to `--font-base`.\n* Icons: Google Material Symbols (Rounded), ligature-based (e.g., `\u003Cspan class=\"material-symbols-rounded\">edit_note\u003C\u002Fspan>`). Inline SVGs, local icon files, and emoji-as-icons are forbidden.\n* Binder holes are CSS-drawn decorative elements (not icons) and must be `aria-hidden=\"true\"`.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component (`.btn`, `.btn--primary`, `.btn--ghost`, `.btn--danger`)**\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px; DM Sans 500.\n* **Hover:** brightness\u002Fshadow shift + `cursor: pointer`.\n* **Focus:** distinct `:focus-visible` ring built from CSS variables (dark ring on paper, light ring on dark surfaces).\n* **Active\u002FPressed:** `transform: scale(0.97)`.\n* **Loading (`.is-loading`):** disables interaction and prevents double-clicks; renders a CSS spinner or animated Material Symbol without distorting button dimensions.\n* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n* **Success\u002FError:** temporary feedback styled with `--text-success` \u002F `--text-error`, always icon + text (never color alone).\n* Primary on paper: `--primary` fill with cream text; on dark surfaces: cream fill with dark text. `.btn-danger` must be defined in CSS and visually distinct in both themes.\n\n**2.2 Card Component (`.card`)**\n* **Default:** flexible Flexbox layout, subtle `--border-default` border, `--radius-md`, `--shadow-sm`, panels on `--bg-secondary`.\n* **Hover:** elevation shift + `transform: translateY(-2px)`.\n* **Focus-within:** highlight the card border when a child link\u002Fbutton receives focus.\n* **Loading (skeleton):** shimmer animation keyframes defined in CSS; no layout shift.\n* **Empty state:** structured fallback with a Material Symbol icon and guidance text, defined in CSS.\n* Feature and pricing cards carry tab-color accents (top rule or icon chip).\n\n**2.3 Form & Input (`.input-group`)**\n* **Structure:** flex container wrapping a `\u003Clabel>`, the input, and a dedicated error-feedback container.\n* **States:** empty; focused (outline ring); filled; valid (success border + check icon); invalid (error border + icon + message, `aria-invalid`, message linked via `aria-describedby`); disabled; read-only.\n* Errors and status changes announced via `aria-live=\"polite\"`.\n* Used in the Final CTA email capture and the modal form.\n\n**2.4 Modal \u002F Popup (`.modal`)**\n* **States:** opening, open, loading, success, error, closing — all animated with CSS transitions (`var(--transition-normal)`).\n* **UX:** centered flex overlay (`align-items: center`), dimmed backdrop, Material Symbol close button, keyboard focus trap, close via `Esc` and overlay click, `role=\"dialog\"` + `aria-modal=\"true\"`, focus returned to the trigger.\n* **Trigger:** every \"Choose plan\" \u002F \"Get started\" CTA opens a \"Start your notebook\" modal containing the 2.3 form. Submit → loading (≥ 1s) → success (check icon, confirmation copy, toast) or error. To demonstrate the error state deterministically, treat any address ending in `@example.com` as a simulated server failure.\n\n**2.5 Notebook-Specific Components (canonical class names — preserve exactly)**\n* **Paper container `.page`:** `background: var(--bg-secondary)` (#f8f6f1); `box-shadow: 0 4px 20px rgba(0,0,0,0.15)` (use `--shadow-md`); `border-radius: 8px` (use `--radius-md`). Centered, `max-width` ≈ 1200px, generous padding, resting on the dark outer background. Optional: faint ruled-line texture via `repeating-linear-gradient` of `--border-default` at low alpha. All content sections render as \"pages\" inside it.\n* **Section tabs `.tab`:** `writing-mode: vertical-rl; font-size: clamp(0.5rem, 1vh, 0.7rem); padding: 12px 6px; border-radius: 0 8px 8px 0;` — exact values. Tabs protrude from the paper's right edge onto the dark background, stacked with `--spacing-gap`, each an anchor to its section. One pastel per tab: Features = mint, How It Works = lavender, Testimonials = pink, Pricing = sky, FAQ = cream; tab text is `#1a1a1a`. Hover: extend outward (`translateX`) + shadow. Active section (via IntersectionObserver): `aria-current=\"true\"` plus a non-color cue (extended position, bolder weight). Satisfy the 44px hit-area minimum with a transparent pseudo-element while keeping the slim visual. Reserve right margin so protrusion never causes overflow; below ~880px, restyle tabs as a wrapped horizontal chip row (`writing-mode: horizontal-tb`) — no overflow, targets still ≥ 44px.\n* **Binder holes `.binder-hole`:** `width: 12px; height: 12px; border-radius: 50%; border: 2px solid #ccc; background: #2d2d2d` — exact values, mapped to tokens (`background: var(--bg-primary)`; ring color as a theme-adjustable token). Render a decorative, evenly spaced column of holes along the paper's left edge; `aria-hidden=\"true\"`; purely visual.\n* **Page-turn transitions:** each section reveals with a 300ms page-turn (`var(--transition-normal)`): initial `opacity: 0` plus a slight `rotateY`\u002F`translate` with `transform-origin: left center`, settling when scrolled into view (IntersectionObserver adds `.is-visible`). Under `prefers-reduced-motion: reduce`, collapse to a simple fade (or none) and set `scroll-behavior: auto`.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by default:** fluid `clamp()` typography (Bodoni display sizes, e.g., `clamp(2.5rem, 6vw, 4.5rem)` for the hero); zero horizontal overflow at any viewport ≥ 320px.\n* **Smooth animations:** `transition: var(--transition-normal)` on all state changes; fully respect `prefers-reduced-motion`.\n* **Accessibility (a11y):** ≥ 4.5:1 contrast in both themes; never communicate state by color alone; semantic HTML5 landmarks (`header`, `nav`, `main`, `footer`); correct ARIA roles\u002Flabels on the accordion, modal, and theme toggle; logical DOM\u002Ffocus order; complete keyboard operability (no mouse-only interactions); `aria-live` regions for form errors, toasts, and loading feedback; visible `:focus-visible` rings everywhere; a skip-to-content link.\n* **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change (tab extension, button states, card lift, accordion motion, toast).\n* **Destructive actions:** `.btn-danger` must be visually distinct in both themes (define it even if the landing page contains no destructive control).\n* **Anchors & sticky header:** apply `scroll-margin-top` to sections so the sticky header never covers anchored content; `scroll-behavior: smooth` (auto under reduced motion).\n\n---\n\n## 4. PAGE COMPOSITION & REQUIRED SECTIONS\n\nWrite original, polished **English** copy for a fictional premium journaling\u002Fnote-organization product — luxury editorial voice. Every section lives inside `.page` unless noted, with `id`s matching its tab anchor.\n\n* **Header (sticky, on `--bg-primary`):** Bodoni wordmark (invent the brand, e.g., \"Quire\"), the theme toggle (1.3), and a compact \"Get started\" button opening the modal. Cream text (`--text-on-dark`).\n* **Hero:** eyebrow label; Bodoni 700 headline; DM Sans subcopy; primary CTA (\"Start your notebook\" → modal) + ghost link to `#features`. Optional CSS-only stacked-paper or ruled-line motif.\n* **Features (3 cards):** Material Symbol icon in a tab-colored chip (mint, lavender, pink rotation), Bodoni card title, DM Sans copy. Full card states per 2.2.\n* **How It Works (3 steps):** oversized Bodoni numerals 01\u002F02\u002F03, a dotted connector rule (CSS), icon + copy per step; flex row → column on mobile.\n* **Testimonials:** three quote cards — italic Bodoni quote, `format_quote` Material Symbol, name + role, optional star rating with `aria-label`. Hover lift per 2.2.\n* **Pricing (3 tiers):** e.g., Pocket (free), Signature (featured: lavender \"Most popular\" ribbon, elevated shadow\u002Fborder — distinct without color alone), Atelier (premium). Bodoni prices, check-icon feature lists, per-tier CTA opening the modal (2.4).\n* **FAQ:** 5–6 items as an accessible accordion — `\u003Cbutton>` + region pattern, `aria-expanded`\u002F`aria-controls`, plus\u002Fclose Material Symbol rotating 90°, 300ms open\u002Fclose animation, fully keyboard operable.\n* **Final CTA:** centered Bodoni headline, subcopy, and an inline email capture (2.3): input + submit with loading → success (check icon, confirmation, toast) and invalid states.\n* **Footer (on `--bg-primary`, outside the paper):** wordmark + tagline; secondary link columns (e.g., Product, Company, Legal: About, Journal, Careers, Contact, Privacy, Terms); Material Symbol social icons; copyright. Cream text with visible hover\u002Ffocus states.\n* **Toast container:** fixed region at `--z-toast`, `aria-live=\"polite\"`, used for form\u002Fmodal success feedback.\n\n---\n\n## 5. DELIVERABLE & OUTPUT FORMAT\n\n* **File structure:** separate `index.html`, `style.css`, `script.js`. Exactly one `\u003Cscript src=\"script.js\" defer>` — no inline scripts, no inline styles, no additional JS files. Google Fonts + Material Symbols `\u003Clink>` tags in `\u003Chead>`.\n* **Naming convention (one only):** a fixed semantic set — flat, hyphenated block names (`.page`, `.tab`, `.binder-hole`, `.btn`, `.card`, `.input-group`, `.modal`, `.toast`, `.faq-item`) with double-hyphen modifiers for variants and states (`.tab--mint`, `.btn--primary`, `.btn--danger`, `.card--featured`, `.is-loading`, `.is-visible`). Never mix in BEM `__`, camelCase, or ad-hoc names.\n* **No unrequested placeholders:** all headings, labels, button text, FAQ questions, testimonials, and pricing copy must be real, finished English copy. Lorem ipsum is prohibited.\n* **Deterministic demo behavior:** implement exactly the simulated flows specified in 2.3\u002F2.4 (validation, loading durations, `@example.com` failure path).\n* **Output:** generate the complete, production-ready code for all three files in a single response, on the first attempt — no truncation, no \"continued below\" placeholders. The page must be fully functional when `index.html` is opened directly (CDN references allowed).\n",1791954985024]