<!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. Light the Lamp. Roll the Dice.</title>
<link rel="stylesheet" href="https://use.typekit.net/onl7dxx.css">
<style>
/* =========================================================================
War Dungeon — Frontier / SWD1 — Product-Page-Grounded methodology trial
========================================================================= */
:root {
/* Palette */
--rodeo: #C5A688;
--rodeo-light: #D8C3B1;
--bronze: #F4A479;
--caput: #613F34;
--sienna: #832D15;
--cowboy: #2B1B1C;
--liquourice: #1B1314;
--light: #FFFFFF;
--white-dark: #EDEDED;
--positive: #4A6E50;
--negative: #C8442D;
/* Surface roles */
--bg-page: var(--rodeo);
--bg-panel: var(--cowboy);
--bg-panel-deeper: var(--liquourice);
--bg-card-light: var(--rodeo-light);
--bg-product-pad: #F2E6D5;
/* Text roles */
--text-on-page: var(--caput);
--text-on-dark: var(--rodeo-light);
--text-on-dark-strong: var(--light);
--text-eyebrow: var(--bronze);
/* Typography */
--font-display: "modesto-condensed", "Modesto Condensed", "Playfair Display", Georgia, serif;
--font-body: "palatino-linotype", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
/* Type scale */
--fs-display: 96px;
--fs-h1: 64px;
--fs-h2: 48px;
--fs-h3: 36px;
--fs-h4: 24px;
--fs-body-lg: 22px;
--fs-body: 20px; /* lived product-page baseline — not 18 */
--fs-body-sm: 16px;
--fs-eyebrow: 13px;
--fs-micro: 12px;
/* 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;
/* Borders */
--bw-hair: 1px;
--bw-reg: 2px;
--bw-thick: 4px;
/* Container */
--container: 1440px;
--gutter: 40px;
/* Bronze gear-pattern fill — surface texture of every dark panel */
--gear-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><g fill='none' stroke='%23F4A479' stroke-width='1.4' opacity='0.10'><circle cx='40' cy='40' r='18'/><circle cx='40' cy='40' r='8'/><line x1='40' y1='10' x2='40' y2='20' stroke-width='3'/><line x1='40' y1='60' x2='40' y2='70' stroke-width='3'/><line x1='10' y1='40' x2='20' y2='40' stroke-width='3'/><line x1='60' y1='40' x2='70' y2='40' stroke-width='3'/><line x1='18' y1='18' x2='25' y2='25' stroke-width='3'/><line x1='55' y1='55' x2='62' y2='62' stroke-width='3'/><line x1='18' y1='62' x2='25' y2='55' stroke-width='3'/><line x1='55' y1='25' x2='62' y2='18' stroke-width='3'/></g></svg>");
}
/* =========================================================================
Reset / page surface
========================================================================= */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.5;
color: var(--text-on-page);
background-color: var(--bg-page);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul, ol { list-style: none; }
.page {
max-width: var(--container);
margin: 0 auto;
padding: 0;
}
.row {
max-width: calc(var(--container) - (var(--gutter) * 2));
margin: 0 auto;
padding: 0 var(--gutter);
}
/* Section breathing room — tan rodeo gaps between dark panels, no dividers */
.stack { display: flex; flex-direction: column; gap: var(--sp-7); }
.section { padding: 0 var(--gutter); }
/* =========================================================================
Inverted panel base — every content panel uses this geometry
========================================================================= */
.panel {
position: relative;
background-color: var(--bg-panel);
background-image: var(--gear-pattern);
background-repeat: repeat;
color: var(--text-on-dark);
/* set-in geometry: sharp top, rounded bottom — the lived header's signature */
border-radius: 0 0 var(--r-md) var(--r-md);
overflow: hidden;
}
.panel--deep { background-color: var(--bg-panel-deeper); }
/* =========================================================================
PRE-HEADER ANNOUNCEMENT BAR — block: preheader-bar
========================================================================= */
.preheader-bar {
background-color: var(--liquourice);
background-image: var(--gear-pattern);
color: var(--text-on-dark);
border-radius: 0 0 var(--r-md) var(--r-md);
padding: var(--sp-3) var(--sp-7);
text-align: center;
font-family: var(--font-display);
font-size: var(--fs-eyebrow);
text-transform: uppercase;
letter-spacing: 0.16em;
}
.preheader-bar__rotator {
display: flex;
justify-content: center;
align-items: center;
gap: var(--sp-7);
flex-wrap: wrap;
}
.preheader-bar__msg { color: var(--text-on-dark-strong); }
.preheader-bar__msg--accent { color: var(--bronze); }
.preheader-bar__dot {
width: 4px; height: 4px;
background: var(--bronze);
border-radius: 50%;
display: inline-block;
}
/* =========================================================================
HEADER — block: header-bar
========================================================================= */
.header-bar {
background-color: var(--cowboy);
background-image: var(--gear-pattern);
color: var(--text-on-dark);
border-radius: 0 0 var(--r-md) var(--r-md);
padding: var(--sp-5) var(--sp-7);
display: flex;
align-items: center;
gap: var(--sp-7);
}
.header-bar__logo {
display: flex;
align-items: center;
gap: var(--sp-3);
font-family: var(--font-display);
font-size: 30px;
letter-spacing: 0.04em;
color: var(--text-on-dark-strong);
text-transform: uppercase;
white-space: nowrap;
}
.header-bar__logo-mark {
width: 44px; height: 44px;
border: var(--bw-reg) ridge var(--bronze);
border-radius: var(--r-md);
display: grid; place-items: center;
color: var(--bronze);
}
.header-bar__nav {
display: flex;
align-items: center;
gap: var(--sp-6);
flex: 1;
justify-content: center;
}
.header-bar__nav-item {
font-family: var(--font-display);
font-size: 17px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-on-dark);
padding: var(--sp-2) 0;
border-bottom: var(--bw-reg) solid transparent;
transition: border-color .15s, color .15s;
}
.header-bar__nav-item:hover { color: var(--bronze); border-bottom-color: var(--sienna); }
.header-bar__nav-item--has-mega::after { content: " ▾"; font-size: 11px; opacity: .7; }
.header-bar__utils {
display: flex;
align-items: center;
gap: var(--sp-4);
}
.header-bar__util {
width: 40px; height: 40px;
display: grid; place-items: center;
border-radius: var(--r-sm);
color: var(--rodeo-light);
}
.header-bar__util:hover { color: var(--bronze); }
.header-bar__cart {
position: relative;
border: var(--bw-reg) ridge var(--bronze);
border-radius: var(--r-md);
padding: 6px var(--sp-3);
display: flex; align-items: center; gap: var(--sp-2);
font-family: var(--font-display);
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--bronze);
}
.header-bar__cart-count {
background: var(--sienna);
color: var(--light);
width: 22px; height: 22px;
border-radius: 50%;
display: grid; place-items: center;
font-size: 12px;
border: 1px ridge var(--bronze);
}
.header-bar__cart-points {
font-size: 11px;
color: var(--rodeo-light);
border-left: 1px solid var(--bronze);
padding-left: var(--sp-2);
margin-left: var(--sp-1);
letter-spacing: 0.04em;
}
/* =========================================================================
HERO — block: hero-split
========================================================================= */
.hero-split {
background-color: var(--cowboy);
background-image: var(--gear-pattern);
color: var(--text-on-dark);
border-radius: 0 0 var(--r-md) var(--r-md);
display: grid;
grid-template-columns: 1.1fr 1fr;
min-height: 620px;
overflow: hidden;
}
.hero-split__media {
position: relative;
/* Stand-in for lit-diorama photography — warm side-lit moody composition */
background:
radial-gradient(ellipse at 30% 40%, rgba(244, 164, 121, 0.45) 0%, transparent 55%),
radial-gradient(ellipse at 70% 80%, rgba(131, 45, 21, 0.6) 0%, transparent 60%),
linear-gradient(135deg, #3A2520 0%, #1F1314 60%, #0D0708 100%);
min-height: 100%;
}
.hero-split__media::before {
/* Smoke/fog atmosphere — soft warm haze drifting across the diorama */
content: "";
position: absolute; inset: 0;
background:
radial-gradient(ellipse at 45% 60%, rgba(216, 195, 177, 0.18) 0%, transparent 50%),
radial-gradient(ellipse at 20% 90%, rgba(216, 195, 177, 0.10) 0%, transparent 45%);
mix-blend-mode: screen;
}
.hero-split__media::after {
/* The signature gradient fade — image dissolves into the dark panel rightward */
content: "";
position: absolute; inset: 0;
background: linear-gradient(90deg, var(--cowboy) 5%, transparent 55%, transparent 80%, rgba(43,27,28,0.4) 100%);
}
.hero-split__content {
display: flex;
flex-direction: column;
justify-content: center;
padding: var(--sp-9) var(--sp-9) var(--sp-9) var(--sp-7);
position: relative;
z-index: 2;
}
.hero-split__eyebrow {
font-family: var(--font-display);
font-size: var(--fs-eyebrow);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--bronze);
margin-bottom: var(--sp-5);
}
.hero-split__title {
font-family: var(--font-display);
font-size: 72px;
line-height: 1.05;
font-weight: 600;
color: var(--text-on-dark-strong);
margin-bottom: var(--sp-5);
letter-spacing: -0.005em;
}
.hero-split__title em { color: var(--bronze); font-style: normal; }
.hero-split__lede {
font-size: var(--fs-body-lg);
line-height: 1.5;
color: var(--rodeo-light);
margin-bottom: var(--sp-7);
max-width: 520px;
}
.hero-split__actions {
display: flex;
gap: var(--sp-4);
align-items: center;
flex-wrap: wrap;
}
/* =========================================================================
CTA buttons — block: cta-button (sienna with ridge bronze)
========================================================================= */
.cta-button {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
font-family: var(--font-display);
font-size: 18px;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 14px var(--sp-6);
background-color: var(--sienna);
color: var(--light);
border: var(--bw-reg) ridge var(--bronze);
border-radius: var(--r-md);
transition: background-color .18s ease, color .18s ease;
}
.cta-button:hover { background-color: var(--liquourice); }
.cta-button--ghost {
background-color: transparent;
color: var(--bronze);
}
.cta-button--ghost:hover { background-color: var(--sienna); color: var(--light); }
.cta-button--lg { font-size: 20px; padding: 18px var(--sp-7); }
/* =========================================================================
TRUST STRIP — block: trust-strip + promo-badge
========================================================================= */
.trust-strip {
background-color: var(--cowboy);
background-image: var(--gear-pattern);
border-radius: 0 0 var(--r-md) var(--r-md);
padding: var(--sp-7) var(--sp-7);
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-5);
}
.promo-badge {
display: flex;
align-items: center;
gap: var(--sp-4);
padding: var(--sp-4) var(--sp-5);
background-color: var(--liquourice);
border: var(--bw-reg) ridge var(--bronze);
border-radius: 0 0 var(--r-md) var(--r-md);
color: var(--text-on-dark);
}
.promo-badge__gear {
width: 44px; height: 44px;
flex-shrink: 0;
display: grid; place-items: center;
color: var(--bronze);
}
.promo-badge__copy {
display: flex;
flex-direction: column;
gap: 2px;
}
.promo-badge__caption {
font-family: var(--font-display);
font-size: 15px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-on-dark-strong);
line-height: 1.2;
}
.promo-badge__sub {
font-size: var(--fs-body-sm);
color: var(--rodeo-light);
letter-spacing: 0.02em;
}
/* =========================================================================
TOOLS TEASER — block: tools-teaser + tool-card
========================================================================= */
.tools-teaser {
background-color: var(--cowboy);
background-image: var(--gear-pattern);
border-radius: 0 0 var(--r-md) var(--r-md);
padding: var(--sp-9) var(--sp-7);
}
.tools-teaser__head {
text-align: center;
margin-bottom: var(--sp-8);
}
.tools-teaser__eyebrow {
font-family: var(--font-display);
font-size: var(--fs-eyebrow);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--bronze);
display: block;
margin-bottom: var(--sp-3);
}
.tools-teaser__title {
font-family: var(--font-display);
font-size: var(--fs-h2);
line-height: 1.1;
color: var(--text-on-dark-strong);
margin-bottom: var(--sp-3);
}
.tools-teaser__lede {
font-size: var(--fs-body);
color: var(--rodeo-light);
max-width: 720px;
margin: 0 auto;
}
.tools-teaser__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-6);
}
.tool-card {
background-color: var(--cowboy);
background-image: var(--gear-pattern);
border: var(--bw-thick) ridge var(--bronze);
border-radius: 0 0 var(--r-md) var(--r-md);
overflow: hidden;
display: flex;
flex-direction: column;
position: relative;
}
.tool-card__media {
position: relative;
height: 280px;
background:
radial-gradient(circle at 35% 45%, rgba(244,164,121,0.4) 0%, transparent 55%),
linear-gradient(135deg, #3A2520 0%, #1F1314 70%, #0D0708 100%);
}
.tool-card__media::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 50%, var(--cowboy) 100%);
}
.tool-card__badge {
position: absolute;
top: var(--sp-4);
right: var(--sp-4);
z-index: 2;
background: var(--sienna);
color: var(--light);
border: 1px ridge var(--bronze);
border-radius: var(--r-sm);
padding: 4px var(--sp-3);
font-family: var(--font-display);
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.tool-card__badge--soon { background: var(--liquourice); color: var(--bronze); }
.tool-card__body {
padding: var(--sp-6) var(--sp-6) var(--sp-7);
display: flex;
flex-direction: column;
gap: var(--sp-4);
}
.tool-card__eyebrow {
font-family: var(--font-display);
font-size: var(--fs-eyebrow);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--bronze);
}
.tool-card__title {
font-family: var(--font-display);
font-size: var(--fs-h3);
color: var(--text-on-dark-strong);
line-height: 1.1;
}
.tool-card__lede {
font-size: var(--fs-body);
color: var(--rodeo-light);
line-height: 1.5;
}
.tool-card__points {
display: flex;
flex-wrap: wrap;
gap: var(--sp-3);
margin: var(--sp-2) 0 var(--sp-4);
}
.tool-card__point {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-2) var(--sp-3);
background: var(--liquourice);
border: 1px ridge var(--bronze);
border-radius: var(--r-sm);
font-family: var(--font-display);
font-size: 12px;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--bronze);
}
.tool-card__actions {
margin-top: auto;
}
/* =========================================================================
GAME GRID — block: game-grid + game-card
========================================================================= */
.game-grid {
padding: var(--sp-2) 0 0;
}
.section-head {
text-align: center;
padding: 0 var(--gutter) var(--sp-8);
max-width: 920px;
margin: 0 auto;
}
.section-head__eyebrow {
font-family: var(--font-display);
font-size: var(--fs-eyebrow);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--sienna);
display: block;
margin-bottom: var(--sp-3);
}
.section-head__title {
font-family: var(--font-display);
font-size: var(--fs-h2);
line-height: 1.1;
color: var(--caput);
margin-bottom: var(--sp-3);
}
.section-head__lede {
font-size: var(--fs-body);
color: var(--caput);
max-width: 720px;
margin: 0 auto;
opacity: 0.9;
}
.game-grid__cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-5);
}
.game-card {
background-color: var(--cowboy);
background-image: var(--gear-pattern);
border: var(--bw-thick) ridge var(--bronze);
border-radius: 0 0 var(--r-md) var(--r-md);
overflow: hidden;
display: flex;
flex-direction: column;
min-height: 380px;
position: relative;
transition: transform .15s ease;
}
.game-card:hover { transform: translateY(-2px); }
.game-card__media {
position: relative;
height: 220px;
background:
radial-gradient(circle at 40% 50%, rgba(244,164,121,0.35) 0%, transparent 60%),
linear-gradient(135deg, #4A2E26 0%, #1F1314 70%);
}
.game-card__media::after {
/* gradient fade into the dark panel — signature treatment */
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 40%, var(--cowboy) 100%);
}
.game-card__body {
padding: var(--sp-5) var(--sp-6) var(--sp-6);
display: flex;
flex-direction: column;
gap: var(--sp-3);
flex: 1;
}
.game-card__eyebrow {
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--bronze);
}
.game-card__title {
font-family: var(--font-display);
font-size: 28px;
line-height: 1.1;
color: var(--text-on-dark-strong);
}
.game-card__lede {
font-size: 17px;
color: var(--rodeo-light);
line-height: 1.45;
flex: 1;
}
.game-card__cta {
font-family: var(--font-display);
font-size: 14px;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--bronze);
display: inline-flex;
align-items: center;
gap: var(--sp-2);
margin-top: var(--sp-2);
align-self: flex-start;
border-bottom: 1px solid var(--bronze);
padding-bottom: 2px;
}
/* =========================================================================
FAN FAVOURITES — block: product-strip + product-card
========================================================================= */
.product-strip {
padding: 0;
}
.product-strip__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-5);
}
.product-card {
background-color: var(--cowboy);
background-image: var(--gear-pattern);
border: var(--bw-thick) ridge var(--bronze);
border-radius: 0 0 var(--r-md) var(--r-md);
overflow: hidden;
display: flex;
flex-direction: column;
position: relative;
transition: transform .15s ease;
}
.product-card:hover { transform: translateY(-2px); }
.product-card__shot {
background: var(--bg-product-pad);
padding: var(--sp-5);
height: 240px;
display: grid;
place-items: center;
position: relative;
border-bottom: var(--bw-reg) ridge var(--bronze);
}
.product-card__shot-img {
width: 100%; height: 100%;
background:
radial-gradient(circle at 50% 55%, rgba(131, 45, 21, 0.25) 0%, transparent 60%),
linear-gradient(160deg, #E8D8C2 0%, #C5A688 100%);
border-radius: var(--r-sm);
}
.product-card__points {
position: absolute;
top: var(--sp-3);
right: var(--sp-3);
background: var(--liquourice);
color: var(--bronze);
border: 1px ridge var(--bronze);
border-radius: 50%;
width: 48px; height: 48px;
display: grid; place-items: center;
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.04em;
text-align: center;
line-height: 1;
}
.product-card__points strong { display: block; font-size: 16px; color: var(--light); }
.product-card__body {
padding: var(--sp-5);
display: flex;
flex-direction: column;
gap: var(--sp-3);
flex: 1;
}
.product-card__game-tag {
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--bronze);
}
.product-card__title {
font-family: var(--font-display);
font-size: 22px;
line-height: 1.15;
color: var(--text-on-dark-strong);
}
.product-card__rating {
display: flex; align-items: center; gap: var(--sp-2);
font-size: 14px;
color: var(--rodeo-light);
}
.product-card__stars { color: var(--bronze); letter-spacing: 1px; }
.product-card__foot {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--sp-3);
margin-top: auto;
padding-top: var(--sp-3);
border-top: 1px solid rgba(244, 164, 121, 0.25);
}
.product-card__price {
font-family: var(--font-display);
font-size: 24px;
color: var(--bronze);
letter-spacing: 0.02em;
}
.product-card__quick {
font-family: var(--font-display);
font-size: 12px;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--light);
padding: var(--sp-2) var(--sp-3);
background: var(--sienna);
border: 1px ridge var(--bronze);
border-radius: var(--r-sm);
}
/* =========================================================================
HOW-TO STRIP — block: editorial-strip + how-to-card
========================================================================= */
.editorial-strip__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-5);
}
.how-to-card {
background-color: var(--cowboy);
background-image: var(--gear-pattern);
border: var(--bw-thick) ridge var(--bronze);
border-radius: 0 0 var(--r-md) var(--r-md);
overflow: hidden;
display: flex;
flex-direction: column;
min-height: 460px;
}
.how-to-card__media {
position: relative;
height: 240px;
background:
radial-gradient(circle at 40% 55%, rgba(244,164,121,0.40) 0%, transparent 55%),
linear-gradient(135deg, #553024 0%, #1F1314 70%);
}
.how-to-card__media::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 45%, var(--cowboy) 100%);
}
.how-to-card__format {
position: absolute;
top: var(--sp-3);
left: var(--sp-3);
background: var(--liquourice);
color: var(--bronze);
border: 1px ridge var(--bronze);
border-radius: var(--r-sm);
padding: var(--sp-2) var(--sp-3);
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.how-to-card__meta {
position: absolute;
bottom: var(--sp-3);
left: var(--sp-3);
display: flex; gap: var(--sp-2);
z-index: 2;
}
.how-to-card__pill {
background: var(--sienna);
color: var(--light);
border: 1px ridge var(--bronze);
border-radius: var(--r-sm);
padding: 4px var(--sp-3);
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.10em;
text-transform: uppercase;
}
.how-to-card__pill--time { background: var(--liquourice); color: var(--bronze); }
.how-to-card__body {
padding: var(--sp-5) var(--sp-6) var(--sp-6);
display: flex;
flex-direction: column;
gap: var(--sp-3);
flex: 1;
}
.how-to-card__eyebrow {
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--bronze);
}
.how-to-card__title {
font-family: var(--font-display);
font-size: 26px;
line-height: 1.15;
color: var(--text-on-dark-strong);
}
.how-to-card__lede {
font-size: 17px;
color: var(--rodeo-light);
line-height: 1.5;
flex: 1;
}
.how-to-card__cta {
align-self: flex-start;
font-family: var(--font-display);
font-size: 13px;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--light);
padding: 10px var(--sp-5);
background: var(--sienna);
border: var(--bw-reg) ridge var(--bronze);
border-radius: var(--r-md);
}
/* =========================================================================
CREATOR SPOTLIGHT — block: creator-spotlight + creator-feature + creator-thumb
========================================================================= */
.creator-spotlight {
background-color: var(--cowboy);
background-image: var(--gear-pattern);
border-radius: 0 0 var(--r-md) var(--r-md);
padding: var(--sp-9) var(--sp-7);
}
.creator-feature {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: var(--sp-7);
align-items: center;
margin-bottom: var(--sp-9);
}
.creator-feature__portrait {
position: relative;
aspect-ratio: 4 / 5;
border: var(--bw-thick) ridge var(--bronze);
border-radius: 0 0 var(--r-md) var(--r-md);
overflow: hidden;
background:
radial-gradient(circle at 45% 35%, rgba(244,164,121,0.4) 0%, transparent 50%),
linear-gradient(135deg, #4A2E26 0%, #1F1314 70%);
}
.creator-feature__portrait::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(90deg, transparent 40%, rgba(43,27,28,0.45) 100%);
}
.creator-feature__body {
display: flex; flex-direction: column; gap: var(--sp-4);
}
.creator-feature__eyebrow {
font-family: var(--font-display);
font-size: var(--fs-eyebrow);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--bronze);
}
.creator-feature__name {
font-family: var(--font-display);
font-size: 56px;
line-height: 1.05;
color: var(--text-on-dark-strong);
}
.creator-feature__tags {
display: flex; flex-wrap: wrap; gap: var(--sp-2);
}
.creator-feature__tag {
font-family: var(--font-display);
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: var(--sp-2) var(--sp-4);
background: var(--liquourice);
border: 1px ridge var(--bronze);
border-radius: var(--r-sm);
color: var(--bronze);
}
.creator-feature__bio {
font-size: var(--fs-body-lg);
color: var(--rodeo-light);
line-height: 1.5;
max-width: 620px;
}
.creator-strip__head {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: var(--sp-5);
border-top: 1px solid rgba(244,164,121,0.3);
padding-top: var(--sp-7);
}
.creator-strip__head-title {
font-family: var(--font-display);
font-size: var(--fs-h4);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-on-dark-strong);
}
.creator-strip__head-more {
font-family: var(--font-display);
font-size: 13px;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--bronze);
border-bottom: 1px solid var(--bronze);
padding-bottom: 2px;
}
.creator-strip__row {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: var(--sp-4);
}
.creator-thumb {
display: flex; flex-direction: column; gap: var(--sp-3);
align-items: center;
text-align: center;
}
.creator-thumb__avatar {
width: 100%;
aspect-ratio: 1 / 1;
border: var(--bw-reg) ridge var(--bronze);
border-radius: 0 0 var(--r-md) var(--r-md);
background:
radial-gradient(circle at 50% 35%, rgba(244,164,121,0.35) 0%, transparent 55%),
linear-gradient(135deg, #533025 0%, #1F1314 70%);
position: relative;
}
.creator-thumb__name {
font-family: var(--font-display);
font-size: 16px;
color: var(--text-on-dark-strong);
letter-spacing: 0.04em;
}
.creator-thumb__tag {
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--bronze);
}
/* =========================================================================
PAINTING SHOWCASE — block: showcase-gallery + showcase-tile
========================================================================= */
.showcase-gallery {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: 220px;
gap: var(--sp-3);
}
.showcase-tile {
position: relative;
border: var(--bw-reg) ridge var(--bronze);
border-radius: 0 0 var(--r-md) var(--r-md);
overflow: hidden;
background:
radial-gradient(circle at 50% 50%, rgba(244,164,121,0.3) 0%, transparent 60%),
linear-gradient(135deg, #4A2E26 0%, #1F1314 70%);
}
.showcase-tile--a { grid-column: span 2; grid-row: span 2; }
.showcase-tile--b { grid-column: span 2; grid-row: span 1; }
.showcase-tile--c { grid-column: span 2; grid-row: span 1; }
.showcase-tile--d { grid-column: span 2; grid-row: span 1; }
.showcase-tile--e { grid-column: span 2; grid-row: span 1; }
.showcase-tile--f { grid-column: span 2; grid-row: span 2; }
.showcase-tile__overlay {
position: absolute;
inset: auto 0 0 0;
padding: var(--sp-3) var(--sp-4);
background: linear-gradient(180deg, transparent 0%, rgba(27,19,20,0.92) 100%);
display: flex; flex-direction: column; gap: 2px;
}
.showcase-tile__by {
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--bronze);
}
.showcase-tile__title {
font-family: var(--font-display);
font-size: 16px;
color: var(--light);
letter-spacing: 0.02em;
}
.showcase-submit {
text-align: center;
margin-top: var(--sp-7);
}
/* =========================================================================
LOYALTY STRIP — block: loyalty-strip + sister-mark
========================================================================= */
.loyalty-strip {
background-color: var(--liquourice);
background-image: var(--gear-pattern);
border-radius: 0 0 var(--r-md) var(--r-md);
padding: var(--sp-9) var(--sp-7);
text-align: center;
}
.loyalty-strip__eyebrow {
font-family: var(--font-display);
font-size: var(--fs-eyebrow);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--bronze);
margin-bottom: var(--sp-4);
}
.loyalty-strip__title {
font-family: var(--font-display);
font-size: var(--fs-h2);
color: var(--text-on-dark-strong);
margin-bottom: var(--sp-4);
line-height: 1.05;
}
.loyalty-strip__lede {
font-size: var(--fs-body-lg);
color: var(--rodeo-light);
max-width: 720px;
margin: 0 auto var(--sp-8);
}
.loyalty-strip__brands {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-5);
max-width: 1100px;
margin: 0 auto var(--sp-8);
}
.sister-mark {
padding: var(--sp-5) var(--sp-4);
background: var(--cowboy);
border: var(--bw-reg) ridge var(--bronze);
border-radius: 0 0 var(--r-md) var(--r-md);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-2);
}
.sister-mark__name {
font-family: var(--font-display);
font-size: 22px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-on-dark-strong);
}
.sister-mark__tag {
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--bronze);
}
.sister-mark--current .sister-mark__name { color: var(--bronze); }
.loyalty-strip__actions {
display: flex; justify-content: center; gap: var(--sp-4); flex-wrap: wrap;
}
/* =========================================================================
NEWSLETTER — block: newsletter-block
========================================================================= */
.newsletter-block {
background-color: var(--cowboy);
background-image: var(--gear-pattern);
border-radius: 0 0 var(--r-md) var(--r-md);
padding: var(--sp-9) var(--sp-7);
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-8);
align-items: center;
}
.newsletter-block__copy {
display: flex; flex-direction: column; gap: var(--sp-4);
}
.newsletter-block__eyebrow {
font-family: var(--font-display);
font-size: var(--fs-eyebrow);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--bronze);
}
.newsletter-block__title {
font-family: var(--font-display);
font-size: 56px;
line-height: 1.05;
color: var(--text-on-dark-strong);
}
.newsletter-block__lede {
font-size: var(--fs-body-lg);
color: var(--rodeo-light);
line-height: 1.5;
max-width: 480px;
}
.newsletter-block__perks {
display: flex; gap: var(--sp-5); flex-wrap: wrap;
margin-top: var(--sp-3);
}
.newsletter-block__perk {
display: flex; align-items: center; gap: var(--sp-2);
font-family: var(--font-display);
font-size: 13px;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--bronze);
}
.newsletter-block__form {
background: var(--liquourice);
border: var(--bw-thick) ridge var(--bronze);
border-radius: 0 0 var(--r-md) var(--r-md);
padding: var(--sp-6);
display: flex;
flex-direction: column;
gap: var(--sp-4);
}
.newsletter-block__field {
display: flex; flex-direction: column; gap: var(--sp-2);
}
.newsletter-block__label {
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--bronze);
}
.newsletter-block__input {
background: var(--cowboy);
border: var(--bw-reg) ridge var(--bronze);
border-radius: var(--r-md);
color: var(--rodeo-light);
font-family: var(--font-body);
font-size: var(--fs-body);
padding: 14px var(--sp-4);
outline: none;
}
.newsletter-block__input::placeholder { color: rgba(216, 195, 177, 0.5); font-style: italic; }
.newsletter-block__submit {
font-family: var(--font-display);
font-size: 18px;
letter-spacing: 0.10em;
text-transform: uppercase;
padding: 16px var(--sp-6);
background: var(--sienna);
color: var(--light);
border: var(--bw-reg) ridge var(--bronze);
border-radius: var(--r-md);
cursor: pointer;
}
.newsletter-block__submit:hover { background: var(--liquourice); color: var(--bronze); }
.newsletter-block__legal {
font-size: 12px;
color: rgba(216, 195, 177, 0.7);
line-height: 1.4;
}
/* =========================================================================
FOOTER — block: footer-main + footer-col + footer-utility
========================================================================= */
.footer-main {
background-color: var(--cowboy);
background-image: var(--gear-pattern);
border-radius: 0 0 var(--r-md) var(--r-md);
padding: var(--sp-9) var(--sp-7) var(--sp-7);
}
.footer-main__brand {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--sp-7);
padding-bottom: var(--sp-7);
border-bottom: 1px solid rgba(244,164,121,0.3);
margin-bottom: var(--sp-8);
}
.footer-main__brand-mark {
display: flex; align-items: center; gap: var(--sp-4);
}
.footer-main__brand-lock {
width: 56px; height: 56px;
border: var(--bw-reg) ridge var(--bronze);
border-radius: var(--r-md);
color: var(--bronze);
display: grid; place-items: center;
}
.footer-main__brand-name {
font-family: var(--font-display);
font-size: 36px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-on-dark-strong);
line-height: 1;
}
.footer-main__brand-tag {
font-family: var(--font-body);
font-size: 14px;
font-style: italic;
color: var(--rodeo-light);
}
.footer-main__newsletter-strip {
display: flex; align-items: center; gap: var(--sp-4);
}
.footer-main__newsletter-strip input {
background: var(--liquourice);
border: var(--bw-reg) ridge var(--bronze);
border-radius: var(--r-md);
color: var(--rodeo-light);
padding: 12px var(--sp-4);
font-family: var(--font-body);
min-width: 280px;
outline: none;
}
.footer-main__newsletter-strip input::placeholder { color: rgba(216,195,177,0.5); }
.footer-main__cols {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-7);
margin-bottom: var(--sp-9);
}
.footer-col__title {
font-family: var(--font-display);
font-size: 14px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--bronze);
margin-bottom: var(--sp-5);
}
.footer-col__list { display: flex; flex-direction: column; gap: var(--sp-3); }
.footer-col__link {
color: var(--rodeo-light);
font-size: 16px;
transition: color .15s;
}
.footer-col__link:hover { color: var(--bronze); }
.footer-col__sister {
display: flex; flex-direction: column; gap: var(--sp-2);
margin-top: var(--sp-4);
padding-top: var(--sp-4);
border-top: 1px solid rgba(244,164,121,0.25);
}
.footer-col__sister-title {
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--bronze);
margin-bottom: var(--sp-2);
}
.footer-col__sister-link {
font-family: var(--font-display);
font-size: 13px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--rodeo-light);
}
.footer-utility {
border-top: 1px solid rgba(244,164,121,0.3);
padding-top: var(--sp-5);
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: var(--sp-5);
}
.footer-utility__copy {
font-size: 13px;
color: rgba(216,195,177,0.75);
}
.footer-utility__copy strong { color: var(--bronze); font-family: var(--font-display); letter-spacing: 0.04em; }
.footer-utility__policies {
display: flex; gap: var(--sp-4);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.footer-utility__policies a { color: var(--rodeo-light); }
.footer-utility__pay {
display: flex; align-items: center; gap: var(--sp-3);
}
.footer-utility__pay-mark {
width: 44px; height: 28px;
background: var(--liquourice);
border: 1px ridge var(--bronze);
border-radius: var(--r-sm);
display: grid; place-items: center;
font-family: var(--font-display);
font-size: 10px;
letter-spacing: 0.08em;
color: var(--bronze);
}
.footer-utility__socials {
display: flex; gap: var(--sp-3);
}
.footer-utility__social {
width: 36px; height: 36px;
border: var(--bw-reg) ridge var(--bronze);
border-radius: var(--r-md);
display: grid; place-items: center;
color: var(--bronze);
}
.footer-utility__nerdworks {
font-family: var(--font-display);
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--bronze);
border: 1px ridge var(--bronze);
padding: 6px var(--sp-3);
border-radius: var(--r-sm);
}
/* =========================================================================
Responsive — ~390px
========================================================================= */
@media (max-width: 1100px) {
:root { --fs-h2: 40px; --fs-h3: 30px; }
.hero-split { grid-template-columns: 1fr; }
.hero-split__media { min-height: 340px; }
.hero-split__title { font-size: 56px; }
.game-grid__cards { grid-template-columns: repeat(2, 1fr); }
.product-strip__grid { grid-template-columns: repeat(2, 1fr); }
.editorial-strip__grid { grid-template-columns: 1fr; }
.tools-teaser__grid { grid-template-columns: 1fr; }
.creator-feature { grid-template-columns: 1fr; }
.creator-strip__row { grid-template-columns: repeat(3, 1fr); }
.showcase-gallery { grid-template-columns: repeat(4, 1fr); }
.loyalty-strip__brands { grid-template-columns: repeat(2, 1fr); }
.newsletter-block { grid-template-columns: 1fr; }
.footer-main__cols { grid-template-columns: repeat(2, 1fr); }
.header-bar__nav { display: none; }
.trust-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
:root {
--gutter: 20px;
--sp-9: 64px;
--fs-h2: 34px;
--fs-body: 18px;
}
.header-bar { padding: var(--sp-4); gap: var(--sp-4); }
.header-bar__logo { font-size: 22px; }
.header-bar__cart-points { display: none; }
.hero-split__title { font-size: 42px; }
.hero-split__content { padding: var(--sp-7) var(--sp-5); }
.trust-strip { grid-template-columns: 1fr; padding: var(--sp-5); }
.game-grid__cards { grid-template-columns: 1fr; }
.product-strip__grid { grid-template-columns: 1fr; }
.creator-strip__row { grid-template-columns: repeat(2, 1fr); }
.showcase-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
.showcase-tile { grid-column: span 1 !important; grid-row: span 1 !important; }
.loyalty-strip__brands { grid-template-columns: 1fr; }
.creator-feature__name { font-size: 36px; }
.newsletter-block__title { font-size: 36px; }
.footer-main__cols { grid-template-columns: 1fr; }
.footer-main__brand { flex-direction: column; align-items: flex-start; }
.footer-main__newsletter-strip { width: 100%; }
.footer-main__newsletter-strip input { min-width: 0; flex: 1; }
.footer-utility { flex-direction: column; align-items: flex-start; }
}
</style>
</head>
<body>
<div class="page stack">
<!-- 1. PRE-HEADER ANNOUNCEMENT BAR -->
<div class="section">
<div class="preheader-bar">
<div class="preheader-bar__rotator">
<span class="preheader-bar__msg"><span class="preheader-bar__msg--accent">Free UK shipping</span> on orders over £75</span>
<span class="preheader-bar__dot"></span>
<span class="preheader-bar__msg">New 40K Combat Patrols just landed at the workbench</span>
<span class="preheader-bar__dot"></span>
<span class="preheader-bar__msg">Earn points here — redeem at <span class="preheader-bar__msg--accent">Nerdworks · ArtSabers · Paragon</span></span>
</div>
</div>
</div>
<!-- 2. GLOBAL HEADER -->
<div class="section">
<header class="header-bar">
<div class="header-bar__logo">
<span class="header-bar__logo-mark">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="12" cy="12" r="4"/><circle cx="12" cy="12" r="9"/><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2 2M16.4 16.4l2 2M5.6 18.4l2-2M16.4 7.6l2-2"/></svg>
</span>
War Dungeon
</div>
<nav class="header-bar__nav">
<a class="header-bar__nav-item header-bar__nav-item--has-mega" href="#">Warhammer</a>
<a class="header-bar__nav-item" href="#">Dungeons & Dragons</a>
<a class="header-bar__nav-item" href="#">Tools</a>
<a class="header-bar__nav-item header-bar__nav-item--has-mega" href="#">Learn</a>
<a class="header-bar__nav-item" href="#">Creators</a>
</nav>
<div class="header-bar__utils">
<a class="header-bar__util" href="#" aria-label="Search">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
</a>
<a class="header-bar__util" href="#" aria-label="Account">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8"/></svg>
</a>
<a class="header-bar__util" href="#" aria-label="Wishlist">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 21s-7-4.6-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 11c0 5.4-7 10-7 10z"/></svg>
</a>
<a class="header-bar__cart" href="#">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 4h2l3 12h11l2-9H7"/><circle cx="9" cy="20" r="1.5"/><circle cx="18" cy="20" r="1.5"/></svg>
Saddle
<span class="header-bar__cart-count">3</span>
<span class="header-bar__cart-points">410 pts</span>
</a>
</div>
</header>
</div>
<!-- 3. HERO -->
<div class="section">
<section class="hero-split">
<div class="hero-split__media" aria-hidden="true"></div>
<div class="hero-split__content">
<span class="hero-split__eyebrow">A Workbench for Warhammer & D&D</span>
<h1 class="hero-split__title">Battle on your tabletop. <em>Crafted on ours.</em></h1>
<p class="hero-split__lede">Ten thousand years of war, and yours to command. Pick your faction at the bar, configure your list with the Army Builder, and we'll have it boxed and on the next stagecoach.</p>
<div class="hero-split__actions">
<a class="cta-button cta-button--lg" href="#">Build Your Army</a>
<a class="cta-button cta-button--ghost cta-button--lg" href="#">Shop New Releases</a>
</div>
</div>
</section>
</div>
<!-- 4. TRUST STRIP -->
<div class="section">
<div class="trust-strip">
<div class="promo-badge">
<span class="promo-badge__gear">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M3 8h11l2 4h5v6H3z"/><circle cx="8" cy="18" r="2"/><circle cx="17" cy="18" r="2"/></svg>
</span>
<span class="promo-badge__copy">
<span class="promo-badge__caption">Free UK Shipping</span>
<span class="promo-badge__sub">On orders over £75</span>
</span>
</div>
<div class="promo-badge">
<span class="promo-badge__gear">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M3 12a9 9 0 1 0 3-6.7"/><path d="M3 4v5h5"/></svg>
</span>
<span class="promo-badge__copy">
<span class="promo-badge__caption">30-Day Returns</span>
<span class="promo-badge__sub">No quibble, no quarrel</span>
</span>
</div>
<div class="promo-badge">
<span class="promo-badge__gear">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="12" cy="12" r="4"/><circle cx="12" cy="12" r="9"/><path d="M12 3v3M12 18v3M3 12h3M18 12h3"/></svg>
</span>
<span class="promo-badge__copy">
<span class="promo-badge__caption">Multi-Game Stock</span>
<span class="promo-badge__sub">40K · AoS · Old World · D&D</span>
</span>
</div>
<div class="promo-badge">
<span class="promo-badge__gear">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M12 2 4 6v6c0 5 3.5 9 8 10 4.5-1 8-5 8-10V6z"/></svg>
</span>
<span class="promo-badge__copy">
<span class="promo-badge__caption">A Nerdworks Brand</span>
<span class="promo-badge__sub">Family of specialty stores</span>
</span>
</div>
</div>
</div>
<!-- 5. TOOLS TEASER -->
<div class="section">
<div class="tools-teaser">
<div class="tools-teaser__head">
<span class="tools-teaser__eyebrow">Tools of the Trade</span>
<h2 class="tools-teaser__title">Configure first. Buy with confidence.</h2>
<p class="tools-teaser__lede">We built the tools the big shops never bothered with — the same ones we use behind the bar to settle arguments over points totals and play-style fits.</p>
</div>
<div class="tools-teaser__grid">
<article class="tool-card">
<div class="tool-card__media" aria-hidden="true">
<span class="tool-card__badge">Live now</span>
</div>
<div class="tool-card__body">
<span class="tool-card__eyebrow">Army Builder</span>
<h3 class="tool-card__title">Pick your faction. Watch the points tick.</h3>
<p class="tool-card__lede">Unit selector with live points, playstyle analysis, and a saved roster per account. When the list balances, the basket fills itself.</p>
<div class="tool-card__points">
<span class="tool-card__point">Live points tracker</span>
<span class="tool-card__point">Save & share rosters</span>
<span class="tool-card__point">Configure → cart</span>
</div>
<div class="tool-card__actions">
<a class="cta-button" href="#">Open the Builder</a>
</div>
</div>
</article>
<article class="tool-card">
<div class="tool-card__media" aria-hidden="true">
<span class="tool-card__badge tool-card__badge--soon">Coming soon</span>
</div>
<div class="tool-card__body">
<span class="tool-card__eyebrow">Battle Simulator</span>
<h3 class="tool-card__title">Run the engagement before you roll a die.</h3>
<p class="tool-card__lede">Top-down turn-based viewer for any two saved armies. PvP your friends or PvE the engine — with live AI commentary called from the chat sidebar.</p>
<div class="tool-card__points">
<span class="tool-card__point">PvP & PvE modes</span>
<span class="tool-card__point">AI commentary feed</span>
<span class="tool-card__point">Phase II — 2026</span>
</div>
<div class="tool-card__actions">
<a class="cta-button cta-button--ghost" href="#">Sign up for early access</a>
</div>
</div>
</article>
</div>
</div>
</div>
<!-- 6. CHOOSE YOUR GAME -->
<div class="section">
<div class="game-grid">
<div class="section-head">
<span class="section-head__eyebrow">Choose Your Game</span>
<h2 class="section-head__title">Six counters at the bar. Pull up a stool.</h2>
<p class="section-head__lede">Every range below opens onto a curated mini-store — kit-bash starters, painting how-to, tournament essentials and the latest releases, picked by people who actually play.</p>
</div>
<div class="game-grid__cards">
<a class="game-card" href="#">
<div class="game-card__media" aria-hidden="true"></div>
<div class="game-card__body">
<span class="game-card__eyebrow">Sci-fi · Grimdark</span>
<h3 class="game-card__title">Warhammer 40,000</h3>
<p class="game-card__lede">Combat Patrols, Codex supplements, terrain crates and the whole 10th-edition reload. Start small, scale to apocalyptic.</p>
<span class="game-card__cta">Browse 40K →</span>
</div>
</a>
<a class="game-card" href="#">
<div class="game-card__media" aria-hidden="true"></div>
<div class="game-card__body">
<span class="game-card__eyebrow">High fantasy · Mortal Realms</span>
<h3 class="game-card__title">Age of Sigmar</h3>
<p class="game-card__lede">Vanguard boxes, battletomes and warscroll cards for every Grand Alliance. From your first Stormcast to a full Beasts of Chaos horde.</p>
<span class="game-card__cta">Browse AoS →</span>
</div>
</a>
<a class="game-card" href="#">
<div class="game-card__media" aria-hidden="true"></div>
<div class="game-card__body">
<span class="game-card__eyebrow">Rank & flank · Classic</span>
<h3 class="game-card__title">The Old World</h3>
<p class="game-card__lede">Back from the dead and we've got the boxes. Empire of Man, Tomb Kings, Bretonnia — plus movement trays cut to spec on the bench out back.</p>
<span class="game-card__cta">Browse Old World →</span>
</div>
</a>
<a class="game-card" href="#">
<div class="game-card__media" aria-hidden="true"></div>
<div class="game-card__body">
<span class="game-card__eyebrow">RPG · 5th & 2024 Edition</span>
<h3 class="game-card__title">Dungeons & Dragons</h3>
<p class="game-card__lede">Rulebooks, hardback adventures, official miniatures and a wall of dice. Whether you DM Mondays or you've never rolled a d20 — we'll set you up.</p>
<span class="game-card__cta">Browse D&D →</span>
</div>
</a>
<a class="game-card" href="#">
<div class="game-card__media" aria-hidden="true"></div>
<div class="game-card__body">
<span class="game-card__eyebrow">Workbench</span>
<h3 class="game-card__title">Hobby Supplies</h3>
<p class="game-card__lede">Clippers, files, plastic glue, tufts, basing kits — and the tools we'd never swap out. Stocked because we use them ourselves.</p>
<span class="game-card__cta">Browse Supplies →</span>
</div>
</a>
<a class="game-card" href="#">
<div class="game-card__media" aria-hidden="true"></div>
<div class="game-card__body">
<span class="game-card__eyebrow">Paints & Mediums</span>
<h3 class="game-card__title">Paints</h3>
<p class="game-card__lede">Citadel, Vallejo, Army Painter, AK Interactive. Bundles for beginners, single pots for the perfectionist. With painting guides for every range.</p>
<span class="game-card__cta">Browse Paints →</span>
</div>
</a>
</div>
</div>
</div>
<!-- 7. FAN FAVOURITES -->
<div class="section">
<div class="product-strip">
<div class="section-head">
<span class="section-head__eyebrow">Fan Favourites</span>
<h2 class="section-head__title">What's been walking off the shelves.</h2>
<p class="section-head__lede">Picked by what other dungeon-dwellers are reaching for this week — not by what we've been told to push.</p>
</div>
<div class="product-strip__grid">
<article class="product-card">
<div class="product-card__shot">
<div class="product-card__shot-img" aria-hidden="true"></div>
<span class="product-card__points"><strong>240</strong>pts</span>
</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 (10th Ed.)</h3>
<div class="product-card__rating">
<span class="product-card__stars">★★★★★</span> 4.9 · 218 reviews
</div>
<div class="product-card__foot">
<span class="product-card__price">£89.99</span>
<button class="product-card__quick">Quick View</button>
</div>
</div>
</article>
<article class="product-card">
<div class="product-card__shot">
<div class="product-card__shot-img" aria-hidden="true"></div>
<span class="product-card__points"><strong>320</strong>pts</span>
</div>
<div class="product-card__body">
<span class="product-card__game-tag">Age of Sigmar</span>
<h3 class="product-card__title">Stormbringer Vanguard — Stormcast Eternals</h3>
<div class="product-card__rating">
<span class="product-card__stars">★★★★★</span> 4.8 · 142 reviews
</div>
<div class="product-card__foot">
<span class="product-card__price">£124.50</span>
<button class="product-card__quick">Quick View</button>
</div>
</div>
</article>
<article class="product-card">
<div class="product-card__shot">
<div class="product-card__shot-img" aria-hidden="true"></div>
<span class="product-card__points"><strong>95</strong>pts</span>
</div>
<div class="product-card__body">
<span class="product-card__game-tag">Dungeons & Dragons</span>
<h3 class="product-card__title">Player's Handbook 2024 (Rulebook)</h3>
<div class="product-card__rating">
<span class="product-card__stars">★★★★☆</span> 4.6 · 304 reviews
</div>
<div class="product-card__foot">
<span class="product-card__price">£35.99</span>
<button class="product-card__quick">Quick View</button>
</div>
</div>
</article>
<article class="product-card">
<div class="product-card__shot">
<div class="product-card__shot-img" aria-hidden="true"></div>
<span class="product-card__points"><strong>62</strong>pts</span>
</div>
<div class="product-card__body">
<span class="product-card__game-tag">Hobby Supplies</span>
<h3 class="product-card__title">Citadel Painting Essentials — Starter Kit</h3>
<div class="product-card__rating">
<span class="product-card__stars">★★★★★</span> 4.9 · 519 reviews
</div>
<div class="product-card__foot">
<span class="product-card__price">£24.00</span>
<button class="product-card__quick">Quick View</button>
</div>
</div>
</article>
</div>
</div>
</div>
<!-- 8. HOW-TO GUIDES + TUTORIALS -->
<div class="section">
<div class="editorial-strip">
<div class="section-head">
<span class="section-head__eyebrow">From the Workbench</span>
<h2 class="section-head__title">Three guides to settle a quiet evening.</h2>
<p class="section-head__lede">Painting, rules and terrain — written by hobbyists who'd rather sit and chat than sell at you.</p>
</div>
<div class="editorial-strip__grid">
<article class="how-to-card">
<div class="how-to-card__media" aria-hidden="true">
<span class="how-to-card__format">Painting how-to</span>
<div class="how-to-card__meta">
<span class="how-to-card__pill">Beginner</span>
<span class="how-to-card__pill how-to-card__pill--time">8 min read</span>
</div>
</div>
<div class="how-to-card__body">
<span class="how-to-card__eyebrow">Brushwork · Tabletop standard</span>
<h3 class="how-to-card__title">Layering Space Marine armour in three coats — without the headache.</h3>
<p class="how-to-card__lede">A three-pot recipe that gets you a tabletop standard finish in an evening. No airbrush, no oils, no fuss.</p>
<a class="how-to-card__cta" href="#">Read Guide</a>
</div>
</article>
<article class="how-to-card">
<div class="how-to-card__media" aria-hidden="true">
<span class="how-to-card__format">Rules tutorial</span>
<div class="how-to-card__meta">
<span class="how-to-card__pill">Intermediate</span>
<span class="how-to-card__pill how-to-card__pill--time">12 min watch</span>
</div>
</div>
<div class="how-to-card__body">
<span class="how-to-card__eyebrow">10th Edition · Command Phase</span>
<h3 class="how-to-card__title">Stratagems, Command Points and you — what to actually spend on.</h3>
<p class="how-to-card__lede">A practical walkthrough of which Stratagems pull their weight and which ones look better on paper than on the table.</p>
<a class="how-to-card__cta" href="#">Watch Tutorial</a>
</div>
</article>
<article class="how-to-card">
<div class="how-to-card__media" aria-hidden="true">
<span class="how-to-card__format">Terrain build</span>
<div class="how-to-card__meta">
<span class="how-to-card__pill">Advanced</span>
<span class="how-to-card__pill how-to-card__pill--time">25 min read</span>
</div>
</div>
<div class="how-to-card__body">
<span class="how-to-card__eyebrow">Scratch-build · Foamboard</span>
<h3 class="how-to-card__title">An Imperial ruined manufactorum from a Saturday and a bag of bits.</h3>
<p class="how-to-card__lede">Foamboard, sprue offcuts, a hot glue gun and patience. Five photos in we promise it stops looking like a craft project.</p>
<a class="how-to-card__cta" href="#">Read Guide</a>
</div>
</article>
</div>
</div>
</div>
<!-- 9. CREATOR PARTNER SPOTLIGHT -->
<div class="section">
<div class="creator-spotlight">
<div class="creator-feature">
<div class="creator-feature__portrait" aria-hidden="true"></div>
<div class="creator-feature__body">
<span class="creator-feature__eyebrow">Featured Creator</span>
<h2 class="creator-feature__name">Magpie & Mallet</h2>
<div class="creator-feature__tags">
<span class="creator-feature__tag">Warhammer 40,000</span>
<span class="creator-feature__tag">Painting</span>
<span class="creator-feature__tag">Narrative play</span>
</div>
<p class="creator-feature__bio">Ten years of Marines, Mechanicus and the slow-burn campaign games no one else films. Magpie's been painting for the channel since before YouTube paid out — and runs a Tuesday-night narrative game out of the shop's basement.</p>
<div class="hero-split__actions">
<a class="cta-button" href="#">Visit Creator</a>
<a class="cta-button cta-button--ghost" href="#">Latest content stream</a>
</div>
</div>
</div>
<div class="creator-strip">
<div class="creator-strip__head">
<span class="creator-strip__head-title">Other partners at the bar</span>
<a class="creator-strip__head-more" href="#">See all creators →</a>
</div>
<div class="creator-strip__row">
<div class="creator-thumb">
<div class="creator-thumb__avatar" aria-hidden="true"></div>
<span class="creator-thumb__name">Goblin Forge</span>
<span class="creator-thumb__tag">AoS · Terrain</span>
</div>
<div class="creator-thumb">
<div class="creator-thumb__avatar" aria-hidden="true"></div>
<span class="creator-thumb__name">Hexcrawl Henry</span>
<span class="creator-thumb__tag">D&D · DM Tips</span>
</div>
<div class="creator-thumb">
<div class="creator-thumb__avatar" aria-hidden="true"></div>
<span class="creator-thumb__name">Inkstone Studios</span>
<span class="creator-thumb__tag">40K · Lore</span>
</div>
<div class="creator-thumb">
<div class="creator-thumb__avatar" aria-hidden="true"></div>
<span class="creator-thumb__name">Bretonnian Briar</span>
<span class="creator-thumb__tag">Old World</span>
</div>
<div class="creator-thumb">
<div class="creator-thumb__avatar" aria-hidden="true"></div>
<span class="creator-thumb__name">Lacquer & Lantern</span>
<span class="creator-thumb__tag">Painting</span>
</div>
<div class="creator-thumb">
<div class="creator-thumb__avatar" aria-hidden="true"></div>
<span class="creator-thumb__name">Saltmarsh Sketch</span>
<span class="creator-thumb__tag">D&D · Maps</span>
</div>
</div>
</div>
</div>
</div>
<!-- 10. PAINTING SHOWCASE -->
<div class="section">
<div>
<div class="section-head">
<span class="section-head__eyebrow">Painting Showcase</span>
<h2 class="section-head__title">Brushes our customers laid down so we could pick the camera up.</h2>
<p class="section-head__lede">Sent in by hobbyists like you — published with full credit. Tag us and we'll find you.</p>
</div>
<div class="showcase-gallery">
<div class="showcase-tile showcase-tile--a">
<div class="showcase-tile__overlay">
<span class="showcase-tile__by">By Annika R.</span>
<span class="showcase-tile__title">Death Guard Bloat-Drone</span>
</div>
</div>
<div class="showcase-tile showcase-tile--b">
<div class="showcase-tile__overlay">
<span class="showcase-tile__by">By Dev C.</span>
<span class="showcase-tile__title">Sylvaneth Tree-Revenant</span>
</div>
</div>
<div class="showcase-tile showcase-tile--c">
<div class="showcase-tile__overlay">
<span class="showcase-tile__by">By Marcus W.</span>
<span class="showcase-tile__title">Tomb Kings Necrolith Bone Dragon</span>
</div>
</div>
<div class="showcase-tile showcase-tile--d">
<div class="showcase-tile__overlay">
<span class="showcase-tile__by">By Priya S.</span>
<span class="showcase-tile__title">Reaper Bones — Beholder</span>
</div>
</div>
<div class="showcase-tile showcase-tile--e">
<div class="showcase-tile__overlay">
<span class="showcase-tile__by">By Tomasz L.</span>
<span class="showcase-tile__title">Adeptus Custodes Vexilus Praetor</span>
</div>
</div>
<div class="showcase-tile showcase-tile--f">
<div class="showcase-tile__overlay">
<span class="showcase-tile__by">By Frances H.</span>
<span class="showcase-tile__title">Slaves to Darkness Chaos Lord</span>
</div>
</div>
</div>
<div class="showcase-submit">
<a class="cta-button" href="#">Submit Your Painting</a>
</div>
</div>
</div>
<!-- 11. LOYALTY CROSS-BRAND STRIP -->
<div class="section">
<div class="loyalty-strip">
<span class="loyalty-strip__eyebrow">Cross-Brand Loyalty</span>
<h2 class="loyalty-strip__title">Earn here. Redeem anywhere.</h2>
<p class="loyalty-strip__lede">Every penny you spend at War Dungeon banks loyalty points you can spend across the whole family of stores — including the helmets, the dice and the keyboards.</p>
<div class="loyalty-strip__brands">
<div class="sister-mark sister-mark--current">
<span class="sister-mark__name">War Dungeon</span>
<span class="sister-mark__tag">Warhammer · D&D</span>
</div>
<div class="sister-mark">
<span class="sister-mark__name">Nerdworks</span>
<span class="sister-mark__tag">TCG · Tabletop</span>
</div>
<div class="sister-mark">
<span class="sister-mark__name">ArtSabers</span>
<span class="sister-mark__tag">Helmets · Sabers</span>
</div>
<div class="sister-mark">
<span class="sister-mark__name">Paragon</span>
<span class="sister-mark__tag">PC Peripherals</span>
</div>
</div>
<div class="loyalty-strip__actions">
<a class="cta-button" href="#">Sign in to see your balance</a>
<a class="cta-button cta-button--ghost" href="#">Learn how points work</a>
</div>
</div>
</div>
<!-- 12. NEWSLETTER SIGNUP -->
<div class="section">
<div class="newsletter-block">
<div class="newsletter-block__copy">
<span class="newsletter-block__eyebrow">Join the Garrison</span>
<h2 class="newsletter-block__title">Letters from the workbench.</h2>
<p class="newsletter-block__lede">A monthly dispatch — new releases worth your time, painting tips we've actually tested, and the kind of campaign hooks that ruin Sunday afternoons. No marketing noise.</p>
<div class="newsletter-block__perks">
<span class="newsletter-block__perk">10% off your first order</span>
<span class="newsletter-block__perk">Early access drops</span>
<span class="newsletter-block__perk">Loyalty bonus on signup</span>
</div>
</div>
<form class="newsletter-block__form" onsubmit="event.preventDefault();">
<div class="newsletter-block__field">
<label class="newsletter-block__label" for="nl-email">Your dispatch address</label>
<input class="newsletter-block__input" id="nl-email" type="email" placeholder="forgemaster@example.com" required>
</div>
<button class="newsletter-block__submit" type="submit">Join the Garrison</button>
<p class="newsletter-block__legal">We use Brevo to send. Unsubscribe in one click. Read our privacy promise.</p>
</form>
</div>
</div>
<!-- 13. GLOBAL FOOTER -->
<div class="section">
<footer class="footer-main">
<div class="footer-main__brand">
<div class="footer-main__brand-mark">
<span class="footer-main__brand-lock">
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="12" cy="12" r="4"/><circle cx="12" cy="12" r="9"/><path d="M12 3v3M12 18v3M3 12h3M18 12h3"/></svg>
</span>
<div>
<div class="footer-main__brand-name">War Dungeon</div>
<div class="footer-main__brand-tag">Warhammer & Dungeons & Dragons specialty</div>
</div>
</div>
<form class="footer-main__newsletter-strip" onsubmit="event.preventDefault();">
<input type="email" placeholder="Quick — pop your email in the dispatch box" aria-label="Email">
<button class="cta-button" type="submit">Subscribe</button>
</form>
</div>
<div class="footer-main__cols">
<div class="footer-col">
<h4 class="footer-col__title">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 & Mediums</a></li>
<li><a class="footer-col__link" href="#">New Releases</a></li>
<li><a class="footer-col__link" href="#">Clearance</a></li>
</ul>
</div>
<div class="footer-col">
<h4 class="footer-col__title">Discover</h4>
<ul class="footer-col__list">
<li><a class="footer-col__link" href="#">Army Builder</a></li>
<li><a class="footer-col__link" href="#">Battle Simulator (Coming)</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="#">Painting Showcase</a></li>
<li><a class="footer-col__link" href="#">Creator Partners</a></li>
<li><a class="footer-col__link" href="#">Community</a></li>
</ul>
</div>
<div class="footer-col">
<h4 class="footer-col__title">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 & delivery</a></li>
<li><a class="footer-col__link" href="#">Returns & exchanges</a></li>
<li><a class="footer-col__link" href="#">Track your order</a></li>
<li><a class="footer-col__link" href="#">FAQ</a></li>
<li><a class="footer-col__link" href="#">Find a tournament</a></li>
</ul>
</div>
<div class="footer-col">
<h4 class="footer-col__title">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="#">Loyalty programme</a></li>
<li><a class="footer-col__link" href="#">Become an affiliate</a></li>
<li><a class="footer-col__link" href="#">Wholesale enquiries</a></li>
</ul>
<div class="footer-col__sister">
<span class="footer-col__sister-title">Redeem across the family</span>
<a class="footer-col__sister-link" href="#">Nerdworks ↗</a>
<a class="footer-col__sister-link" href="#">ArtSabers ↗</a>
<a class="footer-col__sister-link" href="#">Paragon ↗</a>
</div>
</div>
</div>
<div class="footer-utility">
<div class="footer-utility__copy">
<strong>© 2026 War Dungeon</strong> — A Nerdworks Brand · Registered in England & Wales · VAT GB 123456789
</div>
<div class="footer-utility__pay">
<span class="footer-utility__pay-mark">VISA</span>
<span class="footer-utility__pay-mark">MC</span>
<span class="footer-utility__pay-mark">AMEX</span>
<span class="footer-utility__pay-mark">PAYPAL</span>
<span class="footer-utility__pay-mark">KLARNA</span>
<span class="footer-utility__pay-mark">APPLE</span>
</div>
<div class="footer-utility__socials">
<a class="footer-utility__social" href="#" aria-label="Instagram">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor"/></svg>
</a>
<a class="footer-utility__social" href="#" aria-label="YouTube">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="6" width="20" height="12" rx="3"/><path d="m10 9 5 3-5 3z" fill="currentColor"/></svg>
</a>
<a class="footer-utility__social" href="#" aria-label="Discord">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 8c2-1 8-1 10 0M7 16c2 1 8 1 10 0M5 7c2-2 12-2 14 0v10c-2 2-12 2-14 0z"/></svg>
</a>
<a class="footer-utility__social" href="#" aria-label="X">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m4 4 16 16M20 4 4 20"/></svg>
</a>
</div>
<div class="footer-utility__policies">
<a href="#">Privacy</a>
<a href="#">Cookies</a>
<a href="#">Terms</a>
<a href="#">Modern Slavery</a>
</div>
<div class="footer-utility__nerdworks">A Nerdworks Brand</div>
</div>
</footer>
</div>
</div><!-- /.page -->
</body>
</html>