[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-783-BANNER-FIELD-a-vexillology-studio":3},"# BUILD PROMPT — \"BANNER & FIELD\" · Complete Neumorphic Landing Page (Vexillology Studio)\n\n**Role & Mission.** You are a Senior Frontend Engineer and Expert UI Designer. Build the complete, production-quality landing page for **BANNER & FIELD — a vexillology studio** in a single attempt. The design language is **Neumorphism (2020s Digital)**: soft surfaces extruded from a warm bone canvas, heraldic gold accents, animated CSS-built flags, and gradient highlights. Follow every rule below exactly — where a shortcut and a rule conflict, the rule wins. All user-facing copy must be written in **English**.\n\n---\n\n## PROJECT BRIEF & DESIGN DIRECTION\n\n**Concept.** A boutique flag-design studio: calm, tactile, precise, quietly animated. The page should feel like a flag-maker's workshop — extruded buttons and cards pressed out of the canvas, inset wells holding icons and quotes, gold reserved for moments of ceremony.\n\n**Palette → Token Map (Light Mode — Branded Default):**\n- `--bg-primary: #e8e2d4` (warm bone; the neumorphic canvas)\n- `--bg-secondary: #efe9db` (subtle panel tint — CTA panel, footer band)\n- `--primary: #2a2620` (deep ink — brand anchor)\n- `--secondary: #8a8274` (stone — decorative accents and large display text only)\n- `--text-primary: #2a2620`\n- `--text-secondary: #6b6355` (darkened stone that passes AA on bone; raw `#8a8274` fails AA for body text)\n- `--accent-gold: #a8862e`, `--accent-gold-soft: #e8dca0`, `--taupe: #b8b0a0`\n- `--gradient-accent: linear-gradient(135deg, #e8dca0 0%, #a8862e 100%)`\n- Neumorphic tokens: `--neu-light: rgba(255,255,255,0.85)`, `--neu-dark: rgba(163,155,134,0.5)`, `--shadow-neu-raised: 8px 8px 16px var(--neu-dark), -8px -8px 16px var(--neu-light)`, `--shadow-neu-inset: inset 5px 5px 12px var(--neu-dark), inset -5px -5px 12px var(--neu-light)`\n\n**Neumorphism Craft Rules.**\n- Component surfaces share the canvas tone so depth comes from dual shadows, not fills.\n- Raised elements (buttons, cards, panels) use `--shadow-neu-raised`; wells (icon holders, inputs, quote panels, chips, step numerals) use `--shadow-neu-inset`.\n- Generous radii; optional 1px `--border-default` hairline for definition.\n- Gold gradient is seasoning, not sauce: CTA fills, featured pricing chip, step numerals, avatar fills, hero glow only.\n- Never pure white anywhere; if a near-white is required, use `#fefefe`.\n\n**Contrast Guardrails.** `#8a8274` and `#a8862e` fail AA against bone for body text — restrict them to decorative fills, borders, and display text ≥ 24px; use `#e8dca0` for gold text on dark surfaces. Verify every text\u002Fbackground pair in **both** themes.\n\n**Motion Language.** Required named keyframes: `float` (hero flags, staggered delays), `wave` (subtle skew on flag surfaces), `spin` (loading icon), `shimmer` (skeleton), `fade-up` (scroll reveal). All state changes transition via `var(--transition-normal)` and `var(--ease-standard)`.\n\n**Theme Mode Clause.** The source spec marks **Light as the primary mode** — treat Light as the branded default presentation, but **Dark Mode remains fully mandatory** per Rule 1.3; this clause sets priority, not scope.\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 `index.html`.\n- Target all design properties, layout rules, and states via class\u002FID selectors only.\n- Keep HTML semantic and styling-agnostic: changing the site's look must require editing CSS only, never markup.\n\n**1.2 CSS Variables & Theme Tokens**\n- Define in `:root` exactly these tokens: `--primary, --secondary, --bg-primary, --bg-secondary, --text-primary, --text-secondary, --text-success, --text-error, --border-default, --border-error, --border-success, --radius-sm, --radius-md, --radius-lg, --shadow-sm, --shadow-md, --spacing-gap, --transition-fast, --transition-normal, --ease-standard, --z-dropdown, --z-modal, --z-toast` — plus the neumorphic and accent tokens from the brief.\n- Suggested values: `--radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px; --shadow-sm: 0 2px 6px rgba(42,38,32,0.08); --shadow-md: 0 10px 28px rgba(42,38,32,0.14); --spacing-gap: 1.5rem; --transition-fast: 150ms; --transition-normal: 300ms; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --z-dropdown: 10; --z-modal: 100; --z-toast: 200`.\n- Semantic colors (light): `--text-success: #3d6b47; --text-error: #a83a2e;` with matching borders; `--border-default: #d6cfbd`.\n- **Contrast pairing:** every light background token pairs with dark text tokens and every dark background token pairs with light text tokens — enforced in Light **and** Dark themes.\n\n**1.3 Mandatory Dark Mode Support**\n- Define dark tokens twice: under `@media (prefers-color-scheme: dark)` **and** a `.dark` class on `\u003Chtml>` (class wins when set). Set `color-scheme` accordingly so native controls follow.\n- Dark palette: `--bg-primary: #242019; --bg-secondary: #2d2820; --text-primary: #e8e2d4; --text-secondary: #b8b0a0; --border-default: #3b362c; --neu-light: rgba(255,255,255,0.07); --neu-dark: rgba(0,0,0,0.5)`; gold text on dark: `#e8dca0`; brighten success\u002Ferror (e.g., `#8fc79b` \u002F `#e08373`). Recompute `--shadow-neu-*` from these — never simply invert colors.\n- Switching is variable-only: zero HTML restructuring.\n- **Persistence:** store choice in `localStorage` (key `bf-theme`); on first visit fall back to `prefers-color-scheme`; Light is the branded default when no signal exists.\n- **Visible toggle:** fixed top-right neumorphic circular button (≥48px), Material Symbols `light_mode` \u002F `dark_mode` icon swap, correct `aria-pressed` (true when dark is active) and `aria-label`, layered at `var(--z-dropdown)`.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- Build every layout structure with Flexbox; every flex container **defaults to `align-items: center`** unless an exception is explicitly justified in a CSS comment.\n- Mobile-first: single column by default; promote to rows at `min-width: 768px` (and `1024px` for wide rows). No horizontal scrolling at any viewport from 320px up.\n\n**1.5 Framework & Class Architecture**\n- Use clean custom CSS in `style.css` organized with `@layer` ordering: `tokens → base → layout → components → utilities` (Tailwind via CDN is permitted only for flex\u002Fspacing helpers; all visual styling still resolves to CSS variables).\n- One naming convention only: **BEM** (`.hero__title`, `.card__icon`, `.btn--accent`). Never mix conventions; every utility maps to a variable or a reusable component class.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Text: load **Sora** (display, 600\u002F700\u002F800) and **Inter** (body, 400\u002F500\u002F600) from Google Fonts; bind to `--font-display` and `--font-base`.\n- Icons: **Material Symbols Rounded** via Google Fonts `\u003Clink>`. Raw inline SVGs, local icon files, and emoji-as-icons are forbidden.\n- Icon set: `flag, design_services, history_edu, verified, format_quote, check, expand_more, arrow_forward, light_mode, dark_mode, mail, error, check_circle, progress_activity, rss_feed, alternate_email`.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component Requirements**\n- `.btn`: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px (48px min-height preferred), `--radius-md`.\n- Variants: `.btn--raised` (neumorphic raised), `.btn--ghost` (inset well), `.btn--accent` (gold gradient fill with `--primary` ink text for contrast), `.btn--danger` (BEM form of `.btn-danger` — visually distinct in both themes, defined even if unused).\n- **Hover:** shadow bloom + brightness shift, `cursor: pointer`.\n- **Focus:** distinct `:focus-visible` ring via CSS variables (gold ring visible on both themes).\n- **Active:** `transform: scale(0.97)`.\n- **Loading (`.is-loading`):** interactions disabled, double-clicks prevented, Material Symbols `progress_activity` with the `spin` keyframe (or CSS border spinner); button dimensions must not change.\n- **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`.\n- **Success\u002FError (`.is-success` \u002F `.is-error`):** temporary feedback driven by `--text-success` \u002F `--text-error` with matching borders — never color-only; pair with icon or text change.\n\n**2.2 Card Component Requirements**\n- `.card`: flexible Flexbox layout (column), canvas-tone surface, `--radius-lg`, raised shadow, optional subtle `--border-default`.\n- **Hover:** shadow bloom + `transform: translateY(-2px)`.\n- **Focus-within:** gold border highlight when a child control receives focus.\n- `.card--inset` variant for wells (quote panels, icon holders, chips).\n- **Skeleton (`.is-loading`):** `shimmer` keyframe with fixed min-heights — no layout shift.\n- **Empty state (`.card--empty`):** structured fallback with a Google Icon and clear guidance text (define it in CSS even if current content is static).\n\n**2.3 Form & Input Requirements** (used by the Final CTA email capture)\n- Structure: `.input-group` flex container wrapping a visible `\u003Clabel>`, an `.input__wrapper` (input + status icon span), and a dedicated `.input__error` feedback container.\n- Class-driven states: **empty, focused** (gold outline ring + deepened inset), **filled, valid** (success border + `check` icon), **invalid** (error border + `error` icon + message), **disabled, read-only**.\n- A11y: input carries `aria-describedby` → error id and `aria-invalid=\"true\"` when invalid; errors announced via an `aria-live=\"polite\"` region; min-height 48px.\n\n**2.4 FAQ Accordion Requirements (custom disclosure widget)**\n- Per item: `\u003Ch3>` wrapping `\u003Cbutton class=\"faq__trigger\" aria-expanded=\"false\" aria-controls=\"faq-panel-N\">` with question text + Material Symbols `expand_more` chevron; panel `\u003Cdiv class=\"faq__panel\" id=\"faq-panel-N\" role=\"region\">`.\n- Animate open\u002Fclose with CSS only: `grid-template-rows: 0fr → 1fr` transition (inner wrapper `overflow: hidden`); chevron rotates 180° via `transform`.\n- States: hover, `:focus-visible`, open (`.is-open`), closed; trigger ≥44px tall; Enter\u002FSpace operate natively.\n- `prefers-reduced-motion` → instant open\u002Fclose. JS only toggles `aria-expanded` and classes — no height math.\n- **No modal, dropdown, carousel, chat widget, or navigation bar is in scope — do not add unrequested components.** (If a modal were ever required: focus trap, Esc\u002Foverlay-click close, animated open\u002Fclose, `--z-modal` stacking.)\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid type via `clamp()`, breakpoints ~640\u002F768\u002F1024px, `max-width: 72rem` container, overflow guarded — zero horizontal overflow from 320px to 1440px.\n- **Smooth animations:** every state change transitions with `var(--transition-normal)` \u002F `var(--ease-standard)`; `prefers-reduced-motion: reduce` disables `float`, `wave`, `shimmer`, `spin`, `fade-up`, and scroll-reveal hiding — content stays fully visible.\n- **Accessibility (a11y):** WCAG AA contrast in both themes; never rely on color alone; semantic HTML5 landmarks (`\u003Cmain id=\"main\">`, `\u003Csection aria-labelledby>`, `\u003Cfooter>`); a visually hidden \"Skip to content\" link that appears on `:focus-visible` as the first focusable element; logical DOM\u002Ffocus order; full keyboard operability; `aria-live` regions for form status, loading, and dynamic feedback; one `\u003Ch1>` (hero), `\u003Ch2>` per section, `\u003Ch3>` for card titles and FAQ triggers.\n- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.\n- **Flag motifs are pure CSS:** gradients, `border-radius`, `clip-path`, layered pseudo-elements, `aspect-ratio: 3 \u002F 2`. No raster images, no external image requests, no inline SVG.\n- **Scroll reveal (optional, progressive):** IntersectionObserver adds `.is-visible`; the initial hidden state applies only when JS has flagged `\u003Chtml data-js>` **and** the user has no reduced-motion preference.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- Exactly three files: `index.html`, `style.css`, `script.js`. One `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` — zero inline script blocks, zero `style` attributes.\n- `\u003Chead>`: `lang=\"en\"`, viewport, `\u003Cmeta name=\"color-scheme\" content=\"light dark\">`, meta description, `\u003Ctitle>BANNER & FIELD — Vexillology Studio\u003C\u002Ftitle>`, Google Fonts links (Sora, Inter, Material Symbols Rounded).\n- BEM naming only, consistent across all three files.\n- `script.js` responsibilities only: theme toggle + persistence + `aria-pressed` sync; FAQ accordion toggling; email form validation + simulated submit (loading → success) with `aria-live` feedback; pricing CTA loading feedback; optional scroll reveal.\n- **No lorem ipsum.** Author original, specific English copy in the brand voice (confident, craft-proud, lightly wry). Placeholder `href=\"#\"` links are permitted **only** in the Footer for pages not built.\n- The page must render and function completely when the three files are opened directly in a browser.\n\n---\n\n## 5. PAGE CONTENT & SECTION SPECIFICATION\n\nBuild these eight sections in order inside `\u003Cmain>` (plus the fixed theme toggle and skip link — the only global chrome). Copy directions below are guides; write real, finished copy — do not paste the guides verbatim.\n\n**5.1 Hero — `#hero`.** `min-height: 88vh`, flex column, centered. Inset chip eyebrow (\"A vexillology studio\"). `\u003Ch1>` in Sora, `clamp(2.5rem, 6vw, 4.5rem)` — one strong line (direction: flags that survive distance, wind, and bad photocopies). Two-sentence sub in `--text-secondary`. CTA row: `.btn--accent` \"Commission a Flag\" → `#cta`; `.btn--ghost` \"See the Process\" → `#how` with `arrow_forward`. Flag gallery: flex row (wraps on mobile) of three `.flag` specimens — `aspect-ratio: 3 \u002F 2`, `--radius-md`, raised shadow — each an original abstract flag built from layered gradients and `clip-path` (e.g., horizontal bone\u002Fgold bands with an ink canton disc; a diagonal division with a single counterchanged charge). Animate `float` with staggered `animation-delay` (0s \u002F 0.6s \u002F 1.2s) plus a subtle `wave` skew; hover lifts each flag. Below 768px, show at most two flags.\n\n**5.2 Features — `#features`.** Kicker + `\u003Ch2>` + short lede. Three `.card`s (flex row → column). Each: `.card__icon` inset circle with a Material Symbol (`design_services`, `history_edu`, `verified`), `\u003Ch3>`, 2–3 concrete sentences. Suggested features: **Custom Flag Design** (brief to final artwork); **Vexillological Audit** (review against the classic principles — simple, meaningful, few colors, no lettering, legible at a distance); **Symbol & Heritage Research** (charges, colors, and the stories they carry).\n\n**5.3 How It Works — `#how`.** Three steps, flex row on desktop with a connecting hairline (pseudo-element) that disappears on mobile. Each step: `.step__number` (gradient-filled or inset circle \"01 \u002F 02 \u002F 03\"), `\u003Ch3>`, two sentences. Steps: **Brief & Field Research** → **Design Iterations** (sketches to refined vector proposals with rationale) → **Production-Ready Handover** (master vectors, ratio variants, color and usage guide).\n\n**5.4 Testimonials — `#testimonials`.** Three `.card--inset` quotes: gold `format_quote` icon, a 1–2 sentence quote with one concrete flag detail (readable from the far end of the marina; approved on the first council vote), author row with `.avatar` (gradient circle, ink initials), name + role + organization (mix a municipal heritage office, a yacht club, a cultural festival). Wrap the region in an `aria-live=\"polite\"` container and define `.is-loading` shimmer styles with fixed min-heights.\n\n**5.5 Pricing — `#pricing`.** Three tier cards: **Ensign** (starter, from ~$1,900), **Banner** (featured), **Standard-Bearer** (full service, custom quote) — set realistic final prices yourself. Featured tier: desktop `transform: scale(1.03)`, gold gradient top edge, \"Most Popular\" gradient chip. Each card: tier name, price + \"per project\" note, 4–5 feature lines with `check` icons, CTA (featured `.btn--accent`, others `.btn--raised`). Every CTA: click → `.is-loading` (~1.2s) → `.is-success` + `aria-live` confirmation → reset. No navigation.\n\n**5.6 FAQ — `#faq`.** Four to six accordion items per spec 2.4. Suggested questions: typical timeline; deliverable formats; usage rights and licensing; flag proportions and standards; revision policy; remote\u002Finternational clients. Answers must be substantive (2–4 sentences), never filler.\n\n**5.7 Final CTA — `#cta`.** Large raised panel on `--bg-secondary` with a faint gold radial-gradient glow. `\u003Ch2>` + one supporting line. Email capture per spec 2.3: label \"Work email\", `type=\"email\"` input, `.btn--accent` \"Request the Brief Packet\". Behavior: invalid → error state + `aria-live` message; valid → loading (~1.2s) → success (button success styling, input disabled, status \"Your brief packet is on its way.\"). Simulated with `setTimeout`; no backend, no network calls.\n\n**5.8 Footer — `\u003Cfooter>`.** Flex-wrap layout on `--bg-secondary`: brand block (wordmark \"BANNER & FIELD\" + one-line studio description); link groups — **Studio** (The Process → `#how`, Pricing → `#pricing`, FAQ → `#faq`), **Resources** (Field Notes, Vexillology 101, Portfolio — `#` placeholders allowed only here), **Legal** (Privacy, Terms, Licensing — `#` placeholders). Icon row: `mail`, `alternate_email`, `rss_feed` with accessible names. Bottom bar: \"© 2025 Banner & Field\" + tagline (direction: \"Every flag earns its fabric.\"). All footer links receive visible `:focus-visible` styles.\n\n---\n\n## 6. FINAL QA CHECKLIST\n\n- Zero `style=\"\"` attributes, zero inline SVGs, zero inline script bodies; exactly one deferred `script.js`.\n- Theme toggle works, persists across reload, correct `aria-pressed` \u002F `aria-label`; dark mode uses re-tuned neumorphic shadows, not inverted colors.\n- No horizontal scroll from 320px to 1440px; every flex container defaults to `align-items: center`.\n- Buttons: default, hover, focus, active, loading, disabled, and success\u002Ferror states all styled.\n- Cards: hover lift, `:focus-within`, skeleton, and empty-state styles present.\n- Accordion: keyboard operable, `aria-expanded` synced, chevron animates, reduced motion respected.\n- Form: all specified states reachable; errors announced via `aria-live`.\n- WCAG AA contrast in both themes; no color-only state signals anywhere.\n- BEM consistent across all files; every visual value traces to a CSS variable; all copy is final English — zero lorem ipsum.\n",1791954992765]