<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>NERDWORKS | Elite Gaming & Tabletop Hardware</title>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&display=swap" rel="stylesheet" />
<style>
/* ═══════════════════════════════════════════════
DESIGN TOKENS — SG1 Nerdworks Showcase Dark
═══════════════════════════════════════════════ */
: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);
--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;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
-webkit-font-smoothing: antialiased;
}
body {
font-family: var(--ff-body);
background-color: var(--bg-primary-dark);
color: var(--text-on-dark);
line-height: var(--lh-body);
}
img {
display: block;
max-width: 100%;
}
a {
color: inherit;
text-decoration: none;
}
button,
input {
font-family: var(--ff-body);
}
button {
cursor: pointer;
border: none;
background: none;
}
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
vertical-align: middle;
line-height: 1;
}
/* ═══════════════════════════════════════════════
LAYOUT
═══════════════════════════════════════════════ */
.container {
max-width: var(--content-max-width);
margin-inline: auto;
padding-inline: var(--space-8);
}
.section-pad {
padding-block: var(--space-9);
}
/* ═══════════════════════════════════════════════
BUTTONS
═══════════════════════════════════════════════ */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-weight: var(--fw-bold);
font-size: var(--fs-body-sm);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
padding: var(--space-4) var(--space-7);
border-radius: var(--radius-md);
transition: all 0.15s;
cursor: pointer;
}
.btn--primary {
background-color: var(--nw-green);
color: var(--text-on-green);
border: var(--border-hairline) solid var(--nw-green);
box-shadow: 0 0 15px rgba(38,96,56,0.4);
}
.btn--primary:hover {
filter: brightness(1.1);
transform: scale(0.97);
}
.btn--ghost {
background-color: transparent;
color: var(--nw-green-light);
border: var(--border-hairline) solid rgba(38,96,56,0.4);
}
.btn--ghost:hover {
background-color: rgba(38,96,56,0.06);
}
.btn--white {
background-color: var(--pure-white);
color: var(--nw-green);
font-weight: var(--fw-extrabold);
border-radius: var(--radius-md);
}
.btn--white:hover {
transform: scale(0.97);
}
/* ═══════════════════════════════════════════════
SITE HEADER
═══════════════════════════════════════════════ */
.site-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 50;
background-color: rgba(26,30,26,0.9);
backdrop-filter: blur(20px);
border-bottom: var(--border-hairline) solid rgba(38,96,56,0.2);
box-shadow: 0 0 20px rgba(38,96,56,0.12);
}
.site-header__inner {
max-width: 1920px;
margin-inline: auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-4) var(--space-5);
}
.site-header__logo {
font-size: var(--fs-h4);
font-weight: var(--fw-extrabold);
letter-spacing: var(--ls-tight);
text-transform: uppercase;
color: var(--text-on-dark);
}
.site-header__nav {
display: flex;
align-items: center;
gap: var(--space-8);
}
.site-header__nav a {
font-size: var(--fs-body-sm);
font-weight: var(--fw-bold);
text-transform: uppercase;
letter-spacing: var(--ls-wide);
color: rgba(248,249,248,0.7);
transition: color 0.2s;
}
.site-header__nav a:hover,
.site-header__nav a.is-active {
color: var(--nw-green);
}
.site-header__nav a.is-active {
border-bottom: var(--border-regular) solid var(--nw-green);
padding-bottom: 2px;
}
.site-header__actions {
display: flex;
align-items: center;
gap: var(--space-5);
}
.site-header__actions button {
color: rgba(248,249,248,0.7);
transition: color 0.2s;
}
.site-header__actions button:hover {
color: var(--nw-green-light);
}
/* ═══════════════════════════════════════════════
S1: HERO
═══════════════════════════════════════════════ */
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
padding-top: 80px;
padding-inline: var(--space-8);
overflow: hidden;
}
.hero__bg {
position: absolute;
inset: 0;
z-index: 0;
}
.hero__bg img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.4;
}
.hero__bg-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, var(--bg-primary-dark) 0%, rgba(26,30,26,0.6) 50%, transparent 100%);
}
.hero__content {
position: relative;
z-index: 1;
max-width: 900px;
}
.hero__badge {
display: inline-flex;
align-items: center;
padding: var(--space-1) var(--space-3);
margin-bottom: var(--space-5);
border: var(--border-hairline) solid rgba(38,96,56,0.3);
background-color: rgba(38,96,56,0.1);
border-radius: var(--radius-sm);
}
.hero__badge-text {
font-size: var(--fs-micro);
font-weight: var(--fw-bold);
text-transform: uppercase;
letter-spacing: var(--ls-widest);
color: var(--nw-green-light);
}
.hero__headline {
font-size: var(--fs-h1);
font-weight: var(--fw-extrabold);
letter-spacing: var(--ls-tight);
line-height: var(--lh-tight);
text-transform: uppercase;
color: var(--text-on-dark);
margin-bottom: var(--space-5);
}
.hero__headline-accent {
background: linear-gradient(to right, var(--nw-green), var(--nw-green-pale));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero__lede {
font-size: var(--fs-body-lg);
font-weight: var(--fw-medium);
color: var(--text-on-dark-muted);
line-height: var(--lh-body);
max-width: 680px;
margin-bottom: var(--space-8);
}
.hero__ctas {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
}
/* ═══════════════════════════════════════════════
S2: NEW ARRIVALS
═══════════════════════════════════════════════ */
.section-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: var(--space-8);
}
.section-title {
font-size: var(--fs-h3);
font-weight: var(--fw-extrabold);
letter-spacing: var(--ls-tight);
text-transform: uppercase;
color: var(--text-on-dark);
margin-bottom: var(--space-2);
}
.section-title-bar {
height: var(--border-thick);
width: 80px;
background-color: var(--nw-green-light);
}
.section-view-all {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--fs-micro);
font-weight: var(--fw-bold);
text-transform: uppercase;
letter-spacing: var(--ls-widest);
color: var(--text-on-dark-muted);
transition: color 0.2s;
}
.section-view-all:hover {
color: var(--nw-green-light);
}
/* New Arrivals grid */
.arrivals-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--space-5);
}
/* Featured card — 8 cols */
.arrivals-featured {
grid-column: span 8;
background-color: var(--bg-surface-dark);
border-radius: var(--radius-md);
padding: var(--space-1);
position: relative;
overflow: hidden;
border: var(--border-regular) solid rgba(38,96,56,0.4);
box-shadow: 0 0 30px rgba(38,96,56,0.15);
}
.arrivals-featured__badge {
position: absolute;
top: var(--space-5);
right: var(--space-5);
z-index: 2;
background-color: var(--nw-green-light);
color: var(--text-on-green);
font-size: var(--fs-micro);
font-weight: var(--fw-extrabold);
text-transform: uppercase;
letter-spacing: var(--ls-widest);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-sm);
}
.arrivals-featured__inner {
display: grid;
grid-template-columns: 1fr 1fr;
height: 100%;
}
.arrivals-featured__image {
height: 320px;
overflow: hidden;
}
.arrivals-featured__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s;
}
.arrivals-featured:hover .arrivals-featured__image img {
transform: scale(1.05);
}
.arrivals-featured__body {
padding: var(--space-8);
display: flex;
flex-direction: column;
justify-content: center;
}
.arrivals-featured__title {
font-size: var(--fs-h3);
font-weight: var(--fw-bold);
color: var(--text-on-dark);
margin-bottom: var(--space-4);
line-height: var(--lh-heading);
}
.arrivals-featured__copy {
font-size: var(--fs-body-sm);
color: var(--text-on-dark-muted);
font-weight: var(--fw-medium);
line-height: var(--lh-body);
margin-bottom: var(--space-7);
}
.arrivals-featured__footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
}
.price {
font-weight: var(--fw-extrabold);
color: var(--text-on-dark);
}
.price--lg {
font-size: var(--fs-h1);
}
.price--md {
font-size: var(--fs-h4);
}
/* Standard product card — 4 cols */
.product-card {
grid-column: span 4;
background-color: var(--bg-surface-dark);
border-radius: var(--radius-md);
border: var(--border-hairline) solid rgba(255,255,255,0.05);
padding: var(--space-7);
display: flex;
flex-direction: column;
transition: border-color 0.2s;
}
.product-card:hover {
border-color: rgba(38,96,56,0.4);
}
.product-card__image {
width: 100%;
height: 192px;
object-fit: cover;
border-radius: var(--radius-sm);
margin-bottom: var(--space-7);
}
.product-card__title {
font-size: var(--fs-body);
font-weight: var(--fw-bold);
color: var(--text-on-dark);
margin-bottom: var(--space-2);
line-height: var(--lh-card);
}
.product-card__copy {
font-size: var(--fs-body-sm);
color: var(--text-on-dark-muted);
line-height: var(--lh-body);
margin-bottom: var(--space-5);
}
.product-card__footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
}
.atc-icon {
color: var(--nw-green-light);
font-size: 28px;
transition: transform 0.15s;
}
.product-card:hover .atc-icon {
transform: translateX(2px);
}
/* ═══════════════════════════════════════════════
S3: CATEGORIES
═══════════════════════════════════════════════ */
.categories {
background-color: var(--bg-primary-dark);
padding-block: var(--space-9);
border-top: var(--border-hairline) solid rgba(255,255,255,0.04);
border-bottom: var(--border-hairline) solid rgba(255,255,255,0.04);
}
.categories__eyebrow {
display: block;
font-size: var(--fs-eyebrow);
font-weight: var(--fw-bold);
text-transform: uppercase;
letter-spacing: 0.4em;
color: var(--nw-green-light);
text-align: center;
margin-bottom: var(--space-8);
}
.categories__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-4);
}
.category-tile {
aspect-ratio: 1 / 1;
background-color: var(--bg-primary-dark);
border: var(--border-hairline) solid rgba(38,96,56,0.1);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-5);
gap: var(--space-4);
text-decoration: none;
transition: border-color 0.2s;
}
.category-tile:hover {
border-color: var(--nw-green-light);
}
.category-tile .material-symbols-outlined {
font-size: 36px;
color: var(--nw-green-light);
transition: transform 0.2s;
}
.category-tile:hover .material-symbols-outlined {
transform: scale(1.1);
}
.category-tile__name {
font-size: var(--fs-body-sm);
font-weight: var(--fw-extrabold);
text-transform: uppercase;
letter-spacing: var(--ls-widest);
color: var(--text-on-dark);
}
.category-tile__count {
font-size: var(--fs-micro);
color: rgba(38,96,56,0.6);
letter-spacing: var(--ls-wide);
}
/* ═══════════════════════════════════════════════
S4: EVENTS
═══════════════════════════════════════════════ */
.events-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-10);
align-items: center;
}
.events__headline {
font-size: var(--fs-h2);
font-weight: var(--fw-extrabold);
letter-spacing: var(--ls-tight);
line-height: var(--lh-tight);
text-transform: uppercase;
color: var(--text-on-dark);
margin-bottom: var(--space-7);
}
.events__headline span {
color: var(--nw-green-light);
}
.event-item {
padding: var(--space-5);
background-color: var(--bg-surface-dark);
border-radius: var(--radius-md);
border-left: var(--border-thick) solid var(--nw-green);
box-shadow: 0 0 20px rgba(38,96,56,0.12);
cursor: pointer;
transition: background-color 0.2s;
margin-bottom: var(--space-5);
}
.event-item:last-of-type {
margin-bottom: 0;
border-left-color: rgba(38,96,56,0.2);
box-shadow: none;
}
.event-item:last-of-type:hover {
border-left-color: var(--nw-green);
}
.event-item:hover {
background-color: var(--dark-charcoal);
}
.event-item__meta {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: var(--space-2);
}
.event-item__status {
font-size: var(--fs-eyebrow);
font-weight: var(--fw-bold);
text-transform: uppercase;
letter-spacing: var(--ls-widest);
color: var(--nw-green-light);
}
.event-item__status--muted {
color: rgba(248,249,248,0.4);
}
.event-item__time {
font-size: var(--fs-eyebrow);
font-family: monospace;
color: var(--text-on-dark-muted);
}
.event-item__title {
font-size: var(--fs-body-lg);
font-weight: var(--fw-bold);
text-transform: uppercase;
color: var(--text-on-dark);
margin-bottom: var(--space-2);
}
.event-item__copy {
font-size: var(--fs-body-sm);
color: var(--text-on-dark-muted);
}
.events__cta {
display: inline-flex;
align-items: center;
gap: var(--space-4);
margin-top: var(--space-8);
font-weight: var(--fw-bold);
font-size: var(--fs-body-sm);
text-transform: uppercase;
letter-spacing: var(--ls-widest);
color: var(--text-on-dark);
transition: color 0.2s;
}
.events__cta:hover {
color: var(--nw-green-light);
}
.events__image-wrap {
position: relative;
}
.events__image-glow {
position: absolute;
inset: -16px;
background-color: rgba(38,96,56,0.08);
filter: blur(48px);
border-radius: 50%;
}
.events__image-inner {
position: relative;
background-color: var(--bg-primary-dark);
padding: var(--space-1);
border: var(--border-hairline) solid rgba(38,96,56,0.2);
border-radius: var(--radius-md);
}
.events__image {
width: 100%;
height: 500px;
object-fit: cover;
border-radius: var(--radius-md);
}
.events__stat-card {
position: absolute;
bottom: var(--space-8);
left: var(--space-8);
padding: var(--space-5);
backdrop-filter: blur(20px);
background-color: rgba(11,15,12,0.8);
border: var(--border-hairline) solid rgba(38,96,56,0.3);
border-radius: var(--radius-md);
max-width: 240px;
}
.events__stat-number {
font-size: var(--fs-h3);
font-weight: var(--fw-extrabold);
color: var(--nw-green-light);
margin-bottom: var(--space-1);
line-height: 1;
}
.events__stat-label {
font-size: var(--fs-eyebrow);
font-weight: var(--fw-bold);
text-transform: uppercase;
letter-spacing: var(--ls-widest);
color: var(--text-on-dark);
}
/* ═══════════════════════════════════════════════
S5: BRANDS
═══════════════════════════════════════════════ */
.brands {
padding-block: var(--space-8);
border-top: var(--border-hairline) solid rgba(255,255,255,0.05);
border-bottom: var(--border-hairline) solid rgba(255,255,255,0.05);
}
.brands__row {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: var(--space-9) var(--space-10);
opacity: 0.6;
}
.brand-item {
display: flex;
align-items: center;
gap: var(--space-3);
filter: grayscale(1);
transition: filter 0.2s;
cursor: pointer;
}
.brand-item:hover {
filter: grayscale(0);
}
.brand-item__icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-weight: var(--fw-extrabold);
font-style: italic;
}
.brand-item__icon--red {
background-color: var(--accent-red);
color: var(--text-on-dark);
}
.brand-item__icon--border {
border: var(--border-regular) solid var(--nw-green-light);
color: var(--nw-green-light);
}
.brand-item__name {
font-size: var(--fs-h4);
font-weight: var(--fw-extrabold);
letter-spacing: var(--ls-tight);
color: var(--text-on-dark);
}
.brand-item__name--italic {
font-size: var(--fs-h3);
font-style: italic;
}
/* ═══════════════════════════════════════════════
S6: INTEL / BLOG
═══════════════════════════════════════════════ */
.intel-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-7);
}
.intel-card {
cursor: pointer;
}
.intel-card__image-wrap {
overflow: hidden;
border-radius: var(--radius-md);
height: 256px;
margin-bottom: var(--space-5);
border: var(--border-hairline) solid rgba(255,255,255,0.08);
}
.intel-card__image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}
.intel-card:hover .intel-card__image {
transform: scale(1.05);
}
.intel-card__kicker {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--fs-micro);
font-weight: var(--fw-bold);
text-transform: uppercase;
letter-spacing: var(--ls-widest);
color: var(--nw-green-light);
margin-bottom: var(--space-3);
}
.intel-card__title {
font-size: var(--fs-body-lg);
font-weight: var(--fw-bold);
color: var(--text-on-dark);
margin-bottom: var(--space-4);
line-height: var(--lh-card);
transition: color 0.2s;
}
.intel-card:hover .intel-card__title {
color: var(--nw-green-light);
}
.intel-card__read-more {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--fs-body-sm);
font-weight: var(--fw-bold);
color: var(--text-on-dark-muted);
transition: color 0.2s;
}
.intel-card__read-more:hover {
color: var(--text-on-dark);
}
/* ═══════════════════════════════════════════════
S7: NEWSLETTER CTA
═══════════════════════════════════════════════ */
.cta-section {
padding-inline: var(--space-8);
padding-bottom: var(--space-9);
}
.cta-section__inner {
max-width: var(--content-max-width);
margin-inline: auto;
background-color: var(--bg-statement-green);
border-radius: var(--radius-md);
padding: var(--space-9) var(--space-10);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.cta-section__headline {
font-size: var(--fs-h2);
font-weight: var(--fw-extrabold);
text-transform: uppercase;
letter-spacing: var(--ls-tight);
color: var(--text-on-green);
margin-bottom: var(--space-5);
line-height: var(--lh-tight);
}
.cta-section__copy {
font-size: var(--fs-body-lg);
color: rgba(248,249,248,0.8);
max-width: 640px;
line-height: var(--lh-body);
margin-bottom: var(--space-8);
}
.cta-section__form {
display: flex;
flex-direction: column;
gap: var(--space-4);
width: 100%;
max-width: 480px;
}
@media (min-width: 640px) {
.cta-section__form {
flex-direction: row;
}
}
.cta-section__input {
flex: 1;
background-color: var(--bg-primary-dark);
border: none;
color: var(--text-on-dark);
font-weight: var(--fw-bold);
font-size: var(--fs-body-sm);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
padding: var(--space-4);
border-radius: var(--radius-md);
outline: none;
transition: box-shadow 0.2s;
}
.cta-section__input::placeholder {
color: rgba(248,249,248,0.3);
}
.cta-section__input:focus {
box-shadow: 0 0 0 var(--border-regular) var(--nw-green-pale);
}
/* ═══════════════════════════════════════════════
FOOTER
═══════════════════════════════════════════════ */
.site-footer {
background-color: var(--bg-primary-dark);
border-top: var(--border-hairline) solid rgba(38,96,56,0.1);
padding: var(--space-8);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-7);
}
@media (min-width: 768px) {
.site-footer {
flex-direction: row;
justify-content: space-between;
}
}
.site-footer__brand-name {
font-size: var(--fs-body);
font-weight: var(--fw-bold);
color: var(--text-on-dark);
margin-bottom: var(--space-2);
}
.site-footer__copyright {
font-size: var(--fs-micro);
text-transform: uppercase;
letter-spacing: var(--ls-wide);
color: var(--text-on-dark-muted);
}
.site-footer__links {
display: flex;
gap: var(--space-7);
}
.site-footer__links a {
font-size: var(--fs-micro);
text-transform: uppercase;
letter-spacing: var(--ls-wide);
font-weight: var(--fw-medium);
color: var(--text-on-dark-muted);
opacity: 0.7;
transition: all 0.2s;
}
.site-footer__links a:hover {
color: var(--nw-green);
opacity: 1;
}
.site-footer__icons {
display: flex;
gap: var(--space-4);
}
.footer-icon-btn {
width: 40px;
height: 40px;
border: var(--border-hairline) solid rgba(255,255,255,0.1);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-on-dark-muted);
cursor: pointer;
transition: all 0.2s;
}
.footer-icon-btn:hover {
border-color: var(--nw-green-light);
color: var(--nw-green-light);
}
</style>
</head>
<body>
<!-- ═══ SECTION: header ═══ -->
<header class="site-header">
<div class="site-header__inner">
<div class="site-header__logo">Nerdworks</div>
<nav class="site-header__nav">
<a href="#" class="is-active">Hardware</a>
<a href="#">Components</a>
<a href="#">Peripherals</a>
<a href="#">Deals</a>
</nav>
<div class="site-header__actions">
<button><span class="material-symbols-outlined">shopping_cart</span></button>
<button><span class="material-symbols-outlined">account_circle</span></button>
</div>
</div>
</header>
<main>
<!-- ═══ SECTION: hero ═══ -->
<section class="hero">
<div class="hero__bg">
<img
src="https://lh3.googleusercontent.com/aida-public/AB6AXuAygZS0Yvi4PHtG5N-NU_ORXofCgTk051fsnebPqJmXD509KOzl3yXFXVNNeAsmR12LUT-vIixye6DxQRMCeld7ss3OIUqvZkam-RPoIRXVjsm0A63ZYXBTGEwlT39qgw6NHE1CTTVINfM2HUJhf5zYCR3eATLjgXnRUB_xh3FlvsOItV-2sqkdVidbOy7aM9eiClo02gMTyeD7x0TnfNBqJVvWikQ4E0A2xMgxfk6X_6srC90Hxj1qaWsQ6JXQe9vqGYwywO0S"
alt="Cinematic gaming PC setup with green liquid cooling in a dark room"
/>
<div class="hero__bg-overlay"></div>
</div>
<div class="hero__content">
<div class="hero__badge">
<span class="hero__badge-text">System Online: v4.2.0</span>
</div>
<h1 class="hero__headline">
Gear up.<br>
<span class="hero__headline-accent">Conquer all.</span>
</h1>
<p class="hero__lede">The ultimate destination for competitive tabletop gaming and high-performance PC architecture. Precision engineered for the dedicated nerd.</p>
<div class="hero__ctas">
<button class="btn btn--primary">Shop Arrivals</button>
<button class="btn btn--ghost">Build Your Rig</button>
</div>
</div>
</section>
<!-- ═══ SECTION: new-arrivals ═══ -->
<section class="section-pad">
<div class="container">
<div class="section-header">
<div>
<h2 class="section-title">New Arrivals</h2>
<div class="section-title-bar"></div>
</div>
<a href="#" class="section-view-all">
View All Catalog
<span class="material-symbols-outlined" style="font-size: 14px;">arrow_forward</span>
</a>
</div>
<div class="arrivals-grid">
<!-- Featured — Staff Pick -->
<div class="arrivals-featured">
<div class="arrivals-featured__badge">Staff Pick</div>
<div class="arrivals-featured__inner">
<div class="arrivals-featured__image">
<img
src="https://lh3.googleusercontent.com/aida-public/AB6AXuDp6X2cZI4SFuTcLRkEEQ46xow5Un5DbO37-4my1BAQC2_yy9o01tDMnCP2dTiRL6keQF97BeonLI9eInsxY3M8_d2yN3uYr0154mDu4Zs72_yWu32chjdetd0cg5NAHEbGspnI_07c9ZT7Qv1BHY0qIPjCriGbfK4uoJPjdvBIf_OSC_OnhIGJZOohiqUwRLMAo8hXJsL_w0GrYqhK0fFgfjD3sg9-8-Y_1PnIwXAxzDv8cNpzm761MwRJDDlM_38jnzT-pq5h"
alt="Pokémon TCG Prismatic Evolutions booster box with holographic texture"
/>
</div>
<div class="arrivals-featured__body">
<h3 class="arrivals-featured__title">Pokémon Prismatic Evolutions ETB</h3>
<p class="arrivals-featured__copy">Unlock the radiant power of the latest expansion. Featuring exclusive full-art foils and tournament-ready accessories.</p>
<div class="arrivals-featured__footer">
<span class="price price--lg">£54.99</span>
<button class="btn btn--primary">Add to Rig</button>
</div>
</div>
</div>
</div>
<!-- MTG Foundations -->
<div class="product-card">
<img
class="product-card__image"
src="https://lh3.googleusercontent.com/aida-public/AB6AXuCG5hMtRsfqLJJ9ezSrsaZbFGmuwcquQZSNbznWrtCAT9cx9Y_LyPMNo-V0sSoxq9dgcU12cwXTuxncEcPoLstM3HkiF2blZhOzkqWzKTVVzIoLKycy_BjKPXC_avAUjfBN8a3qllSl0a_gruTv32ZEXQ-Iqd5vYIV9hSeCnxNnNPxYST8eA2ySsFmVX7tO4LlnvImP7ZV6zMF0cJYvM4Ko8IxxuMpKi2R3kUFaoYCe5E6TEMW3OyUGdfXU14dEFpltnnvw_iSN"
alt="Magic The Gathering collector booster packs with moody green lighting"
/>
<h3 class="product-card__title">MTG Foundations Collector Box</h3>
<p class="product-card__copy">Master the multiverse with elite alternate art cards.</p>
<div class="product-card__footer">
<span class="price price--md">£189.99</span>
<span class="material-symbols-outlined atc-icon">add_circle</span>
</div>
</div>
<!-- Warhammer -->
<div class="product-card">
<img
class="product-card__image"
src="https://lh3.googleusercontent.com/aida-public/AB6AXuBXTdusI-9CPjuj_o3BWod_AvxtuwmhNQHjVx05CzrxUmUCdHzcl_GkIKa4iJp_Eno8mIPcFgm7njQ6O66dUFhKbZnF2h2VKjBJ21yI5mEgZH64Kje8I7IeMGbZlk6k3N5Ze5dC5JKbA_TwF3ITrPFzhwRof3pe0yqFDeqPu1k4seojhGmhYeky7hg7TWxDis8apH1BzWF7VjlHQwgCK10jsJCqR-7ncZ-OYUtx5KfqP1b4wvJfQpJPn8at-Ia7t58bXQs6MhiE"
alt="Warhammer 40k miniatures in green and gunmetal armour"
/>
<h3 class="product-card__title">Warhammer Combat Patrol</h3>
<p class="product-card__copy">Field a formidable army with this essential starter force.</p>
<div class="product-card__footer">
<span class="price price--md">£85.00</span>
<span class="material-symbols-outlined atc-icon">add_circle</span>
</div>
</div>
<!-- Lorcana -->
<div class="product-card">
<img
class="product-card__image"
src="https://lh3.googleusercontent.com/aida-public/AB6AXuBzqk68Vvx2BWc6VQe_PJYkq7IrF8nBkYPaoajYao44WmZIts_bSlh9upEoPlsQ2J0cDAMEy9G2Z7dXFHhBy6bpwCose09zYmMvPai9s-ATE1Ts2ob-OHxGfuKPIsiaCPHyi2jO1kAnAz5wSeCt927RTz4ThuabH8BCJtvrMwqzMeznuYxCliT5ZJt9SbWyypM6fdRnkjzcYMTUGVjkhQhiJtX4BC4eTYI4Zv58QHG0elXeLOOSbXLNPu_cUXtx7GmN8C91V27H"
alt="Lorcana collectible cards with vibrant fantasy artwork"
/>
<h3 class="product-card__title">Lorcana Shimmering Skies Box</h3>
<p class="product-card__copy">Discover new legendary characters in the newest set.</p>
<div class="product-card__footer">
<span class="price price--md">£109.99</span>
<span class="material-symbols-outlined atc-icon">add_circle</span>
</div>
</div>
<!-- Wingspan -->
<div class="product-card">
<img
class="product-card__image"
src="https://lh3.googleusercontent.com/aida-public/AB6AXuCEBL8e2ugJnKTCFYjwWYNRYFk1bR-0L0ff_LaFXeyjEwIf8NYR0mOHdkMRSdp6MMCu8r4plxXsn4TRNhYrPxOnY29_a6uXH9X6RSHrpYeUI3E5xMfCY1kB57_9yfSST8XiWogElq_Okm-S-1BUCjcI45VQGEYhN7eIG7zNhtQ2c8APPNc4r6BXlOq8ZF8TOwIvWmnF6ijlwdW7"
alt="Wingspan board game with birdhouse dice tower and illustrated cards"
/>
<h3 class="product-card__title">Wingspan Bundle</h3>
<p class="product-card__copy">The definitive nature-themed engine-building experience.</p>
<div class="product-card__footer">
<span class="price price--md">£51.99</span>
<span class="material-symbols-outlined atc-icon">add_circle</span>
</div>
</div>
</div>
</div>
</section>
<!-- ═══ SECTION: categories ═══ -->
<section class="categories">
<div class="container">
<span class="categories__eyebrow">System Categories</span>
<div class="categories__grid">
<a href="#" class="category-tile">
<span class="material-symbols-outlined">memory</span>
<span class="category-tile__name">Hardware</span>
<span class="category-tile__count">1,240 units</span>
</a>
<a href="#" class="category-tile">
<span class="material-symbols-outlined">style</span>
<span class="category-tile__name">Trading Cards</span>
<span class="category-tile__count">45,820 units</span>
</a>
<a href="#" class="category-tile">
<span class="material-symbols-outlined">extension</span>
<span class="category-tile__name">Board Games</span>
<span class="category-tile__count">890 units</span>
</a>
<a href="#" class="category-tile">
<span class="material-symbols-outlined">strategy</span>
<span class="category-tile__name">Wargaming</span>
<span class="category-tile__count">2,150 units</span>
</a>
</div>
</div>
</section>
<!-- ═══ SECTION: events ═══ -->
<section class="section-pad">
<div class="container">
<div class="events-grid">
<div>
<h2 class="events__headline">
In-store<br>
<span>Deployments</span>
</h2>
<div>
<div class="event-item">
<div class="event-item__meta">
<span class="event-item__status">Live Operation</span>
<span class="event-item__time">19:00 GMT</span>
</div>
<h4 class="event-item__title">Friday Night Magic</h4>
<p class="event-item__copy">Draft & Modern formats. 32 slots remaining. Level 3 Competitive.</p>
</div>
<div class="event-item">
<div class="event-item__meta">
<span class="event-item__status event-item__status--muted">Next Window: Saturday</span>
<span class="event-item__time">11:00 GMT</span>
</div>
<h4 class="event-item__title">Pokémon League</h4>
<p class="event-item__copy">Standard format league play for all age divisions. Free to enter.</p>
</div>
</div>
<a href="#" class="events__cta">
Full Event Calendar
<span class="material-symbols-outlined">calendar_today</span>
</a>
</div>
<div class="events__image-wrap">
<div class="events__image-glow"></div>
<div class="events__image-inner">
<img
class="events__image"
src="https://lh3.googleusercontent.com/aida-public/AB6AXuDvswdWTXvBHvqAaY11BEzx8TT8A_8-Drr4wws1kgalSi7WRmw5OQdAmlX8CQ2I9RtG3xcPv4_W6bWzqxCVia9mIGkxf9BIEgIUuoy96AG8mRjLvr5CyGpa7q_p199iaZkCvcv9yWb0MWbjyqviIC87XVnxMLY6zc5PL7gydsPNuZS-pO0crbAbuGzV-Vy0QnEJn4mJfAz_2GtDBGbIDyzJux2IMyEFthJZcKcZhTcFZ2dEnNxmkYE1JLIUY54K0ZBGLoi4ovHR"
alt="Professional tabletop gaming tournament arena with luminous green LED tables"
/>
<div class="events__stat-card">
<div class="events__stat-number">98%</div>
<div class="events__stat-label">Community Satisfaction Rating</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ═══ SECTION: brands ═══ -->
<section class="brands">
<div class="container">
<div class="brands__row">
<div class="brand-item">
<div class="brand-item__icon brand-item__icon--red">S66</div>
<span class="brand-item__name">Saber66</span>
</div>
<div class="brand-item">
<div class="brand-item__icon brand-item__icon--border">
<span class="material-symbols-outlined" style="font-size: 20px;">castle</span>
</div>
<span class="brand-item__name">War Dungeon</span>
</div>
<div class="brand-item">
<span class="brand-item__name brand-item__name--italic">NVIDIA</span>
</div>
<div class="brand-item" style="color: var(--text-on-dark);">
<span class="material-symbols-outlined" style="font-size: 36px;">hardware</span>
<span class="brand-item__name">Razer</span>
</div>
</div>
</div>
</section>
<!-- ═══ SECTION: intel ═══ -->
<section class="section-pad">
<div class="container">
<h2 class="section-title" style="margin-bottom: var(--space-8);">Command Intel</h2>
<div class="intel-grid">
<div class="intel-card">
<div class="intel-card__image-wrap">
<img
class="intel-card__image"
src="https://lh3.googleusercontent.com/aida-public/AB6AXuDwhSkS_Q1ToAXGaKwdcC82Uwg4A-kQf6aW1OIauOQEqkE9l-2UYuL2rO8TiH4cfcsDazz8aNIa3juAAW1bEX4b_3qxxr9X_pO8o2INeRqPPu8KB73i3CQ40rfORDA_m0k468B6OMWbtNVAdnS0XJwpee-_VU9LfOfjmlT96yW8vhKm0ezA9EdLC2I-8oWHUBAZEy2VW7AkDGELweYMs8ljSs1e4LtUAaTamWbUGp1CMD61cDg9d2rE9uJC2V51jaEIcbux_SFl"
alt="High-performance gaming PC components with heatsinks and green lighting"
/>
</div>
<div class="intel-card__kicker">
<span>Hardware</span>
<span>•</span>
<span>5 min read</span>
</div>
<h3 class="intel-card__title">Optimising Your Rig for 4K Competitive Play</h3>
<a href="#" class="intel-card__read-more">
Read more
<span class="material-symbols-outlined" style="font-size: 12px;">arrow_forward_ios</span>
</a>
</div>
<div class="intel-card">
<div class="intel-card__image-wrap">
<img
class="intel-card__image"
src="https://lh3.googleusercontent.com/aida-public/AB6AXuApen_m3L_ESxQLJKb2mUQv5VT-A0UG7EweUZEiwZFs4oURZf1uHID_6UcpoFUOsM2tnyvSBlcbj7vx39TJlyOH9LIVLMGUp1JLkIcA-0DcFgUheAHqBZuk7XgARWX3Hfc070BCo6e2-dtEPwzdJzfGhp296D0yKfdNZRVxzvTawuOsjlnmeu5HMi66vas6qgB1r7Pb7J_jZ6G6_UXkqmZ2AyaTJZLOfx7zZpQrg3oAYwLNWPrFD9dZbcer1dQUoC74Gjn-7P4_"
alt="Professional trading cards in protective sleeves with green light"
/>
</div>
<div class="intel-card__kicker">
<span>TCG Strategy</span>
<span>•</span>
<span>8 min read</span>
</div>
<h3 class="intel-card__title">Top Tier Deck Profiles: The Regional Champs</h3>
<a href="#" class="intel-card__read-more">
Read more
<span class="material-symbols-outlined" style="font-size: 12px;">arrow_forward_ios</span>
</a>
</div>
<div class="intel-card">
<div class="intel-card__image-wrap">
<img
class="intel-card__image"
src="https://lh3.googleusercontent.com/aida-public/AB6AXuBH91zM1FREyslcM-XTMvOB1CCA4eCvUirtH1O30yIqNyPLUaRkPWrJbK0wHSb3juWDih-ob2e_3xBEVHFkRIyaW7DSM1XX6jXD56uVcfCyqJHE1-Cyw0RR5XEbV6iTcf4Rl48OuVp9IgDJD_wriH4BDLiXOWZvMsEgD7SqLD6XeNezaPtmYNE8vB8R6eZrBSLfIWkvdvfBDmDrCjcI45VQGEYhN7eIG7zNhtQ2c8APPNc4r6BXlOq8ZF8TOwIvWmnF6ijlwdW7"
alt="Custom mechanical keyboard with green keycaps and brushed aluminium"
/>
</div>
<div class="intel-card__kicker">
<span>Custom Builds</span>
<span>•</span>
<span>12 min read</span>
</div>
<h3 class="intel-card__title">Keyboard Modding: The Switch Preference Guide</h3>
<a href="#" class="intel-card__read-more">
Read more
<span class="material-symbols-outlined" style="font-size: 12px;">arrow_forward_ios</span>
</a>
</div>
</div>
</div>
</section>
<!-- ═══ SECTION: newsletter-cta ═══ -->
<section class="cta-section">
<div class="cta-section__inner">
<h2 class="cta-section__headline">Join the Nerdworks Core</h2>
<p class="cta-section__copy">Get early access to drops, exclusive event invites, and build logs from the world's top rig designers.</p>
<div class="cta-section__form">
<input
class="cta-section__input"
type="email"
placeholder="Enter system email"
/>
<button class="btn btn--white">Initialise</button>
</div>
</div>
</section>
</main>
<!-- ═══ SECTION: footer ═══ -->
<footer class="site-footer">
<div>
<div class="site-footer__brand-name">Nerdworks OS</div>
<div class="site-footer__copyright">© 2026 Nerdworks OS. All systems operational.</div>
</div>
<div class="site-footer__links">
<a href="#">Support</a>
<a href="#">Warranty</a>
<a href="#">Locations</a>
<a href="#">Privacy</a>
</div>
<div class="site-footer__icons">
<button class="footer-icon-btn">
<span class="material-symbols-outlined">language</span>
</button>
<button class="footer-icon-btn">
<span class="material-symbols-outlined">share</span>
</button>
</div>
</footer>
</body>
</html>