<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nerdworks — The Collector's Archive</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
<style>
/* ─── RESET ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img { display: block; max-width: 100%; }
a { text-decoration: none; }
ul { list-style: none; }
/* ─── TOKENS ─────────────────────────────────────────────────── */
:root {
--nav-bg: #06251D;
--hero-bg: #0B0D0B;
--editorial-bg: #28302A;
--acq-bg: #101411;
--vault-bg: #266038;
--explore-bg: #101411;
--events-bg: #F8F9F8;
--newsletter-bg: #25653C;
--archive-bg: #28302A;
--footer-bg: #022C22;
--card-bg: #28302A;
--vault-card-bg: #1F4F2E;
--event-card-bg: #FFFFFF;
--text-light: #E0E3DD;
--text-muted: rgba(224,227,221,0.6);
--text-dim: rgba(224,227,221,0.38);
--text-dark: #0D2218;
--text-dark-muted: rgba(13,34,24,0.55);
--green: #266038;
--green-bright: #25A35A;
--green-link: #3DB870;
--green-date-tint: #D8EDDF;
--price-color: #6FCF97;
--font-body: 'Plus Jakarta Sans', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
--content-w: 1440px;
--content-px: 120px;
--radius-card: 14px;
--radius-img: 10px;
}
/* ─── BASE ───────────────────────────────────────────────────── */
body {
font-family: var(--font-body);
background: var(--hero-bg);
color: var(--text-light);
-webkit-font-smoothing: antialiased;
}
.container {
max-width: var(--content-w);
margin: 0 auto;
padding: 0 var(--content-px);
}
.label {
font-size: 11px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--text-muted);
}
.label--green { color: var(--green-link); }
.link-arrow {
font-size: 12px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--green-link);
display: inline-flex;
align-items: center;
gap: 6px;
}
.link-sm {
font-size: 11px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--text-muted);
}
.link-sm:hover { color: var(--text-light); }
/* ─── BUTTONS ─────────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 28px;
height: 48px;
border-radius: 8px;
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.5px;
cursor: pointer;
border: none;
transition: opacity .2s;
}
.btn:hover { opacity: .85; }
.btn--green { background: var(--green); color: #fff; }
.btn--outline {
background: transparent;
color: var(--text-light);
border: 1.5px solid rgba(224,227,221,0.35);
}
.btn--dark {
background: var(--text-dark);
color: #fff;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 0 24px;
height: 44px;
border-radius: 6px;
}
.btn--subscribe {
background: var(--green);
color: #fff;
font-size: 13px;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 0 32px;
height: 52px;
border-radius: 8px;
white-space: nowrap;
}
/* ─── NAV ─────────────────────────────────────────────────────── */
/* GD measured: Y 0–160 img → h_css 90px */
.nav {
position: sticky;
top: 0;
z-index: 100;
height: 90px;
background: var(--nav-bg);
display: flex;
align-items: center;
}
.nav__inner {
max-width: var(--content-w);
margin: 0 auto;
padding: 0 var(--content-px);
width: 100%;
display: flex;
align-items: center;
gap: 48px;
}
.nav__logo {
font-size: 14px;
font-weight: 800;
letter-spacing: 3px;
color: #fff;
text-transform: uppercase;
white-space: nowrap;
}
.nav__links {
display: flex;
align-items: center;
gap: 40px;
flex: 1;
justify-content: center;
}
.nav__links a {
font-size: 14px;
font-weight: 500;
color: var(--text-muted);
transition: color .2s;
}
.nav__links a:hover { color: var(--text-light); }
.nav__actions {
display: flex;
align-items: center;
gap: 20px;
}
.nav__icon {
width: 20px;
height: 20px;
color: var(--green-link);
}
/* ─── HERO ────────────────────────────────────────────────────── */
/* GD measured: Y 160–2040 img → h_css 1058px */
.hero {
background: var(--hero-bg);
min-height: 1058px;
position: relative;
overflow: hidden;
}
/* Subtle green radial glow on right side */
.hero::after {
content: '';
position: absolute;
right: 5%;
top: 20%;
width: 700px;
height: 700px;
background: radial-gradient(ellipse at center, rgba(38,96,56,0.22) 0%, transparent 65%);
pointer-events: none;
}
.hero__inner {
max-width: var(--content-w);
margin: 0 auto;
padding: 0 var(--content-px);
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 1058px;
position: relative;
z-index: 1;
}
.hero__text {
/* GD: label at 268px from section top */
padding-top: 268px;
padding-bottom: 80px;
}
/* GD: label Y=636-654 img → css 10px height, 268px from section top */
.hero__label {
font-size: 11px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--text-muted);
/* GD: gap label→heading = 91px CSS */
margin-bottom: 91px;
}
/* GD: heading Y=815-904 img → h_css ~50px for 2-line block → font-size ~48px */
.hero__title {
font-size: 52px;
font-weight: 800;
line-height: 1.05;
color: #fff;
/* GD: gap heading→subtext = 48px */
margin-bottom: 48px;
}
/* GD: subtext 3 lines at ~14-15px CSS each */
.hero__body {
font-size: 15px;
font-weight: 400;
line-height: 1.7;
color: var(--text-muted);
max-width: 380px;
margin-bottom: 40px;
}
.hero__ctas {
display: flex;
gap: 14px;
}
.hero__visual {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.hero__card-wrap {
position: relative;
}
.hero__card {
width: 310px;
height: 420px;
border-radius: 18px;
overflow: hidden;
transform: rotate(-12deg) translateY(-30px);
box-shadow:
0 40px 100px rgba(0,0,0,0.85),
0 0 80px rgba(38,96,56,0.35),
0 0 20px rgba(38,96,56,0.15);
}
.hero__card img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Second card partially visible behind main card */
.hero__card-shadow {
position: absolute;
width: 280px;
height: 380px;
border-radius: 16px;
overflow: hidden;
transform: rotate(-5deg) translateX(30px) translateY(10px);
box-shadow: 0 20px 60px rgba(0,0,0,0.7);
opacity: 0.55;
z-index: -1;
}
.hero__card-shadow img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* ─── EDITORIAL ───────────────────────────────────────────────── */
/* GD measured: Y 2040–3230 img → h_css 669px; padding-top 147px */
.editorial {
background: var(--editorial-bg);
min-height: 669px;
}
.editorial__inner {
max-width: var(--content-w);
margin: 0 auto;
padding: 147px var(--content-px) 80px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.editorial__label {
margin-bottom: 20px;
}
/* GD: heading run at x=1000 → h_css 41px → font-size ~40px */
.editorial__title {
font-size: 40px;
font-weight: 700;
line-height: 1.15;
color: var(--text-light);
margin-bottom: 24px;
}
.editorial__body {
font-size: 15px;
line-height: 1.7;
color: var(--text-muted);
margin-bottom: 32px;
}
.editorial__image {
position: relative;
border-radius: 16px;
overflow: hidden;
aspect-ratio: 4 / 3;
}
.editorial__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* ─── ACQUISITIONS ────────────────────────────────────────────── */
/* GD: Y 3230–4720 → h_css 838px; first text at 185px from section top */
.acquisitions {
background: var(--acq-bg);
min-height: 838px;
padding: 185px var(--content-px) 80px;
}
.acquisitions__header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 32px;
}
.acquisitions__title {
font-size: 36px;
font-weight: 700;
color: var(--text-light);
margin-top: 10px;
}
/* GD confirmed: 5-column grid */
.acquisitions__grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 16px;
}
.product-card {
background: var(--card-bg);
border-radius: var(--radius-card);
overflow: hidden;
position: relative;
}
.product-card__img {
aspect-ratio: 1 / 1;
overflow: hidden;
position: relative;
}
.product-card__img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .3s;
}
.product-card:hover .product-card__img img { transform: scale(1.04); }
.product-card__badge {
position: absolute;
top: 10px;
left: 10px;
background: #C9A227;
color: #000;
font-size: 9px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 4px 8px;
border-radius: 4px;
z-index: 1;
}
.product-card__info {
padding: 14px 14px 16px;
}
.product-card__name {
font-size: 13px;
font-weight: 600;
line-height: 1.4;
color: var(--text-light);
margin-bottom: 8px;
}
.product-card__price {
font-size: 13px;
font-weight: 700;
color: var(--price-color);
}
/* ─── CURATOR'S VAULT ─────────────────────────────────────────── */
/* GD: Y 4720–6730 → h_css 1131px; vault heading at 160px from section top */
.vault {
background: var(--vault-bg);
min-height: 1131px;
padding: 0 var(--content-px);
}
.vault__intro {
text-align: center;
/* GD: heading at 160px from section top */
padding-top: 160px;
padding-bottom: 64px;
}
.vault__title {
font-size: 48px;
font-weight: 800;
color: #fff;
margin-bottom: 18px;
}
.vault__subtitle {
font-size: 18px;
font-weight: 400;
font-style: italic;
color: rgba(255,255,255,0.72);
}
.vault__grid {
max-width: var(--content-w);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
padding-bottom: 80px;
}
.vault-card {
background: var(--vault-card-bg);
border-radius: 16px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.vault-card__img {
height: 300px;
overflow: hidden;
}
.vault-card__img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .3s;
}
.vault-card:hover .vault-card__img img { transform: scale(1.04); }
.vault-card__body {
padding: 28px 28px 32px;
flex: 1;
display: flex;
flex-direction: column;
gap: 20px;
}
.vault-card__quote {
font-size: 15px;
font-weight: 400;
font-style: italic;
line-height: 1.65;
color: rgba(255,255,255,0.85);
flex: 1;
}
.vault-card__author {
display: flex;
align-items: center;
gap: 12px;
}
.vault-card__avatar {
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
}
.vault-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.vault-card__name {
font-size: 14px;
font-weight: 700;
color: #fff;
display: block;
}
.vault-card__role {
font-size: 12px;
color: rgba(255,255,255,0.5);
display: block;
margin-top: 2px;
}
/* ─── EXPLORE THE ARCHIVE ─────────────────────────────────────── */
/* GD: Y 6730–8820 → h_css 1176px */
.explore {
background: var(--explore-bg);
min-height: 1176px;
padding: 80px var(--content-px) 80px;
}
.explore__heading {
font-size: 36px;
font-weight: 700;
color: var(--text-light);
margin-bottom: 6px;
}
.explore__rule {
width: 40px;
height: 3px;
background: var(--green-link);
margin-bottom: 48px;
}
.explore__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 16px;
/* 1176px total - 80px top - 80px bottom - 80px (heading area) = ~936px for grid */
height: 880px;
}
.category-tile {
border-radius: var(--radius-card);
overflow: hidden;
position: relative;
cursor: pointer;
}
.category-tile::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.2) 45%, rgba(0,0,0,0) 70%);
transition: opacity .3s;
}
.category-tile:hover::after { opacity: .75; }
.category-tile img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .4s;
}
.category-tile:hover img { transform: scale(1.05); }
.category-tile__text {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 20px 24px 24px;
z-index: 1;
}
.category-tile__sub {
font-size: 10px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: rgba(255,255,255,0.6);
margin-bottom: 4px;
}
.category-tile__name {
font-size: 22px;
font-weight: 700;
color: #fff;
}
/* ─── EVENTS ─────────────────────────────────────────────────── */
/* GD: Y 8820–9970 → h_css 647px; events heading at ~190px from section top */
.events {
background: var(--events-bg);
min-height: 647px;
padding: 60px var(--content-px) 60px;
}
.events__header {
display: flex;
justify-content: space-between;
align-items: flex-end;
/* GD: heading at 190px from section top; label above it → total header area ~190px */
margin-bottom: 48px;
}
.events__header-left {
display: flex;
flex-direction: column;
gap: 10px;
}
.events__label {
color: var(--green);
}
/* GD: events heading detected at from_sec=190px; large heading */
.events__title {
font-size: 64px;
font-weight: 800;
line-height: 1.0;
color: var(--text-dark);
}
.events__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
}
.event-card {
background: #fff;
border: 1.5px solid #E5E9E6;
border-radius: 16px;
padding: 32px;
display: flex;
gap: 24px;
align-items: flex-start;
}
.event-card__date {
width: 72px;
height: 72px;
background: var(--green-date-tint);
border-radius: 12px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.event-card__day {
font-size: 10px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--green);
}
.event-card__num {
font-size: 30px;
font-weight: 800;
line-height: 1;
color: var(--text-dark);
}
.event-card__body {
flex: 1;
}
.event-card__name {
font-size: 22px;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 6px;
}
.event-card__detail {
font-size: 14px;
color: var(--text-dark-muted);
margin-bottom: 20px;
}
.event-card__link {
font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--green);
display: inline-flex;
align-items: center;
gap: 6px;
}
/* ─── INNER CIRCLE / NEWSLETTER ───────────────────────────────── */
/* GD: Y 9970–10760 → h_css 444px; first content at 129px from section top */
.newsletter {
background: var(--newsletter-bg);
min-height: 444px;
display: flex;
align-items: center;
justify-content: center;
}
.newsletter__inner {
text-align: center;
/* GD: first bright pixel at 129px from section top */
padding: 129px var(--content-px) 80px;
max-width: 700px;
width: 100%;
}
.newsletter__title {
font-size: 36px;
font-weight: 800;
color: #fff;
margin-bottom: 14px;
}
.newsletter__sub {
font-size: 16px;
color: rgba(255,255,255,0.72);
line-height: 1.6;
margin-bottom: 36px;
}
.newsletter__form {
display: flex;
gap: 8px;
max-width: 580px;
margin: 0 auto;
}
.newsletter__input {
flex: 1;
height: 52px;
background: rgba(255,255,255,0.08);
border: 1.5px solid rgba(255,255,255,0.28);
border-radius: 8px;
color: #fff;
font-family: var(--font-body);
font-size: 15px;
padding: 0 20px;
outline: none;
transition: border-color .2s;
}
.newsletter__input::placeholder { color: rgba(255,255,255,0.45); }
.newsletter__input:focus { border-color: rgba(255,255,255,0.6); }
/* ─── FROM THE ARCHIVE ────────────────────────────────────────── */
/* GD: Y 10760–12225 → h_css 824px; heading at 163px from section top */
.archive {
background: var(--archive-bg);
min-height: 824px;
/* GD: first text at 163px from section top */
padding: 163px var(--content-px) 80px;
}
.archive__header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 40px;
}
.archive__title {
font-size: 32px;
font-weight: 700;
color: var(--text-light);
}
.archive__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.article-card__img {
aspect-ratio: 16 / 9;
border-radius: var(--radius-card);
overflow: hidden;
margin-bottom: 20px;
}
.article-card__img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .3s;
}
.article-card:hover .article-card__img img { transform: scale(1.04); }
.article-card__tag {
font-size: 10px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 10px;
}
.article-card__name {
font-size: 19px;
font-weight: 700;
line-height: 1.3;
color: var(--text-light);
margin-bottom: 12px;
}
.article-card__excerpt {
font-size: 14px;
line-height: 1.65;
color: var(--text-muted);
}
/* ─── FOOTER ─────────────────────────────────────────────────── */
/* GD: Y 12225–12538 → h_css 176px */
.footer {
background: var(--footer-bg);
height: 176px;
display: flex;
align-items: center;
}
.footer__inner {
max-width: var(--content-w);
margin: 0 auto;
padding: 0 var(--content-px);
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
}
.footer__logo {
font-size: 13px;
font-weight: 800;
letter-spacing: 3px;
color: #fff;
text-transform: uppercase;
white-space: nowrap;
}
.footer__nav {
display: flex;
align-items: center;
gap: 40px;
}
.footer__nav a {
font-size: 10px;
font-weight: 500;
letter-spacing: 1.5px;
text-transform: uppercase;
color: rgba(224,227,221,0.35);
transition: color .2s;
}
.footer__nav a:hover { color: rgba(224,227,221,0.65); }
.footer__copy {
font-size: 10px;
font-weight: 400;
letter-spacing: 0.5px;
text-transform: uppercase;
color: rgba(224,227,221,0.28);
white-space: nowrap;
}
</style>
</head>
<body>
<!-- ═══════════════════════════════════════════════════════════════
NAV | h_css 90px | bg #06251D
═══════════════════════════════════════════════════════════════ -->
<nav class="nav">
<div class="nav__inner">
<div class="nav__logo">Nerdworks</div>
<ul class="nav__links">
<li><a href="#">The Vault</a></li>
<li><a href="#">Archives</a></li>
<li><a href="#">Curations</a></li>
<li><a href="#">Collections</a></li>
</ul>
<div class="nav__actions">
<!-- Cart icon -->
<svg class="nav__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 01-8 0"/>
</svg>
<!-- Account icon -->
<svg class="nav__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/>
</svg>
</div>
</div>
</nav>
<!-- ═══════════════════════════════════════════════════════════════
HERO | h_css 1058px | bg #0B0D0B
Label at 268px from section top (GD measured)
Heading at 368px from section top (GD: Y=815 img)
Gap label→heading: 91px CSS (GD measured)
Gap heading→subtext: 48px CSS (GD measured)
═══════════════════════════════════════════════════════════════ -->
<section class="hero">
<div class="hero__inner">
<div class="hero__text">
<p class="label hero__label">The Obsidian Selection</p>
<h1 class="hero__title">Curated for<br>Collectors</h1>
<p class="hero__body">The definitive archive for Trading Card Games, miniatures, and board game rarities. Treated with the reverence of fine art.</p>
<div class="hero__ctas">
<a href="#" class="btn btn--green">Enter the Vault</a>
<a href="#" class="btn btn--outline">View Portfolio</a>
</div>
</div>
<div class="hero__visual">
<div class="hero__card-wrap">
<!-- Behind card -->
<div class="hero__card-shadow">
<img src="https://camcom.dev/wp-content/uploads/2026/04/trading-cards-pokemon-stack.jpg" alt="">
</div>
<!-- Main featured card -->
<div class="hero__card">
<img src="https://camcom.dev/wp-content/uploads/2026/04/trading-cards-mtg.jpg" alt="Featured card">
</div>
</div>
</div>
</div>
</section>
<!-- ═══════════════════════════════════════════════════════════════
EDITORIAL | h_css 669px | bg #28302A
Padding-top: 147px (GD measured)
═══════════════════════════════════════════════════════════════ -->
<section class="editorial">
<div class="editorial__inner">
<div class="editorial__text">
<p class="label editorial__label">Editorial Feature</p>
<h2 class="editorial__title">MTG Foundations: The Genesis of Modern Play</h2>
<p class="editorial__body">Unveiling the structural origins of competitive play. This curation explores the cards that defined a generation and the architectural shift in the game's evolving meta.</p>
<a href="#" class="link-arrow">Read the Full Archive →</a>
</div>
<div class="editorial__image">
<img src="https://camcom.dev/wp-content/uploads/2026/04/trading-cards-mtg-display.jpg" alt="MTG Foundations">
</div>
</div>
</section>
<!-- ═══════════════════════════════════════════════════════════════
ACQUISITIONS | h_css 838px | bg #101411
Padding-top: 185px (GD measured — first text Y=3558 img)
5-column product grid (confirmed by section crop)
═══════════════════════════════════════════════════════════════ -->
<section class="acquisitions">
<div class="acquisitions__header">
<div>
<p class="label">The Gallery</p>
<h2 class="acquisitions__title">Latest Acquisitions</h2>
</div>
<a href="#" class="link-sm">Browse All Items</a>
</div>
<div class="acquisitions__grid">
<div class="product-card">
<div class="product-card__img">
<span class="product-card__badge">Staff Pick</span>
<img src="https://camcom.dev/wp-content/uploads/2026/04/product-pokemon-etb.jpg" alt="">
</div>
<div class="product-card__info">
<p class="product-card__name">Pokémon Prismatic Evolutions ETB</p>
<p class="product-card__price">£54.99</p>
</div>
</div>
<div class="product-card">
<div class="product-card__img">
<img src="https://camcom.dev/wp-content/uploads/2026/04/trading-cards-mtg-display.jpg" alt="">
</div>
<div class="product-card__info">
<p class="product-card__name">MTG Foundations Collector Booster Box</p>
<p class="product-card__price">£189.99</p>
</div>
</div>
<div class="product-card">
<div class="product-card__img">
<img src="https://camcom.dev/wp-content/uploads/2026/04/trading-cards-playing.jpg" alt="">
</div>
<div class="product-card__info">
<p class="product-card__name">Lorcana Shimmering Skies Booster Box</p>
<p class="product-card__price">£109.99</p>
</div>
</div>
<div class="product-card">
<div class="product-card__img">
<img src="https://camcom.dev/wp-content/uploads/2026/04/gaming-handheld.jpg" alt="">
</div>
<div class="product-card__info">
<p class="product-card__name">One Piece Starter Deck</p>
<p class="product-card__price">£12.99</p>
</div>
</div>
<div class="product-card">
<div class="product-card__img">
<img src="https://camcom.dev/wp-content/uploads/2026/04/gaming-controller.jpg" alt="">
</div>
<div class="product-card__info">
<p class="product-card__name">Star Wars Unlimited Booster Box</p>
<p class="product-card__price">£99.99</p>
</div>
</div>
</div>
</section>
<!-- ═══════════════════════════════════════════════════════════════
CURATOR'S VAULT | h_css 1131px | bg #266038
Heading at 160px from section top (GD: Run 1 Y=5004 img)
3-column curator cards with image + quote + author
═══════════════════════════════════════════════════════════════ -->
<section class="vault">
<div class="vault__intro">
<h2 class="vault__title">The Curator's Vault</h2>
<p class="vault__subtitle">Personal recommendations from our head archivist.</p>
</div>
<div class="vault__grid">
<div class="vault-card">
<div class="vault-card__img">
<img src="https://camcom.dev/wp-content/uploads/2026/04/figurines-miniatures.jpg" alt="">
</div>
<div class="vault-card__body">
<p class="vault-card__quote">"The level of detail on this Warhammer limited run is unprecedented. It's not just a game piece; it's a sculptor's masterpiece."</p>
<div class="vault-card__author">
<div class="vault-card__avatar">
<img src="https://camcom.dev/wp-content/uploads/2026/04/figurines-dice-map.jpg" alt="">
</div>
<div>
<span class="vault-card__name">Marcus Thorne</span>
<span class="vault-card__role">Head Curator</span>
</div>
</div>
</div>
</div>
<div class="vault-card">
<div class="vault-card__img">
<img src="https://camcom.dev/wp-content/uploads/2026/04/board-game-setup.jpg" alt="">
</div>
<div class="vault-card__body">
<p class="vault-card__quote">"Spirit Island remains the gold standard of modern board gaming. A perfect marriage of theme and mechanics."</p>
<div class="vault-card__author">
<div class="vault-card__avatar">
<img src="https://camcom.dev/wp-content/uploads/2026/04/dice-polyhedral.jpg" alt="">
</div>
<div>
<span class="vault-card__name">Elena Voss</span>
<span class="vault-card__role">Miniature Specialist</span>
</div>
</div>
</div>
</div>
<div class="vault-card">
<div class="vault-card__img">
<img src="https://camcom.dev/wp-content/uploads/2026/04/trading-cards-pokemon-table.jpg" alt="">
</div>
<div class="vault-card__body">
<p class="vault-card__quote">"Finding a slabbed Charizard of this quality is becoming increasingly rare. A cornerstone for any serious portfolio."</p>
<div class="vault-card__author">
<div class="vault-card__avatar">
<img src="https://camcom.dev/wp-content/uploads/2026/04/trading-cards-mtg.jpg" alt="">
</div>
<div>
<span class="vault-card__name">Jordan Chen</span>
<span class="vault-card__role">TCG Analyst</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ═══════════════════════════════════════════════════════════════
EXPLORE THE ARCHIVE | h_css 1176px | bg #101411
3×2 category tile grid with dark image overlays
═══════════════════════════════════════════════════════════════ -->
<section class="explore">
<div class="container">
<h2 class="explore__heading">Explore the Archive</h2>
<div class="explore__rule"></div>
<div class="explore__grid">
<div class="category-tile">
<img src="https://camcom.dev/wp-content/uploads/2026/04/trading-cards-pokemon-stack.jpg" alt="">
<div class="category-tile__text">
<p class="category-tile__sub">Trading Card Game</p>
<p class="category-tile__name">Pokémon</p>
</div>
</div>
<div class="category-tile">
<img src="https://camcom.dev/wp-content/uploads/2026/04/trading-cards-mtg-display.jpg" alt="">
<div class="category-tile__text">
<p class="category-tile__sub">The Gathering</p>
<p class="category-tile__name">Magic</p>
</div>
</div>
<div class="category-tile">
<img src="https://camcom.dev/wp-content/uploads/2026/04/playing-cards.jpg" alt="">
<div class="category-tile__text">
<p class="category-tile__sub">Disney Legacy</p>
<p class="category-tile__name">Lorcana</p>
</div>
</div>
<div class="category-tile">
<img src="https://camcom.dev/wp-content/uploads/2026/04/board-game-setup.jpg" alt="">
<div class="category-tile__text">
<p class="category-tile__sub">Strategic Play</p>
<p class="category-tile__name">Board Games</p>
</div>
</div>
<div class="category-tile">
<img src="https://camcom.dev/wp-content/uploads/2026/04/figurines-miniatures.jpg" alt="">
<div class="category-tile__text">
<p class="category-tile__sub">Miniature Wargaming</p>
<p class="category-tile__name">Warhammer</p>
</div>
</div>
<div class="category-tile">
<img src="https://camcom.dev/wp-content/uploads/2026/04/figurines-dice-map.jpg" alt="">
<div class="category-tile__text">
<p class="category-tile__sub">Premium Protection</p>
<p class="category-tile__name">Accessories</p>
</div>
</div>
</div>
</div>
</section>
<!-- ═══════════════════════════════════════════════════════════════
EVENTS | h_css 647px | bg #F8F9F8
Heading at ~190px from section top (GD measured)
2-column event cards on white background
═══════════════════════════════════════════════════════════════ -->
<section class="events">
<div class="events__header">
<div class="events__header-left">
<p class="label label--green events__label">The Social Hub</p>
<h2 class="events__title">This week at the shop.</h2>
</div>
<a href="#" class="btn btn--dark">Full Calendar</a>
</div>
<div class="events__grid">
<div class="event-card">
<div class="event-card__date">
<span class="event-card__day">Fri</span>
<span class="event-card__num">15</span>
</div>
<div class="event-card__body">
<p class="event-card__name">Friday Night Magic</p>
<p class="event-card__detail">Standard / Draft • 6:30 PM</p>
<a href="#" class="event-card__link">Join Event ›</a>
</div>
</div>
<div class="event-card">
<div class="event-card__date">
<span class="event-card__day">Sat</span>
<span class="event-card__num">16</span>
</div>
<div class="event-card__body">
<p class="event-card__name">Pokémon League</p>
<p class="event-card__detail">Standard Open Play • 11:00 AM</p>
<a href="#" class="event-card__link">Join Event ›</a>
</div>
</div>
</div>
</section>
<!-- ═══════════════════════════════════════════════════════════════
INNER CIRCLE | h_css 444px | bg #25653C
First content at 129px from section top (GD measured)
═══════════════════════════════════════════════════════════════ -->
<section class="newsletter">
<div class="newsletter__inner">
<h2 class="newsletter__title">Join the Inner Circle</h2>
<p class="newsletter__sub">First access to rare restocks, exclusive pre-orders, and curator-led community events.</p>
<div class="newsletter__form">
<input class="newsletter__input" type="email" placeholder="Your collector email address">
<button class="btn btn--subscribe">Subscribe</button>
</div>
</div>
</section>
<!-- ═══════════════════════════════════════════════════════════════
FROM THE ARCHIVE | h_css 824px | bg #28302A
Heading at 163px from section top (GD measured)
═══════════════════════════════════════════════════════════════ -->
<section class="archive">
<div class="archive__header">
<h2 class="archive__title">From the Archive</h2>
<a href="#" class="link-sm">View Insights</a>
</div>
<div class="archive__grid">
<div class="article-card">
<div class="article-card__img">
<img src="https://camcom.dev/wp-content/uploads/2026/04/board-game-setup.jpg" alt="">
</div>
<p class="article-card__tag">Market Trends</p>
<h3 class="article-card__name">The Resurgence of Vintage 90s Games</h3>
<p class="article-card__excerpt">Analysing why 1990s board games are suddenly commanding premium curator prices.</p>
</div>
<div class="article-card">
<div class="article-card__img">
<img src="https://camcom.dev/wp-content/uploads/2026/04/trading-cards-pokemon-table.jpg" alt="">
</div>
<p class="article-card__tag">Care Guide</p>
<h3 class="article-card__name">Preserving Your Foil Assets</h3>
<p class="article-card__excerpt">Humidity control and the science of long-term archival storage for foil cards.</p>
</div>
<div class="article-card">
<div class="article-card__img">
<img src="https://camcom.dev/wp-content/uploads/2026/04/playing-cards.jpg" alt="">
</div>
<p class="article-card__tag">Deep Dive</p>
<h3 class="article-card__name">Beyond the Box: LCG vs TCG</h3>
<p class="article-card__excerpt">Understanding the economic differences between Living and Trading card games.</p>
</div>
</div>
</section>
<!-- ═══════════════════════════════════════════════════════════════
FOOTER | h_css 176px | bg #022C22
Single bar: NERDWORKS | nav links | copyright
═══════════════════════════════════════════════════════════════ -->
<footer class="footer">
<div class="footer__inner">
<span class="footer__logo">Nerdworks</span>
<nav class="footer__nav">
<a href="#">Provenance</a>
<a href="#">Shipping</a>
<a href="#">Terms of Curation</a>
<a href="#">Privacy</a>
</nav>
<span class="footer__copy">© 2024 Nerdworks Collector Archive. All rights reserved.</span>
</div>
</footer>
</body>
</html>