/wire-template.
<!DOCTYPE html>
<?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ARTSABERS — Your order is confirmed</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&family=Orbitron:wght@400;500;600;700;800&family=Onest:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>/* ============================================================
ARTSABERS — Kyber Hull tokens (from Styleguide, verbatim)
============================================================ */
:root {
/* Ember ombre (accents only) */
--ember-glow: #FFB347;
--ember-bright: #FF9540;
--ember: #FF7A2E;
--ember-forge: #E85D18;
--ember-deep: #D14810;
--ember-smoulder: #8B2E08;
--ember-scar: #5A1A00;
--on-primary-fixed: #2A0800;
/* Hull ladder (surface roles) */
--carbon: #060606;
--void: #0A0A0A;
--charcoal: #141414;
--charcoal-warm: #161412;
--hull-panel: #1A1A1A;
--hull-panel-lift: #242424;
--hull-panel-dark: #0F0F0F;
--hull-chrome-shadow: #2E2E2E;
--hull-edge: #363636;
/* Chrome / light-catch */
--chrome-highlight: #FAFAFA;
--chrome-glint: #E8E4DD;
--chrome-warm: #F5F0E8;
--chrome-dim: #B8B0A6;
/* Semantic surface roles */
--bg-page: var(--charcoal);
--bg-card: var(--hull-panel);
--bg-card-lift: var(--hull-panel-lift);
--bg-card-recess: var(--hull-panel-dark);
--bg-input: #1E1E1E;
--bg-input-focus: #262524;
/* Text roles */
--text-body: var(--chrome-warm);
--text-title: var(--chrome-highlight);
--text-muted: var(--chrome-dim);
--text-on-ember: var(--on-primary-fixed);
/* Accent role */
--accent: var(--ember);
--accent-hot: var(--ember-glow);
/* Feedback */
--forge-red: #E63929;
--success: var(--ember);
/* Fonts */
--font-display: 'Orbitron', system-ui, sans-serif;
--font-body: 'Onest', system-ui, sans-serif;
/* Sizing */
--hairline: rgba(250, 250, 250, 0.08);
--hairline-strong: rgba(250, 250, 250, 0.16);
--ember-hairline: rgba(255, 122, 46, 0.6);
--chrome-top-inset: inset 0 1px 0 rgba(250, 250, 250, 0.30);
--chrome-top-soft: inset 0 1px 0 rgba(250, 250, 250, 0.14);
--panel-lift: inset 0 1px 0 rgba(250, 250, 250, 0.08), 0 8px 24px -8px rgba(0, 0, 0, 0.9);
--ember-glow-sm: 0 0 16px rgba(255, 122, 46, 0.35);
--ember-glow-md: 0 0 28px rgba(255, 122, 46, 0.55);
--ember-focus: 0 0 0 1px var(--ember), 0 0 12px rgba(255, 122, 46, 0.35);
}
/* ============================================================
Base
============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
background: var(--bg-page);
color: var(--text-body);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
min-height: 100vh;
}
/* Panel-joint background — MAS60 verbatim: every 240px hairlines + warm ember blooms
positioned so left bloom sits at 8% 660px and right bloom at 95% calc(40% + 60px). */
body {
background:
radial-gradient(1200px 900px at 8% 660px, rgba(255, 122, 46, 0.12), transparent 60%),
radial-gradient(900px 700px at 95% calc(40% + 60px), rgba(255, 122, 46, 0.04), transparent 65%),
repeating-linear-gradient(
to bottom,
transparent 0,
transparent 239px,
rgba(250, 250, 250, 0.035) 239px,
rgba(250, 250, 250, 0.035) 240px
),
linear-gradient(180deg, var(--charcoal) 0%, var(--charcoal-warm) 40%, var(--charcoal) 100%);
background-attachment: fixed;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--ember-glow); }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
/* ============================================================
Site header — brand strip + site nav (MAS60 verbatim shape)
============================================================ */
.brand-strip {
border-bottom: 1px solid var(--hairline);
background: linear-gradient(180deg, var(--void) 0%, var(--carbon) 100%);
box-shadow: var(--chrome-top-soft);
}
.brand-strip__inner {
max-width: 1320px;
margin: 0 auto;
padding: 14px 32px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.brand-mark {
font-family: var(--font-display);
font-weight: 700;
font-size: 20px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--chrome-highlight);
}
.brand-mark__accent { color: var(--ember); }
.brand-strip__meta {
display: flex;
align-items: center;
gap: 24px;
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--chrome-dim);
}
.brand-strip__meta span::before {
content: '';
display: inline-block;
width: 4px; height: 4px;
background: var(--ember);
margin-right: 8px;
transform: translateY(-2px);
box-shadow: 0 0 6px var(--ember);
}
/* Site nav — SHOP / SABER CORES / CHARACTERS / HELMETS / SUPPORT + right utility */
.site-nav {
background: var(--carbon);
border-bottom: 1px solid var(--hairline);
position: relative;
}
.site-nav::before {
content: '';
position: absolute;
left: 0; right: 0; bottom: -1px;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(255,122,46,0.10) 30%, rgba(255,122,46,0.15) 50%, rgba(255,122,46,0.10) 70%, transparent 100%);
pointer-events: none;
}
.site-nav__inner {
max-width: 1320px;
margin: 0 auto;
padding: 0 32px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
min-height: 52px;
}
.site-nav__links {
display: flex;
align-items: center;
gap: 30px;
list-style: none;
margin: 0; padding: 0;
}
.site-nav__links a {
font-family: var(--font-display);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--chrome-warm);
padding: 18px 0;
display: inline-block;
transition: color .15s;
}
.site-nav__links a:hover { color: var(--ember); }
.site-nav__utility {
display: flex;
align-items: center;
gap: 20px;
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--chrome-dim);
}
.site-nav__utility a { color: var(--chrome-dim); transition: color .15s; }
.site-nav__utility a:hover { color: var(--ember); }
.site-nav__cart {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--chrome-warm);
}
.site-nav__cart-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px; height: 20px;
padding: 0 6px;
background: var(--ember);
color: var(--on-primary-fixed);
font-family: var(--font-display);
font-weight: 700;
font-size: 10px;
letter-spacing: 0.04em;
box-shadow: 0 0 10px rgba(255,122,46,0.45);
}
/* ============================================================
Cinematic hero — full-bleed atmospheric moment
Real hull-plate imagery (Variant F). Dark overlay for legibility.
Ember hairline separator + ember glow spill at the bottom seam.
============================================================ */
.hero-moment {
position: relative;
min-height: 560px;
padding: 96px 32px 120px;
display: flex;
align-items: center;
background-color: var(--carbon);
background-image:
/* Dark overlay 68-78% for legibility */
linear-gradient(180deg, rgba(6,6,6,0.62) 0%, rgba(6,6,6,0.72) 55%, rgba(6,6,6,0.88) 100%),
/* Corner ember bloom */
radial-gradient(700px 500px at 88% 20%, rgba(255,122,46,0.18), transparent 70%),
/* Hull-plate photograph — Variant F (horizontal smooth) */
url('https://camcom.dev/generated_imgs/generated-2026-07-07T15-47-31-768Z-joeqpj.jpg');
background-size: cover, cover, cover;
background-position: center, center, center;
background-repeat: no-repeat;
}
/* Ember hairline separator at the bottom seam */
.hero-moment::before {
content: '';
position: absolute; left: 0; right: 0; bottom: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--ember) 40%, var(--ember-glow) 50%, var(--ember) 60%, transparent 100%);
opacity: 0.65;
z-index: 2;
}
/* Ember bloom spilling down into the next section (MAS60 pattern) */
.hero-moment::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -160px;
height: 160px;
background: radial-gradient(ellipse at center top, rgba(255, 122, 46, 0.22), transparent 70%);
pointer-events: none;
z-index: 0;
}
.hero-moment__inner {
max-width: 1080px;
margin: 0 auto;
width: 100%;
position: relative;
z-index: 1;
}
.hero-moment__eyebrow {
font-family: var(--font-display);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ember);
margin-bottom: 26px;
display: inline-flex;
align-items: center;
gap: 12px;
text-shadow: 0 0 16px rgba(255, 122, 46, 0.6);
}
.hero-moment__eyebrow::before {
content: '';
width: 9px; height: 9px;
background: var(--ember);
box-shadow: 0 0 12px var(--ember), 0 0 24px rgba(255,122,46,0.5);
display: inline-block;
}
.hero-moment__eyebrow strong {
color: var(--ember-glow);
font-weight: 700;
letter-spacing: 0.06em;
}
.hero-moment__title {
font-family: var(--font-display);
font-weight: 700;
font-size: 68px;
line-height: 1.02;
letter-spacing: 0.8px;
color: var(--chrome-highlight);
margin-bottom: 24px;
max-width: 900px;
/* Chrome-highlight catches light — subtle top-lit gradient */
background: linear-gradient(180deg, #FFFFFF 0%, var(--chrome-highlight) 40%, var(--chrome-warm) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 2px 40px rgba(0,0,0,0.5);
}
.hero-moment__sub {
font-family: var(--font-body);
font-size: 18px;
line-height: 1.6;
color: var(--chrome-warm);
max-width: 640px;
font-weight: 400;
}
.hero-moment__sub strong { color: var(--chrome-highlight); font-weight: 600; }
/* ============================================================
Main narrative column
============================================================ */
.cart-main {
max-width: 1200px;
margin: 0 auto;
padding: 64px 32px 72px;
display: flex;
flex-direction: column;
gap: 8px;
}
.post-cta-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 380px;
gap: 40px;
margin-top: 24px;
align-items: start;
}
.post-cta-grid > fieldset { min-width: 0; margin: 0; }
.post-cta-grid__side {
display: flex;
flex-direction: column;
gap: 16px;
}
.post-cta-grid__side > fieldset { margin: 0; }
@media (max-width: 900px) {
.post-cta-grid { grid-template-columns: 1fr; gap: 20px; }
}
/* ============================================================
Fieldset content-group (block: content-group) — MAS52 pattern
============================================================ */
.content-group {
position: relative;
border: 1px solid var(--hairline-strong);
background: var(--bg-card);
padding: 32px 30px 30px;
box-shadow: var(--panel-lift);
}
/* --flat modifier: strip framing, use section-header pattern
for stacked narrative sections. */
.content-group--flat {
border: 0;
background: transparent;
padding: 48px 0 44px;
box-shadow: none;
border-top: 1px solid rgba(255,122,46,0.20);
}
.content-group--flat:first-of-type { border-top: 0; padding-top: 8px; }
.content-group--flat .content-group__legend {
position: static;
padding: 0;
background: transparent;
font-size: 22px;
letter-spacing: 0.10em;
color: var(--chrome-highlight);
margin-bottom: 8px;
display: block;
font-weight: 700;
}
.content-group--flat .content-group__sub {
font-family: var(--font-body);
font-size: 16px;
color: var(--chrome-warm);
line-height: 1.55;
max-width: 640px;
margin-bottom: 32px;
}
/* ============================================================
Password card (block: password-card) — PRIMARY conversion.
Ember hairline border + ember-tinted background + ember key glyph
+ outer ember glow. Reframed as "track your build".
============================================================ */
.password-card {
border: 1px solid var(--ember-hairline);
background:
linear-gradient(180deg, rgba(255, 122, 46, 0.06) 0%, rgba(255, 122, 46, 0.02) 100%),
var(--hull-panel);
box-shadow:
inset 0 1px 0 rgba(250, 250, 250, 0.10),
0 0 22px rgba(255, 122, 46, 0.10),
0 8px 28px -8px rgba(0, 0, 0, 0.9);
padding: 36px 30px 30px;
margin-top: 8px;
}
.password-card .content-group__legend {
background: var(--charcoal);
color: var(--chrome-highlight);
padding-left: 8px;
}
.legend-glyph {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px; height: 22px;
background: linear-gradient(180deg, rgba(255, 122, 46, 0.20) 0%, rgba(255, 122, 46, 0.06) 100%);
border: 1px solid var(--ember-hairline);
color: var(--ember);
box-shadow: inset 0 0 8px rgba(255, 122, 46, 0.25), 0 0 8px rgba(255, 122, 46, 0.35);
margin-right: 2px;
}
.legend-glyph svg { width: 14px; height: 14px; }
.password-card__sub {
font-family: var(--font-body);
font-size: 14px;
color: var(--chrome-warm);
line-height: 1.6;
margin-bottom: 22px;
max-width: 620px;
}
.password-card__signin {
font-family: var(--font-body);
font-size: 12px;
color: var(--chrome-dim);
margin-bottom: 22px;
padding-bottom: 18px;
border-bottom: 1px dashed var(--hairline);
display: flex;
align-items: baseline;
gap: 8px;
flex-wrap: wrap;
}
.password-card__signin-label {
font-family: var(--font-display);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--chrome-dim);
}
.password-card__signin-inline {
display: inline-block;
font-size: 12px;
color: var(--chrome-dim);
margin-left: 6px;
}
.password-card__signin-inline .password-card__signin-label {
color: var(--chrome-dim);
}
.password-card--compact { padding: 26px 28px 22px; }
.password-card--compact .password-card__sub {
margin-bottom: 20px;
max-width: none;
}
.password-card--compact .password-card__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px 28px;
margin-bottom: 20px;
}
.password-card--compact .password-card__actions {
display: grid;
grid-template-columns: minmax(320px, 1fr) auto;
align-items: center;
gap: 16px 24px;
}
.password-card--compact .password-card__actions .btn-primary {
width: 100%;
margin: 0;
}
.password-card--compact .password-card__actions .btn-skip {
white-space: nowrap;
margin: 0;
justify-self: end;
font-size: 11px;
}
.password-card--compact .password-card__actions .password-card__trust {
grid-column: 1 / -1;
margin: 6px 0 0 0;
padding-top: 10px;
border-top: 1px dashed var(--hairline);
justify-content: center;
}
@media (max-width: 720px) {
.password-card--compact .password-card__grid,
.password-card--compact .password-card__actions { grid-template-columns: 1fr; }
}
.password-card__signin-email {
color: var(--ember);
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
}
/* Form primitives — MAS52 verbatim */
.form-row { margin-bottom: 18px; }
.form-row:last-child { margin-bottom: 0; }
.form-label {
display: flex;
align-items: baseline;
gap: 8px;
font-family: var(--font-display);
font-weight: 500;
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--chrome-warm);
margin-bottom: 8px;
}
.form-label .req {
color: var(--ember);
font-size: 10px;
vertical-align: super;
}
.form-input {
width: 100%;
padding: 13px 14px;
background: var(--bg-input);
border: 1px solid var(--hairline);
border-bottom: 1px solid var(--hull-edge);
color: var(--chrome-warm);
font-family: var(--font-body);
font-size: 16px;
border-radius: 0;
transition: border-color .15s, box-shadow .15s, background .15s;
box-shadow: inset 0 1px 0 rgba(0,0,0,0.4);
outline: none;
letter-spacing: 0.18em;
}
.form-input:focus {
border-color: var(--ember);
border-bottom-color: var(--ember);
background: var(--bg-input-focus);
box-shadow: var(--ember-focus);
}
.form-input::placeholder { color: rgba(184, 176, 166, 0.4); letter-spacing: 0; }
/* Password input wrap with show/hide toggle */
.password-wrap { position: relative; }
.password-wrap .form-input { padding-right: 68px; }
.password-toggle {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: none;
color: var(--chrome-dim);
font-family: var(--font-display);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
cursor: pointer;
padding: 6px 8px;
border-left: 1px solid var(--hairline);
line-height: 1;
}
.password-toggle:hover { color: var(--ember); }
/* Strength meter — 4 bars, ember when filled */
.strength-meter { margin-top: 12px; }
.strength-meter__bars {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 4px;
margin-bottom: 8px;
}
.strength-meter__bar {
height: 3px;
background: var(--hull-panel-dark);
border: 1px solid rgba(250, 250, 250, 0.04);
}
.strength-meter__bar--filled {
background: var(--ember);
border-color: var(--ember);
box-shadow: 0 0 6px rgba(255, 122, 46, 0.5);
}
.strength-meter__label {
font-family: var(--font-display);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--chrome-dim);
display: flex;
justify-content: space-between;
align-items: baseline;
}
.strength-meter__label strong { color: var(--ember); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
/* Primary CTA */
.btn-primary {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 18px 24px;
background: linear-gradient(180deg, var(--ember-glow) 0%, var(--ember) 50%, var(--ember-deep) 100%);
color: var(--on-primary-fixed);
font-family: var(--font-display);
font-weight: 700;
font-size: 14px;
letter-spacing: 0.14em;
text-transform: uppercase;
border: 0;
border-radius: 0;
box-shadow: var(--ember-glow-sm), var(--chrome-top-inset);
transition: transform .15s, box-shadow .15s;
cursor: pointer;
margin-top: 22px;
}
.btn-primary:hover {
transform: translateY(-1px);
box-shadow: var(--ember-glow-md), var(--chrome-top-inset);
}
.btn-primary__arrow { font-size: 18px; transform: translateY(-1px); }
.btn-skip {
display: block;
width: 100%;
text-align: center;
margin-top: 14px;
font-family: var(--font-display);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--chrome-dim);
padding: 6px 8px;
border-bottom: 1px dashed transparent;
}
.btn-skip:hover { color: var(--chrome-warm); }
/* Small trust footer inside the card */
.password-card__trust {
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid var(--hairline);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--font-display);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--chrome-dim);
}
.password-card__trust svg { width: 12px; height: 12px; color: var(--ember); }
/* ============================================================
Shipment timeline (block: shipment-timeline)
Warmer stage labels: In the workshop / Assembly / Dispatched / Delivered
============================================================ */
.shipment-timeline {
display: flex;
flex-direction: column;
gap: 28px;
}
.shipment-block__eta strong { color: var(--ember); font-weight: 600; }
.shipment-thumbs {
display: flex;
gap: 8px;
margin-bottom: 24px;
}
.shipment-thumb {
width: 46px; height: 46px;
background: var(--void);
border: 1px solid var(--hairline);
overflow: hidden;
opacity: 0.78;
transition: opacity .15s;
}
.shipment-thumb img { width: 100%; height: 100%; object-fit: cover; }
.shipment-thumb:hover { opacity: 1; }
.shipment-block__explainer strong { color: var(--chrome-highlight); font-weight: 600; }
/* Progress strip — 4 dots + connecting hairline */
.progress-strip {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
padding-top: 6px;
}
.progress-strip::before {
content: '';
position: absolute;
top: 12px;
left: calc(100% / 8);
right: calc(100% / 8);
height: 1px;
background: linear-gradient(90deg, var(--ember) 0%, var(--ember) 22%, var(--hull-edge) 30%, var(--hull-edge) 100%);
z-index: 0;
}
.progress-step {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
text-align: center;
}
.progress-step__dot {
width: 12px; height: 12px;
border-radius: 50%;
background: var(--hull-panel-dark);
border: 1px solid var(--hull-edge);
box-shadow: inset 0 0 0 2px var(--hull-panel);
}
.progress-step--active .progress-step__dot {
background: var(--ember);
border-color: var(--ember);
box-shadow:
0 0 0 4px rgba(255, 122, 46, 0.18),
0 0 0 6px rgba(255, 122, 46, 0.08),
0 0 12px var(--ember);
}
.progress-step__label {
font-family: var(--font-display);
font-weight: 600;
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--chrome-dim);
line-height: 1.3;
}
.progress-step--active .progress-step__label { color: var(--ember); }
/* ============================================================
What happens next — 3 beats
============================================================ */
.next-beats {
display: flex;
flex-direction: column;
gap: 18px;
}
.next-beat {
display: grid;
grid-template-columns: 40px 1fr;
gap: 14px;
align-items: start;
padding: 0;
}
.next-beat__icon {
width: 40px; height: 40px;
border: 1px solid var(--ember-hairline);
background: linear-gradient(180deg, rgba(255, 122, 46, 0.14) 0%, rgba(255, 122, 46, 0.04) 100%);
display: flex;
align-items: center;
justify-content: center;
color: var(--ember);
font-family: var(--font-display);
font-weight: 700;
box-shadow: inset 0 0 12px rgba(255, 122, 46, 0.2), var(--chrome-top-soft);
flex: 0 0 40px;
margin-top: 2px;
}
.next-beat__icon svg { width: 20px; height: 20px; }
.next-beat__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.next-beat__title {
font-family: var(--font-display);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--chrome-highlight);
line-height: 1.3;
}
.next-beat__body {
font-family: var(--font-body);
font-size: 14px;
color: var(--chrome-warm);
line-height: 1.55;
}
/* ============================================================
Order recap — small receipt appendix at the bottom
============================================================ */
.order-recap {
display: grid;
grid-template-columns: minmax(0, 240px) 1fr;
gap: 24px;
align-items: center;
padding: 4px 0 8px;
}
.order-recap__legend {
font-family: var(--font-display);
font-size: 13px;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--chrome-dim);
margin-bottom: 20px;
display: block;
}
.item-preview__strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
}
.item-preview__thumb {
aspect-ratio: 1 / 1;
background-color: var(--void);
border: 1px solid rgba(250,250,250,0.06);
overflow: hidden;
position: relative;
}
.item-preview__thumb img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.item-preview__thumb--gift {
border-color: rgba(255,122,46,0.55);
box-shadow: 0 0 12px rgba(255,122,46,0.20);
}
.item-preview__thumb--gift::after {
content: 'GIFT';
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 3px 0;
font-family: var(--font-display);
font-size: 8px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--ember);
background: rgba(6,6,6,0.85);
text-align: center;
}
.order-recap__lines {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.order-recap__primary {
font-family: var(--font-body);
font-size: 14px;
color: var(--chrome-warm);
line-height: 1.5;
}
.order-recap__primary strong {
color: var(--chrome-highlight);
font-family: var(--font-display);
font-weight: 600;
letter-spacing: 0.06em;
margin-right: 4px;
}
.order-recap__primary .ember {
color: var(--ember);
font-family: var(--font-display);
font-weight: 700;
font-size: 16px;
letter-spacing: 0.02em;
margin-left: 2px;
}
.order-recap__secondary {
font-family: var(--font-body);
font-size: 12px;
color: var(--chrome-dim);
line-height: 1.55;
}
.order-recap__secondary a {
color: var(--ember);
border-bottom: 1px dotted rgba(255,122,46,0.5);
padding-bottom: 1px;
}
.order-recap__secondary a:hover { border-bottom-style: solid; }
.order-recap__secondary .card-mark {
display: inline-block;
height: 16px;
padding: 0 5px;
font-family: var(--font-display);
font-weight: 700;
font-size: 8px;
letter-spacing: 0;
line-height: 16px;
color: #F7B600;
background: #1A1F71;
font-style: italic;
margin-right: 4px;
vertical-align: 1px;
}
@media (max-width: 720px) {
.order-recap { grid-template-columns: 1fr; gap: 18px; }
}
/* ============================================================
Refer / follow cards
============================================================ */
.refer-card__sub,
.follow-card__sub {
font-family: var(--font-body);
font-size: 14px;
color: var(--chrome-warm);
line-height: 1.55;
margin-bottom: 22px;
max-width: 620px;
}
.refer-card__sub strong { color: var(--ember); font-weight: 600; }
.refer-link {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
margin-bottom: 20px;
}
.refer-link__input {
padding: 12px 14px;
background: var(--bg-input);
border: 1px solid var(--hairline);
border-bottom: 1px solid var(--hull-edge);
color: var(--chrome-warm);
font-family: var(--font-body);
font-size: 13px;
border-radius: 0;
box-shadow: inset 0 1px 0 rgba(0,0,0,0.4);
outline: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.refer-link__input:focus {
border-color: var(--ember);
box-shadow: var(--ember-focus);
}
.refer-link__btn {
padding: 0 18px;
background: transparent;
border: 1px solid rgba(62, 62, 62, 0.6);
color: var(--chrome-warm);
font-family: var(--font-display);
font-weight: 600;
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
transition: background .15s, box-shadow .15s;
white-space: nowrap;
}
.refer-link__btn:hover {
background: var(--hull-panel-lift);
box-shadow: var(--chrome-top-soft);
}
.share-row {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
}
.share-btn {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 12px 6px;
background: transparent;
border: 1px solid var(--hairline);
color: var(--chrome-dim);
font-family: var(--font-display);
font-size: 9px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
transition: border-color .15s, color .15s, box-shadow .15s;
}
.share-btn:hover {
border-color: var(--ember-hairline);
color: var(--ember);
box-shadow: var(--ember-glow-sm);
}
.share-btn svg { width: 18px; height: 18px; }
.social-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.social-btn {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 18px 6px 14px;
background: var(--hull-panel-lift);
border: 1px solid var(--hairline);
color: var(--chrome-warm);
font-family: var(--font-display);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
transition: border-color .15s, box-shadow .15s;
box-shadow: var(--chrome-top-soft);
}
.social-btn__icon {
width: 28px; height: 28px;
display: flex;
align-items: center;
justify-content: center;
color: var(--chrome-highlight);
transition: color .15s;
}
.social-btn__icon svg { width: 24px; height: 24px; }
.social-btn:hover {
border-color: var(--ember-hairline);
box-shadow: var(--ember-glow-sm);
}
.social-btn:hover .social-btn__icon { color: var(--ember); }
.social-btn__handle {
font-size: 10px;
color: var(--chrome-dim);
font-family: var(--font-body);
font-weight: 500;
letter-spacing: 0;
}
/* ============================================================
Post-checkout reinforcement band — MAS60 verbatim
============================================================ */
.reinforcement {
border-top: 1px solid var(--ember-hairline);
background: var(--carbon);
padding: 26px 32px;
position: relative;
}
.reinforcement::before {
content: '';
position: absolute;
top: -1px; left: 0; right: 0;
height: 40px;
background: radial-gradient(ellipse at center top, rgba(255, 122, 46, 0.20), transparent 70%);
pointer-events: none;
}
.reinforcement__item + .reinforcement__item::before {
content: '·';
color: var(--ember);
font-size: 20px;
transform: translateY(-2px);
}
/* ============================================================
Site footer — MAS60 verbatim
============================================================ */
.site-footer {
background: var(--carbon);
color: var(--chrome-dim);
padding: 56px 32px 32px;
border-top: 1px solid var(--hairline);
box-shadow: var(--chrome-top-soft);
}
.site-footer__inner {
max-width: 1320px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1fr;
gap: 40px;
padding-bottom: 40px;
border-bottom: 1px solid var(--hairline);
}
.site-footer__brand {
font-family: var(--font-display);
font-weight: 700;
font-size: 22px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--chrome-highlight);
margin-bottom: 12px;
}
.site-footer__brand span { color: var(--ember); }
.site-footer__tag {
font-size: 13px;
color: var(--chrome-warm);
max-width: 320px;
line-height: 1.55;
margin-bottom: 20px;
}
.site-footer__meta {
display: flex;
gap: 20px;
font-family: var(--font-display);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--chrome-dim);
}
.footer-col__title {
font-family: var(--font-display);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--chrome-warm);
margin-bottom: 16px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { font-size: 13px; color: var(--chrome-dim); }
.footer-col a:hover { color: var(--chrome-warm); }
.site-footer__base {
max-width: 1320px;
margin: 0 auto;
padding-top: 24px;
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--font-display);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--chrome-dim);
flex-wrap: wrap;
gap: 12px;
}
/* ============================================================
Responsive
============================================================ */
@media (max-width: 1024px) {
.cart-main { padding: 48px 24px 56px; }
.hero-moment { padding: 72px 24px 96px; min-height: 480px; }
.hero-moment__title { font-size: 52px; letter-spacing: 0.8px; }
.next-beats { grid-template-columns: 1fr; gap: 26px; }
.site-footer__inner { grid-template-columns: 1fr 1fr; }
.site-nav__links { gap: 22px; }
.site-nav__links a { font-size: 10px; letter-spacing: 0.16em; }
}
@media (max-width: 720px) {
.brand-strip__inner { padding: 12px 20px; flex-wrap: wrap; gap: 12px; }
.brand-strip__meta { display: none; }
.site-nav__inner { padding: 0 20px; gap: 16px; overflow-x: auto; }
.site-nav__links { display: none; }
.site-nav__utility { font-size: 10px; gap: 14px; }
.hero-moment { padding: 56px 20px 84px; min-height: 420px; }
.hero-moment__eyebrow { font-size: 11px; letter-spacing: 0.18em; }
.hero-moment__title { font-size: 36px; line-height: 1.05; letter-spacing: 0.8px; }
.hero-moment__sub { font-size: 16px; }
.cart-main { padding: 40px 16px 44px; gap: 8px; }
.content-group { padding: 30px 20px 22px; }
.content-group__legend { left: 16px; }
.content-group--flat { padding: 40px 0 36px; }
.content-group--flat .content-group__legend { font-size: 18px; }
.password-card { padding: 32px 20px 22px; }
.shipment-block { padding: 20px 16px 22px; }
.shipment-block__head { gap: 8px; }
.progress-step__label { font-size: 9px; letter-spacing: 0.10em; }
.site-footer__inner { grid-template-columns: 1fr; gap: 32px; }
.site-footer__base { flex-direction: column; align-items: flex-start; }
.share-row { grid-template-columns: repeat(5, 1fr); gap: 6px; }
}
/* orbitron-retrofit: title-em italic kill */
[class*="__title"] em, [class*="__title"] i,
[class*="-title"] em, [class*="-title"] i,
[class*="__heading"] em, [class*="__heading"] i,
[class*="-heading"] em, [class*="-heading"] i { font-style: normal; }
/* -- Reconciled from family 14022 canonical 13112:tf-progress-step-strip -- */
/* Progress strip — 4 dots + connecting hairline */
.progress-strip {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
padding-top: 6px;
}
.progress-strip::before {
content: '';
position: absolute;
top: 12px;
left: calc(100% / 8);
right: calc(100% / 8);
height: 1px;
background: linear-gradient(90deg, var(--ember) 0%, var(--ember) 22%, var(--hull-edge) 30%, var(--hull-edge) 100%);
z-index: 0;
}
.progress-step {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
text-align: center;
}
.progress-step__dot {
width: 12px; height: 12px;
border-radius: 50%;
background: var(--hull-panel-dark);
border: 1px solid var(--hull-edge);
box-shadow: inset 0 0 0 2px var(--hull-panel);
}
.progress-step--active .progress-step__dot {
background: var(--ember);
border-color: var(--ember);
box-shadow:
0 0 0 4px rgba(255, 122, 46, 0.18),
0 0 0 6px rgba(255, 122, 46, 0.08),
0 0 12px var(--ember);
}
.progress-step__label {
font-family: var(--font-display);
font-weight: 600;
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--chrome-dim);
line-height: 1.3;
}
.progress-step--active .progress-step__label { color: var(--ember); }
@media (max-width: 640px) {
.brand-strip__inner { padding: 14px 20px; flex-wrap: wrap; gap: 12px; }
.brand-strip__meta { display: none; }
.page-header { padding: 28px 20px 22px; }
.page-header__title { font-size: 34px; }
.page-header__sub { font-size: 14px; }
.trust-chips { gap: 10px 18px; }
.trust-chip { font-size: 10px; }
.cart-main { padding: 24px 16px 40px; gap: 24px; }
.content-group { padding: 30px 20px 22px; }
.content-group__legend { left: 16px; }
.password-card { padding: 32px 20px 22px; }
.shipment-block { padding: 18px 16px 20px; }
.shipment-block__head { gap: 8px; }
.progress-step__label { font-size: 9px; letter-spacing: 0.10em; }
.site-footer__inner { grid-template-columns: 1fr; gap: 32px; }
.site-footer__base { flex-direction: column; align-items: flex-start; }
.total-row__value { font-size: 26px; }
.share-row { grid-template-columns: repeat(5, 1fr); gap: 6px; }
}
/* -- Reconciled from family 14037 canonical 13112:tf-other-4 -- */
/* ============================================================
Fieldset content-group (block: content-group) — MAS52 pattern
============================================================ */
.content-group {
position: relative;
border: 1px solid var(--hairline-strong);
background: var(--bg-card);
padding: 32px 30px 30px;
box-shadow: var(--panel-lift);
}
.content-group__legend {
position: absolute;
top: -11px;
left: 24px;
padding: 0 12px;
background: var(--charcoal);
font-family: var(--font-display);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--chrome-highlight);
display: inline-flex;
align-items: center;
gap: 10px;
}
.content-group__sub {
font-size: 13px;
color: var(--chrome-dim);
margin-bottom: 24px;
line-height: 1.5;
}
/* --flat modifier: strip framing, use section-header pattern
for stacked left-column sections. */
.content-group--flat {
border: 0;
background: transparent;
padding: 44px 0 40px;
box-shadow: none;
border-top: 1px solid rgba(255,122,46,0.20);
}
.content-group--flat:first-of-type { border-top: 0; padding-top: 8px; }
.content-group--flat .content-group__legend {
position: static;
padding: 0;
background: transparent;
font-size: 16px;
letter-spacing: 0.14em;
color: var(--chrome-highlight);
margin-bottom: 6px;
display: block;
}
.content-group--flat .content-group__sub { margin-bottom: 28px; }
.password-card .content-group__legend {
background: var(--charcoal);
color: var(--chrome-highlight);
padding-left: 8px;
}
/* ============================================================
Follow the workshop card
============================================================ */
.follow-card__sub {
font-family: var(--font-body);
font-size: 13px;
color: var(--chrome-warm);
line-height: 1.55;
margin-bottom: 20px;
}
.social-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.social-btn {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 16px 6px 12px;
background: var(--hull-panel-lift);
border: 1px solid var(--hairline);
color: var(--chrome-warm);
font-family: var(--font-display);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
transition: border-color .15s, box-shadow .15s;
box-shadow: var(--chrome-top-soft);
}
.social-btn__icon {
width: 28px; height: 28px;
display: flex;
align-items: center;
justify-content: center;
color: var(--chrome-highlight);
transition: color .15s;
}
.social-btn__icon svg { width: 24px; height: 24px; }
.social-btn:hover {
border-color: var(--ember-hairline);
box-shadow: var(--ember-glow-sm);
}
.social-btn:hover .social-btn__icon { color: var(--ember); }
.social-btn__handle {
font-size: 10px;
color: var(--chrome-dim);
font-family: var(--font-body);
font-weight: 500;
letter-spacing: 0;
}
@media (max-width: 640px) {
.brand-strip__inner { padding: 14px 20px; flex-wrap: wrap; gap: 12px; }
.brand-strip__meta { display: none; }
.page-header { padding: 28px 20px 22px; }
.page-header__title { font-size: 34px; }
.page-header__sub { font-size: 14px; }
.trust-chips { gap: 10px 18px; }
.trust-chip { font-size: 10px; }
.cart-main { padding: 24px 16px 40px; gap: 24px; }
.content-group { padding: 30px 20px 22px; }
.content-group__legend { left: 16px; }
.password-card { padding: 32px 20px 22px; }
.shipment-block { padding: 18px 16px 20px; }
.shipment-block__head { gap: 8px; }
.progress-step__label { font-size: 9px; letter-spacing: 0.10em; }
.site-footer__inner { grid-template-columns: 1fr; gap: 32px; }
.site-footer__base { flex-direction: column; align-items: flex-start; }
.total-row__value { font-size: 26px; }
.share-row { grid-template-columns: repeat(5, 1fr); gap: 6px; }
}
/* -- Reconciled from family 13994 canonical 13106:tf-trust-chip-strip-3 -- */
/* ============================================================
Post-checkout reinforcement band
============================================================ */
.reinforcement {
border-top: 1px solid var(--ember-hairline);
background: var(--carbon);
padding: 26px 32px;
position: relative;
}
.reinforcement::before {
content: '';
position: absolute;
top: -1px; left: 0; right: 0;
height: 40px;
background: radial-gradient(ellipse at center top, rgba(255, 122, 46, 0.20), transparent 70%);
pointer-events: none;
}
.reinforcement__inner {
max-width: 1320px;
margin: 0 auto;
display: flex;
justify-content: center;
gap: 14px 32px;
flex-wrap: wrap;
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--chrome-dim);
text-align: center;
}
.reinforcement__item {
display: inline-flex;
align-items: center;
gap: 12px;
}
.reinforcement__item + .reinforcement__item::before {
content: '·';
color: var(--ember);
font-size: 20px;
transform: translateY(-2px);
}
</style>
</head>
<body>
<!-- ============ SITE HEADER (brand strip + site nav) — MAS60 verbatim shape ============ -->
<div class="brand-strip">
<div class="brand-strip__inner">
<div class="brand-mark">ART<span class="brand-mark__accent">SABERS</span></div>
<div class="brand-strip__meta">
<span>Order Confirmed</span>
<span>Workshop Notified</span>
</div>
</div>
</div>
<nav class="site-nav" aria-label="Primary">
<div class="site-nav__inner">
<ul class="site-nav__links">
<li><a href="#">Shop</a></li>
<li><a href="#">Saber Cores</a></li>
<li><a href="#">Characters</a></li>
<li><a href="#">Helmets</a></li>
<li><a href="#">Support</a></li>
</ul>
<div class="site-nav__utility">
<a href="#">USD</a>
<a href="#">Account</a>
<a href="#" class="site-nav__cart">Cart <span class="site-nav__cart-badge">0</span></a>
</div>
</div>
</nav>
<!-- ============ CINEMATIC HERO MOMENT — full-bleed atmospheric ============ -->
<a id="tf-hero-atmospheric" data-tf-family="hero-atmospheric" style="display:contents"></a>
<section class="hero-moment" aria-labelledby="hero-title">
<div class="hero-moment__inner">
<div class="hero-moment__eyebrow">Order <strong>#AS-284937</strong> · Confirmed</div>
<h1 class="hero-moment__title" id="hero-title">Your order is confirmed, Alex.</h1>
<p class="hero-moment__sub">Ships direct from the factory floor. Tracked worldwide. Both shipments track through the same account below.</p>
</div>
</section>
<!-- ============ MAIN NARRATIVE COLUMN ============ -->
<main class="cart-main">
<!-- 1) TRACK YOUR ORDER — password (PRIMARY ACTION) -->
<a id="tf-form" data-tf-family="form" style="display:contents"></a>
<fieldset class="content-group password-card password-card--compact">
<legend class="content-group__legend">
<span class="legend-glyph" aria-hidden="true">
<svg viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square">
<circle cx="8" cy="12" r="4"></circle>
<path d="M11.5 12H21"></path>
<path d="M17 12v4"></path>
<path d="M20 12v3"></path>
</svg>
</span>
Track your order
</legend>
<p class="password-card__sub">Set a password to sign in and track your order in real time — from confirmation, through production, to your door. <span class="password-card__signin-inline"><span class="password-card__signin-label">Signed in as</span> <span class="password-card__signin-email">alex@example.com</span></span></p>
<div class="password-card__grid">
<div class="form-row">
<label class="form-label" for="pw-new">Create password <span class="req">*</span></label>
<div class="password-wrap">
<input class="form-input" type="text" id="pw-new" value="•••••••••">
<button class="password-toggle" type="button">Show</button>
</div>
<div class="strength-meter">
<div class="strength-meter__bars">
<div class="strength-meter__bar strength-meter__bar--filled"></div>
<div class="strength-meter__bar strength-meter__bar--filled"></div>
<div class="strength-meter__bar"></div>
<div class="strength-meter__bar"></div>
</div>
<div class="strength-meter__label">
<span>Strength</span>
<span><strong>Fair — try 12+ characters</strong></span>
</div>
</div>
</div>
<div class="form-row">
<label class="form-label" for="pw-confirm">Confirm password <span class="req">*</span></label>
<div class="password-wrap">
<input class="form-input" type="password" id="pw-confirm" placeholder="Re-enter password">
<button class="password-toggle" type="button">Show</button>
</div>
</div>
</div>
<div class="password-card__actions">
<button class="btn-primary" type="button">
<span>Set Password & Track My Order</span>
<span class="btn-primary__arrow">→</span>
</button>
<a href="#" class="btn-skip">Skip for now — set it later from your email</a>
<div class="password-card__trust">
<svg viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="square" aria-hidden="true">
<rect x="5" y="11" width="14" height="10"></rect>
<path d="M8 11V7a4 4 0 0 1 8 0v4"></path>
</svg>
<span>Encrypted at rest. Never shared.</span>
</div>
</div>
</fieldset>
<!-- POST-CTA TWO-COLUMN GRID: main narrative + secondary actions -->
<div class="post-cta-grid">
<!-- 2) YOUR BUILD — delivery timeline as narrative (LEFT COLUMN) -->
<fieldset class="content-group content-group--flat">
<legend class="content-group__legend">Delivery status</legend>
<p class="content-group__sub">Every hilt is factory-tested and tracked from dispatch. Here’s where your two shipments are now.</p>
<div class="shipment-timeline">
<!-- Shipment 1 of 2 -->
<a id="tf-other-1" data-tf-family="other" style="display:contents"></a>
<div class="shipment-block">
<div class="shipment-block__head">
<span class="shipment-block__tag">Shipment 1 of 2</span>
<span class="shipment-block__eta">Arriving <strong>12–14 August</strong> · Standard delivery · <span class="shipment-block__free">FREE</span></span>
</div>
<div class="shipment-thumbs">
<div class="shipment-thumb"><img src="https://artsabers.com/wp-content/uploads/sites/10/2026/01/Carbon_Strike_1-768x768.jpg" alt="Carbon Strike"></div>
<div class="shipment-thumb"><img src="https://artsabers.com/wp-content/uploads/sites/10/2025/12/Starkiller1_SE_1-768x768.jpg" alt="Starkiller SE"></div>
</div>
<a id="tf-progress-step-strip" data-tf-family="progress-step-strip" style="display:contents"></a>
<div class="progress-strip" role="list" aria-label="Shipment progress">
<div class="progress-step progress-step--active" role="listitem">
<span class="progress-step__dot" aria-hidden="true"></span>
<span class="progress-step__label">Confirmed</span>
</div>
<div class="progress-step" role="listitem">
<span class="progress-step__dot" aria-hidden="true"></span>
<span class="progress-step__label">Assembly</span>
</div>
<div class="progress-step" role="listitem">
<span class="progress-step__dot" aria-hidden="true"></span>
<span class="progress-step__label">Dispatched</span>
</div>
<div class="progress-step" role="listitem">
<span class="progress-step__dot" aria-hidden="true"></span>
<span class="progress-step__label">Delivered</span>
</div>
</div>
</div>
<!-- Shipment 2 of 2 -->
<div class="shipment-block">
<div class="shipment-block__head">
<span class="shipment-block__tag">Shipment 2 of 2</span>
<span class="shipment-block__eta">Arriving <strong>25 August – 2 September</strong> · Standard delivery · <span class="shipment-block__free">FREE</span></span>
</div>
<div class="shipment-thumbs">
<div class="shipment-thumb"><img src="https://artsabers.com/wp-content/uploads/sites/10/2025/12/Mace_Windu_SE_1-768x768.jpg" alt="Mace Windu SE"></div>
</div>
<div class="progress-strip" role="list" aria-label="Shipment progress">
<div class="progress-step progress-step--active" role="listitem">
<span class="progress-step__dot" aria-hidden="true"></span>
<span class="progress-step__label">In the workshop</span>
</div>
<div class="progress-step" role="listitem">
<span class="progress-step__dot" aria-hidden="true"></span>
<span class="progress-step__label">Assembly</span>
</div>
<div class="progress-step" role="listitem">
<span class="progress-step__dot" aria-hidden="true"></span>
<span class="progress-step__label">Dispatched</span>
</div>
<div class="progress-step" role="listitem">
<span class="progress-step__dot" aria-hidden="true"></span>
<span class="progress-step__label">Delivered</span>
</div>
</div>
<p class="shipment-block__explainer"><strong>Assembly begins now.</strong> You’ll get a dispatch email once your hilt leaves the workshop.</p>
</div>
</div>
</fieldset>
<!-- RIGHT COLUMN — secondary sections stacked -->
<aside class="post-cta-grid__side">
<!-- 3) WHAT HAPPENS NEXT -->
<fieldset class="content-group content-group--flat">
<legend class="content-group__legend">What happens next</legend>
<a id="tf-trust-prose-cells" data-tf-family="trust-prose-cells" style="display:contents"></a>
<div class="next-beats">
<div class="next-beat">
<div class="next-beat__icon" aria-hidden="true">
<svg viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square"><rect x="3" y="5" width="18" height="14"></rect><path d="M3 7l9 6 9-6"></path></svg>
</div>
<div class="next-beat__text">
<div class="next-beat__title">Confirmation email</div>
<div class="next-beat__body">In your inbox within 5 minutes with your full receipt + order details.</div>
</div>
</div>
<div class="next-beat">
<div class="next-beat__icon" aria-hidden="true">
<svg viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square"><path d="M3 8l9-4 9 4-9 4-9-4z"></path><path d="M3 8v9l9 4 9-4V8"></path><path d="M12 12v9"></path></svg>
</div>
<div class="next-beat__text">
<div class="next-beat__title">Dispatch alerts</div>
<div class="next-beat__body">You’ll get an email + SMS when each shipment leaves the workshop, with tracking.</div>
</div>
</div>
<div class="next-beat">
<div class="next-beat__icon" aria-hidden="true">
<svg viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="miter" stroke-linecap="square"><polygon points="12,3 14.5,9 21,9.5 16,14 17.5,20.5 12,17 6.5,20.5 8,14 3,9.5 9.5,9"></polygon></svg>
</div>
<div class="next-beat__text">
<div class="next-beat__title">Review request</div>
<div class="next-beat__body">Once your hilt arrives, we’ll ask how it landed. Optional but appreciated.</div>
</div>
</div>
</div>
</fieldset>
<!-- 5) SHARE THE WORKSHOP — refer -->
<a id="tf-other-2" data-tf-family="other" style="display:contents"></a>
<fieldset class="content-group refer-card">
<legend class="content-group__legend">Refer a friend</legend>
<p class="refer-card__sub">Give friends <strong style="color:var(--ember);">$25 off</strong> their first order. Get <strong style="color:var(--ember);">$25 in loyalty</strong> when they check out.</p>
<div class="refer-link">
<input class="refer-link__input" type="text" value="artsabers.com/refer/alex-284937" readonly>
<button class="refer-link__btn" type="button">Copy link</button>
</div>
<div class="share-row">
<button class="share-btn" type="button" title="WhatsApp">
<svg viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M17.5 14.4c-.3-.1-1.7-.9-2-1s-.4-.1-.6.2-.7 1-.9 1.1-.3.2-.6.1c-.8-.4-1.6-1-2.3-1.7-.5-.5-.9-1.1-1.3-1.7-.1-.2 0-.4.1-.5s.2-.3.3-.4.2-.2.3-.4.1-.3 0-.4-.6-1.4-.8-1.9c-.2-.6-.4-.5-.6-.5H8.6c-.2 0-.4.1-.5.2-.6.6-.9 1.4-.9 2.2.1 1 .5 1.9 1.1 2.7 1.1 1.7 2.7 3 4.5 3.9.5.2.9.4 1.4.5.5.2 1.1.2 1.7.1.7-.1 1.3-.5 1.7-1.1.2-.4.3-.8.2-1.2 0-.2-.2-.3-.4-.4zM12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.5 1.4 5L2 22l5.2-1.4c1.4.8 3.1 1.2 4.8 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2m5.9 15.9c-.6.9-1.6 1.5-2.7 1.7-1 .2-2 .2-3-.2-.7-.2-1.4-.5-2-.9l-.4-.2-3.1.8.8-3-.2-.3c-1.1-1.8-.9-4.2.6-5.7 1.9-1.9 5-1.9 6.8 0 1.8 1.8 1.8 4.6 0 6.4l.4-.5z"></path></svg>
<span>WhatsApp</span>
</button>
<button class="share-btn" type="button" title="Messenger">
<svg viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2C6.5 2 2 6.2 2 11.4c0 2.8 1.3 5.4 3.5 7.1V22l3.3-1.8c1 .3 2.1.5 3.2.5 5.5 0 10-4.2 10-9.3S17.5 2 12 2m1 12.4-2.5-2.7-5 2.7 5.5-5.8 2.6 2.7 4.9-2.7z"></path></svg>
<span>Messenger</span>
</button>
<button class="share-btn" type="button" title="Email">
<svg viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" aria-hidden="true"><rect x="3" y="5" width="18" height="14"></rect><path d="M3 7l9 6 9-6"></path></svg>
<span>Email</span>
</button>
<button class="share-btn" type="button" title="X">
<svg viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M18.9 2h3.4l-7.5 8.5L23.6 22h-6.9l-5.4-7.1L5.1 22H1.7l8-9.1L1 2h7.1l4.9 6.5zm-1.2 18h1.9L6.4 4H4.3z"></path></svg>
<span>X</span>
</button>
<button class="share-btn" type="button" title="Copy">
<svg viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" aria-hidden="true"><rect x="8" y="3" width="12" height="14"></rect><path d="M4 7v14h12"></path></svg>
<span>Copy</span>
</button>
</div>
</fieldset>
<!-- 6) FOLLOW THE WORKSHOP -->
<a id="tf-other-3" data-tf-family="other" style="display:contents"></a>
<fieldset class="content-group follow-card">
<legend class="content-group__legend">Follow the workshop</legend>
<p class="follow-card__sub">Duelling builds, character series drops, community events. Behind the workshop, not just the storefront.</p>
<div class="social-row">
<a class="social-btn" href="#" title="Instagram">
<span class="social-btn__icon">
<svg viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="square" aria-hidden="true">
<rect x="3" y="3" width="18" height="18"></rect>
<circle cx="12" cy="12" r="4"></circle>
<circle cx="17.5" cy="6.5" r="0.9" fill="currentColor"></circle>
</svg>
</span>
<span class="social-btn__handle">@artsabers</span>
</a>
<a class="social-btn" href="#" title="TikTok">
<span class="social-btn__icon">
<svg viewbox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M20.5 8.6a6.5 6.5 0 0 1-3.9-1.3V15a5.6 5.6 0 1 1-5.6-5.6h.7v2.8a2.8 2.8 0 1 0 2 2.7V2h2.9a3.7 3.7 0 0 0 3.9 3.7z"></path>
</svg>
</span>
<span class="social-btn__handle">@artsabers</span>
</a>
<a class="social-btn" href="#" title="YouTube">
<span class="social-btn__icon">
<svg viewbox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M23 12s0-3.6-.5-5.3a2.7 2.7 0 0 0-1.9-1.9C18.9 4.3 12 4.3 12 4.3s-6.9 0-8.6.5A2.7 2.7 0 0 0 1.5 6.7C1 8.4 1 12 1 12s0 3.6.5 5.3a2.7 2.7 0 0 0 1.9 1.9c1.7.5 8.6.5 8.6.5s6.9 0 8.6-.5a2.7 2.7 0 0 0 1.9-1.9c.5-1.7.5-5.3.5-5.3zM9.7 15.3V8.7l5.7 3.3z"></path>
</svg>
</span>
<span class="social-btn__handle">/artsabers</span>
</a>
<a class="social-btn" href="#" title="Discord">
<span class="social-btn__icon">
<svg viewbox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M19.5 5.6A17 17 0 0 0 15.3 4l-.2.4a13.4 13.4 0 0 0-6.2 0L8.7 4a17 17 0 0 0-4.2 1.6A18.6 18.6 0 0 0 1.4 17a17 17 0 0 0 5 2.6l.5-.7a11 11 0 0 1-2-1c.2-.1.4-.2.5-.3a12 12 0 0 0 10.9 0l.5.3a11 11 0 0 1-2 1l.5.7A17 17 0 0 0 22.6 17a18.6 18.6 0 0 0-3.1-11.4M8.5 14.7c-1 0-1.9-.9-1.9-2.1s.8-2.1 1.9-2.1 1.9 1 1.9 2.1-.9 2.1-1.9 2.1m6.9 0c-1 0-1.9-.9-1.9-2.1s.8-2.1 1.9-2.1 1.9 1 1.9 2.1-.9 2.1-1.9 2.1"></path>
</svg>
</span>
<span class="social-btn__handle">artsabers</span>
</a>
</div>
</fieldset>
</aside>
</div>
</main>
<!-- Post-checkout reinforcement band (MAS60 verbatim) -->
<a id="tf-trust-chip-strip" data-tf-family="trust-chip-strip" style="display:contents"></a>
<section class="reinforcement">
<div class="reinforcement__inner">
<span class="reinforcement__item">Every hilt tracked from workshop dispatch</span>
<span class="reinforcement__item">Global 7–10 day delivery</span>
<span class="reinforcement__item">2,400+ five-star reviews</span>
</div>
</section>
<!-- Site footer (MAS60 verbatim) -->
<footer class="site-footer">
<div class="site-footer__inner">
<div>
<div class="site-footer__brand">ART<span>SABERS</span></div>
<p class="site-footer__tag">The replica saber catalogue, built for fans. Every character, every Saber Core, every duelling grade — with real customer service after payment.</p>
<div class="site-footer__meta">
<span>US · CA · AU · NZ</span>
<span>USD · EUR · GBP</span>
</div>
</div>
<div class="footer-col">
<div class="footer-col__title">Shop</div>
<ul>
<li><a href="#">All Lightsabers</a></li>
<li><a href="#">By Character</a></li>
<li><a href="#">By Saber Core</a></li>
<li><a href="#">Cosplay Helmets</a></li>
<li><a href="#">Parts + Accessories</a></li>
</ul>
</div>
<div class="footer-col">
<div class="footer-col__title">Support</div>
<ul>
<li><a href="#">Contact</a></li>
<li><a href="#">Shipping + Delivery</a></li>
<li><a href="#">Returns</a></li>
<li><a href="#">Warranty</a></li>
<li><a href="#">Track Order</a></li>
</ul>
</div>
<div class="footer-col">
<div class="footer-col__title">Brand</div>
<ul>
<li><a href="#">Our Story</a></li>
<li><a href="#">The Workshop</a></li>
<li><a href="#">Journal</a></li>
<li><a href="#">Ambassadors</a></li>
<li><a href="#">Terms + Privacy</a></li>
</ul>
</div>
</div>
<div class="site-footer__base">
<span>© 2026 ARTSABERS · Operated by Nerdworks Ltd</span>
<span>Unlicensed replica sabers · Fan-made, not affiliated with Lucasfilm</span>
</div>
</footer>
</body>
</html>