/wire-template.
<!DOCTYPE html>
<?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Search results · 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@300;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 {
/* 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;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background: var(--carbon);
color: var(--text-primary);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
/* ---------- 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; }
/* Ember seam glow between panels */
.seam {
position: relative;
height: 1px;
background: var(--ember);
opacity: 0.65;
box-shadow:
0 0 24px rgba(255,122,46,0.55),
0 12px 40px -8px rgba(255,122,46,0.35);
}
/* Hull-plate imagery — Variant G vertical */
.hull-plate-g {
background-color: var(--carbon);
background-image:
linear-gradient(90deg, rgba(6,6,6,0.72) 0%, rgba(6,6,6,0.72) 100%),
linear-gradient(
90deg,
#0B0B0B 0%,
#0F0F0F 48%,
rgba(255,122,46,0.7) 49.6%,
rgba(255,179,71,0.9) 50%,
rgba(255,122,46,0.7) 50.4%,
#0F0F0F 52%,
#0A0A0A 100%
);
}
/* ---------- CTAs ---------- */
.cta-primary {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 28px;
font-family: var(--font-display);
font-size: 13px;
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%);
border: 0;
cursor: pointer;
box-shadow: var(--ember-glow-sm), inset 0 1px 0 rgba(255,255,255,0.25);
transition: box-shadow 180ms ease, transform 180ms ease;
}
.cta-primary:hover { box-shadow: var(--ember-glow-md), inset 0 1px 0 rgba(255,255,255,0.30); }
.cta-primary .arrow { font-size: 16px; margin-left: 2px; }
.cta-ghost {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 15px 26px;
font-family: var(--font-display);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--chrome-warm);
background: transparent;
border: 1px solid rgba(62,62,62,0.7);
cursor: pointer;
transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.cta-ghost:hover {
background: var(--hull-panel-lift);
border-color: rgba(255,122,46,0.55);
box-shadow: var(--chrome-top-soft);
}
/* ============================================================
BLOCK — site-nav (canonical)
============================================================ */
.site-nav {
position: sticky;
top: 0;
z-index: 40;
background: rgba(6,6,6,0.85);
backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(46,46,46,0.6);
box-shadow: inset 0 1px 0 rgba(250,250,250,0.06);
}
.site-nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 22px 48px;
max-width: 1440px;
margin: 0 auto;
}
.site-nav__brand {
font-family: var(--font-display);
font-size: 18px;
font-weight: 700;
letter-spacing: 0.24em;
color: var(--chrome-highlight);
text-transform: uppercase;
}
.site-nav__brand-mark { color: var(--ember); }
.site-nav__links {
display: flex;
gap: 42px;
list-style: none;
margin: 0;
padding: 0;
}
.site-nav__link {
font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--chrome-dim);
padding: 8px 2px;
border-bottom: 1px solid transparent;
transition: color 160ms ease, border-color 160ms ease;
}
.site-nav__link:hover { color: var(--chrome-warm); }
.site-nav__link--active {
color: var(--chrome-highlight);
border-bottom-color: var(--ember);
}
.site-nav__utility {
display: flex;
align-items: center;
gap: 24px;
font-family: var(--font-display);
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--chrome-dim);
}
.site-nav__search {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--ember);
border-bottom: 1px solid rgba(255,122,46,0.55);
padding-bottom: 2px;
}
.hero-search:focus-within {
border-color: var(--ember);
box-shadow: 0 8px 26px -10px rgba(255,122,46,0.55);
}
.hero-search__input::placeholder { color: var(--chrome-dim); }
.hero-search__submit:hover { color: var(--ember-glow); }
.hero-search--empty:focus-within {
border-color: var(--ember-forge);
box-shadow: 0 8px 26px -10px rgba(232,93,24,0.6);
}
.site-nav__cart {
color: var(--chrome-warm);
padding: 6px 12px;
border: 1px solid rgba(62,62,62,0.7);
}
/* ============================================================
BLOCK — compact-hero
============================================================ */
.compact-hero {
position: relative;
background: var(--carbon);
background-image:
/* soft ember bleed from below */
radial-gradient(ellipse 900px 200px at 50% 100%, rgba(255,122,46,0.16) 0%, transparent 70%),
/* panel-joint hairline pattern (verticals) */
repeating-linear-gradient(
90deg,
transparent 0px,
transparent 178px,
rgba(54,54,54,0.28) 178px,
rgba(54,54,54,0.28) 179px,
rgba(6,6,6,0) 179px,
rgba(6,6,6,0) 180px
),
/* one horizontal hairline for the "joint" effect */
linear-gradient(180deg, transparent 0 96px, rgba(54,54,54,0.35) 96px, rgba(54,54,54,0.35) 97px, transparent 97px 100%);
min-height: 240px;
padding: 40px 0 44px;
box-shadow: inset 0 1px 0 rgba(250,250,250,0.06);
overflow: hidden;
}
.compact-hero::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 1px;
background: rgba(255,122,46,0.4);
box-shadow: 0 0 20px rgba(255,122,46,0.35);
}
.compact-hero__breadcrumb {
font-family: var(--font-display);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--chrome-dim);
margin-bottom: 20px;
}
.compact-hero__breadcrumb .sep { color: var(--hull-edge); margin: 0 10px; }
.compact-hero__breadcrumb .current { color: var(--chrome-warm); }
.compact-hero__eyebrow {
font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ember);
margin-bottom: 18px;
display: flex;
align-items: center;
gap: 12px;
}
.compact-hero__eyebrow::before {
content: '';
width: 42px;
height: 1px;
background: var(--ember);
box-shadow: 0 0 8px rgba(255,122,46,0.6);
}
.compact-hero__title {
font-family: var(--font-display);
font-size: 44px;
font-weight: 700;
line-height: 1.06;
letter-spacing: 0.8px;
color: var(--chrome-highlight);
margin: 0 0 14px;
max-width: 1080px;
}
.compact-hero__query { color: var(--ember); font-style: normal; }
.compact-hero__sub {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
color: var(--chrome-warm);
max-width: 720px;
margin: 0;
}
.compact-hero__sub strong { color: var(--chrome-highlight); font-weight: 600; }
/* ============================================================
BLOCK — search-band
============================================================ */
.search-band {
background: var(--carbon);
padding: 44px 0 40px;
position: relative;
}
.search-band__inner {
max-width: 800px;
margin: 0 auto;
padding: 0 48px;
}
.search-band__label {
font-family: var(--font-body);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ember);
margin-bottom: 14px;
display: block;
}
.search-band__field {
position: relative;
display: flex;
align-items: stretch;
height: 72px;
border-bottom: 1px solid rgba(255,122,46,0.55);
transition: border-color 180ms ease, box-shadow 180ms ease;
}
.search-band__field:focus-within {
border-bottom-color: var(--ember);
box-shadow: 0 6px 20px -6px rgba(255,122,46,0.5);
}
.search-band__input {
flex: 1;
background: transparent;
border: 0;
outline: 0;
padding: 0 8px 0 4px;
font-family: var(--font-display);
font-size: 24px;
font-weight: 500;
color: var(--chrome-highlight);
letter-spacing: -0.005em;
}
.search-band__input::placeholder { color: var(--chrome-dim); }
.search-band__chevron {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
color: var(--ember);
font-family: var(--font-display);
font-size: 22px;
background: transparent;
border: 0;
border-left: 1px solid rgba(255,122,46,0.35);
cursor: pointer;
transition: color 160ms ease, background 160ms ease;
}
.search-band__chevron:hover { background: rgba(255,122,46,0.08); color: var(--ember-glow); }
.search-band--empty .search-band__field { border-bottom-color: rgba(232,93,24,0.75); }
.search-band--empty .search-band__field:focus-within { border-bottom-color: var(--ember-forge); box-shadow: 0 6px 20px -6px rgba(232,93,24,0.55); }
/* ============================================================
BLOCK — facet-chip-row
============================================================ */
.facet-chips {
background: var(--carbon);
padding: 36px 0 20px;
}
.facet-chips__inner {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
}
.facet-chip {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 18px;
font-family: var(--font-display);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--chrome-dim);
background: transparent;
border: 1px solid rgba(62,62,62,0.7);
cursor: pointer;
transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}
.facet-chip:hover {
color: var(--chrome-warm);
border-color: rgba(255,122,46,0.4);
background: rgba(255,122,46,0.06);
}
.facet-chip__count { color: var(--chrome-dim); font-weight: 500; }
.facet-chip--active {
color: var(--chrome-highlight);
background: linear-gradient(180deg, rgba(232,93,24,0.18) 0%, rgba(232,93,24,0.08) 100%);
border-color: var(--ember);
box-shadow: inset 0 1px 0 rgba(255,179,71,0.35), 0 0 16px rgba(255,122,46,0.25);
}
.facet-chip--active .facet-chip__count { color: var(--ember-glow); font-weight: 600; }
/* ============================================================
BLOCK — group-heading
============================================================ */
.group-heading {
display: flex;
align-items: baseline;
justify-content: space-between;
padding: 20px 24px 16px;
margin: 0;
border-bottom: 1px solid rgba(255,122,46,0.35);
box-shadow: 0 1px 0 rgba(255,122,46,0.12);
gap: 24px; letter-spacing: 0.8px; }
.group-heading__eyebrow {
font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ember);
display: inline-flex;
align-items: center;
gap: 10px;
}
.group-heading__eyebrow .sep { color: rgba(255,122,46,0.55); }
.group-heading__eyebrow .count { color: var(--chrome-highlight); font-weight: 700; }
.group-heading__hud {
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--chrome-dim);
}
.group-heading__hud .sep { color: var(--hull-edge); margin: 0 8px; }
.group-heading__hud .value { color: var(--chrome-warm); }
/* ============================================================
BLOCK — section-band (frame for a group-heading + content)
============================================================ */
.results-band {
background: var(--carbon);
padding: 56px 0 72px;
position: relative;
}
.results-band--patterned {
background: transparent;
position: relative;
overflow: hidden;
}
.results-band--patterned::before {
content: '';
position: absolute;
inset: 0;
background-color: var(--void);
background-image:
linear-gradient(90deg, rgba(6,6,6,0.74) 0%, rgba(6,6,6,0.74) 100%),
linear-gradient(
90deg,
#0B0B0B 0%,
#0F0F0F 48%,
rgba(255,122,46,0.65) 49.6%,
rgba(255,179,71,0.85) 50%,
rgba(255,122,46,0.65) 50.4%,
#0F0F0F 52%,
#0A0A0A 100%
);
z-index: 0;
}
.results-band--patterned > .container { position: relative; z-index: 1; }
/* ============================================================
BLOCK — product-card
============================================================ */
.product-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
margin-top: 40px;
}
.product-card:hover {
box-shadow: var(--panel-lift-hover);
transform: translateY(-2px);
}
.product-card__media::after {
content: '';
position: absolute;
inset: 0;
box-shadow: inset 0 1px 0 rgba(250,250,250,0.28);
pointer-events: none;
}
.product-card__stock .sep { margin: 0 6px; color: var(--ember-scar); }
.product-card__cta:hover { color: var(--ember-glow); gap: 12px; }
/* ============================================================
BLOCK — pagination-cta
============================================================ */
.pagination-cta {
margin-top: 44px;
display: flex;
justify-content: center;
}
.pagination-cta__link {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 18px 40px;
font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--chrome-highlight);
background: transparent;
border: 1px solid rgba(255,122,46,0.55);
transition: box-shadow 180ms ease, background 180ms ease;
}
.pagination-cta__link:hover {
background: rgba(255,122,46,0.08);
box-shadow: var(--ember-glow-sm), var(--chrome-top-soft);
}
.pagination-cta__link .arrow { color: var(--ember); font-size: 14px; }
/* ============================================================
BLOCK — blog-card (guide-card)
============================================================ */
.guide-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
margin-top: 40px;
}
.guide-card {
background: var(--hull-panel);
box-shadow: var(--panel-lift);
display: flex;
flex-direction: column;
transition: box-shadow 220ms ease, transform 220ms ease;
}
.guide-card:hover { box-shadow: var(--panel-lift-hover); transform: translateY(-2px); }
.guide-card__media {
aspect-ratio: 3 / 2;
background-size: cover;
background-position: center;
background-color: var(--hull-panel-dark);
position: relative;
}
.guide-card__media::after {
content: '';
position: absolute;
inset: 0;
box-shadow: inset 0 1px 0 rgba(250,250,250,0.28);
pointer-events: none;
}
.guide-card__body {
padding: 24px 24px 24px;
display: flex;
flex-direction: column;
gap: 16px;
flex: 1;
}
.guide-card__chip {
align-self: flex-start;
padding: 6px 12px;
font-family: var(--font-display);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ember);
border: 1px solid rgba(255,122,46,0.55);
background: rgba(255,122,46,0.05);
}
.guide-card__title {
font-family: var(--font-display);
font-size: 22px;
font-weight: 600;
line-height: 1.25;
color: var(--chrome-warm);
margin: 0; letter-spacing: 0.8px; }
.guide-card__excerpt {
font-family: var(--font-body);
font-size: 14px;
line-height: 1.6;
color: var(--chrome-dim);
margin: 0;
}
.guide-card__meta {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--chrome-dim);
margin-top: auto;
padding-top: 16px;
border-top: 1px solid rgba(46,46,46,0.5);
}
.guide-card__meta .sep { color: var(--hull-edge); }
.guide-card__meta .value { color: var(--chrome-warm); }
.guide-card__cta {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ember);
padding-top: 14px;
border-top: 1px solid rgba(46,46,46,0.7);
transition: color 160ms ease, gap 160ms ease;
}
.guide-card__cta:hover { color: var(--ember-glow); gap: 12px; }
/* ============================================================
BLOCK — faq-accordion
============================================================ */
.faq-list {
margin-top: 40px;
display: flex;
flex-direction: column;
gap: 12px;
}
.faq-item {
background: rgba(20,20,20,0.94);
backdrop-filter: blur(3px);
box-shadow: var(--panel-lift);
transition: box-shadow 220ms ease;
}
.faq-item:hover { box-shadow: var(--panel-lift-hover); }
.faq-item__summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 26px 24px;
cursor: pointer;
list-style: none;
}
.faq-item__summary::-webkit-details-marker { display: none; }
.faq-item__q {
font-family: var(--font-display);
font-size: 18px;
font-weight: 600;
color: var(--chrome-warm);
line-height: 1.35;
margin: 0;
}
.faq-item__chevron {
font-family: var(--font-display);
font-size: 18px;
color: var(--ember);
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255,122,46,0.55);
box-shadow: 0 0 12px rgba(255,122,46,0.18);
flex: 0 0 auto;
}
.faq-item__body {
padding: 4px 24px 28px;
font-family: var(--font-body);
font-size: 16px;
line-height: 1.65;
color: var(--chrome-warm);
}
/* ============================================================
BLOCK — category-chip-row (single-chip result row)
============================================================ */
.category-hit {
background: var(--carbon);
padding: 44px 0 56px;
position: relative;
}
.category-hit__row {
margin-top: 28px;
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.category-hit__chip {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 18px 26px;
font-family: var(--font-display);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--chrome-highlight);
border: 1px solid rgba(255,122,46,0.55);
background: linear-gradient(180deg, rgba(255,122,46,0.06) 0%, rgba(255,122,46,0.02) 100%);
transition: box-shadow 180ms ease, background 180ms ease;
}
.category-hit__chip:hover {
background: rgba(255,122,46,0.12);
box-shadow: var(--ember-glow-sm), var(--chrome-top-soft);
}
.category-hit__chip .arrow { color: var(--ember); font-size: 16px; }
.category-hit__chip-count {
font-family: var(--font-body);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.16em;
color: var(--chrome-dim);
text-transform: uppercase;
padding-left: 10px;
border-left: 1px solid rgba(255,122,46,0.35);
}
/* ============================================================
BLOCK — state-break
============================================================ */
.state-break {
background: var(--carbon);
padding: 72px 0;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.state-break::before, .state-break::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(255,122,46,0.55) 20%, rgba(255,122,46,0.55) 80%, transparent 100%);
box-shadow: 0 0 16px rgba(255,122,46,0.35);
}
.state-break__label {
padding: 0 28px;
font-family: var(--font-display);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--ember);
white-space: nowrap;
}
.state-break__label .dot { color: rgba(255,122,46,0.55); margin: 0 8px; }
/* ============================================================
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; }
/* ============================================================
BLOCK — searches-chip-cluster
============================================================ */
.common-searches {
background: var(--carbon);
padding: 56px 0 72px;
position: relative;
}
.common-searches__head {
margin-bottom: 24px;
}
.common-searches__eyebrow {
font-family: var(--font-display);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ember);
margin: 0 0 10px;
display: inline-flex;
align-items: center;
gap: 12px;
}
.common-searches__eyebrow::before {
content: '';
width: 30px;
height: 1px;
background: var(--ember);
box-shadow: 0 0 6px rgba(255,122,46,0.55);
}
.common-searches__lede {
font-family: var(--font-body);
font-size: 13px;
color: var(--chrome-dim);
margin: 0;
}
.common-searches__cluster {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
}
.query-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
font-family: var(--font-display);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--chrome-warm);
background: transparent;
border: 1px solid rgba(255,122,46,0.4);
transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.query-chip:hover {
background: linear-gradient(180deg, rgba(232,93,24,0.22) 0%, rgba(232,93,24,0.08) 100%);
color: var(--chrome-highlight);
box-shadow: var(--ember-glow-sm), var(--chrome-top-soft);
}
/* ============================================================
BLOCK — newsletter-capture-band (MAS73 ember-ombre canonical)
============================================================ */
.dispatch {
position: relative;
padding: 108px 0 116px;
background: linear-gradient(180deg, var(--ember-glow) 0%, var(--ember) 42%, var(--ember-forge) 100%);
overflow: hidden;
}
.dispatch::before {
content: '';
position: absolute;
left: 0; right: 0; top: 0;
height: 1px;
background: rgba(255,255,255,0.4);
box-shadow: inset 0 1px 0 rgba(250,250,250,0.35);
}
.dispatch::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 1px;
background: rgba(90,26,0,0.55);
}
.dispatch__inner {
max-width: 880px;
margin: 0 auto;
padding: 0 48px;
text-align: center;
position: relative;
z-index: 2;
}
.dispatch__eyebrow {
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--on-primary-fixed);
margin-bottom: 22px;
display: inline-flex;
align-items: center;
gap: 14px;
}
.dispatch__eyebrow::before, .dispatch__eyebrow::after {
content: '';
width: 40px;
height: 1px;
background: var(--on-primary-fixed);
opacity: 0.6;
}
.dispatch__title {
font-family: var(--font-display);
font-size: 40px;
font-weight: 700;
line-height: 1.1;
letter-spacing: 0.8px;
color: var(--on-primary-fixed);
margin: 0 0 20px;
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.dispatch__sub {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
color: var(--ember-scar);
margin: 0 auto 36px;
max-width: 560px;
}
.dispatch__form {
display: flex;
gap: 12px;
max-width: 560px;
margin: 0 auto;
align-items: stretch;
}
.dispatch__input {
flex: 1;
background: transparent;
border: 0;
border-bottom: 1px solid rgba(42,8,0,0.55);
padding: 14px 8px;
font-family: var(--font-body);
font-size: 16px;
color: var(--on-primary-fixed);
outline: 0;
transition: border-color 180ms ease, box-shadow 180ms ease;
}
.dispatch__input::placeholder { color: rgba(42,8,0,0.55); }
.dispatch__input:focus {
border-bottom-color: var(--on-primary-fixed);
box-shadow: 0 4px 12px -4px rgba(42,8,0,0.4);
}
.dispatch__submit {
padding: 14px 28px;
background: var(--on-primary-fixed);
border: 0;
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--chrome-highlight);
cursor: pointer;
transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
box-shadow: 0 6px 18px -6px rgba(42,8,0,0.7);
}
.dispatch__submit:hover { background: var(--ember-scar); color: var(--ember-glow); box-shadow: 0 8px 22px -6px rgba(42,8,0,0.85); }
/* ============================================================
BLOCK — site-footer (canonical)
============================================================ */
.site-footer {
background: var(--carbon);
padding: 96px 0 48px;
border-top: 1px solid rgba(255,122,46,0.5);
box-shadow: 0 -20px 40px -20px rgba(255,122,46,0.35), inset 0 1px 0 rgba(250,250,250,0.06);
position: relative;
}
.site-footer__grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
gap: 48px;
margin-bottom: 72px;
}
.site-footer__brand-mark {
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
letter-spacing: 0.22em;
color: var(--chrome-highlight);
margin-bottom: 16px;
text-transform: uppercase;
}
.site-footer__brand-mark span { color: var(--ember); }
.site-footer__tag {
font-family: var(--font-body);
font-size: 14px;
line-height: 1.6;
color: var(--chrome-dim);
margin: 0 0 20px;
max-width: 320px;
}
.site-footer__meta {
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--chrome-dim);
}
.site-footer__meta span { color: var(--ember); }
.site-footer__col-title {
font-family: var(--font-display);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--chrome-warm);
margin: 0 0 20px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(46,46,46,0.6);
}
.site-footer__links {
list-style: none;
padding: 0;
margin: 0;
}
.site-footer__links li { margin-bottom: 12px; }
.site-footer__link {
font-family: var(--font-body);
font-size: 14px;
color: var(--chrome-dim);
transition: color 160ms ease;
}
.site-footer__link:hover { color: var(--chrome-warm); }
.site-footer__bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 32px;
border-top: 1px solid rgba(46,46,46,0.6);
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--chrome-dim);
flex-wrap: wrap;
gap: 20px;
}
.site-footer__bottom a { color: var(--chrome-warm); }
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 900px) {
.container, .container--reading, .container--narrow { padding: 0 24px; }
.site-nav__inner { padding: 18px 24px; }
.site-nav__links { display: none; }
.site-nav__utility { gap: 10px; font-size: 11px; }
.compact-hero { padding: 32px 0 36px; }
.compact-hero__title { font-size: 30px; letter-spacing: 0.8px; }
.compact-hero__sub { font-size: 14px; }
.search-band__inner { padding: 0 24px; }
.search-band__input { font-size: 18px; }
.search-band__field { height: 60px; }
.facet-chips__inner { gap: 8px; }
.facet-chip { padding: 8px 14px; font-size: 10px; letter-spacing: 0.14em; }
.product-grid, .guide-grid, .deflection__grid {
grid-template-columns: 1fr;
gap: 24px;
}
.group-heading { flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 16px 14px; letter-spacing: 0.8px; }
.results-band { padding: 40px 0 56px; }
.faq-item__summary { padding: 22px 20px; gap: 16px; }
.faq-item__q { font-size: 16px; }
.category-hit__chip { padding: 16px 20px; font-size: 12px; }
.category-hit__chip-count { padding-left: 8px; font-size: 11px; }
.deflection__title { font-size: 26px; letter-spacing: 0.8px; }
.deflection { padding: 64px 0 72px; }
.common-searches__cluster { gap: 8px; }
.query-chip { padding: 10px 14px; font-size: 11px; letter-spacing: 0.1em; }
.dispatch { padding: 72px 0 80px; }
.dispatch__title { font-size: 30px; letter-spacing: 0.8px; }
.dispatch__form { flex-direction: column; }
.site-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
.state-break { padding: 44px 0; }
.state-break__label { font-size: 10px; letter-spacing: 0.24em; padding: 0 14px; }
}
@media (max-width: 560px) {
.site-footer__grid { grid-template-columns: 1fr; }
}
/* 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 14002 canonical 12840:tf-newsletter-signup -- */
.container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 48px; }
/* =========================================================
CAPTURE BAND — full orange ombre (biggest ember moment)
========================================================= */
.capture {
position: relative;
background: linear-gradient(180deg, var(--ember-glow) 0%, var(--ember-bright) 25%, var(--ember) 55%, var(--ember-forge) 100%);
padding: 140px 0;
box-shadow:
inset 0 2px 0 rgba(255,235,180,0.55),
inset 0 -1px 0 rgba(90,26,0,0.55),
0 -12px 40px -8px rgba(255,122,46,0.55);
overflow: hidden;
}
.capture::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 20% 30%, rgba(255,235,180,0.35) 0%, rgba(255,235,180,0) 55%),
radial-gradient(ellipse at 80% 70%, rgba(209,72,16,0.35) 0%, rgba(209,72,16,0) 60%);
pointer-events: none;
}
.capture__inner {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
z-index: 2;
}
.capture__copy { max-width: 620px; }
.capture__eyebrow {
font-family: var(--font-display);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--on-primary-fixed);
opacity: 0.72;
margin-bottom: 20px;
}
.capture__title {
font-family: var(--font-display);
font-size: clamp(48px, 5.5vw, 78px);
font-weight: 700;
line-height: 0.95;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--on-primary-fixed);
margin-bottom: 24px;
}
.capture__sub {
font-family: var(--font-display);
font-size: 20px;
font-weight: 500;
line-height: 1.4;
color: var(--on-primary-fixed);
opacity: 0.86;
max-width: 520px;
}
.capture__form {
display: flex;
flex-direction: column;
gap: 20px;
padding: 44px;
background: rgba(20,20,20,0.94);
box-shadow:
inset 0 1px 0 rgba(250,250,250,0.2),
0 30px 60px -20px rgba(0,0,0,0.7);
}
.capture__form-lbl {
font-family: var(--font-display);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ember-glow);
}
.capture__form-input {
background: transparent;
border: 0;
border-bottom: 1px solid rgba(184,176,166,0.35);
padding: 14px 0;
font-family: var(--font-body);
font-size: 17px;
color: var(--chrome-warm);
outline: none;
transition: border-color 200ms ease, box-shadow 200ms ease;
width: 100%;
}
.capture__form-input::placeholder { color: var(--chrome-dim); opacity: 0.7; }
.capture__form-input:focus {
border-bottom-color: var(--ember);
box-shadow: 0 2px 12px -2px rgba(255,122,46,0.4);
}
.capture__form-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 20px 30px;
background: linear-gradient(180deg, var(--ember-glow) 0%, var(--ember) 50%, var(--ember-deep) 100%);
color: var(--on-primary-fixed);
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.20em;
text-transform: uppercase;
box-shadow: var(--ember-glow-sm);
transition: box-shadow 200ms ease;
margin-top: 8px;
}
.capture__form-cta:hover { box-shadow: var(--ember-glow-md); }
.capture__form-fine {
font-family: var(--font-body);
font-size: 12px;
color: var(--chrome-dim);
line-height: 1.5;
}
@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; }
}
/* -- Reconciled from family 14026 canonical 13492:tf-search-input-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;
}
.hero-search {
display: flex;
align-items: center;
gap: 12px;
margin-top: 22px;
max-width: 560px;
padding: 14px 18px 14px 22px;
border: 1px solid rgba(255,122,46,0.35);
background: linear-gradient(180deg, rgba(255,122,46,0.06), rgba(6,6,6,0.35));
transition: border-color 0.2s, box-shadow 0.2s;
}
.hero-search:focus-within {
border-color: var(--ember);
box-shadow: 0 8px 26px -10px rgba(255,122,46,0.55);
}
.hero-search__glyph {
font-size: 16px;
color: var(--ember);
flex-shrink: 0;
line-height: 1;
}
.hero-search__input {
flex: 1;
min-width: 0;
border: none;
background: transparent;
color: var(--chrome-highlight);
font-family: var(--font-body);
font-size: 16px;
letter-spacing: 0.01em;
padding: 2px 0;
outline: none;
}
.hero-search__input::placeholder { color: var(--chrome-dim); }
.hero-search__submit {
border: none;
background: transparent;
color: var(--ember);
cursor: pointer;
font-size: 20px;
line-height: 1;
padding: 0 6px;
flex-shrink: 0;
}
.hero-search__submit:hover { color: var(--ember-glow); }
.hero-search--empty {
border-color: rgba(232,93,24,0.65);
background: linear-gradient(180deg, rgba(232,93,24,0.10), rgba(6,6,6,0.4));
}
.hero-search--empty:focus-within {
border-color: var(--ember-forge);
box-shadow: 0 8px 26px -10px rgba(232,93,24,0.6);
}
/* -- Reconciled from family 13997 canonical 12840:tf-product-card-2 -- */
/* Panel-seam kept as a clean ember hairline + soft glow — the shadow
channels above/below were removed 2026-07-07 because they read as a
second seam next to the ember line rather than a physical join. */
/* Cards read as raised plates — beefier chrome top edge + deeper cast shadow. */
.core-card,
.product-card,
.faction-tile,
.mission-panel,
.testimonial,
.brand-story__panel {
box-shadow:
inset 0 1px 0 rgba(250,250,250,0.16),
inset 0 -1px 0 rgba(0,0,0,0.55),
0 10px 28px -10px rgba(0,0,0,0.95),
0 2px 6px -2px rgba(0,0,0,0.7);
position: relative;
}
.product-card:hover {
box-shadow: var(--panel-lift-hover);
transform: translateY(-3px);
}
.product-card--featured:hover {
box-shadow: var(--ember-hot-rim), var(--panel-lift-hover);
}
.product-card:hover .product-card__img { transform: scale(1.03); }
.product-card__stage::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 100%;
background: linear-gradient(180deg, rgba(0,0,0,0) 62%, rgba(6,6,6,0.75) 100%);
z-index: 1;
pointer-events: none;
}
.product-card__stage::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 4px;
background: linear-gradient(90deg, rgba(255,122,46,0) 0%, rgba(255,122,46,0.6) 50%, rgba(255,122,46,0) 100%);
z-index: 2;
filter: blur(3px);
}
/* -- Reconciled from family 13997 canonical 12840:tf-product-card-2 -- */
/* Panel-seam kept as a clean ember hairline + soft glow — the shadow
channels above/below were removed 2026-07-07 because they read as a
second seam next to the ember line rather than a physical join. */
/* Cards read as raised plates — beefier chrome top edge + deeper cast shadow. */
.core-card,
.product-card,
.faction-tile,
.mission-panel,
.testimonial,
.brand-story__panel {
box-shadow:
inset 0 1px 0 rgba(250,250,250,0.16),
inset 0 -1px 0 rgba(0,0,0,0.55),
0 10px 28px -10px rgba(0,0,0,0.95),
0 2px 6px -2px rgba(0,0,0,0.7);
position: relative;
}
.product-card:hover {
box-shadow: var(--panel-lift-hover);
transform: translateY(-3px);
}
.product-card--featured:hover {
box-shadow: var(--ember-hot-rim), var(--panel-lift-hover);
}
.product-card:hover .product-card__img { transform: scale(1.03); }
.product-card__stage::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 100%;
background: linear-gradient(180deg, rgba(0,0,0,0) 62%, rgba(6,6,6,0.75) 100%);
z-index: 1;
pointer-events: none;
}
.product-card__stage::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 4px;
background: linear-gradient(90deg, rgba(255,122,46,0) 0%, rgba(255,122,46,0.6) 50%, rgba(255,122,46,0) 100%);
z-index: 2;
filter: blur(3px);
}
/* -- Reconciled from family 13997 canonical 12840:tf-product-card-2 -- */
/* Panel-seam kept as a clean ember hairline + soft glow — the shadow
channels above/below were removed 2026-07-07 because they read as a
second seam next to the ember line rather than a physical join. */
/* Cards read as raised plates — beefier chrome top edge + deeper cast shadow. */
.core-card,
.product-card,
.faction-tile,
.mission-panel,
.testimonial,
.brand-story__panel {
box-shadow:
inset 0 1px 0 rgba(250,250,250,0.16),
inset 0 -1px 0 rgba(0,0,0,0.55),
0 10px 28px -10px rgba(0,0,0,0.95),
0 2px 6px -2px rgba(0,0,0,0.7);
position: relative;
}
.product-card:hover {
box-shadow: var(--panel-lift-hover);
transform: translateY(-3px);
}
.product-card--featured:hover {
box-shadow: var(--ember-hot-rim), var(--panel-lift-hover);
}
.product-card:hover .product-card__img { transform: scale(1.03); }
.product-card__stage::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 100%;
background: linear-gradient(180deg, rgba(0,0,0,0) 62%, rgba(6,6,6,0.75) 100%);
z-index: 1;
pointer-events: none;
}
.product-card__stage::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 4px;
background: linear-gradient(90deg, rgba(255,122,46,0) 0%, rgba(255,122,46,0.6) 50%, rgba(255,122,46,0) 100%);
z-index: 2;
filter: blur(3px);
}
.product-card {
background: var(--bg-patterned-card);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
box-shadow: var(--panel-lift);
display: flex;
flex-direction: column;
transition: all 0.3s ease;
position: relative;
}
.product-card:hover {
box-shadow: var(--panel-lift-hover), 0 0 32px rgba(255,122,46,0.2);
transform: translateY(-4px);
}
.product-card--hot { box-shadow: var(--panel-lift), var(--ember-hot-rim); }
.product-card--hot:hover { box-shadow: var(--panel-lift-hover), var(--ember-hot-rim), 0 0 40px rgba(255,122,46,0.4); }
.product-card__media {
position: relative;
aspect-ratio: 1/1;
background-color: #0a0a0a;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.product-card__badge::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--ember);
box-shadow: 0 0 8px rgba(255,122,46,0.8);
}
.product-card__badge--low::before {
background: var(--ember-glow);
}
.product-card__body {
background: var(--hull-panel-lift);
padding: 24px 28px 28px;
display: flex;
flex-direction: column;
flex: 1;
}
.product-card__meta {
font-family: var(--font-display);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--chrome-dim);
margin-bottom: 10px;
}
.product-card__name {
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--chrome-highlight);
margin-bottom: 14px;
line-height: 1.1;
}
.product-card__specs {
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px dotted rgba(184,176,166,0.2);
}
.product-card__spec {
display: flex;
justify-content: space-between;
align-items: baseline;
font-family: var(--font-body);
font-size: 12px;
padding: 4px 0;
}
.product-card__spec-label {
color: var(--chrome-dim);
text-transform: uppercase;
letter-spacing: 0.1em;
font-family: var(--font-display);
}
.product-card__spec-value {
color: var(--chrome-warm);
font-family: var(--font-display);
font-weight: 500;
font-variant-numeric: tabular-nums;
}
.product-card__foot {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
}
.product-card__price {
font-family: var(--font-display);
font-size: 26px;
font-weight: 600;
color: var(--ember);
font-variant-numeric: tabular-nums;
}
.product-card__cta {
font-family: var(--font-display);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--chrome-warm);
text-decoration: none;
padding-bottom: 4px;
border-bottom: 1px solid var(--ember);
transition: color 0.2s;
}
.product-card__cta:hover { color: var(--ember); }
/* -- Reconciled from family 14007 canonical 12913:tf-stock-status-chip -- */
: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 */
--chrome-highlight: #FAFAFA;
--chrome-glint: #E8E4DD;
--chrome-warm: #F5F0E8;
--chrome-dim: #B8B0A6;
/* Semantic surfaces */
--bg-page: var(--carbon);
--bg-card: var(--hull-panel);
--bg-card-lift: var(--hull-panel-lift);
--bg-card-dark: var(--hull-panel-dark);
--bg-patterned-card: rgba(20, 20, 20, 0.94);
--bg-patterned-tile: rgba(15, 15, 15, 0.90);
/* Text roles */
--text-primary: var(--chrome-warm);
--text-heading: var(--chrome-highlight);
--text-dim: var(--chrome-dim);
--text-on-ember: var(--on-primary-fixed);
--text-accent: var(--ember);
/* Fonts */
--font-display: 'Orbitron', system-ui, sans-serif;
--font-body: 'Onest', system-ui, sans-serif;
/* Type scale */
--type-hero: 128px;
--type-h1: 84px;
--type-h2: 60px;
--type-h3: 40px;
--type-h4: 28px;
--type-body: 16px;
--type-small: 14px;
--type-label: 12px;
/* Spacing */
--space-hero: 160px;
--space-section: 120px;
--space-band: 32px;
--space-card: 32px;
/* 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 12px 32px -8px rgba(0,0,0,0.95);
--ember-glow-sm: 0 0 16px rgba(255,122,46,0.35);
--ember-glow-md: 0 0 28px rgba(255,122,46,0.5);
--ember-hot-rim: inset 0 0 0 1px rgba(255,122,46,0.6), 0 0 24px rgba(255,122,46,0.5);
--modal-glow: 0 24px 64px -12px rgba(0,0,0,0.9), 0 0 32px rgba(255,122,46,0.2);
}
.product-card__badge {
position: absolute;
top: 16px;
right: 16px;
font-family: var(--font-display);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
padding: 6px 10px;
background: rgba(6,6,6,0.85);
color: var(--ember);
border: 1px solid rgba(255,122,46,0.4);
display: inline-flex;
align-items: center;
gap: 6px;
}
.product-card__badge::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--ember);
box-shadow: 0 0 8px rgba(255,122,46,0.8);
}
.product-card__badge--low {
color: var(--ember-glow);
border-color: rgba(255,179,71,0.5);
}
.product-card__badge--low::before {
background: var(--ember-glow);
}
</style>
</head>
<!-- ============================================================
STATE 1 — ACTIVE-RESULTS
query: "starkiller" · 24 matches
============================================================ -->
<!-- BLOCK: site-nav -->
<body><nav class="site-nav" role="navigation">
<div class="site-nav__inner">
<a class="site-nav__brand" href="/">ART<span class="site-nav__brand-mark">/</span>SABERS</a>
<ul class="site-nav__links">
<li><a class="site-nav__link" href="/lightsabers/">Lightsabers</a></li>
<li><a class="site-nav__link" href="/helmets/">Helmets</a></li>
<li><a class="site-nav__link" href="/parts/">Parts & Accessories</a></li>
<li><a class="site-nav__link" href="/events-courses/">Events & Courses</a></li>
<li><a class="site-nav__link" href="/journal/">Journal</a></li>
<li><a class="site-nav__link" href="/support/">Support</a></li>
</ul>
<div class="site-nav__utility">
<span>USD</span>
<a class="site-nav__search" href="/?s=" aria-label="Search">
<span>⚲</span> Search
</a>
<a class="site-nav__cart" href="/cart/">Bag · 0</a>
</div>
</div>
</nav>
<a id="tf-hero-utility-1" data-tf-family="hero-utility" style="display:contents"></a>
<!-- BLOCK: compact-hero (active-results) -->
<header class="compact-hero">
<div class="container">
<div class="compact-hero__breadcrumb">
<a href="/">Home</a>
<span class="sep">/</span>
<span class="current">Search</span>
</div>
<div class="compact-hero__eyebrow">Search</div>
<h1 class="compact-hero__title">Showing results for <em class="compact-hero__query">“starkiller”</em></h1>
<p class="compact-hero__sub">Found <strong>24 matches</strong> across the catalogue — 18 hilts, 3 guides, 2 FAQ answers, and 1 category.</p>
<a id="tf-search-input-1" data-tf-family="search-input" style="display:contents"></a>
<form class="hero-search" action="/" method="get" role="search">
<span class="hero-search__glyph" aria-hidden="true">⚲</span>
<input class="hero-search__input" type="search" name="s" value="starkiller" placeholder="Search the workshop…" autocomplete="off" aria-label="Search the workshop">
<button class="hero-search__submit" type="submit" aria-label="Search">›</button>
</form>
</div>
</header>
<!-- BLOCK: facet-chip-row -->
<a id="tf-filter-chip-strip-1" data-tf-family="filter-chip-strip" style="display:contents"></a>
<section class="facet-chips" aria-label="Filter by content type">
<div class="container">
<div class="facet-chips__inner">
<button class="facet-chip facet-chip--active" type="button">All <span class="facet-chip__count">(24)</span></button>
<button class="facet-chip" type="button">Hilts <span class="facet-chip__count">(18)</span></button>
<button class="facet-chip" type="button">Guides <span class="facet-chip__count">(3)</span></button>
<button class="facet-chip" type="button">FAQ <span class="facet-chip__count">(2)</span></button>
<button class="facet-chip" type="button">Categories <span class="facet-chip__count">(1)</span></button>
</div>
</div>
</section>
<!-- BLOCK: section-band + group-heading + product-card (HILTS) -->
<section class="results-band" aria-labelledby="hilts-heading">
<div class="container">
<div class="group-heading" id="hilts-heading">
<div class="group-heading__eyebrow">Hilts <span class="sep">·</span> <span class="count">18</span> matches</div>
<div class="group-heading__hud">Sort <span class="sep">·</span> <span class="value">Relevance</span></div>
</div>
<a id="tf-product-grid-1" data-tf-family="product-grid" style="display:contents"></a>
<div class="product-grid">
<!-- 1 -->
<a id="tf-product-card-1" data-tf-family="product-card" style="display:contents"></a>
<article class="product-card product-card--hot">
<div class="product-card__media" style="background-image: url('https://nerdworks.uk/wp-content/uploads/2025/08/Anakin-Skywalker-EP3-1.jpg');">
<a id="tf-stock-status-chip" data-tf-family="stock-status-chip" style="display:contents"></a>
<span class="product-card__badge">In stock · Ships today</span>
</div>
<div class="product-card__body">
<div class="product-card__meta">Character · Prequel Era</div>
<h3 class="product-card__name">Anakin Skywalker EP3</h3>
<div class="product-card__specs">
<div class="product-card__spec">
<span class="product-card__spec-label">Saber Core</span>
<span class="product-card__spec-value">Xenopixel V3</span>
</div>
<div class="product-card__spec">
<span class="product-card__spec-label">Blade type</span>
<span class="product-card__spec-value">Neopixel · Duelling</span>
</div>
<div class="product-card__spec">
<span class="product-card__spec-label">Sound fonts</span>
<span class="product-card__spec-value">34 + custom</span>
</div>
</div>
<div class="product-card__foot">
<div class="product-card__price">$459.99</div>
<a href="#" class="product-card__cta">View saber →</a>
</div>
</div>
</article>
<!-- 2 -->
<article class="product-card product-card--hot">
<div class="product-card__media" style="background-image: url('https://nerdworks.uk/wp-content/uploads/2025/08/Anakin-Skywalker-EP3-1.jpg');">
<a id="tf-stock-status-chip" data-tf-family="stock-status-chip" style="display:contents"></a>
<span class="product-card__badge">In stock · Ships today</span>
</div>
<div class="product-card__body">
<div class="product-card__meta">Character · Prequel Era</div>
<h3 class="product-card__name">Anakin Skywalker EP3</h3>
<div class="product-card__specs">
<div class="product-card__spec">
<span class="product-card__spec-label">Saber Core</span>
<span class="product-card__spec-value">Xenopixel V3</span>
</div>
<div class="product-card__spec">
<span class="product-card__spec-label">Blade type</span>
<span class="product-card__spec-value">Neopixel · Duelling</span>
</div>
<div class="product-card__spec">
<span class="product-card__spec-label">Sound fonts</span>
<span class="product-card__spec-value">34 + custom</span>
</div>
</div>
<div class="product-card__foot">
<div class="product-card__price">$459.99</div>
<a href="#" class="product-card__cta">View saber →</a>
</div>
</div>
</article>
<!-- 3 -->
<article class="product-card product-card--hot">
<div class="product-card__media" style="background-image: url('https://nerdworks.uk/wp-content/uploads/2025/08/Anakin-Skywalker-EP3-1.jpg');">
<a id="tf-stock-status-chip" data-tf-family="stock-status-chip" style="display:contents"></a>
<span class="product-card__badge">In stock · Ships today</span>
</div>
<div class="product-card__body">
<div class="product-card__meta">Character · Prequel Era</div>
<h3 class="product-card__name">Anakin Skywalker EP3</h3>
<div class="product-card__specs">
<div class="product-card__spec">
<span class="product-card__spec-label">Saber Core</span>
<span class="product-card__spec-value">Xenopixel V3</span>
</div>
<div class="product-card__spec">
<span class="product-card__spec-label">Blade type</span>
<span class="product-card__spec-value">Neopixel · Duelling</span>
</div>
<div class="product-card__spec">
<span class="product-card__spec-label">Sound fonts</span>
<span class="product-card__spec-value">34 + custom</span>
</div>
</div>
<div class="product-card__foot">
<div class="product-card__price">$459.99</div>
<a href="#" class="product-card__cta">View saber →</a>
</div>
</div>
</article>
<!-- 4 -->
<article class="product-card product-card--hot">
<div class="product-card__media" style="background-image: url('https://nerdworks.uk/wp-content/uploads/2025/08/Anakin-Skywalker-EP3-1.jpg');">
<a id="tf-stock-status-chip" data-tf-family="stock-status-chip" style="display:contents"></a>
<span class="product-card__badge">In stock · Ships today</span>
</div>
<div class="product-card__body">
<div class="product-card__meta">Character · Prequel Era</div>
<h3 class="product-card__name">Anakin Skywalker EP3</h3>
<div class="product-card__specs">
<div class="product-card__spec">
<span class="product-card__spec-label">Saber Core</span>
<span class="product-card__spec-value">Xenopixel V3</span>
</div>
<div class="product-card__spec">
<span class="product-card__spec-label">Blade type</span>
<span class="product-card__spec-value">Neopixel · Duelling</span>
</div>
<div class="product-card__spec">
<span class="product-card__spec-label">Sound fonts</span>
<span class="product-card__spec-value">34 + custom</span>
</div>
</div>
<div class="product-card__foot">
<div class="product-card__price">$459.99</div>
<a href="#" class="product-card__cta">View saber →</a>
</div>
</div>
</article>
<!-- 5 -->
<article class="product-card product-card--hot">
<div class="product-card__media" style="background-image: url('https://nerdworks.uk/wp-content/uploads/2025/08/Anakin-Skywalker-EP3-1.jpg');">
<a id="tf-stock-status-chip" data-tf-family="stock-status-chip" style="display:contents"></a>
<span class="product-card__badge">In stock · Ships today</span>
</div>
<div class="product-card__body">
<div class="product-card__meta">Character · Prequel Era</div>
<h3 class="product-card__name">Anakin Skywalker EP3</h3>
<div class="product-card__specs">
<div class="product-card__spec">
<span class="product-card__spec-label">Saber Core</span>
<span class="product-card__spec-value">Xenopixel V3</span>
</div>
<div class="product-card__spec">
<span class="product-card__spec-label">Blade type</span>
<span class="product-card__spec-value">Neopixel · Duelling</span>
</div>
<div class="product-card__spec">
<span class="product-card__spec-label">Sound fonts</span>
<span class="product-card__spec-value">34 + custom</span>
</div>
</div>
<div class="product-card__foot">
<div class="product-card__price">$459.99</div>
<a href="#" class="product-card__cta">View saber →</a>
</div>
</div>
</article>
<!-- 6 -->
<article class="product-card product-card--hot">
<div class="product-card__media" style="background-image: url('https://nerdworks.uk/wp-content/uploads/2025/08/Anakin-Skywalker-EP3-1.jpg');">
<a id="tf-stock-status-chip" data-tf-family="stock-status-chip" style="display:contents"></a>
<span class="product-card__badge">In stock · Ships today</span>
</div>
<div class="product-card__body">
<div class="product-card__meta">Character · Prequel Era</div>
<h3 class="product-card__name">Anakin Skywalker EP3</h3>
<div class="product-card__specs">
<div class="product-card__spec">
<span class="product-card__spec-label">Saber Core</span>
<span class="product-card__spec-value">Xenopixel V3</span>
</div>
<div class="product-card__spec">
<span class="product-card__spec-label">Blade type</span>
<span class="product-card__spec-value">Neopixel · Duelling</span>
</div>
<div class="product-card__spec">
<span class="product-card__spec-label">Sound fonts</span>
<span class="product-card__spec-value">34 + custom</span>
</div>
</div>
<div class="product-card__foot">
<div class="product-card__price">$459.99</div>
<a href="#" class="product-card__cta">View saber →</a>
</div>
</div>
</article>
</div>
<!-- BLOCK: pagination-cta -->
<div class="pagination-cta">
<a class="pagination-cta__link" href="/?s=starkiller&post_type=product">See all 18 hilts <span class="arrow">→</span></a>
</div>
</div>
</section>
<!-- BLOCK: section-band + group-heading + guide-card (GUIDES) -->
<section class="results-band" aria-labelledby="guides-heading">
<div class="container">
<div class="group-heading" id="guides-heading">
<div class="group-heading__eyebrow">Guides <span class="sep">·</span> <span class="count">3</span> matches</div>
<div class="group-heading__hud">Sort <span class="sep">·</span> <span class="value">Relevance</span></div>
</div>
<a id="tf-related-post-rail-1" data-tf-family="related-post-rail" style="display:contents"></a>
<div class="guide-grid">
<a class="guide-card" href="/journal/starkiller-build-choosing-core-and-blade/">
<div class="guide-card__media" style="background-image: url('https://artsabers.com/wp-content/uploads/sites/10/2025/12/Starkiller1_SE_1-768x768.jpg');"></div>
<div class="guide-card__body">
<span class="guide-card__chip">Guides & Tips</span>
<h3 class="guide-card__title">The Starkiller build: choosing your core and blade</h3>
<p class="guide-card__excerpt">Which Saber Core suits a Starkiller performance? Where the duelling grade actually matters. And what the difference between Xenopixel V3 and SNV4 PRO means in the hand.</p>
<div class="guide-card__meta">
<span class="value">Chloe</span>
<span class="sep">·</span>
<span>15 May 2026</span>
<span class="sep">·</span>
<span>8 min read</span>
</div>
<span class="guide-card__cta">Read <span class="arrow">→</span></span>
</div>
</a>
<a class="guide-card" href="/journal/mareks-blade-canon-behind-starkillers-saber/">
<div class="guide-card__media" style="background-image: url('https://artsabers.com/wp-content/uploads/sites/10/2025/03/Starkiller-V3-Lightsaber-Xenopixel-V3-600x600.jpg');"></div>
<div class="guide-card__body">
<span class="guide-card__chip">Lore & Short Stories</span>
<h3 class="guide-card__title">Marek’s blade: the canon behind Starkiller’s saber</h3>
<p class="guide-card__excerpt">From the Force Unleashed to Legends, the story of the Sith apprentice who never quite chose a side — and the hilt that reads exactly the way he did.</p>
<div class="guide-card__meta">
<span class="value">Chloe</span>
<span class="sep">·</span>
<span>3 April 2026</span>
<span class="sep">·</span>
<span>12 min read</span>
</div>
<span class="guide-card__cta">Read <span class="arrow">→</span></span>
</div>
</a>
<a class="guide-card" href="/journal/reverse-grip-fundamentals-starkiller-performance/">
<div class="guide-card__media" style="background-image: url('https://artsabers.com/wp-content/uploads/sites/10/2025/03/The-Fighter-Black-Lightsaber-Xenopixel-V3-600x600.jpg');"></div>
<div class="guide-card__body">
<span class="guide-card__chip">Guides & Tips</span>
<h3 class="guide-card__title">Reverse-grip fundamentals for a Starkiller performance</h3>
<p class="guide-card__excerpt">A working primer on why reverse grip reads as Starkiller, where to keep the wrist safe under a heavy duelling blade, and the drills we run at the British Action Academy.</p>
<div class="guide-card__meta">
<span class="value">Matthew</span>
<span class="sep">·</span>
<span>22 February 2026</span>
<span class="sep">·</span>
<span>9 min read</span>
</div>
<span class="guide-card__cta">Read <span class="arrow">→</span></span>
</div>
</a>
</div>
</div>
</section>
<!-- BLOCK: section-band (patterned) + faq-accordion -->
<section class="results-band results-band--patterned" aria-labelledby="faq-heading">
<div class="container">
<div class="group-heading" id="faq-heading">
<div class="group-heading__eyebrow">FAQ <span class="sep">·</span> <span class="count">2</span> matches</div>
<div class="group-heading__hud">Sort <span class="sep">·</span> <span class="value">Relevance</span></div>
</div>
<a id="tf-faq-accordion-1" data-tf-family="faq-accordion" style="display:contents"></a>
<div class="faq-list">
<details class="faq-item">
<summary class="faq-item__summary">
<h3 class="faq-item__q">What’s included in a Starkiller hilt build?</h3>
<span class="faq-item__chevron">+</span>
</summary>
<div class="faq-item__body">
Every Starkiller hilt ships with the Saber Core electronics you selected, one blade sized to the chosen duelling grade, the ARTSABERS charging cable, and access to the XenoConfigurator companion app where the Core supports it. Sound-font packs beyond the pre-loaded set are downloadable from your account after delivery.
</div>
</details>
<details class="faq-item">
<summary class="faq-item__summary">
<h3 class="faq-item__q">Can I customise a Starkiller Neopixel blade colour?</h3>
<span class="faq-item__chevron">+</span>
</summary>
<div class="faq-item__body">
Yes — every Neopixel Core in the Starkiller range (SNV4 PRO, Xenopixel V3, Proffie 2.2) supports the full colour range and lets you swap live from the XenoConfigurator app. The base-lit RGB-X Core is limited to eight preset colours but adds Bluetooth as standard.
</div>
</details>
</div>
</div>
</section>
<!-- BLOCK: category-hit -->
<a id="tf-category-browse-tiles-1" data-tf-family="category-browse-tiles" style="display:contents"></a>
<section class="category-hit" aria-labelledby="categories-heading">
<div class="container">
<div class="group-heading" id="categories-heading" style="border-bottom-color: rgba(255,122,46,0.28);">
<div class="group-heading__eyebrow">Categories <span class="sep">·</span> <span class="count">1</span> match</div>
</div>
<div class="category-hit__row">
<a class="category-hit__chip" href="/collections/starkiller/">
Starkiller Collection
<span class="category-hit__chip-count">18 hilts</span>
<span class="arrow">→</span>
</a>
</div>
</div>
</section>
<!-- BLOCK: state-break -->
<div class="state-break" role="separator" aria-label="No-results state preview">
<span class="state-break__label"><span class="dot">·</span> NO-RESULTS STATE PREVIEW <span class="dot">·</span></span>
</div>
<!-- ============================================================
STATE 2 — NO-RESULTS PREVIEW
query: "kelleran beq" · 0 matches
============================================================ -->
<a id="tf-empty-state-1" data-tf-family="empty-state" style="display:contents"></a>
<!-- BLOCK: compact-hero (no-results variant) -->
<header class="compact-hero">
<div class="container">
<div class="compact-hero__breadcrumb">
<a href="/">Home</a>
<span class="sep">/</span>
<span class="current">Search</span>
</div>
<div class="compact-hero__eyebrow">No matches</div>
<h1 class="compact-hero__title">Nothing here for <em class="compact-hero__query">“kelleran beq”</em>.</h1>
<p class="compact-hero__sub">We haven’t got a hilt for that character in the catalogue yet. Try one of the routes below.</p>
<a id="tf-search-input-2" data-tf-family="search-input" style="display:contents"></a>
<form class="hero-search" action="/" method="get" role="search">
<span class="hero-search__glyph" aria-hidden="true">⚲</span>
<input class="hero-search__input" type="search" name="s" value="starkiller" placeholder="Search the workshop…" autocomplete="off" aria-label="Search the workshop">
<button class="hero-search__submit" type="submit" aria-label="Search">›</button>
</form>
</div>
</header>
<!-- BLOCK: deflection-band -->
<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>
<!-- BLOCK: common-searches -->
<a id="tf-other-1" data-tf-family="other" style="display:contents"></a>
<section class="common-searches" aria-labelledby="common-heading">
<div class="container">
<div class="common-searches__head">
<div class="common-searches__eyebrow" id="common-heading">What other people search for</div>
<p class="common-searches__lede">These queries returned real matches in the catalogue this month.</p>
</div>
<div class="common-searches__cluster">
<a class="query-chip" href="/?s=starkiller">Starkiller</a>
<a class="query-chip" href="/?s=darth+maul">Darth Maul</a>
<a class="query-chip" href="/?s=anakin">Anakin</a>
<a class="query-chip" href="/?s=neopixel">Neopixel</a>
<a class="query-chip" href="/?s=xenopixel+v3">Xenopixel V3</a>
<a class="query-chip" href="/?s=duelling+grade">Duelling grade</a>
<a class="query-chip" href="/?s=double-bladed">Double-bladed</a>
<a class="query-chip" href="/?s=cosplay+helmet">Cosplay helmet</a>
</div>
</div>
</section>
<!-- BLOCK: newsletter-capture-band (MAS73 ember-ombre canonical) -->
<a id="tf-newsletter-signup-1" data-tf-family="newsletter-signup" style="display:contents"></a>
<section class="capture">
<div class="container">
<div class="capture__inner">
<div class="capture__copy">
<div class="capture__eyebrow">◆ Join the comms</div>
<h2 class="capture__title">From factory floor<br>to your inbox.</h2>
<p class="capture__sub">Get 10% off your first saber, plus early access to new drops, ARTSABERS Exclusives, and the workshop pieces that never make it to the public catalogue.</p>
</div>
<div class="capture__form">
<span class="capture__form-lbl">Comms · Signal In</span>
<input class="capture__form-input" type="email" placeholder="your@email.com">
<button class="capture__form-cta">Open the signal →</button>
<span class="capture__form-fine">One drop a week. Unsubscribe with one click. We never share your details.</span>
</div>
</div>
</div>
</section>
<!-- BLOCK: site-footer (canonical) -->
<footer class="site-footer">
<div class="container">
<div class="site-footer__grid">
<div>
<div class="site-footer__brand-mark">ART<span>/</span>SABERS</div>
<p class="site-footer__tag">Every character, every Saber Core, every duelling grade. From factory floor to your door.</p>
<div class="site-footer__meta">1,100 SKUs <span>·</span> 350 unique models <span>·</span> Global delivery 7-10 days</div>
</div>
<div>
<h4 class="site-footer__col-title">Shop</h4>
<ul class="site-footer__links">
<li><a class="site-footer__link" href="/lightsabers/">Lightsabers</a></li>
<li><a class="site-footer__link" href="/collections/duelling/">Duelling Grade</a></li>
<li><a class="site-footer__link" href="/helmets/">Helmets</a></li>
<li><a class="site-footer__link" href="/parts/">Parts & Accessories</a></li>
<li><a class="site-footer__link" href="/offers/">Offers & Deals</a></li>
</ul>
</div>
<div>
<h4 class="site-footer__col-title">Learn</h4>
<ul class="site-footer__links">
<li><a class="site-footer__link" href="/events-courses/">Events & Courses</a></li>
<li><a class="site-footer__link" href="/events-courses/british-action-academy/">British Action Academy</a></li>
<li><a class="site-footer__link" href="/journal/">The Journal</a></li>
<li><a class="site-footer__link" href="/guides/saber-core/">Saber Core Guide</a></li>
</ul>
</div>
<div>
<h4 class="site-footer__col-title">Support</h4>
<ul class="site-footer__links">
<li><a class="site-footer__link" href="/support/">Real Support</a></li>
<li><a class="site-footer__link" href="/faq/">FAQ</a></li>
<li><a class="site-footer__link" href="/faq/#warranty">Warranty</a></li>
<li><a class="site-footer__link" href="/shipping/">Shipping (7-10 days)</a></li>
<li><a class="site-footer__link" href="/returns/">30-Day Returns</a></li>
</ul>
</div>
<div>
<h4 class="site-footer__col-title">Company</h4>
<ul class="site-footer__links">
<li><a class="site-footer__link" href="/about/">About</a></li>
<li><a class="site-footer__link" href="/contact/">Contact</a></li>
<li><a class="site-footer__link" href="/press/">Press</a></li>
<li><a class="site-footer__link" href="/wholesale/">Wholesale</a></li>
</ul>
</div>
</div>
<div class="site-footer__bottom">
<div>© 2026 ARTSABERS · A Nerdworks Brand</div>
<div>USD · CAD · AUD · NZD · EUR · GBP</div>
<div><a href="/privacy/">Privacy</a> <a href="/terms/">Terms</a></div>
</div>
</div>
</footer>
</body></html>