/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"?><html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The Holocron — 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 {
/* ── Ember ombre (accent voice) ── */
--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 (surface roles) ── */
--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-section: var(--charcoal);
--bg-card: var(--hull-panel);
--bg-card-lift: var(--hull-panel-lift);
--bg-hero: var(--carbon);
--bg-footer: var(--carbon);
/* ── Text roles ── */
--text-primary: var(--chrome-warm);
--text-heading: var(--chrome-highlight);
--text-dim: var(--chrome-dim);
--text-on-ember: var(--on-primary-fixed);
/* ── Type ── */
--font-display: 'Orbitron', system-ui, sans-serif;
--font-body: 'Onest', system-ui, sans-serif;
/* ── 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 -10px 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.55);
--ember-hot-rim: inset 0 0 0 1px rgba(255,122,46,0.6), 0 0 24px rgba(255,122,46,0.5);
--chrome-top-soft: inset 0 1px 0 rgba(250,250,250,0.30);
--chrome-top-strong: inset 0 1px 0 rgba(250,250,250,0.40);
/* ── Layout ── */
--container: 1280px;
--gutter: 48px;
--gutter-wide: 96px;
}
/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--carbon);
color: var(--text-primary);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input { font: inherit; }
/* ── Utility ── */
.wrap {
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
.eyebrow {
font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ember);
}
.section-title {
font-family: var(--font-display);
font-weight: 700;
color: var(--text-heading);
letter-spacing: 0.8px;
line-height: 1.05;
margin: 0;
}
.lede {
font-family: var(--font-body);
color: var(--text-primary);
line-height: 1.6;
margin: 0;
}
/* ══════════════════════════════════════════
BLOCK: site-nav
══════════════════════════════════════════ */
.site-nav {
position: sticky;
top: 0;
z-index: 100;
background: rgba(6,6,6,0.86);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: var(--chrome-top-soft), 0 1px 0 rgba(255,122,46,0.12);
}
.site-nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
height: 72px;
}
.site-nav__brand {
font-family: var(--font-display);
font-size: 20px;
font-weight: 700;
letter-spacing: 0.14em;
color: var(--chrome-highlight);
text-transform: uppercase;
}
.site-nav__brand span {
color: var(--ember);
}
.site-nav__links {
display: flex;
gap: 32px;
align-items: center;
}
.site-nav__link {
font-family: var(--font-display);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--chrome-dim);
position: relative;
padding: 8px 0;
transition: color 160ms ease;
}
.site-nav__link:hover { color: var(--chrome-warm); }
.site-nav__link--active {
color: var(--chrome-highlight);
}
.site-nav__link--active::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -2px;
height: 1px;
background: var(--ember);
box-shadow: 0 0 12px rgba(255,122,46,0.7);
}
.site-nav__cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 20px;
font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--chrome-warm);
border: 1px solid rgba(62,62,62,0.7);
box-shadow: var(--chrome-top-soft);
transition: background 160ms ease;
}
.site-nav__cta:hover { background: var(--hull-panel-lift); }
/* ══════════════════════════════════════════
BLOCK: hero-atmospheric
══════════════════════════════════════════ */
.hero-atmospheric {
position: relative;
min-height: 560px;
display: flex;
align-items: center;
overflow: hidden;
background: var(--carbon);
isolation: isolate;
}
.hero-atmospheric__bg {
position: absolute;
inset: 0;
background-image: url('https://camcom.dev/wp-content/uploads/2026/07/6f0320e4a3df77a3b51e2d37a15e6eae-6.jpg');
background-size: cover;
background-position: center;
filter: saturate(0.9) contrast(1.05);
z-index: -3;
}
.hero-atmospheric__overlay {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 20% 30%, rgba(6,6,6,0.62) 0%, rgba(6,6,6,0.72) 55%, rgba(6,6,6,0.88) 100%);
z-index: -2;
}
.hero-atmospheric__bloom {
position: absolute;
top: -120px; left: -120px;
width: 520px; height: 520px;
background: radial-gradient(circle, rgba(255,122,46,0.16) 0%, rgba(255,122,46,0) 70%);
z-index: -1;
pointer-events: none;
}
.hero-atmospheric__inner {
position: relative;
padding-block: 128px 116px;
max-width: 820px;
}
.hero-atmospheric__eyebrow {
display: inline-block;
padding: 8px 14px;
border: 1px solid rgba(255,122,46,0.45);
color: var(--ember);
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
font-weight: 600;
box-shadow: 0 0 20px rgba(255,122,46,0.14);
margin-bottom: 32px;
}
.hero-atmospheric__title {
font-family: var(--font-display);
font-size: clamp(44px, 6.2vw, 68px);
font-weight: 700;
color: var(--chrome-highlight);
letter-spacing: 0.8px;
line-height: 1.02;
margin: 0 0 28px;
text-shadow: 0 2px 32px rgba(0,0,0,0.6);
}
.hero-atmospheric__sub {
font-family: var(--font-body);
font-size: 19px;
line-height: 1.6;
color: var(--chrome-warm);
max-width: 680px;
margin: 0;
}
.hero-atmospheric__seam {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 1px;
background: linear-gradient(90deg,
rgba(255,122,46,0) 0%,
rgba(255,122,46,0.75) 30%,
rgba(255,180,71,0.9) 50%,
rgba(255,122,46,0.75) 70%,
rgba(255,122,46,0) 100%);
box-shadow: 0 8px 40px rgba(255,122,46,0.35);
}
/* ══════════════════════════════════════════
BLOCK: manifesto-band (Why we teach)
══════════════════════════════════════════ */
.manifesto-band {
background: var(--carbon);
padding-block: 120px;
position: relative;
box-shadow: var(--chrome-top-soft);
}
.manifesto-band__header {
max-width: 780px;
margin: 0 auto 88px;
text-align: center;
}
.manifesto-band__eyebrow {
margin-bottom: 20px;
}
.manifesto-band__title {
font-family: var(--font-display);
font-size: clamp(32px, 4vw, 44px);
font-weight: 700;
color: var(--chrome-highlight);
letter-spacing: 0.8px;
line-height: 1.08;
margin: 0 0 24px;
}
.manifesto-band__lede {
font-family: var(--font-body);
font-size: 17px;
line-height: 1.65;
color: var(--chrome-warm);
margin: 0;
}
.manifesto-band__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 56px;
}
.manifesto-band__cell {
position: relative;
padding-top: 20px;
border-top: 1px solid rgba(255,122,46,0.35);
}
.manifesto-band__num {
font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.22em;
color: var(--ember);
margin-bottom: 24px;
}
.manifesto-band__cell-title {
font-family: var(--font-display);
font-size: 24px;
font-weight: 700;
color: var(--chrome-highlight);
letter-spacing: 0.8px;
line-height: 1.2;
margin: 0 0 16px;
}
.manifesto-band__cell-body {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.65;
color: var(--chrome-warm);
margin: 0;
}
/* ══════════════════════════════════════════
BLOCK: featured-guide (wide product-feature band)
══════════════════════════════════════════ */
.featured-guide {
background: var(--charcoal-warm);
padding-block: 24px;
position: relative;
}
.featured-guide__seam-top,
.featured-guide__seam-bottom {
height: 1px;
background: linear-gradient(90deg, rgba(255,122,46,0) 0%, rgba(255,122,46,0.55) 50%, rgba(255,122,46,0) 100%);
box-shadow: 0 0 24px rgba(255,122,46,0.25);
}
.featured-guide__inner {
position: relative;
width: min(1200px, calc(100vw - 48px));
margin-inline: auto;
padding-block: 96px;
display: grid;
grid-template-columns: 55% 45%;
gap: 72px;
align-items: center;
}
.featured-guide__bloom {
position: absolute;
top: 40px; right: 20%;
width: 380px; height: 380px;
background: radial-gradient(circle, rgba(255,122,46,0.16) 0%, rgba(255,122,46,0) 70%);
pointer-events: none;
}
.featured-guide__copy { position: relative; }
.featured-guide__badge {
display: inline-block;
padding: 8px 14px;
border: 1px solid rgba(255,122,46,0.5);
color: var(--ember);
font-family: var(--font-display);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
margin-bottom: 24px;
box-shadow: 0 0 18px rgba(255,122,46,0.14);
}
.featured-guide__type {
font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.28em;
color: var(--chrome-dim);
text-transform: uppercase;
margin-bottom: 18px;
}
.featured-guide__title {
font-family: var(--font-display);
font-size: clamp(28px, 3.4vw, 40px);
font-weight: 700;
color: var(--chrome-highlight);
letter-spacing: 0.8px;
line-height: 1.08;
margin: 0 0 24px;
}
.featured-guide__lede {
font-family: var(--font-body);
font-size: 17px;
line-height: 1.65;
color: var(--chrome-warm);
margin: 0 0 32px;
max-width: 560px;
}
.featured-guide__pills {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 40px;
}
.featured-guide__pill {
padding: 6px 12px;
border: 1px solid rgba(255,122,46,0.35);
color: var(--ember);
font-family: var(--font-display);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.featured-guide__stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
padding-block: 24px;
border-top: 1px solid rgba(255,122,46,0.2);
border-bottom: 1px solid rgba(255,122,46,0.2);
margin-bottom: 40px;
}
.featured-guide__stat-num {
font-family: var(--font-display);
font-size: 44px;
font-weight: 700;
color: var(--ember);
line-height: 1;
margin-bottom: 8px;
font-feature-settings: 'tnum';
}
.featured-guide__stat-label {
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--chrome-dim);
line-height: 1.4;
}
.featured-guide__media {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
box-shadow: var(--chrome-top-soft), 0 24px 60px -12px rgba(0,0,0,0.85);
outline: 1px solid rgba(255,122,46,0.25);
outline-offset: -1px;
}
.featured-guide__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.featured-guide__rim {
position: absolute;
inset: 0;
box-shadow: inset 0 -80px 100px -60px rgba(255,122,46,0.25);
pointer-events: none;
}
/* ── Buttons ── */
.btn-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.14em;
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:
var(--chrome-top-soft),
var(--ember-glow-sm),
inset 0 -1px 0 rgba(90,26,0,0.4);
transition: box-shadow 200ms ease, transform 200ms ease;
}
.btn-primary:hover {
box-shadow:
var(--chrome-top-strong),
var(--ember-glow-md),
inset 0 -1px 0 rgba(90,26,0,0.4);
transform: translateY(-1px);
}
.btn-ghost {
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.14em;
text-transform: uppercase;
color: var(--chrome-warm);
background: transparent;
border: 1px solid rgba(62,62,62,0.7);
transition: background 160ms ease, box-shadow 160ms ease;
}
.btn-ghost:hover {
background: var(--hull-panel-lift);
box-shadow: var(--chrome-top-soft);
}
/* ══════════════════════════════════════════
BLOCK: topic-filter
══════════════════════════════════════════ */
.topic-filter {
background: var(--carbon);
padding-block: 88px 40px;
position: relative;
box-shadow: var(--chrome-top-soft);
}
.topic-filter__eyebrow {
text-align: center;
margin-bottom: 32px;
}
.topic-filter__row {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
}
.topic-filter__chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
border: 1px solid rgba(62,62,62,0.6);
font-family: var(--font-display);
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--chrome-dim);
transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}
.topic-filter__chip:hover {
border-color: rgba(255,122,46,0.5);
color: var(--chrome-warm);
}
.topic-filter__chip-count {
color: var(--chrome-dim);
opacity: 0.7;
font-weight: 500;
}
.topic-filter__chip--active {
background: rgba(232,93,24,0.14);
border-color: rgba(255,122,46,0.7);
color: var(--ember);
box-shadow: 0 0 18px rgba(255,122,46,0.18);
}
.topic-filter__chip--active .topic-filter__chip-count {
color: var(--ember-glow);
opacity: 1;
}
/* ══════════════════════════════════════════
BLOCK: guide-grid
══════════════════════════════════════════ */
.guide-grid {
background: var(--carbon);
padding-block: 40px 128px;
}
.guide-grid__list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.guide-card {
display: flex;
flex-direction: column;
background: var(--hull-panel);
box-shadow: var(--panel-lift);
transition: box-shadow 240ms ease, transform 240ms ease, outline-color 240ms ease;
outline: 1px solid transparent;
outline-offset: -1px;
overflow: hidden;
}
.guide-card:hover {
box-shadow: var(--panel-lift-hover), 0 0 0 1px rgba(255,122,46,0.35);
transform: translateY(-3px);
outline-color: rgba(255,122,46,0.35);
}
.guide-card__media {
aspect-ratio: 3 / 2;
overflow: hidden;
position: relative;
background: var(--hull-panel-dark);
outline: 1px solid rgba(255,122,46,0.18);
outline-offset: -1px;
}
.guide-card__img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 400ms ease;
}
.guide-card:hover .guide-card__img { transform: scale(1.03); }
.guide-card__media--placeholder {
background:
linear-gradient(135deg, rgba(20,20,20,0.9) 0%, rgba(15,15,15,1) 100%),
radial-gradient(circle at 60% 40%, rgba(255,122,46,0.08) 0%, rgba(255,122,46,0) 60%);
display: flex;
align-items: center;
justify-content: center;
}
.guide-card__body {
padding: 28px 24px 24px;
display: flex;
flex-direction: column;
flex: 1;
}
.guide-card__topic {
display: inline-block;
align-self: flex-start;
padding: 5px 10px;
border: 1px solid rgba(255,122,46,0.42);
color: var(--ember);
font-family: var(--font-display);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
margin-bottom: 20px;
}
.guide-card__title {
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
color: var(--chrome-highlight);
letter-spacing: 0.8px;
line-height: 1.22;
margin: 0 0 14px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.guide-card__desc {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
color: var(--chrome-warm);
opacity: 0.86;
margin: 0 0 24px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.guide-card__meta {
font-family: var(--font-display);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--chrome-dim);
padding-top: 16px;
border-top: 1px solid rgba(46,46,46,0.6);
margin-bottom: 20px;
}
.guide-card__cta {
margin-top: auto;
font-family: var(--font-display);
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ember);
display: inline-flex;
align-items: center;
gap: 8px;
}
.guide-card__cta span { transition: transform 200ms ease; }
.guide-card:hover .guide-card__cta span { transform: translateX(4px); }
/* ══════════════════════════════════════════
BLOCK: positioning-band (patterned Variant G)
══════════════════════════════════════════ */
.positioning-band {
background:
linear-gradient(180deg, rgba(6,6,6,0.66) 0%, rgba(6,6,6,0.72) 50%, rgba(6,6,6,0.66) 100%),
/* Variant G: two vertical hull plates with a vertical ember seam */
linear-gradient(90deg,
#0e0e0e 0%,
#0e0e0e 49.7%,
rgba(255,122,46,0.55) 49.9%,
rgba(255,180,71,0.8) 50%,
rgba(255,122,46,0.55) 50.1%,
#0e0e0e 50.3%,
#0e0e0e 100%),
var(--void);
background-size: 100% 100%, 100% 100%, auto;
background-blend-mode: multiply, normal, normal;
padding-block: 128px;
position: relative;
}
.positioning-band::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 50% 0%, rgba(255,122,46,0.10) 0%, rgba(255,122,46,0) 40%),
radial-gradient(ellipse at 50% 100%, rgba(255,122,46,0.08) 0%, rgba(255,122,46,0) 40%);
pointer-events: none;
}
.positioning-band__header {
max-width: 780px;
margin: 0 auto 80px;
text-align: center;
position: relative;
}
.positioning-band__eyebrow { margin-bottom: 20px; }
.positioning-band__title {
font-family: var(--font-display);
font-size: clamp(30px, 3.6vw, 40px);
font-weight: 700;
color: var(--chrome-highlight);
letter-spacing: 0.8px;
line-height: 1.08;
margin: 0 0 20px;
}
.positioning-band__lede {
font-family: var(--font-body);
font-size: 17px;
color: var(--chrome-warm);
opacity: 0.86;
margin: 0;
}
.positioning-band__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
position: relative;
}
.positioning-cell {
padding: 40px 32px;
background: rgba(20,20,20,0.94);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
box-shadow: var(--panel-lift);
}
.positioning-cell__glyph {
width: 44px;
height: 44px;
border: 1px solid rgba(255,122,46,0.5);
color: var(--ember);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 18px;
font-weight: 700;
margin-bottom: 24px;
box-shadow: 0 0 18px rgba(255,122,46,0.18), var(--chrome-top-soft);
}
.positioning-cell__title {
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
color: var(--chrome-highlight);
letter-spacing: 0.8px;
line-height: 1.22;
margin: 0 0 16px;
}
.positioning-cell__body {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.65;
color: var(--chrome-warm);
margin: 0;
}
/* ══════════════════════════════════════════
BLOCK: newsletter-ember (MAS73 warm-capture)
══════════════════════════════════════════ */
.newsletter-ember {
background: linear-gradient(180deg, var(--ember-glow) 0%, var(--ember) 50%, var(--ember-forge) 100%);
padding-block: 112px;
position: relative;
overflow: hidden;
}
.newsletter-ember::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 40%),
radial-gradient(ellipse at 70% 70%, rgba(90,26,0,0.14) 0%, rgba(90,26,0,0) 40%);
pointer-events: none;
}
.newsletter-ember__inner {
max-width: 820px;
margin-inline: auto;
text-align: center;
position: relative;
}
.newsletter-ember__eyebrow {
display: inline-block;
padding: 8px 14px;
border: 1px solid rgba(42,8,0,0.55);
color: var(--on-primary-fixed);
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
font-weight: 600;
margin-bottom: 28px;
}
.newsletter-ember__title {
font-family: var(--font-display);
font-size: clamp(32px, 4.2vw, 52px);
font-weight: 700;
color: var(--on-primary-fixed);
letter-spacing: 0.8px;
line-height: 1.05;
margin: 0 0 20px;
}
.newsletter-ember__sub {
font-family: var(--font-body);
font-size: 17px;
color: var(--on-primary-fixed);
opacity: 0.82;
line-height: 1.55;
margin: 0 0 40px;
}
.newsletter-ember__form {
display: flex;
gap: 12px;
max-width: 560px;
margin-inline: auto;
align-items: flex-end;
}
.newsletter-ember__field {
flex: 1;
text-align: left;
}
.newsletter-ember__label {
display: block;
font-family: var(--font-display);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--on-primary-fixed);
opacity: 0.7;
margin-bottom: 8px;
}
.newsletter-ember__input {
width: 100%;
padding: 14px 4px;
background: transparent;
border: 0;
border-bottom: 1px solid rgba(42,8,0,0.35);
color: var(--on-primary-fixed);
font-family: var(--font-body);
font-size: 16px;
outline: none;
transition: border-color 200ms ease, box-shadow 200ms ease;
}
.newsletter-ember__input::placeholder { color: rgba(42,8,0,0.4); }
.newsletter-ember__input:focus {
border-bottom-color: var(--on-primary-fixed);
box-shadow: 0 8px 20px -12px rgba(42,8,0,0.5);
}
.newsletter-ember__submit {
padding: 14px 28px;
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--on-primary-fixed);
background: transparent;
border: 1px solid var(--on-primary-fixed);
transition: background 160ms ease, color 160ms ease;
}
.newsletter-ember__submit:hover {
background: var(--on-primary-fixed);
color: var(--ember-glow);
}
.newsletter-ember__foot {
margin-top: 24px;
font-family: var(--font-display);
font-size: 10.5px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--on-primary-fixed);
opacity: 0.6;
}
/* ══════════════════════════════════════════
BLOCK: site-footer
══════════════════════════════════════════ */
.site-footer {
background: var(--carbon);
padding-block: 88px 40px;
position: relative;
box-shadow: inset 0 1px 0 rgba(255,122,46,0.35), 0 -12px 40px -20px rgba(255,122,46,0.4);
}
.site-footer__grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 56px;
margin-bottom: 72px;
}
.site-footer__brand {
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
letter-spacing: 0.14em;
color: var(--chrome-highlight);
text-transform: uppercase;
margin-bottom: 20px;
}
.site-footer__brand span { color: var(--ember); }
.site-footer__tagline {
font-family: var(--font-body);
font-size: 16px;
color: var(--chrome-warm);
opacity: 0.75;
line-height: 1.6;
max-width: 320px;
margin: 0;
}
.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-dim);
margin-bottom: 24px;
}
.site-footer__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.site-footer__link {
font-family: var(--font-body);
font-size: 14px;
color: var(--chrome-warm);
opacity: 0.72;
transition: color 160ms ease, opacity 160ms ease;
}
.site-footer__link:hover { color: var(--ember); opacity: 1; }
.site-footer__bottom {
border-top: 1px solid rgba(46,46,46,0.6);
padding-top: 28px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
}
.site-footer__legal {
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--chrome-dim);
}
.site-footer__socials {
display: flex;
gap: 20px;
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--chrome-dim);
}
.site-footer__socials a:hover { color: var(--ember); }
/* ══════════════════════════════════════════
RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 1024px) {
.featured-guide__inner { grid-template-columns: 1fr; gap: 48px; }
.site-footer__grid { grid-template-columns: 1fr 1fr; }
.guide-grid__list { grid-template-columns: repeat(2, 1fr); }
.site-nav__links { gap: 20px; }
}
@media (max-width: 720px) {
:root { --gutter: 24px; }
.site-nav__inner { height: 64px; }
.site-nav__links { display: none; }
.site-nav__cta { padding: 8px 14px; font-size: 11px; }
.hero-atmospheric { min-height: 480px; }
.hero-atmospheric__inner { padding-block: 96px 88px; }
.hero-atmospheric__title { font-size: 40px; letter-spacing: 0.8px; }
.hero-atmospheric__sub { font-size: 16px; }
.manifesto-band { padding-block: 80px; }
.manifesto-band__grid { grid-template-columns: 1fr; gap: 40px; }
.featured-guide__inner { padding-block: 64px; }
.featured-guide__stats { grid-template-columns: 1fr; gap: 20px; }
.featured-guide__stat-num { font-size: 36px; }
.topic-filter__row { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 8px; }
.topic-filter__chip { flex: 0 0 auto; }
.guide-grid { padding-block: 32px 88px; }
.guide-grid__list { grid-template-columns: 1fr; gap: 24px; }
.positioning-band { padding-block: 80px; }
.positioning-band__grid { grid-template-columns: 1fr; gap: 20px; }
.newsletter-ember { padding-block: 80px; }
.newsletter-ember__form { flex-direction: column; align-items: stretch; }
.newsletter-ember__submit { width: 100%; padding: 16px; }
.site-footer__grid { grid-template-columns: 1fr; gap: 40px; margin-bottom: 48px; }
.site-footer__bottom { flex-direction: column; align-items: flex-start; }
}
/* -- 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; }
}
</style>
</head>
<body>
<!-- ══════════════════════════════════════════
SITE NAV
══════════════════════════════════════════ -->
<header class="site-nav">
<div class="wrap site-nav__inner">
<a href="/" class="site-nav__brand">ART<span>SABERS</span></a>
<nav class="site-nav__links">
<a href="/lightsabers/" class="site-nav__link">Lightsabers</a>
<a href="/helmets/" class="site-nav__link">Helmets</a>
<a href="/parts/" class="site-nav__link">Parts</a>
<a href="/events/" class="site-nav__link">Events & Courses</a>
<a href="/holocron/" class="site-nav__link site-nav__link--active">Holocron</a>
<a href="/about/" class="site-nav__link">About</a>
<a href="/faq/" class="site-nav__link">FAQ</a>
<a href="/contact/" class="site-nav__link">Contact</a>
</nav>
<a href="/cart/" class="site-nav__cta">Cart · 0</a>
</div>
</header>
<!-- ══════════════════════════════════════════
SECTION 2 — HERO ATMOSPHERIC
══════════════════════════════════════════ -->
<a id="tf-hero-atmospheric-1" data-tf-family="hero-atmospheric" style="display:contents"></a>
<section class="hero-atmospheric">
<div class="hero-atmospheric__bg" aria-hidden="true"></div>
<div class="hero-atmospheric__overlay" aria-hidden="true"></div>
<div class="hero-atmospheric__bloom" aria-hidden="true"></div>
<div class="wrap">
<div class="hero-atmospheric__inner">
<span class="hero-atmospheric__eyebrow">The Holocron · Workshop Knowledge</span>
<h1 class="hero-atmospheric__title">Every question, answered.</h1>
<p class="hero-atmospheric__sub">We only sell hilts. But we've been at it since 2020, and we've learned enough to answer most of what people ask. This is the Holocron — the accumulated knowledge of the workshop.</p>
</div>
</div>
<div class="hero-atmospheric__seam" aria-hidden="true"></div>
</section>
<!-- ══════════════════════════════════════════
SECTION 3 — WHY WE TEACH (manifesto band)
══════════════════════════════════════════ -->
<!-- Why We Teach section removed 2026-07-13 — flow goes hero → featured guide direct -->
<!-- ══════════════════════════════════════════
SECTION 4 — FEATURED GUIDE SPOTLIGHT (Saber Cores)
══════════════════════════════════════════ -->
<a id="tf-inpage-cta-1" data-tf-family="inpage-cta" style="display:contents"></a>
<section class="featured-guide">
<div class="featured-guide__seam-top" aria-hidden="true"></div>
<div class="featured-guide__inner">
<div class="featured-guide__bloom" aria-hidden="true"></div>
<div class="featured-guide__copy">
<span class="featured-guide__badge">Featured Guide</span>
<div class="featured-guide__type">Saber Cores</div>
<h2 class="featured-guide__title">Saber Cores — the complete guide.</h2>
<p class="featured-guide__lede">Five cores across the ARTSABERS catalogue: RGB-X, S-RGB, Xenopixel V3, SNV4 PRO, Proffie 2.2. Which is right for you depends on what you actually want the hilt to do. This is the complete comparison — with the trade-offs the marketing sheets don't tell you.</p>
<div class="featured-guide__pills">
<span class="featured-guide__pill">5 Cores Compared</span>
<span class="featured-guide__pill">14 Min Read</span>
<span class="featured-guide__pill">Comparison Table</span>
<span class="featured-guide__pill">Decision Helper</span>
</div>
<div class="featured-guide__stats">
<div>
<div class="featured-guide__stat-num">5</div>
<div class="featured-guide__stat-label">Cores in the catalogue</div>
</div>
<div>
<div class="featured-guide__stat-num">3</div>
<div class="featured-guide__stat-label">Tiers of complexity</div>
</div>
<div>
<div class="featured-guide__stat-num">1</div>
<div class="featured-guide__stat-label">Honest recommendation per archetype</div>
</div>
</div>
<a href="/holocron/saber-cores/" class="btn-primary">Read the guide <span aria-hidden="true">→</span></a>
</div>
<div class="featured-guide__media">
<img class="featured-guide__img" src="https://artsabers.com/wp-content/uploads/sites/10/2025/03/The-Fighter-Black-Lightsaber-Xenopixel-V3-600x600.jpg" alt="The Fighter — black lightsaber hilt with Xenopixel V3 core, moody workshop lighting" loading="lazy">
<div class="featured-guide__rim" aria-hidden="true"></div>
</div>
</div>
<div class="featured-guide__seam-bottom" aria-hidden="true"></div>
</section>
<!-- ══════════════════════════════════════════
SECTION 5 — TOPIC FILTER CHIP ROW
══════════════════════════════════════════ -->
<!-- Topic filter chip row removed 2026-07-13 — replaced by topic-row structure below -->
<style>.topic-rows {
background:
/* very subtle ember hint top-left */
radial-gradient(ellipse 600px 300px at 6% 3%, rgba(255,122,46,0.02) 0%, transparent 60%),
/* very subtle ember hint bottom-right */
radial-gradient(ellipse 700px 400px at 94% 97%, rgba(255,122,46,0.018) 0%, transparent 60%),
/* HULL-PLATE PATTERN — horizontal seams every 900px (large architectural sections). Chrome-highlight top-edge above each seam (raised plate feel), dark shadow below (recessed joint). */
repeating-linear-gradient(
180deg,
transparent 0px,
transparent 896px,
rgba(255,220,190,0.085) 896px,
rgba(255,220,190,0.085) 897px,
rgba(0,0,0,0.6) 897px,
rgba(0,0,0,0.6) 900px,
rgba(0,0,0,0.3) 900px,
rgba(0,0,0,0.3) 903px,
transparent 903px,
transparent 904px
),
/* HULL-PLATE PATTERN — vertical seams every 1200px (dark recessed joint between plates) */
repeating-linear-gradient(
90deg,
transparent 0px,
transparent 1195px,
rgba(255,220,190,0.045) 1195px,
rgba(255,220,190,0.045) 1196px,
rgba(0,0,0,0.55) 1196px,
rgba(0,0,0,0.55) 1200px,
transparent 1200px,
transparent 1202px
),
/* subtle plate-face tonal variance implying panel depth (large offset ellipses per plate) */
radial-gradient(ellipse 750px 500px at 30% 30%, rgba(255,255,255,0.01) 0%, transparent 60%),
/* FINE METALLIC NOISE — SVG feTurbulence, warm-tinted grain, opacity tuned so metallic texture reads on the dark base */
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.04 0 0 0 0 0.028 0 0 0 0 0.022 0 0 0 0.32 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
/* near-black carbon base — SG "void" with just enough lift for the texture to read */
linear-gradient(180deg, #060605 0%, #070706 50%, #080706 100%);
background-size: auto, auto, auto, auto, 1200px 904px, 200px 200px, auto;
padding: 32px 0 60px;
position: relative;
overflow: hidden;
}
.topic-rows::before {
/* chrome-highlight top-edge to catch the raised-plate feel */
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(255,220,190,0.08) 50%, transparent 100%);
pointer-events: none;
}
.topic-rows::after {
/* soft ember panel-seam glow just above the closing edge */
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(255,122,46,0.5) 50%, transparent 100%);
box-shadow: 0 -8px 24px -6px rgba(255,122,46,0.25);
pointer-events: none;
}
.topic-row {
padding: 44px 0 40px;
position: relative;
}
.topic-row + .topic-row::before {
/* ember hairline separator between rows with subtle bloom */
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(255,122,46,0.25) 20%, rgba(255,122,46,0.4) 50%, rgba(255,122,46,0.25) 80%, transparent 100%);
pointer-events: none;
}
.topic-row:first-of-type { padding-top: 28px; }
.topic-row__header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 24px;
padding-bottom: 20px;
margin-bottom: 28px;
border-bottom: 1px solid rgba(36,36,36,0.9);
flex-wrap: wrap;
}
.topic-row__label {
font-family: var(--font-display);
font-size: 18px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ember);
font-weight: 700;
margin: 0;
}
.topic-row__label-count {
color: var(--chrome-dim);
font-weight: 500;
margin-left: 14px;
letter-spacing: 0.16em;
font-size: 12px;
}
.topic-row__view-all {
font-family: var(--font-display);
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ember);
border-bottom: 1px solid rgba(255,122,46,0.5);
padding-bottom: 3px;
white-space: nowrap;
text-decoration: none;
transition: color 0.2s, border-bottom-color 0.2s;
}
.topic-row__view-all:hover { color: var(--ember-glow); border-bottom-color: var(--ember-glow); }
.topic-row__descriptor {
flex-basis: 100%;
font-family: var(--font-body);
font-size: 14px;
color: var(--chrome-warm);
margin: 4px 0 0;
line-height: 1.5;
max-width: 60ch;
}
.topic-row__grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
}
@media (max-width: 1200px) { .topic-row__grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px) { .topic-row__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .topic-row__grid { grid-template-columns: repeat(2, 1fr); } }
.topic-card {
display: flex;
flex-direction: column;
background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(6,6,6,0.4));
border: 1px solid rgba(36,36,36,0.9);
min-height: 300px;
overflow: hidden;
transition: border-color 0.25s, background 0.25s, transform 0.25s;
text-decoration: none;
color: inherit;
}
.topic-card:hover {
border-color: rgba(255,122,46,0.45);
background: linear-gradient(180deg, rgba(255,122,46,0.05), rgba(6,6,6,0.4));
transform: translateY(-2px);
}
.topic-card__media {
aspect-ratio: 4/3;
overflow: hidden;
background: linear-gradient(135deg, rgba(255,122,46,0.08), rgba(6,6,6,0.6));
border-bottom: 1px solid rgba(255,122,46,0.18);
position: relative;
}
.topic-card__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.topic-card:hover .topic-card__img { transform: scale(1.04); }
.topic-card__body {
padding: 16px 18px 18px;
display: flex;
flex-direction: column;
flex: 1;
}
.topic-card__title {
font-family: var(--font-display);
font-size: 16px;
line-height: 1.3;
color: var(--chrome-highlight);
font-weight: 500;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden; letter-spacing: 0.8px; }
.topic-card__desc {
font-family: var(--font-body);
font-size: 13px;
line-height: 1.45;
color: var(--chrome-warm);
margin: 8px 0 auto;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.topic-card__meta {
margin-top: 16px;
font-family: var(--font-display);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--chrome-dim);
padding-bottom: 12px;
border-bottom: 1px solid rgba(36,36,36,0.85);
}
.topic-card__cta {
margin-top: 12px;
font-family: var(--font-display);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ember);
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 6px;
}
/* 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; }</style>
<!-- ══════════════════════════════════════════
SECTION 6 — GUIDE CARD GRID
══════════════════════════════════════════ -->
<a id="tf-category-browse-tiles-1" data-tf-family="category-browse-tiles" style="display:contents"></a>
<section class="topic-rows">
<div class="wrap">
<!-- Row 1 · SABER CORES (3) -->
<div class="topic-row">
<header class="topic-row__header">
<h2 class="topic-row__label">Saber Cores<span class="topic-row__label-count">3 guides</span></h2>
<p class="topic-row__descriptor">The electronics behind the light. Five cores across the catalogue — this is where every build decision starts.</p>
</header>
<div class="topic-row__grid">
<a href="/holocron/saber-cores/" class="topic-card">
<div class="topic-card__media"><img class="topic-card__img" src="https://artsabers.com/wp-content/uploads/sites/10/2025/03/The-Fighter-Black-Lightsaber-Xenopixel-V3-600x600.jpg" alt="" loading="lazy"></div>
<div class="topic-card__body">
<h3 class="topic-card__title">Saber Cores — the complete guide.</h3>
<p class="topic-card__desc">Five cores. Five price points. One honest recommendation per archetype.</p>
<div class="topic-card__meta">14 Min · Upd 15 Jun 2026</div>
<span class="topic-card__cta">Read →</span>
</div>
</a>
<a href="/holocron/xenopixel-vs-proffie/" class="topic-card">
<div class="topic-card__media"><img class="topic-card__img" src="https://artsabers.com/wp-content/uploads/sites/10/2025/03/Starkiller-V3-Lightsaber-Xenopixel-V3-600x600.jpg" alt="" loading="lazy"></div>
<div class="topic-card__body">
<h3 class="topic-card__title">Xenopixel V3 vs Proffie 2.2 — head to head.</h3>
<p class="topic-card__desc">Two smart cores compared. Same feature set on paper — very different personalities in the hand.</p>
<div class="topic-card__meta">8 Min · Upd 20 May 2026</div>
<span class="topic-card__cta">Read →</span>
</div>
</a>
<a href="/holocron/baselit-vs-pixel/" class="topic-card">
<div class="topic-card__media"><img class="topic-card__img" src="https://artsabers.com/wp-content/uploads/sites/10/2025/03/Apprentice-Black-Duelling-Lightsaber-RGB-X-600x600.jpg" alt="" loading="lazy"></div>
<div class="topic-card__body">
<h3 class="topic-card__title">Base-lit vs pixel — the entry-level decision.</h3>
<p class="topic-card__desc">Where to start when the budget is a real constraint. What you give up, and what you don't.</p>
<div class="topic-card__meta">6 Min · Upd 12 Apr 2026</div>
<span class="topic-card__cta">Read →</span>
</div>
</a>
</div>
</div>
<!-- Row 2 · BLADES (4) -->
<div class="topic-row">
<header class="topic-row__header">
<h2 class="topic-row__label">Blades<span class="topic-row__label-count">4 guides</span></h2>
<p class="topic-row__descriptor">Length, thickness, colour, construction. Everything that decides how a saber behaves once it's lit.</p>
</header>
<div class="topic-row__grid">
<a href="/holocron/blade-types/" class="topic-card">
<div class="topic-card__media"><img class="topic-card__img" src="https://artsabers.com/wp-content/uploads/sites/10/2025/03/The-Fighter-Black-Lightsaber-Xenopixel-V3-600x600.jpg" alt="" loading="lazy"></div>
<div class="topic-card__body">
<h3 class="topic-card__title">Blade types explained — Neopixel vs In-Hilt LED.</h3>
<p class="topic-card__desc">The visual difference is huge. The price difference is bigger. When each one is right.</p>
<div class="topic-card__meta">9 Min · Upd 3 May 2026</div>
<span class="topic-card__cta">Read →</span>
</div>
</a>
<a href="/holocron/blade-thickness/" class="topic-card">
<div class="topic-card__media"><img class="topic-card__img" src="https://artsabers.com/wp-content/uploads/sites/10/2025/03/Starkiller-V3-Lightsaber-Xenopixel-V3-600x600.jpg" alt="" loading="lazy"></div>
<div class="topic-card__body">
<h3 class="topic-card__title">Blade thickness and duelling readiness.</h3>
<p class="topic-card__desc">Wall thickness, blade diameter, and what actually survives a real impact.</p>
<div class="topic-card__meta">7 Min · Upd 8 Jun 2026</div>
<span class="topic-card__cta">Read →</span>
</div>
</a>
<a href="/holocron/blade-colours/" class="topic-card">
<div class="topic-card__media"><img class="topic-card__img" src="https://artsabers.com/wp-content/uploads/sites/10/2025/03/Apprentice-Black-Duelling-Lightsaber-RGB-X-600x600.jpg" alt="" loading="lazy"></div>
<div class="topic-card__body">
<h3 class="topic-card__title">Blade colours and how they actually work.</h3>
<p class="topic-card__desc">What determines the colour you see. And what a pixel blade can do that an in-hilt LED can't.</p>
<div class="topic-card__meta">5 Min · Upd 12 Jun 2026</div>
<span class="topic-card__cta">Read →</span>
</div>
</a>
<a href="/holocron/blade-emitters/" class="topic-card">
<div class="topic-card__media"><img class="topic-card__img" src="https://artsabers.com/wp-content/uploads/sites/10/2025/03/The-Fighter-Black-Lightsaber-Xenopixel-V3-600x600.jpg" alt="" loading="lazy"></div>
<div class="topic-card__body">
<h3 class="topic-card__title">Removable vs fixed blade emitters.</h3>
<p class="topic-card__desc">When a removable emitter is worth the compromise. And when it isn't.</p>
<div class="topic-card__meta">4 Min · Upd 20 Feb 2026</div>
<span class="topic-card__cta">Read →</span>
</div>
</a>
</div>
</div>
<!-- Row 3 · DUELLING (3) -->
<div class="topic-row">
<header class="topic-row__header">
<h2 class="topic-row__label">Duelling<span class="topic-row__label-count">3 guides</span></h2>
<p class="topic-row__descriptor">What "duelling-ready" actually means. How to duel safely. And how the hilt should feel when you swing it.</p>
</header>
<div class="topic-row__grid">
<a href="/holocron/duelling-grade/" class="topic-card">
<div class="topic-card__media"><img class="topic-card__img" src="https://artsabers.com/wp-content/uploads/sites/10/2025/03/Apprentice-Black-Duelling-Lightsaber-RGB-X-600x600.jpg" alt="" loading="lazy"></div>
<div class="topic-card__body">
<h3 class="topic-card__title">Duelling grade — what it actually means.</h3>
<p class="topic-card__desc">Every retailer claims it. Here's the tests a hilt has to pass before we tag it on our site.</p>
<div class="topic-card__meta">8 Min · Upd 22 Apr 2026</div>
<span class="topic-card__cta">Read →</span>
</div>
</a>
<a href="/holocron/light-vs-heavy-duelling/" class="topic-card">
<div class="topic-card__media"><img class="topic-card__img" src="https://artsabers.com/wp-content/uploads/sites/10/2025/03/Starkiller-V3-Lightsaber-Xenopixel-V3-600x600.jpg" alt="" loading="lazy"></div>
<div class="topic-card__body">
<h3 class="topic-card__title">Light duelling vs heavy duelling — which is you?</h3>
<p class="topic-card__desc">Two very different sports. Different hilts, different blades, different mindsets.</p>
<div class="topic-card__meta">6 Min · Upd 4 May 2026</div>
<span class="topic-card__cta">Read →</span>
</div>
</a>
<a href="/holocron/duelling-safety/" class="topic-card">
<div class="topic-card__media"><img class="topic-card__img" src="https://artsabers.com/wp-content/uploads/sites/10/2025/03/The-Fighter-Black-Lightsaber-Xenopixel-V3-600x600.jpg" alt="" loading="lazy"></div>
<div class="topic-card__body">
<h3 class="topic-card__title">Duelling safety and community etiquette.</h3>
<p class="topic-card__desc">Rules, gear, and the unwritten conventions that keep the community together.</p>
<div class="topic-card__meta">5 Min · Upd 15 Feb 2026</div>
<span class="topic-card__cta">Read →</span>
</div>
</a>
</div>
</div>
<!-- Row 4 · SOUND FONTS (2) -->
<div class="topic-row">
<header class="topic-row__header">
<h2 class="topic-row__label">Sound Fonts<span class="topic-row__label-count">2 guides</span></h2>
<p class="topic-row__descriptor">The voices, roars, and hums that make a saber a saber. How to change them — and where to find good ones.</p>
</header>
<div class="topic-row__grid">
<a href="/holocron/sound-fonts/" class="topic-card">
<div class="topic-card__media"><img class="topic-card__img" src="https://artsabers.com/wp-content/uploads/sites/10/2025/03/The-Fighter-Black-Lightsaber-Xenopixel-V3-600x600.jpg" alt="" loading="lazy"></div>
<div class="topic-card__body">
<h3 class="topic-card__title">Sound fonts 101 — how they work and how to add more.</h3>
<p class="topic-card__desc">SD card fonts, config files, and the ceiling on each core's font capacity.</p>
<div class="topic-card__meta">7 Min · Upd 12 Jun 2026</div>
<span class="topic-card__cta">Read →</span>
</div>
</a>
<a href="/holocron/font-libraries/" class="topic-card">
<div class="topic-card__media"><img class="topic-card__img" src="https://artsabers.com/wp-content/uploads/sites/10/2025/03/Starkiller-V3-Lightsaber-Xenopixel-V3-600x600.jpg" alt="" loading="lazy"></div>
<div class="topic-card__body">
<h3 class="topic-card__title">Font libraries — where to find, how to install.</h3>
<p class="topic-card__desc">Where the good font packs live. Which ones are worth paying for. And how to install cleanly.</p>
<div class="topic-card__meta">5 Min · Upd 8 May 2026</div>
<span class="topic-card__cta">Read →</span>
</div>
</a>
</div>
</div>
<!-- Row 5 · CHARACTER BUILDS (6 → shows 5 + View all) -->
<div class="topic-row">
<header class="topic-row__header">
<h2 class="topic-row__label">Character Builds<span class="topic-row__label-count">6 guides</span></h2>
<a class="topic-row__view-all" href="/holocron/character-builds/">View all 6 guides →</a>
<p class="topic-row__descriptor">How to build the look — hilt, blade, sound. Which hilts from the catalogue actually match what's on screen.</p>
</header>
<div class="topic-row__grid">
<a href="/holocron/anakin-build/" class="topic-card">
<div class="topic-card__media"><img class="topic-card__img" src="https://artsabers.com/wp-content/uploads/sites/10/2025/03/The-Fighter-Black-Lightsaber-Xenopixel-V3-600x600.jpg" alt="" loading="lazy"></div>
<div class="topic-card__body">
<h3 class="topic-card__title">Building the Anakin look — hilt, blade, sound.</h3>
<p class="topic-card__desc">From Padawan single-blade to Vader-era construction. Every combination in the catalogue.</p>
<div class="topic-card__meta">11 Min · Upd 8 Jun 2026</div>
<span class="topic-card__cta">Read →</span>
</div>
</a>
<a href="/holocron/kylo-ren-build/" class="topic-card">
<div class="topic-card__media"><img class="topic-card__img" src="https://camcom.dev/wp-content/uploads/2026/07/Carbon_Strike_1-600x600.jpg" alt="" loading="lazy"></div>
<div class="topic-card__body">
<h3 class="topic-card__title">Building the Kylo Ren look — the crossguard problem, solved.</h3>
<p class="topic-card__desc">The unstable crossguard is the hardest lightsaber configuration to replicate. Here's how the current-gen electronics handle it.</p>
<div class="topic-card__meta">10 Min · Upd 27 May 2026</div>
<span class="topic-card__cta">Read →</span>
</div>
</a>
<a href="/holocron/ahsoka-tano-build/" class="topic-card">
<div class="topic-card__media"><img class="topic-card__img" src="https://artsabers.com/wp-content/uploads/sites/10/2025/03/Starkiller-V3-Lightsaber-Xenopixel-V3-600x600.jpg" alt="" loading="lazy"></div>
<div class="topic-card__body">
<h3 class="topic-card__title">Building the Ahsoka Tano look — twin sabers.</h3>
<p class="topic-card__desc">Twin blades. Twin builds. Twin problems — solved with matched hilts and a specific electronics choice.</p>
<div class="topic-card__meta">9 Min · Upd 15 May 2026</div>
<span class="topic-card__cta">Read →</span>
</div>
</a>
<a href="/holocron/darth-maul-build/" class="topic-card">
<div class="topic-card__media"><img class="topic-card__img" src="https://artsabers.com/wp-content/uploads/sites/10/2025/03/Darth-Maul-Double-Bladed-Lightsaber-SNV4-PRO-600x600.jpg" alt="" loading="lazy"></div>
<div class="topic-card__body">
<h3 class="topic-card__title">Building the Darth Maul look — the double-blade.</h3>
<p class="topic-card__desc">The double-blade at duelling grade. Which SNV4 PRO variant handles the length, and how it feels to swing.</p>
<div class="topic-card__meta">8 Min · Upd 3 Apr 2026</div>
<span class="topic-card__cta">Read →</span>
</div>
</a>
<a href="/holocron/vader-rotj-build/" class="topic-card">
<div class="topic-card__media"><img class="topic-card__img" src="https://artsabers.com/wp-content/uploads/sites/10/2025/03/The-Fighter-Black-Lightsaber-Xenopixel-V3-600x600.jpg" alt="" loading="lazy"></div>
<div class="topic-card__body">
<h3 class="topic-card__title">Building the Vader ROTJ look — the final Vader.</h3>
<p class="topic-card__desc">The final-form Vader. Every part matched — grip, emitter, activation plate. Down to the sound font.</p>
<div class="topic-card__meta">10 Min · Upd 22 Mar 2026</div>
<span class="topic-card__cta">Read →</span>
</div>
</a>
</div>
</div>
<!-- Row 6 · CARE (4) -->
<div class="topic-row">
<header class="topic-row__header">
<h2 class="topic-row__label">Care<span class="topic-row__label-count">4 guides</span></h2>
<p class="topic-row__descriptor">Keeping your hilt working. Batteries, blades, fonts, and everything in between — the ongoing maintenance side.</p>
</header>
<div class="topic-row__grid">
<a href="/holocron/neopixel-care/" class="topic-card">
<div class="topic-card__media"><img class="topic-card__img" src="https://artsabers.com/wp-content/uploads/sites/10/2025/03/The-Fighter-Black-Lightsaber-Xenopixel-V3-600x600.jpg" alt="" loading="lazy"></div>
<div class="topic-card__body">
<h3 class="topic-card__title">Care and feeding of your Neopixel blade.</h3>
<p class="topic-card__desc">Storage, charging, cleaning, and what to do when a pixel dies mid-strip.</p>
<div class="topic-card__meta">5 Min · Upd 2 Feb 2026</div>
<span class="topic-card__cta">Read →</span>
</div>
</a>
<a href="/holocron/batteries-charging/" class="topic-card">
<div class="topic-card__media"><img class="topic-card__img" src="https://artsabers.com/wp-content/uploads/sites/10/2025/03/Apprentice-Black-Duelling-Lightsaber-RGB-X-600x600.jpg" alt="" loading="lazy"></div>
<div class="topic-card__body">
<h3 class="topic-card__title">Batteries and charging explained.</h3>
<p class="topic-card__desc">Battery types, chargers, and how long a full charge actually lasts in real use.</p>
<div class="topic-card__meta">4 Min · Upd 20 Jan 2026</div>
<span class="topic-card__cta">Read →</span>
</div>
</a>
<a href="/holocron/sound-troubleshooting/" class="topic-card">
<div class="topic-card__media"><img class="topic-card__img" src="https://artsabers.com/wp-content/uploads/sites/10/2025/03/Starkiller-V3-Lightsaber-Xenopixel-V3-600x600.jpg" alt="" loading="lazy"></div>
<div class="topic-card__body">
<h3 class="topic-card__title">Sound font troubleshooting.</h3>
<p class="topic-card__desc">Silent hilts, glitchy fonts, mid-swing dropouts. What's usually wrong, and how to fix it.</p>
<div class="topic-card__meta">7 Min · Upd 10 May 2026</div>
<span class="topic-card__cta">Read →</span>
</div>
</a>
<a href="/holocron/cleaning-maintenance/" class="topic-card">
<div class="topic-card__media"><img class="topic-card__img" src="https://artsabers.com/wp-content/uploads/sites/10/2025/03/The-Fighter-Black-Lightsaber-Xenopixel-V3-600x600.jpg" alt="" loading="lazy"></div>
<div class="topic-card__body">
<h3 class="topic-card__title">Cleaning and long-term maintenance.</h3>
<p class="topic-card__desc">The 5-minute weekly check that keeps a hilt working for years.</p>
<div class="topic-card__meta">3 Min · Upd 18 Mar 2026</div>
<span class="topic-card__cta">Read →</span>
</div>
</a>
</div>
</div>
<!-- Row 7 · COSPLAY (2) -->
<div class="topic-row">
<header class="topic-row__header">
<h2 class="topic-row__label">Cosplay<span class="topic-row__label-count">2 guides</span></h2>
<p class="topic-row__descriptor">Beyond the saber. The whole look — helmet, hilt, cape. Which pieces from the catalogue actually work together as a build.</p>
</header>
<div class="topic-row__grid">
<a href="/holocron/mandalorian-build/" class="topic-card">
<div class="topic-card__media"><img class="topic-card__img" src="https://artsabers.com/wp-content/uploads/sites/10/2025/03/Mandalorian-Helmet-600x600.jpg" alt="" loading="lazy"></div>
<div class="topic-card__body">
<h3 class="topic-card__title">Building the Mandalorian look — helmet, hilt, cape.</h3>
<p class="topic-card__desc">The armour beat is the visual; the hilt is the sidearm. Which Mandalorian hilts work together as a build.</p>
<div class="topic-card__meta">12 Min · Upd 5 May 2026</div>
<span class="topic-card__cta">Read →</span>
</div>
</a>
<a href="/holocron/cosplay-helmets/" class="topic-card">
<div class="topic-card__media"><img class="topic-card__img" src="https://artsabers.com/wp-content/uploads/sites/10/2025/03/Death-Trooper-Helmet-600x600.jpg" alt="" loading="lazy"></div>
<div class="topic-card__body">
<h3 class="topic-card__title">Cosplay helmets — brands and quality tiers.</h3>
<p class="topic-card__desc">Different brands, different fits, different budgets. Which ones are worth the money.</p>
<div class="topic-card__meta">6 Min · Upd 22 Apr 2026</div>
<span class="topic-card__cta">Read →</span>
</div>
</a>
</div>
</div>
</div>
</section>
<!-- ══════════════════════════════════════════
SECTION 7 — POSITIONING BAND (Variant G patterned)
══════════════════════════════════════════ -->
<a id="tf-trust-prose-cells-1" data-tf-family="trust-prose-cells" style="display:contents"></a>
<section class="positioning-band">
<div class="wrap">
<header class="positioning-band__header">
<div class="positioning-band__eyebrow eyebrow">What Makes a Holocron Guide Different</div>
<h2 class="positioning-band__title">Three things a generic buyer's guide can't do.</h2>
<p class="positioning-band__lede">Because they don't own the catalogue.</p>
</header>
<div class="positioning-band__grid">
<article class="positioning-cell">
<div class="positioning-cell__glyph" aria-hidden="true">01</div>
<h3 class="positioning-cell__title">Written from behind the workbench.</h3>
<p class="positioning-cell__body">Not an SEO agency writing about a product they've never held. If a Holocron guide talks about a hilt, we've built one.</p>
</article>
<article class="positioning-cell">
<div class="positioning-cell__glyph" aria-hidden="true">02</div>
<h3 class="positioning-cell__title">No affiliate leakage.</h3>
<p class="positioning-cell__body">Every product mention is a hilt we stock. If we recommend a specific core, it's because that hilt is in our warehouse and we know the electronics failure rate.</p>
</article>
<article class="positioning-cell">
<div class="positioning-cell__glyph" aria-hidden="true">03</div>
<h3 class="positioning-cell__title">Living reference.</h3>
<p class="positioning-cell__body">A guide isn't dead the day it publishes. Cores get discontinued, new blade types drop, prices shift. Holocron entries carry their last-updated date, and it means something.</p>
</article>
</div>
</div>
</section>
<!-- ══════════════════════════════════════════
SECTION 8 — NEWSLETTER (MAS73 ember-ombre)
══════════════════════════════════════════ -->
<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>
<!-- ══════════════════════════════════════════
SECTION 9 — SITE FOOTER
══════════════════════════════════════════ -->
<footer class="site-footer">
<div class="wrap">
<div class="site-footer__grid">
<div>
<div class="site-footer__brand">ART<span>SABERS</span></div>
<p class="site-footer__tagline">From factory floor to your door. Every character, every Saber Core, every duelling grade — backed by real customer service.</p>
</div>
<div>
<h4 class="site-footer__col-title">Shop</h4>
<ul class="site-footer__list">
<li><a href="/lightsabers/" class="site-footer__link">Lightsabers</a></li>
<li><a href="/helmets/" class="site-footer__link">Cosplay Helmets</a></li>
<li><a href="/parts/" class="site-footer__link">Parts & Accessories</a></li>
<li><a href="/offers/" class="site-footer__link">Offers & Deals</a></li>
</ul>
</div>
<div>
<h4 class="site-footer__col-title">Learn</h4>
<ul class="site-footer__list">
<li><a href="/holocron/" class="site-footer__link">The Holocron</a></li>
<li><a href="/events/" class="site-footer__link">Events & Courses</a></li>
<li><a href="/faq/" class="site-footer__link">FAQ</a></li>
<li><a href="/blog/" class="site-footer__link">Workshop journal</a></li>
</ul>
</div>
<div>
<h4 class="site-footer__col-title">Company</h4>
<ul class="site-footer__list">
<li><a href="/about/" class="site-footer__link">About</a></li>
<li><a href="/contact/" class="site-footer__link">Contact</a></li>
<li><a href="/shipping/" class="site-footer__link">Shipping (7-10 days)</a></li>
<li><a href="/returns/" class="site-footer__link">30-day guarantee</a></li>
</ul>
</div>
</div>
<div class="site-footer__bottom">
<div class="site-footer__legal">© 2026 ARTSABERS · Nerdworks Ltd</div>
<div class="site-footer__socials">
<a href="#">Instagram</a>
<a href="#">YouTube</a>
<a href="#">TikTok</a>
</div>
</div>
</div>
</footer>
</body>
</html>