/wire-template.
<!DOCTYPE html>
<?xml encoding="utf-8"?><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anakin EP3 Lightsaber — Free Spare Blade This Week · ARTSABERS</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&family=Orbitron:wght@400;500;600;700;800&family=Onest:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>:root {
/* Ember ombre */
--ember-glow: #FFB347;
--ember-bright: #FF9540;
--ember: #FF7A2E;
--ember-forge: #E85D18;
--ember-deep: #D14810;
--ember-smoulder: #8B2E08;
--ember-scar: #5A1A00;
--on-primary-fixed: #2A0800;
/* Hull ladder */
--carbon: #060606;
--void: #0A0A0A;
--charcoal: #141414;
--charcoal-warm: #161412;
--hull-panel: #1A1A1A;
--hull-panel-lift: #242424;
--hull-panel-dark: #0F0F0F;
--hull-chrome-shadow: #2E2E2E;
--hull-edge: #363636;
/* Chrome / highlights */
--chrome-highlight: #FAFAFA;
--chrome-glint: #E8E4DD;
--chrome-warm: #F5F0E8;
--chrome-dim: #B8B0A6;
/* Surface roles (semantic — used for backgrounds/text so blocks re-tone across styleguides) */
--bg-page: var(--carbon);
--bg-hero: var(--carbon);
--bg-section: var(--charcoal);
--bg-section-alt: var(--charcoal-warm);
--bg-section-deep: var(--void);
--bg-carbon-panel: var(--void);
--bg-card: var(--hull-panel);
--bg-card-elevated: var(--hull-panel-lift);
--bg-card-inner: var(--hull-panel-dark);
--bg-footer: var(--carbon);
--bg-nav: var(--carbon);
/* Text roles per ground */
--text-heading: var(--chrome-highlight);
--text-body: var(--chrome-warm);
--text-dim: var(--chrome-dim);
--text-glint: var(--chrome-glint);
/* Type */
--font-display: 'Orbitron', system-ui, -apple-system, sans-serif;
--font-body: 'Onest', system-ui, -apple-system, sans-serif;
/* Shadows */
--panel-lift: inset 0 1px 0 rgba(250,250,250,0.08), 0 8px 24px -8px rgba(0,0,0,0.9);
--panel-lift-hover: inset 0 1px 0 rgba(250,250,250,0.15), 0 16px 40px -8px rgba(0,0,0,0.95);
--ember-hot-rim: inset 0 0 0 1px rgba(255,122,46,0.6), 0 0 24px rgba(255,122,46,0.5);
--ember-glow-sm: 0 0 16px rgba(255,122,46,0.35);
--ember-glow-md: 0 0 28px rgba(255,122,46,0.55);
--chrome-top-soft: inset 0 1px 0 rgba(250,250,250,0.10);
--chrome-top-hint: inset 0 1px 0 rgba(250,250,250,0.35);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
background: var(--bg-page);
color: var(--text-body);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body { min-width: 320px; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
/* ==================================================
1. NAV — minimal PPC landing nav
================================================== */
.landing-nav {
position: sticky;
top: 0;
z-index: 100;
background: var(--bg-nav);
height: 64px;
border-bottom: 1px solid rgba(255, 122, 46, 0.35);
box-shadow: 0 1px 0 rgba(255,122,46,0.15), 0 8px 20px -12px rgba(0,0,0,0.9);
}
.landing-nav__inner {
max-width: 1440px;
height: 100%;
margin: 0 auto;
padding: 0 40px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.landing-nav__brand {
font-family: var(--font-display);
font-weight: 700;
font-size: 20px;
letter-spacing: 0.14em;
color: var(--chrome-highlight);
text-transform: uppercase;
display: inline-flex;
align-items: baseline;
}
.landing-nav__brand span { color: var(--ember); padding: 0 2px; }
.landing-nav__right {
display: flex;
align-items: center;
gap: 20px;
}
.landing-nav__chip {
font-family: var(--font-body);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--chrome-dim);
font-weight: 500;
}
.landing-nav__cta {
font-family: var(--font-display);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--on-primary-fixed);
background: linear-gradient(180deg, var(--ember-glow) 0%, var(--ember) 50%, var(--ember-deep) 100%);
padding: 12px 22px;
box-shadow: var(--ember-glow-sm);
transition: box-shadow 200ms ease;
}
.landing-nav__cta:hover { box-shadow: var(--ember-glow-md); }
/* ==================================================
2. HERO — full-bleed atmospheric
================================================== */
.landing-hero {
position: relative;
background: var(--bg-hero);
min-height: 720px;
display: flex;
align-items: flex-end;
overflow: hidden;
isolation: isolate;
}
.landing-hero__photo {
position: absolute;
inset: 0;
background-image: url('https://artsabers.com/wp-content/uploads/sites/10/2025/03/Anakin-Skywalker-Ep-3-Lightsaber-Xenopixel-V3.jpg');
background-size: cover;
background-position: center;
z-index: 0;
filter: contrast(1.05) brightness(0.85);
}
.landing-hero__vignette {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 15% 15%, rgba(255,122,46,0.24) 0%, transparent 40%),
radial-gradient(ellipse at 100% 60%, rgba(6,6,6,0.4) 20%, transparent 60%),
linear-gradient(180deg, rgba(6,6,6,0.55) 0%, rgba(6,6,6,0.15) 40%, rgba(6,6,6,0.75) 78%, var(--carbon) 100%);
z-index: 1;
}
.landing-hero__inner {
position: relative;
z-index: 2;
max-width: 1440px;
width: 100%;
margin: 0 auto;
padding: 88px 40px 96px;
}
.landing-hero__copy { max-width: 720px; }
.landing-hero__eyebrow {
font-family: var(--font-display);
font-weight: 600;
font-size: 13px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ember);
margin-bottom: 28px;
display: inline-flex;
align-items: center;
gap: 12px;
}
.landing-hero__eyebrow::before {
content: '';
width: 32px;
height: 1px;
background: var(--ember);
box-shadow: 0 0 8px rgba(255,122,46,0.7);
}
.landing-hero__title {
font-family: var(--font-display);
font-weight: 500;
font-size: 80px;
line-height: 1.02;
letter-spacing: 0.8px;
color: var(--chrome-highlight);
margin-bottom: 28px;
text-wrap: balance;
}
.landing-hero__title em {
font-style: italic;
font-weight: 500;
color: var(--chrome-glint);
}
.landing-hero__subline {
font-family: var(--font-body);
font-size: 19px;
line-height: 1.5;
color: var(--chrome-warm);
margin-bottom: 40px;
max-width: 640px;
}
.landing-hero__cta {
display: inline-flex;
align-items: center;
justify-content: center;
width: 380px;
max-width: 100%;
height: 60px;
font-family: var(--font-display);
font-size: 16px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--on-primary-fixed);
background: linear-gradient(180deg, var(--ember-glow) 0%, var(--ember) 50%, var(--ember-deep) 100%);
box-shadow: 0 0 24px rgba(255,122,46,0.45), inset 0 1px 0 rgba(255,255,255,0.25);
transition: box-shadow 200ms ease;
}
.landing-hero__cta:hover { box-shadow: 0 0 40px rgba(255,122,46,0.7), inset 0 1px 0 rgba(255,255,255,0.35); }
.landing-hero__trust {
margin-top: 20px;
font-family: var(--font-body);
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--chrome-dim);
font-weight: 500;
}
.landing-hero__trust span { color: var(--chrome-warm); }
.landing-hero__panelend {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 72px;
background: linear-gradient(180deg, transparent 0%, rgba(255,122,46,0.06) 60%, rgba(255,122,46,0.14) 100%);
pointer-events: none;
z-index: 3;
}
/* ==================================================
PANEL SEAM (canonical hairline + ember glow separator)
================================================== */
.panel-seam {
position: relative;
height: 1px;
background: var(--ember);
opacity: 0.75;
box-shadow: 0 0 22px 4px rgba(255,122,46,0.45), 0 0 60px 8px rgba(255,122,46,0.18);
}
.panel-seam::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 1px;
height: 1px;
background: rgba(250, 250, 250, 0.28);
}
/* ==================================================
3. EXPLAINER TRIPTYCH — 3-cell visual explainer
================================================== */
.explainer-triptych {
background: var(--bg-carbon-panel);
padding: 88px 40px;
}
.explainer-triptych__inner { max-width: 1440px; margin: 0 auto; }
.explainer-triptych__eyebrow {
font-family: var(--font-display);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--chrome-dim);
text-align: center;
margin-bottom: 32px;
}
.explainer-triptych__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: rgba(255,122,46,0.16);
}
.explainer-triptych__cell {
background: var(--bg-carbon-panel);
display: flex;
flex-direction: column;
}
.explainer-triptych__media {
aspect-ratio: 4/3;
background: var(--hull-panel-dark);
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;
}
.explainer-triptych__media::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(6,6,6,0) 55%, rgba(6,6,6,0.55) 100%);
}
.explainer-triptych__cell--sound .explainer-triptych__media {
background-image: url('https://artsabers.com/wp-content/uploads/sites/10/2025/03/Anakin-Skywalker-Ep-3-Lightsaber-Xenopixel-V3-4.jpg');
}
.explainer-triptych__cell--blade .explainer-triptych__media {
background-image: url('https://artsabers.com/wp-content/uploads/sites/10/2025/03/Anakin-Skywalker-Ep-3-Lightsaber-Xenopixel-V3-2.jpg');
}
.explainer-triptych__cell--colour .explainer-triptych__media {
background-image: url('https://artsabers.com/wp-content/uploads/sites/10/2025/03/Anakin-Skywalker-Ep-3-Lightsaber-Xenopixel-V3-6.jpg');
}
.explainer-triptych__body { padding: 36px 32px 40px; flex: 1; }
.explainer-triptych__index {
font-family: var(--font-display);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ember);
margin-bottom: 16px;
display: inline-flex;
align-items: center;
gap: 10px;
}
.explainer-triptych__index::before {
content: '';
width: 18px;
height: 1px;
background: var(--ember);
}
.explainer-triptych__title {
font-family: var(--font-display);
font-weight: 500;
font-size: 28px;
line-height: 1.15;
letter-spacing: 0.8px;
color: var(--chrome-highlight);
margin-bottom: 14px;
}
.explainer-triptych__body-text {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
color: var(--chrome-warm);
}
/* ==================================================
4. WORKSHOP SPLIT — narrative + atmospheric image
================================================== */
.workshop-split {
background: var(--bg-section-alt);
position: relative;
overflow: hidden;
}
.workshop-split::before {
/* Hull-plate carbon plate ground — no middle seam (interferes with prose text; seams belong at section boundaries per direction rule). Canonical topic-row pattern is base gradient only at this scale. */
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(180deg, #060605 0%, #080706 50%, #060605 100%);
opacity: 0.62;
z-index: 0;
}
.workshop-split::after {
content: '';
position: absolute;
inset: 0;
background: rgba(22, 20, 18, 0.66);
z-index: 1;
}
.workshop-split__inner {
position: relative;
z-index: 2;
max-width: 1440px;
margin: 0 auto;
padding: 96px 40px;
display: grid;
grid-template-columns: 55fr 45fr;
gap: 64px;
align-items: stretch;
}
.workshop-split__copy { padding: 8px 0; }
.workshop-split__eyebrow {
font-family: var(--font-display);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ember);
margin-bottom: 22px;
display: inline-flex;
align-items: center;
gap: 12px;
}
.workshop-split__eyebrow::before {
content: '';
width: 28px;
height: 1px;
background: var(--ember);
box-shadow: 0 0 8px rgba(255,122,46,0.6);
}
.workshop-split__title {
font-family: var(--font-display);
font-weight: 500;
font-size: 44px;
line-height: 1.1;
letter-spacing: 0.8px;
color: var(--chrome-highlight);
margin-bottom: 34px;
text-wrap: balance;
}
.workshop-split__prose p {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.7;
color: var(--chrome-warm);
margin-bottom: 18px;
}
.workshop-split__prose p:last-child { margin-bottom: 0; }
.workshop-split__rule {
margin-top: 30px;
padding-top: 24px;
border-top: 1px solid rgba(184, 176, 166, 0.15);
font-family: var(--font-body);
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--chrome-dim);
font-weight: 500;
}
.workshop-split__rule strong { color: var(--chrome-warm); font-weight: 500; }
.workshop-split__media {
position: relative;
min-height: 540px;
background: var(--hull-panel-dark);
background-image: url('https://artsabers.com/wp-content/uploads/sites/10/2025/03/Anakin-Skywalker-Ep-3-Lightsaber-Xenopixel-V3-1.jpg');
background-size: cover;
background-position: center;
box-shadow: var(--panel-lift), 0 0 60px -20px rgba(255,122,46,0.35);
}
.workshop-split__media::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 100% 0%, rgba(255,122,46,0.30) 0%, transparent 50%),
linear-gradient(180deg, rgba(6,6,6,0.1) 0%, rgba(6,6,6,0.55) 100%);
}
.workshop-split__media::after {
content: '';
position: absolute;
inset: 0;
box-shadow: inset 0 1px 0 rgba(250,250,250,0.20);
pointer-events: none;
}
.workshop-split__caption {
position: absolute;
bottom: 24px;
left: 24px;
right: 24px;
z-index: 2;
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--chrome-glint);
font-weight: 500;
}
.workshop-split__caption span { color: var(--ember); padding-right: 10px; }
/* ==================================================
5. BLADE SHOWREEL — CSS-simulated colour tiles
================================================== */
.blade-showreel {
background: var(--bg-carbon-panel);
padding: 80px 40px 96px;
position: relative;
}
.blade-showreel__topseam {
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(255,122,46,0.6) 30%, rgba(255,179,71,0.7) 50%, rgba(255,122,46,0.6) 70%, transparent 100%);
box-shadow: 0 0 20px rgba(255,122,46,0.25);
}
.blade-showreel__inner { max-width: 1440px; margin: 0 auto; text-align: center; }
.blade-showreel__eyebrow {
font-family: var(--font-display);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ember);
margin-bottom: 18px;
}
.blade-showreel__title {
font-family: var(--font-display);
font-weight: 500;
font-size: 36px;
line-height: 1.15;
letter-spacing: 0.8px;
color: var(--chrome-highlight);
margin-bottom: 14px;
}
.blade-showreel__subline {
font-family: var(--font-body);
font-size: 16px;
color: var(--chrome-dim);
margin-bottom: 48px;
}
.blade-showreel__grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 12px;
}
.blade-tile {
--blade-color: #FF7A2E;
position: relative;
aspect-ratio: 180/220;
background: linear-gradient(180deg, var(--hull-panel-dark) 0%, var(--carbon) 100%);
box-shadow: var(--panel-lift);
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
padding: 12px 8px;
}
.blade-tile::before {
content: '';
position: absolute;
inset: 0;
box-shadow: inset 0 1px 0 rgba(250,250,250,0.14);
pointer-events: none;
z-index: 4;
}
.blade-tile__blade {
position: absolute;
bottom: 46px;
left: 50%;
transform: translateX(-50%);
width: 7px;
height: calc(100% - 78px);
background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, var(--blade-color) 30%, var(--blade-color) 100%);
box-shadow:
0 0 6px 2px var(--blade-color),
0 0 18px 6px var(--blade-color),
0 0 42px 14px color-mix(in srgb, var(--blade-color) 55%, transparent),
0 0 80px 24px color-mix(in srgb, var(--blade-color) 25%, transparent);
z-index: 2;
}
.blade-tile__emitter {
position: absolute;
bottom: 34px;
left: 50%;
transform: translateX(-50%);
width: 22px;
height: 14px;
background: linear-gradient(180deg, var(--hull-edge) 0%, var(--hull-chrome-shadow) 40%, var(--hull-panel-dark) 100%);
box-shadow: inset 0 1px 0 rgba(250,250,250,0.5), 0 2px 6px rgba(0,0,0,0.6);
z-index: 3;
}
.blade-tile__hilt {
position: absolute;
bottom: 14px;
left: 50%;
transform: translateX(-50%);
width: 14px;
height: 22px;
background: linear-gradient(180deg, var(--hull-chrome-shadow) 0%, var(--hull-panel-dark) 100%);
box-shadow: inset 0 1px 0 rgba(250,250,250,0.3), 0 2px 4px rgba(0,0,0,0.7);
z-index: 3;
}
.blade-tile__label {
position: relative;
z-index: 5;
font-family: var(--font-display);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--chrome-warm);
text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}
.blade-tile--ember { --blade-color: #FF7A2E; }
.blade-tile--red { --blade-color: #E52020; }
.blade-tile--blue { --blade-color: #2E82FF; }
.blade-tile--green { --blade-color: #33D65A; }
.blade-tile--amethyst { --blade-color: #A75DFF; }
.blade-tile--crimson { --blade-color: #C11515; }
.blade-tile--ice { --blade-color: #EAF6FF; }
.blade-tile--custom .blade-tile__blade {
background: linear-gradient(180deg, #FFFFFF 0%, #FF7A2E 15%, #FFB347 30%, #33D65A 50%, #2E82FF 70%, #A75DFF 100%);
box-shadow:
0 0 6px 2px rgba(255,180,71,0.7),
0 0 24px 8px rgba(167,93,255,0.4),
0 0 60px 20px rgba(46,130,255,0.25);
}
/* ==================================================
6. FEATURED OFFER — split product with offer badge
================================================== */
.featured-offer {
background: var(--bg-section-alt);
padding: 96px 40px 108px;
position: relative;
}
.featured-offer::before,
.featured-offer::after {
content: '';
position: absolute;
left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(255,122,46,0.5) 30%, rgba(255,122,46,0.5) 70%, transparent 100%);
}
.featured-offer::before { top: 0; }
.featured-offer::after { bottom: 0; }
.featured-offer__inner { max-width: 1440px; margin: 0 auto; }
.featured-offer__badge {
display: inline-block;
font-family: var(--font-display);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--on-primary-fixed);
background: linear-gradient(180deg, var(--ember-glow) 0%, var(--ember) 100%);
padding: 8px 14px;
box-shadow: var(--ember-glow-sm);
margin-bottom: 36px;
}
.featured-offer__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
.featured-offer__copy { padding: 8px 0; }
.featured-offer__chip {
display: inline-block;
font-family: var(--font-display);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ember);
border: 1px solid rgba(255,122,46,0.35);
padding: 6px 12px;
margin-bottom: 22px;
}
.featured-offer__title {
font-family: var(--font-display);
font-weight: 500;
font-size: 44px;
line-height: 1.1;
letter-spacing: 0.8px;
color: var(--chrome-highlight);
margin-bottom: 20px;
}
.featured-offer__desc {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.65;
color: var(--chrome-warm);
margin-bottom: 32px;
}
.featured-offer__spec {
list-style: none;
padding: 20px 22px;
background: var(--bg-card);
box-shadow: var(--panel-lift);
margin-bottom: 32px;
}
.featured-offer__spec li {
display: grid;
grid-template-columns: max-content 1fr max-content;
align-items: baseline;
gap: 10px;
padding: 8px 0;
border-bottom: 1px dotted rgba(184,176,166,0.18);
}
.featured-offer__spec li:last-child { border-bottom: 0; }
.featured-offer__spec-label {
font-family: var(--font-body);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--chrome-dim);
}
.featured-offer__spec-dots {
height: 1px;
border-bottom: 1px dotted rgba(184,176,166,0.35);
position: relative;
top: -3px;
}
.featured-offer__spec-value {
font-family: var(--font-display);
font-size: 13px;
font-weight: 500;
color: var(--chrome-warm);
font-variant-numeric: tabular-nums;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.featured-offer__price-row {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 22px;
flex-wrap: wrap;
}
.featured-offer__price {
font-family: var(--font-display);
font-weight: 500;
font-size: 42px;
color: var(--ember);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
line-height: 1;
}
.featured-offer__price-chip {
display: inline-flex;
align-items: center;
font-family: var(--font-display);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ember-glow);
border: 1px solid rgba(255,179,71,0.5);
padding: 8px 12px;
box-shadow: inset 0 0 12px rgba(255,122,46,0.15);
}
.featured-offer__cta {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 56px;
font-family: var(--font-display);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--on-primary-fixed);
background: linear-gradient(180deg, var(--ember-glow) 0%, var(--ember) 50%, var(--ember-deep) 100%);
box-shadow: 0 0 22px rgba(255,122,46,0.45), inset 0 1px 0 rgba(255,255,255,0.28);
transition: box-shadow 200ms ease;
}
.featured-offer__cta:hover { box-shadow: 0 0 40px rgba(255,122,46,0.7), inset 0 1px 0 rgba(255,255,255,0.35); }
.featured-offer__cta-note {
margin-top: 12px;
font-family: var(--font-body);
font-size: 12px;
color: var(--chrome-dim);
letter-spacing: 0.06em;
}
.featured-offer__media {
position: relative;
aspect-ratio: 4/5;
background: var(--hull-panel-dark);
background-image: url('https://artsabers.com/wp-content/uploads/sites/10/2025/03/Anakin-Skywalker-Ep-3-Lightsaber-Xenopixel-V3.jpg');
background-size: cover;
background-position: center;
box-shadow: var(--panel-lift), 0 0 40px -12px rgba(255,122,46,0.35);
}
.featured-offer__media::before {
content: '';
position: absolute;
inset: 0;
box-shadow: inset 0 1px 0 rgba(250,250,250,0.20);
}
.featured-offer__media::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 90% 15%, rgba(255,122,46,0.22) 0%, transparent 40%),
linear-gradient(180deg, transparent 65%, rgba(6,6,6,0.6) 100%);
}
.featured-offer__caption {
position: absolute;
bottom: 20px;
left: 24px;
right: 24px;
z-index: 2;
font-family: var(--font-display);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--chrome-glint);
display: flex;
justify-content: space-between;
gap: 12px;
}
.featured-offer__caption span:first-child { color: var(--ember); }
/* ==================================================
7. TRUST PROSE ROW — 3-column prose (NO chips, NO icons)
================================================== */
.trust-prose-row {
background: var(--bg-section);
padding: 72px 40px 78px;
}
.trust-prose-row__index::before {
content: '';
width: 20px;
height: 1px;
background: var(--ember);
}
/* ==================================================
8. FAQ ACCORDION
================================================== */
.faq-accordion {
background: var(--bg-carbon-panel);
padding: 88px 40px 96px;
position: relative;
}
.faq-accordion::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(255,122,46,0.5) 30%, rgba(255,122,46,0.5) 70%, transparent 100%);
}
.faq-accordion__inner { max-width: 960px; margin: 0 auto; }
.faq-accordion__eyebrow {
font-family: var(--font-display);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ember);
margin-bottom: 48px;
text-align: center;
}
.faq-accordion__item { border-top: 1px solid rgba(184,176,166,0.12); }
.faq-accordion__item:last-child { border-bottom: 1px solid rgba(184,176,166,0.12); }
.faq-accordion__item summary { list-style: none; cursor: pointer; }
.faq-accordion__item summary::-webkit-details-marker { display: none; }
.faq-accordion__q {
padding: 26px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
text-align: left;
font-family: var(--font-display);
font-size: 18px;
font-weight: 500;
color: var(--chrome-highlight);
letter-spacing: -0.005em;
transition: color 200ms ease;
}
.faq-accordion__q:hover { color: var(--chrome-glint); }
.faq-accordion__chevron {
font-family: var(--font-display);
font-size: 22px;
color: var(--ember);
font-weight: 400;
transition: transform 200ms ease;
line-height: 1;
flex-shrink: 0;
}
.faq-accordion__item[open] .faq-accordion__chevron { transform: rotate(45deg); }
.faq-accordion__a {
padding: 0 24px 30px;
font-family: var(--font-body);
font-size: 16px;
line-height: 1.7;
color: var(--chrome-warm);
max-width: 720px;
}
/* ==================================================
9. CLOSING CTA — atmospheric single-sentence close
================================================== */
.closing-cta {
background: var(--bg-section-alt);
padding: 100px 40px 120px;
min-height: 320px;
position: relative;
text-align: center;
overflow: hidden;
}
.closing-cta::after {
content: '';
position: absolute;
bottom: 0; left: 50%;
transform: translateX(-50%);
width: 60%;
height: 72px;
background: radial-gradient(ellipse at 50% 100%, rgba(255,122,46,0.28) 0%, transparent 70%);
pointer-events: none;
}
.closing-cta__inner {
max-width: 800px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.closing-cta__eyebrow {
font-family: var(--font-display);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ember);
margin-bottom: 22px;
display: inline-flex;
align-items: center;
gap: 14px;
}
.closing-cta__eyebrow::before,
.closing-cta__eyebrow::after {
content: '';
width: 32px;
height: 1px;
background: var(--ember);
box-shadow: 0 0 8px rgba(255,122,46,0.6);
}
.closing-cta__title {
font-family: var(--font-display);
font-weight: 500;
font-size: 44px;
line-height: 1.1;
letter-spacing: 0.8px;
color: var(--chrome-highlight);
margin-bottom: 22px;
}
.closing-cta__subline {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
color: var(--chrome-warm);
margin-bottom: 42px;
}
.closing-cta__cta {
display: inline-flex;
align-items: center;
justify-content: center;
width: 380px;
max-width: 100%;
height: 60px;
font-family: var(--font-display);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--on-primary-fixed);
background: linear-gradient(180deg, var(--ember-glow) 0%, var(--ember) 50%, var(--ember-deep) 100%);
box-shadow: 0 0 30px rgba(255,122,46,0.5), inset 0 1px 0 rgba(255,255,255,0.28);
transition: box-shadow 200ms ease;
}
.closing-cta__cta:hover { box-shadow: 0 0 50px rgba(255,122,46,0.75), inset 0 1px 0 rgba(255,255,255,0.35); }
.closing-cta__note {
margin-top: 20px;
font-family: var(--font-body);
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--chrome-dim);
}
/* ==================================================
10. FOOTER — legal only
================================================== */
.landing-footer {
background: var(--bg-footer);
padding: 32px 40px;
min-height: 80px;
position: relative;
}
.landing-footer::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(255,122,46,0.4) 30%, rgba(255,122,46,0.4) 70%, transparent 100%);
}
.landing-footer__row {
max-width: 1440px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
flex-wrap: wrap;
}
.landing-footer__brand {
font-family: var(--font-display);
font-weight: 700;
font-size: 14px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--chrome-warm);
}
.landing-footer__brand span { color: var(--ember); padding: 0 2px; }
.landing-footer__links {
display: flex;
gap: 28px;
list-style: none;
}
.landing-footer__links a {
font-family: var(--font-body);
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--chrome-dim);
transition: color 200ms ease;
}
.landing-footer__links a:hover { color: var(--chrome-warm); }
.landing-footer__legal {
width: 100%;
text-align: center;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid rgba(184,176,166,0.10);
font-family: var(--font-body);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--chrome-dim);
}
/* ==================================================
RESPONSIVE
================================================== */
@media (max-width: 1180px) {
.landing-hero__title { font-size: 64px; letter-spacing: 0.8px; }
.featured-offer__title,
.workshop-split__title,
.closing-cta__title { font-size: 36px; letter-spacing: 0.8px; }
.blade-showreel__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 860px) {
.landing-nav__inner { padding: 0 20px; }
.landing-nav__chip { display: none; }
.landing-nav__cta { font-size: 12px; padding: 10px 16px; }
.landing-hero { min-height: 620px; }
.landing-hero__inner { padding: 64px 20px 80px; }
.landing-hero__title { font-size: 46px; letter-spacing: 0.8px; }
.landing-hero__subline { font-size: 16px; }
.landing-hero__cta { width: 100%; }
.explainer-triptych { padding: 64px 20px; }
.explainer-triptych__grid { grid-template-columns: 1fr; gap: 32px; background: transparent; }
.workshop-split__inner {
grid-template-columns: 1fr;
gap: 40px;
padding: 64px 20px;
}
.workshop-split__media { min-height: 380px; }
.blade-showreel { padding: 64px 20px 72px; }
.blade-showreel__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.blade-showreel__title { font-size: 28px; letter-spacing: 0.8px; }
.featured-offer { padding: 64px 20px 72px; }
.featured-offer__grid { grid-template-columns: 1fr; gap: 40px; }
.featured-offer__media { aspect-ratio: 1/1; }
.featured-offer__price { font-size: 34px; }
.trust-prose-row { padding: 56px 20px; }
.trust-prose-row__inner { grid-template-columns: 1fr; gap: 36px; }
.faq-accordion { padding: 64px 20px 72px; }
.faq-accordion__q { font-size: 16px; padding: 22px 16px; }
.faq-accordion__a { padding: 0 16px 24px; }
.closing-cta { padding: 72px 20px 88px; }
.closing-cta__title { font-size: 30px; letter-spacing: 0.8px; }
.closing-cta__cta { width: 100%; }
.landing-footer__row { flex-direction: column; gap: 16px; align-items: center; }
}
@media (max-width: 460px) {
.landing-hero__title { font-size: 38px; letter-spacing: 0.8px; }
.featured-offer__title,
.workshop-split__title,
.closing-cta__title { font-size: 28px; letter-spacing: 0.8px; }
.explainer-triptych__title { font-size: 24px; letter-spacing: 0.8px; }
}
/* orbitron-retrofit: title-em italic kill */
[class*="__title"] em, [class*="__title"] i,
[class*="-title"] em, [class*="-title"] i,
[class*="__heading"] em, [class*="__heading"] i,
[class*="-heading"] em, [class*="-heading"] i { font-style: normal; }
/* -- Reconciled from family 13999 canonical 13492:tf-trust-prose-cells-1 -- */
:root {
/* Orange ombre */
--ember-glow: #FFB347;
--ember-bright: #FF9540;
--ember: #FF7A2E;
--ember-forge: #E85D18;
--ember-deep: #D14810;
--ember-smoulder: #8B2E08;
--ember-scar: #5A1A00;
--on-primary-fixed: #2A0800;
/* Hull ladder */
--carbon: #060606;
--void: #0A0A0A;
--charcoal: #141414;
--charcoal-warm: #161412;
--hull-panel: #1A1A1A;
--hull-panel-lift: #242424;
--hull-panel-dark: #0F0F0F;
--hull-chrome-shadow: #2E2E2E;
--hull-edge: #363636;
/* Chrome / white highlights */
--chrome-highlight: #FAFAFA;
--chrome-glint: #E8E4DD;
--chrome-warm: #F5F0E8;
--chrome-dim: #B8B0A6;
/* Semantic surface roles */
--bg-carbon: var(--carbon);
--bg-void: var(--void);
--bg-charcoal: var(--charcoal);
--bg-charcoal-warm: var(--charcoal-warm);
--bg-card: rgba(20,20,20,0.94);
--bg-card-dark: rgba(15,15,15,0.90);
--bg-card-lift: var(--hull-panel-lift);
/* Text roles */
--text-primary: var(--chrome-warm);
--text-headline: var(--chrome-highlight);
--text-dim: var(--chrome-dim);
--text-accent: var(--ember);
--text-on-ember: var(--on-primary-fixed);
/* Elevation */
--panel-lift: inset 0 1px 0 rgba(250,250,250,0.08), 0 8px 24px -8px rgba(0,0,0,0.9);
--panel-lift-hover: inset 0 1px 0 rgba(250,250,250,0.15), 0 16px 40px -12px rgba(0,0,0,0.95);
--ember-hot-rim: inset 0 0 0 1px rgba(255,122,46,0.6), 0 0 24px rgba(255,122,46,0.5);
--ember-glow-sm: 0 0 16px rgba(255,122,46,0.35);
--ember-glow-md: 0 0 28px rgba(255,122,46,0.55);
--chrome-top-soft: inset 0 1px 0 rgba(250,250,250,0.30);
/* Type */
--font-display: 'Orbitron', sans-serif;
--font-body: 'Onest', sans-serif;
}
/* ---------- Global helpers ---------- */
.container { max-width: 1320px; margin: 0 auto; padding: 0 48px; }
.container--narrow { max-width: 880px; margin: 0 auto; padding: 0 48px; }
.container--reading { max-width: 1120px; margin: 0 auto; padding: 0 48px; }
.cta-primary .arrow { font-size: 16px; margin-left: 2px; }
.results-band--patterned > .container { position: relative; z-index: 1; }
.pagination-cta__link .arrow { color: var(--ember); font-size: 14px; }
.category-hit__chip .arrow { color: var(--ember); font-size: 16px; }
/* ============================================================
BLOCK — deflection-band + deflection-cell
============================================================ */
.deflection {
background: var(--carbon);
padding: 88px 0 96px;
position: relative;
}
.deflection__head {
max-width: 780px;
margin-bottom: 44px;
}
.deflection__eyebrow {
font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ember);
display: inline-flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.deflection__eyebrow::before {
content: '';
width: 36px;
height: 1px;
background: var(--ember);
box-shadow: 0 0 8px rgba(255,122,46,0.6);
}
.deflection__title {
font-family: var(--font-display);
font-size: 32px;
font-weight: 700;
line-height: 1.15;
letter-spacing: 0.8px;
color: var(--chrome-highlight);
margin: 0;
}
.deflection__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.deflection-cell {
padding: 36px 32px 32px;
background: var(--hull-panel);
box-shadow: var(--panel-lift);
display: flex;
flex-direction: column;
gap: 18px;
min-height: 260px;
transition: box-shadow 220ms ease, transform 220ms ease;
}
.deflection-cell:hover { box-shadow: var(--panel-lift-hover); transform: translateY(-2px); }
.deflection-cell__index {
font-family: var(--font-display);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ember);
display: flex;
align-items: center;
gap: 10px;
}
.deflection-cell__index .num { color: var(--chrome-highlight); font-weight: 700; }
.deflection-cell__title {
font-family: var(--font-display);
font-size: 22px;
font-weight: 600;
color: var(--chrome-warm);
line-height: 1.3;
margin: 0; letter-spacing: 0.8px; }
.deflection-cell__text {
font-family: var(--font-body);
font-size: 14px;
line-height: 1.65;
color: var(--chrome-dim);
margin: 0;
flex: 1;
}
.deflection-cell__cta {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ember);
padding-top: 16px;
border-top: 1px solid rgba(46,46,46,0.6);
transition: color 160ms ease, gap 160ms ease;
}
.deflection-cell__cta:hover { color: var(--ember-glow); gap: 12px; }
/* -- Reconciled from family 14002 canonical 12840:tf-newsletter-signup -- */
.container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 48px; }
@media (max-width: 640px) {
.container { padding: 0 24px; }
.promo-bar__inner { gap: 16px; font-size: 10px; }
.promo-bar__item { gap: 16px; }
.hero__telemetry-row { flex-wrap: wrap; gap: 20px; }
.hero__tagline { display: none; }
.trust-bar__row { grid-template-columns: 1fr 1fr; row-gap: 24px; }
.trust-bar__cell { border-right: 0; padding: 4px 12px; }
.saber-core__grid { grid-template-columns: 1fr; }
.faction-grid { grid-template-columns: 1fr; }
.faction-tile { height: 340px; }
.section-head { flex-direction: column; align-items: flex-start; gap: 24px; }
.section-head__right { text-align: left; }
.capture { padding: 90px 0; }
.site-footer__grid { grid-template-columns: 1fr; gap: 40px; }
.site-footer__base { flex-direction: column; align-items: flex-start; gap: 20px; }
}
</style>
</head>
<body>
<!-- ===================== 1. MINIMAL NAV ===================== -->
<a id="tf-other-1" data-tf-family="other" style="display:contents"></a>
<nav class="landing-nav">
<div class="landing-nav__inner">
<a class="landing-nav__brand" href="#">ART<span>/</span>SABERS</a>
<div class="landing-nav__right">
<span class="landing-nav__chip">Factory-direct · Worldwide shipping</span>
<a class="landing-nav__cta" href="#offer">Shop the Anakin build →</a>
</div>
</div>
</nav>
<!-- ===================== 2. HERO ===================== -->
<a id="tf-hero-campaign-1" data-tf-family="hero-campaign" style="display:contents"></a>
<section class="landing-hero">
<div class="landing-hero__photo" aria-hidden="true"></div>
<div class="landing-hero__vignette" aria-hidden="true"></div>
<div class="landing-hero__inner">
<div class="landing-hero__copy">
<div class="landing-hero__eyebrow">This week · Free spare blade in the box</div>
<h1 class="landing-hero__title">Anakin's blade. <em>From the factory floor.</em> Yours inside ten days.</h1>
<p class="landing-hero__subline">The Skywalker EP3 hilt in its Xenopixel V3 build — 34 sound fonts, motion-triggered clash, RGB blade colour you control from your phone. Free spare RGB blade with every order this week.</p>
<a class="landing-hero__cta" href="#offer">Shop the Anakin build →</a>
<div class="landing-hero__trust"><span>Factory-direct</span> · <span>30-day money-back</span> · <span>1-year duelling warranty</span></div>
</div>
</div>
<div class="landing-hero__panelend" aria-hidden="true"></div>
</section>
<!-- ===================== PANEL SEAM: hero -> explainer ===================== -->
<div class="panel-seam" aria-hidden="true"></div>
<!-- ===================== 3. EXPLAINER TRIPTYCH ===================== -->
<a id="tf-other-2" data-tf-family="other" style="display:contents"></a>
<section class="explainer-triptych">
<div class="explainer-triptych__inner">
<div class="explainer-triptych__eyebrow">What a soundboard hilt actually does</div>
<div class="explainer-triptych__grid">
<article class="explainer-triptych__cell explainer-triptych__cell--sound">
<div class="explainer-triptych__media" role="img" aria-label="Xenopixel V3 pommel electronics close-up"></div>
<div class="explainer-triptych__body">
<div class="explainer-triptych__index">01 · Sound</div>
<h3 class="explainer-triptych__title">34 sound fonts. Motion-triggered.</h3>
<p class="explainer-triptych__body-text">Xenopixel V3 soundboard. Ignition, swing, clash, and lock-up — all responsive. Change fonts on the fly from the pommel button.</p>
</div>
</article>
<article class="explainer-triptych__cell explainer-triptych__cell--blade">
<div class="explainer-triptych__media" role="img" aria-label="Blade emitter with duelling-grade blade fitted"></div>
<div class="explainer-triptych__body">
<div class="explainer-triptych__index">02 · Blade</div>
<h3 class="explainer-triptych__title">Duelling-grade blade. Removable.</h3>
<p class="explainer-triptych__body-text">Thick-wall polycarbonate. Impact-tested. Swap it in seconds — spare blade comes free this week.</p>
</div>
</article>
<article class="explainer-triptych__cell explainer-triptych__cell--colour">
<div class="explainer-triptych__media" role="img" aria-label="Blade illuminated in a striking colour"></div>
<div class="explainer-triptych__body">
<div class="explainer-triptych__index">03 · Colour</div>
<h3 class="explainer-triptych__title">Your colour. Your phone.</h3>
<p class="explainer-triptych__body-text">15+ RGB colours plus custom mixing. Control from the ARTSABERS app — one hilt, every blade you'd ever want.</p>
</div>
</article>
</div>
</div>
</section>
<!-- ===================== 4. WORKSHOP SPLIT ===================== -->
<a id="tf-workshop-split-1" data-tf-family="workshop-split" style="display:contents"></a>
<section class="workshop-split">
<div class="workshop-split__inner">
<div class="workshop-split__copy">
<div class="workshop-split__eyebrow">From factory floor to your door</div>
<h2 class="workshop-split__title">"Broadest catalogue. Real service. Ten days, honest."</h2>
<div class="workshop-split__prose">
<p>Most saber sites re-list the same factory catalogue. We do too — but with more of it. Every character, every Saber Core tier, every duelling grade. If it exists in replica form, we probably stock it.</p>
<p>Your hilt ships direct from the factory floor to your door. Seven to ten days, worldwide. A domestic warehouse would be faster; factory-direct is what keeps the catalogue this wide.</p>
<p>The difference from other factory-direct shops is what happens after payment. Most take your money and vanish. We don't. Every order gets a named point of contact — a real person who answers your email inside 24 hours, from checkout to delivery.</p>
<p>If the ignition doesn't sound right, if the blade rattles, if the soundboard skips — you tell us, and we sort it. That's the promise. Not because we built it, but because we stand behind what we sell.</p>
</div>
<div class="workshop-split__rule"><strong>From factory floor to your door</strong> · <strong>7-10 days worldwide</strong> · <strong>24-hour email response</strong></div>
</div>
<div class="workshop-split__media" role="img" aria-label="Anakin EP3 hilt in cinematic ember light">
<div class="workshop-split__caption"><span>Anakin EP3 · Xenopixel V3</span> Factory-direct, tracked worldwide</div>
</div>
</div>
</section>
<!-- ===================== 5. BLADE COLOUR SHOWREEL ===================== -->
<a id="tf-other-3" data-tf-family="other" style="display:contents"></a>
<section class="blade-showreel">
<div class="blade-showreel__topseam" aria-hidden="true"></div>
<div class="blade-showreel__inner">
<div class="blade-showreel__eyebrow">Your blade, your colour</div>
<h2 class="blade-showreel__title">"One hilt. Every colour you'd ever want."</h2>
<p class="blade-showreel__subline">Change from your phone in a tap. Sync to sound. Custom mixes.</p>
<div class="blade-showreel__grid">
<div class="blade-tile blade-tile--ember">
<div class="blade-tile__blade"></div>
<div class="blade-tile__emitter"></div>
<div class="blade-tile__hilt"></div>
<span class="blade-tile__label">Ember orange</span>
</div>
<div class="blade-tile blade-tile--red">
<div class="blade-tile__blade"></div>
<div class="blade-tile__emitter"></div>
<div class="blade-tile__hilt"></div>
<span class="blade-tile__label">Blood red</span>
</div>
<div class="blade-tile blade-tile--blue">
<div class="blade-tile__blade"></div>
<div class="blade-tile__emitter"></div>
<div class="blade-tile__hilt"></div>
<span class="blade-tile__label">Blaster blue</span>
</div>
<div class="blade-tile blade-tile--green">
<div class="blade-tile__blade"></div>
<div class="blade-tile__emitter"></div>
<div class="blade-tile__hilt"></div>
<span class="blade-tile__label">Kyber green</span>
</div>
<div class="blade-tile blade-tile--amethyst">
<div class="blade-tile__blade"></div>
<div class="blade-tile__emitter"></div>
<div class="blade-tile__hilt"></div>
<span class="blade-tile__label">Amethyst</span>
</div>
<div class="blade-tile blade-tile--crimson">
<div class="blade-tile__blade"></div>
<div class="blade-tile__emitter"></div>
<div class="blade-tile__hilt"></div>
<span class="blade-tile__label">Sith crimson</span>
</div>
<div class="blade-tile blade-tile--ice">
<div class="blade-tile__blade"></div>
<div class="blade-tile__emitter"></div>
<div class="blade-tile__hilt"></div>
<span class="blade-tile__label">Ice white</span>
</div>
<div class="blade-tile blade-tile--custom">
<div class="blade-tile__blade"></div>
<div class="blade-tile__emitter"></div>
<div class="blade-tile__hilt"></div>
<span class="blade-tile__label">Custom</span>
</div>
</div>
</div>
</section>
<!-- ===================== 6. FEATURED OFFER ===================== -->
<a id="tf-other-4" data-tf-family="other" style="display:contents"></a>
<section class="featured-offer" id="offer">
<div class="featured-offer__inner">
<span class="featured-offer__badge">This week's offer</span>
<div class="featured-offer__grid">
<div class="featured-offer__copy">
<span class="featured-offer__chip">Lightsaber · Duelling grade · Xenopixel V3</span>
<h2 class="featured-offer__title">Anakin Skywalker EP3 Lightsaber.</h2>
<p class="featured-offer__desc">The Anakin build in its most-loved configuration. Xenopixel V3 sound core, reinforced duelling emitter, thick-wall polycarbonate blade. This week: free RGB spare blade in the box.</p>
<a id="tf-product-tech-specs-1" data-tf-family="product-tech-specs" style="display:contents"></a>
<ul class="featured-offer__spec">
<li>
<span class="featured-offer__spec-label">Saber Core</span>
<span class="featured-offer__spec-dots"></span>
<span class="featured-offer__spec-value">Xenopixel V3</span>
</li>
<li>
<span class="featured-offer__spec-label">Sound fonts</span>
<span class="featured-offer__spec-dots"></span>
<span class="featured-offer__spec-value">34</span>
</li>
<li>
<span class="featured-offer__spec-label">Blade</span>
<span class="featured-offer__spec-dots"></span>
<span class="featured-offer__spec-value">Neopixel · Duelling</span>
</li>
<li>
<span class="featured-offer__spec-label">Blade colours</span>
<span class="featured-offer__spec-dots"></span>
<span class="featured-offer__spec-value">15+ via app</span>
</li>
<li>
<span class="featured-offer__spec-label">Warranty</span>
<span class="featured-offer__spec-dots"></span>
<span class="featured-offer__spec-value">1 year duelling</span>
</li>
<li>
<span class="featured-offer__spec-label">Ships</span>
<span class="featured-offer__spec-dots"></span>
<span class="featured-offer__spec-value">7-10 days factory-direct</span>
</li>
</ul>
<div class="featured-offer__price-row">
<span class="featured-offer__price">$404.99</span>
<span class="featured-offer__price-chip">+ Free RGB spare blade ($49 value)</span>
</div>
<a class="featured-offer__cta" href="#cart">Add to cart · $404.99 →</a>
<div class="featured-offer__cta-note">Free spare blade auto-applied. No code.</div>
</div>
<div class="featured-offer__media" role="img" aria-label="Anakin Skywalker EP3 Lightsaber, Xenopixel V3 build">
<div class="featured-offer__caption"><span>Anakin EP3</span><span>Xenopixel V3</span></div>
</div>
</div>
</div>
</section>
<!-- ===================== 7. TRUST PROSE ROW ===================== -->
<a id="tf-trust-prose-cells-1" data-tf-family="trust-prose-cells" style="display:contents"></a>
<section class="deflection" aria-labelledby="deflection-heading">
<div class="container">
<div class="deflection__head">
<div class="deflection__eyebrow">Try one of these</div>
<h2 class="deflection__title" id="deflection-heading">Three ways to find what you’re after.</h2>
</div>
<div class="deflection__grid">
<a class="deflection-cell" href="/collections/by-character/">
<div class="deflection-cell__index"><span class="num">01</span> Browse by character</div>
<h3 class="deflection-cell__title">Browse by character</h3>
<p class="deflection-cell__text">20+ characters, 100+ hilts. Faster than typing.</p>
<span class="deflection-cell__cta">See all characters <span class="arrow">→</span></span>
</a>
<a class="deflection-cell" href="/collections/by-electronics/">
<div class="deflection-cell__index"><span class="num">02</span> Browse by electronics</div>
<h3 class="deflection-cell__title">Browse by electronics</h3>
<p class="deflection-cell__text">Xenopixel V3, Proffie 2.2, Neopixel, or base-lit — start from the core.</p>
<span class="deflection-cell__cta">Choose an electronics tier <span class="arrow">→</span></span>
</a>
<a class="deflection-cell" href="#thrivedesk-chat" onclick="return false;">
<div class="deflection-cell__index"><span class="num">03</span> Ask a real person</div>
<h3 class="deflection-cell__title">Ask a real person</h3>
<p class="deflection-cell__text">If you have a specific build in mind, live chat is faster than search.</p>
<span class="deflection-cell__cta">Open chat <span class="arrow">→</span></span>
</a>
</div>
</div>
</section>
<!-- ===================== 8. FAQ ACCORDION ===================== -->
<a id="tf-faq-accordion-1" data-tf-family="faq-accordion" style="display:contents"></a>
<section class="faq-accordion">
<div class="faq-accordion__inner">
<div class="faq-accordion__eyebrow">Questions first-time buyers ask</div>
<details class="faq-accordion__item" open>
<summary>
<div class="faq-accordion__q">
<span>What's the difference between a Xenopixel and other soundboards?</span>
<span class="faq-accordion__chevron">+</span>
</div>
</summary>
<div class="faq-accordion__a">Xenopixel V3 is the current-generation soundboard family — 34 sound fonts, motion-triggered clash and swing, in-blade RGB colour. It's the smoothest experience under $500. Alternatives (Proffie 2.2, SNV4 PRO) are step-ups for tinkerers who want to program their own fonts and effects — more powerful, less plug-and-play. For a first hilt, Xenopixel V3 is what we recommend.</div>
</details>
<details class="faq-accordion__item">
<summary>
<div class="faq-accordion__q">
<span>How does the blade colour work?</span>
<span class="faq-accordion__chevron">+</span>
</div>
</summary>
<div class="faq-accordion__a">The Xenopixel V3 blade is an in-blade RGB strip — the colour comes from the blade itself, not a flood from the hilt. Pair the hilt to the ARTSABERS app over Bluetooth and pick from 15+ presets or mix your own. Sync colour changes to clash and swing effects, or set a static colour and forget it. Every switch is instant, no swapping parts.</div>
</details>
<details class="faq-accordion__item">
<summary>
<div class="faq-accordion__q">
<span>How long does shipping take?</span>
<span class="faq-accordion__chevron">+</span>
</div>
</summary>
<div class="faq-accordion__a">7-10 days factory-direct to any address worldwide, fully tracked. We won't pretend it's faster than it is — factory-direct is what keeps the catalogue this wide, and honesty about the timing is part of the deal. If a specific date matters (birthday, cosplay event), tell us at checkout and we'll do what we can to prioritise dispatch.</div>
</details>
<details class="faq-accordion__item">
<summary>
<div class="faq-accordion__q">
<span>What if it arrives damaged or something breaks later?</span>
<span class="faq-accordion__chevron">+</span>
</div>
</summary>
<div class="faq-accordion__a">Email us and a real person on our support team responds inside 24 hours — the same builder who assembled hilts that week. Arrival damage is covered outright; we ship a replacement or refund, your call. Later component failure inside the 1-year duelling warranty is covered end-to-end — parts, labour, return shipping. No forms, no chat bots, no ticket queues.</div>
</details>
</div>
</section>
<!-- ===================== PANEL SEAM: faq -> close ===================== -->
<div class="panel-seam" aria-hidden="true"></div>
<!-- ===================== 9. CLOSING CTA ===================== -->
<a id="tf-closing-cta-1" data-tf-family="closing-cta" style="display:contents"></a>
<section class="closing-cta">
<div class="closing-cta__inner">
<div class="closing-cta__eyebrow">One more thing</div>
<h2 class="closing-cta__title">"Free blade offer ends this week."</h2>
<p class="closing-cta__subline">The Anakin EP3 build with a free spare RGB blade, factory-direct worldwide. Order this week or wait for the next round.</p>
<a class="closing-cta__cta" href="#cart">Add to cart · $404.99 →</a>
<div class="closing-cta__note">30-day money-back · 1-year duelling warranty · Ships in 7-10 days</div>
</div>
</section>
<!-- ===================== 10. FOOTER ===================== -->
<footer class="landing-footer">
<div class="landing-footer__row">
<div class="landing-footer__brand">ART<span>/</span>SABERS</div>
<ul class="landing-footer__links">
<li><a href="#">Terms</a></li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="landing-footer__legal">© 2026 ARTSABERS · A Nerdworks brand</div>
</div>
</footer>
</body>
</html>