<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ARTSABERS — Every saber. Every Core. Every duelling grade.</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
/* =========================================================
ARTSABERS — Kyber Hull — Homepage
========================================================= */
: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;
/* Chrome / whites */
--chrome-highlight: #FAFAFA;
--chrome-glint: #E8E4DD;
--chrome-warm: #F5F0E8;
--chrome-dim: #B8B0A6;
/* Semantic surface roles */
--bg-hero: var(--carbon);
--bg-footer: var(--carbon);
--bg-section: var(--charcoal);
--bg-section-warm: var(--charcoal-warm);
--bg-section-void: var(--void);
--bg-card: var(--hull-panel);
--bg-card-lift: var(--hull-panel-lift);
--bg-card-recess: var(--hull-panel-dark);
/* Semantic text roles */
--text-primary: var(--chrome-warm);
--text-heading: var(--chrome-highlight);
--text-dim: var(--chrome-dim);
--text-on-ember: var(--on-primary-fixed);
/* Typography */
--font-display: 'Space Grotesk', system-ui, sans-serif;
--font-body: 'Manrope', system-ui, sans-serif;
/* Type scale */
--fs-display: clamp(64px, 9vw, 128px);
--fs-h1: clamp(48px, 6vw, 84px);
--fs-h2: clamp(40px, 4.5vw, 60px);
--fs-h3: clamp(28px, 2.6vw, 40px);
--fs-h4: clamp(20px, 1.7vw, 24px);
--fs-body: 16px;
--fs-label-sm: 12px;
/* Spacing */
--sp-section-y: clamp(96px, 10vw, 160px);
/* Elevation */
--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.16), 0 20px 44px -10px rgba(0,0,0,0.95);
--chrome-top: inset 0 1px 0 rgba(250,250,250,0.36);
--chrome-top-soft: inset 0 1px 0 rgba(250,250,250,0.18);
--panel-recess-bottom: inset 0 -1px 0 rgba(0,0,0,0.85);
--ember-hot-rim: inset 0 0 0 1px rgba(255,122,46,0.55), 0 0 28px rgba(255,122,46,0.45);
--ember-glow-sm: 0 0 16px rgba(255,122,46,0.35);
--ember-glow-md: 0 0 28px rgba(255,122,46,0.55);
}
/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border-radius: 0; }
html { background: var(--carbon); }
body {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.55;
color: var(--text-primary);
background: var(--carbon);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
ul, ol { list-style: none; }
.container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 48px; }
/* =========================================================
PANEL SEAM — light spilling between hull panels
========================================================= */
.panel-seam {
position: relative;
height: 2px;
width: 100%;
background: linear-gradient(90deg, rgba(255,122,46,0.25) 0%, rgba(255,122,46,0.85) 50%, rgba(255,122,46,0.25) 100%);
box-shadow:
0 -14px 40px 0 rgba(255,122,46,0.30),
0 14px 40px 0 rgba(255,122,46,0.50);
z-index: 4;
overflow: visible;
}
/* ==========================================================
HULL CONSTRUCTION — design pass on top of the locked SG.
Every top-level section reads as an assembled hull panel:
substrate grid pattern, chrome-top edge, darker recessed
bottom edge, subtle top-lit/bottom-shadow sheen, physical
rivets at panel corners, richer seam channels.
========================================================== */
/* Substrate grid — a very faint 72px construction grid behind every
section. Reads as "the whole page rests on hull framework" without
competing with content. */
body::before {
content: '';
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
linear-gradient(to right, rgba(96,96,96,0.055) 1px, transparent 1px),
linear-gradient(to bottom, rgba(96,96,96,0.055) 1px, transparent 1px);
background-size: 72px 72px;
}
body > * { position: relative; z-index: 1; }
/* Every top-level section: chrome-top hairline + darker recessed bottom + subtle inset sheen. */
body > section {
position: relative;
isolation: isolate;
box-shadow:
inset 0 1px 0 rgba(250,250,250,0.14),
inset 0 -1px 0 rgba(0,0,0,0.85);
}
body > section::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background: linear-gradient(180deg,
rgba(250,250,250,0.028) 0%,
transparent 8%,
transparent 88%,
rgba(0,0,0,0.32) 100%);
}
body > section > * { position: relative; z-index: 1; }
/* Site footer gets the same panel treatment. */
body > footer.site-footer {
position: relative;
isolation: isolate;
box-shadow: inset 0 1px 0 rgba(250,250,250,0.14);
}
/* Corner rivets — small dark divots at the corners of content sections.
Suggests physical bolts holding the panel to the hull frame. Skips
hero, capture band, promo bar and trust bar (visually busy areas). */
body > section.section::after,
body > section.brand-story::after,
body > footer.site-footer::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 3;
background:
radial-gradient(circle at 32px 16px,
rgba(250,250,250,0.30) 0px,
rgba(20,20,20,0.98) 2px,
transparent 4.5px),
radial-gradient(circle at calc(100% - 32px) 16px,
rgba(250,250,250,0.30) 0px,
rgba(20,20,20,0.98) 2px,
transparent 4.5px),
radial-gradient(circle at 32px calc(100% - 18px),
rgba(250,250,250,0.14) 0px,
rgba(20,20,20,0.95) 2px,
transparent 4.5px),
radial-gradient(circle at calc(100% - 32px) calc(100% - 18px),
rgba(250,250,250,0.14) 0px,
rgba(20,20,20,0.95) 2px,
transparent 4.5px);
}
/* Enhanced panel-seam — dark shadow channels above + below the ember
hairline read as a physical join between plates. The ember still
spills through, but now the seam has visible construction detail. */
.panel-seam::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: -10px;
height: 10px;
background: linear-gradient(180deg,
rgba(0,0,0,0.9) 0%,
rgba(0,0,0,0.4) 55%,
transparent 100%);
pointer-events: none;
z-index: -1;
}
.panel-seam::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -10px;
height: 10px;
background: linear-gradient(180deg,
transparent 0%,
rgba(0,0,0,0.35) 45%,
rgba(0,0,0,0.75) 100%);
pointer-events: none;
z-index: -1;
}
/* Cards get a beefier chrome top edge + deeper cast shadow so raised-plate
rendering reads at a glance. Applied on top of existing card treatments. */
.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;
}
/* Card corner rivets — smaller, only on top corners of larger cards. */
.core-card::before,
.product-card::before,
.mission-panel::before,
.brand-story__panel::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 3;
background:
radial-gradient(circle at 12px 10px,
rgba(250,250,250,0.28) 0px,
rgba(10,10,10,1) 1.5px,
transparent 3px),
radial-gradient(circle at calc(100% - 12px) 10px,
rgba(250,250,250,0.28) 0px,
rgba(10,10,10,1) 1.5px,
transparent 3px);
}
/* Ensure card content sits above the rivet layer. */
.core-card > *,
.product-card > *,
.mission-panel > *,
.brand-story__panel > * { position: relative; z-index: 4; }
/* Reactor hot-spot — a subtle radial ember glow bleeding from the
BOTTOM-LEFT corner of specific sections (charcoal-warm sections
where the ember is meant to peek through more visibly). */
body > section.brand-story::before {
background:
linear-gradient(180deg,
rgba(250,250,250,0.028) 0%,
transparent 8%,
transparent 88%,
rgba(0,0,0,0.32) 100%),
radial-gradient(ellipse 40% 30% at 8% 92%,
rgba(255,122,46,0.12) 0%,
transparent 70%);
}
body > section.section.mission::before {
background:
linear-gradient(180deg,
rgba(250,250,250,0.028) 0%,
transparent 8%,
transparent 88%,
rgba(0,0,0,0.32) 100%),
radial-gradient(ellipse 30% 25% at 92% 88%,
rgba(255,122,46,0.14) 0%,
transparent 70%);
}
/* Hero panel gets an enhanced bottom ember-backlight — a stronger
ember bleed from behind the hero panel's bottom edge, reading as
forge light spilling into the section join. */
body > section.hero {
position: relative;
overflow: hidden;
}
body > section.hero::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 80px;
background: linear-gradient(180deg,
transparent 0%,
rgba(255,122,46,0.12) 55%,
rgba(255,122,46,0.35) 92%,
rgba(255,179,71,0.55) 100%);
pointer-events: none;
z-index: 5;
}
/* ==========================================================
HULL CONSTRUCTION — Design pass 2 (wild mode, palette locked).
Metallic sheens, more reactor spots, hero reactor core, corner
reinforcement L-brackets, panel serial-number tags, trust-bar
plate cells, ember conduit strips, access-hatch corner cuts,
warning hazard stripe, cinematic corner vignette.
========================================================== */
/* Cinematic corner vignette — soft dark at page edges suggesting camera lens. */
body { position: relative; }
html::after {
content: '';
position: fixed;
inset: 0;
z-index: 200;
pointer-events: none;
box-shadow:
inset 0 0 260px 40px rgba(0,0,0,0.65),
inset 0 0 80px 0 rgba(0,0,0,0.35);
}
/* Metallic radial sheens on every section — subtle top-left highlight
suggesting reflected light on curved metal, matched by a bottom-right
shadow suggesting the curvature falling into darkness. */
body > section::before {
background:
linear-gradient(180deg,
rgba(250,250,250,0.032) 0%,
transparent 8%,
transparent 86%,
rgba(0,0,0,0.35) 100%),
radial-gradient(ellipse 42% 34% at 12% 6%,
rgba(250,250,250,0.055) 0%,
transparent 65%),
radial-gradient(ellipse 44% 34% at 88% 94%,
rgba(0,0,0,0.40) 0%,
transparent 65%);
}
/* Extra reactor bloom spots — additional ember hot-glows peeking from behind
panel corners on saber-core, factions, testimonials. */
body > section.section.saber-core::before {
background:
linear-gradient(180deg,
rgba(250,250,250,0.032) 0%, transparent 8%, transparent 86%,
rgba(0,0,0,0.35) 100%),
radial-gradient(ellipse 42% 34% at 12% 6%, rgba(250,250,250,0.055) 0%, transparent 65%),
radial-gradient(ellipse 44% 34% at 88% 94%, rgba(0,0,0,0.40) 0%, transparent 65%),
radial-gradient(ellipse 22% 20% at 96% 15%, rgba(255,122,46,0.25) 0%, rgba(255,122,46,0.06) 40%, transparent 78%);
}
body > section.section.factions::before {
background:
linear-gradient(180deg,
rgba(250,250,250,0.032) 0%, transparent 8%, transparent 86%,
rgba(0,0,0,0.35) 100%),
radial-gradient(ellipse 42% 34% at 12% 6%, rgba(250,250,250,0.055) 0%, transparent 65%),
radial-gradient(ellipse 44% 34% at 88% 94%, rgba(0,0,0,0.40) 0%, transparent 65%),
radial-gradient(ellipse 24% 22% at 4% 55%, rgba(255,122,46,0.22) 0%, rgba(255,122,46,0.05) 42%, transparent 78%),
radial-gradient(ellipse 24% 22% at 96% 55%, rgba(255,122,46,0.22) 0%, rgba(255,122,46,0.05) 42%, transparent 78%);
}
body > section.section.testimonials::before {
background:
linear-gradient(180deg,
rgba(250,250,250,0.032) 0%, transparent 8%, transparent 86%,
rgba(0,0,0,0.35) 100%),
radial-gradient(ellipse 42% 34% at 12% 6%, rgba(250,250,250,0.055) 0%, transparent 65%),
radial-gradient(ellipse 44% 34% at 88% 94%, rgba(0,0,0,0.40) 0%, transparent 65%),
radial-gradient(ellipse 32% 24% at 5% 88%, rgba(255,122,46,0.20) 0%, transparent 78%);
}
/* Trust bar cells render as small hull plates — each cell has chrome-top,
dark bottom, side shadows, and rivets at its top corners. */
.trust-bar__cell {
position: relative;
box-shadow:
inset 0 1px 0 rgba(250,250,250,0.10),
inset 0 -1px 0 rgba(0,0,0,0.65),
inset 1px 0 0 rgba(0,0,0,0.5),
inset -1px 0 0 rgba(0,0,0,0.5);
padding: 24px 32px;
background:
linear-gradient(180deg,
rgba(30,30,30,0.55) 0%,
rgba(10,10,10,0.55) 100%),
linear-gradient(90deg,
transparent 0,
transparent calc(100% - 3px),
rgba(255,122,46,0.35) calc(100% - 3px),
rgba(255,179,71,0.5) calc(100% - 2px),
rgba(255,122,46,0.35) calc(100% - 1px),
transparent calc(100% - 1px),
transparent 100%);
}
.trust-bar__cell:last-child { background: linear-gradient(180deg, rgba(30,30,30,0.55) 0%, rgba(10,10,10,0.55) 100%); }
.trust-bar__cell::before {
content: '';
position: absolute;
top: 7px;
left: 8px;
width: 3.5px;
height: 3.5px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%,
rgba(250,250,250,0.4) 0%,
#0a0a0a 55%,
transparent 100%);
box-shadow: 0 0 0 1px rgba(0,0,0,0.6);
z-index: 2;
}
.trust-bar__cell::after {
content: '';
position: absolute;
top: 7px;
right: 8px;
width: 3.5px;
height: 3.5px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%,
rgba(250,250,250,0.4) 0%,
#0a0a0a 55%,
transparent 100%);
box-shadow: 0 0 0 1px rgba(0,0,0,0.6);
z-index: 2;
}
/* Ember conduit strips — thin ember light strips running vertically on
the LEFT edge of favourites and the RIGHT edge of arrivals. Reads as
reactor conduits carrying forge light down the hull. */
body > section.section.favourites::before {
background:
linear-gradient(180deg,
rgba(250,250,250,0.032) 0%, transparent 8%, transparent 86%,
rgba(0,0,0,0.35) 100%),
radial-gradient(ellipse 42% 34% at 12% 6%, rgba(250,250,250,0.055) 0%, transparent 65%),
radial-gradient(ellipse 44% 34% at 88% 94%, rgba(0,0,0,0.40) 0%, transparent 65%),
linear-gradient(90deg,
rgba(255,122,46,0.42) 0,
rgba(255,179,71,0.55) 2px,
rgba(255,122,46,0.42) 4px,
transparent 4px,
transparent 100%);
box-shadow: inset 4px 0 32px -12px rgba(255,122,46,0.7);
}
body > section.section.arrivals::before {
background:
linear-gradient(180deg,
rgba(250,250,250,0.032) 0%, transparent 8%, transparent 86%,
rgba(0,0,0,0.35) 100%),
radial-gradient(ellipse 42% 34% at 12% 6%, rgba(250,250,250,0.055) 0%, transparent 65%),
radial-gradient(ellipse 44% 34% at 88% 94%, rgba(0,0,0,0.40) 0%, transparent 65%),
linear-gradient(90deg,
transparent 0,
transparent calc(100% - 4px),
rgba(255,122,46,0.42) calc(100% - 4px),
rgba(255,179,71,0.55) calc(100% - 2px),
rgba(255,122,46,0.42) calc(100% - 1px),
transparent 100%);
box-shadow: inset -4px 0 32px -12px rgba(255,122,46,0.7);
}
/* Panel serial-number stencils — small chromatic construction labels
in the top-right corner of content sections. Reads as documentation
markings stamped on the panel. */
body > section.section.saber-core .container,
body > section.section.favourites .container,
body > section.section.factions .container,
body > section.section.arrivals .container,
body > section.section.mission .container,
body > section.section.testimonials .container,
body > section.brand-story .container { position: relative; }
body > section.section.saber-core .container::after { content: 'HULL-01 · SECT-B'; }
body > section.section.favourites .container::after { content: 'HULL-02 · SECT-C'; }
body > section.section.factions .container::after { content: 'HULL-03 · SECT-D · VAULT'; }
body > section.section.arrivals .container::after { content: 'HULL-04 · SECT-E'; }
body > section.section.mission .container::after { content: 'HULL-05 · CTRL'; }
body > section.section.testimonials .container::after { content: 'HULL-06 · LOG'; }
body > section.brand-story .container::after { content: 'HULL-07 · HERITAGE'; }
body > section.section .container::after,
body > section.brand-story .container::after {
position: absolute;
top: -6px;
right: 32px;
font-family: var(--font-display);
font-size: 9px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: rgba(184,176,166,0.5);
padding: 3px 8px;
background: rgba(6,6,6,0.85);
box-shadow: inset 0 1px 0 rgba(255,122,46,0.25);
z-index: 6;
pointer-events: none;
font-variant-numeric: tabular-nums;
}
/* Hero reactor core — huge radial ember bloom BEHIND the hero image,
reading as reactor light shining from the core toward camera. */
body > section.hero::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background:
radial-gradient(circle at 70% 55%,
rgba(255,122,46,0.28) 0%,
rgba(255,122,46,0.10) 25%,
transparent 55%),
linear-gradient(180deg,
rgba(250,250,250,0.020) 0%,
transparent 8%,
transparent 90%,
rgba(0,0,0,0.5) 100%);
mix-blend-mode: screen;
}
/* Corner reinforcement L-brackets on the hero — small ember L-hairlines
at hero corners, reading as reinforcement plating with forge glow. */
body > section.hero { padding-top: 0; }
body > section.hero > .container {
position: relative;
padding-top: 40px !important;
padding-bottom: 40px !important;
}
body > section.hero > .container > .hero__l-tl,
body > section.hero > .container > .hero__l-tr {
position: absolute;
top: 20px;
width: 36px;
height: 36px;
z-index: 8;
pointer-events: none;
}
/* Access-hatch corner cuts on capture band — 45° angled corners suggesting
service hatches, with ember-hot chamfer edges. */
body > section.capture {
position: relative;
clip-path: polygon(
0 32px,
32px 0,
calc(100% - 32px) 0,
100% 32px,
100% calc(100% - 32px),
calc(100% - 32px) 100%,
32px 100%,
0 calc(100% - 32px)
);
}
/* Warning hazard-stripe — subtle diagonal ember-black band above the
capture band, reading as a reactor-cell warning marker. */
.hazard-stripe {
position: relative;
height: 8px;
width: 100%;
background: repeating-linear-gradient(
-45deg,
rgba(255,122,46,0.85) 0,
rgba(255,122,46,0.85) 8px,
rgba(6,6,6,1) 8px,
rgba(6,6,6,1) 16px
);
box-shadow:
0 -6px 20px rgba(255,122,46,0.4),
0 6px 12px rgba(0,0,0,0.7);
z-index: 3;
}
/* ==========================================================
HULL PLATE IMAGERY — Saber Core test.
Real generated hull-plate background replaces the CSS-simulated
panel decoration. Drops metallic sheens, reactor blooms, and
corner rivets on this section — the image supplies all of them.
Keeps chrome-top/bottom edge, dark overlay for card legibility,
and the serial-number stencil.
========================================================== */
body > section.section.saber-core {
background-image: url('https://camcom.dev/generated_imgs/generated-2026-07-07T11-36-20-962Z-v66ssb.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
body > section.section.saber-core::before {
background: linear-gradient(180deg,
rgba(6,6,6,0.35) 0%,
rgba(6,6,6,0.45) 50%,
rgba(6,6,6,0.60) 100%);
}
body > section.section.saber-core::after { display: none; }
body > section.section.saber-core .core-card {
background: rgba(20,20,20,0.94);
backdrop-filter: blur(3px);
}
/* Favourites section — variant B (to be generated), same rules */
body > section.section.favourites {
background-image: url('https://camcom.dev/generated_imgs/generated-2026-07-07T11-38-05-255Z-7f4bm4.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
body > section.section.favourites::before {
background: linear-gradient(180deg,
rgba(6,6,6,0.35) 0%,
rgba(6,6,6,0.45) 50%,
rgba(6,6,6,0.60) 100%);
box-shadow: none;
}
body > section.section.favourites::after { display: none; }
body > section.section.favourites .product-card {
background: rgba(20,20,20,0.94);
backdrop-filter: blur(3px);
}
/* Factions section — variant C (to be generated), same rules */
body > section.section.factions {
background-image: url('https://camcom.dev/generated_imgs/generated-2026-07-07T11-38-50-143Z-4qjp1t.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
body > section.section.factions::before {
background: linear-gradient(180deg,
rgba(6,6,6,0.35) 0%,
rgba(6,6,6,0.45) 50%,
rgba(6,6,6,0.60) 100%);
box-shadow: none;
}
body > section.section.factions::after { display: none; }
body > section.section.factions .faction-tile {
background: rgba(15,15,15,0.92);
backdrop-filter: blur(3px);
}
/* =========================================================
Buttons
========================================================= */
.cta-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 20px 40px;
font-family: var(--font-display);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-on-ember);
background: linear-gradient(180deg, var(--ember-glow) 0%, var(--ember) 50%, var(--ember-deep) 100%);
box-shadow: var(--ember-glow-sm);
transition: box-shadow 200ms ease, transform 200ms ease;
}
.cta-primary:hover { box-shadow: var(--ember-glow-md); transform: translateY(-1px); }
.cta-primary__arrow { display: inline-block; margin-left: 4px; }
.cta-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 18px 34px;
font-family: var(--font-display);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--chrome-warm);
background: transparent;
border: 1px solid rgba(62,62,62,0.65);
transition: background 200ms ease, color 200ms ease, box-shadow 200ms ease;
}
.cta-ghost:hover {
background: var(--hull-panel-lift);
color: var(--chrome-highlight);
box-shadow: var(--chrome-top-soft);
}
/* =========================================================
Eyebrow / Section heading
========================================================= */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--font-display);
font-size: var(--fs-label-sm);
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ember);
}
.eyebrow__idx {
color: var(--chrome-dim);
font-variant-numeric: tabular-nums;
}
.eyebrow__hair {
display: inline-block;
width: 46px;
height: 1px;
background: var(--ember);
opacity: 0.7;
}
.section-title {
font-family: var(--font-display);
font-size: var(--fs-h2);
font-weight: 700;
line-height: 1.05;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-heading);
}
.section-title--sub {
font-family: var(--font-body);
font-size: 17px;
font-weight: 400;
line-height: 1.6;
letter-spacing: 0;
text-transform: none;
color: var(--chrome-dim);
max-width: 620px;
}
.section-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 60px;
margin-bottom: 72px;
}
.section-head__left { max-width: 640px; }
.section-head__left .eyebrow { margin-bottom: 24px; }
.section-head__left .section-title { margin-bottom: 20px; }
.section-head__right {
align-self: flex-end;
text-align: right;
padding-bottom: 6px;
font-family: var(--font-display);
font-size: var(--fs-label-sm);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--chrome-dim);
}
/* Generic section base — every section is a hull panel slab */
.section {
position: relative;
padding: var(--sp-section-y) 0;
box-shadow: var(--chrome-top);
}
/* =========================================================
PROMO BAR
========================================================= */
.promo-bar {
position: relative;
background: var(--charcoal);
padding: 10px 0;
box-shadow:
var(--chrome-top-soft),
inset 0 -1px 0 rgba(255,122,46,0.4),
0 8px 22px -10px rgba(255,122,46,0.55);
z-index: 41;
}
.promo-bar__inner {
display: flex;
justify-content: center;
gap: 42px;
font-family: var(--font-display);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--chrome-dim);
}
.promo-bar__item { display: inline-flex; align-items: center; gap: 42px; }
.promo-bar__dot { color: var(--ember); font-size: 9px; }
/* =========================================================
NAV
========================================================= */
.site-nav {
position: sticky;
top: 0;
background: rgba(20,20,20,0.94);
backdrop-filter: blur(12px);
box-shadow: var(--chrome-top);
z-index: 40;
}
.site-nav__inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 24px 0;
gap: 40px;
}
.site-nav__brand {
font-family: var(--font-display);
font-size: 20px;
font-weight: 700;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--chrome-highlight);
}
.site-nav__brand em {
font-style: normal;
color: var(--ember);
text-shadow: 0 0 12px rgba(255,122,46,0.45);
}
.site-nav__menu {
display: flex;
gap: 44px;
font-family: var(--font-display);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--chrome-warm);
}
.site-nav__menu li { position: relative; padding: 6px 0; }
.site-nav__menu li:hover { color: var(--ember-glow); }
.site-nav__utils {
display: flex;
gap: 26px;
justify-content: flex-end;
align-items: center;
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--chrome-warm);
}
.site-nav__util { display: inline-flex; align-items: center; gap: 8px; }
.site-nav__cart {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
background: var(--hull-panel-dark);
box-shadow: var(--chrome-top-soft);
color: var(--chrome-highlight);
}
.site-nav__cart-count {
color: var(--ember);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
/* =========================================================
HERO
========================================================= */
.hero {
position: relative;
background: var(--carbon);
min-height: 100vh;
overflow: hidden;
box-shadow: var(--chrome-top-soft);
}
.hero__stage {
position: absolute;
inset: 0;
background-image: url('https://artsabers.com/wp-content/uploads/sites/10/2026/07/6f0320e4a3df77a3b51e2d37a15e6eae-6.jpg');
background-size: cover;
background-position: center right;
background-repeat: no-repeat;
filter: contrast(1.05) saturate(1.05);
}
.hero__vignette {
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(6,6,6,0.96) 0%, rgba(6,6,6,0.85) 30%, rgba(6,6,6,0.45) 55%, rgba(6,6,6,0.15) 85%, rgba(6,6,6,0.0) 100%),
linear-gradient(180deg, rgba(6,6,6,0.30) 0%, rgba(6,6,6,0.00) 25%, rgba(6,6,6,0.00) 65%, rgba(6,6,6,0.55) 100%);
}
.hero__inner {
position: relative;
z-index: 3;
min-height: 100vh;
display: grid;
align-items: center;
padding: 120px 0 200px;
}
.hero__copy { max-width: 720px; }
.hero__meta {
display: inline-flex;
align-items: center;
gap: 14px;
font-family: var(--font-display);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.30em;
text-transform: uppercase;
color: var(--chrome-dim);
margin-bottom: 40px;
}
.hero__meta-dot { color: var(--ember); font-size: 8px; }
.hero__title {
font-family: var(--font-display);
font-size: clamp(52px, 7.4vw, 108px);
font-weight: 700;
line-height: 0.92;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--chrome-highlight);
margin-bottom: 40px;
text-shadow: 0 4px 40px rgba(0,0,0,0.85);
}
.hero__title-ember { color: var(--ember); text-shadow: 0 0 30px rgba(255,122,46,0.5); }
.hero__sub {
font-family: var(--font-display);
font-size: clamp(18px, 1.8vw, 26px);
font-weight: 400;
letter-spacing: 0.02em;
color: var(--chrome-warm);
max-width: 580px;
margin-bottom: 56px;
line-height: 1.4;
}
.hero__actions { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.hero__tagline {
position: absolute;
right: 48px;
bottom: 220px;
writing-mode: vertical-rl;
transform: rotate(180deg);
font-family: var(--font-display);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.36em;
text-transform: uppercase;
color: var(--chrome-dim);
z-index: 4;
}
.hero__tagline-ember { color: var(--ember); }
.hero__telemetry {
position: absolute;
bottom: 130px;
left: 0;
right: 0;
z-index: 4;
}
.hero__telemetry-row {
display: flex;
gap: 56px;
font-family: var(--font-display);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--chrome-dim);
}
.hero__telemetry-item { display: inline-flex; align-items: baseline; gap: 12px; }
.hero__telemetry-val { color: var(--ember); font-variant-numeric: tabular-nums; }
.hero__backlight {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 90px;
z-index: 3;
background: linear-gradient(180deg, rgba(6,6,6,0) 0%, rgba(255,122,46,0.35) 100%);
filter: blur(4px);
}
/* =========================================================
TRUST BAR
========================================================= */
.trust-bar {
position: relative;
background: var(--charcoal);
padding: 30px 0;
box-shadow: var(--chrome-top);
}
.trust-bar__row {
display: grid;
grid-template-columns: repeat(4, 1fr);
align-items: center;
gap: 0;
}
.trust-bar__cell {
padding: 4px 32px;
border-right: 1px solid rgba(62,62,62,0.35);
display: flex;
flex-direction: column;
gap: 6px;
font-family: var(--font-display);
}
.trust-bar__cell:last-child { border-right: 0; }
.trust-bar__label {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--chrome-dim);
}
.trust-bar__value {
font-size: 15px;
font-weight: 600;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--chrome-warm);
}
.trust-bar__value--ember { color: var(--ember); }
/* =========================================================
SABER CORE — 4 raised plates
========================================================= */
.saber-core { background: var(--charcoal); }
.saber-core__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.core-card {
position: relative;
background: var(--hull-panel);
padding: 0;
box-shadow: var(--panel-lift);
transition: box-shadow 250ms ease, transform 250ms ease;
display: flex;
flex-direction: column;
}
.core-card:hover {
box-shadow: var(--panel-lift-hover);
transform: translateY(-2px);
}
.core-card__stage {
position: relative;
height: 320px;
overflow: hidden;
background: var(--hull-panel-dark);
box-shadow: inset 0 -1px 0 rgba(0,0,0,0.8);
}
.core-card__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
filter: brightness(0.92) contrast(1.05);
}
.core-card__stage::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 50% 60%, rgba(255,122,46,0.12) 0%, rgba(255,122,46,0) 60%);
pointer-events: none;
}
.core-card__tier-mark {
position: absolute;
top: 20px;
left: 20px;
font-family: var(--font-display);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--chrome-dim);
z-index: 2;
}
.core-card__tier-idx { color: var(--ember); }
.core-card__body {
padding: 28px 26px 30px;
display: flex;
flex-direction: column;
gap: 22px;
flex: 1;
}
.core-card__title {
font-family: var(--font-display);
font-size: 26px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--chrome-highlight);
line-height: 1;
}
.core-card__pricing {
display: flex;
align-items: baseline;
gap: 10px;
}
.core-card__price-lbl {
font-family: var(--font-display);
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--chrome-dim);
}
.core-card__price {
font-family: var(--font-display);
font-size: 22px;
font-weight: 600;
color: var(--ember);
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
}
.core-card__specs {
background: var(--hull-panel-lift);
padding: 16px 18px;
box-shadow: var(--chrome-top-soft);
display: flex;
flex-direction: column;
gap: 10px;
}
.core-card__spec {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 8px;
align-items: baseline;
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.core-card__spec-lbl { color: var(--chrome-dim); }
.core-card__spec-leader { color: var(--chrome-dim); opacity: 0.4; overflow: hidden; white-space: nowrap; }
.core-card__spec-val { color: var(--chrome-warm); font-weight: 500; font-variant-numeric: tabular-nums; }
.core-card__cta { margin-top: 6px; align-self: flex-start; }
/* =========================================================
FAN FAVOURITES — 3 large plates, top-featured hot-rim
========================================================= */
.favourites { background: var(--charcoal-warm); }
.favourites__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.product-card {
position: relative;
background: var(--hull-panel);
box-shadow: var(--panel-lift);
display: flex;
flex-direction: column;
transition: box-shadow 250ms ease, transform 250ms ease;
}
.product-card:hover {
box-shadow: var(--panel-lift-hover);
transform: translateY(-3px);
}
.product-card--featured { box-shadow: var(--ember-hot-rim), var(--panel-lift); }
.product-card--featured:hover {
box-shadow: var(--ember-hot-rim), var(--panel-lift-hover);
}
.product-card__ribbon {
position: absolute;
top: 0; left: 0;
padding: 10px 20px;
background: linear-gradient(180deg, var(--ember-glow) 0%, var(--ember) 100%);
color: var(--on-primary-fixed);
font-family: var(--font-display);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.20em;
text-transform: uppercase;
box-shadow: 0 4px 16px rgba(255,122,46,0.55);
z-index: 3;
}
.product-card__stage {
position: relative;
height: 420px;
overflow: hidden;
background: var(--hull-panel-dark);
}
.product-card__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
filter: brightness(0.94) contrast(1.05);
transition: transform 500ms ease;
}
.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__badge {
position: absolute;
top: 20px;
right: 20px;
padding: 6px 12px;
background: rgba(6,6,6,0.75);
box-shadow: var(--chrome-top-soft);
font-family: var(--font-display);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--chrome-warm);
z-index: 2;
}
.product-card__body {
padding: 26px 28px 30px;
display: flex;
flex-direction: column;
gap: 18px;
background: var(--hull-panel-lift);
box-shadow: var(--chrome-top-soft);
flex: 1;
}
.product-card__eyebrow {
font-family: var(--font-display);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--chrome-dim);
}
.product-card__eyebrow-em { color: var(--ember); }
.product-card__title {
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
line-height: 1.15;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--chrome-highlight);
}
.product-card__specs {
display: flex;
flex-direction: column;
gap: 8px;
padding: 14px 0;
border-top: 1px solid rgba(62,62,62,0.4);
border-bottom: 1px solid rgba(62,62,62,0.4);
}
.product-card__spec {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 8px;
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.product-card__spec-lbl { color: var(--chrome-dim); }
.product-card__spec-leader { color: var(--chrome-dim); opacity: 0.4; overflow: hidden; white-space: nowrap; }
.product-card__spec-val { color: var(--chrome-warm); font-weight: 500; font-variant-numeric: tabular-nums; }
.product-card__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.product-card__price {
font-family: var(--font-display);
font-size: 26px;
font-weight: 600;
color: var(--ember);
font-variant-numeric: tabular-nums;
letter-spacing: 0.01em;
}
.product-card__stars {
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.12em;
color: var(--ember);
display: inline-flex;
align-items: center;
gap: 6px;
}
.product-card__stars-count { color: var(--chrome-dim); }
/* =========================================================
FACTION GRID — 3×2 movie-poster tiles
========================================================= */
.factions { background: var(--void); }
.faction-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.faction-tile {
position: relative;
height: 420px;
background: var(--hull-panel-dark);
box-shadow: var(--panel-lift);
overflow: hidden;
cursor: pointer;
transition: box-shadow 250ms ease, transform 250ms ease;
}
.faction-tile:hover {
box-shadow: var(--ember-hot-rim), var(--panel-lift-hover);
transform: translateY(-3px);
}
.faction-tile__brief {
position: absolute;
inset: 24px;
border: 1px dashed rgba(184,176,166,0.22);
padding: 20px;
font-family: var(--font-body);
font-style: italic;
font-size: 13px;
line-height: 1.5;
color: var(--chrome-dim);
display: flex;
align-items: center;
z-index: 1;
}
.faction-tile__brief-label {
position: absolute;
top: -9px;
left: 12px;
padding: 0 8px;
background: var(--hull-panel-dark);
font-family: var(--font-display);
font-size: 9px;
font-style: normal;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--chrome-dim);
}
.faction-tile__gloss {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(6,6,6,0.15) 0%, rgba(6,6,6,0.15) 55%, rgba(6,6,6,0.90) 100%);
z-index: 2;
pointer-events: none;
transition: opacity 250ms ease;
}
.faction-tile:hover .faction-tile__gloss { opacity: 0.75; }
.faction-tile__ember-edge {
position: absolute;
right: 0; top: 0; bottom: 0;
width: 2px;
background: linear-gradient(180deg, rgba(255,122,46,0) 0%, rgba(255,122,46,0.75) 50%, rgba(255,122,46,0) 100%);
box-shadow: 0 0 16px rgba(255,122,46,0.55);
opacity: 0;
transition: opacity 250ms ease;
z-index: 3;
}
.faction-tile:hover .faction-tile__ember-edge { opacity: 1; }
.faction-tile__label {
position: absolute;
left: 24px;
bottom: 24px;
right: 24px;
z-index: 4;
display: flex;
flex-direction: column;
gap: 10px;
}
.faction-tile__meta {
font-family: var(--font-display);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--chrome-dim);
}
.faction-tile__meta-em { color: var(--ember); font-variant-numeric: tabular-nums; }
.faction-tile__title {
font-family: var(--font-display);
font-size: 34px;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--chrome-highlight);
line-height: 1;
}
.faction-tile__arrow {
font-family: var(--font-display);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--chrome-warm);
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 6px;
}
.faction-tile__arrow-glyph { color: var(--ember); }
/* =========================================================
NEW ARRIVALS
========================================================= */
.arrivals { background: var(--charcoal); }
.arrivals__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
/* =========================================================
MISSION CONTROL — dual split
========================================================= */
.mission { background: var(--charcoal-warm); }
.mission__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.mission-panel {
position: relative;
background: var(--hull-panel);
box-shadow: var(--panel-lift);
display: flex;
flex-direction: column;
min-height: 620px;
overflow: hidden;
}
.mission-panel__stage {
position: relative;
height: 340px;
background: var(--hull-panel-dark);
overflow: hidden;
box-shadow: inset 0 -1px 0 rgba(0,0,0,0.8);
}
.mission-panel__brief {
position: absolute;
inset: 28px;
border: 1px dashed rgba(184,176,166,0.22);
padding: 22px;
font-family: var(--font-body);
font-style: italic;
font-size: 13px;
line-height: 1.5;
color: var(--chrome-dim);
z-index: 1;
}
.mission-panel__brief-label {
position: absolute;
top: -9px;
left: 14px;
padding: 0 8px;
background: var(--hull-panel-dark);
font-family: var(--font-display);
font-size: 9px;
font-style: normal;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--chrome-dim);
}
.mission-panel__stage-ember {
position: absolute;
inset: auto 0 0 0;
height: 3px;
background: linear-gradient(90deg, rgba(255,122,46,0) 0%, rgba(255,122,46,0.65) 50%, rgba(255,122,46,0) 100%);
filter: blur(2px);
z-index: 2;
}
.mission-panel__body {
padding: 46px 42px 40px;
display: flex;
flex-direction: column;
gap: 22px;
flex: 1;
}
.mission-panel__eyebrow {
font-family: var(--font-display);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ember);
display: inline-flex;
align-items: center;
gap: 12px;
}
.mission-panel__eyebrow-idx { color: var(--chrome-dim); }
.mission-panel__title {
font-family: var(--font-display);
font-size: var(--fs-h3);
font-weight: 700;
letter-spacing: 0.06em;
line-height: 1.05;
text-transform: uppercase;
color: var(--chrome-highlight);
}
.mission-panel__body-copy {
font-size: 16px;
line-height: 1.65;
color: var(--chrome-warm);
max-width: 480px;
}
.mission-panel__telemetry {
margin-top: auto;
padding-top: 22px;
border-top: 1px solid rgba(62,62,62,0.35);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
font-family: var(--font-display);
}
.mission-panel__telem-cell {
display: flex;
flex-direction: column;
gap: 4px;
}
.mission-panel__telem-lbl {
font-size: 9px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--chrome-dim);
}
.mission-panel__telem-val {
font-size: 14px;
font-weight: 600;
letter-spacing: 0.10em;
color: var(--chrome-warm);
text-transform: uppercase;
}
.mission-panel__telem-val--ember { color: var(--ember); }
.mission__cta-wrap {
margin-top: 60px;
display: flex;
justify-content: center;
}
/* =========================================================
TESTIMONIALS
========================================================= */
.testimonials { background: var(--charcoal); }
.testimonials__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.testimonial {
position: relative;
background: var(--hull-panel);
box-shadow: var(--panel-lift);
padding: 40px 36px 36px;
display: flex;
flex-direction: column;
gap: 22px;
min-height: 380px;
}
.testimonial__stars {
font-family: var(--font-display);
font-size: 18px;
letter-spacing: 0.16em;
color: var(--ember);
text-shadow: 0 0 12px rgba(255,122,46,0.4);
}
.testimonial__quote-mark {
position: absolute;
top: 30px;
right: 34px;
font-family: var(--font-display);
font-size: 72px;
font-weight: 700;
line-height: 1;
color: var(--ember);
opacity: 0.15;
}
.testimonial__body {
font-size: 15.5px;
line-height: 1.6;
color: var(--chrome-warm);
font-weight: 500;
flex: 1;
}
.testimonial__foot {
display: flex;
align-items: center;
gap: 16px;
padding-top: 22px;
border-top: 1px solid rgba(62,62,62,0.35);
}
.testimonial__avatar {
width: 48px;
height: 48px;
background: var(--hull-panel-dark);
box-shadow: var(--chrome-top-soft);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 14px;
font-weight: 700;
color: var(--ember);
letter-spacing: 0.06em;
flex-shrink: 0;
}
.testimonial__meta {
display: flex;
flex-direction: column;
gap: 3px;
}
.testimonial__name {
font-family: var(--font-display);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--chrome-highlight);
}
.testimonial__product {
font-family: var(--font-display);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--chrome-dim);
}
.testimonial__product-em { color: var(--ember); }
/* =========================================================
BRAND STORY — editorial split
========================================================= */
.brand-story { background: var(--charcoal-warm); }
.brand-story__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
align-items: stretch;
min-height: 680px;
}
.brand-story__stage {
position: relative;
overflow: hidden;
background: var(--hull-panel-dark);
box-shadow: var(--panel-lift);
}
.brand-story__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 20%;
min-height: 680px;
filter: brightness(0.90) contrast(1.05);
}
.brand-story__stage-vignette {
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(6,6,6,0.15) 0%, rgba(6,6,6,0) 40%, rgba(6,6,6,0) 60%, rgba(255,122,46,0.28) 100%);
}
.brand-story__stage-ember {
position: absolute;
right: 0; top: 0; bottom: 0;
width: 3px;
background: linear-gradient(180deg, rgba(255,122,46,0.3) 0%, rgba(255,122,46,0.9) 50%, rgba(255,122,46,0.3) 100%);
filter: blur(2px);
z-index: 3;
}
.brand-story__panel {
padding: 90px 80px;
background: var(--hull-panel);
box-shadow: var(--panel-lift);
display: flex;
flex-direction: column;
justify-content: center;
gap: 32px;
}
.brand-story__eyebrow {
font-family: var(--font-display);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ember);
}
.brand-story__title {
font-family: var(--font-display);
font-size: var(--fs-h2);
font-weight: 700;
line-height: 1.02;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--chrome-highlight);
}
.brand-story__lede {
font-size: 18px;
line-height: 1.6;
color: var(--chrome-warm);
max-width: 520px;
}
.brand-story__lede em { color: var(--ember); font-style: normal; font-weight: 600; }
.brand-story__facts {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
padding: 26px 0 8px;
border-top: 1px solid rgba(62,62,62,0.4);
border-bottom: 1px solid rgba(62,62,62,0.4);
font-family: var(--font-display);
}
.brand-story__fact-lbl {
font-size: 9px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--chrome-dim);
display: block;
margin-bottom: 8px;
}
.brand-story__fact-val {
font-size: 24px;
font-weight: 700;
color: var(--chrome-highlight);
letter-spacing: 0.02em;
line-height: 1;
}
.brand-story__fact-val-em { color: var(--ember); }
.brand-story__actions {
display: flex;
gap: 20px;
align-items: center;
margin-top: 12px;
flex-wrap: wrap;
}
.brand-story__ember-link {
font-family: var(--font-display);
font-size: 12px;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--ember);
}
/* =========================================================
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.04em;
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;
}
/* =========================================================
FOOTER
========================================================= */
.site-footer {
position: relative;
background: var(--carbon);
padding: 120px 0 48px;
box-shadow: var(--chrome-top-soft);
}
.site-footer__grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
gap: 60px;
margin-bottom: 90px;
}
.site-footer__mast { display: flex; flex-direction: column; gap: 24px; }
.site-footer__brand {
font-family: var(--font-display);
font-size: 24px;
font-weight: 700;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--chrome-highlight);
}
.site-footer__brand em { font-style: normal; color: var(--ember); }
.site-footer__mission {
font-size: 14px;
line-height: 1.6;
color: var(--chrome-dim);
max-width: 320px;
}
.site-footer__col-title {
font-family: var(--font-display);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ember);
margin-bottom: 22px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(62,62,62,0.4);
}
.site-footer__links { display: flex; flex-direction: column; gap: 12px; }
.site-footer__links li {
font-family: var(--font-body);
font-size: 14px;
color: var(--chrome-dim);
transition: color 180ms ease;
}
.site-footer__links li:hover { color: var(--chrome-warm); }
.site-footer__pay {
display: flex;
gap: 12px;
margin-top: 20px;
flex-wrap: wrap;
}
.site-footer__pay-badge {
padding: 6px 12px;
background: var(--hull-panel-dark);
box-shadow: var(--chrome-top-soft);
font-family: var(--font-display);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--chrome-warm);
}
.site-footer__base {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 32px;
border-top: 1px solid rgba(62,62,62,0.4);
gap: 32px;
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--chrome-dim);
}
.site-footer__nerdworks { color: var(--chrome-warm); }
.site-footer__nerdworks-em { color: var(--ember); }
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 1100px) {
.site-nav__inner { grid-template-columns: 1fr auto; }
.site-nav__menu { display: none; }
.saber-core__grid { grid-template-columns: repeat(2, 1fr); }
.favourites__grid, .arrivals__grid, .testimonials__grid { grid-template-columns: 1fr; }
.faction-grid { grid-template-columns: repeat(2, 1fr); }
.mission__grid, .brand-story__grid, .capture__inner { grid-template-columns: 1fr; }
.site-footer__grid { grid-template-columns: repeat(2, 1fr); }
.brand-story__img { min-height: 480px; }
.brand-story__panel { padding: 60px 40px; }
}
@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; }
}
</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 worldwide <span class="promo-bar__dot">◆</span></span>
<span class="promo-bar__item">New drops every week <span class="promo-bar__dot">◆</span></span>
<span class="promo-bar__item">Global delivery in 7–10 days</span>
</div>
</div>
</div>
<!-- ============ 2. NAV ============ -->
<nav class="site-nav">
<div class="container">
<div class="site-nav__inner">
<div class="site-nav__brand">ART<em>SABERS</em></div>
<ul class="site-nav__menu">
<li>Lightsabers</li>
<li>Cosplay Helmets</li>
<li>Parts & Accessories</li>
<li>Offers & Deals</li>
<li>Blog</li>
</ul>
<div class="site-nav__utils">
<span class="site-nav__util">Search</span>
<span class="site-nav__util">Account</span>
<span class="site-nav__util">Wishlist</span>
<span class="site-nav__cart">Cart <span class="site-nav__cart-count">02</span></span>
</div>
</div>
</div>
</nav>
<!-- ============ 3. HERO — CINEMATIC KEY ART ============ -->
<section class="hero">
<div class="hero__stage"></div>
<div class="hero__vignette"></div>
<div class="hero__tagline">
<span class="hero__tagline-ember">◆</span> From factory floor to your door
</div>
<div class="container">
<div class="hero__inner">
<div class="hero__copy">
<div class="hero__meta">
<span class="hero__meta-dot">◆</span>
<span>Cat. 24·07 · 1,100 specimens on file</span>
</div>
<h1 class="hero__title">
Every saber.<br>
Every <span class="hero__title-ember">Core.</span><br>
Every duelling grade.
</h1>
<p class="hero__sub">
Factory direct. Global. In your hands in 7–10 days — with the customer service most factory-direct shops won’t give.
</p>
<div class="hero__actions">
<a href="#" class="cta-primary">Browse the catalogue <span class="cta-primary__arrow">→</span></a>
<a href="#" class="cta-ghost">See Saber Cores</a>
</div>
</div>
</div>
</div>
<div class="hero__telemetry">
<div class="container">
<div class="hero__telemetry-row">
<span class="hero__telemetry-item"><span>Origin</span><span class="hero__telemetry-val">Factory Direct</span></span>
<span class="hero__telemetry-item"><span>Transit</span><span class="hero__telemetry-val">7–10 Days</span></span>
<span class="hero__telemetry-item"><span>Support</span><span class="hero__telemetry-val">Named SPOC</span></span>
<span class="hero__telemetry-item"><span>Guarantee</span><span class="hero__telemetry-val">30 Days</span></span>
</div>
</div>
</div>
<div class="hero__backlight"></div>
</section>
<!-- ============ PANEL SEAM after hero ============ -->
<div class="panel-seam"></div>
<!-- ============ 4. TRUST BAR — HUD ============ -->
<div class="trust-bar">
<div class="container">
<div class="trust-bar__row">
<div class="trust-bar__cell">
<span class="trust-bar__label">Signal 01 · Origin</span>
<span class="trust-bar__value">Global Delivery <span class="trust-bar__value--ember">· 7–10 Days</span></span>
</div>
<div class="trust-bar__cell">
<span class="trust-bar__label">Signal 02 · Support</span>
<span class="trust-bar__value">Real CS <span class="trust-bar__value--ember">· 24hr Response</span></span>
</div>
<div class="trust-bar__cell">
<span class="trust-bar__label">Signal 03 · Catalogue</span>
<span class="trust-bar__value"><span class="trust-bar__value--ember">1,100</span> Sabers on File</span>
</div>
<div class="trust-bar__cell">
<span class="trust-bar__label">Signal 04 · Warranty</span>
<span class="trust-bar__value">30-Day <span class="trust-bar__value--ember">Money-Back</span></span>
</div>
</div>
</div>
</div>
<!-- ============ 5. CHOOSE YOUR SABER CORE ============ -->
<section class="section saber-core">
<div class="container">
<div class="section-head">
<div class="section-head__left">
<div class="eyebrow">
<span class="eyebrow__idx">01 ·</span>
<span class="eyebrow__hair"></span>
Choose your Saber Core
</div>
<h2 class="section-title">Four tiers.<br>One ladder of ambition.</h2>
<p class="section-title--sub">Every saber sits on a Saber Core — the electronics that give it colour, sound and behaviour. Pick the tier that matches how you plan to fight, cosplay or collect.</p>
</div>
<div class="section-head__right">
Ladder ascends →<br>
<span style="color:var(--ember);">Baselit → Pixel → Programmable</span>
</div>
</div>
<div class="saber-core__grid">
<div class="core-card">
<div class="core-card__stage">
<span class="core-card__tier-mark"><span class="core-card__tier-idx">T-01</span> · Baselit</span>
<img class="core-card__img" src="https://nerdworks.uk/wp-content/uploads/2025/09/Black-Hammer-Double-Bladed-Lightsaber-5.jpg" alt="Black Hammer double-bladed hilt">
</div>
<div class="core-card__body">
<div class="core-card__title">S-RGB</div>
<div class="core-card__pricing">
<span class="core-card__price-lbl">From</span>
<span class="core-card__price">$89</span>
</div>
<div class="core-card__specs">
<div class="core-card__spec"><span class="core-card__spec-lbl">Blade</span><span class="core-card__spec-leader">................................</span><span class="core-card__spec-val">Baselit RGB</span></div>
<div class="core-card__spec"><span class="core-card__spec-lbl">Colours</span><span class="core-card__spec-leader">................................</span><span class="core-card__spec-val">Infinite</span></div>
<div class="core-card__spec"><span class="core-card__spec-lbl">Bluetooth</span><span class="core-card__spec-leader">................................</span><span class="core-card__spec-val">Standard</span></div>
<div class="core-card__spec"><span class="core-card__spec-lbl">Duelling</span><span class="core-card__spec-leader">................................</span><span class="core-card__spec-val">Light</span></div>
</div>
<a href="#" class="cta-ghost core-card__cta">Read specs →</a>
</div>
</div>
<div class="core-card">
<div class="core-card__stage">
<span class="core-card__tier-mark"><span class="core-card__tier-idx">T-02</span> · Baselit +</span>
<img class="core-card__img" src="https://nerdworks.uk/wp-content/uploads/2025/09/Black-Hela-Lightsaber-4.jpg" alt="Black Hela hilt">
</div>
<div class="core-card__body">
<div class="core-card__title">RGB-X</div>
<div class="core-card__pricing">
<span class="core-card__price-lbl">From</span>
<span class="core-card__price">$149</span>
</div>
<div class="core-card__specs">
<div class="core-card__spec"><span class="core-card__spec-lbl">Blade</span><span class="core-card__spec-leader">................................</span><span class="core-card__spec-val">Baselit RGB</span></div>
<div class="core-card__spec"><span class="core-card__spec-lbl">Sound fonts</span><span class="core-card__spec-leader">................................</span><span class="core-card__spec-val">12</span></div>
<div class="core-card__spec"><span class="core-card__spec-lbl">Bluetooth</span><span class="core-card__spec-leader">................................</span><span class="core-card__spec-val">Standard</span></div>
<div class="core-card__spec"><span class="core-card__spec-lbl">Duelling</span><span class="core-card__spec-leader">................................</span><span class="core-card__spec-val">Light – Medium</span></div>
</div>
<a href="#" class="cta-ghost core-card__cta">Read specs →</a>
</div>
</div>
<div class="core-card">
<div class="core-card__stage">
<span class="core-card__tier-mark"><span class="core-card__tier-idx">T-03</span> · Pixel</span>
<img class="core-card__img" src="https://nerdworks.uk/wp-content/uploads/2025/09/Black-Smasher-V2-Lightsaber-5.jpg" alt="Black Smasher V2 hilt">
</div>
<div class="core-card__body">
<div class="core-card__title">Xenopixel V3</div>
<div class="core-card__pricing">
<span class="core-card__price-lbl">From</span>
<span class="core-card__price">$299</span>
</div>
<div class="core-card__specs">
<div class="core-card__spec"><span class="core-card__spec-lbl">Blade</span><span class="core-card__spec-leader">................................</span><span class="core-card__spec-val">Pixel Strip</span></div>
<div class="core-card__spec"><span class="core-card__spec-lbl">Sound fonts</span><span class="core-card__spec-leader">................................</span><span class="core-card__spec-val">34</span></div>
<div class="core-card__spec"><span class="core-card__spec-lbl">Effects</span><span class="core-card__spec-leader">................................</span><span class="core-card__spec-val">Blaster / Unstable</span></div>
<div class="core-card__spec"><span class="core-card__spec-lbl">Duelling</span><span class="core-card__spec-leader">................................</span><span class="core-card__spec-val">Heavy</span></div>
</div>
<a href="#" class="cta-ghost core-card__cta">Read specs →</a>
</div>
</div>
<div class="core-card">
<div class="core-card__stage">
<span class="core-card__tier-mark"><span class="core-card__tier-idx">T-04</span> · Programmable</span>
<img class="core-card__img" src="https://nerdworks.uk/wp-content/uploads/2025/09/Mando-Black-Lightsaber-3.jpg" alt="Mando Black hilt">
</div>
<div class="core-card__body">
<div class="core-card__title">Proffie 2.2</div>
<div class="core-card__pricing">
<span class="core-card__price-lbl">From</span>
<span class="core-card__price">$499</span>
</div>
<div class="core-card__specs">
<div class="core-card__spec"><span class="core-card__spec-lbl">Blade</span><span class="core-card__spec-leader">................................</span><span class="core-card__spec-val">Pixel Strip</span></div>
<div class="core-card__spec"><span class="core-card__spec-lbl">Sound fonts</span><span class="core-card__spec-leader">................................</span><span class="core-card__spec-val">Unlimited</span></div>
<div class="core-card__spec"><span class="core-card__spec-lbl">Config</span><span class="core-card__spec-leader">................................</span><span class="core-card__spec-val">Fully Coded</span></div>
<div class="core-card__spec"><span class="core-card__spec-lbl">Duelling</span><span class="core-card__spec-leader">................................</span><span class="core-card__spec-val">Heavy +</span></div>
</div>
<a href="#" class="cta-ghost core-card__cta">Read specs →</a>
</div>
</div>
</div>
</div>
</section>
<!-- ============ 6. FAN FAVOURITES ============ -->
<section class="section favourites">
<div class="container">
<div class="section-head">
<div class="section-head__left">
<div class="eyebrow">
<span class="eyebrow__idx">02 ·</span>
<span class="eyebrow__hair"></span>
Fan favourites
</div>
<h2 class="section-title">Three that keep<br>coming back.</h2>
<p class="section-title--sub">Curated by the workshop — the sabers our collectors, duelists and cosplayers rate highest across the catalogue.</p>
</div>
<div class="section-head__right">
Featured Cores<br>
<span style="color:var(--ember);">Xenopixel V3 · Proffie 2.2</span>
</div>
</div>
<div class="favourites__grid">
<div class="product-card">
<div class="product-card__stage">
<img class="product-card__img" src="https://nerdworks.uk/wp-content/uploads/2025/08/Anakin-Skywalker-EP3-1.jpg" alt="Anakin Skywalker EP3 hilt">
<span class="product-card__badge">Duelling · Heavy</span>
</div>
<div class="product-card__body">
<div class="product-card__eyebrow"><span class="product-card__eyebrow-em">Xenopixel V3</span> · Collector’s Grade</div>
<h3 class="product-card__title">Anakin Skywalker EP3<br>Duelling Grade</h3>
<div class="product-card__specs">
<div class="product-card__spec"><span class="product-card__spec-lbl">Blade</span><span class="product-card__spec-leader">............................</span><span class="product-card__spec-val">36in Pixel</span></div>
<div class="product-card__spec"><span class="product-card__spec-lbl">Sound fonts</span><span class="product-card__spec-leader">............................</span><span class="product-card__spec-val">34</span></div>
<div class="product-card__spec"><span class="product-card__spec-lbl">Bluetooth</span><span class="product-card__spec-leader">............................</span><span class="product-card__spec-val">XenoConfigurator</span></div>
</div>
<div class="product-card__foot">
<span class="product-card__price">$459.99</span>
<span class="product-card__stars">★★★★★ <span class="product-card__stars-count">(184)</span></span>
</div>
</div>
</div>
<div class="product-card product-card--featured">
<span class="product-card__ribbon">◆ Workshop Pick</span>
<div class="product-card__stage">
<img class="product-card__img" src="https://nerdworks.uk/wp-content/uploads/2025/09/Luke-Skywalker-ROTJ-Weathered-Lightsaber-3.jpg" alt="Luke Skywalker ROTJ Weathered hilt">
<span class="product-card__badge">Duelling · Heavy</span>
</div>
<div class="product-card__body">
<div class="product-card__eyebrow"><span class="product-card__eyebrow-em">Proffie 2.2</span> · Cinema Faithful</div>
<h3 class="product-card__title">Luke Skywalker ROTJ<br>Weathered</h3>
<div class="product-card__specs">
<div class="product-card__spec"><span class="product-card__spec-lbl">Blade</span><span class="product-card__spec-leader">............................</span><span class="product-card__spec-val">36in Pixel</span></div>
<div class="product-card__spec"><span class="product-card__spec-lbl">Finish</span><span class="product-card__spec-leader">............................</span><span class="product-card__spec-val">Weathered Black</span></div>
<div class="product-card__spec"><span class="product-card__spec-lbl">Config</span><span class="product-card__spec-leader">............................</span><span class="product-card__spec-val">Fully Coded</span></div>
</div>
<div class="product-card__foot">
<span class="product-card__price">$419.99</span>
<span class="product-card__stars">★★★★★ <span class="product-card__stars-count">(217)</span></span>
</div>
</div>
</div>
<div class="product-card">
<div class="product-card__stage">
<img class="product-card__img" src="https://nerdworks.uk/wp-content/uploads/2025/08/Ordo-V2-Double-Bladed-Lightsaber-4.jpg" alt="Ordo V2 Double-Bladed hilt">
<span class="product-card__badge">Double · Heavy+</span>
</div>
<div class="product-card__body">
<div class="product-card__eyebrow"><span class="product-card__eyebrow-em">Proffie 2.2</span> · ARTSABERS Exclusive</div>
<h3 class="product-card__title">Ordo V2<br>Double-Bladed</h3>
<div class="product-card__specs">
<div class="product-card__spec"><span class="product-card__spec-lbl">Blades</span><span class="product-card__spec-leader">............................</span><span class="product-card__spec-val">2 × 32in Pixel</span></div>
<div class="product-card__spec"><span class="product-card__spec-lbl">Sound fonts</span><span class="product-card__spec-leader">............................</span><span class="product-card__spec-val">Unlimited</span></div>
<div class="product-card__spec"><span class="product-card__spec-lbl">Grip</span><span class="product-card__spec-leader">............................</span><span class="product-card__spec-val">Machined Aluminium</span></div>
</div>
<div class="product-card__foot">
<span class="product-card__price">$549.99</span>
<span class="product-card__stars">★★★★★ <span class="product-card__stars-count">(96)</span></span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ============ 7. SHOP BY FACTION ============ -->
<section class="section factions">
<div class="container">
<div class="section-head">
<div class="section-head__left">
<div class="eyebrow">
<span class="eyebrow__idx">03 ·</span>
<span class="eyebrow__hair"></span>
Shop by faction
</div>
<h2 class="section-title">Six factions.<br>Every character.</h2>
<p class="section-title--sub">Filter the catalogue by the world your saber belongs to — from Jedi discipline to Mandalorian steel to the smouldering weight of the Sith.</p>
</div>
<div class="section-head__right">
Total specimens<br>
<span style="color:var(--ember); font-size: 20px; font-weight: 700;">1,100 +</span>
</div>
</div>
<div class="faction-grid">
<div class="faction-tile">
<div class="faction-tile__brief">
<span class="faction-tile__brief-label">Photograph · Placeholder</span>
Robed Jedi silhouette against a golden temple sunrise; a blue saber lit low, dust in the beam.
</div>
<div class="faction-tile__gloss"></div>
<div class="faction-tile__ember-edge"></div>
<div class="faction-tile__label">
<span class="faction-tile__meta"><span class="faction-tile__meta-em">142</span> · Sabers</span>
<span class="faction-tile__title">Jedi</span>
<span class="faction-tile__arrow">Enter the Order <span class="faction-tile__arrow-glyph">→</span></span>
</div>
</div>
<div class="faction-tile">
<div class="faction-tile__brief">
<span class="faction-tile__brief-label">Photograph · Placeholder</span>
Cloaked Sith figure, crimson double-bladed saber igniting from below; deep red rim-light, black armour.
</div>
<div class="faction-tile__gloss"></div>
<div class="faction-tile__ember-edge"></div>
<div class="faction-tile__label">
<span class="faction-tile__meta"><span class="faction-tile__meta-em">96</span> · Sabers</span>
<span class="faction-tile__title">Sith</span>
<span class="faction-tile__arrow">Choose your dark path <span class="faction-tile__arrow-glyph">→</span></span>
</div>
</div>
<div class="faction-tile">
<div class="faction-tile__brief">
<span class="faction-tile__brief-label">Photograph · Placeholder</span>
Mandalorian helmet three-quarter profile, deep charcoal beskar, ember reflection glinting on the visor.
</div>
<div class="faction-tile__gloss"></div>
<div class="faction-tile__ember-edge"></div>
<div class="faction-tile__label">
<span class="faction-tile__meta"><span class="faction-tile__meta-em">58</span> · Sabers · Bundles</span>
<span class="faction-tile__title">Mandalorian</span>
<span class="faction-tile__arrow">Wear the creed <span class="faction-tile__arrow-glyph">→</span></span>
</div>
</div>
<div class="faction-tile">
<div class="faction-tile__brief">
<span class="faction-tile__brief-label">Photograph · Placeholder</span>
Ahsoka mid-strike, twin white blades crossing, cinematic dust and dramatic side-lighting.
</div>
<div class="faction-tile__gloss"></div>
<div class="faction-tile__ember-edge"></div>
<div class="faction-tile__label">
<span class="faction-tile__meta"><span class="faction-tile__meta-em">72</span> · Sabers</span>
<span class="faction-tile__title">Clone Wars</span>
<span class="faction-tile__arrow">Enter the war room <span class="faction-tile__arrow-glyph">→</span></span>
</div>
</div>
<div class="faction-tile">
<div class="faction-tile__brief">
<span class="faction-tile__brief-label">Photograph · Placeholder</span>
Weathered Skywalker hilt on a hull plate; single-source key light, chrome catching orange.
</div>
<div class="faction-tile__gloss"></div>
<div class="faction-tile__ember-edge"></div>
<div class="faction-tile__label">
<span class="faction-tile__meta"><span class="faction-tile__meta-em">184</span> · Sabers</span>
<span class="faction-tile__title">Original Trilogy</span>
<span class="faction-tile__arrow">Return to the beginning <span class="faction-tile__arrow-glyph">→</span></span>
</div>
</div>
<div class="faction-tile">
<div class="faction-tile__brief">
<span class="faction-tile__brief-label">Photograph · Placeholder</span>
High-Republic era saber floating against deep-space void; brushed titanium and warm rim-light.
</div>
<div class="faction-tile__gloss"></div>
<div class="faction-tile__ember-edge"></div>
<div class="faction-tile__label">
<span class="faction-tile__meta"><span class="faction-tile__meta-em">64</span> · Sabers · New Era</span>
<span class="faction-tile__title">New Republic</span>
<span class="faction-tile__arrow">Explore the era <span class="faction-tile__arrow-glyph">→</span></span>
</div>
</div>
</div>
</div>
</section>
<!-- ============ PANEL SEAM between factions and new arrivals ============ -->
<div class="panel-seam"></div>
<!-- ============ 8. NEW ARRIVALS ============ -->
<section class="section arrivals">
<div class="container">
<div class="section-head">
<div class="section-head__left">
<div class="eyebrow">
<span class="eyebrow__idx">04 ·</span>
<span class="eyebrow__hair"></span>
Freshly commissioned
</div>
<h2 class="section-title">New arrivals from<br>the workshop.</h2>
<p class="section-title--sub">Small first runs, limited quantities. Three sabers just off the factory line and now available direct to your door.</p>
</div>
<div class="section-head__right">
Batch · 24-07-A<br>
<span style="color:var(--ember);">Runs of 200 or fewer</span>
</div>
</div>
<div class="arrivals__grid">
<div class="product-card">
<span class="product-card__ribbon">◆ New Arrival</span>
<div class="product-card__stage">
<img class="product-card__img" src="https://nerdworks.uk/wp-content/uploads/2025/09/Black-Smasher-Lightsaber-5.jpg" alt="Black Smasher hilt">
<span class="product-card__badge">Run · 200</span>
</div>
<div class="product-card__body">
<div class="product-card__eyebrow"><span class="product-card__eyebrow-em">Xenopixel V3</span> · ARTSABERS Exclusive</div>
<h3 class="product-card__title">Black Smasher<br>First Run of 200</h3>
<div class="product-card__specs">
<div class="product-card__spec"><span class="product-card__spec-lbl">Blade</span><span class="product-card__spec-leader">............................</span><span class="product-card__spec-val">36in Pixel</span></div>
<div class="product-card__spec"><span class="product-card__spec-lbl">Finish</span><span class="product-card__spec-leader">............................</span><span class="product-card__spec-val">Machined Black</span></div>
<div class="product-card__spec"><span class="product-card__spec-lbl">Bluetooth</span><span class="product-card__spec-leader">............................</span><span class="product-card__spec-val">XenoConfigurator</span></div>
</div>
<div class="product-card__foot">
<span class="product-card__price">$389.99</span>
<span class="product-card__stars">◆ Just landed</span>
</div>
</div>
</div>
<div class="product-card">
<span class="product-card__ribbon">◆ New Arrival</span>
<div class="product-card__stage">
<img class="product-card__img" src="https://nerdworks.uk/wp-content/uploads/2025/09/Gold-Solaris-Lightsaber-5.jpg" alt="Gold Solaris hilt">
<span class="product-card__badge">Duelling · Grade</span>
</div>
<div class="product-card__body">
<div class="product-card__eyebrow"><span class="product-card__eyebrow-em">Xenopixel V3</span> · Duelling Grade</div>
<h3 class="product-card__title">Gold Solaris<br>Duelling Grade</h3>
<div class="product-card__specs">
<div class="product-card__spec"><span class="product-card__spec-lbl">Blade</span><span class="product-card__spec-leader">............................</span><span class="product-card__spec-val">36in Pixel</span></div>
<div class="product-card__spec"><span class="product-card__spec-lbl">Finish</span><span class="product-card__spec-leader">............................</span><span class="product-card__spec-val">Solaris Gold</span></div>
<div class="product-card__spec"><span class="product-card__spec-lbl">Sound fonts</span><span class="product-card__spec-leader">............................</span><span class="product-card__spec-val">34</span></div>
</div>
<div class="product-card__foot">
<span class="product-card__price">$429.99</span>
<span class="product-card__stars">◆ Just landed</span>
</div>
</div>
</div>
<div class="product-card">
<span class="product-card__ribbon">◆ New Arrival</span>
<div class="product-card__stage">
<img class="product-card__img" src="https://nerdworks.uk/wp-content/uploads/2025/09/Red-Tai-Ji-Lightsaber-4.jpg" alt="Red Tai Ji hilt">
<span class="product-card__badge">High Republic</span>
</div>
<div class="product-card__body">
<div class="product-card__eyebrow"><span class="product-card__eyebrow-em">Proffie 2.2</span> · High Republic Era</div>
<h3 class="product-card__title">Red Tai Ji<br>High Republic Era</h3>
<div class="product-card__specs">
<div class="product-card__spec"><span class="product-card__spec-lbl">Blade</span><span class="product-card__spec-leader">............................</span><span class="product-card__spec-val">36in Pixel</span></div>
<div class="product-card__spec"><span class="product-card__spec-lbl">Finish</span><span class="product-card__spec-leader">............................</span><span class="product-card__spec-val">Crimson · Copper</span></div>
<div class="product-card__spec"><span class="product-card__spec-lbl">Config</span><span class="product-card__spec-leader">............................</span><span class="product-card__spec-val">Fully Coded</span></div>
</div>
<div class="product-card__foot">
<span class="product-card__price">$519.99</span>
<span class="product-card__stars">◆ Just landed</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ============ PANEL SEAM before Mission Control ============ -->
<div class="panel-seam"></div>
<!-- ============ 9. MISSION CONTROL ============ -->
<section class="section mission">
<div class="container">
<div class="section-head">
<div class="section-head__left">
<div class="eyebrow">
<span class="eyebrow__idx">05 ·</span>
<span class="eyebrow__hair"></span>
Mission control
</div>
<h2 class="section-title">Two rooms.<br>One promise.</h2>
<p class="section-title--sub">The factory floor stays honest about timing. The support room stays honest about staying. Between them, the villain isn’t the model — it’s the shops that take payment and disappear.</p>
</div>
<div class="section-head__right">
Post-order commitment<br>
<span style="color:var(--ember);">Response · 24hr · Named SPOC</span>
</div>
</div>
<div class="mission__grid">
<div class="mission-panel">
<div class="mission-panel__stage">
<div class="mission-panel__brief">
<span class="mission-panel__brief-label">Photograph · Placeholder</span>
Factory floor at dusk: bench-lit CNC machining a hilt, sparks catching orange, deep charcoal machinery, one strong side-light source.
</div>
<div class="mission-panel__stage-ember"></div>
</div>
<div class="mission-panel__body">
<div class="mission-panel__eyebrow"><span class="mission-panel__eyebrow-idx">Room 01</span> · Source</div>
<h3 class="mission-panel__title">Factory-direct.</h3>
<p class="mission-panel__body-copy">Every saber ships directly from our partner factory in 7–10 days. Broader catalogue than we could ever warehouse — every character, every Saber Core, every duelling grade.</p>
<div class="mission-panel__telemetry">
<div class="mission-panel__telem-cell">
<span class="mission-panel__telem-lbl">Origin</span>
<span class="mission-panel__telem-val mission-panel__telem-val--ember">Factory Direct</span>
</div>
<div class="mission-panel__telem-cell">
<span class="mission-panel__telem-lbl">Transit</span>
<span class="mission-panel__telem-val">7–10 Days</span>
</div>
<div class="mission-panel__telem-cell">
<span class="mission-panel__telem-lbl">Range</span>
<span class="mission-panel__telem-val">1,100 SKUs</span>
</div>
</div>
</div>
</div>
<div class="mission-panel">
<div class="mission-panel__stage">
<div class="mission-panel__brief">
<span class="mission-panel__brief-label">Photograph · Placeholder</span>
Named support operator at a hull-panelled console; single desk-lamp glow, ember-lit monitor bezel, calm concentration.
</div>
<div class="mission-panel__stage-ember"></div>
</div>
<div class="mission-panel__body">
<div class="mission-panel__eyebrow"><span class="mission-panel__eyebrow-idx">Room 02</span> · Support</div>
<h3 class="mission-panel__title">Real customer service.</h3>
<p class="mission-panel__body-copy">24-hour initial response. Named single point of contact. We’re here when something goes wrong — the part most factory-direct shops leave you to sort out alone.</p>
<div class="mission-panel__telemetry">
<div class="mission-panel__telem-cell">
<span class="mission-panel__telem-lbl">Response</span>
<span class="mission-panel__telem-val mission-panel__telem-val--ember">24 Hours</span>
</div>
<div class="mission-panel__telem-cell">
<span class="mission-panel__telem-lbl">Support</span>
<span class="mission-panel__telem-val">Named SPOC</span>
</div>
<div class="mission-panel__telem-cell">
<span class="mission-panel__telem-lbl">Guarantee</span>
<span class="mission-panel__telem-val">30-Day M/B</span>
</div>
</div>
</div>
</div>
</div>
<div class="mission__cta-wrap">
<a href="#" class="cta-ghost">Read our promise →</a>
</div>
</div>
</section>
<!-- ============ 10. TESTIMONIALS ============ -->
<section class="section testimonials">
<div class="container">
<div class="section-head">
<div class="section-head__left">
<div class="eyebrow">
<span class="eyebrow__idx">06 ·</span>
<span class="eyebrow__hair"></span>
Owner reports
</div>
<h2 class="section-title">What our<br>collectors say.</h2>
<p class="section-title--sub">Words from the collectors, duelists and cosplayers who’ve already put an ARTSABERS hilt on their belt.</p>
</div>
<div class="section-head__right">
Aggregate<br>
<span style="color:var(--ember); font-size: 18px; font-weight: 700;">4.8 / 5</span> · 1,247 reviews
</div>
</div>
<div class="testimonials__grid">
<div class="testimonial">
<span class="testimonial__quote-mark">“</span>
<div class="testimonial__stars">★★★★★</div>
<p class="testimonial__body">Ordered the Anakin EP3. Nine days from checkout to my door, exactly as ARTSABERS said. The Xenopixel V3 blade is heavier than I expected in the best possible way — you feel every swing. Support answered my font question the same day.</p>
<div class="testimonial__foot">
<div class="testimonial__avatar">MK</div>
<div class="testimonial__meta">
<span class="testimonial__name">Marcus K.</span>
<span class="testimonial__product"><span class="testimonial__product-em">Anakin EP3</span> · Duelling Grade</span>
</div>
</div>
</div>
<div class="testimonial">
<span class="testimonial__quote-mark">“</span>
<div class="testimonial__stars">★★★★★</div>
<p class="testimonial__body">I’ve bought sabers from three other factory-direct shops. This is the first time I’ve had a named contact who actually replied. The Luke ROTJ Weathered arrived with a scuffed pommel; a replacement was on its way within 24 hours. That’s the whole difference.</p>
<div class="testimonial__foot">
<div class="testimonial__avatar">RD</div>
<div class="testimonial__meta">
<span class="testimonial__name">Rina D.</span>
<span class="testimonial__product"><span class="testimonial__product-em">Luke ROTJ Weathered</span> · Proffie 2.2</span>
</div>
</div>
</div>
<div class="testimonial">
<span class="testimonial__quote-mark">“</span>
<div class="testimonial__stars">★★★★★</div>
<p class="testimonial__body">Bought the Ordo V2 Double for cosplay first, kept it for duelling. Machined aluminium grip is legit heavy-duelling spec — two months of hard sparring, no give. Both Proffie blades still light clean off the trigger. Worth every penny.</p>
<div class="testimonial__foot">
<div class="testimonial__avatar">JT</div>
<div class="testimonial__meta">
<span class="testimonial__name">Jordan T.</span>
<span class="testimonial__product"><span class="testimonial__product-em">Ordo V2</span> · Double-Bladed</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ============ 11. BRAND STORY ============ -->
<section class="brand-story">
<div class="brand-story__grid">
<div class="brand-story__stage">
<img class="brand-story__img" src="https://artsabers.com/wp-content/uploads/sites/10/2026/07/70f87cc29f23055e9700f4ab529a38a6.jpg" alt="ARTSABERS founder cinematic portrait">
<div class="brand-story__stage-vignette"></div>
<div class="brand-story__stage-ember"></div>
</div>
<div class="brand-story__panel">
<div class="brand-story__eyebrow">◆ Our story</div>
<h2 class="brand-story__title">The workshop<br>that stays.</h2>
<p class="brand-story__lede">
Founded in Latvia in 2020 by a Star Wars fan who couldn’t find a saber shop that answered its emails. Now part of Nerdworks. <em>We sell every replica saber a fan could want</em> — with the customer service most factory-direct shops won’t give.
</p>
<div class="brand-story__facts">
<div>
<span class="brand-story__fact-lbl">Founded</span>
<span class="brand-story__fact-val">2020</span>
</div>
<div>
<span class="brand-story__fact-lbl">Catalogue</span>
<span class="brand-story__fact-val"><span class="brand-story__fact-val-em">1,100</span></span>
</div>
<div>
<span class="brand-story__fact-lbl">Backing</span>
<span class="brand-story__fact-val">Nerdworks</span>
</div>
</div>
<div class="brand-story__actions">
<a href="#" class="cta-ghost">Read our story →</a>
<a href="#" class="brand-story__ember-link">Meet the workshop →</a>
</div>
</div>
</div>
</section>
<!-- ============ 12. WARM CAPTURE BAND — biggest ember moment ============ -->
<div class="hazard-stripe"></div>
<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>
<!-- ============ PANEL SEAM between capture and footer ============ -->
<div class="panel-seam"></div>
<!-- ============ 13. FOOTER ============ -->
<footer class="site-footer">
<div class="container">
<div class="site-footer__grid">
<div class="site-footer__mast">
<div class="site-footer__brand">ART<em>SABERS</em></div>
<p class="site-footer__mission">Hundreds of sabers. One trusted retailer. From factory floor to your door in 7–10 days — with real customer service the whole way.</p>
<div class="site-footer__pay">
<span class="site-footer__pay-badge">Visa</span>
<span class="site-footer__pay-badge">Mastercard</span>
<span class="site-footer__pay-badge">Amex</span>
<span class="site-footer__pay-badge">Apple Pay</span>
<span class="site-footer__pay-badge">Mollie</span>
</div>
</div>
<div>
<h4 class="site-footer__col-title">Shop</h4>
<ul class="site-footer__links">
<li>Lightsabers</li>
<li>By Saber Core</li>
<li>Cosplay Helmets</li>
<li>Parts & Accessories</li>
<li>Under $100</li>
<li>Offers & Deals</li>
</ul>
</div>
<div>
<h4 class="site-footer__col-title">Support</h4>
<ul class="site-footer__links">
<li>Contact us</li>
<li>Named SPOC</li>
<li>Shipping & timing</li>
<li>Returns & refunds</li>
<li>30-day guarantee</li>
<li>FAQ</li>
</ul>
</div>
<div>
<h4 class="site-footer__col-title">Company</h4>
<ul class="site-footer__links">
<li>Our story</li>
<li>The workshop</li>
<li>ARTSABERS Exclusives</li>
<li>Press</li>
<li>Wholesale</li>
<li>Careers</li>
</ul>
</div>
<div>
<h4 class="site-footer__col-title">Connect</h4>
<ul class="site-footer__links">
<li>Instagram</li>
<li>TikTok</li>
<li>YouTube</li>
<li>Facebook</li>
<li>Threads</li>
</ul>
</div>
</div>
<div class="site-footer__base">
<span>© 2026 ARTSABERS. All rights reserved.</span>
<span class="site-footer__nerdworks">A <span class="site-footer__nerdworks-em">Nerdworks</span> brand</span>
<span>Terms · Privacy · Cookies</span>
</div>
</div>
</footer>
</body>
</html>