<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ARTSABERS — From factory floor to your door</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
/* Chromatic identifiers */
--primary: #5A78D9; /* STEEL-BLUE now primary — HUD readout blue */
--secondary: #F5A458; /* peach-amber secondary — warm accent */
--tertiary: #F26B36; /* ember becomes tertiary, used SCARCELY as a rare warm hot-spot */
/* Surface semantics — COOL vacuum ramp */
--anchor: #08080C; /* deep cool vacuum — near black with blue bias */
--container: #0F0F14;
--container-low: #0B0B10;
--container-high: #181820;
--container-highest: #22222A;
--bright: #181820;
/* Text roles — cooler off-white */
--text: #E2E4E8;
--neutral: #B6BEC9;
--outline: #7A8391;
--outline-variant: #363B47;
/* Functional */
--success: #7FC97F;
--error: #BA1A1A;
/* Typography */
--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;
}
* { 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;
}
/* Global film-grain overlay — fixed, always present */
body::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 999;
opacity: 0.06;
mix-blend-mode: overlay;
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='1.4' numOctaves='2' seed='9' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.78 0 0 0 0 0.82 0 0 0 0 0.92 0 0 0 0.65 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
}
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
Semantics inverted for the cool variant: default = steel-blue.
============================================================ */
.hud {
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--primary);
}
.hud--warm { color: var(--tertiary); }
.hud--outline { color: var(--outline); }
.hud--neutral { color: var(--neutral); }
.hud__pip {
display: inline-block;
width: 6px;
height: 6px;
background: var(--primary);
border-radius: 50%;
margin-right: 10px;
vertical-align: middle;
box-shadow:
0 0 3px rgba(221,228,245,0.9),
0 0 8px rgba(90,120,217,0.9),
0 0 18px rgba(42,53,96,0.5);
animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% {
opacity: 1;
box-shadow:
0 0 3px rgba(221,228,245,0.95),
0 0 8px rgba(90,120,217,0.9),
0 0 18px rgba(42,53,96,0.5);
}
50% {
opacity: 0.35;
box-shadow:
0 0 2px rgba(221,228,245,0.5),
0 0 3px rgba(90,120,217,0.4);
}
}
/* ============================================================
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.20;
mix-blend-mode: overlay;
z-index: 3;
}
.section__haze {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 2;
background:
radial-gradient(ellipse 100% 60% at 50% 50%, rgba(90,120,217,0.05), transparent 70%),
radial-gradient(ellipse 80% 50% at 20% 20%, rgba(42,53,96,0.10), transparent 70%);
}
.section__vignette {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 5;
background:
radial-gradient(ellipse 130% 90% at 50% 50%, transparent 55%, rgba(5,5,12,0.65) 100%);
}
.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: 6;
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;
}
/* Steel-blue rim-lights — "lit from off-frame by a cool source" */
.plate--rim-left {
box-shadow:
inset 3px 0 0 rgba(90,120,217,0.55),
inset 6px 0 60px -20px rgba(90,120,217,0.35),
inset 12px 0 40px rgba(42,53,96,0.22);
}
.plate--rim-right {
box-shadow:
inset -3px 0 0 rgba(90,120,217,0.55),
inset -6px 0 60px -20px rgba(90,120,217,0.35),
inset -12px 0 40px rgba(42,53,96,0.22);
}
.plate--rim-top {
box-shadow:
inset 0 3px 0 rgba(90,120,217,0.4),
inset 0 6px 60px -20px rgba(90,120,217,0.28),
inset 0 12px 40px rgba(42,53,96,0.18);
}
/* 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(--primary);
}
.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 cool bloom on plate */
.plate__bloom {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
}
/* ============================================================
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(--primary);
border-radius: 50%;
box-shadow:
0 0 3px rgba(221,228,245,0.9),
0 0 8px rgba(90,120,217,0.9),
0 0 18px rgba(42,53,96,0.5);
}
.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(--primary);
display: flex;
align-items: center;
}
/* ============================================================
HERO — 100vh opening tableau
============================================================ */
.hero {
position: relative;
height: 100vh;
min-height: 720px;
background:
radial-gradient(ellipse 45% 35% at 70% 55%, rgba(90,120,217,0.32), transparent 55%),
radial-gradient(ellipse 30% 22% at 70% 55%, rgba(221,228,245,0.10), transparent 60%),
radial-gradient(ellipse 80% 55% at 25% 30%, rgba(42,53,96,0.22), transparent 70%),
radial-gradient(ellipse 120% 80% at 50% 50%, var(--anchor), #050510 90%);
display: flex;
align-items: center;
overflow: hidden;
}
/* Cinematic vignette on the hero */
.hero::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 5;
background:
radial-gradient(ellipse 130% 90% at 50% 50%, transparent 45%, rgba(3,3,10,0.7) 100%);
}
.hero__starfield {
position: absolute;
inset: 0;
z-index: 1;
}
/* Steel-blue hot-source with cool chromatic aberration ring */
.hero__ember {
position: absolute;
top: 55%;
left: 70%;
width: 3px;
height: 3px;
background: #DDE4F5;
border-radius: 50%;
z-index: 2;
box-shadow:
/* Chromatic aberration: cool-white → steel-blue → deep-blue */
0 0 2px 1px rgba(221,228,245,0.95),
0 0 6px 2px rgba(90,120,217,0.9),
0 0 14px 5px rgba(42,53,96,0.8),
/* Cool bloom falloff */
0 0 32px 10px rgba(90,120,217,0.35),
0 0 90px 28px rgba(42,53,96,0.20);
}
.hero__letterbox-top,
.hero__letterbox-bot {
position: absolute;
left: 0;
right: 0;
height: 52px;
background: #030309;
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);
}
/* Retinted to steel-blue with soft steel halation */
.hero__title-line--ember {
color: var(--primary);
text-shadow:
0 0 12px rgba(221,228,245,0.35),
0 0 32px rgba(90,120,217,0.42),
0 0 68px rgba(42,53,96,0.35);
}
.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;
}
/* Steel-blue primary — cool CTA with cool chromatic aberration ring */
.btn--primary {
background: var(--primary);
color: #050510;
box-shadow:
0 0 0 1px rgba(221,228,245,0.35),
0 0 24px rgba(90,120,217,0.35),
0 0 60px rgba(42,53,96,0.25);
}
.btn--primary:hover {
background: #7A94DE;
box-shadow:
0 0 0 1px rgba(221,228,245,0.55),
0 0 32px rgba(90,120,217,0.55),
0 0 90px rgba(42,53,96,0.35);
}
/* Warm variant of primary — RARE, used on one CTA */
.btn--ember {
background: var(--tertiary);
color: #1A0F08;
box-shadow:
0 0 0 1px rgba(255,181,155,0.35),
0 0 24px rgba(242,107,54,0.45),
0 0 80px rgba(242,107,54,0.25);
}
.btn--ember:hover {
background: var(--secondary);
box-shadow:
0 0 0 1px rgba(255,181,155,0.55),
0 0 32px rgba(242,107,54,0.65),
0 0 100px rgba(242,107,54,0.35);
}
.btn--ghost {
background: transparent;
color: var(--primary);
border: 1px solid var(--primary);
}
.btn--ghost:hover {
background: rgba(90,120,217,0.08);
box-shadow: 0 0 24px rgba(90,120,217,0.25);
}
.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(--primary);
}
.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(90,120,217,0.10), transparent 60%),
radial-gradient(ellipse 50% 40% at 90% 80%, rgba(42,53,96,0.14), transparent 60%),
radial-gradient(ellipse 20% 15% at 15% 30%, rgba(221,228,245,0.04), transparent 65%);
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 {
color: var(--primary);
font-weight: 700;
text-shadow:
0 0 12px rgba(221,228,245,0.28),
0 0 32px rgba(90,120,217,0.32),
0 0 60px rgba(42,53,96,0.30);
}
.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 60px -20px rgba(90,120,217,0.4);
}
.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(--primary);
}
/* Rare warm chip — kept warm on select dossiers as a hot-spot */
.dossier__code--warm { color: var(--tertiary); }
.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(--primary);
}
.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;
}
.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;
}
/* Cool multi-stop falloff on the workshop bloom */
.forge__visual .plate {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 40% at 50% 90%, rgba(221,228,245,0.10), transparent 55%),
radial-gradient(ellipse 70% 45% at 50% 90%, rgba(90,120,217,0.30), transparent 65%),
radial-gradient(ellipse 90% 55% at 50% 85%, rgba(42,53,96,0.22), transparent 70%),
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(90,120,217,0.04) 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 {
color: var(--primary);
font-style: normal;
font-weight: 700;
text-shadow:
0 0 14px rgba(221,228,245,0.28),
0 0 36px rgba(90,120,217,0.35),
0 0 60px rgba(42,53,96,0.30);
}
.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(--primary);
}
.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(90,120,217,0.14), transparent 70%),
radial-gradient(ellipse 20% 15% at 50% 55%, rgba(221,228,245,0.04), transparent 60%),
var(--anchor);
}
.anatomy__haze {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 100% 50% at 50% 90%, rgba(90,120,217,0.10), transparent 60%),
radial-gradient(ellipse 20% 80% at 12% 50%, rgba(42,53,96,0.14), transparent 60%),
radial-gradient(ellipse 20% 80% at 88% 50%, rgba(42,53,96,0.14), transparent 60%),
radial-gradient(ellipse 80% 30% at 50% 20%, rgba(221,228,245,0.03), transparent 70%);
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 {
color: var(--primary);
font-weight: 700;
text-shadow:
0 0 12px rgba(221,228,245,0.28),
0 0 32px rgba(90,120,217,0.35),
0 0 60px rgba(42,53,96,0.32);
}
.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 20% 22% at 50% 55%, rgba(221,228,245,0.10), transparent 55%),
radial-gradient(ellipse 60% 55% at 50% 55%, rgba(90,120,217,0.20), transparent 65%),
radial-gradient(ellipse 90% 65% at 50% 55%, rgba(42,53,96,0.22), transparent 70%),
radial-gradient(ellipse 100% 60% at 50% 50%, var(--container-low), var(--anchor) 92%);
}
/* HUD anatomy annotations — steel-blue tick marks + labels */
.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(--primary);
display: flex;
flex-direction: column;
gap: 4px;
align-items: center;
}
.anno::before {
content: "";
display: block;
width: 1px;
height: 40px;
background: rgba(90,120,217,0.65);
box-shadow: 0 0 4px rgba(90,120,217,0.35);
}
.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(--primary);
}
.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(--primary);
}
.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(--primary);
}
.anatomy__foot-value {
font-family: var(--font-head);
font-weight: 700;
font-size: 22px;
color: var(--text);
letter-spacing: 0.02em;
}
/* RARE warm hot-spot — retail price stays ember against cold surround */
.anatomy__foot-value--ember {
color: var(--tertiary);
text-shadow:
0 0 14px rgba(242,107,54,0.5),
0 0 32px rgba(242,107,54,0.32);
}
/* ============================================================
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,120,217,0.10), transparent 60%),
radial-gradient(ellipse 40% 30% at 15% 80%, rgba(42,53,96,0.16), transparent 65%),
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 {
color: var(--primary);
font-weight: 700;
text-shadow:
0 0 12px rgba(221,228,245,0.28),
0 0 32px rgba(90,120,217,0.32),
0 0 60px rgba(42,53,96,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 60px -20px rgba(90,120,217,0.4);
}
.persona__plate {
position: absolute;
inset: 0;
}
.persona__overlay {
position: absolute;
inset: 0;
z-index: 5;
background: linear-gradient(180deg, transparent 40%, rgba(5,5,12,0.88) 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(--primary);
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;
}
/* Retinted cool — faction chips read as HUD, not warm labels */
.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;
background:
radial-gradient(ellipse 50% 40% at 20% 40%, rgba(42,53,96,0.14), transparent 65%),
var(--anchor);
}
.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 {
color: var(--primary);
font-weight: 700;
text-shadow:
0 0 12px rgba(221,228,245,0.24),
0 0 32px rgba(90,120,217,0.30),
0 0 60px rgba(42,53,96,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(--primary);
}
.origin__plate-wrap {
position: relative;
aspect-ratio: 4 / 5;
}
.origin__plate {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 20% 20% at 40% 50%, rgba(221,228,245,0.08), transparent 60%),
radial-gradient(ellipse 60% 60% at 40% 50%, rgba(90,120,217,0.22), transparent 65%),
radial-gradient(ellipse 100% 60% at 50% 50%, rgba(42,53,96,0.24), transparent 75%),
radial-gradient(ellipse 100% 60% at 50% 50%, var(--container-low), var(--anchor) 92%);
}
/* ============================================================
TRANSMISSION — comms terminal / newsletter
Closing beat — carries the rare warm wordmark bloom
============================================================ */
.transmission {
position: relative;
background:
radial-gradient(ellipse 60% 30% at 50% 68%, rgba(242,107,54,0.14), transparent 65%),
radial-gradient(ellipse 100% 55% at 50% 50%, rgba(90,120,217,0.10), transparent 70%),
linear-gradient(to bottom, #030309 0%, var(--anchor) 55%, #030309 100%);
padding: 140px 0 160px;
border-top: 1px solid var(--outline-variant);
border-bottom: 1px solid var(--outline-variant);
}
/* Cinematic vignette on the closing beat */
.transmission::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 3;
background:
radial-gradient(ellipse 130% 90% at 50% 50%, transparent 45%, rgba(3,3,10,0.65) 100%);
}
/* Horizon line — steel-blue with a single warm ember bloom at centre */
.transmission__horizon {
position: absolute;
top: 68%;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(to right,
transparent 0%,
rgba(90,120,217,0.35) 15%,
var(--primary) 35%,
rgba(242,107,54,0.85) 50%,
var(--primary) 65%,
rgba(90,120,217,0.35) 85%,
transparent 100%);
box-shadow:
0 0 8px rgba(90,120,217,0.55),
0 0 30px rgba(90,120,217,0.32),
0 0 80px rgba(42,53,96,0.35);
z-index: 2;
}
.transmission__stars {
position: absolute;
inset: 0;
z-index: 1;
opacity: 0.6;
}
.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);
}
/* RARE WARM HOT-SPOT — the closing wordmark bloom */
.transmission__title strong {
color: var(--tertiary);
font-weight: 700;
display: block;
text-shadow:
0 0 14px rgba(255,181,155,0.42),
0 0 40px rgba(242,107,54,0.55),
0 0 90px rgba(242,107,54,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;
}
.transmission__form:focus-within {
border-color: var(--primary);
box-shadow: 0 0 30px rgba(90,120,217,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: #050510;
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: #7A94DE; }
.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: #030309;
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(--primary);
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(--primary); }
/* ============================================================
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-h1: 44px;
--fs-h2: 34px;
}
.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 -->
<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.85 0 0 0 0 0.88 0 0 0 0 0.95 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.72 0 0 0 0 0.6 0 0 0 0.5 0"/>
</filter>
<filter id="grain-cool">
<feTurbulence type="fractalNoise" baseFrequency="1.1" numOctaves="2" seed="21" stitchTiles="stitch"/>
<feColorMatrix values="0 0 0 0 0.72 0 0 0 0 0.80 0 0 0 0 0.95 0 0 0 0.55 0"/>
</filter>
<filter id="haze-cool">
<feTurbulence type="fractalNoise" baseFrequency="0.12" numOctaves="3" seed="17" stitchTiles="stitch"/>
<feColorMatrix values="0 0 0 0 0.55 0 0 0 0 0.65 0 0 0 0 0.90 0 0 0 0.12 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
"From factory floor to your door", split with a hero image plate.
============================================================ -->
<section class="hero" aria-label="Hero: from factory floor to your door">
<!-- Volumetric cool haze layer -->
<svg class="hero__starfield" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice" aria-hidden="true" style="opacity:0.35; z-index:0;">
<rect width="1600" height="900" filter="url(#haze-cool)"/>
</svg>
<!-- Starfield backdrop — denser, cool-white points -->
<svg class="hero__starfield" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
<g fill="#DDE4F5">
<circle cx="60" cy="120" r="0.8" opacity="0.75"/>
<circle cx="140" cy="220" r="1.1" opacity="0.95"/>
<circle cx="80" cy="380" r="0.6" opacity="0.55"/>
<circle cx="220" cy="80" r="0.9" opacity="0.9"/>
<circle cx="320" cy="180" r="0.5" opacity="0.45"/>
<circle cx="410" cy="60" r="1.3" opacity="0.98"/>
<circle cx="500" cy="220" r="0.7" opacity="0.65"/>
<circle cx="600" cy="120" r="0.8" opacity="0.75"/>
<circle cx="720" cy="90" r="0.5" opacity="0.4"/>
<circle cx="820" cy="240" r="0.9" opacity="0.85"/>
<circle cx="900" cy="150" r="0.6" opacity="0.6"/>
<circle cx="1020" cy="80" r="1" opacity="0.95"/>
<circle cx="1120" cy="200" r="0.7" opacity="0.7"/>
<circle cx="1240" cy="130" r="0.5" opacity="0.45"/>
<circle cx="1360" cy="250" r="0.9" opacity="0.9"/>
<circle cx="1440" cy="70" r="0.8" opacity="0.8"/>
<circle cx="1540" cy="200" r="0.6" opacity="0.55"/>
<circle cx="120" cy="500" r="0.8" opacity="0.75"/>
<circle cx="240" cy="640" r="1" opacity="0.9"/>
<circle cx="360" cy="480" r="0.5" opacity="0.45"/>
<circle cx="440" cy="720" r="0.9" opacity="0.85"/>
<circle cx="540" cy="580" r="0.6" opacity="0.55"/>
<circle cx="620" cy="800" r="1.1" opacity="0.95"/>
<circle cx="760" cy="520" r="0.4" opacity="0.4"/>
<circle cx="880" cy="700" r="0.8" opacity="0.8"/>
<circle cx="960" cy="620" r="0.6" opacity="0.6"/>
<circle cx="1080" cy="780" r="0.9" opacity="0.85"/>
<circle cx="1180" cy="500" r="0.5" opacity="0.45"/>
<circle cx="1300" cy="680" r="0.7" opacity="0.7"/>
<circle cx="1420" cy="540" r="0.6" opacity="0.55"/>
<circle cx="1520" cy="740" r="0.9" opacity="0.9"/>
<circle cx="180" cy="440" r="0.4" opacity="0.35"/>
<circle cx="380" cy="350" r="0.5" opacity="0.45"/>
<circle cx="560" cy="400" r="0.4" opacity="0.4"/>
<circle cx="780" cy="380" r="0.5" opacity="0.45"/>
<circle cx="960" cy="440" r="0.4" opacity="0.35"/>
<circle cx="1140" cy="360" r="0.5" opacity="0.45"/>
<circle cx="1340" cy="410" r="0.4" opacity="0.4"/>
<circle cx="1500" cy="380" r="0.5" opacity="0.45"/>
<!-- Densification — extra star pointmarks -->
<circle cx="30" cy="60" r="0.4" opacity="0.35"/>
<circle cx="90" cy="290" r="0.5" opacity="0.5"/>
<circle cx="170" cy="440" r="0.4" opacity="0.4"/>
<circle cx="260" cy="510" r="0.6" opacity="0.55"/>
<circle cx="290" cy="120" r="0.5" opacity="0.45"/>
<circle cx="340" cy="270" r="0.4" opacity="0.4"/>
<circle cx="380" cy="620" r="0.6" opacity="0.6"/>
<circle cx="470" cy="380" r="0.4" opacity="0.4"/>
<circle cx="470" cy="150" r="0.5" opacity="0.5"/>
<circle cx="530" cy="670" r="0.4" opacity="0.4"/>
<circle cx="580" cy="270" r="0.5" opacity="0.5"/>
<circle cx="640" cy="440" r="0.4" opacity="0.4"/>
<circle cx="680" cy="60" r="0.4" opacity="0.4"/>
<circle cx="700" cy="620" r="0.5" opacity="0.5"/>
<circle cx="770" cy="180" r="0.4" opacity="0.4"/>
<circle cx="820" cy="440" r="0.4" opacity="0.4"/>
<circle cx="850" cy="80" r="0.5" opacity="0.5"/>
<circle cx="890" cy="580" r="0.4" opacity="0.4"/>
<circle cx="940" cy="350" r="0.5" opacity="0.55"/>
<circle cx="990" cy="90" r="0.4" opacity="0.4"/>
<circle cx="1040" cy="480" r="0.5" opacity="0.5"/>
<circle cx="1090" cy="640" r="0.4" opacity="0.4"/>
<circle cx="1130" cy="280" r="0.5" opacity="0.5"/>
<circle cx="1180" cy="700" r="0.4" opacity="0.4"/>
<circle cx="1210" cy="60" r="0.5" opacity="0.5"/>
<circle cx="1270" cy="410" r="0.5" opacity="0.55"/>
<circle cx="1330" cy="580" r="0.4" opacity="0.4"/>
<circle cx="1380" cy="140" r="0.5" opacity="0.5"/>
<circle cx="1440" cy="440" r="0.4" opacity="0.4"/>
<circle cx="1470" cy="610" r="0.5" opacity="0.55"/>
<circle cx="1550" cy="120" r="0.4" opacity="0.4"/>
<circle cx="1580" cy="470" r="0.5" opacity="0.5"/>
</g>
<rect width="1600" height="900" filter="url(#grain-cool)" opacity="0.22"/>
</svg>
<!-- Steel-blue hot-source — cool star / off-frame flood -->
<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 12% 10% at 62% 55%, rgba(221,228,245,0.35), transparent 60%),
radial-gradient(ellipse 35% 40% at 62% 55%, rgba(90,120,217,0.32), transparent 65%),
radial-gradient(ellipse 70% 60% at 62% 55%, rgba(42,53,96,0.28), transparent 75%);"></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-space void backdrop. Warm ember key-light from a single off-frame source at camera-right, cool steel-blue rim-light along the left edge. Fine airborne dust catching the ember. Blade retracted. Matte-black surroundings. Product photographed slightly under-exposed so the emitter's activation stud reads as the hottest point in the frame.
</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
Product presentation. Real prices. Real specs. HUD language.
============================================================ -->
<section class="section fleet" id="fleet" aria-label="The Fleet: featured sabers">
<div class="section__frame"></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 12% 10% at 45% 55%, rgba(221,228,245,0.30), transparent 60%),
radial-gradient(ellipse 40% 42% at 45% 55%, rgba(90,120,217,0.28), transparent 65%),
radial-gradient(ellipse 70% 60% at 45% 55%, rgba(42,53,96,0.22), transparent 75%);"></div>
<div class="plate__tag">SLOT · PROD-001</div>
<div class="plate__brief">
Studio hero of the Starkiller SE hilt tilted 15° toward camera, warm ember rim-light along the emitter's underside, matte anchor backdrop. Grip texture readable. Blade retracted.
</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 12% 10% at 55% 55%, rgba(221,228,245,0.25), transparent 60%),
radial-gradient(ellipse 42% 42% at 55% 55%, rgba(90,120,217,0.26), transparent 65%),
radial-gradient(ellipse 70% 60% at 55% 55%, rgba(42,53,96,0.20), transparent 75%);"></div>
<div class="plate__tag">SLOT · PROD-002</div>
<div class="plate__brief">
Vertical hero of the Mace Windu SE hilt, single warm key-light from camera-left illuminating chromed emitter shroud. Cool ambient fill on shadow-side. Deep-space void backdrop with soft nebula wash. Blade retracted.
</div>
</div>
<div class="dossier__meta">
<span class="dossier__code">Dossier / 002</span>
<span class="dossier__code">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 · Amethyst 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 10% 9% at 50% 55%, rgba(221,228,245,0.32), transparent 60%),
radial-gradient(ellipse 40% 42% at 50% 55%, rgba(90,120,217,0.30), transparent 65%),
radial-gradient(ellipse 70% 60% at 50% 55%, rgba(42,53,96,0.22), transparent 75%);"></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 warm ember source. Chrome catching orange rim-light along the pommel and control cluster. Deep matte-black surround, subtle steel-blue ambient fill.
</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-cool)"/>
</svg>
</section>
<!-- ============================================================
FORGE — full-bleed editorial. Factory-direct promise.
Split: image plate left, cinematic copy right.
============================================================ -->
<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 20% 12% at 50% 90%, rgba(221,228,245,0.20), transparent 60%),
radial-gradient(ellipse 60% 40% at 50% 90%, rgba(90,120,217,0.32), transparent 65%),
radial-gradient(ellipse 100% 55% at 50% 88%, rgba(42,53,96,0.28), transparent 75%);"></div>
<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, ember spilling from an off-frame forge floor to underlight them. A single craftsman silhouette at frame-left, hands lit by the ember source. Airborne dust 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-cool)"/>
</svg>
</section>
<!-- ============================================================
ANATOMY — hero-scale dossier close-up on Starkiller SE.
Heavyweight cinematic moment. Hilt is an IMAGE PLACEHOLDER,
not SVG-drawn. HUD annotations layered over.
============================================================ -->
<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" 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 10% 15% at 12% 50%, rgba(221,228,245,0.32), transparent 55%),
radial-gradient(ellipse 40% 45% at 25% 55%, rgba(90,120,217,0.32), transparent 65%),
radial-gradient(ellipse 80% 60% at 30% 55%, rgba(42,53,96,0.26), transparent 75%);"></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 key-light hitting the emitter aperture (hottest point in the composition), cooler ambient fill from screen-right. Fine airborne dust motes catching the warm light. Shot at low angle for slight foreshortening. Deep-anchor backdrop with subtle receding haze. No blade — the emitter reads as the ember source itself.
</figcaption>
</figure>
<!-- HUD anatomy annotations — steel-blue 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--ember">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-cool)"/>
</svg>
</section>
<!-- ============================================================
DRAMATIS PERSONAE — 3-across character grid, movie-poster scale
Each tile is a large image placeholder with HUD label overlay.
============================================================ -->
<section class="section personae" id="personae" aria-label="Chapter 05: Dramatis Personae">
<div class="section__frame"></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" role="img" aria-label="Skywalker character tile">
<div class="plate__brackets"></div>
<div class="plate__bloom" style="background:
radial-gradient(ellipse 15% 12% at 50% 40%, rgba(221,228,245,0.22), transparent 60%),
radial-gradient(ellipse 55% 55% at 50% 40%, rgba(90,120,217,0.24), transparent 65%),
radial-gradient(ellipse 100% 40% at 50% 85%, rgba(42,53,96,0.22), transparent 75%);"></div>
<div class="plate__tag">SLOT · CHR-001</div>
<figcaption class="plate__brief">
Full-length cosplayer in dynamic bladed pose, deep-space void backdrop, warm ember rim-light from camera-right, cool ambient fill. Movie-poster composition — low camera, dramatic silhouette. 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" role="img" aria-label="Vader character tile">
<div class="plate__brackets"></div>
<div class="plate__bloom" style="background:
radial-gradient(ellipse 15% 12% at 50% 40%, rgba(221,228,245,0.18), transparent 60%),
radial-gradient(ellipse 55% 55% at 50% 40%, rgba(90,120,217,0.20), transparent 65%),
radial-gradient(ellipse 100% 40% at 50% 90%, rgba(186,26,26,0.14), transparent 75%);"></div>
<div class="plate__tag">SLOT · CHR-002</div>
<figcaption class="plate__brief">
Silhouette of a Vader-styled figure against a red-tinged deep-space void, blade held vertical, hot ember source behind. Shot from below for dramatic scale. Chrome catching the ember 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" role="img" aria-label="Ahsoka character tile">
<div class="plate__brackets"></div>
<div class="plate__bloom" style="background:
radial-gradient(ellipse 15% 12% at 55% 40%, rgba(221,228,245,0.20), transparent 60%),
radial-gradient(ellipse 55% 55% at 55% 40%, rgba(90,120,217,0.22), transparent 65%),
radial-gradient(ellipse 100% 35% at 50% 90%, rgba(42,53,96,0.18), transparent 75%);"></div>
<div class="plate__tag">SLOT · CHR-003</div>
<figcaption class="plate__brief">
Dual-wielding cosplayer mid-motion, curved-hilt sabers ignited, cool ambient fill from a deep-space void. Warm 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" role="img" aria-label="Kenobi character tile">
<div class="plate__brackets"></div>
<div class="plate__bloom" style="background:
radial-gradient(ellipse 15% 12% at 45% 45%, rgba(221,228,245,0.20), transparent 60%),
radial-gradient(ellipse 55% 55% at 45% 45%, rgba(90,120,217,0.22), transparent 65%),
radial-gradient(ellipse 100% 30% at 50% 85%, rgba(42,53,96,0.20), transparent 75%);"></div>
<div class="plate__tag">SLOT · CHR-004</div>
<figcaption class="plate__brief">
Half-length portrait of a Kenobi-styled cosplayer, saber held two-handed en garde. Cool ambient fill dominant, warm ember rim from behind the figure suggesting an off-frame duel light source. Sand-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" role="img" aria-label="Maul character tile">
<div class="plate__brackets"></div>
<div class="plate__bloom" style="background:
radial-gradient(ellipse 15% 12% at 50% 40%, rgba(221,228,245,0.18), transparent 60%),
radial-gradient(ellipse 55% 55% at 50% 40%, rgba(186,26,26,0.20), transparent 65%),
radial-gradient(ellipse 100% 35% at 50% 90%, rgba(42,53,96,0.20), transparent 75%);"></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-space void with heavy shadow occlusion. Two hot ember sources at either 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" role="img" aria-label="Rey character tile">
<div class="plate__brackets"></div>
<div class="plate__bloom" style="background:
radial-gradient(ellipse 15% 12% at 55% 45%, rgba(221,228,245,0.20), transparent 60%),
radial-gradient(ellipse 55% 55% at 55% 45%, rgba(90,120,217,0.22), transparent 65%),
radial-gradient(ellipse 100% 30% at 50% 85%, rgba(42,53,96,0.18), transparent 75%);"></div>
<div class="plate__tag">SLOT · CHR-006</div>
<figcaption class="plate__brief">
Cosplayer in staff-fighter stance, single-blade saber angled across the body. Cool overhead fill, warm ember rim from screen-left. Deep desert-void backdrop suggested by drifting 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-cool)"/>
</svg>
</section>
<!-- ============================================================
SIGNAL ORIGIN — founder / brand narrative
Split editorial: image plate + copy. Signature at foot.
============================================================ -->
<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 origin__plate" role="img" aria-label="Founder portrait plate">
<div class="plate__brackets"></div>
<div class="plate__bloom" style="background:
radial-gradient(ellipse 15% 15% at 40% 45%, rgba(221,228,245,0.22), transparent 60%),
radial-gradient(ellipse 60% 60% at 40% 45%, rgba(90,120,217,0.24), transparent 65%),
radial-gradient(ellipse 100% 40% at 50% 85%, rgba(42,53,96,0.22), transparent 75%);"></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 ember key-light spilling from off-frame right (the workshop forge light), cool ambient fill from a high window. Direct eye contact with camera. Deep matte-black surroundings. Reportage feel, not editorial polish.
</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-cool)"/>
</svg>
</section>
<!-- ============================================================
TRANSMISSION — comms terminal / newsletter capture
Closing beat carries the rare warm wordmark bloom.
============================================================ -->
<section class="section transmission" id="transmission" aria-label="Chapter 07: Open transmission">
<!-- Volumetric cool haze -->
<svg class="transmission__stars" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice" aria-hidden="true" style="opacity:0.3;">
<rect width="1600" height="900" filter="url(#haze-cool)"/>
</svg>
<!-- Densified starfield -->
<svg class="transmission__stars" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
<g fill="#DDE4F5">
<circle cx="80" cy="100" r="0.6" opacity="0.55"/>
<circle cx="220" cy="80" r="0.8" opacity="0.75"/>
<circle cx="360" cy="140" r="0.5" opacity="0.45"/>
<circle cx="500" cy="60" r="0.9" opacity="0.85"/>
<circle cx="640" cy="120" r="0.6" opacity="0.6"/>
<circle cx="780" cy="80" r="0.7" opacity="0.7"/>
<circle cx="920" cy="160" r="0.5" opacity="0.45"/>
<circle cx="1060" cy="70" r="0.8" opacity="0.8"/>
<circle cx="1200" cy="130" r="0.6" opacity="0.55"/>
<circle cx="1340" cy="90" r="0.5" opacity="0.45"/>
<circle cx="1480" cy="150" r="0.7" opacity="0.65"/>
<circle cx="140" cy="220" r="0.5" opacity="0.45"/>
<circle cx="280" cy="180" r="0.6" opacity="0.55"/>
<circle cx="420" cy="240" r="0.5" opacity="0.45"/>
<circle cx="560" cy="200" r="0.7" opacity="0.65"/>
<circle cx="700" cy="260" r="0.5" opacity="0.45"/>
<circle cx="840" cy="220" r="0.6" opacity="0.55"/>
<circle cx="980" cy="180" r="0.5" opacity="0.45"/>
<circle cx="1120" cy="240" r="0.7" opacity="0.65"/>
<circle cx="1260" cy="200" r="0.5" opacity="0.45"/>
<circle cx="1400" cy="260" r="0.6" opacity="0.55"/>
<circle cx="1540" cy="220" r="0.5" opacity="0.45"/>
<circle cx="180" cy="780" r="0.4" opacity="0.35"/>
<circle cx="420" cy="820" r="0.5" opacity="0.4"/>
<circle cx="720" cy="800" r="0.4" opacity="0.35"/>
<circle cx="980" cy="840" r="0.5" opacity="0.4"/>
<circle cx="1260" cy="800" r="0.4" opacity="0.35"/>
<circle cx="1480" cy="820" r="0.5" opacity="0.4"/>
<!-- Densification pass -->
<circle cx="50" cy="60" r="0.4" opacity="0.35"/>
<circle cx="120" cy="360" r="0.5" opacity="0.45"/>
<circle cx="200" cy="450" r="0.4" opacity="0.4"/>
<circle cx="260" cy="580" r="0.5" opacity="0.45"/>
<circle cx="340" cy="330" r="0.4" opacity="0.4"/>
<circle cx="450" cy="450" r="0.5" opacity="0.5"/>
<circle cx="520" cy="300" r="0.4" opacity="0.4"/>
<circle cx="620" cy="620" r="0.5" opacity="0.5"/>
<circle cx="690" cy="380" r="0.4" opacity="0.4"/>
<circle cx="760" cy="480" r="0.5" opacity="0.5"/>
<circle cx="830" cy="360" r="0.4" opacity="0.4"/>
<circle cx="900" cy="620" r="0.5" opacity="0.5"/>
<circle cx="1000" cy="380" r="0.4" opacity="0.4"/>
<circle cx="1080" cy="500" r="0.5" opacity="0.5"/>
<circle cx="1150" cy="360" r="0.4" opacity="0.4"/>
<circle cx="1220" cy="600" r="0.5" opacity="0.5"/>
<circle cx="1300" cy="380" r="0.4" opacity="0.4"/>
<circle cx="1380" cy="480" r="0.5" opacity="0.5"/>
<circle cx="1450" cy="380" r="0.4" opacity="0.4"/>
<circle cx="1540" cy="580" r="0.5" opacity="0.5"/>
<circle cx="80" cy="700" r="0.4" opacity="0.4"/>
<circle cx="300" cy="720" r="0.5" opacity="0.5"/>
<circle cx="560" cy="700" r="0.4" opacity="0.4"/>
<circle cx="820" cy="720" r="0.5" opacity="0.5"/>
<circle cx="1120" cy="700" r="0.4" opacity="0.4"/>
<circle cx="1360" cy="720" r="0.5" opacity="0.5"/>
</g>
<rect width="1600" height="900" filter="url(#grain-cool)" opacity="0.18"/>
</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>