<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ARTSABERS — Direction Concept — Hull & Ember</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Manrope:wght@300;400;500;600&display=swap" rel="stylesheet" />
<style>
:root {
/* SURFACE ROLES — the only tokens that touch background */
--bg-hull: #1E1E24;
--bg-void: #0A0A0E;
--bg-hull-plate: #26262E;
--bg-hull-hover: #2A2A32;
/* CHROMATIC ACCENTS — text, borders, glow only. Never on background. */
--chrome-dim: #3A3A42;
--primary: #F26B36;
--ember: #F26B36;
--ember-bright: #FF8850;
--ember-deep: #C04A20;
--text: #E8E8EE;
--neutral: #B0B0B8;
--tertiary: #7A94D9;
--steel-blue: #7A94D9;
/* FUNCTIONAL ONLY */
--success: #7FC97F;
--error: #BA1A1A;
/* TYPE */
--font-display: 'Space Grotesk', system-ui, sans-serif;
--font-body: 'Manrope', system-ui, sans-serif;
/* SIZES */
--size-display: 128px;
--size-h1: 84px;
--size-h2: 60px;
--size-h3: 32px;
--size-lead: 20px;
--size-body: 16px;
--size-small: 14px;
--size-micro: 11px;
/* TRACKING */
--tracking-wider: 0.14em;
--tracking-hud: 0.22em;
/* SHAPE */
--radius-md: 6px;
--radius-lg: 8px;
/* SPACING */
--gutter-page: 6vw;
--gap-section: 12vh;
/* SHADOWS */
--shadow-cinematic: 0 24px 64px -12px rgba(0,0,0,0.8), 0 8px 16px -4px rgba(0,0,0,0.6);
--shadow-plate: 0 32px 80px -20px rgba(0,0,0,0.85), 0 12px 24px -8px rgba(0,0,0,0.55);
--glow-ember: 0 0 24px rgba(242,107,54,0.55), 0 0 48px rgba(242,107,54,0.25);
--glow-ember-hot: 0 0 32px rgba(255,136,80,0.75), 0 0 64px rgba(242,107,54,0.35);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background: var(--bg-hull);
color: var(--text);
font-family: var(--font-body);
font-size: var(--size-body);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; }
/* -------- Utility type -------- */
.display, .h1, .h2, .h3, .eyebrow, .hud {
font-family: var(--font-display);
text-transform: uppercase;
}
.display {
font-size: clamp(72px, 12vw, var(--size-display));
font-weight: 700;
letter-spacing: var(--tracking-wider);
line-height: 0.92;
}
.h1 { font-size: clamp(48px, 8vw, var(--size-h1)); font-weight: 700; letter-spacing: var(--tracking-wider); line-height: 0.98; }
.h2 { font-size: clamp(36px, 5.6vw, var(--size-h2)); font-weight: 700; letter-spacing: var(--tracking-wider); line-height: 1.02; }
.h3 { font-size: var(--size-h3); font-weight: 700; letter-spacing: var(--tracking-wider); line-height: 1.15; }
.eyebrow {
font-family: var(--font-display);
font-size: var(--size-micro);
font-weight: 500;
letter-spacing: var(--tracking-hud);
color: var(--neutral);
}
.hud {
font-family: var(--font-display);
font-size: var(--size-micro);
font-weight: 500;
letter-spacing: var(--tracking-hud);
color: var(--steel-blue);
}
.lead { font-size: var(--size-lead); color: var(--neutral); line-height: 1.55; font-weight: 300; }
.accent-ember { color: var(--ember); }
/* -------- Buttons -------- */
.btn-primary {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 18px 36px;
background: var(--ember);
color: var(--bg-void);
font-family: var(--font-display);
font-size: var(--size-small);
font-weight: 700;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
border-radius: var(--radius-md);
box-shadow: var(--glow-ember);
transition: box-shadow 0.28s ease, transform 0.28s ease;
position: relative;
}
.btn-primary::before {
content: '';
position: absolute; inset: 0 0 auto 0; height: 1px;
background: var(--ember-bright);
opacity: 0;
transition: opacity 0.28s ease;
}
.btn-primary:hover { box-shadow: var(--glow-ember-hot); transform: translateY(-1px); }
.btn-primary:hover::before { opacity: 1; }
.btn-primary .arrow { font-family: var(--font-body); }
.btn-ghost {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 17px 32px;
background: transparent;
color: var(--ember);
font-family: var(--font-display);
font-size: var(--size-small);
font-weight: 700;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
border: 1px solid var(--ember);
border-radius: var(--radius-md);
transition: box-shadow 0.28s ease, background 0.28s ease;
}
.btn-ghost:hover { box-shadow: var(--glow-ember); background: rgba(242,107,54,0.06); }
/* -------- NAV -------- */
.nav {
position: sticky;
top: 0;
z-index: 40;
background: rgba(30,30,36,0.88);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--chrome-dim);
}
.nav-inner {
max-width: 1720px;
margin: 0 auto;
padding: 20px var(--gutter-page);
display: flex;
align-items: center;
gap: 48px;
}
.nav-brand {
font-family: var(--font-display);
font-weight: 700;
letter-spacing: var(--tracking-hud);
font-size: 18px;
color: var(--text);
text-transform: uppercase;
display: flex;
align-items: center;
gap: 12px;
}
.brand-mark {
width: 26px; height: 26px;
border: 1px solid var(--chrome-dim);
border-radius: 2px;
display: grid; place-items: center;
position: relative;
}
.brand-mark::after {
content: '';
width: 2px; height: 12px;
background: var(--ember);
box-shadow: 0 0 8px var(--ember), 0 0 16px rgba(242,107,54,0.5);
}
.nav-menu {
display: flex;
align-items: center;
gap: 36px;
margin-left: auto;
}
.nav-menu a {
font-family: var(--font-display);
font-size: var(--size-micro);
font-weight: 500;
letter-spacing: var(--tracking-hud);
text-transform: uppercase;
color: var(--neutral);
transition: color 0.2s ease;
}
.nav-menu a:hover { color: var(--text); }
.nav-cart {
color: var(--text);
font-family: var(--font-display);
font-size: var(--size-micro);
font-weight: 500;
letter-spacing: var(--tracking-hud);
text-transform: uppercase;
padding-left: 28px;
border-left: 1px solid var(--chrome-dim);
}
/* ============================================================
HERO — void, 100vh, cinematic, breaking-the-frame display
============================================================ */
.hero {
position: relative;
background: var(--bg-void);
min-height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
.starfield {
position: absolute; inset: 0;
background:
radial-gradient(1px 1px at 12% 24%, rgba(232,232,238,0.75), transparent 60%),
radial-gradient(1px 1px at 78% 62%, rgba(232,232,238,0.55), transparent 60%),
radial-gradient(1px 1px at 34% 82%, rgba(232,232,238,0.5), transparent 60%),
radial-gradient(1px 1px at 68% 14%, rgba(232,232,238,0.6), transparent 60%),
radial-gradient(1.5px 1.5px at 22% 66%, rgba(232,232,238,0.7), transparent 60%),
radial-gradient(1px 1px at 88% 34%, rgba(232,232,238,0.5), transparent 60%),
radial-gradient(1px 1px at 50% 92%, rgba(232,232,238,0.4), transparent 60%),
radial-gradient(1px 1px at 6% 48%, rgba(232,232,238,0.55), transparent 60%),
radial-gradient(1200px 700px at 82% 28%, rgba(122,148,217,0.10), transparent 60%),
radial-gradient(1400px 800px at 14% 76%, rgba(242,107,54,0.06), transparent 65%);
pointer-events: none;
}
.hero-inner {
position: relative;
z-index: 2;
flex: 1;
display: grid;
grid-template-columns: 1fr;
max-width: 1720px;
margin: 0 auto;
padding: 8vh var(--gutter-page) 0;
width: 100%;
}
.hero-key {
position: absolute;
right: -4vw;
top: 8vh;
bottom: 12vh;
width: 58vw;
max-width: 1100px;
z-index: 1;
pointer-events: none;
filter: drop-shadow(0 40px 60px rgba(0,0,0,0.8));
}
.hero-key svg { width: 100%; height: 100%; }
.hero-copy {
position: relative;
z-index: 3;
max-width: 62vw;
padding-top: 10vh;
}
.hero-eyebrow {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 40px;
}
.hero-eyebrow .dot {
width: 6px; height: 6px; background: var(--ember); border-radius: 50%;
box-shadow: 0 0 8px var(--ember);
}
.hero-title {
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
line-height: 0.88;
font-size: clamp(80px, 14vw, 180px);
color: var(--text);
margin: 0 0 42px;
}
.hero-title .line { display: block; }
.hero-title .line-2 {
margin-left: 4vw;
color: var(--text);
-webkit-text-stroke: 1px var(--chrome-dim);
color: transparent;
}
.hero-title .line-3 {
margin-left: 12vw;
}
.hero-sub {
font-family: var(--font-body);
font-size: var(--size-lead);
color: var(--neutral);
max-width: 520px;
margin: 0 0 44px;
line-height: 1.5;
font-weight: 300;
}
.hero-actions {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.hero-scroll {
position: absolute;
bottom: 40px;
left: var(--gutter-page);
display: flex;
align-items: center;
gap: 16px;
color: var(--steel-blue);
z-index: 3;
}
.hero-scroll .rule {
width: 60px; height: 1px; background: var(--chrome-dim);
}
/* Ember panel-seam glow at bottom of hero — SEAM #1 of 3 */
.hero::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 1px;
background: var(--ember);
box-shadow:
0 0 24px 4px rgba(242,107,54,0.6),
0 0 96px 8px rgba(242,107,54,0.3),
0 -80px 160px 40px rgba(242,107,54,0.08);
z-index: 3;
}
/* ============================================================
TELEMETRY RIBBON — thin HUD readout, no icons
============================================================ */
.telemetry {
background: var(--bg-hull);
border-bottom: 1px solid var(--chrome-dim);
}
.telemetry-inner {
max-width: 1720px;
margin: 0 auto;
padding: 28px var(--gutter-page);
display: flex;
align-items: center;
gap: 48px;
flex-wrap: wrap;
font-family: var(--font-display);
font-size: var(--size-micro);
letter-spacing: var(--tracking-hud);
text-transform: uppercase;
color: var(--steel-blue);
}
.telemetry-inner .sep {
width: 40px; height: 1px; background: var(--chrome-dim);
}
.telemetry-inner strong {
color: var(--text); font-weight: 500;
}
/* ============================================================
MANIFESTO — sparse, one idea per viewport, huge display type
============================================================ */
.manifesto {
background: var(--bg-hull);
padding: 22vh var(--gutter-page) 20vh;
position: relative;
overflow: hidden;
}
.manifesto-inner {
max-width: 1720px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.manifesto-eyebrow {
color: var(--steel-blue);
margin-bottom: 8vh;
display: flex;
align-items: center;
gap: 16px;
}
.manifesto-eyebrow .rule {
width: 80px; height: 1px; background: var(--chrome-dim);
}
.manifesto-title {
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
line-height: 0.92;
font-size: clamp(56px, 10vw, 148px);
color: var(--text);
margin: 0;
}
.manifesto-title .from { display: block; }
.manifesto-title .factory { display: block; margin-left: 6vw; }
.manifesto-title .to-your { display: block; margin-left: 14vw; color: var(--ember); }
.manifesto-caption {
margin-top: 8vh;
max-width: 460px;
margin-left: auto;
color: var(--neutral);
font-size: var(--size-lead);
line-height: 1.55;
font-weight: 300;
}
.manifesto-caption::before {
content: '';
display: block;
width: 40px; height: 1px;
background: var(--ember);
margin-bottom: 24px;
}
/* ============================================================
ANATOMY — full-bleed editorial saber deep-dive with HUD callouts
============================================================ */
.anatomy {
background: var(--bg-hull);
padding: 14vh var(--gutter-page) 16vh;
position: relative;
}
.anatomy-header {
max-width: 1720px;
margin: 0 auto 8vh;
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 60px;
align-items: end;
}
.anatomy-header .title-block h2 { margin: 24px 0 0; }
.anatomy-header .title-block .eyebrow { display: block; }
.anatomy-header .intro {
color: var(--neutral);
font-size: var(--size-lead);
line-height: 1.55;
max-width: 540px;
font-weight: 300;
}
.anatomy-frame {
max-width: 1720px;
margin: 0 auto;
position: relative;
aspect-ratio: 21 / 9;
background:
radial-gradient(80% 60% at 50% 50%, rgba(242,107,54,0.10), transparent 60%),
linear-gradient(180deg, var(--bg-hull-plate), var(--bg-void) 100%);
border: 1px solid var(--chrome-dim);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-plate);
}
.anatomy-scene {
position: absolute;
inset: 0;
display: grid;
place-items: center;
}
.anatomy-scene svg {
width: 82%;
height: auto;
filter: drop-shadow(0 20px 40px rgba(0,0,0,0.7));
}
.anatomy-callout {
position: absolute;
color: var(--steel-blue);
font-family: var(--font-display);
font-size: var(--size-micro);
font-weight: 500;
letter-spacing: var(--tracking-hud);
text-transform: uppercase;
line-height: 1.55;
}
.anatomy-callout .num {
display: inline-block;
width: 22px; height: 22px;
border: 1px solid var(--steel-blue);
text-align: center;
line-height: 20px;
margin-right: 10px;
color: var(--steel-blue);
font-size: 10px;
}
.anatomy-callout .label { color: var(--text); font-weight: 700; }
.anatomy-callout .meta { color: var(--neutral); }
.anatomy-callout .arm {
position: absolute;
background: var(--chrome-dim);
}
.callout-1 { top: 12%; left: 6%; max-width: 240px; }
.callout-1 .arm { top: 100%; left: 0; width: 260px; height: 1px; transform-origin: 0 0; transform: rotate(18deg); }
.callout-2 { top: 12%; right: 6%; max-width: 240px; text-align: right; }
.callout-2 .arm { top: 100%; right: 0; width: 260px; height: 1px; transform-origin: 100% 0; transform: rotate(-18deg); }
.callout-3 { bottom: 12%; left: 12%; max-width: 260px; }
.callout-3 .arm { bottom: 100%; left: 0; width: 220px; height: 1px; transform-origin: 0 100%; transform: rotate(-14deg); }
.callout-4 { bottom: 12%; right: 12%; max-width: 260px; text-align: right; }
.callout-4 .arm { bottom: 100%; right: 0; width: 220px; height: 1px; transform-origin: 100% 100%; transform: rotate(14deg); }
.anatomy-specs {
max-width: 1720px;
margin: 6vh auto 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
padding-top: 40px;
border-top: 1px solid var(--chrome-dim);
}
.spec-cell .hud { display: block; margin-bottom: 10px; }
.spec-cell .val {
font-family: var(--font-display);
font-size: 40px;
font-weight: 700;
letter-spacing: var(--tracking-wider);
color: var(--text);
line-height: 1;
margin-bottom: 8px;
}
.spec-cell .sub {
color: var(--neutral);
font-size: var(--size-small);
}
/* ============================================================
CHARACTER GRID — 3×2 movie-poster tiles
============================================================ */
.characters {
background: var(--bg-hull);
padding: 14vh var(--gutter-page) 16vh;
}
.char-header {
max-width: 1720px;
margin: 0 auto 8vh;
display: flex;
justify-content: space-between;
align-items: end;
gap: 60px;
flex-wrap: wrap;
}
.char-header h2 { margin: 20px 0 0; max-width: 900px; }
.char-header .side {
max-width: 340px;
color: var(--neutral);
font-weight: 300;
}
.char-grid {
max-width: 1720px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.char-tile {
position: relative;
aspect-ratio: 4 / 5;
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-cinematic);
background: var(--bg-hull-plate);
isolation: isolate;
}
.char-tile .poster {
position: absolute; inset: 0;
background-size: cover;
background-position: center;
}
.char-tile .poster-overlay {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(10,10,14,0) 40%, rgba(10,10,14,0.85) 100%);
z-index: 2;
}
.char-tile .label {
position: absolute;
left: 32px; right: 32px; bottom: 28px;
z-index: 3;
display: flex; flex-direction: column; gap: 8px;
}
.char-tile .name {
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
font-size: 26px;
color: var(--text);
line-height: 1.05;
}
.char-tile .meta { color: var(--steel-blue); }
.char-tile:hover::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0; height: 1px;
background: var(--ember);
box-shadow: 0 0 16px var(--ember), 0 -40px 80px 10px rgba(242,107,54,0.15);
z-index: 4;
}
/* Character poster placeholders — cinematic mood via CSS */
.poster-vader {
background:
radial-gradient(60% 45% at 50% 32%, rgba(242,107,54,0.35), transparent 65%),
radial-gradient(80% 60% at 50% 90%, rgba(186,26,26,0.25), transparent 70%),
linear-gradient(160deg, #14141A 0%, #05050A 100%);
}
.poster-ahsoka {
background:
radial-gradient(70% 50% at 30% 40%, rgba(122,148,217,0.28), transparent 65%),
radial-gradient(60% 40% at 70% 30%, rgba(242,107,54,0.12), transparent 60%),
linear-gradient(180deg, #1B1B22 0%, #08080D 100%);
}
.poster-starkiller {
background:
radial-gradient(50% 60% at 50% 45%, rgba(255,136,80,0.35), transparent 60%),
radial-gradient(90% 70% at 50% 100%, rgba(242,107,54,0.18), transparent 70%),
linear-gradient(180deg, #15151B 0%, #05050A 100%);
}
.poster-mace {
background:
radial-gradient(60% 50% at 60% 40%, rgba(122,80,180,0.22), transparent 65%),
linear-gradient(180deg, #171720 0%, #06060B 100%);
}
.poster-obiwan {
background:
radial-gradient(60% 50% at 40% 40%, rgba(122,148,217,0.32), transparent 65%),
linear-gradient(200deg, #1A1A22 0%, #07070C 100%);
}
.poster-carbon {
background:
radial-gradient(60% 50% at 50% 45%, rgba(60,60,72,0.7), transparent 65%),
radial-gradient(30% 60% at 50% 50%, rgba(242,107,54,0.28), transparent 65%),
linear-gradient(180deg, #1E1E24 0%, #08080D 100%);
}
/* ============================================================
FLAGSHIP SPECIMENS — 3 across hull-plate cards
============================================================ */
.specimens {
background: var(--bg-hull);
padding: 14vh var(--gutter-page) 16vh;
}
.spec-header {
max-width: 1720px;
margin: 0 auto 8vh;
}
.spec-header .eyebrow { display: block; margin-bottom: 24px; }
.spec-header h2 { margin: 0 0 24px; max-width: 900px; }
.spec-header p { max-width: 620px; color: var(--neutral); font-size: var(--size-lead); font-weight: 300; }
.spec-grid {
max-width: 1720px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
}
.spec-card {
background: var(--bg-hull-plate);
border-radius: var(--radius-md);
box-shadow: var(--shadow-cinematic);
overflow: hidden;
display: flex;
flex-direction: column;
position: relative;
transition: transform 0.35s ease;
}
.spec-card:hover { transform: translateY(-4px); }
.spec-card.spotlit {
box-shadow:
var(--shadow-plate),
inset 0 0 60px -10px rgba(242,107,54,0.18);
}
.spec-card .plate {
position: relative;
aspect-ratio: 4 / 3;
background:
radial-gradient(60% 50% at 50% 50%, rgba(60,60,72,0.4), transparent 65%),
linear-gradient(180deg, var(--bg-hull-hover) 0%, var(--bg-hull-plate) 100%);
overflow: hidden;
}
.spec-card.spotlit .plate {
background:
radial-gradient(50% 60% at 50% 55%, rgba(242,107,54,0.22), transparent 65%),
linear-gradient(180deg, var(--bg-hull-hover) 0%, var(--bg-hull-plate) 100%);
}
.spec-card .plate svg {
position: absolute;
inset: 0;
margin: auto;
width: 90%;
height: auto;
}
.spec-card .body {
padding: 32px 32px 36px;
display: flex;
flex-direction: column;
gap: 14px;
border-top: 1px solid var(--chrome-dim);
}
.spec-card .badge-row {
display: flex;
gap: 20px;
color: var(--steel-blue);
}
.spec-card h3 {
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
font-size: 24px;
color: var(--text);
margin: 0;
line-height: 1.1;
}
.spec-card .footline {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-top: 8px;
}
.spec-card .price {
font-family: var(--font-display);
font-weight: 700;
letter-spacing: var(--tracking-wider);
color: var(--ember);
font-size: 22px;
}
.spec-card .grade { color: var(--neutral); }
/* ============================================================
MISSION CONTROL — split-panel with HUD telemetry + seam glow
============================================================ */
.mission {
background: var(--bg-hull);
padding: 14vh var(--gutter-page) 16vh;
}
.mission-inner {
max-width: 1720px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.05fr 1fr;
background: var(--bg-hull-plate);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-plate);
overflow: hidden;
position: relative;
min-height: 600px;
}
/* Ember panel-seam glow along the divider — SEAM #2 of 3 */
.mission-inner::before {
content: '';
position: absolute;
left: 51.2%;
top: 8%;
bottom: 8%;
width: 1px;
background: var(--ember);
box-shadow:
0 0 12px 1px rgba(242,107,54,0.7),
0 0 40px 4px rgba(242,107,54,0.35),
-60px 0 120px 20px rgba(242,107,54,0.06),
60px 0 120px 20px rgba(242,107,54,0.06);
z-index: 2;
}
.mission-left {
padding: 60px 56px;
display: flex;
flex-direction: column;
gap: 32px;
border-right: 1px solid var(--chrome-dim);
position: relative;
}
.mission-left .eyebrow { color: var(--steel-blue); }
.mission-left h2 { margin: 0; font-size: clamp(36px, 4vw, 52px); }
.mission-left .lead { max-width: 460px; }
.telemetry-panel {
margin-top: auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
border-top: 1px solid var(--chrome-dim);
padding-top: 32px;
}
.tel-cell .hud { display: block; margin-bottom: 8px; }
.tel-cell .val {
font-family: var(--font-display);
font-size: 32px;
font-weight: 700;
letter-spacing: var(--tracking-wider);
color: var(--text);
line-height: 1.05;
}
.tel-cell .unit { color: var(--neutral); font-size: var(--size-small); margin-top: 6px; display: block; }
.mission-right {
position: relative;
background:
radial-gradient(60% 50% at 30% 35%, rgba(242,107,54,0.15), transparent 65%),
linear-gradient(160deg, var(--bg-hull-plate) 0%, var(--bg-void) 100%);
overflow: hidden;
}
.mission-right .stamp {
position: absolute;
top: 40px; right: 40px;
color: var(--steel-blue);
text-align: right;
}
.mission-right .stamp .val {
font-family: var(--font-display);
font-size: 72px;
font-weight: 700;
letter-spacing: var(--tracking-wider);
color: var(--text);
line-height: 0.9;
}
.mission-right .stamp .unit { color: var(--steel-blue); }
.mission-right .scene {
position: absolute;
inset: 0;
display: grid;
place-items: center;
}
.mission-right .scene svg { width: 60%; }
.mission-right .base-line {
position: absolute;
left: 40px; right: 40px; bottom: 40px;
display: flex;
justify-content: space-between;
align-items: baseline;
color: var(--steel-blue);
}
.mission-right .base-line .named {
color: var(--text);
font-family: var(--font-display);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
font-weight: 700;
font-size: 18px;
}
/* ============================================================
FOUNDER — full-bleed cinematic pull-quote spread
============================================================ */
.founder {
background: var(--bg-hull);
padding: 0;
position: relative;
}
.founder-frame {
position: relative;
min-height: 92vh;
display: grid;
place-items: center;
background:
radial-gradient(80% 60% at 20% 30%, rgba(242,107,54,0.18), transparent 60%),
radial-gradient(60% 50% at 80% 70%, rgba(122,148,217,0.10), transparent 60%),
linear-gradient(180deg, var(--bg-hull) 0%, var(--bg-hull-plate) 100%);
overflow: hidden;
}
.founder-scene {
position: absolute;
inset: 0;
background-image:
radial-gradient(1px 1px at 20% 30%, rgba(232,232,238,0.35), transparent 60%),
radial-gradient(1px 1px at 74% 62%, rgba(232,232,238,0.25), transparent 60%),
radial-gradient(1400px 700px at 20% 40%, rgba(242,107,54,0.05), transparent 65%);
opacity: 0.9;
}
.founder-content {
position: relative;
z-index: 2;
max-width: 1400px;
padding: 0 var(--gutter-page);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.founder-portrait {
aspect-ratio: 4 / 5;
border-radius: var(--radius-md);
background:
radial-gradient(60% 50% at 50% 30%, rgba(242,107,54,0.32), transparent 60%),
linear-gradient(180deg, #1A1A22 0%, #06060B 100%);
box-shadow: var(--shadow-plate);
position: relative;
overflow: hidden;
}
.founder-portrait::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 60%, rgba(10,10,14,0.7) 100%);
}
.founder-portrait .caption {
position: absolute;
bottom: 28px; left: 28px; right: 28px;
z-index: 2;
color: var(--steel-blue);
}
.founder-portrait .caption .who {
display: block;
font-family: var(--font-display);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
font-weight: 700;
font-size: 16px;
color: var(--text);
margin-bottom: 4px;
}
.founder-quote {
display: flex;
flex-direction: column;
gap: 40px;
}
.founder-quote .eyebrow { color: var(--steel-blue); }
.founder-quote .pull {
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
line-height: 1.02;
font-size: clamp(36px, 4.6vw, 68px);
color: var(--text);
margin: 0;
}
.founder-quote .pull .ember { color: var(--ember); }
.founder-quote .attribution {
display: flex;
gap: 24px;
align-items: center;
color: var(--neutral);
}
.founder-quote .attribution .rule {
width: 40px; height: 1px; background: var(--chrome-dim);
}
/* ============================================================
REVIEWS — 3 hull-plate testimonial cards with HUD meta
============================================================ */
.reviews {
background: var(--bg-hull);
padding: 14vh var(--gutter-page) 16vh;
}
.rv-header {
max-width: 1720px;
margin: 0 auto 8vh;
display: flex;
justify-content: space-between;
align-items: end;
gap: 60px;
flex-wrap: wrap;
}
.rv-header h2 { margin: 20px 0 0; max-width: 720px; }
.rv-header .aggregate {
display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
color: var(--steel-blue);
}
.rv-header .aggregate .score {
font-family: var(--font-display);
font-size: 56px;
font-weight: 700;
letter-spacing: var(--tracking-wider);
color: var(--text);
line-height: 1;
}
.rv-header .aggregate .stars { color: var(--ember); font-size: 20px; letter-spacing: 4px; }
.rv-grid {
max-width: 1720px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.rv-card {
background: var(--bg-hull-plate);
border-radius: var(--radius-md);
padding: 44px 40px 36px;
box-shadow: var(--shadow-cinematic);
display: flex;
flex-direction: column;
gap: 24px;
position: relative;
border-top: 1px solid var(--chrome-dim);
}
.rv-card .stars { color: var(--ember); font-size: 16px; letter-spacing: 4px; }
.rv-card .quote {
font-family: var(--font-body);
font-size: 20px;
line-height: 1.55;
color: var(--text);
font-weight: 500;
margin: 0;
}
.rv-card .who {
display: flex; flex-direction: column; gap: 8px;
margin-top: auto;
padding-top: 24px;
border-top: 1px solid var(--chrome-dim);
}
.rv-card .who .name {
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
color: var(--text);
font-size: var(--size-small);
}
.rv-card .who .item { color: var(--steel-blue); }
/* ============================================================
TRANSMISSION — dramatic email capture, seam glow at bottom
============================================================ */
.transmission {
background: var(--bg-hull);
padding: 20vh var(--gutter-page) 18vh;
position: relative;
overflow: hidden;
}
.transmission::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(60% 40% at 50% 100%, rgba(242,107,54,0.10), transparent 65%);
pointer-events: none;
}
/* Ember panel-seam glow at bottom — SEAM #3 of 3 */
.transmission::after {
content: '';
position: absolute;
left: 20%; right: 20%; bottom: 0;
height: 1px;
background: var(--ember);
box-shadow:
0 0 24px 3px rgba(242,107,54,0.6),
0 0 96px 8px rgba(242,107,54,0.28);
}
.transmission-inner {
max-width: 900px;
margin: 0 auto;
text-align: center;
position: relative;
z-index: 2;
}
.transmission .eyebrow {
color: var(--steel-blue);
margin-bottom: 32px;
display: inline-flex;
align-items: center;
gap: 14px;
}
.transmission .eyebrow .rule {
width: 40px; height: 1px; background: var(--chrome-dim);
}
.transmission h2 {
margin: 0 0 32px;
font-size: clamp(48px, 6.4vw, 88px);
}
.transmission p {
color: var(--neutral);
font-size: var(--size-lead);
line-height: 1.55;
max-width: 560px;
margin: 0 auto 44px;
font-weight: 300;
}
.transmission-form {
display: flex;
gap: 16px;
max-width: 620px;
margin: 0 auto;
}
.transmission-form input {
flex: 1;
background: var(--bg-hull-plate);
color: var(--text);
border: 0;
border-bottom: 1px solid var(--chrome-dim);
padding: 20px 22px;
font-family: var(--font-body);
font-size: var(--size-body);
border-radius: var(--radius-md) var(--radius-md) 0 0;
transition: border-color 0.28s ease, box-shadow 0.28s ease;
}
.transmission-form input::placeholder { color: var(--neutral); }
.transmission-form input:focus {
outline: 0;
border-bottom-color: var(--ember);
box-shadow: 0 8px 20px -8px rgba(242,107,54,0.4);
}
/* ============================================================
FOOTER — void deep-space bookend
============================================================ */
.footer {
background: var(--bg-void);
padding: 12vh var(--gutter-page) 6vh;
position: relative;
overflow: hidden;
}
.footer::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(1px 1px at 12% 30%, rgba(232,232,238,0.5), transparent 60%),
radial-gradient(1px 1px at 72% 60%, rgba(232,232,238,0.4), transparent 60%),
radial-gradient(1px 1px at 38% 80%, rgba(232,232,238,0.35), transparent 60%),
radial-gradient(1000px 500px at 82% 20%, rgba(122,148,217,0.06), transparent 65%);
pointer-events: none;
}
.footer-inner {
position: relative;
z-index: 2;
max-width: 1720px;
margin: 0 auto;
}
.footer-top {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 60px;
padding-bottom: 60px;
border-bottom: 1px solid var(--chrome-dim);
}
.footer-brand h4 {
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
font-size: 22px;
color: var(--text);
margin: 0 0 20px;
}
.footer-brand p {
color: var(--neutral);
max-width: 380px;
font-weight: 300;
margin: 0;
}
.footer-col h5 {
font-family: var(--font-display);
font-size: var(--size-micro);
font-weight: 500;
letter-spacing: var(--tracking-hud);
text-transform: uppercase;
color: var(--steel-blue);
margin: 0 0 20px;
}
.footer-col ul {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 12px;
}
.footer-col a {
color: var(--neutral);
font-size: var(--size-small);
transition: color 0.2s ease;
}
.footer-col a:hover { color: var(--text); }
.footer-base {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 40px;
color: var(--steel-blue);
flex-wrap: wrap;
gap: 20px;
}
.footer-base .set { display: flex; gap: 28px; }
.footer-base .set a { color: var(--neutral); font-size: var(--size-small); }
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1200px) {
.char-grid { grid-template-columns: repeat(2, 1fr); }
.spec-grid { grid-template-columns: repeat(2, 1fr); }
.rv-grid { grid-template-columns: 1fr; }
.mission-inner { grid-template-columns: 1fr; }
.mission-inner::before { display: none; }
.mission-left { border-right: 0; border-bottom: 1px solid var(--chrome-dim); }
.mission-right { min-height: 400px; }
.anatomy-header, .founder-content { grid-template-columns: 1fr; }
.anatomy-specs { grid-template-columns: repeat(2, 1fr); }
.hero-key { width: 80vw; right: -8vw; opacity: 0.6; }
.hero-copy { max-width: 100%; }
}
@media (max-width: 720px) {
:root { --gutter-page: 5vw; }
.nav-menu { display: none; }
.telemetry-inner { gap: 20px; }
.telemetry-inner .sep { display: none; }
.char-grid, .spec-grid { grid-template-columns: 1fr; }
.footer-top { grid-template-columns: 1fr; gap: 40px; }
.anatomy-callout { display: none; }
.telemetry-panel { grid-template-columns: 1fr; }
.transmission-form { flex-direction: column; }
}
</style>
</head>
<body>
<!-- ============================================================
NAV
============================================================ -->
<header class="nav">
<div class="nav-inner">
<a href="#" class="nav-brand">
<span class="brand-mark" aria-hidden="true"></span>
ARTSABERS
</a>
<nav class="nav-menu" aria-label="Primary">
<a href="#">Lightsabers</a>
<a href="#">By Character</a>
<a href="#">Saber Cores</a>
<a href="#">Helmets</a>
<a href="#">Parts</a>
<a href="#">Journal</a>
</nav>
<a href="#" class="nav-cart">Cart · 0</a>
</div>
</header>
<!-- ============================================================
HERO — void, 100vh, cinematic, key-art overlaid, huge display
============================================================ -->
<section class="hero" aria-label="Hero">
<div class="starfield" aria-hidden="true"></div>
<div class="hero-key" role="img" aria-label="Wide cinematic key-art of a single ARTSABERS Xenopixel V3 hilt tilted 45 degrees, floating in deep space, with a strong single-source rim-light hitting the chrome from the upper right and a hot ember glow radiating from the emitter and along the panel seams; blade extended in a cool white-orange gradient fading to black at the tip; heavy dramatic shadows on the reverse side; no lens flare, no motion streaks">
<svg viewBox="0 0 900 900" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<defs>
<linearGradient id="bladeG" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#FF8850" stop-opacity="0"/>
<stop offset="8%" stop-color="#FF8850" stop-opacity="0.9"/>
<stop offset="40%" stop-color="#F26B36" stop-opacity="1"/>
<stop offset="100%" stop-color="#F26B36" stop-opacity="0.85"/>
</linearGradient>
<linearGradient id="hiltG" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#4A4A54"/>
<stop offset="45%" stop-color="#2A2A32"/>
<stop offset="100%" stop-color="#14141A"/>
</linearGradient>
<filter id="bladeGlow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="16" result="b"/>
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
</defs>
<g transform="translate(140 140) rotate(35 400 400)">
<!-- Blade -->
<rect x="200" y="378" width="620" height="44" rx="22" fill="url(#bladeG)" filter="url(#bladeGlow)" opacity="0.95"/>
<rect x="200" y="388" width="620" height="24" rx="12" fill="#FFE7D6" opacity="0.55"/>
<!-- Emitter shroud -->
<rect x="150" y="360" width="70" height="80" rx="6" fill="#3A3A42"/>
<rect x="150" y="360" width="70" height="6" fill="#F26B36" opacity="0.9"/>
<!-- Grip -->
<rect x="60" y="368" width="140" height="64" rx="8" fill="url(#hiltG)"/>
<rect x="72" y="374" width="120" height="4" fill="#3A3A42"/>
<rect x="72" y="384" width="120" height="4" fill="#3A3A42"/>
<rect x="72" y="394" width="120" height="4" fill="#3A3A42"/>
<rect x="72" y="404" width="120" height="4" fill="#3A3A42"/>
<rect x="72" y="414" width="120" height="4" fill="#3A3A42"/>
<!-- Pommel -->
<rect x="20" y="368" width="44" height="64" rx="6" fill="#26262E"/>
<rect x="26" y="378" width="14" height="44" rx="2" fill="#F26B36" opacity="0.85"/>
<!-- Seam-glow highlight along hilt -->
<rect x="60" y="365" width="140" height="1.5" fill="#FF8850" opacity="0.65"/>
</g>
</svg>
</div>
<div class="hero-inner">
<div class="hero-copy">
<div class="hero-eyebrow">
<span class="dot" aria-hidden="true"></span>
<span class="hud">Transmission 07.03 · Factory direct · Global</span>
</div>
<h1 class="hero-title">
<span class="line line-1">Your saber</span>
<span class="line line-2">isn’t just</span>
<span class="line line-3">a purchase.</span>
</h1>
<p class="hero-sub">Every character, every Saber Core, every duelling grade. Hundreds to choose from, direct from the factory floor to your door in seven to ten days — and real people who stay when the box arrives.</p>
<div class="hero-actions">
<a href="#" class="btn-primary">Enter the Catalogue <span class="arrow">→</span></a>
<a href="#" class="btn-ghost">Choose a Saber Core</a>
</div>
</div>
</div>
<div class="hero-scroll">
<span class="rule" aria-hidden="true"></span>
<span class="hud">Scroll to descend</span>
</div>
</section>
<!-- ============================================================
TELEMETRY RIBBON — thin HUD readout, no icons
============================================================ -->
<section class="telemetry" aria-label="Fleet telemetry">
<div class="telemetry-inner">
<span>Specimen count · <strong>1,100 units</strong></span>
<span class="sep" aria-hidden="true"></span>
<span>Saber Core tiers · <strong>05</strong></span>
<span class="sep" aria-hidden="true"></span>
<span>Duelling grades · <strong>Light · Heavy</strong></span>
<span class="sep" aria-hidden="true"></span>
<span>Transmission origin · <strong>Factory direct</strong></span>
<span class="sep" aria-hidden="true"></span>
<span>ETA · <strong>7–10 days</strong></span>
<span class="sep" aria-hidden="true"></span>
<span>Response window · <strong>24 hrs</strong></span>
</div>
</section>
<!-- ============================================================
MANIFESTO — sparse, one idea per viewport, huge display
============================================================ -->
<section class="manifesto" aria-label="Manifesto">
<div class="manifesto-inner">
<div class="manifesto-eyebrow">
<span class="rule" aria-hidden="true"></span>
<span class="hud">Chapter 01 · Origin protocol</span>
</div>
<h2 class="manifesto-title">
<span class="from">From factory</span>
<span class="factory">floor,</span>
<span class="to-your">to your door.</span>
</h2>
<p class="manifesto-caption">Most factory-direct shops take payment and disappear. We stay. A named single point of contact after your order ships. A twenty-four-hour first response, human every time. This is the whole promise, said plainly.</p>
</div>
</section>
<!-- ============================================================
ANATOMY — full-bleed editorial saber deep-dive with HUD callouts
============================================================ -->
<section class="anatomy" aria-label="Saber Core anatomy">
<div class="anatomy-header">
<div class="title-block">
<span class="eyebrow">Chapter 02 · Deep dive</span>
<h2 class="h2">Inside the Xenopixel V3.<br/>Every seam accounted for.</h2>
</div>
<p class="intro">Bluetooth app connectivity, infinite blade colours, and a font library that stays with the hilt through firmware after firmware. What most shops reserve for the top tier lives on our RGB-X and S-RGB Cores as standard.</p>
</div>
<div class="anatomy-frame">
<div class="anatomy-scene" role="img" aria-label="Cinematic orthographic side-view of a Xenopixel V3 saber hilt floating horizontally against a graphite background with a subtle ember rim-light from below the emitter; blade emitter at right, pommel at left, chrome control ring visible mid-hilt, dramatic side-lighting from upper left casting a long shadow beneath the hilt; no other objects in frame">
<svg viewBox="0 0 1200 380" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<defs>
<linearGradient id="anaHilt" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#4A4A54"/>
<stop offset="10%" stop-color="#3A3A42"/>
<stop offset="55%" stop-color="#26262E"/>
<stop offset="100%" stop-color="#14141A"/>
</linearGradient>
<linearGradient id="anaEmit" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#F26B36" stop-opacity="0"/>
<stop offset="100%" stop-color="#F26B36" stop-opacity="0.9"/>
</linearGradient>
</defs>
<!-- Blade emitter halo -->
<ellipse cx="1050" cy="190" rx="180" ry="20" fill="url(#anaEmit)" opacity="0.7"/>
<!-- Pommel -->
<rect x="60" y="160" width="60" height="60" rx="6" fill="#26262E"/>
<rect x="72" y="170" width="20" height="40" rx="2" fill="#F26B36" opacity="0.85"/>
<rect x="60" y="158" width="60" height="1.5" fill="#4A4A54" opacity="0.8"/>
<!-- Grip section -->
<rect x="120" y="160" width="240" height="60" rx="4" fill="url(#anaHilt)"/>
<g fill="#3A3A42">
<rect x="140" y="170" width="200" height="3"/>
<rect x="140" y="180" width="200" height="3"/>
<rect x="140" y="190" width="200" height="3"/>
<rect x="140" y="200" width="200" height="3"/>
<rect x="140" y="210" width="200" height="3"/>
</g>
<!-- Control ring -->
<rect x="360" y="150" width="200" height="80" rx="4" fill="#2A2A32"/>
<circle cx="410" cy="190" r="10" fill="#1E1E24" stroke="#F26B36" stroke-width="1.5"/>
<circle cx="450" cy="190" r="6" fill="#7A94D9" opacity="0.7"/>
<rect x="480" y="180" width="60" height="20" rx="3" fill="#14141A"/>
<rect x="486" y="186" width="48" height="8" fill="#F26B36" opacity="0.85"/>
<!-- Neck -->
<rect x="560" y="160" width="180" height="60" rx="4" fill="url(#anaHilt)"/>
<g fill="#3A3A42">
<rect x="580" y="170" width="140" height="2"/>
<rect x="580" y="175" width="140" height="2"/>
<rect x="580" y="205" width="140" height="2"/>
<rect x="580" y="210" width="140" height="2"/>
</g>
<!-- Panel-seam ember line -->
<rect x="120" y="158" width="620" height="1.5" fill="#FF8850" opacity="0.65"/>
<!-- Emitter shroud -->
<rect x="740" y="140" width="80" height="100" rx="6" fill="#3A3A42"/>
<rect x="740" y="140" width="80" height="6" fill="#F26B36" opacity="0.85"/>
<rect x="740" y="234" width="80" height="6" fill="#F26B36" opacity="0.5"/>
<!-- Emitter throat -->
<rect x="820" y="170" width="180" height="40" rx="4" fill="#1E1E24" stroke="#3A3A42" stroke-width="1"/>
<rect x="830" y="182" width="160" height="16" fill="#F26B36" opacity="0.9"/>
<rect x="830" y="185" width="160" height="10" fill="#FFE7D6" opacity="0.55"/>
<!-- Cinematic shadow beneath -->
<ellipse cx="500" cy="285" rx="440" ry="14" fill="#000" opacity="0.55"/>
</svg>
</div>
<div class="anatomy-callout callout-1">
<div><span class="num">01</span><span class="label">Proffie 2.2 Core</span></div>
<div class="meta" style="margin-top:6px;">Full blade animation<br/>Custom sound font library</div>
<span class="arm" aria-hidden="true"></span>
</div>
<div class="anatomy-callout callout-2">
<div><span class="label">Xenopixel emitter</span><span class="num" style="margin-left:10px; margin-right:0;">02</span></div>
<div class="meta" style="margin-top:6px;">Full-length pixel blade<br/>Infinite colour range</div>
<span class="arm" aria-hidden="true"></span>
</div>
<div class="anatomy-callout callout-3">
<div><span class="num">03</span><span class="label">Chrome control ring</span></div>
<div class="meta" style="margin-top:6px;">Bluetooth app pair<br/>OLED status readout</div>
<span class="arm" aria-hidden="true"></span>
</div>
<div class="anatomy-callout callout-4">
<div><span class="label">Heavy-duel spec</span><span class="num" style="margin-left:10px; margin-right:0;">04</span></div>
<div class="meta" style="margin-top:6px;">Reinforced polycarb blade<br/>Steel-machined hilt</div>
<span class="arm" aria-hidden="true"></span>
</div>
</div>
<div class="anatomy-specs">
<div class="spec-cell">
<span class="hud">Saber Core tier</span>
<div class="val">V3</div>
<span class="sub">Xenopixel · Third generation</span>
</div>
<div class="spec-cell">
<span class="hud">Sound fonts</span>
<div class="val">34</div>
<span class="sub">Loadable via XenoConfigurator</span>
</div>
<div class="spec-cell">
<span class="hud">Blade colours</span>
<div class="val">∞</div>
<span class="sub">Full RGB spectrum</span>
</div>
<div class="spec-cell">
<span class="hud">Duelling grade</span>
<div class="val">Heavy</div>
<span class="sub">Reinforced polycarbonate</span>
</div>
</div>
</section>
<!-- ============================================================
CHARACTER GRID — 3×2 movie-poster tiles
============================================================ -->
<section class="characters" aria-label="Shop by character">
<div class="char-header">
<div>
<span class="eyebrow">Chapter 03 · The roll call</span>
<h2 class="h2">Every character in<br/>the galaxy has a hilt.</h2>
</div>
<p class="side lead">Around forty character replicas, each spec’d for the collector, the duelist, or the cosplayer — sometimes all three.</p>
</div>
<div class="char-grid">
<a href="#" class="char-tile">
<div class="poster poster-vader" role="img" aria-label="Movie-poster scale portrait of a Darth Vader replica saber against deep-space void, ember glow spilling from the emitter and pommel vents, key rim-light hitting the ribbed chrome grip from the right, three-quarter angle, cinematic dramatic side-lighting"></div>
<div class="poster-overlay" aria-hidden="true"></div>
<div class="label">
<span class="hud">Sith Lord · Xenopixel V3</span>
<span class="name">Darth Vader EP6</span>
</div>
</a>
<a href="#" class="char-tile">
<div class="poster poster-ahsoka" role="img" aria-label="Movie-poster scale portrait of the Clone Wars Ahsoka Tano dual-saber pair, one blade a cool white-blue, chrome hilts held in a defensive cross, dark grey armour-plate backdrop, side-lighting from upper left, cinematic tone"></div>
<div class="poster-overlay" aria-hidden="true"></div>
<div class="label">
<span class="hud">Jedi Padawan · Duelling grade heavy</span>
<span class="name">Ahsoka Tano</span>
</div>
</a>
<a href="#" class="char-tile">
<div class="poster poster-starkiller" role="img" aria-label="Movie-poster scale portrait of the Starkiller SE saber, dark tribal-etched hilt centre-composed against a hot ember void, blade extended vertically with radiant orange glow, dramatic rim-light from below"></div>
<div class="poster-overlay" aria-hidden="true"></div>
<div class="label">
<span class="hud">Force Unleashed · 3 Saber Cores</span>
<span class="name">Starkiller SE</span>
</div>
</a>
<a href="#" class="char-tile">
<div class="poster poster-mace" role="img" aria-label="Movie-poster scale portrait of a Mace Windu SE saber with a violet-tinted key light on the chrome hilt against dark hull-plate backdrop, blade off-screen implied by rim glow, cinematic profile"></div>
<div class="poster-overlay" aria-hidden="true"></div>
<div class="label">
<span class="hud">Jedi Master · Proffie 2.2</span>
<span class="name">Mace Windu SE</span>
</div>
</a>
<a href="#" class="char-tile">
<div class="poster poster-obiwan" role="img" aria-label="Movie-poster scale portrait of an Obi-Wan Kenobi saber with cool blue-tinted rim-light on the ribbed chrome grip, deep-space void backdrop with distant nebula wash, three-quarter angle"></div>
<div class="poster-overlay" aria-hidden="true"></div>
<div class="label">
<span class="hud">Jedi Council · Xenopixel V3</span>
<span class="name">Obi-Wan Kenobi</span>
</div>
</a>
<a href="#" class="char-tile">
<div class="poster poster-carbon" role="img" aria-label="Movie-poster scale portrait of the ARTSABERS Exclusive Carbon Strike saber, black-anodised hilt with sharp faceted geometry, ember light spilling from panel seams, hard shadow across the lower half, hero cinematic composition"></div>
<div class="poster-overlay" aria-hidden="true"></div>
<div class="label">
<span class="hud">ARTSABERS Exclusive · V3</span>
<span class="name">Carbon Strike</span>
</div>
</a>
</div>
</section>
<!-- ============================================================
FLAGSHIP SPECIMENS — 3 across, one spot-lit with back-lit rim
============================================================ -->
<section class="specimens" aria-label="Flagship specimens">
<div class="spec-header">
<span class="eyebrow">Chapter 04 · The specimens</span>
<h2 class="h2">Museum treatment.<br/>Fewer, larger, framed.</h2>
<p>Three flagships from the current run. Each one framed on a hull plate the way the factory sees it before it ships — not the way most shops merchandise it.</p>
</div>
<div class="spec-grid">
<article class="spec-card">
<div class="plate" role="img" aria-label="Museum-specimen product shot of the Mace Windu SE saber hilt floating at a 12-degree tilt against a graphite hull-plate backdrop, single dramatic key light from upper left, soft chrome rim visible along the top edge, deep shadow beneath, no props, no motion">
<svg viewBox="0 0 500 300" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<g transform="rotate(-8 250 150)">
<rect x="70" y="130" width="360" height="40" rx="6" fill="#3A3A42"/>
<rect x="90" y="138" width="320" height="4" fill="#26262E"/>
<rect x="90" y="146" width="320" height="4" fill="#26262E"/>
<rect x="90" y="154" width="320" height="4" fill="#26262E"/>
<rect x="90" y="162" width="320" height="4" fill="#26262E"/>
<rect x="230" y="126" width="80" height="48" rx="3" fill="#26262E" stroke="#3A3A42" stroke-width="1"/>
<circle cx="270" cy="150" r="5" fill="#F26B36"/>
<rect x="60" y="132" width="12" height="36" rx="2" fill="#26262E"/>
<rect x="428" y="128" width="14" height="44" rx="2" fill="#3A3A42"/>
</g>
<ellipse cx="250" cy="245" rx="180" ry="8" fill="#000" opacity="0.55"/>
</svg>
</div>
<div class="body">
<div class="badge-row">
<span class="hud">Proffie 2.2</span>
<span class="hud">Heavy duel</span>
</div>
<h3>Mace Windu SE</h3>
<div class="footline">
<span class="price">$549</span>
<span class="hud grade">Jedi Master · Council</span>
</div>
</div>
</article>
<article class="spec-card spotlit">
<div class="plate" role="img" aria-label="Spot-lit museum-specimen product shot of the Carbon Strike ARTSABERS Exclusive saber hilt centred at 45-degree tilt against a slightly warmer graphite hull-plate backdrop with a soft ember rim-light halo around the hilt from behind, hot ember light spilling from a panel seam mid-hilt, no other objects">
<svg viewBox="0 0 500 300" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<g transform="rotate(20 250 150)">
<rect x="80" y="130" width="340" height="40" rx="6" fill="#2A2A32"/>
<polygon points="80,130 160,130 150,150 90,150" fill="#3A3A42"/>
<polygon points="80,170 90,150 150,150 160,170" fill="#14141A"/>
<rect x="200" y="132" width="120" height="36" fill="#26262E"/>
<rect x="200" y="148" width="120" height="2" fill="#F26B36"/>
<rect x="200" y="147" width="120" height="1" fill="#FF8850"/>
<rect x="320" y="130" width="80" height="40" rx="3" fill="#3A3A42"/>
<rect x="410" y="128" width="16" height="44" rx="2" fill="#26262E"/>
<rect x="410" y="140" width="10" height="20" fill="#F26B36"/>
</g>
<ellipse cx="250" cy="250" rx="180" ry="8" fill="#000" opacity="0.6"/>
</svg>
</div>
<div class="body">
<div class="badge-row">
<span class="hud">Xenopixel V3</span>
<span class="hud">ARTSABERS Exclusive</span>
</div>
<h3>Carbon Strike</h3>
<div class="footline">
<span class="price">$639</span>
<span class="hud grade">Original design</span>
</div>
</div>
</article>
<article class="spec-card">
<div class="plate" role="img" aria-label="Museum-specimen product shot of the Ahsoka Tano Clone Wars saber pair, both hilts crossed at their centres, chrome pommels catching a cool blue key-light from the right, graphite hull-plate backdrop, deep dramatic shadow beneath the pair, no props">
<svg viewBox="0 0 500 300" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<g>
<g transform="rotate(-14 250 150)">
<rect x="90" y="130" width="320" height="34" rx="5" fill="#3A3A42"/>
<rect x="105" y="140" width="290" height="3" fill="#26262E"/>
<rect x="105" y="150" width="290" height="3" fill="#26262E"/>
<rect x="230" y="126" width="60" height="42" rx="3" fill="#26262E"/>
<circle cx="260" cy="147" r="4" fill="#7A94D9"/>
<rect x="80" y="132" width="14" height="30" rx="2" fill="#26262E"/>
</g>
<g transform="rotate(14 250 170)">
<rect x="100" y="150" width="300" height="30" rx="5" fill="#2A2A32" opacity="0.85"/>
<rect x="115" y="158" width="270" height="3" fill="#26262E"/>
<rect x="115" y="168" width="270" height="3" fill="#26262E"/>
<rect x="240" y="146" width="56" height="38" rx="3" fill="#26262E"/>
<circle cx="268" cy="165" r="4" fill="#F26B36" opacity="0.85"/>
</g>
</g>
<ellipse cx="250" cy="255" rx="200" ry="8" fill="#000" opacity="0.55"/>
</svg>
</div>
<div class="body">
<div class="badge-row">
<span class="hud">Proffie 2.2 · pair</span>
<span class="hud">Heavy duel</span>
</div>
<h3>Ahsoka Tano</h3>
<div class="footline">
<span class="price">$725</span>
<span class="hud grade">Duelling pair</span>
</div>
</div>
</article>
</div>
</section>
<!-- ============================================================
MISSION CONTROL — split-panel, HUD telemetry + seam glow
============================================================ -->
<section class="mission" aria-label="Mission control">
<div class="mission-inner">
<div class="mission-left">
<span class="eyebrow">Chapter 05 · Mission control</span>
<h2 class="h2">Real support.<br/>Not a ticket queue.</h2>
<p class="lead">Order lands, a named human takes it. If something goes wrong — and sometimes it does — that same human sees it through. Twenty-four hours to first response, every time. No script.</p>
<div class="telemetry-panel">
<div class="tel-cell">
<span class="hud">Response window</span>
<div class="val">24hrs</div>
<span class="unit">First reply, human, always</span>
</div>
<div class="tel-cell">
<span class="hud">Point of contact</span>
<div class="val">01</div>
<span class="unit">Named specialist, order to arrival</span>
</div>
<div class="tel-cell">
<span class="hud">Guarantee</span>
<div class="val">30 days</div>
<span class="unit">Money-back, no questions</span>
</div>
<div class="tel-cell">
<span class="hud">Origin to door</span>
<div class="val">7–10</div>
<span class="unit">Days, factory-direct global</span>
</div>
</div>
</div>
<div class="mission-right" role="img" aria-label="Cinematic split-scene image of a factory-floor workstation in the left third with a saber hilt on a dark workbench under a single warm work-light, transitioning to deep-space void in the right two thirds, a courier envelope insignia embossed on the void suggesting transit; dark grey armour-plate palette throughout">
<div class="stamp">
<span class="hud">Order ID</span>
<div class="val">01</div>
<span class="hud unit">Specialist · K. Berzins</span>
</div>
<div class="scene">
<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<defs>
<linearGradient id="msnG" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#3A3A42"/>
<stop offset="100%" stop-color="#14141A"/>
</linearGradient>
</defs>
<rect x="60" y="120" width="280" height="160" rx="4" fill="url(#msnG)" stroke="#3A3A42"/>
<rect x="60" y="120" width="280" height="1.5" fill="#F26B36" opacity="0.7"/>
<polygon points="60,120 200,220 340,120" fill="none" stroke="#3A3A42" stroke-width="1"/>
<rect x="76" y="140" width="80" height="6" fill="#7A94D9" opacity="0.7"/>
<rect x="76" y="150" width="60" height="4" fill="#7A94D9" opacity="0.5"/>
<rect x="240" y="256" width="80" height="6" fill="#7A94D9" opacity="0.5"/>
<rect x="240" y="266" width="60" height="4" fill="#7A94D9" opacity="0.4"/>
</svg>
</div>
<div class="base-line">
<span class="hud">Transmission · secure</span>
<span class="named">One human. One thread.</span>
</div>
</div>
</div>
</section>
<!-- ============================================================
FOUNDER — full-bleed cinematic pull-quote spread
============================================================ -->
<section class="founder" aria-label="Founder statement">
<div class="founder-frame">
<div class="founder-scene" aria-hidden="true"></div>
<div class="founder-content">
<div class="founder-portrait" role="img" aria-label="Cinematic portrait of the ARTSABERS founder in a workshop environment, three-quarter profile, ember light spilling from a saber emitter held in the foreground casting warm rim-light across one side of the face, deep shadow across the other; workshop hull-plate walls behind, no branding visible, editorial magazine composition">
<div class="caption">
<span class="who">Kristaps · Founder</span>
<span class="hud">Riga, Latvia · Since 2020</span>
</div>
</div>
<div class="founder-quote">
<span class="eyebrow">Chapter 06 · Origin</span>
<h2 class="pull">“I lived the fantasy first. <span class="ember">Then</span> I built the shop I couldn’t find.”</h2>
<div class="attribution">
<span class="rule" aria-hidden="true"></span>
<div>
<div class="hud">Fan-to-fan since 2020</div>
<div style="color:var(--neutral); font-size:var(--size-small); margin-top:4px;">Founded in Riga · joined the Nerdworks group 2024</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ============================================================
REVIEWS — 3 hull-plate testimonial cards with HUD meta
============================================================ -->
<section class="reviews" aria-label="Field reports">
<div class="rv-header">
<div>
<span class="eyebrow">Chapter 07 · Field reports</span>
<h2 class="h2">What arrives, and<br/>what happens after.</h2>
</div>
<div class="aggregate">
<span class="hud">Aggregate rating</span>
<div class="score">4.8</div>
<div class="stars" aria-hidden="true">★★★★★</div>
<span class="hud">862 verified transmissions</span>
</div>
</div>
<div class="rv-grid">
<article class="rv-card">
<div class="stars" aria-hidden="true">★★★★★</div>
<p class="quote">“Waited nine days, opened the box, immediately understood why. The hilt weight is the tell — this is machined, not moulded. Duelled it the same night.”</p>
<div class="who">
<span class="name">Marcus H. · Colorado</span>
<span class="hud">Ahsoka Tano · Proffie 2.2 · Heavy duel</span>
</div>
</article>
<article class="rv-card">
<div class="stars" aria-hidden="true">★★★★★</div>
<p class="quote">“Firmware update through the app worked first try. Emailed about a font I wanted, had a reply the next morning. That’s the whole reason I came back for a second hilt.”</p>
<div class="who">
<span class="name">Jenna R. · New South Wales</span>
<span class="hud">Starkiller SE · Xenopixel V3</span>
</div>
</article>
<article class="rv-card">
<div class="stars" aria-hidden="true">★★★★★</div>
<p class="quote">“Third saber from ARTSABERS in two years. Blade tore on the last one after a rough duel — new one shipped in a week, no argument. That’s the difference.”</p>
<div class="who">
<span class="name">Devon O. · Ontario</span>
<span class="hud">Carbon Strike · ARTSABERS Exclusive</span>
</div>
</article>
</div>
</section>
<!-- ============================================================
TRANSMISSION — dramatic email capture, seam glow at bottom
============================================================ -->
<section class="transmission" aria-label="Enlistment">
<div class="transmission-inner">
<div class="eyebrow">
<span class="rule" aria-hidden="true"></span>
<span class="hud">Chapter 08 · Open transmission</span>
<span class="rule" aria-hidden="true"></span>
</div>
<h2 class="h1">Get on the field-report channel.</h2>
<p>New Cores, new characters, ARTSABERS Exclusive drops before the catalogue sees them. Roughly one transmission a fortnight. Never manufactured urgency.</p>
<form class="transmission-form" aria-label="Email signup" onsubmit="event.preventDefault();">
<input type="email" placeholder="your@transmission.address" aria-label="Email address" />
<button type="submit" class="btn-primary">Enlist <span class="arrow">→</span></button>
</form>
</div>
</section>
<!-- ============================================================
FOOTER — void deep-space bookend
============================================================ -->
<footer class="footer">
<div class="footer-inner">
<div class="footer-top">
<div class="footer-brand">
<h4>ARTSABERS</h4>
<p>The replica saber catalogue, built for fans. Hundreds of hilts, every character, every Saber Core — from factory floor to your door.</p>
</div>
<div class="footer-col">
<h5>Catalogue</h5>
<ul>
<li><a href="#">By Saber Core</a></li>
<li><a href="#">By Character</a></li>
<li><a href="#">Duelling grade</a></li>
<li><a href="#">ARTSABERS Exclusive</a></li>
<li><a href="#">Under $100</a></li>
</ul>
</div>
<div class="footer-col">
<h5>Support</h5>
<ul>
<li><a href="#">Shipping & ETA</a></li>
<li><a href="#">30-day guarantee</a></li>
<li><a href="#">XenoConfigurator</a></li>
<li><a href="#">Contact a specialist</a></li>
</ul>
</div>
<div class="footer-col">
<h5>Coordinates</h5>
<ul>
<li><a href="#">US · CA · AU · NZ</a></li>
<li><a href="#">UK & EU → Saber 66</a></li>
<li><a href="#">Journal</a></li>
<li><a href="#">Field reports</a></li>
</ul>
</div>
</div>
<div class="footer-base">
<span class="hud">Transmission origin · Nerdworks · 2024–present</span>
<div class="set">
<a href="#">Privacy</a>
<a href="#">Terms</a>
<a href="#">Cookies</a>
</div>
</div>
</div>
</footer>
</body>
</html>