/wire-template.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Contact — ARTSABERS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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@500;600;700&family=Manrope:wght@400;500;600&family=Orbitron:wght@400;500;600;700;800&family=Onest:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
/* ============================================================
TOKENS — Kyber Hull (verbatim from SAS1 v4.2.1)
============================================================ */
:root {
/* Orange ombre */
--ember-glow: #FFB347;
--ember-bright: #FF9540;
--ember: #FF7A2E;
--ember-forge: #E85D18;
--ember-deep: #D14810;
--ember-smoulder: #8B2E08;
--ember-scar: #5A1A00;
--on-primary-container: #8B2E08;
--on-primary-fixed: #2A0800;
/* Hull ladder */
--carbon: #060606;
--void: #0A0A0A;
--charcoal: #141414;
--charcoal-warm: #161412;
--hull-panel: #1A1A1A;
--hull-panel-lift: #242424;
--hull-panel-dark: #0F0F0F;
--hull-chrome-shadow: #2E2E2E;
--hull-edge: #363636;
/* Chrome */
--chrome-highlight: #FAFAFA;
--chrome-glint: #E8E4DD;
--chrome-warm: #F5F0E8;
--chrome-dim: #B8B0A6;
/* Semantic surface roles (per fidelity-checklist LAW) */
--bg-page: var(--carbon);
--bg-card: var(--hull-panel);
--bg-card-lift: var(--hull-panel-lift);
--bg-card-on-pattern: rgba(20, 20, 20, 0.94);
--text-on-dark: var(--chrome-warm);
--text-on-dark-heading: var(--chrome-highlight);
--text-on-dark-meta: var(--chrome-dim);
--text-on-ember: var(--on-primary-fixed);
/* Typography */
--font-display: 'Orbitron', system-ui, sans-serif;
--font-body: 'Onest', system-ui, sans-serif;
/* Effects */
--panel-lift: inset 0 1px 0 rgba(250, 250, 250, 0.08), 0 8px 24px -8px rgba(0, 0, 0, 0.9);
--panel-lift-hover: inset 0 1px 0 rgba(250, 250, 250, 0.15), 0 16px 40px -12px rgba(0, 0, 0, 0.95);
--chrome-top-soft: inset 0 1px 0 rgba(250, 250, 250, 0.30);
--chrome-top-hint: inset 0 1px 0 rgba(250, 250, 250, 0.10);
--ember-glow-sm: 0 0 16px rgba(255, 122, 46, 0.35);
--ember-glow-md: 0 0 24px 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);
--ember-backlight: 0 40px 80px -20px rgba(255, 122, 46, 0.35);
}
/* ============================================================
PAGE CHROME
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background: var(--bg-page);
color: var(--text-on-dark);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
button { font-family: inherit; border: 0; cursor: pointer; padding: 0; background: transparent; color: inherit; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
input, select, textarea { font-family: inherit; }
/* Panel-seam glow — deliberate rhythm marker between adjacent panels */
.panel-seam {
position: relative;
height: 1px;
width: 100%;
background: linear-gradient(to right, transparent 0%, rgba(255, 122, 46, 0.0) 8%, rgba(255, 122, 46, 0.7) 30%, rgba(255, 122, 46, 0.7) 70%, rgba(255, 122, 46, 0.0) 92%, transparent 100%);
}
.panel-seam::after {
content: "";
position: absolute;
left: 0; right: 0; top: 1px;
height: 40px;
background: radial-gradient(ellipse at 50% 0%, rgba(255, 122, 46, 0.25) 0%, rgba(255, 122, 46, 0.05) 40%, transparent 70%);
pointer-events: none;
}
/* ============================================================
BLOCK — site-nav (MAS64/68 chrome, pattern-language)
============================================================ */
.site-nav {
background: var(--carbon);
border-bottom: 1px solid rgba(54, 54, 54, 0.6);
box-shadow: inset 0 -1px 0 rgba(250, 250, 250, 0.04);
position: sticky;
top: 0;
z-index: 50;
}
.site-nav__inner {
max-width: 1440px;
margin: 0 auto;
padding: 0 48px;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
height: 72px;
gap: 48px;
}
.site-nav__brand {
font-family: var(--font-display);
font-weight: 700;
font-size: 20px;
letter-spacing: 0.14em;
color: var(--chrome-highlight);
text-transform: uppercase;
}
.site-nav__brand-mark {
display: inline-block;
width: 8px;
height: 8px;
background: var(--ember);
box-shadow: 0 0 12px rgba(255, 122, 46, 0.8);
margin-right: 10px;
vertical-align: middle;
transform: translateY(-2px);
}
.site-nav__primary ul {
display: flex;
gap: 36px;
justify-content: center;
}
.site-nav__primary a {
font-family: var(--font-display);
font-weight: 500;
font-size: 13px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--chrome-warm);
padding: 6px 0;
position: relative;
transition: color 160ms ease;
}
.site-nav__primary a:hover { color: var(--chrome-highlight); }
.site-nav__primary a.is-current { color: var(--chrome-highlight); }
.site-nav__primary a.is-current::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -2px;
height: 1px;
background: var(--ember);
box-shadow: 0 0 8px rgba(255, 122, 46, 0.7);
}
.site-nav__actions {
display: flex;
gap: 20px;
align-items: center;
}
.site-nav__icon {
width: 24px;
height: 24px;
color: var(--chrome-warm);
transition: color 160ms ease;
}
.site-nav__icon:hover { color: var(--ember-glow); }
.site-nav__cart {
display: inline-flex;
align-items: center;
gap: 8px;
width: auto;
font-family: var(--font-display);
font-size: 12px;
letter-spacing: 0.1em;
color: var(--chrome-warm);
}
/* ============================================================
BLOCK — compact-hero (panel-joint hairline pattern, ~360px)
============================================================ */
.compact-hero {
position: relative;
background-color: var(--carbon);
background-image:
/* Panel-joint hairlines (chrome catches) */
linear-gradient(to bottom, transparent 0, transparent 88px, rgba(250, 250, 250, 0.04) 89px, rgba(250, 250, 250, 0.04) 90px, transparent 91px),
linear-gradient(to bottom, transparent 0, transparent 178px, rgba(250, 250, 250, 0.03) 179px, rgba(250, 250, 250, 0.03) 180px, transparent 181px),
/* Deep recessed shadow strips (below each hairline) */
linear-gradient(to bottom, transparent 0, transparent 91px, rgba(0, 0, 0, 0.6) 92px, rgba(0, 0, 0, 0.0) 100px),
linear-gradient(to bottom, transparent 0, transparent 181px, rgba(0, 0, 0, 0.6) 182px, rgba(0, 0, 0, 0.0) 190px),
/* Warm ember bleed low-mid — reactor glow behind the hull */
radial-gradient(ellipse at 50% 100%, rgba(255, 122, 46, 0.13) 0%, rgba(255, 122, 46, 0.03) 40%, transparent 65%);
min-height: 360px;
display: flex;
align-items: center;
overflow: hidden;
}
.compact-hero::before {
/* Chrome top-edge law */
content: "";
position: absolute;
left: 0; right: 0; top: 0;
height: 2px;
background: linear-gradient(to bottom, rgba(250, 250, 250, 0.10), transparent);
pointer-events: none;
}
.compact-hero::after {
/* Ember backlight marking panel-end */
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 1px;
background: linear-gradient(to right, transparent 0%, rgba(255, 122, 46, 0.6) 40%, rgba(255, 122, 46, 0.6) 60%, transparent 100%);
box-shadow: 0 -8px 24px rgba(255, 122, 46, 0.3), 0 8px 32px rgba(255, 122, 46, 0.35);
pointer-events: none;
}
.compact-hero__inner {
max-width: 1440px;
margin: 0 auto;
padding: 0 48px;
width: 100%;
position: relative;
z-index: 2;
}
.compact-hero__eyebrow {
font-family: var(--font-display);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ember);
margin: 0 0 20px 0;
}
.compact-hero__title {
font-family: var(--font-display);
font-weight: 700;
font-size: 52px;
line-height: 1.05;
letter-spacing: 0.8px;
color: var(--chrome-highlight);
margin: 0 0 20px 0;
max-width: 780px;
}
.compact-hero__lede {
font-family: var(--font-body);
font-size: 17px;
line-height: 1.55;
color: var(--chrome-warm);
max-width: 680px;
margin: 0;
}
/* ============================================================
SECTION GROUNDS (page decides the band tone)
============================================================ */
.section {
padding: 96px 0;
position: relative;
}
.section--carbon { background: var(--carbon); }
.section--plate-g {
/* Variant G: two vertical plates + faint vertical seam, dimmed */
background-color: var(--carbon);
background-image:
/* Dark overlay (~68%) so the pattern doesn't compete with the form */
linear-gradient(rgba(6, 6, 6, 0.72), rgba(6, 6, 6, 0.72)),
/* Vertical seam + subtle plate tonality */
linear-gradient(to right,
rgba(30, 30, 30, 0.35) 0%,
rgba(30, 30, 30, 0.55) calc(50% - 1px),
rgba(255, 122, 46, 0.55) calc(50% - 1px),
rgba(255, 122, 46, 0.55) calc(50% + 1px),
rgba(30, 30, 30, 0.55) calc(50% + 1px),
rgba(30, 30, 30, 0.35) 100%),
/* Warm background wash */
radial-gradient(ellipse at 50% 50%, rgba(255, 122, 46, 0.12) 0%, transparent 60%);
}
.section--plate-g::before {
content: "";
position: absolute;
left: 0; right: 0; top: 0;
height: 2px;
background: linear-gradient(to bottom, rgba(250, 250, 250, 0.20), transparent);
pointer-events: none;
}
.section--compact { padding: 40px 0; }
.section--tight { padding: 56px 0; }
.section__inner {
max-width: 1440px;
margin: 0 auto;
padding: 0 48px;
position: relative;
}
.section__eyebrow {
font-family: var(--font-display);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ember);
margin: 0 0 20px 0;
}
.section__title {
font-family: var(--font-display);
font-weight: 700;
font-size: 40px;
line-height: 1.1;
letter-spacing: 0.8px;
color: var(--chrome-highlight);
margin: 0 0 16px 0;
max-width: 900px;
}
.section__title--small { font-size: 36px; letter-spacing: 0.8px; }
.section__lede {
font-family: var(--font-body);
font-size: 17px;
color: var(--chrome-warm);
max-width: 640px;
margin: 0 0 56px 0;
}
/* ============================================================
BLOCK — channel-card (3-up grid)
============================================================ */
.channel-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
margin-top: 24px;
}
.channel-card {
position: relative;
background: var(--bg-card);
box-shadow: var(--panel-lift);
padding: 40px 36px 36px 36px;
display: flex;
flex-direction: column;
min-height: 380px;
transition: box-shadow 220ms ease, transform 220ms ease;
}
.channel-card::before {
content: "";
position: absolute;
left: 0; right: 0; top: 0;
height: 1px;
background: rgba(250, 250, 250, 0.35);
pointer-events: none;
}
.channel-card:hover {
box-shadow: var(--panel-lift-hover);
transform: translateY(-2px);
}
.channel-card__glyph {
width: 48px;
height: 48px;
color: var(--ember);
margin-bottom: 32px;
filter: drop-shadow(0 0 10px rgba(255, 122, 46, 0.35));
}
.channel-card__name {
font-family: var(--font-display);
font-weight: 700;
font-size: 26px;
line-height: 1.15;
letter-spacing: -0.005em;
color: var(--chrome-highlight);
margin: 0 0 14px 0;
}
.channel-card__description {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.55;
color: var(--chrome-warm);
margin: 0 0 24px 0;
}
.channel-card__response {
align-self: flex-start;
display: inline-block;
padding: 6px 14px;
border: 1px solid rgba(255, 122, 46, 0.55);
color: var(--ember);
font-family: var(--font-display);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
margin: 0 0 32px 0;
background: rgba(255, 122, 46, 0.05);
}
.channel-card__cta {
margin-top: auto;
align-self: stretch;
}
/* Primary + Ghost CTA (raw ember-forge module — used by channel cards, form, hours) */
.cta {
display: inline-flex;
justify-content: center;
align-items: center;
gap: 8px;
padding: 16px 24px;
font-family: var(--font-display);
font-weight: 600;
font-size: 13px;
letter-spacing: 0.06em;
text-transform: uppercase;
border: 0;
cursor: pointer;
transition: box-shadow 200ms ease, transform 200ms ease, background 200ms ease;
text-align: center;
}
.cta--primary {
background: linear-gradient(to bottom, var(--ember-glow) 0%, var(--ember) 50%, var(--ember-deep) 100%);
color: var(--on-primary-fixed);
box-shadow: var(--ember-glow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.cta--primary:hover {
box-shadow: var(--ember-glow-md), inset 0 1px 0 rgba(255, 255, 255, 0.38);
transform: translateY(-1px);
}
.cta--ghost {
background: transparent;
color: var(--chrome-warm);
border: 1px solid rgba(62, 62, 62, 0.7);
box-shadow: none;
}
.cta--ghost:hover {
background: var(--hull-panel-lift);
box-shadow: var(--chrome-top-soft);
color: var(--chrome-highlight);
}
.cta--ember-hairline {
background: transparent;
color: var(--ember);
border: 1px solid rgba(255, 122, 46, 0.6);
box-shadow: none;
}
.cta--ember-hairline:hover {
background: rgba(255, 122, 46, 0.08);
box-shadow: var(--ember-glow-sm);
color: var(--ember-glow);
}
.cta--full { width: 100%; }
.cta__arrow {
display: inline-block;
transition: transform 200ms ease;
}
.cta:hover .cta__arrow { transform: translateX(3px); }
/* ============================================================
BLOCK — contact-form (MAS52 primitives)
============================================================ */
.contact-form {
max-width: 780px;
margin: 0 auto;
}
.contact-form__fieldset {
position: relative;
padding: 40px 40px 44px 40px;
border: 1px solid var(--hull-edge);
background: var(--bg-card-on-pattern);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
box-shadow: var(--panel-lift);
margin: 0 0 32px 0;
}
.contact-form__fieldset::before {
content: "";
position: absolute;
left: 0; right: 0; top: 0;
height: 1px;
background: rgba(250, 250, 250, 0.30);
pointer-events: none;
}
.contact-form__legend {
font-family: var(--font-display);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ember);
padding: 0 12px;
margin-left: -4px;
background: var(--carbon);
}
.contact-form__row {
margin-bottom: 28px;
}
.contact-form__row:last-of-type {
margin-bottom: 0;
}
.contact-form__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
margin-bottom: 28px;
}
.contact-form__label {
display: block;
font-family: var(--font-display);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--chrome-dim);
margin: 0 0 10px 0;
}
.contact-form__optional {
color: var(--chrome-dim);
font-weight: 500;
letter-spacing: 0.1em;
margin-left: 8px;
opacity: 0.7;
}
.contact-form__input,
.contact-form__select,
.contact-form__textarea {
width: 100%;
background: transparent;
border: 0;
border-bottom: 1px solid var(--hull-panel-lift);
color: var(--chrome-warm);
font-family: var(--font-body);
font-size: 16px;
padding: 12px 0;
outline: none;
transition: border-color 200ms ease, box-shadow 200ms ease;
border-radius: 0;
-webkit-appearance: none;
appearance: none;
}
.contact-form__input:focus,
.contact-form__select:focus,
.contact-form__textarea:focus {
border-color: var(--ember);
box-shadow: 0 1px 0 var(--ember), var(--ember-glow-sm);
}
.contact-form__input::placeholder,
.contact-form__textarea::placeholder {
color: var(--chrome-dim);
opacity: 0.7;
}
.contact-form__help {
font-family: var(--font-body);
font-size: 13px;
color: var(--chrome-dim);
margin: 8px 0 0 0;
}
.contact-form__select {
cursor: pointer;
background-image: linear-gradient(45deg, transparent 50%, var(--ember) 50%), linear-gradient(-45deg, transparent 50%, var(--ember) 50%);
background-position: calc(100% - 12px) 22px, calc(100% - 6px) 22px;
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
padding-right: 32px;
}
.contact-form__select option {
background: var(--charcoal);
color: var(--chrome-warm);
}
.contact-form__textarea {
resize: vertical;
min-height: 160px;
line-height: 1.55;
}
.contact-form__counter {
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--chrome-dim);
text-align: right;
margin: 8px 0 0 0;
}
.contact-form__counter-value {
color: var(--chrome-warm);
font-variant-numeric: tabular-nums;
}
.contact-form__submit {
margin-top: 8px;
}
.contact-form__note {
font-family: var(--font-body);
font-size: 14px;
color: var(--chrome-dim);
text-align: center;
margin: 20px 0 0 0;
max-width: 620px;
margin-left: auto;
margin-right: auto;
}
/* ============================================================
BLOCK — hours-response-split (editorial split)
============================================================ */
.hours-panel {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 96px;
margin-top: 32px;
padding-top: 40px;
border-top: 1px solid rgba(54, 54, 54, 0.5);
position: relative;
}
.hours-panel::before {
content: "";
position: absolute;
left: 50%;
top: 40px;
bottom: 0;
width: 1px;
background: linear-gradient(to bottom, rgba(54, 54, 54, 0.5) 0%, transparent 100%);
transform: translateX(-48px);
}
.hours-panel__column-heading {
font-family: var(--font-display);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--ember);
margin: 0 0 32px 0;
}
.hours-panel__list {
display: flex;
flex-direction: column;
gap: 24px;
}
.hours-panel__item {
display: grid;
grid-template-columns: 200px 1fr;
gap: 24px;
align-items: baseline;
padding-bottom: 20px;
border-bottom: 1px dotted rgba(184, 176, 166, 0.15);
}
.hours-panel__item:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.hours-panel__label {
font-family: var(--font-display);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--chrome-dim);
}
.hours-panel__value {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.5;
color: var(--chrome-warm);
font-variant-numeric: tabular-nums;
}
.hours-panel__value strong {
color: var(--chrome-highlight);
font-weight: 600;
}
.hours-panel__value-num {
font-family: var(--font-display);
color: var(--ember);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
/* ============================================================
BLOCK — faq-shortcut-band
============================================================ */
.faq-shortcut {
display: grid;
grid-template-columns: 65% 35%;
gap: 32px;
align-items: center;
padding: 32px 0;
border-top: 1px solid rgba(255, 122, 46, 0.35);
position: relative;
}
.faq-shortcut::before {
content: "";
position: absolute;
left: 0; right: 0; top: -1px;
height: 12px;
background: radial-gradient(ellipse at 50% 0%, rgba(255, 122, 46, 0.18) 0%, transparent 70%);
pointer-events: none;
}
.faq-shortcut__eyebrow {
font-family: var(--font-display);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ember);
margin: 0 0 10px 0;
}
.faq-shortcut__oneline {
font-family: var(--font-body);
font-size: 17px;
line-height: 1.4;
color: var(--chrome-warm);
margin: 0;
max-width: 620px;
}
.faq-shortcut__cta {
justify-self: end;
}
/* ============================================================
BLOCK — trust-chip-band (MAS49 4-chip)
============================================================ */
.trust-chip-band {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
padding: 40px 0 24px 0;
border-top: 1px solid rgba(255, 122, 46, 0.35);
position: relative;
}
.trust-chip-band::before {
content: "";
position: absolute;
left: 0; right: 0; top: -1px;
height: 12px;
background: radial-gradient(ellipse at 50% 0%, rgba(255, 122, 46, 0.18) 0%, transparent 70%);
pointer-events: none;
}
.trust-chip {
display: grid;
grid-template-columns: 32px 1fr;
gap: 16px;
align-items: start;
}
.trust-chip__glyph {
width: 28px;
height: 28px;
color: var(--ember);
margin-top: 2px;
filter: drop-shadow(0 0 8px rgba(255, 122, 46, 0.4));
}
.trust-chip__label {
font-family: var(--font-display);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--chrome-highlight);
margin: 0 0 6px 0;
line-height: 1.3;
}
.trust-chip__detail {
font-family: var(--font-body);
font-size: 13px;
line-height: 1.45;
color: var(--chrome-dim);
margin: 0;
}
/* ============================================================
BLOCK — site-footer (MAS64/68 chrome, pattern-language)
============================================================ */
.site-footer {
background: var(--carbon);
padding: 88px 0 40px 0;
position: relative;
border-top: 1px solid rgba(54, 54, 54, 0.4);
}
.site-footer::before {
content: "";
position: absolute;
left: 0; right: 0; top: 0;
height: 1px;
background: rgba(250, 250, 250, 0.06);
pointer-events: none;
}
.site-footer__inner {
max-width: 1440px;
margin: 0 auto;
padding: 0 48px;
}
.site-footer__top {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
gap: 48px;
padding-bottom: 56px;
border-bottom: 1px solid rgba(54, 54, 54, 0.4);
}
.site-footer__brand-block {
max-width: 340px;
}
.site-footer__brand {
font-family: var(--font-display);
font-weight: 700;
font-size: 18px;
letter-spacing: 0.14em;
color: var(--chrome-highlight);
text-transform: uppercase;
margin: 0 0 20px 0;
display: block;
}
.site-footer__brand-lede {
font-family: var(--font-body);
font-size: 14px;
line-height: 1.55;
color: var(--chrome-dim);
margin: 0 0 24px 0;
}
.site-footer__socials {
display: flex;
gap: 16px;
align-items: center;
}
.site-footer__social {
width: 20px;
height: 20px;
color: var(--chrome-dim);
transition: color 200ms ease;
}
.site-footer__social:hover { color: var(--ember-glow); }
.site-footer__col-heading {
font-family: var(--font-display);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--chrome-warm);
margin: 0 0 20px 0;
}
.site-footer__links li {
margin-bottom: 12px;
}
.site-footer__links a {
font-family: var(--font-body);
font-size: 14px;
color: var(--chrome-dim);
transition: color 200ms ease;
}
.site-footer__links a:hover { color: var(--chrome-warm); }
.site-footer__bottom {
display: grid;
grid-template-columns: 1fr auto;
gap: 32px;
align-items: center;
padding-top: 32px;
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--chrome-dim);
}
.site-footer__legal {
display: flex;
gap: 24px;
}
.site-footer__legal a {
color: var(--chrome-dim);
transition: color 200ms ease;
}
.site-footer__legal a:hover { color: var(--chrome-warm); }
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1080px) {
.site-nav__inner { padding: 0 32px; gap: 24px; }
.site-nav__primary ul { gap: 24px; }
.compact-hero__inner,
.section__inner,
.site-footer__inner { padding: 0 32px; }
.channel-grid { grid-template-columns: repeat(2, 1fr); }
.channel-grid > *:last-child { grid-column: 1 / -1; max-width: 50%; }
.site-footer__top { grid-template-columns: 1fr 1fr 1fr; }
.site-footer__brand-block { grid-column: 1 / -1; max-width: 480px; margin-bottom: 24px; }
.hours-panel { gap: 48px; }
.hours-panel::before { transform: translateX(-24px); }
}
@media (max-width: 780px) {
.site-nav__inner { grid-template-columns: auto auto; height: 64px; }
.site-nav__primary { display: none; }
.compact-hero { min-height: 320px; padding: 60px 0; }
.compact-hero__title { font-size: 40px; letter-spacing: 0.8px; }
.compact-hero__lede { font-size: 16px; }
.section { padding: 64px 0; }
.section__title { font-size: 32px; letter-spacing: 0.8px; }
.section__title--small { font-size: 28px; letter-spacing: 0.8px; }
.section__lede { margin-bottom: 40px; }
.channel-grid { grid-template-columns: 1fr; gap: 20px; }
.channel-grid > *:last-child { max-width: none; }
.channel-card { min-height: 0; padding: 32px 28px; }
.contact-form__fieldset { padding: 28px 24px 32px 24px; }
.contact-form__grid { grid-template-columns: 1fr; gap: 24px; margin-bottom: 24px; }
.hours-panel { grid-template-columns: 1fr; gap: 40px; padding-top: 32px; }
.hours-panel::before { display: none; }
.hours-panel__item { grid-template-columns: 1fr; gap: 8px; }
.faq-shortcut { grid-template-columns: 1fr; gap: 20px; padding: 28px 0; }
.faq-shortcut__cta { justify-self: start; width: 100%; }
.faq-shortcut__cta.cta { width: 100%; }
.trust-chip-band { grid-template-columns: 1fr 1fr; gap: 24px; padding-top: 32px; }
.site-footer { padding: 56px 0 32px 0; }
.site-footer__top { grid-template-columns: 1fr 1fr; gap: 32px; padding-bottom: 40px; }
.site-footer__brand-block { grid-column: 1 / -1; }
.site-footer__bottom { grid-template-columns: 1fr; gap: 16px; text-align: left; }
.site-footer__legal { flex-wrap: wrap; }
}
@media (max-width: 480px) {
.trust-chip-band { grid-template-columns: 1fr; }
}
/* orbitron-retrofit: title-em italic kill */
[class*="__title"] em, [class*="__title"] i,
[class*="-title"] em, [class*="-title"] i,
[class*="__heading"] em, [class*="__heading"] i,
[class*="-heading"] em, [class*="-heading"] i { font-style: normal; }
</style>
</head>
<body>
<!-- ============================================================
SITE NAV — MAS64/68 chrome (pattern-language)
============================================================ -->
<header class="site-nav">
<div class="site-nav__inner">
<a class="site-nav__brand" href="/">
<span class="site-nav__brand-mark" aria-hidden="true"></span>ARTSABERS
</a>
<nav class="site-nav__primary" aria-label="Primary">
<ul>
<li><a href="/lightsabers/">Lightsabers</a></li>
<li><a href="/cosplay-helmets/">Cosplay Helmets</a></li>
<li><a href="/parts-accessories/">Parts & Accessories</a></li>
<li><a href="/offers/">Offers</a></li>
<li><a href="/about/">About</a></li>
<li><a class="is-current" href="/contact/" aria-current="page">Contact</a></li>
</ul>
</nav>
<div class="site-nav__actions">
<button class="site-nav__icon" aria-label="Search">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<circle cx="10.5" cy="10.5" r="6.5"/>
<path d="M20 20l-4.8-4.8" stroke-linecap="square"/>
</svg>
</button>
<button class="site-nav__icon" aria-label="Account">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<circle cx="12" cy="8" r="4"/>
<path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8" stroke-linecap="square"/>
</svg>
</button>
<button class="site-nav__cart" aria-label="Cart, 2 items">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="width:22px;height:22px">
<path d="M4 5h3l2.5 12h9L21 8H8" stroke-linecap="square"/>
<circle cx="10" cy="21" r="1.2" fill="currentColor" stroke="none"/>
<circle cx="18" cy="21" r="1.2" fill="currentColor" stroke="none"/>
</svg>
<span>2</span>
</button>
</div>
</div>
</header>
<!-- ============================================================
COMPACT HERO
============================================================ -->
<a id="tf-hero-utility-1" data-tf-family="hero-utility" style="display:contents"></a>
<section class="compact-hero">
<div class="compact-hero__inner">
<p class="compact-hero__eyebrow">SUPPORT · UK BASED</p>
<h1 class="compact-hero__title">Talk to a real person.</h1>
<p class="compact-hero__lede">UK-based support. Live chat during working hours, email any time, and every reply comes from someone who's actually held the hilts.</p>
</div>
</section>
<!-- ============================================================
SECTION — CONTACT CHANNELS
============================================================ -->
<a id="tf-other-1" data-tf-family="other" style="display:contents"></a>
<section class="section section--carbon" aria-labelledby="channels-heading">
<div class="section__inner">
<p class="section__eyebrow">CHOOSE YOUR CHANNEL</p>
<h2 class="section__title" id="channels-heading">Three ways to reach the workshop.</h2>
<div class="channel-grid">
<!-- Card 1 — Live chat -->
<article class="channel-card">
<svg class="channel-card__glyph" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
<path d="M6 8h36v24H18l-10 8V8z" stroke-linecap="square" stroke-linejoin="miter"/>
<circle cx="18" cy="20" r="1.5" fill="currentColor" stroke="none"/>
<circle cx="24" cy="20" r="1.5" fill="currentColor" stroke="none"/>
<circle cx="30" cy="20" r="1.5" fill="currentColor" stroke="none"/>
</svg>
<h3 class="channel-card__name">Live chat</h3>
<p class="channel-card__description">In the corner of every page. Working hours, UK-based.</p>
<span class="channel-card__response">~2 MIN</span>
<a class="cta cta--primary cta--full channel-card__cta" href="#open-chat">Open chat <span class="cta__arrow">→</span></a>
</article>
<!-- Card 2 — Email -->
<article class="channel-card">
<svg class="channel-card__glyph" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
<rect x="4" y="10" width="40" height="28" stroke-linecap="square"/>
<path d="M4 12l20 14 20-14" stroke-linecap="square" stroke-linejoin="miter"/>
</svg>
<h3 class="channel-card__name">Email</h3>
<p class="channel-card__description">For anything longer than a quick question. Attach photos, order numbers, whatever helps.</p>
<span class="channel-card__response">~4 HR</span>
<a class="cta cta--ember-hairline cta--full channel-card__cta" href="mailto:shopping@artsabers.com">shopping@artsabers.com</a>
</article>
<!-- Card 3 — Instagram DM -->
<article class="channel-card">
<svg class="channel-card__glyph" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
<rect x="6" y="6" width="36" height="36" stroke-linecap="square"/>
<circle cx="24" cy="24" r="8"/>
<circle cx="35" cy="13" r="1.8" fill="currentColor" stroke="none"/>
</svg>
<h3 class="channel-card__name">Instagram DM</h3>
<p class="channel-card__description">For casual questions and community banter. Follow @artsabers.</p>
<span class="channel-card__response">SAME DAY</span>
<a class="cta cta--ember-hairline cta--full channel-card__cta" href="https://instagram.com/artsabers">Message on Instagram <span class="cta__arrow">→</span></a>
</article>
</div>
</div>
</section>
<div class="panel-seam" aria-hidden="true"></div>
<!-- ============================================================
SECTION — CONTACT FORM (Variant G patterned)
============================================================ -->
<a id="tf-form-1" data-tf-family="form" style="display:contents"></a>
<section class="section section--plate-g" aria-labelledby="form-heading">
<div class="section__inner">
<p class="section__eyebrow">OR SEND US A NOTE</p>
<h2 class="section__title" id="form-heading">Fill this in. We'll come back to you.</h2>
<p class="section__lede">Same team as the live chat and email — just async.</p>
<form class="contact-form" novalidate>
<fieldset class="contact-form__fieldset">
<legend class="contact-form__legend">YOUR MESSAGE</legend>
<div class="contact-form__grid">
<div>
<label class="contact-form__label" for="fld-name">Full name</label>
<input class="contact-form__input" id="fld-name" name="name" type="text" autocomplete="name" required>
</div>
<div>
<label class="contact-form__label" for="fld-email">Email</label>
<input class="contact-form__input" id="fld-email" name="email" type="email" autocomplete="email" required>
</div>
</div>
<div class="contact-form__row">
<label class="contact-form__label" for="fld-order">Order number <span class="contact-form__optional">Optional</span></label>
<input class="contact-form__input" id="fld-order" name="order" type="text" placeholder="#12345">
<p class="contact-form__help">If your question is about an existing order. Format: #12345.</p>
</div>
<div class="contact-form__row">
<label class="contact-form__label" for="fld-reason">Reason</label>
<select class="contact-form__select" id="fld-reason" name="reason" required>
<option value="" disabled selected>— pick one —</option>
<option value="order-support">Order support</option>
<option value="product-question">Product question</option>
<option value="returns-refunds">Returns & refunds</option>
<option value="wholesale">Wholesale enquiry</option>
<option value="something-else">Something else</option>
</select>
</div>
<div class="contact-form__row">
<label class="contact-form__label" for="fld-message">Message</label>
<textarea class="contact-form__textarea" id="fld-message" name="message" rows="6" maxlength="800" required placeholder="What's up? Order number if relevant, photos welcome."></textarea>
<p class="contact-form__counter"><span class="contact-form__counter-value">0</span> / 800</p>
</div>
</fieldset>
<button type="submit" class="cta cta--primary cta--full contact-form__submit">Send to the workshop <span class="cta__arrow">→</span></button>
<p class="contact-form__note">Response time: usually within 4 hours during UK working days. Longer over weekends — see below.</p>
</form>
</div>
</section>
<div class="panel-seam" aria-hidden="true"></div>
<!-- ============================================================
SECTION — WORKING HOURS + RESPONSE TIMES
============================================================ -->
<a id="tf-other-2" data-tf-family="other" style="display:contents"></a>
<section class="section section--carbon" aria-labelledby="hours-heading">
<div class="section__inner">
<p class="section__eyebrow">WHEN WE'RE HERE</p>
<h2 class="section__title section__title--small" id="hours-heading">Honest hours. Honest response times.</h2>
<div class="hours-panel">
<div class="hours-panel__column">
<h3 class="hours-panel__column-heading">WORKING HOURS</h3>
<ul class="hours-panel__list">
<li class="hours-panel__item">
<span class="hours-panel__label">Monday – Friday</span>
<span class="hours-panel__value"><strong>09:00 – 17:00</strong> GMT</span>
</li>
<li class="hours-panel__item">
<span class="hours-panel__label">Weekends</span>
<span class="hours-panel__value">Live chat closed. Email + Instagram DM are monitored — response the next working day.</span>
</li>
<li class="hours-panel__item">
<span class="hours-panel__label">Bank holidays</span>
<span class="hours-panel__value">Monitored, slower.</span>
</li>
</ul>
</div>
<div class="hours-panel__column">
<h3 class="hours-panel__column-heading">RESPONSE TIMES</h3>
<ul class="hours-panel__list">
<li class="hours-panel__item">
<span class="hours-panel__label">Live chat</span>
<span class="hours-panel__value"><span class="hours-panel__value-num">~2 min</span> during working hours</span>
</li>
<li class="hours-panel__item">
<span class="hours-panel__label">Email</span>
<span class="hours-panel__value"><span class="hours-panel__value-num">within 4 hours</span> on working days · <span class="hours-panel__value-num">within 24 hours</span> on weekends</span>
</li>
<li class="hours-panel__item">
<span class="hours-panel__label">Instagram DM</span>
<span class="hours-panel__value"><span class="hours-panel__value-num">Same day</span>, seven days a week</span>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- ============================================================
SECTION — FAQ SHORTCUT BAND
============================================================ -->
<a id="tf-inpage-cta-1" data-tf-family="inpage-cta" style="display:contents"></a>
<section class="section section--compact section--carbon" aria-labelledby="faq-shortcut-heading">
<div class="section__inner">
<div class="faq-shortcut">
<div class="faq-shortcut__body">
<p class="faq-shortcut__eyebrow" id="faq-shortcut-heading">COMMON QUESTIONS</p>
<p class="faq-shortcut__oneline">The FAQ answers most of what people ask before they message.</p>
</div>
<a class="cta cta--ember-hairline faq-shortcut__cta" href="/faq/">Read the FAQ <span class="cta__arrow">→</span></a>
</div>
</div>
</section>
<!-- ============================================================
SECTION — TRUST CHIP BAND (MAS49 4-chip)
============================================================ -->
<a id="tf-trust-chip-strip-1" data-tf-family="trust-chip-strip" style="display:contents"></a>
<section class="section section--compact section--carbon" aria-label="Trust markers">
<div class="section__inner">
<div class="trust-chip-band">
<div class="trust-chip">
<svg class="trust-chip__glyph" viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
<rect x="4" y="9" width="18" height="14" stroke-linecap="square"/>
<path d="M22 13h5l3 5v5h-8" stroke-linecap="square" stroke-linejoin="miter"/>
<circle cx="10" cy="24" r="2.2"/>
<circle cx="24" cy="24" r="2.2"/>
</svg>
<div>
<p class="trust-chip__label">24-HOUR DISPATCH</p>
<p class="trust-chip__detail">From UK + US warehouses</p>
</div>
</div>
<div class="trust-chip">
<svg class="trust-chip__glyph" viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
<path d="M6 8h20v14H14l-6 5V8z" stroke-linecap="square" stroke-linejoin="miter"/>
<circle cx="14" cy="15" r="1.2" fill="currentColor" stroke="none"/>
<circle cx="19" cy="15" r="1.2" fill="currentColor" stroke="none"/>
</svg>
<div>
<p class="trust-chip__label">UK CUSTOMER SERVICE</p>
<p class="trust-chip__detail">Live chat during working hours</p>
</div>
</div>
<div class="trust-chip">
<svg class="trust-chip__glyph" viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
<path d="M16 3l11 4v9c0 7-4.5 11-11 13-6.5-2-11-6-11-13V7l11-4z" stroke-linecap="square" stroke-linejoin="miter"/>
<path d="M11 16l4 4 7-8" stroke-linecap="square" stroke-linejoin="miter"/>
</svg>
<div>
<p class="trust-chip__label">1-YEAR DUELLING WARRANTY</p>
<p class="trust-chip__detail">Covers the way you'll actually use it</p>
</div>
</div>
<div class="trust-chip">
<svg class="trust-chip__glyph" viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
<path d="M16 4l3.5 8 9 1-6.5 6 2 9-8-4.5-8 4.5 2-9-6.5-6 9-1z" stroke-linecap="square" stroke-linejoin="miter"/>
</svg>
<div>
<p class="trust-chip__label">2,400+ FIVE-STAR REVIEWS</p>
<p class="trust-chip__detail">From duellists and collectors</p>
</div>
</div>
</div>
</div>
</section>
<!-- ============================================================
SITE FOOTER — MAS64/68 chrome (pattern-language)
============================================================ -->
<footer class="site-footer">
<div class="site-footer__inner">
<div class="site-footer__top">
<div class="site-footer__brand-block">
<a class="site-footer__brand" href="/">
<span class="site-nav__brand-mark" aria-hidden="true"></span>ARTSABERS
</a>
<p class="site-footer__brand-lede">Every character, every Saber Core, every duelling grade. Fan-to-fan, since 2020.</p>
<div class="site-footer__socials">
<a class="site-footer__social" href="https://instagram.com/artsabers" aria-label="Instagram">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" stroke-linecap="square"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="0.9" fill="currentColor" stroke="none"/></svg>
</a>
<a class="site-footer__social" href="https://tiktok.com/@artsabers" aria-label="TikTok">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M14 3h3c.2 2.4 1.8 4.4 4 4.8V11c-1.6 0-3.1-.5-4-1.4V16a5.5 5.5 0 1 1-5.5-5.5v3.1A2.4 2.4 0 1 0 14 16V3z"/></svg>
</a>
<a class="site-footer__social" href="https://youtube.com/@artsabers" aria-label="YouTube">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="6" width="20" height="12" stroke-linecap="square"/><path d="M10 9.5v5l5-2.5-5-2.5z" fill="currentColor"/></svg>
</a>
</div>
</div>
<div>
<h4 class="site-footer__col-heading">SHOP</h4>
<ul class="site-footer__links">
<li><a href="/lightsabers/">Lightsabers</a></li>
<li><a href="/cosplay-helmets/">Cosplay Helmets</a></li>
<li><a href="/parts-accessories/">Parts & Accessories</a></li>
<li><a href="/offers/">Offers & Deals</a></li>
<li><a href="/bundles/">Helmet + Saber Bundles</a></li>
</ul>
</div>
<div>
<h4 class="site-footer__col-heading">BY SABER CORE</h4>
<ul class="site-footer__links">
<li><a href="/s-rgb/">S-RGB</a></li>
<li><a href="/rgb-x/">RGB-X</a></li>
<li><a href="/snv4-pro/">SNV4 PRO</a></li>
<li><a href="/xenopixel-v3/">Xenopixel V3</a></li>
<li><a href="/proffie-2-2/">Proffie 2.2</a></li>
</ul>
</div>
<div>
<h4 class="site-footer__col-heading">HELP</h4>
<ul class="site-footer__links">
<li><a href="/contact/">Contact</a></li>
<li><a href="/faq/">FAQ</a></li>
<li><a href="/shipping/">Shipping & delivery</a></li>
<li><a href="/returns/">Returns & refunds</a></li>
<li><a href="/warranty/">Warranty</a></li>
</ul>
</div>
<div>
<h4 class="site-footer__col-heading">COMPANY</h4>
<ul class="site-footer__links">
<li><a href="/about/">About</a></li>
<li><a href="/wholesale/">Wholesale</a></li>
<li><a href="/affiliates/">Affiliates</a></li>
<li><a href="/blog/">Journal</a></li>
</ul>
</div>
</div>
<div class="site-footer__bottom">
<p>© ARTSABERS 2026 · Part of Nerdworks Ltd · Registered in England</p>
<div class="site-footer__legal">
<a href="/terms/">Terms</a>
<a href="/privacy/">Privacy</a>
<a href="/cookies/">Cookies</a>
</div>
</div>
</div>
</footer>
</body>
</html>