/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"?><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Blog — 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=Manrope:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=Orbitron:wght@400;500;600;700;800&family=Onest:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>:root {
/* Ember ombre (chromatic — accents only) */
--ember-glow: #FFB347;
--ember-bright: #FF9540;
--ember: #FF7A2E;
--ember-forge: #E85D18;
--ember-deep: #D14810;
--ember-smoulder: #8B2E08;
--ember-scar: #5A1A00;
--ember-fixed: #2A0800;
/* Hull ladder (chromatic — dark greys) */
--carbon: #060606;
--void: #0A0A0A;
--charcoal: #141414;
--charcoal-warm: #161412;
--hull-panel: #1A1A1A;
--hull-panel-lift: #242424;
--hull-panel-dark: #0F0F0F;
--hull-chrome-shadow: #2E2E2E;
--hull-edge: #363636;
/* Chrome highlights (chromatic — whites) */
--chrome-highlight: #FAFAFA;
--chrome-glint: #E8E4DD;
--chrome-warm: #F5F0E8;
--chrome-dim: #B8B0A6;
/* Surface semantics (role names — for backgrounds + text) */
--bg-page: var(--carbon);
--bg-hero: var(--carbon);
--bg-body: var(--carbon);
--bg-card: var(--hull-panel);
--bg-card-lift: var(--hull-panel-lift);
--bg-nav: var(--carbon);
--bg-footer: var(--carbon);
--bg-chip: rgba(255, 122, 46, 0.08);
--bg-avatar: var(--hull-panel-lift);
--bg-feature: var(--charcoal-warm);
--text-heading: var(--chrome-highlight);
--text-body: var(--chrome-warm);
--text-meta: var(--chrome-dim);
--text-on-ember: var(--ember-fixed);
--border-panel-top: rgba(250, 250, 250, 0.30);
--border-hairline: rgba(255, 122, 46, 0.70);
--border-ghost: rgba(184, 176, 166, 0.15);
/* Type */
--font-display: 'Orbitron', system-ui, sans-serif;
--font-body: 'Onest', system-ui, sans-serif;
/* Shadow tokens */
--panel-lift: inset 0 1px 0 rgba(250, 250, 250, 0.08), 0 8px 24px -8px rgba(0, 0, 0, 0.9);
--ember-glow-sm: 0 0 16px rgba(255, 122, 46, 0.35);
--ember-seam-glow: 0 0 24px rgba(255, 122, 46, 0.40);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
background: var(--bg-page);
color: var(--text-body);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
/* -------------------- SITE NAV (verbatim from MAS64) -------------------- */
.site-nav {
background: var(--bg-nav);
border-bottom: 1px solid rgba(250, 250, 250, 0.04);
box-shadow: inset 0 1px 0 rgba(250, 250, 250, 0.06);
position: relative;
z-index: 10;
}
.site-nav__inner {
max-width: 1360px;
margin: 0 auto;
padding: 22px 40px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
}
.site-nav__brand {
font-family: var(--font-display);
font-weight: 700;
font-size: 20px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--chrome-highlight);
}
.site-nav__brand-mark {
color: var(--ember);
}
.site-nav__links {
display: flex;
align-items: center;
gap: 32px;
list-style: none;
}
.site-nav__link {
font-family: var(--font-display);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--chrome-warm);
padding: 6px 0;
border-bottom: 1px solid transparent;
transition: color 0.2s ease, border-color 0.2s ease;
}
.site-nav__link:hover {
color: var(--chrome-highlight);
border-bottom-color: var(--ember);
}
.site-nav__actions {
display: flex;
align-items: center;
gap: 20px;
font-family: var(--font-display);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--chrome-dim);
}
.site-nav__action-cart {
color: var(--chrome-highlight);
}
.site-nav__action-badge {
display: inline-block;
margin-left: 6px;
padding: 2px 6px;
background: var(--ember);
color: var(--ember-fixed);
font-family: var(--font-display);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
}
/* -------------------- BLOG HERO (compact ~460px, panel-joint bg, no byline) -------------------- */
.blog-hero {
background: var(--bg-hero);
position: relative;
overflow: hidden;
min-height: 460px;
display: flex;
align-items: center;
border-bottom: 1px solid rgba(255, 122, 46, 0.50);
box-shadow: 0 8px 32px -8px rgba(255, 122, 46, 0.30);
}
.blog-hero::before {
/* Panel-joint hairline pattern — subtle horizontal seams (MAS64/65/66 signature) */
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(180deg, transparent 0%, transparent calc(28% - 1px), rgba(250, 250, 250, 0.05) 28%, transparent calc(28% + 1px)),
linear-gradient(180deg, transparent 0%, transparent calc(62% - 1px), rgba(250, 250, 250, 0.04) 62%, transparent calc(62% + 1px)),
linear-gradient(180deg, transparent 0%, transparent calc(84% - 1px), rgba(250, 250, 250, 0.03) 84%, transparent calc(84% + 1px));
pointer-events: none;
}
.blog-hero::after {
/* Warm ember bleed from left edge — reactor glow behind hull */
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 40%;
background: radial-gradient(ellipse at 0% 50%, rgba(255, 122, 46, 0.12) 0%, transparent 70%);
pointer-events: none;
}
.blog-hero__inner {
max-width: 1200px;
margin: 0 auto;
padding: 96px 40px 88px;
position: relative;
z-index: 2;
width: 100%;
}
.blog-hero__eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 24px;
font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ember);
border-left: 2px solid var(--ember);
padding-left: 14px;
}
.blog-hero__title {
font-family: var(--font-display);
font-size: 60px;
font-weight: 700;
line-height: 1.05;
letter-spacing: 0.8px;
color: var(--chrome-highlight);
margin-bottom: 22px;
max-width: 22ch;
}
.blog-hero__subtitle {
font-family: var(--font-body);
font-size: 18px;
font-weight: 400;
line-height: 1.55;
color: var(--chrome-warm);
max-width: 60ch;
}
/* -------------------- BLOG FILTER (category chip row) -------------------- */
.blog-filter {
background: var(--bg-page);
padding: 40px 40px;
position: relative;
}
.blog-filter__inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
}
.blog-filter__label {
font-family: var(--font-display);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--chrome-dim);
margin-right: 12px;
}
.blog-filter__chip {
display: inline-flex;
align-items: baseline;
gap: 8px;
padding: 10px 16px;
font-family: var(--font-display);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--chrome-warm);
background: transparent;
border: 1px solid rgba(184, 176, 166, 0.18);
transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.blog-filter__chip:hover {
color: var(--chrome-highlight);
border-color: rgba(255, 122, 46, 0.45);
background: rgba(255, 122, 46, 0.04);
}
.blog-filter__chip--active {
color: var(--ember-glow);
border-color: var(--ember);
background: rgba(232, 93, 24, 0.10);
box-shadow: inset 0 1px 0 rgba(255, 179, 71, 0.20), 0 0 12px rgba(255, 122, 46, 0.25);
}
.blog-filter__count {
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0;
color: var(--chrome-dim);
text-transform: none;
}
.blog-filter__chip--active .blog-filter__count {
color: var(--ember-glow);
opacity: 0.75;
}
/* -------------------- BLOG FEATURE (featured post band — editorial-safe naming) -------------------- */
/* Uses the break-out pattern from .product-feature: width min(1100px, calc(100vw - 48px)) centred.
Not inside a narrow reading column on this page, so simple centring — no translateX trick needed. */
.blog-feature {
position: relative;
width: min(1200px, calc(100vw - 48px));
margin: 24px auto 72px;
background: var(--bg-feature);
border-top: 1px solid rgba(255, 122, 46, 0.55);
border-bottom: 1px solid rgba(255, 122, 46, 0.55);
box-shadow: 0 -2px 40px rgba(255, 122, 46, 0.18), 0 2px 40px rgba(255, 122, 46, 0.18);
overflow: hidden;
isolation: isolate;
}
.blog-feature__inner {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
gap: 0;
align-items: stretch;
}
.blog-feature__media {
position: relative;
aspect-ratio: 3 / 2;
background: var(--hull-panel-dark);
overflow: hidden;
min-height: 100%;
}
.blog-feature__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.blog-feature:hover .blog-feature__img { transform: scale(1.03); }
.blog-feature__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 55%, rgba(6, 6, 6, 0.55) 100%);
pointer-events: none;
}
.blog-feature__copy {
padding: 52px 56px 52px 52px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 20px;
}
.blog-feature__eyebrow {
font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ember-glow);
margin: 0;
display: inline-flex;
align-items: center;
gap: 12px;
text-shadow: 0 0 20px rgba(255, 122, 46, 0.35);
}
.blog-feature__eyebrow::before {
content: "";
display: inline-block;
width: 32px;
height: 1px;
background: var(--ember);
box-shadow: 0 0 8px rgba(255, 122, 46, 0.6);
}
.blog-feature__chip {
align-self: flex-start;
padding: 6px 12px;
font-family: var(--font-display);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ember);
border: 1px solid rgba(255, 122, 46, 0.40);
background: rgba(255, 122, 46, 0.05);
}
.blog-feature__title {
font-family: var(--font-display);
font-size: 36px;
font-weight: 700;
line-height: 1.12;
letter-spacing: 0.8px;
color: var(--chrome-highlight);
margin: 0;
}
.blog-feature__meta {
font-family: var(--font-body);
font-size: 13px;
color: var(--chrome-dim);
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.blog-feature__meta span + span::before {
content: "·";
margin-right: 8px;
color: var(--chrome-dim);
}
.blog-feature__excerpt {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
color: var(--chrome-warm);
margin: 0;
opacity: 0.92;
}
.blog-feature__cta {
align-self: flex-start;
margin-top: 4px;
font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--chrome-warm);
padding: 14px 22px;
border: 1px solid rgba(255, 122, 46, 0.55);
background: rgba(255, 122, 46, 0.06);
transition: background 0.2s, box-shadow 0.2s, color 0.2s;
display: inline-flex;
align-items: center;
gap: 10px;
}
.blog-feature__cta:hover {
background: rgba(255, 122, 46, 0.14);
box-shadow: 0 0 24px rgba(255, 122, 46, 0.35);
color: var(--chrome-highlight);
}
.blog-feature__bloom {
position: absolute;
z-index: 1;
right: -140px;
bottom: -140px;
width: 420px;
height: 420px;
background: radial-gradient(circle, rgba(255, 179, 71, 0.16) 0%, rgba(255, 122, 46, 0.08) 35%, transparent 68%);
filter: blur(12px);
pointer-events: none;
}
/* -------------------- BLOG GRID HEADER -------------------- */
.blog-grid-header {
background: var(--bg-page);
padding: 32px 40px 24px;
}
.blog-grid-header__inner {
max-width: 1200px;
margin: 0 auto;
}
.blog-grid-header__eyebrow {
font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ember);
margin-bottom: 14px;
display: inline-flex;
align-items: center;
gap: 10px;
}
.blog-grid-header__eyebrow::before {
content: "";
display: inline-block;
width: 28px;
height: 1px;
background: var(--ember);
box-shadow: 0 0 6px rgba(255, 122, 46, 0.55);
}
.blog-grid-header__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-bottom: 10px;
}
.blog-grid-header__lede {
font-family: var(--font-body);
font-size: 16px;
color: var(--chrome-dim);
}
/* -------------------- BLOG GRID (3-up cards) -------------------- */
.blog-grid {
background: var(--bg-page);
padding: 24px 40px 72px;
}
.blog-grid__inner {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
/* -------------------- BLOG CARD (3-up cell) -------------------- */
.blog-card {
background: transparent;
display: flex;
flex-direction: column;
position: relative;
transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
border: 1px solid transparent;
}
.blog-card:hover {
transform: translateY(-3px);
border-color: rgba(255, 122, 46, 0.45);
box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.9), 0 0 20px rgba(255, 122, 46, 0.10);
}
.blog-card__media {
position: relative;
aspect-ratio: 3 / 2;
overflow: hidden;
background: var(--hull-panel-dark);
outline: 1px solid rgba(255, 122, 46, 0.22);
outline-offset: -1px;
}
.blog-card__img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.blog-card:hover .blog-card__img { transform: scale(1.03); }
.blog-card__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 60%, rgba(6, 6, 6, 0.55) 100%);
pointer-events: none;
}
.blog-card__body {
padding: 20px 4px 22px;
display: flex;
flex-direction: column;
gap: 12px;
flex: 1;
}
.blog-card__chip {
align-self: flex-start;
padding: 5px 10px;
font-family: var(--font-display);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ember);
border: 1px solid rgba(255, 122, 46, 0.40);
background: rgba(255, 122, 46, 0.05);
}
.blog-card__title {
font-family: var(--font-display);
font-size: 22px;
font-weight: 600;
line-height: 1.22;
letter-spacing: 0.8px;
color: var(--chrome-highlight);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.blog-card__meta {
font-family: var(--font-body);
font-size: 13px;
color: var(--chrome-dim);
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.blog-card__meta span + span::before {
content: "·";
margin-right: 8px;
color: var(--chrome-dim);
}
.blog-card__excerpt {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.55;
color: var(--chrome-warm);
opacity: 0.85;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.blog-card__read {
margin-top: auto;
padding-top: 4px;
font-family: var(--font-display);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--ember);
display: inline-flex;
align-items: center;
gap: 8px;
}
.blog-card__read::after {
content: "→";
transition: transform 0.2s ease;
}
.blog-card:hover .blog-card__read::after { transform: translateX(4px); }
/* -------------------- BLOG PAGINATION -------------------- */
.blog-pagination {
background: var(--bg-page);
padding: 24px 40px 72px;
border-top: 1px solid rgba(184, 176, 166, 0.08);
margin-top: 8px;
}
.blog-pagination__inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
padding-top: 32px;
}
.blog-pagination__status {
font-family: var(--font-body);
font-size: 13px;
color: var(--chrome-dim);
}
.blog-pagination__controls {
display: inline-flex;
align-items: center;
gap: 10px;
}
.blog-pagination__step,
.blog-pagination__page {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 12px;
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(184, 176, 166, 0.18);
background: transparent;
transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.blog-pagination__step:hover,
.blog-pagination__page:hover {
color: var(--chrome-highlight);
border-color: rgba(255, 122, 46, 0.45);
background: rgba(255, 122, 46, 0.05);
}
.blog-pagination__step--disabled {
color: rgba(184, 176, 166, 0.35);
border-color: rgba(184, 176, 166, 0.08);
pointer-events: none;
}
.blog-pagination__page--active {
color: var(--ember-glow);
border-color: var(--ember);
background: rgba(232, 93, 24, 0.10);
box-shadow: inset 0 1px 0 rgba(255, 179, 71, 0.20), 0 0 12px rgba(255, 122, 46, 0.25);
}
/* -------------------- BLOG NEWSLETTER (editorial-safe naming) -------------------- */
.blog-newsletter {
background: var(--bg-page);
position: relative;
padding: 80px 40px 96px;
border-top: 1px solid rgba(255, 122, 46, 0.30);
box-shadow: inset 0 1px 0 rgba(255, 122, 46, 0.15);
overflow: hidden;
}
.blog-newsletter::before {
/* panel-joint hairline background pattern — matches hero */
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(180deg, transparent 0%, transparent calc(35% - 1px), rgba(250, 250, 250, 0.04) 35%, transparent calc(35% + 1px)),
linear-gradient(180deg, transparent 0%, transparent calc(70% - 1px), rgba(250, 250, 250, 0.03) 70%, transparent calc(70% + 1px));
pointer-events: none;
}
.blog-newsletter::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 45%;
background: radial-gradient(ellipse at 100% 50%, rgba(255, 122, 46, 0.12) 0%, transparent 70%);
pointer-events: none;
}
.blog-newsletter__inner {
max-width: 900px;
margin: 0 auto;
position: relative;
z-index: 2;
text-align: center;
}
.blog-newsletter__eyebrow {
font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ember);
margin-bottom: 18px;
display: inline-flex;
align-items: center;
gap: 10px;
}
.blog-newsletter__eyebrow::before,
.blog-newsletter__eyebrow::after {
content: "";
display: inline-block;
width: 28px;
height: 1px;
background: var(--ember);
box-shadow: 0 0 6px rgba(255, 122, 46, 0.55);
}
.blog-newsletter__title {
font-family: var(--font-display);
font-size: 40px;
font-weight: 700;
line-height: 1.12;
letter-spacing: 0.8px;
color: var(--chrome-highlight);
margin-bottom: 16px;
}
.blog-newsletter__subtitle {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
color: var(--chrome-dim);
margin: 0 auto 32px;
max-width: 60ch;
}
.blog-newsletter__form {
display: flex;
gap: 12px;
max-width: 520px;
margin: 0 auto;
align-items: stretch;
}
.blog-newsletter__input {
flex: 1;
min-width: 0;
background: transparent;
border: none;
border-bottom: 1px solid var(--hull-panel-lift);
color: var(--chrome-warm);
font-family: var(--font-body);
font-size: 16px;
padding: 14px 4px;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
}
.blog-newsletter__input::placeholder {
color: var(--chrome-dim);
opacity: 0.65;
}
.blog-newsletter__input:focus {
border-bottom-color: var(--ember);
box-shadow: 0 8px 12px -8px rgba(255, 122, 46, 0.35);
}
.blog-newsletter__submit {
font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--chrome-warm);
padding: 14px 26px;
border: 1px solid rgba(255, 122, 46, 0.55);
background: rgba(255, 122, 46, 0.06);
transition: background 0.2s, box-shadow 0.2s, color 0.2s;
cursor: pointer;
}
.blog-newsletter__submit:hover {
background: rgba(255, 122, 46, 0.14);
box-shadow: 0 0 24px rgba(255, 122, 46, 0.35);
color: var(--chrome-highlight);
}
/* -------------------- SITE FOOTER (verbatim from MAS64) -------------------- */
.site-footer {
background: var(--bg-footer);
padding: 72px 40px 40px;
position: relative;
border-top: 1px solid rgba(255, 122, 46, 0.30);
box-shadow: 0 -8px 24px -8px rgba(255, 122, 46, 0.20);
}
.site-footer::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--ember) 30%, var(--ember-glow) 50%, var(--ember) 70%, transparent 100%);
opacity: 0.7;
}
.site-footer__inner {
max-width: 1200px;
margin: 0 auto;
}
.site-footer__grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 60px;
padding-bottom: 48px;
border-bottom: 1px solid rgba(250, 250, 250, 0.05);
}
.site-footer__brand-mark {
font-family: var(--font-display);
font-weight: 700;
font-size: 24px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--chrome-highlight);
margin-bottom: 18px;
}
.site-footer__brand-mark span {
color: var(--ember);
}
.site-footer__brand-blurb {
font-family: var(--font-body);
font-size: 14px;
color: var(--chrome-dim);
line-height: 1.55;
max-width: 32ch;
}
.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-highlight);
margin-bottom: 20px;
}
.site-footer__col ul { list-style: none; }
.site-footer__col li {
font-family: var(--font-body);
font-size: 14px;
color: var(--chrome-dim);
margin-bottom: 12px;
transition: color 0.2s ease;
}
.site-footer__col li:hover { color: var(--chrome-warm); }
.site-footer__legal {
padding-top: 28px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--chrome-dim);
}
.site-footer__legal-links {
display: flex;
gap: 24px;
list-style: none;
}
/* -------------------- RESPONSIVE -------------------- */
@media (max-width: 1023px) {
.blog-grid__inner { grid-template-columns: repeat(2, 1fr); gap: 24px; }
.blog-feature__inner { grid-template-columns: 1fr; }
.blog-feature__media { aspect-ratio: 16 / 9; min-height: 320px; }
.blog-feature__copy { padding: 36px 32px 40px; }
.blog-feature__title { font-size: 30px; letter-spacing: 0.8px; }
.blog-hero__title { font-size: 44px; letter-spacing: 0.8px; }
.blog-newsletter__title { font-size: 32px; letter-spacing: 0.8px; }
.site-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
.site-nav__links { display: none; }
.blog-hero__inner { padding: 72px 24px 64px; }
}
@media (max-width: 639px) {
.blog-grid__inner { grid-template-columns: 1fr; gap: 20px; }
.blog-feature { margin: 16px auto 48px; }
.blog-feature__copy { padding: 28px 22px 32px; gap: 16px; }
.blog-feature__title { font-size: 24px; letter-spacing: 0.8px; }
.blog-hero { min-height: 380px; }
.blog-hero__title { font-size: 32px; margin-bottom: 16px; letter-spacing: 0.8px; }
.blog-hero__subtitle { font-size: 16px; }
.blog-hero__inner { padding: 56px 20px 48px; }
.blog-filter { padding: 28px 20px; }
.blog-filter__label { display: block; width: 100%; margin-bottom: 6px; }
.blog-grid-header { padding: 24px 20px 16px; }
.blog-grid-header__title { font-size: 26px; letter-spacing: 0.8px; }
.blog-grid { padding: 16px 20px 56px; }
.blog-pagination { padding: 20px 20px 56px; }
.blog-pagination__inner { justify-content: center; padding-top: 24px; }
.blog-newsletter { padding: 56px 20px 64px; }
.blog-newsletter__title { font-size: 26px; letter-spacing: 0.8px; }
.blog-newsletter__form { flex-direction: column; }
.site-footer { padding: 56px 24px 32px; }
.site-footer__legal { flex-direction: column; align-items: flex-start; gap: 12px; }
.site-footer__legal-links { flex-wrap: wrap; gap: 16px; }
.site-nav__inner { padding: 16px 20px; }
.site-nav__brand { font-size: 16px; }
}
@media (max-width: 480px) {
.blog-card__excerpt { display: none; }
.site-footer__grid { grid-template-columns: 1fr; gap: 32px; }
}
/* =====================================================================
BLOCK: product-feature — inline advert (archive placements)
Non-triggering class name per BBAS18 ad-blocker safety lock.
===================================================================== */
.product-feature {
position: relative;
grid-column: 1 / -1;
width: 100%;
max-width: 1100px;
margin: 32px auto;
padding: 0;
background: var(--charcoal-warm, #161412);
border-top: 1px solid rgba(255,122,46,0.55);
border-bottom: 1px solid rgba(255,122,46,0.55);
box-shadow: 0 -2px 40px rgba(255,122,46,0.18), 0 2px 40px rgba(255,122,46,0.18);
overflow: hidden;
isolation: isolate;
}
.product-feature:hover .product-feature__img { transform: scale(1.03); }
.product-feature__eyebrow::before {
content: "";
display: inline-block;
width: 32px;
height: 1px;
background: #FF7A2E;
box-shadow: 0 0 8px rgba(255,122,46,0.6);
}
.product-feature__review-count::before {
content: "·";
margin-right: 8px;
color: #B8B0A6;
}
.product-feature__specs li {
font-family: 'Space Grotesk', sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #E5E2E1;
padding: 6px 12px;
border: 1px solid rgba(184,176,166,0.35);
background: rgba(20,20,20,0.4);
}
.product-feature__pills li {
font-family: 'Space Grotesk', sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #FFB347;
padding: 6px 14px;
border: 1px solid rgba(255,122,46,0.4);
background: rgba(255,122,46,0.06);
}
.product-feature__stock::before {
content: "";
width: 9px;
height: 9px;
background: #FF7A2E;
border-radius: 50%;
box-shadow: 0 0 10px rgba(255,122,46,0.7);
}
.product-feature__cta:hover {
background: rgba(255,122,46,0.14);
box-shadow: 0 0 24px rgba(255,122,46,0.35);
color: #FAFAFA;
}
@media (max-width: 720px) {
.product-feature__inner { grid-template-columns: 1fr; }
.product-feature__copy { padding: 28px 24px 32px; }
.product-feature__title { font-size: 22px; letter-spacing: 0.8px; }
.product-feature__actions { flex-wrap: wrap; }
.product-feature__stat-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
.product-feature__stat-value { font-size: 22px; }
.product-feature__badge { top: 12px; left: 12px; font-size: 9px; padding: 6px 10px; }
}
/* -------------------- product-feature TILE modifier --------------------
Compact square variant that slots into a single grid cell (blog card slot),
not a full-row break-out. Vertical layout, minimal enrichment content. */
.product-feature--tile {
grid-column: span 1;
width: 100%;
max-width: none;
margin: 0;
}
.product-feature--tile .product-feature__inner {
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
}
.product-feature--tile .product-feature__media {
aspect-ratio: 1 / 1;
min-height: 0;
}
.product-feature--tile .product-feature__copy {
padding: 22px 22px 24px;
gap: 10px;
}
.product-feature--tile .product-feature__eyebrow {
font-size: 11px;
letter-spacing: 0.2em;
gap: 8px;
}
.product-feature--tile .product-feature__eyebrow::before {
width: 22px;
}
.product-feature--tile .product-feature__title {
font-size: 20px;
line-height: 1.15; letter-spacing: 0.8px; }
.product-feature--tile .product-feature__rating {
margin: 0;
}
.product-feature--tile .product-feature__stars { font-size: 14px; }
.product-feature--tile .product-feature__rating-value { font-size: 13px; }
.product-feature--tile .product-feature__review-count { font-size: 12px; }
.product-feature--tile .product-feature__actions {
margin-top: 4px;
padding-top: 14px;
gap: 14px;
}
.product-feature--tile .product-feature__price { font-size: 18px; }
.product-feature--tile .product-feature__cta {
font-size: 11px;
padding: 10px 16px;
letter-spacing: 0.16em;
gap: 4px;
}
.product-feature--tile .product-feature__badge {
top: 12px;
left: 12px;
font-size: 9px;
padding: 6px 10px;
letter-spacing: 0.2em;
}
.product-feature--tile .product-feature__bloom {
width: 240px;
height: 240px;
right: -80px;
bottom: -80px;
}
/* Hide long-form enrichment slots in tile variant (kept in markup for
consistency; hidden here so writer doesn't need a different template). */
.product-feature--tile .product-feature__lede,
.product-feature--tile .product-feature__specs,
.product-feature--tile .product-feature__stock,
.product-feature--tile .product-feature__pills,
.product-feature--tile .product-feature__stat-grid {
display: none;
}
/* 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 14015 canonical 13184:tf-cross-sell-strip-1 -- */
/* =====================================================================
BLOCK: product-feature — inline advert (long-form only)
Product variant shown here. Variant classes: --product, --category, --newsletter, --promotion.
===================================================================== */
.product-feature {
/* Break out of the article's reading column and centre on the viewport.
Reading column max-width is ~68ch (~660px); the block wants 1100px. */
position: relative;
width: min(1100px, calc(100vw - 48px));
margin-left: 50%;
margin-right: 0;
margin-top: 120px;
margin-bottom: 120px;
transform: translateX(-50%);
padding: 0;
background: var(--charcoal-warm, #161412);
border-top: 1px solid rgba(255,122,46,0.55);
border-bottom: 1px solid rgba(255,122,46,0.55);
box-shadow: 0 -2px 40px rgba(255,122,46,0.18), 0 2px 40px rgba(255,122,46,0.18);
overflow: hidden;
isolation: isolate;
}
.product-feature__inner {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 380px 1fr;
gap: 0;
align-items: stretch;
}
.product-feature__media {
position: relative;
background: #0a0a0a;
overflow: hidden;
min-width: 0;
min-height: 100%;
}
.product-feature__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.product-feature:hover .product-feature__img { transform: scale(1.03); }
.product-feature__copy {
padding: 48px 52px 48px 48px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 16px;
}
.product-feature__eyebrow {
font-family: var(--font-display, 'Space Grotesk', sans-serif);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ember-glow, #FFB347);
margin: 0;
display: inline-flex;
align-items: center;
gap: 12px;
text-shadow: 0 0 20px rgba(255,122,46,0.35);
}
.product-feature__eyebrow::before {
content: "";
display: inline-block;
width: 32px;
height: 1px;
background: var(--ember, #FF7A2E);
box-shadow: 0 0 8px rgba(255,122,46,0.6);
}
.product-feature__title {
font-family: var(--font-display, 'Space Grotesk', sans-serif);
font-size: 30px;
font-weight: 500;
line-height: 1.12;
letter-spacing: 0.8px;
color: var(--chrome-highlight, #FAFAFA);
margin: 0;
}
.product-feature__lede {
font-family: var(--font-body, 'Manrope', sans-serif);
font-size: 16px;
line-height: 1.55;
color: var(--chrome-warm, #E5E2E1);
margin: 0;
opacity: 0.9;
}
.product-feature__actions {
display: flex;
align-items: center;
gap: 20px;
margin-top: 6px;
}
.product-feature__price {
font-family: var(--font-display, 'Space Grotesk', sans-serif);
font-size: 22px;
font-weight: 500;
color: var(--ember, #FF7A2E);
letter-spacing: 0.01em;
}
.product-feature__cta {
font-family: var(--font-display, 'Space Grotesk', sans-serif);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--chrome-warm, #E5E2E1);
text-decoration: none;
padding: 12px 22px;
border: 1px solid rgba(255,122,46,0.55);
background: rgba(255,122,46,0.06);
transition: background 0.2s, box-shadow 0.2s, color 0.2s;
display: inline-flex;
align-items: center;
gap: 6px;
}
.product-feature__cta:hover {
background: rgba(255,122,46,0.14);
box-shadow: 0 0 24px rgba(255,122,46,0.35);
color: var(--chrome-highlight, #FAFAFA);
}
.product-feature__bloom {
position: absolute;
z-index: 1;
right: -140px;
bottom: -140px;
width: 420px;
height: 420px;
background: radial-gradient(circle, rgba(255,179,71,0.16) 0%, rgba(255,122,46,0.08) 35%, transparent 68%);
filter: blur(12px);
pointer-events: none;
}
.product-feature__bloom--tl {
right: auto;
bottom: auto;
left: -100px;
top: -100px;
width: 380px;
height: 380px;
background: radial-gradient(circle, rgba(255,179,71,0.28) 0%, rgba(255,122,46,0.14) 30%, transparent 65%);
}
/* Enrichment elements — badge, rating, specs, stock, enhanced CTA */
.product-feature__media { position: relative; }
.product-feature__badge {
position: absolute;
top: 20px;
left: 20px;
padding: 8px 14px;
border: 1px solid rgba(255,122,46,0.85);
background: rgba(6,6,6,0.85);
backdrop-filter: blur(4px);
color: var(--ember-glow, #FFB347);
font-family: 'Space Grotesk', sans-serif;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
z-index: 3;
text-shadow: 0 0 12px rgba(255,122,46,0.4);
}
.product-feature__rating {
display: flex;
align-items: center;
gap: 10px;
margin: -2px 0;
}
.product-feature__stars {
color: var(--ember, #FF7A2E);
font-size: 16px;
letter-spacing: 0.05em;
text-shadow: 0 0 12px rgba(255,122,46,0.35);
}
.product-feature__rating-value {
font-family: 'Space Grotesk', sans-serif;
font-size: 14px;
font-weight: 600;
color: var(--chrome-highlight, #FAFAFA);
}
.product-feature__review-count {
font-family: 'Manrope', sans-serif;
font-size: 13px;
color: var(--chrome-dim, #B8B0A6);
}
.product-feature__review-count::before {
content: "·";
margin-right: 8px;
color: var(--chrome-dim, #B8B0A6);
}
.product-feature__specs {
display: flex;
flex-wrap: wrap;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
}
.product-feature__specs li {
font-family: 'Space Grotesk', sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--chrome-warm, #E5E2E1);
padding: 6px 12px;
border: 1px solid rgba(184,176,166,0.35);
background: rgba(20,20,20,0.4);
}
.product-feature__stock {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: 'Space Grotesk', sans-serif;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ember-glow, #FFB347);
margin-top: 4px;
}
.product-feature__stock::before {
content: "";
width: 9px;
height: 9px;
background: var(--ember, #FF7A2E);
border-radius: 50%;
box-shadow: 0 0 10px rgba(255,122,46,0.7);
}
.product-feature__cta {
font-size: 13px;
padding: 14px 26px;
letter-spacing: 0.18em;
}
.product-feature__actions {
margin-top: 8px;
padding-top: 20px;
border-top: 1px solid rgba(255,122,46,0.25);
}
@media (max-width: 720px) {
.product-feature__inner { grid-template-columns: 1fr; }
.product-feature__media { aspect-ratio: 16 / 9; }
.product-feature__copy { padding: 28px 24px 32px; }
.product-feature__title { font-size: 22px; letter-spacing: 0.8px; }
.product-feature__actions { flex-wrap: wrap; }
.product-feature__specs li { font-size: 10px; padding: 5px 10px; }
.product-feature__badge { top: 12px; left: 12px; font-size: 9px; padding: 6px 10px; }
}
</style>
</head>
<body>
<!-- SITE NAV (verbatim from MAS64) -->
<nav class="site-nav" aria-label="Primary">
<div class="site-nav__inner">
<a href="/" class="site-nav__brand">ARTS<span class="site-nav__brand-mark">A</span>BERS</a>
<ul class="site-nav__links">
<li><a href="/lightsabers" class="site-nav__link">Lightsabers</a></li>
<li><a href="/cosplay-helmets" class="site-nav__link">Cosplay Helmets</a></li>
<li><a href="/parts-accessories" class="site-nav__link">Parts & Accessories</a></li>
<li><a href="/offers-deals" class="site-nav__link">Offers & Deals</a></li>
<li><a href="/blog" class="site-nav__link">Blog & News</a></li>
</ul>
<div class="site-nav__actions">
<a href="/account" class="site-nav__action">Account</a>
<a href="/cart" class="site-nav__action site-nav__action-cart">Cart<span class="site-nav__action-badge">0</span></a>
</div>
</div>
</nav>
<!-- BLOG HERO — compact ~460px, panel-joint background, no byline -->
<a id="tf-hero-utility-1" data-tf-family="hero-utility" style="display:contents"></a>
<header class="blog-hero">
<div class="blog-hero__inner">
<div class="blog-hero__eyebrow">The Blog</div>
<h1 class="blog-hero__title">Guides, news, and short stories from the ARTSABERS Chronicles.</h1>
<p class="blog-hero__subtitle">Every post from the ARTSABERS team — the honest updates, the deep dives, and the workshop stories.</p>
</div>
</header>
<!-- CATEGORY FILTER CHIP ROW -->
<a id="tf-filter-chip-strip-1" data-tf-family="filter-chip-strip" style="display:contents"></a>
<section class="blog-filter" aria-label="Filter posts by category">
<div class="blog-filter__inner">
<div class="blog-filter__label">Browse</div>
<a href="/blog" class="blog-filter__chip blog-filter__chip--active" aria-current="page">All <span class="blog-filter__count">(12)</span></a>
<a href="/blog/category/artsabers-news" class="blog-filter__chip">ARTSABERS News <span class="blog-filter__count">(7)</span></a>
<a href="/blog/category/lightsaber-guides-tips" class="blog-filter__chip">Lightsaber Guides & Tips <span class="blog-filter__count">(3)</span></a>
<a href="/blog/category/lore-short-stories" class="blog-filter__chip">Lore & Short Stories <span class="blog-filter__count">(2)</span></a>
</div>
</section>
<!-- FEATURED POST BAND -->
<a id="tf-other-1" data-tf-family="other" style="display:contents"></a>
<a href="/blog/claim-the-blade-wear-the-mask-live-the-myth/" class="blog-feature" aria-label="Featured post">
<div class="blog-feature__inner">
<div class="blog-feature__media">
<img class="blog-feature__img" src="https://artsabers.com/wp-content/uploads/sites/10/2026/07/6f0320e4a3df77a3b51e2d37a15e6eae-6.jpg" alt="Two matte hull plates joined by a thin ember seam, atmospheric" loading="lazy">
</div>
<div class="blog-feature__copy">
<p class="blog-feature__eyebrow">Featured · Latest from Lore</p>
<span class="blog-feature__chip">Lore & Short Stories</span>
<h2 class="blog-feature__title">Claim the Blade. Wear the Mask. Live the Myth.</h2>
<div class="blog-feature__meta"><span>Chloe</span><span>3 May 2026</span><span>12 min read</span></div>
<p class="blog-feature__excerpt">The workshop smelled of ozone and warm metal. He had built sabers for other people for six years — every hilt in the case behind him had gone out the door strapped to a stand. He had never kept one.</p>
<span class="blog-feature__cta">Read the story →</span>
</div>
</div>
<span class="blog-feature__bloom" aria-hidden="true"></span>
</a>
<!-- GRID SECTION HEADER -->
<section class="blog-grid-header" aria-label="More from the blog">
<div class="blog-grid-header__inner">
<div class="blog-grid-header__eyebrow">More from the Blog</div>
<h2 class="blog-grid-header__title">Every post from the workshop.</h2>
<p class="blog-grid-header__lede">Sorted by newest first.</p>
</div>
</section>
<!-- 3-UP GRID — 11 post cards -->
<a id="tf-other-2" data-tf-family="other" style="display:contents"></a>
<section class="blog-grid" aria-label="Blog posts">
<div class="blog-grid__inner">
<a class="blog-card" href="/blog/order-delay-update-production-fulfilment/">
<div class="blog-card__media">
<img class="blog-card__img" src="https://camcom.dev/wp-content/uploads/2026/07/Carbon_Strike_1-600x600.jpg" alt="Carbon Strike saber close-up on hull plate" loading="lazy">
</div>
<div class="blog-card__body">
<span class="blog-card__chip">ARTSABERS News</span>
<h3 class="blog-card__title">Order Delay Update: Production & Fulfilment Status</h3>
<div class="blog-card__meta"><span>Matthew</span><span>8 Jul 2026</span><span>3 min read</span></div>
<p class="blog-card__excerpt">A candid update on where your order sits, where the queue is running, and when you'll hear from us next.</p>
<span class="blog-card__read">Read</span>
</div>
</a>
<a class="blog-card" href="/blog/forged-in-fire-and-beskar/">
<div class="blog-card__media">
<img class="blog-card__img" src="https://artsabers.com/wp-content/uploads/sites/10/2025/03/Mandalorian-Helmet-600x600.jpg" alt="Mandalorian helmet, matte finish, back-lit" loading="lazy">
</div>
<div class="blog-card__body">
<span class="blog-card__chip">Lightsaber Guides & Tips</span>
<h3 class="blog-card__title">Forged in Fire and Beskar: Why You Need Both a Saber and a Helmet</h3>
<div class="blog-card__meta"><span>Chloe</span><span>12 Jun 2026</span><span>8 min read</span></div>
<p class="blog-card__excerpt">A saber tells the galaxy who you fight for. The helmet tells them what you've survived. Here's why the pair works.</p>
<span class="blog-card__read">Read</span>
</div>
</a>
<a class="blog-card" href="/blog/us-winter-storm-delays/">
<div class="blog-card__media">
<img class="blog-card__img" src="https://artsabers.com/wp-content/uploads/sites/10/2025/03/Starkiller-V3-Lightsaber-Xenopixel-V3-600x600.jpg" alt="Starkiller V3 lightsaber, Xenopixel V3" loading="lazy">
</div>
<div class="blog-card__body">
<span class="blog-card__chip">ARTSABERS News</span>
<h3 class="blog-card__title">Temporary Delays Due To US Winter Storm</h3>
<div class="blog-card__meta"><span>Matthew</span><span>24 Feb 2026</span><span>2 min read</span></div>
<p class="blog-card__excerpt">A regional winter storm is holding up US carrier hand-offs. Here's what's affected, and what we're doing about it.</p>
<span class="blog-card__read">Read</span>
</div>
</a>
<a id="tf-cross-sell-strip-1" data-tf-family="cross-sell-strip" style="display:contents"></a>
<aside class="product-feature product-feature--product" role="complementary" aria-label="Featured product">
<div class="product-feature__inner">
<div class="product-feature__media">
<img class="product-feature__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, Xenopixel V3" loading="lazy">
<span class="product-feature__badge">Editor’s Pick</span>
</div>
<div class="product-feature__copy">
<p class="product-feature__eyebrow">Readers also chose</p>
<h3 class="product-feature__title">The Fighter — Xenopixel V3</h3>
<div class="product-feature__rating">
<span class="product-feature__stars" aria-hidden="true">★★★★★</span>
<span class="product-feature__rating-value">4.9</span>
<span class="product-feature__review-count">247 reviews</span>
</div>
<p class="product-feature__lede">Duelling grade certified. Xenopixel core, silver-forged hilt. Made for the collector who fights with what they own.</p>
<ul class="product-feature__specs">
<li>Xenopixel V3 core</li>
<li>32″ blade</li>
<li>Duelling grade</li>
</ul>
<div class="product-feature__stock">In stock · Ships in 24h</div>
<div class="product-feature__actions">
<span class="product-feature__price">$389</span>
<a href="/product/the-fighter-black-lightsaber-xenopixel-v3/" class="product-feature__cta">See The Fighter →</a>
</div>
</div>
</div>
<span class="product-feature__bloom" aria-hidden="true"></span>
</aside>
<a class="blog-card" href="/blog/choosing-your-saber-core-xenopixel-vs-proffie-vs-neopixel/">
<div class="blog-card__media">
<img class="blog-card__img" src="https://artsabers.com/wp-content/uploads/sites/10/2025/03/Apprentice-Black-Duelling-Lightsaber-RGB-X-600x600.jpg" alt="Apprentice Black duelling lightsaber, RGB-X core" loading="lazy">
</div>
<div class="blog-card__body">
<span class="blog-card__chip">Lightsaber Guides & Tips</span>
<h3 class="blog-card__title">Choosing Your Saber Core: Xenopixel V3 vs Proffie 2.2 vs Neopixel</h3>
<div class="blog-card__meta"><span>Chloe</span><span>15 May 2026</span><span>6 min read</span></div>
<p class="blog-card__excerpt">Three Saber Cores, three different fights. What each one is actually good at, and which one belongs in your hand.</p>
<span class="blog-card__read">Read</span>
</div>
</a>
<a class="blog-card" href="/blog/the-kyber-crystal-canon-and-legends/">
<div class="blog-card__media">
<img class="blog-card__img" src="https://artsabers.com/wp-content/uploads/sites/10/2025/03/Darth-Maul-Double-Bladed-Lightsaber-SNV4-PRO-600x600.jpg" alt="Darth Maul double-bladed lightsaber, SNV4 PRO" loading="lazy">
</div>
<div class="blog-card__body">
<span class="blog-card__chip">Lore & Short Stories</span>
<h3 class="blog-card__title">The Kyber Crystal: A Reader's Guide to Canon and Legends</h3>
<div class="blog-card__meta"><span>Chloe</span><span>12 Apr 2026</span><span>15 min read</span></div>
<p class="blog-card__excerpt">Where the crystal sings in canon, where Legends bends the rules, and why the retconning matters to collectors.</p>
<span class="blog-card__read">Read</span>
</div>
</a>
<a class="blog-card" href="/blog/black-friday-2025-every-deal-in-one-place/">
<div class="blog-card__media">
<img class="blog-card__img" src="https://camcom.dev/wp-content/uploads/2026/06/Dark-Katana-Kyber-Crystal-Lightsaber-11-600x600.jpg" alt="Dark Katana kyber crystal lightsaber" loading="lazy">
</div>
<div class="blog-card__body">
<span class="blog-card__chip">ARTSABERS News</span>
<h3 class="blog-card__title">Black Friday 2025: Every Deal in One Place</h3>
<div class="blog-card__meta"><span>Matthew</span><span>21 Nov 2025</span><span>4 min read</span></div>
<p class="blog-card__excerpt">Every price cut, every bundle, every Saber Core tier discount for the week — the whole board in one honest post.</p>
<span class="blog-card__read">Read</span>
</div>
</a>
<a class="blog-card" href="/blog/light-duelling-vs-heavy-duelling/">
<div class="blog-card__media">
<img class="blog-card__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, Xenopixel V3" loading="lazy">
</div>
<div class="blog-card__body">
<span class="blog-card__chip">Lightsaber Guides & Tips</span>
<h3 class="blog-card__title">Light-Duelling vs Heavy-Duelling: Which Grade Fits Your Play Style</h3>
<div class="blog-card__meta"><span>Chloe</span><span>3 May 2026</span><span>9 min read</span></div>
<p class="blog-card__excerpt">Full-contact spars or clean choreography? The grade sits under the hilt and it decides what your saber can take.</p>
<span class="blog-card__read">Read</span>
</div>
</a>
<a id="tf-cross-sell-strip-2" data-tf-family="cross-sell-strip" style="display:contents"></a>
<aside class="product-feature product-feature--product product-feature--tile" role="complementary" aria-label="Featured product">
<div class="product-feature__inner">
<div class="product-feature__media">
<img class="product-feature__img" src="https://artsabers.com/wp-content/uploads/sites/10/2025/03/Mandalorian-Helmet-600x600.jpg" alt="Mandalorian helmet, matte finish" loading="lazy">
<span class="product-feature__badge">Top Helmet</span>
</div>
<div class="product-feature__copy">
<p class="product-feature__eyebrow">Readers also chose</p>
<h3 class="product-feature__title">Mandalorian Helmet</h3>
<div class="product-feature__rating">
<span class="product-feature__stars" aria-hidden="true">★★★★★</span>
<span class="product-feature__rating-value">4.9</span>
<span class="product-feature__review-count">312 reviews</span>
</div>
<div class="product-feature__actions">
<span class="product-feature__price">$249</span>
<a href="/product/mandalorian-helmet/" class="product-feature__cta">See it →</a>
</div>
</div>
</div>
<span class="product-feature__bloom" aria-hidden="true"></span>
</aside>
<a class="blog-card" href="/blog/care-and-feeding-of-your-neopixel-blade/">
<div class="blog-card__media">
<img class="blog-card__img" src="https://artsabers.com/wp-content/uploads/sites/10/2025/03/Mandalorian-Armorer-Helmet-600x600.jpg" alt="Mandalorian Armorer helmet, back-lit" loading="lazy">
</div>
<div class="blog-card__body">
<span class="blog-card__chip">Lightsaber Guides & Tips</span>
<h3 class="blog-card__title">Care and Feeding of Your Neopixel Blade</h3>
<div class="blog-card__meta"><span>Chloe</span><span>2 Feb 2026</span><span>5 min read</span></div>
<p class="blog-card__excerpt">Pixel blades are tougher than the rumours say — but only if you treat them right. A short care manual for daily duelists.</p>
<span class="blog-card__read">Read</span>
</div>
</a>
<a id="tf-cross-sell-strip-3" data-tf-family="cross-sell-strip" style="display:contents"></a>
<aside class="product-feature product-feature--category" role="complementary" aria-label="Featured collection">
<div class="product-feature__inner">
<div class="product-feature__media">
<img class="product-feature__img" src="https://artsabers.com/wp-content/uploads/sites/10/2025/03/Starkiller-V3-Lightsaber-Xenopixel-V3-600x600.jpg" alt="Starkiller V3 duelling saber, ember blade" loading="lazy">
<span class="product-feature__badge">Featured Collection</span>
</div>
<div class="product-feature__copy">
<p class="product-feature__eyebrow">Explore the collection</p>
<h3 class="product-feature__title">Duelling Grade Sabers</h3>
<p class="product-feature__lede">Every hilt in our duelling range is combat-tested. Neopixel, Xenopixel, and Proffie cores. Silver-forged. Built to fight — and to survive the fight.</p>
<ul class="product-feature__pills">
<li>Neopixel</li>
<li>Xenopixel</li>
<li>Proffie 2.2</li>
<li>Silver-forged</li>
</ul>
<div class="product-feature__stat-grid">
<div class="product-feature__stat">
<span class="product-feature__stat-value">42</span>
<span class="product-feature__stat-label">Hilts in the range</span>
</div>
<div class="product-feature__stat">
<span class="product-feature__stat-value">$299+</span>
<span class="product-feature__stat-label">Starting price</span>
</div>
<div class="product-feature__stat">
<span class="product-feature__stat-value">FREE</span>
<span class="product-feature__stat-label">Worldwide shipping</span>
</div>
</div>
<div class="product-feature__actions">
<a href="/product-category/lightsabers/duelling-grade/" class="product-feature__cta">Explore All Duelling Grade →</a>
</div>
</div>
</div>
<span class="product-feature__bloom" aria-hidden="true"></span>
<span class="product-feature__bloom product-feature__bloom--tl" aria-hidden="true"></span>
</aside>
<a class="blog-card" href="/blog/jedi-june-begins/">
<div class="blog-card__media">
<img class="blog-card__img" src="https://camcom.dev/wp-content/uploads/2026/07/Carbon_Strike_1-600x600.jpg" alt="Carbon Strike saber close-up on hull plate" loading="lazy">
</div>
<div class="blog-card__body">
<span class="blog-card__chip">ARTSABERS News</span>
<h3 class="blog-card__title">Jedi June Begins — Awaken the Force Within</h3>
<div class="blog-card__meta"><span>Matthew</span><span>1 Jun 2026</span><span>3 min read</span></div>
<p class="blog-card__excerpt">Jedi June is a month of light-side favourites, deep-dive guides, and a couple of quiet drops. Here's the running order.</p>
<span class="blog-card__read">Read</span>
</div>
</a>
<a class="blog-card" href="/blog/an-update-on-backorders/">
<div class="blog-card__media">
<img class="blog-card__img" src="https://artsabers.com/wp-content/uploads/sites/10/2025/03/Starkiller-V3-Lightsaber-Xenopixel-V3-600x600.jpg" alt="Starkiller V3 lightsaber, Xenopixel V3" loading="lazy">
</div>
<div class="blog-card__body">
<span class="blog-card__chip">ARTSABERS News</span>
<h3 class="blog-card__title">An Update On Backorders</h3>
<div class="blog-card__meta"><span>Matthew</span><span>18 Jan 2026</span><span>3 min read</span></div>
<p class="blog-card__excerpt">Which builds are still pending, which are moving this week, and the honest state of the queue by Saber Core tier.</p>
<span class="blog-card__read">Read</span>
</div>
</a>
</div>
</section>
<!-- PAGINATION -->
<a id="tf-other-3" data-tf-family="other" style="display:contents"></a>
<section class="blog-pagination" aria-label="Pagination">
<div class="blog-pagination__inner">
<div class="blog-pagination__status">Showing 12 of 12 posts</div>
<div class="blog-pagination__controls">
<span class="blog-pagination__step blog-pagination__step--disabled" aria-disabled="true">←</span>
<a href="/blog" class="blog-pagination__page blog-pagination__page--active" aria-current="page">1</a>
<a href="/blog/page/2" class="blog-pagination__page">2</a>
<a href="/blog/page/2" class="blog-pagination__step">Next →</a>
</div>
</div>
</section>
<!-- NEWSLETTER CAPTURE BAND (editorial-safe naming, not .promo-*/.advert-*) -->
<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>
<!-- SITE FOOTER (verbatim from MAS64) -->
<footer class="site-footer" aria-label="Site footer">
<div class="site-footer__inner">
<div class="site-footer__grid">
<div class="site-footer__col site-footer__col--brand">
<div class="site-footer__brand-mark">ARTS<span>A</span>BERS</div>
<p class="site-footer__brand-blurb">Hundreds of sabers. One trusted retailer. Every character, every Saber Core, every duelling grade — from factory floor to your door.</p>
</div>
<div class="site-footer__col">
<div class="site-footer__col-title">Shop</div>
<ul>
<li><a href="/lightsabers">Lightsabers</a></li>
<li><a href="/cosplay-helmets">Cosplay Helmets</a></li>
<li><a href="/parts-accessories">Parts & Accessories</a></li>
<li><a href="/offers-deals">Offers & Deals</a></li>
<li><a href="/bundles">Bundles</a></li>
</ul>
</div>
<div class="site-footer__col">
<div class="site-footer__col-title">Read</div>
<ul>
<li><a href="/blog">Blog & News</a></li>
<li><a href="/guides">Buying Guides</a></li>
<li><a href="/lore">Lore & Short Stories</a></li>
<li><a href="/about">About ARTSABERS</a></li>
<li><a href="/press">Press</a></li>
</ul>
</div>
<div class="site-footer__col">
<div class="site-footer__col-title">Support</div>
<ul>
<li><a href="/contact">Contact Us</a></li>
<li><a href="/shipping">Shipping & Delivery</a></li>
<li><a href="/returns">Returns & Warranty</a></li>
<li><a href="/track">Track My Order</a></li>
<li><a href="/faq">FAQs</a></li>
</ul>
</div>
</div>
<div class="site-footer__legal">
<div>© 2026 ARTSABERS. All rights reserved.</div>
<ul class="site-footer__legal-links">
<li><a href="/privacy">Privacy</a></li>
<li><a href="/terms">Terms</a></li>
<li><a href="/cookies">Cookies</a></li>
</ul>
</div>
</div>
</footer>
</body>
</html>