<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Anakin Skywalker EP3 Duelling Grade — 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@400;500;600;700&display=swap" rel="stylesheet">
<style>
/* ============================================================
ARTSABERS — Kyber Hull v4.1.0 — Product Page (BBAS2)
============================================================ */
: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 */
--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 — reflected light */
--chrome-highlight: #FAFAFA;
--chrome-glint: #E8E4DD;
--chrome-warm: #F5F0E8;
--chrome-dim: #B8B0A6;
/* Semantic surface roles */
--bg-page: var(--carbon);
--bg-card: var(--hull-panel);
--bg-card-lift: var(--hull-panel-lift);
--bg-card-recessed: var(--hull-panel-dark);
/* Text roles */
--text-body: var(--chrome-warm);
--text-heading: var(--chrome-highlight);
--text-dim: var(--chrome-dim);
--text-on-ember: var(--on-primary-fixed);
/* Type */
--font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
--font-body: "Manrope", ui-sans-serif, system-ui, sans-serif;
/* Spacing scale */
--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;
/* Panel slab primitives */
--panel-inset-top: inset 0 1px 0 rgba(250,250,250,0.14);
--panel-inset-bottom: inset 0 -1px 0 rgba(0,0,0,0.85);
--panel-lift: inset 0 1px 0 rgba(250,250,250,0.08), 0 8px 24px -8px rgba(0,0,0,0.9);
--card-lift: inset 0 1px 0 rgba(250,250,250,0.16), 0 10px 28px -10px rgba(0,0,0,0.95);
--card-lift-hover: inset 0 1px 0 rgba(250,250,250,0.22), 0 16px 40px -12px 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.60), 0 0 24px rgba(255,122,46,0.50);
}
/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.55;
color: var(--text-body);
background: var(--bg-page);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
/* Construction-grid substrate — behind everything */
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background-image:
linear-gradient(to right, rgba(96,96,96,0.055) 1px, transparent 1px),
linear-gradient(to bottom, rgba(96,96,96,0.055) 1px, transparent 1px);
background-size: 72px 72px;
}
main, header, footer, .sticky-atc { position: relative; z-index: 1; }
/* ---------- Section (panel slab) ---------- */
.section {
position: relative;
padding: var(--space-9) 0;
box-shadow: var(--panel-inset-top), var(--panel-inset-bottom);
}
.section::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(180deg, rgba(250,250,250,0.025) 0%, transparent 8%),
linear-gradient(0deg, rgba(0,0,0,0.30) 0%, transparent 12%);
}
.section--carbon { background: var(--carbon); }
.section--void { background: var(--void); }
.section--charcoal { background: var(--charcoal); }
.section--charcoal-warm { background: var(--charcoal-warm); }
/* Corner rivets — four bolt-heads per section */
.section > .rivet {
position: absolute;
width: 10px;
height: 10px;
background: rgba(20,20,20,0.98);
box-shadow:
inset 0 1px 0 rgba(250,250,250,0.30),
inset 0 -1px 0 rgba(0,0,0,0.90),
0 1px 2px rgba(0,0,0,0.60);
z-index: 2;
}
.section > .rivet--tl { top: 16px; left: 16px; }
.section > .rivet--tr { top: 16px; right: 16px; }
.section > .rivet--bl { bottom: 16px; left: 16px; }
.section > .rivet--br { bottom: 16px; right: 16px; }
.container {
max-width: 1360px;
margin: 0 auto;
padding: 0 var(--space-7);
position: relative;
z-index: 1;
}
/* ---------- Panel seam glow ---------- */
.panel-seam {
position: relative;
height: 2px;
background: linear-gradient(90deg,
rgba(255,122,46,0.25) 0%,
rgba(255,122,46,0.85) 50%,
rgba(255,122,46,0.25) 100%);
box-shadow:
0 -14px 40px rgba(255,122,46,0.35),
0 14px 40px rgba(255,122,46,0.35);
z-index: 2;
}
.panel-seam::before {
content: "";
position: absolute;
left: 0; right: 0;
top: -10px;
height: 10px;
background: linear-gradient(180deg, rgba(0,0,0,0.90) 0%, transparent 100%);
pointer-events: none;
}
.panel-seam::after {
content: "";
position: absolute;
left: 0; right: 0;
bottom: -10px;
height: 10px;
background: linear-gradient(0deg, rgba(0,0,0,0.90) 0%, transparent 100%);
pointer-events: none;
}
/* ---------- Type utilities ---------- */
.eyebrow {
font-family: var(--font-display);
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--ember);
}
.label-sm {
font-family: var(--font-display);
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--text-dim);
}
.h1 {
font-family: var(--font-display);
font-size: 60px;
font-weight: 700;
line-height: 1.02;
letter-spacing: 0.02em;
color: var(--text-heading);
text-transform: uppercase;
}
.h2 {
font-family: var(--font-display);
font-size: 42px;
font-weight: 700;
line-height: 1.08;
letter-spacing: 0.08em;
color: var(--text-heading);
text-transform: uppercase;
}
.h3 {
font-family: var(--font-display);
font-size: 22px;
font-weight: 600;
line-height: 1.15;
letter-spacing: 0.03em;
color: var(--text-heading);
}
.section-index {
font-family: var(--font-display);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.20em;
color: var(--ember);
text-transform: uppercase;
}
.section-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-6);
margin-bottom: var(--space-7);
padding-bottom: var(--space-5);
position: relative;
}
.section-head::after {
content: "";
position: absolute;
left: 0; right: 40%;
bottom: 0;
height: 1px;
background: linear-gradient(90deg, rgba(255,122,46,0.55), transparent);
}
.section-head__title { max-width: 60%; }
.section-head__meta { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.20em; text-transform: uppercase; color: var(--text-dim); }
/* ---------- CTAs ---------- */
.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: 18px 32px;
font-family: var(--font-display);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--on-primary-fixed);
background: linear-gradient(180deg,
var(--ember-glow) 0%,
var(--ember) 50%,
var(--ember-deep) 100%);
box-shadow:
var(--ember-glow-sm),
inset 0 1px 0 rgba(255,255,255,0.35),
inset 0 -1px 0 rgba(90,26,0,0.65);
transition: box-shadow 0.2s ease;
}
.btn-primary:hover { box-shadow: var(--ember-glow-md), inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 0 rgba(90,26,0,0.65); }
.btn-primary--lg { padding: 22px 40px; font-size: 15px; }
.btn-primary--block { display: flex; width: 100%; }
.btn-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 16px 28px;
font-family: var(--font-display);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--chrome-warm);
background: transparent;
box-shadow: inset 0 0 0 1px rgba(62,62,62,0.55);
transition: background 0.2s ease, box-shadow 0.2s ease;
}
.btn-ghost:hover {
background: var(--hull-panel-lift);
box-shadow: inset 0 0 0 1px rgba(62,62,62,0.85), inset 0 1px 0 rgba(250,250,250,0.14);
}
/* ---------- Global chrome — nav + promo ---------- */
.promo-bar {
background: var(--carbon);
padding: 10px 0;
box-shadow: inset 0 -1px 0 rgba(0,0,0,0.85);
position: relative;
}
.promo-bar__inner {
max-width: 1360px;
margin: 0 auto;
padding: 0 var(--space-7);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-6);
}
.promo-bar__text {
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--chrome-dim);
}
.promo-bar__text em { color: var(--ember); font-style: normal; }
.promo-bar__aux { display: flex; gap: var(--space-6); font-family: var(--font-display); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--chrome-dim); }
.nav {
background: var(--carbon);
padding: var(--space-5) 0;
box-shadow: var(--panel-inset-top), var(--panel-inset-bottom);
position: relative;
}
.nav__inner {
max-width: 1360px;
margin: 0 auto;
padding: 0 var(--space-7);
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: var(--space-6);
}
.nav__brand {
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
letter-spacing: 0.20em;
color: var(--chrome-highlight);
text-transform: uppercase;
}
.nav__brand span { color: var(--ember); }
.nav__links {
display: flex;
gap: var(--space-6);
list-style: none;
justify-content: center;
}
.nav__links a {
font-family: var(--font-display);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--chrome-warm);
}
.nav__links a:hover { color: var(--ember); }
.nav__utility { display: flex; justify-content: flex-end; gap: var(--space-5); }
.nav__utility a {
font-family: var(--font-display);
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--chrome-dim);
}
.nav__utility a strong { color: var(--chrome-warm); font-weight: 600; }
/* ---------- Trust bar (HUD row) ---------- */
.trust-bar {
background: var(--charcoal);
padding: 12px 0;
box-shadow: var(--panel-inset-top), var(--panel-inset-bottom);
}
.trust-bar__inner {
max-width: 1360px;
margin: 0 auto;
padding: 0 var(--space-7);
display: flex;
justify-content: center;
gap: var(--space-4);
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--chrome-dim);
}
.trust-bar__inner span:not(.trust-bar__sep) { color: var(--chrome-warm); }
.trust-bar__sep { color: var(--ember); }
/* ---------- Breadcrumbs ---------- */
.breadcrumbs {
background: var(--carbon);
padding: var(--space-4) 0;
box-shadow: inset 0 -1px 0 rgba(0,0,0,0.85);
}
.breadcrumbs__inner {
max-width: 1360px;
margin: 0 auto;
padding: 0 var(--space-7);
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--chrome-dim);
}
.breadcrumbs__inner a { color: var(--chrome-dim); }
.breadcrumbs__inner a:hover { color: var(--ember); }
.breadcrumbs__sep { color: var(--outline); margin: 0 var(--space-3); }
.breadcrumbs__current { color: var(--chrome-warm); }
/* ============================================================
HERO — specimen dossier
============================================================ */
.hero {
position: relative;
padding: var(--space-8) 0 var(--space-10);
background: var(--carbon);
box-shadow: var(--panel-inset-top), var(--panel-inset-bottom);
}
.hero::after {
content: "";
position: absolute;
left: 0; right: 0;
bottom: 0;
height: 120px;
background: radial-gradient(ellipse at 50% 100%, rgba(255,122,46,0.30) 0%, transparent 65%);
pointer-events: none;
}
.hero__inner {
max-width: 1360px;
margin: 0 auto;
padding: 0 var(--space-7);
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: var(--space-8);
position: relative;
z-index: 1;
}
/* Gallery block */
.gallery {
display: grid;
grid-template-columns: 96px 1fr;
gap: var(--space-4);
}
.gallery__thumbs {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.gallery__thumb {
aspect-ratio: 1 / 1;
background: var(--hull-panel);
background-size: cover;
background-position: center;
box-shadow: var(--card-lift);
position: relative;
cursor: pointer;
}
.gallery__thumb::before, .gallery__thumb::after {
content: "";
position: absolute;
width: 6px;
height: 6px;
top: 4px;
background: rgba(20,20,20,0.98);
box-shadow: inset 0 1px 0 rgba(250,250,250,0.30);
}
.gallery__thumb::before { left: 4px; }
.gallery__thumb::after { right: 4px; }
.gallery__thumb--active { box-shadow: var(--ember-hot-rim); }
.gallery__main {
aspect-ratio: 4 / 5;
background: var(--hull-panel);
background-size: cover;
background-position: center;
box-shadow: var(--card-lift);
position: relative;
overflow: hidden;
}
.gallery__main::before, .gallery__main::after {
content: "";
position: absolute;
width: 8px;
height: 8px;
top: 6px;
background: rgba(20,20,20,0.98);
box-shadow: inset 0 1px 0 rgba(250,250,250,0.30);
}
.gallery__main::before { left: 6px; }
.gallery__main::after { right: 6px; }
.gallery__callout {
position: absolute;
bottom: var(--space-5);
left: var(--space-5);
background: rgba(6,6,6,0.75);
padding: var(--space-2) var(--space-3);
font-family: var(--font-display);
font-size: 10px;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--ember);
box-shadow: inset 0 1px 0 rgba(250,250,250,0.14);
}
/* Dossier column */
.dossier { display: flex; flex-direction: column; gap: var(--space-5); }
.dossier__eyebrow {
display: flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ember);
}
.dossier__eyebrow span { color: var(--chrome-dim); }
.dossier__title {
font-family: var(--font-display);
font-size: 56px;
font-weight: 700;
line-height: 0.96;
letter-spacing: 0.02em;
color: var(--chrome-highlight);
text-transform: uppercase;
}
.dossier__subtitle {
font-family: var(--font-body);
font-size: 15px;
color: var(--chrome-dim);
max-width: 46ch;
}
.rating-row {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) 0;
box-shadow: inset 0 -1px 0 rgba(62,62,62,0.35);
}
.stars {
display: inline-flex;
gap: 2px;
color: var(--ember);
font-size: 14px;
letter-spacing: 2px;
}
.rating-row__count { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--chrome-dim); }
.price-stack { display: flex; flex-direction: column; gap: 6px; }
.price-stack__amount {
font-family: var(--font-display);
font-variant-numeric: tabular-nums;
font-size: 40px;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--ember);
line-height: 1;
}
.price-stack__bnpl {
font-family: var(--font-body);
font-size: 13px;
color: var(--chrome-dim);
}
.price-stack__bnpl strong { color: var(--chrome-warm); font-weight: 600; }
.variant-block { display: flex; flex-direction: column; gap: var(--space-3); }
.variant-block__label {
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--chrome-dim);
display: flex;
justify-content: space-between;
}
.variant-block__label a { color: var(--ember); }
.electronics-swatches { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.swatch {
padding: 10px 14px;
font-family: var(--font-display);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--chrome-warm);
background: var(--hull-panel);
box-shadow: inset 0 0 0 1px rgba(62,62,62,0.55), inset 0 1px 0 rgba(250,250,250,0.08);
cursor: pointer;
}
.swatch--active {
background: var(--hull-panel-lift);
box-shadow: var(--ember-hot-rim);
color: var(--chrome-highlight);
}
.blade-lengths { display: flex; gap: var(--space-2); }
.length-btn {
flex: 1;
padding: 14px;
font-family: var(--font-display);
font-size: 13px;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--chrome-warm);
background: var(--hull-panel);
box-shadow: inset 0 0 0 1px rgba(62,62,62,0.55), inset 0 1px 0 rgba(250,250,250,0.08);
cursor: pointer;
}
.length-btn--active {
background: var(--hull-panel-lift);
color: var(--chrome-highlight);
box-shadow: var(--ember-hot-rim);
}
.stock-row {
display: flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-display);
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--chrome-warm);
}
.stock-dot {
width: 8px;
height: 8px;
background: var(--ember);
box-shadow: 0 0 12px rgba(255,122,46,0.75);
}
.atc-row {
display: grid;
grid-template-columns: 120px 1fr;
gap: var(--space-3);
margin-top: var(--space-3);
}
.qty {
display: grid;
grid-template-columns: 1fr 40px 1fr;
align-items: center;
background: var(--hull-panel);
box-shadow: inset 0 0 0 1px rgba(62,62,62,0.55), inset 0 1px 0 rgba(250,250,250,0.08);
}
.qty button {
font-family: var(--font-display);
font-size: 18px;
color: var(--chrome-warm);
padding: 16px 0;
}
.qty__value {
text-align: center;
font-family: var(--font-display);
font-variant-numeric: tabular-nums;
font-size: 16px;
color: var(--chrome-highlight);
}
.trust-strip {
margin-top: var(--space-5);
padding-top: var(--space-5);
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-4);
box-shadow: inset 0 1px 0 rgba(62,62,62,0.35);
}
.trust-strip__item {
font-family: var(--font-display);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--chrome-dim);
line-height: 1.4;
}
.trust-strip__item strong { display: block; color: var(--chrome-warm); font-weight: 600; margin-bottom: 4px; }
/* ============================================================
STICKY ATC
============================================================ */
.sticky-atc {
position: fixed;
left: 0; right: 0; bottom: 0;
background: var(--hull-panel-lift);
box-shadow:
inset 0 1px 0 rgba(250,250,250,0.16),
inset 0 -1px 0 rgba(0,0,0,0.85),
0 -12px 32px -8px rgba(0,0,0,0.85);
padding: var(--space-4) 0;
z-index: 40;
transform: translateY(100%);
transition: transform 0.3s ease;
}
.sticky-atc--shown { transform: translateY(0); }
.sticky-atc::before {
content: "";
position: absolute;
top: -2px; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg,
rgba(255,122,46,0.25) 0%,
rgba(255,122,46,0.85) 50%,
rgba(255,122,46,0.25) 100%);
box-shadow: 0 -12px 30px rgba(255,122,46,0.35);
}
.sticky-atc__inner {
max-width: 1360px;
margin: 0 auto;
padding: 0 var(--space-7);
display: grid;
grid-template-columns: 56px 1fr auto auto;
gap: var(--space-4);
align-items: center;
}
.sticky-atc__thumb {
width: 56px; height: 56px;
background: var(--hull-panel);
background-size: cover;
background-position: center;
box-shadow: inset 0 1px 0 rgba(250,250,250,0.16), 0 4px 12px rgba(0,0,0,0.6);
}
.sticky-atc__title { font-family: var(--font-display); font-size: 14px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--chrome-highlight); }
.sticky-atc__meta { font-family: var(--font-display); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--chrome-dim); margin-top: 2px; }
.sticky-atc__price { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 700; color: var(--ember); }
/* ============================================================
Whats in the Box
============================================================ */
.box-manifest { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.box-item {
background: var(--hull-panel);
padding: var(--space-5);
box-shadow: var(--card-lift);
position: relative;
}
.box-item::before, .box-item::after {
content: "";
position: absolute;
width: 6px; height: 6px;
top: 6px;
background: rgba(20,20,20,0.98);
box-shadow: inset 0 1px 0 rgba(250,250,250,0.30);
}
.box-item::before { left: 6px; }
.box-item::after { right: 6px; }
.box-item__stage {
aspect-ratio: 4 / 3;
background: var(--hull-panel-dark);
box-shadow: inset 0 1px 0 rgba(0,0,0,0.75), inset 0 0 0 1px rgba(0,0,0,0.6);
padding: var(--space-4);
margin-bottom: var(--space-4);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-family: var(--font-body);
font-style: italic;
font-size: 11px;
line-height: 1.45;
color: var(--chrome-dim);
position: relative;
overflow: hidden;
}
.box-item__stage::after {
content: "PHOTOGRAPH BRIEF";
position: absolute;
top: 8px; left: 10px;
font-family: var(--font-display);
font-style: normal;
font-size: 9px;
letter-spacing: 0.24em;
color: var(--ember);
}
.box-item__idx {
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.18em;
color: var(--ember);
margin-bottom: 6px;
}
.box-item__title { font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: 0.04em; color: var(--chrome-highlight); text-transform: uppercase; margin-bottom: 6px; }
.box-item__caption { font-size: 13px; color: var(--chrome-dim); line-height: 1.45; }
/* ============================================================
PRODUCT DESCRIPTION (editorial split)
============================================================ */
.editorial-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-8);
align-items: center;
}
.editorial-photo {
aspect-ratio: 4 / 5;
background: var(--hull-panel-dark);
box-shadow: var(--card-lift);
padding: var(--space-6);
display: flex;
align-items: flex-end;
font-family: var(--font-body);
font-style: italic;
font-size: 13px;
color: var(--chrome-dim);
line-height: 1.6;
position: relative;
}
.editorial-photo::before {
content: "PHOTOGRAPH BRIEF";
position: absolute;
top: var(--space-4); left: var(--space-4);
font-family: var(--font-display);
font-style: normal;
font-size: 10px;
letter-spacing: 0.24em;
color: var(--ember);
}
.editorial-photo::after {
content: "";
position: absolute;
right: -2px; top: 20%; bottom: 20%;
width: 2px;
background: linear-gradient(180deg, transparent, rgba(255,122,46,0.65), transparent);
box-shadow: 0 0 24px rgba(255,122,46,0.55);
}
.editorial-body { display: flex; flex-direction: column; gap: var(--space-5); }
.editorial-body__eyebrow { color: var(--ember); font-family: var(--font-display); font-size: 12px; letter-spacing: 0.20em; text-transform: uppercase; }
.editorial-body__title { font-family: var(--font-display); font-size: 40px; font-weight: 700; line-height: 1.05; letter-spacing: 0.02em; color: var(--chrome-highlight); text-transform: uppercase; }
.editorial-body p { font-size: 15px; color: var(--chrome-warm); line-height: 1.65; }
.editorial-body__signoff { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.20em; text-transform: uppercase; color: var(--chrome-dim); padding-top: var(--space-4); box-shadow: inset 0 1px 0 rgba(62,62,62,0.35); }
.editorial-body__signoff strong { color: var(--ember); font-weight: 600; }
/* ============================================================
TECHNICAL SPECIFICATIONS — the "vault"
============================================================ */
.spec-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-8);
background: var(--hull-panel-dark);
padding: var(--space-8);
box-shadow: var(--card-lift);
position: relative;
}
.spec-grid::before, .spec-grid::after {
content: "";
position: absolute;
width: 8px; height: 8px;
top: 8px;
background: rgba(20,20,20,0.98);
box-shadow: inset 0 1px 0 rgba(250,250,250,0.30);
}
.spec-grid::before { left: 8px; }
.spec-grid::after { right: 8px; }
.spec-column__title {
font-family: var(--font-display);
font-size: 12px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ember);
padding-bottom: var(--space-4);
margin-bottom: var(--space-5);
box-shadow: inset 0 -1px 0 rgba(255,122,46,0.45);
}
.spec-row {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: baseline;
gap: var(--space-3);
padding: var(--space-4) 0;
box-shadow: inset 0 -1px 0 rgba(62,62,62,0.30);
}
.spec-row__label {
font-family: var(--font-body);
font-size: 12px;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--chrome-dim);
}
.spec-row__leader {
border-bottom: 1px dotted rgba(62,62,62,0.65);
min-width: 40px;
transform: translateY(-4px);
}
.spec-row__value {
font-family: var(--font-display);
font-variant-numeric: tabular-nums;
font-size: 15px;
font-weight: 500;
color: var(--chrome-warm);
letter-spacing: 0.03em;
}
.spec-row__value--accent { color: var(--ember); font-size: 17px; font-weight: 600; }
/* ============================================================
BLADE LENGTH GUIDE
============================================================ */
.length-guide {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
}
.length-guide__item { text-align: center; }
.length-guide__stage {
aspect-ratio: 3 / 5;
background: var(--hull-panel-dark);
box-shadow: var(--card-lift);
position: relative;
padding: var(--space-4);
display: flex;
flex-direction: column;
justify-content: flex-end;
overflow: hidden;
margin-bottom: var(--space-4);
}
.length-guide__stage::before {
content: "PHOTOGRAPH BRIEF";
position: absolute;
top: var(--space-3); left: var(--space-3);
font-family: var(--font-display);
font-size: 9px;
letter-spacing: 0.24em;
color: var(--ember);
}
.length-guide__caption {
font-family: var(--font-body);
font-style: italic;
font-size: 11px;
line-height: 1.5;
color: var(--chrome-dim);
text-align: left;
}
.length-guide__blade {
position: absolute;
left: 50%;
bottom: 20%;
transform: translateX(-50%);
width: 4px;
background: linear-gradient(180deg, rgba(255,179,71,0.9) 0%, rgba(255,122,46,0.75) 100%);
box-shadow: 0 0 24px rgba(255,122,46,0.65);
}
.length-guide__item:nth-child(1) .length-guide__blade { height: 42%; }
.length-guide__item:nth-child(2) .length-guide__blade { height: 55%; }
.length-guide__item:nth-child(3) .length-guide__blade { height: 66%; }
.length-guide__label {
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--chrome-highlight);
margin-bottom: 4px;
}
.length-guide__grade {
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ember);
margin-bottom: 4px;
}
.length-guide__price {
font-family: var(--font-display);
font-variant-numeric: tabular-nums;
font-size: 13px;
letter-spacing: 0.06em;
color: var(--chrome-dim);
}
.length-guide__caption-line {
text-align: center;
font-family: var(--font-display);
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--chrome-dim);
margin-top: var(--space-6);
}
/* ============================================================
ELECTRONICS COMPARISON
============================================================ */
.electronics {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--space-4);
}
.tier-card {
background: var(--hull-panel);
box-shadow: var(--card-lift);
padding: var(--space-5);
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.tier-card::before, .tier-card::after {
content: "";
position: absolute;
width: 6px; height: 6px;
top: 6px;
background: rgba(20,20,20,0.98);
box-shadow: inset 0 1px 0 rgba(250,250,250,0.30);
}
.tier-card::before { left: 6px; }
.tier-card::after { right: 6px; }
.tier-card--current { box-shadow: var(--ember-hot-rim); background: var(--hull-panel-lift); }
.tier-card__ribbon {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
padding: 6px 14px;
background: linear-gradient(180deg, var(--ember-glow), var(--ember), var(--ember-deep));
color: var(--on-primary-fixed);
font-family: var(--font-display);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.20em;
text-transform: uppercase;
box-shadow: var(--ember-glow-sm);
}
.tier-card__stage {
aspect-ratio: 4 / 3;
background: var(--hull-panel-dark);
background-size: cover;
background-position: center;
box-shadow: inset 0 1px 0 rgba(0,0,0,0.7);
}
.tier-card__idx { font-family: var(--font-display); font-size: 10px; letter-spacing: 0.20em; color: var(--ember); }
.tier-card__name { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: 0.04em; color: var(--chrome-highlight); text-transform: uppercase; }
.tier-card__price { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: 13px; letter-spacing: 0.06em; color: var(--chrome-dim); }
.tier-card__price strong { color: var(--ember); font-weight: 600; }
.tier-card__specs { display: flex; flex-direction: column; gap: 6px; }
.tier-card__spec {
font-family: var(--font-body);
font-size: 12px;
color: var(--chrome-warm);
line-height: 1.4;
padding-left: var(--space-3);
position: relative;
}
.tier-card__spec::before {
content: "";
position: absolute;
left: 0; top: 8px;
width: 4px; height: 4px;
background: var(--ember);
box-shadow: 0 0 6px rgba(255,122,46,0.65);
}
.electronics__callout {
margin-top: var(--space-7);
padding: var(--space-6);
background: var(--hull-panel-dark);
box-shadow: var(--card-lift);
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-5);
align-items: center;
position: relative;
}
.electronics__callout::before, .electronics__callout::after {
content: "";
position: absolute;
width: 6px; height: 6px;
top: 6px;
background: rgba(20,20,20,0.98);
box-shadow: inset 0 1px 0 rgba(250,250,250,0.30);
}
.electronics__callout::before { left: 6px; }
.electronics__callout::after { right: 6px; }
.electronics__callout-badge {
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--ember);
padding: var(--space-3) var(--space-4);
box-shadow: inset 0 0 0 1px rgba(255,122,46,0.55);
}
.electronics__callout-copy { font-size: 14px; color: var(--chrome-warm); line-height: 1.55; }
.electronics__callout-copy strong { color: var(--chrome-highlight); font-family: var(--font-display); letter-spacing: 0.04em; }
/* ============================================================
PRODUCT DEMO VIDEO
============================================================ */
.video-wrap {
aspect-ratio: 16 / 9;
background: var(--hull-panel-dark);
box-shadow: var(--card-lift);
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.video-wrap::before {
content: "PHOTOGRAPH BRIEF — VIDEO STILL";
position: absolute;
top: var(--space-5); left: var(--space-5);
font-family: var(--font-display);
font-size: 10px;
letter-spacing: 0.24em;
color: var(--ember);
}
.video-wrap::after {
content: "";
position: absolute;
width: 8px; height: 8px;
top: 8px; right: 8px;
background: rgba(20,20,20,0.98);
box-shadow: inset 0 1px 0 rgba(250,250,250,0.30);
}
.video-brief {
font-family: var(--font-body);
font-style: italic;
font-size: 14px;
line-height: 1.6;
color: var(--chrome-dim);
padding: 0 var(--space-9);
text-align: center;
max-width: 640px;
}
.video-play {
position: absolute;
width: 88px; height: 88px;
background: rgba(6,6,6,0.65);
box-shadow: var(--ember-hot-rim);
display: flex;
align-items: center;
justify-content: center;
color: var(--ember);
font-family: var(--font-display);
font-size: 22px;
}
.video-duration {
position: absolute;
bottom: var(--space-4);
right: var(--space-4);
padding: var(--space-2) var(--space-3);
background: rgba(6,6,6,0.80);
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.14em;
color: var(--chrome-warm);
box-shadow: inset 0 1px 0 rgba(250,250,250,0.14);
}
/* ============================================================
FAQ
============================================================ */
.faq-list { display: flex; flex-direction: column; gap: var(--space-3); }
.faq-item {
background: var(--hull-panel);
box-shadow: var(--card-lift);
padding: var(--space-5) var(--space-6);
position: relative;
}
.faq-item::before, .faq-item::after {
content: "";
position: absolute;
width: 6px; height: 6px;
top: 6px;
background: rgba(20,20,20,0.98);
box-shadow: inset 0 1px 0 rgba(250,250,250,0.30);
}
.faq-item::before { left: 6px; }
.faq-item::after { right: 6px; }
.faq-item__head {
display: grid;
grid-template-columns: auto 1fr auto;
gap: var(--space-4);
align-items: baseline;
}
.faq-item__idx {
font-family: var(--font-display);
font-variant-numeric: tabular-nums;
font-size: 11px;
letter-spacing: 0.20em;
color: var(--ember);
min-width: 32px;
}
.faq-item__q { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: 0.02em; color: var(--chrome-highlight); }
.faq-item__toggle {
font-family: var(--font-display);
font-size: 22px;
color: var(--ember);
line-height: 1;
}
.faq-item__a {
margin-top: var(--space-3);
padding-top: var(--space-3);
font-size: 14px;
line-height: 1.6;
color: var(--chrome-warm);
max-width: 78ch;
box-shadow: inset 0 1px 0 rgba(62,62,62,0.35);
}
.faq-item--open { background: var(--hull-panel-lift); }
.faq-item--closed .faq-item__a { display: none; }
/* ============================================================
REVIEWS
============================================================ */
.reviews-aggregate {
display: grid;
grid-template-columns: 260px 1fr;
gap: var(--space-8);
padding: var(--space-7);
background: var(--hull-panel);
box-shadow: var(--card-lift);
position: relative;
margin-bottom: var(--space-7);
}
.reviews-aggregate::before, .reviews-aggregate::after {
content: "";
position: absolute;
width: 6px; height: 6px;
top: 6px;
background: rgba(20,20,20,0.98);
box-shadow: inset 0 1px 0 rgba(250,250,250,0.30);
}
.reviews-aggregate::before { left: 6px; }
.reviews-aggregate::after { right: 6px; }
.reviews-aggregate__score {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
border-right: none;
padding-right: var(--space-6);
box-shadow: inset -1px 0 0 rgba(62,62,62,0.35);
}
.reviews-aggregate__number {
font-family: var(--font-display);
font-variant-numeric: tabular-nums;
font-size: 92px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--ember);
line-height: 1;
}
.reviews-aggregate__stars {
font-size: 20px;
letter-spacing: 4px;
color: var(--ember);
}
.reviews-aggregate__meta { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--chrome-dim); text-align: center; }
.reviews-aggregate__placeholder {
font-family: var(--font-body);
font-style: italic;
font-size: 11px;
color: var(--ember);
margin-top: var(--space-3);
}
.rating-bars { display: flex; flex-direction: column; gap: var(--space-3); }
.rating-bar {
display: grid;
grid-template-columns: 40px 1fr 40px;
gap: var(--space-3);
align-items: center;
font-family: var(--font-display);
font-size: 12px;
letter-spacing: 0.14em;
color: var(--chrome-dim);
}
.rating-bar__track {
height: 6px;
background: var(--hull-panel-dark);
box-shadow: inset 0 1px 0 rgba(0,0,0,0.7);
position: relative;
}
.rating-bar__fill {
position: absolute;
left: 0; top: 0; bottom: 0;
background: linear-gradient(90deg, var(--ember-forge), var(--ember-glow));
box-shadow: 0 0 12px rgba(255,122,46,0.45);
}
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.review-card {
background: var(--hull-panel);
box-shadow: var(--card-lift);
padding: var(--space-5);
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.review-card::before, .review-card::after {
content: "";
position: absolute;
width: 6px; height: 6px;
top: 6px;
background: rgba(20,20,20,0.98);
box-shadow: inset 0 1px 0 rgba(250,250,250,0.30);
}
.review-card::before { left: 6px; }
.review-card::after { right: 6px; }
.review-card__stars { color: var(--ember); font-size: 14px; letter-spacing: 3px; }
.review-card__badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-display);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ember);
}
.review-card__badge::before {
content: "";
width: 6px; height: 6px;
background: var(--ember);
box-shadow: 0 0 8px rgba(255,122,46,0.75);
}
.review-card__title { font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: 0.03em; color: var(--chrome-highlight); }
.review-card__body { font-size: 13px; line-height: 1.6; color: var(--chrome-warm); flex: 1; }
.review-card__meta { font-family: var(--font-display); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--chrome-dim); padding-top: var(--space-3); box-shadow: inset 0 1px 0 rgba(62,62,62,0.35); }
.reviews-cta { margin-top: var(--space-6); text-align: center; }
/* ============================================================
PRODUCT CARDS — Related + Recently viewed
============================================================ */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.product-grid--3 { grid-template-columns: repeat(3, 1fr); }
.product-card {
background: var(--hull-panel);
box-shadow: var(--card-lift);
position: relative;
transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.product-card:hover { box-shadow: var(--card-lift-hover); }
.product-card::before, .product-card::after {
content: "";
position: absolute;
width: 6px; height: 6px;
top: 6px;
z-index: 2;
background: rgba(20,20,20,0.98);
box-shadow: inset 0 1px 0 rgba(250,250,250,0.30);
}
.product-card::before { left: 6px; }
.product-card::after { right: 6px; }
.product-card__stage {
aspect-ratio: 4 / 5;
background: var(--hull-panel-dark);
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;
}
.product-card__stage--brief {
padding: var(--space-4);
display: flex;
align-items: flex-end;
font-family: var(--font-body);
font-style: italic;
font-size: 11px;
line-height: 1.5;
color: var(--chrome-dim);
}
.product-card__stage--brief::before {
content: "PHOTOGRAPH BRIEF";
position: absolute;
top: var(--space-3); left: var(--space-3);
font-family: var(--font-display);
font-style: normal;
font-size: 9px;
letter-spacing: 0.24em;
color: var(--ember);
}
.product-card__tag {
position: absolute;
top: var(--space-3);
left: var(--space-3);
padding: 4px 8px;
font-family: var(--font-display);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.20em;
text-transform: uppercase;
background: rgba(6,6,6,0.85);
color: var(--ember);
box-shadow: inset 0 1px 0 rgba(250,250,250,0.14);
z-index: 1;
}
.product-card__info {
background: var(--hull-panel-lift);
padding: var(--space-4) var(--space-5);
display: flex;
flex-direction: column;
gap: 6px;
box-shadow: inset 0 1px 0 rgba(250,250,250,0.08);
}
.product-card__eyebrow { font-family: var(--font-display); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--chrome-dim); }
.product-card__title { font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: 0.03em; color: var(--chrome-highlight); text-transform: uppercase; line-height: 1.15; }
.product-card__meta {
display: flex;
justify-content: space-between;
padding-top: var(--space-3);
margin-top: var(--space-2);
box-shadow: inset 0 1px 0 rgba(62,62,62,0.35);
}
.product-card__tier { font-family: var(--font-display); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--chrome-dim); }
.product-card__price { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 600; color: var(--ember); }
/* ============================================================
WARM CAPTURE BAND — the biggest ember moment
============================================================ */
.capture {
position: relative;
padding: var(--space-10) 0;
background: linear-gradient(180deg,
var(--ember-glow) 0%,
var(--ember-bright) 25%,
var(--ember) 55%,
var(--ember-forge) 100%);
box-shadow:
inset 0 2px 0 rgba(255,255,255,0.30),
inset 0 -2px 0 rgba(90,26,0,0.55),
0 0 60px rgba(255,122,46,0.35);
overflow: hidden;
}
.capture::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 50% 40%, rgba(255,255,255,0.18) 0%, transparent 55%);
pointer-events: none;
}
.capture__inner {
max-width: 1000px;
margin: 0 auto;
padding: 0 var(--space-7);
text-align: center;
position: relative;
z-index: 1;
}
.capture__eyebrow {
font-family: var(--font-display);
font-size: 12px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ember-scar);
margin-bottom: var(--space-4);
}
.capture__title {
font-family: var(--font-display);
font-size: 64px;
font-weight: 700;
line-height: 1.02;
letter-spacing: 0.02em;
color: var(--on-primary-fixed);
text-transform: uppercase;
margin-bottom: var(--space-5);
}
.capture__lede {
font-size: 17px;
color: var(--ember-smoulder);
max-width: 62ch;
margin: 0 auto var(--space-7);
line-height: 1.5;
}
.capture__form {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--space-3);
max-width: 640px;
margin: 0 auto;
}
.capture__input {
background: rgba(42,8,0,0.15);
padding: 20px 20px;
font-family: var(--font-body);
font-size: 15px;
color: var(--on-primary-fixed);
box-shadow: inset 0 -2px 0 var(--on-primary-fixed);
outline: none;
border: 0;
}
.capture__input::placeholder { color: rgba(42,8,0,0.55); }
.capture__submit {
padding: 20px 32px;
font-family: var(--font-display);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--on-primary-fixed);
background: transparent;
box-shadow: inset 0 0 0 1.5px var(--on-primary-fixed);
cursor: pointer;
transition: background 0.2s ease;
}
.capture__submit:hover { background: rgba(42,8,0,0.15); }
/* ============================================================
FOOTER
============================================================ */
.footer {
background: var(--carbon);
padding: var(--space-9) 0 var(--space-6);
box-shadow: var(--panel-inset-top), var(--panel-inset-bottom);
position: relative;
}
.footer__inner {
max-width: 1360px;
margin: 0 auto;
padding: 0 var(--space-7);
}
.footer__grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
gap: var(--space-7);
padding-bottom: var(--space-7);
box-shadow: inset 0 -1px 0 rgba(62,62,62,0.30);
}
.footer__brand-block { max-width: 320px; }
.footer__brand {
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
letter-spacing: 0.22em;
color: var(--chrome-highlight);
margin-bottom: var(--space-4);
text-transform: uppercase;
}
.footer__brand span { color: var(--ember); }
.footer__tagline { font-family: var(--font-body); font-size: 13px; color: var(--chrome-dim); line-height: 1.6; }
.footer__col-head {
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--chrome-warm);
margin-bottom: var(--space-4);
}
.footer__col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer__col a {
font-family: var(--font-body);
font-size: 13px;
color: var(--chrome-dim);
}
.footer__col a:hover { color: var(--ember); }
.footer__meta {
padding-top: var(--space-6);
display: flex;
justify-content: space-between;
gap: var(--space-6);
font-family: var(--font-display);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--chrome-dim);
}
.footer__legal {
max-width: 680px;
font-family: var(--font-body);
font-size: 11px;
letter-spacing: 0;
text-transform: none;
color: var(--chrome-dim);
line-height: 1.6;
padding-top: var(--space-4);
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1100px) {
.hero__inner { grid-template-columns: 1fr; gap: var(--space-8); }
.box-manifest { grid-template-columns: repeat(2, 1fr); }
.electronics { grid-template-columns: repeat(2, 1fr); }
.footer__grid { grid-template-columns: 1fr 1fr 1fr; }
.footer__brand-block { grid-column: 1 / -1; }
.product-grid { grid-template-columns: repeat(2, 1fr); }
.reviews-grid { grid-template-columns: 1fr; }
.reviews-aggregate { grid-template-columns: 1fr; }
.editorial-split { grid-template-columns: 1fr; }
.spec-grid { grid-template-columns: 1fr; }
.dossier__title { font-size: 44px; }
.capture__title { font-size: 44px; }
.length-guide { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.container { padding: 0 var(--space-5); }
.section { padding: var(--space-8) 0; }
.nav__inner { grid-template-columns: 1fr auto; }
.nav__links { display: none; }
.promo-bar__aux { display: none; }
.h1, .dossier__title { font-size: 34px; }
.h2 { font-size: 28px; }
.editorial-body__title { font-size: 28px; }
.capture__title { font-size: 32px; }
.gallery { grid-template-columns: 1fr; }
.gallery__thumbs { flex-direction: row; }
.gallery__thumb { width: 64px; }
.box-manifest { grid-template-columns: 1fr; }
.electronics { grid-template-columns: 1fr; }
.product-grid, .product-grid--3 { grid-template-columns: 1fr; }
.trust-strip { grid-template-columns: 1fr 1fr; }
.footer__grid { grid-template-columns: 1fr 1fr; }
.footer__meta { flex-direction: column; }
.atc-row { grid-template-columns: 100px 1fr; }
.capture__form { grid-template-columns: 1fr; }
.sticky-atc__inner { grid-template-columns: 40px 1fr auto; }
.sticky-atc__price { display: none; }
.reviews-aggregate__number { font-size: 68px; }
}
</style>
</head>
<body>
<!-- ============================================================
GLOBAL CHROME — Promo + Nav
============================================================ -->
<div class="promo-bar">
<div class="promo-bar__inner">
<div class="promo-bar__text"><em>Factory-direct. Global. In your hands in 7-10 days.</em></div>
<div class="promo-bar__aux">
<span>USD $</span>
<span>Free returns · 30 days</span>
</div>
</div>
</div>
<header class="nav">
<div class="nav__inner">
<a class="nav__brand" href="#">ART<span>SABERS</span></a>
<nav>
<ul class="nav__links">
<li><a href="#">Lightsabers</a></li>
<li><a href="#">Cosplay Helmets</a></li>
<li><a href="#">Parts & Accessories</a></li>
<li><a href="#">Deals</a></li>
<li><a href="#">Support</a></li>
</ul>
</nav>
<div class="nav__utility">
<a href="#">Search</a>
<a href="#">Account</a>
<a href="#"><strong>Cart · 0</strong></a>
</div>
</div>
</header>
<!-- ============================================================
TRUST BAR — HUD row
============================================================ -->
<div class="trust-bar">
<div class="trust-bar__inner">
<span>7-10 DAY DELIVERY</span>
<span class="trust-bar__sep">·</span>
<span>24-HOUR SPOC</span>
<span class="trust-bar__sep">·</span>
<span>30-DAY MONEY-BACK</span>
<span class="trust-bar__sep">·</span>
<span>SECURE CHECKOUT</span>
</div>
</div>
<!-- ============================================================
BREADCRUMBS
============================================================ -->
<div class="breadcrumbs">
<div class="breadcrumbs__inner">
<a href="#">Lightsabers</a>
<span class="breadcrumbs__sep">▸</span>
<a href="#">Prequel Era</a>
<span class="breadcrumbs__sep">▸</span>
<span class="breadcrumbs__current">Anakin EP3 Duelling Grade</span>
</div>
</div>
<!-- ============================================================
HERO SPLIT — specimen dossier
============================================================ -->
<section class="hero">
<div class="hero__inner">
<div class="gallery">
<div class="gallery__thumbs">
<div class="gallery__thumb gallery__thumb--active" style="background-image:url('https://nerdworks.uk/wp-content/uploads/2025/08/Anakin-Skywalker-EP3-1.jpg');"></div>
<div class="gallery__thumb" style="background-image:url('https://nerdworks.uk/wp-content/uploads/2025/09/Luke-Skywalker-ROTJ-Weathered-Lightsaber-3.jpg');"></div>
<div class="gallery__thumb" style="background-image:url('https://nerdworks.uk/wp-content/uploads/2025/08/Ordo-V2-Double-Bladed-Lightsaber-4.jpg');"></div>
<div class="gallery__thumb" style="background-image:url('https://nerdworks.uk/wp-content/uploads/2025/09/Black-Smasher-Lightsaber-5.jpg');"></div>
<div class="gallery__thumb" style="background-image:url('https://nerdworks.uk/wp-content/uploads/2025/09/Gold-Solaris-Lightsaber-5.jpg');"></div>
</div>
<div class="gallery__main" style="background-image:url('https://nerdworks.uk/wp-content/uploads/2025/08/Anakin-Skywalker-EP3-1.jpg');">
<div class="gallery__callout">Xenopixel V3 · Blade 36"</div>
</div>
</div>
<div class="dossier">
<div class="dossier__eyebrow">
Specimen 07 <span>/</span> Duelling Grade
</div>
<h1 class="dossier__title">Anakin Skywalker<br>EP3 Duelling Grade</h1>
<p class="dossier__subtitle">Prequel-era saber laid out as a dossier record. Xenopixel V3 electronics, machined aluminium hilt, forged for heavy contact.</p>
<div class="rating-row">
<span class="stars">★★★★★</span>
<span class="rating-row__count">4.8 · 213 verified reviews</span>
</div>
<div class="price-stack">
<div class="price-stack__amount">$459.99</div>
<div class="price-stack__bnpl">or 4 payments of <strong>$115.00</strong> with Clearpay</div>
</div>
<div class="variant-block">
<div class="variant-block__label"><span>Saber Core Electronics</span></div>
<div class="electronics-swatches">
<span class="swatch">S-RGB</span>
<span class="swatch">RGB-X</span>
<span class="swatch swatch--active">Xenopixel V3</span>
<span class="swatch">Proffie 2.2</span>
<span class="swatch">Proffie Duelling Pro</span>
</div>
</div>
<div class="variant-block">
<div class="variant-block__label"><span>Blade Length</span><a href="#length-guide">Length guide ▸</a></div>
<div class="blade-lengths">
<span class="length-btn">26"</span>
<span class="length-btn">32"</span>
<span class="length-btn length-btn--active">36"</span>
</div>
</div>
<div class="stock-row"><span class="stock-dot"></span>In stock — ships in 7-10 days from the factory floor</div>
<div class="atc-row">
<div class="qty">
<button aria-label="Decrease">−</button>
<div class="qty__value">1</div>
<button aria-label="Increase">+</button>
</div>
<button class="btn-primary btn-primary--lg btn-primary--block">Add to cart — $459.99</button>
</div>
<div class="trust-strip">
<div class="trust-strip__item"><strong>Factory Direct</strong>7-10 day delivery worldwide</div>
<div class="trust-strip__item"><strong>30-day Guarantee</strong>Money-back if not right</div>
<div class="trust-strip__item"><strong>Real Support</strong>Named single point of contact. 24-hour response.</div>
<div class="trust-strip__item"><strong>Secure Checkout</strong>Stripe · Apple Pay · Clearpay</div>
</div>
</div>
</div>
</section>
<div class="panel-seam"></div>
<!-- ============================================================
STICKY ATC — floating
============================================================ -->
<div class="sticky-atc sticky-atc--shown" aria-hidden="false">
<div class="sticky-atc__inner">
<div class="sticky-atc__thumb" style="background-image:url('https://nerdworks.uk/wp-content/uploads/2025/08/Anakin-Skywalker-EP3-1.jpg');"></div>
<div>
<div class="sticky-atc__title">Anakin EP3 · Duelling Grade</div>
<div class="sticky-atc__meta">Xenopixel V3 · 36" Blade</div>
</div>
<div class="sticky-atc__price">$459.99</div>
<button class="btn-primary">Add to Cart</button>
</div>
</div>
<!-- ============================================================
WHAT'S IN THE BOX
============================================================ -->
<section class="section section--void">
<span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span>
<span class="rivet rivet--bl"></span><span class="rivet rivet--br"></span>
<div class="container">
<div class="section-head">
<div class="section-head__title">
<div class="eyebrow">Unboxing Manifest</div>
<h2 class="h2" style="margin-top:12px;">What's in the Box</h2>
</div>
<div class="section-head__meta">04 / 15 · Shipping Manifest</div>
</div>
<div class="box-manifest">
<div class="box-item">
<div class="box-item__stage">Overhead studio shot: aluminium hilt lifted from foam cradle, single warm key light from upper-right raking across machined grip. Dark hull-panel backdrop, subtle ember rim.</div>
<div class="box-item__idx">01</div>
<div class="box-item__title">The Hilt</div>
<div class="box-item__caption">Machined aluminium body, Xenopixel V3 core installed, activation switch and USB-C port pre-fitted.</div>
</div>
<div class="box-item">
<div class="box-item__stage">Blade laid flat at 45°, catching a hot rim of orange light along one edge, deep shadow along the other. Reads as a specimen strip against carbon backdrop.</div>
<div class="box-item__idx">02</div>
<div class="box-item__title">Blade — 36" Duelling</div>
<div class="box-item__caption">Length chosen at checkout. Reinforced polycarbonate, tempered for heavy-contact duelling.</div>
</div>
<div class="box-item">
<div class="box-item__stage">Angled hero shot of the display stand, matte black with brushed metal cradle. Single spotlight from above right, deep shadow beneath.</div>
<div class="box-item__idx">03</div>
<div class="box-item__title">Display Stand</div>
<div class="box-item__caption">Weighted matte-black base, chrome-arm cradle. Holds the hilt at 22° presentation angle.</div>
</div>
<div class="box-item">
<div class="box-item__stage">Documentation card and hex tool laid at 45° on a hull-panel surface, warm side-light picking up the printed spec sheet.</div>
<div class="box-item__idx">04</div>
<div class="box-item__title">Documentation & Tools</div>
<div class="box-item__caption">Dossier card with your Saber Core serial, hex key for pommel/emitter service, XenoConfigurator quick-start.</div>
</div>
</div>
</div>
</section>
<!-- ============================================================
PRODUCT DESCRIPTION — editorial split
============================================================ -->
<section class="section section--charcoal">
<span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span>
<span class="rivet rivet--bl"></span><span class="rivet rivet--br"></span>
<div class="container">
<div class="editorial-split">
<div class="editorial-photo">
Cinematic full-length composition: the Anakin EP3 hilt held vertically in the frame, ceremonial pose against a deep-space void backdrop. Single warm key light from camera-left rakes across the machined grip; a cool blue rim isolates the silhouette. The emitter catches an ember spark of light — the specimen at rest.
</div>
<div class="editorial-body">
<div class="editorial-body__eyebrow">The Story</div>
<h2 class="editorial-body__title">Prequel-era brute. Duelling grade throughout.</h2>
<p>The EP3 hilt is a fan-favourite for a reason — heavy, ceremonial, and unmistakably prequel-trilogy in silhouette. Our Duelling Grade build takes the reference profile and treats every part of it as a specimen in your collection. Machined aluminium body. Brushed grip section. Emitter and pommel finished to catch the light where a fan would expect it to fall.</p>
<p>Inside, the Xenopixel V3 Saber Core runs an infinite blade-colour palette, thirty-four soundfont banks and full Bluetooth configuration through the XenoConfigurator app. Batteries drop in through the pommel; the whole hilt disassembles for service with the hex key in the box. Built to be hit, tuned to sound right when it is.</p>
<p>This is our Duelling Grade specification of a character-inspired hilt. We are not affiliated with Lucasfilm; the reference is fan-tribute only, and the design decisions are ours.</p>
<div class="editorial-body__signoff"><strong>Signed off by</strong> ARTSABERS Duelling Grade — Batch 07-DG-24</div>
</div>
</div>
</div>
</section>
<!-- ============================================================
TECHNICAL SPECIFICATIONS — the vault
============================================================ -->
<section class="section section--carbon">
<span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span>
<span class="rivet rivet--bl"></span><span class="rivet rivet--br"></span>
<div class="container">
<div class="section-head">
<div class="section-head__title">
<div class="eyebrow">Specimen Record</div>
<h2 class="h2" style="margin-top:12px;">Technical Specifications</h2>
</div>
<div class="section-head__meta">06 / 15 · Vault Record</div>
</div>
<div class="spec-grid">
<div class="spec-column">
<div class="spec-column__title">Hilt & Materials</div>
<div class="spec-row">
<span class="spec-row__label">Hilt Length</span>
<span class="spec-row__leader"></span>
<span class="spec-row__value">12.2 in <span style="color:var(--chrome-dim);font-size:12px">(310 mm)</span></span>
</div>
<div class="spec-row">
<span class="spec-row__label">Hilt Weight</span>
<span class="spec-row__leader"></span>
<span class="spec-row__value">625 g</span>
</div>
<div class="spec-row">
<span class="spec-row__label">Grip Material</span>
<span class="spec-row__leader"></span>
<span class="spec-row__value">Ridged Aluminium</span>
</div>
<div class="spec-row">
<span class="spec-row__label">Accent Metal</span>
<span class="spec-row__leader"></span>
<span class="spec-row__value">Brushed Steel</span>
</div>
<div class="spec-row">
<span class="spec-row__label">Emitter Style</span>
<span class="spec-row__leader"></span>
<span class="spec-row__value">Round-Vent Ceremonial</span>
</div>
<div class="spec-row">
<span class="spec-row__label">Pommel Style</span>
<span class="spec-row__leader"></span>
<span class="spec-row__value">Slotted Charge Cap</span>
</div>
</div>
<div class="spec-column">
<div class="spec-column__title">Electronics & Blade</div>
<div class="spec-row">
<span class="spec-row__label">Electronics</span>
<span class="spec-row__leader"></span>
<span class="spec-row__value">Xenopixel V3</span>
</div>
<div class="spec-row">
<span class="spec-row__label">Sound Fonts</span>
<span class="spec-row__leader"></span>
<span class="spec-row__value spec-row__value--accent">34</span>
</div>
<div class="spec-row">
<span class="spec-row__label">Blade Colours</span>
<span class="spec-row__leader"></span>
<span class="spec-row__value spec-row__value--accent">Infinite</span>
</div>
<div class="spec-row">
<span class="spec-row__label">Blade Styles</span>
<span class="spec-row__leader"></span>
<span class="spec-row__value">Solid · Unstable · Ghost</span>
</div>
<div class="spec-row">
<span class="spec-row__label">Bluetooth</span>
<span class="spec-row__leader"></span>
<span class="spec-row__value">XenoConfigurator · iOS / Android</span>
</div>
<div class="spec-row">
<span class="spec-row__label">Battery Life</span>
<span class="spec-row__leader"></span>
<span class="spec-row__value">~5.5 hrs continuous</span>
</div>
</div>
</div>
</div>
</section>
<div class="panel-seam"></div>
<!-- ============================================================
BLADE LENGTH GUIDE
============================================================ -->
<section class="section section--void" id="length-guide">
<span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span>
<span class="rivet rivet--bl"></span><span class="rivet rivet--br"></span>
<div class="container">
<div class="section-head">
<div class="section-head__title">
<div class="eyebrow">Choose Your Reach</div>
<h2 class="h2" style="margin-top:12px;">Blade Length Guide</h2>
</div>
<div class="section-head__meta">08 / 15 · Field Reference</div>
</div>
<div class="length-guide">
<div class="length-guide__item">
<div class="length-guide__stage">
<div class="length-guide__blade"></div>
<div class="length-guide__caption">Silhouette illustration: 6'0" reference figure standing in three-quarter pose, ember blade extended at 26". Deep charcoal backdrop; the blade and figure edge catch a warm rim-light.</div>
</div>
<div class="length-guide__label">26"</div>
<div class="length-guide__grade">Compact / Cosplay</div>
<div class="length-guide__price">Included · No upcharge</div>
</div>
<div class="length-guide__item">
<div class="length-guide__stage">
<div class="length-guide__blade"></div>
<div class="length-guide__caption">Same reference figure, mid-guard pose, ember blade extended at 32". Balanced silhouette — the default cross-catalogue choice.</div>
</div>
<div class="length-guide__label">32"</div>
<div class="length-guide__grade">Standard / Display</div>
<div class="length-guide__price">Included · No upcharge</div>
</div>
<div class="length-guide__item">
<div class="length-guide__stage">
<div class="length-guide__blade"></div>
<div class="length-guide__caption">Reference figure in full duelling stance, ember blade extended at 36". Blade dominates the frame, warm rim-light emphasises reach.</div>
</div>
<div class="length-guide__label">36"</div>
<div class="length-guide__grade">Duelling / Full Reach</div>
<div class="length-guide__price">+$0 · <span style="color:var(--ember);">Recommended for EP3</span></div>
</div>
</div>
<div class="length-guide__caption-line">Choose your grade at cart · Blade included in every build</div>
</div>
</section>
<!-- ============================================================
ELECTRONICS COMPARISON
============================================================ -->
<section class="section section--void">
<span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span>
<span class="rivet rivet--bl"></span><span class="rivet rivet--br"></span>
<div class="container">
<div class="section-head">
<div class="section-head__title">
<div class="eyebrow">The Saber Core Ladder</div>
<h2 class="h2" style="margin-top:12px;">Electronics Comparison</h2>
</div>
<div class="section-head__meta">09 / 15 · Tier Chart</div>
</div>
<div class="electronics">
<div class="tier-card">
<div class="tier-card__stage" style="background-image:url('https://nerdworks.uk/wp-content/uploads/2025/09/Black-Hammer-Double-Bladed-Lightsaber-5.jpg');"></div>
<div class="tier-card__idx">Tier 01</div>
<div class="tier-card__name">S-RGB</div>
<div class="tier-card__price"><strong>−$180</strong> from list</div>
<div class="tier-card__specs">
<div class="tier-card__spec">Single-strip RGB blade colour selection</div>
<div class="tier-card__spec">6 soundfont banks</div>
<div class="tier-card__spec">Button-cycle configuration</div>
</div>
</div>
<div class="tier-card">
<div class="tier-card__stage" style="background-image:url('https://nerdworks.uk/wp-content/uploads/2025/09/Black-Hela-Lightsaber-4.jpg');"></div>
<div class="tier-card__idx">Tier 02</div>
<div class="tier-card__name">RGB-X</div>
<div class="tier-card__price"><strong>−$110</strong> from list</div>
<div class="tier-card__specs">
<div class="tier-card__spec">Infinite blade colour palette</div>
<div class="tier-card__spec">12 soundfont banks · Bluetooth app</div>
<div class="tier-card__spec">Baselit — no pixel-per-inch cost</div>
</div>
</div>
<div class="tier-card tier-card--current">
<div class="tier-card__ribbon">Current · Recommended</div>
<div class="tier-card__stage" style="background-image:url('https://nerdworks.uk/wp-content/uploads/2025/09/Black-Smasher-V2-Lightsaber-5.jpg');"></div>
<div class="tier-card__idx">Tier 03</div>
<div class="tier-card__name">Xenopixel V3</div>
<div class="tier-card__price"><strong>$459.99</strong> · list price</div>
<div class="tier-card__specs">
<div class="tier-card__spec">Pixel-per-inch blade — full effects</div>
<div class="tier-card__spec">34 soundfont banks · Bluetooth app</div>
<div class="tier-card__spec">Blaster deflect, blade-lock, flash-on-clash</div>
</div>
</div>
<div class="tier-card">
<div class="tier-card__stage" style="background-image:url('https://nerdworks.uk/wp-content/uploads/2025/09/Mando-Black-Lightsaber-3.jpg');"></div>
<div class="tier-card__idx">Tier 04</div>
<div class="tier-card__name">Proffie 2.2</div>
<div class="tier-card__price"><strong>+$120</strong> upgrade</div>
<div class="tier-card__specs">
<div class="tier-card__spec">Config-file customisation</div>
<div class="tier-card__spec">Unlimited soundfonts · SD card</div>
<div class="tier-card__spec">Motion-driven blade effects</div>
</div>
</div>
<div class="tier-card">
<div class="tier-card__stage" style="background-image:url('https://nerdworks.uk/wp-content/uploads/2025/08/Ordo-V2-Double-Bladed-Lightsaber-4.jpg');"></div>
<div class="tier-card__idx">Tier 05</div>
<div class="tier-card__name">Proffie Duelling Pro</div>
<div class="tier-card__price"><strong>+$260</strong> upgrade</div>
<div class="tier-card__specs">
<div class="tier-card__spec">Reinforced Proffie build for heavy contact</div>
<div class="tier-card__spec">Impact-hardened chassis</div>
<div class="tier-card__spec">Duelling-tuned soundfont pack</div>
</div>
</div>
</div>
<div class="electronics__callout">
<div class="electronics__callout-badge">Why Xenopixel V3 for EP3</div>
<div class="electronics__callout-copy">
Prequel-era hilts read best with a pixel-per-inch blade — the ignition sweep and blade-lock effects sit inside the ceremonial silhouette without over-flashing it. <strong>Xenopixel V3</strong> gives you the full effect ladder at the list-price tier, with Bluetooth configuration through XenoConfigurator so you're not committing to a soundfont at checkout.
</div>
</div>
</div>
</section>
<!-- ============================================================
PRODUCT DEMO VIDEO
============================================================ -->
<section class="section section--charcoal">
<span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span>
<span class="rivet rivet--bl"></span><span class="rivet rivet--br"></span>
<div class="container">
<div class="section-head">
<div class="section-head__title">
<div class="eyebrow">Live Demo</div>
<h2 class="h2" style="margin-top:12px;">See it Ignite</h2>
</div>
<div class="section-head__meta">10 / 15 · Motion Reference</div>
</div>
<div class="video-wrap">
<div class="video-brief"><em>16:9 embedded demo. Cold open on the EP3 hilt lying on a hull-panel surface. Camera pushes in as the ignition sweep runs — orange blade extends against deep-space void, a soundfont sample plays across ignition-idle-clash-lock. Cut to a slow overhead orbit; blade fills the frame in ember rim-light. Duration 0:38.</em></div>
<div class="video-play">▶</div>
<div class="video-duration">0:38 · Sound on</div>
</div>
</div>
</section>
<!-- ============================================================
FAQ — product-specific
============================================================ -->
<section class="section section--void">
<span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span>
<span class="rivet rivet--bl"></span><span class="rivet rivet--br"></span>
<div class="container">
<div class="section-head">
<div class="section-head__title">
<div class="eyebrow">Specimen Q & A</div>
<h2 class="h2" style="margin-top:12px;">Frequently Asked</h2>
</div>
<div class="section-head__meta">11 / 15 · Product Specific</div>
</div>
<div class="faq-list">
<div class="faq-item faq-item--open">
<div class="faq-item__head">
<span class="faq-item__idx">Q.01</span>
<div class="faq-item__q">Is this really built to duel with?</div>
<span class="faq-item__toggle">−</span>
</div>
<div class="faq-item__a">Yes — Duelling Grade is our reinforced hilt build, tempered polycarbonate blade, and a Saber Core with hardened contact tolerance. It'll take heavy sparring contact. If you're planning full-contact competition duelling, pair it with the Proffie Duelling Pro core for the extra chassis reinforcement.</div>
</div>
<div class="faq-item faq-item--closed">
<div class="faq-item__head">
<span class="faq-item__idx">Q.02</span>
<div class="faq-item__q">Can I change the blade colour?</div>
<span class="faq-item__toggle">+</span>
</div>
<div class="faq-item__a">Any colour, any time. The Xenopixel V3 core gives you an infinite palette through the XenoConfigurator app — pick a colour, save it to one of the soundfont banks, cycle to it on the hilt.</div>
</div>
<div class="faq-item faq-item--closed">
<div class="faq-item__head">
<span class="faq-item__idx">Q.03</span>
<div class="faq-item__q">What sound fonts are pre-loaded?</div>
<span class="faq-item__toggle">+</span>
</div>
<div class="faq-item__a">34 factory-tuned soundfont banks ship on every Xenopixel V3 build — ceremonial, unstable, whisper-quiet, competition, and character-inspired banks are all in the default pack. You can add or replace fonts through the app.</div>
</div>
<div class="faq-item faq-item--closed">
<div class="faq-item__head">
<span class="faq-item__idx">Q.04</span>
<div class="faq-item__q">How long does the battery last?</div>
<span class="faq-item__toggle">+</span>
</div>
<div class="faq-item__a">Around five and a half hours of continuous ignition on a full charge, longer on idle. Battery drops in through the pommel; USB-C charge port sits under the pommel cap for direct-charge without removing the cell.</div>
</div>
<div class="faq-item faq-item--closed">
<div class="faq-item__head">
<span class="faq-item__idx">Q.05</span>
<div class="faq-item__q">Can I upgrade the electronics later?</div>
<span class="faq-item__toggle">+</span>
</div>
<div class="faq-item__a">Yes — the chassis accepts every Saber Core tier we sell. Swap parts are stocked; we'll walk you through installation, or you can send the hilt in for a workshop swap. Named single point of contact handles the whole exchange.</div>
</div>
<div class="faq-item faq-item--closed">
<div class="faq-item__head">
<span class="faq-item__idx">Q.06</span>
<div class="faq-item__q">Does it come with a stand?</div>
<span class="faq-item__toggle">+</span>
</div>
<div class="faq-item__a">Every Duelling Grade build ships with the matte-black display stand — weighted base, chrome cradle, 22° presentation angle. If you want the twin-hilt or triple-hilt display, add it from Complete the Set below.</div>
</div>
<div class="faq-item faq-item--closed">
<div class="faq-item__head">
<span class="faq-item__idx">Q.07</span>
<div class="faq-item__q">What's the return process?</div>
<span class="faq-item__toggle">+</span>
</div>
<div class="faq-item__a">30-day money-back guarantee. Message your named single point of contact, we send a prepaid label, refund lands within 5 working days of receipt. No re-stocking fee. From factory floor to your door — and back again if it isn't right.</div>
</div>
<div class="faq-item faq-item--closed">
<div class="faq-item__head">
<span class="faq-item__idx">Q.08</span>
<div class="faq-item__q">Do you ship outside the US?</div>
<span class="faq-item__toggle">+</span>
</div>
<div class="faq-item__a">Yes — US, Canada, Australia and New Zealand direct. UK and EU orders route through our sister brand Saber 66; we'll flag it at checkout and hand you off cleanly.</div>
</div>
</div>
</div>
</section>
<!-- ============================================================
REVIEWS
============================================================ -->
<section class="section section--void">
<span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span>
<span class="rivet rivet--bl"></span><span class="rivet rivet--br"></span>
<div class="container">
<div class="section-head">
<div class="section-head__title">
<div class="eyebrow">Verified Owners</div>
<h2 class="h2" style="margin-top:12px;">Reviews</h2>
</div>
<div class="section-head__meta">12 / 15 · Field Reports</div>
</div>
<div class="reviews-aggregate">
<div class="reviews-aggregate__score">
<div class="reviews-aggregate__number">4.8</div>
<div class="reviews-aggregate__stars">★★★★★</div>
<div class="reviews-aggregate__meta">213 verified reviews</div>
<div class="reviews-aggregate__placeholder">Placeholder — awaiting review-platform install</div>
</div>
<div class="rating-bars">
<div class="rating-bar"><span>5 ★</span><div class="rating-bar__track"><div class="rating-bar__fill" style="width:82%"></div></div><span>174</span></div>
<div class="rating-bar"><span>4 ★</span><div class="rating-bar__track"><div class="rating-bar__fill" style="width:12%"></div></div><span>26</span></div>
<div class="rating-bar"><span>3 ★</span><div class="rating-bar__track"><div class="rating-bar__fill" style="width:4%"></div></div><span>9</span></div>
<div class="rating-bar"><span>2 ★</span><div class="rating-bar__track"><div class="rating-bar__fill" style="width:1%"></div></div><span>3</span></div>
<div class="rating-bar"><span>1 ★</span><div class="rating-bar__track"><div class="rating-bar__fill" style="width:0.5%"></div></div><span>1</span></div>
</div>
</div>
<div class="reviews-grid">
<div class="review-card">
<div class="review-card__stars">★★★★★</div>
<div class="review-card__badge">Verified · Duelist</div>
<div class="review-card__title">Built to take a beating.</div>
<div class="review-card__body">Ran two full sparring nights back-to-back on 36". Blade holds up to heavy contact, no rattle in the chassis, ignition sound is still spot-on. Xenopixel handled every clash effect I threw at it.</div>
<div class="review-card__meta">Marcus R. · New South Wales · 2 weeks ago</div>
</div>
<div class="review-card">
<div class="review-card__stars">★★★★★</div>
<div class="review-card__badge">Verified · Collector</div>
<div class="review-card__title">Silhouette is exact. Weight is right.</div>
<div class="review-card__body">I've owned three EP3 tributes over the years — this is the closest silhouette I've handled, and by some distance the best-balanced. Sits on the stand like a prop shelf display. Support rep followed up unprompted after delivery to check the ignition sequence.</div>
<div class="review-card__meta">D. Chen · California · 1 month ago</div>
</div>
<div class="review-card">
<div class="review-card__stars">★★★★☆</div>
<div class="review-card__badge">Verified · Cosplayer</div>
<div class="review-card__title">Ceremonial hero for costume work.</div>
<div class="review-card__body">Weight is on the heavier side — noted, not a complaint. On stage the ember-yellow ignition palette reads perfectly against dark backdrops. Named contact for post-order was a genuine surprise; will buy again.</div>
<div class="review-card__meta">Priya S. · Ontario · 3 weeks ago</div>
</div>
</div>
<div class="reviews-cta">
<a href="#" class="btn-ghost">View all 213 reviews</a>
</div>
</div>
</section>
<!-- ============================================================
RELATED PRODUCTS — Complete the Set
============================================================ -->
<section class="section section--charcoal">
<span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span>
<span class="rivet rivet--bl"></span><span class="rivet rivet--br"></span>
<div class="container">
<div class="section-head">
<div class="section-head__title">
<div class="eyebrow">Own the Kit</div>
<h2 class="h2" style="margin-top:12px;">Complete the Set</h2>
</div>
<div class="section-head__meta">13 / 15 · Cross-catalogue</div>
</div>
<div class="product-grid">
<a href="#" class="product-card">
<div class="product-card__stage product-card__stage--brief">
Top-down studio shot of a chromed blade plug fitted flush into the emitter, single warm key light picking up the ring detail, deep hull-panel backdrop.
<div class="product-card__tag">Accessory</div>
</div>
<div class="product-card__info">
<div class="product-card__eyebrow">Blade Plug</div>
<div class="product-card__title">EP3 Blade Plug — Chromed</div>
<div class="product-card__meta">
<span class="product-card__tier">Universal Emitter</span>
<span class="product-card__price">$24.99</span>
</div>
</div>
</a>
<a href="#" class="product-card">
<div class="product-card__stage product-card__stage--brief">
Three-quarter hero of the triple-hilt display stand, hilts staggered at 22° each, warm key light from upper-left, deep shadow beneath the base.
<div class="product-card__tag">Display</div>
</div>
<div class="product-card__info">
<div class="product-card__eyebrow">Display Stand</div>
<div class="product-card__title">Triple-Hilt Weighted Stand</div>
<div class="product-card__meta">
<span class="product-card__tier">Matte Black · Chrome</span>
<span class="product-card__price">$78.00</span>
</div>
</div>
</a>
<a href="#" class="product-card">
<div class="product-card__stage product-card__stage--brief">
Overhead studio shot of the hard case open to reveal foam cutouts holding the EP3 hilt and a spare blade. Single top-down key light, deep charcoal backdrop.
<div class="product-card__tag">Travel</div>
</div>
<div class="product-card__info">
<div class="product-card__eyebrow">Hard Case</div>
<div class="product-card__title">Duelling-Grade Hard Case</div>
<div class="product-card__meta">
<span class="product-card__tier">Cut Foam · TSA-safe</span>
<span class="product-card__price">$96.00</span>
</div>
</div>
</a>
<a href="#" class="product-card">
<div class="product-card__stage product-card__stage--brief">
Blade tip lifted at 45° across frame catching a hot rim of orange, deep shadow beneath. Reads as a specimen strip against carbon backdrop.
<div class="product-card__tag">Spare</div>
</div>
<div class="product-card__info">
<div class="product-card__eyebrow">Additional Blade</div>
<div class="product-card__title">Spare Duelling Blade — 36"</div>
<div class="product-card__meta">
<span class="product-card__tier">Polycarbonate</span>
<span class="product-card__price">$54.00</span>
</div>
</div>
</a>
</div>
</div>
</section>
<!-- ============================================================
RECENTLY VIEWED
============================================================ -->
<section class="section section--charcoal">
<span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span>
<span class="rivet rivet--bl"></span><span class="rivet rivet--br"></span>
<div class="container">
<div class="section-head">
<div class="section-head__title">
<div class="eyebrow">Session Trail</div>
<h2 class="h2" style="margin-top:12px;">Recently Viewed</h2>
</div>
<div class="section-head__meta">14 / 15 · Your Trail</div>
</div>
<div class="product-grid product-grid--3">
<a href="#" class="product-card">
<div class="product-card__stage" style="background-image:url('https://nerdworks.uk/wp-content/uploads/2025/09/Red-Tai-Ji-Lightsaber-4.jpg');">
<div class="product-card__tag">Xenopixel V3</div>
</div>
<div class="product-card__info">
<div class="product-card__eyebrow">ARTSABERS Exclusive</div>
<div class="product-card__title">Red Tai Ji — Duelling Grade</div>
<div class="product-card__meta">
<span class="product-card__tier">In stock · 7-10 days</span>
<span class="product-card__price">$419.99</span>
</div>
</div>
</a>
<a href="#" class="product-card">
<div class="product-card__stage" style="background-image:url('https://nerdworks.uk/wp-content/uploads/2025/09/Black-Hammer-Double-Bladed-Lightsaber-5.jpg');">
<div class="product-card__tag">Proffie 2.2</div>
</div>
<div class="product-card__info">
<div class="product-card__eyebrow">Original Design</div>
<div class="product-card__title">Black Hammer — Double Bladed</div>
<div class="product-card__meta">
<span class="product-card__tier">In stock · 7-10 days</span>
<span class="product-card__price">$579.99</span>
</div>
</div>
</a>
<a href="#" class="product-card">
<div class="product-card__stage" style="background-image:url('https://nerdworks.uk/wp-content/uploads/2025/09/Gold-Solaris-Lightsaber-5.jpg');">
<div class="product-card__tag">Xenopixel V3</div>
</div>
<div class="product-card__info">
<div class="product-card__eyebrow">ARTSABERS Exclusive</div>
<div class="product-card__title">Gold Solaris — Duelling Grade</div>
<div class="product-card__meta">
<span class="product-card__tier">In stock · 7-10 days</span>
<span class="product-card__price">$489.99</span>
</div>
</div>
</a>
</div>
</div>
</section>
<div class="panel-seam"></div>
<!-- ============================================================
WARM CAPTURE BAND — the biggest ember moment
============================================================ -->
<section class="capture">
<div class="capture__inner">
<div class="capture__eyebrow">Direct from the workshop</div>
<h2 class="capture__title">First look at the next batch.</h2>
<p class="capture__lede">One monthly dispatch. New hilts before the site sees them, factory notes from the workshop floor, and a named single point of contact standing by from the moment you subscribe.</p>
<form class="capture__form" onsubmit="event.preventDefault();">
<input class="capture__input" type="email" placeholder="Your email address" aria-label="Email address">
<button class="capture__submit" type="submit">Get the dispatch</button>
</form>
</div>
</section>
<div class="panel-seam"></div>
<!-- ============================================================
FOOTER
============================================================ -->
<footer class="footer">
<div class="footer__inner">
<div class="footer__grid">
<div class="footer__brand-block">
<div class="footer__brand">ART<span>SABERS</span></div>
<p class="footer__tagline">From factory floor to your door. Every character, every Saber Core, every duelling grade — backed by named single point of contact support with a 24-hour response.</p>
</div>
<div class="footer__col">
<div class="footer__col-head">Shop</div>
<ul>
<li><a href="#">Lightsabers</a></li>
<li><a href="#">Cosplay Helmets</a></li>
<li><a href="#">Parts & Accessories</a></li>
<li><a href="#">ARTSABERS Exclusive</a></li>
<li><a href="#">Deals</a></li>
</ul>
</div>
<div class="footer__col">
<div class="footer__col-head">Saber Cores</div>
<ul>
<li><a href="#">S-RGB</a></li>
<li><a href="#">RGB-X</a></li>
<li><a href="#">Xenopixel V3</a></li>
<li><a href="#">Proffie 2.2</a></li>
<li><a href="#">Proffie Duelling Pro</a></li>
</ul>
</div>
<div class="footer__col">
<div class="footer__col-head">Support</div>
<ul>
<li><a href="#">Contact</a></li>
<li><a href="#">Delivery & Returns</a></li>
<li><a href="#">Warranty</a></li>
<li><a href="#">XenoConfigurator App</a></li>
<li><a href="#">Track Order</a></li>
</ul>
</div>
<div class="footer__col">
<div class="footer__col-head">Company</div>
<ul>
<li><a href="#">Our Story</a></li>
<li><a href="#">Workshop Notes</a></li>
<li><a href="#">Saber 66 (UK / EU)</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">Press</a></li>
</ul>
</div>
</div>
<div class="footer__meta">
<span>© ARTSABERS · Nerdworks Ltd 2026 · All rights reserved</span>
<span>Stripe · Apple Pay · Clearpay · Mollie</span>
</div>
<p class="footer__legal">
ARTSABERS is a fan-led replica saber retailer. We are not affiliated with, endorsed by, or connected to Lucasfilm Ltd., The Walt Disney Company, or any of their subsidiaries. STAR WARS and all associated character, vehicle and location names are trademarks of Lucasfilm Ltd. Our products are fan-tribute designs sold to collectors, duelists and cosplayers.
</p>
</div>
</footer>
</body>
</html>