<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>War Dungeon — Forge Your Army</title>
<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=Cinzel:wght@500;600;700;800&family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&display=swap">
<style>
/* ============================================================
TOKENS — verbatim from Frontier (SWD1) styleguide
Chromatic identifiers (hues) and surface semantics (roles)
are kept strictly separate per the fidelity checklist.
============================================================ */
:root {
/* Chromatic — hues only. Use for accents, ornament, dividers. */
--rodeo: #C5A688;
--rodeo-light: #D8C3B1;
--bronze: #F4A479;
--caput: #613F34;
--sienna: #832D15;
--cowboy: #2B1B1C;
--liquourice: #1B1314;
--light: #FFFFFF;
--positive: #4A6E50;
--negative: #C8442D;
/* Surface semantics — roles. Use for background, ground text. */
--bg-light: #C5A688;
--bg-light-alt: #D8C3B1;
--bg-dark: #2B1B1C;
--bg-darkest: #1B1314;
--bg-card-on-light: #D8C3B1;
--bg-card-on-dark: #2B1B1C;
--bg-card-on-dark-alt: #3A2728;
--text-on-light: #613F34;
--text-on-dark: #FFFFFF;
--text-eyebrow-on-light: #832D15;
--text-eyebrow-on-dark: #F4A479;
--text-muted-on-light: #8a6957;
--text-muted-on-dark: #C5A688;
--border-on-light: #613F34;
--border-on-dark: #C5A688;
/* Typography */
--font-display: "modesto-condensed", "Cinzel", "Playfair Display", Georgia, serif;
--font-body: "palatino-linotype", "EB Garamond", "Literata", 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-wide: 0.04em;
--ls-wider: 0.08em;
--ls-widest: 0.16em;
/* Spacing */
--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
--s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
--s9: 96px; --s10: 128px;
/* Radii */
--r-none: 0;
--r-sm: 4px;
--r-md: 7px;
--r-lg: 14px;
/* Containers */
--cw-narrow: 720px;
--cw-default: 1200px;
--cw-wide: 1440px;
/* Patina + Texture — CSS-generated only, all under 12% opacity.
Paper noise: low-frequency turbulence, warm caput tint.
Leather noise: higher-frequency turbulence, bronze tint.
Metal noise: very fine turbulence, near-neutral. */
--noise-paper: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.38 0 0 0 0 0.25 0 0 0 0 0.20 0 0 0 0.55 0'/></filter><rect width='260' height='260' filter='url(%23n)' opacity='0.6'/></svg>");
--noise-leather: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='2' seed='8' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.96 0 0 0 0 0.64 0 0 0 0 0.47 0 0 0 0.45 0'/></filter><rect width='260' height='260' filter='url(%23n)' opacity='0.5'/></svg>");
--noise-metal: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='2.1' numOctaves='1' seed='11' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.35 0'/></filter><rect width='260' height='260' filter='url(%23n)' opacity='0.45'/></svg>");
/* Gear watermark — bronze stroke, 4% opacity, large repeat */
--gear-watermark: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220' width='220' height='220'><g fill='none' stroke='%23F4A479' stroke-width='0.9' opacity='0.04'><circle cx='110' cy='110' r='62'/><circle cx='110' cy='110' r='22'/><path d='M110 30 L110 50 M110 170 L110 190 M30 110 L50 110 M170 110 L190 110'/><path d='M53 53 L67 67 M153 153 L167 167 M53 167 L67 153 M153 67 L167 53'/><circle cx='110' cy='110' r='4'/></g></svg>");
/* Hairline distress — repeating-linear-gradient with micro gaps */
--rule-distress-on-light: repeating-linear-gradient(90deg, var(--caput) 0, var(--caput) 14px, transparent 14px, transparent 16px, var(--caput) 16px, var(--caput) 32px, transparent 32px, transparent 33px);
--rule-distress-on-dark: repeating-linear-gradient(90deg, var(--rodeo) 0, var(--rodeo) 14px, transparent 14px, transparent 16px, var(--rodeo) 16px, var(--rodeo) 32px, transparent 32px, transparent 33px);
}
/* ============================================================
PAGE RESET + GROUND
============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 18px; }
body {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--text-on-light);
background: var(--bg-light);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
.container {
max-width: var(--cw-wide);
margin: 0 auto;
padding: 0 40px;
}
.container--narrow { max-width: var(--cw-default); }
/* Section ground primitives — every section adds a textural pass.
The texture stack is: paper/leather noise overlay, very faint
directional grain via repeating-linear-gradient, the rodeo/cowboy
ground colour at the bottom. */
.band {
position: relative;
padding: var(--s9) 0;
background-color: var(--bg-light);
background-image:
repeating-linear-gradient(
0deg,
rgba(97, 63, 52, 0.025) 0,
rgba(97, 63, 52, 0.025) 1px,
transparent 1px,
transparent 4px
),
var(--noise-paper);
background-size: auto, 260px 260px;
background-blend-mode: multiply, normal;
}
.band--alt {
background-color: var(--bg-light-alt);
background-image:
repeating-linear-gradient(
90deg,
rgba(97, 63, 52, 0.02) 0,
rgba(97, 63, 52, 0.02) 1px,
transparent 1px,
transparent 5px
),
var(--noise-paper);
}
.band--dark {
background-color: var(--bg-dark);
background-image:
var(--gear-watermark),
repeating-linear-gradient(
45deg,
rgba(244, 164, 121, 0.022) 0,
rgba(244, 164, 121, 0.022) 1px,
transparent 1px,
transparent 6px
),
var(--noise-leather);
background-size: 220px 220px, auto, 260px 260px;
color: var(--text-on-dark);
}
.band--darkest {
background-color: var(--bg-darkest);
background-image:
var(--gear-watermark),
var(--noise-leather);
background-size: 260px 260px, 260px 260px;
color: var(--text-on-dark);
}
/* Eyebrow — palatino small-caps italic with caput underline rule */
.eyebrow {
display: inline-block;
font-family: var(--font-body);
font-style: italic;
font-size: var(--fs-eyebrow);
font-variant: small-caps;
letter-spacing: var(--ls-widest);
color: var(--text-eyebrow-on-light);
padding-bottom: var(--s2);
border-bottom: 1px solid var(--caput);
margin-bottom: var(--s5);
}
.band--dark .eyebrow,
.band--darkest .eyebrow {
color: var(--text-eyebrow-on-dark);
border-bottom-color: var(--bronze);
}
/* Section heads */
.section-head { margin-bottom: var(--s7); max-width: 720px; }
.section-head__title {
font-family: var(--font-display);
font-size: var(--fs-h2);
line-height: var(--lh-heading);
letter-spacing: -0.005em;
font-weight: 700;
}
.section-head__kicker {
font-family: var(--font-body);
font-style: italic;
font-size: var(--fs-body-lg);
line-height: 1.5;
color: var(--text-muted-on-light);
margin-top: var(--s4);
}
.band--dark .section-head__kicker,
.band--darkest .section-head__kicker {
color: var(--text-muted-on-dark);
}
/* Section divider — hairline distress on a 1px rule */
.section-divider {
height: 1px;
width: 100%;
background: var(--rule-distress-on-light);
background-size: 33px 1px;
margin: 0;
}
.band--dark + .section-divider,
.band--darkest + .section-divider {
background: var(--rule-distress-on-dark);
}
/* CTA button — sienna fill with inner-bevel inset shadow,
light leather-grain backing baked in via the noise overlay. */
.btn {
display: inline-flex;
align-items: center;
gap: var(--s2);
font-family: var(--font-display);
font-size: var(--fs-body);
font-weight: 700;
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--light);
background-color: var(--sienna);
background-image: var(--noise-leather);
background-size: 220px 220px;
background-blend-mode: overlay;
padding: 14px 28px;
border-radius: var(--r-md);
border: 1px solid rgba(0, 0, 0, 0.35);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.12),
inset 0 -1px 0 rgba(0, 0, 0, 0.25),
0 1px 0 rgba(0, 0, 0, 0.4);
transition: background-color 0.15s ease;
}
.btn:hover { background-color: #6f2510; }
.btn--ghost {
background-color: transparent;
background-image: none;
color: var(--sienna);
border: 1px solid var(--sienna);
box-shadow: none;
}
.band--dark .btn--ghost,
.band--darkest .btn--ghost {
color: var(--bronze);
border-color: var(--bronze);
}
.btn--secondary {
background-color: var(--liquourice);
}
.btn--secondary:hover { background-color: #0d0809; }
.btn--sm { padding: 10px 18px; font-size: var(--fs-body-sm); }
/* ============================================================
1. PREHEADER — sienna chrome, rotating campaign messages
============================================================ */
.preheader {
background-color: var(--sienna);
background-image: var(--noise-leather);
background-size: 220px 220px;
background-blend-mode: overlay;
color: var(--light);
border-bottom: 1px solid rgba(0, 0, 0, 0.35);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.preheader__inner {
display: flex;
align-items: center;
justify-content: center;
gap: var(--s7);
padding: 10px 40px;
font-family: var(--font-display);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
font-weight: 700;
}
.preheader__msg {
display: inline-flex;
align-items: center;
gap: var(--s3);
}
.preheader__msg::before {
content: "";
width: 6px; height: 6px;
background: var(--bronze);
border-radius: 50%;
display: inline-block;
}
.preheader__dot {
display: inline-block;
width: 1px;
height: 10px;
background: rgba(255, 255, 255, 0.35);
}
/* ============================================================
2. HEADER — liquourice chrome, logo + nav + utility
============================================================ */
.site-header {
background-color: var(--bg-darkest);
background-image: var(--noise-leather);
background-size: 260px 260px;
color: var(--text-on-dark);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.site-header__inner {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--s7);
padding: var(--s5) 40px;
max-width: var(--cw-wide);
margin: 0 auto;
}
.brandmark {
display: inline-flex;
align-items: baseline;
gap: var(--s2);
font-family: var(--font-display);
font-size: 28px;
letter-spacing: var(--ls-wider);
text-transform: uppercase;
font-weight: 800;
color: var(--light);
}
.brandmark__amp { color: var(--bronze); font-weight: 500; }
.brandmark__sub {
display: block;
font-family: var(--font-body);
font-style: italic;
font-size: 11px;
letter-spacing: var(--ls-widest);
color: var(--rodeo);
margin-top: 2px;
text-transform: uppercase;
}
.primary-nav {
display: flex;
gap: var(--s7);
justify-content: center;
}
.primary-nav__item {
font-family: var(--font-display);
font-size: 16px;
letter-spacing: var(--ls-wider);
text-transform: uppercase;
font-weight: 600;
color: var(--light);
padding: 6px 0;
border-bottom: 1px solid transparent;
display: inline-flex;
align-items: center;
gap: 6px;
}
.primary-nav__item:hover { border-bottom-color: var(--bronze); }
.primary-nav__caret {
width: 0; height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid var(--bronze);
}
.utility-nav {
display: flex;
align-items: center;
gap: var(--s5);
}
.utility-icon {
width: 22px; height: 22px;
stroke: var(--light);
fill: none;
stroke-width: 1.5;
}
.basket {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--s2);
}
.basket__points {
font-family: var(--font-display);
font-size: 11px;
letter-spacing: var(--ls-wide);
text-transform: uppercase;
background: var(--bronze);
color: var(--liquourice);
padding: 3px 7px;
border-radius: 999px;
font-weight: 700;
}
/* ============================================================
3. HERO — single bold cinematic composition, dark base
Large photographic placeholder with paper-grain textural overlay
============================================================ */
.hero {
position: relative;
background-color: var(--bg-darkest);
padding: var(--s10) 0 var(--s9);
color: var(--text-on-dark);
overflow: hidden;
}
.hero::before {
content: "";
position: absolute;
inset: 0;
background:
var(--gear-watermark),
var(--noise-leather);
background-size: 220px 220px, 260px 260px;
opacity: 0.9;
pointer-events: none;
z-index: 1;
}
.hero__inner {
position: relative;
z-index: 2;
max-width: var(--cw-wide);
margin: 0 auto;
padding: 0 40px;
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: var(--s9);
align-items: center;
}
.hero__media {
position: relative;
aspect-ratio: 4 / 3;
border-radius: var(--r-md);
/* Etched plate frame: leather-stitch border = parallel hairlines */
border: 1px solid var(--caput);
outline: 1px solid var(--caput);
outline-offset: 3px;
overflow: hidden;
background-color: #0d0608;
/* Diorama placeholder: warm side-lit moody scene built from gradients */
background-image:
/* Hot spot front-right: oil-lamp warm light */
radial-gradient(ellipse 40% 30% at 68% 60%, rgba(244, 164, 121, 0.55), transparent 60%),
/* Secondary cool fill back-left */
radial-gradient(ellipse 50% 40% at 25% 35%, rgba(131, 45, 21, 0.4), transparent 70%),
/* Atmospheric smoke band */
linear-gradient(180deg, rgba(43, 27, 28, 0) 40%, rgba(43, 27, 28, 0.75) 70%, rgba(27, 19, 20, 0.95) 100%),
/* Ground silhouette */
linear-gradient(180deg, transparent 60%, #1a0f0f 78%, #0a0606 100%),
/* Base gradient: night sky behind diorama */
linear-gradient(180deg, #2B1B1C 0%, #1B1314 100%);
}
.hero__media::after {
/* Textural overlay — paper-grain noise at 10% over the photo */
content: "";
position: absolute;
inset: 0;
background: var(--noise-paper);
background-size: 260px 260px;
opacity: 0.55;
mix-blend-mode: overlay;
pointer-events: none;
}
.hero__media-caption {
position: absolute;
bottom: var(--s4);
left: var(--s5);
z-index: 2;
font-family: var(--font-body);
font-style: italic;
font-size: var(--fs-micro);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--rodeo);
background: rgba(27, 19, 20, 0.6);
padding: 4px 10px;
border: 1px solid rgba(197, 166, 136, 0.3);
border-radius: var(--r-sm);
}
.hero__copy { padding-right: var(--s5); }
.hero__eyebrow {
font-family: var(--font-body);
font-style: italic;
font-variant: small-caps;
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-widest);
color: var(--bronze);
padding-bottom: var(--s2);
border-bottom: 1px solid var(--bronze);
margin-bottom: var(--s6);
display: inline-block;
}
.hero__title {
font-family: var(--font-display);
font-size: var(--fs-display);
line-height: 1.05;
letter-spacing: -0.01em;
font-weight: 700;
color: var(--light);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
.hero__title em {
color: var(--bronze);
font-style: normal;
display: block;
}
.hero__subhead {
font-family: var(--font-body);
font-size: var(--fs-body-lg);
line-height: 1.55;
color: var(--rodeo);
margin: var(--s6) 0 var(--s7);
max-width: 36ch;
}
.hero__actions {
display: flex;
gap: var(--s4);
align-items: center;
flex-wrap: wrap;
}
.hero__note {
font-family: var(--font-body);
font-style: italic;
font-size: var(--fs-body-sm);
color: var(--text-muted-on-dark);
margin-top: var(--s6);
padding-top: var(--s4);
border-top: 1px solid rgba(197, 166, 136, 0.25);
max-width: 42ch;
}
/* ============================================================
4. TRUST STRIP — rodeo light band, 4 cells with gear divider
============================================================ */
.trust {
padding: var(--s7) 0;
}
.trust__inner {
max-width: var(--cw-wide);
margin: 0 auto;
padding: 0 40px;
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
gap: var(--s5);
align-items: center;
}
.trust__cell {
position: relative;
display: flex;
align-items: center;
gap: var(--s4);
padding: var(--s5) var(--s4);
/* Leather-stitch border: 1px caput + outline at 2px offset */
border: 1px solid var(--caput);
outline: 1px solid var(--caput);
outline-offset: 3px;
border-radius: var(--r-md);
background-color: var(--bg-card-on-light);
background-image: var(--noise-paper);
background-size: 260px 260px;
}
.trust__icon {
width: 38px; height: 38px;
flex-shrink: 0;
stroke: var(--caput);
fill: none;
stroke-width: 1.4;
}
.trust__label {
font-family: var(--font-display);
font-size: var(--fs-body);
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--ls-wide);
line-height: 1.2;
color: var(--caput);
}
.trust__sub {
display: block;
font-family: var(--font-body);
font-style: italic;
font-size: var(--fs-body-sm);
letter-spacing: 0;
text-transform: none;
color: var(--text-muted-on-light);
margin-top: 4px;
font-weight: 400;
}
.trust__divider {
width: 32px;
height: 32px;
flex-shrink: 0;
stroke: var(--caput);
fill: none;
stroke-width: 1;
opacity: 0.55;
}
/* ============================================================
5. TOOLS TEASER — dark band, two brushed-steel cards
============================================================ */
.tools {
padding: var(--s9) 0;
}
.tools__inner {
max-width: var(--cw-wide);
margin: 0 auto;
padding: 0 40px;
}
.tools__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s6);
}
.tool-card {
position: relative;
border-radius: var(--r-md);
border: 1px solid var(--bronze);
outline: 1px solid var(--bronze);
outline-offset: 3px;
overflow: hidden;
background-color: var(--caput);
/* Brushed-steel hero treatment: radial mottling + fine vertical strokes
+ metal noise overlay */
background-image:
repeating-linear-gradient(
90deg,
rgba(255, 255, 255, 0.04) 0,
rgba(255, 255, 255, 0.04) 1px,
rgba(0, 0, 0, 0.04) 1px,
rgba(0, 0, 0, 0.04) 2px
),
radial-gradient(ellipse at 30% 30%, rgba(244, 164, 121, 0.18), transparent 60%),
radial-gradient(ellipse at 80% 80%, rgba(27, 19, 20, 0.5), transparent 60%),
var(--noise-metal);
background-size: auto, auto, auto, 260px 260px;
}
.tool-card__media {
position: relative;
aspect-ratio: 16 / 9;
border-bottom: 1px solid var(--bronze);
overflow: hidden;
background-image:
radial-gradient(ellipse 40% 50% at 50% 60%, rgba(244, 164, 121, 0.45), transparent 65%),
linear-gradient(180deg, transparent 50%, rgba(27, 19, 20, 0.6) 100%),
linear-gradient(135deg, #3A2728 0%, #1B1314 70%);
}
.tool-card__media::after {
content: "";
position: absolute;
inset: 0;
background: var(--noise-paper);
background-size: 260px 260px;
opacity: 0.4;
mix-blend-mode: overlay;
}
.tool-card__gear {
position: absolute;
top: var(--s4);
right: var(--s4);
width: 56px;
height: 56px;
stroke: var(--bronze);
fill: none;
stroke-width: 1.2;
opacity: 0.7;
z-index: 2;
}
.tool-card__pill {
position: absolute;
top: var(--s4);
left: var(--s4);
z-index: 2;
font-family: var(--font-display);
font-size: var(--fs-micro);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
font-weight: 700;
padding: 5px 10px;
border-radius: 3px;
background: var(--liquourice);
color: var(--bronze);
border: 1px solid var(--bronze);
}
.tool-card__pill--live {
background: var(--sienna);
color: var(--light);
border-color: var(--sienna);
}
.tool-card__body {
position: relative;
padding: var(--s6);
color: var(--text-on-dark);
}
.tool-card__eyebrow {
font-family: var(--font-body);
font-style: italic;
font-variant: small-caps;
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-widest);
color: var(--bronze);
border-bottom: 1px solid var(--bronze);
padding-bottom: var(--s2);
margin-bottom: var(--s4);
display: inline-block;
}
.tool-card__title {
font-family: var(--font-display);
font-size: var(--fs-h3);
line-height: 1.15;
font-weight: 700;
color: var(--light);
}
.tool-card__desc {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.5;
color: var(--rodeo);
margin: var(--s4) 0 var(--s6);
}
.tool-card__meta {
display: flex;
gap: var(--s5);
margin-bottom: var(--s5);
padding-bottom: var(--s5);
border-bottom: 1px solid rgba(244, 164, 121, 0.25);
}
.tool-card__meta-item {
font-family: var(--font-body);
font-style: italic;
font-size: var(--fs-body-sm);
color: var(--rodeo);
}
.tool-card__meta-item strong {
display: block;
font-style: normal;
font-family: var(--font-display);
font-size: var(--fs-body-lg);
color: var(--light);
font-weight: 700;
letter-spacing: var(--ls-wide);
}
/* ============================================================
6. CHOOSE YOUR GAME — rodeo band, 3+3 grid of game cards
============================================================ */
.games {
padding: var(--s9) 0;
}
.games__inner {
max-width: var(--cw-wide);
margin: 0 auto;
padding: 0 40px;
}
.games__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s6);
}
.game-card {
position: relative;
display: flex;
flex-direction: column;
border: 1px solid var(--caput);
outline: 1px solid var(--caput);
outline-offset: 3px;
border-radius: var(--r-md);
background-color: var(--bg-card-on-light);
background-image: var(--noise-paper);
background-size: 260px 260px;
overflow: hidden;
transition: transform 0.2s ease;
}
.game-card:hover { transform: translateY(-2px); }
.game-card__media {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
border-bottom: 1px solid var(--caput);
background-color: var(--cowboy);
}
.game-card__media::after {
content: "";
position: absolute;
inset: 0;
background: var(--noise-paper);
background-size: 260px 260px;
opacity: 0.4;
mix-blend-mode: overlay;
}
.game-card--40k .game-card__media {
background-image:
radial-gradient(ellipse 50% 40% at 60% 55%, rgba(244, 164, 121, 0.4), transparent 70%),
linear-gradient(180deg, transparent 55%, rgba(27, 19, 20, 0.8) 100%),
linear-gradient(135deg, #4a2e2f 0%, #1f1314 70%);
}
.game-card--aos .game-card__media {
background-image:
radial-gradient(ellipse 50% 40% at 30% 50%, rgba(244, 164, 121, 0.45), transparent 70%),
linear-gradient(180deg, transparent 55%, rgba(27, 19, 20, 0.75) 100%),
linear-gradient(135deg, #5a3a2d 0%, #2a1a1a 75%);
}
.game-card--ow .game-card__media {
background-image:
radial-gradient(ellipse 60% 50% at 50% 40%, rgba(197, 166, 136, 0.35), transparent 70%),
linear-gradient(180deg, transparent 50%, rgba(27, 19, 20, 0.8) 100%),
linear-gradient(180deg, #3a2a26 0%, #1c1212 75%);
}
.game-card--dnd .game-card__media {
background-image:
radial-gradient(ellipse 45% 40% at 50% 60%, rgba(131, 45, 21, 0.55), transparent 70%),
linear-gradient(180deg, transparent 55%, rgba(27, 19, 20, 0.78) 100%),
linear-gradient(135deg, #3a1f1c 0%, #1a0e0e 75%);
}
.game-card--hobby .game-card__media {
background-image:
radial-gradient(ellipse 50% 40% at 50% 50%, rgba(244, 164, 121, 0.35), transparent 75%),
linear-gradient(180deg, transparent 55%, rgba(27, 19, 20, 0.78) 100%),
linear-gradient(180deg, #3d2825 0%, #1b1213 75%);
}
.game-card--paints .game-card__media {
background-image:
radial-gradient(ellipse 30% 30% at 30% 40%, rgba(131, 45, 21, 0.5), transparent 60%),
radial-gradient(ellipse 25% 25% at 70% 60%, rgba(74, 110, 80, 0.45), transparent 60%),
radial-gradient(ellipse 25% 25% at 50% 80%, rgba(244, 164, 121, 0.45), transparent 60%),
linear-gradient(135deg, #2e1f1d 0%, #1a1010 75%);
}
.game-card__badge {
position: absolute;
top: var(--s4);
left: var(--s4);
z-index: 2;
font-family: var(--font-display);
font-size: var(--fs-micro);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
font-weight: 700;
padding: 4px 8px;
background: var(--liquourice);
color: var(--bronze);
border: 1px solid var(--bronze);
border-radius: 3px;
}
.game-card__body {
padding: var(--s6) var(--s5) var(--s5);
flex: 1;
display: flex;
flex-direction: column;
}
.game-card__title {
font-family: var(--font-display);
font-size: var(--fs-h4);
font-weight: 700;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: var(--ls-wide);
color: var(--caput);
}
.game-card__positioning {
font-family: var(--font-body);
font-style: italic;
font-size: var(--fs-body-sm);
line-height: 1.5;
color: var(--text-on-light);
margin: var(--s3) 0 var(--s5);
flex: 1;
}
.game-card__cta {
font-family: var(--font-display);
font-size: var(--fs-body-sm);
text-transform: uppercase;
letter-spacing: var(--ls-wide);
color: var(--sienna);
font-weight: 700;
display: inline-flex;
align-items: center;
gap: var(--s2);
padding-top: var(--s4);
border-top: 1px solid var(--caput);
margin-top: auto;
}
.game-card__cta::after { content: "→"; }
/* ============================================================
7. FAN FAVOURITES — rodeo-light alt band, 4 product cards
============================================================ */
.favourites {
padding: var(--s9) 0;
}
.favourites__inner {
max-width: var(--cw-wide);
margin: 0 auto;
padding: 0 40px;
}
.favourites__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--s5);
}
.product-card {
position: relative;
display: flex;
flex-direction: column;
border: 1px solid var(--caput);
border-radius: var(--r-md);
background-color: var(--bg-card-on-light);
/* Paper-grain wash on rodeo card background */
background-image:
repeating-linear-gradient(
0deg,
rgba(97, 63, 52, 0.02) 0,
rgba(97, 63, 52, 0.02) 1px,
transparent 1px,
transparent 3px
),
var(--noise-paper);
background-size: auto, 260px 260px;
overflow: hidden;
box-shadow: 0 1px 0 var(--caput);
}
.product-card__media {
position: relative;
aspect-ratio: 1 / 1;
background: var(--light);
border-bottom: 1px solid var(--caput);
overflow: hidden;
}
.product-card__media::after {
content: "";
position: absolute;
inset: 0;
background: var(--noise-paper);
background-size: 260px 260px;
opacity: 0.3;
mix-blend-mode: multiply;
}
.product-card__shot {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}
.product-card__shot--40k {
background:
radial-gradient(ellipse 40% 35% at 50% 55%, rgba(74, 47, 36, 0.25), transparent 65%);
}
.product-card__shot svg {
width: 60%;
height: 60%;
stroke: var(--caput);
fill: var(--caput);
fill-opacity: 0.08;
stroke-width: 1.2;
}
.product-card__loyalty {
position: absolute;
top: var(--s3);
right: var(--s3);
z-index: 2;
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--bronze);
background-image: var(--noise-metal);
background-size: 260px 260px;
background-blend-mode: overlay;
border: 1px solid var(--caput);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: var(--font-display);
color: var(--liquourice);
font-weight: 800;
line-height: 1;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}
.product-card__loyalty-pts { font-size: 16px; }
.product-card__loyalty-lbl {
font-size: 8px;
letter-spacing: var(--ls-widest);
text-transform: uppercase;
font-weight: 700;
margin-top: 2px;
}
.product-card__body {
padding: var(--s5);
display: flex;
flex-direction: column;
flex: 1;
}
.product-card__game-tag {
font-family: var(--font-body);
font-style: italic;
font-variant: small-caps;
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-widest);
color: var(--sienna);
border-bottom: 1px solid var(--caput);
padding-bottom: var(--s2);
margin-bottom: var(--s3);
display: inline-block;
align-self: flex-start;
}
.product-card__title {
font-family: var(--font-display);
font-size: var(--fs-body-lg);
font-weight: 700;
line-height: 1.2;
color: var(--caput);
text-transform: uppercase;
letter-spacing: var(--ls-wide);
margin-bottom: var(--s3);
}
.product-card__rating {
display: inline-flex;
align-items: center;
gap: var(--s2);
font-family: var(--font-body);
font-style: italic;
font-size: var(--fs-body-sm);
color: var(--text-muted-on-light);
margin-bottom: var(--s3);
}
.product-card__stars { color: var(--sienna); letter-spacing: 1px; font-style: normal; }
.product-card__price-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
padding-top: var(--s4);
border-top: 1px solid var(--caput);
}
.product-card__price {
font-family: var(--font-display);
font-size: var(--fs-h4);
font-weight: 700;
color: var(--sienna);
}
.product-card__quickview {
font-family: var(--font-display);
font-size: var(--fs-body-sm);
text-transform: uppercase;
letter-spacing: var(--ls-wide);
color: var(--caput);
font-weight: 700;
display: inline-flex;
align-items: center;
gap: var(--s2);
}
.product-card__quickview::after { content: "+"; font-weight: 800; }
/* ============================================================
8. HOW-TO + TUTORIALS — dark band, 3 large content cards
============================================================ */
.howto {
padding: var(--s9) 0;
}
.howto__inner {
max-width: var(--cw-wide);
margin: 0 auto;
padding: 0 40px;
}
.howto__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s6);
}
.content-card {
position: relative;
border: 1px solid var(--bronze);
border-radius: var(--r-md);
background-color: var(--bg-card-on-dark);
background-image: var(--noise-leather);
background-size: 260px 260px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.content-card__media {
position: relative;
aspect-ratio: 4 / 3;
border-bottom: 1px solid var(--bronze);
overflow: hidden;
background-color: var(--liquourice);
}
.content-card__media::after {
content: "";
position: absolute;
inset: 0;
background: var(--noise-paper);
background-size: 260px 260px;
opacity: 0.4;
mix-blend-mode: overlay;
}
.content-card--painting .content-card__media {
background-image:
radial-gradient(ellipse 40% 30% at 50% 50%, rgba(244, 164, 121, 0.45), transparent 70%),
radial-gradient(ellipse 25% 25% at 35% 65%, rgba(131, 45, 21, 0.45), transparent 65%),
linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.5) 100%),
linear-gradient(135deg, #3A2728 0%, #1B1314 75%);
}
.content-card--rules .content-card__media {
background-image:
radial-gradient(ellipse 50% 40% at 60% 45%, rgba(197, 166, 136, 0.35), transparent 70%),
linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.5) 100%),
linear-gradient(135deg, #2e2220 0%, #18100f 75%);
}
.content-card--terrain .content-card__media {
background-image:
radial-gradient(ellipse 50% 50% at 30% 70%, rgba(244, 164, 121, 0.4), transparent 65%),
linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.55) 100%),
linear-gradient(135deg, #3a2a24 0%, #1d1310 75%);
}
.content-card__badges {
position: absolute;
top: var(--s4);
left: var(--s4);
z-index: 2;
display: flex;
gap: var(--s2);
}
.content-card__badge {
font-family: var(--font-display);
font-size: var(--fs-micro);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
font-weight: 700;
padding: 4px 9px;
border-radius: 3px;
background: var(--liquourice);
color: var(--bronze);
border: 1px solid var(--bronze);
}
.content-card__badge--beginner { background: var(--positive); color: var(--light); border-color: var(--positive); }
.content-card__badge--intermediate { background: var(--bronze); color: var(--liquourice); border-color: var(--caput); }
.content-card__badge--advanced { background: var(--sienna); color: var(--light); border-color: var(--sienna); }
.content-card__body {
padding: var(--s6);
flex: 1;
display: flex;
flex-direction: column;
color: var(--text-on-dark);
}
.content-card__eyebrow {
font-family: var(--font-body);
font-style: italic;
font-variant: small-caps;
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-widest);
color: var(--bronze);
border-bottom: 1px solid var(--bronze);
padding-bottom: var(--s2);
margin-bottom: var(--s4);
display: inline-block;
align-self: flex-start;
}
.content-card__title {
font-family: var(--font-display);
font-size: var(--fs-h4);
font-weight: 700;
line-height: 1.2;
color: var(--light);
margin-bottom: var(--s3);
}
.content-card__desc {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.5;
color: var(--rodeo);
margin-bottom: var(--s5);
flex: 1;
}
.content-card__meta {
display: flex;
align-items: center;
gap: var(--s4);
margin-bottom: var(--s5);
padding-bottom: var(--s4);
border-bottom: 1px solid rgba(244, 164, 121, 0.25);
font-family: var(--font-body);
font-style: italic;
font-size: var(--fs-body-sm);
color: var(--rodeo);
}
.content-card__cta {
font-family: var(--font-display);
font-size: var(--fs-body-sm);
text-transform: uppercase;
letter-spacing: var(--ls-wide);
color: var(--bronze);
font-weight: 700;
display: inline-flex;
align-items: center;
gap: var(--s2);
}
.content-card__cta::after { content: "→"; }
/* ============================================================
9. CREATOR SPOTLIGHT — rodeo band, featured + strip
============================================================ */
.creators {
padding: var(--s9) 0;
}
.creators__inner {
max-width: var(--cw-wide);
margin: 0 auto;
padding: 0 40px;
}
.creator-spotlight {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: var(--s7);
align-items: stretch;
background-color: var(--bg-card-on-light);
background-image:
repeating-linear-gradient(
45deg,
rgba(97, 63, 52, 0.02) 0,
rgba(97, 63, 52, 0.02) 1px,
transparent 1px,
transparent 5px
),
var(--noise-paper);
background-size: auto, 260px 260px;
border: 1px solid var(--caput);
outline: 1px solid var(--caput);
outline-offset: 3px;
border-radius: var(--r-md);
padding: var(--s6);
margin-bottom: var(--s8);
}
.creator-spotlight__avatar {
position: relative;
aspect-ratio: 4 / 5;
border-radius: var(--r-md);
border: 1px solid var(--caput);
overflow: hidden;
background-image:
radial-gradient(ellipse 45% 30% at 50% 30%, rgba(244, 164, 121, 0.4), transparent 65%),
radial-gradient(ellipse 50% 40% at 50% 55%, rgba(197, 166, 136, 0.4), transparent 70%),
linear-gradient(180deg, transparent 55%, rgba(27, 19, 20, 0.55) 100%),
linear-gradient(135deg, #45302a 0%, #1f1414 75%);
}
.creator-spotlight__avatar::after {
content: "";
position: absolute;
inset: 0;
background: var(--noise-paper);
background-size: 260px 260px;
opacity: 0.4;
mix-blend-mode: overlay;
}
.creator-spotlight__body {
display: flex;
flex-direction: column;
justify-content: center;
padding: var(--s4) 0;
}
.creator-spotlight__tags {
display: flex;
gap: var(--s2);
margin-bottom: var(--s4);
}
.creator-spotlight__tag {
font-family: var(--font-display);
font-size: var(--fs-micro);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
font-weight: 700;
padding: 4px 9px;
background: var(--rodeo);
color: var(--caput);
border: 1px solid var(--caput);
border-radius: 3px;
}
.creator-spotlight__name {
font-family: var(--font-display);
font-size: var(--fs-h2);
font-weight: 700;
line-height: 1.1;
color: var(--caput);
margin-bottom: var(--s4);
}
.creator-spotlight__handle {
font-family: var(--font-body);
font-style: italic;
font-size: var(--fs-body-lg);
color: var(--sienna);
margin-bottom: var(--s5);
}
.creator-spotlight__bio {
font-family: var(--font-body);
font-size: var(--fs-body-lg);
line-height: 1.55;
color: var(--text-on-light);
margin-bottom: var(--s6);
padding-bottom: var(--s5);
border-bottom: 1px solid var(--caput);
}
.creator-strip {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: var(--s4);
}
.creator-thumb {
position: relative;
aspect-ratio: 1 / 1;
border-radius: var(--r-md);
border: 1px solid var(--caput);
overflow: hidden;
background-color: var(--cowboy);
background-image: var(--noise-paper);
background-size: 260px 260px;
}
.creator-thumb::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 40% 35% at 50% 40%, rgba(244, 164, 121, 0.4), transparent 70%),
linear-gradient(180deg, transparent 55%, rgba(27, 19, 20, 0.65) 100%);
mix-blend-mode: normal;
}
.creator-thumb--a::before { background:
radial-gradient(ellipse 50% 40% at 40% 50%, rgba(131, 45, 21, 0.55), transparent 65%),
linear-gradient(180deg, transparent 55%, rgba(27, 19, 20, 0.6) 100%); }
.creator-thumb--b::before { background:
radial-gradient(ellipse 45% 40% at 60% 45%, rgba(244, 164, 121, 0.55), transparent 65%),
linear-gradient(180deg, transparent 55%, rgba(27, 19, 20, 0.6) 100%); }
.creator-thumb--c::before { background:
radial-gradient(ellipse 50% 50% at 50% 55%, rgba(197, 166, 136, 0.5), transparent 70%),
linear-gradient(180deg, transparent 55%, rgba(27, 19, 20, 0.6) 100%); }
.creator-thumb--d::before { background:
radial-gradient(ellipse 40% 35% at 50% 45%, rgba(74, 110, 80, 0.5), transparent 65%),
linear-gradient(180deg, transparent 55%, rgba(27, 19, 20, 0.65) 100%); }
.creator-thumb__label {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: var(--s3);
font-family: var(--font-display);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
font-weight: 700;
color: var(--light);
background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.6));
z-index: 2;
}
.creator-thumb__game {
font-family: var(--font-body);
font-style: italic;
font-size: var(--fs-micro);
letter-spacing: var(--ls-wide);
text-transform: none;
font-weight: 400;
color: var(--rodeo);
display: block;
margin-top: 2px;
}
/* ============================================================
10. PAINTING SHOWCASE — rodeo-light band, 6-tile masonry
============================================================ */
.showcase {
padding: var(--s9) 0;
}
.showcase__inner {
max-width: var(--cw-wide);
margin: 0 auto;
padding: 0 40px;
}
.showcase__head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: var(--s7); gap: var(--s5); }
.showcase__gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 240px);
gap: var(--s4);
margin-bottom: var(--s7);
}
.tile {
position: relative;
overflow: hidden;
border: 1px solid var(--caput);
border-radius: var(--r-md);
background-color: var(--cowboy);
}
.tile::after {
content: "";
position: absolute;
inset: 0;
background: var(--noise-paper);
background-size: 260px 260px;
opacity: 0.35;
mix-blend-mode: overlay;
pointer-events: none;
}
.tile--wide { grid-column: span 2; }
.tile--tall { grid-row: span 2; }
.tile--a { background-image:
radial-gradient(ellipse 50% 40% at 40% 60%, rgba(244, 164, 121, 0.55), transparent 65%),
linear-gradient(135deg, #4a2c26 0%, #1a1010 75%); }
.tile--b { background-image:
radial-gradient(ellipse 40% 40% at 60% 50%, rgba(131, 45, 21, 0.6), transparent 65%),
linear-gradient(135deg, #3a201c 0%, #1a0d0d 75%); }
.tile--c { background-image:
radial-gradient(ellipse 55% 45% at 50% 50%, rgba(197, 166, 136, 0.5), transparent 70%),
linear-gradient(135deg, #3a2a26 0%, #1c1212 75%); }
.tile--d { background-image:
radial-gradient(ellipse 40% 50% at 50% 60%, rgba(74, 110, 80, 0.5), transparent 65%),
linear-gradient(135deg, #2a2e26 0%, #131614 75%); }
.tile--e { background-image:
radial-gradient(ellipse 45% 40% at 55% 45%, rgba(244, 164, 121, 0.5), transparent 65%),
linear-gradient(135deg, #4d2f25 0%, #1f1310 75%); }
.tile--f { background-image:
radial-gradient(ellipse 50% 45% at 40% 55%, rgba(131, 45, 21, 0.5), transparent 65%),
linear-gradient(135deg, #3a1f1a 0%, #190c0c 75%); }
.tile__caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: var(--s4);
background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.7));
color: var(--light);
z-index: 2;
}
.tile__artist {
font-family: var(--font-display);
font-size: var(--fs-body);
text-transform: uppercase;
letter-spacing: var(--ls-wide);
font-weight: 700;
color: var(--light);
}
.tile__piece {
font-family: var(--font-body);
font-style: italic;
font-size: var(--fs-body-sm);
color: var(--rodeo);
margin-top: 2px;
}
.showcase__submit {
text-align: center;
padding-top: var(--s6);
border-top: 1px solid;
border-top-style: dashed;
border-image: var(--rule-distress-on-light) 1;
}
.showcase__submit-copy {
font-family: var(--font-body);
font-style: italic;
font-size: var(--fs-body-lg);
color: var(--text-on-light);
margin-bottom: var(--s4);
}
/* ============================================================
11. LOYALTY CROSS-BRAND STRIP — dark band, sister logos
============================================================ */
.loyalty {
padding: var(--s8) 0;
}
.loyalty__inner {
max-width: var(--cw-wide);
margin: 0 auto;
padding: 0 40px;
}
.loyalty__panel {
position: relative;
padding: var(--s7);
border: 1px solid var(--bronze);
outline: 1px solid var(--bronze);
outline-offset: 3px;
border-radius: var(--r-md);
background-color: var(--cowboy);
background-image:
var(--gear-watermark),
repeating-linear-gradient(
90deg,
rgba(244, 164, 121, 0.025) 0,
rgba(244, 164, 121, 0.025) 1px,
transparent 1px,
transparent 5px
),
var(--noise-leather);
background-size: 220px 220px, auto, 260px 260px;
display: grid;
grid-template-columns: 1fr auto;
gap: var(--s7);
align-items: center;
}
.loyalty__copy { color: var(--text-on-dark); }
.loyalty__eyebrow {
font-family: var(--font-body);
font-style: italic;
font-variant: small-caps;
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-widest);
color: var(--bronze);
border-bottom: 1px solid var(--bronze);
padding-bottom: var(--s2);
margin-bottom: var(--s5);
display: inline-block;
}
.loyalty__title {
font-family: var(--font-display);
font-size: var(--fs-h2);
line-height: 1.1;
color: var(--light);
margin-bottom: var(--s4);
}
.loyalty__title em { color: var(--bronze); font-style: normal; }
.loyalty__desc {
font-family: var(--font-body);
font-size: var(--fs-body-lg);
line-height: 1.5;
color: var(--rodeo);
margin-bottom: var(--s5);
max-width: 50ch;
}
.loyalty__brands {
display: flex;
gap: var(--s5);
align-items: center;
padding-top: var(--s5);
border-top: 1px solid rgba(244, 164, 121, 0.3);
}
.loyalty__brand {
font-family: var(--font-display);
font-size: var(--fs-body);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
font-weight: 700;
color: var(--rodeo);
padding: var(--s2) var(--s3);
border: 1px solid var(--bronze);
border-radius: var(--r-sm);
background: rgba(43, 27, 28, 0.5);
}
.loyalty__brand--here {
color: var(--liquourice);
background: var(--bronze);
border-color: var(--bronze);
}
.loyalty__actions { display: flex; flex-direction: column; gap: var(--s3); }
.loyalty__small {
font-family: var(--font-body);
font-style: italic;
font-size: var(--fs-body-sm);
color: var(--rodeo);
text-align: center;
}
/* ============================================================
12. NEWSLETTER — rodeo band, "Join the Garrison" form
============================================================ */
.newsletter {
padding: var(--s9) 0;
}
.newsletter__inner {
max-width: var(--cw-default);
margin: 0 auto;
padding: 0 40px;
}
.newsletter__panel {
position: relative;
padding: var(--s8) var(--s7);
border: 1px solid var(--caput);
outline: 1px solid var(--caput);
outline-offset: 3px;
border-radius: var(--r-md);
background-color: var(--bg-card-on-light);
background-image:
repeating-linear-gradient(
0deg,
rgba(97, 63, 52, 0.025) 0,
rgba(97, 63, 52, 0.025) 1px,
transparent 1px,
transparent 3px
),
var(--noise-paper);
background-size: auto, 260px 260px;
text-align: center;
}
.newsletter__eyebrow {
font-family: var(--font-body);
font-style: italic;
font-variant: small-caps;
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-widest);
color: var(--sienna);
border-bottom: 1px solid var(--caput);
padding-bottom: var(--s2);
margin-bottom: var(--s5);
display: inline-block;
}
.newsletter__title {
font-family: var(--font-display);
font-size: var(--fs-h2);
line-height: 1.1;
color: var(--caput);
margin-bottom: var(--s4);
}
.newsletter__desc {
font-family: var(--font-body);
font-style: italic;
font-size: var(--fs-body-lg);
line-height: 1.5;
color: var(--text-on-light);
max-width: 50ch;
margin: 0 auto var(--s7);
}
.newsletter__form {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--s3);
max-width: 540px;
margin: 0 auto;
/* Steampunk-typewriter visual: cream paper feed with caput keyline */
background: #efe1cf;
background-image: var(--noise-paper);
background-size: 260px 260px;
padding: var(--s3);
border: 1px solid var(--caput);
border-radius: var(--r-md);
box-shadow: 0 1px 0 var(--caput);
}
.newsletter__input {
font-family: var(--font-body);
font-style: italic;
font-size: var(--fs-body);
padding: 12px var(--s4);
border: 1px solid var(--caput);
background: var(--light);
color: var(--caput);
border-radius: var(--r-sm);
}
.newsletter__input::placeholder { color: var(--text-muted-on-light); font-style: italic; }
.newsletter__incentive {
font-family: var(--font-body);
font-style: italic;
font-size: var(--fs-body-sm);
color: var(--text-muted-on-light);
margin-top: var(--s5);
}
.newsletter__incentive strong { color: var(--sienna); font-style: normal; font-weight: 700; }
/* ============================================================
13. FOOTER — liquourice chrome, 4 columns + newsletter strip + baseline
============================================================ */
.site-footer {
background-color: var(--bg-darkest);
background-image:
var(--gear-watermark),
var(--noise-leather);
background-size: 220px 220px, 260px 260px;
color: var(--text-on-dark);
}
.site-footer__inner {
max-width: var(--cw-wide);
margin: 0 auto;
padding: var(--s9) 40px var(--s5);
}
.site-footer__top {
display: grid;
grid-template-columns: 1.3fr repeat(4, 1fr);
gap: var(--s7);
padding-bottom: var(--s8);
border-bottom: 1px solid rgba(244, 164, 121, 0.2);
}
.site-footer__brand .brandmark { font-size: 28px; color: var(--light); }
.site-footer__brand-blurb {
font-family: var(--font-body);
font-style: italic;
font-size: var(--fs-body-sm);
color: var(--rodeo);
line-height: 1.5;
margin: var(--s5) 0;
max-width: 30ch;
}
.footer-col__heading {
font-family: var(--font-display);
font-size: var(--fs-body);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
font-weight: 700;
color: var(--bronze);
padding-bottom: var(--s2);
border-bottom: 1px solid var(--bronze);
margin-bottom: var(--s4);
}
.footer-col__list { list-style: none; display: flex; flex-direction: column; gap: var(--s3); }
.footer-col__link {
font-family: var(--font-body);
font-size: var(--fs-body-sm);
color: var(--rodeo);
}
.footer-col__link:hover { color: var(--light); }
.footer-col__sister {
display: inline-block;
font-family: var(--font-display);
font-size: var(--fs-micro);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
font-weight: 700;
padding: 4px 8px;
border: 1px solid var(--bronze);
color: var(--bronze);
border-radius: 3px;
margin: 2px 4px 2px 0;
}
.site-footer__strip {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--s6);
align-items: center;
padding: var(--s6) 0;
border-bottom: 1px solid rgba(244, 164, 121, 0.2);
}
.site-footer__strip-copy {
font-family: var(--font-display);
font-size: var(--fs-h4);
text-transform: uppercase;
letter-spacing: var(--ls-wide);
color: var(--light);
}
.site-footer__strip-copy em {
display: block;
font-family: var(--font-body);
font-style: italic;
font-size: var(--fs-body-sm);
letter-spacing: 0;
text-transform: none;
font-weight: 400;
color: var(--rodeo);
margin-top: var(--s2);
}
.site-footer__strip-form {
display: flex;
gap: var(--s3);
}
.site-footer__strip-input {
font-family: var(--font-body);
font-style: italic;
padding: 10px var(--s4);
border: 1px solid var(--bronze);
background: rgba(27, 19, 20, 0.6);
color: var(--rodeo);
border-radius: var(--r-sm);
min-width: 260px;
}
.site-footer__strip-input::placeholder { color: rgba(197, 166, 136, 0.55); font-style: italic; }
.site-footer__baseline {
display: grid;
grid-template-columns: auto 1fr auto;
gap: var(--s6);
align-items: center;
padding-top: var(--s5);
font-family: var(--font-body);
font-size: var(--fs-body-sm);
color: var(--rodeo);
}
.site-footer__payments {
display: flex;
gap: var(--s3);
align-items: center;
}
.site-footer__pay {
font-family: var(--font-display);
font-size: 10px;
letter-spacing: var(--ls-widest);
text-transform: uppercase;
font-weight: 700;
padding: 3px 7px;
border: 1px solid var(--rodeo);
border-radius: 3px;
color: var(--rodeo);
}
.site-footer__policies { text-align: center; font-style: italic; }
.site-footer__policies a:hover { color: var(--light); }
.site-footer__policies span {
display: inline-block;
margin: 0 var(--s3);
color: var(--bronze);
}
.site-footer__badge {
font-family: var(--font-display);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
font-weight: 700;
padding: 6px 12px;
background: var(--sienna);
background-image: var(--noise-leather);
background-size: 220px 220px;
background-blend-mode: overlay;
color: var(--light);
border-radius: var(--r-sm);
border: 1px solid rgba(0, 0, 0, 0.35);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}
/* ============================================================
RESPONSIVE — sensible mobile (~390px)
No simplification of rivets/ornament; just stack & resize.
============================================================ */
@media (max-width: 1024px) {
.container, .site-header__inner, .hero__inner, .trust__inner,
.tools__inner, .games__inner, .favourites__inner, .howto__inner,
.creators__inner, .showcase__inner, .loyalty__inner, .newsletter__inner,
.site-footer__inner { padding-left: 24px; padding-right: 24px; }
.hero__inner { grid-template-columns: 1fr; gap: var(--s7); }
.hero__title { font-size: 72px; }
.tools__grid, .howto__grid, .games__grid { grid-template-columns: 1fr 1fr; gap: var(--s5); }
.favourites__grid { grid-template-columns: 1fr 1fr; }
.creator-spotlight { grid-template-columns: 1fr; }
.creator-strip { grid-template-columns: repeat(3, 1fr); }
.showcase__gallery { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 220px); }
.site-footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
html { font-size: 17px; }
.band { padding: var(--s8) 0; }
.preheader__inner { flex-direction: column; gap: var(--s2); padding: var(--s3) 24px; }
.preheader__dot { display: none; }
.site-header__inner { grid-template-columns: 1fr auto; }
.primary-nav { display: none; }
.hero { padding: var(--s8) 0; }
.hero__title { font-size: 52px; }
.hero__media { aspect-ratio: 4 / 3; }
.trust__inner { grid-template-columns: 1fr; }
.trust__divider { display: none; }
.tools__grid, .howto__grid, .games__grid, .favourites__grid { grid-template-columns: 1fr; }
.creator-strip { grid-template-columns: 1fr 1fr; }
.showcase__gallery { grid-template-columns: 1fr; grid-template-rows: repeat(6, 200px); }
.showcase__gallery .tile--wide, .showcase__gallery .tile--tall { grid-column: auto; grid-row: auto; }
.loyalty__panel { grid-template-columns: 1fr; }
.newsletter__form { grid-template-columns: 1fr; }
.site-footer__top, .site-footer__strip, .site-footer__baseline { grid-template-columns: 1fr; }
.site-footer__strip-form { flex-direction: column; }
.site-footer__strip-input { min-width: 0; }
.site-footer__baseline { text-align: center; gap: var(--s4); }
}
</style>
</head>
<body>
<!-- 1. PREHEADER ANNOUNCEMENT BAR ============================ -->
<div class="preheader">
<div class="preheader__inner">
<span class="preheader__msg">Free UK Shipping on orders over £75</span>
<span class="preheader__dot"></span>
<span class="preheader__msg">New 40K Combat Patrols now in the racks</span>
<span class="preheader__dot"></span>
<span class="preheader__msg">Earn points here — spend at Nerdworks, ArtSabers & Paragon</span>
</div>
</div>
<!-- 2. GLOBAL HEADER ======================================== -->
<header class="site-header">
<div class="site-header__inner">
<a class="brandmark" href="/">
<span>WAR <span class="brandmark__amp">&</span> DUNGEON
<span class="brandmark__sub">Outfitters since the long winter</span>
</span>
</a>
<nav class="primary-nav" aria-label="Primary">
<a class="primary-nav__item" href="#">Warhammer<span class="primary-nav__caret"></span></a>
<a class="primary-nav__item" href="#">Dungeons & Dragons</a>
<a class="primary-nav__item" href="#">Tools</a>
<a class="primary-nav__item" href="#">Learn<span class="primary-nav__caret"></span></a>
<a class="primary-nav__item" href="#">Creators</a>
</nav>
<div class="utility-nav">
<svg class="utility-icon" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/></svg>
<svg class="utility-icon" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-7 8-7s8 3 8 7"/></svg>
<svg class="utility-icon" viewBox="0 0 24 24"><path d="M12 21s-7-4.5-7-10a4 4 0 017-2.5A4 4 0 0119 11c0 5.5-7 10-7 10z"/></svg>
<div class="basket">
<svg class="utility-icon" viewBox="0 0 24 24"><path d="M5 7h14l-1.5 11h-11z"/><path d="M9 7V5a3 3 0 016 0v2"/></svg>
<span class="basket__points">+ 240 pts</span>
</div>
</div>
</div>
</header>
<!-- 3. HERO ================================================ -->
<section class="hero" aria-label="Forge your army">
<div class="hero__inner">
<div class="hero__copy">
<span class="hero__eyebrow">Outfitter to the painted host</span>
<h1 class="hero__title">Forge Your Army.<em>Field It Tonight.</em></h1>
<p class="hero__subhead">
Ten thousand years of war on a sixty-inch table. Pull up a stool — we'll
kit you out with brushes that hold their tip, paints that don't crack on
the rim, and rules to back it all up.
</p>
<div class="hero__actions">
<a class="btn" href="#">Build Your Army</a>
<a class="btn btn--ghost" href="#">Shop New Releases</a>
</div>
<p class="hero__note">
Or — if you don't know what army yet — start with the Army Builder.
Pick a faction, set a points budget, watch it tell you what to put on
the table.
</p>
</div>
<figure class="hero__media" role="img" aria-label="Painted Warhammer diorama lit by oil-lamp warm light, smoke drifting across the foreground.">
<figcaption class="hero__media-caption">Forgeworld Krieg — painted by H. Penrose</figcaption>
</figure>
</div>
</section>
<hr class="section-divider" aria-hidden="true">
<!-- 4. TRUST STRIP ========================================= -->
<section class="band trust" aria-label="Why shop here">
<div class="trust__inner">
<div class="trust__cell">
<svg class="trust__icon" viewBox="0 0 40 40"><path d="M5 14h22l5 7v8H5z"/><circle cx="13" cy="29" r="3"/><circle cx="27" cy="29" r="3"/><path d="M5 14V9h22v5"/></svg>
<div>
<span class="trust__label">Free UK Shipping</span>
<span class="trust__sub">on orders over £75 — packed in straw, never plastic</span>
</div>
</div>
<svg class="trust__divider" viewBox="0 0 40 40"><circle cx="20" cy="20" r="10"/><circle cx="20" cy="20" r="4"/><path d="M20 6v6M20 28v6M6 20h6M28 20h6M10 10l4 4M30 30l-4-4M10 30l4-4M30 10l-4 4"/></svg>
<div class="trust__cell">
<svg class="trust__icon" viewBox="0 0 40 40"><path d="M8 8h24v20l-12 6-12-6z"/><path d="M14 18l4 4 8-8"/></svg>
<div>
<span class="trust__label">30-Day Returns</span>
<span class="trust__sub">unopened & in good order — no questions, no scowls</span>
</div>
</div>
<svg class="trust__divider" viewBox="0 0 40 40"><circle cx="20" cy="20" r="10"/><circle cx="20" cy="20" r="4"/><path d="M20 6v6M20 28v6M6 20h6M28 20h6M10 10l4 4M30 30l-4-4M10 30l4-4M30 10l-4 4"/></svg>
<div class="trust__cell">
<svg class="trust__icon" viewBox="0 0 40 40"><path d="M6 12l14-6 14 6v10c0 8-6 12-14 14-8-2-14-6-14-14z"/><path d="M20 14v12M14 20h12"/></svg>
<div>
<span class="trust__label">All Four Game Systems</span>
<span class="trust__sub">40K · AoS · The Old World · D&D</span>
</div>
</div>
<svg class="trust__divider" viewBox="0 0 40 40"><circle cx="20" cy="20" r="10"/><circle cx="20" cy="20" r="4"/><path d="M20 6v6M20 28v6M6 20h6M28 20h6M10 10l4 4M30 30l-4-4M10 30l4-4M30 10l-4 4"/></svg>
<div class="trust__cell">
<svg class="trust__icon" viewBox="0 0 40 40"><path d="M8 8h24v24H8z"/><path d="M8 16h24M16 8v24"/><circle cx="24" cy="24" r="3"/></svg>
<div>
<span class="trust__label">A Nerdworks Brand</span>
<span class="trust__sub">stable hands, decade in the trade, points you can spend across the family</span>
</div>
</div>
</div>
</section>
<hr class="section-divider" aria-hidden="true">
<!-- 5. TOOLS TEASER ======================================== -->
<section class="band band--dark tools" aria-label="Tools">
<div class="tools__inner">
<div class="section-head">
<span class="eyebrow">Built in-house</span>
<h2 class="section-head__title">Tools the rack-jockeys don't make.</h2>
<p class="section-head__kicker">
Two pieces of kit you won't find at Element, Wayland or Goblin. One ready
to ride, one in the workshop.
</p>
</div>
<div class="tools__grid">
<article class="tool-card">
<div class="tool-card__media">
<span class="tool-card__pill tool-card__pill--live">Live now</span>
<svg class="tool-card__gear" viewBox="0 0 60 60"><g><circle cx="30" cy="30" r="20"/><circle cx="30" cy="30" r="6"/><path d="M30 4v8M30 48v8M4 30h8M48 30h8M11 11l6 6M43 43l6 6M11 49l6-6M43 17l6-6"/></g></svg>
</div>
<div class="tool-card__body">
<span class="tool-card__eyebrow">Configure · Track · Save</span>
<h3 class="tool-card__title">Army Builder</h3>
<p class="tool-card__desc">
Pick a faction, set a points budget. The Builder racks up your unit
choices, totals the points as you go, and tells you when a list is
tournament-legal. Save as many armies as you've got shelf space for.
</p>
<div class="tool-card__meta">
<div class="tool-card__meta-item"><strong>4</strong>Systems supported</div>
<div class="tool-card__meta-item"><strong>340+</strong>Units indexed</div>
<div class="tool-card__meta-item"><strong>Free</strong>With an account</div>
</div>
<a class="btn" href="#">Open the Builder</a>
</div>
</article>
<article class="tool-card">
<div class="tool-card__media">
<span class="tool-card__pill">In the Workshop</span>
<svg class="tool-card__gear" viewBox="0 0 60 60"><g><circle cx="30" cy="30" r="20"/><circle cx="30" cy="30" r="6"/><path d="M30 4v8M30 48v8M4 30h8M48 30h8M11 11l6 6M43 43l6 6M11 49l6-6M43 17l6-6"/></g></svg>
</div>
<div class="tool-card__body">
<span class="tool-card__eyebrow">Phase Two · Coming</span>
<h3 class="tool-card__title">Battle Simulator</h3>
<p class="tool-card__desc">
Two saved armies, one tabletop, turn-based on a top-down board.
PvE against the house, PvP against a friend with the link, and a
running commentary in the sidebar — calmer than the Discord, sharper
than the studio batreps.
</p>
<div class="tool-card__meta">
<div class="tool-card__meta-item"><strong>2D</strong>Top-down canvas</div>
<div class="tool-card__meta-item"><strong>PvP & PvE</strong>Both supported</div>
<div class="tool-card__meta-item"><strong>Q3</strong>Expected arrival</div>
</div>
<a class="btn btn--ghost" href="#">Notify me at launch</a>
</div>
</article>
</div>
</div>
</section>
<hr class="section-divider" aria-hidden="true">
<!-- 6. CHOOSE YOUR GAME ==================================== -->
<section class="band games" aria-label="Choose your game">
<div class="games__inner">
<div class="section-head">
<span class="eyebrow">Pick your fight</span>
<h2 class="section-head__title">Choose your game.</h2>
<p class="section-head__kicker">
Every doorway here opens onto a curated room, not a wall of SKUs. Walk
through whichever one calls to you.
</p>
</div>
<div class="games__grid">
<a class="game-card game-card--40k" href="#">
<div class="game-card__media"><span class="game-card__badge">Grimdark</span></div>
<div class="game-card__body">
<h3 class="game-card__title">Warhammer 40,000</h3>
<p class="game-card__positioning">
Combat Patrols, Codexes, every Space Marine chapter under the sun and
a few that don't deserve one. Tenth Edition stock kept current.
</p>
<span class="game-card__cta">Enter 40K</span>
</div>
</a>
<a class="game-card game-card--aos" href="#">
<div class="game-card__media"><span class="game-card__badge">High Fantasy</span></div>
<div class="game-card__body">
<h3 class="game-card__title">Age of Sigmar</h3>
<p class="game-card__positioning">
Battletomes, Spearhead boxes, full Stormcast through to Maggotkin.
Painted reference photography on every army page.
</p>
<span class="game-card__cta">Enter AoS</span>
</div>
</a>
<a class="game-card game-card--ow" href="#">
<div class="game-card__media"><span class="game-card__badge">Classic</span></div>
<div class="game-card__body">
<h3 class="game-card__title">The Old World</h3>
<p class="game-card__positioning">
Rank-and-flank as it ought to be. Empire of Man, Bretonnia, Tomb
Kings — and a battalion of forge-world supports for the rest.
</p>
<span class="game-card__cta">Enter The Old World</span>
</div>
</a>
<a class="game-card game-card--dnd" href="#">
<div class="game-card__media"><span class="game-card__badge">Roll the dice</span></div>
<div class="game-card__body">
<h3 class="game-card__title">Dungeons & Dragons</h3>
<p class="game-card__positioning">
Player's Handbook (2024) through to the deep-cut adventures. Dice,
minis, terrain, screens — everything the table needs to start a
campaign on Friday.
</p>
<span class="game-card__cta">Enter D&D</span>
</div>
</a>
<a class="game-card game-card--hobby" href="#">
<div class="game-card__media"><span class="game-card__badge">Workbench</span></div>
<div class="game-card__body">
<h3 class="game-card__title">Hobby Supplies</h3>
<p class="game-card__positioning">
Clippers, files, plastic glue that grips and PVA that doesn't go
brittle. Workbench mats, magnifiers, and the brushes we actually
use.
</p>
<span class="game-card__cta">Enter Hobby</span>
</div>
</a>
<a class="game-card game-card--paints" href="#">
<div class="game-card__media"><span class="game-card__badge">Pigment & Patience</span></div>
<div class="game-card__body">
<h3 class="game-card__title">Paints</h3>
<p class="game-card__positioning">
Citadel, Vallejo, Pro Acryl and Two Thin Coats — kept indexed by
colour family so you find what you need without reading every
label.
</p>
<span class="game-card__cta">Enter Paints</span>
</div>
</a>
</div>
</div>
</section>
<hr class="section-divider" aria-hidden="true">
<!-- 7. FAN FAVOURITES ====================================== -->
<section class="band band--alt favourites" aria-label="Fan favourites">
<div class="favourites__inner">
<div class="section-head">
<span class="eyebrow">From behind the counter</span>
<h2 class="section-head__title">Fan favourites this fortnight.</h2>
<p class="section-head__kicker">
What's been walking out the door fastest. One pick from each shelf — what
the regulars are putting on the table.
</p>
</div>
<div class="favourites__grid">
<article class="product-card">
<div class="product-card__media">
<div class="product-card__shot product-card__shot--40k">
<svg viewBox="0 0 100 100"><path d="M50 12 L62 24 L62 50 L72 60 L72 82 L62 82 L58 70 L42 70 L38 82 L28 82 L28 60 L38 50 L38 24 Z"/><circle cx="50" cy="35" r="5"/></svg>
</div>
<div class="product-card__loyalty"><span class="product-card__loyalty-pts">68</span><span class="product-card__loyalty-lbl">pts</span></div>
</div>
<div class="product-card__body">
<span class="product-card__game-tag">Warhammer 40,000</span>
<h3 class="product-card__title">Combat Patrol: Space Marines</h3>
<span class="product-card__rating"><span class="product-card__stars">★★★★★</span> 4.9 (212)</span>
<div class="product-card__price-row">
<span class="product-card__price">£68.00</span>
<a class="product-card__quickview" href="#">Quick view</a>
</div>
</div>
</article>
<article class="product-card">
<div class="product-card__media">
<div class="product-card__shot">
<svg viewBox="0 0 100 100"><path d="M50 10 L70 22 L70 50 Q70 70 50 88 Q30 70 30 50 L30 22 Z"/><path d="M50 18 L62 26 L62 50 Q62 64 50 78 Q38 64 38 50 L38 26 Z"/><circle cx="50" cy="38" r="4"/></svg>
</div>
<div class="product-card__loyalty"><span class="product-card__loyalty-pts">95</span><span class="product-card__loyalty-lbl">pts</span></div>
</div>
<div class="product-card__body">
<span class="product-card__game-tag">Age of Sigmar</span>
<h3 class="product-card__title">Spearhead: Stormcast Eternals</h3>
<span class="product-card__rating"><span class="product-card__stars">★★★★★</span> 4.8 (98)</span>
<div class="product-card__price-row">
<span class="product-card__price">£95.00</span>
<a class="product-card__quickview" href="#">Quick view</a>
</div>
</div>
</article>
<article class="product-card">
<div class="product-card__media">
<div class="product-card__shot">
<svg viewBox="0 0 100 100"><rect x="20" y="14" width="60" height="72" rx="4"/><path d="M30 28h40M30 36h40M30 44h28M30 52h40M30 60h32M30 68h40M30 76h22"/></svg>
</div>
<div class="product-card__loyalty"><span class="product-card__loyalty-pts">55</span><span class="product-card__loyalty-lbl">pts</span></div>
</div>
<div class="product-card__body">
<span class="product-card__game-tag">Dungeons & Dragons</span>
<h3 class="product-card__title">Player's Handbook (2024)</h3>
<span class="product-card__rating"><span class="product-card__stars">★★★★★</span> 4.9 (612)</span>
<div class="product-card__price-row">
<span class="product-card__price">£49.99</span>
<a class="product-card__quickview" href="#">Quick view</a>
</div>
</div>
</article>
<article class="product-card">
<div class="product-card__media">
<div class="product-card__shot">
<svg viewBox="0 0 100 100"><rect x="38" y="14" width="24" height="60" rx="3"/><path d="M38 26h24M38 38h24"/><rect x="34" y="74" width="32" height="14" rx="3"/><path d="M50 14V8"/></svg>
</div>
<div class="product-card__loyalty"><span class="product-card__loyalty-pts">14</span><span class="product-card__loyalty-lbl">pts</span></div>
</div>
<div class="product-card__body">
<span class="product-card__game-tag">Paints</span>
<h3 class="product-card__title">Two Thin Coats — Hex Brown Set</h3>
<span class="product-card__rating"><span class="product-card__stars">★★★★★</span> 5.0 (47)</span>
<div class="product-card__price-row">
<span class="product-card__price">£14.50</span>
<a class="product-card__quickview" href="#">Quick view</a>
</div>
</div>
</article>
</div>
</div>
</section>
<hr class="section-divider" aria-hidden="true">
<!-- 8. HOW-TO + TUTORIALS =================================== -->
<section class="band band--dark howto" aria-label="How-to guides and tutorials">
<div class="howto__inner">
<div class="section-head">
<span class="eyebrow">From the workbench</span>
<h2 class="section-head__title">Pull up a stool. We'll show you how.</h2>
<p class="section-head__kicker">
Three pieces of writing this fortnight, picked off the workbench and put
somewhere you can find them. Read them, watch them, or save them for the
weekend.
</p>
</div>
<div class="howto__grid">
<article class="content-card content-card--painting">
<div class="content-card__media">
<div class="content-card__badges">
<span class="content-card__badge content-card__badge--beginner">Beginner</span>
<span class="content-card__badge">Painting</span>
</div>
</div>
<div class="content-card__body">
<span class="content-card__eyebrow">How-to Guide</span>
<h3 class="content-card__title">Edge-Highlighting Without the Wobble</h3>
<p class="content-card__desc">
A short, slow walk through edge-highlighting your first Astartes
squad. No tongue-out concentration faces required. The trick is in
the brush angle, not the steady hand.
</p>
<div class="content-card__meta"><span>12 min read</span><span>by H. Penrose</span></div>
<a class="content-card__cta" href="#">Read the guide</a>
</div>
</article>
<article class="content-card content-card--rules">
<div class="content-card__media">
<div class="content-card__badges">
<span class="content-card__badge content-card__badge--intermediate">Intermediate</span>
<span class="content-card__badge">Rules</span>
</div>
</div>
<div class="content-card__body">
<span class="content-card__eyebrow">Tutorial</span>
<h3 class="content-card__title">Reading the Old World Charge Phase</h3>
<p class="content-card__desc">
Rank-and-flank charges throw new players. We walk through three
scenarios — flank, frontal, failed — and show how to count the
inches without flipping pages mid-game.
</p>
<div class="content-card__meta"><span>22 min watch</span><span>by O. Marsh</span></div>
<a class="content-card__cta" href="#">Watch the tutorial</a>
</div>
</article>
<article class="content-card content-card--terrain">
<div class="content-card__media">
<div class="content-card__badges">
<span class="content-card__badge content-card__badge--advanced">Advanced</span>
<span class="content-card__badge">Terrain</span>
</div>
</div>
<div class="content-card__body">
<span class="content-card__eyebrow">How-to Guide</span>
<h3 class="content-card__title">A Sector Mechanicus Refinery, Cheap</h3>
<p class="content-card__desc">
Industrial terrain at tournament-board scale from foamboard, sprue
offcuts and the contents of one kitchen drawer. Full build log,
painted reference, and the parts list under twelve quid.
</p>
<div class="content-card__meta"><span>40 min read</span><span>by R. Castellan</span></div>
<a class="content-card__cta" href="#">Read the guide</a>
</div>
</article>
</div>
</div>
</section>
<hr class="section-divider" aria-hidden="true">
<!-- 9. CREATOR SPOTLIGHT =================================== -->
<section class="band creators" aria-label="Creator partners">
<div class="creators__inner">
<div class="section-head">
<span class="eyebrow">Creator partners</span>
<h2 class="section-head__title">Painters worth a follow.</h2>
<p class="section-head__kicker">
Hand-picked creators on the War Dungeon partner programme. They paint
better than we do, so we made them shelves.
</p>
</div>
<article class="creator-spotlight">
<div class="creator-spotlight__avatar" role="img" aria-label="Portrait of creator Hannah Penrose at her workbench."></div>
<div class="creator-spotlight__body">
<div class="creator-spotlight__tags">
<span class="creator-spotlight__tag">Warhammer 40K</span>
<span class="creator-spotlight__tag">Age of Sigmar</span>
<span class="creator-spotlight__tag">Painting</span>
</div>
<h3 class="creator-spotlight__name">Hannah Penrose</h3>
<p class="creator-spotlight__handle">@penrose.paints — Manchester, UK</p>
<p class="creator-spotlight__bio">
Twelve years at the workbench, six judging at Golden Demon. Hannah
writes the kind of painting tutorials we all wanted when we were
starting out — patient, specific, and free of brush-flex hype.
</p>
<div class="hero__actions">
<a class="btn" href="#">Visit Hannah's content stream</a>
<a class="btn btn--ghost" href="#">All creators</a>
</div>
</div>
</article>
<div class="creator-strip" aria-label="More creators">
<a class="creator-thumb creator-thumb--a" href="#">
<span class="creator-thumb__label">O. Marsh<span class="creator-thumb__game">Old World rules</span></span>
</a>
<a class="creator-thumb creator-thumb--b" href="#">
<span class="creator-thumb__label">R. Castellan<span class="creator-thumb__game">Terrain builds</span></span>
</a>
<a class="creator-thumb creator-thumb--c" href="#">
<span class="creator-thumb__label">A. Vyner<span class="creator-thumb__game">D&D minis</span></span>
</a>
<a class="creator-thumb creator-thumb--d" href="#">
<span class="creator-thumb__label">J. Lockewood<span class="creator-thumb__game">Maggotkin lore</span></span>
</a>
<a class="creator-thumb creator-thumb--a" href="#">
<span class="creator-thumb__label">D. Thorvald<span class="creator-thumb__game">Tournament play</span></span>
</a>
<a class="creator-thumb creator-thumb--b" href="#">
<span class="creator-thumb__label">M. Ashby<span class="creator-thumb__game">Hobby workflow</span></span>
</a>
</div>
</div>
</section>
<hr class="section-divider" aria-hidden="true">
<!-- 10. PAINTING SHOWCASE ================================== -->
<section class="band band--alt showcase" aria-label="Painting showcase">
<div class="showcase__inner">
<div class="showcase__head">
<div class="section-head" style="margin-bottom:0;">
<span class="eyebrow">From the regulars</span>
<h2 class="section-head__title">Painted by hands like yours.</h2>
<p class="section-head__kicker">
Customer painting from the last quarter. Click any tile for the build
log and the brushes used.
</p>
</div>
<a class="btn btn--ghost" href="#">All submissions</a>
</div>
<div class="showcase__gallery">
<a class="tile tile--a tile--tall" href="#">
<span class="tile__caption">
<span class="tile__artist">M. Whitlock</span>
<span class="tile__piece">Word Bearers Terminator — NMM brass</span>
</span>
</a>
<a class="tile tile--b tile--wide" href="#">
<span class="tile__caption">
<span class="tile__artist">J. Henley</span>
<span class="tile__piece">Tomb Kings Liche Priest — sand wash</span>
</span>
</a>
<a class="tile tile--c" href="#">
<span class="tile__caption">
<span class="tile__artist">P. Okereke</span>
<span class="tile__piece">D&D Bullywug — wet blending</span>
</span>
</a>
<a class="tile tile--d tile--wide" href="#">
<span class="tile__caption">
<span class="tile__artist">E. Carragher</span>
<span class="tile__piece">Maggotkin nurglings — verdigris & rust</span>
</span>
</a>
<a class="tile tile--e" href="#">
<span class="tile__caption">
<span class="tile__artist">S. Holroyd</span>
<span class="tile__piece">Astra Militarum Cadian — gritty realism</span>
</span>
</a>
<a class="tile tile--f" href="#">
<span class="tile__caption">
<span class="tile__artist">B. Quill</span>
<span class="tile__piece">Bretonnian Knight — heraldic freehand</span>
</span>
</a>
</div>
<div class="showcase__submit">
<p class="showcase__submit-copy">
Painted something you'd like sat on the shelf for the regulars to see? Send it in.
</p>
<a class="btn" href="#">Submit your painting</a>
</div>
</div>
</section>
<hr class="section-divider" aria-hidden="true">
<!-- 11. LOYALTY CROSS-BRAND STRIP =========================== -->
<section class="band band--dark loyalty" aria-label="Loyalty programme">
<div class="loyalty__inner">
<div class="loyalty__panel">
<div class="loyalty__copy">
<span class="loyalty__eyebrow">Cross-brand loyalty</span>
<h2 class="loyalty__title">Earn here. <em>Redeem anywhere.</em></h2>
<p class="loyalty__desc">
Every quid spent at War Dungeon earns points you can take across the
family — Nerdworks, ArtSabers, Paragon, or back here for more paints.
One wallet, four shops.
</p>
<div class="loyalty__brands">
<span class="loyalty__brand loyalty__brand--here">War Dungeon</span>
<span class="loyalty__brand">Nerdworks</span>
<span class="loyalty__brand">ArtSabers</span>
<span class="loyalty__brand">Paragon</span>
</div>
</div>
<div class="loyalty__actions">
<a class="btn" href="#">Sign in & see your balance</a>
<a class="btn btn--ghost" href="#">How loyalty works</a>
<p class="loyalty__small">No expiry dates. No tiers. No catch.</p>
</div>
</div>
</div>
</section>
<hr class="section-divider" aria-hidden="true">
<!-- 12. NEWSLETTER ========================================= -->
<section class="band newsletter" aria-label="Newsletter signup">
<div class="newsletter__inner">
<div class="newsletter__panel">
<span class="newsletter__eyebrow">Once a fortnight, no more</span>
<h2 class="newsletter__title">Join the Garrison.</h2>
<p class="newsletter__desc">
Two issues a month: what's landed on the shelf, what's about to land,
and one piece of writing worth your tea break. No coupon spam, no
countdown timers.
</p>
<form class="newsletter__form" onsubmit="return false">
<input class="newsletter__input" type="email" placeholder="Your email address" aria-label="Email address">
<button class="btn" type="submit">Sign me up</button>
</form>
<p class="newsletter__incentive">
New signups get <strong>10% off your first order</strong> — or the equivalent in loyalty points, your call.
</p>
</div>
</div>
</section>
<!-- 13. FOOTER ============================================= -->
<footer class="site-footer">
<div class="site-footer__inner">
<div class="site-footer__top">
<div class="site-footer__brand">
<a class="brandmark" href="/">
<span>WAR <span class="brandmark__amp">&</span> DUNGEON</span>
</a>
<p class="site-footer__brand-blurb">
Outfitter to the painted host. A Nerdworks brand serving
Warhammer and Dungeons & Dragons players since the long winter.
</p>
<div>
<a class="footer-col__sister" href="#">Nerdworks</a>
<a class="footer-col__sister" href="#">ArtSabers</a>
<a class="footer-col__sister" href="#">Paragon</a>
</div>
</div>
<div class="footer-col">
<h4 class="footer-col__heading">Shop</h4>
<ul class="footer-col__list">
<li><a class="footer-col__link" href="#">Warhammer 40,000</a></li>
<li><a class="footer-col__link" href="#">Age of Sigmar</a></li>
<li><a class="footer-col__link" href="#">The Old World</a></li>
<li><a class="footer-col__link" href="#">Dungeons & Dragons</a></li>
<li><a class="footer-col__link" href="#">Hobby Supplies</a></li>
<li><a class="footer-col__link" href="#">Paints</a></li>
</ul>
</div>
<div class="footer-col">
<h4 class="footer-col__heading">Discover</h4>
<ul class="footer-col__list">
<li><a class="footer-col__link" href="#">Tools</a></li>
<li><a class="footer-col__link" href="#">How-To Guides</a></li>
<li><a class="footer-col__link" href="#">Tutorials</a></li>
<li><a class="footer-col__link" href="#">Creators</a></li>
<li><a class="footer-col__link" href="#">Painting Showcase</a></li>
<li><a class="footer-col__link" href="#">Community</a></li>
</ul>
</div>
<div class="footer-col">
<h4 class="footer-col__heading">Help</h4>
<ul class="footer-col__list">
<li><a class="footer-col__link" href="#">Contact us</a></li>
<li><a class="footer-col__link" href="#">Shipping</a></li>
<li><a class="footer-col__link" href="#">Returns</a></li>
<li><a class="footer-col__link" href="#">FAQ</a></li>
<li><a class="footer-col__link" href="#">Track your order</a></li>
</ul>
</div>
<div class="footer-col">
<h4 class="footer-col__heading">Brand & Loyalty</h4>
<ul class="footer-col__list">
<li><a class="footer-col__link" href="#">About War Dungeon</a></li>
<li><a class="footer-col__link" href="#">Sister brand redemption</a></li>
<li><a class="footer-col__link" href="#">Loyalty programme</a></li>
<li><a class="footer-col__link" href="#">Creator affiliate</a></li>
<li><a class="footer-col__link" href="#">Press & partnerships</a></li>
</ul>
</div>
</div>
<div class="site-footer__strip">
<div class="site-footer__strip-copy">
Join the Garrison <em>Once a fortnight in your inbox. No countdown timers.</em>
</div>
<form class="site-footer__strip-form" onsubmit="return false">
<input class="site-footer__strip-input" type="email" placeholder="Your email address" aria-label="Email">
<button class="btn btn--sm" type="submit">Subscribe</button>
</form>
</div>
<div class="site-footer__baseline">
<div class="site-footer__payments">
<span class="site-footer__pay">Visa</span>
<span class="site-footer__pay">Mastercard</span>
<span class="site-footer__pay">Amex</span>
<span class="site-footer__pay">PayPal</span>
<span class="site-footer__pay">Klarna</span>
<span class="site-footer__pay">Apple Pay</span>
</div>
<div class="site-footer__policies">
© 2026 War Dungeon
<span>·</span>
<a href="#">Privacy</a>
<span>·</span>
<a href="#">Terms</a>
<span>·</span>
<a href="#">Cookies</a>
<span>·</span>
<a href="#">Modern Slavery</a>
</div>
<div class="site-footer__badge">A Nerdworks Brand</div>
</div>
</div>
</footer>
</body>
</html>