/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"?><?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>Anakin Skywalker Lightsabers — ARTSABERS</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@300;400;500;600&family=Orbitron:wght@400;500;600;700;800&family=Onest:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>/* =========================================================
TOKENS — ARTSABERS · Kyber Hull styleguide
========================================================= */
: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;
--outline: #3E3E3E;
/* Chrome / white highlights */
--chrome-highlight: #FAFAFA;
--chrome-glint: #E8E4DD;
--chrome-warm: #F5F0E8;
--chrome-dim: #B8B0A6;
/* Semantic surface roles (Kyber Hull grounds — one step darker than SG default) */
--bg-section-plain-a: var(--carbon);
--bg-section-plain-b: var(--void);
--bg-card-on-plain: var(--hull-panel);
--bg-card-on-pattern: rgba(20, 20, 20, 0.94);
--bg-card-tile-on-pattern: rgba(15, 15, 15, 0.90);
--bg-card-lift: var(--hull-panel-lift);
--bg-footer: var(--carbon);
/* Semantic text roles */
--text-hero: var(--chrome-highlight);
--text-section-title: var(--chrome-highlight);
--text-sub: var(--chrome-warm);
--text-body: var(--chrome-warm);
--text-meta: var(--chrome-dim);
--text-accent: var(--ember);
--text-price: var(--ember);
--text-on-ember: var(--on-primary-fixed);
/* Type */
--font-display: 'Orbitron', system-ui, sans-serif;
--font-body: 'Onest', system-ui, sans-serif;
--fs-display: 128px;
--fs-h1: 84px;
--fs-h2: 60px;
--fs-h3: 40px;
--fs-h4: 28px;
--fs-body-lg: 18px;
--fs-body: 16px;
--fs-label: 12px;
--fs-micro: 11px;
--track-hero: 0.14em;
--track-label: 0.1em;
--track-cta: 0.06em;
/* Spacing */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 96px;
--space-10: 128px;
/* Shadows / glows */
--panel-lift: inset 0 1px 0 rgba(250, 250, 250, 0.30), 0 8px 24px -8px rgba(0, 0, 0, 0.9);
--panel-lift-hover: inset 0 1px 0 rgba(250, 250, 250, 0.40), 0 14px 40px -10px 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.55);
--ember-hot-rim: inset 0 0 0 1px rgba(255, 122, 46, 0.6), 0 0 24px rgba(255, 122, 46, 0.5);
--chrome-top-soft: inset 0 1px 0 rgba(250, 250, 250, 0.12);
/* Hull-plate imagery — locked variants */
--img-pattern-f: url('https://camcom.dev/generated_imgs/generated-2026-07-07T15-47-31-768Z-joeqpj.jpg');
--img-pattern-g: url('https://camcom.dev/generated_imgs/generated-2026-07-07T15-48-07-970Z-oehwsm.jpg');
--pattern-overlay-carbon: linear-gradient(rgba(6, 6, 6, 0.68), rgba(6, 6, 6, 0.72));
--pattern-overlay-void: linear-gradient(rgba(10, 10, 10, 0.66), rgba(10, 10, 10, 0.74));
}
/* =========================================================
BASE / RESET
========================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--carbon); color: var(--text-body); }
body { font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; border: 0; background: none; cursor: pointer; color: inherit; }
h1, h2, h3, h4, h5 { font-family: var(--font-display); font-weight: 700; line-height: 1.05; color: var(--text-section-title); }
/* Utility container */
.container { max-width: 1440px; margin: 0 auto; padding: 0 var(--space-7); }
.container--narrow { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-7); }
/* =========================================================
SECTION SHELL
========================================================= */
.section { position: relative; padding: var(--space-10) 0; }
.section--plain-carbon { background: var(--carbon); }
.section--plain-void { background: var(--void); }
.section--pattern-f {
background: var(--pattern-overlay-carbon), var(--img-pattern-f) center/cover no-repeat;
background-attachment: local, local;
}
.section--pattern-g {
background: var(--pattern-overlay-void), var(--img-pattern-g) center/cover no-repeat;
background-attachment: local, local;
}
/* Sparingly-used panel-seam glow — placed above the capture band */
.panel-seam {
height: 1px;
background: var(--ember);
opacity: 0.7;
box-shadow: 0 0 24px 6px rgba(255, 122, 46, 0.35), 0 8px 32px 8px rgba(232, 93, 24, 0.22);
}
/* =========================================================
SECTION HEAD — shared eyebrow + title + kicker
========================================================= */
.section-head { max-width: 1120px; margin: 0 auto var(--space-8); }
.section-head__eyebrow::before {
content: '';
width: 32px;
height: 1px;
background: var(--ember);
box-shadow: 0 0 8px rgba(255, 122, 46, 0.55);
}
.section-head__title {
font-size: var(--fs-h2);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
color: var(--text-section-title);
max-width: 20ch;
}
.section-head__kicker {
margin-top: var(--space-5);
color: var(--text-body);
max-width: 62ch;
font-size: var(--fs-body-lg);
}
/* =========================================================
BUTTONS — shared primitives
========================================================= */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
font-family: var(--font-display);
font-weight: 600;
font-size: 14px;
text-transform: uppercase;
letter-spacing: var(--track-cta);
padding: 18px 32px;
transition: box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.btn--primary {
background: linear-gradient(180deg, var(--ember-glow) 0%, var(--ember) 55%, var(--ember-deep) 100%);
color: var(--on-primary-fixed);
box-shadow: var(--ember-glow-sm);
}
.btn--primary:hover { box-shadow: var(--ember-glow-md); }
.btn--ghost {
background: transparent;
color: var(--chrome-warm);
border: 1px solid rgba(62, 62, 62, 0.6);
}
.btn--ghost:hover {
background: var(--hull-panel-lift);
box-shadow: var(--chrome-top-soft);
}
.btn--ghost-ember {
background: transparent;
color: var(--ember);
border: 1px solid rgba(255, 122, 46, 0.55);
}
.btn--ghost-ember:hover {
background: rgba(255, 122, 46, 0.08);
box-shadow: 0 0 20px rgba(255, 122, 46, 0.25);
}
.btn__arrow { font-family: var(--font-display); font-weight: 500; }
/* =========================================================
BLOCK: header (global chrome — promo + nav)
========================================================= */
.header { position: sticky; top: 0; z-index: 40; }
.header__promo {
background: var(--void);
color: var(--chrome-dim);
font-family: var(--font-display);
font-size: var(--fs-micro);
letter-spacing: var(--track-label);
text-transform: uppercase;
padding: 10px 0;
border-bottom: 1px solid rgba(255, 122, 46, 0.20);
}
.header__promo-inner { display: flex; justify-content: center; gap: var(--space-6); align-items: center; }
.header__promo-inner span::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
background: var(--ember);
margin-right: 10px;
box-shadow: 0 0 8px var(--ember);
vertical-align: 1px;
}
.header__nav {
background: var(--carbon);
box-shadow: var(--chrome-top-soft), 0 8px 24px -12px rgba(0, 0, 0, 0.9);
}
.header__nav-inner {
display: flex;
align-items: center;
gap: var(--space-8);
padding: 20px 0;
}
.header__brand {
font-family: var(--font-display);
font-weight: 700;
font-size: 22px;
letter-spacing: 0.18em;
color: var(--chrome-highlight);
}
.header__brand-mark { color: var(--ember); }
.header__menu { display: flex; gap: var(--space-6); flex: 1; }
.header__menu a {
font-family: var(--font-display);
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: var(--track-label);
color: var(--chrome-warm);
padding-bottom: 4px;
border-bottom: 1px solid transparent;
}
.header__menu a:hover { color: var(--chrome-highlight); border-bottom-color: var(--ember); }
.header__utility { display: flex; gap: var(--space-5); align-items: center; color: var(--chrome-dim); }
.header__utility a { font-family: var(--font-display); font-size: 12px; text-transform: uppercase; letter-spacing: var(--track-label); }
.header__utility .cart {
color: var(--chrome-highlight);
border-left: 1px solid rgba(255, 255, 255, 0.10);
padding-left: var(--space-5);
}
.header__utility .cart-count { color: var(--ember); margin-left: 6px; }
/* =========================================================
BLOCK: breadcrumbs
========================================================= */
.breadcrumbs { background: var(--void); padding: 18px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
/* =========================================================
BLOCK: character-hero (cinematic 100vh, single-column left copy)
========================================================= */
.character-hero {
position: relative;
min-height: 100vh;
background:
linear-gradient(180deg, rgba(6, 6, 6, 0.30) 0%, rgba(6, 6, 6, 0.55) 55%, rgba(6, 6, 6, 0.92) 100%),
radial-gradient(ellipse at 68% 42%, rgba(232, 93, 24, 0.22) 0%, rgba(232, 93, 24, 0.05) 35%, transparent 70%),
#060606 url('https://camcom.dev/generated_imgs/generated-2026-07-07T21-47-52-940Z-zfjixl.jpg') center/cover no-repeat;
color: var(--chrome-highlight);
display: flex;
align-items: flex-end;
overflow: hidden;
}
.character-hero__inner {
width: 100%;
padding-bottom: 320px;
display: grid;
grid-template-columns: 1fr;
gap: var(--space-9);
align-items: end;
}
.character-hero__eyebrow {
font-family: var(--font-display);
font-size: var(--fs-label);
font-weight: 500;
letter-spacing: var(--track-label);
text-transform: uppercase;
color: var(--ember);
display: inline-flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-6);
}
.character-hero__eyebrow::before {
content: '';
width: 44px;
height: 1px;
background: var(--ember);
box-shadow: 0 0 8px rgba(255, 122, 46, 0.75);
}
.character-hero__display {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--fs-display);
line-height: 0.94;
letter-spacing: var(--track-hero);
text-transform: uppercase;
color: var(--chrome-highlight);
}
.character-hero__display span { display: block; }
.character-hero__display .surname { color: var(--chrome-warm); }
.character-hero__sub {
margin-top: var(--space-6);
font-family: var(--font-body);
font-size: 20px;
line-height: 1.5;
color: var(--chrome-warm);
max-width: 52ch;
}
.character-hero__ctas { margin-top: var(--space-7); display: flex; gap: var(--space-4); flex-wrap: wrap; }
.character-hero__descriptor {
position: absolute;
bottom: var(--space-6);
left: 50%;
transform: translateX(-50%);
font-family: var(--font-display);
font-size: var(--fs-micro);
letter-spacing: var(--track-label);
text-transform: uppercase;
color: var(--chrome-dim);
white-space: nowrap;
}
.character-hero__descriptor span { color: var(--chrome-warm); margin: 0 8px; }
/* =========================================================
BLOCK: bio-split (portrait LEFT · data + editorial RIGHT)
========================================================= */
.bio-split { display: grid; grid-template-columns: minmax(380px, 460px) 1fr; gap: var(--space-8); align-items: stretch; }
.bio-split__media {
min-height: 720px;
background: #060606 center/cover no-repeat;
box-shadow: var(--panel-lift);
position: relative;
}
.bio-split__media::after {
content: '';
position: absolute;
right: 0; top: 0; bottom: 0;
width: 6px;
background: linear-gradient(180deg, transparent 0%, rgba(255, 122, 46, 0.35) 45%, rgba(255, 122, 46, 0.15) 100%);
box-shadow: 0 0 24px rgba(255, 122, 46, 0.35);
pointer-events: none;
}
.bio-split__media-caption {
position: absolute;
bottom: var(--space-5);
left: var(--space-5);
padding: 10px 14px;
background: rgba(10, 10, 10, 0.75);
backdrop-filter: blur(3px);
font-family: var(--font-display);
font-size: var(--fs-micro);
letter-spacing: var(--track-label);
text-transform: uppercase;
color: var(--chrome-dim);
}
.bio-split__prose { padding: var(--space-4) 0; display: flex; flex-direction: column; gap: var(--space-7); }
.bio-split__eyebrow {
font-family: var(--font-display);
font-size: var(--fs-label);
font-weight: 500;
letter-spacing: var(--track-label);
text-transform: uppercase;
color: var(--ember);
margin-bottom: var(--space-4);
}
.bio-split__title {
font-family: var(--font-display);
font-size: var(--fs-h2);
text-transform: uppercase;
letter-spacing: 0.8px;
color: var(--chrome-highlight);
line-height: 1;
max-width: 15ch;
}
.bio-split__data {
display: grid;
gap: var(--space-4);
padding: var(--space-6) 0;
border-top: 1px solid rgba(255, 255, 255, 0.06);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.bio-split__data-row {
display: grid;
grid-template-columns: minmax(160px, max-content) 1fr max-content;
gap: var(--space-4);
align-items: baseline;
font-family: var(--font-display);
}
.bio-split__data-label { font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--chrome-dim); }
.bio-split__data-leader { border-bottom: 1px dotted rgba(184, 176, 166, 0.28); align-self: end; margin-bottom: 6px; }
.bio-split__data-value { font-size: 16px; color: var(--chrome-warm); font-variant-numeric: tabular-nums; text-align: right; letter-spacing: 0.02em; }
.bio-split__data-value .accent { color: var(--ember); }
.bio-split__body p { font-family: var(--font-body); font-size: var(--fs-body-lg); color: var(--chrome-warm); margin-bottom: var(--space-5); line-height: 1.65; }
.bio-split__body p:last-child { margin-bottom: 0; }
/* =========================================================
BLOCK: phase-band (arc chapter strip — repeated 4×)
========================================================= */
.phase-band-set { display: flex; flex-direction: column; }
.phase-band {
display: grid;
grid-template-columns: minmax(300px, 380px) 1fr;
gap: var(--space-8);
align-items: center;
padding: var(--space-9) 0;
position: relative;
}
.phase-band + .phase-band { border-top: 1px solid rgba(255, 122, 46, 0.10); }
.phase-band + .phase-band::before {
content: '';
position: absolute;
top: -1px;
left: 15%;
right: 15%;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(255, 122, 46, 0.35) 50%, transparent 100%);
box-shadow: 0 0 12px rgba(255, 122, 46, 0.28);
pointer-events: none;
}
.phase-band__copy {}
.phase-band__index {
font-family: var(--font-display);
font-size: var(--fs-label);
font-weight: 600;
letter-spacing: var(--track-label);
text-transform: uppercase;
color: var(--ember);
display: inline-flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-4);
}
.phase-band__index::before {
content: '';
width: 32px;
height: 1px;
background: var(--ember);
box-shadow: 0 0 8px rgba(255, 122, 46, 0.55);
}
.phase-band__title {
font-family: var(--font-display);
font-size: 68px;
font-weight: 700;
line-height: 0.95;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--chrome-highlight);
margin-bottom: var(--space-4);
}
.phase-band__editorial {
font-family: var(--font-body);
font-size: var(--fs-body-lg);
color: var(--chrome-warm);
line-height: 1.55;
max-width: 34ch;
margin-bottom: var(--space-5);
}
.phase-band__meta {
font-family: var(--font-display);
font-size: var(--fs-label);
letter-spacing: var(--track-label);
text-transform: uppercase;
color: var(--chrome-dim);
display: flex;
gap: var(--space-5);
}
.phase-band__meta strong { color: var(--ember); font-weight: 600; }
.phase-band__hilts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.phase-band--single .phase-band__hilts { grid-template-columns: minmax(0, 360px); }
/* =========================================================
BLOCK: phase-hilt (compact phase card)
========================================================= */
.phase-hilt {
background: var(--bg-card-on-pattern);
backdrop-filter: blur(3px);
box-shadow: var(--panel-lift);
display: flex;
flex-direction: column;
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.phase-hilt:hover { transform: translateY(-4px); box-shadow: var(--panel-lift-hover); }
.phase-hilt--featured { box-shadow: var(--panel-lift), var(--ember-hot-rim); }
.phase-hilt--featured:hover { box-shadow: var(--panel-lift-hover), var(--ember-hot-rim); }
.phase-hilt__media {
aspect-ratio: 1/1;
background-color: #0a0a0a;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
position: relative;
}
.phase-hilt__eyebrow-tag {
position: absolute;
top: var(--space-3);
left: var(--space-3);
padding: 5px 10px;
background: rgba(255, 122, 46, 0.15);
border: 1px solid rgba(255, 122, 46, 0.55);
font-family: var(--font-display);
font-size: var(--fs-micro);
font-weight: 600;
letter-spacing: var(--track-label);
text-transform: uppercase;
color: var(--ember);
}
.phase-hilt__body {
padding: var(--space-5) var(--space-5) var(--space-5);
display: flex;
flex-direction: column;
gap: var(--space-3);
background: var(--hull-panel-lift);
flex: 1;
}
.phase-hilt__series {
font-family: var(--font-display);
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: var(--track-label);
text-transform: uppercase;
color: var(--chrome-dim);
}
.phase-hilt__name {
font-family: var(--font-display);
font-size: 20px;
font-weight: 700;
line-height: 1.15;
color: var(--chrome-highlight);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.phase-hilt__foot {
margin-top: auto;
padding-top: var(--space-4);
border-top: 1px dotted rgba(184, 176, 166, 0.20);
display: flex;
justify-content: space-between;
align-items: baseline;
}
.phase-hilt__price {
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
color: var(--ember);
font-variant-numeric: tabular-nums;
}
.phase-hilt__cta {
font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--track-cta);
color: var(--chrome-highlight);
padding-bottom: 4px;
border-bottom: 1px solid var(--ember);
}
/* =========================================================
BLOCK: signature-specs (asymmetric spec-sheet)
========================================================= */
.signature-specs { display: grid; grid-template-columns: 1fr 1.35fr; gap: var(--space-9); align-items: start; }
.signature-specs__title-block {}
.signature-specs__eyebrow {
font-family: var(--font-display);
font-size: var(--fs-label);
font-weight: 500;
letter-spacing: var(--track-label);
text-transform: uppercase;
color: var(--ember);
display: inline-flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-5);
}
.signature-specs__eyebrow::before {
content: '';
width: 32px;
height: 1px;
background: var(--ember);
box-shadow: 0 0 8px rgba(255, 122, 46, 0.55);
}
.signature-specs__title {
font-family: var(--font-display);
font-size: var(--fs-h2);
font-weight: 700;
line-height: 0.95;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--chrome-highlight);
margin-bottom: var(--space-6);
max-width: 15ch;
}
.signature-specs__intro {
font-family: var(--font-body);
font-size: var(--fs-body-lg);
color: var(--chrome-warm);
line-height: 1.6;
max-width: 38ch;
}
.signature-specs__list { display: grid; gap: var(--space-5); }
.signature-specs__row {
display: grid;
grid-template-columns: minmax(240px, max-content) 1fr max-content;
gap: var(--space-5);
align-items: baseline;
padding-bottom: var(--space-4);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.signature-specs__label { font-family: var(--font-display); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--chrome-dim); }
.signature-specs__leader { border-bottom: 1px dotted rgba(184, 176, 166, 0.25); align-self: end; margin-bottom: 6px; }
.signature-specs__value { font-family: var(--font-display); font-size: 18px; font-weight: 500; color: var(--chrome-warm); text-align: right; letter-spacing: 0.02em; }
.signature-specs__value .accent { color: var(--ember); }
/* =========================================================
BLOCK: product-hilt-grid + product-hilt (large product card)
========================================================= */
.product-hilt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.product-hilt {
position: relative;
background: var(--bg-card-on-pattern);
backdrop-filter: blur(3px);
box-shadow: var(--panel-lift);
display: flex;
flex-direction: column;
transition: box-shadow 0.35s ease, transform 0.35s ease;
}
.product-hilt:hover { transform: translateY(-4px); box-shadow: var(--panel-lift-hover); }
.product-hilt--featured { box-shadow: var(--panel-lift), var(--ember-hot-rim); }
.product-hilt--featured:hover { box-shadow: var(--panel-lift-hover), var(--ember-hot-rim); }
.product-hilt__media {
aspect-ratio: 1/1;
background-color: #0a0a0a;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
position: relative;
overflow: hidden;
}
.product-hilt__media::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 60%, rgba(6, 6, 6, 0.40) 100%);
pointer-events: none;
}
.product-hilt__eyebrow-tag {
position: absolute;
top: var(--space-4);
left: var(--space-4);
padding: 6px 10px;
background: rgba(255, 122, 46, 0.15);
border: 1px solid rgba(255, 122, 46, 0.55);
font-family: var(--font-display);
font-size: var(--fs-micro);
font-weight: 600;
letter-spacing: var(--track-label);
text-transform: uppercase;
color: var(--ember);
z-index: 2;
}
.product-hilt__body { padding: var(--space-6); flex: 1; display: flex; flex-direction: column; gap: var(--space-4); background: var(--hull-panel-lift); }
.product-hilt__meta-top {
display: flex;
justify-content: space-between;
align-items: baseline;
font-family: var(--font-display);
font-size: var(--fs-micro);
letter-spacing: var(--track-label);
text-transform: uppercase;
color: var(--chrome-dim);
}
.product-hilt__series { color: var(--chrome-dim); }
.product-hilt__sku { color: var(--chrome-dim); }
.product-hilt__name {
font-family: var(--font-display);
font-size: 24px;
font-weight: 700;
line-height: 1.15;
color: var(--chrome-highlight);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.product-hilt__specs { display: grid; gap: var(--space-2); margin-top: var(--space-2); }
.product-hilt__spec-row {
display: grid;
grid-template-columns: max-content 1fr max-content;
gap: var(--space-3);
align-items: baseline;
font-family: var(--font-display);
font-size: 12px;
}
.product-hilt__spec-label { color: var(--chrome-dim); text-transform: uppercase; letter-spacing: var(--track-label); }
.product-hilt__spec-leader { border-bottom: 1px dotted rgba(184, 176, 166, 0.25); align-self: end; margin-bottom: 4px; }
.product-hilt__spec-value { color: var(--chrome-warm); font-variant-numeric: tabular-nums; text-align: right; }
.product-hilt__foot {
margin-top: auto;
padding-top: var(--space-5);
border-top: 1px dotted rgba(184, 176, 166, 0.20);
display: flex;
justify-content: space-between;
align-items: center;
}
.product-hilt__price {
font-family: var(--font-display);
font-size: 28px;
font-weight: 700;
color: var(--ember);
font-variant-numeric: tabular-nums;
}
.product-hilt__cta {
font-family: var(--font-display);
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--track-cta);
color: var(--chrome-highlight);
padding-bottom: 4px;
border-bottom: 1px solid var(--ember);
}
/* =========================================================
BLOCK: character-strip · character-tile
========================================================= */
.character-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.character-tile {
position: relative;
background: var(--bg-card-on-plain);
box-shadow: var(--panel-lift);
transition: transform 0.35s ease, box-shadow 0.35s ease;
overflow: hidden;
display: flex;
flex-direction: column;
}
.character-tile:hover { transform: translateY(-4px); box-shadow: var(--panel-lift-hover); }
.character-tile__media {
aspect-ratio: 3/4;
background: #0F0F0F center/cover no-repeat;
position: relative;
}
.character-tile__media::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 45%, rgba(6, 6, 6, 0.95) 100%);
}
.character-tile__index {
position: absolute;
top: var(--space-4);
left: var(--space-4);
font-family: var(--font-display);
font-size: var(--fs-label);
letter-spacing: var(--track-label);
color: var(--ember);
z-index: 2;
}
.character-tile__body { padding: var(--space-6); position: relative; flex: 1; display: flex; flex-direction: column; }
.character-tile__name {
font-family: var(--font-display);
font-size: var(--fs-h4);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--chrome-highlight);
margin-bottom: var(--space-2);
}
.character-tile__arc {
font-family: var(--font-display);
font-size: var(--fs-label);
font-weight: 500;
letter-spacing: var(--track-label);
text-transform: uppercase;
color: var(--ember);
margin-bottom: var(--space-3);
}
.character-tile__relationship {
font-family: var(--font-body);
font-size: 16px;
color: var(--chrome-warm);
line-height: 1.5;
margin-bottom: var(--space-5);
max-width: 34ch;
}
.character-tile__cta {
margin-top: auto;
margin-bottom: 0;
font-family: var(--font-display);
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--track-cta);
color: var(--ember);
display: inline-flex;
align-items: center;
gap: 10px;
align-self: flex-start;
}
.character-tile__cta::after {
content: '';
width: 20px;
height: 1px;
background: var(--ember);
transition: width 0.25s ease;
}
.character-tile:hover .character-tile__cta::after { width: 32px; }
/* =========================================================
BLOCK: testimonial-grid · testimonial-card
========================================================= */
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.testimonial-card {
position: relative;
padding: var(--space-7);
background: var(--bg-card-on-pattern);
backdrop-filter: blur(3px);
box-shadow: var(--panel-lift);
display: flex;
flex-direction: column;
}
.testimonial-card__rating {
display: flex;
gap: 4px;
margin-bottom: var(--space-5);
}
.testimonial-card__star {
width: 14px;
height: 14px;
background: var(--ember);
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
box-shadow: 0 0 6px rgba(255, 122, 46, 0.6);
}
.testimonial-card__quote {
font-family: var(--font-display);
font-size: 21px;
line-height: 1.4;
font-weight: 500;
color: var(--chrome-highlight);
margin-bottom: var(--space-6);
flex: 1;
}
.testimonial-card__quote::before { content: '201C'; color: var(--ember); font-family: var(--font-display); margin-right: 4px; }
.testimonial-card__quote::after { content: '201D'; color: var(--ember); font-family: var(--font-display); }
.testimonial-card__attribution {
padding-top: var(--space-5);
border-top: 1px dotted rgba(184, 176, 166, 0.30);
display: grid;
gap: var(--space-2);
}
.testimonial-card__author {
font-family: var(--font-display);
font-size: 14px;
font-weight: 600;
color: var(--chrome-warm);
text-transform: uppercase;
letter-spacing: var(--track-label);
}
.testimonial-card__sku {
font-family: var(--font-display);
font-size: var(--fs-micro);
letter-spacing: var(--track-label);
text-transform: uppercase;
color: var(--chrome-dim);
}
.testimonial-card__sku strong { color: var(--ember); font-weight: 600; }
/* =========================================================
BLOCK: collection-band (big Space Grotesk CTA band)
========================================================= */
.collection-band { padding: var(--space-10) 0; text-align: center; position: relative; }
.collection-band__eyebrow {
font-family: var(--font-display);
font-size: var(--fs-label);
letter-spacing: var(--track-label);
text-transform: uppercase;
color: var(--ember);
margin-bottom: var(--space-5);
display: inline-flex;
align-items: center;
gap: var(--space-3);
}
.collection-band__eyebrow::before, .collection-band__eyebrow::after {
content: '';
width: 44px;
height: 1px;
background: var(--ember);
box-shadow: 0 0 8px rgba(255, 122, 46, 0.65);
}
.collection-band__title {
font-family: var(--font-display);
font-weight: 700;
font-size: 72px;
line-height: 1;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--chrome-highlight);
max-width: 22ch;
margin: 0 auto var(--space-5);
}
.collection-band__title .accent { color: var(--ember); font-variant-numeric: tabular-nums; }
.collection-band__sub {
font-family: var(--font-display);
font-size: 16px;
letter-spacing: var(--track-label);
text-transform: uppercase;
color: var(--chrome-dim);
margin-bottom: var(--space-7);
}
.collection-band__sub span { color: var(--chrome-warm); margin: 0 10px; }
.collection-band__cta-row { display: flex; justify-content: center; gap: var(--space-4); flex-wrap: wrap; }
/* =========================================================
BLOCK: capture-band (warm full ombre)
========================================================= */
.capture-band {
padding: var(--space-10) 0;
background: linear-gradient(180deg, var(--ember-glow) 0%, var(--ember) 45%, var(--ember-forge) 100%);
color: var(--on-primary-fixed);
position: relative;
overflow: hidden;
}
.capture-band__inner { max-width: 900px; margin: 0 auto; text-align: center; padding: 0 var(--space-7); }
.capture-band__eyebrow {
font-family: var(--font-display);
font-size: var(--fs-label);
font-weight: 600;
letter-spacing: var(--track-label);
text-transform: uppercase;
color: var(--on-primary-fixed);
opacity: 0.72;
margin-bottom: var(--space-4);
}
.capture-band__title {
font-family: var(--font-display);
font-size: 68px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--on-primary-fixed);
margin-bottom: var(--space-5);
}
.capture-band__sub {
font-family: var(--font-body);
font-size: 18px;
color: var(--on-primary-fixed);
opacity: 0.82;
max-width: 54ch;
margin: 0 auto var(--space-7);
}
.capture-band__form {
display: flex;
gap: var(--space-4);
max-width: 560px;
margin: 0 auto;
align-items: end;
}
.capture-band__field { flex: 1; text-align: left; }
.capture-band__label {
font-family: var(--font-display);
font-size: var(--fs-micro);
font-weight: 600;
letter-spacing: var(--track-label);
text-transform: uppercase;
color: var(--on-primary-fixed);
opacity: 0.75;
display: block;
margin-bottom: 8px;
}
.capture-band__input {
width: 100%;
padding: 10px 0;
background: transparent;
border: 0;
border-bottom: 2px solid rgba(42, 8, 0, 0.55);
font-family: var(--font-body);
font-size: 16px;
color: var(--on-primary-fixed);
outline: none;
}
.capture-band__input::placeholder { color: rgba(42, 8, 0, 0.45); }
.capture-band__input:focus { border-bottom-color: var(--on-primary-fixed); }
.capture-band__submit {
padding: 14px 26px;
background: transparent;
border: 1px solid rgba(42, 8, 0, 0.7);
color: var(--on-primary-fixed);
font-family: var(--font-display);
font-weight: 600;
font-size: 13px;
text-transform: uppercase;
letter-spacing: var(--track-cta);
}
.capture-band__submit:hover { background: rgba(42, 8, 0, 0.10); }
.capture-band__disclaimer {
margin-top: var(--space-5);
font-family: var(--font-display);
font-size: 11px;
color: var(--on-primary-fixed);
opacity: 0.6;
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* =========================================================
BLOCK: footer
========================================================= */
.footer { background: var(--bg-footer); padding: var(--space-9) 0 var(--space-6); }
.footer__grid {
display: grid;
grid-template-columns: 1.4fr repeat(4, 1fr);
gap: var(--space-7);
padding-bottom: var(--space-8);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.footer__brand {
font-family: var(--font-display);
font-weight: 700;
font-size: 22px;
letter-spacing: 0.18em;
color: var(--chrome-highlight);
margin-bottom: var(--space-4);
}
.footer__brand span { color: var(--ember); }
.footer__tag {
color: var(--chrome-dim);
font-size: 14px;
line-height: 1.55;
max-width: 30ch;
}
.footer__col-title {
font-family: var(--font-display);
font-size: var(--fs-label);
font-weight: 600;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--chrome-warm);
margin-bottom: var(--space-5);
}
.footer__list { display: grid; gap: var(--space-3); list-style: none; }
.footer__list a { color: var(--chrome-dim); font-size: 14px; }
.footer__list a:hover { color: var(--ember); }
.footer__bottom {
padding-top: var(--space-5);
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--font-display);
font-size: var(--fs-micro);
letter-spacing: var(--track-label);
text-transform: uppercase;
color: var(--chrome-dim);
}
.footer__legal { max-width: 62ch; text-transform: none; letter-spacing: 0.02em; font-family: var(--font-body); font-size: 12px; color: rgba(184, 176, 166, 0.6); }
/* =========================================================
RESPONSIVE — mobile ~390px
========================================================= */
@media (max-width: 960px) {
:root {
--fs-display: 60px;
--fs-h1: 48px;
--fs-h2: 38px;
--fs-h3: 28px;
--fs-h4: 22px;
}
.container, .container--narrow, .capture-band__inner { padding: 0 var(--space-5); }
.section { padding: var(--space-8) 0; }
.header__menu { display: none; }
.header__utility a:not(.cart) { display: none; }
.breadcrumbs__inner { flex-wrap: wrap; }
.character-hero { min-height: 100vh; }
.character-hero__inner { grid-template-columns: 1fr; gap: var(--space-7); padding-bottom: var(--space-8); }
.character-hero__descriptor { position: static; transform: none; margin-top: var(--space-6); white-space: normal; text-align: center; }
.bio-split { grid-template-columns: 1fr; }
.bio-split__media { min-height: 420px; aspect-ratio: 3/4; }
.bio-split__title { font-size: var(--fs-h2); letter-spacing: 0.8px; }
.phase-band { grid-template-columns: 1fr; gap: var(--space-6); padding: var(--space-7) 0; }
.phase-band__title { font-size: 44px; letter-spacing: 0.8px; }
.phase-band__hilts { grid-template-columns: 1fr; }
.signature-specs { grid-template-columns: 1fr; gap: var(--space-7); }
.signature-specs__title { font-size: var(--fs-h2); letter-spacing: 0.8px; }
.signature-specs__row { grid-template-columns: 1fr max-content; }
.signature-specs__leader { display: none; }
.product-hilt-grid { grid-template-columns: 1fr; }
.character-strip { grid-template-columns: 1fr; }
.testimonial-grid { grid-template-columns: 1fr; }
.collection-band__title { font-size: 40px; letter-spacing: 0.8px; }
.capture-band__title { font-size: 40px; letter-spacing: 0.8px; }
.capture-band__form { flex-direction: column; align-items: stretch; }
.footer__grid { grid-template-columns: 1fr 1fr; }
.footer__bottom { flex-direction: column; gap: var(--space-4); align-items: flex-start; }
}
/* 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 14002 canonical 12840:tf-newsletter-signup -- */
.container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 48px; }
/* =========================================================
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;
}
@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; }
}
/* -- 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 14000 canonical 12860:tf-testimonial -- */
/* =========================================================
BLOCK: testimonial-card
========================================================= */
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.testimonial-card {
position: relative;
padding: var(--space-7);
background: var(--bg-card-on-pattern);
backdrop-filter: blur(3px);
box-shadow: var(--panel-lift);
display: flex;
flex-direction: column;
}
.testimonial-card__rating {
display: flex;
gap: 4px;
margin-bottom: var(--space-5);
}
.testimonial-card__star {
width: 14px;
height: 14px;
background: var(--ember);
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
box-shadow: 0 0 6px rgba(255, 122, 46, 0.6);
}
.testimonial-card__quote {
font-family: var(--font-display);
font-size: 22px;
line-height: 1.35;
font-weight: 500;
color: var(--chrome-highlight);
margin-bottom: var(--space-6);
flex: 1;
}
.testimonial-card__quote::before { content: '“'; color: var(--ember); font-family: var(--font-display); margin-right: 4px; }
.testimonial-card__quote::after { content: '”'; color: var(--ember); font-family: var(--font-display); }
.testimonial-card__attribution {
padding-top: var(--space-5);
border-top: 1px dotted rgba(184, 176, 166, 0.30);
display: grid;
gap: var(--space-2);
}
.testimonial-card__author {
font-family: var(--font-display);
font-size: 14px;
font-weight: 600;
color: var(--chrome-warm);
text-transform: uppercase;
letter-spacing: var(--track-label);
}
.testimonial-card__sku {
font-family: var(--font-display);
font-size: var(--fs-micro);
letter-spacing: var(--track-label);
text-transform: uppercase;
color: var(--chrome-dim);
}
.testimonial-card__sku strong { color: var(--ember); font-weight: 600; }
/* -- Reconciled from family 14003 canonical 12860:tf-breadcrumb -- */
/* Utility container */
.container { max-width: 1440px; margin: 0 auto; padding: 0 var(--space-7); }
.container--narrow { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-7); }
/* =========================================================
BLOCK: breadcrumbs
========================================================= */
.breadcrumbs { background: var(--void); padding: 18px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
.breadcrumbs__inner {
display: flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-display);
font-size: var(--fs-label);
letter-spacing: var(--track-label);
text-transform: uppercase;
color: var(--chrome-dim);
}
.breadcrumbs__sep { color: rgba(184, 176, 166, 0.4); }
.breadcrumbs__current { color: var(--chrome-highlight); }
/* -- Reconciled from family 14002 canonical 12840:tf-newsletter-signup -- */
.container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 48px; }
@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; }
}
/* -- 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);
}
/* -- Reconciled from family 14013 canonical 12860:tf-section-eyebrow -- */
.section-head__eyebrow {
font-family: var(--font-display);
font-size: var(--fs-label);
font-weight: 500;
letter-spacing: var(--track-label);
text-transform: uppercase;
color: var(--text-meta);
display: inline-flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-5);
}
.section-head__eyebrow::before {
content: '';
width: 32px;
height: 1px;
background: var(--ember);
box-shadow: 0 0 8px rgba(255, 122, 46, 0.55);
}
</style>
</head>
<body>
<!-- =========================================================
Section 1 · Global chrome (header + promo bar)
========================================================= -->
<header class="header">
<div class="header__promo">
<div class="container header__promo-inner">
<span>Global delivery in 7–10 days</span>
<span>24-hour response · Named single point of contact</span>
<span>30-day money-back</span>
</div>
</div>
<div class="header__nav">
<div class="container header__nav-inner">
<a href="/" class="header__brand">ART<span class="header__brand-mark">·</span>SABERS</a>
<nav class="header__menu">
<a href="/lightsabers">Lightsabers</a>
<a href="/lightsabers/by-era">By Era</a>
<a href="/lightsabers/by-character">By Character</a>
<a href="/helmets">Helmets</a>
<a href="/parts">Parts & Accessories</a>
<a href="/deals">Offers</a>
</nav>
<div class="header__utility">
<a href="/support">Support</a>
<a href="/account">Account</a>
<a href="/cart" class="cart">Cart <span class="cart-count">02</span></a>
</div>
</div>
</div>
</header>
<!-- =========================================================
Section 2 · Breadcrumbs
========================================================= -->
<a id="tf-breadcrumb" data-tf-family="breadcrumb" style="display:contents"></a>
<nav class="breadcrumbs">
<div class="container breadcrumbs__inner">
<a href="/lightsabers">Lightsabers</a>
<span class="breadcrumbs__sep">/</span>
<a href="/lightsabers/by-era">By Era</a>
<span class="breadcrumbs__sep">/</span>
<span class="breadcrumbs__current">Prequel Era</span>
</div>
</nav>
<!-- =========================================================
Section 3 · Cinematic character hero (carbon, cinematic photograph)
========================================================= -->
<a id="tf-hero-atmospheric" data-tf-family="hero-atmospheric" style="display:contents"></a>
<section class="character-hero">
<div class="container character-hero__inner">
<div class="character-hero__copy">
<div class="character-hero__eyebrow">Padawan · Knight · Chosen One · Fallen</div>
<h1 class="character-hero__display">
<span>Anakin</span>
<span class="surname">Skywalker.</span>
</h1>
<p class="character-hero__sub">The boy from Tatooine who was going to bring balance. Six hilts, four canonical phases — the Chosen One arc rendered in machined chrome, sapphire blue, and lava-scorched steel.</p>
<div class="character-hero__ctas">
<a class="btn btn--primary" href="#anakin-hilts">Browse Anakin’s hilts <span class="btn__arrow">→</span></a>
<a class="btn btn--ghost" href="#anakin-arc">Read the arc</a>
</div>
</div>
</div>
<div class="character-hero__descriptor">
Six hilts <span>·</span> Four canonical phases <span>·</span> Padawan → Vader
</div>
</section>
<!-- =========================================================
Section 4 · Character bio (plain / void · editorial split)
========================================================= -->
<section class="section section--plain-void">
<a id="tf-workshop-split" data-tf-family="workshop-split" style="display:contents"></a>
<div class="container bio-split">
<div class="bio-split__media" role="img" aria-label="Anakin Skywalker character portrait" style="background-image: url('https://camcom.dev/generated_imgs/generated-2026-07-07T21-17-36-626Z-8m58ax.jpg'); background-size: cover; background-position: center top;">
<div class="bio-split__media-caption">Character portrait · Anakin Skywalker</div>
</div>
<div class="bio-split__prose">
<div>
<div class="bio-split__eyebrow">Character bio · Skywalker</div>
<h2 class="bio-split__title">A Padawan who never quite stayed one</h2>
</div>
<div class="bio-split__data">
<div class="bio-split__data-row">
<span class="bio-split__data-label">Affiliation</span>
<span class="bio-split__data-leader"></span>
<span class="bio-split__data-value">Jedi Order <span class="accent">·</span> Sith</span>
</div>
<div class="bio-split__data-row">
<span class="bio-split__data-label">Homeworld</span>
<span class="bio-split__data-leader"></span>
<span class="bio-split__data-value">Tatooine</span>
</div>
<div class="bio-split__data-row">
<span class="bio-split__data-label">Lightsaber style</span>
<span class="bio-split__data-leader"></span>
<span class="bio-split__data-value">Form V <span class="accent">·</span> Djem So (aggressive)</span>
</div>
</div>
<div class="bio-split__body">
<p>Anakin’s saber philosophy is aggressive downward strikes and pure kinetic weight — Form V, Djem So, tuned for a duelist who never lost his impatience for the reasoned strike. Every hilt in the arc reads the same underlying grip logic: ridged textured composite for a wet-palmed hand, a tuned emitter shroud that lets the blade hold at an aggressive downward angle without over-heat, and machined chrome from grip to pommel.</p>
<p>Across the six canonical hilts the signature holds. The pre-fall hilts are Coruscant chrome, sapphire blue. The fall hilt is the crossover object — scarred at the emitter from the Mustafar heat, blade run unstable. The Vader hilts are the same architecture in machined black, red blade tuned to the deep-thrum weight of an armoured strike. Same hand. Same shape.</p>
</div>
</div>
</div>
</section>
<!-- =========================================================
Section 5 · The arc (patterned Variant F · 4 phase bands)
========================================================= -->
<a id="tf-other-1" data-tf-family="other" style="display:contents"></a>
<section id="anakin-arc" class="section section--pattern-f">
<div class="container">
<header class="section-head">
<a id="tf-section-eyebrow" data-tf-family="section-eyebrow" style="display:contents"></a>
<div class="section-head__eyebrow">Characters · 04 of the Era</div>
<h2 class="section-head__title">Six hilts, four canonical phases</h2>
<p class="section-head__kicker">The Chosen One arc rendered as a chapter strip. Each phase adds a machining decision and pulls the hilt further from the temple that made it.</p>
</header>
<div class="phase-band-set">
<!-- Phase I · Padawan -->
<article class="phase-band phase-band--single">
<div class="phase-band__copy">
<span class="phase-band__index">I. Padawan</span>
<h3 class="phase-band__title">Padawan</h3>
<p class="phase-band__editorial">Anakin as Obi-Wan’s Padawan learner. The AOTC hilt is machined at the Naboo palace workshop — long, elegant, chrome ribbed. Untried.</p>
<div class="phase-band__meta">
<span>Hilts · <strong>1</strong></span>
<span>Episodes · <strong>I–II</strong></span>
</div>
</div>
<div class="phase-band__hilts">
<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>
</div>
</article>
<!-- Phase II · Knight -->
<article class="phase-band">
<div class="phase-band__copy">
<span class="phase-band__index">II. Knight</span>
<h3 class="phase-band__title">Knight</h3>
<p class="phase-band__editorial">The Council-era peak. EP3 shape lands — twin machined chrome grips, activation shroud tuned to Djem So’s aggressive downward strikes.</p>
<div class="phase-band__meta">
<span>Hilts · <strong>2</strong></span>
<span>Episode · <strong>III</strong></span>
</div>
</div>
<div class="phase-band__hilts">
<article class="phase-hilt phase-hilt--featured">
<div class="phase-hilt__media" style="background-image: url('https://nerdworks.uk/wp-content/uploads/2025/08/Anakin-Skywalker-EP3-1.jpg');">
<span class="phase-hilt__eyebrow-tag">Editor’s pick · EP3</span>
</div>
<div class="phase-hilt__body">
<span class="phase-hilt__series">Anakin · EP3 series</span>
<h4 class="phase-hilt__name">Anakin EP3 Duelling Grade</h4>
<div class="phase-hilt__foot">
<span class="phase-hilt__price">$459.99</span>
<a class="phase-hilt__cta" href="/product/anakin-ep3-duelling">Configure →</a>
</div>
</div>
</article>
<article class="phase-hilt">
<div class="phase-hilt__media" style="background-image: url('https://artsabers.com/wp-content/uploads/sites/10/2025/03/Anakin-Skywalker-EP3-Lightsaber-Proffie-2.2.jpg');">
<span class="phase-hilt__eyebrow-tag">ROTS variant</span>
</div>
<div class="phase-hilt__body">
<span class="phase-hilt__series">Anakin · EP3 series</span>
<h4 class="phase-hilt__name">Anakin ROTS Variant</h4>
<div class="phase-hilt__foot">
<span class="phase-hilt__price">$489.99</span>
<a class="phase-hilt__cta" href="/product/anakin-rots">Configure →</a>
</div>
</div>
</article>
</div>
</article>
<!-- Phase III · Fall -->
<article class="phase-band phase-band--single">
<div class="phase-band__copy">
<span class="phase-band__index">III. Fall</span>
<h3 class="phase-band__title">Fall</h3>
<p class="phase-band__editorial">Mustafar rewrites the hilt. Same chrome silhouette, now heat-scarred at the emitter, the blade destabilised — the crossover object between Anakin and Vader.</p>
<div class="phase-band__meta">
<span>Hilts · <strong>1</strong></span>
<span>Episode · <strong>III finale</strong></span>
</div>
</div>
<div class="phase-band__hilts">
<article class="phase-hilt">
<div class="phase-hilt__media" style="background-image: url('https://artsabers.com/wp-content/uploads/sites/10/2025/03/Anakin-Skywalker-EP3-SE-Duelling-Lightsaber-S-RGB.jpg');">
<span class="phase-hilt__eyebrow-tag">SE · Mustafar</span>
</div>
<div class="phase-hilt__body">
<span class="phase-hilt__series">Anakin · SE (Mustafar)</span>
<h4 class="phase-hilt__name">Anakin SE Fall Variant</h4>
<div class="phase-hilt__foot">
<span class="phase-hilt__price">$409.99</span>
<a class="phase-hilt__cta" href="/product/anakin-se-fall">Configure →</a>
</div>
</div>
</article>
</div>
</article>
<!-- Phase IV · Vader -->
<article class="phase-band">
<div class="phase-band__copy">
<span class="phase-band__index">IV. Vader</span>
<h3 class="phase-band__title">Vader</h3>
<p class="phase-band__editorial">The mask hilts. Machined black, ribbed grip, red blade tuned to the deep-thrum weight of an armoured strike. EP4 is elemental; EP6 is the last saber the character will hold.</p>
<div class="phase-band__meta">
<span>Hilts · <strong>2</strong></span>
<span>Episodes · <strong>IV–VI</strong></span>
</div>
</div>
<div class="phase-band__hilts">
<article class="phase-hilt">
<div class="phase-hilt__media" style="background-image: url('https://artsabers.com/wp-content/uploads/sites/10/2025/03/Darth-Vader-Lightsaber-Proffie-2.2.jpg');">
<span class="phase-hilt__eyebrow-tag">EP4 · ANH</span>
</div>
<div class="phase-hilt__body">
<span class="phase-hilt__series">Vader · EP4 series</span>
<h4 class="phase-hilt__name">Darth Vader EP4 ANH</h4>
<div class="phase-hilt__foot">
<span class="phase-hilt__price">$469.99</span>
<a class="phase-hilt__cta" href="/product/vader-ep4">Configure →</a>
</div>
</div>
</article>
<article class="phase-hilt">
<div class="phase-hilt__media" style="background-image: url('https://artsabers.com/wp-content/uploads/sites/10/2025/12/Darth_Vader_ROTJ_1.jpg');">
<span class="phase-hilt__eyebrow-tag">EP6 · ROTJ</span>
</div>
<div class="phase-hilt__body">
<span class="phase-hilt__series">Vader · EP6 series</span>
<h4 class="phase-hilt__name">Darth Vader EP6 ROTJ</h4>
<div class="phase-hilt__foot">
<span class="phase-hilt__price">$419.99</span>
<a class="phase-hilt__cta" href="/product/vader-ep6">Configure →</a>
</div>
</div>
</article>
</div>
</article>
</div>
</div>
</section>
<!-- =========================================================
Section 6 · Signature specs (plain / carbon · asymmetric spec-sheet)
========================================================= -->
<section class="section section--plain-carbon">
<a id="tf-product-tech-specs" data-tf-family="product-tech-specs" style="display:contents"></a>
<div class="container signature-specs">
<div class="signature-specs__title-block">
<div class="signature-specs__eyebrow">Signature specs · The Skywalker family</div>
<h2 class="signature-specs__title">What the Anakin hilts share</h2>
<p class="signature-specs__intro">Across four canonical phases and six approved hilts, the Skywalker family runs a single set of machining decisions. Learn to read one, and every hilt in the arc reads the same way.</p>
</div>
<div class="signature-specs__list">
<div class="signature-specs__row">
<span class="signature-specs__label">Emitter style</span>
<span class="signature-specs__leader"></span>
<span class="signature-specs__value">Cylindrical machined chrome</span>
</div>
<div class="signature-specs__row">
<span class="signature-specs__label">Grip material</span>
<span class="signature-specs__leader"></span>
<span class="signature-specs__value">Ridged textured composite</span>
</div>
<div class="signature-specs__row">
<span class="signature-specs__label">Signature blade colour</span>
<span class="signature-specs__leader"></span>
<span class="signature-specs__value">Sapphire blue <span class="accent">·</span> Red at fall</span>
</div>
<div class="signature-specs__row">
<span class="signature-specs__label">Preferred sound font</span>
<span class="signature-specs__leader"></span>
<span class="signature-specs__value">Duelling ignition v2</span>
</div>
<div class="signature-specs__row">
<span class="signature-specs__label">Preferred electronics</span>
<span class="signature-specs__leader"></span>
<span class="signature-specs__value">Xenopixel V3 (mid-arc)</span>
</div>
<div class="signature-specs__row" style="border-bottom: 0;">
<span class="signature-specs__label">Blade style</span>
<span class="signature-specs__leader"></span>
<span class="signature-specs__value">Solid <span class="accent">·</span> Unstable at fall</span>
</div>
</div>
</div>
</section>
<!-- =========================================================
Section 7 · All Anakin hilts (patterned Variant G · 3×2 grid)
========================================================= -->
<section id="anakin-hilts" class="section section--pattern-g">
<div class="container">
<header class="section-head">
<div class="section-head__eyebrow">The full arc · Six hilts</div>
<h2 class="section-head__title">All Anakin Skywalker hilts</h2>
<p class="section-head__kicker">Every Anakin hilt in the ARTSABERS catalogue — cross-shopped by phase, Saber Core tier, and blade colour.</p>
</header>
<a id="tf-product-grid" data-tf-family="product-grid" style="display:contents"></a>
<div class="product-hilt-grid">
<article class="product-hilt">
<div class="product-hilt__media" style="background-image: url('https://artsabers.com/wp-content/uploads/sites/10/2025/03/Anakin-Skywalker-EP2-Lightsaber-Proffie-2.2.jpg');">
<span class="product-hilt__eyebrow-tag">Padawan · EP2</span>
</div>
<div class="product-hilt__body">
<div class="product-hilt__meta-top"><span class="product-hilt__series">Anakin · EP2 series</span><span class="product-hilt__sku">SKU AS-AN-EP2-P</span></div>
<h3 class="product-hilt__name">Anakin Skywalker EP2</h3>
<div class="product-hilt__specs">
<div class="product-hilt__spec-row"><span class="product-hilt__spec-label">Saber Core</span><span class="product-hilt__spec-leader"></span><span class="product-hilt__spec-value">Proffie 2.2</span></div>
<div class="product-hilt__spec-row"><span class="product-hilt__spec-label">Blade</span><span class="product-hilt__spec-leader"></span><span class="product-hilt__spec-value">Pixel · 36″</span></div>
<div class="product-hilt__spec-row"><span class="product-hilt__spec-label">Duelling</span><span class="product-hilt__spec-leader"></span><span class="product-hilt__spec-value">Light</span></div>
<div class="product-hilt__spec-row"><span class="product-hilt__spec-label">Sound fonts</span><span class="product-hilt__spec-leader"></span><span class="product-hilt__spec-value">40+</span></div>
<div class="product-hilt__spec-row"><span class="product-hilt__spec-label">Bluetooth</span><span class="product-hilt__spec-leader"></span><span class="product-hilt__spec-value">XenoConfigurator</span></div>
</div>
<div class="product-hilt__foot">
<div class="product-hilt__price">$319.99</div>
<a class="product-hilt__cta" href="/product/anakin-ep2">Configure →</a>
</div>
</div>
</article>
<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-hilt">
<div class="product-hilt__media" style="background-image: url('https://artsabers.com/wp-content/uploads/sites/10/2025/03/Anakin-Skywalker-EP3-Lightsaber-Proffie-2.2.jpg');">
<span class="product-hilt__eyebrow-tag">Knight · ROTS</span>
</div>
<div class="product-hilt__body">
<div class="product-hilt__meta-top"><span class="product-hilt__series">Anakin · EP3 series</span><span class="product-hilt__sku">SKU AS-AN-ROTS</span></div>
<h3 class="product-hilt__name">Anakin ROTS Variant</h3>
<div class="product-hilt__specs">
<div class="product-hilt__spec-row"><span class="product-hilt__spec-label">Saber Core</span><span class="product-hilt__spec-leader"></span><span class="product-hilt__spec-value">Proffie 2.2</span></div>
<div class="product-hilt__spec-row"><span class="product-hilt__spec-label">Blade</span><span class="product-hilt__spec-leader"></span><span class="product-hilt__spec-value">Pixel · 36″</span></div>
<div class="product-hilt__spec-row"><span class="product-hilt__spec-label">Duelling</span><span class="product-hilt__spec-leader"></span><span class="product-hilt__spec-value">Heavy</span></div>
<div class="product-hilt__spec-row"><span class="product-hilt__spec-label">Sound fonts</span><span class="product-hilt__spec-leader"></span><span class="product-hilt__spec-value">40+</span></div>
<div class="product-hilt__spec-row"><span class="product-hilt__spec-label">Bluetooth</span><span class="product-hilt__spec-leader"></span><span class="product-hilt__spec-value">XenoConfigurator</span></div>
</div>
<div class="product-hilt__foot">
<div class="product-hilt__price">$489.99</div>
<a class="product-hilt__cta" href="/product/anakin-rots">Configure →</a>
</div>
</div>
</article>
<article class="product-hilt">
<div class="product-hilt__media" style="background-image: url('https://artsabers.com/wp-content/uploads/sites/10/2025/03/Anakin-Skywalker-EP3-SE-Duelling-Lightsaber-S-RGB.jpg');">
<span class="product-hilt__eyebrow-tag">Fall · Mustafar</span>
</div>
<div class="product-hilt__body">
<div class="product-hilt__meta-top"><span class="product-hilt__series">Anakin · SE (Mustafar)</span><span class="product-hilt__sku">SKU AS-AN-SE-F</span></div>
<h3 class="product-hilt__name">Anakin SE Fall Variant</h3>
<div class="product-hilt__specs">
<div class="product-hilt__spec-row"><span class="product-hilt__spec-label">Saber Core</span><span class="product-hilt__spec-leader"></span><span class="product-hilt__spec-value">S-RGB</span></div>
<div class="product-hilt__spec-row"><span class="product-hilt__spec-label">Blade</span><span class="product-hilt__spec-leader"></span><span class="product-hilt__spec-value">Baselit · 36″</span></div>
<div class="product-hilt__spec-row"><span class="product-hilt__spec-label">Duelling</span><span class="product-hilt__spec-leader"></span><span class="product-hilt__spec-value">Light</span></div>
<div class="product-hilt__spec-row"><span class="product-hilt__spec-label">Sound fonts</span><span class="product-hilt__spec-leader"></span><span class="product-hilt__spec-value">8</span></div>
<div class="product-hilt__spec-row"><span class="product-hilt__spec-label">Bluetooth</span><span class="product-hilt__spec-leader"></span><span class="product-hilt__spec-value">XenoConfigurator</span></div>
</div>
<div class="product-hilt__foot">
<div class="product-hilt__price">$409.99</div>
<a class="product-hilt__cta" href="/product/anakin-se-fall">Configure →</a>
</div>
</div>
</article>
<article class="product-hilt">
<div class="product-hilt__media" style="background-image: url('https://artsabers.com/wp-content/uploads/sites/10/2025/03/Darth-Vader-Lightsaber-Proffie-2.2.jpg');">
<span class="product-hilt__eyebrow-tag">Vader · EP4 ANH</span>
</div>
<div class="product-hilt__body">
<div class="product-hilt__meta-top"><span class="product-hilt__series">Vader · EP4 series</span><span class="product-hilt__sku">SKU AS-VA-EP4-A</span></div>
<h3 class="product-hilt__name">Darth Vader EP4 ANH</h3>
<div class="product-hilt__specs">
<div class="product-hilt__spec-row"><span class="product-hilt__spec-label">Saber Core</span><span class="product-hilt__spec-leader"></span><span class="product-hilt__spec-value">Proffie 2.2</span></div>
<div class="product-hilt__spec-row"><span class="product-hilt__spec-label">Blade</span><span class="product-hilt__spec-leader"></span><span class="product-hilt__spec-value">Pixel · 36″</span></div>
<div class="product-hilt__spec-row"><span class="product-hilt__spec-label">Duelling</span><span class="product-hilt__spec-leader"></span><span class="product-hilt__spec-value">Heavy</span></div>
<div class="product-hilt__spec-row"><span class="product-hilt__spec-label">Sound fonts</span><span class="product-hilt__spec-leader"></span><span class="product-hilt__spec-value">40+</span></div>
<div class="product-hilt__spec-row"><span class="product-hilt__spec-label">Bluetooth</span><span class="product-hilt__spec-leader"></span><span class="product-hilt__spec-value">XenoConfigurator</span></div>
</div>
<div class="product-hilt__foot">
<div class="product-hilt__price">$469.99</div>
<a class="product-hilt__cta" href="/product/vader-ep4">Configure →</a>
</div>
</div>
</article>
<article class="product-hilt">
<div class="product-hilt__media" style="background-image: url('https://artsabers.com/wp-content/uploads/sites/10/2025/12/Darth_Vader_ROTJ_1.jpg');">
<span class="product-hilt__eyebrow-tag">Vader · EP6 ROTJ</span>
</div>
<div class="product-hilt__body">
<div class="product-hilt__meta-top"><span class="product-hilt__series">Vader · EP6 series</span><span class="product-hilt__sku">SKU AS-VA-EP6-R</span></div>
<h3 class="product-hilt__name">Darth Vader EP6 ROTJ</h3>
<div class="product-hilt__specs">
<div class="product-hilt__spec-row"><span class="product-hilt__spec-label">Saber Core</span><span class="product-hilt__spec-leader"></span><span class="product-hilt__spec-value">Xenopixel V3</span></div>
<div class="product-hilt__spec-row"><span class="product-hilt__spec-label">Blade</span><span class="product-hilt__spec-leader"></span><span class="product-hilt__spec-value">Pixel · 36″</span></div>
<div class="product-hilt__spec-row"><span class="product-hilt__spec-label">Duelling</span><span class="product-hilt__spec-leader"></span><span class="product-hilt__spec-value">Heavy</span></div>
<div class="product-hilt__spec-row"><span class="product-hilt__spec-label">Sound fonts</span><span class="product-hilt__spec-leader"></span><span class="product-hilt__spec-value">34</span></div>
<div class="product-hilt__spec-row"><span class="product-hilt__spec-label">Bluetooth</span><span class="product-hilt__spec-leader"></span><span class="product-hilt__spec-value">XenoConfigurator</span></div>
</div>
<div class="product-hilt__foot">
<div class="product-hilt__price">$419.99</div>
<a class="product-hilt__cta" href="/product/vader-ep6">Configure →</a>
</div>
</div>
</article>
</div>
</div>
</section>
<!-- =========================================================
Section 8 · Related characters (plain / void · 3-across strip)
========================================================= -->
<section class="section section--plain-void">
<div class="container">
<header class="section-head">
<div class="section-head__eyebrow">In his orbit · Related characters</div>
<h2 class="section-head__title">Anakin’s inner circle</h2>
<p class="section-head__kicker">Three characters whose sabers share the arc — his master, his partner, his corruptor. Each deep-links to a full character catalogue.</p>
</header>
<a id="tf-category-browse-tiles-1" data-tf-family="category-browse-tiles" style="display:contents"></a>
<div class="character-strip">
<article class="character-tile">
<div class="character-tile__media" style="background-image: url('https://camcom.dev/generated_imgs/generated-2026-07-07T21-17-43-514Z-2qw94c.jpg'); background-size: cover; background-position: center top;">
<span class="character-tile__index">/ 01</span>
</div>
<div class="character-tile__body">
<h3 class="character-tile__name">Obi-Wan Kenobi</h3>
<p class="character-tile__arc">Master</p>
<p class="character-tile__relationship">Trained him from Naboo to the Council. Nine hilts across the Padawan-to-exile arc, Council chrome to soot.</p>
<a class="character-tile__cta" href="/lightsabers/by-character/obi-wan-kenobi">See Obi-Wan’s sabers</a>
</div>
</article>
<article class="character-tile">
<div class="character-tile__media" style="background-image: url('https://camcom.dev/generated_imgs/generated-2026-07-07T21-18-02-810Z-koiwwn.jpg'); background-size: cover; background-position: center top;">
<span class="character-tile__index">/ 02</span>
</div>
<div class="character-tile__body">
<h3 class="character-tile__name">Padmé Amidala</h3>
<p class="character-tile__arc">Partner</p>
<p class="character-tile__relationship">Queen, senator, wife. No lightsaber, but the collection carries her royal blasters and matched accessory grades.</p>
<a class="character-tile__cta" href="/collections/padme-amidala">See Padmé’s collection</a>
</div>
</article>
<article class="character-tile">
<div class="character-tile__media" style="background-image: url('https://camcom.dev/generated_imgs/generated-2026-07-07T21-17-56-682Z-50dhrs.jpg'); background-size: cover; background-position: center top;">
<span class="character-tile__index">/ 03</span>
</div>
<div class="character-tile__body">
<h3 class="character-tile__name">Emperor Palpatine</h3>
<p class="character-tile__arc">Corruptor</p>
<p class="character-tile__relationship">The Chancellor who never stopped pulling the strings. Three hilts, all Sith-red, all machined in silence.</p>
<a class="character-tile__cta" href="/lightsabers/by-character/palpatine">See Palpatine’s sabers</a>
</div>
</article>
</div>
</div>
</section>
<!-- =========================================================
Section 9 · Testimonials (patterned Variant F · 3-across)
========================================================= -->
<section class="section section--pattern-f">
<div class="container">
<header class="section-head">
<div class="section-head__eyebrow">From Anakin’s collectors · Verified reviews</div>
<h2 class="section-head__title">What Anakin owners say</h2>
<p class="section-head__kicker">Verified reviews from customers who bought a Skywalker or Vader hilt, filtered to the six SKUs above.</p>
</header>
<a id="tf-testimonial" data-tf-family="testimonial" style="display:contents"></a>
<div class="testimonial-grid">
<article class="testimonial-card">
<div class="testimonial-card__rating"><span class="testimonial-card__star"></span><span class="testimonial-card__star"></span><span class="testimonial-card__star"></span><span class="testimonial-card__star"></span><span class="testimonial-card__star"></span></div>
<p class="testimonial-card__quote">The chrome is the shape. Nothing else on the market gets the EP3 machining exactly right — this one does. Twelve days from order to door, sound-font swap took me a coffee to figure out.</p>
<div class="testimonial-card__attribution">
<span class="testimonial-card__author">Marco T. · Verona, IT</span>
<span class="testimonial-card__sku">Owns · <strong>Anakin EP3 Duelling · $459.99</strong></span>
</div>
</article>
<article class="testimonial-card">
<div class="testimonial-card__rating"><span class="testimonial-card__star"></span><span class="testimonial-card__star"></span><span class="testimonial-card__star"></span><span class="testimonial-card__star"></span><span class="testimonial-card__star"></span></div>
<p class="testimonial-card__quote">Wanted a Council-era Obi-Wan hilt with a Proffie board for the config depth — this is it. Chrome is honest, the balance is right, and their support answered a firmware question inside the promised window.</p>
<div class="testimonial-card__attribution">
<span class="testimonial-card__author">Rachel B. · Melbourne, AU</span>
<span class="testimonial-card__sku">Owns · <strong>Obi-Wan EP3 Duelling · $519.99</strong></span>
</div>
</article>
<article class="testimonial-card">
<div class="testimonial-card__rating"><span class="testimonial-card__star"></span><span class="testimonial-card__star"></span><span class="testimonial-card__star"></span><span class="testimonial-card__star"></span><span class="testimonial-card__star"></span></div>
<p class="testimonial-card__quote">The double-blade twist-lock is confidence-inspiring — no wobble under heavy duelling. Runs the two Cores fully independent, which is what I wanted. Nine days to Auckland, packaging was serious.</p>
<div class="testimonial-card__attribution">
<span class="testimonial-card__author">Kai H. · Auckland, NZ</span>
<span class="testimonial-card__sku">Owns · <strong>Darth Maul Double-Bladed · $539.99</strong></span>
</div>
</article>
</div>
</div>
</section>
<!-- =========================================================
Section 10 · Full Anakin collection band (plain / carbon)
========================================================= -->
<a id="tf-inpage-cta" data-tf-family="inpage-cta" style="display:contents"></a>
<section class="section section--plain-carbon collection-band">
<div class="container">
<span class="collection-band__eyebrow">The full Anakin catalogue</span>
<h2 class="collection-band__title">Six hilts across <span class="accent">four</span> canonical phases</h2>
<p class="collection-band__sub">
<span>Padawan</span>·<span>Knight</span>·<span>Fall</span>·<span>Vader</span>
</p>
<div class="collection-band__cta-row">
<a class="btn btn--ghost" href="/lightsabers/by-character/anakin-skywalker/all">See every Anakin variant</a>
</div>
</div>
</section>
<!-- Panel-seam glow marking the join into the capture band (deliberate — see styleguide) -->
<div class="panel-seam"></div>
<!-- =========================================================
Section 11 · Warm capture band (full orange ombre)
========================================================= -->
<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>
<!-- =========================================================
Section 12 · Footer (carbon)
========================================================= -->
<footer class="footer">
<div class="container">
<div class="footer__grid">
<div>
<div class="footer__brand">ART<span>·</span>SABERS</div>
<p class="footer__tag">From factory floor to your door. Hundreds of sabers, one trusted retailer — every character, every Saber Core, every duelling grade.</p>
</div>
<div>
<h4 class="footer__col-title">Lightsabers</h4>
<ul class="footer__list">
<li><a href="/lightsabers/by-era">By Era</a></li>
<li><a href="/lightsabers/by-character">By Character</a></li>
<li><a href="/lightsabers/by-saber-core">By Saber Core</a></li>
<li><a href="/lightsabers/exclusives">ARTSABERS Exclusive</a></li>
<li><a href="/lightsabers/under-100">Budget under $100</a></li>
</ul>
</div>
<div>
<h4 class="footer__col-title">Support</h4>
<ul class="footer__list">
<li><a href="/support">Contact support</a></li>
<li><a href="/shipping">Shipping · 7–10 days</a></li>
<li><a href="/returns">30-day returns</a></li>
<li><a href="/warranty">Warranty</a></li>
<li><a href="/faqs">FAQs</a></li>
</ul>
</div>
<div>
<h4 class="footer__col-title">Brand</h4>
<ul class="footer__list">
<li><a href="/about">Our story</a></li>
<li><a href="/journal">The Archive</a></li>
<li><a href="/press">Press</a></li>
<li><a href="/affiliates">Affiliates</a></li>
</ul>
</div>
<div>
<h4 class="footer__col-title">Regions</h4>
<ul class="footer__list">
<li><a href="/us">United States</a></li>
<li><a href="/ca">Canada</a></li>
<li><a href="/au">Australia</a></li>
<li><a href="/nz">New Zealand</a></li>
<li><a href="https://saber66.com">UK & EU · Saber 66 →</a></li>
</ul>
</div>
</div>
<div class="footer__bottom">
<span>© 2026 ARTSABERS · Part of the Nerdworks family</span>
<p class="footer__legal">ARTSABERS is a fan-led retailer of replica lightsabers and cosplay props. We are not affiliated with or endorsed by Lucasfilm Ltd. or The Walt Disney Company. All character names are the property of their respective owners.</p>
</div>
</div>
</footer>
</body>
</html>