<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ARTSABERS — From factory floor to your door</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
/* Chromatic identifiers */
--primary: #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; /* mid-tone warm surface, drawn from container-high position on ladder */
/* 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);
-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; }
h1, h2, h3, h4 {
font-family: var(--font-head);
font-weight: 600;
letter-spacing: var(--tracking-tight);
color: var(--text);
line-height: 1.05;
}
/* Utility — data-as-typography contract */
.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);
}
.inner {
width: 100%;
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--space-lg);
}
/* ============================================================
Buttons
============================================================ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 28px;
border-radius: var(--radius-md);
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, color 0.2s ease;
}
.btn--primary {
background: var(--primary);
color: var(--anchor);
}
.btn--primary:hover {
background: var(--secondary);
box-shadow: 0 0 18px 0 rgba(242, 107, 54, 0.4);
}
.btn--ghost {
background: transparent;
color: var(--primary);
border: 1px solid var(--primary);
}
.btn--ghost:hover {
box-shadow: 0 0 12px 0 rgba(242, 107, 54, 0.35);
}
.btn--large { padding: 18px 36px; font-size: var(--fs-body); }
/* ============================================================
1. Promo bar
============================================================ */
.promo {
background: var(--container);
color: var(--neutral);
padding: 10px 0;
text-align: center;
}
.promo__text {
font-size: var(--fs-micro);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
font-weight: 500;
}
.promo__sep {
color: var(--outline-variant);
margin: 0 12px;
}
/* ============================================================
2. Navigation
============================================================ */
.nav {
background: var(--anchor);
position: sticky;
top: 0;
z-index: 50;
}
.nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 22px var(--space-lg);
max-width: var(--container-max);
margin: 0 auto;
gap: var(--space-lg);
}
.nav__logo {
font-family: var(--font-head);
font-weight: 700;
font-size: 20px;
letter-spacing: 0.12em;
color: var(--text);
}
.nav__menu {
display: flex;
gap: 32px;
list-style: none;
}
.nav__link {
font-size: var(--fs-small);
font-weight: 500;
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: 22px;
height: 22px;
stroke: var(--text);
fill: none;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
transition: stroke 0.2s;
}
.nav__cart {
position: relative;
}
.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;
}
/* ============================================================
3. Hero
============================================================ */
.hero {
background: var(--anchor);
padding: var(--space-2xl) 0;
position: relative;
overflow: hidden;
}
.hero__inner {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--space-lg);
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: var(--space-2xl);
align-items: center;
min-height: 78vh;
}
.hero__eyebrow { margin-bottom: 20px; }
.hero__title {
font-family: var(--font-head);
font-weight: 700;
font-size: var(--fs-display);
line-height: 1.02;
letter-spacing: -0.02em;
margin-bottom: 28px;
}
.hero__title-accent { color: var(--primary); }
.hero__lead {
font-size: var(--fs-lead);
line-height: 1.5;
color: var(--neutral);
max-width: 520px;
margin-bottom: 40px;
}
.hero__actions {
display: flex;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 40px;
}
.hero__meta {
display: flex;
gap: 40px;
flex-wrap: wrap;
}
.hero__meta-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.hero__meta-value {
font-family: var(--font-head);
font-size: 32px;
font-weight: 600;
color: var(--text);
}
/* Load-bearing image placeholder */
.placeholder {
background: var(--container-low);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-md);
color: var(--neutral);
font-size: var(--fs-small);
line-height: 1.5;
text-align: center;
font-style: italic;
}
.hero__image {
aspect-ratio: 4 / 5;
min-height: 520px;
box-shadow: 0 0 40px 0 rgba(242, 107, 54, 0.12);
}
/* ============================================================
4. Trust bar
============================================================ */
.trust {
background: var(--container);
padding: var(--space-xl) 0;
}
.trust__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-lg);
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--space-lg);
}
.trust__item {
display: flex;
gap: 16px;
align-items: flex-start;
}
.trust__icon {
width: 32px;
height: 32px;
stroke: var(--primary);
fill: none;
stroke-width: 1.4;
flex-shrink: 0;
margin-top: 2px;
}
.trust__label {
font-size: var(--fs-small);
font-weight: 600;
color: var(--text);
margin-bottom: 2px;
}
.trust__detail {
font-size: 13px;
color: var(--neutral);
line-height: 1.5;
}
/* ============================================================
Section shell
============================================================ */
.section {
padding: var(--space-2xl) 0;
}
.section--anchor { background: var(--anchor); }
.section--container { background: var(--container); }
.section--bright { background: var(--bright); }
.section__header {
max-width: var(--container-max);
margin: 0 auto var(--space-xl);
padding: 0 var(--space-lg);
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: var(--space-lg);
flex-wrap: wrap;
}
.section__title {
font-size: var(--fs-h2);
max-width: 640px;
}
.section__lede {
font-size: var(--fs-lead);
color: var(--neutral);
max-width: 560px;
margin-top: 12px;
}
.section__link {
font-size: var(--fs-small);
font-weight: 600;
color: var(--primary);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
white-space: nowrap;
}
.section__link:hover { text-decoration: underline; text-underline-offset: 4px; }
/* ============================================================
5. Choose your Saber Core
============================================================ */
.cores {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-md);
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--space-lg);
}
.core {
background: var(--container-low);
border-radius: var(--radius-md);
padding: 28px;
display: flex;
flex-direction: column;
gap: 20px;
}
.core__image {
aspect-ratio: 4 / 3;
background: var(--anchor);
}
.core__badge {
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 600;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--tertiary);
}
.core__title {
font-size: 22px;
font-weight: 600;
line-height: 1.1;
}
.core__price {
font-family: var(--font-head);
font-size: 20px;
font-weight: 600;
color: var(--primary);
}
.core__desc {
font-size: 14px;
color: var(--neutral);
line-height: 1.55;
flex: 1;
}
.core__cta {
align-self: flex-start;
font-size: var(--fs-small);
font-weight: 600;
color: var(--primary);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
padding-top: 4px;
}
.core__cta:hover { text-decoration: underline; text-underline-offset: 4px; }
/* ============================================================
6. Fan favourites & 8. New arrivals — product grid
============================================================ */
.products {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-md);
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--space-lg);
}
.product {
background: transparent;
display: flex;
flex-direction: column;
gap: 14px;
position: relative;
}
.product__image-wrap {
position: relative;
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: 0 0 12px 0 rgba(242, 107, 54, 0.15);
}
.product__image {
aspect-ratio: 4 / 5;
}
.product__flag {
position: absolute;
top: 14px;
left: 14px;
font-size: var(--fs-micro);
font-weight: 600;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--anchor);
background: var(--primary);
padding: 6px 10px;
border-radius: var(--radius-sm);
}
.product__badge {
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-top: 4px;
}
.product__title {
font-family: var(--font-head);
font-size: 18px;
font-weight: 500;
line-height: 1.25;
color: var(--text);
}
.product__meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.product__price {
font-family: var(--font-head);
font-size: 20px;
font-weight: 600;
color: var(--primary);
}
.product__stars {
display: flex;
gap: 4px;
align-items: center;
}
.product__star {
width: 14px;
height: 14px;
fill: var(--primary);
stroke: var(--primary);
stroke-width: 1;
}
.product__reviews {
font-size: 12px;
color: var(--neutral);
margin-left: 4px;
}
.product__specs {
display: flex;
gap: 16px;
flex-wrap: wrap;
margin-top: 2px;
}
.product__spec {
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--tertiary);
}
/* Product cards on bright ground use container surface */
.section--bright .product__image-wrap { box-shadow: 0 0 14px 0 rgba(242, 107, 54, 0.18); }
/* ============================================================
7. Shop by Character
============================================================ */
.characters {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 280px);
gap: var(--space-md);
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--space-lg);
}
.character {
position: relative;
border-radius: var(--radius-md);
overflow: hidden;
display: flex;
align-items: flex-end;
padding: 24px;
background: var(--container-low);
transition: transform 0.3s ease;
}
.character:hover { transform: translateY(-3px); }
.character__label {
font-family: var(--font-head);
font-size: 24px;
font-weight: 600;
color: var(--text);
position: relative;
z-index: 2;
}
.character__count {
display: block;
margin-top: 6px;
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--tertiary);
}
.character__placeholder {
position: absolute;
inset: 0;
padding: var(--space-md);
color: var(--neutral);
font-size: 12px;
font-style: italic;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
line-height: 1.5;
}
/* ============================================================
9. Factory-direct + customer service
============================================================ */
.promise {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--space-lg);
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2xl);
align-items: center;
}
.promise__intro {
text-align: center;
max-width: 720px;
margin: 0 auto var(--space-xl);
padding: 0 var(--space-lg);
}
.promise__title {
font-size: var(--fs-h2);
margin-bottom: 20px;
}
.promise__lede {
font-size: var(--fs-lead);
color: var(--neutral);
}
.promise__panel {
display: flex;
flex-direction: column;
gap: 20px;
}
.promise__eyebrow {
color: var(--primary);
font-size: var(--fs-micro);
font-weight: 600;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
}
.promise__head {
font-family: var(--font-head);
font-size: var(--fs-h3);
font-weight: 600;
line-height: 1.15;
}
.promise__head-accent { color: var(--primary); }
.promise__body {
font-size: var(--fs-body);
color: var(--neutral);
line-height: 1.65;
}
.promise__list {
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 12px;
}
.promise__list li {
display: flex;
gap: 12px;
align-items: flex-start;
font-size: var(--fs-small);
color: var(--text);
}
.promise__tick {
width: 18px;
height: 18px;
stroke: var(--primary);
fill: none;
stroke-width: 2;
flex-shrink: 0;
margin-top: 3px;
}
.promise__cta { margin-top: 8px; }
/* ============================================================
10. Reviews / testimonials
============================================================ */
.reviews {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-md);
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--space-lg);
}
.review {
background: var(--container);
border-radius: var(--radius-md);
padding: 32px;
display: flex;
flex-direction: column;
gap: 18px;
}
.review__stars { display: flex; gap: 4px; }
.review__star {
width: 16px;
height: 16px;
fill: var(--primary);
stroke: var(--primary);
}
.review__body {
font-size: 17px;
line-height: 1.55;
color: var(--text);
flex: 1;
}
.review__footer {
display: flex;
flex-direction: column;
gap: 4px;
}
.review__name {
font-weight: 600;
font-size: var(--fs-small);
color: var(--text);
}
.review__product {
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--tertiary);
}
/* ============================================================
11. Brand story
============================================================ */
.story {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--space-lg);
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2xl);
align-items: center;
}
.story__image {
aspect-ratio: 4 / 5;
min-height: 520px;
background: var(--container);
}
.story__eyebrow { margin-bottom: 16px; }
.story__title {
font-size: var(--fs-h1);
line-height: 1.05;
margin-bottom: 24px;
}
.story__body {
font-size: var(--fs-lead);
color: var(--neutral);
line-height: 1.6;
margin-bottom: 20px;
}
.story__quote {
font-family: var(--font-head);
font-size: 22px;
font-style: italic;
color: var(--text);
padding: 20px 0;
line-height: 1.4;
}
.story__actions { margin-top: 12px; display: flex; gap: 16px; flex-wrap: wrap; }
/* ============================================================
12. Email capture
============================================================ */
.email {
max-width: 640px;
margin: 0 auto;
padding: 0 var(--space-lg);
text-align: center;
}
.email__eyebrow { margin-bottom: 12px; }
.email__title {
font-size: var(--fs-h2);
margin-bottom: 16px;
}
.email__incentive {
color: var(--primary);
}
.email__body {
font-size: var(--fs-lead);
color: var(--neutral);
margin-bottom: 32px;
}
.email__form {
display: flex;
gap: 12px;
max-width: 480px;
margin: 0 auto;
}
.email__input {
flex: 1;
background: var(--container-low);
border: none;
border-bottom: 1px solid var(--outline-variant);
padding: 16px 18px;
color: var(--text);
font-family: var(--font-body);
font-size: var(--fs-body);
border-radius: var(--radius-md) var(--radius-md) 0 0;
transition: border-color 0.2s;
}
.email__input:focus {
outline: none;
border-bottom-color: var(--primary);
}
.email__input::placeholder { color: var(--outline); }
.email__disclaimer {
font-size: 12px;
color: var(--outline);
margin-top: 20px;
}
/* ============================================================
13. Footer
============================================================ */
.footer {
background: var(--anchor);
padding: var(--space-2xl) 0 var(--space-lg);
}
.footer__grid {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--space-lg);
display: grid;
grid-template-columns: 1.4fr repeat(4, 1fr);
gap: var(--space-lg);
margin-bottom: var(--space-xl);
}
.footer__brand {
padding-right: var(--space-lg);
}
.footer__wordmark {
font-family: var(--font-head);
font-weight: 700;
font-size: 22px;
letter-spacing: 0.12em;
color: var(--text);
margin-bottom: 16px;
}
.footer__tag {
font-size: var(--fs-small);
color: var(--neutral);
line-height: 1.6;
margin-bottom: 20px;
}
.footer__parent {
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--outline);
}
.footer__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(--text);
margin-bottom: 18px;
}
.footer__list {
list-style: none;
display: flex;
flex-direction: column;
gap: 12px;
}
.footer__list a {
font-size: var(--fs-small);
color: var(--neutral);
transition: color 0.2s;
}
.footer__list a:hover { color: var(--primary); }
.footer__social {
display: flex;
gap: 14px;
margin-top: 4px;
}
.footer__social-btn {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--container-low);
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
}
.footer__social-btn:hover { background: var(--container-high); }
.footer__social-icon {
width: 18px;
height: 18px;
fill: var(--text);
}
.footer__base {
max-width: var(--container-max);
margin: 0 auto;
padding: var(--space-lg) var(--space-lg) 0;
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-lg);
flex-wrap: wrap;
}
.footer__payments {
display: flex;
gap: 12px;
align-items: center;
}
.footer__pay {
padding: 6px 12px;
background: var(--container-low);
border-radius: var(--radius-sm);
font-family: var(--font-head);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--neutral);
}
.footer__copy {
font-size: 12px;
color: var(--outline);
}
/* ============================================================
Responsive
============================================================ */
@media (max-width: 960px) {
:root {
--fs-display: 56px;
--fs-h1: 44px;
--fs-h2: 32px;
--fs-h3: 24px;
--fs-lead: 17px;
--space-2xl: 64px;
--space-xl: 48px;
}
.nav__menu { display: none; }
.hero__inner {
grid-template-columns: 1fr;
min-height: auto;
gap: var(--space-xl);
padding: 0 var(--space-md);
}
.hero__image { min-height: 380px; }
.hero__meta { gap: 24px; }
.trust__grid { grid-template-columns: repeat(2, 1fr); padding: 0 var(--space-md); }
.section__header { padding: 0 var(--space-md); }
.cores { grid-template-columns: repeat(2, 1fr); padding: 0 var(--space-md); gap: var(--space-sm); }
.products { grid-template-columns: repeat(2, 1fr); padding: 0 var(--space-md); gap: var(--space-sm); }
.characters { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 220px); padding: 0 var(--space-md); }
.promise { grid-template-columns: 1fr; gap: var(--space-xl); padding: 0 var(--space-md); }
.reviews { grid-template-columns: 1fr; padding: 0 var(--space-md); }
.story { grid-template-columns: 1fr; gap: var(--space-xl); padding: 0 var(--space-md); }
.story__image { min-height: 380px; }
.footer__grid { grid-template-columns: 1fr 1fr; padding: 0 var(--space-md); gap: var(--space-lg); }
.footer__brand { grid-column: 1 / -1; padding-right: 0; }
.footer__base { padding: var(--space-lg) var(--space-md) 0; }
}
@media (max-width: 480px) {
.cores { grid-template-columns: 1fr; }
.products { grid-template-columns: 1fr; }
.characters { grid-template-columns: 1fr; grid-template-rows: repeat(6, 200px); }
.footer__grid { grid-template-columns: 1fr; }
.email__form { flex-direction: column; }
.promo__sep { display: inline; }
.nav__inner { padding: 16px var(--space-md); }
}
</style>
</head>
<body>
<!-- ============================================================
1. Promo bar — container
============================================================ -->
<div class="promo">
<div class="inner">
<span class="promo__text">
Global delivery in 7-10 days
<span class="promo__sep">·</span>
New drops every week
<span class="promo__sep">·</span>
30-day money-back guarantee
</span>
</div>
</div>
<!-- ============================================================
2. Navigation — anchor
============================================================ -->
<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">Offers & Deals</a></li>
<li><a href="#" class="nav__link">Blog</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="Wishlist">
<svg class="nav__icon" viewBox="0 0 24 24"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
</button>
<button aria-label="Cart" class="nav__cart">
<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>
<!-- ============================================================
3. Hero — anchor (pins regardless of cycle)
============================================================ -->
<section class="hero">
<div class="hero__inner">
<div class="hero__copy">
<div class="eyebrow hero__eyebrow">From factory floor to your door</div>
<h1 class="hero__title">Every character. Every Saber Core. <span class="hero__title-accent">Choose yours.</span></h1>
<p class="hero__lead">Hundreds of replica sabers, backed by real customer service. Global delivery in 7-10 days — honest timing, transparent tracking, a catalogue broader than any warehouse could hold.</p>
<div class="hero__actions">
<a href="#" class="btn btn--primary btn--large">Browse the catalogue</a>
<a href="#" class="btn btn--ghost btn--large">Choose a Saber Core</a>
</div>
<div class="hero__meta">
<div class="hero__meta-item">
<span class="data">Catalogue</span>
<span class="hero__meta-value">1,100 SKUs</span>
</div>
<div class="hero__meta-item">
<span class="data">Delivery</span>
<span class="hero__meta-value">7-10 days</span>
</div>
<div class="hero__meta-item">
<span class="data">Support</span>
<span class="hero__meta-value">24-hour reply</span>
</div>
</div>
</div>
<div class="placeholder hero__image">
Hero photograph: Starkiller SE dramatically side-lit on near-black ground, warm ember rim-light along the hilt, blade drawn diagonally with controlled bloom
</div>
</div>
</section>
<!-- ============================================================
4. Trust bar — container
============================================================ -->
<section class="trust">
<div class="trust__grid">
<div class="trust__item">
<svg class="trust__icon" viewBox="0 0 24 24" fill="none"><path d="M3 12a9 9 0 1 0 18 0 9 9 0 0 0-18 0z" stroke-linecap="round"/><path d="M3 12h18M12 3a15 15 0 0 1 0 18M12 3a15 15 0 0 0 0 18" stroke-linecap="round"/></svg>
<div>
<div class="trust__label">Global delivery — 7-10 days</div>
<div class="trust__detail">Direct from our partner factory, worldwide.</div>
</div>
</div>
<div class="trust__item">
<svg class="trust__icon" viewBox="0 0 24 24" fill="none"><path d="M21 12a9 9 0 1 1-8-9M21 5v6h-6" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 8v4l3 2" stroke-linecap="round"/></svg>
<div>
<div class="trust__label">Real customer service</div>
<div class="trust__detail">24-hour initial response. A named point of contact.</div>
</div>
</div>
<div class="trust__item">
<svg class="trust__icon" viewBox="0 0 24 24" fill="none"><path d="M4 4h16v4H4zM6 8v12h12V8M9 12h6" stroke-linecap="round" stroke-linejoin="round"/></svg>
<div>
<div class="trust__label">1,100 sabers to choose from</div>
<div class="trust__detail">Every character. Every Saber Core. Every grade.</div>
</div>
</div>
<div class="trust__item">
<svg class="trust__icon" viewBox="0 0 24 24" fill="none"><path d="M12 2 4 6v6c0 5 3.5 9 8 10 4.5-1 8-5 8-10V6l-8-4z" stroke-linejoin="round"/><path d="m9 12 2 2 4-4" stroke-linecap="round" stroke-linejoin="round"/></svg>
<div>
<div class="trust__label">30-day money-back guarantee</div>
<div class="trust__detail">We're here when something goes wrong.</div>
</div>
</div>
</div>
</section>
<!-- ============================================================
5. Choose your Saber Core — anchor
============================================================ -->
<section class="section section--anchor">
<div class="section__header">
<div>
<div class="eyebrow" style="margin-bottom: 14px;">Choose your Saber Core</div>
<h2 class="section__title">Four tiers of electronics, one honest ladder.</h2>
<p class="section__lede">Bluetooth app connectivity and infinite blade colours come standard on our baselit tiers — features most shops reserve for mid-tier and up.</p>
</div>
<a href="#" class="section__link">Compare all cores →</a>
</div>
<div class="cores">
<article class="core">
<div class="placeholder core__image">S-RGB baselit hilt, controlled side-light</div>
<div class="core__badge">S-RGB · Baselit</div>
<h3 class="core__title">S-RGB</h3>
<div class="core__price">From $89</div>
<p class="core__desc">Entry-tier baselit with Bluetooth app control and infinite colours as standard. The most sabers per dollar in the catalogue.</p>
<a href="#" class="core__cta">Learn more →</a>
</article>
<article class="core">
<div class="placeholder core__image">RGB-X hilt with rim-light along pommel</div>
<div class="core__badge">RGB-X · Baselit +</div>
<h3 class="core__title">RGB-X</h3>
<div class="core__price">From $149</div>
<p class="core__desc">Upgraded baselit with expanded sound-font library and refined blade response. Bluetooth app config standard.</p>
<a href="#" class="core__cta">Learn more →</a>
</article>
<article class="core">
<div class="placeholder core__image">Xenopixel V3 blade lit ember, hilt in shadow</div>
<div class="core__badge">Xenopixel V3 · Pixel</div>
<h3 class="core__title">Xenopixel V3</h3>
<div class="core__price">From $299</div>
<p class="core__desc">Individually addressable pixel blade with 34 sound fonts. Blaster-block, blade effects, deep colour range.</p>
<a href="#" class="core__cta">Learn more →</a>
</article>
<article class="core">
<div class="placeholder core__image">Proffie 2.2 hilt, activation switch highlighted</div>
<div class="core__badge">Proffie 2.2 · Programmable</div>
<h3 class="core__title">Proffie 2.2</h3>
<div class="core__price">From $499</div>
<p class="core__desc">Fully programmable saber board. Custom fonts, custom animations, community-supported. Duelist and enthusiast tier.</p>
<a href="#" class="core__cta">Learn more →</a>
</article>
</div>
</section>
<!-- ============================================================
6. Fan favourites — bright
============================================================ -->
<section class="section section--bright">
<div class="section__header">
<div>
<div class="eyebrow" style="margin-bottom: 14px;">Fan favourites</div>
<h2 class="section__title">The sabers our collectors, duelists and cosplayers keep coming back to.</h2>
</div>
<a href="#" class="section__link">Shop all sabers →</a>
</div>
<div class="products">
<article class="product">
<div class="product__image-wrap">
<div class="placeholder product__image">Ahsoka Tano twin sabers, ember rim-light on curved hilts</div>
</div>
<div class="product__badge">Xenopixel V3</div>
<h3 class="product__title">Clone Wars Ahsoka Tano — Duelling</h3>
<div class="product__meta">
<span class="product__price">$534.99</span>
<div class="product__stars">
<svg class="product__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
<svg class="product__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
<svg class="product__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
<svg class="product__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
<svg class="product__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
</div>
</div>
<div class="product__specs">
<span class="product__spec">Heavy grade</span>
<span class="product__spec">34 fonts</span>
</div>
</article>
<article class="product">
<div class="product__image-wrap">
<div class="placeholder product__image">Starkiller SE hilt in three-quarter view, ember rim-light along vents</div>
</div>
<div class="product__badge">Proffie 2.2</div>
<h3 class="product__title">Starkiller SE</h3>
<div class="product__meta">
<span class="product__price">$449.99</span>
<div class="product__stars">
<svg class="product__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
<svg class="product__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
<svg class="product__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
<svg class="product__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
<svg class="product__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
</div>
</div>
<div class="product__specs">
<span class="product__spec">Heavy grade</span>
<span class="product__spec">Programmable</span>
</div>
</article>
<article class="product">
<div class="product__image-wrap">
<div class="placeholder product__image">Darth Vader ROTJ hilt lit dramatically from below</div>
</div>
<div class="product__badge">Xenopixel V3</div>
<h3 class="product__title">Darth Vader EP6 ROTJ</h3>
<div class="product__meta">
<span class="product__price">$619.99</span>
<div class="product__stars">
<svg class="product__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
<svg class="product__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
<svg class="product__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
<svg class="product__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
<svg class="product__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
</div>
</div>
<div class="product__specs">
<span class="product__spec">Heavy grade</span>
<span class="product__spec">Character replica</span>
</div>
</article>
<article class="product">
<div class="product__image-wrap">
<div class="placeholder product__image">Mace Windu SE hilt, cool violet blade with ember trim</div>
</div>
<div class="product__badge">Proffie 2.2</div>
<h3 class="product__title">Mace Windu SE</h3>
<div class="product__meta">
<span class="product__price">$499.99</span>
<div class="product__stars">
<svg class="product__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
<svg class="product__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
<svg class="product__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
<svg class="product__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
<svg class="product__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
</div>
</div>
<div class="product__specs">
<span class="product__spec">Heavy grade</span>
<span class="product__spec">Programmable</span>
</div>
</article>
</div>
</section>
<!-- ============================================================
7. Shop by Character — anchor
============================================================ -->
<section class="section section--anchor">
<div class="section__header">
<div>
<div class="eyebrow" style="margin-bottom: 14px;">Shop by Character</div>
<h2 class="section__title">Find your faction.</h2>
<p class="section__lede">Character-faithful replicas across every era of the galaxy. Pick a side.</p>
</div>
</div>
<div class="characters">
<a href="#" class="character">
<div class="placeholder character__placeholder">Character tile: Jedi hilt array laid on dark cloth, cool blade wash</div>
<div>
<span class="character__label">Jedi</span>
<span class="character__count">42 sabers</span>
</div>
</a>
<a href="#" class="character">
<div class="placeholder character__placeholder">Character tile: Sith blade edge-on, ember bloom, hilt fading to shadow</div>
<div>
<span class="character__label">Sith</span>
<span class="character__count">28 sabers</span>
</div>
</a>
<a href="#" class="character">
<div class="placeholder character__placeholder">Character tile: Mandalorian darksaber silhouette, warm rim-light</div>
<div>
<span class="character__label">Mandalorian</span>
<span class="character__count">14 sabers</span>
</div>
</a>
<a href="#" class="character">
<div class="placeholder character__placeholder">Character tile: Ahsoka + Rex-era hilt pair, controlled side-lighting</div>
<div>
<span class="character__label">Clone Wars</span>
<span class="character__count">36 sabers</span>
</div>
</a>
<a href="#" class="character">
<div class="placeholder character__placeholder">Character tile: Original Trilogy hilt lineup, near-black ground</div>
<div>
<span class="character__label">Original Trilogy</span>
<span class="character__count">22 sabers</span>
</div>
</a>
<a href="#" class="character">
<div class="placeholder character__placeholder">Character tile: New Republic sabers, atmospheric side-light</div>
<div>
<span class="character__label">New Republic</span>
<span class="character__count">18 sabers</span>
</div>
</a>
</div>
</section>
<!-- ============================================================
8. New arrivals — container
============================================================ -->
<section class="section section--container">
<div class="section__header">
<div>
<div class="eyebrow" style="margin-bottom: 14px;">New arrivals</div>
<h2 class="section__title">Fresh from the factory.</h2>
<p class="section__lede">Four new hilts this month. Two ARTSABERS Exclusive originals, two character replicas.</p>
</div>
<a href="#" class="section__link">See all new →</a>
</div>
<div class="products">
<article class="product">
<div class="product__image-wrap">
<span class="product__flag">New</span>
<div class="placeholder product__image">Carbon Strike hilt: angular sci-fi-katana silhouette, ember accents</div>
</div>
<div class="product__badge">Xenopixel V3 · Exclusive</div>
<h3 class="product__title">Carbon Strike</h3>
<div class="product__meta">
<span class="product__price">$349.99</span>
<div class="product__stars">
<svg class="product__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
<svg class="product__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
<svg class="product__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
<svg class="product__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
<svg class="product__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
</div>
</div>
<div class="product__specs">
<span class="product__spec">Heavy grade</span>
<span class="product__spec">ARTSABERS Exclusive</span>
</div>
</article>
<article class="product">
<div class="product__image-wrap">
<span class="product__flag">New</span>
<div class="placeholder product__image">Dark Hunter hilt: matte-black shroud with warm inner glow</div>
</div>
<div class="product__badge">Proffie 2.2 · Exclusive</div>
<h3 class="product__title">Dark Hunter</h3>
<div class="product__meta">
<span class="product__price">$559.99</span>
<div class="product__stars">
<svg class="product__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
<svg class="product__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
<svg class="product__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
<svg class="product__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
<svg class="product__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
</div>
</div>
<div class="product__specs">
<span class="product__spec">Heavy grade</span>
<span class="product__spec">Programmable</span>
</div>
</article>
<article class="product">
<div class="product__image-wrap">
<span class="product__flag">New</span>
<div class="placeholder product__image">Elzar Mann hilt: refined High Republic silhouette, cool side-light</div>
</div>
<div class="product__badge">Xenopixel V3</div>
<h3 class="product__title">Elzar Mann</h3>
<div class="product__meta">
<span class="product__price">$389.99</span>
<div class="product__stars">
<svg class="product__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
<svg class="product__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
<svg class="product__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
<svg class="product__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
<svg class="product__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
</div>
</div>
<div class="product__specs">
<span class="product__spec">Heavy grade</span>
<span class="product__spec">Character replica</span>
</div>
</article>
<article class="product">
<div class="product__image-wrap">
<span class="product__flag">New</span>
<div class="placeholder product__image">Shadow Vanguard hilt: stealth matte finish, faint ember trim</div>
</div>
<div class="product__badge">RGB-X · Exclusive</div>
<h3 class="product__title">Shadow Vanguard</h3>
<div class="product__meta">
<span class="product__price">$219.99</span>
<div class="product__stars">
<svg class="product__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
<svg class="product__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
<svg class="product__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
<svg class="product__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
<svg class="product__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
</div>
</div>
<div class="product__specs">
<span class="product__spec">Light grade</span>
<span class="product__spec">Bluetooth app</span>
</div>
</article>
</div>
</section>
<!-- ============================================================
9. Factory-direct + customer service — anchor
============================================================ -->
<section class="section section--anchor">
<div class="promise__intro">
<div class="eyebrow" style="margin-bottom: 14px;">Our promise</div>
<h2 class="promise__title">Honest timing. Real support.</h2>
<p class="promise__lede">We don't warehouse in the US. We ship direct from our partner factory, and we stay in the conversation after your order.</p>
</div>
<div class="promise">
<div class="promise__panel">
<span class="promise__eyebrow">Global delivery</span>
<h3 class="promise__head"><span class="promise__head-accent">Factory-direct</span> global delivery.</h3>
<p class="promise__body">Every saber ships directly from our partner factory in 7-10 days. Honest timing. Transparent tracking. A catalogue broader than any single warehouse could ever hold.</p>
<ul class="promise__list">
<li>
<svg class="promise__tick" viewBox="0 0 24 24"><path d="m5 12 4 4L19 6" stroke-linecap="round" stroke-linejoin="round"/></svg>
<span>7-10 day worldwide delivery from despatch</span>
</li>
<li>
<svg class="promise__tick" viewBox="0 0 24 24"><path d="m5 12 4 4L19 6" stroke-linecap="round" stroke-linejoin="round"/></svg>
<span>Full tracking from factory floor to your door</span>
</li>
<li>
<svg class="promise__tick" viewBox="0 0 24 24"><path d="m5 12 4 4L19 6" stroke-linecap="round" stroke-linejoin="round"/></svg>
<span>1,100 SKUs — every character, every Saber Core</span>
</li>
</ul>
<a href="#" class="btn btn--ghost promise__cta">Read our shipping promise</a>
</div>
<div class="promise__panel">
<span class="promise__eyebrow">Customer service</span>
<h3 class="promise__head"><span class="promise__head-accent">Real</span> customer service.</h3>
<p class="promise__body">A 24-hour initial response window. A named single point of contact after you order. We're here when something goes wrong — most factory-direct shops disappear after payment. We don't.</p>
<ul class="promise__list">
<li>
<svg class="promise__tick" viewBox="0 0 24 24"><path d="m5 12 4 4L19 6" stroke-linecap="round" stroke-linejoin="round"/></svg>
<span>24-hour initial response, every ticket</span>
</li>
<li>
<svg class="promise__tick" viewBox="0 0 24 24"><path d="m5 12 4 4L19 6" stroke-linecap="round" stroke-linejoin="round"/></svg>
<span>A named single point of contact post-purchase</span>
</li>
<li>
<svg class="promise__tick" viewBox="0 0 24 24"><path d="m5 12 4 4L19 6" stroke-linecap="round" stroke-linejoin="round"/></svg>
<span>30-day money-back guarantee, no small print</span>
</li>
</ul>
<a href="#" class="btn btn--ghost promise__cta">Meet the team</a>
</div>
</div>
</section>
<!-- ============================================================
10. Reviews / testimonials — bright
============================================================ -->
<section class="section section--bright">
<div class="section__header">
<div>
<div class="eyebrow" style="margin-bottom: 14px;">From our fans</div>
<h2 class="section__title">What collectors, duelists and cosplayers say.</h2>
</div>
</div>
<div class="reviews">
<article class="review">
<div class="review__stars">
<svg class="review__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
<svg class="review__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
<svg class="review__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
<svg class="review__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
<svg class="review__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
</div>
<p class="review__body">"The Ahsoka duelling hilts arrived exactly when they said. Weight is real, blade holds up to sparring. When I had a font question the reply came back the next morning — from a person, not a template."</p>
<div class="review__footer">
<span class="review__name">Marcus H. — Portland, OR</span>
<span class="review__product">Ahsoka Tano Duelling</span>
</div>
</article>
<article class="review">
<div class="review__stars">
<svg class="review__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
<svg class="review__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
<svg class="review__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
<svg class="review__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
<svg class="review__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
</div>
<p class="review__body">"Bought a Starkiller SE for a con build. The 7-10 day window they quoted was accurate to the day. The Bluetooth colour picker on the S-RGB is a nicer app than I expected at that tier."</p>
<div class="review__footer">
<span class="review__name">Priya S. — Melbourne</span>
<span class="review__product">Starkiller SE</span>
</div>
</article>
<article class="review">
<div class="review__stars">
<svg class="review__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
<svg class="review__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
<svg class="review__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
<svg class="review__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
<svg class="review__star" viewBox="0 0 24 24"><path d="m12 2 3 7h7l-6 4 2 8-6-5-6 5 2-8-6-4h7z"/></svg>
</div>
<p class="review__body">"Ordered a Carbon Strike after seeing it in the exclusives. The design language is genuinely its own thing — not a canon replica dressed up. Support walked me through Proffie font swaps over a couple of emails."</p>
<div class="review__footer">
<span class="review__name">Jamie R. — Auckland</span>
<span class="review__product">Carbon Strike</span>
</div>
</article>
</div>
</section>
<!-- ============================================================
11. Brand story — anchor
============================================================ -->
<section class="section section--anchor">
<div class="story">
<div class="placeholder story__image">
Workshop moment: a lit ember-blade hilt on a hand-built workbench, warm rim-light, the founder's silhouette out of focus in the background
</div>
<div>
<div class="eyebrow story__eyebrow">Our story</div>
<h2 class="story__title">Fan-founded. Fan-run. Fan-served.</h2>
<p class="story__body">Founded in Latvia in 2020 by a Star Wars fan who couldn't find the shop he wanted to buy from. Now part of Nerdworks.</p>
<p class="story__quote">"Your saber isn't just another purchase. We sell every replica saber a fan could want, with the customer service most factory-direct shops won't give."</p>
<p class="story__body">Every character, every Saber Core, every duelling grade. Collectors, duelists and cosplayers — one catalogue, one team, one promise.</p>
<div class="story__actions">
<a href="#" class="btn btn--primary">Our story</a>
<a href="#" class="btn btn--ghost">Meet the team</a>
</div>
</div>
</div>
</section>
<!-- ============================================================
12. Email capture — container
============================================================ -->
<section class="section section--container">
<div class="email">
<div class="eyebrow email__eyebrow">Join the crew</div>
<h2 class="email__title"><span class="email__incentive">10% off</span> your first saber.</h2>
<p class="email__body">Plus early access to new drops, ARTSABERS Exclusive designs, and honest workshop updates from the team.</p>
<form class="email__form">
<input type="email" class="email__input" placeholder="you@example.com" aria-label="Email address">
<button type="submit" class="btn btn--primary">Subscribe</button>
</form>
<p class="email__disclaimer">One email a week at most. Unsubscribe anytime.</p>
</div>
</section>
<!-- ============================================================
13. Footer — anchor
============================================================ -->
<footer class="footer">
<div class="footer__grid">
<div class="footer__brand">
<div class="footer__wordmark">ARTSABERS</div>
<p class="footer__tag">From factory floor to your door. Every character, every Saber Core, every duelling grade.</p>
<div class="footer__parent">A Nerdworks brand</div>
</div>
<div>
<div class="footer__col-head">Shop</div>
<ul class="footer__list">
<li><a href="#">Lightsabers</a></li>
<li><a href="#">Cosplay Helmets</a></li>
<li><a href="#">Parts & Accessories</a></li>
<li><a href="#">Offers & Deals</a></li>
<li><a href="#">Budget Sabers Under $100</a></li>
</ul>
</div>
<div>
<div class="footer__col-head">Support</div>
<ul class="footer__list">
<li><a href="#">Contact us</a></li>
<li><a href="#">Shipping policy</a></li>
<li><a href="#">Returns</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Track order</a></li>
</ul>
</div>
<div>
<div class="footer__col-head">Company</div>
<ul class="footer__list">
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Affiliates</a></li>
<li><a href="#">Saber 66 (UK & EU)</a></li>
</ul>
</div>
<div>
<div class="footer__col-head">Connect</div>
<div class="footer__social">
<a href="#" class="footer__social-btn" aria-label="Instagram">
<svg class="footer__social-icon" viewBox="0 0 24 24"><path d="M12 2.2c3.2 0 3.6 0 4.9.1 3.3.2 4.8 1.7 5 5 .1 1.3.1 1.7.1 4.9s0 3.6-.1 4.9c-.2 3.3-1.7 4.8-5 5-1.3.1-1.7.1-4.9.1s-3.6 0-4.9-.1c-3.3-.2-4.8-1.7-5-5C2 15.6 2 15.2 2 12s0-3.6.1-4.9c.2-3.3 1.7-4.8 5-5C8.4 2 8.8 2 12 2zm0 4.6a5.2 5.2 0 1 0 0 10.4 5.2 5.2 0 0 0 0-10.4zm0 8.6a3.4 3.4 0 1 1 0-6.8 3.4 3.4 0 0 1 0 6.8zm5.4-8.8a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4z"/></svg>
</a>
<a href="#" class="footer__social-btn" aria-label="TikTok">
<svg class="footer__social-icon" viewBox="0 0 24 24"><path d="M19.6 6.7c-1.7-.4-3-1.6-3.6-3.2h-3v13.3c0 1.5-1.2 2.7-2.7 2.7s-2.7-1.2-2.7-2.7 1.2-2.7 2.7-2.7c.3 0 .5 0 .8.1v-3.1c-.3 0-.5-.1-.8-.1a5.8 5.8 0 1 0 5.8 5.8V9.3c1.2.8 2.6 1.3 4.1 1.4V7.7c-.2 0-.4 0-.6-.1v-.9z"/></svg>
</a>
<a href="#" class="footer__social-btn" aria-label="YouTube">
<svg class="footer__social-icon" viewBox="0 0 24 24"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.2C19.6 3.5 12 3.5 12 3.5s-7.6 0-9.4.5A3 3 0 0 0 .5 6.2C0 8 0 12 0 12s0 4 .5 5.8a3 3 0 0 0 2.1 2.2c1.9.5 9.4.5 9.4.5s7.6 0 9.4-.5a3 3 0 0 0 2.1-2.2c.5-1.9.5-5.8.5-5.8s0-4-.5-5.8zM9.6 15.6V8.4l6.3 3.6-6.3 3.6z"/></svg>
</a>
<a href="#" class="footer__social-btn" aria-label="Facebook">
<svg class="footer__social-icon" viewBox="0 0 24 24"><path d="M22 12a10 10 0 1 0-11.6 9.9v-7H8v-3h2.4V9.8c0-2.4 1.4-3.7 3.6-3.7 1 0 2.1.2 2.1.2v2.3h-1.2c-1.2 0-1.5.7-1.5 1.5V12h2.6l-.4 3h-2.2v7A10 10 0 0 0 22 12z"/></svg>
</a>
<a href="#" class="footer__social-btn" aria-label="Threads">
<svg class="footer__social-icon" viewBox="0 0 24 24"><path d="M17.5 11c-.1-.1-.3-.1-.4-.2.2-2.7-1.4-4.7-4.2-4.7-1.7 0-3.1.8-3.9 2.2l1.6.9c.5-.9 1.3-1.4 2.3-1.4 1.6 0 2.4.9 2.5 2.5-.6-.1-1.2-.2-1.9-.2-2.4 0-4.1 1.3-4 3.3.1 1.9 1.6 3.1 3.7 3 1.7-.1 3-1 3.5-2.4.4.2.8.5 1 .8.6.7.6 1.9-.2 2.7-1.1 1.1-3.4 1.5-5.5.3-2.4-1.3-3.3-4.3-3.3-6.9 0-3.4 1.4-6 4.8-6.6 4.2-.7 6.6 2 6.8 4.9.5.1 1.1.3 1.6.6-.3-3.5-3-6-6.5-6.4-4.4-.5-7.6 2.2-7.6 7.4 0 3.1 1.3 6.5 3.8 8.1 2.5 1.5 5.6 1.1 7.3-.5 1.3-1.3 1.5-3.2.5-4.5-.4-.5-.9-.9-1.5-1.1z"/></svg>
</a>
</div>
</div>
</div>
<div class="footer__base">
<div class="footer__payments">
<span class="footer__pay">VISA</span>
<span class="footer__pay">MASTERCARD</span>
<span class="footer__pay">AMEX</span>
<span class="footer__pay">APPLE PAY</span>
</div>
<div class="footer__copy">© 2026 ARTSABERS. All rights reserved.</div>
</div>
</footer>
</body>
</html>