<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>War Dungeon — Forge Your Army. Stand the Watch.</title>
<link rel="preconnect" href="https://use.typekit.net">
<link rel="stylesheet" href="https://use.typekit.net/onl7dxx.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Literata:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap">
<style>
/* ============================================================
TOKENS — verbatim from Frontier (SWD1) styleguide
Chromatic identifiers (accents only) and Semantic surfaces
are kept STRICTLY separate per fidelity checklist law.
============================================================ */
:root {
/* Chromatic — accents, ornament, dividers only */
--primary: #C5A688;
--secondary: #D8C3B1;
--tertiary: #F4A479;
--dark: #1B1314;
--neutral: #2B1B1C;
--text: #613F34;
--accent: #832D15;
--positive: #4A6E50;
--negative: #C8442D;
--light: #FFFFFF;
--rodeo: #C5A688;
--rodeo-light: #D8C3B1;
--bronze: #F4A479;
--caput: #613F34;
--sienna: #832D15;
--cowboy: #2B1B1C;
--liquourice: #1B1314;
/* Semantic surfaces — grounds */
--bg-page: #1B1314;
--bg-panel-dark: #2B1B1C; /* cowboy: workhorse dark panel */
--bg-panel-darker: #1B1314; /* liquourice: deepest chrome */
--bg-panel-light: #C5A688; /* rodeo: light readability break */
--bg-panel-light-alt: #D8C3B1; /* rodeo-light: alt light break */
--bg-panel-stamp: #832D15; /* sienna: stamped accent band */
--bg-card-on-dark: #2B1B1C; /* card sits on dark with bronze ridge */
--bg-card-on-light: #D8C3B1; /* card on light ground */
--bg-card-inverted: #1B1314; /* deeper card insert for contrast */
/* Semantic text — per ground */
--text-on-dark: #FFFFFF;
--text-on-darkest: #FFFFFF;
--text-on-light: #613F34;
--text-on-stamp: #FFFFFF;
--text-on-card-dark: #FFFFFF;
--text-on-card-light: #613F34;
/* Semantic accent — per ground */
--accent-on-dark: #F4A479; /* bronze pops on dark */
--accent-on-light: #832D15; /* sienna pops on light */
--eyebrow-on-dark: #F4A479;
--eyebrow-on-light: #832D15;
/* Type */
--font-display: "modesto-condensed", "Literata", "Palatino Linotype", "EB Garamond", Georgia, serif;
--font-body: "Literata", "Palatino Linotype", "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;
--ls-tight: -0.01em;
--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-sm: 4px;
--r-md: 7px;
--r-lg: 14px;
/* Shadows — hard-edged, no blur */
--shadow-sm: 2px 2px 0 rgba(27, 19, 20, 0.85);
--shadow-md: 4px 4px 0 rgba(27, 19, 20, 0.9);
--shadow-lg: 6px 6px 0 rgba(27, 19, 20, 0.95);
--shadow-xl: 8px 8px 0 rgba(27, 19, 20, 1);
--shadow-stamp: 2px 2px 0 var(--caput);
--shadow-stamp-bronze: 2px 2px 0 var(--bronze);
/* Borders */
--bd-hairline: 1px;
--bd-regular: 2px;
--bd-thick: 4px;
/* Containers */
--container-wide: 1440px;
--container-default: 1200px;
--container-narrow: 720px;
--gutter: 40px;
}
/* ============================================================
GLOBAL RESET + PAGE
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--text-on-dark);
background: var(--bg-page);
-webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
.wrap {
max-width: var(--container-wide);
margin: 0 auto;
padding: 0 var(--gutter);
}
.wrap--default {
max-width: calc(var(--container-default) + (var(--gutter) * 2));
margin: 0 auto;
padding: 0 var(--gutter);
}
/* ============================================================
ORNAMENT — rivets, gear pattern, gear divider strip
The signature ornaments that anchor the maximalist register.
============================================================ */
/* Reusable rivet quartet at panel corners (radial-gradient stamps) */
.has-rivets {
position: relative;
background-image:
radial-gradient(circle at 10px 10px, var(--bronze) 3.5px, transparent 4px),
radial-gradient(circle at calc(100% - 10px) 10px, var(--bronze) 3.5px, transparent 4px),
radial-gradient(circle at 10px calc(100% - 10px), var(--bronze) 3.5px, transparent 4px),
radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), var(--bronze) 3.5px, transparent 4px);
background-repeat: no-repeat;
}
/* Gear-pattern background fill at 10% bronze stroke — applied to dark panels */
.gear-pattern {
background-color: var(--bg-panel-dark);
background-image:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><g fill='none' stroke='%23F4A479' stroke-opacity='0.1' stroke-width='1.2'><circle cx='30' cy='30' r='10'/><circle cx='30' cy='30' r='16'/><path d='M30 10v4M30 46v4M10 30h4M46 30h4M16 16l3 3M41 41l3 3M44 16l-3 3M19 41l-3 3'/><circle cx='90' cy='90' r='10'/><circle cx='90' cy='90' r='16'/><path d='M90 70v4M90 106v4M70 90h4M106 90h4M76 76l3 3M101 101l3 3M104 76l-3 3M79 101l-3 3'/><line x1='46' y1='30' x2='74' y2='90' stroke-opacity='0.06'/></g></svg>");
background-repeat: repeat;
}
.gear-pattern--darker {
background-color: var(--bg-panel-darker);
}
/* Horizontal gear divider — engraved strip between EVERY section */
.gear-divider {
height: 36px;
background-color: var(--liquourice);
background-image:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='36' viewBox='0 0 200 36'><g fill='none' stroke='%23F4A479' stroke-width='1.4'><line x1='0' y1='18' x2='200' y2='18' stroke-opacity='0.85'/><line x1='0' y1='14' x2='200' y2='14' stroke-opacity='0.35'/><line x1='0' y1='22' x2='200' y2='22' stroke-opacity='0.35'/><circle cx='50' cy='18' r='8'/><circle cx='50' cy='18' r='12'/><path d='M50 3v3M50 30v3M35 18h3M62 18h3M40 8l2 2M58 26l2 2M60 8l-2 2M40 28l-2 2'/><circle cx='50' cy='18' r='3' fill='%23F4A479'/><circle cx='150' cy='18' r='8'/><circle cx='150' cy='18' r='12'/><path d='M150 3v3M150 30v3M135 18h3M162 18h3M140 8l2 2M158 26l2 2M160 8l-2 2M140 28l-2 2'/><circle cx='150' cy='18' r='3' fill='%23F4A479'/></g></svg>");
background-repeat: repeat-x;
border-top: 1px solid var(--bronze);
border-bottom: 1px solid var(--bronze);
}
/* ============================================================
COMMON UTILITIES — eyebrow stamp, section head, CTAs
============================================================ */
/* Eyebrow rendered as stamped brass badge (roundel pill) */
.eyebrow-stamp {
display: inline-block;
padding: 6px 16px;
font-family: var(--font-display);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--caput);
background: var(--bronze);
border: 2px ridge var(--bronze);
border-radius: 999px;
box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-stamp);
}
.eyebrow-stamp--on-light {
color: var(--liquourice);
background: var(--bronze);
}
/* Maximalist section head: eyebrow stamp + caps H2 at max scale + bronze underline */
.section-head {
text-align: center;
margin-bottom: var(--sp-8);
}
.section-head__eyebrow {
margin-bottom: var(--sp-4);
}
.section-head__title {
margin: 0 0 var(--sp-3);
font-family: var(--font-display);
font-size: clamp(40px, 6vw, var(--fs-h1));
line-height: var(--lh-tight);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--text-on-dark);
}
.section-head--on-light .section-head__title { color: var(--text-on-light); }
.section-head__rule {
display: block;
width: 120px;
height: 4px;
margin: var(--sp-3) auto var(--sp-4);
background: var(--bronze);
border: 1px ridge var(--bronze);
box-shadow: inset 0 0 0 1px var(--caput);
}
.section-head__lede {
max-width: 640px;
margin: 0 auto;
font-size: var(--fs-body-lg);
line-height: var(--lh-body);
color: var(--secondary);
}
.section-head--on-light .section-head__lede { color: var(--caput); }
/* Plate-bordered sienna CTA with stamped-shadow offset */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
padding: 14px 28px;
font-family: var(--font-display);
font-size: var(--fs-body-lg);
line-height: var(--lh-tight);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--light);
background: var(--sienna);
border: 2px ridge var(--bronze);
border-radius: var(--r-md);
box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-stamp);
transition: transform 120ms linear;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: inset 0 0 0 1px var(--caput), 3px 3px 0 var(--caput); }
.btn--ghost {
color: var(--bronze);
background: transparent;
border: 2px ridge var(--bronze);
box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-stamp);
}
.btn--lg { padding: 18px 36px; font-size: var(--fs-h4); }
.btn--block { display: flex; width: 100%; }
/* Plated frame — chunky 4px ridge bronze around photographic surfaces */
.plated-frame {
position: relative;
padding: 8px;
background: var(--liquourice);
border: 4px ridge var(--bronze);
border-radius: var(--r-md);
box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-md);
}
.plated-frame__media {
position: relative;
overflow: hidden;
background: var(--cowboy);
border: 1px solid var(--caput);
}
.plated-frame__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.plated-frame::before,
.plated-frame::after,
.plated-frame__rivet-tl,
.plated-frame__rivet-tr,
.plated-frame__rivet-bl,
.plated-frame__rivet-br {
/* rivet dots positioned absolutely on the frame corners */
}
/* Stamped brass roundel — used on prices and loyalty badges */
.roundel {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 56px;
height: 56px;
padding: 0 10px;
font-family: var(--font-display);
font-size: var(--fs-body-sm);
font-weight: 700;
line-height: 1;
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--liquourice);
background: var(--bronze);
border: 2px ridge var(--bronze);
border-radius: 999px;
box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-stamp);
text-align: center;
}
.roundel--price {
min-width: 72px;
height: 72px;
font-size: var(--fs-h4);
}
.roundel--small { min-width: 44px; height: 44px; font-size: 11px; }
/* ============================================================
01 — ANNOUNCEMENT BAR
Sienna stamped band, ridge bronze top/bottom rule, rotating
placeholder content (single rotation slot in static mockup).
============================================================ */
.announce {
background: var(--bg-panel-stamp);
border-top: 2px ridge var(--bronze);
border-bottom: 2px ridge var(--bronze);
box-shadow: inset 0 0 0 1px var(--caput);
color: var(--text-on-stamp);
}
.announce__inner {
display: flex;
align-items: center;
justify-content: center;
gap: var(--sp-5);
min-height: 44px;
padding: 8px var(--gutter);
}
.announce__msg {
display: inline-flex;
align-items: center;
gap: var(--sp-3);
font-family: var(--font-display);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
}
.announce__msg::before,
.announce__msg::after {
content: "";
width: 28px;
height: 6px;
background-image:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 6'><path d='M0 3h28' stroke='%23F4A479' stroke-width='1.2'/><circle cx='14' cy='3' r='2' fill='%23F4A479'/></svg>");
}
.announce__rotator {
display: inline-flex;
align-items: center;
gap: var(--sp-3);
}
.announce__dot {
width: 6px;
height: 6px;
border-radius: 999px;
background: var(--bronze);
opacity: 0.4;
}
.announce__dot--active { opacity: 1; box-shadow: 0 0 0 2px rgba(244,164,121,0.25); }
/* ============================================================
02 — GLOBAL HEADER
Liquourice chrome, bronze underline rule, 5-item primary nav.
============================================================ */
.site-header {
background: var(--bg-panel-darker);
border-bottom: 2px ridge var(--bronze);
box-shadow: inset 0 0 0 1px var(--caput);
}
.site-header__inner {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--sp-6);
padding: var(--sp-4) 0;
}
.brand-mark {
display: inline-flex;
align-items: center;
gap: var(--sp-3);
padding: 8px 14px;
border: 2px ridge var(--bronze);
border-radius: var(--r-md);
box-shadow: inset 0 0 0 1px var(--caput);
background: var(--liquourice);
}
.brand-mark__cog {
width: 28px;
height: 28px;
display: inline-block;
background-image:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='%23F4A479' stroke-width='1.4'><circle cx='14' cy='14' r='5'/><circle cx='14' cy='14' r='9'/><path d='M14 1v4M14 23v4M1 14h4M23 14h4M5 5l3 3M20 20l3 3M23 5l-3 3M5 23l3-3'/></svg>");
}
.brand-mark__word {
font-family: var(--font-display);
font-size: var(--fs-h4);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--bronze);
line-height: 1;
}
.brand-mark__word small {
display: block;
font-size: 9px;
letter-spacing: var(--ls-widest);
color: var(--rodeo-light);
margin-top: 2px;
}
.primary-nav {
display: flex;
gap: 0;
justify-content: center;
}
.primary-nav__item {
position: relative;
padding: var(--sp-3) var(--sp-4);
font-family: var(--font-display);
font-size: var(--fs-body);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--rodeo-light);
}
.primary-nav__item + .primary-nav__item::before {
content: "";
position: absolute;
left: 0; top: 50%;
width: 6px; height: 6px;
border-radius: 999px;
background: var(--bronze);
transform: translate(-3px, -50%);
}
.primary-nav__item--has-mega::after {
content: " ▾";
font-size: 10px;
color: var(--bronze);
}
.primary-nav__item:hover { color: var(--bronze); }
.header-tools {
display: flex;
gap: var(--sp-3);
align-items: center;
}
.tool-icon {
width: 40px; height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--cowboy);
border: 2px ridge var(--bronze);
border-radius: var(--r-md);
box-shadow: inset 0 0 0 1px var(--caput);
color: var(--bronze);
font-size: 16px;
}
.tool-icon--basket {
width: auto;
padding: 0 var(--sp-3);
gap: var(--sp-2);
font-family: var(--font-display);
letter-spacing: var(--ls-wide);
font-size: 13px;
text-transform: uppercase;
color: var(--bronze);
}
.tool-icon__points {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 2px 6px;
font-size: 10px;
background: var(--bronze);
color: var(--liquourice);
border-radius: 999px;
border: 1px solid var(--caput);
}
/* ============================================================
03 — HERO
Dark cowboy panel, gear pattern fill, large diorama photo in
plated bronze ridge frame with corner rivets.
============================================================ */
.hero {
position: relative;
padding: var(--sp-9) 0 var(--sp-10);
color: var(--text-on-dark);
}
.hero__inner {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: var(--sp-8);
align-items: center;
}
.hero__copy { max-width: 560px; }
.hero__eyebrow { margin-bottom: var(--sp-5); }
.hero__title {
margin: 0 0 var(--sp-5);
font-family: var(--font-display);
font-size: clamp(56px, 8vw, var(--fs-display));
line-height: 0.95;
letter-spacing: var(--ls-wide);
text-transform: uppercase;
}
.hero__title span {
display: block;
color: var(--bronze);
}
.hero__title-rule {
display: block;
width: 200px;
height: 6px;
background: var(--bronze);
border: 1px ridge var(--bronze);
box-shadow: inset 0 0 0 1px var(--caput);
margin: var(--sp-5) 0;
}
.hero__sub {
font-size: var(--fs-body-lg);
line-height: var(--lh-body);
color: var(--secondary);
margin: 0 0 var(--sp-7);
}
.hero__ctas {
display: flex;
gap: var(--sp-4);
flex-wrap: wrap;
align-items: center;
}
.hero__meta {
margin-top: var(--sp-7);
display: flex;
gap: var(--sp-5);
font-family: var(--font-display);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--bronze);
}
.hero__meta span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.hero__meta span::before {
content: "";
width: 10px; height: 10px;
border-radius: 999px;
background: var(--bronze);
border: 1px solid var(--caput);
}
.hero__frame { position: relative; }
.hero__frame .plated-frame { padding: 12px; border-width: 6px; }
.hero__frame .plated-frame__media { aspect-ratio: 4/3; }
.hero__frame .plated-frame__media img { width: 100%; height: 100%; object-fit: cover; }
/* Hero plaque overlaid on the frame — stamped credit/diorama caption */
.hero__plaque {
position: absolute;
left: var(--sp-5);
bottom: -22px;
display: inline-flex;
align-items: center;
gap: var(--sp-3);
padding: 10px 18px;
background: var(--liquourice);
border: 2px ridge var(--bronze);
border-radius: var(--r-md);
box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-md);
font-family: var(--font-display);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--bronze);
}
/* ============================================================
04 — TRUST STRIP
Liquourice band, 4 cells, mini-gear vertical dividers, rivets.
============================================================ */
.trust {
background: var(--bg-panel-darker);
padding: var(--sp-7) 0;
}
.trust__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
align-items: stretch;
border: 2px ridge var(--bronze);
border-radius: var(--r-md);
box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-md);
background: var(--cowboy);
background-image:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><g fill='none' stroke='%23F4A479' stroke-opacity='0.08' stroke-width='1'><circle cx='60' cy='60' r='14'/><circle cx='60' cy='60' r='20'/><path d='M60 36v4M60 80v4M36 60h4M80 60h4'/></g></svg>");
background-repeat: repeat;
}
.trust__cell {
position: relative;
padding: var(--sp-6) var(--sp-5);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--sp-3);
}
.trust__cell + .trust__cell {
border-left: 1px solid var(--caput);
background-image:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='40' viewBox='0 0 2 40'><circle cx='1' cy='6' r='1' fill='%23F4A479'/><circle cx='1' cy='20' r='1' fill='%23F4A479'/><circle cx='1' cy='34' r='1' fill='%23F4A479'/></svg>");
background-repeat: repeat-y;
background-position: left center;
}
.trust__icon {
width: 48px; height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--liquourice);
border: 2px ridge var(--bronze);
border-radius: 999px;
box-shadow: inset 0 0 0 1px var(--caput);
}
.trust__icon svg { width: 28px; height: 28px; stroke: var(--bronze); fill: none; stroke-width: 1.5; }
.trust__title {
margin: 0;
font-family: var(--font-display);
font-size: var(--fs-h4);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--text-on-dark);
}
.trust__copy {
margin: 0;
font-size: var(--fs-body-sm);
color: var(--rodeo-light);
}
/* ============================================================
05 — TOOLS TEASER
Army Builder + Battle Simulator side-by-side. Cowboy panel.
============================================================ */
.tools-teaser {
padding: var(--sp-9) 0;
color: var(--text-on-dark);
}
.tools-teaser__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-6);
}
.tool-card {
position: relative;
display: grid;
grid-template-rows: auto 1fr;
padding: var(--sp-6);
background: var(--bg-card-on-dark);
border: 4px ridge var(--bronze);
border-radius: var(--r-md);
box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-lg);
}
.tool-card__media {
position: relative;
aspect-ratio: 16/9;
overflow: hidden;
background: var(--liquourice);
border: 2px ridge var(--bronze);
border-radius: var(--r-sm);
box-shadow: inset 0 0 0 1px var(--caput);
margin-bottom: var(--sp-5);
}
.tool-card__media img {
width: 100%; height: 100%; object-fit: cover;
}
.tool-card__cog-overlay {
position: absolute;
right: -20px;
bottom: -20px;
width: 120px; height: 120px;
pointer-events: none;
background-image:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%23F4A479' stroke-width='2'><circle cx='60' cy='60' r='28'/><circle cx='60' cy='60' r='42'/><path d='M60 10v10M60 100v10M10 60h10M100 60h10M22 22l7 7M91 91l7 7M98 22l-7 7M22 98l7-7'/><circle cx='60' cy='60' r='6' fill='%23F4A479'/></svg>");
opacity: 0.5;
}
.tool-card__eyebrow {
margin-bottom: var(--sp-3);
}
.tool-card__status {
display: inline-block;
margin-left: var(--sp-2);
padding: 4px 10px;
font-family: var(--font-display);
font-size: 10px;
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--liquourice);
background: var(--rodeo-light);
border: 1px solid var(--caput);
border-radius: 999px;
}
.tool-card__title {
margin: 0 0 var(--sp-3);
font-family: var(--font-display);
font-size: var(--fs-h3);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
line-height: var(--lh-tight);
color: var(--text-on-dark);
}
.tool-card__copy {
margin: 0 0 var(--sp-5);
color: var(--secondary);
}
.tool-card__features {
list-style: none;
margin: 0 0 var(--sp-6);
padding: 0;
display: grid;
gap: var(--sp-2);
}
.tool-card__features li {
font-size: var(--fs-body-sm);
color: var(--rodeo-light);
display: flex;
align-items: center;
gap: var(--sp-3);
}
.tool-card__features li::before {
content: "";
width: 10px; height: 10px;
background: var(--bronze);
border: 1px solid var(--caput);
flex-shrink: 0;
transform: rotate(45deg);
}
/* ============================================================
06 — CHOOSE YOUR GAME (light readability break)
Rodeo light ground, 6 plated category cards in 3+3.
============================================================ */
.choose-game {
background: var(--bg-panel-light);
padding: var(--sp-9) 0;
color: var(--text-on-light);
}
.choose-game__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-6);
}
.category-card {
position: relative;
display: grid;
grid-template-rows: auto 1fr;
background: var(--bg-card-on-light);
border: 4px ridge var(--bronze);
border-radius: var(--r-md);
box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-md);
overflow: hidden;
}
.category-card__media {
position: relative;
aspect-ratio: 4/3;
overflow: hidden;
background: var(--cowboy);
border-bottom: 2px ridge var(--bronze);
box-shadow: inset 0 0 0 1px var(--caput);
}
.category-card__media img { width: 100%; height: 100%; object-fit: cover; }
.category-card__plate {
position: absolute;
left: var(--sp-3);
top: var(--sp-3);
padding: 4px 10px;
font-family: var(--font-display);
font-size: 10px;
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--bronze);
background: var(--liquourice);
border: 1px solid var(--bronze);
border-radius: var(--r-sm);
}
.category-card__body {
padding: var(--sp-5) var(--sp-5) var(--sp-6);
display: grid;
gap: var(--sp-3);
}
.category-card__title {
margin: 0;
font-family: var(--font-display);
font-size: var(--fs-h3);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
line-height: var(--lh-tight);
color: var(--liquourice);
}
.category-card__copy {
margin: 0;
color: var(--caput);
font-size: var(--fs-body-sm);
}
.category-card__cta {
margin-top: var(--sp-3);
font-family: var(--font-display);
font-size: var(--fs-body);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--sienna);
display: inline-flex;
align-items: center;
gap: var(--sp-2);
align-self: start;
}
.category-card__cta::after { content: "→"; }
/* ============================================================
07 — FAN FAVOURITES (dark)
4 product cards in a row, brass roundel loyalty badge each.
============================================================ */
.fan-favs {
padding: var(--sp-9) 0;
color: var(--text-on-dark);
}
.fan-favs__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-5);
}
.product-card {
position: relative;
display: grid;
grid-template-rows: auto 1fr;
background: var(--bg-card-on-dark);
border: 4px ridge var(--bronze);
border-radius: var(--r-md);
box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-md);
}
.product-card__media {
position: relative;
aspect-ratio: 1/1;
overflow: hidden;
background: var(--light);
border-bottom: 2px ridge var(--bronze);
}
.product-card__media img { width: 100%; height: 100%; object-fit: cover; }
.product-card__loyalty {
position: absolute;
top: var(--sp-3);
right: var(--sp-3);
}
.product-card__game-tag {
position: absolute;
top: var(--sp-3);
left: var(--sp-3);
padding: 4px 10px;
font-family: var(--font-display);
font-size: 10px;
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--bronze);
background: var(--liquourice);
border: 1px solid var(--bronze);
border-radius: var(--r-sm);
}
.product-card__body {
padding: var(--sp-5);
display: grid;
gap: var(--sp-3);
}
.product-card__title {
margin: 0;
font-family: var(--font-display);
font-size: var(--fs-h4);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
line-height: var(--lh-tight);
color: var(--text-on-dark);
min-height: calc(var(--fs-h4) * 2 * var(--lh-tight));
}
.product-card__rating {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
color: var(--bronze);
font-size: var(--fs-body-sm);
}
.product-card__rating em {
font-style: normal;
color: var(--rodeo-light);
font-family: var(--font-body);
}
.product-card__price-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
margin-top: var(--sp-3);
}
.product-card__price {
font-family: var(--font-display);
font-size: var(--fs-h3);
color: var(--bronze);
letter-spacing: var(--ls-tight);
line-height: 1;
}
.product-card__quickview {
padding: 10px 14px;
font-family: var(--font-display);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--light);
background: var(--sienna);
border: 2px ridge var(--bronze);
border-radius: var(--r-md);
box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-stamp);
}
/* ============================================================
08 — HOW-TO GUIDES (light readability break)
3 large content cards on rodeo-light alt ground.
============================================================ */
.guides {
background: var(--bg-panel-light-alt);
padding: var(--sp-9) 0;
color: var(--text-on-light);
}
.guides__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-6);
}
.guide-card {
position: relative;
display: grid;
grid-template-rows: auto 1fr;
background: var(--liquourice);
border: 4px ridge var(--bronze);
border-radius: var(--r-md);
box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-md);
color: var(--text-on-dark);
overflow: hidden;
}
.guide-card__media {
position: relative;
aspect-ratio: 16/10;
overflow: hidden;
background: var(--cowboy);
border-bottom: 2px ridge var(--bronze);
}
.guide-card__media img { width: 100%; height: 100%; object-fit: cover; }
.guide-card__badges {
position: absolute;
left: var(--sp-3);
top: var(--sp-3);
display: inline-flex;
gap: var(--sp-2);
flex-wrap: wrap;
}
.guide-card__badge {
padding: 4px 12px;
font-family: var(--font-display);
font-size: 10px;
letter-spacing: var(--ls-widest);
text-transform: uppercase;
background: var(--bronze);
color: var(--liquourice);
border: 1px solid var(--caput);
border-radius: 999px;
box-shadow: inset 0 0 0 1px var(--caput);
}
.guide-card__badge--time {
background: var(--liquourice);
color: var(--bronze);
border-color: var(--bronze);
}
.guide-card__body {
padding: var(--sp-5) var(--sp-5) var(--sp-6);
display: grid;
gap: var(--sp-3);
}
.guide-card__kicker {
font-family: var(--font-display);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--bronze);
}
.guide-card__title {
margin: 0;
font-family: var(--font-display);
font-size: var(--fs-h3);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
line-height: var(--lh-tight);
color: var(--text-on-dark);
}
.guide-card__copy {
margin: 0;
color: var(--secondary);
font-size: var(--fs-body-sm);
}
.guide-card__cta {
margin-top: var(--sp-3);
font-family: var(--font-display);
font-size: var(--fs-body);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--bronze);
display: inline-flex;
gap: var(--sp-2);
}
.guide-card__cta::after { content: "→"; }
/* ============================================================
09 — CREATOR PARTNER SPOTLIGHT (dark cowboy)
Featured creator card on left, scrollable thumbnail rail.
============================================================ */
.creators {
padding: var(--sp-9) 0;
color: var(--text-on-dark);
}
.creators__featured {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: var(--sp-7);
align-items: center;
margin-bottom: var(--sp-8);
}
.creators__portrait { position: relative; }
.creators__portrait .plated-frame__media { aspect-ratio: 4/5; }
.creators__copy { color: var(--rodeo-light); }
.creators__kicker {
display: inline-block;
margin-bottom: var(--sp-3);
}
.creators__name {
margin: 0 0 var(--sp-2);
font-family: var(--font-display);
font-size: var(--fs-h2);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
line-height: var(--lh-tight);
color: var(--bronze);
}
.creators__tags {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
margin-bottom: var(--sp-5);
}
.creators__tag {
padding: 4px 12px;
font-family: var(--font-display);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--bronze);
background: var(--liquourice);
border: 1px solid var(--bronze);
border-radius: var(--r-sm);
}
.creators__quote {
margin: 0 0 var(--sp-6);
font-size: var(--fs-body-lg);
line-height: var(--lh-body);
color: var(--text-on-dark);
}
.creators__stats {
display: flex;
gap: var(--sp-7);
margin: 0 0 var(--sp-6);
padding: var(--sp-5);
background: var(--liquourice);
border: 2px ridge var(--bronze);
border-radius: var(--r-md);
box-shadow: inset 0 0 0 1px var(--caput);
}
.creators__stat strong {
display: block;
font-family: var(--font-display);
font-size: var(--fs-h3);
color: var(--bronze);
letter-spacing: var(--ls-wide);
}
.creators__stat span {
display: block;
font-family: var(--font-display);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--rodeo-light);
}
.creators__rail-head {
display: flex;
align-items: end;
justify-content: space-between;
gap: var(--sp-5);
margin-bottom: var(--sp-5);
padding-bottom: var(--sp-4);
border-bottom: 2px ridge var(--bronze);
}
.creators__rail-head h3 {
margin: 0;
font-family: var(--font-display);
font-size: var(--fs-h3);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--bronze);
}
.creators__rail {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: var(--sp-4);
}
.creator-thumb {
background: var(--liquourice);
border: 2px ridge var(--bronze);
border-radius: var(--r-md);
box-shadow: inset 0 0 0 1px var(--caput);
overflow: hidden;
}
.creator-thumb__media {
aspect-ratio: 1/1;
background: var(--cowboy);
overflow: hidden;
}
.creator-thumb__media img { width: 100%; height: 100%; object-fit: cover; }
.creator-thumb__body { padding: var(--sp-3); text-align: center; }
.creator-thumb__name {
margin: 0 0 4px;
font-family: var(--font-display);
font-size: var(--fs-body-sm);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--bronze);
line-height: 1.1;
}
.creator-thumb__tag {
font-family: var(--font-display);
font-size: 10px;
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--rodeo-light);
}
/* ============================================================
10 — PAINTING SHOWCASE / UGC (liquourice darkest)
6-tile masonry. Plated tile frames with corner rivets.
============================================================ */
.showcase {
padding: var(--sp-9) 0;
color: var(--text-on-dark);
}
.showcase__grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: 120px;
gap: var(--sp-4);
}
.showcase__tile {
position: relative;
background: var(--liquourice);
border: 4px ridge var(--bronze);
border-radius: var(--r-md);
box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-sm);
overflow: hidden;
}
.showcase__tile img { width: 100%; height: 100%; object-fit: cover; }
.showcase__tile--lg { grid-column: span 3; grid-row: span 3; }
.showcase__tile--md { grid-column: span 2; grid-row: span 2; }
.showcase__tile--sm { grid-column: span 1; grid-row: span 2; }
.showcase__tile--wide { grid-column: span 3; grid-row: span 2; }
.showcase__tile--tall { grid-column: span 2; grid-row: span 3; }
.showcase__caption {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: var(--sp-3) var(--sp-4);
background: linear-gradient(transparent, rgba(27,19,20,0.85));
font-family: var(--font-display);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--bronze);
}
.showcase__caption span { color: var(--rodeo-light); }
.showcase__submit {
margin-top: var(--sp-7);
text-align: center;
}
/* ============================================================
11 — LOYALTY CROSS-BRAND STRIP (sienna stamped band)
Full-width band, sister brand logos, single CTA.
============================================================ */
.loyalty {
background: var(--bg-panel-stamp);
border-top: 4px ridge var(--bronze);
border-bottom: 4px ridge var(--bronze);
box-shadow: inset 0 0 0 1px var(--caput);
padding: var(--sp-8) 0;
color: var(--text-on-stamp);
background-image:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'><g fill='none' stroke='%23F4A479' stroke-opacity='0.12' stroke-width='1'><circle cx='90' cy='90' r='24'/><circle cx='90' cy='90' r='40'/><path d='M90 50v8M90 122v8M50 90h8M122 90h8'/></g></svg>");
}
.loyalty__inner {
display: grid;
grid-template-columns: 1.1fr 1fr;
align-items: center;
gap: var(--sp-8);
}
.loyalty__title {
margin: 0 0 var(--sp-3);
font-family: var(--font-display);
font-size: var(--fs-h1);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
line-height: var(--lh-tight);
}
.loyalty__title em {
font-style: normal;
color: var(--bronze);
}
.loyalty__copy {
margin: 0 0 var(--sp-6);
font-size: var(--fs-body-lg);
color: var(--rodeo-light);
}
.loyalty__brands {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--sp-4);
}
.loyalty__brand {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-4) var(--sp-5);
background: var(--liquourice);
border: 2px ridge var(--bronze);
border-radius: var(--r-md);
box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-sm);
}
.loyalty__brand-mark {
width: 36px; height: 36px;
background: var(--bronze);
border: 1px solid var(--caput);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--liquourice);
font-family: var(--font-display);
font-size: 13px;
letter-spacing: var(--ls-wider);
font-weight: 700;
}
.loyalty__brand-name {
font-family: var(--font-display);
font-size: var(--fs-body);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--bronze);
line-height: 1.1;
}
.loyalty__brand-role {
display: block;
font-size: 11px;
letter-spacing: var(--ls-widest);
color: var(--rodeo-light);
margin-top: 2px;
}
/* ============================================================
12 — NEWSLETTER (cowboy dark)
"Join the Garrison" — typewriter visual treatment on form.
============================================================ */
.newsletter {
padding: var(--sp-9) 0;
color: var(--text-on-dark);
}
.newsletter__inner {
max-width: 820px;
margin: 0 auto;
text-align: center;
padding: var(--sp-8);
background: var(--liquourice);
border: 4px ridge var(--bronze);
border-radius: var(--r-md);
box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-lg);
}
.newsletter__eyebrow { margin-bottom: var(--sp-4); }
.newsletter__title {
margin: 0 0 var(--sp-3);
font-family: var(--font-display);
font-size: var(--fs-h1);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
line-height: var(--lh-tight);
}
.newsletter__rule {
display: block;
width: 120px;
height: 4px;
margin: var(--sp-3) auto var(--sp-5);
background: var(--bronze);
}
.newsletter__copy {
margin: 0 0 var(--sp-6);
font-size: var(--fs-body-lg);
color: var(--rodeo-light);
}
.newsletter__form {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--sp-3);
max-width: 580px;
margin: 0 auto;
}
.newsletter__input {
font-family: "Courier Prime", "Courier New", monospace;
font-size: var(--fs-body);
padding: 14px var(--sp-4);
background: var(--cowboy);
color: var(--bronze);
border: 2px ridge var(--bronze);
border-radius: var(--r-md);
box-shadow: inset 0 0 0 1px var(--caput);
letter-spacing: 0.02em;
}
.newsletter__input::placeholder { color: var(--rodeo-light); opacity: 0.7; }
.newsletter__perks {
margin-top: var(--sp-5);
display: flex;
justify-content: center;
gap: var(--sp-5);
font-family: var(--font-display);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--bronze);
flex-wrap: wrap;
}
.newsletter__perks span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.newsletter__perks span::before {
content: "";
width: 10px; height: 10px;
background: var(--bronze);
border: 1px solid var(--caput);
transform: rotate(45deg);
}
/* ============================================================
13 — GLOBAL FOOTER
Liquourice chrome. 4 columns + newsletter strip + baseline.
============================================================ */
.site-footer {
background: var(--bg-panel-darker);
color: var(--text-on-dark);
border-top: 4px ridge var(--bronze);
box-shadow: inset 0 0 0 1px var(--caput);
}
.site-footer__columns {
display: grid;
grid-template-columns: 1.4fr repeat(4, 1fr);
gap: var(--sp-7);
padding: var(--sp-9) 0 var(--sp-7);
}
.footer-brand__mark {
display: inline-flex;
align-items: center;
gap: var(--sp-3);
margin-bottom: var(--sp-4);
}
.footer-brand__word {
font-family: var(--font-display);
font-size: var(--fs-h3);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--bronze);
}
.footer-brand__copy {
margin: 0 0 var(--sp-5);
color: var(--rodeo-light);
font-size: var(--fs-body-sm);
}
.footer-brand__badge {
display: inline-flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-3) var(--sp-4);
background: var(--cowboy);
border: 2px ridge var(--bronze);
border-radius: var(--r-md);
box-shadow: inset 0 0 0 1px var(--caput);
font-family: var(--font-display);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--bronze);
}
.footer-col__title {
margin: 0 0 var(--sp-4);
padding-bottom: var(--sp-2);
border-bottom: 2px ridge var(--bronze);
font-family: var(--font-display);
font-size: var(--fs-body);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--bronze);
}
.footer-col__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--sp-2);
}
.footer-col__list a {
color: var(--rodeo-light);
font-size: var(--fs-body-sm);
}
.footer-col__list a:hover { color: var(--bronze); }
.footer-col__list .footer-pip {
display: inline-block;
width: 5px; height: 5px;
background: var(--bronze);
border: 1px solid var(--caput);
margin-right: var(--sp-3);
vertical-align: middle;
}
.site-footer__baseline {
border-top: 2px ridge var(--bronze);
background: var(--cowboy);
}
.site-footer__baseline-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-5);
padding: var(--sp-5) 0;
flex-wrap: wrap;
}
.site-footer__pay,
.site-footer__social {
display: flex;
gap: var(--sp-2);
}
.site-footer__pay span,
.site-footer__social span {
display: inline-flex;
align-items: center;
justify-content: center;
height: 32px;
padding: 0 10px;
background: var(--liquourice);
border: 1px solid var(--bronze);
border-radius: var(--r-sm);
font-family: var(--font-display);
font-size: 10px;
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--bronze);
}
.site-footer__legal {
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-wide);
color: var(--rodeo-light);
}
.site-footer__legal a { color: var(--bronze); margin-left: var(--sp-3); }
/* ============================================================
RESPONSIVE — mobile holds ornament per brand "no simplification"
============================================================ */
@media (max-width: 1024px) {
.hero__inner { grid-template-columns: 1fr; gap: var(--sp-7); }
.trust__grid { grid-template-columns: repeat(2, 1fr); }
.trust__cell:nth-child(2n+1) { background-image: none; border-left: none; }
.trust__cell:nth-child(n+3) { border-top: 1px solid var(--caput); }
.tools-teaser__grid { grid-template-columns: 1fr; }
.choose-game__grid { grid-template-columns: repeat(2, 1fr); }
.fan-favs__grid { grid-template-columns: repeat(2, 1fr); }
.guides__grid { grid-template-columns: 1fr; }
.creators__featured { grid-template-columns: 1fr; }
.creators__rail { grid-template-columns: repeat(3, 1fr); }
.showcase__grid { grid-template-columns: repeat(4, 1fr); }
.loyalty__inner { grid-template-columns: 1fr; }
.site-footer__columns { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
:root { --gutter: 20px; }
.hero { padding: var(--sp-7) 0 var(--sp-8); }
.hero__title { font-size: 48px; }
.primary-nav { display: none; }
.site-header__inner { grid-template-columns: auto 1fr; }
.trust__grid { grid-template-columns: 1fr; }
.trust__cell:nth-child(n+2) { border-top: 1px solid var(--caput); }
.choose-game__grid { grid-template-columns: 1fr; }
.fan-favs__grid { grid-template-columns: 1fr 1fr; }
.showcase__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; }
.showcase__tile--lg, .showcase__tile--md, .showcase__tile--sm, .showcase__tile--wide, .showcase__tile--tall {
grid-column: span 1; grid-row: span 1;
}
.creators__rail { grid-template-columns: repeat(2, 1fr); }
.site-footer__columns { grid-template-columns: 1fr; }
.newsletter__form { grid-template-columns: 1fr; }
.loyalty__brands { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<!-- ============================================================
01 — ANNOUNCEMENT BAR (sienna stamped band, rotating msgs)
============================================================ -->
<div class="announce" role="region" aria-label="Announcements">
<div class="announce__inner wrap">
<span class="announce__msg">Free UK shipping over £75 — and an extra ten percent off your first muster</span>
<span class="announce__rotator" aria-hidden="true">
<span class="announce__dot announce__dot--active"></span>
<span class="announce__dot"></span>
<span class="announce__dot"></span>
</span>
</div>
</div>
<!-- ============================================================
02 — GLOBAL HEADER (liquourice chrome, 5-item primary nav)
============================================================ -->
<header class="site-header">
<div class="wrap site-header__inner">
<a class="brand-mark" href="/" aria-label="War Dungeon — Home">
<span class="brand-mark__cog" aria-hidden="true"></span>
<span class="brand-mark__word">War Dungeon<small>The Workbench of Warriors</small></span>
</a>
<nav class="primary-nav" aria-label="Primary">
<a class="primary-nav__item primary-nav__item--has-mega" href="#">Warhammer</a>
<a class="primary-nav__item" href="#">Dungeons & Dragons</a>
<a class="primary-nav__item" href="#">Tools</a>
<a class="primary-nav__item primary-nav__item--has-mega" href="#">Learn</a>
<a class="primary-nav__item" href="#">Creators</a>
</nav>
<div class="header-tools">
<a class="tool-icon" href="#" aria-label="Search">⌕</a>
<a class="tool-icon" href="#" aria-label="Account">☉</a>
<a class="tool-icon" href="#" aria-label="Wishlist">♥</a>
<a class="tool-icon tool-icon--basket" href="#" aria-label="Basket">
<span>Basket · 2</span>
<span class="tool-icon__points">+340 PTS</span>
</a>
</div>
</div>
</header>
<!-- gear divider -->
<div class="gear-divider" role="presentation" aria-hidden="true"></div>
<!-- ============================================================
03 — HERO (cowboy panel, gear pattern, plated diorama frame)
============================================================ -->
<section class="hero gear-pattern">
<div class="wrap hero__inner">
<div class="hero__copy">
<span class="eyebrow-stamp hero__eyebrow">Established Forge · Warhammer & D&D</span>
<h1 class="hero__title">
Forge Your Army.
<span>Stand the Watch.</span>
</h1>
<span class="hero__title-rule" aria-hidden="true"></span>
<p class="hero__sub">
Painted minis, sharpened rulebooks, and a workbench worth of know-how. Build your roster
with the Army Builder, then settle in by the lantern and the rest will follow.
</p>
<div class="hero__ctas">
<a class="btn btn--lg" href="#">Build Your Army</a>
<a class="btn btn--ghost btn--lg" href="#">Shop New Releases</a>
</div>
<div class="hero__meta" aria-hidden="true">
<span>40K</span>
<span>Age of Sigmar</span>
<span>The Old World</span>
<span>D&D</span>
</div>
</div>
<div class="hero__frame">
<figure class="plated-frame">
<div class="plated-frame__media">
<img src="https://picsum.photos/seed/wd-hero-diorama/960/720" alt="Lit diorama of a painted Warhammer regiment on hand-built terrain, lantern-lit, atmospheric smoke">
</div>
</figure>
<span class="hero__plaque">Diorama: Watchfire on the Long Road · 2026</span>
</div>
</div>
</section>
<!-- gear divider -->
<div class="gear-divider" role="presentation" aria-hidden="true"></div>
<!-- ============================================================
04 — TRUST STRIP (liquourice band, 4 cells, mini-gear divs)
============================================================ -->
<section class="trust" aria-label="Why shop with us">
<div class="wrap">
<div class="trust__grid">
<div class="trust__cell">
<span class="trust__icon" aria-hidden="true">
<svg viewBox="0 0 24 24"><path d="M3 8h13l2 4h3v6h-2a2 2 0 1 1-4 0H9a2 2 0 1 1-4 0H3z"/></svg>
</span>
<h3 class="trust__title">Free UK Shipping</h3>
<p class="trust__copy">On every order over £75. Dispatched from the Nerdworks vaults.</p>
</div>
<div class="trust__cell">
<span class="trust__icon" aria-hidden="true">
<svg viewBox="0 0 24 24"><path d="M12 3a9 9 0 1 1-9 9"/><path d="M3 3v6h6"/></svg>
</span>
<h3 class="trust__title">30-Day Returns</h3>
<p class="trust__copy">Unhappy with the haul? Send it back. No fuss, no formalities.</p>
</div>
<div class="trust__cell">
<span class="trust__icon" aria-hidden="true">
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></svg>
</span>
<h3 class="trust__title">Multi-Game Expertise</h3>
<p class="trust__copy">40K · Age of Sigmar · The Old World · D&D — under one roof.</p>
</div>
<div class="trust__cell">
<span class="trust__icon" aria-hidden="true">
<svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 1-4.5 4.5L18 20l-6-3-6 3 1.5-6.5L3 9l6-1z"/></svg>
</span>
<h3 class="trust__title">A Nerdworks Brand</h3>
<p class="trust__copy">Loyalty points earn here, redeem across the whole family.</p>
</div>
</div>
</div>
</section>
<!-- gear divider -->
<div class="gear-divider" role="presentation" aria-hidden="true"></div>
<!-- ============================================================
05 — TOOLS TEASER (Army Builder + Battle Simulator)
============================================================ -->
<section class="tools-teaser gear-pattern">
<div class="wrap wrap--default">
<div class="section-head">
<span class="eyebrow-stamp section-head__eyebrow">The Workbench Tools</span>
<h2 class="section-head__title">Tools of the Trade</h2>
<span class="section-head__rule" aria-hidden="true"></span>
<p class="section-head__lede">Configure your roster. Run your matchup. The kit other shops left at the door.</p>
</div>
<div class="tools-teaser__grid">
<article class="tool-card">
<div class="tool-card__media">
<img src="https://picsum.photos/seed/wd-army-builder/720/405" alt="Army Builder interface mockup overlaid on a painted regiment">
<span class="tool-card__cog-overlay" aria-hidden="true"></span>
</div>
<div>
<span class="eyebrow-stamp tool-card__eyebrow">Army Builder</span>
<h3 class="tool-card__title">Forge a Roster, Lock the Points</h3>
<p class="tool-card__copy">
Pick your faction, draft your units, watch the points tracker keep you honest. Save as many
lists as your shelf can hold and bring them straight to the cart.
</p>
<ul class="tool-card__features">
<li>Live points tally, faction-aware rules</li>
<li>Playstyle analysis & army suggestions</li>
<li>Save unlimited lists to your account</li>
<li>Configure → straight to basket, no retyping</li>
</ul>
<a class="btn btn--block" href="#">Open the Army Builder</a>
</div>
</article>
<article class="tool-card">
<div class="tool-card__media">
<img src="https://picsum.photos/seed/wd-battle-sim/720/405" alt="Battle Simulator top-down canvas mockup">
<span class="tool-card__cog-overlay" aria-hidden="true"></span>
</div>
<div>
<span class="eyebrow-stamp tool-card__eyebrow">
Battle Simulator
<span class="tool-card__status">Coming Phase II</span>
</span>
<h3 class="tool-card__title">Push the Pieces Without the Floorspace</h3>
<p class="tool-card__copy">
Two armies, one canvas, turn-based. PvP against a saved roster or PvE versus generated foes —
with running commentary in the sidebar from a war-correspondent who never sleeps.
</p>
<ul class="tool-card__features">
<li>Top-down HTML5 canvas, turn-based</li>
<li>PvP between saved armies, PvE vs generated</li>
<li>Live AI commentary in a Twitch-chat sidebar</li>
<li>Replay any battle, share with the gang</li>
</ul>
<a class="btn btn--ghost btn--block" href="#">Join the Waitlist</a>
</div>
</article>
</div>
</div>
</section>
<!-- gear divider -->
<div class="gear-divider" role="presentation" aria-hidden="true"></div>
<!-- ============================================================
06 — CHOOSE YOUR GAME (light rodeo break, 6 plated cards)
============================================================ -->
<section class="choose-game" id="choose-your-game">
<div class="wrap wrap--default">
<div class="section-head section-head--on-light">
<span class="eyebrow-stamp section-head__eyebrow">Choose Your Game</span>
<h2 class="section-head__title">Pick Your Poison, Stranger</h2>
<span class="section-head__rule" aria-hidden="true"></span>
<p class="section-head__lede">Every system on the rack — picked over, priced fair, ready to leave with you tonight.</p>
</div>
<div class="choose-game__grid">
<a class="category-card" href="#">
<div class="category-card__media">
<img src="https://picsum.photos/seed/wd-cat-40k/600/450" alt="Warhammer 40,000 Space Marines diorama">
<span class="category-card__plate">Most Asked For</span>
</div>
<div class="category-card__body">
<h3 class="category-card__title">Warhammer 40,000</h3>
<p class="category-card__copy">Combat Patrols, Battleforce boxes, Codex supplements — the broadest 40K rack in the West.</p>
<span class="category-card__cta">Walk the 40K aisle</span>
</div>
</a>
<a class="category-card" href="#">
<div class="category-card__media">
<img src="https://picsum.photos/seed/wd-cat-aos/600/450" alt="Age of Sigmar Stormcast Eternals diorama">
<span class="category-card__plate">New Edition Ready</span>
</div>
<div class="category-card__body">
<h3 class="category-card__title">Age of Sigmar</h3>
<p class="category-card__copy">Spearheads, Battletomes, and the realms in full colour. Skirmish-grade right through to grand alliance.</p>
<span class="category-card__cta">Cross into the realms</span>
</div>
</a>
<a class="category-card" href="#">
<div class="category-card__media">
<img src="https://picsum.photos/seed/wd-cat-tow/600/450" alt="The Old World ranked infantry diorama">
<span class="category-card__plate">Restocked</span>
</div>
<div class="category-card__body">
<h3 class="category-card__title">The Old World</h3>
<p class="category-card__copy">Ranks and flanks back where they belong. Bretonnia, Tomb Kings, and the rest — all on the shelf.</p>
<span class="category-card__cta">March into the Old World</span>
</div>
</a>
<a class="category-card" href="#">
<div class="category-card__media">
<img src="https://picsum.photos/seed/wd-cat-dnd/600/450" alt="Dungeons and Dragons rulebooks and dice">
<span class="category-card__plate">New Rulebooks</span>
</div>
<div class="category-card__body">
<h3 class="category-card__title">Dungeons & Dragons</h3>
<p class="category-card__copy">Rulebooks, dice, minis, terrain. From your first character sheet to the dragon's hoard.</p>
<span class="category-card__cta">Step into the dungeon</span>
</div>
</a>
<a class="category-card" href="#">
<div class="category-card__media">
<img src="https://picsum.photos/seed/wd-cat-hobby/600/450" alt="Hobby supplies, clippers, files, glue">
<span class="category-card__plate">Workbench Essentials</span>
</div>
<div class="category-card__body">
<h3 class="category-card__title">Hobby Supplies</h3>
<p class="category-card__copy">Clippers, files, glues, basing materials. The dull little tools that do the real work.</p>
<span class="category-card__cta">Stock the workbench</span>
</div>
</a>
<a class="category-card" href="#">
<div class="category-card__media">
<img src="https://picsum.photos/seed/wd-cat-paints/600/450" alt="Paint pots, brushes, and palettes">
<span class="category-card__plate">Full Range Stocked</span>
</div>
<div class="category-card__body">
<h3 class="category-card__title">Paints & Brushes</h3>
<p class="category-card__copy">Citadel, Vallejo, Two Thin Coats. The bottle, the brush, and a steady hand — that's the trick.</p>
<span class="category-card__cta">Open the paint chest</span>
</div>
</a>
</div>
</div>
</section>
<!-- gear divider -->
<div class="gear-divider" role="presentation" aria-hidden="true"></div>
<!-- ============================================================
07 — FAN FAVOURITES (4 product cards, brass loyalty roundel)
============================================================ -->
<section class="fan-favs gear-pattern">
<div class="wrap wrap--default">
<div class="section-head">
<span class="eyebrow-stamp section-head__eyebrow">Fan Favourites</span>
<h2 class="section-head__title">What's Moving Off the Shelves</h2>
<span class="section-head__rule" aria-hidden="true"></span>
<p class="section-head__lede">Four picks the regulars keep coming back for. Loyalty points earned on every one.</p>
</div>
<div class="fan-favs__grid">
<article class="product-card">
<div class="product-card__media">
<span class="product-card__game-tag">40K</span>
<span class="product-card__loyalty roundel roundel--small" title="Loyalty points earnable">+95 PTS</span>
<img src="https://picsum.photos/seed/wd-prod-1/480/480" alt="Combat Patrol: Space Marines product shot">
</div>
<div class="product-card__body">
<h3 class="product-card__title">Combat Patrol: Space Marines</h3>
<div class="product-card__rating">★★★★★ <em>(184)</em></div>
<div class="product-card__price-row">
<span class="product-card__price">£95.00</span>
<button class="product-card__quickview">Quick View</button>
</div>
</div>
</article>
<article class="product-card">
<div class="product-card__media">
<span class="product-card__game-tag">AoS</span>
<span class="product-card__loyalty roundel roundel--small" title="Loyalty points earnable">+135 PTS</span>
<img src="https://picsum.photos/seed/wd-prod-2/480/480" alt="Stormcast Eternals Spearhead box">
</div>
<div class="product-card__body">
<h3 class="product-card__title">Spearhead: Stormcast Eternals</h3>
<div class="product-card__rating">★★★★★ <em>(96)</em></div>
<div class="product-card__price-row">
<span class="product-card__price">£135.00</span>
<button class="product-card__quickview">Quick View</button>
</div>
</div>
</article>
<article class="product-card">
<div class="product-card__media">
<span class="product-card__game-tag">D&D</span>
<span class="product-card__loyalty roundel roundel--small" title="Loyalty points earnable">+55 PTS</span>
<img src="https://picsum.photos/seed/wd-prod-3/480/480" alt="D&D 2024 Player's Handbook">
</div>
<div class="product-card__body">
<h3 class="product-card__title">Player's Handbook (2024)</h3>
<div class="product-card__rating">★★★★☆ <em>(312)</em></div>
<div class="product-card__price-row">
<span class="product-card__price">£49.99</span>
<button class="product-card__quickview">Quick View</button>
</div>
</div>
</article>
<article class="product-card">
<div class="product-card__media">
<span class="product-card__game-tag">Hobby</span>
<span class="product-card__loyalty roundel roundel--small" title="Loyalty points earnable">+24 PTS</span>
<img src="https://picsum.photos/seed/wd-prod-4/480/480" alt="Citadel Contrast Paint set">
</div>
<div class="product-card__body">
<h3 class="product-card__title">Contrast Paint Set · Volume II</h3>
<div class="product-card__rating">★★★★★ <em>(421)</em></div>
<div class="product-card__price-row">
<span class="product-card__price">£24.50</span>
<button class="product-card__quickview">Quick View</button>
</div>
</div>
</article>
</div>
</div>
</section>
<!-- gear divider -->
<div class="gear-divider" role="presentation" aria-hidden="true"></div>
<!-- ============================================================
08 — HOW-TO GUIDES + TUTORIALS (light rodeo-light break)
============================================================ -->
<section class="guides">
<div class="wrap wrap--default">
<div class="section-head section-head--on-light">
<span class="eyebrow-stamp section-head__eyebrow">From the Workbench</span>
<h2 class="section-head__title">Guides & Tutorials</h2>
<span class="section-head__rule" aria-hidden="true"></span>
<p class="section-head__lede">Plain-spoken walkthroughs from folk who've made every mistake worth making, so you don't have to.</p>
</div>
<div class="guides__grid">
<article class="guide-card">
<div class="guide-card__media">
<img src="https://picsum.photos/seed/wd-guide-1/720/450" alt="Step-by-step painting tutorial cover image">
<div class="guide-card__badges">
<span class="guide-card__badge">Beginner</span>
<span class="guide-card__badge guide-card__badge--time">12 min read</span>
</div>
</div>
<div class="guide-card__body">
<span class="guide-card__kicker">Painting · How-To</span>
<h3 class="guide-card__title">Three Coats and a Clean Edge</h3>
<p class="guide-card__copy">The bare-bones painting routine that takes a grey plastic and gets it tabletop-ready before the kettle's cold.</p>
<span class="guide-card__cta">Read Guide</span>
</div>
</article>
<article class="guide-card">
<div class="guide-card__media">
<img src="https://picsum.photos/seed/wd-guide-2/720/450" alt="Rules tutorial video still">
<div class="guide-card__badges">
<span class="guide-card__badge">Intermediate</span>
<span class="guide-card__badge guide-card__badge--time">28 min watch</span>
</div>
</div>
<div class="guide-card__body">
<span class="guide-card__kicker">Rules · Tutorial</span>
<h3 class="guide-card__title">Reading a 40K Stratagem Without Panic</h3>
<p class="guide-card__copy">A slow walk through the timing windows, the keywords, and the bits that always trip the first-game crowd up.</p>
<span class="guide-card__cta">Watch Tutorial</span>
</div>
</article>
<article class="guide-card">
<div class="guide-card__media">
<img src="https://picsum.photos/seed/wd-guide-3/720/450" alt="Terrain building project cover image">
<div class="guide-card__badges">
<span class="guide-card__badge">Advanced</span>
<span class="guide-card__badge guide-card__badge--time">2 hr build</span>
</div>
</div>
<div class="guide-card__body">
<span class="guide-card__kicker">Terrain · Build</span>
<h3 class="guide-card__title">Build a Watchtower From an Old Crate</h3>
<p class="guide-card__copy">Scrap card, wood glue, a sharp knife. Everything you need for a centrepiece your gaming table'll thank you for.</p>
<span class="guide-card__cta">Read Guide</span>
</div>
</article>
</div>
</div>
</section>
<!-- gear divider -->
<div class="gear-divider" role="presentation" aria-hidden="true"></div>
<!-- ============================================================
09 — CREATOR PARTNER SPOTLIGHT (dark cowboy)
============================================================ -->
<section class="creators gear-pattern">
<div class="wrap wrap--default">
<div class="section-head">
<span class="eyebrow-stamp section-head__eyebrow">Creator Partners</span>
<h2 class="section-head__title">Voices From The Workshop</h2>
<span class="section-head__rule" aria-hidden="true"></span>
<p class="section-head__lede">Hobbyists, painters and rules-lawyers we trust enough to put a name on. Subscribe, follow, learn.</p>
</div>
<div class="creators__featured">
<div class="creators__portrait">
<figure class="plated-frame">
<div class="plated-frame__media">
<img src="https://picsum.photos/seed/wd-creator-feat/700/875" alt="Featured creator portrait — painter at workbench">
</div>
</figure>
</div>
<div class="creators__copy">
<span class="eyebrow-stamp creators__kicker">Featured This Fortnight</span>
<h3 class="creators__name">Mara “Brushhand” Halloran</h3>
<div class="creators__tags">
<span class="creators__tag">40K</span>
<span class="creators__tag">Age of Sigmar</span>
<span class="creators__tag">Painting</span>
</div>
<p class="creators__quote">
“I paint slow, I write slower, and I have never met a glaze I didn't want to lay down one more
time. If you want fast — go elsewhere. If you want neat — pull up a stool.”
</p>
<div class="creators__stats">
<div class="creators__stat">
<strong>184</strong>
<span>Tutorials</span>
</div>
<div class="creators__stat">
<strong>62K</strong>
<span>Subscribers</span>
</div>
<div class="creators__stat">
<strong>7 yrs</strong>
<span>On the bench</span>
</div>
</div>
<a class="btn" href="#">Visit Mara's Workshop</a>
</div>
</div>
<div class="creators__rail-head">
<h3>More From The Roster</h3>
<a class="guide-card__cta" href="#" style="color:var(--bronze);">All creators</a>
</div>
<div class="creators__rail">
<a class="creator-thumb" href="#">
<div class="creator-thumb__media"><img src="https://picsum.photos/seed/wd-cr-1/300/300" alt=""></div>
<div class="creator-thumb__body">
<div class="creator-thumb__name">Eli Hartwell</div>
<div class="creator-thumb__tag">40K · Tactics</div>
</div>
</a>
<a class="creator-thumb" href="#">
<div class="creator-thumb__media"><img src="https://picsum.photos/seed/wd-cr-2/300/300" alt=""></div>
<div class="creator-thumb__body">
<div class="creator-thumb__name">Nora Pell</div>
<div class="creator-thumb__tag">D&D · DM Craft</div>
</div>
</a>
<a class="creator-thumb" href="#">
<div class="creator-thumb__media"><img src="https://picsum.photos/seed/wd-cr-3/300/300" alt=""></div>
<div class="creator-thumb__body">
<div class="creator-thumb__name">Joss Carraway</div>
<div class="creator-thumb__tag">AoS · Painting</div>
</div>
</a>
<a class="creator-thumb" href="#">
<div class="creator-thumb__media"><img src="https://picsum.photos/seed/wd-cr-4/300/300" alt=""></div>
<div class="creator-thumb__body">
<div class="creator-thumb__name">Beck Marlow</div>
<div class="creator-thumb__tag">Old World</div>
</div>
</a>
<a class="creator-thumb" href="#">
<div class="creator-thumb__media"><img src="https://picsum.photos/seed/wd-cr-5/300/300" alt=""></div>
<div class="creator-thumb__body">
<div class="creator-thumb__name">Pip Sallow</div>
<div class="creator-thumb__tag">Terrain</div>
</div>
</a>
<a class="creator-thumb" href="#">
<div class="creator-thumb__media"><img src="https://picsum.photos/seed/wd-cr-6/300/300" alt=""></div>
<div class="creator-thumb__body">
<div class="creator-thumb__name">Owen Drysdale</div>
<div class="creator-thumb__tag">40K · Lore</div>
</div>
</a>
</div>
</div>
</section>
<!-- gear divider -->
<div class="gear-divider" role="presentation" aria-hidden="true"></div>
<!-- ============================================================
10 — PAINTING SHOWCASE / UGC (liquourice, 6-tile masonry)
============================================================ -->
<section class="showcase gear-pattern gear-pattern--darker">
<div class="wrap wrap--default">
<div class="section-head">
<span class="eyebrow-stamp section-head__eyebrow">Painting Showcase</span>
<h2 class="section-head__title">From The Community's Brushes</h2>
<span class="section-head__rule" aria-hidden="true"></span>
<p class="section-head__lede">Customer work, picked weekly. Every tile a real mini, a real hobbyist, a real hand on the brush.</p>
</div>
<div class="showcase__grid">
<a class="showcase__tile showcase__tile--lg" href="#">
<img src="https://picsum.photos/seed/wd-ugc-1/720/540" alt="Showcase painting — Space Marines squad">
<span class="showcase__caption">Ultramarines Tactical Squad <span>· @brushhand</span></span>
</a>
<a class="showcase__tile showcase__tile--md" href="#">
<img src="https://picsum.photos/seed/wd-ugc-2/480/360" alt="">
<span class="showcase__caption">Stormcast Vanguard <span>· @pelltheslow</span></span>
</a>
<a class="showcase__tile showcase__tile--sm" href="#">
<img src="https://picsum.photos/seed/wd-ugc-3/240/360" alt="">
<span class="showcase__caption">Drow Cleric <span>· @sallow_pip</span></span>
</a>
<a class="showcase__tile showcase__tile--wide" href="#">
<img src="https://picsum.photos/seed/wd-ugc-4/720/360" alt="">
<span class="showcase__caption">Bretonnian Knights of the Realm <span>· @carraway</span></span>
</a>
<a class="showcase__tile showcase__tile--md" href="#">
<img src="https://picsum.photos/seed/wd-ugc-5/480/360" alt="">
<span class="showcase__caption">Terrain — Watchtower <span>· @drysdale</span></span>
</a>
<a class="showcase__tile showcase__tile--sm" href="#">
<img src="https://picsum.photos/seed/wd-ugc-6/240/360" alt="">
<span class="showcase__caption">Dwarf Slayer <span>· @marlow</span></span>
</a>
</div>
<div class="showcase__submit">
<a class="btn btn--ghost" href="#">Submit Your Painting</a>
</div>
</div>
</section>
<!-- gear divider -->
<div class="gear-divider" role="presentation" aria-hidden="true"></div>
<!-- ============================================================
11 — LOYALTY CROSS-BRAND STRIP (sienna stamped band)
============================================================ -->
<section class="loyalty">
<div class="wrap wrap--default loyalty__inner">
<div class="loyalty__head">
<span class="eyebrow-stamp" style="background:var(--liquourice); color:var(--bronze); border-color:var(--bronze);">Loyalty · Cross-Brand</span>
<h2 class="loyalty__title">Earn Here. <em>Redeem Anywhere.</em></h2>
<p class="loyalty__copy">
Spend at War Dungeon, then redeem at Nerdworks, ArtSabers, or Paragon. One ledger, four shopfronts —
like a saloon chit that travels with you.
</p>
<a class="btn" href="#">See Your Balance</a>
</div>
<div class="loyalty__brands">
<div class="loyalty__brand">
<span class="loyalty__brand-mark">N</span>
<div>
<span class="loyalty__brand-name">Nerdworks</span>
<span class="loyalty__brand-role">TCG & Tabletop</span>
</div>
</div>
<div class="loyalty__brand">
<span class="loyalty__brand-mark">A</span>
<div>
<span class="loyalty__brand-name">ArtSabers</span>
<span class="loyalty__brand-role">Helmets & Sabers</span>
</div>
</div>
<div class="loyalty__brand">
<span class="loyalty__brand-mark">P</span>
<div>
<span class="loyalty__brand-name">Paragon</span>
<span class="loyalty__brand-role">Gaming Peripherals</span>
</div>
</div>
<div class="loyalty__brand">
<span class="loyalty__brand-mark">W</span>
<div>
<span class="loyalty__brand-name">War Dungeon</span>
<span class="loyalty__brand-role">Warhammer & D&D</span>
</div>
</div>
</div>
</div>
</section>
<!-- gear divider -->
<div class="gear-divider" role="presentation" aria-hidden="true"></div>
<!-- ============================================================
12 — NEWSLETTER (cowboy panel, typewriter form)
============================================================ -->
<section class="newsletter gear-pattern">
<div class="wrap">
<div class="newsletter__inner">
<span class="eyebrow-stamp newsletter__eyebrow">Newsletter</span>
<h2 class="newsletter__title">Join the Garrison</h2>
<span class="newsletter__rule" aria-hidden="true"></span>
<p class="newsletter__copy">
New releases, pre-orders, paint-night invites, and the odd dispatch from the workshop floor. Sent
when there's something worth sending — never just because.
</p>
<form class="newsletter__form" onsubmit="return false;">
<input class="newsletter__input" type="email" placeholder="ranger@your-garrison.uk" aria-label="Email address">
<button class="btn btn--lg" type="submit">Muster In</button>
</form>
<div class="newsletter__perks">
<span>10% off your first order</span>
<span>500 bonus loyalty points</span>
<span>One mailout a fortnight, no more</span>
</div>
</div>
</div>
</section>
<!-- gear divider -->
<div class="gear-divider" role="presentation" aria-hidden="true"></div>
<!-- ============================================================
13 — GLOBAL FOOTER (4 cols + baseline)
============================================================ -->
<footer class="site-footer">
<div class="wrap wrap--default">
<div class="site-footer__columns">
<div class="footer-brand">
<div class="footer-brand__mark">
<span class="brand-mark__cog" aria-hidden="true"></span>
<span class="footer-brand__word">War Dungeon</span>
</div>
<p class="footer-brand__copy">
The workbench of warriors. Warhammer, Dungeons & Dragons, and the tools to do them justice — out of
a forge in the West Midlands since the wheels first turned.
</p>
<span class="footer-brand__badge">A Nerdworks Brand</span>
</div>
<div class="footer-col">
<h4 class="footer-col__title">Shop</h4>
<ul class="footer-col__list">
<li><span class="footer-pip"></span><a href="#">Warhammer 40,000</a></li>
<li><span class="footer-pip"></span><a href="#">Age of Sigmar</a></li>
<li><span class="footer-pip"></span><a href="#">The Old World</a></li>
<li><span class="footer-pip"></span><a href="#">Dungeons & Dragons</a></li>
<li><span class="footer-pip"></span><a href="#">Hobby Supplies</a></li>
<li><span class="footer-pip"></span><a href="#">Paints & Brushes</a></li>
</ul>
</div>
<div class="footer-col">
<h4 class="footer-col__title">Discover</h4>
<ul class="footer-col__list">
<li><span class="footer-pip"></span><a href="#">Army Builder</a></li>
<li><span class="footer-pip"></span><a href="#">Battle Simulator</a></li>
<li><span class="footer-pip"></span><a href="#">How-To Guides</a></li>
<li><span class="footer-pip"></span><a href="#">Tutorials</a></li>
<li><span class="footer-pip"></span><a href="#">Creator Partners</a></li>
<li><span class="footer-pip"></span><a href="#">Community</a></li>
</ul>
</div>
<div class="footer-col">
<h4 class="footer-col__title">Help</h4>
<ul class="footer-col__list">
<li><span class="footer-pip"></span><a href="#">Contact</a></li>
<li><span class="footer-pip"></span><a href="#">Shipping</a></li>
<li><span class="footer-pip"></span><a href="#">Returns</a></li>
<li><span class="footer-pip"></span><a href="#">FAQ</a></li>
<li><span class="footer-pip"></span><a href="#">Track Your Order</a></li>
</ul>
</div>
<div class="footer-col">
<h4 class="footer-col__title">Brand & Loyalty</h4>
<ul class="footer-col__list">
<li><span class="footer-pip"></span><a href="#">About War Dungeon</a></li>
<li><span class="footer-pip"></span><a href="#">Sister Brands</a></li>
<li><span class="footer-pip"></span><a href="#">Loyalty Programme</a></li>
<li><span class="footer-pip"></span><a href="#">Affiliate / Creator Sign-Up</a></li>
</ul>
</div>
</div>
</div>
<div class="site-footer__baseline">
<div class="wrap wrap--default site-footer__baseline-inner">
<div class="site-footer__pay" aria-label="Payment methods">
<span>Visa</span><span>M/Card</span><span>Amex</span><span>PayPal</span><span>Klarna</span><span>Apple Pay</span>
</div>
<div class="site-footer__legal">
© 2026 War Dungeon · Nerdworks Limited
<a href="#">Privacy</a><a href="#">Terms</a><a href="#">Cookies</a>
</div>
<div class="site-footer__social" aria-label="Social">
<span>IG</span><span>YT</span><span>X</span><span>FB</span>
</div>
</div>
</div>
</footer>
</body>
</html>