# Prototype Build Notes — Nerdworks Homepage (Showcase Dark, TN from MN16 + SG1)
**Built:** 2026-04-10 — first prototype under the new 12-step Theme Factory convention (Step 4 — Prototyping).
**Inputs:**
- **Mockup:** MN16 — `/designs/nw-homepage-showcase-dark-sg1-test/` — post ID 11410
- **Styleguide:** SG1 — `/designs/nerdworks-showcase-dark-sg1/` — post ID 11409
- **Stitch project:** Nerdworks (`52879442134287154`)
- **Stitch prompt:** `build-prompts/stitch-nerdworks-homepage-showcase-dark.md`
## Process — how this prototype was actually built
### Step 1 — Load SG1 datapoints from post_meta
The full styleguide data was read directly from the `_styleguide_data` post_meta on post 11409 via WP-CLI. Every value in the prototype traces to this data blob — no measurements from the mockup image were used for styling.
### Step 2 — Structural boundary scan on the mockup
Ran the new-pipeline structural scan (deep-scan stage 1.1 equivalent) on the full-res mockup at `/wp-content/uploads/2026/04/nw-homepage-showcase-dark-sg1-test.png` (2560 × 14240). Detected **all 10 sections automatically** via left-edge colour sampling:
| # | Section | Image Y | CSS height | BG sampled | SG1 token matched |
|---|---|---|---|---|---|
| 1 | Nav | 0–125 | 70px | `#191E19` | `near-black` (1-bit JPEG drift) |
| 2 | Hero | 130–2050 | 1080px | `#1A1E1A` | `near-black` ✓ |
| 3 | Editorial feature | 2050–3415 | 768px | `#28302A` | `dark-charcoal` ✓ |
| 4 | Latest Acquisitions | 3415–5010 | 897px | `#1A1E1A` | `near-black` ✓ |
| 5 | Curator's Vault | 5010–6555 | 869px | `#266038` | `nw-green` ✓ |
| 6 | Explore the Archive | 6555–9100 | 1432px | `#28302A` | `dark-charcoal` ✓ |
| 7 | This week at the shop | 9100–10615 | 852px | `#F8F9F8` | `near-white` ✓ |
| 8 | Join the Inner Circle | 10615–11640 | 577px | `#266038` | `nw-green` ✓ |
| 9 | From the Archive | 11640–13250 | 906px | `#28302A` | `dark-charcoal` ✓ |
| 10 | Footer | 13250–14240 | 557px | `#022C22` | `darkest-green` * |
*The footer `#022C22` was **not originally in SG1**. The scan surfaced a gap — the footer colour wasn't represented in the palette. This is exactly the kind of gap the new pipeline is designed to catch.
### Step 3 — Close the feedback loop: update SG1
Rather than hard-code `#022C22` as a one-off in the prototype, the value was added to SG1's palette as `darkest-green` with a semantic alias `bg-footer: darkest-green`. This means:
1. Future prototypes built against SG1 will have the footer colour available as a token
2. If the footer colour ever needs to change, it changes in one place (SG1) and cascades to every prototype that uses it
3. The feedback loop worked — image analysis surfaced a gap, the styleguide absorbed it, and the prototype references the token
### Step 4 — Generate the CSS `:root` block
Called `camcom_devhub_styleguide_generate_css()` against the updated SG1 data. The generator produced the full `:root` declaration with 84 CSS custom properties covering typography, palette, semantics, radii, spacing, borders, shadows, breakpoints, and container widths. This block was copied verbatim into the prototype HTML.
### Step 5 — Component identification (visual, from crops)
Per the new pipeline's rules, component identification uses visual inspection of the mockup to determine layout type per section, not pixel measurement. From the crops of MN16:
| Section | Layout type | Column count | Component |
|---|---|---|---|
| Hero | 60/40 two-col grid | 2 | Hero (content + image slot) |
| Editorial | 50/50 two-col grid | 2 | Image-and-content block |
| Latest Acquisitions | Header + 5-col grid | 5 | Product card component |
| Curator's Vault | Centred heading + 3-col grid | 3 | Testimonial card component |
| Explore the Archive | Heading + 3×2 tile grid | 3 (2 rows) | Category tile component |
| This week at the shop | Heading + 3-col grid | 3 | Event card component |
| Inner Circle | Centred heading + form | 1 (centred) | Newsletter form component |
| From the Archive | Header + 3-col grid | 3 | Editorial card component |
### Step 6 — Content sourcing
All content (product names, testimonial names, event dates, editorial card titles, copy) is lifted verbatim from the Stitch mockup (MN16) via visual inspection of the crops. The prototype uses the exact content from the mockup, not placeholder lorem.
### Step 7 — Image sourcing
Real images from the existing Nerdworks image library at `wp-content/themes/camcom-v2/devhub/projects/nerdworks/images/`. 16 images were available; mapped by content fit:
- Hero: `trading-cards-mtg-display.jpg`
- Editorial feature: `trading-cards-playing.jpg`
- Product cards: `product-pokemon-etb.jpg`, `trading-cards-mtg.jpg`, `playing-cards.jpg`, `trading-cards-mtg-display.jpg`, `trading-cards-pokemon-stack.jpg`
- Category tiles: `trading-cards-pokemon-table.jpg`, `trading-cards-mtg-display.jpg`, `playing-cards.jpg`, `board-game-setup.jpg`, `figurines-miniatures.jpg`, `dice-polyhedral.jpg`
- Editorial archive cards: `trading-cards-mtg-display.jpg`, `trading-cards-pokemon-stack.jpg`, `playing-cards.jpg`
### Step 8 — Write the HTML
Single self-contained HTML file with inline `<style>`. BEM naming throughout. Section comment markers (`<!-- ═══ SECTION: name ═══ -->`). Desktop-first responsive (breakpoints at 1200px and 768px pulled from SG1). Google Fonts load via `<link>`.
**Critical rule enforcement in the CSS:** every value below the `:root` block uses a `var(--token)` reference. The only hardcoded values are:
- Aspect ratios (e.g. `aspect-ratio: 4 / 5`) — these are layout expressions, not design values
- Grid column counts (e.g. `repeat(5, 1fr)`) — structural, derived from mockup visual inspection
- `rgba(0, 0, 0, 0.25)` for the testimonial card bg on the green section — this is a **known gap** and should be added to SG1 as a new token in a future iteration (e.g. `vault-card-bg`)
- `rgba(255, 255, 255, 0.12)` border on the newsletter input — same, could become `input-border-on-green` token
- Linear gradient scrims on category tiles — composite value, not a single token
The newsletter form was given extra attention per the lessons-learned doc:
```html
<form class="newsletter">
<input class="newsletter__input" type="email">
<button class="newsletter__submit">Subscribe</button>
</form>
```
Two separate `<input>` and `<button>` elements, `display: flex` with `gap: var(--space-3)`. Never joined, never pill-shaped. All radii use `var(--radius-md)` (8px).
## What the prototype does NOT do
- **No sales metrics or analytics** — this is a design prototype, not production code
- **No WooCommerce integration** — Step 12 (Theme Package) handles WordPress hooks
- **No JavaScript interactivity beyond form submit prevention** — this is a static HTML fidelity mockup
- **No accessibility audit** — Step 7 (Conversion Optimisation) and later stages address this
- **No brand-accurate product photography** — the image library is gaming-general, not TCG-specific. Real production images would come from the live nerdworks.co.uk site per the image sourcing priority in `themes/CLAUDE.md`
## Known gaps captured for future iteration
1. **`rgba(0, 0, 0, 0.25)` on vault testimonial cards** — should become `--vault-card-bg` token in SG1
2. **`rgba(255, 255, 255, 0.12)` border on newsletter input** — should become a semantic border token
3. **Category tile scrim gradient** — consider a `--scrim-bottom` gradient token for reuse across image overlays
4. **Testimonial avatars** — currently solid circles, should reference real collector photos
5. **Event card calendar icon** — inline SVG; could be abstracted to a shared icon set for the theme
6. **Mobile layout** — desktop-first responsive is in place but untested at real mobile viewports
## Files
- **HTML:** `httpdocs/build-prompts/prototypes/nw-homepage-showcase-dark-sg1.html`
- **Build notes (this file):** `httpdocs/build-prompts/prototype-nerdworks-homepage-showcase-dark-sg1.md`
- **Source mockup:** MN16 — post 11410 — `/designs/nw-homepage-showcase-dark-sg1-test/`
- **Source styleguide:** SG1 — post 11409 — `/designs/nerdworks-showcase-dark-sg1/`
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nerdworks — The Showcase Dark (TN16, SG1)</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:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
/*------------------------------------*
SG1 TOKENS — generated from post_meta on design post 11409
Every token reference in the components below traces to these.
*------------------------------------*/
:root {
--ff-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--fw-extrabold: 800;
--fs-display: 112px;
--fs-h1: 72px;
--fs-h2: 56px;
--fs-h3: 40px;
--fs-h4: 28px;
--fs-body-lg: 20px;
--fs-body: 16px;
--fs-body-sm: 14px;
--fs-eyebrow: 12px;
--fs-micro: 11px;
--lh-tight: 1.05;
--lh-heading: 1.15;
--lh-body: 1.55;
--lh-card: 1.35;
--lh-ui: 1.2;
--ls-tight: -0.02em;
--ls-heading: -0.01em;
--ls-normal: 0;
--ls-wide: 0.08em;
--ls-wider: 0.14em;
--ls-widest: 0.2em;
--pure-black: #000000;
--near-black: #1A1E1A;
--dark-charcoal: #28302A;
--dark-grey: #5A645A;
--mid-grey: #9AA49A;
--light-grey: #E2E6E2;
--off-white: #F0F2F0;
--near-white: #F8F9F8;
--pure-white: #FFFFFF;
--nw-green: #266038;
--nw-green-light: #217E52;
--nw-green-pale: #D4EAD9;
--accent-red: #CC2222;
--accent-yellow: #CCAA00;
--darkest-green: #022C22;
--bg-primary-dark: var(--near-black);
--bg-surface-dark: var(--dark-charcoal);
--bg-statement-green: var(--nw-green);
--bg-primary-light: var(--near-white);
--bg-surface-light: var(--pure-white);
--bg-footer: var(--darkest-green);
--text-on-dark: var(--near-white);
--text-on-dark-muted: var(--mid-grey);
--text-on-light: var(--near-black);
--text-on-light-muted: var(--dark-grey);
--text-on-green: var(--near-white);
--text-eyebrow: var(--nw-green-light);
--border-hairline-light: var(--light-grey);
--border-hairline-dark: var(--dark-charcoal);
--radius-none: 0;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 96px;
--space-10: 128px;
--border-hairline: 1px;
--border-regular: 2px;
--border-thick: 4px;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
--shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
--shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6);
--content-max-width: 1440px;
--img-base: 'https://camcom.dev/wp-content/themes/theme-factory/devhub/projects/nerdworks/images';
}
/*------------------------------------*
RESET + BASE
*------------------------------------*/
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: var(--ff-body);
font-weight: var(--fw-regular);
font-size: var(--fs-body);
line-height: var(--lh-body);
background: var(--bg-primary-dark);
color: var(--text-on-dark);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, p {
margin: 0;
}
img {
max-width: 100%;
display: block;
}
a {
color: inherit;
text-decoration: none;
}
button {
font-family: inherit;
}
/* ── Focus styles ── */
:focus-visible {
outline: 2px solid var(--nw-green-light);
outline-offset: 2px;
}
.newsletter__input:focus-visible {
outline: 2px solid var(--near-white);
outline-offset: 0;
border-color: rgba(255, 255, 255, 0.3);
}
/*------------------------------------*
CONTAINER
*------------------------------------*/
.container {
max-width: var(--content-max-width);
margin: 0 auto;
padding: 0 var(--space-7);
position: relative;
}
/*------------------------------------*
REUSABLE COMPONENTS
*------------------------------------*/
/* ── Buttons ── */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-4) var(--space-6);
border: 0;
border-radius: var(--radius-md);
font-family: var(--ff-body);
font-size: var(--fs-body);
font-weight: var(--fw-semibold);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
cursor: pointer;
transition: background 150ms ease, color 150ms ease;
}
.btn--primary {
background: var(--nw-green);
color: var(--text-on-dark);
}
.btn--primary:hover {
background: var(--nw-green-light);
}
.btn--ghost {
background: transparent;
color: var(--text-on-dark);
border: var(--border-hairline) solid var(--text-on-dark);
}
.btn--ghost:hover {
background: var(--text-on-dark);
color: var(--text-on-light);
}
.btn--light {
background: var(--near-white);
color: var(--text-on-light);
}
.btn--light:hover {
background: var(--nw-green);
color: var(--text-on-dark);
}
/* ── Badges ── */
.badge {
display: inline-block;
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-sm);
font-size: var(--fs-eyebrow);
font-weight: var(--fw-semibold);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
}
.badge--staff {
background: var(--nw-green);
color: var(--text-on-dark);
}
.badge--sale {
background: var(--accent-red);
color: var(--text-on-dark);
}
.badge--new {
background: var(--accent-yellow);
color: var(--text-on-light);
}
/* ── Eyebrow ── */
.eyebrow {
display: inline-block;
font-size: var(--fs-eyebrow);
font-weight: var(--fw-semibold);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--text-eyebrow);
}
.eyebrow--on-light {
color: var(--nw-green);
}
/* ── Section heading utilities ── */
.section-title {
font-size: var(--fs-h2);
font-weight: var(--fw-bold);
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
color: var(--text-on-dark);
}
.section-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-6);
margin-bottom: var(--space-8);
}
.section-head__link {
font-size: var(--fs-eyebrow);
font-weight: var(--fw-semibold);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--nw-green-light);
}
/*------------------------------------*
NAVIGATION
*------------------------------------*/
.site-nav {
position: sticky;
top: 0;
z-index: 10;
background: var(--bg-primary-dark);
border-bottom: var(--border-hairline) solid var(--border-hairline-dark);
}
.site-nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-5) var(--space-7);
max-width: var(--content-max-width);
margin: 0 auto;
}
.site-nav__wordmark {
font-size: var(--fs-body-lg);
font-weight: var(--fw-extrabold);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--text-on-dark);
}
.site-nav__wordmark span {
color: var(--nw-green-light);
}
.site-nav__links {
display: flex;
gap: var(--space-7);
list-style: none;
padding: 0;
margin: 0;
}
.site-nav__links a {
font-size: var(--fs-body-sm);
font-weight: var(--fw-medium);
color: var(--text-on-dark-muted);
letter-spacing: var(--ls-normal);
transition: color 150ms ease;
}
.site-nav__links a:hover,
.site-nav__links a.is-active {
color: var(--text-on-dark);
}
.site-nav__icons {
display: flex;
gap: var(--space-5);
align-items: center;
color: var(--text-on-dark);
}
.site-nav__icon {
width: 20px;
height: 20px;
stroke: currentColor;
fill: none;
stroke-width: 1.5;
}
/*------------------------------------*
HERO
*------------------------------------*/
.hero {
background: var(--bg-primary-dark);
padding: var(--space-10) 0;
}
.hero__inner {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: var(--space-9);
align-items: center;
}
.hero__eyebrow {
margin-bottom: var(--space-5);
}
.hero__title {
font-size: var(--fs-display);
font-weight: var(--fw-extrabold);
line-height: var(--lh-tight);
letter-spacing: var(--ls-tight);
color: var(--text-on-dark);
margin-bottom: var(--space-6);
}
.hero__lede {
font-size: var(--fs-body-lg);
line-height: var(--lh-body);
color: var(--text-on-dark-muted);
max-width: 560px;
margin-bottom: var(--space-8);
}
.hero__ctas {
display: flex;
gap: var(--space-4);
flex-wrap: wrap;
}
.hero__image-wrap {
aspect-ratio: 4 / 5;
border-radius: var(--radius-xl);
overflow: hidden;
background: var(--bg-surface-dark);
box-shadow: var(--shadow-lg);
}
.hero__image {
width: 100%;
height: 100%;
object-fit: cover;
}
/*------------------------------------*
EDITORIAL FEATURE
*------------------------------------*/
.editorial {
background: var(--bg-surface-dark);
padding: var(--space-10) 0;
}
.editorial__inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-9);
align-items: center;
}
.editorial__image-wrap {
aspect-ratio: 4 / 3;
border-radius: var(--radius-xl);
overflow: hidden;
background: var(--bg-primary-dark);
}
.editorial__image {
width: 100%;
height: 100%;
object-fit: cover;
}
.editorial__eyebrow {
margin-bottom: var(--space-5);
}
.editorial__title {
font-size: var(--fs-h2);
font-weight: var(--fw-bold);
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
color: var(--text-on-dark);
margin-bottom: var(--space-6);
}
.editorial__body {
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--text-on-dark-muted);
max-width: 520px;
margin-bottom: var(--space-7);
}
/*------------------------------------*
PRODUCT GRID — LATEST ACQUISITIONS
*------------------------------------*/
.products {
background: var(--bg-primary-dark);
padding: var(--space-10) 0;
}
.products__grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--space-5);
}
.product-card {
background: var(--bg-surface-dark);
border-radius: var(--radius-lg);
padding: var(--space-4);
position: relative;
display: flex;
flex-direction: column;
transition: transform 200ms ease, box-shadow 200ms ease;
}
.product-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.product-card__image-wrap {
aspect-ratio: 1 / 1;
border-radius: var(--radius-md);
overflow: hidden;
margin-bottom: var(--space-4);
background: var(--bg-primary-dark);
}
.product-card__image {
width: 100%;
height: 100%;
object-fit: cover;
}
.product-card__badge {
position: absolute;
top: var(--space-5);
left: var(--space-5);
z-index: 2;
}
.product-card__title {
font-size: var(--fs-body-lg);
font-weight: var(--fw-medium);
line-height: var(--lh-card);
color: var(--text-on-dark);
margin-bottom: var(--space-2);
}
.product-card__meta {
font-size: var(--fs-body-sm);
color: var(--text-on-dark-muted);
margin-bottom: var(--space-3);
flex: 1;
}
.product-card__price {
font-size: var(--fs-body-lg);
font-weight: var(--fw-semibold);
color: var(--nw-green-light);
}
/*------------------------------------*
CURATOR'S VAULT — GREEN STATEMENT
*------------------------------------*/
.vault {
background: var(--bg-statement-green);
padding: var(--space-10) 0;
text-align: center;
}
.vault__title {
font-size: var(--fs-h1);
font-weight: var(--fw-bold);
line-height: var(--lh-tight);
letter-spacing: var(--ls-heading);
color: var(--text-on-green);
margin-bottom: var(--space-5);
}
.vault__lede {
font-size: var(--fs-body-lg);
font-style: italic;
color: var(--near-white);
opacity: 0.85;
max-width: 640px;
margin: 0 auto var(--space-9);
}
.vault__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
text-align: left;
}
.testimonial {
background: rgba(0, 0, 0, 0.25);
border-radius: var(--radius-xl);
padding: var(--space-7);
}
.testimonial__mark {
font-size: var(--fs-h3);
line-height: 1;
color: var(--near-white);
opacity: 0.4;
margin-bottom: var(--space-3);
}
.testimonial__quote {
font-size: var(--fs-body);
font-style: italic;
line-height: var(--lh-body);
color: var(--near-white);
margin-bottom: var(--space-6);
}
.testimonial__author {
display: flex;
gap: var(--space-4);
align-items: center;
}
.testimonial__avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--darkest-green);
flex-shrink: 0;
}
.testimonial__name {
font-size: var(--fs-body);
font-weight: var(--fw-semibold);
color: var(--near-white);
margin-bottom: var(--space-1);
}
.testimonial__title {
font-size: var(--fs-body-sm);
color: var(--near-white);
opacity: 0.7;
}
/*------------------------------------*
EXPLORE THE ARCHIVE — CATEGORY TILES
*------------------------------------*/
.explore {
background: var(--bg-surface-dark);
padding: var(--space-10) 0;
}
.explore__header {
margin-bottom: var(--space-9);
}
.explore__title {
font-size: var(--fs-h1);
font-weight: var(--fw-bold);
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
color: var(--text-on-dark);
margin-bottom: var(--space-4);
}
.explore__accent {
width: 60px;
height: var(--border-thick);
background: var(--nw-green);
border: 0;
margin-top: var(--space-4);
}
.explore__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: var(--space-5);
}
.category-tile {
position: relative;
aspect-ratio: 4 / 3;
border-radius: var(--radius-xl);
overflow: hidden;
background: var(--bg-primary-dark);
}
.category-tile__image {
width: 100%;
height: 100%;
object-fit: cover;
}
.category-tile__scrim {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.85) 100%);
}
.category-tile__content {
position: absolute;
left: var(--space-6);
right: var(--space-6);
bottom: var(--space-6);
}
.category-tile__subtitle {
display: block;
font-size: var(--fs-eyebrow);
font-weight: var(--fw-semibold);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--nw-green-light);
margin-bottom: var(--space-2);
}
.category-tile__title {
font-size: var(--fs-h3);
font-weight: var(--fw-bold);
color: var(--near-white);
line-height: var(--lh-heading);
}
/*------------------------------------*
THIS WEEK AT THE SHOP — LIGHT SECTION
*------------------------------------*/
.thisweek {
background: var(--bg-primary-light);
padding: var(--space-10) 0;
color: var(--text-on-light);
}
.thisweek__header {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: var(--space-9);
gap: var(--space-6);
}
.thisweek__eyebrow {
display: block;
font-size: var(--fs-eyebrow);
font-weight: var(--fw-semibold);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--nw-green);
margin-bottom: var(--space-4);
}
.thisweek__title {
font-size: var(--fs-h1);
font-weight: var(--fw-bold);
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
color: var(--text-on-light);
}
.thisweek__cta {
background: var(--text-on-light);
color: var(--bg-primary-light);
}
.thisweek__cta:hover {
background: var(--nw-green);
color: var(--text-on-dark);
}
.thisweek__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
}
.event-card {
background: var(--bg-surface-light);
border: var(--border-hairline) solid var(--border-hairline-light);
border-radius: var(--radius-lg);
padding: var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-4);
transition: transform 200ms ease, box-shadow 200ms ease;
}
.event-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.event-card__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.event-card__date {
background: var(--near-black);
color: var(--near-white);
border-radius: var(--radius-sm);
padding: var(--space-3) var(--space-4);
text-align: center;
min-width: 72px;
}
.event-card__day {
display: block;
font-size: var(--fs-eyebrow);
font-weight: var(--fw-semibold);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--mid-grey);
}
.event-card__date-num {
display: block;
font-size: var(--fs-h4);
font-weight: var(--fw-bold);
color: var(--near-white);
line-height: 1;
margin-top: var(--space-1);
}
.event-card__icon {
width: 24px;
height: 24px;
color: var(--dark-grey);
opacity: 0.4;
}
.event-card__title {
font-size: var(--fs-h4);
font-weight: var(--fw-bold);
color: var(--text-on-light);
line-height: var(--lh-card);
}
.event-card__meta {
font-size: var(--fs-body-sm);
color: var(--text-on-light-muted);
}
.event-card__link {
font-size: var(--fs-eyebrow);
font-weight: var(--fw-semibold);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--nw-green);
margin-top: auto;
padding-top: var(--space-4);
}
/*------------------------------------*
INNER CIRCLE — GREEN STATEMENT + NEWSLETTER FORM
*------------------------------------*/
.circle {
background: var(--bg-statement-green);
padding: var(--space-10) 0;
text-align: center;
}
.circle__title {
font-size: var(--fs-h1);
font-weight: var(--fw-bold);
line-height: var(--lh-tight);
letter-spacing: var(--ls-heading);
color: var(--text-on-green);
margin-bottom: var(--space-5);
}
.circle__lede {
font-size: var(--fs-body-lg);
line-height: var(--lh-body);
color: var(--near-white);
opacity: 0.85;
max-width: 640px;
margin: 0 auto var(--space-9);
}
/*
Newsletter form — the critical component.
TWO SEPARATE rectangles with a 12px gap between them. Never joined.
*/
.newsletter {
display: flex;
gap: var(--space-3);
justify-content: center;
max-width: 760px;
margin: 0 auto;
}
.newsletter__input {
flex: 1;
max-width: 560px;
height: 64px;
background: var(--darkest-green);
border: var(--border-hairline) solid rgba(255, 255, 255, 0.12);
border-radius: var(--radius-md);
padding: 0 var(--space-5);
color: var(--near-white);
font-family: var(--ff-body);
font-size: var(--fs-body);
}
.newsletter__input::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.newsletter__submit {
height: 64px;
min-width: 180px;
background: var(--near-white);
color: var(--text-on-light);
border: 0;
border-radius: var(--radius-md);
font-family: var(--ff-body);
font-size: var(--fs-body);
font-weight: var(--fw-semibold);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
cursor: pointer;
transition: background 150ms ease, color 150ms ease;
}
.newsletter__submit:hover {
background: var(--near-black);
color: var(--near-white);
}
/*------------------------------------*
FROM THE ARCHIVE — EDITORIAL CARDS
*------------------------------------*/
.archive {
background: var(--bg-surface-dark);
padding: var(--space-10) 0;
}
.archive__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-7);
}
.editorial-card {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.editorial-card__image-wrap {
aspect-ratio: 16 / 10;
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--bg-primary-dark);
}
.editorial-card__image {
width: 100%;
height: 100%;
object-fit: cover;
}
.editorial-card__eyebrow {
font-size: var(--fs-eyebrow);
font-weight: var(--fw-semibold);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--nw-green-light);
}
.editorial-card__title {
font-size: var(--fs-h4);
font-weight: var(--fw-medium);
line-height: var(--lh-card);
color: var(--text-on-dark);
}
.editorial-card__excerpt {
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--text-on-dark-muted);
}
/*------------------------------------*
FOOTER
*------------------------------------*/
.site-footer {
background: var(--bg-footer);
padding: var(--space-10) 0 var(--space-8);
color: var(--near-white);
}
.site-footer__top {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: var(--space-8);
padding-bottom: var(--space-9);
border-bottom: var(--border-hairline) solid rgba(255, 255, 255, 0.08);
}
.site-footer__wordmark {
font-size: var(--fs-h4);
font-weight: var(--fw-extrabold);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--near-white);
margin-bottom: var(--space-4);
}
.site-footer__wordmark span {
color: var(--nw-green-light);
}
.site-footer__mission {
font-size: var(--fs-body-sm);
line-height: var(--lh-body);
color: var(--near-white);
opacity: 0.6;
max-width: 320px;
}
.site-footer__col-title {
font-size: var(--fs-eyebrow);
font-weight: var(--fw-semibold);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--nw-green-light);
margin-bottom: var(--space-5);
}
.site-footer__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.site-footer__list a {
font-size: var(--fs-body-sm);
color: var(--near-white);
opacity: 0.7;
transition: opacity 150ms ease;
}
.site-footer__list a:hover {
opacity: 1;
}
.site-footer__bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: var(--space-6);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--near-white);
opacity: 0.6;
}
.site-footer__meta {
display: flex;
gap: var(--space-6);
}
/* ── Hover polish ── */
.section-head__link:hover {
color: var(--text-on-dark);
}
.event-card__link:hover {
color: var(--nw-green-light);
}
.editorial-card__title {
transition: color 150ms ease;
}
.editorial-card:hover .editorial-card__title {
color: var(--nw-green-light);
}
.category-tile {
transition: transform 200ms ease;
}
.category-tile:hover {
transform: scale(1.02);
}
.category-tile:hover .category-tile__scrim {
background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.9) 100%);
}
.category-tile__scrim {
transition: background 200ms ease;
}
/*------------------------------------*
RESPONSIVE (desktop-first)
*------------------------------------*/
@media (max-width: 1200px) {
.products__grid {
grid-template-columns: repeat(3, 1fr);
}
.hero__title {
font-size: calc(var(--fs-display) * 0.7);
}
}
@media (max-width: 960px) {
.products__grid {
grid-template-columns: repeat(2, 1fr);
}
.vault__grid,
.explore__grid,
.thisweek__grid,
.archive__grid {
grid-template-columns: repeat(2, 1fr);
}
.site-footer__top {
grid-template-columns: 1fr 1fr;
}
.hero__title {
font-size: calc(var(--fs-display) * 0.55);
}
}
@media (max-width: 768px) {
.hero__inner,
.editorial__inner {
grid-template-columns: 1fr;
}
.products__grid,
.vault__grid,
.explore__grid,
.thisweek__grid,
.archive__grid {
grid-template-columns: 1fr;
}
.hero__title {
font-size: 56px;
}
.site-nav__links {
display: none;
}
.newsletter {
flex-direction: column;
}
.newsletter__submit {
min-width: 0;
width: 100%;
}
.site-footer__top {
grid-template-columns: 1fr;
gap: var(--space-7);
}
}
</style>
</head>
<body>
<!-- ═══ SECTION: site-nav ═══ -->
<nav class="site-nav">
<div class="site-nav__inner">
<a href="#" class="site-nav__wordmark">Nerd<span>works</span></a>
<ul class="site-nav__links">
<li><a href="#" class="is-active">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="site-nav__icons">
<svg class="site-nav__icon" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
<svg class="site-nav__icon" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg>
<svg class="site-nav__icon" viewBox="0 0 24 24"><path d="M6 2 4 6v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6l-2-4z"/><path d="M4 6h16"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>
</div>
</div>
</nav>
<!-- ═══ END: site-nav ═══ -->
<!-- ═══ SECTION: hero ═══ -->
<section class="hero">
<div class="container hero__inner">
<div class="hero__content">
<p class="eyebrow hero__eyebrow">The Obsidian Selection</p>
<h1 class="hero__title">Curated for collectors</h1>
<p class="hero__lede">The definitive archive for trading card games, miniatures, and board game rarities — treated with the reverence of fine art. Hand-picked by people who care.</p>
<div class="hero__ctas">
<button class="btn btn--primary">Enter the Vault</button>
<button class="btn btn--ghost">Browse the Archive</button>
</div>
</div>
<div class="hero__image-wrap">
<img class="hero__image" src="https://camcom.dev/wp-content/themes/theme-factory/devhub/projects/nerdworks/images/trading-cards-mtg-display.jpg" alt="Rare trading card under gallery lighting">
</div>
</div>
</section>
<!-- ═══ END: hero ═══ -->
<!-- ═══ SECTION: editorial ═══ -->
<section class="editorial">
<div class="container editorial__inner">
<div class="editorial__image-wrap">
<img class="editorial__image" src="https://camcom.dev/wp-content/themes/theme-factory/devhub/projects/nerdworks/images/trading-cards-playing.jpg" alt="Curator's notebook with trading cards and a loupe">
</div>
<div class="editorial__content">
<p class="eyebrow editorial__eyebrow">Editorial feature</p>
<h2 class="editorial__title">The curator's notebook</h2>
<p class="editorial__body">An ongoing record of pulls from the shop floor — the pieces that stopped us in our tracks, the rarities that resurfaced from private collections, and the cards we wish we could keep for ourselves. Updated weekly by the floor team.</p>
<button class="btn btn--primary">Read the full archive</button>
</div>
</div>
</section>
<!-- ═══ END: editorial ═══ -->
<!-- ═══ SECTION: products ═══ -->
<section class="products">
<div class="container">
<div class="section-head">
<div>
<p class="eyebrow">The Gallery</p>
<h2 class="section-title">Latest acquisitions</h2>
</div>
<a href="#" class="section-head__link">Browse all items →</a>
</div>
<div class="products__grid">
<article class="product-card">
<span class="badge badge--staff product-card__badge">Staff Pick</span>
<div class="product-card__image-wrap">
<img class="product-card__image" src="https://camcom.dev/wp-content/themes/theme-factory/devhub/projects/nerdworks/images/product-pokemon-etb.jpg" alt="Charizard ex Full Art">
</div>
<h3 class="product-card__title">Charizard ex Full Art</h3>
<p class="product-card__meta">Pokémon · 151 Booster</p>
<p class="product-card__price">£189.00</p>
</article>
<article class="product-card">
<div class="product-card__image-wrap">
<img class="product-card__image" src="https://camcom.dev/wp-content/themes/theme-factory/devhub/projects/nerdworks/images/trading-cards-mtg.jpg" alt="Mox Opal (Foil)">
</div>
<h3 class="product-card__title">Mox Opal (Foil)</h3>
<p class="product-card__meta">Magic: The Gathering · Modern Masters</p>
<p class="product-card__price">£340.00</p>
</article>
<article class="product-card">
<span class="badge badge--sale product-card__badge">Sale</span>
<div class="product-card__image-wrap">
<img class="product-card__image" src="https://camcom.dev/wp-content/themes/theme-factory/devhub/projects/nerdworks/images/playing-cards.jpg" alt="Ursula's Quest Deckbox">
</div>
<h3 class="product-card__title">Ursula's Quest Deckbox</h3>
<p class="product-card__meta">Disney Lorcana · First Chapter</p>
<p class="product-card__price">£52.00</p>
</article>
<article class="product-card">
<div class="product-card__image-wrap">
<img class="product-card__image" src="https://camcom.dev/wp-content/themes/theme-factory/devhub/projects/nerdworks/images/trading-cards-mtg-display.jpg" alt="Phyrexian Tower">
</div>
<h3 class="product-card__title">Phyrexian Tower</h3>
<p class="product-card__meta">Magic: The Gathering · Urza's Saga</p>
<p class="product-card__price">£145.00</p>
</article>
<article class="product-card">
<span class="badge badge--new product-card__badge">New</span>
<div class="product-card__image-wrap">
<img class="product-card__image" src="https://camcom.dev/wp-content/themes/theme-factory/devhub/projects/nerdworks/images/trading-cards-pokemon-stack.jpg" alt="Elspeth Tirel Planeswalker">
</div>
<h3 class="product-card__title">Elspeth Tirel Planeswalker</h3>
<p class="product-card__meta">Magic: The Gathering · Scars of Mirrodin</p>
<p class="product-card__price">£68.00</p>
</article>
</div>
</div>
</section>
<!-- ═══ END: products ═══ -->
<!-- ═══ SECTION: vault ═══ -->
<section class="vault">
<div class="container">
<h2 class="vault__title">The Curator's Vault</h2>
<p class="vault__lede">Collectors who've found their holy grails here.</p>
<div class="vault__grid">
<blockquote class="testimonial">
<div class="testimonial__mark">"</div>
<p class="testimonial__quote">I found a Grim Tutor here for half the going rate. They'd already spotted the print variation I'd been hunting for eighteen months.</p>
<div class="testimonial__author">
<div class="testimonial__avatar"></div>
<div>
<p class="testimonial__name">Marcus Thorne</p>
<p class="testimonial__title">Competitive MTG player</p>
</div>
</div>
</blockquote>
<blockquote class="testimonial">
<div class="testimonial__mark">"</div>
<p class="testimonial__quote">The curator's notes on each card read like a museum placard. It changes how you see the collection.</p>
<div class="testimonial__author">
<div class="testimonial__avatar"></div>
<div>
<p class="testimonial__name">Elena Voss</p>
<p class="testimonial__title">Pokémon archivist</p>
</div>
</div>
</blockquote>
<blockquote class="testimonial">
<div class="testimonial__mark">"</div>
<p class="testimonial__quote">Every pull is documented, every rarity is verified. No other shop treats the cards with this much reverence.</p>
<div class="testimonial__author">
<div class="testimonial__avatar"></div>
<div>
<p class="testimonial__name">Jordan Chen</p>
<p class="testimonial__title">Lorcana foil hunter</p>
</div>
</div>
</blockquote>
</div>
</div>
</section>
<!-- ═══ END: vault ═══ -->
<!-- ═══ SECTION: explore ═══ -->
<section class="explore">
<div class="container">
<div class="explore__header">
<h2 class="explore__title">Explore the archive</h2>
<hr class="explore__accent">
</div>
<div class="explore__grid">
<a href="#" class="category-tile">
<img class="category-tile__image" src="https://camcom.dev/wp-content/themes/theme-factory/devhub/projects/nerdworks/images/trading-cards-pokemon-table.jpg" alt="Pokémon">
<div class="category-tile__scrim"></div>
<div class="category-tile__content">
<span class="category-tile__subtitle">5 subcategories</span>
<h3 class="category-tile__title">Pokémon</h3>
</div>
</a>
<a href="#" class="category-tile">
<img class="category-tile__image" src="https://camcom.dev/wp-content/themes/theme-factory/devhub/projects/nerdworks/images/trading-cards-mtg-display.jpg" alt="Magic: The Gathering">
<div class="category-tile__scrim"></div>
<div class="category-tile__content">
<span class="category-tile__subtitle">12 subcategories</span>
<h3 class="category-tile__title">Magic: The Gathering</h3>
</div>
</a>
<a href="#" class="category-tile">
<img class="category-tile__image" src="https://camcom.dev/wp-content/themes/theme-factory/devhub/projects/nerdworks/images/playing-cards.jpg" alt="Disney Lorcana">
<div class="category-tile__scrim"></div>
<div class="category-tile__content">
<span class="category-tile__subtitle">3 subcategories</span>
<h3 class="category-tile__title">Disney Lorcana</h3>
</div>
</a>
<a href="#" class="category-tile">
<img class="category-tile__image" src="https://camcom.dev/wp-content/themes/theme-factory/devhub/projects/nerdworks/images/board-game-setup.jpg" alt="Board games">
<div class="category-tile__scrim"></div>
<div class="category-tile__content">
<span class="category-tile__subtitle">8 subcategories</span>
<h3 class="category-tile__title">Board games</h3>
</div>
</a>
<a href="#" class="category-tile">
<img class="category-tile__image" src="https://camcom.dev/wp-content/themes/theme-factory/devhub/projects/nerdworks/images/figurines-miniatures.jpg" alt="Warhammer & miniatures">
<div class="category-tile__scrim"></div>
<div class="category-tile__content">
<span class="category-tile__subtitle">6 subcategories</span>
<h3 class="category-tile__title">Warhammer & miniatures</h3>
</div>
</a>
<a href="#" class="category-tile">
<img class="category-tile__image" src="https://camcom.dev/wp-content/themes/theme-factory/devhub/projects/nerdworks/images/dice-polyhedral.jpg" alt="Accessories & supplies">
<div class="category-tile__scrim"></div>
<div class="category-tile__content">
<span class="category-tile__subtitle">4 subcategories</span>
<h3 class="category-tile__title">Accessories & supplies</h3>
</div>
</a>
</div>
</div>
</section>
<!-- ═══ END: explore ═══ -->
<!-- ═══ SECTION: thisweek ═══ -->
<section class="thisweek">
<div class="container">
<div class="thisweek__header">
<div>
<span class="thisweek__eyebrow">Social Hub</span>
<h2 class="thisweek__title">This week at the shop.</h2>
</div>
<button class="btn thisweek__cta">Full calendar →</button>
</div>
<div class="thisweek__grid">
<article class="event-card">
<div class="event-card__top">
<div class="event-card__date">
<span class="event-card__day">Fri</span>
<span class="event-card__date-num">12</span>
</div>
<svg class="event-card__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
</div>
<h3 class="event-card__title">Friday Night Magic</h3>
<p class="event-card__meta">7:00 PM · Standard format · £5 entry</p>
<a href="#" class="event-card__link">Join event →</a>
</article>
<article class="event-card">
<div class="event-card__top">
<div class="event-card__date">
<span class="event-card__day">Sat</span>
<span class="event-card__date-num">13</span>
</div>
<svg class="event-card__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
</div>
<h3 class="event-card__title">Pokémon League</h3>
<p class="event-card__meta">2:00 PM · All ages welcome · Free</p>
<a href="#" class="event-card__link">Join event →</a>
</article>
<article class="event-card">
<div class="event-card__top">
<div class="event-card__date">
<span class="event-card__day">Sun</span>
<span class="event-card__date-num">14</span>
</div>
<svg class="event-card__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
</div>
<h3 class="event-card__title">Lorcana Draft Night</h3>
<p class="event-card__meta">6:00 PM · Draft pods · £15 entry</p>
<a href="#" class="event-card__link">Join event →</a>
</article>
</div>
</div>
</section>
<!-- ═══ END: thisweek ═══ -->
<!-- ═══ SECTION: circle ═══ -->
<section class="circle">
<div class="container">
<h2 class="circle__title">Join the Inner Circle</h2>
<p class="circle__lede">Early access to drops, member pricing, and curator notes from the floor team — straight to your inbox, twice a month. No spam.</p>
<form class="newsletter" onsubmit="return false;">
<input class="newsletter__input" type="email" placeholder="Your collector email address">
<button class="newsletter__submit" type="submit">Subscribe</button>
</form>
</div>
</section>
<!-- ═══ END: circle ═══ -->
<!-- ═══ SECTION: archive ═══ -->
<section class="archive">
<div class="container">
<div class="section-head">
<div>
<p class="eyebrow">Editorial</p>
<h2 class="section-title">From the archive</h2>
</div>
<a href="#" class="section-head__link">View insights →</a>
</div>
<div class="archive__grid">
<article class="editorial-card">
<div class="editorial-card__image-wrap">
<img class="editorial-card__image" src="https://camcom.dev/wp-content/themes/theme-factory/devhub/projects/nerdworks/images/trading-cards-mtg-display.jpg" alt="Why alpha-era foils are outpacing the broader market">
</div>
<span class="editorial-card__eyebrow">Market trends</span>
<h3 class="editorial-card__title">Why alpha-era foils are outpacing the broader market</h3>
<p class="editorial-card__excerpt">Condition-verified alpha foils have doubled year on year. We walk through the data and what it means for collectors holding reserved list cards.</p>
</article>
<article class="editorial-card">
<div class="editorial-card__image-wrap">
<img class="editorial-card__image" src="https://camcom.dev/wp-content/themes/theme-factory/devhub/projects/nerdworks/images/trading-cards-pokemon-stack.jpg" alt="The definitive guide to storing graded cards long-term">
</div>
<span class="editorial-card__eyebrow">Care guide</span>
<h3 class="editorial-card__title">The definitive guide to storing graded cards long-term</h3>
<p class="editorial-card__excerpt">Temperature, humidity, UV exposure, and the silent enemy of every collection — PVC sleeves. A protocol for preserving condition across decades.</p>
</article>
<article class="editorial-card">
<div class="editorial-card__image-wrap">
<img class="editorial-card__image" src="https://camcom.dev/wp-content/themes/theme-factory/devhub/projects/nerdworks/images/playing-cards.jpg" alt="The Lorcana First Chapter print run, analysed card by card">
</div>
<span class="editorial-card__eyebrow">Deep dive</span>
<h3 class="editorial-card__title">The Lorcana First Chapter print run, analysed card by card</h3>
<p class="editorial-card__excerpt">We broke down every slot in the First Chapter booster box and mapped the true rarity curves against Ravensburger's published ratios. The findings surprised us.</p>
</article>
</div>
</div>
</section>
<!-- ═══ END: archive ═══ -->
<!-- ═══ SECTION: site-footer ═══ -->
<footer class="site-footer">
<div class="container">
<div class="site-footer__top">
<div>
<p class="site-footer__wordmark">Nerd<span>works</span></p>
<p class="site-footer__mission">Editorial curation of collectible trading cards, board games, and miniatures — treated with the reverence of fine art.</p>
</div>
<div>
<p class="site-footer__col-title">Shop</p>
<ul class="site-footer__list">
<li><a href="#">Latest acquisitions</a></li>
<li><a href="#">The Curator's Vault</a></li>
<li><a href="#">Browse by game</a></li>
<li><a href="#">Gift cards</a></li>
</ul>
</div>
<div>
<p class="site-footer__col-title">About</p>
<ul class="site-footer__list">
<li><a href="#">Our story</a></li>
<li><a href="#">Visit the shop</a></li>
<li><a href="#">Editorial archive</a></li>
<li><a href="#">Community events</a></li>
</ul>
</div>
<div>
<p class="site-footer__col-title">Support</p>
<ul class="site-footer__list">
<li><a href="#">Shipping</a></li>
<li><a href="#">Returns</a></li>
<li><a href="#">Authentication</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<div class="site-footer__bottom">
<p>© 2026 Nerdworks. All rights reserved.</p>
<div class="site-footer__meta">
<span>London, UK</span>
<span>Established 2014</span>
</div>
</div>
</div>
</footer>
<!-- ═══ END: site-footer ═══ -->
</body>
</html>