<!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 (Stitch Conversion, TN13)</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&display=swap" rel="stylesheet">
<style>
/*------------------------------------*
SG1 TOKENS
Converted from Stitch/Tailwind output.
All M3 colours replaced with SG1 palette.
#80d8a5 → --nw-green-light
#101411 → --near-black
#1F4F2E → rgba(0,0,0,0.25) on green
#D4EAD9 → --nw-green-pale
*------------------------------------*/
: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;
--lh-tight: 1.05;
--lh-heading: 1.15;
--lh-body: 1.55;
--lh-card: 1.35;
--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: #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;
}
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);
}
/*------------------------------------*
BUTTONS
*------------------------------------*/
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-4) var(--space-7);
border: 0;
border-radius: var(--radius-md);
font-family: var(--ff-body);
font-size: var(--fs-body);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
cursor: pointer;
transition: all 200ms ease;
}
.btn:active {
transform: scale(0.95);
}
.btn--primary {
background: var(--nw-green-light);
color: var(--text-on-dark);
}
.btn--primary:hover {
opacity: 0.9;
}
.btn--ghost {
background: transparent;
color: var(--nw-green-light);
border: var(--border-hairline) solid var(--nw-green-light);
}
.btn--ghost:hover {
background: rgba(33, 126, 82, 0.1);
}
.btn--dark {
background: var(--near-black);
color: var(--near-white);
}
.btn--dark:hover {
opacity: 0.9;
}
.btn--light {
background: var(--near-white);
color: var(--near-black);
}
.btn--light:hover {
opacity: 0.9;
}
/*------------------------------------*
BADGES
*------------------------------------*/
.badge {
display: inline-block;
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
font-size: var(--fs-eyebrow);
font-weight: var(--fw-semibold);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
background: var(--darkest-green);
color: var(--nw-green-pale);
}
/*------------------------------------*
EYEBROW
*------------------------------------*/
.eyebrow {
display: inline-block;
font-size: var(--fs-eyebrow);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--text-eyebrow);
}
/*------------------------------------*
SECTION HEAD
*------------------------------------*/
.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-body-sm);
font-weight: var(--fw-bold);
color: var(--nw-green-light);
white-space: nowrap;
transition: color 200ms ease;
}
.section-head__link:hover {
text-decoration: underline;
text-underline-offset: 8px;
}
/*------------------------------------*
NAVIGATION
*------------------------------------*/
.site-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
background: rgba(26, 30, 26, 0.7);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
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-4) 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-bold);
letter-spacing: var(--ls-tight);
color: var(--text-on-dark);
}
.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);
transition: color 200ms ease;
}
.site-nav__links a:hover,
.site-nav__links a.is-active {
color: var(--text-on-dark);
}
.site-nav__links a.is-active {
border-bottom: var(--border-regular) solid var(--nw-green-light);
padding-bottom: var(--space-1);
}
.site-nav__icons {
display: flex;
gap: var(--space-5);
align-items: center;
}
.site-nav__icon {
width: 20px;
height: 20px;
stroke: var(--nw-green-light);
fill: none;
stroke-width: 1.5;
cursor: pointer;
transition: opacity 200ms ease;
}
.site-nav__icon:hover {
opacity: 0.8;
}
/*------------------------------------*
HERO
*------------------------------------*/
.hero {
background: var(--bg-primary-dark);
padding: var(--space-10) 0;
padding-top: calc(var(--space-10) + 80px);
min-height: 100vh;
display: flex;
align-items: center;
}
.hero__inner {
display: grid;
grid-template-columns: 6fr 4fr;
gap: var(--space-8);
align-items: center;
}
.hero__content {
display: flex;
flex-direction: column;
gap: var(--space-7);
}
.hero__title {
font-size: var(--fs-display);
font-weight: var(--fw-extrabold);
line-height: 0.95;
letter-spacing: -0.04em;
color: var(--text-on-dark);
}
.hero__lede {
font-size: var(--fs-body-lg);
line-height: var(--lh-body);
color: var(--text-on-dark-muted);
max-width: 560px;
}
.hero__ctas {
display: flex;
gap: var(--space-4);
flex-wrap: wrap;
}
.hero__image-wrap {
position: relative;
width: 100%;
max-width: 420px;
aspect-ratio: 3 / 4;
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-xl);
margin: 0 auto;
}
.hero__image-wrap::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, var(--near-black), transparent, transparent);
opacity: 0.4;
pointer-events: none;
}
.hero__image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 700ms ease;
}
.hero__image-wrap:hover .hero__image {
transform: scale(1.1);
}
/*------------------------------------*
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 {
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-xl);
}
.editorial__image {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.editorial__content {
display: flex;
flex-direction: column;
gap: var(--space-5);
}
.editorial__title {
font-size: var(--fs-h2);
font-weight: var(--fw-bold);
line-height: var(--lh-heading);
color: var(--text-on-dark);
}
.editorial__body {
font-size: var(--fs-body-lg);
line-height: var(--lh-body);
color: var(--text-on-dark-muted);
}
.editorial__link {
display: inline-block;
font-size: var(--fs-body-lg);
font-weight: var(--fw-bold);
color: var(--nw-green-light);
border-bottom: var(--border-regular) solid rgba(33, 126, 82, 0.3);
padding-bottom: var(--space-1);
transition: border-color 200ms ease;
}
.editorial__link:hover {
border-color: var(--nw-green-light);
}
/*------------------------------------*
PRODUCT GRID
*------------------------------------*/
.products {
background: var(--bg-primary-dark);
padding: var(--space-10) 0;
}
.products__title {
font-size: var(--fs-h3);
font-weight: var(--fw-bold);
color: var(--text-on-dark);
margin-top: var(--space-2);
}
.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);
display: flex;
flex-direction: column;
transition: transform 200ms ease;
position: relative;
}
.product-card:hover {
transform: translateY(-8px);
}
.product-card__image-wrap {
position: relative;
aspect-ratio: 4 / 5;
border-radius: var(--radius-md);
overflow: hidden;
margin-bottom: var(--space-5);
background: var(--bg-primary-dark);
}
.product-card__image {
width: 100%;
height: 100%;
object-fit: cover;
}
.product-card__badge {
position: absolute;
top: var(--space-2);
left: var(--space-2);
z-index: 2;
}
.product-card__title {
font-size: var(--fs-body);
font-weight: var(--fw-bold);
color: var(--text-on-dark);
margin-bottom: var(--space-1);
}
.product-card__meta {
font-size: var(--fs-body-sm);
color: var(--text-on-dark-muted);
margin-bottom: var(--space-4);
flex: 1;
}
.product-card__price {
font-size: var(--fs-body);
font-weight: var(--fw-bold);
color: var(--nw-green-light);
}
.product-card__price-old {
color: var(--text-on-dark-muted);
text-decoration: line-through;
font-weight: var(--fw-regular);
font-size: var(--fs-eyebrow);
margin-left: var(--space-2);
}
/*------------------------------------*
CURATOR'S VAULT — TESTIMONIALS
*------------------------------------*/
.vault {
background: var(--bg-statement-green);
padding: var(--space-10) 0;
}
.vault__header {
text-align: center;
margin-bottom: var(--space-9);
}
.vault__title {
font-size: var(--fs-h1);
font-weight: var(--fw-bold);
line-height: var(--lh-tight);
letter-spacing: var(--ls-tight);
color: var(--text-on-green);
margin-bottom: var(--space-4);
}
.vault__lede {
font-size: var(--fs-body-lg);
font-style: italic;
font-weight: var(--fw-medium);
color: var(--nw-green-pale);
max-width: 640px;
margin: 0 auto;
}
.vault__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-7);
}
.testimonial {
background: rgba(0, 0, 0, 0.25);
border-radius: var(--radius-lg);
padding: var(--space-7);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.testimonial__mark {
font-size: var(--fs-h3);
line-height: 1;
color: var(--nw-green-light);
margin-bottom: var(--space-5);
}
.testimonial__quote {
font-size: var(--fs-body-lg);
line-height: var(--lh-body);
color: var(--text-on-dark);
margin-bottom: var(--space-7);
}
.testimonial__author {
margin-top: auto;
}
.testimonial__name {
font-size: var(--fs-body);
font-weight: var(--fw-bold);
color: var(--nw-green-light);
margin-bottom: var(--space-1);
}
.testimonial__role {
font-size: var(--fs-body-sm);
color: var(--nw-green-pale);
opacity: 0.6;
}
/*------------------------------------*
EXPLORE THE ARCHIVE
*------------------------------------*/
.explore {
background: var(--bg-surface-dark);
padding: var(--space-10) 0;
}
.explore__header {
margin-bottom: var(--space-8);
}
.explore__title {
font-size: var(--fs-h1);
font-weight: var(--fw-bold);
line-height: var(--lh-heading);
letter-spacing: var(--ls-tight);
color: var(--text-on-dark);
}
.explore__accent {
width: 60px;
height: var(--border-thick);
background: var(--nw-green-light);
border: 0;
margin-top: var(--space-4);
}
.explore__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-5);
}
.category-tile {
position: relative;
height: 400px;
border-radius: var(--radius-lg);
overflow: hidden;
cursor: pointer;
display: block;
}
.category-tile__image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 500ms ease;
}
.category-tile:hover .category-tile__image {
transform: scale(1.05);
}
.category-tile__scrim {
position: absolute;
inset: 0;
background: linear-gradient(to top, var(--near-black), transparent, transparent);
opacity: 0.8;
}
.category-tile__content {
position: absolute;
bottom: var(--space-7);
left: var(--space-7);
}
.category-tile__title {
font-size: var(--fs-body-lg);
font-weight: var(--fw-bold);
color: var(--nw-green-light);
}
.category-tile__count {
font-size: var(--fs-body-sm);
font-weight: var(--fw-regular);
color: var(--text-on-dark-muted);
text-transform: uppercase;
letter-spacing: var(--ls-widest);
margin-top: var(--space-1);
}
/*------------------------------------*
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-8);
gap: var(--space-6);
}
.thisweek__eyebrow {
display: block;
font-size: var(--fs-eyebrow);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--near-black);
margin-bottom: var(--space-4);
}
.thisweek__title {
font-size: var(--fs-h1);
font-weight: var(--fw-extrabold);
line-height: var(--lh-tight);
letter-spacing: var(--ls-tight);
color: var(--text-on-light);
}
.thisweek__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-7);
}
.event-card {
background: var(--bg-surface-light);
border: var(--border-hairline) solid var(--border-hairline-light);
border-radius: var(--radius-lg);
padding: var(--space-7);
display: flex;
flex-direction: column;
box-shadow: var(--shadow-sm);
}
.event-card__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: var(--space-7);
}
.event-card__date {
background: var(--near-black);
color: var(--near-white);
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-4);
text-align: center;
min-width: 70px;
}
.event-card__day {
display: block;
font-size: var(--fs-eyebrow);
font-weight: var(--fw-bold);
opacity: 0.7;
}
.event-card__date-num {
display: block;
font-size: var(--fs-h4);
font-weight: var(--fw-extrabold);
line-height: 1;
}
.event-card__icon {
width: 24px;
height: 24px;
stroke: var(--near-black);
fill: none;
stroke-width: 1.5;
opacity: 0.2;
}
.event-card__title {
font-size: var(--fs-h4);
font-weight: var(--fw-bold);
color: var(--text-on-light);
margin-bottom: var(--space-2);
}
.event-card__meta {
font-size: var(--fs-body);
color: var(--text-on-light-muted);
margin-bottom: var(--space-7);
}
.event-card__link {
margin-top: auto;
font-size: var(--fs-body-sm);
font-weight: var(--fw-extrabold);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--nw-green-light);
transition: opacity 200ms ease;
}
.event-card__link:hover {
opacity: 0.7;
}
/*------------------------------------*
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-tight);
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(--nw-green-pale);
max-width: 560px;
margin: 0 auto var(--space-7);
}
.newsletter {
display: flex;
gap: var(--space-4);
justify-content: center;
max-width: 800px;
margin: 0 auto;
}
.newsletter__input {
flex: 1;
background: rgba(0, 0, 0, 0.25);
border: 0;
border-radius: var(--radius-md);
padding: var(--space-4) var(--space-5);
color: var(--near-white);
font-family: var(--ff-body);
font-size: var(--fs-body);
outline: none;
transition: box-shadow 200ms ease;
}
.newsletter__input::placeholder {
color: rgba(212, 234, 217, 0.3);
}
.newsletter__input:focus {
box-shadow: 0 0 0 2px rgba(33, 126, 82, 0.4);
}
.newsletter__submit {
background: var(--near-white);
color: var(--near-black);
border: 0;
border-radius: var(--radius-md);
padding: var(--space-4) var(--space-7);
font-family: var(--ff-body);
font-size: var(--fs-body);
font-weight: var(--fw-bold);
text-transform: uppercase;
cursor: pointer;
transition: opacity 200ms ease;
}
.newsletter__submit:hover {
opacity: 0.9;
}
/*------------------------------------*
FROM THE ARCHIVE — EDITORIAL CARDS
*------------------------------------*/
.archive {
background: var(--bg-surface-dark);
padding: var(--space-10) 0;
}
.archive__title {
font-size: var(--fs-h3);
font-weight: var(--fw-bold);
color: var(--text-on-dark);
margin-top: var(--space-2);
}
.archive__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-7);
}
.editorial-card {
display: flex;
flex-direction: column;
cursor: pointer;
}
.editorial-card__image-wrap {
aspect-ratio: 16 / 10;
border-radius: var(--radius-lg);
overflow: hidden;
margin-bottom: var(--space-5);
}
.editorial-card__image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 500ms ease;
}
.editorial-card:hover .editorial-card__image {
transform: scale(1.05);
}
.editorial-card__eyebrow {
font-size: var(--fs-eyebrow);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--nw-green-light);
}
.editorial-card__title {
font-size: var(--fs-h4);
font-weight: var(--fw-bold);
line-height: var(--lh-card);
color: var(--text-on-dark);
margin-top: var(--space-3);
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);
margin-top: var(--space-4);
}
/*------------------------------------*
FOOTER
*------------------------------------*/
.site-footer {
background: var(--bg-footer);
padding: var(--space-9) var(--space-7);
border-top: var(--border-hairline) solid rgba(40, 48, 42, 0.3);
}
.site-footer__top {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: var(--space-8);
max-width: var(--content-max-width);
margin: 0 auto;
}
.site-footer__wordmark {
font-size: var(--fs-h2);
font-weight: var(--fw-extrabold);
letter-spacing: var(--ls-tight);
color: var(--text-on-dark);
margin-bottom: var(--space-7);
}
.site-footer__mission {
font-size: var(--fs-body-lg);
line-height: 1.6;
color: var(--text-on-dark-muted);
}
.site-footer__col-title {
font-size: var(--fs-eyebrow);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--text-on-dark);
margin-bottom: var(--space-4);
}
.site-footer__list {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.site-footer__list a {
font-size: var(--fs-body);
color: var(--text-on-dark-muted);
transition: color 200ms ease;
}
.site-footer__list a:hover {
color: var(--text-on-dark);
}
.site-footer__socials {
display: flex;
gap: var(--space-4);
}
.site-footer__social {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--near-black);
display: flex;
align-items: center;
justify-content: center;
transition: background 200ms ease, color 200ms ease;
}
.site-footer__social:hover {
background: var(--nw-green-light);
}
.site-footer__social svg {
width: 16px;
height: 16px;
stroke: var(--nw-green-light);
fill: none;
stroke-width: 1.5;
}
.site-footer__social:hover svg {
stroke: var(--near-black);
}
.site-footer__bottom {
display: flex;
align-items: center;
justify-content: space-between;
max-width: var(--content-max-width);
margin: var(--space-9) auto 0;
padding-top: var(--space-7);
border-top: var(--border-hairline) solid rgba(40, 48, 42, 0.2);
font-size: var(--fs-body-sm);
color: var(--text-on-dark-muted);
}
.site-footer__meta {
display: flex;
gap: var(--space-7);
font-size: var(--fs-eyebrow);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: rgba(154, 164, 154, 0.5);
}
/*------------------------------------*
RESPONSIVE
*------------------------------------*/
@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;
}
.hero {
min-height: auto;
}
.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;
}
.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;
}
}
</style>
</head>
<body>
<!-- ═══ SECTION: site-nav ═══ -->
<nav class="site-nav">
<div class="site-nav__inner">
<a href="#" class="site-nav__wordmark">NERDWORKS</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">
<div class="container hero__inner">
<div class="hero__content">
<p class="eyebrow">The Obsidian Selection</p>
<h1 class="hero__title">Curated for collectors</h1>
<p class="hero__lede">A sanctuary for high-grade artifacts and rare specimens. From mythic legacy cards to limited edition board games, we house the items that define an era.</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://lh3.googleusercontent.com/aida-public/AB6AXuDFDkpH1rY5uxiKwzkA-OeE8rDgB01D6VL36gJyzjIP6SfpOGwWx7QQYFd9znTQobj94wAuKKGgYT_JHkuOLd4MGK4dn6zQUrD_4juuRTILkthB9FbrQsi4yIGX4Y8YSbE-yI5NjQvkPZ_A8PLK1UVINm63ELmkB9DmmuFoWeLp_zCjQvEayl26MBq6_ArDTvj0xIbSQDU2Y1VANX0Y_nRzzxyXYsmOz9cTsOfxZoxaCE7zUs2zMbtWfwk-8k8TvbfoSrFpUWw7" alt="Rare holographic trading card in protective sleeve">
</div>
</div>
</section>
<!-- ═══ SECTION: editorial ═══ -->
<section class="editorial">
<div class="container editorial__inner">
<div class="editorial__image-wrap">
<img class="editorial__image" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDMH_araaIJj8Wc-nPINSa62_a5dWr12Gb930HkN0CgkNOutWq3RfQpt8WiAOPHGgaJCGt_nlL4zHQEfLJjg3mBvrr55gNYqLj9HimjIOI6rcyHuQTtZ2HfryxAtrbFvq2fwaeuxU3_0gH9ciM68qoSaL9DC2oCh4PqEnK3GvgBqIISOM61_h_vADa2YfYZ2TRnYHgQmMKG-jcCU_vkQI62PwW-oRNNPY4ja8Ja0KqEcJuOja3Es6JteiYNCpcWAIj1lk7wL_XT" alt="Curator's notebook with trading cards">
</div>
<div class="editorial__content">
<p class="eyebrow">Editorial feature</p>
<h2 class="editorial__title">The curator's notebook</h2>
<p class="editorial__body">This month, we delve into the provenance of the 1996 World Championship variants. Our head archivist explores why these particular specimens hold a unique gravitas in the modern collecting landscape.</p>
<a href="#" class="editorial__link">Read the full archive</a>
</div>
</div>
</section>
<!-- ═══ SECTION: products ═══ -->
<section class="products">
<div class="container">
<div class="section-head">
<div>
<p class="eyebrow">The Gallery</p>
<h2 class="products__title">Latest acquisitions</h2>
</div>
<a href="#" class="section-head__link">Browse all items →</a>
</div>
<div class="products__grid">
<article class="product-card">
<div class="product-card__image-wrap">
<span class="badge product-card__badge">Staff Pick</span>
<img class="product-card__image" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAnPHbl5oKDlyMQ69OsP09HRX16eP0rKGzPHXkHPN_vR20HOVeIFOFOcD0jHKGcBaL1fXNire4r7AfEjcrOe1mGjLcLdkAaX_4jWFJlZD0hvkW6XIEHgwhf1T1RiM75hfXUSPbj4ZIB7Q_SL1_vAonc-SZdcaF_ijoxYGbQfGLexxoh0UsB-whdYLlUgHlPaEWu--9grLvtXnMcTjHjulQL8Bb7kxJRyVWsUtwXy3tVDZjezFAd-OaHJL3-o2SVQUqQ466KoqVx" alt="Charizard ex">
</div>
<h3 class="product-card__title">Charizard ex</h3>
<p class="product-card__meta">Paldean Fates #234</p>
<p class="product-card__price">£145.00</p>
</article>
<article class="product-card">
<div class="product-card__image-wrap">
<img class="product-card__image" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAuZ-2tL7AAOW5axYZMX6KkmmfOGj2X7EKp2tH7hv7ZuQoKkYNgBetWvpIFRqZ885Vli_N7wQWk6cK3kicmt-0smwWnNecriHlIzEhEhA7_MKSWZubTotAM59AQrkMMCLOj4IIVU-LKQdaaju2dw-MSVyNBcLoKQab0ccvGXEYRkMuzfEm5aOfBswcyVGRHJGsoF6-hT3cGQEmh2mY6UkZgdEGKaX0s6wBdP8RsNGOmfPf1qFZeht4onoC7vrFzfJG63YyMp0UJ" alt="Mox Opal">
</div>
<h3 class="product-card__title">Mox Opal</h3>
<p class="product-card__meta">Scars of Mirrodin</p>
<p class="product-card__price">£85.50</p>
</article>
<article class="product-card">
<div class="product-card__image-wrap">
<span class="badge product-card__badge">Sale</span>
<img class="product-card__image" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDkuQ6H7wr1glrdC-AJvkeCZ8E_KmZKzpPub7GNQipTG9WJnyZcYCQxCWFh4eXxOeRxlaKcHBLp12JrU6x67_Yg0-tYFIJnVMo_nrL7dBKwBvoLLrPTGHhvoqYQfiejBQF9y2lvQountC5H9dt8HiGD3j4HQddTMvLIjlE57fDy80jaXCdScGibtrY0e0o1c9wDSbZroF6kC7hueHXI7I81Ee6VZJF4rmBbhxW3P9jnbT27_LfNeCIQq3v1wTf03BhlxEomD8cm" alt="Ursula's Quest">
</div>
<h3 class="product-card__title">Ursula's Quest</h3>
<p class="product-card__meta">Rise of the Floodborn</p>
<p class="product-card__price">£24.99 <span class="product-card__price-old">£32.00</span></p>
</article>
<article class="product-card">
<div class="product-card__image-wrap">
<img class="product-card__image" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAcvEV4h0WMzRDTiBdkgbqqmgKa5glEn64Cgas7fzVJRwB6jmUaDD-bSGU9G7GKfxw4lw_X9Q5cpos3N4ce-2KTjpn2Y1sXgcjH8lBImTqEC71WTV_XKs09e8BQhTQ3Of2tNrATbip37VJvOWMR2N60P-ufiguhLtsaQBNm5tXSRV2ZtmrrU77R2SdxQPPTFLmOm9luogyyAwOmPwxQwRsi0GwAf8xDs8zxsCNJLiRNRVBZafL6p28UW_0k00COt8IXVnxOweH-" alt="Phyrexian Tower">
</div>
<h3 class="product-card__title">Phyrexian Tower</h3>
<p class="product-card__meta">The List Variant</p>
<p class="product-card__price">£42.00</p>
</article>
<article class="product-card">
<div class="product-card__image-wrap">
<span class="badge product-card__badge">New</span>
<img class="product-card__image" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD1OLSguFux1Jn6wIIqbXu4-WOW7KgAmjKueUi1oCiHttDozVVuLs37vzrlcx6QfhfaTuC95poOd2IoKnQ50cKUcnKc6BTg0NLh6ZVocvCwmF6m7_RNkbTB3kQZqrHbpPWpA5h8HJK5CVCULtSvh9z7ueTPgWrsy7jXREvpGQiYFIoGfIALEtMFUm-QORE0M4x1SBvNcuL8FcJaHtTJSCjDY7VEpg4u_lCaAC1o4rcOso7nlrloYZvQoqK26Dpi42CRakdmvNeJ" alt="Elspeth Tirel">
</div>
<h3 class="product-card__title">Elspeth Tirel</h3>
<p class="product-card__meta">Scars of Mirrodin</p>
<p class="product-card__price">£18.50</p>
</article>
</div>
</div>
</section>
<!-- ═══ SECTION: vault ═══ -->
<section class="vault">
<div class="container">
<div class="vault__header">
<h2 class="vault__title">The Curator's Vault</h2>
<p class="vault__lede">Voices from the Inner Circle of collectors.</p>
</div>
<div class="vault__grid">
<blockquote class="testimonial">
<div class="testimonial__mark">“</div>
<p class="testimonial__quote">The curation here is unparalleled. Every acquisition feels like adding a piece of history to my collection.</p>
<div class="testimonial__author">
<p class="testimonial__name">Marcus Thorne</p>
<p class="testimonial__role">Legacy TCG Archivist</p>
</div>
</blockquote>
<blockquote class="testimonial">
<div class="testimonial__mark">“</div>
<p class="testimonial__quote">NERDWORKS is more than a shop; it's a museum where you can actually buy the artifacts.</p>
<div class="testimonial__author">
<p class="testimonial__name">Elena Voss</p>
<p class="testimonial__role">Grandmaster Collector</p>
</div>
</blockquote>
<blockquote class="testimonial">
<div class="testimonial__mark">“</div>
<p class="testimonial__quote">The attention to detail in packaging and provenance documentation is exactly what a high-end collector needs.</p>
<div class="testimonial__author">
<p class="testimonial__name">Jordan Chen</p>
<p class="testimonial__role">Board Game Historian</p>
</div>
</blockquote>
</div>
</div>
</section>
<!-- ═══ 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://lh3.googleusercontent.com/aida-public/AB6AXuAf-bEualVS5G_wLWzBwLsdZekGECnwV0nkibOzYtpXgb1w_ddWToHcMuTdDIgh6kWxG3_g6eVgQaJY7yV5On_ghchv8kKWHlKcV4N_5juSch1SmVOOP71LzE4zusNagiwHxtUPWMBecjlkba3XuBKWhZsJagpnx0PL1edNIwdnedvCI9BqZHuKzKAZ5jUwX6kfQe53iouecguZ2KwpV8fdTbCAnfgIbEi7hsGxIrLEX5irSEtEPfXfZVE_eIk1iZfIvdxfGeXD" alt="Pokémon">
<div class="category-tile__scrim"></div>
<div class="category-tile__content">
<p class="category-tile__title">Pokémon</p>
<p class="category-tile__count">2,450 items</p>
</div>
</a>
<a href="#" class="category-tile">
<img class="category-tile__image" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAC9q9St7s1DA677Oeqxu_BHFuOBpxifbqgIw6d4XdanF1SrZSa1A4eyKrR85cFKA8VtFGS1suCqrlkXvMyQvuOa8m954LZi3nqPLdSPsG0WaqrB0VjBqJYyzPs8X3R4uqmJEN5AaxCaFZOUUzuDchtdJOl3xTg_P6i0SLduDvEU1iGOGPsztA_gnBuWtNI5z2pggVr5ShrBLPqSRZ-yl3Ru0Ku2Rg3jdI02SUMrxKmgFuRfn3VFVYo3h-ynYG0TgPL6FSBJff4" alt="Magic: The Gathering">
<div class="category-tile__scrim"></div>
<div class="category-tile__content">
<p class="category-tile__title">Magic</p>
<p class="category-tile__count">1,820 items</p>
</div>
</a>
<a href="#" class="category-tile">
<img class="category-tile__image" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA-hzD9Wi6lfHmm7hasmU2Q5gHLy8BxZdnH6bkDvw1a5xlxCGCdKn72PUGRKkmIWkQKyquT1k_EW25ETMxhTifIh5EwsuHiWTS-xgNTEByAVeZhnLKRMADJLXYsKwTDMknjHxgnUJiSepAo6sgIdYTy21Dn2mmkEAPPP7Fs5qEox6B2V1ZOuaI4wJXGx_nmHSlyK6oe3Oe-hlBMzwO1Ej2MaejY8NnwC1-OpyGUXppKSLIYXItjllTO8eTHUV8OG2eWAZwlupMt" alt="Disney Lorcana">
<div class="category-tile__scrim"></div>
<div class="category-tile__content">
<p class="category-tile__title">Lorcana</p>
<p class="category-tile__count">640 items</p>
</div>
</a>
<a href="#" class="category-tile">
<img class="category-tile__image" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC9tVhIlwyt8YAmvwGUNMtNeGRiocA90jtTqeu109oO3P_vjH2phpbZE3OJPkN9v84hVkGgz3fSvf85ZGRK9qrGpNB4_flAcijKs_otZuXvjXI4DBVCDF8Az7WR1WfN665ui5r-0kVzMKkwPPB0W670HHz0RV_C7Kx_caCCRgrLaBkJEZOjeXwRghJBYWLVwYDM9KUDTzDg6Z1ftg4tRWoTX8L8_29NBc7gxOMOuDUsYabwErF2LV1MrCDV45RA_mqVkTYBscPj" alt="Board games">
<div class="category-tile__scrim"></div>
<div class="category-tile__content">
<p class="category-tile__title">Board games</p>
<p class="category-tile__count">420 items</p>
</div>
</a>
<a href="#" class="category-tile">
<img class="category-tile__image" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAxbxZjx2KDasjlsmcFflqpwn3DDfeV80ZdvSXUTcQOoJ0AjHKnXeFkIoakS1qF-_lVw10g5VHvq1QM4miPmW83-VwXeV33SfKSE4UrKNTs62lpIq8oxMNIVkDh7G5E1GDvwnT84RfxoSsh98ayFzAcJsNsz0VEOPXVOW5DfQEl__gVv7wbzSSiJokIN8G80g7fLDoKQVFnW6pdRmCkht7dE9h3rqIlzgKmYgZiHw3TFC9nF7uBUY3R84p2NXybXbBh1RQzmZht" alt="Warhammer & miniatures">
<div class="category-tile__scrim"></div>
<div class="category-tile__content">
<p class="category-tile__title">Warhammer</p>
<p class="category-tile__count">915 items</p>
</div>
</a>
<a href="#" class="category-tile">
<img class="category-tile__image" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBJ5sAWFZxqB8K9sC7KJ1wqnSY_GxNhz_ACSIRGfsSfcOaRyKYOTppMI1tw-PfdIY75Nn1SytFWjKM31vPmbqXHDIaG7jUd5WEbNycwAsglsMdegbXUSZLhmYHi9xkkG_k-fU5vzGTo7wTuSZOco8xR4yO5_WWGeeqfTZLu7UaxYHdEYqSFc0RDan6em4I__RH1uEByv1RU4ozfyiyBxQMOJ6gnAyZps9ImHE0SMP4Jb_vouuxoaAoCXyECe2sjQMpVkTRiY9KP" alt="Accessories & supplies">
<div class="category-tile__scrim"></div>
<div class="category-tile__content">
<p class="category-tile__title">Accessories</p>
<p class="category-tile__count">150 items</p>
</div>
</a>
</div>
</div>
</section>
<!-- ═══ 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 btn--dark">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"><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">Standard format tournament. Prizes for Top 4 finishers.</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"><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">Casual play and deck-building workshop for all ages.</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"><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">Draft play from the latest set. Limited to 16 seats.</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">Join the Inner Circle</h2>
<p class="circle__lede">Early access to limited editions, market insights, and collection care guides delivered once a week.</p>
<form class="newsletter" onsubmit="return false;">
<input class="newsletter__input" type="email" placeholder="curator@example.com">
<button class="newsletter__submit" type="submit">Subscribe</button>
</form>
</div>
</section>
<!-- ═══ SECTION: archive ═══ -->
<section class="archive">
<div class="container">
<div class="section-head">
<div>
<p class="eyebrow">Editorial</p>
<h2 class="archive__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://lh3.googleusercontent.com/aida-public/AB6AXuB8zK0gwcqetcpm60bwGoxb0RdMo27SemgIRurkx5DyjM18tvplByyQ7IC174I1DKxChZjVm8yXTHSTTV5y0kYmcb-5iHbP7H5MD1BS3LZP2BREDeIMM6pmakXvapiw1Jh7AwWLpwqY5fzMlvUjLXsdR7SX7SF41HXrLEdt75PikvMUxQgN7beyJK6Rru8nQOUJuAJH1waMWyz9rNG5IAnXq0ML40Yn8NObyVSTuJeNGhx9o_wD3k8y4SE4yR49vPqlyyQI2JMW" alt="Market trends">
</div>
<span class="editorial-card__eyebrow">Market Trends</span>
<h3 class="editorial-card__title">The rise of Neo-Vintage.</h3>
<p class="editorial-card__excerpt">Why early 2000s sets are becoming the new blue-chip investment for modern collectors.</p>
</article>
<article class="editorial-card">
<div class="editorial-card__image-wrap">
<img class="editorial-card__image" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAG-UB97ib93ixb71ZIFP4JtIXNq-ZXRMhqsWzDJ9FMCJOVxolC0UWIU_rj-Q874GK2dcR8h4CUOIyC1MYNkxUqyPj9NnHhcdqXxGfG6MZwQvHfLPEiyEYg8y7N2FjHFeeiY9nfvp6TMYpTvw4gJ9Kf398X7beDtBrjKTYLUdi3gT3WTsZd4RbxOTJGqYE925H_rBTk33BrA-RMKMQNY4pLTnmQFeWrLcZRp2_W6tQd3AfEeSkx4oyv4zHeLbo6xxWO6Lac4ZPH" alt="Care guide">
</div>
<span class="editorial-card__eyebrow">Care Guide</span>
<h3 class="editorial-card__title">Maintaining humidity levels.</h3>
<p class="editorial-card__excerpt">Essential tips for preserving paper integrity and foil lustre in varied climates.</p>
</article>
<article class="editorial-card">
<div class="editorial-card__image-wrap">
<img class="editorial-card__image" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBcl2DlazTnPKRVe1DfU2bDUeFnju_F1Fzx7jrLfizPi5eepvGWh9QFxBYg9OWV6PWZeaIFNMYEaLA7N1D3DQP23v26KyJy79yyHspyZzMY_fBvF6czg-hKuvxrHCHqCRmpXxFiqKmvaB8cdts7JwPz0Z8LI5PQZH-QeRJvt4wRpKMRFMTSEy6hC_TmuBn8RZFdc5U5yLJ8e-Fqps3QeCCihWts8eJ1zvxlYcyBnGn0pTtqrfkEZC8Ui1dEc0g-_qjUUPARWH_h" alt="Deep dive">
</div>
<span class="editorial-card__eyebrow">Deep Dive</span>
<h3 class="editorial-card__title">The physics of the 'Dot'.</h3>
<p class="editorial-card__excerpt">A technical analysis of printing techniques used to verify the authenticity of 90s artifacts.</p>
</article>
</div>
</div>
</section>
<!-- ═══ SECTION: site-footer ═══ -->
<footer class="site-footer">
<div class="site-footer__top">
<div>
<p class="site-footer__wordmark">NERDWORKS</p>
<p class="site-footer__mission">Preserving the digital and physical artifacts of our culture since 2014.</p>
</div>
<div>
<p class="site-footer__col-title">Navigation</p>
<ul class="site-footer__list">
<li><a href="#">Shop</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Support</a></li>
</ul>
</div>
<div>
<p class="site-footer__col-title">Legal</p>
<ul class="site-footer__list">
<li><a href="#">Terms</a></li>
<li><a href="#">Privacy</a></li>
</ul>
</div>
<div>
<p class="site-footer__col-title">Connect</p>
<div class="site-footer__socials">
<a href="#" class="site-footer__social">
<svg viewBox="0 0 24 24"><path d="M4 4l11.7 8L4 20V4z"/></svg>
</a>
<a href="#" class="site-footer__social">
<svg viewBox="0 0 24 24"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><path d="m22 6-10 7L2 6"/></svg>
</a>
</div>
</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>
</footer>
</body>
</html>