<!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 (Updated Palette, SNW1 v2)</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>
/*------------------------------------*
SNW1 TOKENS — updated palette (11 semantic roles, 8 distinct hex values)
post_meta on design post 11409 — updated 2026-04-16
primary: #266038 · secondary: #217E52 · tertiary: #414941
dark: #0A0A0A · light: #FFFFFF · text: #e5e2e1 · neutral: #c0c9be · negative: #CC2222
*------------------------------------*/
:root {
--ff-body: 'Proxima Nova', '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;
--near-black: #0A0A0A;
--dark-charcoal: #1A1E1A;
--dark-grey: #c0c9be;
--mid-grey: #c0c9be;
--light-grey: #c0c9be;
--off-white: #FFFFFF;
--near-white: #FFFFFF;
--pure-white: #FFFFFF;
--nw-green: #266038;
--nw-green-light: #217E52;
--nw-green-pale: #217E52;
--accent-red: #CC2222;
--accent-yellow: #217E52;
--darkest-green: #0A0A0A;
--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(--near-black);
--text-on-dark: #e5e2e1;
--text-on-dark-muted: var(--mid-grey);
--text-on-light: var(--near-black);
--text-on-light-muted: var(--mid-grey);
--text-on-green: #FFFFFF;
--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(--nw-green-light);
color: var(--near-black);
}
/* ── 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>