<!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 · Crimson Holocron</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=Manrope:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
/* Chromatic identifiers */
--primary: #D93E1A; /* deep crimson-ember — darker, hotter than reference ember */
--secondary: #E5A64B; /* warm gold — for hot-spot bloom cores */
--tertiary: #C08370; /* muted rose — text-only, replaces steel-blue */
/* Surface semantics — warm crimson-black ramp */
--anchor: #0F0808; /* deep warm crimson-black */
--container: #150C0C;
--container-low: #110909;
--container-high: #1E1414;
--container-highest: #291A1A;
--bright: #1E1414;
/* Text roles — warm neutral, slightly rose-tinted */
--text: #E8DEDA;
--neutral: #D6BFB8;
--outline: #A08278;
--outline-variant: #4A3730;
/* Functional */
--success: #7FC97F;
--error: #BA1A1A;
/* Typography — retained */
--font-head: 'Space Grotesk', system-ui, sans-serif;
--font-body: 'Manrope', system-ui, sans-serif;
--fs-display: 96px;
--fs-h1: 64px;
--fs-h2: 44px;
--fs-h3: 28px;
--fs-lead: 20px;
--fs-body: 16px;
--fs-small: 14px;
--fs-micro: 11px;
--tracking-wider: 0.14em;
--tracking-tight: -0.01em;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 16px;
--space-xs: 8px;
--space-sm: 16px;
--space-md: 24px;
--space-lg: 40px;
--space-xl: 64px;
--space-2xl: 96px;
--container-max: 1280px;
--content-max: 1120px;
/* Crimson holocron — shared bloom + haze tokens */
--crimson-deep: #5A1A0A;
--forge-vignette: radial-gradient(ellipse 120% 90% at 50% 50%, transparent 40%, rgba(20,6,4,0.55) 78%, rgba(10,3,2,0.95) 100%);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.55;
color: var(--text);
background: var(--anchor);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
position: relative;
}
/* Film-grain overlay across the whole page — very subtle, fixed */
body::after {
content: "";
position: fixed;
inset: 0;
z-index: 100;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='9' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.92 0 0 0 0 0.75 0 0 0 0 0.65 0 0 0 0.65 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
opacity: 0.06;
mix-blend-mode: overlay;
}
h1, h2, h3 {
font-family: var(--font-head);
font-weight: 700;
letter-spacing: var(--tracking-tight);
color: var(--text);
line-height: 0.95;
margin: 0;
}
a { color: inherit; text-decoration: none; }
/* ============================================================
HUD micro-caption — chapter tag / dossier / timecode
============================================================ */
.hud {
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--tertiary);
}
.hud--warm { color: var(--primary); }
.hud--outline { color: var(--outline); }
.hud--neutral { color: var(--neutral); }
.hud__pip {
display: inline-block;
width: 6px;
height: 6px;
background: var(--secondary);
border-radius: 50%;
margin-right: 10px;
vertical-align: middle;
box-shadow:
0 0 4px rgba(229,166,75,0.9),
0 0 12px rgba(217,62,26,0.75),
0 0 26px rgba(90,26,10,0.5);
animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% {
opacity: 1;
box-shadow:
0 0 4px rgba(229,166,75,0.9),
0 0 12px rgba(217,62,26,0.75),
0 0 26px rgba(90,26,10,0.5);
}
50% {
opacity: 0.35;
box-shadow:
0 0 2px rgba(229,166,75,0.4),
0 0 6px rgba(217,62,26,0.35),
0 0 14px rgba(90,26,10,0.2);
}
}
/* ============================================================
Section shell — cinematic framing carried from the reel
============================================================ */
.section {
position: relative;
width: 100%;
overflow: hidden;
background: var(--anchor);
}
.section__grain {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.22;
mix-blend-mode: overlay;
z-index: 3;
}
/* Volumetric warm haze — layered under the grain in most sections */
.section__haze {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 2;
background:
radial-gradient(ellipse 90% 60% at 50% 100%, rgba(217,62,26,0.10), transparent 70%),
radial-gradient(ellipse 60% 40% at 20% 30%, rgba(90,26,10,0.14), transparent 65%),
radial-gradient(ellipse 60% 40% at 80% 70%, rgba(90,26,10,0.12), transparent 65%);
}
.section__frame {
position: absolute;
inset: 24px;
pointer-events: none;
z-index: 4;
}
.section__frame::before,
.section__frame::after {
content: "";
position: absolute;
width: 24px;
height: 24px;
border-color: var(--outline-variant);
border-style: solid;
}
.section__frame::before {
top: 0; left: 0;
border-width: 1px 0 0 1px;
}
.section__frame::after {
bottom: 0; right: 0;
border-width: 0 1px 1px 0;
}
.section__hud-tl { position: absolute; top: 40px; left: 48px; z-index: 6; display: flex; align-items: center; }
.section__hud-tr { position: absolute; top: 40px; right: 48px; z-index: 6; }
.section__hud-bl { position: absolute; bottom: 40px; left: 48px; z-index: 6; }
.section__hud-br { position: absolute; bottom: 40px; right: 48px; z-index: 6; }
.content {
position: relative;
z-index: 5;
max-width: var(--container-max);
margin: 0 auto;
padding: 0 48px;
}
/* ============================================================
Image placeholder — a "planned image slot with brief"
Never an attempted illustration. Always inhabited by its caption.
============================================================ */
.plate {
position: relative;
display: block;
width: 100%;
background:
radial-gradient(ellipse 80% 60% at 50% 50%, var(--container-low), var(--anchor) 90%);
overflow: hidden;
isolation: isolate;
}
/* Gold rim-light on every image placeholder — lit from off-frame forge */
.plate--rim-left {
box-shadow:
inset 3px 0 0 rgba(217,62,26,0.55),
inset 6px 0 40px rgba(217,62,26,0.20),
inset 0 0 60px -20px var(--secondary);
}
.plate--rim-right {
box-shadow:
inset -3px 0 0 rgba(217,62,26,0.55),
inset -6px 0 40px rgba(217,62,26,0.20),
inset 0 0 60px -20px var(--secondary);
}
.plate--rim-top {
box-shadow:
inset 0 3px 0 rgba(217,62,26,0.42),
inset 0 6px 40px rgba(217,62,26,0.16),
inset 0 0 60px -20px var(--secondary);
}
.plate--rim-bottom {
box-shadow:
inset 0 -3px 0 rgba(217,62,26,0.42),
inset 0 -6px 40px rgba(217,62,26,0.16),
inset 0 -30px 60px -20px var(--secondary);
}
/* corner brackets — film viewfinder */
.plate::before,
.plate::after {
content: "";
position: absolute;
width: 22px;
height: 22px;
border-color: var(--outline);
border-style: solid;
z-index: 3;
pointer-events: none;
}
.plate::before {
top: 12px; left: 12px;
border-width: 1px 0 0 1px;
}
.plate::after {
bottom: 12px; right: 12px;
border-width: 0 1px 1px 0;
}
/* secondary bracket set for cinema-feel */
.plate__brackets {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 3;
}
.plate__brackets::before,
.plate__brackets::after {
content: "";
position: absolute;
width: 22px;
height: 22px;
border-color: var(--outline);
border-style: solid;
}
.plate__brackets::before {
top: 12px; right: 12px;
border-width: 1px 1px 0 0;
}
.plate__brackets::after {
bottom: 12px; left: 12px;
border-width: 0 0 1px 1px;
}
.plate__tag {
position: absolute;
top: 24px;
left: 44px;
z-index: 4;
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--tertiary);
}
.plate__brief {
position: absolute;
bottom: 32px;
left: 44px;
right: 44px;
z-index: 4;
font-family: var(--font-body);
font-style: italic;
font-weight: 400;
font-size: 13px;
line-height: 1.6;
color: var(--neutral);
max-width: 620px;
}
.plate__brief::before {
content: "";
display: block;
width: 36px;
height: 1px;
background: var(--outline-variant);
margin-bottom: 10px;
}
/* atmospheric ember bloom on plate — layered with a chromatic-aberration
ring at the hot centre for forge-fire warmth */
.plate__bloom {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
}
/* Chromatic-aberration ring — warm gold-tinted, RGB channel-split feel.
Positioned by inline style at each plate's hot centre. */
.aberration {
position: absolute;
z-index: 2;
width: 8px;
height: 8px;
border-radius: 50%;
pointer-events: none;
background: var(--secondary);
box-shadow:
0 0 0 1px rgba(229,166,75,0.85), /* warm-gold outer */
0 0 0 2px rgba(217,62,26,0.75), /* crimson mid */
0 0 0 3px rgba(90,26,10,0.55), /* deep-blood inner */
0 0 12px 3px rgba(229,166,75,0.65),
0 0 30px 10px rgba(217,62,26,0.5),
0 0 70px 22px rgba(90,26,10,0.35);
}
/* Spark-field container — practical-effects gold particles */
.sparks {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
opacity: 0.7;
}
/* ============================================================
NAV — sparse, tracked-out, HUD-quiet
============================================================ */
.nav {
position: relative;
z-index: 20;
display: flex;
align-items: center;
justify-content: space-between;
padding: 22px 48px;
background: transparent;
border-bottom: 1px solid var(--outline-variant);
}
.nav__brand {
font-family: var(--font-head);
font-weight: 700;
font-size: 18px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--text);
display: flex;
align-items: center;
gap: 12px;
}
.nav__brand-mark {
display: inline-block;
width: 6px;
height: 6px;
background: var(--secondary);
border-radius: 50%;
box-shadow:
0 0 4px rgba(229,166,75,0.95),
0 0 12px rgba(217,62,26,0.7),
0 0 24px rgba(90,26,10,0.45);
}
.nav__menu {
display: flex;
gap: 40px;
list-style: none;
}
.nav__link {
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--neutral);
transition: color 0.2s;
}
.nav__link:hover { color: var(--primary); }
.nav__signal {
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--tertiary);
display: flex;
align-items: center;
}
/* ============================================================
HERO — 100vh opening tableau
============================================================ */
.hero {
position: relative;
height: 100vh;
min-height: 720px;
background:
radial-gradient(ellipse 55% 40% at 70% 55%, rgba(229,166,75,0.10) 0%, rgba(217,62,26,0.28) 30%, rgba(90,26,10,0.20) 60%, transparent 80%),
radial-gradient(ellipse 80% 55% at 30% 30%, rgba(90,26,10,0.18), transparent 60%),
radial-gradient(ellipse 120% 80% at 50% 50%, var(--anchor), #050202 90%);
display: flex;
align-items: center;
overflow: hidden;
}
/* Warm cinematic vignette on hero */
.hero::after {
content: "";
position: absolute;
inset: 0;
z-index: 5;
pointer-events: none;
background: var(--forge-vignette);
}
.hero__starfield {
position: absolute;
inset: 0;
z-index: 1;
}
/* Hero ember — full four-stop chromatic falloff, gold hot centre → crimson → blood → transparent */
.hero__ember {
position: absolute;
top: 55%;
left: 70%;
width: 4px;
height: 4px;
background: var(--secondary);
border-radius: 50%;
z-index: 3;
box-shadow:
0 0 0 1px rgba(229,166,75,0.9),
0 0 0 2px rgba(217,62,26,0.75),
0 0 0 3px rgba(90,26,10,0.55),
0 0 6px 2px rgba(229,166,75,0.9),
0 0 20px 6px rgba(217,62,26,0.7),
0 0 60px 18px rgba(90,26,10,0.45),
0 0 140px 40px rgba(90,26,10,0.22);
}
.hero__letterbox-top,
.hero__letterbox-bot {
position: absolute;
left: 0;
right: 0;
height: 52px;
background: #050202;
z-index: 7;
}
.hero__letterbox-top { top: 0; border-bottom: 1px solid var(--outline-variant); }
.hero__letterbox-bot { bottom: 0; border-top: 1px solid var(--outline-variant); }
.hero__content {
position: relative;
z-index: 6;
max-width: var(--container-max);
margin: 0 auto;
padding: 0 48px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
width: 100%;
}
.hero__copy {
display: flex;
flex-direction: column;
gap: 32px;
}
.hero__chapter {
display: flex;
align-items: center;
}
.hero__title {
display: block;
font-family: var(--font-head);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
line-height: 0.94;
}
.hero__title-line {
display: block;
font-size: clamp(46px, 7.4vw, 108px);
color: var(--text);
}
/* Halation on the ember line — warm crimson-gold gradient with hot centre bloom */
.hero__title-line--ember {
background: linear-gradient(90deg, var(--secondary) 0%, var(--primary) 45%, var(--crimson-deep) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow:
0 0 12px rgba(229,166,75,0.35),
0 0 30px rgba(217,62,26,0.35),
0 0 60px rgba(90,26,10,0.4);
}
.hero__sub {
max-width: 460px;
font-family: var(--font-body);
font-size: var(--fs-lead);
line-height: 1.5;
color: var(--neutral);
font-weight: 400;
}
.hero__ctas {
display: flex;
gap: 20px;
margin-top: 12px;
align-items: center;
}
.btn {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 16px 28px;
font-family: var(--font-body);
font-size: var(--fs-small);
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
border-radius: var(--radius-sm);
cursor: pointer;
border: none;
transition: all 0.25s ease;
}
.btn--primary {
background: var(--primary);
color: #150806;
box-shadow:
0 0 0 1px rgba(229,166,75,0.35),
0 0 24px rgba(217,62,26,0.45),
0 0 60px rgba(90,26,10,0.28);
}
.btn--primary:hover {
background: var(--secondary);
color: #150806;
box-shadow:
0 0 0 1px rgba(229,166,75,0.7),
0 0 32px rgba(229,166,75,0.55),
0 0 90px rgba(217,62,26,0.42);
}
.btn--ghost {
background: transparent;
color: var(--primary);
border: 1px solid var(--primary);
}
.btn--ghost:hover {
background: rgba(217,62,26,0.10);
color: var(--secondary);
border-color: var(--secondary);
box-shadow: 0 0 24px rgba(217,62,26,0.30);
}
.hero__plate-wrap {
position: relative;
aspect-ratio: 3 / 4;
max-height: 78vh;
}
.hero__plate {
position: absolute;
inset: 0;
}
/* ============================================================
TRUST BAR — quiet HUD strip
============================================================ */
.trust {
background: var(--anchor);
border-top: 1px solid var(--outline-variant);
border-bottom: 1px solid var(--outline-variant);
padding: 26px 48px;
position: relative;
z-index: 10;
}
.trust__row {
max-width: var(--container-max);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
align-items: baseline;
}
.trust__item {
display: flex;
flex-direction: column;
gap: 6px;
border-left: 1px solid var(--outline-variant);
padding-left: 20px;
}
.trust__item:first-child { border-left: none; padding-left: 0; }
.trust__label {
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--tertiary);
}
.trust__value {
font-family: var(--font-head);
font-size: 18px;
font-weight: 600;
color: var(--text);
letter-spacing: 0.02em;
}
/* ============================================================
THE FLEET — dossier tiles at movie-poster scale
============================================================ */
.fleet {
padding: 140px 0 160px;
position: relative;
}
.fleet::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 40% at 15% 30%, rgba(217,62,26,0.12), transparent 60%),
radial-gradient(ellipse 50% 40% at 90% 80%, rgba(90,26,10,0.14), transparent 60%);
z-index: 1;
}
.fleet__header {
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
gap: 40px;
margin-bottom: 72px;
}
.fleet__lead {
display: flex;
flex-direction: column;
gap: 20px;
}
.fleet__title {
font-size: clamp(44px, 5.6vw, 84px);
text-transform: uppercase;
letter-spacing: 0.02em;
line-height: 1;
}
.fleet__title strong {
background: linear-gradient(90deg, var(--secondary) 0%, var(--primary) 55%, var(--crimson-deep) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: 700;
text-shadow: 0 0 40px rgba(217,62,26,0.28);
}
.fleet__meta {
display: flex;
flex-direction: column;
gap: 8px;
text-align: right;
padding-bottom: 6px;
}
.fleet__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.dossier {
position: relative;
background: var(--container-low);
display: flex;
flex-direction: column;
border: 1px solid var(--outline-variant);
transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.dossier:hover {
border-color: var(--primary);
transform: translateY(-4px);
box-shadow: 0 0 40px rgba(217,62,26,0.25), 0 0 90px rgba(90,26,10,0.20);
}
.dossier__plate {
aspect-ratio: 4 / 5;
position: relative;
border-bottom: 1px solid var(--outline-variant);
}
.dossier__meta {
position: absolute;
top: 16px;
right: 16px;
z-index: 4;
text-align: right;
display: flex;
flex-direction: column;
gap: 3px;
}
.dossier__code {
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--tertiary);
}
.dossier__code--warm { color: var(--primary); }
.dossier__body {
padding: 28px 28px 32px;
display: flex;
flex-direction: column;
gap: 14px;
}
.dossier__specimen {
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--tertiary);
}
.dossier__name {
font-family: var(--font-head);
font-weight: 700;
font-size: 28px;
line-height: 1;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text);
}
.dossier__specs {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 6px;
padding-top: 14px;
border-top: 1px dashed var(--outline-variant);
}
.dossier__spec {
display: flex;
justify-content: space-between;
gap: 20px;
font-family: var(--font-body);
font-size: var(--fs-micro);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
font-weight: 500;
}
.dossier__spec-k { color: var(--outline); }
.dossier__spec-v { color: var(--neutral); }
.dossier__foot {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-top: 8px;
padding-top: 18px;
border-top: 1px solid var(--outline-variant);
}
.dossier__price {
font-family: var(--font-head);
font-weight: 700;
font-size: 26px;
color: var(--primary);
letter-spacing: 0.02em;
text-shadow: 0 0 18px rgba(217,62,26,0.35);
}
.dossier__price-sub {
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--outline);
margin-top: 3px;
}
.dossier__acquire {
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--primary);
display: flex;
align-items: center;
gap: 8px;
}
.dossier__acquire::after {
content: "→";
font-size: 14px;
}
/* ============================================================
EDITORIAL — full-bleed forge tableau
============================================================ */
.forge {
position: relative;
background: var(--anchor);
padding: 0;
}
.forge__inner {
display: grid;
grid-template-columns: 1.05fr 1fr;
min-height: 88vh;
}
.forge__visual {
position: relative;
background: var(--container-low);
overflow: hidden;
}
.forge__visual .plate {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 40% at 50% 90%, rgba(229,166,75,0.15) 0%, rgba(217,62,26,0.30) 25%, rgba(90,26,10,0.22) 55%, transparent 80%),
radial-gradient(ellipse 100% 50% at 50% 50%, var(--container-low), var(--anchor) 90%);
}
.forge__visual .plate__brief {
max-width: 460px;
}
.forge__copy {
padding: 96px 72px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 32px;
background:
linear-gradient(90deg, transparent 0%, rgba(217,62,26,0.05) 100%),
var(--anchor);
border-left: 1px solid var(--outline-variant);
position: relative;
}
.forge__chapter { display: flex; align-items: center; margin-bottom: 8px; }
.forge__title {
font-size: clamp(44px, 5.6vw, 84px);
text-transform: uppercase;
letter-spacing: 0.02em;
line-height: 1;
color: var(--neutral);
}
.forge__title strong {
display: block;
color: var(--text);
font-weight: 700;
margin-top: 8px;
}
.forge__title em {
background: linear-gradient(90deg, var(--secondary) 0%, var(--primary) 55%, var(--crimson-deep) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-style: normal;
font-weight: 700;
text-shadow: 0 0 30px rgba(217,62,26,0.35);
}
.forge__body {
max-width: 480px;
font-family: var(--font-body);
font-size: var(--fs-lead);
line-height: 1.55;
color: var(--neutral);
}
.forge__body p + p { margin-top: 18px; }
.forge__evidencing {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
padding-top: 32px;
margin-top: 8px;
border-top: 1px solid var(--outline-variant);
}
.forge__ev-label {
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--tertiary);
}
.forge__ev-value {
font-family: var(--font-head);
font-weight: 700;
font-size: 22px;
color: var(--text);
margin-top: 6px;
letter-spacing: 0.02em;
}
/* ============================================================
ANATOMY — dossier close-up on Starkiller SE
============================================================ */
.anatomy {
position: relative;
padding: 140px 0 160px;
background:
radial-gradient(ellipse 60% 45% at 50% 55%, rgba(217,62,26,0.14), transparent 70%),
var(--anchor);
}
.anatomy__haze {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 100% 50% at 50% 90%, rgba(229,166,75,0.10), transparent 60%),
radial-gradient(ellipse 20% 80% at 12% 50%, rgba(90,26,10,0.14), transparent 60%),
radial-gradient(ellipse 20% 80% at 88% 50%, rgba(90,26,10,0.14), transparent 60%);
z-index: 1;
}
.anatomy__header {
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
gap: 40px;
margin-bottom: 64px;
}
.anatomy__title {
font-size: clamp(44px, 5.6vw, 84px);
text-transform: uppercase;
letter-spacing: 0.02em;
line-height: 1;
}
.anatomy__title strong {
background: linear-gradient(90deg, var(--secondary) 0%, var(--primary) 55%, var(--crimson-deep) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: 700;
text-shadow: 0 0 40px rgba(217,62,26,0.30);
}
.anatomy__lede {
font-family: var(--font-body);
font-size: var(--fs-lead);
line-height: 1.5;
color: var(--neutral);
max-width: 420px;
padding-bottom: 6px;
}
.anatomy__stage {
position: relative;
aspect-ratio: 21 / 9;
background: var(--container-low);
border: 1px solid var(--outline-variant);
}
.anatomy__stage .plate {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 55% at 30% 55%, rgba(229,166,75,0.14) 0%, rgba(217,62,26,0.26) 30%, rgba(90,26,10,0.18) 60%, transparent 80%),
radial-gradient(ellipse 100% 60% at 50% 50%, var(--container-low), var(--anchor) 92%);
}
/* HUD anatomy annotations — muted rose tick marks + labels layered over the plate */
.anatomy__annotations {
position: absolute;
inset: 0;
z-index: 4;
pointer-events: none;
}
.anno {
position: absolute;
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--tertiary);
display: flex;
flex-direction: column;
gap: 4px;
align-items: center;
}
.anno::before {
content: "";
display: block;
width: 1px;
height: 40px;
background: rgba(192,131,112,0.55);
}
.anno--bottom { flex-direction: column-reverse; }
.anno-1 { top: 32px; left: 12%; }
.anno-2 { top: 32px; left: 32%; }
.anno-3 { top: 32px; left: 52%; }
.anno-4 { top: 32px; left: 72%; }
.anno-5 { top: 32px; left: 88%; }
.anatomy__dossier {
position: absolute;
left: 32px;
bottom: 32px;
z-index: 6;
display: flex;
flex-direction: column;
gap: 6px;
}
.anatomy__dossier-label {
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--tertiary);
}
.anatomy__dossier-name {
font-family: var(--font-head);
font-weight: 700;
font-size: 26px;
line-height: 1;
color: var(--text);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-top: 2px;
}
.anatomy__spec {
position: absolute;
right: 32px;
bottom: 32px;
z-index: 6;
display: flex;
flex-direction: column;
gap: 4px;
text-align: right;
}
.anatomy__spec-line {
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--tertiary);
}
.anatomy__foot {
margin-top: 40px;
display: grid;
grid-template-columns: repeat(4, 1fr) auto;
gap: 32px;
align-items: end;
}
.anatomy__foot-item {
display: flex;
flex-direction: column;
gap: 6px;
border-top: 1px solid var(--outline-variant);
padding-top: 16px;
}
.anatomy__foot-label {
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--tertiary);
}
.anatomy__foot-value {
font-family: var(--font-head);
font-weight: 700;
font-size: 22px;
color: var(--text);
letter-spacing: 0.02em;
}
.anatomy__foot-value--ember { color: var(--primary); text-shadow: 0 0 18px rgba(217,62,26,0.4); }
/* ============================================================
DRAMATIS PERSONAE — 3x2 character grid, movie-poster scale
============================================================ */
.personae {
position: relative;
padding: 140px 0 160px;
background:
radial-gradient(ellipse 60% 45% at 85% 20%, rgba(90,26,10,0.14), transparent 60%),
radial-gradient(ellipse 60% 45% at 15% 80%, rgba(217,62,26,0.10), transparent 60%),
var(--anchor);
}
.personae__header {
display: grid;
grid-template-columns: 1fr auto;
gap: 40px;
align-items: end;
margin-bottom: 64px;
}
.personae__title {
font-size: clamp(44px, 5.6vw, 84px);
text-transform: uppercase;
letter-spacing: 0.02em;
line-height: 1;
}
.personae__title strong {
background: linear-gradient(90deg, var(--secondary) 0%, var(--primary) 55%, var(--crimson-deep) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: 700;
text-shadow: 0 0 40px rgba(217,62,26,0.30);
}
.personae__view-all {
display: flex;
flex-direction: column;
gap: 6px;
text-align: right;
padding-bottom: 6px;
}
.personae__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.persona {
position: relative;
aspect-ratio: 3 / 4;
background: var(--container-low);
border: 1px solid var(--outline-variant);
overflow: hidden;
transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.persona:hover {
border-color: var(--primary);
transform: translateY(-4px);
box-shadow: 0 0 40px rgba(217,62,26,0.28), 0 0 90px rgba(90,26,10,0.24);
}
.persona__plate {
position: absolute;
inset: 0;
}
.persona__overlay {
position: absolute;
inset: 0;
z-index: 5;
background: linear-gradient(180deg, transparent 40%, rgba(15,8,8,0.9) 100%);
pointer-events: none;
}
.persona__tag {
position: absolute;
top: 18px;
left: 18px;
z-index: 6;
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--tertiary);
display: flex;
align-items: center;
}
.persona__meta-tr {
position: absolute;
top: 18px;
right: 18px;
z-index: 6;
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--outline);
}
.persona__label {
position: absolute;
left: 24px;
right: 24px;
bottom: 24px;
z-index: 7;
display: flex;
flex-direction: column;
gap: 8px;
}
.persona__faction {
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--primary);
}
.persona__name {
font-family: var(--font-head);
font-weight: 700;
font-size: 30px;
line-height: 1;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text);
}
.persona__count {
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--neutral);
display: flex;
justify-content: space-between;
margin-top: 4px;
padding-top: 10px;
border-top: 1px dashed var(--outline-variant);
}
/* ============================================================
SIGNAL ORIGIN — founder editorial
============================================================ */
.origin {
position: relative;
padding: 140px 0 160px;
}
.origin__inner {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 72px;
align-items: center;
}
.origin__copy {
display: flex;
flex-direction: column;
gap: 28px;
}
.origin__title {
font-size: clamp(40px, 5vw, 72px);
text-transform: uppercase;
letter-spacing: 0.02em;
line-height: 1;
}
.origin__title strong {
background: linear-gradient(90deg, var(--secondary) 0%, var(--primary) 55%, var(--crimson-deep) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: 700;
text-shadow: 0 0 40px rgba(217,62,26,0.28);
}
.origin__body {
font-family: var(--font-body);
font-size: 18px;
line-height: 1.65;
color: var(--neutral);
max-width: 480px;
}
.origin__body p + p { margin-top: 16px; }
.origin__sig {
margin-top: 12px;
padding-top: 20px;
border-top: 1px solid var(--outline-variant);
display: flex;
flex-direction: column;
gap: 4px;
max-width: 400px;
}
.origin__sig-name {
font-family: var(--font-head);
font-weight: 700;
font-size: 18px;
color: var(--text);
letter-spacing: 0.02em;
}
.origin__sig-role {
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--tertiary);
}
.origin__plate-wrap {
position: relative;
aspect-ratio: 4 / 5;
}
.origin__plate {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 60% at 40% 50%, rgba(229,166,75,0.12) 0%, rgba(217,62,26,0.25) 30%, rgba(90,26,10,0.20) 60%, transparent 80%),
radial-gradient(ellipse 100% 60% at 50% 50%, var(--container-low), var(--anchor) 92%);
}
/* ============================================================
TRANSMISSION — comms terminal / newsletter
============================================================ */
.transmission {
position: relative;
background:
radial-gradient(ellipse 100% 55% at 50% 50%, rgba(217,62,26,0.14) 0%, rgba(90,26,10,0.18) 55%, transparent 80%),
linear-gradient(to bottom, #050202 0%, var(--anchor) 55%, #050202 100%);
padding: 140px 0 160px;
border-top: 1px solid var(--outline-variant);
border-bottom: 1px solid var(--outline-variant);
}
/* Warm cinematic vignette on the closing section */
.transmission::after {
content: "";
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
background: var(--forge-vignette);
}
.transmission__horizon {
position: absolute;
top: 68%;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(to right,
transparent 0%,
rgba(217,62,26,0.35) 12%,
var(--primary) 32%,
var(--secondary) 50%,
var(--primary) 68%,
rgba(217,62,26,0.35) 88%,
transparent 100%);
box-shadow:
0 0 8px rgba(229,166,75,0.55),
0 0 30px rgba(217,62,26,0.55),
0 0 80px rgba(90,26,10,0.35);
z-index: 4;
}
.transmission__stars {
position: absolute;
inset: 0;
z-index: 1;
opacity: 0.55;
}
.transmission__panel {
max-width: 780px;
margin: 0 auto;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
position: relative;
z-index: 6;
}
.transmission__chapter {
display: flex;
align-items: center;
justify-content: center;
}
.transmission__title {
font-size: clamp(40px, 5.4vw, 76px);
text-transform: uppercase;
letter-spacing: 0.06em;
line-height: 1;
color: var(--text);
}
.transmission__title strong {
background: linear-gradient(90deg, var(--secondary) 0%, var(--primary) 55%, var(--crimson-deep) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: 700;
display: block;
text-shadow: 0 0 40px rgba(217,62,26,0.32);
}
.transmission__lede {
max-width: 500px;
font-family: var(--font-body);
font-size: var(--fs-lead);
line-height: 1.55;
color: var(--neutral);
}
.transmission__form {
display: flex;
gap: 0;
width: 100%;
max-width: 540px;
margin-top: 8px;
border: 1px solid var(--outline-variant);
background: var(--container-low);
transition: border-color 0.25s, box-shadow 0.25s;
}
.transmission__form:focus-within {
border-color: var(--primary);
box-shadow: 0 0 30px rgba(217,62,26,0.30), 0 0 90px rgba(90,26,10,0.22);
}
.transmission__input {
flex: 1;
background: transparent;
border: none;
padding: 18px 22px;
font-family: var(--font-body);
font-size: var(--fs-small);
color: var(--text);
letter-spacing: 0.06em;
outline: none;
}
.transmission__input::placeholder {
color: var(--outline);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
font-size: var(--fs-micro);
}
.transmission__submit {
background: var(--primary);
border: none;
color: #150806;
padding: 0 32px;
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 600;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
cursor: pointer;
transition: background 0.2s;
}
.transmission__submit:hover { background: var(--secondary); }
.transmission__coda {
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--outline);
margin-top: 12px;
}
/* ============================================================
FOOTER — quiet HUD-shaped
============================================================ */
.footer {
background: #050202;
padding: 80px 0 48px;
position: relative;
}
.footer__grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 56px;
padding-bottom: 56px;
border-bottom: 1px solid var(--outline-variant);
}
.footer__brand {
display: flex;
flex-direction: column;
gap: 20px;
max-width: 380px;
}
.footer__brand-mark {
font-family: var(--font-head);
font-weight: 700;
font-size: 22px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--text);
display: flex;
align-items: center;
gap: 12px;
}
.footer__tagline {
font-family: var(--font-body);
font-size: var(--fs-small);
color: var(--neutral);
line-height: 1.6;
}
.footer__tagline strong {
color: var(--primary);
font-weight: 500;
}
.footer__coord {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 8px;
}
.footer__col-title {
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--tertiary);
margin-bottom: 18px;
}
.footer__list {
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
}
.footer__link {
font-family: var(--font-body);
font-size: var(--fs-small);
color: var(--neutral);
transition: color 0.2s;
}
.footer__link:hover { color: var(--primary); }
.footer__bar {
padding-top: 32px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 40px;
}
.footer__meta {
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--outline);
}
.footer__signal {
display: flex;
align-items: center;
gap: 24px;
}
.footer__signal .hud { color: var(--tertiary); }
/* ============================================================
Responsive
============================================================ */
@media (max-width: 1080px) {
.hero__content { grid-template-columns: 1fr; gap: 40px; }
.hero__plate-wrap { max-height: 46vh; aspect-ratio: 16 / 9; }
.fleet__grid { grid-template-columns: repeat(2, 1fr); }
.personae__grid { grid-template-columns: repeat(2, 1fr); }
.forge__inner { grid-template-columns: 1fr; }
.forge__visual { min-height: 60vh; }
.forge__copy { padding: 72px 40px; border-left: none; border-top: 1px solid var(--outline-variant); }
.origin__inner { grid-template-columns: 1fr; gap: 48px; }
.anatomy__foot { grid-template-columns: repeat(2, 1fr); }
.footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
:root {
--fs-display: 60px;
--fs-h1: 44px;
--fs-h2: 32px;
--fs-lead: 17px;
--space-2xl: 64px;
--space-xl: 48px;
}
.content, .nav { padding-left: 24px; padding-right: 24px; }
.nav { padding-top: 18px; padding-bottom: 18px; }
.nav__menu { display: none; }
.section__hud-tl, .section__hud-tr { top: 24px; }
.section__hud-tl { left: 24px; }
.section__hud-tr { right: 24px; }
.section__hud-bl, .section__hud-br { bottom: 24px; }
.section__hud-bl { left: 24px; }
.section__hud-br { right: 24px; }
.section__frame { inset: 12px; }
.hero__ctas { flex-direction: column; align-items: stretch; }
.btn { justify-content: center; }
.trust__row { grid-template-columns: 1fr 1fr; gap: 24px; }
.trust__item { border-left: none; padding-left: 0; }
.fleet__grid, .personae__grid { grid-template-columns: 1fr; }
.fleet__header, .anatomy__header, .personae__header { grid-template-columns: 1fr; }
.fleet__meta, .personae__view-all { text-align: left; }
.footer__grid { grid-template-columns: 1fr; gap: 40px; }
.footer__bar { flex-direction: column; align-items: flex-start; }
.anatomy__stage { aspect-ratio: 4 / 5; }
.anno { display: none; }
.anatomy__foot { grid-template-columns: 1fr; }
.fleet, .anatomy, .personae, .origin, .transmission { padding: 96px 0 112px; }
.forge__copy { padding: 56px 24px; }
}
</style>
</head>
<body>
<!-- Shared SVG defs — turbulence grain reused across sections, warm forge palette -->
<svg width="0" height="0" style="position:absolute" aria-hidden="true">
<defs>
<filter id="grain">
<feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" seed="7" stitchTiles="stitch"/>
<feColorMatrix values="0 0 0 0 0.92 0 0 0 0 0.78 0 0 0 0 0.68 0 0 0 0.6 0"/>
</filter>
<filter id="grain-warm">
<feTurbulence type="fractalNoise" baseFrequency="0.72" numOctaves="2" seed="13" stitchTiles="stitch"/>
<feColorMatrix values="0 0 0 0 0.95 0 0 0 0 0.62 0 0 0 0 0.45 0 0 0 0.55 0"/>
</filter>
<filter id="grain-forge">
<feTurbulence type="fractalNoise" baseFrequency="0.55" numOctaves="2" seed="19" stitchTiles="stitch"/>
<feColorMatrix values="0 0 0 0 0.88 0 0 0 0 0.42 0 0 0 0 0.22 0 0 0 0.45 0"/>
</filter>
<filter id="grain-ash">
<feTurbulence type="fractalNoise" baseFrequency="1.1" numOctaves="2" seed="21" stitchTiles="stitch"/>
<feColorMatrix values="0 0 0 0 0.75 0 0 0 0 0.55 0 0 0 0 0.48 0 0 0 0.4 0"/>
</filter>
</defs>
</svg>
<!-- ============================================================
NAVIGATION — sparse, tracked-out, HUD-quiet
============================================================ -->
<header class="nav" role="banner">
<a href="#" class="nav__brand">
<span class="nav__brand-mark"></span>
ARTSABERS
</a>
<nav aria-label="Primary">
<ul class="nav__menu">
<li><a href="#fleet" class="nav__link">The Fleet</a></li>
<li><a href="#personae" class="nav__link">Characters</a></li>
<li><a href="#anatomy" class="nav__link">Saber Cores</a></li>
<li><a href="#forge" class="nav__link">Factory Direct</a></li>
<li><a href="#origin" class="nav__link">The Signal</a></li>
</ul>
</nav>
<div class="nav__signal">
<span class="hud__pip"></span>Signal · Open
</div>
</header>
<main>
<!-- ============================================================
HERO — 100vh opening tableau
============================================================ -->
<section class="hero" aria-label="Hero: from factory floor to your door">
<!-- Starfield / spark-field backdrop — gold points suggesting drifting forge sparks -->
<svg class="hero__starfield" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
<g fill="#E5A64B">
<circle cx="60" cy="120" r="0.8" opacity="0.7"/>
<circle cx="140" cy="220" r="1.1" opacity="0.9"/>
<circle cx="80" cy="380" r="0.6" opacity="0.5"/>
<circle cx="220" cy="80" r="0.9" opacity="0.85"/>
<circle cx="320" cy="180" r="0.5" opacity="0.4"/>
<circle cx="410" cy="60" r="1.3" opacity="0.95"/>
<circle cx="500" cy="220" r="0.7" opacity="0.6"/>
<circle cx="600" cy="120" r="0.8" opacity="0.7"/>
<circle cx="720" cy="90" r="0.5" opacity="0.35"/>
<circle cx="820" cy="240" r="0.9" opacity="0.8"/>
<circle cx="900" cy="150" r="0.6" opacity="0.55"/>
<circle cx="1020" cy="80" r="1" opacity="0.9"/>
<circle cx="1120" cy="200" r="0.7" opacity="0.65"/>
<circle cx="1240" cy="130" r="0.5" opacity="0.4"/>
<circle cx="1360" cy="250" r="0.9" opacity="0.85"/>
<circle cx="1440" cy="70" r="0.8" opacity="0.75"/>
<circle cx="1540" cy="200" r="0.6" opacity="0.5"/>
<circle cx="120" cy="500" r="0.8" opacity="0.7"/>
<circle cx="240" cy="640" r="1" opacity="0.85"/>
<circle cx="360" cy="480" r="0.5" opacity="0.4"/>
<circle cx="440" cy="720" r="0.9" opacity="0.8"/>
<circle cx="540" cy="580" r="0.6" opacity="0.5"/>
<circle cx="620" cy="800" r="1.1" opacity="0.9"/>
<circle cx="760" cy="520" r="0.4" opacity="0.35"/>
<circle cx="880" cy="700" r="0.8" opacity="0.75"/>
<circle cx="960" cy="620" r="0.6" opacity="0.55"/>
<circle cx="1080" cy="780" r="0.9" opacity="0.8"/>
<circle cx="1180" cy="500" r="0.5" opacity="0.4"/>
<circle cx="1300" cy="680" r="0.7" opacity="0.65"/>
<circle cx="1420" cy="540" r="0.6" opacity="0.5"/>
<circle cx="1520" cy="740" r="0.9" opacity="0.85"/>
<circle cx="180" cy="440" r="0.4" opacity="0.3"/>
<circle cx="380" cy="350" r="0.5" opacity="0.4"/>
<circle cx="560" cy="400" r="0.4" opacity="0.35"/>
<circle cx="780" cy="380" r="0.5" opacity="0.4"/>
<circle cx="960" cy="440" r="0.4" opacity="0.3"/>
<circle cx="1140" cy="360" r="0.5" opacity="0.4"/>
<circle cx="1340" cy="410" r="0.4" opacity="0.35"/>
<circle cx="1500" cy="380" r="0.5" opacity="0.4"/>
</g>
<rect width="1600" height="900" filter="url(#grain-forge)" opacity="0.14"/>
</svg>
<div class="hero__ember"></div>
<!-- Cinema letterbox bars -->
<div class="hero__letterbox-top"></div>
<div class="hero__letterbox-bot"></div>
<!-- HUD chrome -->
<div class="section__hud-tl" style="top: 72px; left: 48px;">
<span class="hud"><span class="hud__pip"></span>Reel I · Signal locked</span>
</div>
<div class="section__hud-tr" style="top: 72px; right: 48px;">
<span class="hud">Transmission / 01</span>
</div>
<div class="section__hud-bl" style="bottom: 72px; left: 48px;">
<span class="hud hud--outline">Latitude − The Galaxy</span>
</div>
<div class="section__hud-br" style="bottom: 72px; right: 48px;">
<span class="hud">Scroll to begin ↓</span>
</div>
<div class="hero__content">
<div class="hero__copy">
<div class="hero__chapter">
<span class="hud"><span class="hud__pip"></span>Chapter 01 · Opening</span>
</div>
<h1 class="hero__title">
<span class="hero__title-line">From factory floor</span>
<span class="hero__title-line hero__title-line--ember">to your door.</span>
</h1>
<p class="hero__sub">
Three-hundred-and-fifty replica saber models. Every character, every Saber Core, every duelling grade — shipped direct from the factory, backed by humans who don't disappear after payment.
</p>
<div class="hero__ctas">
<a href="#fleet" class="btn btn--primary">Enter the fleet</a>
<a href="#origin" class="btn btn--ghost">Read the signal</a>
</div>
</div>
<div class="hero__plate-wrap">
<figure class="plate plate--rim-left hero__plate" role="img" aria-label="Hero product photograph placeholder">
<div class="plate__brackets"></div>
<div class="plate__bloom" style="background: radial-gradient(ellipse 55% 60% at 62% 55%, rgba(229,166,75,0.20) 0%, rgba(217,62,26,0.32) 25%, rgba(90,26,10,0.22) 55%, transparent 80%);"></div>
<div class="aberration" style="top: 53%; left: 60%;"></div>
<div class="plate__tag">IMG · HERO-001</div>
<figcaption class="plate__brief">
Three-quarter cinematic hero shot of the Starkiller SE hilt held vertical against a deep matte-black void backdrop. Warm gold key-light from a single off-frame forge source at camera-right, deep-crimson rim-light along the opposite edge. Fine airborne dust and drifting forge sparks catching the ember. Crimson-red blade retracted into the emitter. Product photographed slightly under-exposed so the emitter's activation stud reads as the hottest point in the frame — a Sith-holocron core burning through the dark.
</figcaption>
</figure>
</div>
</div>
</section>
<!-- ============================================================
TRUST BAR — quiet HUD telemetry strip
============================================================ -->
<section class="trust" aria-label="Fleet telemetry">
<div class="trust__row">
<div class="trust__item">
<span class="trust__label">Specimen count</span>
<span class="trust__value">1,100 SKUs</span>
</div>
<div class="trust__item">
<span class="trust__label">Unique models</span>
<span class="trust__value">~350 hilts</span>
</div>
<div class="trust__item">
<span class="trust__label">Transit window</span>
<span class="trust__value">7—10 Days global</span>
</div>
<div class="trust__item">
<span class="trust__label">Comms response</span>
<span class="trust__value">24-hour signal</span>
</div>
</div>
</section>
<!-- ============================================================
THE FLEET — three dossier tiles at movie-poster scale
============================================================ -->
<section class="section fleet" id="fleet" aria-label="The Fleet: featured sabers">
<div class="section__frame"></div>
<div class="section__haze"></div>
<div class="section__hud-tl">
<span class="hud"><span class="hud__pip"></span>Chapter 02 · The Fleet</span>
</div>
<div class="section__hud-tr">
<span class="hud">Dossier / 003 selected</span>
</div>
<div class="content">
<header class="fleet__header">
<div class="fleet__lead">
<h2 class="fleet__title">Specimens<br><strong>currently in reel.</strong></h2>
</div>
<div class="fleet__meta">
<span class="hud">Sort / Feature reel</span>
<span class="hud hud--outline">Filter / All Saber Cores</span>
</div>
</header>
<div class="fleet__grid">
<!-- Dossier 1: Starkiller SE -->
<article class="dossier">
<div class="dossier__plate">
<div class="plate plate--rim-right" style="position:absolute; inset:0;" role="img" aria-label="Starkiller SE product plate">
<div class="plate__brackets"></div>
<div class="plate__bloom" style="background: radial-gradient(ellipse 60% 50% at 45% 55%, rgba(229,166,75,0.18) 0%, rgba(217,62,26,0.32) 28%, rgba(90,26,10,0.22) 60%, transparent 80%);"></div>
<div class="aberration" style="top: 55%; left: 45%;"></div>
<div class="plate__tag">SLOT · PROD-001</div>
<div class="plate__brief">
Studio hero of the Starkiller SE hilt tilted 15° toward camera, gold forge rim-light along the emitter's underside, matte anchor backdrop. Crimson-red blade retracted. Grip texture readable under the warm key.
</div>
</div>
<div class="dossier__meta">
<span class="dossier__code">Dossier / 001</span>
<span class="dossier__code dossier__code--warm">ARTSABERS Exclusive</span>
</div>
</div>
<div class="dossier__body">
<span class="dossier__specimen">Specimen / Character replica</span>
<h3 class="dossier__name">Starkiller SE</h3>
<div class="dossier__specs">
<div class="dossier__spec"><span class="dossier__spec-k">Core</span><span class="dossier__spec-v">Proffie 2.2</span></div>
<div class="dossier__spec"><span class="dossier__spec-k">Grade</span><span class="dossier__spec-v">Heavy duelling</span></div>
<div class="dossier__spec"><span class="dossier__spec-k">Blade</span><span class="dossier__spec-v">Neopixel · Infinite colour</span></div>
<div class="dossier__spec"><span class="dossier__spec-k">Sound fonts</span><span class="dossier__spec-v">34 pre-loaded</span></div>
</div>
<div class="dossier__foot">
<div>
<div class="dossier__price">$629</div>
<div class="dossier__price-sub">USD · 7–10 days</div>
</div>
<a href="#" class="dossier__acquire">Acquire</a>
</div>
</div>
</article>
<!-- Dossier 2: Mace Windu SE -->
<article class="dossier">
<div class="dossier__plate">
<div class="plate plate--rim-left" style="position:absolute; inset:0;" role="img" aria-label="Mace Windu SE product plate">
<div class="plate__brackets"></div>
<div class="plate__bloom" style="background: radial-gradient(ellipse 60% 50% at 55% 55%, rgba(229,166,75,0.16) 0%, rgba(217,62,26,0.28) 30%, rgba(90,26,10,0.22) 60%, transparent 80%);"></div>
<div class="aberration" style="top: 55%; left: 55%;"></div>
<div class="plate__tag">SLOT · PROD-002</div>
<div class="plate__brief">
Vertical hero of the Mace Windu SE hilt, single warm gold key-light from camera-left illuminating chromed emitter shroud. Warm ambient fill on shadow-side, crimson bounce off the deep-matte backdrop. Crimson-red blade retracted into the neck.
</div>
</div>
<div class="dossier__meta">
<span class="dossier__code">Dossier / 002</span>
<span class="dossier__code dossier__code--warm">In reel</span>
</div>
</div>
<div class="dossier__body">
<span class="dossier__specimen">Specimen / Character replica</span>
<h3 class="dossier__name">Mace Windu SE</h3>
<div class="dossier__specs">
<div class="dossier__spec"><span class="dossier__spec-k">Core</span><span class="dossier__spec-v">Xenopixel V3</span></div>
<div class="dossier__spec"><span class="dossier__spec-k">Grade</span><span class="dossier__spec-v">Heavy duelling</span></div>
<div class="dossier__spec"><span class="dossier__spec-k">Blade</span><span class="dossier__spec-v">Neopixel · Crimson holocron preset</span></div>
<div class="dossier__spec"><span class="dossier__spec-k">Comms</span><span class="dossier__spec-v">Bluetooth · XenoConfigurator</span></div>
</div>
<div class="dossier__foot">
<div>
<div class="dossier__price">$489</div>
<div class="dossier__price-sub">USD · 7–10 days</div>
</div>
<a href="#" class="dossier__acquire">Acquire</a>
</div>
</div>
</article>
<!-- Dossier 3: Carbon Strike -->
<article class="dossier">
<div class="dossier__plate">
<div class="plate plate--rim-right" style="position:absolute; inset:0;" role="img" aria-label="Carbon Strike product plate">
<div class="plate__brackets"></div>
<div class="plate__bloom" style="background: radial-gradient(ellipse 60% 50% at 50% 55%, rgba(229,166,75,0.22) 0%, rgba(217,62,26,0.34) 28%, rgba(90,26,10,0.22) 58%, transparent 80%);"></div>
<div class="aberration" style="top: 55%; left: 50%;"></div>
<div class="plate__tag">SLOT · PROD-003</div>
<div class="plate__brief">
Aerial dramatic-angle shot of the Carbon Strike hilt floating tilted 45°, back-lit by a strong crimson forge source. Chrome catching gold rim-light along the pommel and control cluster. Deep matte-black surround, warm crimson bounce filling the shadow-side. Crimson-red blade retracted.
</div>
</div>
<div class="dossier__meta">
<span class="dossier__code">Dossier / 003</span>
<span class="dossier__code dossier__code--warm">ARTSABERS Exclusive</span>
</div>
</div>
<div class="dossier__body">
<span class="dossier__specimen">Specimen / Original design</span>
<h3 class="dossier__name">Carbon Strike</h3>
<div class="dossier__specs">
<div class="dossier__spec"><span class="dossier__spec-k">Core</span><span class="dossier__spec-v">Xenopixel V3</span></div>
<div class="dossier__spec"><span class="dossier__spec-k">Grade</span><span class="dossier__spec-v">Heavy duelling</span></div>
<div class="dossier__spec"><span class="dossier__spec-k">Blade</span><span class="dossier__spec-v">Neopixel · Infinite colour</span></div>
<div class="dossier__spec"><span class="dossier__spec-k">Sound fonts</span><span class="dossier__spec-v">40 pre-loaded</span></div>
</div>
<div class="dossier__foot">
<div>
<div class="dossier__price">$549</div>
<div class="dossier__price-sub">USD · 7–10 days</div>
</div>
<a href="#" class="dossier__acquire">Acquire</a>
</div>
</div>
</article>
</div>
</div>
<svg class="section__grain" viewBox="0 0 400 400" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
<rect width="400" height="400" filter="url(#grain-warm)"/>
</svg>
</section>
<!-- ============================================================
FORGE — full-bleed editorial. Factory-direct promise.
============================================================ -->
<section class="section forge" id="forge" aria-label="Chapter 03: The Forge">
<div class="section__hud-tl">
<span class="hud"><span class="hud__pip"></span>Chapter 03 · The Forge</span>
</div>
<div class="section__hud-tr">
<span class="hud">Ambient 38°C / Live</span>
</div>
<div class="forge__inner">
<!-- Visual side -->
<div class="forge__visual">
<figure class="plate plate--rim-right" role="img" aria-label="Workshop editorial plate">
<div class="plate__brackets"></div>
<div class="plate__bloom" style="background: radial-gradient(ellipse 70% 40% at 50% 90%, rgba(229,166,75,0.20) 0%, rgba(217,62,26,0.35) 25%, rgba(90,26,10,0.25) 55%, transparent 80%), radial-gradient(ellipse 100% 40% at 50% 85%, rgba(229,166,75,0.10), transparent 60%);"></div>
<div class="aberration" style="bottom: 12%; left: 50%; width: 12px; height: 12px;"></div>
<!-- Practical-effects spark field — subtle drifting forge sparks -->
<svg class="sparks" viewBox="0 0 800 1000" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
<g fill="#E5A64B">
<circle cx="120" cy="820" r="1.1" opacity="0.9"/>
<circle cx="220" cy="760" r="0.7" opacity="0.7"/>
<circle cx="340" cy="880" r="1.3" opacity="0.85"/>
<circle cx="440" cy="720" r="0.6" opacity="0.6"/>
<circle cx="540" cy="820" r="0.9" opacity="0.75"/>
<circle cx="640" cy="660" r="0.7" opacity="0.6"/>
<circle cx="720" cy="780" r="1.0" opacity="0.85"/>
<circle cx="180" cy="620" r="0.5" opacity="0.5"/>
<circle cx="380" cy="540" r="0.6" opacity="0.55"/>
<circle cx="580" cy="500" r="0.5" opacity="0.5"/>
<circle cx="260" cy="480" r="0.4" opacity="0.4"/>
<circle cx="480" cy="440" r="0.4" opacity="0.4"/>
</g>
</svg>
<div class="plate__tag">IMG · FORGE-004</div>
<figcaption class="plate__brief">
Wide interior of a saber assembly bench. A row of hilts standing on a low rack in soft silhouette against a deep-anchor wall, crimson spilling from an off-frame forge floor to underlight them. A single craftsman silhouette at frame-left, hands lit by the crimson source. Airborne dust and drifting gold sparks catching the warm light. Deep matte black above the rack line. Documentary framing, not staged product photography.
</figcaption>
</figure>
</div>
<!-- Copy side -->
<div class="forge__copy">
<div class="forge__chapter">
<span class="hud"><span class="hud__pip"></span>Factory-direct / No middleman</span>
</div>
<h2 class="forge__title">
Seven to ten days.<br>
<strong>Straight from the <em>forge floor.</em></strong>
</h2>
<div class="forge__body">
<p>
We don't hold stock in a warehouse. Every hilt is assembled to order and shipped direct from the factory. That's honest 7–10 day global delivery — not a same-day promise we can't keep.
</p>
<p>
What you get in exchange is a broader catalogue than any domestic retailer, tighter cost control, and a build that hasn't been sitting in a distribution centre for six months.
</p>
</div>
<div class="forge__evidencing">
<div>
<div class="forge__ev-label">Assembled</div>
<div class="forge__ev-value">To order</div>
</div>
<div>
<div class="forge__ev-label">In transit</div>
<div class="forge__ev-value">7—10 days</div>
</div>
</div>
</div>
</div>
<svg class="section__grain" viewBox="0 0 400 400" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
<rect width="400" height="400" filter="url(#grain-forge)"/>
</svg>
</section>
<!-- ============================================================
ANATOMY — hero-scale dossier close-up on Starkiller SE.
============================================================ -->
<section class="section anatomy" id="anatomy" aria-label="Chapter 04: The Anatomy">
<div class="anatomy__haze"></div>
<div class="section__hud-tl">
<span class="hud"><span class="hud__pip"></span>Chapter 04 · The Anatomy</span>
</div>
<div class="section__hud-tr">
<span class="hud">Dossier / 001</span>
</div>
<div class="content">
<header class="anatomy__header">
<h2 class="anatomy__title">Every seam,<br><strong>documented.</strong></h2>
<p class="anatomy__lede">
The Starkiller SE laid flat under HUD annotation. Emitter through pommel — a specimen sheet for the operator who wants to know what they're holding.
</p>
</header>
<div class="anatomy__stage">
<figure class="plate plate--rim-top" style="position:absolute; inset:0;" role="img" aria-label="Starkiller SE anatomy plate">
<div class="plate__brackets"></div>
<div class="plate__bloom" style="background: radial-gradient(ellipse 65% 40% at 22% 55%, rgba(229,166,75,0.24) 0%, rgba(217,62,26,0.34) 25%, rgba(90,26,10,0.22) 55%, transparent 80%);"></div>
<div class="aberration" style="top: 50%; left: 12%; width: 14px; height: 14px;"></div>
<div class="plate__tag" style="top: 24px; left: 44px;">IMG · ANATOMY-005</div>
<figcaption class="plate__brief" style="max-width: 540px;">
Macro shot of the Starkiller SE hilt laid horizontally across the frame, emitter at frame-left, pommel at frame-right. Single warm gold key-light hitting the emitter aperture (hottest point in the composition), crimson ambient bounce from screen-right. Fine airborne dust motes and drifting forge sparks catching the warm light. Shot at low angle for slight foreshortening. Deep-anchor backdrop with receding warm haze. No blade — the emitter reads as a Sith-holocron core burning at the frame edge.
</figcaption>
</figure>
<!-- HUD anatomy annotations — muted rose tick marks + labels -->
<div class="anatomy__annotations">
<span class="anno anno-1">Emitter</span>
<span class="anno anno-2">Neck</span>
<span class="anno anno-3">Body</span>
<span class="anno anno-4">Grip</span>
<span class="anno anno-5">Pommel</span>
</div>
<div class="anatomy__dossier">
<span class="anatomy__dossier-label">Specimen</span>
<span class="anatomy__dossier-name">Starkiller SE</span>
<span class="anatomy__dossier-label" style="margin-top:10px;">Core / Proffie 2.2</span>
<span class="anatomy__dossier-label">Grade / Heavy</span>
</div>
<div class="anatomy__spec">
<span class="anatomy__spec-line">Emitter · Neck · Body</span>
<span class="anatomy__spec-line">Grip · Pommel</span>
<span class="anatomy__spec-line" style="color: var(--outline); margin-top: 8px;">Laid horizontal for the dossier</span>
</div>
</div>
<div class="anatomy__foot">
<div class="anatomy__foot-item">
<span class="anatomy__foot-label">Sound fonts</span>
<span class="anatomy__foot-value">34</span>
</div>
<div class="anatomy__foot-item">
<span class="anatomy__foot-label">Blade colours</span>
<span class="anatomy__foot-value">Infinite</span>
</div>
<div class="anatomy__foot-item">
<span class="anatomy__foot-label">Comms</span>
<span class="anatomy__foot-value">Bluetooth</span>
</div>
<div class="anatomy__foot-item">
<span class="anatomy__foot-label">Retail</span>
<span class="anatomy__foot-value anatomy__foot-value--ember">$629</span>
</div>
<a href="#" class="btn btn--primary">Acquire specimen</a>
</div>
</div>
<svg class="section__grain" viewBox="0 0 400 400" preserveAspectRatio="xMidYMid slice" aria-hidden="true" style="opacity:0.16;">
<rect width="400" height="400" filter="url(#grain-warm)"/>
</svg>
</section>
<!-- ============================================================
DRAMATIS PERSONAE — 3-across character grid, movie-poster scale
============================================================ -->
<section class="section personae" id="personae" aria-label="Chapter 05: Dramatis Personae">
<div class="section__frame"></div>
<div class="section__haze"></div>
<div class="section__hud-tl">
<span class="hud"><span class="hud__pip"></span>Chapter 05 · Dramatis Personae</span>
</div>
<div class="section__hud-tr">
<span class="hud">Roster / 40 named</span>
</div>
<div class="content">
<header class="personae__header">
<h2 class="personae__title">Shop the roster<br><strong>by character.</strong></h2>
<div class="personae__view-all">
<span class="hud">All 40 named specimens →</span>
<span class="hud hud--outline">Light · Dark · Grey</span>
</div>
</header>
<div class="personae__grid">
<!-- Persona 1 -->
<a href="#" class="persona">
<figure class="plate persona__plate plate--rim-right" role="img" aria-label="Skywalker character tile">
<div class="plate__brackets"></div>
<div class="plate__bloom" style="background: radial-gradient(ellipse 60% 60% at 50% 40%, rgba(229,166,75,0.14) 0%, rgba(217,62,26,0.28) 30%, rgba(90,26,10,0.20) 60%, transparent 80%), radial-gradient(ellipse 100% 30% at 50% 85%, rgba(90,26,10,0.15), transparent 70%);"></div>
<div class="aberration" style="top: 40%; left: 50%;"></div>
<div class="plate__tag">SLOT · CHR-001</div>
<figcaption class="plate__brief">
Full-length cosplayer in dynamic bladed pose, deep matte-black backdrop, warm gold forge rim-light from camera-right, crimson ambient fill. Movie-poster composition — low camera, dramatic silhouette. Crimson-red blade visible but soft-focus.
</figcaption>
</figure>
<div class="persona__overlay"></div>
<div class="persona__meta-tr">Cores / 04</div>
<div class="persona__label">
<span class="persona__faction">Light side / Jedi Order</span>
<h3 class="persona__name">Skywalker</h3>
<div class="persona__count">
<span>7 hilts</span>
<span>From $189</span>
</div>
</div>
</a>
<!-- Persona 2 -->
<a href="#" class="persona">
<figure class="plate persona__plate plate--rim-left" role="img" aria-label="Vader character tile">
<div class="plate__brackets"></div>
<div class="plate__bloom" style="background: radial-gradient(ellipse 60% 60% at 50% 40%, rgba(229,166,75,0.18) 0%, rgba(217,62,26,0.40) 25%, rgba(90,26,10,0.28) 55%, transparent 80%), radial-gradient(ellipse 100% 40% at 50% 90%, rgba(217,62,26,0.20), transparent 70%);"></div>
<div class="aberration" style="top: 38%; left: 50%; width: 12px; height: 12px;"></div>
<div class="plate__tag">SLOT · CHR-002</div>
<figcaption class="plate__brief">
Silhouette of a Vader-styled figure against a crimson-tinged void, crimson-red blade held vertical, hot gold forge source behind. Shot from below for dramatic scale. Chrome catching the gold along the mask edge. Movie key-art framing.
</figcaption>
</figure>
<div class="persona__overlay"></div>
<div class="persona__meta-tr">Cores / 05</div>
<div class="persona__label">
<span class="persona__faction">Dark side / Sith Order</span>
<h3 class="persona__name">Vader</h3>
<div class="persona__count">
<span>9 hilts</span>
<span>From $249</span>
</div>
</div>
</a>
<!-- Persona 3 -->
<a href="#" class="persona">
<figure class="plate persona__plate plate--rim-right" role="img" aria-label="Ahsoka character tile">
<div class="plate__brackets"></div>
<div class="plate__bloom" style="background: radial-gradient(ellipse 55% 55% at 55% 40%, rgba(229,166,75,0.16) 0%, rgba(217,62,26,0.28) 30%, rgba(90,26,10,0.20) 60%, transparent 80%), radial-gradient(ellipse 100% 35% at 50% 90%, rgba(90,26,10,0.14), transparent 70%);"></div>
<div class="aberration" style="top: 40%; left: 55%;"></div>
<div class="plate__tag">SLOT · CHR-003</div>
<figcaption class="plate__brief">
Dual-wielding cosplayer mid-motion, curved-hilt sabers ignited to crimson-red, warm crimson ambient fill from a deep matte-black void. Gold forge rim-light from screen-right along the pauldron and forearms. Cinematic panning framing — movement implied.
</figcaption>
</figure>
<div class="persona__overlay"></div>
<div class="persona__meta-tr">Cores / 03</div>
<div class="persona__label">
<span class="persona__faction">Grey / Clone Wars era</span>
<h3 class="persona__name">Ahsoka</h3>
<div class="persona__count">
<span>6 hilts</span>
<span>From $215</span>
</div>
</div>
</a>
<!-- Persona 4 -->
<a href="#" class="persona">
<figure class="plate persona__plate plate--rim-left" role="img" aria-label="Kenobi character tile">
<div class="plate__brackets"></div>
<div class="plate__bloom" style="background: radial-gradient(ellipse 55% 55% at 45% 45%, rgba(229,166,75,0.14) 0%, rgba(217,62,26,0.26) 30%, rgba(90,26,10,0.20) 60%, transparent 80%), radial-gradient(ellipse 100% 30% at 50% 85%, rgba(229,166,75,0.10), transparent 70%);"></div>
<div class="aberration" style="top: 42%; left: 45%;"></div>
<div class="plate__tag">SLOT · CHR-004</div>
<figcaption class="plate__brief">
Half-length portrait of a Kenobi-styled cosplayer, crimson-red blade held two-handed en garde. Warm gold ambient fill dominant, crimson forge rim from behind the figure suggesting an off-frame duel light source. Ember-blown atmospheric haze in mid-ground.
</figcaption>
</figure>
<div class="persona__overlay"></div>
<div class="persona__meta-tr">Cores / 04</div>
<div class="persona__label">
<span class="persona__faction">Light side / Jedi Master</span>
<h3 class="persona__name">Kenobi</h3>
<div class="persona__count">
<span>5 hilts</span>
<span>From $205</span>
</div>
</div>
</a>
<!-- Persona 5 -->
<a href="#" class="persona">
<figure class="plate persona__plate plate--rim-right" role="img" aria-label="Maul character tile">
<div class="plate__brackets"></div>
<div class="plate__bloom" style="background: radial-gradient(ellipse 55% 55% at 50% 40%, rgba(229,166,75,0.18) 0%, rgba(217,62,26,0.38) 25%, rgba(90,26,10,0.28) 55%, transparent 80%), radial-gradient(ellipse 100% 35% at 50% 90%, rgba(217,62,26,0.16), transparent 70%);"></div>
<div class="aberration" style="top: 30%; left: 30%; width: 10px; height: 10px;"></div>
<div class="aberration" style="top: 55%; left: 70%; width: 10px; height: 10px;"></div>
<div class="plate__tag">SLOT · CHR-005</div>
<figcaption class="plate__brief">
Double-bladed staff extended horizontal, cosplayer in low-crouched combat stance, deep matte void with heavy shadow occlusion. Two hot gold-cored forge sources at either crimson-red blade end. Movie key-art framing, low camera, drama on the diagonal.
</figcaption>
</figure>
<div class="persona__overlay"></div>
<div class="persona__meta-tr">Cores / 03</div>
<div class="persona__label">
<span class="persona__faction">Dark side / Sith apprentice</span>
<h3 class="persona__name">Maul</h3>
<div class="persona__count">
<span>4 hilts</span>
<span>From $285</span>
</div>
</div>
</a>
<!-- Persona 6 -->
<a href="#" class="persona">
<figure class="plate persona__plate plate--rim-left" role="img" aria-label="Rey character tile">
<div class="plate__brackets"></div>
<div class="plate__bloom" style="background: radial-gradient(ellipse 55% 55% at 55% 45%, rgba(229,166,75,0.14) 0%, rgba(217,62,26,0.26) 30%, rgba(90,26,10,0.20) 60%, transparent 80%), radial-gradient(ellipse 100% 30% at 50% 85%, rgba(229,166,75,0.10), transparent 70%);"></div>
<div class="aberration" style="top: 45%; left: 55%;"></div>
<div class="plate__tag">SLOT · CHR-006</div>
<figcaption class="plate__brief">
Cosplayer in staff-fighter stance, single crimson-red blade angled across the body. Warm overhead fill, gold forge rim from screen-left. Deep matte-void backdrop suggested by drifting warm particulate. Composition emphasises movement about to break.
</figcaption>
</figure>
<div class="persona__overlay"></div>
<div class="persona__meta-tr">Cores / 03</div>
<div class="persona__label">
<span class="persona__faction">Light side / Sequel trilogy</span>
<h3 class="persona__name">Rey</h3>
<div class="persona__count">
<span>4 hilts</span>
<span>From $195</span>
</div>
</div>
</a>
</div>
</div>
<svg class="section__grain" viewBox="0 0 400 400" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
<rect width="400" height="400" filter="url(#grain-warm)"/>
</svg>
</section>
<!-- ============================================================
SIGNAL ORIGIN — founder / brand narrative
============================================================ -->
<section class="section origin" id="origin" aria-label="Chapter 06: Signal Origin">
<div class="section__hud-tl">
<span class="hud"><span class="hud__pip"></span>Chapter 06 · Signal origin</span>
</div>
<div class="section__hud-tr">
<span class="hud">Founding transmission / 2020</span>
</div>
<div class="content">
<div class="origin__inner">
<div class="origin__plate-wrap">
<figure class="plate plate--rim-right origin__plate" role="img" aria-label="Founder portrait plate">
<div class="plate__brackets"></div>
<div class="plate__bloom" style="background: radial-gradient(ellipse 60% 60% at 40% 45%, rgba(229,166,75,0.16) 0%, rgba(217,62,26,0.30) 28%, rgba(90,26,10,0.22) 58%, transparent 80%), radial-gradient(ellipse 100% 40% at 50% 85%, rgba(229,166,75,0.10), transparent 70%);"></div>
<div class="aberration" style="top: 45%; left: 40%;"></div>
<div class="plate__tag">IMG · FOUNDER-007</div>
<figcaption class="plate__brief">
Half-length documentary portrait of the founder at the assembly bench, hilt-in-progress in hands. Warm gold key-light spilling from off-frame right (the workshop forge fire), crimson ambient bounce from a high window. Direct eye contact with camera. Deep matte-black surroundings. Reportage feel, not editorial polish — hands lit, face half in shadow, forge sparks drifting.
</figcaption>
</figure>
</div>
<div class="origin__copy">
<div class="hero__chapter">
<span class="hud"><span class="hud__pip"></span>Latvia · 2020 → Nerdworks · 2024</span>
</div>
<h2 class="origin__title">Started by a fan.<br><strong>Kept by fans.</strong></h2>
<div class="origin__body">
<p>
ARTSABERS was founded in Latvia in 2020 by a Star Wars fan who couldn't find the catalogue he wanted at prices he could stand. Not a marketing brand. Not a private-label reskin. A fan who lived the fantasy and built the shop he'd have wanted as a customer.
</p>
<p>
Acquired by Nerdworks in 2024. Same founding principle: fan-to-fan, honest about timing, present after the order ships. If something goes wrong we're the ones you'll hear from — not a ticketing wall.
</p>
</div>
<div class="origin__sig">
<span class="origin__sig-name">The ARTSABERS operator</span>
<span class="origin__sig-role">Signal · 24-hour response · Named point of contact</span>
</div>
</div>
</div>
</div>
<svg class="section__grain" viewBox="0 0 400 400" preserveAspectRatio="xMidYMid slice" aria-hidden="true" style="opacity:0.18;">
<rect width="400" height="400" filter="url(#grain-warm)"/>
</svg>
</section>
<!-- ============================================================
TRANSMISSION — comms terminal / newsletter capture
============================================================ -->
<section class="section transmission" id="transmission" aria-label="Chapter 07: Open transmission">
<!-- Star / spark field — gold points suggesting drifting forge sparks -->
<svg class="transmission__stars" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
<g fill="#E5A64B">
<circle cx="80" cy="100" r="0.6" opacity="0.5"/>
<circle cx="220" cy="80" r="0.8" opacity="0.7"/>
<circle cx="360" cy="140" r="0.5" opacity="0.4"/>
<circle cx="500" cy="60" r="0.9" opacity="0.8"/>
<circle cx="640" cy="120" r="0.6" opacity="0.55"/>
<circle cx="780" cy="80" r="0.7" opacity="0.65"/>
<circle cx="920" cy="160" r="0.5" opacity="0.4"/>
<circle cx="1060" cy="70" r="0.8" opacity="0.75"/>
<circle cx="1200" cy="130" r="0.6" opacity="0.5"/>
<circle cx="1340" cy="90" r="0.5" opacity="0.4"/>
<circle cx="1480" cy="150" r="0.7" opacity="0.6"/>
<circle cx="140" cy="220" r="0.5" opacity="0.4"/>
<circle cx="280" cy="180" r="0.6" opacity="0.5"/>
<circle cx="420" cy="240" r="0.5" opacity="0.4"/>
<circle cx="560" cy="200" r="0.7" opacity="0.6"/>
<circle cx="700" cy="260" r="0.5" opacity="0.4"/>
<circle cx="840" cy="220" r="0.6" opacity="0.5"/>
<circle cx="980" cy="180" r="0.5" opacity="0.4"/>
<circle cx="1120" cy="240" r="0.7" opacity="0.6"/>
<circle cx="1260" cy="200" r="0.5" opacity="0.4"/>
<circle cx="1400" cy="260" r="0.6" opacity="0.5"/>
<circle cx="1540" cy="220" r="0.5" opacity="0.4"/>
<circle cx="180" cy="780" r="0.4" opacity="0.3"/>
<circle cx="420" cy="820" r="0.5" opacity="0.35"/>
<circle cx="720" cy="800" r="0.4" opacity="0.3"/>
<circle cx="980" cy="840" r="0.5" opacity="0.35"/>
<circle cx="1260" cy="800" r="0.4" opacity="0.3"/>
<circle cx="1480" cy="820" r="0.5" opacity="0.35"/>
</g>
<rect width="1600" height="900" filter="url(#grain-forge)" opacity="0.12"/>
</svg>
<div class="transmission__horizon"></div>
<div class="section__hud-tl">
<span class="hud"><span class="hud__pip"></span>Chapter 07 · Open transmission</span>
</div>
<div class="section__hud-tr">
<span class="hud">Comms / Awaiting handshake</span>
</div>
<div class="content">
<div class="transmission__panel">
<div class="transmission__chapter">
<span class="hud"><span class="hud__pip"></span>T + 00:00:04 · Signal open</span>
</div>
<h2 class="transmission__title">
Tune in for new specimens,<br>
<strong>direct from the forge.</strong>
</h2>
<p class="transmission__lede">
Occasional broadcasts on new arrivals, ARTSABERS Exclusive drops, and Saber Core spec changes. No manufactured urgency. No begging. Ignore-able signal.
</p>
<form class="transmission__form" onsubmit="event.preventDefault();">
<input type="email" class="transmission__input" placeholder="Your callsign · email address" aria-label="Email address">
<button type="submit" class="transmission__submit">Open channel</button>
</form>
<div class="transmission__coda">A signal, from the galaxy</div>
</div>
</div>
</section>
</main>
<!-- ============================================================
FOOTER — quiet HUD-shaped, sparse
============================================================ -->
<footer class="footer" role="contentinfo">
<div class="content">
<div class="footer__grid">
<div class="footer__brand">
<span class="footer__brand-mark">
<span class="nav__brand-mark"></span>
ARTSABERS
</span>
<p class="footer__tagline">
From factory floor <strong>to your door.</strong> Every character, every Saber Core, every duelling grade. Backed by real customer service.
</p>
<div class="footer__coord">
<span class="hud hud--outline">Coord / The Galaxy</span>
<span class="hud hud--outline">Registered / Nerdworks 2024</span>
</div>
</div>
<div>
<h4 class="footer__col-title">Catalogue</h4>
<ul class="footer__list">
<li><a href="#" class="footer__link">By Saber Core</a></li>
<li><a href="#" class="footer__link">By character</a></li>
<li><a href="#" class="footer__link">ARTSABERS Exclusive</a></li>
<li><a href="#" class="footer__link">Helmets & bundles</a></li>
<li><a href="#" class="footer__link">Parts & accessories</a></li>
</ul>
</div>
<div>
<h4 class="footer__col-title">Signal</h4>
<ul class="footer__list">
<li><a href="#" class="footer__link">Contact operator</a></li>
<li><a href="#" class="footer__link">Shipping & timing</a></li>
<li><a href="#" class="footer__link">30-day guarantee</a></li>
<li><a href="#" class="footer__link">Saber Core guide</a></li>
<li><a href="#" class="footer__link">Bluetooth setup</a></li>
</ul>
</div>
<div>
<h4 class="footer__col-title">Registry</h4>
<ul class="footer__list">
<li><a href="#" class="footer__link">The signal origin</a></li>
<li><a href="#" class="footer__link">Sister brand / Saber 66</a></li>
<li><a href="#" class="footer__link">Privacy transmission</a></li>
<li><a href="#" class="footer__link">Terms of engagement</a></li>
</ul>
</div>
</div>
<div class="footer__bar">
<div class="footer__meta">
ARTSABERS © 2026 · A Nerdworks brand
</div>
<div class="footer__signal">
<span class="hud"><span class="hud__pip"></span>Signal · Open</span>
<span class="hud hud--outline">End reel · V</span>
</div>
</div>
</div>
</footer>
</body>
</html>