<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>War Dungeon — Specialty Wargames Outfitter (Gaslamp)</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=Literata:ital,opsz,wght@0,7..72,400;0,7..72,500;0,7..72,600;0,7..72,700;0,7..72,800;1,7..72,400;1,7..72,600&family=EB+Garamond:ital,wght@0,400;0,600;0,700;1,400&display=swap" rel="stylesheet">
<style>
/* ============================================================
:root tokens — Gaslamp evolution
============================================================ */
:root {
/* Palette (literal styleguide values) */
--primary: #B08D57; /* brass — was rodeo */
--secondary: #A35F3A; /* copper — was rodeo-light */
--tertiary: #C5A688; /* rodeo (demoted from primary) */
--dark: #1B1314;
--light: #FFFFFF;
--text: #613F34;
--neutral: #2B1B1C;
--accent: #832D15;
--positive: #4A6E50;
--negative: #C8442D;
/* Named metals + tones (legacy aliases the catalogue blocks use) */
--rodeo: #C5A688;
--rodeo-light: #D8C3B1;
--caput: #613F34;
--cowboy: #2B1B1C;
--liquourice: #1B1314;
--sienna: #832D15;
--brass: #B08D57;
--copper: #A35F3A;
--bronze: #F4A479;
/* Type */
--ff-display: 'Literata', 'EB Garamond', Georgia, serif;
--ff-body: 'Literata', 'EB Garamond', Georgia, serif;
--fs-display: 96px;
--fs-h1: 64px;
--fs-h2: 48px;
--fs-h3: 36px;
--fs-h4: 24px;
--fs-body-lg: 22px;
--fs-body: 18px;
--fs-body-sm: 16px;
--fs-eyebrow: 13px;
--fs-micro: 12px;
--lh-tight: 1.2;
--lh-heading: 1.35;
--lh-body: 1.5;
--lh-card: 1.35;
--lh-ui: 1.2;
--ls-tight: -0.01em;
--ls-heading: 0;
--ls-normal: 0;
--ls-wide: 0.04em;
--ls-wider: 0.08em;
--ls-widest: 0.16em;
/* Spacing */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 24px;
--sp-6: 32px;
--sp-7: 48px;
--sp-8: 64px;
--sp-9: 96px;
--sp-10: 128px;
/* Radii */
--r-none: 0px;
--r-sm: 4px;
--r-md: 7px;
--r-lg: 14px;
--r-xl: 21px;
/* Shadows — deep elevations shift toward copper for Gaslamp */
--sh-sm: 2px 2px 0 rgba(27, 19, 20, 0.85);
--sh-md: 4px 4px 0 rgba(27, 19, 20, 0.9);
--sh-lg: 6px 6px 0 rgba(163, 95, 58, 0.85);
--sh-xl: 8px 8px 0 rgba(163, 95, 58, 0.95);
/* Borders */
--bw-hairline: 1px;
--bw-regular: 2px;
--bw-thick: 4px;
/* Containers */
--container-narrow: 720px;
--container-default: 1200px;
--container-wide: 1440px;
}
/* ============================================================
Page chrome — base, container, btn, band tones, section heads
(not block-scoped — page-level glue around reused blocks)
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--ff-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--text);
background: var(--rodeo);
-webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4, h5 { margin: 0; font-family: var(--ff-display); }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
.container {
max-width: var(--container-default);
margin: 0 auto;
padding: 0 40px;
}
/* Band tones — section ground only. Backgrounds stay rodeo / rodeo-light / cowboy / liquourice;
brass and copper never tint the page ground per the Gaslamp don'ts. */
.band { position: relative; }
.band--rodeo { background: var(--rodeo); color: var(--text); }
.band--rodeo-light { background: var(--rodeo-light); color: var(--text); }
.band--cowboy { background: var(--cowboy); color: var(--light); }
.band--liquourice { background: var(--liquourice); color: var(--light); }
.section-pad { padding: var(--sp-9) 0; }
.section-head { margin-bottom: var(--sp-7); max-width: 760px; }
.section-head__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--sp-3);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
font-weight: 700;
color: var(--sienna);
margin-bottom: var(--sp-4);
}
.section-head__eyebrow::before {
content: '';
width: 28px; height: 1px;
background: currentColor;
}
.section-head__title {
font-size: var(--fs-h2);
font-weight: 800;
font-stretch: 75%;
color: var(--liquourice);
line-height: var(--lh-tight);
letter-spacing: var(--ls-tight);
margin-bottom: var(--sp-4);
}
.section-head__title em {
color: var(--secondary);
font-style: italic;
font-weight: 600;
}
.section-head__lede {
font-size: var(--fs-body-lg);
color: var(--caput);
max-width: 640px;
}
.section-head--dark .section-head__eyebrow { color: var(--brass); }
.section-head--dark .section-head__title { color: var(--light); }
.section-head--dark .section-head__title em { color: var(--brass); }
.section-head--dark .section-head__lede { color: var(--rodeo); }
/* ---- Buttons (primitive used inside reused blocks) ---- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
background: var(--primary); /* Gaslamp: primary CTA = brass */
color: var(--dark);
border: var(--bw-regular) solid var(--liquourice);
border-radius: var(--r-md);
padding: var(--sp-4) var(--sp-6);
font-family: var(--ff-display);
font-weight: 800;
font-stretch: 75%;
font-size: var(--fs-body);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
line-height: var(--lh-ui);
box-shadow: var(--sh-sm);
transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.btn:hover { transform: translate(-1px,-1px); box-shadow: var(--sh-md); background: var(--bronze); }
.btn--ghost {
background: transparent;
color: var(--liquourice);
border-color: var(--liquourice);
box-shadow: none;
}
.btn--ghost:hover { background: var(--liquourice); color: var(--brass); box-shadow: var(--sh-sm); }
.btn--alert { /* Gaslamp: sienna demoted to a tertiary alert CTA */
background: var(--accent);
color: var(--light);
border-color: var(--liquourice);
}
.btn--alert:hover { background: var(--liquourice); color: var(--bronze); }
.btn--small { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-body-sm); }
.btn--on-dark { border-color: var(--brass); }
.btn--ghost.btn--on-dark { color: var(--brass); border-color: var(--brass); }
.btn--ghost.btn--on-dark:hover { background: var(--brass); color: var(--liquourice); }
/* ---- Section grids (page-level layout containers, not block CSS) ---- */
.tool-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-7);
}
.category-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-6);
}
.product-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-6);
}
.tutorial-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-6);
}
.creator-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: var(--sp-6);
margin-bottom: var(--sp-7);
}
.creator-strip {
display: flex;
gap: var(--sp-5);
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: var(--sp-4);
scrollbar-color: var(--secondary) transparent;
}
.painting-masonry {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 220px;
gap: var(--sp-5);
margin-bottom: var(--sp-7);
}
.painting-cta {
display: flex;
justify-content: center;
gap: var(--sp-4);
}
/* Trust strip wrapper — give the bare block a section breathing room */
.trust-wrap { padding: var(--sp-8) 0; }
/* Newsletter wrapper — break out of the rodeo-light band cleanly */
.newsletter-wrap { padding: var(--sp-8) 0; }
/* Gear-divider host — sits between two bands as a thin ornament row. */
.divider-shelf { padding: var(--sp-6) 0; background: var(--rodeo); }
.divider-shelf--rodeo-light { background: var(--rodeo-light); }
.divider-shelf--cowboy { background: var(--cowboy); }
.divider-shelf--liquourice { background: var(--liquourice); }
/* Responsive */
@media (max-width: 1100px) {
.tool-grid { grid-template-columns: 1fr; }
.category-grid { grid-template-columns: repeat(2, 1fr); }
.product-row { grid-template-columns: repeat(2, 1fr); }
.tutorial-row { grid-template-columns: 1fr; }
.creator-grid { grid-template-columns: 1fr; }
.painting-masonry { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
}
@media (max-width: 640px) {
:root { --fs-display: 56px; --fs-h1: 44px; --fs-h2: 34px; --fs-h3: 28px; --fs-h4: 22px; }
.container { padding: 0 20px; }
.section-pad { padding: var(--sp-8) 0; }
.category-grid { grid-template-columns: 1fr; }
.product-row { grid-template-columns: 1fr; }
.painting-masonry { grid-template-columns: 1fr; }
}
/* ============================================================
BLOCK: announcement-bar (REUSED verbatim)
============================================================ */
.announcement-bar {
background: var(--liquourice);
color: var(--light);
border-bottom: var(--bw-hairline) solid var(--caput);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
font-weight: 600;
}
.announcement-bar__inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--sp-3) 40px;
max-width: var(--container-wide);
margin: 0 auto;
}
.announcement-bar__rotator {
display: flex;
align-items: center;
gap: var(--sp-3);
flex: 1;
justify-content: center;
}
.announcement-bar__dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--bronze);
}
.announcement-bar__msg { color: var(--light); }
.announcement-bar__msg em { color: var(--bronze); font-style: normal; }
.announcement-bar__aside {
display: flex; gap: var(--sp-5);
color: var(--secondary);
}
.announcement-bar__aside em { color: var(--bronze); font-style: normal; }
.announcement-bar__aside a:hover { color: var(--bronze); }
@media (max-width: 768px) {
.announcement-bar__aside { display: none; }
}
/* ============================================================
BLOCK: site-header (REUSED verbatim — 5-item nav)
============================================================ */
.site-header {
background: var(--liquourice);
color: var(--light);
border-bottom: var(--bw-regular) solid var(--caput);
position: relative;
}
.site-header__inner {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--sp-7);
padding: var(--sp-5) 40px;
max-width: var(--container-wide);
margin: 0 auto;
}
.site-header__brand { display: flex; align-items: center; gap: var(--sp-3); color: var(--light); }
.site-header__mark {
width: 44px; height: 44px;
border: var(--bw-regular) solid var(--bronze);
border-radius: var(--r-md);
display: grid; place-items: center;
background: var(--cowboy);
color: var(--bronze);
font-weight: 800;
font-stretch: 75%;
font-size: 22px;
letter-spacing: -0.02em;
box-shadow: var(--sh-sm);
}
.site-header__wordmark {
font-size: 28px;
font-weight: 800;
font-stretch: 75%;
letter-spacing: var(--ls-wider);
text-transform: uppercase;
line-height: 1;
}
.site-header__wordmark small {
display: block;
font-size: 10px;
letter-spacing: var(--ls-widest);
color: var(--bronze);
font-weight: 600;
margin-top: 4px;
}
.site-header__nav { display: flex; justify-content: center; gap: var(--sp-6); }
.site-header__nav a {
font-size: var(--fs-body-sm);
font-weight: 600;
letter-spacing: var(--ls-wide);
text-transform: uppercase;
padding: var(--sp-2) 0;
border-bottom: var(--bw-regular) solid transparent;
white-space: nowrap;
transition: border-color 120ms ease;
}
.site-header__nav a:hover { border-bottom-color: var(--bronze); }
.site-header__nav a.is-active { border-bottom-color: var(--sienna); color: var(--bronze); }
.site-header__utility { display: flex; align-items: center; gap: var(--sp-5); }
.site-header__icon {
position: relative;
width: 32px; height: 32px;
display: grid; place-items: center;
color: var(--secondary);
}
.site-header__icon:hover { color: var(--bronze); }
.site-header__icon svg { width: 22px; height: 22px; }
.site-header__badge {
position: absolute;
top: -6px; right: -8px;
background: var(--sienna);
color: var(--light);
font-size: 10px;
font-weight: 800;
border-radius: var(--r-md);
padding: 2px 6px;
border: 1px solid var(--liquourice);
line-height: 1;
}
.site-header__points {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-2) var(--sp-3);
background: var(--cowboy);
border: var(--bw-hairline) solid var(--bronze);
border-radius: var(--r-md);
font-size: 11px;
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--bronze);
}
@media (max-width: 1100px) {
.site-header__nav { display: none; }
}
/* ============================================================
BLOCK: hero (REUSED verbatim)
============================================================ */
.hero {
background: var(--rodeo);
padding: var(--sp-9) 0 var(--sp-10);
position: relative;
}
.hero__frame {
position: relative;
display: grid;
grid-template-columns: 1.05fr 1fr;
border: var(--bw-thick) solid var(--liquourice);
border-radius: var(--r-md);
box-shadow: var(--sh-xl);
background: var(--cowboy);
overflow: hidden;
min-height: 540px;
}
.hero__art {
position: relative;
background:
radial-gradient(ellipse 60% 70% at 40% 55%, rgba(244,164,121,0.35) 0%, rgba(244,164,121,0) 60%),
radial-gradient(ellipse 80% 60% at 60% 80%, rgba(131,45,21,0.55) 0%, rgba(43,27,28,0) 70%),
var(--cowboy);
border-right: var(--bw-thick) solid var(--liquourice);
display: grid;
place-items: center;
color: var(--bronze);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
overflow: hidden;
}
.hero__art-mark {
position: absolute; inset: var(--sp-5);
border: var(--bw-hairline) dashed rgba(244,164,121,0.35);
border-radius: var(--r-sm);
pointer-events: none;
}
.hero__art-label {
position: absolute; bottom: var(--sp-5); left: var(--sp-5);
padding: var(--sp-2) var(--sp-3);
background: rgba(27,19,20,0.75);
border: 1px solid var(--bronze);
color: var(--bronze);
font-size: 11px;
}
.hero__art-silhouette { width: 70%; max-width: 360px; opacity: 0.85; filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.6)); }
.hero__content {
padding: var(--sp-9) var(--sp-8);
background: var(--cowboy);
color: var(--light);
display: flex; flex-direction: column; justify-content: center;
}
.hero__eyebrow {
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
font-weight: 700;
color: var(--bronze);
display: inline-flex; align-items: center; gap: var(--sp-3);
margin-bottom: var(--sp-5);
}
.hero__eyebrow::before, .hero__eyebrow::after {
content: ''; width: 28px; height: 1px; background: var(--bronze);
}
.hero__title {
font-size: var(--fs-display);
line-height: 0.95;
letter-spacing: -0.02em;
font-weight: 800;
font-stretch: 70%;
color: var(--light);
margin-bottom: var(--sp-5);
}
.hero__title em { color: var(--bronze); font-style: italic; font-weight: 600; }
.hero__lede {
font-size: var(--fs-body-lg);
line-height: var(--lh-body);
color: var(--secondary);
max-width: 460px;
margin-bottom: var(--sp-7);
}
.hero__actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: center; }
@media (max-width: 900px) {
.hero__frame { grid-template-columns: 1fr; min-height: 0; }
.hero__art { aspect-ratio: 4/3; border-right: none; border-bottom: var(--bw-thick) solid var(--liquourice); }
.hero__content { padding: var(--sp-7) var(--sp-5); }
.hero__title { font-size: 56px; }
}
/* ============================================================
BLOCK: trust-strip (REUSED verbatim)
============================================================ */
.trust-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
border: var(--bw-regular) solid var(--caput);
border-radius: var(--r-md);
background: var(--secondary);
box-shadow: var(--sh-md);
position: relative;
}
.trust-strip::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background-image:
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23613F34'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23613F34'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23613F34'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23613F34'/%3E%3C/svg%3E");
background-position: 8px 8px, calc(100% - 8px) 8px, 8px calc(100% - 8px), calc(100% - 8px) calc(100% - 8px);
background-repeat: no-repeat;
background-size: 8px 8px;
}
.trust-strip__cell {
padding: var(--sp-6) var(--sp-5);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--sp-3);
border-right: var(--bw-hairline) solid var(--caput);
position: relative;
}
.trust-strip__cell:last-child { border-right: none; }
.trust-strip__cell::after {
content: '';
position: absolute;
right: -7px; top: 50%;
transform: translateY(-50%);
width: 14px; height: 14px;
border-radius: 50%;
background: var(--secondary);
border: var(--bw-hairline) solid var(--caput);
}
.trust-strip__cell:last-child::after { display: none; }
.trust-strip__icon {
width: 44px; height: 44px;
display: grid; place-items: center;
color: var(--sienna);
}
.trust-strip__icon svg { width: 36px; height: 36px; }
.trust-strip__title {
font-size: var(--fs-body);
font-weight: 700;
font-stretch: 80%;
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--liquourice);
}
.trust-strip__copy {
font-size: var(--fs-body-sm);
color: var(--caput);
line-height: var(--lh-card);
}
@media (max-width: 768px) {
.trust-strip { grid-template-columns: repeat(2, 1fr); }
.trust-strip__cell:nth-child(2) { border-right: none; }
.trust-strip__cell:nth-child(2)::after { display: none; }
.trust-strip__cell:nth-child(1), .trust-strip__cell:nth-child(2) { border-bottom: var(--bw-hairline) solid var(--caput); }
}
/* ============================================================
BLOCK: gear-divider (REUSED verbatim)
============================================================ */
.gear-divider {
display: block;
width: 100%;
height: 22px;
color: var(--caput);
margin: 0;
}
.gear-divider svg { width: 100%; height: 100%; }
.gear-divider--light { color: var(--bronze); }
/* ============================================================
BLOCK: tool-teaser-card (REUSED verbatim)
============================================================ */
.tool-teaser-card {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 280px auto;
background: var(--secondary);
border: var(--bw-regular) solid var(--caput);
border-radius: var(--r-md);
box-shadow: var(--sh-lg);
overflow: hidden;
position: relative;
}
.tool-teaser-card::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background-image:
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23613F34'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23613F34'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23613F34'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23613F34'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23613F34'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23613F34'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23613F34'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23613F34'/%3E%3C/svg%3E");
background-position:
10px 10px, calc(100% - 10px) 10px,
10px calc(100% - 10px), calc(100% - 10px) calc(100% - 10px),
50% 10px, 50% calc(100% - 10px),
10px 50%, calc(100% - 10px) 50%;
background-repeat: no-repeat;
background-size: 8px 8px;
z-index: 2;
}
.tool-teaser-card__art {
position: relative;
background:
radial-gradient(ellipse 50% 80% at 30% 60%, rgba(244,164,121,0.35) 0%, transparent 70%),
var(--liquourice);
display: grid; place-items: center;
color: var(--bronze);
border-bottom: var(--bw-regular) solid var(--caput);
overflow: hidden;
}
.tool-teaser-card__plate {
border: var(--bw-regular) solid var(--bronze);
padding: var(--sp-5) var(--sp-6);
background: rgba(27,19,20,0.6);
text-align: center;
border-radius: var(--r-md);
letter-spacing: var(--ls-widest);
font-size: var(--fs-eyebrow);
text-transform: uppercase;
font-weight: 700;
}
.tool-teaser-card__plate svg {
width: 56px; height: 56px;
margin: 0 auto var(--sp-3);
}
.tool-teaser-card__status {
position: absolute;
top: var(--sp-5); right: var(--sp-5);
font-size: 11px;
letter-spacing: var(--ls-widest);
text-transform: uppercase;
padding: var(--sp-2) var(--sp-3);
background: var(--sienna);
color: var(--light);
border: var(--bw-hairline) solid var(--liquourice);
font-weight: 700;
}
.tool-teaser-card__status--coming {
background: var(--cowboy);
color: var(--bronze);
border-color: var(--bronze);
}
.tool-teaser-card__body {
padding: var(--sp-6) var(--sp-7);
background: var(--secondary);
}
.tool-teaser-card__eyebrow {
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--sienna);
font-weight: 700;
margin-bottom: var(--sp-3);
}
.tool-teaser-card__title {
font-size: var(--fs-h3);
line-height: var(--lh-tight);
font-weight: 700;
font-stretch: 75%;
color: var(--liquourice);
margin-bottom: var(--sp-3);
letter-spacing: var(--ls-tight);
}
.tool-teaser-card__copy {
font-size: var(--fs-body);
color: var(--caput);
margin-bottom: var(--sp-6);
}
/* ============================================================
BLOCK: category-billboard (REUSED verbatim)
============================================================ */
.category-billboard {
position: relative;
display: flex;
flex-direction: column;
background: var(--rodeo);
border: var(--bw-regular) solid var(--caput);
border-radius: var(--r-md);
box-shadow: var(--sh-md);
overflow: hidden;
transition: transform 120ms ease, box-shadow 120ms ease;
}
.category-billboard:hover { transform: translate(-2px,-2px); box-shadow: var(--sh-lg); }
.category-billboard::before {
content: '';
position: absolute; inset: 0;
pointer-events: none;
background-image:
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23613F34'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23613F34'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23613F34'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23613F34'/%3E%3C/svg%3E");
background-position: 8px 8px, calc(100% - 8px) 8px, 8px calc(100% - 8px), calc(100% - 8px) calc(100% - 8px);
background-repeat: no-repeat;
background-size: 8px 8px;
z-index: 2;
}
.category-billboard__art {
aspect-ratio: 4/3;
position: relative;
background:
radial-gradient(ellipse 60% 60% at 50% 65%, rgba(244,164,121,0.45) 0%, transparent 70%),
var(--cowboy);
border-bottom: var(--bw-regular) solid var(--caput);
display: grid; place-items: center;
color: var(--bronze);
overflow: hidden;
}
.category-billboard__art-label {
position: absolute; bottom: var(--sp-3); left: var(--sp-3);
font-size: 10px;
letter-spacing: var(--ls-widest);
text-transform: uppercase;
padding: 3px 8px;
background: rgba(27,19,20,0.6);
border: 1px solid var(--bronze);
color: var(--bronze);
}
.category-billboard__silhouette { width: 65%; opacity: 0.85; }
.category-billboard__body {
padding: var(--sp-6);
display: flex; flex-direction: column;
gap: var(--sp-3);
flex: 1;
}
.category-billboard__eyebrow {
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--sienna);
font-weight: 700;
}
.category-billboard__title {
font-size: var(--fs-h4);
font-weight: 800;
font-stretch: 75%;
line-height: var(--lh-tight);
color: var(--liquourice);
letter-spacing: var(--ls-tight);
}
.category-billboard__copy {
font-size: var(--fs-body-sm);
color: var(--caput);
line-height: var(--lh-card);
flex: 1;
}
.category-billboard__cta {
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
font-weight: 700;
color: var(--sienna);
display: inline-flex; align-items: center; gap: var(--sp-2);
margin-top: var(--sp-3);
border-bottom: 1px solid var(--sienna);
padding-bottom: 2px;
align-self: flex-start;
}
/* ============================================================
BLOCK: product-card (REUSED verbatim)
============================================================ */
.product-card {
position: relative;
background: var(--secondary);
border: var(--bw-regular) solid var(--caput);
border-radius: var(--r-md);
box-shadow: var(--sh-md);
display: flex;
flex-direction: column;
overflow: hidden;
transition: transform 120ms ease, box-shadow 120ms ease;
}
.product-card:hover { transform: translate(-2px,-2px); box-shadow: var(--sh-lg); }
.product-card::before {
content: '';
position: absolute; inset: 0;
pointer-events: none;
background-image:
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23613F34'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23613F34'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23613F34'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23613F34'/%3E%3C/svg%3E");
background-position: 8px 8px, calc(100% - 8px) 8px, 8px calc(100% - 8px), calc(100% - 8px) calc(100% - 8px);
background-repeat: no-repeat;
background-size: 8px 8px;
z-index: 3;
}
.product-card__art {
position: relative;
aspect-ratio: 1/1;
background: var(--light);
border-bottom: var(--bw-regular) solid var(--caput);
display: grid; place-items: center;
color: var(--caput);
}
.product-card__art svg { width: 60%; opacity: 0.7; }
.product-card__loyalty {
position: absolute;
top: var(--sp-3); right: var(--sp-3);
width: 52px; height: 52px;
border-radius: 50%;
background: var(--bronze);
border: var(--bw-regular) solid var(--caput);
display: grid; place-items: center;
text-align: center; line-height: 1;
color: var(--liquourice);
font-weight: 800;
font-stretch: 75%;
box-shadow: var(--sh-sm);
z-index: 4;
}
.product-card__loyalty-pts { font-size: 18px; letter-spacing: -0.02em; }
.product-card__loyalty-lbl { font-size: 8px; letter-spacing: var(--ls-widest); text-transform: uppercase; margin-top: 1px; }
.product-card__tag {
position: absolute;
top: var(--sp-3); left: var(--sp-3);
font-size: 10px;
letter-spacing: var(--ls-widest);
text-transform: uppercase;
font-weight: 700;
padding: 3px 8px;
background: var(--liquourice);
color: var(--bronze);
border: 1px solid var(--bronze);
z-index: 4;
}
.product-card__body {
padding: var(--sp-5);
display: flex; flex-direction: column;
gap: var(--sp-2); flex: 1;
}
.product-card__game {
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--sienna);
font-weight: 700;
}
.product-card__title {
font-size: var(--fs-body);
font-weight: 700;
color: var(--liquourice);
line-height: var(--lh-card);
letter-spacing: var(--ls-tight);
}
.product-card__rating {
display: inline-flex; align-items: center; gap: var(--sp-2);
color: var(--sienna);
font-size: var(--fs-body-sm);
}
.product-card__rating svg { width: 14px; height: 14px; fill: currentColor; }
.product-card__rating-count { color: var(--caput); opacity: 0.7; font-size: var(--fs-body-sm); }
.product-card__price-row {
display: flex; justify-content: space-between; align-items: center;
margin-top: auto;
padding-top: var(--sp-4);
}
.product-card__price {
font-size: var(--fs-body-lg);
font-weight: 800;
color: var(--sienna);
font-stretch: 80%;
letter-spacing: var(--ls-tight);
}
.product-card__qv {
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
font-weight: 700;
color: var(--liquourice);
border-bottom: 1px solid var(--liquourice);
padding-bottom: 1px;
}
.product-card__qv:hover { color: var(--sienna); border-bottom-color: var(--sienna); }
/* ============================================================
BLOCK: tutorial-card (REUSED verbatim)
============================================================ */
.tutorial-card {
position: relative;
background: var(--rodeo);
border: var(--bw-regular) solid var(--caput);
border-radius: var(--r-md);
box-shadow: var(--sh-md);
overflow: hidden;
display: flex; flex-direction: column;
transition: transform 120ms ease, box-shadow 120ms ease;
}
.tutorial-card:hover { transform: translate(-2px,-2px); box-shadow: var(--sh-lg); }
.tutorial-card::before {
content: '';
position: absolute; inset: 0;
pointer-events: none;
background-image:
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23613F34'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23613F34'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23613F34'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23613F34'/%3E%3C/svg%3E");
background-position: 8px 8px, calc(100% - 8px) 8px, 8px calc(100% - 8px), calc(100% - 8px) calc(100% - 8px);
background-repeat: no-repeat;
background-size: 8px 8px;
z-index: 2;
}
.tutorial-card__art {
aspect-ratio: 16/10;
position: relative;
background:
radial-gradient(ellipse 70% 60% at 45% 60%, rgba(244,164,121,0.35) 0%, transparent 70%),
var(--cowboy);
border-bottom: var(--bw-regular) solid var(--caput);
display: grid; place-items: center;
color: var(--bronze);
overflow: hidden;
}
.tutorial-card__art-label {
position: absolute; bottom: var(--sp-3); left: var(--sp-3);
font-size: 10px;
letter-spacing: var(--ls-widest);
text-transform: uppercase;
padding: 3px 8px;
background: rgba(27,19,20,0.6);
border: 1px solid var(--bronze);
}
.tutorial-card__badges {
position: absolute; top: var(--sp-3); left: var(--sp-3);
display: flex; gap: var(--sp-2);
z-index: 3;
}
.tutorial-card__badge {
font-size: 10px;
letter-spacing: var(--ls-widest);
text-transform: uppercase;
font-weight: 700;
padding: 4px 8px;
background: var(--liquourice);
color: var(--light);
border: 1px solid var(--bronze);
line-height: 1;
}
.tutorial-card__badge--beginner { background: var(--positive); color: var(--light); border-color: var(--liquourice); }
.tutorial-card__badge--intermediate { background: var(--bronze); color: var(--liquourice); border-color: var(--liquourice); }
.tutorial-card__badge--advanced { background: var(--sienna); color: var(--light); border-color: var(--liquourice); }
.tutorial-card__format {
position: absolute; top: var(--sp-3); right: var(--sp-3);
font-size: 10px;
letter-spacing: var(--ls-widest);
text-transform: uppercase;
font-weight: 700;
padding: 4px 8px;
background: rgba(27,19,20,0.85);
color: var(--bronze);
border: 1px solid var(--bronze);
z-index: 3;
}
.tutorial-card__body {
padding: var(--sp-6);
display: flex; flex-direction: column;
gap: var(--sp-3); flex: 1;
}
.tutorial-card__category {
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--sienna);
font-weight: 700;
}
.tutorial-card__title {
font-size: var(--fs-h4);
font-weight: 800;
font-stretch: 75%;
line-height: var(--lh-tight);
color: var(--liquourice);
letter-spacing: var(--ls-tight);
}
.tutorial-card__excerpt {
font-size: var(--fs-body-sm);
color: var(--caput);
line-height: var(--lh-card);
flex: 1;
}
.tutorial-card__meta {
display: flex; justify-content: space-between; align-items: center;
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--caput);
padding-top: var(--sp-4);
border-top: 1px solid var(--caput);
margin-top: var(--sp-3);
}
.tutorial-card__cta {
color: var(--sienna);
font-weight: 700;
}
.tutorial-card__cta:hover { color: var(--liquourice); }
/* ============================================================
BLOCK: creator-card (REUSED verbatim)
============================================================ */
.creator-card {
position: relative;
background: var(--secondary);
border: var(--bw-regular) solid var(--caput);
border-radius: var(--r-md);
box-shadow: var(--sh-lg);
padding: var(--sp-7);
display: grid;
grid-template-columns: 180px 1fr;
gap: var(--sp-6);
align-items: start;
}
.creator-card::before {
content: '';
position: absolute; inset: 0;
pointer-events: none;
background-image:
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23613F34'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23613F34'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23613F34'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23613F34'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23613F34'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23613F34'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23613F34'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23613F34'/%3E%3C/svg%3E");
background-position:
10px 10px, calc(100% - 10px) 10px,
10px calc(100% - 10px), calc(100% - 10px) calc(100% - 10px),
50% 10px, 50% calc(100% - 10px),
10px 50%, calc(100% - 10px) 50%;
background-repeat: no-repeat;
background-size: 8px 8px;
}
.creator-card__avatar {
width: 180px; height: 180px;
border: var(--bw-thick) solid var(--liquourice);
border-radius: var(--r-md);
background:
radial-gradient(ellipse 70% 70% at 50% 40%, rgba(244,164,121,0.5) 0%, transparent 70%),
var(--cowboy);
display: grid; place-items: center;
color: var(--bronze);
box-shadow: var(--sh-sm);
font-size: 11px;
letter-spacing: var(--ls-widest);
text-transform: uppercase;
}
.creator-card__body { display: flex; flex-direction: column; gap: var(--sp-3); }
.creator-card__eyebrow {
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--sienna);
font-weight: 700;
}
.creator-card__name {
font-size: var(--fs-h3);
font-weight: 800;
font-stretch: 75%;
line-height: var(--lh-tight);
color: var(--liquourice);
letter-spacing: var(--ls-tight);
}
.creator-card__tags { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.creator-card__tag {
font-size: 11px;
letter-spacing: var(--ls-wider);
text-transform: uppercase;
padding: 3px 10px;
background: var(--rodeo);
color: var(--liquourice);
border: 1px solid var(--caput);
border-radius: var(--r-md);
font-weight: 700;
}
.creator-card__copy {
font-size: var(--fs-body);
color: var(--caput);
line-height: var(--lh-body);
}
.creator-card__cta-row {
display: flex; gap: var(--sp-4); align-items: center;
margin-top: var(--sp-3);
}
.creator-card__stats {
display: flex; gap: var(--sp-6);
padding-top: var(--sp-4);
border-top: 1px solid var(--caput);
}
.creator-card__stat-num {
font-size: var(--fs-h4);
font-weight: 800;
font-stretch: 80%;
color: var(--sienna);
letter-spacing: var(--ls-tight);
line-height: 1;
}
.creator-card__stat-lbl {
font-size: 11px;
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--caput);
font-weight: 600;
margin-top: 4px;
}
@media (max-width: 900px) {
.creator-card { grid-template-columns: 1fr; }
.creator-card__avatar { margin: 0 auto; }
}
/* ============================================================
BLOCK: creator-quote (REUSED verbatim)
============================================================ */
.creator-quote {
background: var(--cowboy);
color: var(--secondary);
border: var(--bw-regular) solid var(--liquourice);
border-radius: var(--r-md);
box-shadow: var(--sh-lg);
padding: var(--sp-7);
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}
.creator-quote__mark {
font-size: 96px;
line-height: 1;
color: var(--bronze);
font-weight: 800;
font-stretch: 80%;
margin-bottom: var(--sp-3);
}
.creator-quote__text {
font-size: var(--fs-h4);
line-height: var(--lh-heading);
font-style: italic;
color: var(--light);
margin-bottom: var(--sp-5);
letter-spacing: var(--ls-tight);
}
.creator-quote__attrib {
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--bronze);
font-weight: 700;
}
/* ============================================================
BLOCK: creator-thumb (REUSED verbatim)
============================================================ */
.creator-thumb {
flex: 0 0 220px;
background: var(--secondary);
border: var(--bw-regular) solid var(--caput);
border-radius: var(--r-md);
box-shadow: var(--sh-sm);
padding: var(--sp-5);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--sp-3);
scroll-snap-align: start;
position: relative;
transition: transform 120ms ease, box-shadow 120ms ease;
}
.creator-thumb:hover { transform: translate(-2px,-2px); box-shadow: var(--sh-md); }
.creator-thumb__avatar {
width: 92px; height: 92px;
border-radius: 50%;
border: var(--bw-regular) solid var(--liquourice);
background:
radial-gradient(ellipse 70% 70% at 50% 40%, rgba(244,164,121,0.45) 0%, transparent 70%),
var(--cowboy);
color: var(--bronze);
font-size: 11px;
letter-spacing: var(--ls-widest);
text-transform: uppercase;
display: grid; place-items: center;
}
.creator-thumb__name {
font-size: var(--fs-body);
font-weight: 700;
color: var(--liquourice);
letter-spacing: var(--ls-tight);
line-height: var(--lh-tight);
}
.creator-thumb__tags {
font-size: 11px;
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--sienna);
font-weight: 700;
}
/* ============================================================
BLOCK: painting-tile (REUSED verbatim)
============================================================ */
.painting-tile {
position: relative;
border: var(--bw-regular) solid var(--caput);
border-radius: var(--r-md);
box-shadow: var(--sh-sm);
overflow: hidden;
display: block;
transition: transform 120ms ease, box-shadow 120ms ease;
}
.painting-tile:hover { transform: translate(-2px,-2px); box-shadow: var(--sh-md); }
.painting-tile::before {
content: '';
position: absolute; inset: 0;
pointer-events: none;
background-image:
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23F4A479'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23F4A479'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23F4A479'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23F4A479'/%3E%3C/svg%3E");
background-position: 8px 8px, calc(100% - 8px) 8px, 8px calc(100% - 8px), calc(100% - 8px) calc(100% - 8px);
background-repeat: no-repeat;
background-size: 8px 8px;
z-index: 3;
}
.painting-tile__art {
position: absolute; inset: 0;
background:
radial-gradient(ellipse 70% 70% at 50% 60%, rgba(244,164,121,0.35) 0%, transparent 70%),
var(--liquourice);
display: grid; place-items: center;
color: var(--bronze);
font-size: 11px;
letter-spacing: var(--ls-widest);
text-transform: uppercase;
}
.painting-tile__overlay {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: var(--sp-3) var(--sp-4);
background: rgba(27,19,20,0.78);
color: var(--light);
font-size: var(--fs-body-sm);
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--sp-3);
border-top: 1px solid var(--bronze);
z-index: 2;
}
.painting-tile__author { font-weight: 700; letter-spacing: var(--ls-tight); }
.painting-tile__game {
font-size: 10px;
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--bronze);
font-weight: 700;
}
.painting-tile--tall { grid-row: span 2; }
.painting-tile--wide { grid-column: span 2; }
/* ============================================================
BLOCK: loyalty-strip (REUSED verbatim)
============================================================ */
.loyalty-strip {
background: var(--rodeo);
border-top: var(--bw-regular) solid var(--caput);
border-bottom: var(--bw-regular) solid var(--caput);
padding: var(--sp-8) 0;
position: relative;
}
.loyalty-strip__inner {
max-width: var(--container-default);
margin: 0 auto;
padding: 0 40px;
display: grid;
grid-template-columns: 1fr auto;
gap: var(--sp-8);
align-items: center;
}
.loyalty-strip__eyebrow {
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--sienna);
font-weight: 700;
margin-bottom: var(--sp-3);
}
.loyalty-strip__title {
font-size: var(--fs-h2);
font-weight: 800;
font-stretch: 75%;
color: var(--liquourice);
letter-spacing: var(--ls-tight);
line-height: var(--lh-tight);
margin-bottom: var(--sp-4);
}
.loyalty-strip__title em { color: var(--sienna); font-style: italic; font-weight: 600; }
.loyalty-strip__copy {
font-size: var(--fs-body-lg);
color: var(--caput);
margin-bottom: var(--sp-5);
max-width: 540px;
}
.loyalty-strip__brands { display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.loyalty-strip__brand {
border: var(--bw-regular) solid var(--caput);
background: var(--secondary);
padding: var(--sp-5);
min-width: 140px;
text-align: center;
border-radius: var(--r-md);
box-shadow: var(--sh-sm);
font-stretch: 75%;
font-weight: 800;
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--liquourice);
font-size: var(--fs-body);
line-height: 1.1;
}
.loyalty-strip__brand small {
display: block;
font-size: 10px;
letter-spacing: var(--ls-widest);
color: var(--sienna);
font-weight: 700;
margin-top: 4px;
}
.loyalty-strip__brand--self {
background: var(--liquourice);
color: var(--bronze);
border-color: var(--bronze);
}
.loyalty-strip__brand--self small { color: var(--bronze); }
@media (max-width: 900px) {
.loyalty-strip__inner { grid-template-columns: 1fr; }
}
/* ============================================================
BLOCK: newsletter-signup (REUSED verbatim)
============================================================ */
.newsletter-signup {
background: var(--secondary);
border: var(--bw-thick) solid var(--liquourice);
border-radius: var(--r-md);
box-shadow: var(--sh-xl);
padding: var(--sp-8);
max-width: 880px;
margin: 0 auto;
text-align: center;
position: relative;
}
.newsletter-signup::before {
content: '';
position: absolute; inset: 0;
pointer-events: none;
background-image:
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23613F34'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23613F34'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23613F34'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23613F34'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23613F34'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23613F34'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23613F34'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23613F34'/%3E%3C/svg%3E");
background-position:
12px 12px, calc(100% - 12px) 12px,
12px calc(100% - 12px), calc(100% - 12px) calc(100% - 12px),
50% 12px, 50% calc(100% - 12px),
12px 50%, calc(100% - 12px) 50%;
background-repeat: no-repeat;
background-size: 8px 8px;
}
.newsletter-signup__plate {
display: inline-block;
border: var(--bw-regular) solid var(--sienna);
padding: var(--sp-2) var(--sp-5);
margin-bottom: var(--sp-5);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--sienna);
font-weight: 700;
}
.newsletter-signup__title {
font-size: var(--fs-h2);
font-weight: 800;
font-stretch: 75%;
color: var(--liquourice);
letter-spacing: var(--ls-tight);
line-height: var(--lh-tight);
margin-bottom: var(--sp-4);
}
.newsletter-signup__lede {
font-size: var(--fs-body-lg);
color: var(--caput);
margin-bottom: var(--sp-6);
max-width: 540px;
margin-left: auto;
margin-right: auto;
}
.newsletter-signup__form {
display: grid;
grid-template-columns: 1fr auto;
max-width: 560px;
margin: 0 auto;
border: var(--bw-regular) solid var(--liquourice);
border-radius: var(--r-md);
box-shadow: var(--sh-md);
background: var(--light);
overflow: hidden;
}
.newsletter-signup__input {
font-family: inherit;
font-size: var(--fs-body);
padding: var(--sp-4) var(--sp-5);
border: none;
background: var(--light);
color: var(--liquourice);
outline: none;
}
.newsletter-signup__input::placeholder { color: var(--caput); opacity: 0.6; }
.newsletter-signup__submit {
background: var(--sienna);
color: var(--light);
font-weight: 800;
font-stretch: 75%;
letter-spacing: var(--ls-wider);
text-transform: uppercase;
font-size: var(--fs-body);
padding: 0 var(--sp-6);
border: none;
border-left: var(--bw-regular) solid var(--liquourice);
cursor: pointer;
}
.newsletter-signup__submit:hover { background: var(--liquourice); color: var(--bronze); }
.newsletter-signup__perks {
margin-top: var(--sp-5);
display: flex;
justify-content: center;
gap: var(--sp-6);
flex-wrap: wrap;
font-size: var(--fs-body-sm);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--caput);
font-weight: 600;
}
.newsletter-signup__perk { display: flex; align-items: center; gap: var(--sp-2); }
/* ============================================================
BLOCK: site-footer (REUSED verbatim)
============================================================ */
.site-footer {
background: var(--liquourice);
color: var(--secondary);
padding-top: var(--sp-9);
}
.site-footer__columns {
max-width: var(--container-wide);
margin: 0 auto;
padding: 0 40px;
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr;
gap: var(--sp-7);
padding-bottom: var(--sp-8);
border-bottom: 1px solid var(--caput);
}
.site-footer__brand-col { display: flex; flex-direction: column; gap: var(--sp-4); }
.site-footer__mark {
font-size: 28px;
font-weight: 800;
font-stretch: 70%;
color: var(--bronze);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
line-height: 1;
}
.site-footer__tagline {
font-size: var(--fs-body-sm);
color: var(--secondary);
font-style: italic;
line-height: var(--lh-card);
}
.site-footer__signoff {
margin-top: auto;
border-top: 1px solid var(--caput);
padding-top: var(--sp-4);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--bronze);
}
.site-footer__col-title {
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--bronze);
font-weight: 700;
margin-bottom: var(--sp-5);
padding-bottom: var(--sp-3);
border-bottom: 1px solid var(--caput);
}
.site-footer__list { display: flex; flex-direction: column; gap: var(--sp-3); list-style: none; padding: 0; }
.site-footer__list a {
font-size: var(--fs-body-sm);
color: var(--secondary);
line-height: var(--lh-card);
}
.site-footer__list a:hover { color: var(--bronze); }
.site-footer__newsletter-mini {
background: var(--cowboy);
border: 1px solid var(--caput);
border-radius: var(--r-md);
padding: var(--sp-4);
margin-top: var(--sp-3);
}
.site-footer__newsletter-mini label {
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--bronze);
font-weight: 700;
display: block;
margin-bottom: var(--sp-3);
}
.site-footer__newsletter-mini form {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--sp-2);
}
.site-footer__newsletter-mini input {
font-family: inherit;
font-size: var(--fs-body-sm);
padding: var(--sp-2) var(--sp-3);
border: 1px solid var(--bronze);
background: var(--liquourice);
color: var(--light);
border-radius: var(--r-sm);
}
.site-footer__newsletter-mini button {
background: var(--sienna);
color: var(--light);
font-size: 11px;
letter-spacing: var(--ls-wider);
text-transform: uppercase;
font-weight: 700;
padding: var(--sp-2) var(--sp-3);
border: 1px solid var(--bronze);
border-radius: var(--r-sm);
}
.site-footer__utility {
background: var(--cowboy);
padding: var(--sp-5) 0;
margin-top: var(--sp-7);
}
.site-footer__utility-inner {
max-width: var(--container-wide);
margin: 0 auto;
padding: 0 40px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
align-items: center;
gap: var(--sp-5);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-wider);
color: var(--secondary);
}
.site-footer__payments { display: flex; gap: var(--sp-3); align-items: center; }
.site-footer__pay-chip {
background: var(--secondary);
color: var(--liquourice);
font-size: 10px;
font-weight: 800;
letter-spacing: 0.04em;
padding: 4px 8px;
border-radius: var(--r-sm);
border: 1px solid var(--caput);
text-transform: uppercase;
}
.site-footer__copyright {
text-align: center;
text-transform: uppercase;
letter-spacing: var(--ls-widest);
color: var(--bronze);
}
.site-footer__socials { display: flex; justify-content: flex-end; gap: var(--sp-4); }
.site-footer__social {
width: 32px; height: 32px;
display: grid; place-items: center;
color: var(--secondary);
border: 1px solid var(--caput);
border-radius: var(--r-sm);
}
.site-footer__social:hover { color: var(--bronze); border-color: var(--bronze); }
.site-footer__social svg { width: 16px; height: 16px; }
@media (max-width: 1100px) {
.site-footer__columns { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.site-footer__columns { grid-template-columns: 1fr; }
.site-footer__utility-inner { grid-template-columns: 1fr; text-align: center; }
.site-footer__socials, .site-footer__payments { justify-content: center; }
}
</style>
</head>
<body>
<!-- ===== announcement-bar (REUSED) ===== -->
<div class="announcement-bar" role="region" aria-label="Site announcements">
<div class="announcement-bar__inner">
<div class="announcement-bar__aside">
<a href="#">Free UK shipping over <em>£75</em></a>
</div>
<div class="announcement-bar__rotator" aria-live="polite">
<span class="announcement-bar__dot" aria-hidden="true"></span>
<span class="announcement-bar__msg">New 40K Combat Patrols just landed — <em>build to a thousand points out of the box</em></span>
<span class="announcement-bar__dot" aria-hidden="true"></span>
</div>
<div class="announcement-bar__aside">
<a href="#">Earn here. <em>Redeem anywhere.</em></a>
</div>
</div>
</div>
<!-- ===== site-header (REUSED) ===== -->
<header class="site-header">
<div class="site-header__inner">
<a class="site-header__brand" href="#" aria-label="War Dungeon home">
<span class="site-header__mark">WD</span>
<span class="site-header__wordmark">War Dungeon<small>Specialty Wargames Outfitter</small></span>
</a>
<nav class="site-header__nav" aria-label="Primary">
<a href="#" class="is-active" aria-haspopup="true">Warhammer</a>
<a href="#">Dungeons & Dragons</a>
<a href="#">Tools</a>
<a href="#" aria-haspopup="true">Learn</a>
<a href="#">Creators</a>
</nav>
<div class="site-header__utility">
<span class="site-header__points" title="Loyalty balance">1,840 pts</span>
<a href="#" class="site-header__icon" aria-label="Search"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg></a>
<a href="#" class="site-header__icon" aria-label="Account"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6"/></svg></a>
<a href="#" class="site-header__icon" aria-label="Wishlist"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 1 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8z"/></svg><span class="site-header__badge">3</span></a>
<a href="#" class="site-header__icon" aria-label="Basket"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18l-2 11H5L3 6z"/><path d="M8 6V4a4 4 0 0 1 8 0v2"/></svg><span class="site-header__badge">5</span></a>
</div>
</div>
</header>
<!-- ===== hero (REUSED) ===== -->
<section class="hero" aria-label="Brand statement">
<div class="container">
<div class="hero__frame">
<div class="hero__art" aria-hidden="true">
<span class="hero__art-mark"></span>
<svg class="hero__art-silhouette" viewBox="0 0 200 240" fill="currentColor"><path d="M100 12c-14 0-26 8-30 22-2 6 0 12 4 16-10 6-14 16-12 28 2 8 6 14 12 18l-4 32c0 4 2 8 6 10l-8 18c-2 4 0 8 4 10l4 2c-4 6-6 12-4 20l4 14c2 6 8 10 14 10h20c6 0 12-4 14-10l4-14c2-8 0-14-4-20l4-2c4-2 6-6 4-10l-8-18c4-2 6-6 6-10l-4-32c6-4 10-10 12-18 2-12-2-22-12-28 4-4 6-10 4-16-4-14-16-22-30-22z"/></svg>
<span class="hero__art-label">Lit diorama — Imperial Knight standoff</span>
</div>
<div class="hero__content">
<span class="hero__eyebrow">Forge your campaign</span>
<h1 class="hero__title">Battle on Your Tabletop. <em>Crafted on Ours.</em></h1>
<p class="hero__lede">Warhammer, Age of Sigmar, The Old World, and Dungeons & Dragons — stocked, painted, played, and answered for by hobbyists who roll the dice on Friday nights.</p>
<div class="hero__actions">
<a class="btn btn--on-dark" href="#">Build Your Army</a>
<a class="btn btn--ghost btn--on-dark" href="#">Shop New Releases</a>
</div>
</div>
</div>
</div>
</section>
<!-- ===== trust-strip (REUSED) — placed on rodeo-light band ===== -->
<section class="band band--rodeo-light">
<div class="container trust-wrap">
<div class="trust-strip">
<div class="trust-strip__cell">
<span class="trust-strip__icon" aria-hidden="true"><svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="6" y="14" width="28" height="18" rx="1"/><path d="M34 18h6l4 6v8h-10z"/><circle cx="14" cy="36" r="4"/><circle cx="36" cy="36" r="4"/></svg></span>
<h3 class="trust-strip__title">Free UK Shipping</h3>
<p class="trust-strip__copy">On orders over £75. Next-day on the rolling stock.</p>
</div>
<div class="trust-strip__cell">
<span class="trust-strip__icon" aria-hidden="true"><svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M24 6 L40 14 L40 26 C40 34 32 40 24 42 C16 40 8 34 8 26 L8 14 Z"/><path d="M18 24 L22 28 L30 18"/></svg></span>
<h3 class="trust-strip__title">30-Day Returns</h3>
<p class="trust-strip__copy">Unopened plastic or rule-light dice — bring it back, no quarrel.</p>
</div>
<div class="trust-strip__cell">
<span class="trust-strip__icon" aria-hidden="true"><svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="24" cy="24" r="18"/><path d="M24 6 V42 M6 24 H42"/></svg></span>
<h3 class="trust-strip__title">Multi-Game Expertise</h3>
<p class="trust-strip__copy">40K · Age of Sigmar · The Old World · D&D</p>
</div>
<div class="trust-strip__cell">
<span class="trust-strip__icon" aria-hidden="true"><svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5"><polygon points="24,4 30,18 44,18 33,28 38,42 24,34 10,42 15,28 4,18 18,18"/></svg></span>
<h3 class="trust-strip__title">A Nerdworks Brand</h3>
<p class="trust-strip__copy">Backed by twelve years of UK specialist hobby retail.</p>
</div>
</div>
</div>
</section>
<!-- ===== Tools teaser (REUSED tool-teaser-card x2) ===== -->
<section class="band band--rodeo section-pad" aria-label="In-house tools">
<div class="container">
<header class="section-head">
<span class="section-head__eyebrow">The workshop</span>
<h2 class="section-head__title">Tools the others <em>don't have.</em></h2>
<p class="section-head__lede">Built in-house for the way we actually play. List, sim, deploy — the workbench is open.</p>
</header>
<div class="tool-grid">
<article class="tool-teaser-card">
<div class="tool-teaser-card__art" aria-hidden="true">
<span class="tool-teaser-card__status">Live now</span>
<div class="tool-teaser-card__plate">
<svg viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><circle cx="32" cy="32" r="22"/><circle cx="32" cy="32" r="8"/></svg>
Army Builder
</div>
</div>
<div class="tool-teaser-card__body">
<span class="tool-teaser-card__eyebrow">Launch feature</span>
<h3 class="tool-teaser-card__title">Army Builder</h3>
<p class="tool-teaser-card__copy">Pick a faction, drop in units, watch the points tally in real time. Save your list, share it with your group, and add every part to basket in one shove.</p>
<a class="btn" href="#">Start a List</a>
</div>
</article>
<article class="tool-teaser-card">
<div class="tool-teaser-card__art" aria-hidden="true">
<span class="tool-teaser-card__status tool-teaser-card__status--coming">Coming soon</span>
<div class="tool-teaser-card__plate">
<svg viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><rect x="10" y="10" width="44" height="44" rx="2"/><path d="M10 22h44M10 34h44M10 46h44M22 10v44M34 10v44M46 10v44"/></svg>
Battle Simulator
</div>
</div>
<div class="tool-teaser-card__body">
<span class="tool-teaser-card__eyebrow">Phase 2 — in the works</span>
<h3 class="tool-teaser-card__title">Battle Simulator</h3>
<p class="tool-teaser-card__copy">Two armies, one map, a turn-based viewer that calls every roll. Live commentary from the dispatch room — PvP your saved lists or beat the house.</p>
<a class="btn btn--ghost" href="#">Get on the Roster</a>
</div>
</article>
</div>
</div>
</section>
<!-- ===== gear-divider (REUSED) ===== -->
<div class="divider-shelf">
<div class="container">
<div class="gear-divider" aria-hidden="true">
<svg viewBox="0 0 1440 22" preserveAspectRatio="none">
<line x1="0" y1="11" x2="1440" y2="11" stroke="currentColor" stroke-width="1"/>
<g fill="currentColor">
<circle cx="120" cy="11" r="4"/>
<circle cx="360" cy="11" r="4"/>
<circle cx="600" cy="11" r="4"/>
<circle cx="840" cy="11" r="4"/>
<circle cx="1080" cy="11" r="4"/>
<circle cx="1320" cy="11" r="4"/>
<circle cx="720" cy="11" r="7" fill="none" stroke="currentColor" stroke-width="1.5"/>
<circle cx="720" cy="11" r="2.2"/>
</g>
</svg>
</div>
</div>
</div>
<!-- ===== Choose Your Game (REUSED category-billboard x6) ===== -->
<section class="band band--rodeo-light section-pad" aria-label="Choose your game">
<div class="container">
<header class="section-head">
<span class="section-head__eyebrow">Choose your game</span>
<h2 class="section-head__title">Six counters, six campaigns. <em>Pick a board.</em></h2>
<p class="section-head__lede">Every category here opens onto a curated room, not a wall of product tiles. Tell us which world you're in and we'll show you the corner of the shop that matters.</p>
</header>
<div class="category-grid">
<a class="category-billboard" href="#">
<div class="category-billboard__art" aria-hidden="true">
<svg class="category-billboard__silhouette" viewBox="0 0 200 200" fill="currentColor"><path d="M100 20l-30 20v40l-20 10v50l30 20h40l30-20v-50l-20-10V40l-30-20z"/></svg>
<span class="category-billboard__art-label">Lit diorama</span>
</div>
<div class="category-billboard__body">
<span class="category-billboard__eyebrow">Far-future grimdark</span>
<h3 class="category-billboard__title">Warhammer 40,000</h3>
<p class="category-billboard__copy">Combat Patrols, Codex armies, and the new 10th edition starter sets. Bolters, bayonets, and the cold honour of the Astra Militarum.</p>
<span class="category-billboard__cta">Enter the Grimdark →</span>
</div>
</a>
<a class="category-billboard" href="#">
<div class="category-billboard__art" aria-hidden="true">
<svg class="category-billboard__silhouette" viewBox="0 0 200 200" fill="currentColor"><path d="M100 18c-22 0-40 18-40 40 0 18 12 32 28 38v66l-16 12v8h56v-8l-16-12V96c16-6 28-20 28-38 0-22-18-40-40-40z"/></svg>
<span class="category-billboard__art-label">Lit diorama</span>
</div>
<div class="category-billboard__body">
<span class="category-billboard__eyebrow">Hammer-and-haunted fantasy</span>
<h3 class="category-billboard__title">Age of Sigmar</h3>
<p class="category-billboard__copy">Mortal Realms, Stormcast lightning, and gravehosts that march by lantern. Every Spearhead and battletome carried, every chamber stocked.</p>
<span class="category-billboard__cta">Walk the Realms →</span>
</div>
</a>
<a class="category-billboard" href="#">
<div class="category-billboard__art" aria-hidden="true">
<svg class="category-billboard__silhouette" viewBox="0 0 200 200" fill="currentColor"><path d="M100 14L50 60v60c0 36 22 56 50 70 28-14 50-34 50-70V60L100 14zm0 24l36 32v50c0 26-14 40-36 52-22-12-36-26-36-52V70l36-32z"/></svg>
<span class="category-billboard__art-label">Lit diorama</span>
</div>
<div class="category-billboard__body">
<span class="category-billboard__eyebrow">Old-school rank-and-flank</span>
<h3 class="category-billboard__title">The Old World</h3>
<p class="category-billboard__copy">Regiments of Renown, Bretonnian lances, the Empire of Karl Franz. The new edition that brought the old maps back, fully ranged up.</p>
<span class="category-billboard__cta">Form the Line →</span>
</div>
</a>
<a class="category-billboard" href="#">
<div class="category-billboard__art" aria-hidden="true">
<svg class="category-billboard__silhouette" viewBox="0 0 200 200" fill="currentColor"><path d="M100 20l-70 40v80l70 40 70-40V60l-70-40zm0 16l54 30-54 30-54-30 54-30zm-60 42l54 30v60l-54-30v-60zm120 0v60l-54 30v-60l54-30z"/></svg>
<span class="category-billboard__art-label">Lit diorama</span>
</div>
<div class="category-billboard__body">
<span class="category-billboard__eyebrow">Dice, dungeons, decisions</span>
<h3 class="category-billboard__title">Dungeons & Dragons</h3>
<p class="category-billboard__copy">Core rulebooks, the 2024 revision, every official adventure module, and dice sets that don't all roll fours. For first-time DMs and twenty-year veterans alike.</p>
<span class="category-billboard__cta">Roll for Initiative →</span>
</div>
</a>
<a class="category-billboard" href="#">
<div class="category-billboard__art" aria-hidden="true">
<svg class="category-billboard__silhouette" viewBox="0 0 200 200" fill="currentColor"><path d="M40 60h120v20H40zm0 30h120v20H40zm0 30h120v20H40zm0 30h120v20H40z"/><circle cx="60" cy="40" r="14"/><circle cx="100" cy="40" r="14"/><circle cx="140" cy="40" r="14"/></svg>
<span class="category-billboard__art-label">Lit photo</span>
</div>
<div class="category-billboard__body">
<span class="category-billboard__eyebrow">Tools, glues, brushes, bases</span>
<h3 class="category-billboard__title">Hobby Supplies</h3>
<p class="category-billboard__copy">Everything the brushwork actually needs: nippers, files, mould-line scrapers, plastic glue that grips, basing kits stocked by terrain type.</p>
<span class="category-billboard__cta">Stock the Workbench →</span>
</div>
</a>
<a class="category-billboard" href="#">
<div class="category-billboard__art" aria-hidden="true">
<svg class="category-billboard__silhouette" viewBox="0 0 200 200" fill="currentColor"><rect x="60" y="20" width="80" height="160" rx="8"/><rect x="76" y="36" width="48" height="20"/><circle cx="100" cy="120" r="12"/></svg>
<span class="category-billboard__art-label">Lit photo</span>
</div>
<div class="category-billboard__body">
<span class="category-billboard__eyebrow">Citadel, Contrast, Vallejo, Army Painter</span>
<h3 class="category-billboard__title">Paints</h3>
<p class="category-billboard__copy">Every shade carried, every range cross-referenced, with recipe cards from the paint desk for the schemes that actually look like the box art.</p>
<span class="category-billboard__cta">Crack a Pot →</span>
</div>
</a>
</div>
</div>
</section>
<!-- ===== gear-divider (REUSED) ===== -->
<div class="divider-shelf">
<div class="container">
<div class="gear-divider" aria-hidden="true">
<svg viewBox="0 0 1440 22" preserveAspectRatio="none">
<line x1="0" y1="11" x2="1440" y2="11" stroke="currentColor" stroke-width="1"/>
<g fill="currentColor">
<circle cx="120" cy="11" r="4"/>
<circle cx="360" cy="11" r="4"/>
<circle cx="600" cy="11" r="4"/>
<circle cx="840" cy="11" r="4"/>
<circle cx="1080" cy="11" r="4"/>
<circle cx="1320" cy="11" r="4"/>
<circle cx="720" cy="11" r="7" fill="none" stroke="currentColor" stroke-width="1.5"/>
<circle cx="720" cy="11" r="2.2"/>
</g>
</svg>
</div>
</div>
</div>
<!-- ===== Fan Favourites (REUSED product-card x4) ===== -->
<section class="band band--rodeo section-pad" aria-label="Fan favourites">
<div class="container">
<header class="section-head">
<span class="section-head__eyebrow">Fan favourites</span>
<h2 class="section-head__title">What's been walking <em>off the shelf.</em></h2>
<p class="section-head__lede">A mixed handful from across the games — what the regulars are picking up this fortnight, and what we'd happily put on the workbench ourselves.</p>
</header>
<div class="product-row">
<article class="product-card">
<div class="product-card__art" aria-hidden="true">
<span class="product-card__tag">New</span>
<span class="product-card__loyalty">
<span class="product-card__loyalty-pts">+84</span>
<span class="product-card__loyalty-lbl">pts</span>
</span>
<svg viewBox="0 0 200 200" fill="var(--liquourice)"><rect x="40" y="60" width="120" height="100" rx="6"/><rect x="60" y="40" width="80" height="22"/></svg>
</div>
<div class="product-card__body">
<span class="product-card__game">Warhammer 40,000</span>
<h3 class="product-card__title">Combat Patrol — Adepta Sororitas</h3>
<span class="product-card__rating">
<svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>
<svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>
<svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>
<svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>
<svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" fill-opacity="0.3"/></svg>
<span class="product-card__rating-count">4.7 (38)</span>
</span>
<div class="product-card__price-row">
<span class="product-card__price">£84.00</span>
<a class="product-card__qv" href="#">Quick view</a>
</div>
</div>
</article>
<article class="product-card">
<div class="product-card__art" aria-hidden="true">
<span class="product-card__tag">Bestseller</span>
<span class="product-card__loyalty">
<span class="product-card__loyalty-pts">+62</span>
<span class="product-card__loyalty-lbl">pts</span>
</span>
<svg viewBox="0 0 200 200" fill="var(--liquourice)"><polygon points="100,30 160,80 140,160 60,160 40,80"/></svg>
</div>
<div class="product-card__body">
<span class="product-card__game">Age of Sigmar</span>
<h3 class="product-card__title">Spearhead — Stormcast Eternals</h3>
<span class="product-card__rating">
<svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>
<svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>
<svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>
<svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>
<svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>
<span class="product-card__rating-count">4.9 (112)</span>
</span>
<div class="product-card__price-row">
<span class="product-card__price">£62.00</span>
<a class="product-card__qv" href="#">Quick view</a>
</div>
</div>
</article>
<article class="product-card">
<div class="product-card__art" aria-hidden="true">
<span class="product-card__tag">Pre-order</span>
<span class="product-card__loyalty">
<span class="product-card__loyalty-pts">+48</span>
<span class="product-card__loyalty-lbl">pts</span>
</span>
<svg viewBox="0 0 200 200" fill="var(--liquourice)"><rect x="50" y="40" width="100" height="130" rx="4"/><rect x="68" y="60" width="64" height="6"/><rect x="68" y="76" width="64" height="6"/><rect x="68" y="92" width="42" height="6"/></svg>
</div>
<div class="product-card__body">
<span class="product-card__game">Dungeons & Dragons</span>
<h3 class="product-card__title">Player's Handbook (2024 Revision)</h3>
<span class="product-card__rating">
<svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>
<svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>
<svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>
<svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>
<svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" fill-opacity="0.5"/></svg>
<span class="product-card__rating-count">4.6 (87)</span>
</span>
<div class="product-card__price-row">
<span class="product-card__price">£47.50</span>
<a class="product-card__qv" href="#">Quick view</a>
</div>
</div>
</article>
<article class="product-card">
<div class="product-card__art" aria-hidden="true">
<span class="product-card__loyalty">
<span class="product-card__loyalty-pts">+28</span>
<span class="product-card__loyalty-lbl">pts</span>
</span>
<svg viewBox="0 0 200 200" fill="var(--liquourice)"><circle cx="80" cy="100" r="36"/><circle cx="120" cy="100" r="36"/><rect x="44" y="60" width="112" height="14" rx="4"/><rect x="60" y="130" width="80" height="14" rx="4"/></svg>
</div>
<div class="product-card__body">
<span class="product-card__game">Hobby · Paints</span>
<h3 class="product-card__title">Citadel Contrast Starter Set (12 pots)</h3>
<span class="product-card__rating">
<svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>
<svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>
<svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>
<svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>
<svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" fill-opacity="0.3"/></svg>
<span class="product-card__rating-count">4.5 (54)</span>
</span>
<div class="product-card__price-row">
<span class="product-card__price">£28.00</span>
<a class="product-card__qv" href="#">Quick view</a>
</div>
</div>
</article>
</div>
</div>
</section>
<!-- ===== Tutorials editorial strip (REUSED tutorial-card x3) ===== -->
<section class="band band--rodeo-light section-pad" aria-label="Guides and tutorials">
<div class="container">
<header class="section-head">
<span class="section-head__eyebrow">From the workbench</span>
<h2 class="section-head__title">How-to guides, tutorials, <em>and field notes.</em></h2>
<p class="section-head__lede">Sit-down reads and step-by-steps from people who've actually put a brush to the model. Three formats, no fluff.</p>
</header>
<div class="tutorial-row">
<article class="tutorial-card">
<div class="tutorial-card__art" aria-hidden="true">
<div class="tutorial-card__badges">
<span class="tutorial-card__badge tutorial-card__badge--beginner">Beginner</span>
</div>
<span class="tutorial-card__format">Read · 8 min</span>
<span class="tutorial-card__art-label">Lit photo — brushes in hand</span>
</div>
<div class="tutorial-card__body">
<span class="tutorial-card__category">Painting</span>
<h3 class="tutorial-card__title">Your First Three Citadel Contrasts</h3>
<p class="tutorial-card__excerpt">If you've never touched a brush, start here. Three pots, one brush, one undercoat — and a marine on the table by tea time.</p>
<div class="tutorial-card__meta">
<span>Lily · Updated Apr</span>
<a class="tutorial-card__cta" href="#">Read Guide →</a>
</div>
</div>
</article>
<article class="tutorial-card">
<div class="tutorial-card__art" aria-hidden="true">
<div class="tutorial-card__badges">
<span class="tutorial-card__badge tutorial-card__badge--intermediate">Intermediate</span>
</div>
<span class="tutorial-card__format">Watch · 22 min</span>
<span class="tutorial-card__art-label">Lit photo — deployment zone</span>
</div>
<div class="tutorial-card__body">
<span class="tutorial-card__category">Rules · 40K</span>
<h3 class="tutorial-card__title">Reading the Mission Pack Like a Native</h3>
<p class="tutorial-card__excerpt">Primary, secondary, and the bracketed deployment maps. Twenty minutes of plain English on what those cards actually want from you.</p>
<div class="tutorial-card__meta">
<span>Tom Hesketh · New</span>
<a class="tutorial-card__cta" href="#">Watch Tutorial →</a>
</div>
</div>
</article>
<article class="tutorial-card">
<div class="tutorial-card__art" aria-hidden="true">
<div class="tutorial-card__badges">
<span class="tutorial-card__badge tutorial-card__badge--advanced">Advanced</span>
</div>
<span class="tutorial-card__format">Read · 14 min</span>
<span class="tutorial-card__art-label">Lit photo — terrain build-up</span>
</div>
<div class="tutorial-card__body">
<span class="tutorial-card__category">Terrain</span>
<h3 class="tutorial-card__title">Building a Mordheim Side Street From Foamcore</h3>
<p class="tutorial-card__excerpt">Foamcore, PVA, sand, and a craft knife. Two evenings, one ruined cobblestone alley, and a table that suddenly looks like the campaign sourcebook.</p>
<div class="tutorial-card__meta">
<span>Maeve Cross · Apr</span>
<a class="tutorial-card__cta" href="#">Read Guide →</a>
</div>
</div>
</article>
</div>
</div>
</section>
<!-- ===== gear-divider (REUSED, --light variant for dark band ahead) ===== -->
<div class="divider-shelf divider-shelf--cowboy">
<div class="container">
<div class="gear-divider gear-divider--light" aria-hidden="true">
<svg viewBox="0 0 1440 22" preserveAspectRatio="none">
<line x1="0" y1="11" x2="1440" y2="11" stroke="currentColor" stroke-width="1"/>
<g fill="currentColor">
<circle cx="120" cy="11" r="4"/>
<circle cx="360" cy="11" r="4"/>
<circle cx="600" cy="11" r="4"/>
<circle cx="840" cy="11" r="4"/>
<circle cx="1080" cy="11" r="4"/>
<circle cx="1320" cy="11" r="4"/>
<circle cx="720" cy="11" r="7" fill="none" stroke="currentColor" stroke-width="1.5"/>
<circle cx="720" cy="11" r="2.2"/>
</g>
</svg>
</div>
</div>
</div>
<!-- ===== Creator Partner spotlight (REUSED creator-card + creator-quote + creator-thumb x5) ===== -->
<section class="band band--cowboy section-pad" aria-label="Creator partners">
<div class="container">
<header class="section-head section-head--dark">
<span class="section-head__eyebrow">Creator partners</span>
<h2 class="section-head__title">The people <em>at the workbench.</em></h2>
<p class="section-head__lede">Painters, list-builders, lore-keepers and rules tutors who write for the site and stream from their basements. Their stuff, not ours.</p>
</header>
<div class="creator-grid">
<article class="creator-card">
<div class="creator-card__avatar" aria-hidden="true">Avatar — portrait</div>
<div class="creator-card__body">
<span class="creator-card__eyebrow">Featured this month</span>
<h3 class="creator-card__name">Maeve "Iron Maiden" Cross</h3>
<div class="creator-card__tags">
<span class="creator-card__tag">Warhammer 40K</span>
<span class="creator-card__tag">Age of Sigmar</span>
<span class="creator-card__tag">Painting</span>
</div>
<p class="creator-card__copy">Twelve years on the brush and the only person in the country who paints Sisters of Battle armour faster than they release codices.</p>
<div class="creator-card__cta-row">
<a class="btn" href="#">Visit Creator</a>
<a class="btn btn--ghost btn--small" href="#">Watch Live</a>
</div>
<div class="creator-card__stats">
<div><div class="creator-card__stat-num">42</div><div class="creator-card__stat-lbl">Guides authored</div></div>
<div><div class="creator-card__stat-num">11.8k</div><div class="creator-card__stat-lbl">Followers</div></div>
<div><div class="creator-card__stat-num">£18/hr</div><div class="creator-card__stat-lbl">Live nights</div></div>
</div>
</div>
</article>
<aside class="creator-quote">
<span class="creator-quote__mark" aria-hidden="true">“</span>
<p class="creator-quote__text">The shop already had what I needed. The community here is what makes me keep coming back to teach.</p>
<p class="creator-quote__attrib">— Maeve Cross, on War Dungeon</p>
</aside>
</div>
<div class="creator-strip" aria-label="More creators">
<a class="creator-thumb" href="#">
<div class="creator-thumb__avatar" aria-hidden="true">Avatar</div>
<h4 class="creator-thumb__name">Tom Hesketh</h4>
<p class="creator-thumb__tags">The Old World</p>
</a>
<a class="creator-thumb" href="#">
<div class="creator-thumb__avatar" aria-hidden="true">Avatar</div>
<h4 class="creator-thumb__name">Priya Bains</h4>
<p class="creator-thumb__tags">D&D · DM</p>
</a>
<a class="creator-thumb" href="#">
<div class="creator-thumb__avatar" aria-hidden="true">Avatar</div>
<h4 class="creator-thumb__name">Edmund "Eddy" Cale</h4>
<p class="creator-thumb__tags">40K · Tournament</p>
</a>
<a class="creator-thumb" href="#">
<div class="creator-thumb__avatar" aria-hidden="true">Avatar</div>
<h4 class="creator-thumb__name">Suki Tanaka</h4>
<p class="creator-thumb__tags">Terrain build</p>
</a>
<a class="creator-thumb" href="#">
<div class="creator-thumb__avatar" aria-hidden="true">Avatar</div>
<h4 class="creator-thumb__name">Joe Vance</h4>
<p class="creator-thumb__tags">Age of Sigmar</p>
</a>
</div>
</div>
</section>
<!-- ===== Painting Showcase (REUSED painting-tile x6, masonry) ===== -->
<section class="band band--liquourice section-pad" aria-label="Painting showcase">
<div class="container">
<header class="section-head section-head--dark">
<span class="section-head__eyebrow">Painting showcase</span>
<h2 class="section-head__title">The community workbench. <em>Hung in the gallery.</em></h2>
<p class="section-head__lede">A handful of recent submissions from the painting showcase board. Send yours in — if it sits well on the table, it sits well on this wall.</p>
</header>
<div class="painting-masonry">
<a class="painting-tile painting-tile--tall painting-tile--wide" href="#" aria-label="Painting by James L">
<div class="painting-tile__art" aria-hidden="true">Lit photo — Imperial Knight</div>
<div class="painting-tile__overlay">
<span class="painting-tile__author">James L.</span>
<span class="painting-tile__game">40K · Knight Errant</span>
</div>
</a>
<a class="painting-tile" href="#" aria-label="Painting by Anika R">
<div class="painting-tile__art" aria-hidden="true">Lit photo — Stormcast</div>
<div class="painting-tile__overlay">
<span class="painting-tile__author">Anika R.</span>
<span class="painting-tile__game">AoS · Vindictors</span>
</div>
</a>
<a class="painting-tile" href="#" aria-label="Painting by Marcus T">
<div class="painting-tile__art" aria-hidden="true">Lit photo — Mind Flayer</div>
<div class="painting-tile__overlay">
<span class="painting-tile__author">Marcus T.</span>
<span class="painting-tile__game">D&D · Mind Flayer</span>
</div>
</a>
<a class="painting-tile painting-tile--wide" href="#" aria-label="Painting by Petra K">
<div class="painting-tile__art" aria-hidden="true">Lit photo — Empire detachment</div>
<div class="painting-tile__overlay">
<span class="painting-tile__author">Petra K.</span>
<span class="painting-tile__game">The Old World · State Troops</span>
</div>
</a>
<a class="painting-tile painting-tile--tall" href="#" aria-label="Painting by Dani H">
<div class="painting-tile__art" aria-hidden="true">Lit photo — Necron</div>
<div class="painting-tile__overlay">
<span class="painting-tile__author">Dani H.</span>
<span class="painting-tile__game">40K · Necron Overlord</span>
</div>
</a>
<a class="painting-tile" href="#" aria-label="Painting by Will B">
<div class="painting-tile__art" aria-hidden="true">Lit photo — Mordheim warband</div>
<div class="painting-tile__overlay">
<span class="painting-tile__author">Will B.</span>
<span class="painting-tile__game">Mordheim · Warband</span>
</div>
</a>
</div>
<div class="painting-cta">
<a class="btn" href="#">Submit Your Painting</a>
<a class="btn btn--ghost btn--on-dark" href="#">Browse the Gallery</a>
</div>
</div>
</section>
<!-- ===== loyalty-strip (REUSED — block owns its own rodeo ground + borders) ===== -->
<section class="loyalty-strip" aria-label="Cross-brand loyalty">
<div class="loyalty-strip__inner">
<div>
<span class="loyalty-strip__eyebrow">Nerdworks loyalty</span>
<h2 class="loyalty-strip__title">Earn here. <em>Redeem anywhere.</em></h2>
<p class="loyalty-strip__copy">Every pound spent at War Dungeon earns loyalty points you can spend at our sister brands — Nerdworks for TCG and tabletop, ArtSabers for Star Wars helmets and lightsabers, and Paragon for peripherals.</p>
<div style="display:flex;gap:16px;flex-wrap:wrap;">
<a class="btn" href="#">Sign in to see your balance</a>
<a class="btn btn--ghost" href="#">How loyalty points work</a>
</div>
</div>
<div class="loyalty-strip__brands">
<div class="loyalty-strip__brand loyalty-strip__brand--self">War Dungeon<small>Earn here</small></div>
<div class="loyalty-strip__brand">Nerdworks<small>Redeem</small></div>
<div class="loyalty-strip__brand">ArtSabers<small>Redeem</small></div>
<div class="loyalty-strip__brand">Paragon<small>Redeem</small></div>
</div>
</div>
</section>
<!-- ===== Newsletter (REUSED newsletter-signup) ===== -->
<section class="band band--rodeo-light" aria-label="Newsletter signup">
<div class="container newsletter-wrap">
<div class="newsletter-signup">
<span class="newsletter-signup__plate">Field dispatches</span>
<h2 class="newsletter-signup__title">Join the Garrison.</h2>
<p class="newsletter-signup__lede">One short dispatch a week: new releases, hobby tutorials, list ideas, and what's actually worth your time. We don't pad the inbox.</p>
<form class="newsletter-signup__form" onsubmit="event.preventDefault();">
<input class="newsletter-signup__input" type="email" placeholder="Your dispatch address" aria-label="Email address" required>
<button class="newsletter-signup__submit" type="submit">Enlist</button>
</form>
<div class="newsletter-signup__perks">
<span class="newsletter-signup__perk">10% off your first order</span>
<span class="newsletter-signup__perk">Early access to releases</span>
<span class="newsletter-signup__perk">Painters' tips weekly</span>
</div>
</div>
</div>
</section>
<!-- ===== site-footer (REUSED) ===== -->
<footer class="site-footer">
<div class="site-footer__columns">
<div class="site-footer__brand-col">
<div class="site-footer__mark">War Dungeon</div>
<p class="site-footer__tagline">Specialty wargames outfitter. Painted, stocked, and answered for by people who roll the dice on Friday nights.</p>
<div class="site-footer__signoff">A Nerdworks Brand</div>
</div>
<div>
<h4 class="site-footer__col-title">Shop</h4>
<ul class="site-footer__list">
<li><a href="#">Warhammer 40,000</a></li>
<li><a href="#">Age of Sigmar</a></li>
<li><a href="#">The Old World</a></li>
<li><a href="#">Dungeons & Dragons</a></li>
<li><a href="#">Hobby Supplies</a></li>
<li><a href="#">Paints</a></li>
</ul>
</div>
<div>
<h4 class="site-footer__col-title">Discover</h4>
<ul class="site-footer__list">
<li><a href="#">Army Builder</a></li>
<li><a href="#">Battle Simulator</a></li>
<li><a href="#">How-To Guides</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Creator Partners</a></li>
<li><a href="#">Painting Showcase</a></li>
</ul>
</div>
<div>
<h4 class="site-footer__col-title">Help</h4>
<ul class="site-footer__list">
<li><a href="#">Contact Us</a></li>
<li><a href="#">Shipping & Delivery</a></li>
<li><a href="#">Returns & Exchanges</a></li>
<li><a href="#">Order Tracking</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</div>
<div>
<h4 class="site-footer__col-title">Brand & Loyalty</h4>
<ul class="site-footer__list">
<li><a href="#">About War Dungeon</a></li>
<li><a href="#">Sister Brands</a></li>
<li><a href="#">Loyalty Programme</a></li>
<li><a href="#">Affiliate Programme</a></li>
</ul>
<div class="site-footer__newsletter-mini">
<label for="footer-email">Field dispatches</label>
<form onsubmit="event.preventDefault();">
<input id="footer-email" type="email" placeholder="Email" aria-label="Email">
<button type="submit">Enlist</button>
</form>
</div>
</div>
</div>
<div class="site-footer__utility">
<div class="site-footer__utility-inner">
<div class="site-footer__payments" aria-label="Accepted payments">
<span class="site-footer__pay-chip">Visa</span>
<span class="site-footer__pay-chip">Mastercard</span>
<span class="site-footer__pay-chip">Amex</span>
<span class="site-footer__pay-chip">Apple Pay</span>
<span class="site-footer__pay-chip">Klarna</span>
</div>
<div class="site-footer__copyright">© 2026 War Dungeon · A Nerdworks Brand</div>
<div class="site-footer__socials">
<a class="site-footer__social" href="#" aria-label="Instagram"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="4"/><circle cx="12" cy="12" r="4"/></svg></a>
<a class="site-footer__social" href="#" aria-label="YouTube"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="6" width="20" height="12" rx="3"/></svg></a>
<a class="site-footer__social" href="#" aria-label="Discord"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 6c4-2 10-2 14 0l2 12c-3 2-6 3-9 3l-1-2c-2 0-3-1-5-2-3 0-5-1-7-3z"/></svg></a>
</div>
</div>
</div>
</footer>
</body>
</html>