[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-680-Signal":3},"# BUILD PROMPT — \"SIGNAL\" LANDING PAGE (Senior Frontend Engineer, First Attempt, Production-Grade)\n\nYou are a Senior Frontend Engineer and Expert UI Designer. Produce the complete, final Landing Page code in a single attempt — no explanations, no TODOs, no partial output. All user-facing copy must be written in English.\n\n---\n\n## 0. PROJECT BRIEF & THEME DEFINITION\n\n**0.1 Product & Tone**\nBuild a landing page for **\"Signal\"** — an institutional research-intelligence platform (verified data provenance, threshold briefings, audit-ready reporting for universities, policy institutes, and enterprises). Copy must sound institutional, scholarly, trustworthy, and restrained: declarative sentences, concrete claims, zero marketing hyperbole, zero exclamation marks.\n\n**0.2 Style Identity**\n- **Name:** Signal · **Era:** Timeless Classic · **Mood:** Institutional, weighty, polished, trustworthy, scholarly.\n- **Visual signature:** Deep navy full-bleed sections alternating with bone paper sections; muted gold used **only** for rules and highlights; serif display type; near-square corners; subtle lift shadows; dense grid with compact `1.2rem` gaps.\n\n**0.3 Color Palette (mandated)**\n| Token role | Value | Notes |\n|---|---|---|\n| Deep navy (primary bg) | `#1c2644` | Hero, How It Works, Pricing, Header, Footer |\n| Alt navy | `#232f55` | Final CTA band; dark-mode paper surface |\n| Bone foreground | `#e2dcd0` | Text\u002Ficons on all navy surfaces |\n| Muted gold accent | `#c8a870` | **Rules and highlights only** (see Gold Law, 1.2) |\n| Gold ink (paper surfaces) | `#7d5f33` | Gold-safe-for-text variant on bone backgrounds |\n| Bone paper (light bg) | `#f0ece3` | Features, Testimonials, FAQ sections |\n| Near-white (cards on paper) | `#fefefe` | Use `#fefefe`, never `#ffffff` |\n\n**0.4 Typography & Data (Google Fonts only)**\n- **Display:** `Source Serif 4` (weights 400\u002F600\u002F700 + italic) — hero H1, section H2s, card H3s, testimonial quotes.\n- **Body:** `DM Sans` (400\u002F500\u002F700) — paragraphs, buttons, nav.\n- **Data:** `IBM Plex Mono` (400\u002F500) — prices, step numerals (`01 02 03`), stats, eyebrow labels, microcopy.\n\n**0.5 Section Rhythm (alternation is the design system)**\n| Section | Light-mode surface | Dark-mode surface |\n|---|---|---|\n| Header (sticky) | Navy `#1c2644` (both themes) | Navy `#1c2644` |\n| Hero | Navy `--bg-primary` | Navy |\n| Features | Bone paper | Alt navy `#232f55` |\n| How It Works | Navy | Navy |\n| Testimonials | Bone paper | Alt navy |\n| Pricing | Navy | Navy |\n| FAQ | Bone paper | Alt navy |\n| Final CTA | Alt navy `--bg-alt` | Navy (keep alternation intact) |\n| Footer | Navy | Navy |\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 Selectors Only:** All design properties, layout rules, and states are targeted via class selectors in `style.css`.\n- **Minimal HTML Modifications:** HTML stays clean, semantic, and style-agnostic — a full retheme must be achievable by editing `style.css` only.\n\n**1.2 CSS Variables & Theme Tokens**\nDefine all tokens in `:root` in `style.css`. Translate every literal from the source CSS spec into a token (e.g., the supplied `border-top: 1px solid #c8a870` must be written as `border-top: 1px solid var(--accent)`).\n\nGlobal tokens:\n- **Colors:** `--primary: #1c2644`, `--secondary: #232f55`, `--accent: #c8a870`, `--accent-ink: #7d5f33`, `--bg-primary: #1c2644`, `--bg-secondary: #f0ece3`, `--bg-alt: #232f55`, `--text-primary: #e2dcd0`, `--text-secondary: #a9b0c4`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.\n- **Surface scoping:** Because sections alternate, implement a `.section--paper` scope class that remaps the contextual tokens (`--text-primary` → `#1c2644`, `--text-secondary` → `#4a5470`, `--border-default` → `rgba(28,38,68,0.18)`, `--text-success` → `#3f6b4f`, `--text-error` → `#a34428`) so every component consumes one set of token names. Base `:root` values pair with navy surfaces: `--text-success: #8fb996`, `--text-error: #e5927c`, `--border-default: rgba(226,220,208,0.16)`.\n- **Card surfaces:** `--surface-card` scoped per section: bone `#f0ece3` cards on navy sections; `#fefefe` cards on paper sections (light) \u002F `#2a3560` (dark).\n- **Contrast Pairing (mandatory, both themes):** bone\u002Fnear-white surfaces carry only navy ink; navy surfaces carry only bone ink. Gold `#c8a870` must **never** be used as text or icon color on paper surfaces — use `--accent-ink` there. Verify ≥ 4.5:1 for all text.\n- **Gold Law:** `#c8a870` appears exclusively as thin rules (1–2px borders, dividers, section-header accents), small icon highlights, featured-tier labels, and the small solid primary CTA button (navy text on gold — permitted as a compact highlight). Never as a large background fill, band, or panel.\n- **Radius & Shadows:** `--radius-sm: 2px`, `--radius-md: 3px`, `--radius-lg: 4px` (institutional, near-square), `--shadow-sm: 0 1px 2px rgba(8,12,26,0.28)`, `--shadow-md: 0 8px 20px rgba(8,12,26,0.32)` (subtle lift).\n- **Spacing & Transitions:** `--spacing-gap: 1.2rem` (dense), `--transition-fast: 200ms`, `--transition-normal: 250ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.\n- **Elevation:** `--z-dropdown: 100`, `--z-modal: 200`, `--z-toast: 300`.\n- **Fonts:** `--font-display: 'Source Serif 4', Georgia, serif`, `--font-base: 'DM Sans', Arial, sans-serif`, `--font-mono: 'IBM Plex Mono', monospace`.\n\n**1.3 Mandatory Dark Mode Support**\n- **Implementation:** Provide dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `\u003Chtml>`: `--bg-secondary: #232f55`, paper-scoped cards `#2a3560`, `--accent-ink: #c8a870`, success\u002Ferror revert to navy-surface values. The source spec labels dark support \"partial\" — override: dark mode **must** still be fully token-defined for every section, preserving the alternation rhythm via the two navy tones.\n- **Theme Switching:** No HTML restructuring — only token remapping under `.dark`.\n- **Persistence:** Store choice in `localStorage` (`\"signal-theme\"`); first visit falls back to `prefers-color-scheme`. Header includes a visible toggle button with a Material Symbol (`dark_mode` \u002F `light_mode`), correct `aria-pressed` and `aria-label` (\"Switch to dark mode\" \u002F \"Switch to light mode\").\n- **Explicit exception clause:** One minimal inline `\u003Cscript>` in `\u003Chead>` (≤ 5 lines, no other logic) is permitted solely to apply the stored theme class before first paint. All other JS lives in `script.js`.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- **Default Alignment Rule:** Every flex container defaults to `align-items: center` unless an exception is justified in a CSS comment (e.g., `stretch` for equal-height pricing cards).\n- **Mobile-Friendly First:** All grids\u002Frows collapse to single columns on small viewports; multi-column layouts begin at ≥ 640px. Prevent horizontal scrolling by design — never by masking overflow.\n\n**1.5 Framework Decision & Naming Convention**\n- **Framework:** The source specification supplies a raw hand-authored CSS architecture; therefore build with **plain, hand-authored CSS** (no Tailwind, no framework). Layout via Flexbox and CSS Grid only.\n- **Single Convention:** BEM naming exclusively (`.card`, `.card--paper`, `.card--featured`, `.faq-item__trigger`, `.site-header__nav`, etc.). Never mix conventions.\n\n**1.6 Typography & Icons (Google Only)**\n- **Text:** Load Source Serif 4, DM Sans, and IBM Plex Mono via Google Fonts `\u003Clink>` tags with `preconnect`. Bind to `--font-display`, `--font-base`, `--font-mono`.\n- **Icons:** Google Material Symbols (Outlined) via `\u003Clink>`. **Raw inline SVGs and local icon files are forbidden.** Configure `font-variation-settings` for the icon font once in CSS.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component** (`.btn`, `.btn--primary`, `.btn--secondary`, `.btn--navy`)\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` min 44×44px. DM Sans 600, uppercase, `0.8125rem`, `letter-spacing: 0.08em`, `border-radius: var(--radius-sm)`. `.btn--primary`: solid gold, navy text (both themes). `.btn--secondary`: transparent, 1px bone\u002Fnavy hairline border per surface scope. `.btn--navy`: solid navy, bone text (on paper cards).\n- **Hover:** 200ms shift — `filter: brightness(1.05)` plus `--shadow-sm`; `cursor: pointer`.\n- **Focus:** Distinct `:focus-visible` ring via `outline: 2px solid` using `--accent` (navy surfaces) \u002F `--accent-ink` (paper surfaces), `outline-offset: 2px`.\n- **Active:** `transform: scale(0.97)` press feedback.\n- **Loading:** `.is-loading` + `aria-busy=\"true\"` — pointer events disabled (prevents double-clicks), renders a CSS spinner (`\u003Cspan class=\"btn__spinner\">` border-top animation) or rotating `progress_activity` Material Symbol; button dimensions must not change.\n- **Disabled:** `opacity: 0.5`, grayscale filter, `cursor: not-allowed`.\n- **Success\u002FError:** `.is-success` \u002F `.is-error` transient states on the form submit button driven by `--text-success` \u002F `--text-error`.\n\n**2.2 Card Component** (`.card`, `.card--paper`, `.card--featured`)\n- **Default:** Flexible Flexbox column, `gap: var(--spacing-gap)`, `border: 1px solid var(--border-default)`, `border-radius: var(--radius-md)`, subtle `--shadow-sm`, surface per section scope.\n- **Hover:** `transform: translateY(-2px)` + `--shadow-md`, 200ms — subtle lift.\n- **Focus-within:** Border shifts to `var(--accent)` when a child link\u002Fbutton is focused.\n- **Loading (Skeleton):** Define `.skeleton` shimmer (linear-gradient sweep keyframes) with fixed aspect ratios to prevent layout jumps — required in CSS even if not initially rendered.\n- **Empty State:** Define `.card--empty` pattern: centered Material Symbol + one line of guidance text.\n- **Featured (pricing middle tier):** `border-top: 2px solid var(--accent)` + IBM Plex Mono uppercase gold label \"RECOMMENDED\".\n\n**2.3 Form & Input** (Final CTA email capture)\n- **Structure:** `.input-group` flex container wrapping: `\u003Clabel>` (\"Work email\"), `\u003Cinput type=\"email\">`, and a dedicated error container with `aria-live=\"polite\"` and reserved `min-height` (no layout jump).\n- **States:** Empty; Focus (2px ring, per-scope accent); Filled; Valid (`--border-success` + `check` icon); Invalid (`--border-error`, error text `--text-error`, `error` icon, message: \"Enter a valid work email address.\"); Disabled; Read-only. Input: transparent background, 1px bone\u002Fnavy hairline per scope, `--radius-sm`, min-height 44px.\n- **Behavior:** On submit — button enters loading (~900ms) → success state; inline success message with `check` icon: \"Request received. Our team will reach out within one business day.\" Feedback is never color-only.\n\n**2.4 Modal \u002F Popup Policy**\n- **No modal is required** for this page; the FAQ must be an in-page accordion, not a popup.\n- **Conditional clause:** If any overlay is ever introduced, it must use a centered flex overlay, backdrop, Material Symbol close button, focus trapping, `Esc`\u002Foverlay-click closing, and 250ms open\u002Fclose transitions per `--z-modal`.\n\n---\n\n## 3. PAGE SECTIONS & CONTENT SPECIFICATION\n\nGlobal section pattern: container `max-width: 72rem`, `padding-inline: clamp(1rem, 5vw, 2rem)`, `padding-block: clamp(4rem, 8vw, 6.5rem)`; every section header uses the signature treatment — IBM Plex Mono uppercase gold eyebrow with `border-top: 1px solid var(--accent)` (`--accent-ink` on paper), `padding-top: 0.75rem`, followed by a Source Serif 4 H2. All grids: `gap: var(--spacing-gap)` (dense). Write real, specific copy per the direction below — lorem ipsum is prohibited.\n\n**3.0 Site Header (sticky, navy, both themes)**\nSerif wordmark \"Signal\"; nav links (Features, Method, Pricing, FAQ) with gold hover underline 200ms; theme toggle; compact `.btn--primary` \"Request Access\". 1px gold bottom hairline. Mobile: Material `menu` button opens an accessible disclosure panel (`aria-expanded`, closes on `Esc`). Include a visually-hidden-until-focused \"Skip to main content\" link. `scroll-margin-top: 5rem` on all anchored sections; `scroll-behavior: smooth` (disabled under reduced motion).\n\n**3.1 Hero (navy, full-bleed, purely typographic — no photos)**\nMono gold eyebrow \"INSTITUTIONAL RESEARCH INTELLIGENCE\"; H1 in Source Serif 4 600 (`clamp(2.5rem, 6vw, 4rem)`), bone: *\"Every signal, held to an institutional standard.\"*; subcopy in `--text-secondary` (max ~60ch): *\"Signal verifies provenance, audits every source, and delivers a daily briefing your institution can defend.\"*; CTAs: `.btn--primary` \"Request Access\" (anchors to Final CTA) + `.btn--secondary` \"See the Method\". Below: a dense mono data strip — \"240+ member institutions\", \"12.8B verified records\", \"99.98% uptime\", \"SOC 2 Type II\" — separated by 1px gold hairlines, flex-wrapped.\n\n**3.2 Features (paper, 3 cards)**\nHeader eyebrow \"CAPABILITIES\", H2 \"Built to survive an audit.\" Dense 3-column grid (1-col mobile) of `.card--paper` (`#fefefe`, navy ink): each with a gold-ink Material icon (`fact_check`, `tune`, `lock`) inside a 1px-bordered square, serif H3 (\"Provenance Ledger\", \"Threshold Briefings\", \"Private by Architecture\"), DM Sans body, and a \"Learn more\" text link with gold underline on hover.\n\n**3.3 How It Works (navy, 3 steps)**\nHeader eyebrow \"THE METHOD\", H2 \"Three steps. No ambiguity.\" Desktop: 3 columns joined by continuous 1px gold connector rules; each step: IBM Plex Mono large gold numeral (`01` \u002F `02` \u002F `03`), serif H3 bone (\"Integrate\", \"Calibrate\", \"Brief\"), body `--text-secondary`. Mobile: vertical stack with a 1px gold left border rail.\n\n**3.4 Testimonials (paper, 3 cards)**\nHeader eyebrow \"ON THE RECORD\", H2 \"Trusted where scrutiny is standard.\" Dense 3-card grid of `.card--paper`: gold-ink `format_quote` Material icon; quote in **Source Serif 4 italic**, navy ink; attribution row — serif monogram initials inside a 1px gold-bordered square (no avatar photos) — name and role in DM Sans, institution in IBM Plex Mono. Realistic, varied examples (e.g., \"Dr. Elena Marsh, Director of Research, Northgate University\").\n\n**3.5 Pricing (navy, 3 tiers, bone paper cards — the signature card moment)**\nHeader eyebrow \"TERMS\", H2 \"Priced for institutions, not experiments.\" Dense 3-column grid of `.card--paper` (bone `#f0ece3`, navy ink): tier name (serif), large price in IBM Plex Mono ($49 \u002F $149 \u002F $399) with muted \"\u002Fseat · month\" mono microcopy (\"billed annually\"), 4–5 feature rows with gold `check` icons, per-tier CTA — middle \"Briefing\" tier is `.card--featured` (2px gold top rule + mono \"RECOMMENDED\" gold label + `.btn--primary`; outer tiers use `.btn--navy`). Equal-height cards (`align-items: stretch`, justified exception).\n\n**3.6 FAQ (paper, accordion — not a modal)**\nHeader eyebrow \"QUESTIONS\", H2 \"Answered in full.\" Five `.faq-item`s: full-width flex trigger (`space-between`, `align-items: center`) with serif H3 question in navy, Material `add` icon that rotates to `45deg`\u002Fswaps on open; panel animates via the `grid-template-rows: 0fr → 1fr` technique (250ms). ARIA: `aria-expanded`, `aria-controls`, panel `role=\"region\"` + `aria-labelledby`. Keyboard operable; hover tint on trigger 200ms. Cover: provenance verification, data storage\u002Ftenancy, connecting existing systems, onboarding, cancellation.\n\n**3.7 Final CTA (alt navy `--bg-alt`, full-bleed, centered flex column)**\nThin gold rule above the block; serif H2 bone \"Put your briefing on the record.\"; one supporting line; the email capture form per **2.3** (transparent input, bone hairline, gold focus ring, `.btn--primary` \"Request Access\"); mono microcopy below: \"No commitment · SOC 2 Type II · Cancel anytime\".\n\n**3.8 Footer (navy, 1px gold top border)**\nFour dense columns: brand (serif wordmark, mission line \"Research intelligence, held to an institutional standard.\", mono \"EST. MMXXV\"); Product (Features, Method, Pricing, FAQ — anchor to sections); Institution (About, Security, Compliance, Contact); Resources (Documentation, Status, Changelog, Support). Secondary links in `--text-secondary`, hover → gold underline 200ms. Bottom bar: \"© 2025 Signal Systems, Inc.\" + Privacy \u002F Terms links, separated by gold hairline.\n\n---\n\n## 4. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by Default:** Fluid `clamp()` typography; breakpoints ≥ 640px and ≥ 1024px; zero horizontal overflow on any viewport from 320px up.\n- **Smooth Animations:** All state changes use `transition: var(--transition-fast|normal) var(--ease-standard)` (200–250ms per theme). Honor `prefers-reduced-motion`: disable transforms, shimmer, accordion animation, and smooth scrolling.\n- **Accessibility (a11y):** AA contrast (≥ 4.5:1) in both themes — gold never as text on paper. Never color-only state (FAQ icon + `aria-expanded`; input error icon + text). Semantic HTML5 landmarks (`header`, `nav`, `main`, `section`, `footer`), one H1, logical heading order, logical DOM\u002Ffocus order, full keyboard operability (nav, toggle, FAQ, form), `aria-live` regions for all dynamic feedback. `::selection` styled gold with navy text as a finishing touch.\n- **Mandatory Visual Feedback:** Every hover, click, focus, and submission produces a visible state change.\n- **Destructive Actions:** None exist on this page; if one is ever added, it must use a `.btn-danger` class visually distinct in both themes.\n\n---\n\n## 5. DELIVERABLE & OUTPUT FORMAT\n\n- **File Structure:** Three separate files — `index.html`, `style.css`, `script.js` (referenced once, with `defer`). No inline `\u003Cstyle>` blocks; no inline `\u003Cscript>` beyond the single permitted head theme-snippet exception (1.3).\n- **script.js scope:** Theme toggle + persistence, mobile nav disclosure, FAQ accordion (ARIA wiring), email validation + loading\u002Fsuccess flow, auto-set footer year. Nothing more.\n- **Naming Convention:** BEM everywhere, in both HTML and CSS — never mixed.\n- **Copy:** All user-facing copy in English, real and specific to the Signal brand per Section 3 — lorem ipsum and unrequested placeholder content are prohibited (input placeholder attributes are permitted).\n- **Output:** Generate the complete final code for all three files in one attempt, immediately, with no commentary before or after.\n",1791954991105]