/wire-template.
<!DOCTYPE html>
<?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?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 — Every saber. Every Core. Every duelling grade.</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 — Homepage
========================================================= */
:root {
/* Orange ombre — the ONE brand voice */
--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 (backgrounds) */
--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 / whites */
--chrome-highlight: #FAFAFA;
--chrome-glint: #E8E4DD;
--chrome-warm: #F5F0E8;
--chrome-dim: #B8B0A6;
/* Semantic surface roles */
--bg-hero: var(--carbon);
--bg-footer: var(--carbon);
--bg-section: var(--charcoal);
--bg-section-warm: var(--charcoal-warm);
--bg-section-void: var(--void);
--bg-card: var(--hull-panel);
--bg-card-lift: var(--hull-panel-lift);
--bg-card-recess: var(--hull-panel-dark);
/* Semantic text roles */
--text-primary: var(--chrome-warm);
--text-heading: var(--chrome-highlight);
--text-dim: var(--chrome-dim);
--text-on-ember: var(--on-primary-fixed);
/* Typography */
--font-display: 'Orbitron', system-ui, sans-serif;
--font-body: 'Onest', system-ui, sans-serif;
/* Type scale */
--fs-display: clamp(64px, 9vw, 128px);
--fs-h1: clamp(48px, 6vw, 84px);
--fs-h2: clamp(40px, 4.5vw, 60px);
--fs-h3: clamp(28px, 2.6vw, 40px);
--fs-h4: clamp(20px, 1.7vw, 24px);
--fs-body: 16px;
--fs-label-sm: 12px;
/* Spacing */
--sp-section-y: clamp(96px, 10vw, 160px);
/* Elevation */
--panel-lift: inset 0 1px 0 rgba(250,250,250,0.08), 0 8px 24px -8px rgba(0,0,0,0.9);
--panel-lift-hover: inset 0 1px 0 rgba(250,250,250,0.16), 0 20px 44px -10px rgba(0,0,0,0.95);
--chrome-top: inset 0 1px 0 rgba(250,250,250,0.36);
--chrome-top-soft: inset 0 1px 0 rgba(250,250,250,0.18);
--panel-recess-bottom: inset 0 -1px 0 rgba(0,0,0,0.85);
--ember-hot-rim: inset 0 0 0 1px rgba(255,122,46,0.55), 0 0 28px rgba(255,122,46,0.45);
--ember-glow-sm: 0 0 16px rgba(255,122,46,0.35);
--ember-glow-md: 0 0 28px rgba(255,122,46,0.55);
}
/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border-radius: 0; }
html { background: var(--carbon); }
body {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.55;
color: var(--text-primary);
background: var(--carbon);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
ul, ol { list-style: none; }
.container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 48px; }
/* =========================================================
PANEL SEAM — light spilling between hull panels
========================================================= */
.panel-seam {
position: relative;
height: 2px;
width: 100%;
background: linear-gradient(90deg, rgba(255,122,46,0.25) 0%, rgba(255,122,46,0.85) 50%, rgba(255,122,46,0.25) 100%);
box-shadow:
0 -14px 40px 0 rgba(255,122,46,0.30),
0 14px 40px 0 rgba(255,122,46,0.50);
z-index: 4;
overflow: visible;
}
/* ==========================================================
HULL CONSTRUCTION — subtle design pass (MAS33 effects).
Substrate grid, chrome top-edges, corner rivets, panel gradient sheen,
card raised-plate treatment, hero ember-backlight, reactor blooms
on brand-story + mission. Enhanced panel-seam with subtle dark channels.
Nothing louder than a hint.
========================================================== */
/* Substrate — 72px construction grid behind everything, very faint. */
body::before {
content: '';
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
linear-gradient(to right, rgba(96,96,96,0.055) 1px, transparent 1px),
linear-gradient(to bottom, rgba(96,96,96,0.055) 1px, transparent 1px);
background-size: 72px 72px;
}
body > * { position: relative; z-index: 1; }
/* Every top-level section reads as an assembled panel — chrome-top hairline
+ darker recessed bottom + subtle inset top-lit/bottom-shadow sheen. */
body > section {
position: relative;
isolation: isolate;
box-shadow:
inset 0 1px 0 rgba(250,250,250,0.14),
inset 0 -1px 0 rgba(0,0,0,0.85);
}
body > section::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background: linear-gradient(180deg,
rgba(250,250,250,0.028) 0%,
transparent 8%,
transparent 88%,
rgba(0,0,0,0.32) 100%);
}
body > section > * { position: relative; z-index: 1; }
/* Footer gets the same top-edge treatment. */
body > footer.site-footer {
position: relative;
isolation: isolate;
box-shadow: inset 0 1px 0 rgba(250,250,250,0.14);
}
/* Panel-seam kept as a clean ember hairline + soft glow — the shadow
channels above/below were removed 2026-07-07 because they read as a
second seam next to the ember line rather than a physical join. */
/* Cards read as raised plates — beefier chrome top edge + deeper cast shadow. */
.core-card,
.product-card,
.faction-tile,
.mission-panel,
.testimonial,
.brand-story__panel {
box-shadow:
inset 0 1px 0 rgba(250,250,250,0.16),
inset 0 -1px 0 rgba(0,0,0,0.55),
0 10px 28px -10px rgba(0,0,0,0.95),
0 2px 6px -2px rgba(0,0,0,0.7);
position: relative;
}
/* Reactor bloom on brand-story (bottom-left) — ember light bleeding from
behind the panel corner. Subtle, only where the ember is meant to peek. */
body > section.brand-story::before {
background:
linear-gradient(180deg,
rgba(250,250,250,0.028) 0%,
transparent 8%,
transparent 88%,
rgba(0,0,0,0.32) 100%),
radial-gradient(ellipse 40% 30% at 8% 92%,
rgba(255,122,46,0.12) 0%,
transparent 70%);
}
body > section.section.mission::before {
background:
linear-gradient(180deg,
rgba(250,250,250,0.028) 0%,
transparent 8%,
transparent 88%,
rgba(0,0,0,0.32) 100%),
radial-gradient(ellipse 30% 25% at 92% 88%,
rgba(255,122,46,0.14) 0%,
transparent 70%);
}
body > section.hero { position: relative; }
/* =========================================================
Buttons
========================================================= */
.cta-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 20px 40px;
font-family: var(--font-display);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-on-ember);
background: linear-gradient(180deg, var(--ember-glow) 0%, var(--ember) 50%, var(--ember-deep) 100%);
box-shadow: var(--ember-glow-sm);
transition: box-shadow 200ms ease, transform 200ms ease;
}
.cta-primary:hover { box-shadow: var(--ember-glow-md); transform: translateY(-1px); }
.cta-primary__arrow { display: inline-block; margin-left: 4px; }
.cta-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 18px 34px;
font-family: var(--font-display);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--chrome-warm);
background: transparent;
border: 1px solid rgba(62,62,62,0.65);
transition: background 200ms ease, color 200ms ease, box-shadow 200ms ease;
}
.cta-ghost:hover {
background: var(--hull-panel-lift);
color: var(--chrome-highlight);
box-shadow: var(--chrome-top-soft);
}
/* =========================================================
Eyebrow / Section heading
========================================================= */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--font-display);
font-size: var(--fs-label-sm);
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ember);
}
.eyebrow__idx {
color: var(--chrome-dim);
font-variant-numeric: tabular-nums;
}
.eyebrow__hair {
display: inline-block;
width: 46px;
height: 1px;
background: var(--ember);
opacity: 0.7;
}
.section-title {
font-family: var(--font-display);
font-size: var(--fs-h2);
font-weight: 700;
line-height: 1.05;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--text-heading);
}
.section-title--sub {
font-family: var(--font-body);
font-size: 17px;
font-weight: 400;
line-height: 1.6;
letter-spacing: 0.8px;
text-transform: none;
color: var(--chrome-dim);
max-width: 620px;
}
.section-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 60px;
margin-bottom: 72px;
}
.section-head__left { max-width: 640px; }
.section-head__left .eyebrow { margin-bottom: 24px; }
.section-head__left .section-title { margin-bottom: 20px; letter-spacing: 0.8px; }
.section-head__right {
align-self: flex-end;
text-align: right;
padding-bottom: 6px;
font-family: var(--font-display);
font-size: var(--fs-label-sm);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--chrome-dim);
}
/* Generic section base — every section is a hull panel slab */
.section {
position: relative;
padding: var(--sp-section-y) 0;
box-shadow: var(--chrome-top);
}
/* =========================================================
PROMO BAR
========================================================= */
.promo-bar {
position: relative;
background: var(--charcoal);
padding: 10px 0;
box-shadow:
var(--chrome-top-soft),
inset 0 -1px 0 rgba(255,122,46,0.4),
0 8px 22px -10px rgba(255,122,46,0.55);
z-index: 41;
}
.promo-bar__inner {
display: flex;
justify-content: center;
gap: 42px;
font-family: var(--font-display);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--chrome-dim);
}
.promo-bar__item { display: inline-flex; align-items: center; gap: 42px; }
.promo-bar__dot { color: var(--ember); font-size: 9px; }
/* =========================================================
NAV
========================================================= */
.site-nav {
position: sticky;
top: 0;
background: rgba(20,20,20,0.94);
backdrop-filter: blur(12px);
box-shadow: var(--chrome-top);
z-index: 40;
}
.site-nav__inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 24px 0;
gap: 40px;
}
.site-nav__brand {
font-family: var(--font-display);
font-size: 20px;
font-weight: 700;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--chrome-highlight);
}
.site-nav__brand em {
font-style: normal;
color: var(--ember);
text-shadow: 0 0 12px rgba(255,122,46,0.45);
}
.site-nav__menu {
display: flex;
gap: 44px;
font-family: var(--font-display);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--chrome-warm);
}
.site-nav__menu li { position: relative; padding: 6px 0; }
.site-nav__menu li:hover { color: var(--ember-glow); }
.site-nav__utils {
display: flex;
gap: 26px;
justify-content: flex-end;
align-items: center;
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--chrome-warm);
}
.site-nav__util { display: inline-flex; align-items: center; gap: 8px; }
.site-nav__cart {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
background: var(--hull-panel-dark);
box-shadow: var(--chrome-top-soft);
color: var(--chrome-highlight);
}
.site-nav__cart-count {
color: var(--ember);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
/* =========================================================
HERO
========================================================= */
.hero {
position: relative;
background: var(--carbon);
min-height: 100vh;
overflow: hidden;
box-shadow: var(--chrome-top-soft);
}
.hero__stage {
position: absolute;
inset: 0;
background-image: url('https://artsabers.com/wp-content/uploads/sites/10/2026/07/6f0320e4a3df77a3b51e2d37a15e6eae-6.jpg');
background-size: cover;
background-position: center right;
background-repeat: no-repeat;
filter: contrast(1.05) saturate(1.05);
}
.hero__vignette {
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(6,6,6,0.96) 0%, rgba(6,6,6,0.85) 30%, rgba(6,6,6,0.45) 55%, rgba(6,6,6,0.15) 85%, rgba(6,6,6,0.0) 100%),
linear-gradient(180deg, rgba(6,6,6,0.30) 0%, rgba(6,6,6,0.00) 25%, rgba(6,6,6,0.00) 65%, rgba(6,6,6,0.55) 100%);
}
.hero__inner {
position: relative;
z-index: 3;
min-height: 100vh;
display: grid;
align-items: center;
padding: 120px 0 200px;
}
.hero__copy { max-width: 720px; }
.hero__meta {
display: inline-flex;
align-items: center;
gap: 14px;
font-family: var(--font-display);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.30em;
text-transform: uppercase;
color: var(--chrome-dim);
margin-bottom: 40px;
}
.hero__meta-dot { color: var(--ember); font-size: 8px; }
.hero__title {
font-family: var(--font-display);
font-size: clamp(52px, 7.4vw, 108px);
font-weight: 700;
line-height: 0.92;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--chrome-highlight);
margin-bottom: 40px;
text-shadow: 0 4px 40px rgba(0,0,0,0.85);
}
.hero__title-ember { color: var(--ember); text-shadow: 0 0 30px rgba(255,122,46,0.5); }
.hero__sub {
font-family: var(--font-display);
font-size: clamp(18px, 1.8vw, 26px);
font-weight: 400;
letter-spacing: 0.02em;
color: var(--chrome-warm);
max-width: 580px;
margin-bottom: 56px;
line-height: 1.4;
}
.hero__actions { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.hero__tagline {
position: absolute;
right: 48px;
bottom: 220px;
writing-mode: vertical-rl;
transform: rotate(180deg);
font-family: var(--font-display);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.36em;
text-transform: uppercase;
color: var(--chrome-dim);
z-index: 4;
}
.hero__tagline-ember { color: var(--ember); }
.hero__telemetry {
position: absolute;
bottom: 130px;
left: 0;
right: 0;
z-index: 4;
}
.hero__telemetry-row {
display: flex;
gap: 56px;
font-family: var(--font-display);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--chrome-dim);
}
.hero__telemetry-item { display: inline-flex; align-items: baseline; gap: 12px; }
.hero__telemetry-val { color: var(--ember); font-variant-numeric: tabular-nums; }
.hero__backlight {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 90px;
z-index: 3;
background: linear-gradient(180deg, rgba(6,6,6,0) 0%, rgba(255,122,46,0.35) 100%);
filter: blur(4px);
}
/* =========================================================
TRUST BAR
========================================================= */
.trust-bar {
position: relative;
background: var(--charcoal);
padding: 30px 0;
box-shadow: var(--chrome-top);
}
.trust-bar__row {
display: grid;
grid-template-columns: repeat(4, 1fr);
align-items: center;
gap: 0;
}
.trust-bar__cell {
padding: 4px 32px;
border-right: 1px solid rgba(62,62,62,0.35);
display: flex;
flex-direction: column;
gap: 6px;
font-family: var(--font-display);
}
.trust-bar__cell:last-child { border-right: 0; }
.trust-bar__label {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--chrome-dim);
}
.trust-bar__value {
font-size: 16px;
font-weight: 600;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--chrome-warm);
}
.trust-bar__value--ember { color: var(--ember); }
/* =========================================================
SABER CORE — 4 raised plates
========================================================= */
.saber-core { background: var(--carbon); }
.saber-core__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.core-card {
position: relative;
background: var(--hull-panel);
padding: 0;
box-shadow: var(--panel-lift);
transition: box-shadow 250ms ease, transform 250ms ease;
display: flex;
flex-direction: column;
}
.core-card:hover {
box-shadow: var(--panel-lift-hover);
transform: translateY(-2px);
}
.core-card__stage {
position: relative;
height: 320px;
overflow: hidden;
background: var(--hull-panel-dark);
box-shadow: inset 0 -1px 0 rgba(0,0,0,0.8);
}
.core-card__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
filter: brightness(0.92) contrast(1.05);
}
.core-card__stage::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 50% 60%, rgba(255,122,46,0.12) 0%, rgba(255,122,46,0) 60%);
pointer-events: none;
}
.core-card__tier-mark {
position: absolute;
top: 20px;
left: 20px;
font-family: var(--font-display);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--chrome-dim);
z-index: 2;
}
.core-card__tier-idx { color: var(--ember); }
.core-card__body {
padding: 28px 26px 30px;
display: flex;
flex-direction: column;
gap: 22px;
flex: 1;
}
.core-card__title {
font-family: var(--font-display);
font-size: 26px;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--chrome-highlight);
line-height: 1;
}
.core-card__pricing {
display: flex;
align-items: baseline;
gap: 10px;
}
.core-card__price-lbl {
font-family: var(--font-display);
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--chrome-dim);
}
.core-card__price {
font-family: var(--font-display);
font-size: 22px;
font-weight: 600;
color: var(--ember);
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
}
.core-card__specs {
background: var(--hull-panel-lift);
padding: 16px 18px;
box-shadow: var(--chrome-top-soft);
display: flex;
flex-direction: column;
gap: 10px;
}
.core-card__spec {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 8px;
align-items: baseline;
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.core-card__spec-lbl { color: var(--chrome-dim); }
.core-card__spec-leader { color: var(--chrome-dim); opacity: 0.4; overflow: hidden; white-space: nowrap; }
.core-card__spec-val { color: var(--chrome-warm); font-weight: 500; font-variant-numeric: tabular-nums; }
.core-card__cta { margin-top: 6px; align-self: flex-start; }
/* =========================================================
FAN FAVOURITES — 3 large plates, top-featured hot-rim
========================================================= */
.favourites { background: var(--void); }
.favourites__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.product-card:hover {
box-shadow: var(--panel-lift-hover);
transform: translateY(-3px);
}
.product-card--featured:hover {
box-shadow: var(--ember-hot-rim), var(--panel-lift-hover);
}
.product-card:hover .product-card__img { transform: scale(1.03); }
.product-card__stage::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 100%;
background: linear-gradient(180deg, rgba(0,0,0,0) 62%, rgba(6,6,6,0.75) 100%);
z-index: 1;
pointer-events: none;
}
.product-card__stage::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 4px;
background: linear-gradient(90deg, rgba(255,122,46,0) 0%, rgba(255,122,46,0.6) 50%, rgba(255,122,46,0) 100%);
z-index: 2;
filter: blur(3px);
}
/* =========================================================
FACTION GRID — 3×2 movie-poster tiles
========================================================= */
.factions { background: var(--carbon); }
.faction-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.faction-tile {
position: relative;
height: 420px;
background: var(--hull-panel-dark);
box-shadow: var(--panel-lift);
overflow: hidden;
cursor: pointer;
transition: box-shadow 250ms ease, transform 250ms ease;
}
.faction-tile:hover {
box-shadow: var(--ember-hot-rim), var(--panel-lift-hover);
transform: translateY(-3px);
}
.faction-tile__brief {
position: absolute;
inset: 24px;
border: 1px dashed rgba(184,176,166,0.22);
padding: 20px;
font-family: var(--font-body);
font-style: italic;
font-size: 13px;
line-height: 1.5;
color: var(--chrome-dim);
display: flex;
align-items: center;
z-index: 1;
}
.faction-tile__brief-label {
position: absolute;
top: -9px;
left: 12px;
padding: 0 8px;
background: var(--hull-panel-dark);
font-family: var(--font-display);
font-size: 9px;
font-style: normal;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--chrome-dim);
}
.faction-tile__gloss {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(6,6,6,0.15) 0%, rgba(6,6,6,0.15) 55%, rgba(6,6,6,0.90) 100%);
z-index: 2;
pointer-events: none;
transition: opacity 250ms ease;
}
.faction-tile:hover .faction-tile__gloss { opacity: 0.75; }
.faction-tile__ember-edge {
position: absolute;
right: 0; top: 0; bottom: 0;
width: 2px;
background: linear-gradient(180deg, rgba(255,122,46,0) 0%, rgba(255,122,46,0.75) 50%, rgba(255,122,46,0) 100%);
box-shadow: 0 0 16px rgba(255,122,46,0.55);
opacity: 0;
transition: opacity 250ms ease;
z-index: 3;
}
.faction-tile:hover .faction-tile__ember-edge { opacity: 1; }
.faction-tile__label {
position: absolute;
left: 24px;
bottom: 24px;
right: 24px;
z-index: 4;
display: flex;
flex-direction: column;
gap: 10px;
}
.faction-tile__meta {
font-family: var(--font-display);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--chrome-dim);
}
.faction-tile__meta-em { color: var(--ember); font-variant-numeric: tabular-nums; }
.faction-tile__title {
font-family: var(--font-display);
font-size: 34px;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--chrome-highlight);
line-height: 1;
}
.faction-tile__arrow {
font-family: var(--font-display);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--chrome-warm);
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 6px;
}
.faction-tile__arrow-glyph { color: var(--ember); }
/* =========================================================
NEW ARRIVALS
========================================================= */
.arrivals { background: var(--carbon); }
.arrivals__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
/* =========================================================
MISSION CONTROL — dual split
========================================================= */
.mission { background: var(--void); }
.mission__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.mission-panel {
position: relative;
background: var(--hull-panel);
box-shadow: var(--panel-lift);
display: flex;
flex-direction: column;
min-height: 620px;
overflow: hidden;
}
.mission-panel__stage {
position: relative;
height: 340px;
background: var(--hull-panel-dark);
overflow: hidden;
box-shadow: inset 0 -1px 0 rgba(0,0,0,0.8);
}
.mission-panel__brief {
position: absolute;
inset: 28px;
border: 1px dashed rgba(184,176,166,0.22);
padding: 22px;
font-family: var(--font-body);
font-style: italic;
font-size: 13px;
line-height: 1.5;
color: var(--chrome-dim);
z-index: 1;
}
.mission-panel__brief-label {
position: absolute;
top: -9px;
left: 14px;
padding: 0 8px;
background: var(--hull-panel-dark);
font-family: var(--font-display);
font-size: 9px;
font-style: normal;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--chrome-dim);
}
.mission-panel__stage-ember {
position: absolute;
inset: auto 0 0 0;
height: 3px;
background: linear-gradient(90deg, rgba(255,122,46,0) 0%, rgba(255,122,46,0.65) 50%, rgba(255,122,46,0) 100%);
filter: blur(2px);
z-index: 2;
}
.mission-panel__body {
padding: 46px 42px 40px;
display: flex;
flex-direction: column;
gap: 22px;
flex: 1;
}
.mission-panel__eyebrow {
font-family: var(--font-display);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ember);
display: inline-flex;
align-items: center;
gap: 12px;
}
.mission-panel__eyebrow-idx { color: var(--chrome-dim); }
.mission-panel__title {
font-family: var(--font-display);
font-size: var(--fs-h3);
font-weight: 700;
letter-spacing: 0.8px;
line-height: 1.05;
text-transform: uppercase;
color: var(--chrome-highlight);
}
.mission-panel__body-copy {
font-size: 16px;
line-height: 1.65;
color: var(--chrome-warm);
max-width: 480px;
}
.mission-panel__telemetry {
margin-top: auto;
padding-top: 22px;
border-top: 1px solid rgba(62,62,62,0.35);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
font-family: var(--font-display);
}
.mission-panel__telem-cell {
display: flex;
flex-direction: column;
gap: 4px;
}
.mission-panel__telem-lbl {
font-size: 9px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--chrome-dim);
}
.mission-panel__telem-val {
font-size: 14px;
font-weight: 600;
letter-spacing: 0.10em;
color: var(--chrome-warm);
text-transform: uppercase;
}
.mission-panel__telem-val--ember { color: var(--ember); }
.mission__cta-wrap {
margin-top: 60px;
display: flex;
justify-content: center;
}
/* =========================================================
TESTIMONIALS
========================================================= */
.testimonials { background: var(--carbon); }
.testimonials__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.testimonial {
position: relative;
background: var(--hull-panel);
box-shadow: var(--panel-lift);
padding: 40px 36px 36px;
display: flex;
flex-direction: column;
gap: 22px;
min-height: 380px;
}
.testimonial__stars {
font-family: var(--font-display);
font-size: 18px;
letter-spacing: 0.16em;
color: var(--ember);
text-shadow: 0 0 12px rgba(255,122,46,0.4);
}
.testimonial__quote-mark {
position: absolute;
top: 30px;
right: 34px;
font-family: var(--font-display);
font-size: 72px;
font-weight: 700;
line-height: 1;
color: var(--ember);
opacity: 0.15;
}
.testimonial__body {
font-size: 15.5px;
line-height: 1.6;
color: var(--chrome-warm);
font-weight: 500;
flex: 1;
}
.testimonial__foot {
display: flex;
align-items: center;
gap: 16px;
padding-top: 22px;
border-top: 1px solid rgba(62,62,62,0.35);
}
.testimonial__avatar {
width: 48px;
height: 48px;
background: var(--hull-panel-dark);
box-shadow: var(--chrome-top-soft);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 14px;
font-weight: 700;
color: var(--ember);
letter-spacing: 0.06em;
flex-shrink: 0;
}
.testimonial__meta {
display: flex;
flex-direction: column;
gap: 3px;
}
.testimonial__name {
font-family: var(--font-display);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--chrome-highlight);
}
.testimonial__product {
font-family: var(--font-display);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--chrome-dim);
}
.testimonial__product-em { color: var(--ember); }
/* =========================================================
BRAND STORY — editorial split
========================================================= */
.brand-story { background: var(--void); }
.brand-story__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
align-items: stretch;
min-height: 680px;
}
.brand-story__stage {
position: relative;
overflow: hidden;
background: var(--hull-panel-dark);
box-shadow: var(--panel-lift);
}
.brand-story__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 20%;
min-height: 680px;
filter: brightness(0.90) contrast(1.05);
}
.brand-story__stage-vignette {
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(6,6,6,0.15) 0%, rgba(6,6,6,0) 40%, rgba(6,6,6,0) 60%, rgba(255,122,46,0.28) 100%);
}
.brand-story__stage-ember {
position: absolute;
right: 0; top: 0; bottom: 0;
width: 3px;
background: linear-gradient(180deg, rgba(255,122,46,0.3) 0%, rgba(255,122,46,0.9) 50%, rgba(255,122,46,0.3) 100%);
filter: blur(2px);
z-index: 3;
}
.brand-story__panel {
padding: 90px 80px;
background: var(--hull-panel);
box-shadow: var(--panel-lift);
display: flex;
flex-direction: column;
justify-content: center;
gap: 32px;
}
.brand-story__eyebrow {
font-family: var(--font-display);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ember);
}
.brand-story__title {
font-family: var(--font-display);
font-size: var(--fs-h2);
font-weight: 700;
line-height: 1.02;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--chrome-highlight);
}
.brand-story__lede {
font-size: 18px;
line-height: 1.6;
color: var(--chrome-warm);
max-width: 520px;
}
.brand-story__lede em { color: var(--ember); font-style: normal; font-weight: 600; }
.brand-story__facts {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
padding: 26px 0 8px;
border-top: 1px solid rgba(62,62,62,0.4);
border-bottom: 1px solid rgba(62,62,62,0.4);
font-family: var(--font-display);
}
.brand-story__fact-lbl {
font-size: 9px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--chrome-dim);
display: block;
margin-bottom: 8px;
}
.brand-story__fact-val {
font-size: 24px;
font-weight: 700;
color: var(--chrome-highlight);
letter-spacing: 0.02em;
line-height: 1;
}
.brand-story__fact-val-em { color: var(--ember); }
.brand-story__actions {
display: flex;
gap: 20px;
align-items: center;
margin-top: 12px;
flex-wrap: wrap;
}
.brand-story__ember-link {
font-family: var(--font-display);
font-size: 12px;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--ember);
}
/* =========================================================
CAPTURE BAND — full orange ombre (biggest ember moment)
========================================================= */
.capture {
position: relative;
background: linear-gradient(180deg, var(--ember-glow) 0%, var(--ember-bright) 25%, var(--ember) 55%, var(--ember-forge) 100%);
padding: 140px 0;
box-shadow:
inset 0 2px 0 rgba(255,235,180,0.55),
inset 0 -1px 0 rgba(90,26,0,0.55),
0 -12px 40px -8px rgba(255,122,46,0.55);
overflow: hidden;
}
.capture::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 20% 30%, rgba(255,235,180,0.35) 0%, rgba(255,235,180,0) 55%),
radial-gradient(ellipse at 80% 70%, rgba(209,72,16,0.35) 0%, rgba(209,72,16,0) 60%);
pointer-events: none;
}
.capture__inner {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
z-index: 2;
}
.capture__copy { max-width: 620px; }
.capture__eyebrow {
font-family: var(--font-display);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--on-primary-fixed);
opacity: 0.72;
margin-bottom: 20px;
}
.capture__title {
font-family: var(--font-display);
font-size: clamp(48px, 5.5vw, 78px);
font-weight: 700;
line-height: 0.95;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--on-primary-fixed);
margin-bottom: 24px;
}
.capture__sub {
font-family: var(--font-display);
font-size: 20px;
font-weight: 500;
line-height: 1.4;
color: var(--on-primary-fixed);
opacity: 0.86;
max-width: 520px;
}
.capture__form {
display: flex;
flex-direction: column;
gap: 20px;
padding: 44px;
background: rgba(20,20,20,0.94);
box-shadow:
inset 0 1px 0 rgba(250,250,250,0.2),
0 30px 60px -20px rgba(0,0,0,0.7);
}
.capture__form-lbl {
font-family: var(--font-display);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ember-glow);
}
.capture__form-input {
background: transparent;
border: 0;
border-bottom: 1px solid rgba(184,176,166,0.35);
padding: 14px 0;
font-family: var(--font-body);
font-size: 17px;
color: var(--chrome-warm);
outline: none;
transition: border-color 200ms ease, box-shadow 200ms ease;
width: 100%;
}
.capture__form-input::placeholder { color: var(--chrome-dim); opacity: 0.7; }
.capture__form-input:focus {
border-bottom-color: var(--ember);
box-shadow: 0 2px 12px -2px rgba(255,122,46,0.4);
}
.capture__form-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 20px 30px;
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-size: 12px;
font-weight: 700;
letter-spacing: 0.20em;
text-transform: uppercase;
box-shadow: var(--ember-glow-sm);
transition: box-shadow 200ms ease;
margin-top: 8px;
}
.capture__form-cta:hover { box-shadow: var(--ember-glow-md); }
.capture__form-fine {
font-family: var(--font-body);
font-size: 12px;
color: var(--chrome-dim);
line-height: 1.5;
}
/* =========================================================
FOOTER
========================================================= */
.site-footer {
position: relative;
background: var(--carbon);
padding: 120px 0 48px;
box-shadow: var(--chrome-top-soft);
}
.site-footer__grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
gap: 60px;
margin-bottom: 90px;
}
.site-footer__mast { display: flex; flex-direction: column; gap: 24px; }
.site-footer__brand {
font-family: var(--font-display);
font-size: 24px;
font-weight: 700;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--chrome-highlight);
}
.site-footer__brand em { font-style: normal; color: var(--ember); }
.site-footer__mission {
font-size: 14px;
line-height: 1.6;
color: var(--chrome-dim);
max-width: 320px;
}
.site-footer__col-title {
font-family: var(--font-display);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--ember);
margin-bottom: 22px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(62,62,62,0.4);
}
.site-footer__links { display: flex; flex-direction: column; gap: 12px; }
.site-footer__links li {
font-family: var(--font-body);
font-size: 14px;
color: var(--chrome-dim);
transition: color 180ms ease;
}
.site-footer__links li:hover { color: var(--chrome-warm); }
.site-footer__pay {
display: flex;
gap: 12px;
margin-top: 20px;
flex-wrap: wrap;
}
.site-footer__pay-badge {
padding: 6px 12px;
background: var(--hull-panel-dark);
box-shadow: var(--chrome-top-soft);
font-family: var(--font-display);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--chrome-warm);
}
.site-footer__base {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 32px;
border-top: 1px solid rgba(62,62,62,0.4);
gap: 32px;
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--chrome-dim);
}
.site-footer__nerdworks { color: var(--chrome-warm); }
.site-footer__nerdworks-em { color: var(--ember); }
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 1100px) {
.site-nav__inner { grid-template-columns: 1fr auto; }
.site-nav__menu { display: none; }
.saber-core__grid { grid-template-columns: repeat(2, 1fr); }
.favourites__grid, .arrivals__grid, .testimonials__grid { grid-template-columns: 1fr; }
.faction-grid { grid-template-columns: repeat(2, 1fr); }
.mission__grid, .brand-story__grid, .capture__inner { grid-template-columns: 1fr; }
.site-footer__grid { grid-template-columns: repeat(2, 1fr); }
.brand-story__img { min-height: 480px; }
.brand-story__panel { padding: 60px 40px; }
}
@media (max-width: 640px) {
.container { padding: 0 24px; }
.promo-bar__inner { gap: 16px; font-size: 10px; }
.promo-bar__item { gap: 16px; }
.hero__telemetry-row { flex-wrap: wrap; gap: 20px; }
.hero__tagline { display: none; }
.trust-bar__row { grid-template-columns: 1fr 1fr; row-gap: 24px; }
.trust-bar__cell { border-right: 0; padding: 4px 12px; }
.saber-core__grid { grid-template-columns: 1fr; }
.faction-grid { grid-template-columns: 1fr; }
.faction-tile { height: 340px; }
.section-head { flex-direction: column; align-items: flex-start; gap: 24px; }
.section-head__right { text-align: left; }
.capture { padding: 90px 0; }
.site-footer__grid { grid-template-columns: 1fr; gap: 40px; }
.site-footer__base { flex-direction: column; align-items: flex-start; gap: 20px; }
}
/* ==========================================================
DELICATE HULL IMAGERY — variation across select sections.
Two matte-worn variants applied under a light overlay mask
so the hair-thin ember seams remain visible.
Variant D (horizontal 2-plate, delicate) — Mission Control
Variant E (vertical 2-plate, delicate) — Shop by Faction
Variant D reused — Testimonials
Overlay is lighter than MAS37 (55-70% vs 78-86%) — the images
are already subtle, so heavy masking would erase them.
========================================================== */
/* Alternate: patterned / plain / patterned / plain / patterned / plain / patterned.
Patterned sections: Saber Core (D), Factions (E), Mission (D), Brand Story (E).
Plain sections: Favourites, New Arrivals, Testimonials. */
body > section.section.saber-core,
body > section.section.factions,
body > section.section.mission,
body > section.brand-story {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
body > section.section.saber-core::before,
body > section.section.factions::before,
body > section.section.mission::before,
body > section.brand-story::before {
background: linear-gradient(180deg,
rgba(6,6,6,0.58) 0%,
rgba(6,6,6,0.66) 50%,
rgba(6,6,6,0.74) 100%) !important;
box-shadow: none;
}
body > section.section.saber-core::after,
body > section.section.factions::after,
body > section.section.mission::after,
body > section.brand-story::after { display: none; }
body > section.section.saber-core { background-image: url('https://camcom.dev/generated_imgs/generated-2026-07-07T15-47-31-768Z-joeqpj.jpg'); }
/* F smooth horizontal */
body > section.section.factions { background-image: url('https://camcom.dev/generated_imgs/generated-2026-07-07T15-48-07-970Z-oehwsm.jpg'); }
/* G smooth vertical */
body > section.section.mission { background-image: url('https://camcom.dev/generated_imgs/generated-2026-07-07T15-47-31-768Z-joeqpj.jpg'); }
/* F smooth horizontal */
body > section.brand-story { background-image: url('https://camcom.dev/generated_imgs/generated-2026-07-07T15-48-07-970Z-oehwsm.jpg'); }
/* G smooth vertical */
/* Solid card fills so cards on top of hull imagery still read. */
body > section.section.saber-core .core-card,
body > section.section.mission .mission-panel {
background: rgba(20,20,20,0.94);
backdrop-filter: blur(3px);
}
body > section.section.factions .faction-tile {
background: rgba(15,15,15,0.90);
backdrop-filter: blur(3px);
}
body > section.brand-story .brand-story__panel {
background: rgba(20,20,20,0.94);
backdrop-filter: blur(3px);
}
/* 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 13997 canonical 12840:tf-product-card-2 -- */
/* Panel-seam kept as a clean ember hairline + soft glow — the shadow
channels above/below were removed 2026-07-07 because they read as a
second seam next to the ember line rather than a physical join. */
/* Cards read as raised plates — beefier chrome top edge + deeper cast shadow. */
.core-card,
.product-card,
.faction-tile,
.mission-panel,
.testimonial,
.brand-story__panel {
box-shadow:
inset 0 1px 0 rgba(250,250,250,0.16),
inset 0 -1px 0 rgba(0,0,0,0.55),
0 10px 28px -10px rgba(0,0,0,0.95),
0 2px 6px -2px rgba(0,0,0,0.7);
position: relative;
}
.product-card:hover {
box-shadow: var(--panel-lift-hover);
transform: translateY(-3px);
}
.product-card--featured:hover {
box-shadow: var(--ember-hot-rim), var(--panel-lift-hover);
}
.product-card:hover .product-card__img { transform: scale(1.03); }
.product-card__stage::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 100%;
background: linear-gradient(180deg, rgba(0,0,0,0) 62%, rgba(6,6,6,0.75) 100%);
z-index: 1;
pointer-events: none;
}
.product-card__stage::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 4px;
background: linear-gradient(90deg, rgba(255,122,46,0) 0%, rgba(255,122,46,0.6) 50%, rgba(255,122,46,0) 100%);
z-index: 2;
filter: blur(3px);
}
/* -- Reconciled from family 13997 canonical 12840:tf-product-card-2 -- */
/* Panel-seam kept as a clean ember hairline + soft glow — the shadow
channels above/below were removed 2026-07-07 because they read as a
second seam next to the ember line rather than a physical join. */
/* Cards read as raised plates — beefier chrome top edge + deeper cast shadow. */
.core-card,
.product-card,
.faction-tile,
.mission-panel,
.testimonial,
.brand-story__panel {
box-shadow:
inset 0 1px 0 rgba(250,250,250,0.16),
inset 0 -1px 0 rgba(0,0,0,0.55),
0 10px 28px -10px rgba(0,0,0,0.95),
0 2px 6px -2px rgba(0,0,0,0.7);
position: relative;
}
.product-card:hover {
box-shadow: var(--panel-lift-hover);
transform: translateY(-3px);
}
.product-card--featured:hover {
box-shadow: var(--ember-hot-rim), var(--panel-lift-hover);
}
.product-card:hover .product-card__img { transform: scale(1.03); }
.product-card__stage::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 100%;
background: linear-gradient(180deg, rgba(0,0,0,0) 62%, rgba(6,6,6,0.75) 100%);
z-index: 1;
pointer-events: none;
}
.product-card__stage::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 4px;
background: linear-gradient(90deg, rgba(255,122,46,0) 0%, rgba(255,122,46,0.6) 50%, rgba(255,122,46,0) 100%);
z-index: 2;
filter: blur(3px);
}
/* -- Reconciled from family 13997 canonical 12840:tf-product-card-2 -- */
/* Panel-seam kept as a clean ember hairline + soft glow — the shadow
channels above/below were removed 2026-07-07 because they read as a
second seam next to the ember line rather than a physical join. */
/* Cards read as raised plates — beefier chrome top edge + deeper cast shadow. */
.core-card,
.product-card,
.faction-tile,
.mission-panel,
.testimonial,
.brand-story__panel {
box-shadow:
inset 0 1px 0 rgba(250,250,250,0.16),
inset 0 -1px 0 rgba(0,0,0,0.55),
0 10px 28px -10px rgba(0,0,0,0.95),
0 2px 6px -2px rgba(0,0,0,0.7);
position: relative;
}
.product-card:hover {
box-shadow: var(--panel-lift-hover);
transform: translateY(-3px);
}
.product-card--featured:hover {
box-shadow: var(--ember-hot-rim), var(--panel-lift-hover);
}
.product-card:hover .product-card__img { transform: scale(1.03); }
.product-card__stage::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 100%;
background: linear-gradient(180deg, rgba(0,0,0,0) 62%, rgba(6,6,6,0.75) 100%);
z-index: 1;
pointer-events: none;
}
.product-card__stage::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 4px;
background: linear-gradient(90deg, rgba(255,122,46,0) 0%, rgba(255,122,46,0.6) 50%, rgba(255,122,46,0) 100%);
z-index: 2;
filter: blur(3px);
}
.product-card {
background: var(--bg-patterned-card);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
box-shadow: var(--panel-lift);
display: flex;
flex-direction: column;
transition: all 0.3s ease;
position: relative;
}
.product-card:hover {
box-shadow: var(--panel-lift-hover), 0 0 32px rgba(255,122,46,0.2);
transform: translateY(-4px);
}
.product-card--hot { box-shadow: var(--panel-lift), var(--ember-hot-rim); }
.product-card--hot:hover { box-shadow: var(--panel-lift-hover), var(--ember-hot-rim), 0 0 40px rgba(255,122,46,0.4); }
.product-card__media {
position: relative;
aspect-ratio: 1/1;
background-color: #0a0a0a;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.product-card__badge::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--ember);
box-shadow: 0 0 8px rgba(255,122,46,0.8);
}
.product-card__badge--low::before {
background: var(--ember-glow);
}
.product-card__body {
background: var(--hull-panel-lift);
padding: 24px 28px 28px;
display: flex;
flex-direction: column;
flex: 1;
}
.product-card__meta {
font-family: var(--font-display);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--chrome-dim);
margin-bottom: 10px;
}
.product-card__name {
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--chrome-highlight);
margin-bottom: 14px;
line-height: 1.1;
}
.product-card__specs {
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px dotted rgba(184,176,166,0.2);
}
.product-card__spec {
display: flex;
justify-content: space-between;
align-items: baseline;
font-family: var(--font-body);
font-size: 12px;
padding: 4px 0;
}
.product-card__spec-label {
color: var(--chrome-dim);
text-transform: uppercase;
letter-spacing: 0.1em;
font-family: var(--font-display);
}
.product-card__spec-value {
color: var(--chrome-warm);
font-family: var(--font-display);
font-weight: 500;
font-variant-numeric: tabular-nums;
}
.product-card__foot {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
}
.product-card__price {
font-family: var(--font-display);
font-size: 26px;
font-weight: 600;
color: var(--ember);
font-variant-numeric: tabular-nums;
}
.product-card__cta {
font-family: var(--font-display);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--chrome-warm);
text-decoration: none;
padding-bottom: 4px;
border-bottom: 1px solid var(--ember);
transition: color 0.2s;
}
.product-card__cta:hover { color: var(--ember); }
/* -- Reconciled from family 14007 canonical 12913:tf-stock-status-chip -- */
:root {
/* Ember ombre */
--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 */
--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 */
--chrome-highlight: #FAFAFA;
--chrome-glint: #E8E4DD;
--chrome-warm: #F5F0E8;
--chrome-dim: #B8B0A6;
/* Semantic surfaces */
--bg-page: var(--carbon);
--bg-card: var(--hull-panel);
--bg-card-lift: var(--hull-panel-lift);
--bg-card-dark: var(--hull-panel-dark);
--bg-patterned-card: rgba(20, 20, 20, 0.94);
--bg-patterned-tile: rgba(15, 15, 15, 0.90);
/* Text roles */
--text-primary: var(--chrome-warm);
--text-heading: var(--chrome-highlight);
--text-dim: var(--chrome-dim);
--text-on-ember: var(--on-primary-fixed);
--text-accent: var(--ember);
/* Fonts */
--font-display: 'Orbitron', system-ui, sans-serif;
--font-body: 'Onest', system-ui, sans-serif;
/* Type scale */
--type-hero: 128px;
--type-h1: 84px;
--type-h2: 60px;
--type-h3: 40px;
--type-h4: 28px;
--type-body: 16px;
--type-small: 14px;
--type-label: 12px;
/* Spacing */
--space-hero: 160px;
--space-section: 120px;
--space-band: 32px;
--space-card: 32px;
/* Shadows */
--panel-lift: inset 0 1px 0 rgba(250,250,250,0.08), 0 8px 24px -8px rgba(0,0,0,0.9);
--panel-lift-hover: inset 0 1px 0 rgba(250,250,250,0.15), 0 12px 32px -8px rgba(0,0,0,0.95);
--ember-glow-sm: 0 0 16px rgba(255,122,46,0.35);
--ember-glow-md: 0 0 28px rgba(255,122,46,0.5);
--ember-hot-rim: inset 0 0 0 1px rgba(255,122,46,0.6), 0 0 24px rgba(255,122,46,0.5);
--modal-glow: 0 24px 64px -12px rgba(0,0,0,0.9), 0 0 32px rgba(255,122,46,0.2);
}
.product-card__badge {
position: absolute;
top: 16px;
right: 16px;
font-family: var(--font-display);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
padding: 6px 10px;
background: rgba(6,6,6,0.85);
color: var(--ember);
border: 1px solid rgba(255,122,46,0.4);
display: inline-flex;
align-items: center;
gap: 6px;
}
.product-card__badge::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--ember);
box-shadow: 0 0 8px rgba(255,122,46,0.8);
}
.product-card__badge--low {
color: var(--ember-glow);
border-color: rgba(255,179,71,0.5);
}
.product-card__badge--low::before {
background: var(--ember-glow);
}
</style>
</head>
<body>
<!-- ============ 1. PROMO BAR ============ -->
<div class="promo-bar">
<div class="container">
<div class="promo-bar__inner">
<span class="promo-bar__item">Free shipping worldwide <span class="promo-bar__dot">◆</span></span>
<span class="promo-bar__item">New drops every week <span class="promo-bar__dot">◆</span></span>
<span class="promo-bar__item">Global delivery in 7–10 days</span>
</div>
</div>
</div>
<!-- ============ 2. NAV ============ -->
<nav class="site-nav">
<div class="container">
<div class="site-nav__inner">
<div class="site-nav__brand">ART<em>SABERS</em></div>
<ul class="site-nav__menu">
<li>Lightsabers</li>
<li>Cosplay Helmets</li>
<li>Parts & Accessories</li>
<li>Offers & Deals</li>
<li>Blog</li>
</ul>
<div class="site-nav__utils">
<span class="site-nav__util">Search</span>
<span class="site-nav__util">Account</span>
<span class="site-nav__util">Wishlist</span>
<span class="site-nav__cart">Cart <span class="site-nav__cart-count">02</span></span>
</div>
</div>
</div>
</nav>
<!-- ============ 3. HERO — CINEMATIC KEY ART ============ -->
<a id="tf-hero-atmospheric" data-tf-family="hero-atmospheric" style="display:contents"></a>
<section class="hero">
<div class="hero__stage"></div>
<div class="hero__vignette"></div>
<div class="hero__tagline">
<span class="hero__tagline-ember">◆</span> From factory floor to your door
</div>
<div class="container">
<div class="hero__inner">
<div class="hero__copy">
<div class="hero__meta">
<span class="hero__meta-dot">◆</span>
<span>Cat. 24·07 · 1,100 specimens on file</span>
</div>
<h1 class="hero__title">
Every saber.<br>
Every <span class="hero__title-ember">Core.</span><br>
Every duelling grade.
</h1>
<p class="hero__sub">
Factory direct. Global. In your hands in 7–10 days — with the customer service most factory-direct shops won’t give.
</p>
<div class="hero__actions">
<a href="#" class="cta-primary">Browse the catalogue <span class="cta-primary__arrow">→</span></a>
<a href="#" class="cta-ghost">See Saber Cores</a>
</div>
</div>
</div>
</div>
<div class="hero__telemetry">
<div class="container">
<div class="hero__telemetry-row">
<span class="hero__telemetry-item"><span>Origin</span><span class="hero__telemetry-val">Factory Direct</span></span>
<span class="hero__telemetry-item"><span>Transit</span><span class="hero__telemetry-val">7–10 Days</span></span>
<span class="hero__telemetry-item"><span>Support</span><span class="hero__telemetry-val">Named SPOC</span></span>
<span class="hero__telemetry-item"><span>Guarantee</span><span class="hero__telemetry-val">30 Days</span></span>
</div>
</div>
</div>
<div class="hero__backlight"></div>
</section>
<!-- ============ PANEL SEAM after hero ============ -->
<div class="panel-seam"></div>
<!-- ============ 4. TRUST BAR — HUD ============ -->
<a id="tf-trust-chip-strip" data-tf-family="trust-chip-strip" style="display:contents"></a>
<div class="trust-bar">
<div class="container">
<div class="trust-bar__row">
<div class="trust-bar__cell">
<span class="trust-bar__label">Signal 01 · Origin</span>
<span class="trust-bar__value">Global Delivery <span class="trust-bar__value--ember">· 7–10 Days</span></span>
</div>
<div class="trust-bar__cell">
<span class="trust-bar__label">Signal 02 · Support</span>
<span class="trust-bar__value">Real CS <span class="trust-bar__value--ember">· 24hr Response</span></span>
</div>
<div class="trust-bar__cell">
<span class="trust-bar__label">Signal 03 · Catalogue</span>
<span class="trust-bar__value"><span class="trust-bar__value--ember">1,100</span> Sabers on File</span>
</div>
<div class="trust-bar__cell">
<span class="trust-bar__label">Signal 04 · Warranty</span>
<span class="trust-bar__value">30-Day <span class="trust-bar__value--ember">Money-Back</span></span>
</div>
</div>
</div>
</div>
<!-- ============ 5. CHOOSE YOUR SABER CORE ============ -->
<a id="tf-product-tier-comparison" data-tf-family="product-tier-comparison" style="display:contents"></a>
<section class="section saber-core">
<div class="container">
<div class="section-head">
<div class="section-head__left">
<div class="eyebrow">
<span class="eyebrow__idx">01 ·</span>
<span class="eyebrow__hair"></span>
Choose your Saber Core
</div>
<h2 class="section-title">Four tiers.<br>One ladder of ambition.</h2>
<p class="section-title--sub">Every saber sits on a Saber Core — the electronics that give it colour, sound and behaviour. Pick the tier that matches how you plan to fight, cosplay or collect.</p>
</div>
<div class="section-head__right">
Ladder ascends →<br>
<span style="color:var(--ember);">Baselit → Pixel → Programmable</span>
</div>
</div>
<div class="saber-core__grid">
<div class="core-card">
<div class="core-card__stage">
<span class="core-card__tier-mark"><span class="core-card__tier-idx">T-01</span> · Baselit</span>
<img class="core-card__img" src="https://nerdworks.uk/wp-content/uploads/2025/09/Black-Hammer-Double-Bladed-Lightsaber-5.jpg" alt="Black Hammer double-bladed hilt">
</div>
<div class="core-card__body">
<div class="core-card__title">S-RGB</div>
<div class="core-card__pricing">
<span class="core-card__price-lbl">From</span>
<span class="core-card__price">$89</span>
</div>
<div class="core-card__specs">
<div class="core-card__spec"><span class="core-card__spec-lbl">Blade</span><span class="core-card__spec-leader">................................</span><span class="core-card__spec-val">Baselit RGB</span></div>
<div class="core-card__spec"><span class="core-card__spec-lbl">Colours</span><span class="core-card__spec-leader">................................</span><span class="core-card__spec-val">Infinite</span></div>
<div class="core-card__spec"><span class="core-card__spec-lbl">Bluetooth</span><span class="core-card__spec-leader">................................</span><span class="core-card__spec-val">Standard</span></div>
<div class="core-card__spec"><span class="core-card__spec-lbl">Duelling</span><span class="core-card__spec-leader">................................</span><span class="core-card__spec-val">Light</span></div>
</div>
<a href="#" class="cta-ghost core-card__cta">Read specs →</a>
</div>
</div>
<div class="core-card">
<div class="core-card__stage">
<span class="core-card__tier-mark"><span class="core-card__tier-idx">T-02</span> · Baselit +</span>
<img class="core-card__img" src="https://nerdworks.uk/wp-content/uploads/2025/09/Black-Hela-Lightsaber-4.jpg" alt="Black Hela hilt">
</div>
<div class="core-card__body">
<div class="core-card__title">RGB-X</div>
<div class="core-card__pricing">
<span class="core-card__price-lbl">From</span>
<span class="core-card__price">$149</span>
</div>
<div class="core-card__specs">
<div class="core-card__spec"><span class="core-card__spec-lbl">Blade</span><span class="core-card__spec-leader">................................</span><span class="core-card__spec-val">Baselit RGB</span></div>
<div class="core-card__spec"><span class="core-card__spec-lbl">Sound fonts</span><span class="core-card__spec-leader">................................</span><span class="core-card__spec-val">12</span></div>
<div class="core-card__spec"><span class="core-card__spec-lbl">Bluetooth</span><span class="core-card__spec-leader">................................</span><span class="core-card__spec-val">Standard</span></div>
<div class="core-card__spec"><span class="core-card__spec-lbl">Duelling</span><span class="core-card__spec-leader">................................</span><span class="core-card__spec-val">Light – Medium</span></div>
</div>
<a href="#" class="cta-ghost core-card__cta">Read specs →</a>
</div>
</div>
<div class="core-card">
<div class="core-card__stage">
<span class="core-card__tier-mark"><span class="core-card__tier-idx">T-03</span> · Pixel</span>
<img class="core-card__img" src="https://nerdworks.uk/wp-content/uploads/2025/09/Black-Smasher-V2-Lightsaber-5.jpg" alt="Black Smasher V2 hilt">
</div>
<div class="core-card__body">
<div class="core-card__title">Xenopixel V3</div>
<div class="core-card__pricing">
<span class="core-card__price-lbl">From</span>
<span class="core-card__price">$299</span>
</div>
<div class="core-card__specs">
<div class="core-card__spec"><span class="core-card__spec-lbl">Blade</span><span class="core-card__spec-leader">................................</span><span class="core-card__spec-val">Pixel Strip</span></div>
<div class="core-card__spec"><span class="core-card__spec-lbl">Sound fonts</span><span class="core-card__spec-leader">................................</span><span class="core-card__spec-val">34</span></div>
<div class="core-card__spec"><span class="core-card__spec-lbl">Effects</span><span class="core-card__spec-leader">................................</span><span class="core-card__spec-val">Blaster / Unstable</span></div>
<div class="core-card__spec"><span class="core-card__spec-lbl">Duelling</span><span class="core-card__spec-leader">................................</span><span class="core-card__spec-val">Heavy</span></div>
</div>
<a href="#" class="cta-ghost core-card__cta">Read specs →</a>
</div>
</div>
<div class="core-card">
<div class="core-card__stage">
<span class="core-card__tier-mark"><span class="core-card__tier-idx">T-04</span> · Programmable</span>
<img class="core-card__img" src="https://nerdworks.uk/wp-content/uploads/2025/09/Mando-Black-Lightsaber-3.jpg" alt="Mando Black hilt">
</div>
<div class="core-card__body">
<div class="core-card__title">Proffie 2.2</div>
<div class="core-card__pricing">
<span class="core-card__price-lbl">From</span>
<span class="core-card__price">$499</span>
</div>
<div class="core-card__specs">
<div class="core-card__spec"><span class="core-card__spec-lbl">Blade</span><span class="core-card__spec-leader">................................</span><span class="core-card__spec-val">Pixel Strip</span></div>
<div class="core-card__spec"><span class="core-card__spec-lbl">Sound fonts</span><span class="core-card__spec-leader">................................</span><span class="core-card__spec-val">Unlimited</span></div>
<div class="core-card__spec"><span class="core-card__spec-lbl">Config</span><span class="core-card__spec-leader">................................</span><span class="core-card__spec-val">Fully Coded</span></div>
<div class="core-card__spec"><span class="core-card__spec-lbl">Duelling</span><span class="core-card__spec-leader">................................</span><span class="core-card__spec-val">Heavy +</span></div>
</div>
<a href="#" class="cta-ghost core-card__cta">Read specs →</a>
</div>
</div>
</div>
</div>
</section>
<!-- ============ 6. FAN FAVOURITES ============ -->
<a id="tf-product-grid-1" data-tf-family="product-grid" style="display:contents"></a>
<section class="section favourites">
<div class="container">
<div class="section-head">
<div class="section-head__left">
<div class="eyebrow">
<span class="eyebrow__idx">02 ·</span>
<span class="eyebrow__hair"></span>
Fan favourites
</div>
<h2 class="section-title">Three that keep<br>coming back.</h2>
<p class="section-title--sub">Curated by the workshop — the sabers our collectors, duelists and cosplayers rate highest across the catalogue.</p>
</div>
<div class="section-head__right">
Featured Cores<br>
<span style="color:var(--ember);">Xenopixel V3 · Proffie 2.2</span>
</div>
</div>
<div class="favourites__grid">
<a id="tf-product-card-1" data-tf-family="product-card" style="display:contents"></a>
<article class="product-card product-card--hot">
<div class="product-card__media" style="background-image: url('https://nerdworks.uk/wp-content/uploads/2025/08/Anakin-Skywalker-EP3-1.jpg');">
<a id="tf-stock-status-chip" data-tf-family="stock-status-chip" style="display:contents"></a>
<span class="product-card__badge">In stock · Ships today</span>
</div>
<div class="product-card__body">
<div class="product-card__meta">Character · Prequel Era</div>
<h3 class="product-card__name">Anakin Skywalker EP3</h3>
<div class="product-card__specs">
<div class="product-card__spec">
<span class="product-card__spec-label">Saber Core</span>
<span class="product-card__spec-value">Xenopixel V3</span>
</div>
<div class="product-card__spec">
<span class="product-card__spec-label">Blade type</span>
<span class="product-card__spec-value">Neopixel · Duelling</span>
</div>
<div class="product-card__spec">
<span class="product-card__spec-label">Sound fonts</span>
<span class="product-card__spec-value">34 + custom</span>
</div>
</div>
<div class="product-card__foot">
<div class="product-card__price">$459.99</div>
<a href="#" class="product-card__cta">View saber →</a>
</div>
</div>
</article>
<article class="product-card product-card--hot">
<div class="product-card__media" style="background-image: url('https://nerdworks.uk/wp-content/uploads/2025/08/Anakin-Skywalker-EP3-1.jpg');">
<a id="tf-stock-status-chip" data-tf-family="stock-status-chip" style="display:contents"></a>
<span class="product-card__badge">In stock · Ships today</span>
</div>
<div class="product-card__body">
<div class="product-card__meta">Character · Prequel Era</div>
<h3 class="product-card__name">Anakin Skywalker EP3</h3>
<div class="product-card__specs">
<div class="product-card__spec">
<span class="product-card__spec-label">Saber Core</span>
<span class="product-card__spec-value">Xenopixel V3</span>
</div>
<div class="product-card__spec">
<span class="product-card__spec-label">Blade type</span>
<span class="product-card__spec-value">Neopixel · Duelling</span>
</div>
<div class="product-card__spec">
<span class="product-card__spec-label">Sound fonts</span>
<span class="product-card__spec-value">34 + custom</span>
</div>
</div>
<div class="product-card__foot">
<div class="product-card__price">$459.99</div>
<a href="#" class="product-card__cta">View saber →</a>
</div>
</div>
</article>
<article class="product-card product-card--hot">
<div class="product-card__media" style="background-image: url('https://nerdworks.uk/wp-content/uploads/2025/08/Anakin-Skywalker-EP3-1.jpg');">
<a id="tf-stock-status-chip" data-tf-family="stock-status-chip" style="display:contents"></a>
<span class="product-card__badge">In stock · Ships today</span>
</div>
<div class="product-card__body">
<div class="product-card__meta">Character · Prequel Era</div>
<h3 class="product-card__name">Anakin Skywalker EP3</h3>
<div class="product-card__specs">
<div class="product-card__spec">
<span class="product-card__spec-label">Saber Core</span>
<span class="product-card__spec-value">Xenopixel V3</span>
</div>
<div class="product-card__spec">
<span class="product-card__spec-label">Blade type</span>
<span class="product-card__spec-value">Neopixel · Duelling</span>
</div>
<div class="product-card__spec">
<span class="product-card__spec-label">Sound fonts</span>
<span class="product-card__spec-value">34 + custom</span>
</div>
</div>
<div class="product-card__foot">
<div class="product-card__price">$459.99</div>
<a href="#" class="product-card__cta">View saber →</a>
</div>
</div>
</article>
</div>
</div>
</section>
<!-- ============ 7. SHOP BY FACTION ============ -->
<a id="tf-category-browse-tiles" data-tf-family="category-browse-tiles" style="display:contents"></a>
<section class="section factions">
<div class="container">
<div class="section-head">
<div class="section-head__left">
<div class="eyebrow">
<span class="eyebrow__idx">03 ·</span>
<span class="eyebrow__hair"></span>
Shop by faction
</div>
<h2 class="section-title">Six factions.<br>Every character.</h2>
<p class="section-title--sub">Filter the catalogue by the world your saber belongs to — from Jedi discipline to Mandalorian steel to the smouldering weight of the Sith.</p>
</div>
<div class="section-head__right">
Total specimens<br>
<span style="color:var(--ember); font-size: 20px; font-weight: 700;">1,100 +</span>
</div>
</div>
<div class="faction-grid">
<div class="faction-tile">
<div class="faction-tile__brief">
<span class="faction-tile__brief-label">Photograph · Placeholder</span>
Robed Jedi silhouette against a golden temple sunrise; a blue saber lit low, dust in the beam.
</div>
<div class="faction-tile__gloss"></div>
<div class="faction-tile__ember-edge"></div>
<div class="faction-tile__label">
<span class="faction-tile__meta"><span class="faction-tile__meta-em">142</span> · Sabers</span>
<span class="faction-tile__title">Jedi</span>
<span class="faction-tile__arrow">Enter the Order <span class="faction-tile__arrow-glyph">→</span></span>
</div>
</div>
<div class="faction-tile">
<div class="faction-tile__brief">
<span class="faction-tile__brief-label">Photograph · Placeholder</span>
Cloaked Sith figure, crimson double-bladed saber igniting from below; deep red rim-light, black armour.
</div>
<div class="faction-tile__gloss"></div>
<div class="faction-tile__ember-edge"></div>
<div class="faction-tile__label">
<span class="faction-tile__meta"><span class="faction-tile__meta-em">96</span> · Sabers</span>
<span class="faction-tile__title">Sith</span>
<span class="faction-tile__arrow">Choose your dark path <span class="faction-tile__arrow-glyph">→</span></span>
</div>
</div>
<div class="faction-tile">
<div class="faction-tile__brief">
<span class="faction-tile__brief-label">Photograph · Placeholder</span>
Mandalorian helmet three-quarter profile, deep charcoal beskar, ember reflection glinting on the visor.
</div>
<div class="faction-tile__gloss"></div>
<div class="faction-tile__ember-edge"></div>
<div class="faction-tile__label">
<span class="faction-tile__meta"><span class="faction-tile__meta-em">58</span> · Sabers · Bundles</span>
<span class="faction-tile__title">Mandalorian</span>
<span class="faction-tile__arrow">Wear the creed <span class="faction-tile__arrow-glyph">→</span></span>
</div>
</div>
<div class="faction-tile">
<div class="faction-tile__brief">
<span class="faction-tile__brief-label">Photograph · Placeholder</span>
Ahsoka mid-strike, twin white blades crossing, cinematic dust and dramatic side-lighting.
</div>
<div class="faction-tile__gloss"></div>
<div class="faction-tile__ember-edge"></div>
<div class="faction-tile__label">
<span class="faction-tile__meta"><span class="faction-tile__meta-em">72</span> · Sabers</span>
<span class="faction-tile__title">Clone Wars</span>
<span class="faction-tile__arrow">Enter the war room <span class="faction-tile__arrow-glyph">→</span></span>
</div>
</div>
<div class="faction-tile">
<div class="faction-tile__brief">
<span class="faction-tile__brief-label">Photograph · Placeholder</span>
Weathered Skywalker hilt on a hull plate; single-source key light, chrome catching orange.
</div>
<div class="faction-tile__gloss"></div>
<div class="faction-tile__ember-edge"></div>
<div class="faction-tile__label">
<span class="faction-tile__meta"><span class="faction-tile__meta-em">184</span> · Sabers</span>
<span class="faction-tile__title">Original Trilogy</span>
<span class="faction-tile__arrow">Return to the beginning <span class="faction-tile__arrow-glyph">→</span></span>
</div>
</div>
<div class="faction-tile">
<div class="faction-tile__brief">
<span class="faction-tile__brief-label">Photograph · Placeholder</span>
High-Republic era saber floating against deep-space void; brushed titanium and warm rim-light.
</div>
<div class="faction-tile__gloss"></div>
<div class="faction-tile__ember-edge"></div>
<div class="faction-tile__label">
<span class="faction-tile__meta"><span class="faction-tile__meta-em">64</span> · Sabers · New Era</span>
<span class="faction-tile__title">New Republic</span>
<span class="faction-tile__arrow">Explore the era <span class="faction-tile__arrow-glyph">→</span></span>
</div>
</div>
</div>
</div>
</section>
<!-- ============ PANEL SEAM between factions and new arrivals ============ -->
<div class="panel-seam"></div>
<!-- ============ 8. NEW ARRIVALS ============ -->
<a id="tf-product-grid-2" data-tf-family="product-grid" style="display:contents"></a>
<section class="section arrivals">
<div class="container">
<div class="section-head">
<div class="section-head__left">
<div class="eyebrow">
<span class="eyebrow__idx">04 ·</span>
<span class="eyebrow__hair"></span>
Freshly commissioned
</div>
<h2 class="section-title">New arrivals from<br>the workshop.</h2>
<p class="section-title--sub">Small first runs, limited quantities. Three sabers just off the factory line and now available direct to your door.</p>
</div>
<div class="section-head__right">
Batch · 24-07-A<br>
<span style="color:var(--ember);">Runs of 200 or fewer</span>
</div>
</div>
<div class="arrivals__grid">
<a id="tf-product-card-2" data-tf-family="product-card" style="display:contents"></a>
<article class="product-card product-card--hot">
<div class="product-card__media" style="background-image: url('https://nerdworks.uk/wp-content/uploads/2025/08/Anakin-Skywalker-EP3-1.jpg');">
<a id="tf-stock-status-chip" data-tf-family="stock-status-chip" style="display:contents"></a>
<span class="product-card__badge">In stock · Ships today</span>
</div>
<div class="product-card__body">
<div class="product-card__meta">Character · Prequel Era</div>
<h3 class="product-card__name">Anakin Skywalker EP3</h3>
<div class="product-card__specs">
<div class="product-card__spec">
<span class="product-card__spec-label">Saber Core</span>
<span class="product-card__spec-value">Xenopixel V3</span>
</div>
<div class="product-card__spec">
<span class="product-card__spec-label">Blade type</span>
<span class="product-card__spec-value">Neopixel · Duelling</span>
</div>
<div class="product-card__spec">
<span class="product-card__spec-label">Sound fonts</span>
<span class="product-card__spec-value">34 + custom</span>
</div>
</div>
<div class="product-card__foot">
<div class="product-card__price">$459.99</div>
<a href="#" class="product-card__cta">View saber →</a>
</div>
</div>
</article>
<article class="product-card product-card--hot">
<div class="product-card__media" style="background-image: url('https://nerdworks.uk/wp-content/uploads/2025/08/Anakin-Skywalker-EP3-1.jpg');">
<a id="tf-stock-status-chip" data-tf-family="stock-status-chip" style="display:contents"></a>
<span class="product-card__badge">In stock · Ships today</span>
</div>
<div class="product-card__body">
<div class="product-card__meta">Character · Prequel Era</div>
<h3 class="product-card__name">Anakin Skywalker EP3</h3>
<div class="product-card__specs">
<div class="product-card__spec">
<span class="product-card__spec-label">Saber Core</span>
<span class="product-card__spec-value">Xenopixel V3</span>
</div>
<div class="product-card__spec">
<span class="product-card__spec-label">Blade type</span>
<span class="product-card__spec-value">Neopixel · Duelling</span>
</div>
<div class="product-card__spec">
<span class="product-card__spec-label">Sound fonts</span>
<span class="product-card__spec-value">34 + custom</span>
</div>
</div>
<div class="product-card__foot">
<div class="product-card__price">$459.99</div>
<a href="#" class="product-card__cta">View saber →</a>
</div>
</div>
</article>
<article class="product-card product-card--hot">
<div class="product-card__media" style="background-image: url('https://nerdworks.uk/wp-content/uploads/2025/08/Anakin-Skywalker-EP3-1.jpg');">
<a id="tf-stock-status-chip" data-tf-family="stock-status-chip" style="display:contents"></a>
<span class="product-card__badge">In stock · Ships today</span>
</div>
<div class="product-card__body">
<div class="product-card__meta">Character · Prequel Era</div>
<h3 class="product-card__name">Anakin Skywalker EP3</h3>
<div class="product-card__specs">
<div class="product-card__spec">
<span class="product-card__spec-label">Saber Core</span>
<span class="product-card__spec-value">Xenopixel V3</span>
</div>
<div class="product-card__spec">
<span class="product-card__spec-label">Blade type</span>
<span class="product-card__spec-value">Neopixel · Duelling</span>
</div>
<div class="product-card__spec">
<span class="product-card__spec-label">Sound fonts</span>
<span class="product-card__spec-value">34 + custom</span>
</div>
</div>
<div class="product-card__foot">
<div class="product-card__price">$459.99</div>
<a href="#" class="product-card__cta">View saber →</a>
</div>
</div>
</article>
</div>
</div>
</section>
<!-- ============ PANEL SEAM before Mission Control ============ -->
<div class="panel-seam"></div>
<!-- ============ 9. MISSION CONTROL ============ -->
<a id="tf-trust-prose-cells" data-tf-family="trust-prose-cells" style="display:contents"></a>
<section class="section mission">
<div class="container">
<div class="section-head">
<div class="section-head__left">
<div class="eyebrow">
<span class="eyebrow__idx">05 ·</span>
<span class="eyebrow__hair"></span>
Mission control
</div>
<h2 class="section-title">Two rooms.<br>One promise.</h2>
<p class="section-title--sub">The factory floor stays honest about timing. The support room stays honest about staying. Between them, the villain isn’t the model — it’s the shops that take payment and disappear.</p>
</div>
<div class="section-head__right">
Post-order commitment<br>
<span style="color:var(--ember);">Response · 24hr · Named SPOC</span>
</div>
</div>
<div class="mission__grid">
<div class="mission-panel">
<div class="mission-panel__stage">
<div class="mission-panel__brief">
<span class="mission-panel__brief-label">Photograph · Placeholder</span>
Factory floor at dusk: bench-lit CNC machining a hilt, sparks catching orange, deep charcoal machinery, one strong side-light source.
</div>
<div class="mission-panel__stage-ember"></div>
</div>
<div class="mission-panel__body">
<div class="mission-panel__eyebrow"><span class="mission-panel__eyebrow-idx">Room 01</span> · Source</div>
<h3 class="mission-panel__title">Factory-direct.</h3>
<p class="mission-panel__body-copy">Every saber ships directly from our partner factory in 7–10 days. Broader catalogue than we could ever warehouse — every character, every Saber Core, every duelling grade.</p>
<div class="mission-panel__telemetry">
<div class="mission-panel__telem-cell">
<span class="mission-panel__telem-lbl">Origin</span>
<span class="mission-panel__telem-val mission-panel__telem-val--ember">Factory Direct</span>
</div>
<div class="mission-panel__telem-cell">
<span class="mission-panel__telem-lbl">Transit</span>
<span class="mission-panel__telem-val">7–10 Days</span>
</div>
<div class="mission-panel__telem-cell">
<span class="mission-panel__telem-lbl">Range</span>
<span class="mission-panel__telem-val">1,100 SKUs</span>
</div>
</div>
</div>
</div>
<div class="mission-panel">
<div class="mission-panel__stage">
<div class="mission-panel__brief">
<span class="mission-panel__brief-label">Photograph · Placeholder</span>
Named support operator at a hull-panelled console; single desk-lamp glow, ember-lit monitor bezel, calm concentration.
</div>
<div class="mission-panel__stage-ember"></div>
</div>
<div class="mission-panel__body">
<div class="mission-panel__eyebrow"><span class="mission-panel__eyebrow-idx">Room 02</span> · Support</div>
<h3 class="mission-panel__title">Real customer service.</h3>
<p class="mission-panel__body-copy">24-hour initial response. Named single point of contact. We’re here when something goes wrong — the part most factory-direct shops leave you to sort out alone.</p>
<div class="mission-panel__telemetry">
<div class="mission-panel__telem-cell">
<span class="mission-panel__telem-lbl">Response</span>
<span class="mission-panel__telem-val mission-panel__telem-val--ember">24 Hours</span>
</div>
<div class="mission-panel__telem-cell">
<span class="mission-panel__telem-lbl">Support</span>
<span class="mission-panel__telem-val">Named SPOC</span>
</div>
<div class="mission-panel__telem-cell">
<span class="mission-panel__telem-lbl">Guarantee</span>
<span class="mission-panel__telem-val">30-Day M/B</span>
</div>
</div>
</div>
</div>
</div>
<div class="mission__cta-wrap">
<a href="#" class="cta-ghost">Read our promise →</a>
</div>
</div>
</section>
<!-- ============ 10. TESTIMONIALS ============ -->
<a id="tf-testimonial" data-tf-family="testimonial" style="display:contents"></a>
<section class="section testimonials">
<div class="container">
<div class="section-head">
<div class="section-head__left">
<div class="eyebrow">
<span class="eyebrow__idx">06 ·</span>
<span class="eyebrow__hair"></span>
Owner reports
</div>
<h2 class="section-title">What our<br>collectors say.</h2>
<p class="section-title--sub">Words from the collectors, duelists and cosplayers who’ve already put an ARTSABERS hilt on their belt.</p>
</div>
<div class="section-head__right">
Aggregate<br>
<span style="color:var(--ember); font-size: 18px; font-weight: 700;">4.8 / 5</span> · 1,247 reviews
</div>
</div>
<div class="testimonials__grid">
<div class="testimonial">
<span class="testimonial__quote-mark">“</span>
<div class="testimonial__stars">★★★★★</div>
<p class="testimonial__body">Ordered the Anakin EP3. Nine days from checkout to my door, exactly as ARTSABERS said. The Xenopixel V3 blade is heavier than I expected in the best possible way — you feel every swing. Support answered my font question the same day.</p>
<div class="testimonial__foot">
<div class="testimonial__avatar">MK</div>
<div class="testimonial__meta">
<span class="testimonial__name">Marcus K.</span>
<span class="testimonial__product"><span class="testimonial__product-em">Anakin EP3</span> · Duelling Grade</span>
</div>
</div>
</div>
<div class="testimonial">
<span class="testimonial__quote-mark">“</span>
<div class="testimonial__stars">★★★★★</div>
<p class="testimonial__body">I’ve bought sabers from three other factory-direct shops. This is the first time I’ve had a named contact who actually replied. The Luke ROTJ Weathered arrived with a scuffed pommel; a replacement was on its way within 24 hours. That’s the whole difference.</p>
<div class="testimonial__foot">
<div class="testimonial__avatar">RD</div>
<div class="testimonial__meta">
<span class="testimonial__name">Rina D.</span>
<span class="testimonial__product"><span class="testimonial__product-em">Luke ROTJ Weathered</span> · Proffie 2.2</span>
</div>
</div>
</div>
<div class="testimonial">
<span class="testimonial__quote-mark">“</span>
<div class="testimonial__stars">★★★★★</div>
<p class="testimonial__body">Bought the Ordo V2 Double for cosplay first, kept it for duelling. Machined aluminium grip is legit heavy-duelling spec — two months of hard sparring, no give. Both Proffie blades still light clean off the trigger. Worth every penny.</p>
<div class="testimonial__foot">
<div class="testimonial__avatar">JT</div>
<div class="testimonial__meta">
<span class="testimonial__name">Jordan T.</span>
<span class="testimonial__product"><span class="testimonial__product-em">Ordo V2</span> · Double-Bladed</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ============ 11. BRAND STORY ============ -->
<a id="tf-workshop-split" data-tf-family="workshop-split" style="display:contents"></a>
<section class="brand-story">
<div class="brand-story__grid">
<div class="brand-story__stage">
<img class="brand-story__img" src="https://artsabers.com/wp-content/uploads/sites/10/2026/07/70f87cc29f23055e9700f4ab529a38a6.jpg" alt="ARTSABERS founder cinematic portrait">
<div class="brand-story__stage-vignette"></div>
<div class="brand-story__stage-ember"></div>
</div>
<div class="brand-story__panel">
<div class="brand-story__eyebrow">◆ Our story</div>
<h2 class="brand-story__title">The workshop<br>that stays.</h2>
<p class="brand-story__lede">
Founded in Latvia in 2020 by a Star Wars fan who couldn’t find a saber shop that answered its emails. Now part of Nerdworks. <em>We sell every replica saber a fan could want</em> — with the customer service most factory-direct shops won’t give.
</p>
<div class="brand-story__facts">
<div>
<span class="brand-story__fact-lbl">Founded</span>
<span class="brand-story__fact-val">2020</span>
</div>
<div>
<span class="brand-story__fact-lbl">Catalogue</span>
<span class="brand-story__fact-val"><span class="brand-story__fact-val-em">1,100</span></span>
</div>
<div>
<span class="brand-story__fact-lbl">Backing</span>
<span class="brand-story__fact-val">Nerdworks</span>
</div>
</div>
<div class="brand-story__actions">
<a href="#" class="cta-ghost">Read our story →</a>
<a href="#" class="brand-story__ember-link">Meet the workshop →</a>
</div>
</div>
</div>
</section>
<!-- ============ 12. WARM CAPTURE BAND — biggest ember moment ============ -->
<a id="tf-newsletter-signup" data-tf-family="newsletter-signup" style="display:contents"></a>
<section class="capture">
<div class="container">
<div class="capture__inner">
<div class="capture__copy">
<div class="capture__eyebrow">◆ Join the comms</div>
<h2 class="capture__title">From factory floor<br>to your inbox.</h2>
<p class="capture__sub">Get 10% off your first saber, plus early access to new drops, ARTSABERS Exclusives, and the workshop pieces that never make it to the public catalogue.</p>
</div>
<div class="capture__form">
<span class="capture__form-lbl">Comms · Signal In</span>
<input class="capture__form-input" type="email" placeholder="your@email.com">
<button class="capture__form-cta">Open the signal →</button>
<span class="capture__form-fine">One drop a week. Unsubscribe with one click. We never share your details.</span>
</div>
</div>
</div>
</section>
<!-- ============ PANEL SEAM between capture and footer ============ -->
<div class="panel-seam"></div>
<!-- ============ 13. FOOTER ============ -->
<footer class="site-footer">
<div class="container">
<div class="site-footer__grid">
<div class="site-footer__mast">
<div class="site-footer__brand">ART<em>SABERS</em></div>
<p class="site-footer__mission">Hundreds of sabers. One trusted retailer. From factory floor to your door in 7–10 days — with real customer service the whole way.</p>
<div class="site-footer__pay">
<span class="site-footer__pay-badge">Visa</span>
<span class="site-footer__pay-badge">Mastercard</span>
<span class="site-footer__pay-badge">Amex</span>
<span class="site-footer__pay-badge">Apple Pay</span>
<span class="site-footer__pay-badge">Mollie</span>
</div>
</div>
<div>
<h4 class="site-footer__col-title">Shop</h4>
<ul class="site-footer__links">
<li>Lightsabers</li>
<li>By Saber Core</li>
<li>Cosplay Helmets</li>
<li>Parts & Accessories</li>
<li>Under $100</li>
<li>Offers & Deals</li>
</ul>
</div>
<div>
<h4 class="site-footer__col-title">Support</h4>
<ul class="site-footer__links">
<li>Contact us</li>
<li>Named SPOC</li>
<li>Shipping & timing</li>
<li>Returns & refunds</li>
<li>30-day guarantee</li>
<li>FAQ</li>
</ul>
</div>
<div>
<h4 class="site-footer__col-title">Company</h4>
<ul class="site-footer__links">
<li>Our story</li>
<li>The workshop</li>
<li>ARTSABERS Exclusives</li>
<li>Press</li>
<li>Wholesale</li>
<li>Careers</li>
</ul>
</div>
<div>
<h4 class="site-footer__col-title">Connect</h4>
<ul class="site-footer__links">
<li>Instagram</li>
<li>TikTok</li>
<li>YouTube</li>
<li>Facebook</li>
<li>Threads</li>
</ul>
</div>
</div>
<div class="site-footer__base">
<span>© 2026 ARTSABERS. All rights reserved.</span>
<span class="site-footer__nerdworks">A <span class="site-footer__nerdworks-em">Nerdworks</span> brand</span>
<span>Terms · Privacy · Cookies</span>
</div>
</div>
</footer>
</body>
</html>