← War Dungeon

War Dungeon — Contact Build Brief

BBWD26 Build Brief War Dungeon

Page intent

The War Dungeon Contact page is the visitor-to-shopkeeper channel. Three visitor jobs: send a message (form), find an alternative channel (email, social, response-time expectation), get a quick answer without writing in (FAQ teaser → How-To hub). The page is form-led but the form is the smallest part of the surface — the brand voice carries the rest. Atmosphere supports the visitor’s confidence that a real shopkeeper will reply.

Subject content (for the mockup)

Render the page with: the content-page hero reused from BBWD25 (eyebrow “Drop us a line”, title “Get in touch”, lede paragraph in shopkeeper voice “Whether you’re hunting for a kit, chasing an order, or just want to talk paint — the workshop’s open. We answer every line.”), a contact form on the left (Name, Email, Subject dropdown [Order question / Stock query / Returns / Trade enquiry / Something else], Order number [optional], Message, Send button), a contact sidebar on the right (Email line: hello@wardungeon.com; Response time: “Most lines answered within one business day”; Social channels: Instagram + YouTube + Reddit; Opening hours card showing Mon–Fri 9–5; “A Nerdworks brand” attribution), an FAQ teaser strip (3 most-asked questions linking to How-To Guides hub), and the standard chrome.

Mandatory structure (top to bottom)

  1. Pre-header announcement bar — REUSE announcement-bar.
  2. Global header — REUSE site-header.
  3. Breadcrumbs — REUSE breadcrumbs. Home / Contact.
  4. Content-page hero — REUSE content-page-hero (newly authored on BBWD25). Eyebrow “Drop us a line”, title “Get in touch”, lede in shopkeeper voice. Plated-frame photograph on the right shows the dispatch corner / shop counter (different photo from BBWD25’s, same block).
  5. Section divider — REUSE gear-divider.
  6. PAIRED ROW — Contact form LEFT (≈⅔), Contact sidebar RIGHT (≈⅓):
    • LEFT: The contact form on dark cowboy inverted panel with gear-pattern at 10%. Field stack: Name (text), Email (email), Subject (select, 5 options), Order number (text, optional, with helper “If your question’s about an order”), Message (textarea, 6 rows), Send button (sienna ridge-bronze primary, stamped-shadow, in clean zone). All inputs styled in ridge-bronze borders with stamped-input-shadow. Inline validation on blur. NEW block contact-form-band.
    • RIGHT, STICKY at desktop: Contact sidebar — vertical stack of small panels. Email panel (plated brass roundel + email address + click-to-copy chip). Response time panel (stamped roundel + “Most lines answered within one business day”). Social panel (3 stamped social icons: Instagram, YouTube, Reddit). Opening hours panel (Mon–Fri 9–5, Sat–Sun closed, styled as a saloon hours card). Brand attribution (“A Nerdworks brand” stamped roundel). NEW block contact-sidebar.
  7. Section divider — REUSE gear-divider.
  8. FAQ teaser — 3-up grid of FAQ link cards: “How long does shipping take?”, “Can I pick up locally?”, “Do you offer trade pricing?”. Each card has a stamped-roundel icon + question + small “Read the answer →” link to the How-To Guides hub. NEW block faq-teaser-strip — distinct from filter-chips-bar (this is a content-bridging pattern, not a filtering control). Collapses to 1-up @720.
  9. Closing CTA band — REUSE dual-cta-band (newly authored on BBWD25). Two cards: “Browse the Range” + “Read the How-To Guides”. Reuse signals the catalogue is honouring the rule (verbatim reuse from About’s authoring).
  10. Trust strip — REUSE trust-strip.
  11. Global footer — REUSE site-footer.

Block reuse intent (conservative — per locked brand rule)

Reused: announcement-bar, site-header, breadcrumbs, content-page-hero (NEW on BBWD25), gear-divider, dual-cta-band (NEW on BBWD25), trust-strip, site-footer, plus primitives (stamped-roundel, plated-frame, btn, eyebrow-stamp).

NEW blocks expected (3):

  • contact-form-band — full form layout with ridge-bronze input styling, stamped-input-shadow, inline validation, clean-zone Send CTA. Likely the substrate for any future form surface (newsletter signup form, trade-enquiry form, etc.).
  • contact-sidebar — vertical stack of small contact-context panels (email / response time / social / hours / brand attribution).
  • faq-teaser-strip — 3-up FAQ link cards as a content-bridging pattern to the How-To hub. Distinct from filter-chips-bar (different rhetorical job).

Content principles

  • Form is the conversion peak. Send button gets clean-zone discipline like product-page ATC — no gear-pattern bleed-through, no rivets crossing the button, no badges overlapping. Same conversion discipline as MWD9.
  • Sidebar reassures while form is being filled. Sticky at desktop so response-time expectation stays visible as the visitor types.
  • Alternative channels are equal in weight. Email panel and form are both first-class — visitor should never feel forced through the form.
  • FAQ teaser deflects gently. 3 most-asked questions sit below the form fold; for visitors who’d rather read than write.
  • Closing CTAs maintain the dual-CTA shape from About. Verbatim reuse of dual-cta-band — content slots differ, structure identical.

Voice notes

Old-West shopkeeper voice at form-friendly register. Form labels stay plain (“Name”, “Email”, “Subject”); helper copy carries the brand (“If your question’s about an order”). The Send button reads “Send word” (not “Submit”). Response-time copy: “Most lines answered within one business day — we ride out at sundown.” Opening hours card uses period vocabulary (“Closed Sunday — the workshop rests”). FAQ teaser questions use customer-voice phrasing (“Can I pick up locally?”, not “Local pickup availability”).

Render direction

Locked methodology: Maximalist Industrial at the Frontier styleguide (SWD1). Canonical references same as BBWD25. The 86-block reuse catalogue plus the newly-authored content-page-hero, dual-cta-band, narrative-band, stamped-roundel-list, founder-showcase, workshop-gallery from BBWD25 supply methodology-consistent chrome. Author NEW under the same methodology for form / sidebar / FAQ-teaser gaps.

Hero-distinct rule: Contact reuses content-page-hero from BBWD25 — INTENDED reuse. The static-content surfaces share the same page-introduction job.

Conversion discipline: the Send button’s immediate zone stays visually CLEAN of competing ornament — no gear-pattern background-image bleed-through behind the button, no rivets inside the button’s clean zone, no stamped badges overlapping. Same rule as MWD9’s Add-to-Cart.

Desktop composition (locked brand rule, 2026-06-07)

War Dungeon is desktop-first. Mockups render at 1440px first; mobile is graceful collapse. Paired row: form ⅔ + sidebar ⅓, both visible together at desktop. FAQ teaser is 3-up full-width. Closing CTA band is full-width focal. Mobile collapse: 980 (sidebar drops below form), 880 (form fields stay full-width), 720 (FAQ teaser stacks 1-up, CTA band stacks), 480 (panel widths simplify but ornament stays).

Technical constraints

  • Page max-width 1440px. Base font size 20px.
  • Form submission via AJAX POST; success state replaces the form with a stamped confirmation panel (“Word’s on its way — we’ll be in touch within one business day”); error state shows inline.
  • Field validation: blur-validation for Email + Name; on-submit validation for everything; honeypot field hidden for spam.
  • Click-to-copy chip on email address triggers a stamped roundel toast (“Copied to your boot”).
  • Sidebar is position: sticky; top: 80px; at desktop.
  • FAQ teaser cards link to specific anchors on the How-To Guides hub.
  • Opening hours card uses local timezone (Europe/London); no auto-detection.