/wire-template.
<!DOCTYPE html>
<?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gift Cards — 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=Orbitron:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700&family=Onest:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>/* ============================================================
KYBER HULL — TOKENS
============================================================ */
:root {
/* Ember ombre — accents only */
--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 — chromatic identifiers */
--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 / whites */
--chrome-highlight: #FAFAFA;
--chrome-glint: #E8E4DD;
--chrome-warm: #F5F0E8;
--chrome-dim: #B8B0A6;
/* Semantic surface tokens (MAS82) — use for backgrounds */
--bg-card: #131313;
--bg-card-lift: #1A1A1A;
--bg-card-deep: #0F0F0F;
--bg-section: #141414;
--bg-section-warm: #161412;
--bg-section-deep: #0A0A0A;
/* Text roles */
--text-heading: var(--chrome-highlight);
--text-primary: var(--chrome-warm);
--text-dim: var(--chrome-dim);
--text-on-ember: var(--on-primary-fixed);
/* Fonts */
--font-title: 'Orbitron', system-ui, sans-serif; /* Titles — no italic. Locked 2026-07-14. */
--font-display: 'Orbitron', system-ui, sans-serif; /* Chrome, labels, eyebrows, small-caps type */
--font-body: 'Onest', system-ui, sans-serif;
/* Shadows */
--panel-lift: inset 0 1px 0 rgba(250,250,250,0.08), 0 8px 24px -8px rgba(0,0,0,0.9);
--panel-lift-hover: inset 0 1px 0 rgba(250,250,250,0.15), 0 16px 40px -8px rgba(0,0,0,0.95);
--ember-glow-sm: 0 0 16px rgba(255,122,46,0.35);
--ember-glow-md: 0 0 28px rgba(255,122,46,0.55);
--ember-hot-rim: inset 0 0 0 1px rgba(255,122,46,0.6), 0 0 24px rgba(255,122,46,0.5);
--chrome-top: inset 0 1px 0 rgba(250,250,250,0.30);
--chrome-top-soft: inset 0 1px 0 rgba(250,250,250,0.18);
}
/* ============================================================
BASE
============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: var(--carbon); color: var(--text-primary); font-family: var(--font-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; }
/* ============================================================
SITE NAV — MAS64 / MAS68 verbatim analogue
============================================================ */
.site-nav { background: var(--carbon); position: relative; z-index: 40; box-shadow: var(--chrome-top-soft); }
.site-nav__inner { max-width: 1440px; margin: 0 auto; padding: 22px 48px; display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.site-nav__brand { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: 0.22em; color: var(--chrome-highlight); text-transform: uppercase; }
.site-nav__brand span { color: var(--ember); }
.site-nav__links { display: flex; align-items: center; gap: 32px; flex: 1; justify-content: center; }
.site-nav__link { font-family: var(--font-display); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-primary); padding: 8px 0; position: relative; transition: color .18s; }
.site-nav__link:hover { color: var(--ember); }
.site-nav__link--active { color: var(--ember); }
.site-nav__link--active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--ember); box-shadow: var(--ember-glow-sm); }
.site-nav__actions { display: flex; align-items: center; gap: 14px; }
.site-nav__icon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; color: var(--chrome-warm); border: 1px solid rgba(62,62,62,0.4); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--font-display); transition: all .18s; }
.site-nav__icon:hover { color: var(--ember); border-color: rgba(255,122,46,0.5); box-shadow: var(--ember-glow-sm); }
.site-nav__cart { padding: 0 16px; width: auto; }
.site-nav__cart-count { color: var(--ember); margin-left: 8px; font-weight: 600; }
/* Utility bar above nav */
.util-bar { background: var(--void); border-bottom: 1px solid rgba(46,46,46,0.5); }
.util-bar__inner { max-width: 1440px; margin: 0 auto; padding: 8px 48px; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-display); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
.util-bar__accent { color: var(--ember); }
/* ============================================================
PANEL SEAM — reusable divider (sparingly used)
============================================================ */
.panel-seam { position: relative; height: 1px; background: rgba(255,122,46,0.7); box-shadow: 0 0 24px 4px rgba(255,122,46,0.35), 0 -1px 0 rgba(232,93,24,0.4); }
.panel-seam--soft { background: rgba(255,122,46,0.4); box-shadow: 0 0 12px 2px rgba(255,122,46,0.20); }
.panel-seam-glow-band { height: 40px; background: radial-gradient(ellipse at center top, rgba(255,122,46,0.28) 0%, rgba(255,122,46,0) 70%); pointer-events: none; }
/* ============================================================
HERO — compact editorial, ~360px
============================================================ */
.hero-compact { background: var(--carbon); position: relative; overflow: hidden; min-height: 360px; display: flex; align-items: center; box-shadow: var(--chrome-top); }
.hero-compact__pattern { /* Hull-plate atmospheric background per feedback_artsabers_seam_placement.md — image carries the ember seam glow (seam physics baked into pixels, no CSS gradient to align). Dark overlay dials the ember to subtle so it doesn't compete with the H1. */
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(6,6,6,0.68) 0%, rgba(6,6,6,0.68) 100%),
url('https://camcom.dev/generated_imgs/edited-2026-07-14T21-40-58-649Z-bmm57h.jpg') center center / cover no-repeat;
}
.hero-compact__pattern::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--carbon) 0%, transparent 30%, transparent 70%, var(--carbon) 100%); }
.hero-compact__ember-bleed { display: none; /* Retired — hull-plate image (per feedback_artsabers_seam_placement.md) now carries the atmospheric ember. The bottom-left bloom competed with the image's own ember zone. */ }
.hero-compact__inner { max-width: 1440px; margin: 0 auto; padding: 48px 48px 56px; position: relative; z-index: 2; width: 100%; }
.hero-compact__index { font-family: var(--font-display); font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 24px; }
.hero-compact__index span { color: var(--ember); }
.hero-compact__eyebrow { font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ember); margin-bottom: 20px; }
.hero-compact__title { font-family: var(--font-title); font-size: 56px; font-weight: 600; line-height: 1.06; letter-spacing: 0.8px; color: var(--text-heading); margin-bottom: 22px; max-width: 1000px; }
.hero-compact__sub { font-family: var(--font-body); font-size: 17px; line-height: 1.6; color: var(--text-primary); max-width: 720px; }
/* ============================================================
SECTION SHELL utility
============================================================ */
.section { padding: 96px 48px; position: relative; }
.section__inner { max-width: 1440px; margin: 0 auto; position: relative; }
.section-eyebrow { font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ember); margin-bottom: 20px; }
.section-title { font-family: var(--font-title); font-size: 36px; font-weight: 600; line-height: 1.1; letter-spacing: 0.8px; color: var(--text-heading); margin-bottom: 24px; }
/* ============================================================
CONFIGURATOR — the primary conversion
============================================================ */
.configurator { background: var(--bg-section-warm); position: relative; overflow: hidden; }
.configurator::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(255,122,46,0.6); box-shadow: 0 0 20px rgba(255,122,46,0.35); }
.configurator::after { content: ''; position: absolute; top: -60px; left: 15%; right: 15%; height: 200px; background: radial-gradient(ellipse at center, rgba(255,122,46,0.2) 0%, transparent 65%); pointer-events: none; z-index: 1; }
.configurator__inner { max-width: 1440px; margin: 0 auto; padding: 96px 48px 112px; position: relative; z-index: 2; }
.configurator__eyebrow { font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ember); margin-bottom: 16px; }
.configurator__title { font-family: var(--font-title); font-size: 36px; font-weight: 600; line-height: 1.1; letter-spacing: 0.8px; color: var(--text-heading); margin-bottom: 12px; }
.configurator__sub { font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: var(--text-primary); margin-bottom: 56px; max-width: 720px; }
.configurator__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
/* Left column — preview + amount selector */
.gift-preview-col { display: flex; flex-direction: column; gap: 40px; }
.gift-card-preview { position: relative; background: var(--bg-card-deep); padding: 44px 40px 40px; box-shadow: var(--panel-lift), 0 0 40px rgba(255,122,46,0.12); border: 1px solid rgba(255,122,46,0.35); aspect-ratio: 440 / 270; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.gift-card-preview::before { content: ''; position: absolute; inset: 0; background-image:
linear-gradient(90deg, transparent 0%, transparent 49.5%, rgba(255,122,46,0.35) 50%, transparent 50.5%, transparent 100%),
repeating-linear-gradient(90deg, rgba(54,54,54,0.15) 0 1px, transparent 1px 80px);
pointer-events: none;
}
.gift-card-preview::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(250,250,250,0.35); }
.gift-card-preview__brand { font-family: var(--font-display); font-weight: 700; font-size: 30px; letter-spacing: 0.24em; color: var(--chrome-highlight); text-transform: uppercase; position: relative; z-index: 2; }
.gift-card-preview__brand span { color: var(--ember); }
.gift-card-preview__meta { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; }
.gift-card-preview__label { font-family: var(--font-display); font-size: 10px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px; }
.gift-card-preview__amount { font-family: var(--font-display); font-size: 52px; font-weight: 600; letter-spacing: -0.02em; color: var(--ember); font-variant-numeric: tabular-nums; line-height: 1; text-shadow: 0 0 24px rgba(255,122,46,0.4); }
.gift-card-preview__to { text-align: right; }
.gift-card-preview__to-name { font-family: var(--font-body); font-size: 16px; color: var(--chrome-warm); font-weight: 500; }
.gift-card-preview__ember-corner { position: absolute; top: 0; right: 0; width: 60px; height: 60px; background: radial-gradient(circle at top right, rgba(255,122,46,0.4) 0%, transparent 70%); pointer-events: none; }
.amount-selector { display: flex; flex-direction: column; gap: 24px; }
.amount-selector__label { font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-dim); }
.amount-chips { display: flex; gap: 12px; flex-wrap: wrap; }
.amount-chip { padding: 16px 22px; font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: 0.04em; color: var(--chrome-warm); background: var(--bg-card); border: 1px solid rgba(255,122,46,0.35); font-variant-numeric: tabular-nums; transition: all .18s; box-shadow: var(--chrome-top-soft); }
.amount-chip:hover { border-color: var(--ember); color: var(--ember); box-shadow: var(--chrome-top-soft), var(--ember-glow-sm); }
.amount-chip--selected { background: linear-gradient(180deg, var(--ember-glow) 0%, var(--ember) 45%, var(--ember-deep) 100%); color: var(--on-primary-fixed); border-color: var(--ember); box-shadow: var(--chrome-top-soft), var(--ember-glow-md); }
.amount-chip--selected:hover { color: var(--on-primary-fixed); }
.custom-amount { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.custom-amount__label { font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-dim); }
.custom-amount__field { display: flex; align-items: stretch; border: 1px solid var(--hull-edge); background: var(--bg-card); }
.custom-amount__prefix { padding: 14px 18px; font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--ember); background: var(--bg-card-deep); border-right: 1px solid var(--hull-edge); font-variant-numeric: tabular-nums; }
.custom-amount__input { flex: 1; background: transparent; border: none; outline: none; padding: 14px 18px; font-family: var(--font-display); font-size: 18px; font-weight: 500; color: var(--chrome-warm); font-variant-numeric: tabular-nums; }
.custom-amount__input::placeholder { color: var(--text-dim); }
.custom-amount__field:focus-within { border-color: var(--ember); box-shadow: var(--ember-glow-sm); }
/* Right column — personalisation form (MAS52 pattern) */
.personalise-form { border: 1px solid var(--hull-edge); background: var(--bg-card); padding: 32px 40px 40px; position: relative; box-shadow: var(--panel-lift); }
.personalise-form::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(250,250,250,0.15); }
.personalise-form__legend { display: inline-block; padding: 0 12px; font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ember); background: var(--bg-section-warm); position: relative; top: -44px; margin-bottom: -20px; left: -12px; }
.form-field { display: flex; flex-direction: column; margin-bottom: 24px; }
.form-field:last-of-type { margin-bottom: 32px; }
.form-field__label { font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--chrome-warm); margin-bottom: 10px; }
.form-field__label--required::after { content: ' *'; color: var(--ember); }
.form-field__optional { font-family: var(--font-display); font-size: 10px; letter-spacing: 0.18em; color: var(--text-dim); margin-left: 8px; text-transform: uppercase; font-weight: 400; }
.form-field__input, .form-field__textarea { background: var(--bg-card-deep); border: 1px solid var(--hull-edge); padding: 14px 16px; font-family: var(--font-body); font-size: 16px; color: var(--chrome-warm); outline: none; transition: all .18s; width: 100%; }
.form-field__input::placeholder, .form-field__textarea::placeholder { color: var(--text-dim); }
.form-field__input:focus, .form-field__textarea:focus { border-color: var(--ember); box-shadow: var(--ember-glow-sm); }
.form-field__textarea { min-height: 90px; resize: vertical; font-family: var(--font-body); }
.form-field__help { font-family: var(--font-body); font-size: 13px; color: var(--text-dim); margin-top: 8px; line-height: 1.5; }
.cta-primary { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 20px 32px; font-family: var(--font-display); font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-primary-fixed); background: linear-gradient(180deg, var(--ember-glow) 0%, var(--ember) 45%, var(--ember-deep) 100%); box-shadow: var(--ember-glow-sm), inset 0 1px 0 rgba(255,255,255,0.35); transition: all .18s; width: 100%; }
.cta-primary:hover { box-shadow: var(--ember-glow-md), inset 0 1px 0 rgba(255,255,255,0.5); transform: translateY(-1px); }
.cta-primary__arrow { font-size: 18px; }
/* ============================================================
STEPS EDITORIAL — how it works, 3 stages
============================================================ */
.steps-editorial { background: var(--carbon); position: relative; }
.steps-editorial::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(255,122,46,0.5); box-shadow: 0 0 16px rgba(255,122,46,0.25); }
.steps-editorial__inner { max-width: 1440px; margin: 0 auto; padding: 96px 48px; }
.steps-editorial__header { max-width: 720px; margin-bottom: 72px; }
.steps-editorial__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 48px; position: relative; }
.step { position: relative; padding-top: 24px; }
.step::before { content: ''; position: absolute; top: 0; left: 0; width: 80px; height: 1px; background: var(--ember); box-shadow: 0 0 12px rgba(255,122,46,0.4); }
.step__marker { font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ember); margin-bottom: 20px; display: flex; align-items: baseline; gap: 12px; }
.step__num { font-size: 52px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; color: var(--ember); text-shadow: 0 0 16px rgba(255,122,46,0.3); font-variant-numeric: tabular-nums; }
.step__label { font-size: 11px; letter-spacing: 0.22em; }
.step__title { font-family: var(--font-display); font-size: 24px; font-weight: 500; letter-spacing: 0.8px; color: var(--text-heading); margin-bottom: 16px; line-height: 1.15; }
.step__body { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--text-primary); }
/* ============================================================
VALUE PROPS — 3-cell reinforcement band
============================================================ */
.value-band { background: var(--bg-section-warm); position: relative; }
.value-band::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(255,122,46,0.55); box-shadow: 0 0 16px rgba(255,122,46,0.3); }
.value-band__inner { max-width: 1440px; margin: 0 auto; padding: 64px 48px; }
.value-band__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 48px; }
.value-cell { display: flex; flex-direction: column; gap: 16px; position: relative; padding-left: 24px; }
.value-cell::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(180deg, transparent 0%, var(--ember) 20%, var(--ember) 80%, transparent 100%); box-shadow: 0 0 8px rgba(255,122,46,0.35); }
.value-cell__glyph { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; color: var(--ember); font-family: var(--font-display); font-weight: 600; font-size: 20px; }
.value-cell__glyph svg { width: 100%; height: 100%; }
.value-cell__title { font-family: var(--font-display); font-size: 20px; font-weight: 500; letter-spacing: 0.8px; color: var(--text-heading); line-height: 1.2; }
.value-cell__body { font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: var(--text-primary); }
/* ============================================================
FAQ ACCORDION — MAS71 pattern analogue
============================================================ */
.faq { background: var(--carbon); position: relative; }
.faq::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(255,122,46,0.5); box-shadow: 0 0 16px rgba(255,122,46,0.28); }
.faq__inner { max-width: 1080px; margin: 0 auto; padding: 96px 48px; }
.faq__header { max-width: 720px; margin-bottom: 56px; }
.faq__title { font-family: var(--font-title); font-size: 32px; font-weight: 600; line-height: 1.1; letter-spacing: 0.8px; color: var(--text-heading); }
.faq__list { display: flex; flex-direction: column; }
.faq-item { border-top: 1px solid rgba(54,54,54,0.6); }
.faq-item:last-child { border-bottom: 1px solid rgba(54,54,54,0.6); }
.faq-item__toggle { width: 100%; padding: 26px 24px; display: flex; align-items: center; justify-content: space-between; gap: 32px; text-align: left; transition: background .18s; }
.faq-item__toggle:hover { background: rgba(255,122,46,0.04); }
.faq-item__q { font-family: var(--font-display); font-size: 18px; font-weight: 500; color: var(--text-heading); line-height: 1.35; letter-spacing: 0.8px; }
.faq-item__chevron { flex-shrink: 0; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; color: var(--ember); font-family: var(--font-display); font-size: 20px; font-weight: 400; transition: transform .18s; }
.faq-item--open .faq-item__chevron { transform: rotate(45deg); }
.faq-item__panel { display: none; padding: 0 24px 32px; }
.faq-item--open .faq-item__panel { display: block; }
.faq-item__a { font-family: var(--font-body); font-size: 16px; line-height: 1.65; color: var(--text-primary); max-width: 800px; }
/* ============================================================
TERMS SUMMARY — inline note
============================================================ */
.terms-note { background: var(--carbon); position: relative; }
.terms-note::before { content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 1px; background: rgba(255,122,46,0.35); }
.terms-note__inner { max-width: 800px; margin: 0 auto; padding: 44px 48px; text-align: center; }
.terms-note__text { font-family: var(--font-body); font-size: 13px; line-height: 1.65; color: var(--text-dim); }
.terms-note__text a { color: var(--ember); text-decoration: underline; text-decoration-color: rgba(255,122,46,0.35); text-underline-offset: 3px; transition: text-decoration-color .18s; }
.terms-note__text a:hover { text-decoration-color: var(--ember); }
/* ============================================================
NEWSLETTER CAPTURE — MAS73 canonical analogue
Full orange ombre band — biggest ember moment on page
============================================================ */
.newsletter { background: linear-gradient(180deg, var(--ember-glow) 0%, var(--ember) 40%, var(--ember-forge) 100%); position: relative; padding: 88px 48px; }
.newsletter::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(255,255,255,0.4); }
.newsletter__inner { max-width: 960px; margin: 0 auto; text-align: center; position: relative; z-index: 2; }
.newsletter__eyebrow { font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--on-primary-fixed); margin-bottom: 20px; opacity: 0.75; }
.newsletter__title { font-family: var(--font-title); font-size: 40px; font-weight: 600; line-height: 1.1; letter-spacing: 0.8px; color: var(--on-primary-fixed); margin-bottom: 16px; }
.newsletter__sub { font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: var(--ember-scar); margin-bottom: 40px; max-width: 640px; margin-left: auto; margin-right: auto; }
.newsletter__form { display: flex; gap: 12px; max-width: 560px; margin: 0 auto; }
.newsletter__input { flex: 1; background: transparent; border: none; border-bottom: 1px solid rgba(42,8,0,0.55); padding: 14px 4px; font-family: var(--font-body); font-size: 16px; color: var(--on-primary-fixed); outline: none; transition: border-color .18s; }
.newsletter__input::placeholder { color: rgba(42,8,0,0.55); }
.newsletter__input:focus { border-bottom-color: var(--on-primary-fixed); }
.newsletter__cta { padding: 14px 28px; font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-primary-fixed); background: transparent; border: 1px solid var(--on-primary-fixed); transition: all .18s; }
.newsletter__cta:hover { background: var(--on-primary-fixed); color: var(--ember-glow); }
/* ============================================================
SITE FOOTER — MAS64 / MAS68 analogue
============================================================ */
.site-footer { background: var(--carbon); position: relative; padding: 88px 48px 40px; }
.site-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(255,122,46,0.5); box-shadow: 0 0 20px rgba(255,122,46,0.28); }
.site-footer__inner { max-width: 1440px; margin: 0 auto; }
.site-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 64px; }
.site-footer__brand-col { display: flex; flex-direction: column; gap: 20px; }
.site-footer__brand { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: 0.22em; color: var(--chrome-highlight); text-transform: uppercase; }
.site-footer__brand span { color: var(--ember); }
.site-footer__tagline { font-family: var(--font-body); font-size: 14px; color: var(--text-primary); font-style: italic; line-height: 1.55; max-width: 280px; }
.site-footer__socials { display: flex; gap: 12px; margin-top: 8px; }
.site-footer__social { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(54,54,54,0.6); color: var(--chrome-dim); font-family: var(--font-display); font-size: 12px; font-weight: 600; transition: all .18s; }
.site-footer__social:hover { color: var(--ember); border-color: var(--ember); box-shadow: var(--ember-glow-sm); }
.site-footer__col-title { font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: var(--chrome-warm); margin-bottom: 20px; }
.site-footer__links { display: flex; flex-direction: column; gap: 12px; }
.site-footer__link { font-family: var(--font-body); font-size: 14px; color: var(--text-dim); transition: color .18s; }
.site-footer__link:hover { color: var(--ember); }
.site-footer__bottom { padding-top: 32px; border-top: 1px solid rgba(46,46,46,0.5); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.site-footer__copy { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
.site-footer__legal-links { display: flex; gap: 24px; }
.site-footer__legal-link { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); transition: color .18s; }
.site-footer__legal-link:hover { color: var(--ember); }
/* ============================================================
RESPONSIVE — mobile at ~390px
============================================================ */
@media (max-width: 900px) {
.util-bar__inner { padding: 8px 20px; font-size: 10px; gap: 12px; }
.util-bar__inner span:nth-child(2) { display: none; }
.site-nav__inner { padding: 18px 20px; gap: 20px; }
.site-nav__links { display: none; }
.site-nav__brand { font-size: 16px; letter-spacing: 0.18em; }
.hero-compact { min-height: 320px; }
.hero-compact__inner { padding: 40px 20px 48px; }
.hero-compact__title { font-size: 40px; letter-spacing: 0.8px; }
.hero-compact__sub { font-size: 16px; }
.section { padding: 64px 20px; }
.configurator__inner { padding: 64px 20px 72px; }
.configurator__title { font-size: 32px; letter-spacing: 0.8px; }
.configurator__grid { grid-template-columns: 1fr; gap: 40px; }
.gift-card-preview { padding: 28px 24px 24px; }
.gift-card-preview__brand { font-size: 22px; }
.gift-card-preview__amount { font-size: 40px; }
.amount-chip { padding: 12px 16px; font-size: 16px; }
.personalise-form { padding: 28px 24px 32px; }
.personalise-form__legend { top: -40px; }
.steps-editorial__inner { padding: 64px 20px; }
.steps-editorial__grid { grid-template-columns: 1fr; gap: 48px; }
.value-band__inner { padding: 48px 20px; }
.value-band__grid { grid-template-columns: 1fr; gap: 32px; }
.faq__inner { padding: 64px 20px; }
.faq__title { font-size: 30px; letter-spacing: 0.8px; }
.faq-item__toggle { padding: 22px 12px; gap: 20px; }
.faq-item__q { font-size: 16px; }
.faq-item__panel { padding: 0 12px 26px; }
.terms-note__inner { padding: 36px 20px; }
.newsletter { padding: 64px 20px; }
.newsletter__title { font-size: 32px; letter-spacing: 0.8px; }
.newsletter__form { flex-direction: column; gap: 16px; }
.newsletter__cta { width: 100%; padding: 16px 20px; }
.site-footer { padding: 64px 20px 32px; }
.site-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 48px; }
.site-footer__brand-col { grid-column: 1 / -1; }
.site-footer__bottom { justify-content: center; text-align: center; }
}
/* 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>
<!-- ============================================================
SECTION 1 — Site nav (MAS64 / MAS68)
============================================================ -->
<div class="util-bar" role="complementary">
<div class="util-bar__inner">
<span><span class="util-bar__accent">Ships in 7-10 days</span> · Factory floor to your door</span>
<span>Real customer service · 24-hour response</span>
<span>USD · <span class="util-bar__accent">Free tracking</span></span>
</div>
</div>
<nav class="site-nav">
<div class="site-nav__inner">
<a href="/" class="site-nav__brand">ART<span>/</span>SABERS</a>
<div class="site-nav__links">
<a href="/lightsabers/" class="site-nav__link">Lightsabers</a>
<a href="/characters/" class="site-nav__link">Characters</a>
<a href="/helmets/" class="site-nav__link">Helmets</a>
<a href="/parts/" class="site-nav__link">Parts & Accessories</a>
<a href="/gift-cards/" class="site-nav__link site-nav__link--active">Gift Cards</a>
<a href="/support/" class="site-nav__link">Support</a>
</div>
<div class="site-nav__actions">
<a href="/search/" class="site-nav__icon" aria-label="Search">Q</a>
<a href="/account/" class="site-nav__icon" aria-label="Account">A</a>
<a href="/cart/" class="site-nav__icon site-nav__cart" aria-label="Cart">Cart <span class="site-nav__cart-count">0</span></a>
</div>
</div>
</nav>
<!-- ============================================================
SECTION 2 — Compact editorial hero
============================================================ -->
<a id="tf-hero-editorial-1" data-tf-family="hero-editorial" style="display:contents"></a>
<header class="hero-compact">
<div class="hero-compact__pattern" aria-hidden="true"></div>
<div class="hero-compact__ember-bleed" aria-hidden="true"></div>
<div class="hero-compact__inner">
<div class="hero-compact__index"><span>07</span> · Gift Cards</div>
<div class="hero-compact__eyebrow">Gift Cards · Digital Delivery</div>
<h1 class="hero-compact__title">Let them pick the hilt.</h1>
<p class="hero-compact__sub">The person you're buying for knows what they want. We just make it possible for them to get it. Digital gift cards — sent by email, no plastic, no shipping delay.</p>
</div>
</header>
<!-- ============================================================
SECTION 3 — Gift card configurator (primary conversion)
============================================================ -->
<a id="tf-form-1" data-tf-family="form" style="display:contents"></a>
<section class="configurator" id="configure">
<div class="configurator__inner">
<div class="configurator__eyebrow">Configure Your Gift</div>
<h2 class="configurator__title">Pick the amount. Write the note.</h2>
<p class="configurator__sub">The card and preview update as you go. When it's right, send it — instantly, or scheduled for the day they'll need it most.</p>
<div class="configurator__grid">
<!-- Left column: preview + amount selector -->
<div class="gift-preview-col">
<div class="gift-card-preview" role="img" aria-label="Gift card preview">
<div class="gift-card-preview__ember-corner" aria-hidden="true"></div>
<div class="gift-card-preview__brand">ART<span>/</span>SABERS</div>
<div class="gift-card-preview__meta">
<div>
<div class="gift-card-preview__label">Amount</div>
<div class="gift-card-preview__amount">$100</div>
</div>
<div class="gift-card-preview__to">
<div class="gift-card-preview__label">To</div>
<div class="gift-card-preview__to-name">Kai Reyes</div>
</div>
</div>
</div>
<div class="amount-selector">
<div class="amount-selector__label">Choose an amount</div>
<div class="amount-chips" role="radiogroup" aria-label="Gift card amount">
<button type="button" class="amount-chip" role="radio" aria-checked="false">$25</button>
<button type="button" class="amount-chip" role="radio" aria-checked="false">$50</button>
<button type="button" class="amount-chip amount-chip--selected" role="radio" aria-checked="true">$100</button>
<button type="button" class="amount-chip" role="radio" aria-checked="false">$250</button>
<button type="button" class="amount-chip" role="radio" aria-checked="false">$500</button>
</div>
<div class="custom-amount">
<label class="custom-amount__label" for="custom-amt">Or enter custom amount</label>
<div class="custom-amount__field">
<span class="custom-amount__prefix">$</span>
<input type="number" id="custom-amt" class="custom-amount__input" placeholder="Enter amount (min $10)" min="10" max="1000">
</div>
</div>
</div>
</div>
<!-- Right column: personalisation form -->
<form class="personalise-form" novalidate>
<legend class="personalise-form__legend">Personalise It</legend>
<div class="form-field">
<label class="form-field__label" for="recipient-name">Recipient's name<span class="form-field__optional">Optional</span></label>
<input type="text" id="recipient-name" class="form-field__input" placeholder="Kai Reyes" maxlength="50" value="Kai Reyes">
</div>
<div class="form-field">
<label class="form-field__label form-field__label--required" for="recipient-email">Recipient's email</label>
<input type="email" id="recipient-email" class="form-field__input" placeholder="kai@example.com" required>
<div class="form-field__help">We email the card to them directly. If you want to give it in person, use your own email.</div>
</div>
<div class="form-field">
<label class="form-field__label form-field__label--required" for="sender-name">Your name</label>
<input type="text" id="sender-name" class="form-field__input" placeholder="Marcus Vance" required>
<div class="form-field__help">So they know who it's from.</div>
</div>
<div class="form-field">
<label class="form-field__label" for="message">Personal message<span class="form-field__optional">Optional · 200 char</span></label>
<textarea id="message" class="form-field__textarea" placeholder="May the Force be with you. Or something less clichéd." maxlength="200"></textarea>
</div>
<div class="form-field">
<label class="form-field__label form-field__label--required" for="delivery-date">Delivery date</label>
<input type="date" id="delivery-date" class="form-field__input" required value="2026-07-14">
<div class="form-field__help">Schedule ahead — cards can be delayed up to 12 months.</div>
</div>
<button type="submit" class="cta-primary">
<span>Add gift card to cart · $100</span>
<span class="cta-primary__arrow">→</span>
</button>
</form>
</div>
</div>
</section>
<!-- ============================================================
SECTION 4 — How gift cards work (3-stage editorial)
============================================================ -->
<a id="tf-progress-step-strip-1" data-tf-family="progress-step-strip" style="display:contents"></a>
<section class="steps-editorial">
<div class="steps-editorial__inner">
<div class="steps-editorial__header">
<div class="section-eyebrow">How It Works</div>
<h2 class="section-title">Three steps. No paper.</h2>
</div>
<div class="steps-editorial__grid">
<div class="step">
<div class="step__marker">
<span class="step__num">01</span>
<span class="step__label">Configure</span>
</div>
<h3 class="step__title">You configure and pay.</h3>
<p class="step__body">Pick the amount, add a note, choose the delivery date. Pay through the same checkout as any hilt.</p>
</div>
<div class="step">
<div class="step__marker">
<span class="step__num">02</span>
<span class="step__label">Deliver</span>
</div>
<h3 class="step__title">We email the card.</h3>
<p class="step__body">On the delivery date you chose, the recipient gets a beautifully-formatted email with the code and your message. No plastic, no shipping delay.</p>
</div>
<div class="step">
<div class="step__marker">
<span class="step__num">03</span>
<span class="step__label">Redeem</span>
</div>
<h3 class="step__title">They spend it.</h3>
<p class="step__body">Cards apply to anything in the ARTSABERS catalogue. Hilts, helmets, blades, parts. No expiry. Multiple codes can be stacked.</p>
</div>
</div>
</div>
</section>
<!-- ============================================================
SECTION 5 — Value props (3-cell reinforcement)
============================================================ -->
<a id="tf-trust-prose-cells-1" data-tf-family="trust-prose-cells" style="display:contents"></a>
<section class="value-band">
<div class="value-band__inner">
<div class="value-band__grid">
<div class="value-cell">
<div class="value-cell__glyph" aria-hidden="true">
<svg viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="9"></circle><path d="M12 7v5l3 2"></path></svg>
</div>
<h3 class="value-cell__title">Instant or scheduled.</h3>
<p class="value-cell__body">Send now or schedule for a specific date up to 12 months ahead.</p>
</div>
<div class="value-cell">
<div class="value-cell__glyph" aria-hidden="true">
<svg viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 12h16M12 4v16"></path><circle cx="12" cy="12" r="9"></circle></svg>
</div>
<h3 class="value-cell__title">No expiry.</h3>
<p class="value-cell__body">The recipient can spend it whenever. No 90-day countdown. No expiry ever.</p>
</div>
<div class="value-cell">
<div class="value-cell__glyph" aria-hidden="true">
<svg viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="8" width="18" height="12"></rect><rect x="6" y="5" width="12" height="12"></rect><rect x="9" y="2" width="6" height="12"></rect></svg>
</div>
<h3 class="value-cell__title">Stackable.</h3>
<p class="value-cell__body">Multiple gift cards can be applied to one order. Combine with sale prices.</p>
</div>
</div>
</div>
</section>
<!-- ============================================================
SECTION 6 — Gift card FAQ (accordion, MAS71)
============================================================ -->
<a id="tf-faq-accordion-1" data-tf-family="faq-accordion" style="display:contents"></a>
<section class="faq">
<div class="faq__inner">
<div class="faq__header">
<div class="section-eyebrow">Gift Card FAQ</div>
<h2 class="faq__title">The questions gift buyers ask.</h2>
</div>
<div class="faq__list">
<div class="faq-item faq-item--open">
<button type="button" class="faq-item__toggle" aria-expanded="true">
<span class="faq-item__q">What if the recipient doesn't like anything in the catalogue?</span>
<span class="faq-item__chevron" aria-hidden="true">+</span>
</button>
<div class="faq-item__panel">
<p class="faq-item__a">We stock 1,100+ hilts across every character, era, and electronics tier. If they can't find something they want, they haven't looked hard enough. That said — gift cards have no expiry, so they can wait until we have the exact thing they're after.</p>
</div>
</div>
<div class="faq-item">
<button type="button" class="faq-item__toggle" aria-expanded="false">
<span class="faq-item__q">Can gift cards be used on discounted items or during sales?</span>
<span class="faq-item__chevron" aria-hidden="true">+</span>
</button>
<div class="faq-item__panel">
<p class="faq-item__a">Yes — gift cards work exactly like cash at checkout. They stack with any active promotion, sale price, or bundle discount. There are no products excluded from gift-card payment.</p>
</div>
</div>
<div class="faq-item">
<button type="button" class="faq-item__toggle" aria-expanded="false">
<span class="faq-item__q">What happens if I bought a card for someone with a typo in their email?</span>
<span class="faq-item__chevron" aria-hidden="true">+</span>
</button>
<div class="faq-item__panel">
<p class="faq-item__a">Email us within 24 hours of the delivery date and we'll re-issue the code to the correct address. A real person will reply — it's the same customer-service team that handles hilt orders.</p>
</div>
</div>
<div class="faq-item">
<button type="button" class="faq-item__toggle" aria-expanded="false">
<span class="faq-item__q">Are gift cards refundable?</span>
<span class="faq-item__chevron" aria-hidden="true">+</span>
</button>
<div class="faq-item__panel">
<p class="faq-item__a">Gift cards themselves are non-refundable once issued. However, any product purchased using a gift card falls under our standard 30-day money-back guarantee — the refund goes back onto a fresh gift card of the same value, and that one doesn't expire either.</p>
</div>
</div>
<div class="faq-item">
<button type="button" class="faq-item__toggle" aria-expanded="false">
<span class="faq-item__q">Can the recipient see how much I paid?</span>
<span class="faq-item__chevron" aria-hidden="true">+</span>
</button>
<div class="faq-item__panel">
<p class="faq-item__a">They see the gift card's face value, not the transaction receipt. Your payment confirmation stays in your own inbox — the recipient's email shows the amount, your message, and the redemption code, nothing else.</p>
</div>
</div>
<div class="faq-item">
<button type="button" class="faq-item__toggle" aria-expanded="false">
<span class="faq-item__q">Do you offer physical gift cards for in-person giving?</span>
<span class="faq-item__chevron" aria-hidden="true">+</span>
</button>
<div class="faq-item__panel">
<p class="faq-item__a">Digital only — we don't produce physical cards. If you want to give it in person, enter your own email in the recipient field, print the delivery email, and hand it over. The redemption code is the same either way.</p>
</div>
</div>
</div>
</div>
</section>
<!-- ============================================================
SECTION 7 — Terms summary
============================================================ -->
<a id="tf-other-1" data-tf-family="other" style="display:contents"></a>
<section class="terms-note">
<div class="terms-note__inner">
<p class="terms-note__text">Gift cards are non-refundable. Cards do not expire. Multiple cards can be combined at checkout. Full terms in the <a href="/gift-card-terms/">Gift Card Terms</a> document.</p>
</div>
</section>
<!-- ============================================================
SECTION 8 — 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>
<!-- ============================================================
SECTION 9 — Site footer (MAS64 / MAS68)
============================================================ -->
<footer class="site-footer">
<div class="site-footer__inner">
<div class="site-footer__grid">
<div class="site-footer__brand-col">
<div class="site-footer__brand">ART<span>/</span>SABERS</div>
<p class="site-footer__tagline">From factory floor to your door. Every character, every Saber Core, every duelling grade.</p>
<div class="site-footer__socials">
<a href="#" class="site-footer__social" aria-label="Instagram">IG</a>
<a href="#" class="site-footer__social" aria-label="YouTube">YT</a>
<a href="#" class="site-footer__social" aria-label="TikTok">TT</a>
<a href="#" class="site-footer__social" aria-label="Discord">DC</a>
</div>
</div>
<div>
<div class="site-footer__col-title">Shop</div>
<div class="site-footer__links">
<a href="/lightsabers/" class="site-footer__link">Lightsabers</a>
<a href="/characters/" class="site-footer__link">By Character</a>
<a href="/saber-cores/" class="site-footer__link">By Saber Core</a>
<a href="/helmets/" class="site-footer__link">Helmets</a>
<a href="/parts/" class="site-footer__link">Parts & Accessories</a>
<a href="/deals/" class="site-footer__link">Deals</a>
</div>
</div>
<div>
<div class="site-footer__col-title">Gift</div>
<div class="site-footer__links">
<a href="/gift-cards/" class="site-footer__link">Gift Cards</a>
<a href="/gift-guide/" class="site-footer__link">Gift Guide</a>
<a href="/bundles/" class="site-footer__link">Saber & Helmet Bundles</a>
<a href="/under-100/" class="site-footer__link">Under $100</a>
</div>
</div>
<div>
<div class="site-footer__col-title">Support</div>
<div class="site-footer__links">
<a href="/contact/" class="site-footer__link">Contact Us</a>
<a href="/faq/" class="site-footer__link">FAQ</a>
<a href="/shipping/" class="site-footer__link">Shipping (7-10 days)</a>
<a href="/returns/" class="site-footer__link">Returns & Guarantee</a>
<a href="/track/" class="site-footer__link">Track My Order</a>
<a href="/manuals/" class="site-footer__link">Saber Core Manuals</a>
</div>
</div>
<div>
<div class="site-footer__col-title">Company</div>
<div class="site-footer__links">
<a href="/about/" class="site-footer__link">About ARTSABERS</a>
<a href="/story/" class="site-footer__link">Founder's Story</a>
<a href="/exclusives/" class="site-footer__link">ARTSABERS Exclusives</a>
<a href="/reviews/" class="site-footer__link">Reviews</a>
<a href="/press/" class="site-footer__link">Press</a>
</div>
</div>
</div>
<div class="site-footer__bottom">
<div class="site-footer__copy">© 2026 ARTSABERS · A Nerdworks Brand</div>
<div class="site-footer__legal-links">
<a href="/privacy/" class="site-footer__legal-link">Privacy</a>
<a href="/terms/" class="site-footer__legal-link">Terms</a>
<a href="/cookies/" class="site-footer__legal-link">Cookies</a>
<a href="/accessibility/" class="site-footer__legal-link">Accessibility</a>
</div>
</div>
</div>
</footer>
</body>
</html>