<!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 (Frontend Design Skill)</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&display=swap" rel="stylesheet">
<style>
/*------------------------------------*
SG1 TOKENS
Every value traces to styleguide post 11409.
*------------------------------------*/
: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;
}
/*------------------------------------*
RESET + BASE
*------------------------------------*/
*, *::before, *::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
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;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6, p, blockquote {
margin: 0;
}
img {
max-width: 100%;
display: block;
}
a {
color: inherit;
text-decoration: none;
}
button, input {
font-family: inherit;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
/*------------------------------------*
FOCUS
*------------------------------------*/
:focus-visible {
outline: 2px solid var(--nw-green-light);
outline-offset: 2px;
}
/*------------------------------------*
CONTAINER
*------------------------------------*/
.container {
max-width: var(--content-max-width);
margin: 0 auto;
padding: 0 var(--space-7);
position: relative;
}
/*------------------------------------*
REVEAL ANIMATIONS
*------------------------------------*/
.reveal {
opacity: 0;
transform: translateY(32px);
transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
.reveal-stagger > .reveal {
transition-delay: calc(var(--stagger, 0) * 100ms);
}
/*------------------------------------*
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: all 250ms cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
overflow: hidden;
}
.btn::after {
content: '';
position: absolute;
inset: 0;
background: var(--near-white);
opacity: 0;
transition: opacity 250ms ease;
}
.btn:hover::after {
opacity: 0.08;
}
.btn:active {
transform: scale(0.97);
}
.btn--primary {
background: var(--nw-green);
color: var(--text-on-dark);
}
.btn--primary:hover {
background: var(--nw-green-light);
box-shadow: 0 8px 24px rgba(38, 96, 56, 0.4);
}
.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);
box-shadow: 0 8px 24px rgba(38, 96, 56, 0.3);
}
.btn--dark {
background: var(--near-black);
color: var(--near-white);
}
.btn--dark: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 UTILITIES
*------------------------------------*/
.section-title {
font-size: var(--fs-h2);
font-weight: var(--fw-bold);
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
}
.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);
transition: color 200ms ease;
white-space: nowrap;
}
.section-head__link:hover {
color: var(--text-on-dark);
}
/*------------------------------------*
NAVIGATION
*------------------------------------*/
.site-nav {
position: sticky;
top: 0;
z-index: 100;
background: rgba(26, 30, 26, 0.92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: var(--border-hairline) solid var(--border-hairline-dark);
transition: background 300ms ease;
}
.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);
transition: opacity 200ms ease;
}
.site-nav__wordmark:hover {
opacity: 0.8;
}
.site-nav__wordmark span {
color: var(--nw-green-light);
}
.site-nav__links {
display: flex;
gap: var(--space-7);
}
.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 200ms ease;
position: relative;
}
.site-nav__links a::after {
content: '';
position: absolute;
bottom: -6px;
left: 0;
width: 0;
height: var(--border-regular);
background: var(--nw-green-light);
transition: width 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.site-nav__links a:hover,
.site-nav__links a.is-active {
color: var(--text-on-dark);
}
.site-nav__links a:hover::after,
.site-nav__links a.is-active::after {
width: 100%;
}
.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;
cursor: pointer;
transition: color 200ms ease, transform 200ms ease;
}
.site-nav__icon:hover {
color: var(--nw-green-light);
transform: scale(1.1);
}
/*------------------------------------*
HERO
*------------------------------------*/
.hero {
background: var(--bg-primary-dark);
padding: var(--space-10) 0 var(--space-9);
overflow: hidden;
}
.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__title-accent {
display: inline;
background-image: linear-gradient(transparent 65%, var(--nw-green) 65%);
background-size: 0% 100%;
background-repeat: no-repeat;
transition: background-size 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s;
}
.hero.is-visible .hero__title-accent {
background-size: 100% 100%;
}
.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-xl);
position: relative;
}
.hero__image-wrap::after {
content: '';
position: absolute;
inset: 0;
border-radius: var(--radius-xl);
border: var(--border-hairline) solid rgba(255, 255, 255, 0.06);
pointer-events: none;
}
.hero__image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 6s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero.is-visible .hero__image {
transform: scale(1.04);
}
/*------------------------------------*
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);
position: relative;
}
.editorial__image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.editorial__image-wrap:hover .editorial__image {
transform: scale(1.05);
}
.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
*------------------------------------*/
.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 350ms cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 350ms cubic-bezier(0.16, 1, 0.3, 1);
}
.product-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
}
.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;
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.product-card:hover .product-card__image {
transform: scale(1.08);
}
.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);
transition: color 200ms ease;
}
.product-card:hover .product-card__price {
color: var(--near-white);
}
/*------------------------------------*
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);
transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1),
background 300ms ease;
}
.testimonial:hover {
transform: translateY(-4px);
background: rgba(0, 0, 0, 0.35);
}
.testimonial__mark {
font-size: 64px;
line-height: 1;
color: var(--near-white);
opacity: 0.2;
margin-bottom: var(--space-3);
font-style: italic;
}
.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;
border: var(--border-regular) solid rgba(255, 255, 255, 0.1);
}
.testimonial__name {
font-size: var(--fs-body);
font-weight: var(--fw-semibold);
color: var(--near-white);
margin-bottom: var(--space-1);
}
.testimonial__role {
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);
transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.explore.is-visible .explore__accent {
width: 120px;
}
.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;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.category-tile:hover .category-tile__image {
transform: scale(1.08);
}
.category-tile__scrim {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.85) 100%);
transition: background 300ms ease;
}
.category-tile:hover .category-tile__scrim {
background: linear-gradient(180deg, rgba(0,0,0,0) 25%, rgba(0,0,0,0.9) 100%);
}
.category-tile__content {
position: absolute;
left: var(--space-6);
right: var(--space-6);
bottom: var(--space-6);
transform: translateY(0);
transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.category-tile:hover .category-tile__content {
transform: translateY(-4px);
}
.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 — 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__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 350ms cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 350ms cubic-bezier(0.16, 1, 0.3, 1),
border-color 350ms ease;
}
.event-card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
border-color: var(--nw-green-light);
}
.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);
transition: color 200ms ease, letter-spacing 300ms ease;
}
.event-card__link:hover {
color: var(--nw-green-light);
letter-spacing: var(--ls-wider);
}
/*------------------------------------*
INNER CIRCLE — NEWSLETTER
*------------------------------------*/
.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 {
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);
transition: border-color 300ms ease, box-shadow 300ms ease;
}
.newsletter__input::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.newsletter__input:focus {
outline: none;
border-color: rgba(255, 255, 255, 0.35);
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08);
}
.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: all 250ms cubic-bezier(0.16, 1, 0.3, 1);
}
.newsletter__submit:hover {
background: var(--near-black);
color: var(--near-white);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
/*------------------------------------*
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);
cursor: pointer;
}
.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;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.editorial-card:hover .editorial-card__image {
transform: scale(1.06);
}
.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);
transition: color 200ms ease;
}
.editorial-card:hover .editorial-card__title {
color: var(--nw-green-light);
}
.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 {
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 200ms ease, padding-left 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.site-footer__list a:hover {
opacity: 1;
padding-left: var(--space-2);
}
.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);
}
/*------------------------------------*
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);
}
.thisweek__header {
flex-direction: column;
align-items: flex-start;
}
.section-head {
flex-direction: column;
align-items: flex-start;
gap: var(--space-4);
}
}
</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>
<!-- ═══ SECTION: hero ═══ -->
<section class="hero reveal">
<div class="container hero__inner">
<div class="hero__content">
<p class="eyebrow hero__eyebrow">The Obsidian Selection</p>
<h1 class="hero__title">Curated for <span class="hero__title-accent">collectors</span></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/camcom-v2/devhub/projects/nerdworks/images/trading-cards-mtg-display.jpg" alt="Rare trading card under gallery lighting">
</div>
</div>
</section>
<!-- ═══ SECTION: editorial ═══ -->
<section class="editorial">
<div class="container editorial__inner">
<div class="editorial__image-wrap reveal">
<img class="editorial__image" src="https://camcom.dev/wp-content/themes/camcom-v2/devhub/projects/nerdworks/images/trading-cards-playing.jpg" alt="Curator's notebook with trading cards and a loupe">
</div>
<div class="editorial__content reveal">
<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>
<!-- ═══ SECTION: products ═══ -->
<section class="products">
<div class="container">
<div class="section-head reveal">
<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 reveal-stagger">
<article class="product-card reveal" style="--stagger: 0">
<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/camcom-v2/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 reveal" style="--stagger: 1">
<div class="product-card__image-wrap">
<img class="product-card__image" src="https://camcom.dev/wp-content/themes/camcom-v2/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 reveal" style="--stagger: 2">
<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/camcom-v2/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 reveal" style="--stagger: 3">
<div class="product-card__image-wrap">
<img class="product-card__image" src="https://camcom.dev/wp-content/themes/camcom-v2/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 reveal" style="--stagger: 4">
<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/camcom-v2/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>
<!-- ═══ SECTION: vault ═══ -->
<section class="vault">
<div class="container">
<h2 class="vault__title reveal">The Curator's Vault</h2>
<p class="vault__lede reveal">Collectors who've found their holy grails here.</p>
<div class="vault__grid reveal-stagger">
<blockquote class="testimonial reveal" style="--stagger: 0">
<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__role">Competitive MTG player</p>
</div>
</div>
</blockquote>
<blockquote class="testimonial reveal" style="--stagger: 1">
<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__role">Pokémon archivist</p>
</div>
</div>
</blockquote>
<blockquote class="testimonial reveal" style="--stagger: 2">
<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__role">Lorcana foil hunter</p>
</div>
</div>
</blockquote>
</div>
</div>
</section>
<!-- ═══ SECTION: explore ═══ -->
<section class="explore">
<div class="container">
<div class="explore__header reveal">
<h2 class="explore__title">Explore the archive</h2>
<hr class="explore__accent">
</div>
<div class="explore__grid reveal-stagger">
<a href="#" class="category-tile reveal" style="--stagger: 0">
<img class="category-tile__image" src="https://camcom.dev/wp-content/themes/camcom-v2/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 reveal" style="--stagger: 1">
<img class="category-tile__image" src="https://camcom.dev/wp-content/themes/camcom-v2/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 reveal" style="--stagger: 2">
<img class="category-tile__image" src="https://camcom.dev/wp-content/themes/camcom-v2/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 reveal" style="--stagger: 3">
<img class="category-tile__image" src="https://camcom.dev/wp-content/themes/camcom-v2/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 reveal" style="--stagger: 4">
<img class="category-tile__image" src="https://camcom.dev/wp-content/themes/camcom-v2/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 reveal" style="--stagger: 5">
<img class="category-tile__image" src="https://camcom.dev/wp-content/themes/camcom-v2/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>
<!-- ═══ SECTION: thisweek ═══ -->
<section class="thisweek">
<div class="container">
<div class="thisweek__header reveal">
<div>
<span class="thisweek__eyebrow">Social Hub</span>
<h2 class="thisweek__title">This week at the shop.</h2>
</div>
<button class="btn btn--dark">Full calendar →</button>
</div>
<div class="thisweek__grid reveal-stagger">
<article class="event-card reveal" style="--stagger: 0">
<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 reveal" style="--stagger: 1">
<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 reveal" style="--stagger: 2">
<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>
<!-- ═══ SECTION: circle ═══ -->
<section class="circle">
<div class="container">
<h2 class="circle__title reveal">Join the Inner Circle</h2>
<p class="circle__lede reveal">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 reveal" 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>
<!-- ═══ SECTION: archive ═══ -->
<section class="archive">
<div class="container">
<div class="section-head reveal">
<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 reveal-stagger">
<article class="editorial-card reveal" style="--stagger: 0">
<div class="editorial-card__image-wrap">
<img class="editorial-card__image" src="https://camcom.dev/wp-content/themes/camcom-v2/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 reveal" style="--stagger: 1">
<div class="editorial-card__image-wrap">
<img class="editorial-card__image" src="https://camcom.dev/wp-content/themes/camcom-v2/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 reveal" style="--stagger: 2">
<div class="editorial-card__image-wrap">
<img class="editorial-card__image" src="https://camcom.dev/wp-content/themes/camcom-v2/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>
<!-- ═══ 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>
<!-- ═══ SCROLL REVEAL (jQuery) ═══ -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
(function( $ ) {
'use strict';
var observer = new IntersectionObserver( function( entries ) {
$.each( entries, function( i, entry ) {
if ( entry.isIntersecting ) {
$( entry.target ).addClass( 'is-visible' );
observer.unobserve( entry.target );
}
} );
}, {
threshold: 0.12,
rootMargin: '0px 0px -40px 0px'
} );
$( '.reveal' ).each( function() {
observer.observe( this );
} );
/* ── Nav scroll awareness ── */
var $nav = $( '.site-nav' );
var lastScroll = 0;
$( window ).on( 'scroll', function() {
var scrollTop = $( this ).scrollTop();
if ( scrollTop > 100 ) {
$nav.css( 'background', 'rgba(26, 30, 26, 0.97)' );
} else {
$nav.css( 'background', 'rgba(26, 30, 26, 0.92)' );
}
lastScroll = scrollTop;
} );
}( jQuery ));
</script>
</body>
</html>