<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ARTSABERS — From factory floor to your door.</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;700&display=swap" rel="stylesheet">
<style>
:root {
/* Chromatic — armour hull tones */
--void: #050508;
--hull-shadow: #12121A;
--hull-mid: #1E1E28;
--hull: #2A2A34;
--hull-lit: #3A3A44;
--chrome-shadow: #4A4A54;
--chrome: #8A8A94;
--chrome-hot: #B8B8C0;
/* Chromatic — ember (core light) */
--primary: #F26B36;
--accent: #F26B36;
--ember: #F26B36;
--ember-bright: #FF8850;
--ember-deep: #C04A20;
/* Text roles */
--text: #E8E8EE;
--neutral: #B0B0B8;
--tertiary: #7A94D9;
/* Functional */
--success: #7FC97F;
--error: #BA1A1A;
/* Surface semantics */
--bg-page: var(--void);
--bg-section-void: var(--void);
--bg-section-hull-shadow: var(--hull-shadow);
--bg-section-hull-mid: var(--hull-mid);
--bg-section-hull: var(--hull);
--bg-card: var(--hull);
--bg-card-alt: var(--hull-mid);
--bg-input: var(--hull-shadow);
/* Typography */
--font-display: 'Space Grotesk', system-ui, sans-serif;
--font-body: 'Manrope', system-ui, sans-serif;
/* Type scale */
--size-micro: 11px;
--size-body: 16px;
--size-lead: 20px;
--size-h4: 24px;
--size-h3: 36px;
--size-h2: 60px;
--size-h1: 84px;
--size-display: 128px;
--size-display-hero: 160px;
/* Tracking */
--track-wider: 0.14em;
--track-wide: 0.08em;
/* Radii */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
/* Cinematic shadows */
--shadow-hull: 0 24px 64px -12px rgba(0,0,0,0.8), 0 8px 16px -4px rgba(0,0,0,0.6);
--shadow-hull-lift: 0 32px 80px -16px rgba(0,0,0,0.85), 0 12px 24px -6px rgba(0,0,0,0.65);
/* Ember effects */
--glow-btn: 0 0 24px rgba(242,107,54,0.5);
--glow-btn-hot: 0 0 32px rgba(242,107,54,0.7);
--seam-glow-top: 0 -8px 24px -4px rgba(242,107,54,0.4);
--seam-glow-top-hot: 0 -12px 40px -6px rgba(242,107,54,0.55);
--back-lit-rim: inset 0 0 60px -20px rgba(242,107,54,0.3);
/* Chrome top-edge highlight */
--chrome-top-edge: linear-gradient(180deg, var(--chrome) 0%, var(--hull) 4%);
}
/* ============ Base ============ */
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-body);
font-size: var(--size-body);
line-height: 1.55;
color: var(--text);
background: var(--bg-page);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5 { font-family: var(--font-display); font-weight: 700; margin: 0; letter-spacing: -0.01em; line-height: 1; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
.container {
width: 100%;
max-width: 1360px;
margin: 0 auto;
padding: 0 32px;
}
section { position: relative; }
/* ============ HUD data readout ============ */
.hud {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--size-micro);
letter-spacing: var(--track-wider);
text-transform: uppercase;
color: var(--tertiary);
line-height: 1.2;
}
.hud--neutral { color: var(--neutral); }
/* ============ Buttons ============ */
.btn {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 20px 40px;
border: none;
border-radius: var(--radius-md);
font-family: var(--font-display);
font-weight: 700;
font-size: 14px;
letter-spacing: var(--track-wider);
text-transform: uppercase;
transition: box-shadow .25s ease, transform .25s ease, background .25s ease, border-color .25s ease;
cursor: pointer;
white-space: nowrap;
}
.btn--primary {
background: var(--ember);
color: var(--hull-shadow);
box-shadow: var(--glow-btn);
position: relative;
}
.btn--primary::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: var(--ember-bright);
opacity: 0;
transition: opacity .25s ease;
border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.btn--primary:hover { box-shadow: var(--glow-btn-hot); transform: translateY(-1px); }
.btn--primary:hover::before { opacity: 1; }
.btn--ghost {
background: transparent;
color: var(--ember);
border: 1px solid var(--ember);
box-shadow: 0 0 0 rgba(242,107,54,0);
}
.btn--ghost:hover { box-shadow: var(--glow-btn); background: rgba(242,107,54,0.08); }
.btn__arrow { font-size: 16px; line-height: 1; transform: translateY(-1px); }
/* ============ Section — Promo bar (1) ============ */
.promo-bar {
background: var(--hull-shadow);
padding: 10px 0;
position: relative;
border-bottom: 1px solid var(--ember);
box-shadow: 0 8px 24px -4px rgba(242,107,54,0.35);
}
.promo-bar__inner {
display: flex;
justify-content: center;
align-items: center;
gap: 40px;
flex-wrap: wrap;
}
.promo-bar__item {
color: var(--neutral);
font-family: var(--font-display);
font-size: var(--size-micro);
letter-spacing: var(--track-wider);
text-transform: uppercase;
font-weight: 500;
}
.promo-bar__sep { color: var(--chrome-shadow); }
/* ============ Section — Nav (2) ============ */
.nav {
background: var(--hull-shadow);
padding: 22px 0;
position: sticky;
top: 0;
z-index: 50;
border-bottom: 1px solid var(--chrome-shadow);
box-shadow: 0 1px 0 var(--chrome-hot) inset;
}
.nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
}
.nav__logo {
font-family: var(--font-display);
font-weight: 700;
font-size: 22px;
letter-spacing: var(--track-wider);
color: var(--text);
text-transform: uppercase;
}
.nav__logo span { color: var(--ember); }
.nav__menu {
display: flex;
gap: 32px;
list-style: none;
margin: 0; padding: 0;
}
.nav__link {
color: var(--text);
font-family: var(--font-display);
font-weight: 500;
font-size: 12px;
letter-spacing: var(--track-wider);
text-transform: uppercase;
transition: color .2s ease;
}
.nav__link:hover { color: var(--ember); }
.nav__icons {
display: flex;
gap: 20px;
align-items: center;
}
.nav__icon {
width: 24px; height: 24px;
display: inline-flex;
align-items: center; justify-content: center;
color: var(--neutral);
font-size: 16px;
position: relative;
transition: color .2s ease;
}
.nav__icon:hover { color: var(--text); }
.nav__cart-count {
position: absolute;
top: -6px; right: -8px;
background: var(--ember);
color: var(--hull-shadow);
font-family: var(--font-display);
font-weight: 700;
font-size: 10px;
padding: 2px 5px;
border-radius: 999px;
min-width: 16px;
text-align: center;
line-height: 1;
}
/* ============ Section — Hero (3) ============ */
.hero {
background: var(--void);
height: 100vh;
min-height: 720px;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
border-bottom: 1px solid var(--ember);
box-shadow: inset 0 -80px 120px -60px rgba(242,107,54,0.15);
}
/* subtle starfield */
.hero::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(1px 1px at 12% 22%, rgba(232,232,238,0.7), transparent 60%),
radial-gradient(1px 1px at 68% 8%, rgba(232,232,238,0.5), transparent 60%),
radial-gradient(1px 1px at 84% 62%, rgba(232,232,238,0.6), transparent 60%),
radial-gradient(1px 1px at 32% 78%, rgba(232,232,238,0.5), transparent 60%),
radial-gradient(1px 1px at 48% 44%, rgba(232,232,238,0.4), transparent 60%),
radial-gradient(2px 2px at 92% 30%, rgba(232,232,238,0.6), transparent 60%),
radial-gradient(1px 1px at 22% 58%, rgba(232,232,238,0.5), transparent 60%),
radial-gradient(1200px 600px at 78% 40%, rgba(122,148,217,0.08), transparent 70%),
radial-gradient(900px 500px at 20% 80%, rgba(242,107,54,0.06), transparent 70%);
pointer-events: none;
}
.hero__inner {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 64px;
align-items: center;
width: 100%;
}
.hero__eyebrow {
margin-bottom: 32px;
display: inline-flex;
align-items: center;
gap: 12px;
}
.hero__eyebrow::before {
content: '';
width: 32px; height: 1px;
background: var(--ember);
box-shadow: 0 0 8px rgba(242,107,54,0.6);
}
.hero__title {
font-size: var(--size-display);
line-height: 0.94;
letter-spacing: var(--track-wider);
text-transform: uppercase;
color: var(--text);
margin-bottom: 40px;
font-weight: 700;
}
.hero__title-accent {
color: var(--ember);
text-shadow: 0 0 40px rgba(242,107,54,0.35);
}
.hero__sub {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--size-h4);
color: var(--neutral);
max-width: 520px;
margin-bottom: 48px;
line-height: 1.35;
}
.hero__ctas {
display: flex;
gap: 20px;
align-items: center;
flex-wrap: wrap;
}
.hero__meta {
margin-top: 56px;
display: flex;
gap: 40px;
padding-top: 32px;
border-top: 1px solid var(--chrome-shadow);
flex-wrap: wrap;
}
.hero__meta-item { display: flex; flex-direction: column; gap: 6px; }
.hero__meta-value {
font-family: var(--font-display);
font-weight: 700;
font-size: 28px;
color: var(--text);
}
.hero__stage {
position: relative;
aspect-ratio: 4 / 5;
background: linear-gradient(150deg, var(--hull-shadow) 0%, var(--void) 70%);
border-radius: var(--radius-md);
border: 1px solid var(--chrome-shadow);
box-shadow: var(--shadow-hull-lift), inset 0 0 120px -40px rgba(242,107,54,0.35);
overflow: hidden;
}
.hero__stage::before {
content: '';
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(184,184,192,0.12) 0%, transparent 3%),
radial-gradient(circle at 30% 40%, rgba(242,107,54,0.4), transparent 45%);
pointer-events: none;
}
.hero__stage-caption {
position: absolute;
left: 24px; right: 24px; bottom: 24px;
padding: 16px;
background: rgba(5,5,8,0.65);
backdrop-filter: blur(8px);
border-left: 2px solid var(--ember);
color: var(--neutral);
font-size: 13px;
line-height: 1.4;
font-family: var(--font-body);
}
.hero__stage-caption strong { color: var(--text); font-family: var(--font-display); font-weight: 600; display: block; margin-bottom: 4px; letter-spacing: var(--track-wide); text-transform: uppercase; font-size: 12px; }
/* ============ Section — Trust bar HUD (4) ============ */
.trust {
background: var(--hull-shadow);
padding: 28px 0;
border-top: 1px solid rgba(138,138,148,0.15);
}
.trust__inner {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
}
.trust__item {
padding: 8px 24px;
border-left: 1px solid var(--chrome-shadow);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.trust__item:first-child { border-left: none; }
.trust__item .hud { line-height: 1.5; }
.trust__item strong { color: var(--text); font-weight: 700; letter-spacing: var(--track-wider); }
/* ============ Section — Saber Core (5) ============ */
.saber-core {
background: var(--hull-mid);
padding: 140px 0;
}
.section-head {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 72px;
max-width: 780px;
}
.section-head__eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
}
.section-head__eyebrow::before {
content: '';
width: 24px; height: 1px;
background: var(--ember);
}
.section-head__title {
font-size: var(--size-h1);
line-height: 0.98;
letter-spacing: -0.01em;
color: var(--text);
font-weight: 700;
}
.section-head__sub {
color: var(--neutral);
font-size: var(--size-lead);
line-height: 1.5;
margin-top: 8px;
max-width: 640px;
}
.section-head--center { align-items: center; text-align: center; margin-left: auto; margin-right: auto; }
.core-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 28px;
}
.core-card {
background: var(--hull);
border-radius: var(--radius-md);
padding: 0;
box-shadow: var(--shadow-hull);
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
transition: transform .3s ease, box-shadow .3s ease;
}
.core-card::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--chrome-hot) 30%, var(--chrome-hot) 70%, transparent);
z-index: 3;
}
.core-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hull-lift); }
.core-card:hover .core-card__stage { box-shadow: var(--back-lit-rim); }
.core-card__stage {
aspect-ratio: 4 / 3;
background: linear-gradient(155deg, var(--hull-lit) 0%, var(--hull) 60%, var(--hull-shadow) 100%);
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 28px;
border-bottom: 1px solid var(--chrome-shadow);
transition: box-shadow .3s ease;
overflow: hidden;
}
.core-card__stage::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0; top: 60%;
background: radial-gradient(ellipse at 50% 100%, rgba(242,107,54,0.35), transparent 70%);
pointer-events: none;
}
.core-card__caption {
position: relative; z-index: 2;
color: var(--neutral);
font-size: 11px;
line-height: 1.4;
text-align: center;
padding: 8px 12px;
background: rgba(5,5,8,0.55);
border-left: 2px solid var(--ember);
border-radius: 2px;
}
.core-card__body { padding: 32px 28px 28px; display: flex; flex-direction: column; gap: 18px; flex: 1; }
.core-card__tier {
font-family: var(--font-display);
font-weight: 700;
font-size: 28px;
letter-spacing: var(--track-wide);
text-transform: uppercase;
color: var(--text);
line-height: 1;
}
.core-card__price {
font-family: var(--font-display);
font-weight: 600;
font-size: 20px;
color: var(--ember);
letter-spacing: 0.02em;
}
.core-card__price small { color: var(--neutral); font-size: 12px; font-weight: 500; letter-spacing: var(--track-wide); text-transform: uppercase; margin-right: 8px; }
.core-card__specs {
display: flex; flex-direction: column; gap: 10px;
padding: 16px 0 20px;
border-top: 1px solid var(--chrome-shadow);
margin-top: 4px;
}
.core-card__spec { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.core-card__spec-label { color: var(--neutral); font-size: 11px; letter-spacing: var(--track-wide); text-transform: uppercase; }
.core-card__spec-val { font-family: var(--font-display); font-weight: 500; font-size: 11px; letter-spacing: var(--track-wider); text-transform: uppercase; color: var(--tertiary); }
.core-card__cta {
background: transparent;
color: var(--ember);
border: 1px solid var(--ember);
padding: 14px 20px;
border-radius: var(--radius-md);
font-family: var(--font-display);
font-weight: 700;
font-size: 12px;
letter-spacing: var(--track-wider);
text-transform: uppercase;
text-align: center;
transition: box-shadow .25s ease, background .25s ease;
margin-top: auto;
display: block;
}
.core-card__cta:hover { box-shadow: var(--glow-btn); background: rgba(242,107,54,0.08); }
/* ============ Section — Fan favourites (6) ============ */
.products {
background: var(--hull);
padding: 140px 0;
position: relative;
}
.products__header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 72px;
gap: 40px;
flex-wrap: wrap;
}
.products__link {
color: var(--ember);
font-family: var(--font-display);
font-weight: 700;
font-size: 12px;
letter-spacing: var(--track-wider);
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 8px;
padding-bottom: 4px;
border-bottom: 1px solid var(--ember);
}
.products__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.product-card {
background: var(--hull-mid);
border-radius: var(--radius-md);
box-shadow: var(--shadow-hull);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform .3s ease, box-shadow .3s ease;
}
.product-card::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--chrome-hot) 30%, var(--chrome-hot) 70%, transparent);
z-index: 3;
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hull-lift); }
.product-card:hover .product-card__stage { box-shadow: var(--back-lit-rim); }
.product-card__stage {
aspect-ratio: 4 / 5;
background: linear-gradient(155deg, var(--hull-lit) 0%, var(--hull) 45%, var(--hull-shadow) 100%);
position: relative;
display: flex;
align-items: flex-end;
justify-content: center;
padding: 24px;
transition: box-shadow .3s ease;
overflow: hidden;
}
.product-card__stage::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0; top: 55%;
background: radial-gradient(ellipse at 50% 100%, rgba(242,107,54,0.28), transparent 65%);
pointer-events: none;
}
.product-card__tag {
position: absolute;
top: 20px; left: 20px;
z-index: 3;
display: flex; gap: 10px; align-items: center;
}
.product-card__caption {
position: relative; z-index: 2;
color: var(--neutral);
font-size: 11px;
line-height: 1.4;
text-align: center;
padding: 8px 12px;
background: rgba(5,5,8,0.55);
border-left: 2px solid var(--ember);
border-radius: 2px;
max-width: 100%;
}
.product-card__body {
padding: 28px 28px 32px;
display: flex;
flex-direction: column;
gap: 12px;
}
.product-card__badge {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--size-micro);
letter-spacing: var(--track-wider);
text-transform: uppercase;
color: var(--tertiary);
}
.product-card__title {
font-family: var(--font-display);
font-weight: 600;
font-size: 26px;
line-height: 1.1;
color: var(--text);
letter-spacing: -0.005em;
text-transform: none;
}
.product-card__row {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 8px;
gap: 16px;
}
.product-card__price {
font-family: var(--font-display);
font-weight: 700;
font-size: 24px;
color: var(--ember);
letter-spacing: 0.01em;
}
.product-card__rating {
display: flex; align-items: center; gap: 6px;
color: var(--ember);
font-size: 14px;
}
.product-card__rating-count { color: var(--neutral); font-family: var(--font-display); font-size: 11px; letter-spacing: var(--track-wide); text-transform: uppercase; margin-left: 4px; }
/* ============ Section — Character grid (7) ============ */
.characters {
background: var(--hull-shadow);
padding: 140px 0;
}
.char-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 420px;
gap: 24px;
}
.char-tile {
position: relative;
background: linear-gradient(155deg, var(--hull-lit) 0%, var(--hull) 40%, var(--hull-shadow) 100%);
border-radius: var(--radius-md);
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 32px;
box-shadow: var(--shadow-hull);
transition: transform .3s ease, box-shadow .3s ease;
cursor: pointer;
}
.char-tile::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--chrome-hot) 30%, var(--chrome-hot) 70%, transparent);
z-index: 3;
}
.char-tile::after {
content: '';
position: absolute; left: 0; right: 0; bottom: 0; height: 55%;
background: linear-gradient(180deg, transparent, rgba(5,5,8,0.85) 60%, rgba(5,5,8,0.95) 100%);
pointer-events: none;
}
.char-tile__bloom {
content: '';
position: absolute; inset: 0;
background: radial-gradient(ellipse at 30% 40%, rgba(242,107,54,0.18), transparent 55%);
pointer-events: none;
}
.char-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-hull-lift), 0 -12px 32px -8px rgba(242,107,54,0.4); }
.char-tile__meta {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
gap: 8px;
}
.char-tile__label {
font-family: var(--font-display);
font-weight: 700;
font-size: 40px;
letter-spacing: var(--track-wide);
text-transform: uppercase;
color: var(--text);
line-height: 1;
}
.char-tile__count {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--size-micro);
letter-spacing: var(--track-wider);
text-transform: uppercase;
color: var(--tertiary);
}
.char-tile__caption {
position: absolute;
top: 20px; left: 20px; right: 20px;
z-index: 3;
color: var(--neutral);
font-size: 11px;
line-height: 1.4;
padding: 8px 12px;
background: rgba(5,5,8,0.6);
border-left: 2px solid var(--ember);
border-radius: 2px;
}
/* ============ Section — New arrivals (8) ============ */
.new-arrivals {
background: var(--hull-mid);
padding: 140px 0;
}
/* reuses .products__grid and .product-card */
/* ============ Section — USP Mission Control (9) ============ */
.usp {
background: var(--hull-shadow);
padding: 140px 0 160px;
position: relative;
border-top: 1px solid var(--ember);
}
.usp::before {
content: '';
position: absolute; top: -20px; left: 0; right: 0; height: 40px;
background: radial-gradient(ellipse at 50% 100%, rgba(242,107,54,0.5), transparent 70%);
pointer-events: none;
z-index: 2;
}
.usp__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
margin-top: 72px;
}
.usp-panel {
position: relative;
border-radius: var(--radius-md);
overflow: hidden;
min-height: 560px;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 48px;
box-shadow: var(--shadow-hull);
}
.usp-panel::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--chrome-hot) 20%, var(--chrome-hot) 80%, transparent);
z-index: 4;
}
.usp-panel--factory { background: linear-gradient(160deg, var(--hull) 0%, var(--hull-shadow) 100%); }
.usp-panel--support { background: linear-gradient(160deg, var(--hull-mid) 0%, var(--hull-shadow) 100%); }
.usp-panel__bloom {
position: absolute; inset: 0;
background: radial-gradient(ellipse at 20% 30%, rgba(242,107,54,0.22), transparent 60%);
pointer-events: none;
}
.usp-panel__scrim {
position: absolute; left: 0; right: 0; bottom: 0; height: 65%;
background: linear-gradient(180deg, transparent, rgba(5,5,8,0.85));
pointer-events: none;
}
.usp-panel__caption {
position: absolute;
top: 24px; left: 24px; right: 24px;
z-index: 3;
color: var(--neutral);
font-size: 11px;
line-height: 1.4;
padding: 8px 12px;
background: rgba(5,5,8,0.6);
border-left: 2px solid var(--ember);
border-radius: 2px;
}
.usp-panel__content {
position: relative;
z-index: 3;
display: flex;
flex-direction: column;
gap: 16px;
}
.usp-panel__eyebrow {
display: inline-flex; align-items: center; gap: 10px;
}
.usp-panel__eyebrow::before { content: ''; width: 20px; height: 1px; background: var(--ember); }
.usp-panel__title {
font-family: var(--font-display);
font-weight: 700;
font-size: 56px;
line-height: 0.95;
letter-spacing: var(--track-wide);
text-transform: uppercase;
color: var(--text);
}
.usp-panel__body {
color: var(--neutral);
font-size: var(--size-lead);
line-height: 1.5;
font-weight: 400;
max-width: 480px;
}
.usp__telemetry {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 48px;
padding: 24px 32px;
background: var(--hull-mid);
border-radius: var(--radius-md);
border-left: 2px solid var(--ember);
box-shadow: var(--shadow-hull), inset 0 0 40px -20px rgba(242,107,54,0.2);
}
.usp__telemetry-item {
display: flex; flex-direction: column; gap: 4px;
padding: 0 24px;
border-left: 1px solid var(--chrome-shadow);
}
.usp__telemetry-item:first-child { border-left: none; padding-left: 0; }
.usp__telemetry-key { color: var(--neutral); font-family: var(--font-display); font-size: 10px; letter-spacing: var(--track-wider); text-transform: uppercase; }
.usp__telemetry-val { color: var(--tertiary); font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: var(--track-wider); text-transform: uppercase; }
.usp__cta { margin-top: 48px; }
/* ============ Section — Reviews (10) ============ */
.reviews {
background: var(--hull);
padding: 140px 0;
}
.reviews__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.review-card {
background: var(--hull-mid);
border-radius: var(--radius-md);
padding: 40px 36px;
box-shadow: var(--shadow-hull);
position: relative;
display: flex;
flex-direction: column;
gap: 20px;
}
.review-card::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--chrome-hot) 20%, var(--chrome-hot) 80%, transparent);
}
.review-card__stars {
color: var(--ember);
font-size: 18px;
letter-spacing: 4px;
}
.review-card__quote {
color: var(--text);
font-size: 17px;
line-height: 1.55;
font-weight: 500;
font-family: var(--font-body);
flex: 1;
}
.review-card__attrib {
display: flex; flex-direction: column; gap: 4px;
padding-top: 20px;
border-top: 1px solid var(--chrome-shadow);
}
.review-card__name {
font-family: var(--font-display);
font-weight: 600;
font-size: 13px;
letter-spacing: var(--track-wider);
text-transform: uppercase;
color: var(--tertiary);
}
.review-card__meta {
font-family: var(--font-display);
font-size: 11px;
letter-spacing: var(--track-wide);
text-transform: uppercase;
color: var(--neutral);
}
/* ============ Section — Brand story (11) ============ */
.story {
background: var(--void);
padding: 0;
}
.story__grid {
display: grid;
grid-template-columns: 1.15fr 1fr;
min-height: 640px;
align-items: stretch;
}
.story__stage {
position: relative;
background: linear-gradient(160deg, var(--hull-shadow) 0%, var(--void) 100%);
overflow: hidden;
}
.story__stage::after {
content: '';
position: absolute; inset: 0;
background: radial-gradient(ellipse at 40% 60%, rgba(242,107,54,0.22), transparent 60%);
pointer-events: none;
}
.story__caption {
position: absolute;
left: 32px; right: 32px; bottom: 32px;
z-index: 2;
color: var(--neutral);
font-size: 11px;
line-height: 1.4;
padding: 12px 14px;
background: rgba(5,5,8,0.7);
border-left: 2px solid var(--ember);
border-radius: 2px;
max-width: 480px;
}
.story__panel {
background: var(--hull);
padding: 96px 72px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 24px;
position: relative;
border-left: 1px solid var(--ember);
box-shadow: inset 8px 0 24px -6px rgba(242,107,54,0.3);
}
.story__panel::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, var(--chrome-hot) 0%, transparent 70%);
}
.story__title {
font-family: var(--font-display);
font-weight: 700;
font-size: 52px;
line-height: 1;
letter-spacing: -0.01em;
color: var(--text);
}
.story__body {
color: var(--neutral);
font-size: var(--size-lead);
line-height: 1.55;
max-width: 480px;
}
.story__cta { align-self: flex-start; margin-top: 16px; }
/* ============ Section — Email capture (12) ============ */
.email-capture {
background: var(--hull-mid);
padding: 140px 0;
}
.email-capture__panel {
max-width: 780px;
margin: 0 auto;
background: var(--hull);
padding: 72px 64px;
border-radius: var(--radius-md);
box-shadow: var(--shadow-hull-lift), inset 0 0 80px -30px rgba(242,107,54,0.25);
text-align: center;
position: relative;
}
.email-capture__panel::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--chrome-hot) 20%, var(--chrome-hot) 80%, transparent);
}
.email-capture__eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.email-capture__eyebrow::before { content: ''; width: 20px; height: 1px; background: var(--ember); }
.email-capture__title {
font-family: var(--font-display);
font-weight: 700;
font-size: 60px;
line-height: 1;
letter-spacing: var(--track-wide);
text-transform: uppercase;
color: var(--text);
margin-bottom: 20px;
}
.email-capture__sub {
color: var(--neutral);
font-size: var(--size-lead);
max-width: 480px;
margin: 0 auto 40px;
line-height: 1.5;
}
.email-capture__form {
display: flex;
gap: 16px;
max-width: 560px;
margin: 0 auto;
}
.email-capture__input {
flex: 1;
background: var(--hull-shadow);
border: none;
border-bottom: 1px solid var(--chrome-shadow);
padding: 18px 20px;
color: var(--text);
font-family: var(--font-body);
font-size: 15px;
outline: none;
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
transition: border-color .2s ease, box-shadow .2s ease;
}
.email-capture__input::placeholder { color: var(--neutral); }
.email-capture__input:focus {
border-bottom-color: var(--ember);
box-shadow: 0 4px 20px -4px rgba(242,107,54,0.4);
}
/* ============ Section — Footer (13) ============ */
.footer {
background: var(--void);
padding: 100px 0 40px;
border-top: 1px solid var(--chrome-shadow);
box-shadow: 0 1px 0 var(--chrome-hot) inset;
}
.footer__grid {
display: grid;
grid-template-columns: 1.4fr repeat(4, 1fr);
gap: 40px;
margin-bottom: 72px;
}
.footer__brand-col { display: flex; flex-direction: column; gap: 20px; }
.footer__logo {
font-family: var(--font-display);
font-weight: 700;
font-size: 24px;
letter-spacing: var(--track-wider);
color: var(--text);
text-transform: uppercase;
}
.footer__logo span { color: var(--ember); }
.footer__tag {
color: var(--neutral);
font-size: 14px;
line-height: 1.55;
max-width: 280px;
}
.footer__col h5 {
font-family: var(--font-display);
font-weight: 700;
font-size: 11px;
letter-spacing: var(--track-wider);
text-transform: uppercase;
color: var(--tertiary);
margin-bottom: 20px;
}
.footer__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.footer__link { color: var(--neutral); font-size: 14px; transition: color .2s ease; }
.footer__link:hover { color: var(--text); }
.footer__socials { display: flex; gap: 14px; margin-top: 8px; }
.footer__social {
width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--chrome-shadow);
border-radius: var(--radius-sm);
color: var(--neutral);
font-size: 12px;
font-family: var(--font-display);
font-weight: 700;
letter-spacing: var(--track-wide);
transition: border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.footer__social:hover { border-color: var(--ember); color: var(--ember); box-shadow: 0 0 12px rgba(242,107,54,0.3); }
.footer__bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 32px;
border-top: 1px solid var(--chrome-shadow);
gap: 24px;
flex-wrap: wrap;
}
.footer__pay { display: flex; gap: 14px; align-items: center; }
.footer__pay-item {
background: var(--hull-shadow);
border: 1px solid var(--chrome-shadow);
color: var(--neutral);
font-family: var(--font-display);
font-weight: 700;
font-size: 10px;
letter-spacing: var(--track-wide);
padding: 6px 12px;
border-radius: var(--radius-sm);
text-transform: uppercase;
}
.footer__legal {
color: var(--neutral);
font-family: var(--font-display);
font-size: 11px;
letter-spacing: var(--track-wide);
text-transform: uppercase;
}
.footer__legal-mark { color: var(--tertiary); }
/* ============ Responsive ============ */
@media (max-width: 1120px) {
:root {
--size-display: 96px;
--size-h1: 64px;
--size-h2: 48px;
}
.hero__inner { grid-template-columns: 1fr; gap: 40px; }
.hero__stage { max-width: 560px; margin: 0 auto; }
.core-grid { grid-template-columns: repeat(2, 1fr); }
.products__grid, .reviews__grid { grid-template-columns: repeat(2, 1fr); }
.char-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 380px; }
.story__grid { grid-template-columns: 1fr; }
.story__stage { min-height: 460px; }
.story__panel { padding: 72px 40px; border-left: none; border-top: 1px solid var(--ember); box-shadow: inset 0 8px 24px -6px rgba(242,107,54,0.3); }
.story__panel::before { background: linear-gradient(90deg, transparent, var(--chrome-hot) 30%, transparent); }
.usp__grid { grid-template-columns: 1fr; }
.footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
:root {
--size-display: 64px;
--size-h1: 48px;
--size-h2: 36px;
--size-h4: 20px;
}
.container { padding: 0 20px; }
.nav__menu { display: none; }
.hero { min-height: 640px; padding: 80px 0; }
.hero__title { font-size: 60px; }
.hero__sub { font-size: 18px; }
.hero__ctas { flex-direction: column; align-items: stretch; }
.btn { justify-content: center; padding: 18px 28px; font-size: 12px; }
.hero__meta { gap: 24px; }
.hero__meta-value { font-size: 22px; }
.trust__inner { grid-template-columns: 1fr; gap: 4px; }
.trust__item { border-left: none; border-top: 1px solid var(--chrome-shadow); padding: 14px 0; }
.trust__item:first-child { border-top: none; }
.saber-core, .products, .new-arrivals, .characters, .usp, .reviews, .email-capture { padding: 88px 0; }
.core-grid { grid-template-columns: 1fr; }
.products__grid, .reviews__grid { grid-template-columns: 1fr; }
.char-grid { grid-template-columns: 1fr; grid-auto-rows: 340px; }
.section-head__title { font-size: 40px; }
.usp-panel { min-height: 460px; padding: 32px 28px; }
.usp-panel__title { font-size: 38px; }
.usp__telemetry { grid-template-columns: 1fr; padding: 20px 24px; gap: 14px; }
.usp__telemetry-item { padding: 12px 0; border-left: none; border-top: 1px solid var(--chrome-shadow); }
.usp__telemetry-item:first-child { border-top: none; padding-top: 0; }
.story__panel { padding: 56px 28px; }
.story__title { font-size: 38px; }
.email-capture__panel { padding: 48px 28px; }
.email-capture__title { font-size: 40px; }
.email-capture__form { flex-direction: column; }
.footer__grid { grid-template-columns: 1fr; gap: 40px; }
.footer__bottom { flex-direction: column; align-items: flex-start; }
.promo-bar__inner { gap: 12px; }
.promo-bar__sep { display: none; }
}
</style>
</head>
<body>
<!-- =============================================================
1. PROMO BAR
============================================================= -->
<div class="promo-bar">
<div class="container">
<div class="promo-bar__inner">
<span class="promo-bar__item">Free shipping</span>
<span class="promo-bar__sep">·</span>
<span class="promo-bar__item">New drops every week</span>
<span class="promo-bar__sep">·</span>
<span class="promo-bar__item">Global delivery in 7–10 days</span>
</div>
</div>
</div>
<!-- =============================================================
2. NAVIGATION
============================================================= -->
<nav class="nav">
<div class="container">
<div class="nav__inner">
<a href="#" class="nav__logo">ART<span>SABERS</span></a>
<ul class="nav__menu">
<li><a href="#" class="nav__link">Lightsabers</a></li>
<li><a href="#" class="nav__link">Cosplay Helmets</a></li>
<li><a href="#" class="nav__link">Parts & Accessories</a></li>
<li><a href="#" class="nav__link">Offers & Deals</a></li>
<li><a href="#" class="nav__link">Blog</a></li>
</ul>
<div class="nav__icons">
<a href="#" class="nav__icon" aria-label="Search">🔍</a>
<a href="#" class="nav__icon" aria-label="Account">○</a>
<a href="#" class="nav__icon" aria-label="Wishlist">♡</a>
<a href="#" class="nav__icon" aria-label="Cart">▢<span class="nav__cart-count">2</span></a>
</div>
</div>
</div>
</nav>
<!-- =============================================================
3. HERO — CINEMATIC KEY ART (100vh)
============================================================= -->
<section class="hero">
<div class="container">
<div class="hero__inner">
<div>
<div class="hero__eyebrow">
<span class="hud">ARTSABERS · Factory floor to your door</span>
</div>
<h1 class="hero__title">Every saber.<br>Every core.<br><span class="hero__title-accent">Every duelling grade.</span></h1>
<p class="hero__sub">Hundreds to choose from — every character, every Saber Core tier, every duelling grade. Direct from the factory, in your hands in 7–10 days.</p>
<div class="hero__ctas">
<a href="#" class="btn btn--primary">Browse the catalogue <span class="btn__arrow">→</span></a>
<a href="#" class="btn btn--ghost">Explore Saber Cores</a>
</div>
<div class="hero__meta">
<div class="hero__meta-item">
<span class="hud hud--neutral">Catalogue</span>
<span class="hero__meta-value">1,100 sabers</span>
</div>
<div class="hero__meta-item">
<span class="hud hud--neutral">Delivery window</span>
<span class="hero__meta-value">7–10 days</span>
</div>
<div class="hero__meta-item">
<span class="hud hud--neutral">CS response</span>
<span class="hero__meta-value">Under 24h</span>
</div>
</div>
</div>
<div class="hero__stage" aria-hidden="true">
<div class="hero__stage-caption">
<strong>Hero photograph</strong>
Starkiller SE dramatically side-lit against a deep-space void — ember rim-light catching the chrome pommel, subtle starfield behind, hilt tilted 45°. Full-bleed cinema key-art energy.
</div>
</div>
</div>
</div>
</section>
<!-- =============================================================
4. TRUST BAR — HUD TELEMETRY
============================================================= -->
<section class="trust">
<div class="container">
<div class="trust__inner">
<div class="trust__item">
<span class="hud">Global delivery · <strong>7–10 days</strong></span>
</div>
<div class="trust__item">
<span class="hud">Real CS · <strong>24-hr response</strong></span>
</div>
<div class="trust__item">
<span class="hud"><strong>1,100 sabers</strong> in catalogue</span>
</div>
<div class="trust__item">
<span class="hud"><strong>30-day</strong> money-back</span>
</div>
</div>
</div>
</section>
<!-- =============================================================
5. CHOOSE YOUR SABER CORE — SPEC HOLOGRAM
============================================================= -->
<section class="saber-core">
<div class="container">
<div class="section-head">
<div class="section-head__eyebrow">
<span class="hud">Step 01 · Choose your core</span>
</div>
<h2 class="section-head__title">Four Saber Cores.<br>Every duelling grade.</h2>
<p class="section-head__sub">The Saber Core is the electronics inside the hilt — the soundboard, the sound-font engine, and how the blade lights up. Every Core we sell carries Bluetooth app connectivity and infinite blade colours as standard, even at entry tier.</p>
</div>
<div class="core-grid">
<article class="core-card">
<div class="core-card__stage" aria-hidden="true">
<div class="core-card__caption"><strong style="display:block;color:var(--text);font-family:var(--font-display);font-weight:600;font-size:11px;letter-spacing:var(--track-wide);text-transform:uppercase;margin-bottom:4px;">S-RGB core close-up</strong>Baselit blade emitter close-up, ember rim on the chrome bezel.</div>
</div>
<div class="core-card__body">
<span class="hud">Entry · Baselit</span>
<h3 class="core-card__tier">S-RGB</h3>
<div class="core-card__price"><small>From</small>$89</div>
<div class="core-card__specs">
<div class="core-card__spec"><span class="core-card__spec-label">Blade type</span><span class="core-card__spec-val">Baselit · RGB</span></div>
<div class="core-card__spec"><span class="core-card__spec-label">Sound fonts</span><span class="core-card__spec-val">12 loaded</span></div>
<div class="core-card__spec"><span class="core-card__spec-label">App</span><span class="core-card__spec-val">XenoConfigurator</span></div>
<div class="core-card__spec"><span class="core-card__spec-label">Colours</span><span class="core-card__spec-val">Infinite</span></div>
</div>
<a href="#" class="core-card__cta">Read specs →</a>
</div>
</article>
<article class="core-card">
<div class="core-card__stage" aria-hidden="true">
<div class="core-card__caption"><strong style="display:block;color:var(--text);font-family:var(--font-display);font-weight:600;font-size:11px;letter-spacing:var(--track-wide);text-transform:uppercase;margin-bottom:4px;">RGB-X core close-up</strong>Upgraded baselit emitter, chrome collar catching orange rim-light.</div>
</div>
<div class="core-card__body">
<span class="hud">Mid · Baselit +</span>
<h3 class="core-card__tier">RGB-X</h3>
<div class="core-card__price"><small>From</small>$149</div>
<div class="core-card__specs">
<div class="core-card__spec"><span class="core-card__spec-label">Blade type</span><span class="core-card__spec-val">Baselit · RGB-X</span></div>
<div class="core-card__spec"><span class="core-card__spec-label">Sound fonts</span><span class="core-card__spec-val">18 loaded</span></div>
<div class="core-card__spec"><span class="core-card__spec-label">App</span><span class="core-card__spec-val">XenoConfigurator</span></div>
<div class="core-card__spec"><span class="core-card__spec-label">Duelling</span><span class="core-card__spec-val">Light · Heavy</span></div>
</div>
<a href="#" class="core-card__cta">Read specs →</a>
</div>
</article>
<article class="core-card">
<div class="core-card__stage" aria-hidden="true">
<div class="core-card__caption"><strong style="display:block;color:var(--text);font-family:var(--font-display);font-weight:600;font-size:11px;letter-spacing:var(--track-wide);text-transform:uppercase;margin-bottom:4px;">Xenopixel V3 close-up</strong>Pixel-blade emitter alight, individual pixels visible as a chain of ember dots.</div>
</div>
<div class="core-card__body">
<span class="hud">Pro · Pixel blade</span>
<h3 class="core-card__tier">Xenopixel V3</h3>
<div class="core-card__price"><small>From</small>$299</div>
<div class="core-card__specs">
<div class="core-card__spec"><span class="core-card__spec-label">Blade type</span><span class="core-card__spec-val">Neopixel · V3</span></div>
<div class="core-card__spec"><span class="core-card__spec-label">Sound fonts</span><span class="core-card__spec-val">34 loaded</span></div>
<div class="core-card__spec"><span class="core-card__spec-label">Effects</span><span class="core-card__spec-val">Blaster · Lock-up</span></div>
<div class="core-card__spec"><span class="core-card__spec-label">Duelling</span><span class="core-card__spec-val">Heavy grade</span></div>
</div>
<a href="#" class="core-card__cta">Read specs →</a>
</div>
</article>
<article class="core-card">
<div class="core-card__stage" aria-hidden="true">
<div class="core-card__caption"><strong style="display:block;color:var(--text);font-family:var(--font-display);font-weight:600;font-size:11px;letter-spacing:var(--track-wide);text-transform:uppercase;margin-bottom:4px;">Proffie 2.2 close-up</strong>Fully-programmable pixel emitter, chrome switch-plate ember-lit.</div>
</div>
<div class="core-card__body">
<span class="hud">Flagship · Programmable</span>
<h3 class="core-card__tier">Proffie 2.2</h3>
<div class="core-card__price"><small>From</small>$499</div>
<div class="core-card__specs">
<div class="core-card__spec"><span class="core-card__spec-label">Blade type</span><span class="core-card__spec-val">Neopixel · Full</span></div>
<div class="core-card__spec"><span class="core-card__spec-label">Sound fonts</span><span class="core-card__spec-val">Unlimited</span></div>
<div class="core-card__spec"><span class="core-card__spec-label">Firmware</span><span class="core-card__spec-val">Open source</span></div>
<div class="core-card__spec"><span class="core-card__spec-label">Duelling</span><span class="core-card__spec-val">Heavy grade</span></div>
</div>
<a href="#" class="core-card__cta">Read specs →</a>
</div>
</article>
</div>
</div>
</section>
<!-- =============================================================
6. FAN FAVOURITES — SPECIMEN SHOWCASE
============================================================= -->
<section class="products">
<div class="container">
<div class="products__header">
<div class="section-head" style="margin-bottom:0;">
<div class="section-head__eyebrow">
<span class="hud">Bestsellers · Fan favourites</span>
</div>
<h2 class="section-head__title">The ones fans keep coming back to.</h2>
</div>
<a href="#" class="products__link">All bestsellers →</a>
</div>
<div class="products__grid">
<article class="product-card">
<div class="product-card__stage" aria-hidden="true">
<div class="product-card__tag"><span class="hud">Xenopixel V3</span></div>
<div class="product-card__caption">Ahsoka Tano duelling saber, tilted 30° against dark hull, ember rim on the chrome pommel, blade unlit.</div>
</div>
<div class="product-card__body">
<span class="product-card__badge">Saber Core · Xenopixel V3</span>
<h3 class="product-card__title">Clone Wars Ahsoka Tano Duelling</h3>
<div class="product-card__row">
<span class="product-card__price">$534.99</span>
<span class="product-card__rating">★ ★ ★ ★ ★ <span class="product-card__rating-count">128 reviews</span></span>
</div>
</div>
</article>
<article class="product-card">
<div class="product-card__stage" aria-hidden="true">
<div class="product-card__tag"><span class="hud">3 Saber Cores</span></div>
<div class="product-card__caption">Starkiller SE hilt in dramatic side-light, matte-black grip, chrome activation switch catching orange spill.</div>
</div>
<div class="product-card__body">
<span class="product-card__badge">Saber Core · S-RGB · RGB-X · Xenopixel V3</span>
<h3 class="product-card__title">Starkiller SE</h3>
<div class="product-card__row">
<span class="product-card__price">$449.99</span>
<span class="product-card__rating">★ ★ ★ ★ ★ <span class="product-card__rating-count">213 reviews</span></span>
</div>
</div>
</article>
<article class="product-card">
<div class="product-card__stage" aria-hidden="true">
<div class="product-card__tag"><span class="hud">Proffie 2.2</span></div>
<div class="product-card__caption">Darth Vader ROTJ hilt, floating angle, chrome control ring dark-anodised, deep-space void backdrop.</div>
</div>
<div class="product-card__body">
<span class="product-card__badge">Saber Core · Proffie 2.2</span>
<h3 class="product-card__title">Darth Vader EP6 ROTJ</h3>
<div class="product-card__row">
<span class="product-card__price">$619.99</span>
<span class="product-card__rating">★ ★ ★ ★ ★ <span class="product-card__rating-count">94 reviews</span></span>
</div>
</div>
</article>
</div>
</div>
</section>
<!-- =============================================================
7. SHOP BY CHARACTER — MOVIE POSTER GRID
============================================================= -->
<section class="characters">
<div class="container">
<div class="section-head">
<div class="section-head__eyebrow">
<span class="hud">Character · Faction · Era</span>
</div>
<h2 class="section-head__title">Shop by character.</h2>
<p class="section-head__sub">Every named character we carry — forty and counting — grouped by faction and era. Cinematic replicas built to duel or displayed as key art.</p>
</div>
<div class="char-grid">
<div class="char-tile">
<div class="char-tile__bloom"></div>
<div class="char-tile__caption">Jedi robes billowing, blade unlit and gripped low, hooded figure profile against deep-space void.</div>
<div class="char-tile__meta">
<span class="char-tile__label">Jedi</span>
<span class="char-tile__count">42 sabers · Light side</span>
</div>
</div>
<div class="char-tile">
<div class="char-tile__bloom"></div>
<div class="char-tile__caption">Sith cloak hood, crimson glow rising from the hilt just below frame, chrome catches orange rim-light.</div>
<div class="char-tile__meta">
<span class="char-tile__label">Sith</span>
<span class="char-tile__count">38 sabers · Dark side</span>
</div>
</div>
<div class="char-tile">
<div class="char-tile__bloom"></div>
<div class="char-tile__caption">Mandalorian helmet visor reflecting a saber flare, beskar armour plates edge-lit ember.</div>
<div class="char-tile__meta">
<span class="char-tile__label">Mandalorian</span>
<span class="char-tile__count">24 sabers · Bounty era</span>
</div>
</div>
<div class="char-tile">
<div class="char-tile__bloom"></div>
<div class="char-tile__caption">Clone Wars-era hilt catalogue on a hull-plate surface, dramatic side-light, ember spill from behind.</div>
<div class="char-tile__meta">
<span class="char-tile__label">Clone Wars</span>
<span class="char-tile__count">31 sabers · Republic era</span>
</div>
</div>
<div class="char-tile">
<div class="char-tile__bloom"></div>
<div class="char-tile__caption">Original trilogy silhouettes composited against a nebula wash, hilts foregrounded and floating.</div>
<div class="char-tile__meta">
<span class="char-tile__label">Original Trilogy</span>
<span class="char-tile__count">27 sabers · Rebellion era</span>
</div>
</div>
<div class="char-tile">
<div class="char-tile__bloom"></div>
<div class="char-tile__caption">New Republic-era duellist mid-swing, motion held, blade trail suggested by ember bleed only.</div>
<div class="char-tile__meta">
<span class="char-tile__label">New Republic</span>
<span class="char-tile__count">19 sabers · Sequel era</span>
</div>
</div>
</div>
</div>
</section>
<!-- =============================================================
8. NEW ARRIVALS
============================================================= -->
<section class="new-arrivals">
<div class="container">
<div class="products__header">
<div class="section-head" style="margin-bottom:0;">
<div class="section-head__eyebrow">
<span class="hud">Fresh from the factory · This week</span>
</div>
<h2 class="section-head__title">New arrivals.</h2>
</div>
<a href="#" class="products__link">All new drops →</a>
</div>
<div class="products__grid">
<article class="product-card">
<div class="product-card__stage" aria-hidden="true">
<div class="product-card__tag"><span class="hud">New</span><span class="hud">ARTSABERS Exclusive</span></div>
<div class="product-card__caption">Carbon Strike hilt, angular chrome facets, ember light spilling from three seams down the grip.</div>
</div>
<div class="product-card__body">
<span class="product-card__badge">Saber Core · Xenopixel V3</span>
<h3 class="product-card__title">Carbon Strike</h3>
<div class="product-card__row">
<span class="product-card__price">$389.00</span>
<span class="product-card__rating">★ ★ ★ ★ ☆ <span class="product-card__rating-count">First reviews in</span></span>
</div>
</div>
</article>
<article class="product-card">
<div class="product-card__stage" aria-hidden="true">
<div class="product-card__tag"><span class="hud">New</span></div>
<div class="product-card__caption">Dark Hunter hilt, gunmetal finish, ember bleed at the emitter cage, hull-shadow backdrop.</div>
</div>
<div class="product-card__body">
<span class="product-card__badge">Saber Core · Proffie 2.2</span>
<h3 class="product-card__title">Dark Hunter</h3>
<div class="product-card__row">
<span class="product-card__price">$549.00</span>
<span class="product-card__rating">★ ★ ★ ★ ★ <span class="product-card__rating-count">Pre-order</span></span>
</div>
</div>
</article>
<article class="product-card">
<div class="product-card__stage" aria-hidden="true">
<div class="product-card__tag"><span class="hud">New</span></div>
<div class="product-card__caption">Elzar Mann duelling saber, chrome-and-hull finish, blade unlit, subtle nebula bloom behind.</div>
</div>
<div class="product-card__body">
<span class="product-card__badge">Saber Core · Xenopixel V3</span>
<h3 class="product-card__title">Elzar Mann Duelling</h3>
<div class="product-card__row">
<span class="product-card__price">$465.00</span>
<span class="product-card__rating">★ ★ ★ ★ ☆ <span class="product-card__rating-count">First reviews in</span></span>
</div>
</div>
</article>
</div>
</div>
</section>
<!-- =============================================================
9. FACTORY-DIRECT + REAL CS — MISSION CONTROL
============================================================= -->
<section class="usp">
<div class="container">
<div class="section-head section-head--center">
<div class="section-head__eyebrow">
<span class="hud">Mission control · The commitment</span>
</div>
<h2 class="section-head__title" style="text-align:center;">Factory direct.<br>Real customer service.</h2>
<p class="section-head__sub" style="text-align:center;margin-left:auto;margin-right:auto;">Where most factory-direct shops sell-and-forget, we stay. Broader catalogue than any warehouse would carry — and a real person picking up when something needs fixing.</p>
</div>
<div class="usp__grid">
<div class="usp-panel usp-panel--factory">
<div class="usp-panel__bloom"></div>
<div class="usp-panel__scrim"></div>
<div class="usp-panel__caption">Factory-floor photograph: partner workshop bench — ember-lit CNC machinery in dark hull, hilt-in-progress on a jig, chrome catching orange spill from an overhead lamp.</div>
<div class="usp-panel__content">
<div class="usp-panel__eyebrow"><span class="hud">Origin · Factory direct</span></div>
<h3 class="usp-panel__title">Factory direct.</h3>
<p class="usp-panel__body">Every saber ships directly from our partner factory in 7–10 days. Broader catalogue than we could ever warehouse. From factory floor to your door.</p>
</div>
</div>
<div class="usp-panel usp-panel--support">
<div class="usp-panel__bloom"></div>
<div class="usp-panel__scrim"></div>
<div class="usp-panel__caption">Customer-service photograph: headset operator at a dark hull console, ember-lit monitor, chrome edges on the desk hardware, deep-shadow room.</div>
<div class="usp-panel__content">
<div class="usp-panel__eyebrow"><span class="hud">Support · Real humans</span></div>
<h3 class="usp-panel__title">Real customer service.</h3>
<p class="usp-panel__body">24-hour initial response. Named single point of contact through the whole order. We're here when something goes wrong.</p>
</div>
</div>
</div>
<div class="usp__telemetry">
<div class="usp__telemetry-item">
<span class="usp__telemetry-key">Response</span>
<span class="usp__telemetry-val">Under 24h</span>
</div>
<div class="usp__telemetry-item">
<span class="usp__telemetry-key">Support</span>
<span class="usp__telemetry-val">Named SPOC</span>
</div>
<div class="usp__telemetry-item">
<span class="usp__telemetry-key">Origin</span>
<span class="usp__telemetry-val">Factory direct</span>
</div>
</div>
<div class="usp__cta" style="text-align:center;">
<a href="#" class="btn btn--ghost">Read our promise <span class="btn__arrow">→</span></a>
</div>
</div>
</section>
<!-- =============================================================
10. REVIEWS — HULL-PLATE TESTIMONIALS
============================================================= -->
<section class="reviews">
<div class="container">
<div class="section-head">
<div class="section-head__eyebrow">
<span class="hud">Fan reports · From the field</span>
</div>
<h2 class="section-head__title">What fans are saying.</h2>
<p class="section-head__sub">Real reviews from collectors, duelists and cosplayers. Where the platform badge sits once our reviews widget is live.</p>
</div>
<div class="reviews__grid">
<article class="review-card">
<div class="review-card__stars">★ ★ ★ ★ ★</div>
<p class="review-card__quote">“Every character I've wanted — and a few I didn't know existed — all in one catalogue. Ordered a Xenopixel Ahsoka duelling saber. Ten days to my door. Feel-in-the-hand is exactly right.”</p>
<div class="review-card__attrib">
<span class="review-card__name">Marcus T.</span>
<span class="review-card__meta">Verified · Collector · Ohio</span>
</div>
</article>
<article class="review-card">
<div class="review-card__stars">★ ★ ★ ★ ★</div>
<p class="review-card__quote">“My Proffie board glitched two weeks in. Emailed at 11pm my time; had a reply the next morning from someone who actually knew the firmware. Config file sorted by lunchtime. That's the differentiator, right there.”</p>
<div class="review-card__attrib">
<span class="review-card__name">Sofia R.</span>
<span class="review-card__meta">Verified · Duelist · Melbourne</span>
</div>
</article>
<article class="review-card">
<div class="review-card__stars">★ ★ ★ ★ ★</div>
<p class="review-card__quote">“Cosplayed a Mandalorian at C2E2 — saber pulled the whole look together. The bluetooth app is stupidly good. Swapped fonts between panels without ever touching the hilt.”</p>
<div class="review-card__attrib">
<span class="review-card__name">Daniel K.</span>
<span class="review-card__meta">Verified · Cosplayer · Toronto</span>
</div>
</article>
</div>
</div>
</section>
<!-- =============================================================
11. BRAND STORY — CINEMATIC KEY ART
============================================================= -->
<section class="story">
<div class="story__grid">
<div class="story__stage" aria-hidden="true">
<div class="story__caption"><strong style="display:block;color:var(--text);font-family:var(--font-display);font-weight:600;font-size:11px;letter-spacing:var(--track-wide);text-transform:uppercase;margin-bottom:6px;">Brand-story photograph</strong>Founder-portrait energy or workshop-hero shot — wide-frame cinematic, hull-plate backdrop, ember spill from a workbench light off-frame, chrome tools catching orange.</div>
</div>
<div class="story__panel">
<div class="section-head__eyebrow" style="margin-bottom:4px;"><span class="hud">Since 2020 · Latvia to the galaxy</span></div>
<h2 class="story__title">A saber<br>shop built<br>by fans.</h2>
<p class="story__body">Founded in Latvia in 2020, now part of Nerdworks. We sell every replica saber a fan could want — with the customer service most factory-direct shops won't give. Fan-to-fan, from the very first order to the tenth.</p>
<a href="#" class="btn btn--ghost story__cta">Our story <span class="btn__arrow">→</span></a>
</div>
</div>
</section>
<!-- =============================================================
12. EMAIL CAPTURE — SINGLE HULL PANEL
============================================================= -->
<section class="email-capture">
<div class="container">
<div class="email-capture__panel">
<div class="email-capture__eyebrow" style="justify-content:center;"><span class="hud">Comms · New drops · Early access</span></div>
<h2 class="email-capture__title">Join the comms.</h2>
<p class="email-capture__sub">Get 10% off your first saber, plus early access to new drops and ARTSABERS Exclusive designs.</p>
<form class="email-capture__form" onsubmit="return false;">
<input type="email" class="email-capture__input" placeholder="you@somewhere.galaxy" required>
<button type="submit" class="btn btn--primary">Subscribe <span class="btn__arrow">→</span></button>
</form>
</div>
</div>
</section>
<!-- =============================================================
13. FOOTER — DEEP HULL
============================================================= -->
<footer class="footer">
<div class="container">
<div class="footer__grid">
<div class="footer__brand-col">
<a href="#" class="footer__logo">ART<span>SABERS</span></a>
<p class="footer__tag">Every character, every Saber Core, every duelling grade. From factory floor to your door.</p>
<div class="footer__socials">
<a href="#" class="footer__social" aria-label="Instagram">IG</a>
<a href="#" class="footer__social" aria-label="TikTok">TT</a>
<a href="#" class="footer__social" aria-label="YouTube">YT</a>
<a href="#" class="footer__social" aria-label="Facebook">FB</a>
<a href="#" class="footer__social" aria-label="Threads">TH</a>
</div>
</div>
<div class="footer__col">
<h5>Shop</h5>
<ul class="footer__list">
<li><a href="#" class="footer__link">Lightsabers</a></li>
<li><a href="#" class="footer__link">Cosplay Helmets</a></li>
<li><a href="#" class="footer__link">Parts & Accessories</a></li>
<li><a href="#" class="footer__link">Offers & Deals</a></li>
<li><a href="#" class="footer__link">Budget Sabers Under $100</a></li>
</ul>
</div>
<div class="footer__col">
<h5>Support</h5>
<ul class="footer__list">
<li><a href="#" class="footer__link">Contact us</a></li>
<li><a href="#" class="footer__link">Delivery & returns</a></li>
<li><a href="#" class="footer__link">30-day money-back</a></li>
<li><a href="#" class="footer__link">Saber Core guide</a></li>
<li><a href="#" class="footer__link">Track your order</a></li>
</ul>
</div>
<div class="footer__col">
<h5>Company</h5>
<ul class="footer__list">
<li><a href="#" class="footer__link">Our story</a></li>
<li><a href="#" class="footer__link">A Nerdworks brand</a></li>
<li><a href="#" class="footer__link">Blog</a></li>
<li><a href="#" class="footer__link">Affiliates</a></li>
<li><a href="#" class="footer__link">Press</a></li>
</ul>
</div>
<div class="footer__col">
<h5>Connect</h5>
<ul class="footer__list">
<li><a href="#" class="footer__link">Newsletter</a></li>
<li><a href="#" class="footer__link">Discord</a></li>
<li><a href="#" class="footer__link">Instagram</a></li>
<li><a href="#" class="footer__link">TikTok</a></li>
<li><a href="#" class="footer__link">YouTube</a></li>
</ul>
</div>
</div>
<div class="footer__bottom">
<div class="footer__pay">
<span class="footer__pay-item">Visa</span>
<span class="footer__pay-item">Mastercard</span>
<span class="footer__pay-item">Amex</span>
<span class="footer__pay-item">Apple Pay</span>
</div>
<div class="footer__legal">
<span class="footer__legal-mark">A Nerdworks brand</span> · © 2026 ARTSABERS · All rights reserved
</div>
</div>
</div>
</footer>
</body>
</html>