← ARTSABERS

ARTSABERS — Header Search Modal · Build Brief

Build Brief ARTSABERS

ARTSABERS — Header Search Modal · Build Brief

Purpose

The heavier of ARTSABERS’s three search primitives — the modal that opens when the search icon in the site nav is clicked. Kyber Hull-styled. Composes on top of parent-theme markup that’s fixed by convention + a third-party plugin (SearchWP Live Ajax Search), so the design job here is the visual language of the state catalogue, not the DOM shape.

This BB drives a design_type=component mockup — not a page mockup. Four states stacked vertically in a single scroll for operator sign-off in one pass. Same shape as the UGC Gallery Component (post 13960) precedent from 2026-07-15.

Consumes:

  • MAS43 (post 12840) — Kyber Hull direction reference. Palette, seam treatment, ember-hairline vocabulary, atmospheric hull-plate motif.
  • SAS1 v4.5.0 (post 12774) — palette, tokens, Orbitron display / Onest body typography.
  • MAS52 (post 13057) — form primitive spec. Ember focus glow, zero-radius, uppercase heading-font labels, ember-gradient CTA. The heavy modal search-input inherits directly from this spec.
  • MAS73 (post 13466) — ember-ombre warm-capture band; visual reference for the modal’s ember accent framing.
  • MAS74 (post 13492) — the Search Results template mockup. The .query-chip pill primitive introduced there is reused verbatim in this component’s V4 no-matches state.
  • Existing .search-input primitive (framework-v2/theme/artsabers/scss/components/_search-input.scss) — the compact in-page counterpart. This modal is the heavy sibling; its docblock already anticipates it: “Not for the site-header search modal (heavier treatment).”

The component

  • Not a page mockup. This is a state-catalogue — four modal states stacked in one scroll so the operator can sign off the entire treatment in a single review pass.
  • Voice: quiet, workshop-atmospheric. Not chatty. The modal is a tool — copy is small and out of the way.
  • Rendered target: ~2,000–2,400px tall, four state variants + labelled state-break separators between them.
  • Deliverable: one design_type=component post carrying complete HTML/CSS for all four states in a single scroll. The four states use the SAME DOM once wired to the shipped theme (only visibility + populated-content differs) — the mockup renders them all at once for review.

Pinned markup — MUST NOT deviate

The parent theme (camcom-v2) + SearchWP plugin pin the following class names + DOM structure. The mockup must reflect them verbatim so the SCSS wiring in Phase 2 layers over shipped markup with zero PHP edits.

  • Nav trigger: <a href="#modal_search" class="site-head__actions__search js-modal__trigger" aria-label="Open search"> — with an inline SVG or icon-font glyph inside.
  • Modal wrapper: <div id="modal_search" class="modal search js-modal__target"> with children .modal__background, .modal__wrapper, .modal__close.
  • Search form: <form class="search-form breathe--top-double" action="/"> containing .search-form__wrapper, <input class="search-form__input" name="s" data-swplive="true"> (the data-swplive attribute is what binds the SearchWP live-suggestion dropdown — MUST PRESERVE), and <button class="search-form__submit">.
  • Live-suggestion dropdown: injected absolutely-positioned by the SearchWP plugin as <div class="searchwp-live-search-results"> below the input. Style this in V3.

Variants (top to bottom)

V1 — Closed state (site nav bar with search icon)

  • Framing: shows the full site nav in its Kyber Hull ember-on-carbon shell, so the operator sees the icon in its actual context (not floating alone on the page).
  • Icon at rest: chrome-warm stroke, ~24px, sits in .site-head__actions alongside wishlist + basket. Cursor: pointer.
  • Icon on hover: ember (--ember) with a subtle warm glow beneath. Same treatment as the ember-on-hover pattern in _site-head.scss.
  • State-break label below: “· V1 · CLOSED ·” in chrome-dim eyebrow type.

V2 — Modal open, empty (before typing)

  • Backdrop: .modal__background — dark carbon overlay at ~0.85 alpha over whatever page was behind it. Blur optional (matches Kyber Hull cinematic vocabulary).
  • Card: .modal__wrapper centred, ~720–780px wide, ember-hairline top border with soft ember-warm glow beneath (same treatment as MAS52’s spec-header pattern). Optional atmospheric hull-plate motif behind, tuned so text remains legible (per feedback_artsabers_seam_placement.md — no seams through text).
  • Close X: top-right, chrome-warm stroke at rest, ember on hover. Uses .modal__close anchor with an icon glyph.
  • Search form: centred within the wrapper. .search-form__input tall (~60–68px), 22px Onest body, ember focus glow per MAS52. Placeholder: “Search…” (generic parent-theme default — brand voice on placeholder is a Phase 3 decision, not this design’s job). Trailing .search-form__submit button carries a warm-chrome chevron/arrow that brightens to ember on hover.
  • Below input: quiet ember eyebrow, uppercase, letter-spaced: “TYPE TO SEARCH”. Under it, one line of chrome-dim body text: “Popular right now: Starkiller · Anakin · Neopixel” — tiny inline suggestion so the modal isn’t visually empty at rest.
  • State-break label: “· V2 · MODAL OPEN · EMPTY ·”

