<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ARTSABERS — Transmission 001 · Direction Lock</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: #F26B36;
--secondary: #FFB59B;
--tertiary: #7A94D9; /* TEXT-ONLY */
/* Surface semantics — tonal ladder */
--anchor: #131313;
--container: #201F1F;
--container-low: #1C1B1B;
--container-high: #262424;
--container-highest: #2A2828;
--bright: #262424;
/* Text roles */
--text: #E5E2E1;
--neutral: #DAC1BB;
--outline: #A28C86;
--outline-variant: #54433E;
/* 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);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
/* ============================================================
Atmospheric primitives — reusable
============================================================ */
/* Film-grain noise sheet (overlaid at low opacity on cinematic scenes) */
.grain-overlay {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.35;
mix-blend-mode: overlay;
z-index: 3;
}
/* Ember bloom — a lit source spilling into the surrounding dark */
.ember-source {
position: absolute;
pointer-events: none;
z-index: 1;
background: radial-gradient(
circle at center,
rgba(255, 181, 155, 0.55) 0%,
rgba(242, 107, 54, 0.35) 12%,
rgba(242, 107, 54, 0.18) 28%,
rgba(192, 74, 32, 0.10) 45%,
rgba(19, 19, 19, 0) 70%
);
filter: blur(28px);
mix-blend-mode: screen;
}
/* Deep-atmosphere dust — layered radials suggesting particulate space */
.dust-field {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background:
radial-gradient(ellipse 60% 80% at 15% 30%, rgba(122, 148, 217, 0.06), transparent 55%),
radial-gradient(ellipse 50% 60% at 85% 70%, rgba(242, 107, 54, 0.09), transparent 60%),
radial-gradient(ellipse 90% 55% at 50% 100%, rgba(19, 19, 19, 0.75), transparent 70%);
}
/* Star / dust point-field (used behind hero and manifesto) */
.star-field {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background-image:
radial-gradient(1px 1px at 12% 18%, rgba(229, 226, 225, 0.7), transparent),
radial-gradient(1px 1px at 22% 62%, rgba(229, 226, 225, 0.4), transparent),
radial-gradient(1px 1px at 34% 24%, rgba(229, 226, 225, 0.6), transparent),
radial-gradient(1px 1px at 45% 78%, rgba(229, 226, 225, 0.3), transparent),
radial-gradient(1px 1px at 58% 40%, rgba(229, 226, 225, 0.55), transparent),
radial-gradient(1px 1px at 68% 12%, rgba(229, 226, 225, 0.45), transparent),
radial-gradient(1px 1px at 74% 84%, rgba(229, 226, 225, 0.35), transparent),
radial-gradient(1.4px 1.4px at 82% 30%, rgba(255, 181, 155, 0.5), transparent),
radial-gradient(1px 1px at 90% 66%, rgba(229, 226, 225, 0.5), transparent),
radial-gradient(1px 1px at 6% 88%, rgba(122, 148, 217, 0.35), transparent);
background-size: 100% 100%;
opacity: 0.9;
}
/* HUD hairline — hologram vector line, thin dashed with ember terminals */
.hud-line {
position: relative;
height: 1px;
background: repeating-linear-gradient(
to right,
var(--outline-variant) 0 6px,
transparent 6px 12px
);
}
/* ============================================================
Data type & eyebrow
============================================================ */
.data {
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--tertiary);
}
.eyebrow {
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--primary);
}
.chapter-tag {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 600;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--tertiary);
}
.chapter-tag::before {
content: '';
display: inline-block;
width: 32px;
height: 1px;
background: var(--tertiary);
opacity: 0.6;
}
.chapter-tag--ember { color: var(--primary); }
.chapter-tag--ember::before { background: var(--primary); opacity: 0.7; }
h1, h2, h3, h4 {
font-family: var(--font-head);
font-weight: 700;
letter-spacing: var(--tracking-tight);
color: var(--text);
line-height: 1.02;
}
/* ============================================================
Buttons
============================================================ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px 28px;
border-radius: 2px;
font-family: var(--font-body);
font-weight: 600;
font-size: var(--fs-small);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
transition: box-shadow 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.btn--primary {
background: var(--primary);
color: var(--anchor);
box-shadow:
0 0 40px -4px rgba(242, 107, 54, 0.55),
0 0 12px -2px rgba(255, 181, 155, 0.7),
inset 0 1px 0 rgba(255, 181, 155, 0.7);
}
.btn--primary:hover {
box-shadow:
0 0 60px -4px rgba(242, 107, 54, 0.8),
0 0 18px -2px rgba(255, 181, 155, 0.9),
inset 0 1px 0 rgba(255, 181, 155, 0.9);
transform: translateY(-1px);
}
.btn--ghost {
background: transparent;
color: var(--primary);
border: 1px solid var(--primary);
}
.btn--ghost:hover {
box-shadow:
0 0 24px -4px rgba(242, 107, 54, 0.5),
inset 0 0 20px -4px rgba(242, 107, 54, 0.3);
}
.btn--large { padding: 20px 40px; font-size: var(--fs-body); }
.btn__arrow { font-family: var(--font-head); font-weight: 400; letter-spacing: 0; }
/* ============================================================
Transmission ribbon (top HUD strip)
============================================================ */
.transmission {
background: var(--container-low);
border-bottom: 1px solid var(--outline-variant);
padding: 10px 0;
position: relative;
z-index: 20;
}
.transmission__inner {
max-width: 1440px;
margin: 0 auto;
padding: 0 var(--space-lg);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-lg);
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--tertiary);
}
.transmission__left,
.transmission__right { display: flex; gap: 20px; align-items: center; }
.transmission__pip {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--primary);
box-shadow: 0 0 8px 1px rgba(242, 107, 54, 0.9);
margin-right: 8px;
animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; box-shadow: 0 0 8px 1px rgba(242, 107, 54, 0.9); }
50% { opacity: 0.4; box-shadow: 0 0 4px 1px rgba(242, 107, 54, 0.4); }
}
.transmission__sep { color: var(--outline-variant); }
/* ============================================================
Nav
============================================================ */
.nav {
background: var(--anchor);
position: sticky;
top: 0;
z-index: 50;
border-bottom: 1px solid rgba(84, 67, 62, 0.4);
}
.nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 22px var(--space-lg);
max-width: 1440px;
margin: 0 auto;
gap: var(--space-lg);
}
.nav__logo {
font-family: var(--font-head);
font-weight: 700;
font-size: 20px;
letter-spacing: 0.24em;
color: var(--text);
display: inline-flex;
align-items: center;
gap: 12px;
}
.nav__logo::before {
content: '';
display: inline-block;
width: 10px;
height: 10px;
background: var(--primary);
box-shadow: 0 0 12px 2px rgba(242, 107, 54, 0.8);
transform: rotate(45deg);
}
.nav__menu {
display: flex;
gap: 36px;
list-style: none;
}
.nav__link {
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--text);
padding: 8px 0;
transition: color 0.2s;
}
.nav__link:hover { color: var(--primary); }
.nav__tools {
display: flex;
gap: 20px;
align-items: center;
}
.nav__icon {
width: 20px;
height: 20px;
stroke: var(--text);
fill: none;
stroke-width: 1.4;
stroke-linecap: round;
stroke-linejoin: round;
transition: stroke 0.2s;
}
.nav__cart-count {
position: absolute;
top: -6px;
right: -8px;
background: var(--primary);
color: var(--anchor);
font-size: 10px;
font-weight: 700;
padding: 2px 6px;
border-radius: 999px;
min-width: 18px;
text-align: center;
box-shadow: 0 0 6px 0 rgba(242, 107, 54, 0.7);
}
/* ============================================================
CHAPTER 01 — OPENING (Hero)
============================================================ */
.opening {
position: relative;
min-height: 100vh;
background: var(--anchor);
overflow: hidden;
isolation: isolate;
}
/* Layered atmospheric depth in the hero backdrop */
.opening__backdrop {
position: absolute;
inset: 0;
z-index: 0;
background:
/* deep central pool of light behind the composition */
radial-gradient(ellipse 55% 70% at 70% 42%, rgba(242, 107, 54, 0.18), transparent 60%),
/* off-centre secondary bloom */
radial-gradient(ellipse 30% 40% at 88% 62%, rgba(255, 181, 155, 0.14), transparent 70%),
/* cool tertiary hint on the opposite side */
radial-gradient(ellipse 40% 55% at 8% 20%, rgba(122, 148, 217, 0.08), transparent 70%),
/* fall to anchor at edges */
radial-gradient(ellipse 120% 100% at 50% 100%, rgba(10, 10, 10, 0.7), transparent 60%);
}
/* Letterbox bars — anamorphic composition device */
.letterbox {
position: absolute;
left: 0;
right: 0;
height: 6vh;
background: #050505;
z-index: 15;
pointer-events: none;
}
.letterbox--top { top: 0; }
.letterbox--bottom { bottom: 0; }
.opening__inner {
position: relative;
z-index: 10;
max-width: 1440px;
margin: 0 auto;
padding: 12vh var(--space-lg) 10vh;
min-height: 100vh;
display: grid;
grid-template-columns: 1fr;
gap: var(--space-xl);
}
.opening__frame-marks {
position: absolute;
inset: 10vh var(--space-lg);
pointer-events: none;
z-index: 12;
}
.frame-mark {
position: absolute;
width: 18px;
height: 18px;
border-color: rgba(226, 226, 225, 0.35);
border-style: solid;
}
.frame-mark--tl { top: 0; left: 0; border-width: 1px 0 0 1px; }
.frame-mark--tr { top: 0; right: 0; border-width: 1px 1px 0 0; }
.frame-mark--bl { bottom: 0; left: 0; border-width: 0 0 1px 1px; }
.frame-mark--br { bottom: 0; right: 0; border-width: 0 1px 1px 0; }
.opening__top-bar {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--space-lg);
flex-wrap: wrap;
}
.opening__coord {
display: flex;
flex-direction: column;
gap: 4px;
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--tertiary);
}
.opening__coord span:first-child { color: var(--outline); }
.opening__stack {
max-width: 1100px;
}
.opening__display {
font-family: var(--font-head);
font-weight: 700;
font-size: clamp(56px, 11vw, 168px);
line-height: 0.88;
letter-spacing: -0.03em;
color: var(--text);
text-transform: uppercase;
}
.opening__display > span { display: block; }
.opening__display .accent {
color: var(--primary);
text-shadow:
0 0 24px rgba(242, 107, 54, 0.6),
0 0 60px rgba(242, 107, 54, 0.3);
}
.opening__display .indent { padding-left: 8vw; }
.opening__display .indent-big { padding-left: 16vw; }
.opening__sub {
margin-top: var(--space-lg);
display: grid;
grid-template-columns: 1fr auto;
gap: var(--space-xl);
align-items: flex-end;
max-width: 1240px;
}
.opening__lede {
font-family: var(--font-body);
font-size: var(--fs-lead);
line-height: 1.55;
color: var(--neutral);
max-width: 520px;
padding-top: 20px;
border-top: 1px solid var(--outline-variant);
}
.opening__actions {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.opening__telemetry {
margin-top: var(--space-xl);
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid var(--outline-variant);
}
.telemetry-cell {
padding: 20px 24px 4px 0;
display: flex;
flex-direction: column;
gap: 6px;
position: relative;
}
.telemetry-cell + .telemetry-cell { border-left: 1px solid var(--outline-variant); padding-left: 24px; }
.telemetry-cell__label {
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--tertiary);
}
.telemetry-cell__value {
font-family: var(--font-head);
font-size: 36px;
font-weight: 700;
color: var(--text);
line-height: 1;
letter-spacing: -0.02em;
}
.telemetry-cell__value .unit {
font-size: 14px;
color: var(--outline);
letter-spacing: 0.1em;
margin-left: 6px;
font-weight: 500;
}
/* ============================================================
HUD Telemetry ribbon — interstitial
============================================================ */
.telemetry-ribbon {
background: #0B0B0B;
padding: 20px 0;
border-top: 1px solid var(--outline-variant);
border-bottom: 1px solid var(--outline-variant);
overflow: hidden;
position: relative;
}
.telemetry-ribbon__inner {
max-width: 1440px;
margin: 0 auto;
padding: 0 var(--space-lg);
display: flex;
align-items: center;
gap: 40px;
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--tertiary);
white-space: nowrap;
overflow-x: auto;
scrollbar-width: none;
}
.telemetry-ribbon__inner::-webkit-scrollbar { display: none; }
.telemetry-ribbon__pip {
color: var(--primary);
margin-right: 6px;
}
.telemetry-ribbon__sep { color: var(--outline-variant); }
/* ============================================================
CHAPTER 02 — THE DUALITY (Jedi vs Sith diptych)
============================================================ */
.duality {
position: relative;
background: var(--anchor);
padding: var(--space-2xl) 0 0;
overflow: hidden;
}
.duality__intro {
max-width: 1440px;
margin: 0 auto var(--space-xl);
padding: 0 var(--space-lg);
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2xl);
align-items: end;
}
.duality__chapter { margin-bottom: 20px; }
.duality__head {
font-family: var(--font-head);
font-weight: 700;
font-size: clamp(44px, 6vw, 96px);
line-height: 0.95;
letter-spacing: -0.02em;
text-transform: uppercase;
}
.duality__head .light { color: var(--text); }
.duality__head .dark { color: var(--primary); text-shadow: 0 0 30px rgba(242, 107, 54, 0.4); }
.duality__aside {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.65;
color: var(--neutral);
padding-bottom: 8px;
padding-left: var(--space-xl);
border-left: 1px solid var(--outline-variant);
max-width: 480px;
}
.duality__diptych {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px;
background: #050505;
position: relative;
}
/* the seam between the two panels glows */
.duality__diptych::before {
content: '';
position: absolute;
top: 10%;
bottom: 10%;
left: 50%;
width: 2px;
transform: translateX(-1px);
background: linear-gradient(
to bottom,
transparent 0%,
rgba(242, 107, 54, 0.9) 20%,
rgba(255, 181, 155, 1) 50%,
rgba(242, 107, 54, 0.9) 80%,
transparent 100%
);
filter: blur(0.5px);
box-shadow:
0 0 30px 4px rgba(242, 107, 54, 0.5),
0 0 60px 8px rgba(242, 107, 54, 0.2);
z-index: 4;
pointer-events: none;
}
.faction {
position: relative;
min-height: 720px;
overflow: hidden;
isolation: isolate;
display: flex;
align-items: flex-end;
padding: var(--space-2xl) var(--space-xl);
}
.faction__scene {
position: absolute;
inset: 0;
z-index: 0;
}
.faction--jedi .faction__scene {
background:
radial-gradient(ellipse 70% 100% at 30% 60%, rgba(122, 148, 217, 0.12), transparent 60%),
radial-gradient(ellipse 40% 70% at 65% 40%, rgba(255, 181, 155, 0.10), transparent 70%),
linear-gradient(160deg, #1A1919 0%, #131313 55%, #0A0A0A 100%);
}
.faction--sith .faction__scene {
background:
radial-gradient(ellipse 80% 100% at 65% 55%, rgba(242, 107, 54, 0.28), transparent 55%),
radial-gradient(ellipse 30% 50% at 55% 45%, rgba(255, 181, 155, 0.20), transparent 70%),
linear-gradient(200deg, #1E1615 0%, #131010 55%, #0A0808 100%);
}
/* Faux figure silhouettes rendered as subtle gradient shapes */
.faction__figure {
position: absolute;
z-index: 1;
filter: blur(1px);
}
.faction--jedi .faction__figure {
top: 15%;
bottom: 8%;
left: 30%;
width: 4px;
background: linear-gradient(
to bottom,
transparent 0%,
rgba(255, 181, 155, 0.55) 20%,
rgba(242, 107, 54, 1) 50%,
rgba(255, 181, 155, 0.55) 80%,
transparent 100%
);
box-shadow:
0 0 40px 12px rgba(242, 107, 54, 0.4),
0 0 100px 30px rgba(242, 107, 54, 0.15);
transform: rotate(-14deg);
transform-origin: center;
}
.faction--sith .faction__figure {
top: 20%;
bottom: 5%;
right: 32%;
width: 5px;
background: linear-gradient(
to bottom,
transparent 0%,
rgba(255, 181, 155, 0.6) 15%,
rgba(242, 107, 54, 1) 50%,
rgba(255, 181, 155, 0.6) 85%,
transparent 100%
);
box-shadow:
0 0 60px 16px rgba(242, 107, 54, 0.5),
0 0 140px 40px rgba(242, 107, 54, 0.2);
transform: rotate(20deg);
transform-origin: center;
}
.faction__figure-shadow {
position: absolute;
z-index: 1;
background: radial-gradient(ellipse at center, rgba(0,0,0,0.65) 0%, transparent 70%);
filter: blur(4px);
}
.faction--jedi .faction__figure-shadow {
left: 22%;
right: 60%;
top: 20%;
bottom: 10%;
transform: skewX(-8deg);
}
.faction--sith .faction__figure-shadow {
right: 22%;
left: 55%;
top: 22%;
bottom: 8%;
transform: skewX(8deg);
}
.faction__dossier {
position: relative;
z-index: 5;
max-width: 380px;
}
.faction__dossier-tag {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--tertiary);
padding: 6px 10px;
border: 1px solid var(--outline-variant);
background: rgba(19, 19, 19, 0.7);
backdrop-filter: blur(6px);
margin-bottom: 20px;
}
.faction__dossier-tag::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--tertiary);
display: inline-block;
}
.faction__name {
font-family: var(--font-head);
font-size: clamp(48px, 6vw, 88px);
font-weight: 700;
line-height: 0.9;
letter-spacing: -0.02em;
color: var(--text);
text-transform: uppercase;
margin-bottom: 16px;
}
.faction--sith .faction__name { color: var(--secondary); text-shadow: 0 0 24px rgba(255, 181, 155, 0.4); }
.faction__brief {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.6;
color: var(--neutral);
margin-bottom: 24px;
}
.faction__stat-row {
display: flex;
gap: 24px;
padding-top: 16px;
border-top: 1px solid var(--outline-variant);
margin-bottom: 20px;
}
.faction__stat {
display: flex;
flex-direction: column;
gap: 2px;
}
.faction__stat-label {
font-family: var(--font-body);
font-size: var(--fs-micro);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--outline);
}
.faction__stat-value {
font-family: var(--font-head);
font-size: 22px;
font-weight: 700;
color: var(--text);
line-height: 1;
}
.faction__link {
font-family: var(--font-body);
font-size: var(--fs-small);
font-weight: 600;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--primary);
}
.faction__link:hover { text-shadow: 0 0 12px rgba(242, 107, 54, 0.6); }
/* ============================================================
CHAPTER 03 — ANATOMY (annotated blueprint of one saber)
============================================================ */
.anatomy {
position: relative;
background: var(--container-low);
padding: var(--space-2xl) 0;
overflow: hidden;
}
.anatomy__dust {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 80% 60% at 50% 50%, rgba(242, 107, 54, 0.10), transparent 65%),
radial-gradient(ellipse 40% 40% at 20% 80%, rgba(122, 148, 217, 0.06), transparent 70%);
z-index: 0;
pointer-events: none;
}
.anatomy__inner {
position: relative;
z-index: 2;
max-width: 1440px;
margin: 0 auto;
padding: 0 var(--space-lg);
}
.anatomy__head {
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--space-2xl);
align-items: end;
margin-bottom: var(--space-2xl);
}
.anatomy__title {
font-family: var(--font-head);
font-weight: 700;
font-size: clamp(44px, 6vw, 96px);
line-height: 0.9;
letter-spacing: -0.02em;
text-transform: uppercase;
color: var(--text);
}
.anatomy__title .accent { color: var(--primary); }
.anatomy__meta {
display: flex;
flex-direction: column;
gap: 12px;
padding-left: var(--space-xl);
border-left: 1px solid var(--outline-variant);
padding-top: 8px;
padding-bottom: 8px;
}
.anatomy__meta-row {
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;
}
.anatomy__meta-row span:first-child { color: var(--outline); }
.anatomy__meta-row span:last-child { color: var(--tertiary); font-weight: 600; }
/* The blueprint — a horizontal saber composition with callouts */
.blueprint {
position: relative;
padding: var(--space-2xl) 0;
min-height: 480px;
background: linear-gradient(
180deg,
transparent 0%,
rgba(10, 10, 10, 0.4) 100%
);
border-top: 1px solid var(--outline-variant);
border-bottom: 1px solid var(--outline-variant);
}
/* Saber shape — hilt + blade, purely rendered in gradients + glow */
.blueprint__saber {
position: relative;
height: 60px;
margin: 120px auto 0;
max-width: 1200px;
display: flex;
align-items: center;
}
.blueprint__hilt {
position: relative;
flex: 0 0 32%;
height: 42px;
background: linear-gradient(
180deg,
#3A3A3A 0%,
#6A6A6A 20%,
#4A4A4A 50%,
#2A2A2A 80%,
#1A1A1A 100%
);
border-radius: 2px;
box-shadow:
0 4px 20px rgba(0, 0, 0, 0.9),
inset 0 1px 0 rgba(255, 181, 155, 0.15);
}
.blueprint__hilt::before {
content: '';
position: absolute;
top: 25%;
bottom: 25%;
right: -6px;
width: 12px;
background: linear-gradient(180deg, #5A5A5A, #2A2A2A);
border-radius: 2px;
box-shadow: 0 0 8px rgba(242, 107, 54, 0.5);
}
.blueprint__hilt::after {
content: '';
position: absolute;
top: 30%;
bottom: 30%;
left: 8%;
width: 40%;
background: repeating-linear-gradient(
90deg,
rgba(0,0,0,0.5) 0 4px,
transparent 4px 12px
);
opacity: 0.7;
}
.blueprint__emitter {
flex: 0 0 8px;
height: 100%;
background: var(--primary);
box-shadow:
0 0 20px 4px rgba(242, 107, 54, 0.9),
0 0 60px 8px rgba(242, 107, 54, 0.4);
}
.blueprint__blade {
flex: 1;
height: 32px;
background: linear-gradient(
90deg,
rgba(255, 181, 155, 1) 0%,
rgba(242, 107, 54, 0.95) 40%,
rgba(242, 107, 54, 0.85) 80%,
rgba(255, 181, 155, 0.4) 100%
);
border-radius: 2px;
box-shadow:
0 0 40px 6px rgba(242, 107, 54, 0.6),
0 0 100px 16px rgba(242, 107, 54, 0.25);
position: relative;
}
.blueprint__blade::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, transparent 50%, transparent 100%);
border-radius: 2px;
}
/* Callout hologram lines */
.blueprint__callouts {
position: absolute;
inset: 0;
pointer-events: none;
}
.callout {
position: absolute;
width: 220px;
}
.callout__body {
background: rgba(19, 19, 19, 0.85);
backdrop-filter: blur(4px);
border: 1px solid var(--outline-variant);
padding: 12px 14px;
position: relative;
}
.callout__label {
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--tertiary);
display: block;
margin-bottom: 4px;
}
.callout__value {
font-family: var(--font-head);
font-size: 15px;
font-weight: 500;
color: var(--text);
line-height: 1.25;
}
/* Hologram vector — a dashed line from callout to point */
.callout__wire {
position: absolute;
height: 1px;
background: repeating-linear-gradient(
to right,
var(--tertiary) 0 4px,
transparent 4px 8px
);
opacity: 0.65;
}
.callout__wire::after {
content: '';
position: absolute;
width: 6px;
height: 6px;
background: var(--primary);
border-radius: 50%;
box-shadow: 0 0 8px 1px rgba(242, 107, 54, 0.9);
}
/* individual callout positions */
.callout--1 { top: 20px; left: 6%; }
.callout--1 .callout__wire { top: 100%; margin-top: 22px; left: 30px; width: 160px; transform: rotate(28deg); transform-origin: 0 0; }
.callout--1 .callout__wire::after { right: -3px; top: -3px; }
.callout--2 { top: 20px; left: 26%; }
.callout--2 .callout__wire { top: 100%; margin-top: 24px; left: 50px; width: 90px; transform: rotate(50deg); transform-origin: 0 0; }
.callout--2 .callout__wire::after { right: -3px; top: -3px; }
.callout--3 { bottom: 20px; right: 42%; }
.callout--3 .callout__wire { bottom: 100%; margin-bottom: 24px; right: 80px; width: 110px; transform: rotate(-46deg); transform-origin: 100% 100%; }
.callout--3 .callout__wire::after { left: -3px; top: -3px; }
.callout--4 { bottom: 20px; right: 8%; }
.callout--4 .callout__wire { bottom: 100%; margin-bottom: 24px; right: 60px; width: 180px; transform: rotate(-24deg); transform-origin: 100% 100%; }
.callout--4 .callout__wire::after { left: -3px; top: -3px; }
.anatomy__spec-strip {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 2px;
background: var(--outline-variant);
margin-top: var(--space-2xl);
}
.anatomy__spec {
background: var(--container-low);
padding: 24px;
display: flex;
flex-direction: column;
gap: 8px;
}
.anatomy__spec-label {
font-family: var(--font-body);
font-size: var(--fs-micro);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--tertiary);
}
.anatomy__spec-value {
font-family: var(--font-head);
font-size: 20px;
font-weight: 600;
color: var(--text);
line-height: 1.1;
}
.anatomy__spec-value .accent { color: var(--primary); }
/* ============================================================
CHAPTER 04 — THE WORKSHOP (full-bleed editorial spread)
============================================================ */
.workshop {
position: relative;
background: var(--anchor);
padding: 0;
overflow: hidden;
}
.workshop__frame {
position: relative;
height: 90vh;
min-height: 720px;
overflow: hidden;
isolation: isolate;
}
/* Composed workshop scene — layered ember/dust to suggest a forge floor */
.workshop__scene {
position: absolute;
inset: 0;
background:
/* forge glow lower centre */
radial-gradient(ellipse 90% 60% at 45% 100%, rgba(242, 107, 54, 0.55), transparent 60%),
/* secondary flare */
radial-gradient(ellipse 40% 30% at 30% 90%, rgba(255, 181, 155, 0.5), transparent 65%),
/* backdrop factory dust */
radial-gradient(ellipse 60% 45% at 75% 30%, rgba(122, 148, 217, 0.08), transparent 70%),
/* deep ceiling */
linear-gradient(180deg, #0A0A0A 0%, #1A1615 45%, #2A1F1B 75%, #402318 100%);
z-index: 0;
}
/* Silhouetted hanging saber rack */
.workshop__rack {
position: absolute;
top: 12%;
right: 6%;
z-index: 2;
display: flex;
gap: 40px;
opacity: 0.85;
}
.workshop__rack-saber {
width: 3px;
height: 200px;
background: linear-gradient(
to bottom,
transparent 0%,
rgba(90, 90, 90, 0.9) 15%,
rgba(160, 160, 160, 0.95) 50%,
rgba(90, 90, 90, 0.9) 85%,
transparent 100%
);
box-shadow:
-1px 0 6px rgba(242, 107, 54, 0.5),
1px 0 3px rgba(0, 0, 0, 0.8);
}
.workshop__rack-saber:nth-child(2) { height: 240px; }
.workshop__rack-saber:nth-child(3) { height: 180px; }
.workshop__rack-saber:nth-child(4) { height: 220px; }
.workshop__rack-saber:nth-child(5) { height: 200px; }
/* Foreground figure silhouette at the forge */
.workshop__figure {
position: absolute;
bottom: 0;
left: 12%;
width: 320px;
height: 55%;
z-index: 2;
background:
radial-gradient(ellipse 70% 40% at 50% 20%, rgba(20, 20, 20, 0.9), transparent 60%),
radial-gradient(ellipse 90% 90% at 50% 90%, rgba(0, 0, 0, 0.9), transparent 60%);
filter: blur(1px);
}
.workshop__figure::before {
content: '';
position: absolute;
right: -6px;
top: 20%;
width: 8px;
height: 45%;
background: linear-gradient(
to bottom,
rgba(255, 181, 155, 0.7) 0%,
rgba(242, 107, 54, 1) 50%,
rgba(255, 181, 155, 0.6) 100%
);
box-shadow:
0 0 30px 8px rgba(242, 107, 54, 0.5),
0 0 80px 20px rgba(242, 107, 54, 0.25);
transform: rotate(20deg);
transform-origin: bottom center;
}
/* Letterbox top/bottom for the workshop scene */
.workshop__frame .letterbox { height: 5vh; z-index: 8; }
.workshop__overlay {
position: absolute;
left: var(--space-lg);
right: var(--space-lg);
bottom: 8vh;
z-index: 10;
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2xl);
align-items: end;
max-width: 1440px;
margin: 0 auto;
}
.workshop__chapter { margin-bottom: 20px; }
.workshop__head {
font-family: var(--font-head);
font-weight: 700;
font-size: clamp(40px, 5.5vw, 84px);
line-height: 0.92;
letter-spacing: -0.02em;
text-transform: uppercase;
color: var(--text);
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
max-width: 620px;
}
.workshop__head .accent { color: var(--secondary); }
.workshop__body {
background: rgba(19, 19, 19, 0.78);
backdrop-filter: blur(10px);
border: 1px solid var(--outline-variant);
padding: 32px;
max-width: 460px;
position: relative;
}
.workshop__body::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(180deg, transparent 0%, var(--primary) 50%, transparent 100%);
box-shadow: 0 0 12px 1px rgba(242, 107, 54, 0.6);
}
.workshop__body-eyebrow {
color: var(--tertiary);
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 600;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
margin-bottom: 14px;
display: block;
}
.workshop__body-text {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.65;
color: var(--neutral);
margin-bottom: 20px;
}
.workshop__body-quote {
font-family: var(--font-head);
font-size: 22px;
font-weight: 500;
font-style: italic;
color: var(--text);
line-height: 1.35;
padding-top: 20px;
border-top: 1px solid var(--outline-variant);
}
/* Standalone timing badge */
.workshop__badge {
position: absolute;
top: 12vh;
left: var(--space-lg);
z-index: 12;
display: flex;
flex-direction: column;
gap: 4px;
padding: 20px 24px;
background: rgba(19, 19, 19, 0.75);
backdrop-filter: blur(8px);
border: 1px solid var(--primary);
box-shadow:
0 0 30px -6px rgba(242, 107, 54, 0.5),
inset 0 0 40px -12px rgba(242, 107, 54, 0.15);
}
.workshop__badge-label {
font-family: var(--font-body);
font-size: var(--fs-micro);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--tertiary);
}
.workshop__badge-value {
font-family: var(--font-head);
font-size: 32px;
font-weight: 700;
color: var(--secondary);
line-height: 1;
letter-spacing: -0.02em;
}
/* ============================================================
CHAPTER 05 — DOSSIER GRID (3 movie-poster tiles)
============================================================ */
.dossiers {
background: var(--anchor);
padding: var(--space-2xl) 0;
position: relative;
}
.dossiers__intro {
max-width: 1440px;
margin: 0 auto var(--space-xl);
padding: 0 var(--space-lg);
display: grid;
grid-template-columns: 1fr auto;
gap: var(--space-lg);
align-items: end;
}
.dossiers__head {
font-family: var(--font-head);
font-weight: 700;
font-size: clamp(40px, 5vw, 76px);
line-height: 0.95;
letter-spacing: -0.02em;
text-transform: uppercase;
color: var(--text);
max-width: 900px;
margin-top: 16px;
}
.dossiers__head .accent { color: var(--primary); }
.dossiers__link {
font-family: var(--font-body);
font-size: var(--fs-small);
font-weight: 600;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--primary);
white-space: nowrap;
padding-bottom: 8px;
}
.dossiers__grid {
max-width: 1440px;
margin: 0 auto;
padding: 0 var(--space-lg);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.dossier {
position: relative;
aspect-ratio: 3 / 4.4;
overflow: hidden;
isolation: isolate;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 24px;
background: var(--container-low);
border: 1px solid transparent;
transition: transform 0.4s ease, border-color 0.3s ease;
}
.dossier:hover { transform: translateY(-4px); border-color: var(--primary); }
.dossier__scene {
position: absolute;
inset: 0;
z-index: 0;
}
.dossier--vader .dossier__scene {
background:
radial-gradient(ellipse 80% 90% at 50% 100%, rgba(242, 107, 54, 0.35), transparent 60%),
radial-gradient(ellipse 40% 50% at 50% 40%, rgba(255, 181, 155, 0.10), transparent 70%),
linear-gradient(180deg, #0A0A0A 0%, #1A0F0C 60%, #2A1614 100%);
}
.dossier--ahsoka .dossier__scene {
background:
radial-gradient(ellipse 60% 80% at 50% 60%, rgba(255, 181, 155, 0.30), transparent 60%),
radial-gradient(ellipse 40% 50% at 30% 30%, rgba(122, 148, 217, 0.10), transparent 70%),
linear-gradient(180deg, #131313 0%, #1E1817 60%, #2A1E1A 100%);
}
.dossier--starkiller .dossier__scene {
background:
radial-gradient(ellipse 100% 100% at 50% 100%, rgba(242, 107, 54, 0.5), transparent 55%),
radial-gradient(ellipse 50% 40% at 50% 45%, rgba(255, 181, 155, 0.20), transparent 70%),
linear-gradient(180deg, #0A0A0A 0%, #1E1210 50%, #3A1F17 100%);
}
/* Faux figure — a subtle vertical bloom to suggest a saber in the frame */
.dossier__figure {
position: absolute;
left: 45%;
top: 20%;
bottom: 22%;
width: 4px;
z-index: 1;
background: linear-gradient(
to bottom,
transparent 0%,
rgba(255, 181, 155, 0.7) 20%,
rgba(242, 107, 54, 1) 55%,
rgba(255, 181, 155, 0.5) 85%,
transparent 100%
);
box-shadow:
0 0 40px 12px rgba(242, 107, 54, 0.4),
0 0 120px 32px rgba(242, 107, 54, 0.15);
transform: rotate(-8deg);
transform-origin: bottom center;
}
.dossier--ahsoka .dossier__figure { transform: rotate(6deg); left: 44%; }
.dossier--starkiller .dossier__figure { transform: rotate(-16deg); left: 48%; width: 5px; }
.dossier__top {
position: relative;
z-index: 3;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 20px;
}
.dossier__code {
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--tertiary);
}
.dossier__grade {
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 600;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--outline);
padding: 4px 10px;
border: 1px solid var(--outline-variant);
}
.dossier__bottom {
position: relative;
z-index: 3;
display: flex;
flex-direction: column;
gap: 16px;
}
.dossier__tag {
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 600;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--tertiary);
display: inline-flex;
align-items: center;
gap: 8px;
}
.dossier__tag::before {
content: '';
width: 22px;
height: 1px;
background: var(--tertiary);
display: inline-block;
opacity: 0.7;
}
.dossier__name {
font-family: var(--font-head);
font-size: clamp(28px, 2.8vw, 44px);
font-weight: 700;
line-height: 0.92;
letter-spacing: -0.02em;
text-transform: uppercase;
color: var(--text);
}
.dossier__spec-row {
display: flex;
gap: 20px;
padding-top: 14px;
border-top: 1px solid var(--outline-variant);
}
.dossier__spec {
display: flex;
flex-direction: column;
gap: 2px;
}
.dossier__spec-label {
font-family: var(--font-body);
font-size: 10px;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--outline);
}
.dossier__spec-value {
font-family: var(--font-head);
font-size: 15px;
font-weight: 600;
color: var(--text);
}
.dossier__spec-value .accent { color: var(--primary); }
/* ============================================================
MANIFESTO — quiet typographic interstitial
============================================================ */
.manifesto {
background: var(--anchor);
padding: var(--space-2xl) 0;
position: relative;
overflow: hidden;
}
.manifesto__stars { z-index: 0; }
.manifesto__inner {
max-width: 1440px;
margin: 0 auto;
padding: 0 var(--space-lg);
position: relative;
z-index: 2;
}
.manifesto__top {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: var(--space-2xl);
gap: var(--space-xl);
flex-wrap: wrap;
}
.manifesto__eyebrow {
color: var(--tertiary);
}
.manifesto__slate {
font-family: var(--font-body);
font-size: var(--fs-micro);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--outline);
text-align: right;
}
.manifesto__slate span { color: var(--tertiary); font-weight: 600; }
/* One angular opening-crawl-perspective moment */
.manifesto__crawl-wrap {
perspective: 900px;
perspective-origin: 50% 100%;
text-align: center;
padding: var(--space-xl) 0;
}
.manifesto__crawl {
display: inline-block;
transform: rotateX(28deg);
transform-origin: 50% 100%;
font-family: var(--font-head);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
line-height: 0.95;
color: var(--secondary);
text-shadow: 0 0 40px rgba(255, 181, 155, 0.4), 0 0 8px rgba(242, 107, 54, 0.6);
}
.manifesto__crawl-line {
display: block;
font-size: clamp(40px, 6vw, 96px);
}
.manifesto__crawl-line--big { font-size: clamp(56px, 9vw, 148px); color: var(--text); text-shadow: 0 0 20px rgba(229, 226, 225, 0.15); }
.manifesto__bottom {
margin-top: var(--space-2xl);
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2xl);
align-items: start;
padding-top: var(--space-xl);
border-top: 1px solid var(--outline-variant);
}
.manifesto__quote {
font-family: var(--font-body);
font-size: var(--fs-lead);
line-height: 1.65;
color: var(--neutral);
max-width: 520px;
}
.manifesto__signoff {
justify-self: end;
text-align: right;
display: flex;
flex-direction: column;
gap: 10px;
}
.manifesto__signoff-name {
font-family: var(--font-head);
font-size: 20px;
font-weight: 700;
color: var(--text);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
}
.manifesto__signoff-role {
font-family: var(--font-body);
font-size: var(--fs-micro);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--tertiary);
}
/* ============================================================
TRANSMISSION 002 — comms terminal (email capture)
============================================================ */
.comms {
background: var(--container-low);
padding: var(--space-2xl) 0;
position: relative;
overflow: hidden;
}
.comms__glow {
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
width: 60%;
height: 60%;
background: radial-gradient(circle at center, rgba(242, 107, 54, 0.12), transparent 65%);
filter: blur(20px);
z-index: 0;
pointer-events: none;
}
.comms__inner {
position: relative;
z-index: 2;
max-width: 900px;
margin: 0 auto;
padding: 0 var(--space-lg);
text-align: center;
}
.comms__frame {
background: var(--anchor);
border: 1px solid var(--outline-variant);
padding: var(--space-2xl) var(--space-xl);
position: relative;
box-shadow:
0 40px 100px -20px rgba(0, 0, 0, 0.9),
inset 0 1px 0 rgba(255, 181, 155, 0.1);
}
/* corner frame marks on the comms terminal */
.comms__frame::before,
.comms__frame::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
border: 1px solid var(--primary);
}
.comms__frame::before {
top: -1px;
left: -1px;
border-width: 1px 0 0 1px;
box-shadow: -6px -6px 20px -6px rgba(242, 107, 54, 0.5);
}
.comms__frame::after {
bottom: -1px;
right: -1px;
border-width: 0 1px 1px 0;
box-shadow: 6px 6px 20px -6px rgba(242, 107, 54, 0.5);
}
.comms__chapter { margin-bottom: 20px; justify-content: center; }
.comms__chapter { display: inline-flex; }
.comms__title {
font-family: var(--font-head);
font-weight: 700;
font-size: clamp(36px, 5vw, 72px);
line-height: 0.95;
letter-spacing: -0.02em;
text-transform: uppercase;
color: var(--text);
margin-bottom: 20px;
}
.comms__title .accent { color: var(--primary); }
.comms__lede {
font-family: var(--font-body);
font-size: var(--fs-lead);
color: var(--neutral);
line-height: 1.6;
max-width: 520px;
margin: 0 auto var(--space-xl);
}
.comms__form {
display: flex;
gap: 0;
max-width: 520px;
margin: 0 auto;
border: 1px solid var(--outline-variant);
background: var(--container-low);
padding: 6px;
transition: border-color 0.3s;
}
.comms__form:focus-within {
border-color: var(--primary);
box-shadow: 0 0 20px -6px rgba(242, 107, 54, 0.4);
}
.comms__input {
flex: 1;
background: transparent;
border: none;
padding: 14px 18px;
color: var(--text);
font-family: var(--font-body);
font-size: var(--fs-body);
letter-spacing: 0.02em;
}
.comms__input:focus { outline: none; }
.comms__input::placeholder {
color: var(--outline);
text-transform: uppercase;
font-size: var(--fs-small);
letter-spacing: var(--tracking-wider);
}
.comms__submit {
background: var(--primary);
color: var(--anchor);
padding: 14px 28px;
font-family: var(--font-body);
font-weight: 700;
font-size: var(--fs-small);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
box-shadow: inset 0 1px 0 rgba(255, 181, 155, 0.7);
transition: box-shadow 0.2s;
}
.comms__submit:hover {
box-shadow:
inset 0 1px 0 rgba(255, 181, 155, 0.9),
0 0 30px -4px rgba(242, 107, 54, 0.7);
}
.comms__meta {
display: flex;
justify-content: center;
gap: 28px;
margin-top: var(--space-lg);
padding-top: var(--space-md);
border-top: 1px solid var(--outline-variant);
font-family: var(--font-body);
font-size: var(--fs-micro);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--tertiary);
flex-wrap: wrap;
}
.comms__meta-item::before {
content: '';
display: inline-block;
width: 5px;
height: 5px;
background: var(--primary);
box-shadow: 0 0 6px 1px rgba(242, 107, 54, 0.7);
margin-right: 8px;
vertical-align: middle;
}
/* ============================================================
Footer — HUD quiet
============================================================ */
.footer {
background: #0A0A0A;
padding: var(--space-2xl) 0 var(--space-lg);
border-top: 1px solid var(--outline-variant);
position: relative;
}
.footer__inner {
max-width: 1440px;
margin: 0 auto;
padding: 0 var(--space-lg);
}
.footer__top {
display: grid;
grid-template-columns: 1.5fr repeat(4, 1fr);
gap: var(--space-lg);
padding-bottom: var(--space-xl);
border-bottom: 1px solid var(--outline-variant);
}
.footer__brand-wordmark {
font-family: var(--font-head);
font-weight: 700;
font-size: 24px;
letter-spacing: 0.24em;
color: var(--text);
margin-bottom: 20px;
display: inline-flex;
align-items: center;
gap: 12px;
}
.footer__brand-wordmark::before {
content: '';
display: inline-block;
width: 10px;
height: 10px;
background: var(--primary);
box-shadow: 0 0 12px 2px rgba(242, 107, 54, 0.7);
transform: rotate(45deg);
}
.footer__brand-tag {
font-family: var(--font-body);
font-size: var(--fs-small);
color: var(--neutral);
line-height: 1.55;
max-width: 320px;
margin-bottom: 20px;
}
.footer__brand-meta {
font-family: var(--font-body);
font-size: var(--fs-micro);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--outline);
}
.footer__col-head {
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 600;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--tertiary);
margin-bottom: 18px;
padding-bottom: 8px;
border-bottom: 1px solid var(--outline-variant);
}
.footer__list {
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
}
.footer__list a {
font-family: var(--font-body);
font-size: var(--fs-small);
color: var(--neutral);
transition: color 0.2s;
}
.footer__list a:hover { color: var(--primary); }
.footer__base {
padding-top: var(--space-lg);
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-lg);
flex-wrap: wrap;
font-family: var(--font-body);
font-size: var(--fs-micro);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--outline);
}
.footer__base-left { display: flex; gap: 20px; align-items: center; }
.footer__base-pip { color: var(--primary); }
.footer__base-sep { color: var(--outline-variant); }
/* ============================================================
Responsive
============================================================ */
@media (max-width: 1024px) {
.duality__intro { grid-template-columns: 1fr; gap: var(--space-lg); }
.duality__aside { padding-left: 0; border-left: none; border-top: 1px solid var(--outline-variant); padding-top: 20px; }
.duality__diptych { grid-template-columns: 1fr; }
.duality__diptych::before { display: none; }
.anatomy__head { grid-template-columns: 1fr; gap: var(--space-lg); }
.anatomy__meta { padding-left: 0; border-left: none; border-top: 1px solid var(--outline-variant); padding-top: 20px; }
.workshop__overlay { grid-template-columns: 1fr; gap: var(--space-lg); }
.workshop__badge { display: none; }
.dossiers__grid { grid-template-columns: 1fr; }
.anatomy__spec-strip { grid-template-columns: repeat(2, 1fr); }
.manifesto__bottom { grid-template-columns: 1fr; }
.manifesto__signoff { justify-self: start; text-align: left; }
.callout--1, .callout--2 { top: 10px; }
.callout--3, .callout--4 { bottom: 10px; }
.callout { width: 160px; }
}
@media (max-width: 720px) {
:root {
--space-2xl: 64px;
--space-xl: 48px;
}
.nav__menu { display: none; }
.transmission__inner { font-size: 9px; gap: 12px; padding: 0 var(--space-md); }
.transmission__left span:not(.transmission__pip) { display: none; }
.opening__inner { padding: 10vh var(--space-md); }
.opening__telemetry { grid-template-columns: repeat(2, 1fr); }
.telemetry-cell { padding: 20px 12px 4px 0 !important; }
.telemetry-cell + .telemetry-cell { padding-left: 12px !important; }
.opening__sub { grid-template-columns: 1fr; }
.anatomy__spec-strip { grid-template-columns: 1fr; }
.footer__top { grid-template-columns: 1fr 1fr; }
.footer__brand { grid-column: 1 / -1; }
.callout { display: none; }
.comms__form { flex-direction: column; padding: 8px; }
.comms__submit { padding: 14px; }
}
</style>
</head>
<body>
<!-- ============================================================
SVG grain filter — used across cinematic scenes
============================================================ -->
<svg style="position:absolute;width:0;height:0;overflow:hidden" aria-hidden="true">
<defs>
<filter id="grain">
<feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch" seed="7"/>
<feColorMatrix values="0 0 0 0 0.9 0 0 0 0 0.88 0 0 0 0 0.85 0 0 0 0.25 0"/>
</filter>
<filter id="bloom" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="10" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
</svg>
<!-- ============================================================
TRANSMISSION RIBBON — HUD broadcast header
============================================================ -->
<div class="transmission">
<div class="transmission__inner">
<div class="transmission__left">
<span><span class="transmission__pip"></span>TRANSMISSION 001</span>
<span class="transmission__sep">//</span>
<span>SIGNAL LOCKED</span>
<span class="transmission__sep">//</span>
<span>UNLICENSED FAN-LED · UK OWNED</span>
</div>
<div class="transmission__right">
<span>07-10 DAY WINDOW OPEN</span>
<span class="transmission__sep">//</span>
<span>USD · AUD · CAD · NZD</span>
</div>
</div>
</div>
<!-- ============================================================
NAV
============================================================ -->
<nav class="nav">
<div class="nav__inner">
<a href="#" class="nav__logo">ARTSABERS</a>
<ul class="nav__menu">
<li><a href="#" class="nav__link">Lightsabers</a></li>
<li><a href="#" class="nav__link">Cosplay Helmets</a></li>
<li><a href="#" class="nav__link">Parts & Accessories</a></li>
<li><a href="#" class="nav__link">Dossiers</a></li>
<li><a href="#" class="nav__link">Workshop</a></li>
</ul>
<div class="nav__tools">
<button aria-label="Search"><svg class="nav__icon" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.35-4.35"/></svg></button>
<button aria-label="Account"><svg class="nav__icon" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-6 8-6s8 2 8 6"/></svg></button>
<button aria-label="Cart" style="position: relative;">
<svg class="nav__icon" viewBox="0 0 24 24"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4H6zM3 6h18M16 10a4 4 0 0 1-8 0"/></svg>
<span class="nav__cart-count">2</span>
</button>
</div>
</div>
</nav>
<!-- ============================================================
CHAPTER 01 · OPENING (Hero, full-bleed cinematic)
============================================================ -->
<section class="opening">
<div class="opening__backdrop"></div>
<div class="star-field"></div>
<div class="letterbox letterbox--top"></div>
<div class="letterbox letterbox--bottom"></div>
<div class="opening__frame-marks">
<span class="frame-mark frame-mark--tl"></span>
<span class="frame-mark frame-mark--tr"></span>
<span class="frame-mark frame-mark--bl"></span>
<span class="frame-mark frame-mark--br"></span>
</div>
<!-- atmospheric ember source spilling from behind the frame -->
<div class="ember-source" style="width: 60vw; height: 60vw; right: -10vw; top: 20vh;"></div>
<div class="ember-source" style="width: 30vw; height: 30vw; left: 30vw; bottom: -5vw; opacity: 0.6;"></div>
<!-- film grain overlay -->
<svg class="grain-overlay" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" filter="url(#grain)"/>
</svg>
<div class="opening__inner">
<div class="opening__top-bar">
<div class="opening__coord">
<span>Chapter 01</span>
<span style="color: var(--text); font-weight: 600;">Opening</span>
</div>
<div class="opening__coord" style="text-align: right;">
<span>Origin · Latvia 2020</span>
<span style="color: var(--text); font-weight: 600;">Nerdworks Group · Est. 2024</span>
</div>
</div>
<div class="opening__stack">
<div class="chapter-tag chapter-tag--ember" style="margin-bottom: 32px;">Reel 001 · From factory floor to your door</div>
<h1 class="opening__display">
<span>Every</span>
<span class="indent">character.</span>
<span class="indent-big accent">Every</span>
<span class="indent">saber core.</span>
<span>Choose yours.</span>
</h1>
<div class="opening__sub">
<p class="opening__lede">
Hundreds of replica sabers, forged direct from our partner factory and shipped to your door in 7-10 days. No warehouses. No pretending. Real customer service — a named human, a 24-hour reply, and a support channel that stays open long after the order ships.
</p>
<div class="opening__actions">
<a href="#" class="btn btn--primary btn--large">Ignite the catalogue <span class="btn__arrow">›</span></a>
<a href="#" class="btn btn--ghost btn--large">Choose a Saber Core</a>
</div>
</div>
<div class="opening__telemetry">
<div class="telemetry-cell">
<span class="telemetry-cell__label">Catalogue</span>
<span class="telemetry-cell__value">1,100<span class="unit">SKUs</span></span>
</div>
<div class="telemetry-cell">
<span class="telemetry-cell__label">Delivery</span>
<span class="telemetry-cell__value">7-10<span class="unit">days</span></span>
</div>
<div class="telemetry-cell">
<span class="telemetry-cell__label">Reply window</span>
<span class="telemetry-cell__value">24<span class="unit">hrs</span></span>
</div>
<div class="telemetry-cell">
<span class="telemetry-cell__label">Guarantee</span>
<span class="telemetry-cell__value">30<span class="unit">days</span></span>
</div>
</div>
</div>
</div>
</section>
<!-- ============================================================
HUD TELEMETRY RIBBON — quiet interstitial
============================================================ -->
<div class="telemetry-ribbon">
<div class="telemetry-ribbon__inner">
<span><span class="telemetry-ribbon__pip">●</span> S-RGB · Baselit · Bluetooth standard</span>
<span class="telemetry-ribbon__sep">||</span>
<span>RGB-X · Baselit + · Expanded fonts</span>
<span class="telemetry-ribbon__sep">||</span>
<span><span class="telemetry-ribbon__pip">●</span> Xenopixel V3 · Pixel blade · 34 fonts</span>
<span class="telemetry-ribbon__sep">||</span>
<span>Proffie 2.2 · Programmable · Community fonts</span>
<span class="telemetry-ribbon__sep">||</span>
<span><span class="telemetry-ribbon__pip">●</span> Duelling grade · Light / Heavy</span>
<span class="telemetry-ribbon__sep">||</span>
<span>XenoConfigurator · iOS · Android</span>
</div>
</div>
<!-- ============================================================
CHAPTER 02 · THE DUALITY (Jedi vs Sith diptych — heavy)
============================================================ -->
<section class="duality">
<div class="duality__intro">
<div>
<div class="chapter-tag chapter-tag--ember duality__chapter">Chapter 02 · The duality</div>
<h2 class="duality__head">
<span class="light">Pick a</span>
<span class="dark">side.</span>
</h2>
</div>
<p class="duality__aside">
Every replica in the catalogue is faithful to its screen source — down to the emitter cut, the guard shape, the sound-font selection. Choose the order you fight for.
</p>
</div>
<div class="duality__diptych">
<!-- LEFT PANEL — JEDI -->
<div class="faction faction--jedi">
<div class="faction__scene"></div>
<div class="faction__figure-shadow"></div>
<div class="faction__figure"></div>
<svg class="grain-overlay" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" style="opacity:0.2">
<rect width="100%" height="100%" filter="url(#grain)"/>
</svg>
<div class="faction__dossier">
<span class="faction__dossier-tag">Dossier · 001 · Order of the Jedi</span>
<h3 class="faction__name">The<br>Order.</h3>
<p class="faction__brief">
Skywalker, Kenobi, Windu, Ahsoka, Yoda. Forty-two character-faithful hilts across the seven eras — from the High Republic to the New Jedi Order.
</p>
<div class="faction__stat-row">
<div class="faction__stat"><span class="faction__stat-label">Hilts</span><span class="faction__stat-value">42</span></div>
<div class="faction__stat"><span class="faction__stat-label">Eras</span><span class="faction__stat-value">7</span></div>
<div class="faction__stat"><span class="faction__stat-label">Cores</span><span class="faction__stat-value">All</span></div>
</div>
<a href="#" class="faction__link">Enter the Order →</a>
</div>
</div>
<!-- RIGHT PANEL — SITH -->
<div class="faction faction--sith">
<div class="faction__scene"></div>
<div class="faction__figure-shadow"></div>
<div class="faction__figure"></div>
<svg class="grain-overlay" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" style="opacity:0.25">
<rect width="100%" height="100%" filter="url(#grain)"/>
</svg>
<div class="faction__dossier">
<span class="faction__dossier-tag">Dossier · 002 · The Sith</span>
<h3 class="faction__name">The<br>Dark.</h3>
<p class="faction__brief">
Vader, Maul, Sidious, Dooku, the Inquisitors, Ren. Twenty-eight replicas of the fallen — the crossguards, the double-blades, the curved hilts of assassins.
</p>
<div class="faction__stat-row">
<div class="faction__stat"><span class="faction__stat-label">Hilts</span><span class="faction__stat-value">28</span></div>
<div class="faction__stat"><span class="faction__stat-label">Crossguards</span><span class="faction__stat-value">6</span></div>
<div class="faction__stat"><span class="faction__stat-label">Grades</span><span class="faction__stat-value">L / H</span></div>
</div>
<a href="#" class="faction__link">Cross the line →</a>
</div>
</div>
</div>
</section>
<!-- ============================================================
CHAPTER 03 · ANATOMY (blueprint of a single saber)
============================================================ -->
<section class="anatomy">
<div class="anatomy__dust"></div>
<svg class="grain-overlay" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" style="opacity:0.15">
<rect width="100%" height="100%" filter="url(#grain)"/>
</svg>
<div class="anatomy__inner">
<div class="anatomy__head">
<div>
<div class="chapter-tag chapter-tag--ember" style="margin-bottom: 24px;">Chapter 03 · Anatomy</div>
<h2 class="anatomy__title">
Dossier · <span class="accent">Starkiller SE.</span>
</h2>
</div>
<div class="anatomy__meta">
<div class="anatomy__meta-row"><span>Core</span><span>Proffie 2.2</span></div>
<div class="anatomy__meta-row"><span>Grade</span><span>Heavy duelling</span></div>
<div class="anatomy__meta-row"><span>Blade</span><span>Neopixel · 92 cm</span></div>
<div class="anatomy__meta-row"><span>Sound fonts</span><span>34 factory · unlimited custom</span></div>
<div class="anatomy__meta-row"><span>Base price</span><span style="color: var(--primary);">$449.99</span></div>
</div>
</div>
<div class="blueprint">
<div class="blueprint__saber">
<div class="blueprint__hilt"></div>
<div class="blueprint__emitter"></div>
<div class="blueprint__blade"></div>
</div>
<div class="blueprint__callouts">
<div class="callout callout--1">
<div class="callout__body">
<span class="callout__label">Pommel · #A01</span>
<span class="callout__value">Cast alloy, tail-cap threaded for battery access</span>
</div>
<div class="callout__wire"></div>
</div>
<div class="callout callout--2">
<div class="callout__body">
<span class="callout__label">Activation · #A02</span>
<span class="callout__value">Illuminated switch, two-tap ignition, ember rim</span>
</div>
<div class="callout__wire"></div>
</div>
<div class="callout callout--3">
<div class="callout__body">
<span class="callout__label">Emitter · #A03</span>
<span class="callout__value">Vent-cut collar, blade-lock ring, chrome finish</span>
</div>
<div class="callout__wire"></div>
</div>
<div class="callout callout--4">
<div class="callout__body">
<span class="callout__label">Blade · #A04</span>
<span class="callout__value">Neopixel · pixel-addressable · blaster-block enabled</span>
</div>
<div class="callout__wire"></div>
</div>
</div>
</div>
<div class="anatomy__spec-strip">
<div class="anatomy__spec">
<span class="anatomy__spec-label">Battery</span>
<span class="anatomy__spec-value">4-6 <span class="accent">hrs</span></span>
</div>
<div class="anatomy__spec">
<span class="anatomy__spec-label">Charge time</span>
<span class="anatomy__spec-value">3.5 <span class="accent">hrs</span></span>
</div>
<div class="anatomy__spec">
<span class="anatomy__spec-label">Total mass</span>
<span class="anatomy__spec-value">728 <span class="accent">g</span></span>
</div>
<div class="anatomy__spec">
<span class="anatomy__spec-label">Blade colours</span>
<span class="anatomy__spec-value">∞ <span class="accent">hex</span></span>
</div>
<div class="anatomy__spec">
<span class="anatomy__spec-label">Bluetooth</span>
<span class="anatomy__spec-value">XenoConfigurator</span>
</div>
</div>
</div>
</section>
<!-- ============================================================
CHAPTER 04 · THE WORKSHOP (full-bleed forge editorial)
============================================================ -->
<section class="workshop">
<div class="workshop__frame">
<div class="workshop__scene"></div>
<!-- silhouetted saber rack on the far wall -->
<div class="workshop__rack">
<div class="workshop__rack-saber"></div>
<div class="workshop__rack-saber"></div>
<div class="workshop__rack-saber"></div>
<div class="workshop__rack-saber"></div>
<div class="workshop__rack-saber"></div>
</div>
<!-- foreground figure at forge -->
<div class="workshop__figure"></div>
<svg class="grain-overlay" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" style="opacity:0.28">
<rect width="100%" height="100%" filter="url(#grain)"/>
</svg>
<div class="letterbox letterbox--top"></div>
<div class="letterbox letterbox--bottom"></div>
<!-- honest-timing badge overlaid -->
<div class="workshop__badge">
<span class="workshop__badge-label">Window · open</span>
<span class="workshop__badge-value">07 – 10 days</span>
</div>
<div class="workshop__overlay">
<div>
<div class="chapter-tag chapter-tag--ember workshop__chapter">Chapter 04 · The workshop</div>
<h2 class="workshop__head">
From factory floor <span class="accent">to your door.</span>
</h2>
</div>
<div class="workshop__body">
<span class="workshop__body-eyebrow">Transmission · 04.A · The honest one</span>
<p class="workshop__body-text">
We don't pretend we're stocked in a warehouse in Ohio. Every saber ships direct from our partner factory — the same factory tuning the pixels, cutting the chassis, calibrating the fonts. Seven to ten days, tracked end-to-end.
</p>
<p class="workshop__body-quote">
"Where most factory-direct shops sell and forget, we stay."
</p>
</div>
</div>
</div>
</section>
<!-- ============================================================
CHAPTER 05 · DOSSIER GRID (movie-poster tiles)
============================================================ -->
<section class="dossiers">
<div class="dossiers__intro">
<div>
<div class="chapter-tag chapter-tag--ember" style="margin-bottom: 20px;">Chapter 05 · Field dossiers</div>
<h2 class="dossiers__head">
Three replicas <span class="accent">from the case files.</span>
</h2>
</div>
<a href="#" class="dossiers__link">Open the full archive →</a>
</div>
<div class="dossiers__grid">
<!-- DOSSIER 1 — VADER -->
<article class="dossier dossier--vader">
<div class="dossier__scene"></div>
<div class="dossier__figure"></div>
<svg class="grain-overlay" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" style="opacity:0.22">
<rect width="100%" height="100%" filter="url(#grain)"/>
</svg>
<div class="dossier__top">
<span class="dossier__code">Dossier · 003</span>
<span class="dossier__grade">Heavy</span>
</div>
<div class="dossier__bottom">
<span class="dossier__tag">Sith Lord · Original Trilogy</span>
<h3 class="dossier__name">Darth Vader<br>EP6 ROTJ</h3>
<div class="dossier__spec-row">
<div class="dossier__spec"><span class="dossier__spec-label">Core</span><span class="dossier__spec-value">Xenopixel V3</span></div>
<div class="dossier__spec"><span class="dossier__spec-label">Fonts</span><span class="dossier__spec-value">34</span></div>
<div class="dossier__spec"><span class="dossier__spec-label">Price</span><span class="dossier__spec-value accent">$619.99</span></div>
</div>
</div>
</article>
<!-- DOSSIER 2 — AHSOKA -->
<article class="dossier dossier--ahsoka">
<div class="dossier__scene"></div>
<div class="dossier__figure"></div>
<svg class="grain-overlay" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" style="opacity:0.22">
<rect width="100%" height="100%" filter="url(#grain)"/>
</svg>
<div class="dossier__top">
<span class="dossier__code">Dossier · 007</span>
<span class="dossier__grade">Heavy · Twin</span>
</div>
<div class="dossier__bottom">
<span class="dossier__tag">Order Rebel · Clone Wars</span>
<h3 class="dossier__name">Ahsoka<br>Tano</h3>
<div class="dossier__spec-row">
<div class="dossier__spec"><span class="dossier__spec-label">Core</span><span class="dossier__spec-value">Xenopixel V3</span></div>
<div class="dossier__spec"><span class="dossier__spec-label">Blades</span><span class="dossier__spec-value">Twin curved</span></div>
<div class="dossier__spec"><span class="dossier__spec-label">Price</span><span class="dossier__spec-value accent">$534.99</span></div>
</div>
</div>
</article>
<!-- DOSSIER 3 — STARKILLER -->
<article class="dossier dossier--starkiller">
<div class="dossier__scene"></div>
<div class="dossier__figure"></div>
<svg class="grain-overlay" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" style="opacity:0.22">
<rect width="100%" height="100%" filter="url(#grain)"/>
</svg>
<div class="dossier__top">
<span class="dossier__code">Dossier · 012</span>
<span class="dossier__grade">Duelling</span>
</div>
<div class="dossier__bottom">
<span class="dossier__tag">ARTSABERS Exclusive · Flagship</span>
<h3 class="dossier__name">Starkiller<br>SE</h3>
<div class="dossier__spec-row">
<div class="dossier__spec"><span class="dossier__spec-label">Core</span><span class="dossier__spec-value">Proffie 2.2</span></div>
<div class="dossier__spec"><span class="dossier__spec-label">Fonts</span><span class="dossier__spec-value">Custom</span></div>
<div class="dossier__spec"><span class="dossier__spec-label">Price</span><span class="dossier__spec-value accent">$449.99</span></div>
</div>
</div>
</article>
</div>
</section>
<!-- ============================================================
MANIFESTO — quiet typographic interstitial (one crawl moment)
============================================================ -->
<section class="manifesto">
<div class="star-field manifesto__stars"></div>
<div class="manifesto__inner">
<div class="manifesto__top">
<div class="chapter-tag manifesto__eyebrow">Interlude · The promise</div>
<div class="manifesto__slate">
Signal · <span>03.A</span> // Latitude · <span>+56.94</span> // Longitude · <span>+24.10</span>
</div>
</div>
<div class="manifesto__crawl-wrap">
<div class="manifesto__crawl">
<span class="manifesto__crawl-line">We stay</span>
<span class="manifesto__crawl-line manifesto__crawl-line--big">after</span>
<span class="manifesto__crawl-line">the order ships.</span>
</div>
</div>
<div class="manifesto__bottom">
<p class="manifesto__quote">
A named human replies within 24 hours. A single point of contact from purchase through the last spare blade. No script, no ticket queue, no "we'll pass this to the manufacturer" — the customer service is ours, and it stays open long after your saber lands on the doorstep. The support is the product.
</p>
<div class="manifesto__signoff">
<span class="manifesto__signoff-name">Matt · Founder-in-service</span>
<span class="manifesto__signoff-role">ARTSABERS · Nerdworks Group</span>
</div>
</div>
</div>
</section>
<!-- ============================================================
TRANSMISSION 002 · comms terminal (email capture)
============================================================ -->
<section class="comms">
<div class="comms__glow"></div>
<div class="comms__inner">
<div class="comms__frame">
<div class="chapter-tag chapter-tag--ember comms__chapter">Transmission 002 · Open a channel</div>
<h2 class="comms__title">
New drops. <span class="accent">Field reports.</span> Nothing else.
</h2>
<p class="comms__lede">
We ship new sabers every week. Get the drop list, the workshop notes, and the occasional dossier — sent when there's something worth sending. Ten percent off your first order comes attached.
</p>
<form class="comms__form" onsubmit="event.preventDefault()">
<input type="email" class="comms__input" placeholder="Enter your comms address" aria-label="Email address">
<button type="submit" class="comms__submit">Open channel</button>
</form>
<div class="comms__meta">
<span class="comms__meta-item">One field report per week</span>
<span class="comms__meta-item">Unsubscribe any time</span>
<span class="comms__meta-item">10% off first order</span>
</div>
</div>
</div>
</section>
<!-- ============================================================
FOOTER — HUD quiet
============================================================ -->
<footer class="footer">
<div class="footer__inner">
<div class="footer__top">
<div class="footer__brand">
<a href="#" class="footer__brand-wordmark">ARTSABERS</a>
<p class="footer__brand-tag">From factory floor to your door. Hundreds of sabers, one trusted retailer — with the customer service the model was missing.</p>
<p class="footer__brand-meta">Nerdworks Group · UK owned · Founded Latvia 2020</p>
</div>
<div>
<h4 class="footer__col-head">Shop</h4>
<ul class="footer__list">
<li><a href="#">By character</a></li>
<li><a href="#">By Saber Core</a></li>
<li><a href="#">Cosplay helmets</a></li>
<li><a href="#">Parts & accessories</a></li>
<li><a href="#">Offers & deals</a></li>
</ul>
</div>
<div>
<h4 class="footer__col-head">Support</h4>
<ul class="footer__list">
<li><a href="#">Contact us</a></li>
<li><a href="#">Delivery & timing</a></li>
<li><a href="#">30-day guarantee</a></li>
<li><a href="#">Warranty</a></li>
<li><a href="#">XenoConfigurator</a></li>
</ul>
</div>
<div>
<h4 class="footer__col-head">Company</h4>
<ul class="footer__list">
<li><a href="#">The workshop</a></li>
<li><a href="#">Field reports</a></li>
<li><a href="#">Nerdworks Group</a></li>
<li><a href="#">Saber 66 · UK & EU</a></li>
</ul>
</div>
<div>
<h4 class="footer__col-head">Signal</h4>
<ul class="footer__list">
<li><a href="#">Instagram</a></li>
<li><a href="#">TikTok</a></li>
<li><a href="#">YouTube</a></li>
<li><a href="#">Discord</a></li>
</ul>
</div>
</div>
<div class="footer__base">
<div class="footer__base-left">
<span><span class="footer__base-pip">●</span> Transmission active</span>
<span class="footer__base-sep">//</span>
<span>USD · CAD · AUD · NZD · EUR · GBP</span>
</div>
<div>© 2026 ARTSABERS · Unlicensed fan-led · Star Wars-inspired replicas</div>
</div>
</div>
</footer>
</body>
</html>