/wire-template.
<!DOCTYPE html>
<?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lava Shea · Creator Takeover — 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>/* ================================================================
TOKENS — ARTSABERS Kyber Hull (from styleguide, verbatim values)
================================================================ */
:root {
/* Ember ombre — the ONE brand 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 */
--carbon: #060606;
--void: #0A0A0A;
--charcoal: #141414;
--charcoal-warm: #161412;
--hull-panel: #1A1A1A;
--hull-panel-lift: #242424;
--hull-panel-dark: #0F0F0F;
--hull-chrome-shadow: #2E2E2E;
--hull-edge: #363636;
/* Chrome / highlights */
--chrome-highlight: #FAFAFA;
--chrome-glint: #E8E4DD;
--chrome-warm: #F5F0E8;
--chrome-dim: #B8B0A6;
/* Semantic — surface roles (use for backgrounds only) */
--bg-page: var(--carbon);
--bg-surface: var(--charcoal);
--bg-surface-warm: var(--charcoal-warm);
--bg-surface-void: var(--void);
--bg-card: var(--hull-panel);
--bg-card-lift: var(--hull-panel-lift);
--bg-card-dark: var(--hull-panel-dark);
--bg-footer: var(--carbon);
/* Semantic — text roles */
--text-primary: var(--chrome-warm);
--text-highlight: var(--chrome-highlight);
--text-dim: var(--chrome-dim);
--text-on-ember: var(--on-primary-fixed);
--text-on-ember-deep: var(--ember-scar);
/* Accent */
--accent: var(--ember);
/* Fonts */
--font-display: 'Orbitron', system-ui, sans-serif;
--font-body: 'Onest', system-ui, sans-serif;
/* Type scale */
--hero-display: 88px;
--section-display-xl: 80px;
--section-display-lg: 60px;
--section-display-md: 44px;
--section-display-sm: 40px;
--card-title: 28px;
--code-display: 28px;
--body-lg: 19px;
--body: 17px;
--body-sm: 15px;
--label-md: 14px;
--label-sm: 12px;
--micro: 11px;
/* Shadows */
--panel-lift: inset 0 1px 0 rgba(250,250,250,0.08), 0 8px 24px -8px rgba(0,0,0,0.9);
--panel-lift-hover: inset 0 1px 0 rgba(250,250,250,0.15), 0 16px 48px -12px rgba(0,0,0,0.95);
--ember-glow-sm: 0 0 16px rgba(255,122,46,0.35);
--ember-glow-md: 0 0 24px rgba(255,122,46,0.5);
--ember-hot-rim: inset 0 0 0 1px rgba(255,122,46,0.55), 0 0 24px rgba(255,122,46,0.35);
--ember-hairline: 0 0 0 1px rgba(255,122,46,0.35);
--ember-seam-glow: 0 -1px 0 rgba(255,122,46,0.55), 0 -16px 40px -12px rgba(255,122,46,0.35);
--chrome-top-soft: inset 0 1px 0 rgba(250,250,250,0.30);
}
/* ================================================================
RESET + PAGE
================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font-body);
background: var(--bg-page);
color: var(--text-primary);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
/* Panel seam — a discipline separator, used sparingly */
.panel-seam {
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(255,122,46,0.55) 50%, transparent 100%);
box-shadow: 0 0 24px 4px rgba(255,122,46,0.20);
position: relative;
z-index: 5;
}
/* ================================================================
BLOCK: alert-bar-creator — ember-forge tinted, 44px, letter-spaced
================================================================ */
.alert-bar-creator {
height: 44px;
background:
linear-gradient(180deg, rgba(232,93,24,0.32) 0%, rgba(209,72,16,0.22) 100%),
var(--carbon);
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 100;
border-bottom: 1px solid rgba(255,122,46,0.28);
}
.alert-bar-creator::after {
content: '';
position: absolute;
inset: auto 0 0 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(255,180,71,0.5) 50%, transparent 100%);
}
.alert-bar-creator__link {
font-family: var(--font-body);
font-weight: 500;
font-size: 12px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--chrome-highlight);
padding: 0 32px;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 14px;
transition: color 0.2s;
}
.alert-bar-creator__link:hover { color: var(--ember-glow); }
.alert-bar-creator__sep { color: rgba(255,180,71,0.6); }
.alert-bar-creator__chevron {
color: var(--ember-glow);
font-size: 14px;
font-weight: 600;
transition: transform 0.2s;
}
.alert-bar-creator__link:hover .alert-bar-creator__chevron { transform: translateX(4px); }
@media (max-width: 900px) {
.alert-bar-creator { height: auto; padding: 10px 16px; }
.alert-bar-creator__link { font-size: 10px; letter-spacing: 0.16em; padding: 0; text-align: center; white-space: normal; line-height: 1.5; }
}
/* ================================================================
BLOCK: site-nav — Kyber Hull top navigation
================================================================ */
.site-nav {
background: var(--carbon);
border-bottom: 1px solid rgba(54,54,54,0.4);
position: relative;
z-index: 90;
}
.site-nav__inner {
max-width: 1440px;
margin: 0 auto;
padding: 20px 48px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
}
.site-nav__brand {
font-family: var(--font-display);
font-weight: 700;
font-size: 20px;
letter-spacing: 0.24em;
color: var(--chrome-highlight);
text-transform: uppercase;
}
.site-nav__brand::first-letter { color: var(--ember); }
.site-nav__links {
display: flex;
gap: 40px;
list-style: none;
}
.site-nav__link {
font-family: var(--font-body);
font-weight: 500;
font-size: 13px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--chrome-warm);
transition: color 0.2s;
}
.site-nav__link:hover { color: var(--ember); }
.site-nav__utils {
display: flex;
align-items: center;
gap: 24px;
}
.site-nav__util-btn {
font-family: var(--font-body);
font-weight: 500;
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--chrome-warm);
display: inline-flex;
align-items: center;
gap: 8px;
transition: color 0.2s;
}
.site-nav__util-btn:hover { color: var(--ember); }
.site-nav__cart-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 6px;
background: var(--ember);
color: var(--on-primary-fixed);
font-family: var(--font-display);
font-weight: 700;
font-size: 11px;
letter-spacing: 0;
}
@media (max-width: 900px) {
.site-nav__inner { padding: 16px 20px; }
.site-nav__links { display: none; }
.site-nav__brand { font-size: 16px; }
}
/* ================================================================
BLOCK: hero-creator-takeover — 720px, two-column atmospheric
================================================================ */
.hero-creator-takeover {
position: relative;
height: 720px;
background:
/* left-to-right dark scrim protecting content legibility */
linear-gradient(90deg, rgba(6,6,6,0.88) 0%, rgba(6,6,6,0.55) 40%, rgba(6,6,6,0.2) 70%, rgba(6,6,6,0.35) 100%),
/* top-left corner ember bloom, kept subtle */
radial-gradient(ellipse at 5% 5%, rgba(255,122,46,0.2) 0%, transparent 55%),
/* full-bleed Lava Shea photo — the hero image (from the shipped Lava Shea takeover) */
url('https://camcom.dev/wp-content/uploads/sites/10/2026/06/6f0320e4a3df77a3b51e2d37a15e6eae-6.jpg') center/cover no-repeat,
var(--carbon);
overflow: hidden;
isolation: isolate;
}
.hero-creator-takeover::before {
/* chrome top edge — the raised-lip catch */
content: '';
position: absolute; inset: 0 0 auto 0; height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(250,250,250,0.35) 50%, transparent 100%);
z-index: 3;
}
.hero-creator-takeover::after {
/* bottom ember backlight — panel-end signature */
content: '';
position: absolute; inset: auto 0 0 0; height: 120px;
background: linear-gradient(180deg, transparent 0%, rgba(255,122,46,0.22) 80%, rgba(232,93,24,0.35) 100%);
pointer-events: none;
z-index: 2;
}
.hero-creator-takeover__inner {
position: relative;
z-index: 4;
max-width: 1440px;
margin: 0 auto;
padding: 80px 48px 100px;
height: 100%;
display: flex;
align-items: center;
}
.hero-creator-takeover__left {
display: flex;
flex-direction: column;
gap: 28px;
max-width: 620px;
}
.hero-creator-takeover__eyebrow {
font-family: var(--font-body);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ember-glow);
display: inline-flex;
align-items: center;
gap: 12px;
}
.hero-creator-takeover__eyebrow::before {
content: '';
width: 32px; height: 1px;
background: var(--ember);
box-shadow: 0 0 8px rgba(255,122,46,0.6);
}
.hero-creator-takeover__title {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--hero-display);
line-height: 1;
letter-spacing: 0.8px;
color: var(--chrome-highlight);
text-shadow: 0 0 40px rgba(255,122,46,0.28);
}
.hero-creator-takeover__title-dot { color: var(--ember); }
.hero-creator-takeover__lede {
font-family: var(--font-body);
font-weight: 400;
font-size: var(--body-lg);
line-height: 1.5;
color: var(--chrome-warm);
max-width: 520px;
}
.hero-creator-takeover__code-frame {
display: inline-flex;
flex-direction: column;
gap: 8px;
padding: 18px 28px;
border: 1px solid rgba(255,122,46,0.55);
background: rgba(15,15,15,0.55);
backdrop-filter: blur(6px);
box-shadow: var(--ember-hairline), 0 0 24px rgba(255,122,46,0.15);
align-self: flex-start;
position: relative;
}
.hero-creator-takeover__code-frame::before {
content: '';
position: absolute; inset: 0 0 auto 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(250,250,250,0.4), transparent);
}
.hero-creator-takeover__code-label {
font-family: var(--font-body);
font-weight: 600;
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ember-glow);
}
.hero-creator-takeover__code {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--code-display);
letter-spacing: 0.06em;
color: var(--chrome-highlight);
text-shadow: 0 0 16px rgba(255,122,46,0.55);
}
.hero-creator-takeover__cta-row {
display: flex;
align-items: center;
gap: 20px;
margin-top: 8px;
}
.hero-creator-takeover__right {
position: relative;
height: 520px;
display: flex;
align-items: center;
justify-content: center;
}
.hero-creator-takeover__photo {
position: relative;
width: 380px;
height: 100%;
border: 1px solid rgba(255,122,46,0.45);
background:
radial-gradient(ellipse at 50% 20%, rgba(255,180,71,0.22) 0%, transparent 60%),
linear-gradient(180deg, #2A1810 0%, #1A0F08 40%, #0A0604 100%);
box-shadow:
inset 0 1px 0 rgba(250,250,250,0.20),
inset 0 0 60px rgba(0,0,0,0.5),
0 0 40px rgba(255,122,46,0.25),
0 20px 60px -20px rgba(0,0,0,0.9);
overflow: hidden;
display: flex;
align-items: flex-end;
padding: 24px;
}
.hero-creator-takeover__photo::before {
content: '';
position: absolute;
inset: 12% 20% 30% 20%;
background:
radial-gradient(ellipse at 50% 30%, rgba(245,240,232,0.35) 0%, rgba(245,240,232,0.12) 30%, transparent 55%);
border-radius: 50%;
filter: blur(20px);
}
.hero-creator-takeover__photo::after {
content: '';
position: absolute;
inset: 45% 32% 12% 32%;
background: linear-gradient(180deg, rgba(30,15,10,0.85) 0%, rgba(60,25,15,0.75) 60%, rgba(20,10,5,0.9) 100%);
clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
box-shadow: inset 0 2px 12px rgba(255,122,46,0.3);
}
.hero-creator-takeover__photo-tag {
position: relative;
z-index: 2;
font-family: var(--font-body);
font-weight: 600;
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--chrome-warm);
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(6,6,6,0.75);
padding: 8px 14px;
border: 1px solid rgba(255,122,46,0.4);
}
.hero-creator-takeover__photo-tag::before {
content: '';
width: 6px; height: 6px;
background: var(--ember);
box-shadow: 0 0 8px var(--ember-glow);
}
.hero-creator-takeover__vertical {
position: absolute;
top: 50%;
right: 24px;
transform: translateY(-50%) rotate(90deg);
transform-origin: right center;
font-family: var(--font-body);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.5em;
text-transform: uppercase;
color: var(--ember-glow);
white-space: nowrap;
z-index: 5;
text-shadow: 0 0 12px rgba(255,122,46,0.4);
}
.hero-creator-takeover__vertical::before {
content: '';
display: inline-block;
width: 40px;
height: 1px;
background: var(--ember);
vertical-align: middle;
margin-right: 16px;
box-shadow: 0 0 8px rgba(255,122,46,0.6);
}
@media (max-width: 900px) {
.hero-creator-takeover { height: auto; }
.hero-creator-takeover__inner {
grid-template-columns: 1fr;
padding: 48px 20px 80px;
gap: 40px;
}
.hero-creator-takeover__title { font-size: 52px; letter-spacing: 0.8px; }
.hero-creator-takeover__right { height: 400px; }
.hero-creator-takeover__photo { width: 280px; }
.hero-creator-takeover__vertical { display: none; }
}
/* ================================================================
BLOCK: btn-ember — primary CTA (three-stop ombre)
================================================================ */
.btn-ember {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 18px 32px;
min-width: 220px;
font-family: var(--font-display);
font-weight: 600;
font-size: 14px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--on-primary-fixed);
background: linear-gradient(180deg, var(--ember-glow) 0%, var(--ember) 50%, var(--ember-deep) 100%);
box-shadow: var(--ember-glow-sm), inset 0 1px 0 rgba(255,255,255,0.35);
border: none;
transition: box-shadow 0.2s, transform 0.15s;
position: relative;
cursor: pointer;
}
.btn-ember:hover {
box-shadow: var(--ember-glow-md), inset 0 1px 0 rgba(255,255,255,0.45);
transform: translateY(-1px);
}
.btn-ember--wide { min-width: 280px; }
/* ================================================================
BLOCK: btn-ghost — ghost secondary CTA
================================================================ */
.btn-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px 28px;
font-family: var(--font-display);
font-weight: 500;
font-size: 13px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--chrome-warm);
background: transparent;
border: 1px solid rgba(62,62,62,0.6);
transition: background 0.2s, border-color 0.2s;
}
.btn-ghost:hover {
background: var(--hull-panel-lift);
border-color: rgba(255,122,46,0.4);
box-shadow: var(--chrome-top-soft);
}
/* ================================================================
BLOCK: marquee-band — ember-forge tinted scrolling messaging
================================================================ */
.marquee-band {
height: 48px;
background:
linear-gradient(180deg, rgba(232,93,24,0.22) 0%, rgba(209,72,16,0.14) 100%),
var(--carbon);
border-top: 1px solid rgba(255,122,46,0.35);
border-bottom: 1px solid rgba(255,122,46,0.28);
overflow: hidden;
position: relative;
display: flex;
align-items: center;
}
.marquee-band__track {
display: flex;
gap: 40px;
animation: marquee-scroll 40s linear infinite;
white-space: nowrap;
flex-shrink: 0;
padding-left: 40px;
}
.marquee-band__group {
display: flex;
align-items: center;
gap: 40px;
flex-shrink: 0;
}
.marquee-band__phrase {
font-family: var(--font-body);
font-weight: 600;
font-size: 13px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--chrome-highlight);
text-shadow: 0 0 12px rgba(255,122,46,0.3);
}
.marquee-band__dot {
display: inline-block;
width: 8px;
height: 8px;
background: var(--ember);
box-shadow: 0 0 10px rgba(255,180,71,0.7);
flex-shrink: 0;
}
@keyframes marquee-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ================================================================
BLOCK: about-me-split — editorial split, creator intro
================================================================ */
.about-me-split,
.qa-spotlight-split,
.follow-now-band {
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 */
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 */
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 */
radial-gradient(ellipse 750px 500px at 30% 30%, rgba(255,255,255,0.01) 0%, transparent 60%),
/* fine metallic noise */
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 */
linear-gradient(180deg, #060605 0%, #070706 50%, #080706 100%);
background-size: auto, auto, auto, auto, 1200px 904px, 200px 200px, auto;
}
.about-me-split {
padding: 120px 48px;
position: relative;
overflow: hidden;
}
.about-me-split__inner {
max-width: 1320px;
margin: 0 auto;
display: grid;
grid-template-columns: 40% 60%;
gap: 80px;
align-items: start;
}
.about-me-split__left { display: flex; flex-direction: column; gap: 20px; }
.about-me-split__photo {
position: relative;
aspect-ratio: 3 / 4;
width: 100%;
border: 1px solid rgba(255,122,46,0.35);
background:
radial-gradient(ellipse at 50% 15%, rgba(255,180,71,0.2) 0%, transparent 55%),
linear-gradient(160deg, #2E1A10 0%, #180C06 45%, #080402 100%);
box-shadow:
inset 0 1px 0 rgba(250,250,250,0.15),
inset 0 -80px 120px rgba(0,0,0,0.7),
0 0 32px rgba(255,122,46,0.12),
0 24px 60px -20px rgba(0,0,0,0.9);
overflow: hidden;
}
.about-me-split__photo::before {
content: '';
position: absolute;
inset: 8% 25% 40% 25%;
background: radial-gradient(ellipse at 50% 35%, rgba(245,240,232,0.30) 0%, transparent 55%);
border-radius: 50%;
filter: blur(24px);
}
.about-me-split__photo::after {
content: '';
position: absolute;
inset: 42% 30% 0 30%;
background: linear-gradient(180deg, rgba(30,18,10,0.75) 0%, rgba(50,20,10,0.6) 60%, rgba(15,8,4,0.9) 100%);
clip-path: polygon(30% 0%, 70% 0%, 100% 100%, 0% 100%);
box-shadow: inset 0 2px 12px rgba(255,122,46,0.2);
}
.about-me-split__caption {
font-family: var(--font-body);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--chrome-dim);
}
.about-me-split__caption strong { color: var(--chrome-warm); font-weight: 600; }
.about-me-split__descriptor {
font-family: var(--font-body);
font-style: italic;
font-weight: 400;
font-size: 14px;
color: var(--chrome-dim);
line-height: 1.55;
padding-top: 4px;
border-top: 1px solid rgba(184,176,166,0.15);
padding-top: 12px;
}
.about-me-split__right { display: flex; flex-direction: column; gap: 32px; }
.about-me-split__eyebrow {
font-family: var(--font-body);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ember);
display: inline-flex;
align-items: center;
gap: 12px;
}
.about-me-split__eyebrow::before {
content: '';
width: 32px; height: 1px;
background: var(--ember);
box-shadow: 0 0 8px rgba(255,122,46,0.6);
}
.about-me-split__body { display: flex; flex-direction: column; gap: 20px; max-width: 640px; }
.about-me-split__para {
font-family: var(--font-body);
font-weight: 400;
font-size: 17px;
line-height: 1.7;
color: var(--chrome-warm);
}
.about-me-split__sub-eyebrow {
font-family: var(--font-body);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ember);
margin-top: 16px;
}
.about-me-split__footer-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding-top: 32px;
margin-top: 8px;
border-top: 1px solid rgba(54,54,54,0.5);
flex-wrap: wrap;
}
.about-me-split__stat { display: flex; flex-direction: column; gap: 4px; }
.about-me-split__stat-value {
font-family: var(--font-display);
font-weight: 700;
font-size: 44px;
line-height: 1;
color: var(--ember);
letter-spacing: -0.02em;
text-shadow: 0 0 20px rgba(255,122,46,0.4);
}
.about-me-split__stat-label {
font-family: var(--font-body);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--chrome-dim);
}
@media (max-width: 900px) {
.about-me-split { padding: 64px 20px; }
.about-me-split__inner { grid-template-columns: 1fr; gap: 40px; }
}
/* ================================================================
BLOCK: featured-pick-card — large horizontal creator's pick
================================================================ */
.featured-picks {
background: var(--carbon);
padding: 120px 48px;
position: relative;
}
.featured-picks::before {
content: '';
position: absolute; inset: 0 0 auto 0; height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(255,122,46,0.35) 50%, transparent 100%);
box-shadow: 0 0 20px 2px rgba(255,122,46,0.15);
}
.featured-picks__inner { max-width: 1320px; margin: 0 auto; }
.featured-picks__header {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 32px;
margin-bottom: 56px;
flex-wrap: wrap;
}
.featured-picks__header-left { display: flex; flex-direction: column; gap: 20px; max-width: 720px; }
.featured-picks__eyebrow {
font-family: var(--font-body);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ember);
display: inline-flex;
align-items: center;
gap: 12px;
}
.featured-picks__eyebrow::before {
content: '';
width: 32px; height: 1px;
background: var(--ember);
box-shadow: 0 0 8px rgba(255,122,46,0.6);
}
.featured-picks__title {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--section-display-md);
line-height: 1.05;
letter-spacing: 0.8px;
color: var(--chrome-highlight);
}
.featured-picks__stat {
font-family: var(--font-body);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--chrome-dim);
display: inline-flex;
align-items: center;
gap: 16px;
padding-bottom: 4px;
}
.featured-picks__stat-sep { color: rgba(255,122,46,0.6); }
.featured-picks__list { display: flex; flex-direction: column; gap: 40px; }
.featured-pick-card {
position: relative;
display: grid;
grid-template-columns: 35% 65%;
gap: 0;
background: var(--hull-panel);
box-shadow: var(--panel-lift);
min-height: 380px;
border: 1px solid rgba(54,54,54,0.35);
overflow: hidden;
}
.featured-pick-card::before {
content: '';
position: absolute; inset: 0 0 auto 0; height: 1px;
background: linear-gradient(90deg, rgba(250,250,250,0.35) 0%, rgba(250,250,250,0.15) 60%, transparent 100%);
z-index: 3;
}
.featured-pick-card__badge {
position: absolute;
top: 20px;
left: 20px;
padding: 8px 14px;
background: linear-gradient(180deg, rgba(232,93,24,0.95) 0%, rgba(209,72,16,0.95) 100%);
font-family: var(--font-body);
font-weight: 700;
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--on-primary-fixed);
z-index: 4;
box-shadow: 0 0 20px rgba(255,122,46,0.4);
}
.featured-pick-card__media {
position: relative;
background: var(--hull-panel-dark);
border-right: 1px solid rgba(54,54,54,0.4);
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
overflow: hidden;
}
.featured-pick-card__media::after {
content: '';
position: absolute; inset: 0;
background: radial-gradient(ellipse at 50% 100%, rgba(255,122,46,0.2) 0%, transparent 65%);
pointer-events: none;
}
.featured-pick-card__img {
max-height: 300px;
width: auto;
object-fit: contain;
filter: drop-shadow(0 0 32px rgba(255,122,46,0.35));
position: relative;
z-index: 2;
}
.featured-pick-card__body {
padding: 40px 44px;
display: flex;
flex-direction: column;
gap: 18px;
justify-content: center;
background: var(--hull-panel);
}
.featured-pick-card__type-chip {
align-self: flex-start;
font-family: var(--font-body);
font-weight: 600;
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ember);
padding: 6px 12px;
border: 1px solid rgba(255,122,46,0.45);
background: rgba(15,15,15,0.5);
}
.featured-pick-card__title {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--card-title);
line-height: 1.15;
color: var(--chrome-highlight);
letter-spacing: 0.8px;
}
.featured-pick-card__para {
font-family: var(--font-body);
font-weight: 400;
font-size: 16px;
line-height: 1.65;
color: var(--chrome-warm);
max-width: 640px;
}
.featured-pick-card__cta { align-self: flex-start; margin-top: 8px; }
@media (max-width: 900px) {
.featured-picks { padding: 64px 20px; }
.featured-picks__title { font-size: 32px; letter-spacing: 0.8px; }
.featured-pick-card { grid-template-columns: 1fr; min-height: 0; }
.featured-pick-card__media { min-height: 260px; border-right: none; border-bottom: 1px solid rgba(54,54,54,0.4); }
.featured-pick-card__body { padding: 32px 24px; }
}
/* ================================================================
BLOCK: code-cta-band-ombre — ember-ombre mid-page code moment
================================================================ */
.code-cta-band-ombre {
background: linear-gradient(180deg, var(--ember-glow) 0%, var(--ember) 45%, var(--ember-forge) 100%);
padding: 56px 48px;
position: relative;
overflow: hidden;
box-shadow: 0 0 60px -10px rgba(255,122,46,0.5);
}
.code-cta-band-ombre::before {
content: '';
position: absolute; inset: 0 0 auto 0; height: 2px;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
}
.code-cta-band-ombre::after {
content: '';
position: absolute; inset: auto 0 0 0; height: 2px;
background: linear-gradient(90deg, transparent 0%, rgba(90,26,0,0.65) 50%, transparent 100%);
}
.code-cta-band-ombre__inner {
max-width: 800px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
text-align: center;
position: relative;
z-index: 2;
}
.code-cta-band-ombre__title {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--section-display-sm);
line-height: 1;
letter-spacing: 0.8px;
color: var(--chrome-highlight);
text-shadow: 0 2px 20px rgba(90,26,0,0.4);
}
.code-cta-band-ombre__sub {
font-family: var(--font-body);
font-weight: 500;
font-size: var(--body-lg);
color: var(--on-primary-fixed);
letter-spacing: 0.01em;
}
.code-cta-band-ombre__chip {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 14px 28px;
background: rgba(42,8,0,0.65);
border: 1px solid rgba(255,255,255,0.35);
font-family: var(--font-display);
font-weight: 700;
font-size: 24px;
letter-spacing: 0.08em;
color: var(--chrome-highlight);
margin-top: 12px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
.code-cta-band-ombre__chip strong { color: var(--ember-glow); font-weight: 700; }
.code-cta-band-ombre__copy-btn {
font-family: var(--font-display);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--on-primary-fixed);
border: 1px solid rgba(42,8,0,0.5);
padding: 12px 24px;
background: transparent;
margin-top: 8px;
transition: background 0.2s;
}
.code-cta-band-ombre__copy-btn:hover { background: rgba(42,8,0,0.15); }
@media (max-width: 900px) {
.code-cta-band-ombre { padding: 40px 20px; }
.code-cta-band-ombre__title { font-size: 32px; letter-spacing: 0.8px; }
}
/* ================================================================
BLOCK: qa-spotlight-split — editorial split, one big Q + A
================================================================ */
.qa-spotlight-split {
padding: 120px 48px;
position: relative;
overflow: hidden;
}
.qa-spotlight-split::before {
content: '';
position: absolute; inset: 0 0 auto 0; height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(255,122,46,0.35) 50%, transparent 100%);
box-shadow: 0 0 20px 2px rgba(255,122,46,0.15);
}
.qa-spotlight-split__inner {
max-width: 1320px;
margin: 0 auto;
display: grid;
grid-template-columns: 40% 60%;
gap: 80px;
align-items: center;
}
.qa-spotlight-split__photo {
position: relative;
aspect-ratio: 3 / 4;
width: 100%;
border: 1px solid rgba(255,122,46,0.35);
background:
radial-gradient(ellipse at 60% 20%, rgba(255,180,71,0.24) 0%, transparent 55%),
linear-gradient(160deg, #24140A 0%, #150A04 45%, #060302 100%);
box-shadow:
inset 0 1px 0 rgba(250,250,250,0.15),
inset 0 -80px 120px rgba(0,0,0,0.7),
0 0 40px rgba(255,122,46,0.18),
0 24px 60px -20px rgba(0,0,0,0.9);
overflow: hidden;
}
.qa-spotlight-split__photo::before {
content: '';
position: absolute;
inset: 10% 24% 45% 22%;
background: radial-gradient(ellipse at 50% 40%, rgba(245,240,232,0.28) 0%, transparent 55%);
border-radius: 50%;
filter: blur(20px);
}
.qa-spotlight-split__photo::after {
content: '';
position: absolute;
top: 15%;
right: 22%;
width: 4px;
height: 55%;
background: linear-gradient(180deg, rgba(255,180,71,0.9) 0%, rgba(255,122,46,0.85) 50%, rgba(232,93,24,0.7) 100%);
box-shadow: 0 0 24px rgba(255,180,71,0.9), 0 0 48px rgba(255,122,46,0.6);
transform: rotate(-8deg);
transform-origin: bottom center;
}
.qa-spotlight-split__body { display: flex; flex-direction: column; gap: 28px; }
.qa-spotlight-split__eyebrow {
font-family: var(--font-body);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ember);
display: inline-flex;
align-items: center;
gap: 12px;
}
.qa-spotlight-split__eyebrow::before {
content: '';
width: 32px; height: 1px;
background: var(--ember);
box-shadow: 0 0 8px rgba(255,122,46,0.6);
}
.qa-spotlight-split__question {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--section-display-md);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--chrome-highlight);
}
.qa-spotlight-split__answer { display: flex; flex-direction: column; gap: 20px; max-width: 640px; }
.qa-spotlight-split__para {
font-family: var(--font-body);
font-weight: 400;
font-size: 17px;
line-height: 1.7;
color: var(--chrome-warm);
}
.qa-spotlight-split__para--italic { font-style: italic; color: var(--chrome-glint); }
@media (max-width: 900px) {
.qa-spotlight-split { padding: 64px 20px; }
.qa-spotlight-split__inner { grid-template-columns: 1fr; gap: 40px; }
.qa-spotlight-split__question { font-size: 32px; }
}
/* ================================================================
BLOCK: qa-grid — 2x2 more-questions grid
================================================================ */
.qa-grid {
background: var(--carbon);
padding: 40px 48px 120px;
}
.qa-grid__inner {
max-width: 1320px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
}
.qa-grid__cell {
padding: 40px 44px;
background: var(--hull-panel);
box-shadow: var(--panel-lift);
border: 1px solid rgba(54,54,54,0.35);
position: relative;
display: flex;
flex-direction: column;
gap: 20px;
}
.qa-grid__cell::before {
content: '';
position: absolute; inset: 0 0 auto 0; height: 1px;
background: linear-gradient(90deg, rgba(250,250,250,0.3) 0%, transparent 100%);
}
.qa-grid__question {
font-family: var(--font-body);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ember);
display: inline-flex;
align-items: center;
gap: 12px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(255,122,46,0.25);
}
.qa-grid__question::before {
content: '';
width: 8px; height: 8px;
background: var(--ember);
box-shadow: 0 0 10px rgba(255,180,71,0.7);
}
.qa-grid__answer {
font-family: var(--font-body);
font-weight: 400;
font-size: 16px;
line-height: 1.7;
color: var(--chrome-warm);
}
@media (max-width: 900px) {
.qa-grid { padding: 32px 20px 64px; }
.qa-grid__inner { grid-template-columns: 1fr; gap: 24px; }
.qa-grid__cell { padding: 28px 24px; }
}
/* ================================================================
BLOCK: follow-now-band — Reels grid + social chip strip
================================================================ */
.follow-now-band {
padding: 120px 48px;
position: relative;
overflow: hidden;
}
.follow-now-band::before {
content: '';
position: absolute; inset: 0 0 auto 0; height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(255,122,46,0.35) 50%, transparent 100%);
box-shadow: 0 0 20px 2px rgba(255,122,46,0.15);
}
.follow-now-band__inner {
max-width: 1320px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 56px;
}
.follow-now-band__header {
display: flex;
flex-direction: column;
gap: 16px;
align-items: center;
text-align: center;
}
.follow-now-band__eyebrow {
font-family: var(--font-body);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ember);
}
.follow-now-band__title {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--section-display-xl);
line-height: 1;
letter-spacing: 0.8px;
color: var(--chrome-highlight);
text-shadow: 0 0 40px rgba(255,122,46,0.25);
}
.follow-now-band__title-dot { color: var(--ember); }
.follow-now-band__reels {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
max-width: 800px;
margin: 0 auto;
}
.reel-preview {
position: relative;
aspect-ratio: 9 / 16;
background:
radial-gradient(ellipse at 50% 30%, rgba(255,180,71,0.15) 0%, transparent 55%),
linear-gradient(160deg, #251510 0%, #150A06 45%, #060302 100%);
border: 1px solid rgba(255,122,46,0.4);
box-shadow:
inset 0 1px 0 rgba(250,250,250,0.18),
inset 0 -60px 100px rgba(0,0,0,0.7),
0 0 24px rgba(255,122,46,0.15),
0 16px 40px -12px rgba(0,0,0,0.85);
overflow: hidden;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
}
.reel-preview:hover {
transform: translateY(-4px);
box-shadow:
inset 0 1px 0 rgba(250,250,250,0.25),
inset 0 -60px 100px rgba(0,0,0,0.7),
0 0 32px rgba(255,122,46,0.25),
0 24px 48px -12px rgba(0,0,0,0.9);
}
.reel-preview--a::before {
content: '';
position: absolute;
inset: 25% 30% 40% 30%;
background: radial-gradient(ellipse at 50% 40%, rgba(245,240,232,0.32) 0%, transparent 55%);
border-radius: 50%;
filter: blur(20px);
}
.reel-preview--b::before {
content: '';
position: absolute;
top: 20%; right: 30%;
width: 3px; height: 40%;
background: linear-gradient(180deg, rgba(140,180,255,0.9), rgba(80,130,255,0.7));
box-shadow: 0 0 20px rgba(140,180,255,0.9);
transform: rotate(15deg);
transform-origin: bottom;
}
.reel-preview--c::before {
content: '';
position: absolute;
top: 25%; left: 25%;
width: 3px; height: 45%;
background: linear-gradient(180deg, rgba(120,255,140,0.9), rgba(80,220,100,0.7));
box-shadow: 0 0 20px rgba(120,255,140,0.9);
transform: rotate(-12deg);
transform-origin: bottom;
}
.reel-preview__play {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 56px; height: 56px;
background: rgba(6,6,6,0.7);
border: 1px solid rgba(255,122,46,0.6);
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
transition: background 0.2s;
}
.reel-preview:hover .reel-preview__play { background: rgba(255,122,46,0.85); }
.reel-preview__play::before {
content: '';
width: 0; height: 0;
border-left: 14px solid var(--chrome-highlight);
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
margin-left: 4px;
}
.reel-preview__caption {
position: absolute;
bottom: 16px;
left: 16px;
right: 16px;
padding: 8px 12px;
background: rgba(6,6,6,0.75);
border-left: 2px solid var(--ember);
font-family: var(--font-body);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.08em;
color: var(--chrome-warm);
z-index: 3;
backdrop-filter: blur(4px);
}
.reel-preview__handle {
position: absolute;
top: 16px; left: 16px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
background: rgba(6,6,6,0.7);
border: 1px solid rgba(255,122,46,0.35);
font-family: var(--font-body);
font-weight: 600;
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--chrome-warm);
z-index: 3;
}
.reel-preview__handle::before {
content: '';
width: 6px; height: 6px;
background: var(--ember);
box-shadow: 0 0 6px rgba(255,180,71,0.8);
}
.follow-now-band__chips {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 16px;
}
.follow-now-band__chip {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 14px 22px;
border: 1px solid rgba(255,122,46,0.35);
background: rgba(15,15,15,0.7);
font-family: var(--font-body);
font-weight: 500;
font-size: 13px;
letter-spacing: 0.08em;
color: var(--chrome-warm);
transition: border-color 0.2s, box-shadow 0.2s, color 0.2s;
}
.follow-now-band__chip:hover {
border-color: var(--ember);
box-shadow: var(--ember-glow-sm);
color: var(--chrome-highlight);
}
.follow-now-band__chip-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px; height: 24px;
color: var(--ember);
font-family: var(--font-display);
font-weight: 700;
font-size: 12px;
border: 1px solid rgba(255,122,46,0.5);
}
.follow-now-band__chip-label {
font-weight: 700;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ember);
}
.follow-now-band__chip-handle { font-weight: 500; color: var(--chrome-highlight); letter-spacing: 0.04em; }
@media (max-width: 900px) {
.follow-now-band { padding: 64px 20px; }
.follow-now-band__title { font-size: 48px; letter-spacing: 0.8px; }
.follow-now-band__reels { grid-template-columns: 1fr; max-width: 300px; }
}
/* ================================================================
BLOCK: bottom-code-band — 2-column final code reminder
================================================================ */
.bottom-code-band {
background: var(--carbon);
padding: 64px 48px;
position: relative;
}
.bottom-code-band::before {
content: '';
position: absolute; inset: 0 0 auto 0; height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(255,122,46,0.4) 50%, transparent 100%);
box-shadow: 0 0 24px 2px rgba(255,122,46,0.2);
}
.bottom-code-band__inner {
max-width: 1000px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
}
.bottom-code-band__col {
display: flex;
flex-direction: column;
gap: 16px;
padding: 8px 0;
}
.bottom-code-band__col--right { align-items: flex-end; text-align: right; }
.bottom-code-band__eyebrow {
font-family: var(--font-body);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ember);
}
.bottom-code-band__chip {
display: inline-flex;
align-items: center;
padding: 16px 28px;
border: 1px solid rgba(255,122,46,0.55);
background: rgba(15,15,15,0.7);
font-family: var(--font-display);
font-weight: 700;
font-size: 32px;
letter-spacing: 0.08em;
color: var(--chrome-highlight);
box-shadow: var(--ember-glow-sm), inset 0 1px 0 rgba(250,250,250,0.15);
text-shadow: 0 0 14px rgba(255,122,46,0.5);
}
.bottom-code-band__value {
font-family: var(--font-display);
font-weight: 700;
font-size: 32px;
color: var(--chrome-highlight);
letter-spacing: 0.02em;
padding: 16px 0;
}
@media (max-width: 900px) {
.bottom-code-band { padding: 40px 20px; }
.bottom-code-band__inner { grid-template-columns: 1fr; gap: 32px; }
.bottom-code-band__col--right { align-items: flex-start; text-align: left; }
.bottom-code-band__chip { font-size: 22px; padding: 12px 20px; }
.bottom-code-band__value { font-size: 26px; }
}
/* ================================================================
BLOCK: newsletter-mas73 — canonical newsletter capture (ember-ombre)
================================================================ */
.newsletter-mas73 {
background: linear-gradient(180deg, var(--ember-glow) 0%, var(--ember) 50%, var(--ember-forge) 100%);
padding: 100px 48px;
position: relative;
overflow: hidden;
box-shadow: 0 0 80px -10px rgba(255,122,46,0.5);
}
.newsletter-mas73::before {
content: '';
position: absolute; inset: 0 0 auto 0; height: 2px;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.5) 50%, transparent 100%);
}
.newsletter-mas73::after {
content: '';
position: absolute; inset: auto 0 0 0; height: 2px;
background: linear-gradient(90deg, transparent 0%, rgba(90,26,0,0.6) 50%, transparent 100%);
}
.newsletter-mas73__inner {
max-width: 720px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
text-align: center;
position: relative;
z-index: 2;
}
.newsletter-mas73__eyebrow {
font-family: var(--font-body);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--on-primary-fixed);
}
.newsletter-mas73__title {
font-family: var(--font-display);
font-weight: 700;
font-size: 60px;
line-height: 1.05;
letter-spacing: 0.8px;
color: var(--chrome-highlight);
text-shadow: 0 2px 24px rgba(90,26,0,0.35);
}
.newsletter-mas73__sub {
font-family: var(--font-body);
font-weight: 500;
font-size: 17px;
color: var(--on-primary-fixed);
max-width: 560px;
line-height: 1.55;
}
.newsletter-mas73__form {
display: flex;
gap: 12px;
width: 100%;
max-width: 560px;
margin-top: 12px;
flex-wrap: wrap;
}
.newsletter-mas73__input {
flex: 1;
min-width: 240px;
padding: 18px 20px;
background: rgba(42,8,0,0.55);
border: none;
border-bottom: 2px solid rgba(42,8,0,0.85);
font-family: var(--font-body);
font-weight: 500;
font-size: 16px;
color: var(--chrome-highlight);
outline: none;
transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.newsletter-mas73__input::placeholder { color: rgba(245,240,232,0.75); }
.newsletter-mas73__input:focus {
border-bottom-color: var(--chrome-highlight);
background: rgba(42,8,0,0.75);
box-shadow: 0 4px 12px -8px rgba(255,255,255,0.5);
}
.newsletter-mas73__submit {
padding: 18px 32px;
background: var(--on-primary-fixed);
color: var(--ember-glow);
font-family: var(--font-display);
font-weight: 600;
font-size: 13px;
letter-spacing: 0.16em;
text-transform: uppercase;
border: 1px solid rgba(90,26,0,0.6);
transition: background 0.2s, color 0.2s;
}
.newsletter-mas73__submit:hover { background: var(--ember-scar); color: var(--chrome-highlight); }
@media (max-width: 900px) {
.newsletter-mas73 { padding: 60px 20px; }
.newsletter-mas73__title { font-size: 40px; letter-spacing: 0.8px; }
}
/* ================================================================
BLOCK: site-footer — Kyber Hull footer, carbon ground
================================================================ */
.site-footer {
background: var(--carbon);
padding: 80px 48px 32px;
position: relative;
}
.site-footer::before {
content: '';
position: absolute; inset: 0 0 auto 0; height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(255,122,46,0.5) 50%, transparent 100%);
box-shadow: 0 0 24px 4px rgba(255,122,46,0.22);
}
.site-footer__inner { max-width: 1440px; margin: 0 auto; }
.site-footer__top {
display: grid;
grid-template-columns: 1.5fr repeat(3, 1fr);
gap: 48px;
padding-bottom: 56px;
border-bottom: 1px solid rgba(54,54,54,0.4);
}
.site-footer__brand {
font-family: var(--font-display);
font-weight: 700;
font-size: 28px;
letter-spacing: 0.22em;
color: var(--chrome-highlight);
text-transform: uppercase;
margin-bottom: 20px;
}
.site-footer__brand::first-letter { color: var(--ember); }
.site-footer__tagline {
font-family: var(--font-body);
font-weight: 400;
font-size: 14px;
line-height: 1.6;
color: var(--chrome-dim);
max-width: 320px;
}
.site-footer__col-title {
font-family: var(--font-body);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--ember);
margin-bottom: 24px;
}
.site-footer__list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.site-footer__link {
font-family: var(--font-body);
font-weight: 400;
font-size: 13px;
color: var(--chrome-warm);
transition: color 0.2s;
}
.site-footer__link:hover { color: var(--ember); }
.site-footer__bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 32px;
gap: 24px;
flex-wrap: wrap;
}
.site-footer__legal {
font-family: var(--font-body);
font-weight: 400;
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--chrome-dim);
}
.site-footer__legal-links { display: inline-flex; gap: 24px; }
@media (max-width: 900px) {
.site-footer { padding: 60px 20px 32px; }
.site-footer__top { grid-template-columns: 1fr; gap: 32px; padding-bottom: 40px; }
}
/* 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; }
}
</style>
</head>
<body>
<!-- 1. Site alert bar -->
<div class="alert-bar-creator">
<a class="alert-bar-creator__link" href="#about">
<span>Creator Takeover</span>
<span class="alert-bar-creator__sep">·</span>
<span>Lava Shea</span>
<span class="alert-bar-creator__sep">·</span>
<span>15% off with code LAVASHEA15</span>
<span class="alert-bar-creator__sep">·</span>
<span>Valid until 5 July</span>
<span class="alert-bar-creator__chevron">→</span>
</a>
</div>
<!-- 2. Site nav -->
<nav class="site-nav">
<div class="site-nav__inner">
<a class="site-nav__brand" href="/">ARTSABERS</a>
<ul class="site-nav__links">
<li><a class="site-nav__link" href="#">Lightsabers</a></li>
<li><a class="site-nav__link" href="#">Cosplay Helmets</a></li>
<li><a class="site-nav__link" href="#">Parts & Accessories</a></li>
<li><a class="site-nav__link" href="#">Offers</a></li>
<li><a class="site-nav__link" href="#">Journal</a></li>
</ul>
<div class="site-nav__utils">
<button class="site-nav__util-btn">Search</button>
<button class="site-nav__util-btn">Account</button>
<button class="site-nav__util-btn">Cart <span class="site-nav__cart-count">0</span></button>
</div>
</div>
</nav>
<!-- 3. Full-bleed atmospheric hero -->
<a id="tf-hero-campaign-1" data-tf-family="hero-campaign" style="display:contents"></a>
<section class="hero-creator-takeover">
<div class="hero-creator-takeover__inner">
<div class="hero-creator-takeover__left">
<span class="hero-creator-takeover__eyebrow">Discover the Creator Behind the Sabers</span>
<h1 class="hero-creator-takeover__title">Lava Shea<span class="hero-creator-takeover__title-dot">.</span></h1>
<p class="hero-creator-takeover__lede">Life-long Star Wars fan. 500,000+ community. This weekend, her picks.</p>
<div class="hero-creator-takeover__code-frame">
<span class="hero-creator-takeover__code-label">Discount code · Valid until 5 July</span>
<span class="hero-creator-takeover__code">LAVASHEA15</span>
</div>
<div class="hero-creator-takeover__cta-row">
<a class="btn-ember btn-ember--wide" href="#about">Meet the Creator ↓</a>
</div>
</div>
</div>
<span class="hero-creator-takeover__vertical">Weekend Takeover</span>
</section>
<!-- 4. Marquee band (first instance) -->
<a id="tf-other-1" data-tf-family="other" style="display:contents"></a>
<div class="marquee-band">
<div class="marquee-band__track">
<div class="marquee-band__group">
<span class="marquee-band__phrase">15% Off</span>
<span class="marquee-band__dot"></span>
<span class="marquee-band__phrase">ARTSABERS</span>
<span class="marquee-band__dot"></span>
<span class="marquee-band__phrase">Weekend Takeover</span>
<span class="marquee-band__dot"></span>
<span class="marquee-band__phrase">ARTSABERS</span>
<span class="marquee-band__dot"></span>
<span class="marquee-band__phrase">LAVASHEA15 for 15% Off</span>
<span class="marquee-band__dot"></span>
<span class="marquee-band__phrase">ARTSABERS</span>
<span class="marquee-band__dot"></span>
</div>
<div class="marquee-band__group" aria-hidden="true">
<span class="marquee-band__phrase">15% Off</span>
<span class="marquee-band__dot"></span>
<span class="marquee-band__phrase">ARTSABERS</span>
<span class="marquee-band__dot"></span>
<span class="marquee-band__phrase">Weekend Takeover</span>
<span class="marquee-band__dot"></span>
<span class="marquee-band__phrase">ARTSABERS</span>
<span class="marquee-band__dot"></span>
<span class="marquee-band__phrase">LAVASHEA15 for 15% Off</span>
<span class="marquee-band__dot"></span>
<span class="marquee-band__phrase">ARTSABERS</span>
<span class="marquee-band__dot"></span>
</div>
</div>
</div>
<!-- 5. About Me editorial split -->
<a id="tf-workshop-split-1" data-tf-family="workshop-split" style="display:contents"></a>
<section class="about-me-split" id="about">
<div class="about-me-split__inner">
<div class="about-me-split__left">
<div class="about-me-split__photo" style="background-image: url('https://camcom.dev/wp-content/uploads/sites/10/2026/06/70f87cc29f23055e9700f4ab529a38a6.jpg'); background-size: cover; background-position: center;"></div>
<span class="about-me-split__caption"><strong>Lauren</strong> · @lavashea · 500K+ Community</span>
<p class="about-me-split__descriptor">Learn how Lava Shea built her community through the Force.</p>
</div>
<div class="about-me-split__right">
<span class="about-me-split__eyebrow">About Me</span>
<div class="about-me-split__body">
<p class="about-me-split__para">Hello there, I am Lauren (Lava Shea). I am a life long Star Wars fan and I love to share my love for Star Wars with others. I enjoy spinning lightsabers and making fun videos. My saber collection is always growing as I look for fine additions to my collection.</p>
<p class="about-me-split__para">One of my favorite parts about posting on social media is all the cool people I get to meet and interact with.</p>
</div>
<span class="about-me-split__sub-eyebrow">What Does ARTSABERS Mean to You?</span>
<div class="about-me-split__body">
<p class="about-me-split__para">ARTSABERS is a community where I can express myself fully and share my love for Star Wars with others! They help me grow my saber collection and spinning abilities!</p>
</div>
<div class="about-me-split__footer-row">
<div class="about-me-split__stat">
<span class="about-me-split__stat-value">500K+</span>
<span class="about-me-split__stat-label">Community</span>
</div>
<a class="btn-ember" href="https://instagram.com/lavashea" target="_blank" rel="noopener">Follow Lava Shea ↗</a>
</div>
</div>
</div>
</section>
<!-- 6. Featured picks — creator's picks -->
<a id="tf-product-grid-1" data-tf-family="product-grid" style="display:contents"></a>
<section class="featured-picks">
<div class="featured-picks__inner">
<div class="featured-picks__header">
<div class="featured-picks__header-left">
<span class="featured-picks__eyebrow">Lava Shea's Picks</span>
<h2 class="featured-picks__title">Two sabers. One creator. 15% off.</h2>
</div>
<div class="featured-picks__stat">
<span>2 Sabers</span>
<span class="featured-picks__stat-sep">·</span>
<span>Code LAVASHEA15</span>
<span class="featured-picks__stat-sep">·</span>
<span>15% Off</span>
</div>
</div>
<div class="featured-picks__list">
<article class="featured-pick-card">
<span class="featured-pick-card__badge">15% Off · LAVASHEA15</span>
<div class="featured-pick-card__media">
<img class="featured-pick-card__img" src="https://camcom.dev/wp-content/uploads/sites/10/2026/06/4544dcf1abac3796bc53034083afdd60.jpg" alt="Emperor Palpatine Lightsaber">
</div>
<div class="featured-pick-card__body">
<span class="featured-pick-card__type-chip">Emperor Palpatine</span>
<h3 class="featured-pick-card__title">Elegant. Refined. Ruthless.</h3>
<p class="featured-pick-card__para">I have always loved Palpatine’s lightsaber because of how elegant it looks. Despite belonging to one of the most powerful Sith Lords in the galaxy, the hilt has a refined, almost regal appearance and it’s surprisingly easy to spin, making it enjoyable to wield as it is to display.</p>
<p class="featured-pick-card__para">Its polished chrome and gold hilt conceals lethal precision beneath a regal exterior, mirroring the Emperor’s mastery of manipulation and the dark arts.</p>
<a class="btn-ember featured-pick-card__cta" href="#">Shop Emperor Palpatine Saber →</a>
</div>
</article>
<article class="featured-pick-card">
<span class="featured-pick-card__badge">15% Off · LAVASHEA15</span>
<div class="featured-pick-card__media">
<img class="featured-pick-card__img" src="https://camcom.dev/wp-content/uploads/sites/10/2026/06/4544dcf1abac3796bc53034083afdd60.jpg" alt="Princess Leia Lightsaber">
</div>
<div class="featured-pick-card__body">
<span class="featured-pick-card__type-chip">Princess Leia</span>
<h3 class="featured-pick-card__title">Legacy. Grace. Untapped destiny.</h3>
<p class="featured-pick-card__para">Leia's lightsaber has always been one of my favorites. I love the design and how it subtly echoes elements of Obi-Wan Kenobi's iconic hilt while still feeling completely unique to her character.</p>
<p class="featured-pick-card__para">Graceful, refined, and steeped in legacy, the Princess Leia Lightsaber features an elegant silver and gold hilt with intricate detailing, this saber reflects Leia Organa's royal heritage and untapped Jedi destiny.</p>
<a class="btn-ember featured-pick-card__cta" href="#">Shop Princess Leia Saber →</a>
</div>
</article>
</div>
</div>
</section>
<!-- 7. Mid-page code CTA band (ember-ombre) -->
<a id="tf-inpage-cta-1" data-tf-family="inpage-cta" style="display:contents"></a>
<section class="code-cta-band-ombre">
<div class="code-cta-band-ombre__inner">
<h2 class="code-cta-band-ombre__title">15% OFF!</h2>
<p class="code-cta-band-ombre__sub">Valid until 5th July.</p>
<div class="code-cta-band-ombre__chip">Use code <strong>‘LAVASHEA15’</strong> at checkout</div>
<button class="code-cta-band-ombre__copy-btn">Copy code →</button>
</div>
</section>
<!-- 8. Marquee band (second instance) -->
<div class="marquee-band">
<div class="marquee-band__track">
<div class="marquee-band__group">
<span class="marquee-band__phrase">15% Off</span>
<span class="marquee-band__dot"></span>
<span class="marquee-band__phrase">ARTSABERS</span>
<span class="marquee-band__dot"></span>
<span class="marquee-band__phrase">Weekend Takeover</span>
<span class="marquee-band__dot"></span>
<span class="marquee-band__phrase">ARTSABERS</span>
<span class="marquee-band__dot"></span>
<span class="marquee-band__phrase">LAVASHEA15 for 15% Off</span>
<span class="marquee-band__dot"></span>
<span class="marquee-band__phrase">ARTSABERS</span>
<span class="marquee-band__dot"></span>
</div>
<div class="marquee-band__group" aria-hidden="true">
<span class="marquee-band__phrase">15% Off</span>
<span class="marquee-band__dot"></span>
<span class="marquee-band__phrase">ARTSABERS</span>
<span class="marquee-band__dot"></span>
<span class="marquee-band__phrase">Weekend Takeover</span>
<span class="marquee-band__dot"></span>
<span class="marquee-band__phrase">ARTSABERS</span>
<span class="marquee-band__dot"></span>
<span class="marquee-band__phrase">LAVASHEA15 for 15% Off</span>
<span class="marquee-band__dot"></span>
<span class="marquee-band__phrase">ARTSABERS</span>
<span class="marquee-band__dot"></span>
</div>
</div>
</div>
<!-- 9. Q&A Spotlight editorial split -->
<a id="tf-workshop-split-2" data-tf-family="workshop-split" style="display:contents"></a>
<section class="qa-spotlight-split">
<div class="qa-spotlight-split__inner">
<div class="qa-spotlight-split__photo" style="background-image: url('https://camcom.dev/wp-content/uploads/sites/10/2026/06/8b3c748cdbea33f14b43b5cac5fd9479.jpg'); background-size: cover; background-position: center;"></div>
<div class="qa-spotlight-split__body">
<span class="qa-spotlight-split__eyebrow">Question & Answer</span>
<h2 class="qa-spotlight-split__question">What's your earliest Star Wars memory?</h2>
<div class="qa-spotlight-split__answer">
<p class="qa-spotlight-split__para">My earliest Star Wars Memory is being told that Star Wars is only for boys. I remember being in elementary school and a boy had a Clone Wars Lunch Box and when I asked him about it, he told me it was only for boys. About a year later I watched Star Wars with my mom and dad for the first time and loved it!</p>
<p class="qa-spotlight-split__para qa-spotlight-split__para--italic">After that I could confidently say Star Wars is not just for boys.</p>
</div>
</div>
</div>
</section>
<!-- 10. Q&A grid — 2x2 -->
<a id="tf-other-2" data-tf-family="other" style="display:contents"></a>
<section class="qa-grid">
<div class="qa-grid__inner">
<div class="qa-grid__cell">
<span class="qa-grid__question">Favourite Character?</span>
<p class="qa-grid__answer">Ahsoka Tano has always been my favorite Star Wars character. I gravitated towards her when I first got into Star Wars because she was one of the first female characters I saw with a lightsaber! After watching her in the Clone Wars I fell in love with her fighting style using two blades favoring lightsaber form IV (Ataru). I also relate to Ahsoka because of how deeply she cares about her friends.</p>
</div>
<div class="qa-grid__cell">
<span class="qa-grid__question">Lightsaber of Choice?</span>
<p class="qa-grid__answer">I would go with Princess Leia's saber. I love the design of her saber with the mix of silver and rose gold. Her saber resembles Obi-Wans but with a bit of a thicker neck making it easier to spin in my opinion. My kyber color would be blue. Blue is my favorite color and I love how it looks paired with Leia's saber. I would then choose form IV (Ataru) as it favors more quick acrobatic movements.</p>
</div>
<div class="qa-grid__cell">
<span class="qa-grid__question">Light Side or Dark Side?</span>
<p class="qa-grid__answer">This question I toggle with a lot, which may put me in more ‘grey’ area, however I gravitate more to the light side favoring the light side characters and how they compose themselves. Additionally, my favorite lightsaber colors are blue and green which would put me on the light side!</p>
</div>
<div class="qa-grid__cell">
<span class="qa-grid__question">Sum Up What Star Wars Means to You</span>
<p class="qa-grid__answer">Being a Star Wars fan has allowed me to be a part of a community where I get to express myself fully and my love for a galaxy far far away.</p>
</div>
</div>
</section>
<!-- 11. Follow Now — Reels + social chip strip -->
<section class="follow-now-band">
<div class="follow-now-band__inner">
<div class="follow-now-band__header">
<span class="follow-now-band__eyebrow">Want to See More of Lava Shea?</span>
<h2 class="follow-now-band__title">Follow now<span class="follow-now-band__title-dot">.</span></h2>
</div>
<a id="tf-ugc-gallery-1" data-tf-family="ugc-gallery" style="display:contents"></a>
<div class="follow-now-band__reels">
<div class="reel-preview reel-preview--a" style="background-image: url('https://camcom.dev/wp-content/uploads/sites/10/2026/06/6f0320e4a3df77a3b51e2d37a15e6eae-6.jpg'); background-size: cover; background-position: center;">
<span class="reel-preview__handle">TikTok</span>
<div class="reel-preview__play"></div>
<span class="reel-preview__caption">Anakin Skywalker Character Breakdown</span>
</div>
<div class="reel-preview reel-preview--b" style="background-image: url('https://camcom.dev/wp-content/uploads/sites/10/2026/06/8b3c748cdbea33f14b43b5cac5fd9479.jpg'); background-size: cover; background-position: center;">
<span class="reel-preview__handle">Reel</span>
<div class="reel-preview__play"></div>
<span class="reel-preview__caption">Weekend Takeover — spin sabers with me</span>
</div>
<div class="reel-preview reel-preview--c" style="background-image: url('https://camcom.dev/wp-content/uploads/sites/10/2026/06/70f87cc29f23055e9700f4ab529a38a6.jpg'); background-size: cover; background-position: center;">
<span class="reel-preview__handle">Short</span>
<div class="reel-preview__play"></div>
<span class="reel-preview__caption">My favourite ARTSABERS lightsabers</span>
</div>
</div>
<a id="tf-other-3" data-tf-family="other" style="display:contents"></a>
<div class="follow-now-band__chips">
<a class="follow-now-band__chip" href="https://tiktok.com/@lavashea" target="_blank" rel="noopener">
<span class="follow-now-band__chip-icon">TT</span>
<span class="follow-now-band__chip-label">TikTok</span>
<span class="follow-now-band__chip-handle">@lavashea</span>
</a>
<a class="follow-now-band__chip" href="https://instagram.com/lavashea" target="_blank" rel="noopener">
<span class="follow-now-band__chip-icon">IG</span>
<span class="follow-now-band__chip-label">Instagram</span>
<span class="follow-now-band__chip-handle">@lavashea</span>
</a>
<a class="follow-now-band__chip" href="https://youtube.com/@lavashea" target="_blank" rel="noopener">
<span class="follow-now-band__chip-icon">YT</span>
<span class="follow-now-band__chip-label">YouTube</span>
<span class="follow-now-band__chip-handle">@lavashea</span>
</a>
<a class="follow-now-band__chip" href="https://twitter.com/lavashea" target="_blank" rel="noopener">
<span class="follow-now-band__chip-icon">TW</span>
<span class="follow-now-band__chip-label">Twitter</span>
<span class="follow-now-band__chip-handle">@lavashea</span>
</a>
</div>
</div>
</section>
<!-- 12. Bottom code CTA band -->
<a id="tf-sale-strip-1" data-tf-family="sale-strip" style="display:contents"></a>
<section class="bottom-code-band">
<div class="bottom-code-band__inner">
<div class="bottom-code-band__col">
<span class="bottom-code-band__eyebrow">Enjoy 15% Off</span>
<span class="bottom-code-band__chip">LAVASHEA15</span>
</div>
<div class="bottom-code-band__col bottom-code-band__col--right">
<span class="bottom-code-band__eyebrow">Valid Until</span>
<span class="bottom-code-band__value">5th July</span>
</div>
</div>
</section>
<!-- 13. Newsletter capture (MAS73 canonical) -->
<a id="tf-newsletter-signup-1" data-tf-family="newsletter-signup" style="display:contents"></a>
<section class="capture">
<div class="container">
<div class="capture__inner">
<div class="capture__copy">
<div class="capture__eyebrow">◆ Join the comms</div>
<h2 class="capture__title">From factory floor<br>to your inbox.</h2>
<p class="capture__sub">Get 10% off your first saber, plus early access to new drops, ARTSABERS Exclusives, and the workshop pieces that never make it to the public catalogue.</p>
</div>
<div class="capture__form">
<span class="capture__form-lbl">Comms · Signal In</span>
<input class="capture__form-input" type="email" placeholder="your@email.com">
<button class="capture__form-cta">Open the signal →</button>
<span class="capture__form-fine">One drop a week. Unsubscribe with one click. We never share your details.</span>
</div>
</div>
</div>
</section>
<!-- 14. Site footer -->
<footer class="site-footer">
<div class="site-footer__inner">
<div class="site-footer__top">
<div>
<div class="site-footer__brand">ARTSABERS</div>
<p class="site-footer__tagline">Hundreds of sabers. One trusted retailer. From factory floor to your door in 7-10 days, backed by real fan-to-fan support.</p>
</div>
<div>
<div class="site-footer__col-title">Shop</div>
<ul class="site-footer__list">
<li><a class="site-footer__link" href="#">Lightsabers</a></li>
<li><a class="site-footer__link" href="#">Cosplay Helmets</a></li>
<li><a class="site-footer__link" href="#">Parts & Accessories</a></li>
<li><a class="site-footer__link" href="#">Bundles</a></li>
<li><a class="site-footer__link" href="#">Under $100</a></li>
</ul>
</div>
<div>
<div class="site-footer__col-title">Support</div>
<ul class="site-footer__list">
<li><a class="site-footer__link" href="#">Contact</a></li>
<li><a class="site-footer__link" href="#">Shipping & Timing</a></li>
<li><a class="site-footer__link" href="#">Returns & 30-Day Guarantee</a></li>
<li><a class="site-footer__link" href="#">FAQ</a></li>
<li><a class="site-footer__link" href="#">Track My Order</a></li>
</ul>
</div>
<div>
<div class="site-footer__col-title">The Galaxy</div>
<ul class="site-footer__list">
<li><a class="site-footer__link" href="#">Journal</a></li>
<li><a class="site-footer__link" href="#">Creator Takeovers</a></li>
<li><a class="site-footer__link" href="#">Instagram</a></li>
<li><a class="site-footer__link" href="#">TikTok</a></li>
<li><a class="site-footer__link" href="#">YouTube</a></li>
</ul>
</div>
</div>
<div class="site-footer__bottom">
<span class="site-footer__legal">© 2026 ARTSABERS · A Nerdworks Brand</span>
<span class="site-footer__legal-links">
<a class="site-footer__link" href="#">Privacy</a>
<a class="site-footer__link" href="#">Terms</a>
<a class="site-footer__link" href="#">Cookies</a>
</span>
</div>
</div>
</footer>
</body>
</html>