/wire-template.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prequel Era 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&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: 'Space Grotesk', system-ui, sans-serif;
--font-body: 'Manrope', 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 and at footer */
.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 {
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);
}
.section-head__title {
font-size: var(--fs-h2);
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--track-hero);
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); }
.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); }
/* =========================================================
BLOCK: era-hero (cinematic 100vh)
========================================================= */
.era-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-16-32-191Z-8wzgmx.jpg') center/cover no-repeat;
color: var(--chrome-highlight);
display: flex;
align-items: flex-end;
overflow: hidden;
}
.era-hero__inner {
width: 100%;
padding-bottom: var(--space-10);
display: grid;
grid-template-columns: 1.35fr 0.65fr;
gap: var(--space-9);
align-items: end;
}
.era-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);
}
.era-hero__eyebrow::before {
content: '';
width: 44px;
height: 1px;
background: var(--ember);
box-shadow: 0 0 8px rgba(255, 122, 46, 0.75);
}
.era-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);
}
.era-hero__display span { display: block; }
.era-hero__display .lightsabers { color: var(--chrome-warm); }
.era-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: 46ch;
}
.era-hero__ctas { margin-top: var(--space-7); display: flex; gap: var(--space-4); flex-wrap: wrap; }
.era-hero__telemetry {
padding: var(--space-5) var(--space-6);
background: rgba(15, 15, 15, 0.72);
backdrop-filter: blur(4px);
box-shadow: var(--panel-lift);
}
.era-hero__telemetry-title {
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);
margin-bottom: var(--space-5);
}
.era-hero__telemetry-rows { display: grid; gap: var(--space-3); }
.era-hero__telemetry-row {
display: grid;
grid-template-columns: 1fr auto;
align-items: baseline;
gap: var(--space-3);
font-family: var(--font-display);
font-size: 13px;
border-bottom: 1px dotted rgba(184, 176, 166, 0.25);
padding-bottom: var(--space-2);
}
.era-hero__telemetry-row:last-child { border: 0; padding-bottom: 0; }
.era-hero__telemetry-label { color: var(--chrome-dim); text-transform: uppercase; letter-spacing: var(--track-label); font-size: 11px; }
.era-hero__telemetry-value { color: var(--chrome-warm); font-variant-numeric: tabular-nums; }
.era-hero__telemetry-value--accent { color: var(--ember); font-weight: 600; font-size: 15px; }
.era-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;
}
.era-hero__descriptor span { color: var(--chrome-warm); margin: 0 8px; }
/* =========================================================
BLOCK: story-split (editorial split — photo left, prose right)
========================================================= */
.story-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: stretch; }
.story-split__media {
min-height: 640px;
background:
linear-gradient(180deg, rgba(6, 6, 6, 0.20) 0%, rgba(6, 6, 6, 0.55) 100%),
#060606 url('https://camcom.dev/generated_imgs/generated-2026-07-07T21-18-35-584Z-b4bq4l.jpg') center/cover no-repeat;
box-shadow: var(--panel-lift);
position: relative;
}
.story-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;
}
.story-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);
}
.story-split__prose { padding: var(--space-6) 0; }
.story-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-5);
}
.story-split__title {
font-size: var(--fs-h2);
text-transform: uppercase;
letter-spacing: var(--track-hero);
margin-bottom: var(--space-6);
max-width: 14ch;
}
.story-split__body p { font-size: var(--fs-body-lg); color: var(--text-body); margin-bottom: var(--space-5); line-height: 1.65; }
.story-split__body p:last-child { margin-bottom: 0; }
.story-split__pull {
margin-top: var(--space-7);
padding-left: var(--space-5);
border-left: 2px solid var(--ember);
box-shadow: -2px 0 20px -6px rgba(255, 122, 46, 0.45);
}
.story-split__pull-quote {
font-family: var(--font-display);
font-weight: 500;
font-size: 22px;
line-height: 1.35;
color: var(--chrome-highlight);
font-style: italic;
}
.story-split__pull-attribution {
margin-top: 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);
}
/* =========================================================
BLOCK: character-strip (4-across compact character tiles)
========================================================= */
.character-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.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;
}
.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 42%, 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-5); position: relative; }
.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(--chrome-dim);
margin-bottom: var(--space-4);
}
.character-tile__cta {
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;
}
.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: product-hilt-card (3-across large product cards)
========================================================= */
.product-hilt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.product-hilt {
position: relative;
background: var(--bg-card-on-plain);
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: 4/3;
background: #0F0F0F center/cover no-repeat;
position: relative;
overflow: hidden;
}
.product-hilt__media::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 60%, rgba(6, 6, 6, 0.55) 100%);
}
.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__price-old {
display: block;
font-family: var(--font-display);
font-size: 12px;
color: var(--chrome-dim);
text-decoration: line-through;
font-weight: 500;
margin-bottom: 2px;
}
.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: duality-split (Jedi vs Sith)
========================================================= */
.duality-split { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.duality-panel {
position: relative;
min-height: 620px;
padding: var(--space-8);
display: flex;
flex-direction: column;
justify-content: flex-end;
overflow: hidden;
box-shadow: var(--panel-lift);
}
.duality-panel--jedi {
background:
linear-gradient(180deg, rgba(6, 6, 6, 0.35) 0%, rgba(6, 6, 6, 0.85) 100%),
radial-gradient(circle at 30% 40%, rgba(70, 140, 220, 0.30) 0%, transparent 55%),
#060606 url('https://camcom.dev/generated_imgs/generated-2026-07-07T21-16-45-206Z-3wmmlg.jpg') center/cover no-repeat;
}
.duality-panel--sith {
background:
linear-gradient(180deg, rgba(6, 6, 6, 0.35) 0%, rgba(6, 6, 6, 0.85) 100%),
radial-gradient(circle at 70% 40%, rgba(200, 40, 30, 0.30) 0%, transparent 55%),
#060606 url('https://camcom.dev/generated_imgs/generated-2026-07-07T21-18-42-578Z-mrotrh.jpg') center/cover no-repeat;
}
.duality-panel__index {
position: absolute;
top: var(--space-6);
left: var(--space-8);
font-family: var(--font-display);
font-size: var(--fs-label);
letter-spacing: var(--track-label);
color: var(--ember);
text-transform: uppercase;
}
.duality-panel__index-num { color: var(--chrome-dim); margin-right: 10px; }
.duality-panel__display {
font-family: var(--font-display);
font-size: 96px;
font-weight: 700;
line-height: 0.95;
letter-spacing: var(--track-hero);
text-transform: uppercase;
color: var(--chrome-highlight);
margin-bottom: var(--space-4);
}
.duality-panel__descriptor {
font-family: var(--font-display);
font-size: 15px;
font-weight: 500;
letter-spacing: var(--track-label);
text-transform: uppercase;
color: var(--chrome-warm);
margin-bottom: var(--space-6);
}
.duality-panel__descriptor .sep { color: var(--ember); margin: 0 12px; }
.duality-panel__body {
font-family: var(--font-body);
font-size: var(--fs-body-lg);
color: var(--chrome-warm);
line-height: 1.55;
max-width: 44ch;
margin-bottom: var(--space-6);
}
.duality-panel__meta {
font-family: var(--font-display);
font-size: var(--fs-label);
letter-spacing: var(--track-label);
text-transform: uppercase;
color: var(--chrome-dim);
margin-bottom: var(--space-6);
display: flex;
gap: var(--space-5);
}
.duality-panel__meta span strong { color: var(--ember); font-weight: 600; }
/* =========================================================
BLOCK: character-grid (2×3 deeper deep-link tiles)
========================================================= */
.character-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.character-grid__tile {
position: relative;
aspect-ratio: 4/5;
background: var(--bg-card-tile-on-pattern);
backdrop-filter: blur(3px);
box-shadow: var(--panel-lift);
overflow: hidden;
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.character-grid__tile:hover { transform: translateY(-4px); box-shadow: var(--panel-lift-hover); }
.character-grid__media {
position: absolute;
inset: 0;
background: #060606 center/cover no-repeat;
}
.character-grid__media::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 40%, rgba(6, 6, 6, 0.75) 78%, rgba(6, 6, 6, 0.95) 100%);
}
.character-grid__body {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: var(--space-6);
z-index: 2;
}
.character-grid__index {
font-family: var(--font-display);
font-size: var(--fs-label);
letter-spacing: var(--track-label);
text-transform: uppercase;
color: var(--ember);
display: block;
margin-bottom: var(--space-3);
}
.character-grid__name {
font-family: var(--font-display);
font-size: 34px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--chrome-highlight);
line-height: 1;
margin-bottom: var(--space-3);
}
.character-grid__meta {
font-family: var(--font-body);
font-size: 15px;
color: var(--chrome-warm);
margin-bottom: var(--space-4);
}
.character-grid__cta {
font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--track-cta);
color: var(--ember);
display: inline-flex;
align-items: center;
gap: 10px;
}
.character-grid__cta::after {
content: '→';
transition: transform 0.25s ease;
}
.character-grid__tile:hover .character-grid__cta::after { transform: translateX(4px); }
/* =========================================================
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: 76px;
line-height: 1;
letter-spacing: var(--track-hero);
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: 15px;
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: 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; }
/* =========================================================
BLOCK: era-tile-strip (3-across related eras)
========================================================= */
.era-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.era-strip__tile {
position: relative;
aspect-ratio: 3/2;
background: var(--bg-card-on-plain);
box-shadow: var(--panel-lift);
overflow: hidden;
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.era-strip__tile:hover { transform: translateY(-4px); box-shadow: var(--panel-lift-hover); }
.era-strip__media { position: absolute; inset: 0; background: #060606 center/cover no-repeat; }
.era-strip__media::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(6, 6, 6, 0.10) 0%, rgba(6, 6, 6, 0.85) 100%);
}
.era-strip__body { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-6); z-index: 2; }
.era-strip__episodes {
font-family: var(--font-display);
font-size: var(--fs-label);
letter-spacing: var(--track-label);
text-transform: uppercase;
color: var(--ember);
display: block;
margin-bottom: var(--space-3);
}
.era-strip__name {
font-family: var(--font-display);
font-size: 34px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--chrome-highlight);
line-height: 1;
margin-bottom: var(--space-3);
}
.era-strip__phrase {
font-family: var(--font-body);
font-size: 15px;
color: var(--chrome-warm);
max-width: 40ch;
}
/* =========================================================
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.06em;
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: 52ch;
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: var(--track-label);
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: 64px;
--fs-h1: 48px;
--fs-h2: 40px;
--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; }
.era-hero { min-height: 100vh; }
.era-hero__inner { grid-template-columns: 1fr; gap: var(--space-7); padding-bottom: var(--space-8); }
.era-hero__descriptor { position: static; transform: none; margin-top: var(--space-6); white-space: normal; text-align: center; }
.story-split { grid-template-columns: 1fr; }
.story-split__media { min-height: 340px; aspect-ratio: 4/3; }
.character-strip { grid-template-columns: 1fr 1fr; }
.product-hilt-grid { grid-template-columns: 1fr; }
.duality-split { grid-template-columns: 1fr; gap: 0; }
.duality-panel { min-height: 460px; padding: var(--space-6); }
.duality-panel__display { font-size: 64px; }
.character-grid { grid-template-columns: 1fr 1fr; }
.collection-band__title { font-size: 40px; }
.testimonial-grid { grid-template-columns: 1fr; }
.era-strip { grid-template-columns: 1fr; }
.capture-band__title { font-size: 40px; }
.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; }
}
</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
========================================================= -->
<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 era hero (carbon, plain-ish photograph)
========================================================= -->
<section class="era-hero">
<div class="container era-hero__inner">
<div class="era-hero__copy">
<div class="era-hero__eyebrow">By Era · Episodes I–III</div>
<h1 class="era-hero__display">
<span>Prequel Era</span>
<span class="lightsabers">Lightsabers.</span>
</h1>
<p class="era-hero__sub">The saga's technological golden age — machined chrome, elegant lines, before the empire's utility took over.</p>
<div class="era-hero__ctas">
<a class="btn btn--primary" href="/lightsabers/by-era/prequel-era/shop">Browse the collection <span class="btn__arrow">→</span></a>
<a class="btn btn--ghost" href="#era-story">Read the era story</a>
</div>
</div>
<aside class="era-hero__telemetry" aria-label="Era readout">
<div class="era-hero__telemetry-title">Era Readout</div>
<div class="era-hero__telemetry-rows">
<div class="era-hero__telemetry-row"><span class="era-hero__telemetry-label">Episodes</span><span class="era-hero__telemetry-value">I · II · III</span></div>
<div class="era-hero__telemetry-row"><span class="era-hero__telemetry-label">Hilts catalogued</span><span class="era-hero__telemetry-value era-hero__telemetry-value--accent">84</span></div>
<div class="era-hero__telemetry-row"><span class="era-hero__telemetry-label">Named characters</span><span class="era-hero__telemetry-value">12</span></div>
<div class="era-hero__telemetry-row"><span class="era-hero__telemetry-label">Saber Core tiers</span><span class="era-hero__telemetry-value">4</span></div>
<div class="era-hero__telemetry-row"><span class="era-hero__telemetry-label">Duelling grades</span><span class="era-hero__telemetry-value">Light · Heavy</span></div>
<div class="era-hero__telemetry-row"><span class="era-hero__telemetry-label">Price range</span><span class="era-hero__telemetry-value">$189 – $725</span></div>
</div>
</aside>
</div>
<div class="era-hero__descriptor">
Episodes I–III <span>·</span> 84 hilts <span>·</span> Machined chrome, high-fidelity signatures
</div>
</section>
<!-- =========================================================
Section 4 · The story of the Prequel Era (plain / void)
========================================================= -->
<section id="era-story" class="section section--plain-void">
<div class="container story-split">
<div class="story-split__media" role="img" aria-label="Photograph brief placeholder — Jedi Temple silhouette against the Coruscant skyline at dusk">
<div class="story-split__media-caption">Photograph brief · Jedi Temple silhouette, Coruscant twilight</div>
</div>
<div class="story-split__prose">
<div class="story-split__eyebrow">The Story of the Era</div>
<h2 class="story-split__title">A design language of machined chrome</h2>
<div class="story-split__body">
<p>The Prequel Era is the saga at its most engineered. Before soot, before rebellion, before the empire's utility took over — this is the golden age of the Order at its full extension across the galaxy, and the hilts read that way. Long, elegant handgrips. Ribbed activation shrouds and tuned emitters. Chrome so highly finished it almost mirrors the temple architecture that produced it.</p>
<p>These are Coruscant sabers. They were forged in an age when the Council still met openly in the tower's central chamber, when Padawans still bunked in the temple dormitories, and when the electronics inside the hilt — the Saber Core, in ARTSABERS terms — could be assumed to serve for a lifetime. Every hilt in this era is a functional artefact of a working Order at scale. There is no hurry in the machining. There is no shortcut in the finish.</p>
<p>For the collector, this is where fidelity matters most. The Council-era hilts have to hit the shape exactly — a chrome step in the wrong place turns Anakin's EP3 into a fan mould. Our factory partners tool these hilts for direct one-to-one geometry off the reference material and every one goes through a machined-chrome finishing pass before the Saber Core drops in.</p>
</div>
<div class="story-split__pull">
<p class="story-split__pull-quote">"The prequel hilts are the moment the Order's silhouette was still whole. You buy them for the shape, and the shape has to be right."</p>
<p class="story-split__pull-attribution">Emil P. · ARTSABERS Curation</p>
</div>
</div>
</div>
</section>
<!-- =========================================================
Section 5 · Characters of the Prequel Era (patterned Variant F)
========================================================= -->
<section class="section section--pattern-f">
<div class="container">
<header class="section-head">
<div class="section-head__eyebrow">Characters · 04 of the Era</div>
<h2 class="section-head__title">Faces of the Prequel Era</h2>
<p class="section-head__kicker">The four hilts collectors return to first — a Padawan on his path to fall, his Master rising to the Council, the Sith apprentice sent to test them, and the Chancellor who never stopped pulling the strings.</p>
</header>
<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-36-626Z-8m58ax.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">Anakin Skywalker</h3>
<p class="character-tile__arc">Padawan → Knight → Chosen One</p>
<a class="character-tile__cta" href="/lightsabers/by-character/anakin-skywalker">See Anakin'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-17-43-514Z-2qw94c.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">Obi-Wan Kenobi</h3>
<p class="character-tile__arc">Padawan → Master → Council</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-17-49-997Z-mjg30x.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">Darth Maul</h3>
<p class="character-tile__arc">Assassin → Fall → Return</p>
<a class="character-tile__cta" href="/lightsabers/by-character/darth-maul">See Maul'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-17-56-682Z-50dhrs.jpg'); background-size: cover; background-position: center top;">
<span class="character-tile__index">/ 04</span>
</div>
<div class="character-tile__body">
<h3 class="character-tile__name">Emperor Palpatine</h3>
<p class="character-tile__arc">Senator → Chancellor → Emperor</p>
<a class="character-tile__cta" href="/lightsabers/by-character/palpatine">See Palpatine's sabers</a>
</div>
</article>
</div>
</div>
</section>
<!-- =========================================================
Section 6 · Featured hilts of the era (plain / carbon)
========================================================= -->
<section class="section section--plain-carbon">
<div class="container">
<header class="section-head">
<div class="section-head__eyebrow">Featured Hilts · Curated Three</div>
<h2 class="section-head__title">The hilts that define the era</h2>
<p class="section-head__kicker">Three era-defining hilts, curated from the wider 84-hilt Prequel collection. Anakin's EP3 anchors the row — the shape most-searched, most-photographed, most-collected. Obi-Wan's EP3 sits alongside as its structural mirror. Maul's double-blade breaks the silhouette.</p>
</header>
<div class="product-hilt-grid">
<article class="product-hilt product-hilt--featured">
<div class="product-hilt__media" style="background-image: url('https://nerdworks.uk/wp-content/uploads/Anakin-Skywalker-EP3-1.jpg');">
<span class="product-hilt__eyebrow-tag">Editor's Pick · EP3</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-EP3-D</span></div>
<h3 class="product-hilt__name">Anakin EP3 Duelling Grade</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">$459.99</div>
<a class="product-hilt__cta" href="/product/anakin-ep3-duelling">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/Obi-Wan-Ep3-V2-Lightsaber-Xenopixel-V3.jpg'); background-size: contain; background-position: center; background-repeat: no-repeat; background-color: #0a0a0a;">
<span class="product-hilt__eyebrow-tag">EP3 series</span>
</div>
<div class="product-hilt__body">
<div class="product-hilt__meta-top"><span class="product-hilt__series">Obi-Wan · EP3 series</span><span class="product-hilt__sku">SKU AS-OB-EP3-D</span></div>
<h3 class="product-hilt__name">Obi-Wan EP3 Duelling</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">$519.99</div>
<a class="product-hilt__cta" href="/product/obi-wan-ep3-duelling">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/Weathered-Darth-Maul-Double-Bladed-Lightsaber-Proffie-2.2.jpg'); background-size: contain; background-position: center; background-repeat: no-repeat; background-color: #0a0a0a;">
<span class="product-hilt__eyebrow-tag">EP1 · Double-blade</span>
</div>
<div class="product-hilt__body">
<div class="product-hilt__meta-top"><span class="product-hilt__series">Darth Maul · EP1 series</span><span class="product-hilt__sku">SKU AS-MA-EP1-D2</span></div>
<h3 class="product-hilt__name">Darth Maul Double-Bladed</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 · dual</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 · 2 × 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">Detach</span><span class="product-hilt__spec-leader"></span><span class="product-hilt__spec-value">Twist-lock centre</span></div>
</div>
<div class="product-hilt__foot">
<div class="product-hilt__price">$539.99</div>
<a class="product-hilt__cta" href="/product/darth-maul-double">Configure →</a>
</div>
</div>
</article>
</div>
</div>
</section>
<!-- =========================================================
Section 7 · Jedi vs Sith duality (plain / void)
========================================================= -->
<section class="section section--plain-void">
<div class="container">
<header class="section-head">
<div class="section-head__eyebrow">Duality · Two paths through the era</div>
<h2 class="section-head__title">Jedi & Sith</h2>
<p class="section-head__kicker">Every prequel hilt reads to one side or the other. Chrome and courage, or void and dominion. Pick a path — the collection re-orders itself accordingly.</p>
</header>
<div class="duality-split">
<article class="duality-panel duality-panel--jedi">
<span class="duality-panel__index"><span class="duality-panel__index-num">/ 01</span>Guardians of the Republic</span>
<h3 class="duality-panel__display">Jedi</h3>
<p class="duality-panel__descriptor">Order <span class="sep">·</span> Guardians <span class="sep">·</span> Balance</p>
<p class="duality-panel__body">The Council hilts. Anakin, Obi-Wan, Mace Windu, Ki-Adi-Mundi, Plo Koon and thirty-eight more — chrome, ribbed shrouds, blue and green blades that read as the last steady light in a galaxy already tipping.</p>
<p class="duality-panel__meta">
<span>Hilts · <strong>52</strong></span>
<span>Characters · <strong>17</strong></span>
<span>Blade colours · <strong>Blue · Green</strong></span>
</p>
<div>
<a class="btn btn--ghost" href="/lightsabers/faction/jedi">Browse the Jedi</a>
</div>
</article>
<article class="duality-panel duality-panel--sith">
<span class="duality-panel__index"><span class="duality-panel__index-num">/ 02</span>Rule of Two</span>
<h3 class="duality-panel__display">Sith</h3>
<p class="duality-panel__descriptor">Shadow <span class="sep">·</span> Dominion <span class="sep">·</span> Fall</p>
<p class="duality-panel__body">Two masters, two apprentices, one long plan. Maul and Dooku, Sidious and the boy who would become Vader — hilts machined in silence, red blades made to look like they were forged from the heat still inside the metal.</p>
<p class="duality-panel__meta">
<span>Hilts · <strong>32</strong></span>
<span>Characters · <strong>5</strong></span>
<span>Blade colours · <strong>Red</strong></span>
</p>
<div>
<a class="btn btn--ghost-ember" href="/lightsabers/faction/sith">Browse the Sith</a>
</div>
</article>
</div>
</div>
</section>
<!-- =========================================================
Section 8 · Explore by character (patterned Variant G)
========================================================= -->
<section class="section section--pattern-g">
<div class="container">
<header class="section-head">
<div class="section-head__eyebrow">Deeper · Character catalogues</div>
<h2 class="section-head__title">Explore by character</h2>
<p class="section-head__kicker">Six deep-links into per-character catalogues — each with every hilt, every Saber Core tier, every duelling grade the character has appeared with.</p>
</header>
<div class="character-grid">
<a class="character-grid__tile" href="/lightsabers/by-character/anakin-skywalker">
<div class="character-grid__media" 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>
<div class="character-grid__body">
<span class="character-grid__index">/ 01</span>
<h3 class="character-grid__name">Anakin<br>Skywalker</h3>
<p class="character-grid__meta">7 hilts · Padawan → Chosen One</p>
<span class="character-grid__cta">See the catalogue</span>
</div>
</a>
<a class="character-grid__tile" href="/lightsabers/by-character/obi-wan-kenobi">
<div class="character-grid__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;"></div>
<div class="character-grid__body">
<span class="character-grid__index">/ 02</span>
<h3 class="character-grid__name">Obi-Wan<br>Kenobi</h3>
<p class="character-grid__meta">9 hilts · Padawan → Master → Council</p>
<span class="character-grid__cta">See the catalogue</span>
</div>
</a>
<a class="character-grid__tile" href="/lightsabers/by-character/darth-maul">
<div class="character-grid__media" style="background-image: url('https://camcom.dev/generated_imgs/generated-2026-07-07T21-17-49-997Z-mjg30x.jpg'); background-size: cover; background-position: center top;"></div>
<div class="character-grid__body">
<span class="character-grid__index">/ 03</span>
<h3 class="character-grid__name">Darth<br>Maul</h3>
<p class="character-grid__meta">4 hilts · Assassin → Fall → Return</p>
<span class="character-grid__cta">See the catalogue</span>
</div>
</a>
<a class="character-grid__tile" href="/lightsabers/by-character/palpatine">
<div class="character-grid__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;"></div>
<div class="character-grid__body">
<span class="character-grid__index">/ 04</span>
<h3 class="character-grid__name">Emperor<br>Palpatine</h3>
<p class="character-grid__meta">3 hilts · Senator → Emperor</p>
<span class="character-grid__cta">See the catalogue</span>
</div>
</a>
<a class="character-grid__tile" href="/lightsabers/by-character/padme-amidala">
<div class="character-grid__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;"></div>
<div class="character-grid__body">
<span class="character-grid__index">/ 05</span>
<h3 class="character-grid__name">Padmé<br>Amidala</h3>
<p class="character-grid__meta">2 hilts · Queen → Senator</p>
<span class="character-grid__cta">See the catalogue</span>
</div>
</a>
<a class="character-grid__tile" href="/lightsabers/by-character/yoda">
<div class="character-grid__media" style="background-image: url('https://camcom.dev/generated_imgs/generated-2026-07-07T21-18-22-722Z-2e8kze.jpg'); background-size: cover; background-position: center top;"></div>
<div class="character-grid__body">
<span class="character-grid__index">/ 06</span>
<h3 class="character-grid__name">Master<br>Yoda</h3>
<p class="character-grid__meta">2 hilts · Grand Master · Shoto</p>
<span class="character-grid__cta">See the catalogue</span>
</div>
</a>
</div>
</div>
</section>
<!-- =========================================================
Section 9 · Full collection band (plain / carbon)
========================================================= -->
<section class="section section--plain-carbon collection-band">
<div class="container">
<span class="collection-band__eyebrow">The Full Prequel Era</span>
<h2 class="collection-band__title">See all Prequel Era sabers — <span class="accent">84 hilts</span> across all four electronics tiers</h2>
<p class="collection-band__sub">
<span>S-RGB</span>·<span>RGB-X</span>·<span>SNV4 Pro</span>·<span>Xenopixel V3</span>·<span>Proffie 2.2</span>
</p>
<div class="collection-band__cta-row">
<a class="btn btn--primary" href="/shop?era=prequel">Enter the collection <span class="btn__arrow">→</span></a>
<a class="btn btn--ghost" href="/lightsabers/by-era/prequel-era/spec-sheet">Compare Saber Cores</a>
</div>
</div>
</section>
<!-- =========================================================
Section 10 · Prequel-era testimonials (patterned Variant F)
========================================================= -->
<section class="section section--pattern-f">
<div class="container">
<header class="section-head">
<div class="section-head__eyebrow">From the archive · Prequel Era owners</div>
<h2 class="section-head__title">The reviews</h2>
<p class="section-head__kicker">Verified customer reviews from prequel-era hilt owners, filtered to the three featured SKUs above.</p>
</header>
<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 11 · Related eras (plain / void)
========================================================= -->
<section class="section section--plain-void">
<div class="container">
<header class="section-head">
<div class="section-head__eyebrow">Adjacent eras · Continue the journey</div>
<h2 class="section-head__title">Move through the saga</h2>
<p class="section-head__kicker">Cross from the golden age into the empire, sideways into the Clone Wars animated canon, or forward into the sequels.</p>
</header>
<div class="era-strip">
<a class="era-strip__tile" href="/lightsabers/by-era/original-trilogy">
<div class="era-strip__media" style="background-image: url('https://camcom.dev/generated_imgs/generated-2026-07-07T21-16-51-198Z-vqr2ch.jpg'); background-size: cover; background-position: center;"></div>
<div class="era-strip__body">
<span class="era-strip__episodes">Episodes IV–VI</span>
<h3 class="era-strip__name">Original Trilogy</h3>
<p class="era-strip__phrase">The empire's utility takes over — soot, wear, weaponised silhouettes.</p>
</div>
</a>
<a class="era-strip__tile" href="/lightsabers/by-era/the-clone-wars">
<div class="era-strip__media" style="background-image: url('https://camcom.dev/generated_imgs/generated-2026-07-07T21-19-52-384Z-x67ric.jpg'); background-size: cover; background-position: center;"></div>
<div class="era-strip__body">
<span class="era-strip__episodes">Animated · 2008-14</span>
<h3 class="era-strip__name">The Clone Wars</h3>
<p class="era-strip__phrase">Ahsoka's white blades, Rex's utility, the war-worn Council hilts.</p>
</div>
</a>
<a class="era-strip__tile" href="/lightsabers/by-era/sequel-era">
<div class="era-strip__media" style="background-image: url('https://camcom.dev/generated_imgs/generated-2026-07-07T21-18-58-002Z-8skkwk.jpg'); background-size: cover; background-position: center;"></div>
<div class="era-strip__body">
<span class="era-strip__episodes">Episodes VII–IX</span>
<h3 class="era-strip__name">Sequel Era</h3>
<p class="era-strip__phrase">Kylo's cross-guard, Rey's yellow, and the last of the Skywalker hilts.</p>
</div>
</a>
</div>
</div>
</section>
<!-- Panel-seam glow marking the join into the capture band (deliberate — see styleguide) -->
<div class="panel-seam"></div>
<!-- =========================================================
Section 12 · Warm capture band (full orange ombre)
========================================================= -->
<section class="capture-band">
<div class="capture-band__inner">
<span class="capture-band__eyebrow">The Newsletter · Fan-to-fan</span>
<h2 class="capture-band__title">From factory floor to your inbox.</h2>
<p class="capture-band__sub">New hilt drops, era retrospectives like this one, and honest post-order updates on the sabers moving through the factory. No urgency theatre, no review-begging.</p>
<form class="capture-band__form" action="/subscribe" method="post">
<div class="capture-band__field">
<label class="capture-band__label" for="capture-email">Email address</label>
<input class="capture-band__input" id="capture-email" name="email" type="email" placeholder="you@yourgalaxy.com" required>
</div>
<button class="capture-band__submit" type="submit">Enlist →</button>
</form>
<p class="capture-band__disclaimer">Unsubscribe any time · we never share your email · one drop per week, tops</p>
</div>
</section>
<!-- =========================================================
Section 13 · 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>