V3 — Modal open, typing (with live-suggestions visible)

  • Same shell as V2 — reuse the wrapper + close X + form layout verbatim.
  • Input value: pre-filled with star (as example query).
  • Live-suggestion dropdown: .searchwp-live-search-results rendered directly below the input, ~640px wide, dark carbon ground with ember-hairline top border matching the wrapper edge — visually a continuation of the input’s focus glow, not a separate detached panel.
  • Suggestion row anatomy (five rows shown):
    • Leading result-type glyph on the left (icon or single-letter chip), chrome-dim: HILT / GUIDE / FAQ / CATEGORY.
    • Result title in the middle (Onest 15px, chrome-highlight), with matching-substring highlight in ember on the “star” fragment.
    • Trailing chrome-dim meta on the right: price for hilts (“$289”), reading-time for guides (“6 min read”), match-count for categories (“18 matches”).
    • Ember-hairline separator between rows.
    • Hover state on ONE row: ember-tinted background at ~8–12% alpha, cursor: pointer.
  • Suggested row content (for the mockup, so the type hierarchy reads):
    1. HILT · Starkiller Neopixel v3 · $389 (hover state)
    2. HILT · Star Wars Rebels — Ezra’s saber · $274
    3. GUIDE · Starkiller’s blade colour: canon vs custom · 6 min read
    4. CATEGORY · Star Wars: The Force Unleashed · 8 hilts
    5. FAQ · What Saber Core does the Starkiller hilt ship with? · in Cores
  • State-break label: “· V3 · MODAL OPEN · LIVE SUGGESTIONS ·”

V4 — Modal open, no matches (empty-result state)

  • Same shell as V2/V3.
  • Input value: pre-filled with kelleran beq.
  • Empty-result message: below the input, in chrome-dim body copy at ~15px: “Nothing matching that in the workshop yet — try one of these:”. This phrasing passes both workshop-voice axes (workshop as noun for catalogue, no ownership claim, no build claim — per feedback_artsabers_workshop_voice.md).
  • Popular-query chips: below the message, a cluster of 8 .query-chip pills — the SAME primitive MAS74’s .common-searches band uses (shared substrate is deliberate — one _query-chip.scss component serves both surfaces).
  • Chips: Starkiller · Darth Maul · Anakin · Neopixel · Xenopixel V3 · Duelling grade · Double-bladed · Cosplay helmet.
  • Chip shape: ember-hairline border on carbon ground, uppercase Onest small, letter-spaced, ~10–14px padding, zero radius. Ember tint fill on hover.
  • State-break label: “· V4 · MODAL OPEN · NO MATCHES ·”

Direction rules to hold

  • Workshop-voice check: the only prose surface in this component is V4’s empty-result line. “Nothing matching that in the workshop yet” — the workshop as a noun for the catalogue reads as voice, not a claim. No first-person build verbs, no ownership determiners, no fabricated geography. Passes both axes per the workshop-voice rule.
  • Ember focus glow on the input — the Kyber Hull equivalent of the browser default blue focus ring. Never a blue outline. Same treatment as MAS52 locked.
  • Zero border-radius throughout — sitewide Kyber Hull discipline.
  • Panel-seam / hull-plate treatment: if used behind the modal wrapper, place seams at boundaries only, never through the input row or the suggestion list. Per feedback_artsabers_seam_placement.md.
  • Orbitron 600 upright for any display type (state-break labels only need small chrome-eyebrow type, not display); Onest 400 for body. No italics on titles.
  • The .query-chip primitive introduced here is the SAME substrate MAS74’s no-results state uses — one component, two contexts. Do not invent a modal-specific pill variant.

Fidelity to shipped markup

The component mockup must render the pinned markup verbatim in each state — no invented wrappers, no renamed elements, no attribute drift. The SCSS wiring in Phase 2 must be able to lift the mockup’s rules directly onto the shipped DOM. If a proposed treatment can’t be achieved with the pinned markup as-is (e.g. an extra div is needed for a layout trick), flag it in the subagent’s return summary; the operator will decide whether to accept the added complexity or refine the treatment.

Out of scope (deferred to Phase 3)

  • Placeholder microcopy override (currently plain “Search…” from parent) — decide later whether to override artsabers/footer.php:123 include with a brand-scoped partial for brand-voice placeholder.
  • JS behaviour improvements — _modal.js currently lacks Escape key close, focus trap, and ARIA aria-expanded. Cross-brand JS, out of this brand session’s scope.
  • Mobile layout — this brief targets desktop 1440px. Mobile treatment is a follow-up.