/wire-template.
<!DOCTYPE html>
<?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Duelling Grade Lightsabers — ARTSABERS</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@300;400;500;600&family=Orbitron:wght@400;500;600;700;800&family=Onest:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>/* =========================================================
TOKENS — ARTSABERS · Kyber Hull styleguide
========================================================= */
:root {
/* Orange ombre — the ONE brand voice */
--ember-glow: #FFB347;
--ember-bright: #FF9540;
--ember: #FF7A2E;
--ember-forge: #E85D18;
--ember-deep: #D14810;
--ember-smoulder: #8B2E08;
--ember-scar: #5A1A00;
--on-primary-fixed: #2A0800;
/* Hull ladder (backgrounds) */
--carbon: #060606;
--void: #0A0A0A;
--charcoal: #141414;
--charcoal-warm: #161412;
--hull-panel: #1A1A1A;
--hull-panel-lift: #242424;
--hull-panel-dark: #0F0F0F;
--hull-chrome-shadow: #2E2E2E;
--hull-edge: #363636;
--outline: #3E3E3E;
/* Chrome / white highlights */
--chrome-highlight: #FAFAFA;
--chrome-glint: #E8E4DD;
--chrome-warm: #F5F0E8;
--chrome-dim: #B8B0A6;
/* Semantic surface roles */
--bg-section-plain-a: var(--carbon);
--bg-section-plain-b: var(--void);
--bg-card-on-plain: var(--hull-panel);
--bg-card-on-pattern: rgba(20, 20, 20, 0.94);
--bg-card-tile-on-pattern: rgba(15, 15, 15, 0.90);
--bg-card-lift: var(--hull-panel-lift);
--bg-footer: var(--carbon);
/* Semantic text roles */
--text-hero: var(--chrome-highlight);
--text-section-title: var(--chrome-highlight);
--text-sub: var(--chrome-warm);
--text-body: var(--chrome-warm);
--text-meta: var(--chrome-dim);
--text-accent: var(--ember);
--text-price: var(--ember);
--text-on-ember: var(--on-primary-fixed);
/* Type */
--font-display: 'Orbitron', system-ui, sans-serif;
--font-body: 'Onest', system-ui, sans-serif;
--fs-display: 128px;
--fs-h1: 84px;
--fs-h2: 60px;
--fs-h3: 40px;
--fs-h4: 28px;
--fs-body-lg: 18px;
--fs-body: 16px;
--fs-label: 12px;
--fs-micro: 11px;
--track-hero: 0.14em;
--track-label: 0.1em;
--track-cta: 0.06em;
/* Spacing */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 96px;
--space-10: 128px;
/* Shadows / glows */
--panel-lift: inset 0 1px 0 rgba(250, 250, 250, 0.30), 0 8px 24px -8px rgba(0, 0, 0, 0.9);
--panel-lift-hover: inset 0 1px 0 rgba(250, 250, 250, 0.40), 0 14px 40px -10px rgba(0, 0, 0, 0.95);
--ember-glow-sm: 0 0 16px rgba(255, 122, 46, 0.35);
--ember-glow-md: 0 0 28px rgba(255, 122, 46, 0.55);
--ember-hot-rim: inset 0 0 0 1px rgba(255, 122, 46, 0.6), 0 0 24px rgba(255, 122, 46, 0.5);
--chrome-top-soft: inset 0 1px 0 rgba(250, 250, 250, 0.12);
/* Hull-plate imagery — locked variants */
--img-pattern-f: url('https://camcom.dev/generated_imgs/generated-2026-07-07T15-47-31-768Z-joeqpj.jpg');
--img-pattern-g: url('https://camcom.dev/generated_imgs/generated-2026-07-07T15-48-07-970Z-oehwsm.jpg');
--pattern-overlay-carbon: linear-gradient(rgba(6, 6, 6, 0.68), rgba(6, 6, 6, 0.72));
--pattern-overlay-void: linear-gradient(rgba(10, 10, 10, 0.66), rgba(10, 10, 10, 0.74));
}
/* =========================================================
BASE / RESET
========================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--carbon); color: var(--text-body); }
body { font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; border: 0; background: none; cursor: pointer; color: inherit; }
h1, h2, h3, h4, h5 { font-family: var(--font-display); font-weight: 700; line-height: 1.05; color: var(--text-section-title); }
.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--plain-charcoal-warm { background: var(--charcoal-warm); }
.section--pattern-f {
background: var(--pattern-overlay-carbon), var(--img-pattern-f) center/cover no-repeat;
}
.section--pattern-g {
background: var(--pattern-overlay-void), var(--img-pattern-g) center/cover no-repeat;
}
.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--center { text-align: center; margin-left: auto; margin-right: auto; }
.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--center .section-head__eyebrow::after {
content: '';
width: 32px;
height: 1px;
background: var(--ember);
box-shadow: 0 0 8px rgba(255, 122, 46, 0.55);
}
.section-head__title {
font-size: var(--fs-h2);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
color: var(--text-section-title);
max-width: 20ch;
}
.section-head--center .section-head__title { margin-left: auto; margin-right: auto; letter-spacing: 0.8px; }
.section-head__kicker {
margin-top: var(--space-5);
color: var(--text-body);
max-width: 62ch;
font-size: var(--fs-body-lg);
}
.section-head--center .section-head__kicker { margin-left: auto; margin-right: auto; }
/* =========================================================
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: curation-hero (cinematic 100vh, single-column, shop-entry CTA)
========================================================= */
.curation-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 50% 42%, rgba(232, 93, 24, 0.25) 0%, rgba(232, 93, 24, 0.06) 35%, transparent 70%),
#060606 url('https://camcom.dev/generated_imgs/generated-2026-07-07T22-14-13-845Z-bsmx5m.jpg') center/cover no-repeat;
color: var(--chrome-highlight);
display: flex;
align-items: flex-end;
overflow: hidden;
}
.curation-hero__inner {
width: 100%;
padding-bottom: 320px;
display: grid;
grid-template-columns: 1fr;
gap: var(--space-9);
align-items: end;
}
.curation-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);
}
.curation-hero__eyebrow::before {
content: '';
width: 44px;
height: 1px;
background: var(--ember);
box-shadow: 0 0 8px rgba(255, 122, 46, 0.75);
}
.curation-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);
max-width: 14ch;
}
.curation-hero__sub {
margin-top: var(--space-6);
font-family: var(--font-body);
font-size: 22px;
line-height: 1.5;
color: var(--chrome-warm);
max-width: 46ch;
font-style: italic;
}
.curation-hero__ctas { margin-top: var(--space-7); display: flex; gap: var(--space-4); flex-wrap: wrap; }
.curation-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;
}
.curation-hero__descriptor span { color: var(--chrome-warm); margin: 0 8px; }
/* =========================================================
BLOCK: editorial-split (What Duelling Grade means — media LEFT + prose RIGHT + checklist + guarantee)
========================================================= */
.editorial-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: stretch; }
.editorial-split__media {
min-height: 720px;
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-07T22-14-26-348Z-culgs3.jpg') center/cover no-repeat;
box-shadow: var(--panel-lift);
position: relative;
}
.editorial-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;
}
.editorial-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);
}
.editorial-split__prose { padding: var(--space-6) 0; }
.editorial-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);
}
.editorial-split__title {
font-size: var(--fs-h2);
text-transform: uppercase;
letter-spacing: 0.8px;
margin-bottom: var(--space-6);
max-width: 14ch;
}
.editorial-split__body p { font-size: var(--fs-body-lg); color: var(--text-body); margin-bottom: var(--space-5); line-height: 1.65; }
.editorial-split__body p:last-child { margin-bottom: 0; }
.cert-checklist { margin-top: var(--space-7); display: grid; gap: var(--space-3); }
.cert-checklist__row {
display: grid;
grid-template-columns: max-content 1fr max-content;
gap: var(--space-4);
align-items: baseline;
padding: var(--space-3) 0;
border-bottom: 1px dotted rgba(184, 176, 166, 0.25);
font-family: var(--font-display);
}
.cert-checklist__row:last-child { border-bottom: 0; }
.cert-checklist__label {
font-size: 12px;
font-weight: 600;
letter-spacing: var(--track-label);
text-transform: uppercase;
color: var(--chrome-dim);
}
.cert-checklist__leader { border-bottom: 1px dotted rgba(184, 176, 166, 0.25); align-self: end; margin-bottom: 5px; }
.cert-checklist__value {
font-size: 14px;
color: var(--chrome-warm);
text-align: right;
}
.guarantee-callout {
margin-top: var(--space-7);
padding: var(--space-6);
background: var(--hull-panel);
box-shadow: var(--panel-lift), 0 0 32px -8px rgba(255, 122, 46, 0.35);
position: relative;
}
.guarantee-callout::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 3px;
background: linear-gradient(180deg, var(--ember-glow), var(--ember), var(--ember-deep));
box-shadow: 0 0 12px rgba(255, 122, 46, 0.6);
}
.guarantee-callout__eyebrow {
font-family: var(--font-display);
font-size: var(--fs-label);
font-weight: 600;
letter-spacing: var(--track-label);
text-transform: uppercase;
color: var(--ember);
margin-bottom: var(--space-3);
}
.guarantee-callout__text {
font-family: var(--font-display);
font-size: 20px;
font-weight: 500;
line-height: 1.35;
color: var(--chrome-highlight);
}
/* =========================================================
BLOCK: shop-cta-band (small carbon strip — one line + primary CTA)
========================================================= */
.shop-cta-band {
padding: var(--space-7) 0;
background: var(--carbon);
border-top: 1px solid rgba(255, 122, 46, 0.15);
border-bottom: 1px solid rgba(255, 122, 46, 0.15);
position: relative;
}
.shop-cta-band::before {
content: '';
position: absolute;
left: 0; right: 0; top: 0; height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(255, 122, 46, 0.6) 50%, transparent 100%);
box-shadow: 0 0 12px rgba(255, 122, 46, 0.35);
}
.shop-cta-band__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-6);
flex-wrap: wrap;
}
.shop-cta-band__copy {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.shop-cta-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(--ember);
}
.shop-cta-band__headline {
font-family: var(--font-display);
font-size: 28px;
font-weight: 700;
color: var(--chrome-highlight);
text-transform: uppercase;
letter-spacing: 0.05em;
line-height: 1.1;
}
.shop-cta-band__headline span { color: var(--ember); font-variant-numeric: tabular-nums; }
/* =========================================================
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-pattern);
backdrop-filter: blur(3px);
box-shadow: var(--panel-lift);
display: flex;
flex-direction: column;
transition: box-shadow 0.35s ease, transform 0.35s ease;
}
.product-hilt:hover { transform: translateY(-4px); box-shadow: var(--panel-lift-hover); }
.product-hilt--featured { box-shadow: var(--panel-lift), var(--ember-hot-rim); }
.product-hilt--featured:hover { box-shadow: var(--panel-lift-hover), var(--ember-hot-rim); }
.product-hilt__media {
aspect-ratio: 1/1;
background-color: #0a0a0a;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
position: relative;
overflow: hidden;
}
.product-hilt__eyebrow-tag {
position: absolute;
top: var(--space-4);
left: var(--space-4);
padding: 6px 10px;
background: rgba(255, 122, 46, 0.18);
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__name {
font-family: var(--font-display);
font-size: 24px;
font-weight: 700;
line-height: 1.15;
color: var(--chrome-highlight);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.product-hilt__specs { display: grid; gap: var(--space-2); margin-top: var(--space-2); }
.product-hilt__spec-row {
display: grid;
grid-template-columns: max-content 1fr max-content;
gap: var(--space-3);
align-items: baseline;
font-family: var(--font-display);
font-size: 12px;
}
.product-hilt__spec-label { color: var(--chrome-dim); text-transform: uppercase; letter-spacing: var(--track-label); }
.product-hilt__spec-leader { border-bottom: 1px dotted rgba(184, 176, 166, 0.25); align-self: end; margin-bottom: 4px; }
.product-hilt__spec-value { color: var(--chrome-warm); font-variant-numeric: tabular-nums; text-align: right; }
.product-hilt__foot {
margin-top: auto;
padding-top: var(--space-5);
border-top: 1px dotted rgba(184, 176, 166, 0.20);
display: flex;
justify-content: space-between;
align-items: center;
}
.product-hilt__price {
font-family: var(--font-display);
font-size: 28px;
font-weight: 700;
color: var(--ember);
font-variant-numeric: tabular-nums;
}
.product-hilt__cta {
font-family: var(--font-display);
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--track-cta);
color: var(--chrome-highlight);
padding-bottom: 4px;
border-bottom: 1px solid var(--ember);
}
/* =========================================================
BLOCK: spec-comparison (Duelling Grade vs Display Grade)
========================================================= */
.spec-comparison { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-8); align-items: start; }
.spec-comparison__title-block { position: sticky; top: 120px; }
.spec-comparison__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);
}
.spec-comparison__title {
font-size: var(--fs-h2);
text-transform: uppercase;
letter-spacing: 0.8px;
margin-bottom: var(--space-5);
}
.spec-comparison__intro {
font-family: var(--font-body);
font-size: var(--fs-body-lg);
color: var(--chrome-warm);
max-width: 40ch;
line-height: 1.6;
}
.spec-comparison__table {
background: var(--hull-panel);
padding: var(--space-7);
box-shadow: var(--panel-lift);
}
.spec-comparison__header {
display: grid;
grid-template-columns: 5fr 4fr 4fr;
gap: var(--space-5);
align-items: baseline;
padding-bottom: var(--space-5);
border-bottom: 1px solid rgba(255, 122, 46, 0.30);
margin-bottom: var(--space-4);
}
.spec-comparison__header-label {
font-family: var(--font-display);
font-size: 11px;
letter-spacing: var(--track-label);
text-transform: uppercase;
color: var(--chrome-dim);
}
.spec-comparison__header-col {
font-family: var(--font-display);
font-size: 14px;
font-weight: 700;
letter-spacing: var(--track-cta);
text-transform: uppercase;
text-align: right;
}
.spec-comparison__header-col--duelling { color: var(--ember); }
.spec-comparison__header-col--display { color: var(--chrome-dim); }
.spec-comparison__row {
display: grid;
grid-template-columns: 5fr 4fr 4fr;
gap: var(--space-5);
align-items: baseline;
padding: var(--space-4) 0;
border-bottom: 1px dotted rgba(184, 176, 166, 0.20);
font-family: var(--font-display);
}
.spec-comparison__row:last-child { border-bottom: 0; padding-bottom: 0; }
.spec-comparison__row-label {
font-size: 12px;
font-weight: 600;
letter-spacing: var(--track-label);
text-transform: uppercase;
color: var(--chrome-dim);
}
.spec-comparison__row-value {
font-size: 16px;
color: var(--chrome-warm);
font-variant-numeric: tabular-nums;
text-align: right;
line-height: 1.35;
}
.spec-comparison__row-value--duelling { color: var(--chrome-highlight); font-weight: 600; }
/* =========================================================
BLOCK: featured-testimonial (single quote + archive link)
========================================================= */
.featured-testimonial { max-width: 960px; margin: 0 auto; text-align: center; }
.featured-testimonial__rating {
display: flex;
justify-content: center;
gap: 6px;
margin-bottom: var(--space-6);
}
.featured-testimonial__star {
width: 18px;
height: 18px;
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 8px rgba(255, 122, 46, 0.6);
}
.featured-testimonial__quote {
font-family: var(--font-display);
font-weight: 500;
font-size: 36px;
line-height: 1.3;
color: var(--chrome-highlight);
margin-bottom: var(--space-7);
font-style: italic;
}
.featured-testimonial__quote::before { content: '“'; color: var(--ember); font-family: var(--font-display); margin-right: 4px; }
.featured-testimonial__quote::after { content: '”'; color: var(--ember); font-family: var(--font-display); }
.featured-testimonial__attribution {
display: inline-flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-4) 0;
font-family: var(--font-display);
font-size: 13px;
letter-spacing: var(--track-label);
text-transform: uppercase;
}
.featured-testimonial__author { color: var(--chrome-warm); font-weight: 600; }
.featured-testimonial__sku { color: var(--chrome-dim); }
.featured-testimonial__sku strong { color: var(--ember); font-weight: 600; }
.featured-testimonial__sep { color: var(--ember); }
.featured-testimonial__archive-link {
margin-top: var(--space-8);
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-display);
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--track-cta);
color: var(--ember);
padding-bottom: 4px;
border-bottom: 1px solid var(--ember);
}
.featured-testimonial__archive-link:hover { color: var(--ember-glow); }
/* =========================================================
BLOCK: capture-band (warm full ombre)
========================================================= */
.capture-band {
padding: var(--space-10) 0;
background: linear-gradient(180deg, var(--ember-glow) 0%, var(--ember) 45%, var(--ember-forge) 100%);
color: var(--on-primary-fixed);
position: relative;
overflow: hidden;
}
.capture-band__inner { max-width: 900px; margin: 0 auto; text-align: center; padding: 0 var(--space-7); }
.capture-band__eyebrow {
font-family: var(--font-display);
font-size: var(--fs-label);
font-weight: 600;
letter-spacing: var(--track-label);
text-transform: uppercase;
color: var(--on-primary-fixed);
opacity: 0.72;
margin-bottom: var(--space-4);
}
.capture-band__title {
font-family: var(--font-display);
font-size: 68px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--on-primary-fixed);
margin-bottom: var(--space-5);
}
.capture-band__sub {
font-family: var(--font-body);
font-size: 18px;
color: var(--on-primary-fixed);
opacity: 0.82;
max-width: 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: 0.8px;
text-transform: uppercase;
color: var(--chrome-warm);
margin-bottom: var(--space-5);
}
.footer__list { display: grid; gap: var(--space-3); list-style: none; }
.footer__list a { color: var(--chrome-dim); font-size: 14px; }
.footer__list a:hover { color: var(--ember); }
.footer__bottom {
padding-top: var(--space-5);
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--font-display);
font-size: var(--fs-micro);
letter-spacing: var(--track-label);
text-transform: uppercase;
color: var(--chrome-dim);
}
.footer__legal { max-width: 62ch; text-transform: none; letter-spacing: 0.02em; font-family: var(--font-body); font-size: 12px; color: rgba(184, 176, 166, 0.6); }
/* =========================================================
BLOCK: shop-launcher (sticky floating shop-entry, position: fixed)
========================================================= */
.shop-launcher {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 9999;
display: inline-flex;
align-items: center;
gap: var(--space-3);
padding: 14px 22px;
min-height: 48px;
min-width: 200px;
background: rgba(15, 15, 15, 0.90);
backdrop-filter: blur(6px);
box-shadow:
inset 0 1px 0 rgba(255, 122, 46, 0.55),
0 12px 32px -8px rgba(0, 0, 0, 0.85),
0 0 24px -6px rgba(255, 122, 46, 0.45);
font-family: var(--font-display);
font-size: 13px;
font-weight: 700;
letter-spacing: var(--track-cta);
text-transform: uppercase;
color: var(--chrome-highlight);
transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.shop-launcher::before {
content: '';
position: absolute;
left: 0; right: 0; top: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--ember) 50%, transparent 100%);
box-shadow: 0 0 10px rgba(255, 122, 46, 0.7);
}
.shop-launcher:hover {
transform: translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(255, 122, 46, 0.75),
0 16px 42px -8px rgba(0, 0, 0, 0.95),
0 0 32px -4px rgba(255, 122, 46, 0.65);
}
.shop-launcher__count { color: var(--ember); font-variant-numeric: tabular-nums; }
.shop-launcher__arrow { color: var(--ember); font-weight: 500; font-size: 16px; margin-left: auto; }
/* =========================================================
RESPONSIVE — mobile ~390px
========================================================= */
@media (max-width: 960px) {
:root {
--fs-display: 60px;
--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; }
.curation-hero { min-height: 100vh; }
.curation-hero__inner { grid-template-columns: 1fr; gap: var(--space-7); padding-bottom: var(--space-8); }
.curation-hero__descriptor { position: static; transform: none; margin-top: var(--space-6); white-space: normal; text-align: center; }
.editorial-split { grid-template-columns: 1fr; }
.editorial-split__media { min-height: 340px; aspect-ratio: 4/3; }
.shop-cta-band__inner { flex-direction: column; align-items: flex-start; }
.product-hilt-grid { grid-template-columns: 1fr; }
.spec-comparison { grid-template-columns: 1fr; }
.spec-comparison__title-block { position: static; }
.spec-comparison__table { padding: var(--space-5); }
.spec-comparison__header, .spec-comparison__row { grid-template-columns: 5fr 4fr 4fr; gap: var(--space-3); }
.featured-testimonial__quote { font-size: 22px; }
.capture-band__title { font-size: 40px; letter-spacing: 0.8px; }
.capture-band__form { flex-direction: column; align-items: stretch; }
.footer__grid { grid-template-columns: 1fr 1fr; }
.footer__bottom { flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.shop-launcher { bottom: 12px; right: 12px; min-width: 0; padding: 12px 16px; font-size: 11px; }
}
/* orbitron-retrofit: title-em italic kill */
[class*="__title"] em, [class*="__title"] i,
[class*="-title"] em, [class*="-title"] i,
[class*="__heading"] em, [class*="__heading"] i,
[class*="-heading"] em, [class*="-heading"] i { font-style: normal; }
/* -- Reconciled from family 14002 canonical 12840:tf-newsletter-signup -- */
.container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 48px; }
/* =========================================================
CAPTURE BAND — full orange ombre (biggest ember moment)
========================================================= */
.capture {
position: relative;
background: linear-gradient(180deg, var(--ember-glow) 0%, var(--ember-bright) 25%, var(--ember) 55%, var(--ember-forge) 100%);
padding: 140px 0;
box-shadow:
inset 0 2px 0 rgba(255,235,180,0.55),
inset 0 -1px 0 rgba(90,26,0,0.55),
0 -12px 40px -8px rgba(255,122,46,0.55);
overflow: hidden;
}
.capture::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 20% 30%, rgba(255,235,180,0.35) 0%, rgba(255,235,180,0) 55%),
radial-gradient(ellipse at 80% 70%, rgba(209,72,16,0.35) 0%, rgba(209,72,16,0) 60%);
pointer-events: none;
}
.capture__inner {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
z-index: 2;
}
.capture__copy { max-width: 620px; }
.capture__eyebrow {
font-family: var(--font-display);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--on-primary-fixed);
opacity: 0.72;
margin-bottom: 20px;
}
.capture__title {
font-family: var(--font-display);
font-size: clamp(48px, 5.5vw, 78px);
font-weight: 700;
line-height: 0.95;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--on-primary-fixed);
margin-bottom: 24px;
}
.capture__sub {
font-family: var(--font-display);
font-size: 20px;
font-weight: 500;
line-height: 1.4;
color: var(--on-primary-fixed);
opacity: 0.86;
max-width: 520px;
}
.capture__form {
display: flex;
flex-direction: column;
gap: 20px;
padding: 44px;
background: rgba(20,20,20,0.94);
box-shadow:
inset 0 1px 0 rgba(250,250,250,0.2),
0 30px 60px -20px rgba(0,0,0,0.7);
}
.capture__form-lbl {
font-family: var(--font-display);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ember-glow);
}
.capture__form-input {
background: transparent;
border: 0;
border-bottom: 1px solid rgba(184,176,166,0.35);
padding: 14px 0;
font-family: var(--font-body);
font-size: 17px;
color: var(--chrome-warm);
outline: none;
transition: border-color 200ms ease, box-shadow 200ms ease;
width: 100%;
}
.capture__form-input::placeholder { color: var(--chrome-dim); opacity: 0.7; }
.capture__form-input:focus {
border-bottom-color: var(--ember);
box-shadow: 0 2px 12px -2px rgba(255,122,46,0.4);
}
.capture__form-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 20px 30px;
background: linear-gradient(180deg, var(--ember-glow) 0%, var(--ember) 50%, var(--ember-deep) 100%);
color: var(--on-primary-fixed);
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.20em;
text-transform: uppercase;
box-shadow: var(--ember-glow-sm);
transition: box-shadow 200ms ease;
margin-top: 8px;
}
.capture__form-cta:hover { box-shadow: var(--ember-glow-md); }
.capture__form-fine {
font-family: var(--font-body);
font-size: 12px;
color: var(--chrome-dim);
line-height: 1.5;
}
@media (max-width: 640px) {
.container { padding: 0 24px; }
.promo-bar__inner { gap: 16px; font-size: 10px; }
.promo-bar__item { gap: 16px; }
.hero__telemetry-row { flex-wrap: wrap; gap: 20px; }
.hero__tagline { display: none; }
.trust-bar__row { grid-template-columns: 1fr 1fr; row-gap: 24px; }
.trust-bar__cell { border-right: 0; padding: 4px 12px; }
.saber-core__grid { grid-template-columns: 1fr; }
.faction-grid { grid-template-columns: 1fr; }
.faction-tile { height: 340px; }
.section-head { flex-direction: column; align-items: flex-start; gap: 24px; }
.section-head__right { text-align: left; }
.capture { padding: 90px 0; }
.site-footer__grid { grid-template-columns: 1fr; gap: 40px; }
.site-footer__base { flex-direction: column; align-items: flex-start; gap: 20px; }
}
/* -- Reconciled from family 13997 canonical 12840:tf-product-card-2 -- */
/* Panel-seam kept as a clean ember hairline + soft glow — the shadow
channels above/below were removed 2026-07-07 because they read as a
second seam next to the ember line rather than a physical join. */
/* Cards read as raised plates — beefier chrome top edge + deeper cast shadow. */
.core-card,
.product-card,
.faction-tile,
.mission-panel,
.testimonial,
.brand-story__panel {
box-shadow:
inset 0 1px 0 rgba(250,250,250,0.16),
inset 0 -1px 0 rgba(0,0,0,0.55),
0 10px 28px -10px rgba(0,0,0,0.95),
0 2px 6px -2px rgba(0,0,0,0.7);
position: relative;
}
.product-card:hover {
box-shadow: var(--panel-lift-hover);
transform: translateY(-3px);
}
.product-card--featured:hover {
box-shadow: var(--ember-hot-rim), var(--panel-lift-hover);
}
.product-card:hover .product-card__img { transform: scale(1.03); }
.product-card__stage::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 100%;
background: linear-gradient(180deg, rgba(0,0,0,0) 62%, rgba(6,6,6,0.75) 100%);
z-index: 1;
pointer-events: none;
}
.product-card__stage::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 4px;
background: linear-gradient(90deg, rgba(255,122,46,0) 0%, rgba(255,122,46,0.6) 50%, rgba(255,122,46,0) 100%);
z-index: 2;
filter: blur(3px);
}
/* -- Reconciled from family 13997 canonical 12840:tf-product-card-2 -- */
/* Panel-seam kept as a clean ember hairline + soft glow — the shadow
channels above/below were removed 2026-07-07 because they read as a
second seam next to the ember line rather than a physical join. */
/* Cards read as raised plates — beefier chrome top edge + deeper cast shadow. */
.core-card,
.product-card,
.faction-tile,
.mission-panel,
.testimonial,
.brand-story__panel {
box-shadow:
inset 0 1px 0 rgba(250,250,250,0.16),
inset 0 -1px 0 rgba(0,0,0,0.55),
0 10px 28px -10px rgba(0,0,0,0.95),
0 2px 6px -2px rgba(0,0,0,0.7);
position: relative;
}
.product-card:hover {
box-shadow: var(--panel-lift-hover);
transform: translateY(-3px);
}
.product-card--featured:hover {
box-shadow: var(--ember-hot-rim), var(--panel-lift-hover);
}
.product-card:hover .product-card__img { transform: scale(1.03); }
.product-card__stage::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 100%;
background: linear-gradient(180deg, rgba(0,0,0,0) 62%, rgba(6,6,6,0.75) 100%);
z-index: 1;
pointer-events: none;
}
.product-card__stage::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 4px;
background: linear-gradient(90deg, rgba(255,122,46,0) 0%, rgba(255,122,46,0.6) 50%, rgba(255,122,46,0) 100%);
z-index: 2;
filter: blur(3px);
}
/* -- Reconciled from family 13997 canonical 12840:tf-product-card-2 -- */
/* Panel-seam kept as a clean ember hairline + soft glow — the shadow
channels above/below were removed 2026-07-07 because they read as a
second seam next to the ember line rather than a physical join. */
/* Cards read as raised plates — beefier chrome top edge + deeper cast shadow. */
.core-card,
.product-card,
.faction-tile,
.mission-panel,
.testimonial,
.brand-story__panel {
box-shadow:
inset 0 1px 0 rgba(250,250,250,0.16),
inset 0 -1px 0 rgba(0,0,0,0.55),
0 10px 28px -10px rgba(0,0,0,0.95),
0 2px 6px -2px rgba(0,0,0,0.7);
position: relative;
}
.product-card:hover {
box-shadow: var(--panel-lift-hover);
transform: translateY(-3px);
}
.product-card--featured:hover {
box-shadow: var(--ember-hot-rim), var(--panel-lift-hover);
}
.product-card:hover .product-card__img { transform: scale(1.03); }
.product-card__stage::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 100%;
background: linear-gradient(180deg, rgba(0,0,0,0) 62%, rgba(6,6,6,0.75) 100%);
z-index: 1;
pointer-events: none;
}
.product-card__stage::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 4px;
background: linear-gradient(90deg, rgba(255,122,46,0) 0%, rgba(255,122,46,0.6) 50%, rgba(255,122,46,0) 100%);
z-index: 2;
filter: blur(3px);
}
.product-card {
background: var(--bg-patterned-card);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
box-shadow: var(--panel-lift);
display: flex;
flex-direction: column;
transition: all 0.3s ease;
position: relative;
}
.product-card:hover {
box-shadow: var(--panel-lift-hover), 0 0 32px rgba(255,122,46,0.2);
transform: translateY(-4px);
}
.product-card--hot { box-shadow: var(--panel-lift), var(--ember-hot-rim); }
.product-card--hot:hover { box-shadow: var(--panel-lift-hover), var(--ember-hot-rim), 0 0 40px rgba(255,122,46,0.4); }
.product-card__media {
position: relative;
aspect-ratio: 1/1;
background-color: #0a0a0a;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.product-card__badge::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--ember);
box-shadow: 0 0 8px rgba(255,122,46,0.8);
}
.product-card__badge--low::before {
background: var(--ember-glow);
}
.product-card__body {
background: var(--hull-panel-lift);
padding: 24px 28px 28px;
display: flex;
flex-direction: column;
flex: 1;
}
.product-card__meta {
font-family: var(--font-display);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--chrome-dim);
margin-bottom: 10px;
}
.product-card__name {
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--chrome-highlight);
margin-bottom: 14px;
line-height: 1.1;
}
.product-card__specs {
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px dotted rgba(184,176,166,0.2);
}
.product-card__spec {
display: flex;
justify-content: space-between;
align-items: baseline;
font-family: var(--font-body);
font-size: 12px;
padding: 4px 0;
}
.product-card__spec-label {
color: var(--chrome-dim);
text-transform: uppercase;
letter-spacing: 0.1em;
font-family: var(--font-display);
}
.product-card__spec-value {
color: var(--chrome-warm);
font-family: var(--font-display);
font-weight: 500;
font-variant-numeric: tabular-nums;
}
.product-card__foot {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
}
.product-card__price {
font-family: var(--font-display);
font-size: 26px;
font-weight: 600;
color: var(--ember);
font-variant-numeric: tabular-nums;
}
.product-card__cta {
font-family: var(--font-display);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--chrome-warm);
text-decoration: none;
padding-bottom: 4px;
border-bottom: 1px solid var(--ember);
transition: color 0.2s;
}
.product-card__cta:hover { color: var(--ember); }
/* -- Reconciled from family 14007 canonical 12913:tf-stock-status-chip -- */
:root {
/* Ember ombre */
--ember-glow: #FFB347;
--ember-bright: #FF9540;
--ember: #FF7A2E;
--ember-forge: #E85D18;
--ember-deep: #D14810;
--ember-smoulder: #8B2E08;
--ember-scar: #5A1A00;
--on-primary-fixed: #2A0800;
/* Hull ladder */
--carbon: #060606;
--void: #0A0A0A;
--charcoal: #141414;
--charcoal-warm: #161412;
--hull-panel: #1A1A1A;
--hull-panel-lift: #242424;
--hull-panel-dark: #0F0F0F;
--hull-chrome-shadow: #2E2E2E;
--hull-edge: #363636;
/* Chrome */
--chrome-highlight: #FAFAFA;
--chrome-glint: #E8E4DD;
--chrome-warm: #F5F0E8;
--chrome-dim: #B8B0A6;
/* Semantic surfaces */
--bg-page: var(--carbon);
--bg-card: var(--hull-panel);
--bg-card-lift: var(--hull-panel-lift);
--bg-card-dark: var(--hull-panel-dark);
--bg-patterned-card: rgba(20, 20, 20, 0.94);
--bg-patterned-tile: rgba(15, 15, 15, 0.90);
/* Text roles */
--text-primary: var(--chrome-warm);
--text-heading: var(--chrome-highlight);
--text-dim: var(--chrome-dim);
--text-on-ember: var(--on-primary-fixed);
--text-accent: var(--ember);
/* Fonts */
--font-display: 'Orbitron', system-ui, sans-serif;
--font-body: 'Onest', system-ui, sans-serif;
/* Type scale */
--type-hero: 128px;
--type-h1: 84px;
--type-h2: 60px;
--type-h3: 40px;
--type-h4: 28px;
--type-body: 16px;
--type-small: 14px;
--type-label: 12px;
/* Spacing */
--space-hero: 160px;
--space-section: 120px;
--space-band: 32px;
--space-card: 32px;
/* Shadows */
--panel-lift: inset 0 1px 0 rgba(250,250,250,0.08), 0 8px 24px -8px rgba(0,0,0,0.9);
--panel-lift-hover: inset 0 1px 0 rgba(250,250,250,0.15), 0 12px 32px -8px rgba(0,0,0,0.95);
--ember-glow-sm: 0 0 16px rgba(255,122,46,0.35);
--ember-glow-md: 0 0 28px rgba(255,122,46,0.5);
--ember-hot-rim: inset 0 0 0 1px rgba(255,122,46,0.6), 0 0 24px rgba(255,122,46,0.5);
--modal-glow: 0 24px 64px -12px rgba(0,0,0,0.9), 0 0 32px rgba(255,122,46,0.2);
}
.product-card__badge {
position: absolute;
top: 16px;
right: 16px;
font-family: var(--font-display);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
padding: 6px 10px;
background: rgba(6,6,6,0.85);
color: var(--ember);
border: 1px solid rgba(255,122,46,0.4);
display: inline-flex;
align-items: center;
gap: 6px;
}
.product-card__badge::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--ember);
box-shadow: 0 0 8px rgba(255,122,46,0.8);
}
.product-card__badge--low {
color: var(--ember-glow);
border-color: rgba(255,179,71,0.5);
}
.product-card__badge--low::before {
background: var(--ember-glow);
}
</style>
</head>
<body>
<!-- =========================================================
Section 1 · Global chrome (header + promo bar)
========================================================= -->
<header class="header">
<div class="header__promo">
<div class="container header__promo-inner">
<span>Global delivery in 7–10 days</span>
<span>24-hour response · Named single point of contact</span>
<span>30-day money-back</span>
</div>
</div>
<div class="header__nav">
<div class="container header__nav-inner">
<a href="/" class="header__brand">ART<span class="header__brand-mark">·</span>SABERS</a>
<nav class="header__menu">
<a href="/lightsabers">Lightsabers</a>
<a href="/lightsabers/by-era">By Era</a>
<a href="/lightsabers/by-character">By Character</a>
<a href="/helmets">Helmets</a>
<a href="/parts">Parts & Accessories</a>
<a href="/deals">Offers</a>
</nav>
<div class="header__utility">
<a href="/support">Support</a>
<a href="/account">Account</a>
<a href="/cart" class="cart">Cart <span class="cart-count">02</span></a>
</div>
</div>
</div>
</header>
<!-- =========================================================
Section 2 · Breadcrumbs
========================================================= -->
<a id="tf-breadcrumb" data-tf-family="breadcrumb" style="display:contents"></a>
<nav class="breadcrumbs">
<div class="container breadcrumbs__inner">
<a href="/lightsabers">Lightsabers</a>
<span class="breadcrumbs__sep">/</span>
<span class="breadcrumbs__current">Duelling Grade</span>
</div>
</nav>
<!-- =========================================================
Section 3 · Cinematic curation hero (carbon, full-bleed impact-shot)
Single-column. Primary CTA is the shop-entry with count.
========================================================= -->
<a id="tf-hero-atmospheric" data-tf-family="hero-atmospheric" style="display:contents"></a>
<section class="curation-hero">
<div class="container curation-hero__inner">
<div class="curation-hero__copy">
<div class="curation-hero__eyebrow">Curation · Built for contact</div>
<h1 class="curation-hero__display">DUELLING GRADE.</h1>
<p class="curation-hero__sub">Built for the impact. Every one.</p>
<div class="curation-hero__ctas">
<a class="btn btn--primary" href="/lightsabers/duelling-grade/shop">Shop all 9 duelling grade hilts <span class="btn__arrow">→</span></a>
<a class="btn btn--ghost" href="#spec">Read the spec</a>
</div>
</div>
</div>
<div class="curation-hero__descriptor">
Nine reinforced hilts <span>·</span> Certified stage-combat spec <span>·</span> One-year impact guarantee
</div>
</section>
<!-- =========================================================
Section 4 · What "Duelling Grade" means (plain charcoal-warm ground)
Editorial split. Nano emitter macro LEFT, prose + checklist + guarantee callout RIGHT.
========================================================= -->
<a id="tf-workshop-split" data-tf-family="workshop-split" style="display:contents"></a>
<section class="section section--plain-charcoal-warm" id="spec">
<div class="container">
<div class="editorial-split">
<div class="editorial-split__media">
<div class="editorial-split__media-caption">Emitter close-up · Duelling Grade reinforced cage</div>
</div>
<div class="editorial-split__prose">
<div class="editorial-split__eyebrow">The spec floor · What certifies a hilt</div>
<h2 class="editorial-split__title">What Duelling Grade means</h2>
<div class="editorial-split__body">
<p>Most replica hilts are display objects. They look right on a shelf, they light up when you press the button, and they sound like a saber. What they aren't built for is the moment when someone else's blade meets yours at full speed — the emitter takes the shock, the blade flexes, the electronics inside get shaken loose. Duelling Grade is what happens when a hilt is engineered from the emitter down for that moment.</p>
<p>Every Duelling Grade hilt in the ARTSABERS catalogue clears the same spec floor: a full-metal machined emitter cage, a reinforced 3.5mm polycarbonate blade rated to real stage-combat contact, an internal chassis that isolates the Saber Core from impact shock, and a sound font pack authored specifically for duelling ignition — sharper clashes, tighter swing profiles, no dead space between hits.</p>
<p>We certify each one before it ships. Not a marketing badge on the packaging — a physical spec floor that hilt has to pass. If your Duelling Grade hilt goes into normal-play contact and something breaks, that's on us to fix.</p>
</div>
<div class="cert-checklist">
<div class="cert-checklist__row">
<span class="cert-checklist__label">Impact rating</span>
<span class="cert-checklist__leader"></span>
<span class="cert-checklist__value">Verified stage-combat spec</span>
</div>
<div class="cert-checklist__row">
<span class="cert-checklist__label">Blade</span>
<span class="cert-checklist__leader"></span>
<span class="cert-checklist__value">3.5mm reinforced polycarbonate</span>
</div>
<div class="cert-checklist__row">
<span class="cert-checklist__label">Emitter</span>
<span class="cert-checklist__leader"></span>
<span class="cert-checklist__value">Full metal machined cage</span>
</div>
<div class="cert-checklist__row">
<span class="cert-checklist__label">Sound font</span>
<span class="cert-checklist__leader"></span>
<span class="cert-checklist__value">Duelling ignition variants</span>
</div>
</div>
<div class="guarantee-callout">
<div class="guarantee-callout__eyebrow">The Duelling Grade guarantee</div>
<p class="guarantee-callout__text">If your Duelling Grade hilt breaks under normal-play contact within a year, we replace it.</p>
</div>
</div>
</div>
</div>
</section>
<!-- =========================================================
Section 5 · Shop-CTA band #1 (small carbon strip)
========================================================= -->
<a id="tf-inpage-cta" data-tf-family="inpage-cta" style="display:contents"></a>
<section class="shop-cta-band">
<div class="container shop-cta-band__inner">
<div class="shop-cta-band__copy">
<div class="shop-cta-band__eyebrow">Ready to browse</div>
<div class="shop-cta-band__headline">Shop all <span>9</span> duelling grade hilts</div>
</div>
<a class="btn btn--primary" href="/lightsabers/duelling-grade/shop">Enter the collection <span class="btn__arrow">→</span></a>
</div>
</section>
<!-- =========================================================
Section 6 · Featured Duelling Grade hilts (patterned Variant F)
3-across large product cards. Anakin featured with ember-hot-rim.
========================================================= -->
<section class="section section--pattern-f">
<div class="container">
<a id="tf-section-eyebrow" data-tf-family="section-eyebrow" style="display:contents"></a>
<div class="section-head">
<div class="section-head__eyebrow">Curated picks · From the Duelling Grade line</div>
<h2 class="section-head__title">Three hilts built for contact</h2>
<p class="section-head__kicker">The three most-requested Duelling Grade hilts in the catalogue — one from the Skywalker arc, one Mandalorian double-blade, one Exclusive.</p>
</div>
<a id="tf-product-grid" data-tf-family="product-grid" style="display:contents"></a>
<div class="product-hilt-grid">
<!-- FEATURED · Anakin EP3 -->
<a id="tf-product-card" data-tf-family="product-card" style="display:contents"></a>
<article class="product-card product-card--hot">
<div class="product-card__media" style="background-image: url('https://nerdworks.uk/wp-content/uploads/2025/08/Anakin-Skywalker-EP3-1.jpg');">
<a id="tf-stock-status-chip" data-tf-family="stock-status-chip" style="display:contents"></a>
<span class="product-card__badge">In stock · Ships today</span>
</div>
<div class="product-card__body">
<div class="product-card__meta">Character · Prequel Era</div>
<h3 class="product-card__name">Anakin Skywalker EP3</h3>
<div class="product-card__specs">
<div class="product-card__spec">
<span class="product-card__spec-label">Saber Core</span>
<span class="product-card__spec-value">Xenopixel V3</span>
</div>
<div class="product-card__spec">
<span class="product-card__spec-label">Blade type</span>
<span class="product-card__spec-value">Neopixel · Duelling</span>
</div>
<div class="product-card__spec">
<span class="product-card__spec-label">Sound fonts</span>
<span class="product-card__spec-value">34 + custom</span>
</div>
</div>
<div class="product-card__foot">
<div class="product-card__price">$459.99</div>
<a href="#" class="product-card__cta">View saber →</a>
</div>
</div>
</article>
<!-- Ordo V2 Double-Bladed -->
<article class="product-hilt">
<div class="product-hilt__media" style="background-image: url('https://nerdworks.uk/wp-content/uploads/2025/08/Ordo-V2-Double-Bladed-Lightsaber-1.jpg');">
<span class="product-hilt__eyebrow-tag">Duelling Grade</span>
</div>
<div class="product-hilt__body">
<div class="product-hilt__meta-top">
<span>Mandalorian · Original design</span>
<span>SKU · AS-ORD-DBL</span>
</div>
<h3 class="product-hilt__name">Ordo V2 Double-Bladed 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">2 × 32" · 3.5mm</span>
</div>
<div class="product-hilt__spec-row">
<span class="product-hilt__spec-label">Emitter</span>
<span class="product-hilt__spec-leader"></span>
<span class="product-hilt__spec-value">Twin machined cages</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">42 · Duelling pack</span>
</div>
</div>
<div class="product-hilt__foot">
<div class="product-hilt__price">$549.99</div>
<a href="/lightsabers/ordo-v2-double-bladed" class="product-hilt__cta">Configure →</a>
</div>
</div>
</article>
<!-- Black Smasher V2 -->
<article class="product-hilt">
<div class="product-hilt__media" style="background-image: url('https://artsabers.com/wp-content/uploads/sites/10/2025/03/Black-Smasher-V2-Lightsaber-Proffie-2.2.jpg');">
<span class="product-hilt__eyebrow-tag">Duelling Grade</span>
</div>
<div class="product-hilt__body">
<div class="product-hilt__meta-top">
<span>ARTSABERS Exclusive</span>
<span>SKU · AS-BSM-V2</span>
</div>
<h3 class="product-hilt__name">Black Smasher V2 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">36" · 3.5mm reinforced</span>
</div>
<div class="product-hilt__spec-row">
<span class="product-hilt__spec-label">Emitter</span>
<span class="product-hilt__spec-leader"></span>
<span class="product-hilt__spec-value">Blacked machined cage</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">38 · Duelling pack</span>
</div>
</div>
<div class="product-hilt__foot">
<div class="product-hilt__price">$389.99</div>
<a href="/lightsabers/black-smasher-v2" class="product-hilt__cta">Configure →</a>
</div>
</div>
</article>
</div>
</div>
</section>
<!-- =========================================================
Section 7 · Shop-CTA band #2 (small carbon strip)
========================================================= -->
<section class="shop-cta-band">
<div class="container shop-cta-band__inner">
<div class="shop-cta-band__copy">
<div class="shop-cta-band__eyebrow">See the full line</div>
<div class="shop-cta-band__headline">Six more duelling hilts in the collection</div>
</div>
<a class="btn btn--primary" href="/lightsabers/duelling-grade/shop">Shop all <span>9</span> duelling hilts <span class="btn__arrow">→</span></a>
</div>
</section>
<!-- =========================================================
Section 8 · Spec sheet (patterned Variant G — asymmetric)
Duelling Grade vs Display Grade compare.
========================================================= -->
<section class="section section--pattern-g">
<div class="container">
<a id="tf-product-tier-comparison" data-tf-family="product-tier-comparison" style="display:contents"></a>
<div class="spec-comparison">
<div class="spec-comparison__title-block">
<div class="spec-comparison__eyebrow">Spec floor · Certified against Display Grade</div>
<h2 class="spec-comparison__title">The Duelling Grade spec sheet</h2>
<p class="spec-comparison__intro">Where a display hilt asks "does it look right on the shelf?", a Duelling Grade hilt asks "does it survive the first clash?" Here's how the two spec floors line up.</p>
</div>
<div class="spec-comparison__table">
<div class="spec-comparison__header">
<span class="spec-comparison__header-label">Specification</span>
<span class="spec-comparison__header-col spec-comparison__header-col--duelling">Duelling Grade</span>
<span class="spec-comparison__header-col spec-comparison__header-col--display">Display Grade</span>
</div>
<div class="spec-comparison__row">
<span class="spec-comparison__row-label">Impact rating</span>
<span class="spec-comparison__row-value spec-comparison__row-value--duelling">Verified stage-combat</span>
<span class="spec-comparison__row-value">Handling only</span>
</div>
<div class="spec-comparison__row">
<span class="spec-comparison__row-label">Blade thickness</span>
<span class="spec-comparison__row-value spec-comparison__row-value--duelling">3.5mm reinforced</span>
<span class="spec-comparison__row-value">2.0mm standard</span>
</div>
<div class="spec-comparison__row">
<span class="spec-comparison__row-label">Emitter frame</span>
<span class="spec-comparison__row-value spec-comparison__row-value--duelling">Full metal machined cage</span>
<span class="spec-comparison__row-value">Alloy shell</span>
</div>
<div class="spec-comparison__row">
<span class="spec-comparison__row-label">Chassis isolation</span>
<span class="spec-comparison__row-value spec-comparison__row-value--duelling">Shock-mounted core</span>
<span class="spec-comparison__row-value">Fixed mount</span>
</div>
<div class="spec-comparison__row">
<span class="spec-comparison__row-label">Weight</span>
<span class="spec-comparison__row-value spec-comparison__row-value--duelling">720–780g</span>
<span class="spec-comparison__row-value">520–580g</span>
</div>
<div class="spec-comparison__row">
<span class="spec-comparison__row-label">Sound font</span>
<span class="spec-comparison__row-value spec-comparison__row-value--duelling">Duelling ignition pack</span>
<span class="spec-comparison__row-value">Standard font library</span>
</div>
<div class="spec-comparison__row">
<span class="spec-comparison__row-label">Warranty</span>
<span class="spec-comparison__row-value spec-comparison__row-value--duelling">1-year impact replacement</span>
<span class="spec-comparison__row-value">30-day money-back</span>
</div>
</div>
</div>
</div>
</section>
<!-- =========================================================
Section 9 · From the arena (plain charcoal, 1 featured quote + archive link)
========================================================= -->
<section class="section" style="background: var(--charcoal);">
<div class="container">
<div class="section-head section-head--center">
<div class="section-head__eyebrow">From the arena · Real duellists</div>
<h2 class="section-head__title">Built for the stage-combat crew</h2>
</div>
<a id="tf-testimonial" data-tf-family="testimonial" style="display:contents"></a>
<div class="featured-testimonial">
<div class="featured-testimonial__rating">
<span class="featured-testimonial__star"></span>
<span class="featured-testimonial__star"></span>
<span class="featured-testimonial__star"></span>
<span class="featured-testimonial__star"></span>
<span class="featured-testimonial__star"></span>
</div>
<p class="featured-testimonial__quote">Six months of weekly LARP battles, one three-day tournament, and the emitter still sits flush. This is the first replica hilt I've owned that actually takes a full-speed hit and asks for another.</p>
<div class="featured-testimonial__attribution">
<span class="featured-testimonial__author">Jonas W. · Berlin, DE</span>
<span class="featured-testimonial__sep">·</span>
<span class="featured-testimonial__sku">Owns · <strong>Anakin EP3 Duelling · $459.99</strong></span>
</div>
<div>
<a href="/lightsabers/duelling-grade/reviews" class="featured-testimonial__archive-link">
Read all 47 duelling grade reviews <span>→</span>
</a>
</div>
</div>
</div>
</section>
<!-- Panel seam glow marks the join into the capture band -->
<div class="panel-seam"></div>
<!-- =========================================================
Section 10 · Warm capture band (mandatory full ombre)
========================================================= -->
<a id="tf-newsletter-signup" data-tf-family="newsletter-signup" style="display:contents"></a>
<section class="capture">
<div class="container">
<div class="capture__inner">
<div class="capture__copy">
<div class="capture__eyebrow">◆ Join the comms</div>
<h2 class="capture__title">From factory floor<br>to your inbox.</h2>
<p class="capture__sub">Get 10% off your first saber, plus early access to new drops, ARTSABERS Exclusives, and the workshop pieces that never make it to the public catalogue.</p>
</div>
<div class="capture__form">
<span class="capture__form-lbl">Comms · Signal In</span>
<input class="capture__form-input" type="email" placeholder="your@email.com">
<button class="capture__form-cta">Open the signal →</button>
<span class="capture__form-fine">One drop a week. Unsubscribe with one click. We never share your details.</span>
</div>
</div>
</div>
</section>
<!-- =========================================================
Section 11 · Footer
========================================================= -->
<footer class="footer">
<div class="container">
<div class="footer__grid">
<div>
<div class="footer__brand">ART<span>·</span>SABERS</div>
<p class="footer__tag">Every character, every Saber Core, every duelling grade — from factory floor to your door.</p>
</div>
<div>
<div class="footer__col-title">Shop</div>
<ul class="footer__list">
<li><a href="/lightsabers">Lightsabers</a></li>
<li><a href="/lightsabers/duelling-grade">Duelling Grade</a></li>
<li><a href="/lightsabers/by-character">By Character</a></li>
<li><a href="/helmets">Helmets</a></li>
<li><a href="/parts">Parts & Accessories</a></li>
</ul>
</div>
<div>
<div class="footer__col-title">Support</div>
<ul class="footer__list">
<li><a href="/support">Contact</a></li>
<li><a href="/shipping">Delivery · 7–10 days</a></li>
<li><a href="/returns">30-day money-back</a></li>
<li><a href="/guarantee">Duelling Grade guarantee</a></li>
<li><a href="/support/faq">FAQ</a></li>
</ul>
</div>
<div>
<div class="footer__col-title">Learn</div>
<ul class="footer__list">
<li><a href="/saber-core">Saber Core tiers</a></li>
<li><a href="/spec/duelling-grade">Duelling Grade spec</a></li>
<li><a href="/spec/xenoconfigurator">XenoConfigurator app</a></li>
<li><a href="/blog">Journal</a></li>
</ul>
</div>
<div>
<div class="footer__col-title">Brand</div>
<ul class="footer__list">
<li><a href="/about">Our story</a></li>
<li><a href="/exclusives">ARTSABERS Exclusive</a></li>
<li><a href="https://saber66.co.uk">Saber 66 · UK & EU</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</div>
</div>
<div class="footer__bottom">
<span class="footer__legal">© 2026 ARTSABERS · A Nerdworks brand. Star Wars characters and lore are the intellectual property of Lucasfilm Ltd. ARTSABERS is not affiliated with, endorsed by, or licensed by Lucasfilm.</span>
<span>Latvia 2020 · Global 2024</span>
</div>
</div>
</footer>
<!-- =========================================================
Section 12 · Sticky floating shop-launcher (position: fixed)
========================================================= -->
<a id="tf-other-1" data-tf-family="other" style="display:contents"></a>
<a class="shop-launcher" href="/lightsabers/duelling-grade/shop">
Shop <span class="shop-launcher__count">9</span> duelling hilts
<span class="shop-launcher__arrow">→</span>
</a>
</body>
</html>