Purpose
ARTSABERS Order Confirmation — reframed as a cinematic workshop moment, not another commerce template. The customer has committed money; this page acknowledges the moment, offers reassurance that a real workshop is now handling their hilt, and provides the natural next action (set password to track their build).
What this page is NOT: another ecom transactional surface with fieldset stacks, form chrome, and trust badges. It is a notification moment — closer in feel to Airbnb’s booking-confirmed state than to a checkout page.
Constraints locked by operator (2026-07-10):
- Site header AND footer STAY. Same as cart/checkout. Never strip them.
- Password action REMAINS PRIMARY. Reframed as the natural way for the customer to sign in and track their order — not as “complete your account” ceremony.
- This IS a dedicated thank-you page (not an account dashboard).
Direction
Kyber Hull — apply the direction from SAS1. Lean HARD into the “moody cinematic workshop” identity. Full-bleed atmospheric hero at the top. Warm brand-voice copy throughout (“workshop” / “forge” / “bench” / “hand-testing” language). Real hull-plate imagery used for atmosphere. Real ARTSABERS product photography where products are shown. Zero border-radius sitewide.
Reuse the CSS gradient + panel-joint hairline background pattern from MAS60 (including tuned ember bloom positioning). Reuse form primitives from MAS52. Reuse the same site header + site footer patterns from MAS57/MAS60.
Metaphor discipline (LOCKED)
- Page framing: your hilt entering the workshop (not “your order was placed”)
- Stage language: In workshop / Assembly / Dispatched / Delivered (warmer than “Confirmed / Assembly / Dispatched / Delivered”)
- Account framing: track your build or watch your order — not “complete your account”
- CTA copy: Set Password & Track My Order → (the ACTION is set password; the REASON is track my order)
Site header (LOCKED — reuse MAS60 verbatim)
Top brand-strip with ARTSABERS mark + right-side status labels (“ORDER CONFIRMED · WORKSHOP NOTIFIED”). Below that, the standard site nav (SHOP / SABER CORES / CHARACTERS / HELMETS / SUPPORT + right USD / ACCOUNT / CART badge). Match the site chrome from MAS60 checkout exactly — this is standard site header, always present.
Sections (top to bottom, after site header)
1. Cinematic hero moment — full-bleed atmospheric
The transformative change from MAS61 v3. This section replaces the “compact page header” pattern from cart/checkout with a full-bleed atmospheric moment.
- Height: ~500–600px rendered. Compact enough for the hull-plate imagery to read cleanly (per the direction rule: photographic hull-plate imagery works at compact heights but not at tall section heights).
- MANDATORY IMAGERY: full-bleed background loaded via
background-image: url('...'). Use the Variant F horizontal smooth hull-plate: https://camcom.dev/generated_imgs/generated-2026-07-07T15-47-31-768Z-joeqpj.jpg. Dark linear-gradient overlay 68–78% for text legibility. Optional radial ember bloom in one corner for warmth.
- Structure inside hero:
- Small ember eyebrow (top-left): ORDER #AS-284937 · CONFIRMED
- Display title (chrome-highlight, large — 56–72px scale): Your hilt is entering the workshop, Alex.
- Sub-line body (warm off-white, wider max-width ~640px, comfortable line-height): “Ships direct from our Latvia workshop after hand-testing. Both shipments track through the same account below.”
- NO form fields in the hero itself — it’s a moment, not a decision surface.
- Below the hero, at the seam boundary, a gentle ember hairline separator (same as MAS60’s
.page-header::before pattern) + ember-glow bloom that spills DOWN into the next section (from .page-header::after, bottom: -120px).
2. Track your order — reframed password prompt (PRIMARY ACTION)
The natural action after the hero moment. Full-width bordered content-group (MAS52 fieldset pattern) with the ember-tinted background treatment from MAS61’s password card, but reframed as a “watch your build” hook, not “complete your account” ceremony.
- Legend heading (with ember key/track glyph): Track your order
- Body copy (warm, workshop-voice): “We created an ARTSABERS account for your order. Set a password to sign in and watch your build in real time — from bench, through hand-testing, to dispatch. Both shipments track together.”
- Signed-in-as line: Signed in as alex@example.com
- Password inputs (MAS52 form primitives — labels above, show/hide toggles, 4-bar strength meter partially filled with “Fair — try 12+ characters” label). Same content as MAS61 v3. Same layout.
- Primary CTA (ember gradient, full-width): Set Password & Track My Order → (updated copy — action + reason)
- Secondary link: “Skip for now — set it later from your email”
- Trust footer inside card: ember lock glyph + “Encrypted at rest. Never shared.”
- Card visual treatment same as MAS61 v3 — ember hairline border, subtle ember-tinted linear-gradient background, ember key glyph, outer ember glow (0 0 22px rgba(255,122,46,0.10)).
3. Your build — delivery timeline as narrative
Reframe the “What’s next for your order” section as a workshop narrative. Same functional content as MAS61 v3 (two shipments, 4-step progress) but repositioned as a story of what’s happening to the customer’s hilt, not a stack of ecom fieldsets.
- Section heading (chrome-highlight): Your build
- Section sub-copy (warm brand voice): “Every hilt is played, tuned, and hand-tested before it leaves the workshop. Here’s where your two shipments are now.”
- Two shipment blocks stacked vertically. Each block:
- Row header: Shipment 1 of 2 · sub-line right-aligned: Arriving 12–14 August · Standard delivery · FREE. Reuse the pattern from MAS61 v3.
- Small thumbnails of items in that shipment (same as MAS61 v3).
- 4-step horizontal progress indicator with WARMER STAGE LABELS: In workshop (ember, active with glow) → Assembly (muted, next) → Dispatched (muted) → Delivered (muted). Note: “In workshop” replaces “Confirmed” — warmer, more workshop-anchored language.
- Shipment 2 same shape, with the “Assembly begins now. You’ll get a dispatch email once your hilt leaves the workshop.” lede beneath (same as MAS61 v3).
4. What happens next — three warm beats
Same three-beat pattern from MAS61 v3 (envelope / parcel / star icons), but with warmer copy and slightly larger visual treatment. Feels like a workshop update, not a bulleted checklist.
- Section heading: What happens next
- Beat 1: Confirmation email · “In your inbox within 5 minutes with your full receipt + order details.”
- Beat 2: Dispatch alerts · “You’ll get an email + SMS when each shipment leaves our workshop, with tracking.”
- Beat 3: Review request · “Once your hilt arrives, we’ll ask how it landed. Optional but appreciated.”
5. Compact order recap — much smaller
Very compact — this is a receipt appendix, NOT a re-review. Small strip near the bottom of the page (not near the top). The customer just spent time confirming they wanted this order — the recap serves as a “here’s what you paid” acknowledgment.
- Section heading (small display, muted): Your order
- Compact horizontal strip: 4 small (48–56px) thumbnails + short text line: “3 items · 2 shipments · 1 free gift · Total paid $832.47“
- Below the strip, small muted line: “Paid with Visa ending •••• 4242 · Receipt in your inbox · See full order details →“
6. Share the workshop — refer a friend
Reframe from “Refer a friend” (transactional) to “Share the workshop” (brand-voice). Same functional content (referral link + share row) but the framing signals workshop culture, not marketing.
- Bordered content-group. Legend: Share the workshop
- Body: “Give friends $25 off their first order. Get $25 in loyalty when they check out. Everyone in the community wins.”
- Referral link input (read-only, pre-filled
artsabers.com/refer/alex-284937) with inline “Copy link” secondary button
- Row of share icons (WhatsApp / Messenger / Email / X / Copy) — same as MAS61 v3
7. Follow the workshop
Same as MAS61 v3. Bordered content-group with four social buttons (Instagram / TikTok / YouTube / Discord).
8. Reinforcement band + site footer
Same as MAS51/57/60/61 v3. Reinforcement band on plain carbon + ember hairline separator top. Site footer verbatim from MAS60.
Layout structure
Single-column layout matching MAS61 v3’s shape — .cart-main max-width 860px, centred, sections stacked with hairline separators (or padding gaps) between them. NO two-column split. NO sticky sidebar. The single-column flow reinforces the “confirmation state” framing — one narrative, not two competing streams.
What this page deliberately does NOT include
- NO trust chip strip (customer has already paid — nothing left to trust in commerce sense; the workshop moment IS the trust signal now)
- NO cross-sell strip
- NO cart/checkout-style bordered fieldsets stacking (except the two CTA cards — password + refer). Everything else is
--flat content-group or freeform sections.
- NO “Continue shopping” CTA
- NO BNPL / Klarna anywhere
- NO “Good to know” reassurance card (that lives on cart — post-purchase is different mode)
- NO SSL / secure-checkout signals (order is complete, no security decision left)
- NO large celebratory graphics (confetti, big check marks). Kyber Hull is understated cinematic, not celebration.
- NO breadcrumb in the hero (would clash with cinematic framing)
Form primitive spec (VERBATIM from MAS52)
Password inputs use MAS52 form patterns: labels above, uppercase display font, ember focus glow, show/hide toggle inline right, 4-bar strength meter, forge-red errors (not rendered but available). Zero border-radius.
Reuse from prior mockups
- Site header (brand-strip + site nav) — MAS60 verbatim
- Panel-joint hairline background (ember blooms tuned per MAS60) — MAS60 verbatim (left bloom at 8% 660px, right bloom at 95% calc(40% + 60px), header seam glow bottom: -120px)
- Fieldset border content-group + legend on top border — MAS52
- Form primitives (labels, inputs, password show/hide, strength meter, primary + secondary CTAs) — MAS52 verbatim
- Password card visual treatment (ember hairline border, subtle ember-tinted background, ember key glyph, outer ember glow) — MAS61 v3
- 4-step horizontal progress timeline per shipment — MAS61 v3 (but with warmer stage labels)
- Compact 4-thumbnail preview strip — MAS60
- Reinforcement band + site footer — MAS60 verbatim
Kyber Hull styling notes
- Hero uses hull-plate imagery Variant F (horizontal) — the actual URL, MANDATORY. Do not substitute CSS-authored ember-glow.
- Dark linear-gradient overlay 68–78% on the hero for text legibility.
- Ember accents on: order number, primary CTA, active progress step, password card border + glow + ember-tinted background + key glyph, small hairline dividers, section-header ember bloom below hero.
- Chrome-highlight on hero title (NOT ember — reserve ember for actionable elements below).
- Zero border-radius everywhere.
- Section separators between –flat sections use subtle ember hairlines like MAS60.
Placeholder data
- Customer: Alex Doe · alex@example.com
- Order: #AS-284937
- Payment: Visa ending 4242
- Shipment 1: Arriving 12–14 August · Standard delivery · FREE
- Shipment 2: Arriving 25 August – 2 September · Standard delivery · FREE
- Line items (same as MAS61 v3): Carbon Strike Lightsaber — Xenopixel V3 · Starkiller SE Lightsaber — Proffie 2.2 · Mace Windu SE Duelling Lightsaber — S-RGB. Real product URLs.
- Free gift (same): Silver Lightsaber Coupler with the ember GIFT corner tag on the recap strip.
- Password strength meter: 2 of 4 bars, “Fair — try 12+ characters”
- Referral link:
artsabers.com/refer/alex-284937
Copy locks (verbatim)
- Hero eyebrow: ORDER #AS-284937 · CONFIRMED
- Hero title: Your hilt is entering the workshop, Alex.
- Hero sub-line: “Ships direct from our Latvia workshop after hand-testing. Both shipments track through the same account below.”
- Password card legend: Track your order
- Password card body: “We created an ARTSABERS account for your order. Set a password to sign in and watch your build in real time — from bench, through hand-testing, to dispatch. Both shipments track together.”
- Password signed-in-as: Signed in as alex@example.com
- Password primary CTA: Set Password & Track My Order →
- Password secondary link: “Skip for now — set it later from your email”
- Password trust: “Encrypted at rest. Never shared.”
- Timeline section heading: Your build · sub “Every hilt is played, tuned, and hand-tested before it leaves the workshop. Here’s where your two shipments are now.”
- Timeline stage labels: In workshop · Assembly · Dispatched · Delivered (“In workshop” replaces “Confirmed” — warmer)
- Shipment 2 lede: “Assembly begins now. You’ll get a dispatch email once your hilt leaves the workshop.”
- What happens next heading: What happens next
- Confirmation email beat: Confirmation email · “In your inbox within 5 minutes with your full receipt + order details.”
- Dispatch alerts beat: Dispatch alerts · “You’ll get an email + SMS when each shipment leaves our workshop, with tracking.”
- Review request beat: Review request · “Once your hilt arrives, we’ll ask how it landed. Optional but appreciated.”
- Recap heading: Your order
- Recap primary line: 3 items · 2 shipments · 1 free gift · Total paid $832.47
- Recap secondary line: “Paid with Visa ending •••• 4242 · Receipt in your inbox · See full order details →”
- Refer legend: Share the workshop (reframed from “Refer a friend”)
- Refer body: “Give friends $25 off their first order. Get $25 in loyalty when they check out. Everyone in the community wins.”
- Follow legend: Follow the workshop
- Follow body: “Duelling builds, character series drops, community events. Behind the workshop, not just the storefront.”
- Reinforcement band: Every hilt hand-tested in-house · Global 7–10 day delivery · 2,400+ five-star reviews