# Nerdworks Design System — Prototype Tokens **Purpose:** hand-authored CSS token set that the code generator applies on top of deep-scan structural output. Prevents per-element measurement errors (font size, radius, spacing) from accumulating into a visually off prototype. Every token is a semantic alias — the scale is authored, not measured. **Applies to:** all Nerdworks prototypes (MN4 + future TN series). One design system per brand; applied uniformly. --- ## Typography scale Based on a modular type scale with an ~1.25× ratio anchored at 16 px body. Feels balanced for editorial/collector content without being too stretched. | Token | Value | Role | |---|---|---| | `--fs-display` | 112 px | Hero display heading (S2 "Curated for Collectors") | | `--fs-h1` | 72 px | Primary section headings (S5, S6, S7, S8 section titles) | | `--fs-h2` | 56 px | Secondary section headings (S3, S4, S9 section titles) | | `--fs-h3` | 40 px | Category tile titles, testimonial names, event titles | | `--fs-h4` | 28 px | Card titles (product, editorial, event cards) | | `--fs-body-lg` | 20 px | Hero lede, section subtitles | | `--fs-body` | 16 px | Default body copy | | `--fs-body-sm` | 14 px | Card body, meta text | | `--fs-eyebrow` | 12 px | Uppercase eyebrows, badges, category labels | | `--fs-micro` | 11 px | Copyright, fine print | ## Font weights | Token | Value | Usage | |---|---|---| | `--fw-regular` | 400 | Body copy, card descriptions, lede text | | `--fw-medium` | 500 | Card titles, nav links | | `--fw-semibold` | 600 | Eyebrows, button text, action links | | `--fw-bold` | 700 | Section headings (h1-h3) | | `--fw-heavy` | 800 | Display heading (hero h1 only) | ## Line heights | Token | Value | Usage | |---|---|---| | `--lh-tight` | 1.05 | Display heading, h1 (tight optical kerning for bold large type) | | `--lh-heading` | 1.15 | h2, h3, h4 | | `--lh-body` | 1.5 | Body copy, paragraphs, lede | | `--lh-card` | 1.35 | Card titles + descriptions (slightly tighter than body) | | `--lh-ui` | 1.2 | Buttons, nav links, eyebrows | ## Letter spacing | Token | Value | Usage | |---|---|---| | `--ls-tight` | -0.02em | Display heading | | `--ls-heading` | -0.01em | h1-h4 | | `--ls-normal` | 0 | Body | | `--ls-wide` | 0.08em | Eyebrows, button text | | `--ls-wider` | 0.14em | Category labels, footer nav | | `--ls-widest` | 0.2em | Nav links, copyright | ## Border radius scale **Critical for the Nerdworks look:** modest rounded rectangles, never pills. Buttons and form fields use 8 px (rounded rect), not `border-radius: 999px` or `50%`. | Token | Value | Usage | |---|---|---| | `--radius-none` | 0 | Dividers, full-bleed sections | | `--radius-sm` | 4 px | Badges (STAFF PICK, date chips) | | `--radius-md` | 8 px | Buttons, form inputs, small UI elements | | `--radius-lg` | 12 px | Product cards, editorial cards, event cards | | `--radius-xl` | 16 px | Category tiles, large feature images | | `--radius-2xl` | 24 px | Hero card illustration, testimonial cards | **Do not use `border-radius: 999px`, `50%`, or anything suggesting pill shape** unless a specific element is explicitly circular (avatars, icon buttons). Nerdworks is round-rectangle not pill. ## Spacing scale Used for padding, margins, gaps, and vertical rhythm. | Token | Value | Usage | |---|---|---| | `--space-1` | 4 px | Hairlines, tight internal padding | | `--space-2` | 8 px | Small gaps, tight padding | | `--space-3` | 12 px | Small component padding | | `--space-4` | 16 px | Card inner padding (default), input padding | | `--space-5` | 24 px | Card gaps, heading → subheading | | `--space-6` | 32 px | Large card inner padding, button internal padding | | `--space-7` | 48 px | Grid gaps (horizontal), section internal spacing | | `--space-8` | 64 px | Grid gaps (vertical), heading block → content | | `--space-9` | 96 px | Section padding top/bottom, heading block margins | | `--space-10` | 128 px | Large hero padding, section breakers | ## Brand colour tokens Confirmed via deep-scan + GT palette. Section bgs are exact (8/10 matched GT). Accents are hand-authored based on the mockup's visual language. ### Section backgrounds | Token | Value | Usage | |---|---|---| | `--bg-nav` | #06251D | Navigation bar | | `--bg-hero` | #0B0D0B | Hero banner | | `--bg-editorial` | #28302A | Editorial Feature, From the Archive (S3, S9) | | `--bg-acquisitions` | #101411 | Latest Acquisitions, Explore the Archive (S4, S6) | | `--bg-vault` | #266038 | The Curator's Vault (S5) | | `--bg-newsletter` | #25653C | Join the Inner Circle (S8) | | `--bg-events` | #F8F9F8 | This Week at the Shop — WHITE section (S7) | | `--bg-footer` | #022C22 | Footer | ### Card surfaces | Token | Value | Usage | |---|---|---| | `--bg-card-product` | #1C2520 | S4 product cards (raised) | | `--bg-card-testimonial` | #1F4F2E | S5 testimonial cards (raised on green) | | `--bg-card-event` | #FFFFFF | S7 event cards (white on white section with hairline) | | `--border-card-event` | #E4E8E6 | S7 event card hairline border | ### Text colours | Token | Value | Usage | |---|---|---| | `--text-primary` | #F2F5F2 | Primary text on dark bgs (headings, body) | | `--text-on-light` | #0E1311 | Primary text on white (S7 Events) | | `--text-muted` | #8A9891 | Body, secondary text on dark | | `--text-micro` | #6B8278 | Footer nav, copyright | | `--text-cream` | #E8E4D6 | Brand wordmark, warm-biased light text | ### Brand accents | Token | Value | Usage | |---|---|---| | `--accent-green-primary` | #1F8A4C | Primary CTAs (Hero "Enter the Vault") | | `--accent-green-link` | #4CAF7A | Eyebrows, link accents on dark | | `--accent-green-underline` | #4E8C6A | S6 heading accent underline | | `--accent-mint` | #7FD9A0 | Secondary CTA fill (S8 SUBSCRIBE) | | `--accent-forest-text` | #0F3A24 | Text on mint buttons | | `--accent-teal` | #3FE0C4 | Badges (STAFF PICK), holo card accents | | `--accent-coral` | #E87A5D | Product prices (S4) | | `--accent-gold` | #B89968 | Editorial card eyebrows (S9) | ### Form surfaces | Token | Value | Usage | |---|---|---| | `--bg-form-input` | #12331F | S8 email input (inset dark green on green section) | | `--text-form-placeholder` | #8FBAA0 | Input placeholder text on dark inset | ## Applied mapping per section How the tokens map to the code generator output for each section: ### S2 Hero - Display heading: `font-size: var(--fs-display)` (112 px), `font-weight: var(--fw-heavy)`, `line-height: var(--lh-tight)`, `letter-spacing: var(--ls-tight)` - Eyebrow: `font-size: var(--fs-eyebrow)`, `font-weight: var(--fw-semibold)`, `text-transform: uppercase`, `letter-spacing: var(--ls-wide)`, `color: var(--accent-green-link)` - Lede: `font-size: var(--fs-body-lg)`, `color: var(--text-muted)`, `line-height: var(--lh-body)` - CTA primary: `background: var(--accent-green-primary)`, `color: var(--text-primary)`, `border-radius: var(--radius-md)` (NOT pill), `padding: var(--space-4) var(--space-6)`, `font-size: var(--fs-body)`, `font-weight: var(--fw-semibold)`, `letter-spacing: var(--ls-wide)` - CTA secondary (ghost): transparent bg, 1px border in `--text-primary`, same radius + spacing as primary ### S3 Editorial - h2: `--fs-h2` (56px), `--fw-bold`, `--lh-heading`, `--ls-heading` - Body: `--fs-body`, `--lh-body`, `--text-muted` - "READ THE FULL ARCHIVE" link: `--fs-eyebrow`, `--fw-semibold`, uppercase, `--ls-wide`, `--accent-green-link` - Feature image: `border-radius: var(--radius-xl)` (16px) ### S4 Latest Acquisitions - Eyebrow "THE GALLERY": `--fs-eyebrow`, `--fw-semibold`, uppercase, `--ls-wide`, `--accent-green-link` - h2 "Latest Acquisitions": `--fs-h2` (56px), `--fw-bold` - Right-aligned link "BROWSE ALL ITEMS": eyebrow style + `--accent-green-link` - Product cards: - `background: var(--bg-card-product)` (#1C2520 — subtle raise from section) - `border-radius: var(--radius-lg)` (12px) - `padding: var(--space-4)` (16px inner padding) - Card image: top-inside-card, `border-radius: var(--radius-md)` (matches card minus padding) - Card title: `--fs-h4` (28px), `--fw-medium`, `--text-primary` - Card price: `--fs-body-lg` (20px), `--fw-semibold`, `color: var(--accent-coral)` (#E87A5D) - STAFF PICK badge: `background: var(--accent-teal)`, `color: var(--accent-forest-text)`, `border-radius: var(--radius-sm)` (4px), `padding: 4px 8px`, `--fs-eyebrow`, uppercase ### S5 Curator's Vault - h1 "The Curator's Vault": `--fs-h1` (72px), `--fw-bold`, centred - Subheading (italic lede): `--fs-body-lg`, `--fw-regular`, italic - Testimonial cards: - `background: var(--bg-card-testimonial)` (#1F4F2E) - `border-radius: var(--radius-2xl)` (24px) - Quote text: `--fs-body`, italic, `--lh-body` - Attribution name: `--fs-h4` (28px), `--fw-semibold` - Avatar: 48px circle, borderless ### S6 Explore the Archive - h1 "Explore the Archive": `--fs-h1` (72px), `--fw-bold`, left-aligned - Accent underline: `--accent-green-underline` (#4E8C6A), ~60px wide × 2-3px thick, below heading - Category tiles: - Full-bleed image (background image in CSS) - `border-radius: var(--radius-xl)` (16px) - Gradient scrim at bottom: `linear-gradient(transparent 50%, rgba(0,0,0,0.85) 100%)` - Tile title: `--fs-h3` (40px), `--fw-bold`, white, overlaid bottom-left - Tile subtitle (uppercase): `--fs-eyebrow`, `--fw-semibold`, `--ls-wider`, `--accent-green-link` (the green accent missing in v6!) - Text block: positioned absolutely in bottom portion of tile with `padding: var(--space-5)` ### S7 This Week at the Shop - Eyebrow "SOCIAL HUB": `--fs-eyebrow`, `--accent-green-link` - h1 "This week at the shop.": `--fs-h1` (72px), `--fw-bold`, `--text-on-light` (dark text on white section) - "FULL CALENDAR" button: `background: var(--text-on-light)` (dark), `color: var(--bg-events)` (light), `border-radius: var(--radius-md)` (8px NOT pill), `padding: var(--space-3) var(--space-5)` - Event cards: - `background: var(--bg-card-event)` (#FFFFFF) - `border: 1px solid var(--border-card-event)` (#E4E8E6) - `border-radius: var(--radius-lg)` (12px) - Date badge: `background: var(--bg-editorial)` or similar dark, `color: white`, `border-radius: var(--radius-sm)`, small rectangular - Event title: `--fs-h4` (28px), `--fw-bold`, `--text-on-light` - Event meta: `--fs-body-sm` (14px), `--text-muted` - "JOIN EVENT" link: `--fs-eyebrow`, `--fw-semibold`, uppercase, `--accent-green-link` ### S8 Join the Inner Circle - h1 "Join the Inner Circle": `--fs-h1` (72px), `--fw-bold`, centred, white - Lede: `--fs-body-lg`, `--text-primary` at 0.8 opacity - **Form row: TWO separate rectangles with a gap between them.** NOT joined. NOT pill-shaped. - Email input: `background: var(--bg-form-input)` (#12331F), `color: var(--text-primary)`, `border-radius: var(--radius-md)` (8px — rounded rectangle), `padding: var(--space-4) var(--space-5)`, `height: ~64px`, `width: ~560px`, placeholder colour `--text-form-placeholder` - Gap between input and button: `--space-3` (12px) or `--space-4` (16px) - Submit button: `background: var(--accent-mint)` (#7FD9A0), `color: var(--accent-forest-text)` (#0F3A24), `border-radius: var(--radius-md)` (8px — rounded rectangle, NOT pill), `padding: var(--space-4) var(--space-6)`, `height: ~64px`, `width: ~180px`, `font-weight: var(--fw-semibold)`, uppercase, `--ls-wide` ### S9 From the Archive (NOT "Insights") - Eyebrow: `--fs-eyebrow`, `--accent-gold` (#B89968) — warm gold accent per naming pass - h2 "From the Archive": `--fs-h2` (56px), `--fw-bold` - Right-aligned "VIEW INSIGHTS" link: eyebrow style + `--accent-green-link` - Editorial cards (chromeless — no card bg, no border): - Image: `border-radius: var(--radius-lg)` (12px) - Card eyebrow (MARKET TRENDS / CARE GUIDE / DEEP DIVE): `--fs-eyebrow`, `--accent-gold`, uppercase, `--ls-wider` - Card title: `--fs-h4` (28px), `--fw-medium`, `--text-primary`, `--lh-card` - Card excerpt: `--fs-body`, `--text-muted`, `--lh-body` --- ## Application rule Every CSS property value in the prototype HTML's inline `<style>` block MUST reference a token from this document. Raw pixel values are only permitted for: - Grid template columns (where they come from deep-scan region bounds) - Section min-heights (from deep-scan section heights) - Container max-width (1440px, fixed) Everything else — fonts, radii, spacing, colours — uses tokens. If a design system token doesn't exist for a value the code generator needs, **don't fabricate it** — add a comment noting the gap and we extend the system.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Nerdworks — Homepage Showcase Dark (v7, design-system refactor)</title>
<style>
/* ============================================================
Nerdworks Homepage Showcase Dark — v7
Refactor of v6. Structure preserved; style block rewritten
to reference tokens from nerdworks-design-system.md.
Raw pixel values only permitted for:
- Grid template columns / widths from deep-scan
- Section min-heights from deep-scan
- Container max-width (1440px)
============================================================ */
:root {
/* --- Typography scale --- */
--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;
/* --- Font weights --- */
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--fw-heavy: 800;
/* --- Line heights --- */
--lh-tight: 1.05;
--lh-heading: 1.15;
--lh-body: 1.5;
--lh-card: 1.35;
--lh-ui: 1.2;
/* --- Letter spacing --- */
--ls-tight: -0.02em;
--ls-heading: -0.01em;
--ls-normal: 0;
--ls-wide: 0.08em;
--ls-wider: 0.14em;
--ls-widest: 0.2em;
/* --- Border radius scale --- */
--radius-none: 0;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-2xl: 24px;
/* --- Spacing scale --- */
--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;
/* --- Section backgrounds --- */
--bg-nav: #06251D;
--bg-hero: #0B0D0B;
--bg-editorial: #28302A;
--bg-acquisitions: #101411;
--bg-vault: #266038;
--bg-newsletter: #25653C;
--bg-events: #F8F9F8;
--bg-footer: #022C22;
/* --- Card surfaces --- */
--bg-card-product: #1C2520;
--bg-card-testimonial: #1F4F2E;
--bg-card-event: #FFFFFF;
--border-card-event: #E4E8E6;
/* --- Text colours --- */
--text-primary: #F2F5F2;
--text-on-light: #0E1311;
--text-muted: #8A9891;
--text-micro: #6B8278;
--text-cream: #E8E4D6;
/* --- Brand accents --- */
--accent-green-primary: #1F8A4C;
--accent-green-link: #4CAF7A;
--accent-green-underline: #4E8C6A;
--accent-mint: #7FD9A0;
--accent-forest-text: #0F3A24;
--accent-teal: #3FE0C4;
--accent-coral: #E87A5D;
--accent-gold: #B89968;
/* --- Form surfaces --- */
--bg-form-input: #12331F;
--text-form-placeholder: #8FBAA0;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: var(--bg-hero);
color: var(--text-primary);
line-height: var(--lh-body);
}
.container {
max-width: 1440px;
margin: 0 auto;
padding-left: 56px;
padding-right: 56px;
}
/* ============================================================
S1 — Navigation
============================================================ */
#s1-nav {
min-height: 90px;
background: var(--bg-nav);
color: var(--text-primary);
padding-top: var(--space-6);
padding-bottom: var(--space-6);
}
#s1-nav .container {
display: flex;
align-items: center;
gap: var(--space-7);
height: 27px;
}
#s1-nav .wordmark {
font-size: var(--fs-body-sm);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-wider);
background: var(--text-primary);
color: var(--bg-nav);
padding: var(--space-1) var(--space-3);
}
#s1-nav .nav-links {
display: flex;
gap: var(--space-7);
margin-left: auto;
margin-right: auto;
}
#s1-nav .nav-links a {
color: var(--text-muted);
text-decoration: none;
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
font-weight: var(--fw-semibold);
}
#s1-nav .nav-icons {
display: flex;
gap: var(--space-4);
margin-left: auto;
}
#s1-nav .nav-icon {
background: transparent;
border: 0;
color: var(--text-primary);
font-size: var(--fs-body-sm);
cursor: default;
}
/* ============================================================
S2 — Hero
============================================================ */
#s2-hero {
min-height: 1058px;
background: var(--bg-hero);
color: var(--text-primary);
padding-top: 267px;
padding-bottom: 0;
}
#s2-hero .hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-7);
align-items: center;
}
#s2-hero .hero-copy {
max-width: 612px;
}
#s2-hero .eyebrow {
font-size: var(--fs-eyebrow);
color: var(--accent-green-link);
text-transform: uppercase;
letter-spacing: var(--ls-wide);
margin: 0 0 var(--space-5) 0;
font-weight: var(--fw-semibold);
line-height: var(--lh-ui);
}
#s2-hero h1 {
/* HARD-OVERRIDE: display heading must be 112px */
font-size: var(--fs-display);
line-height: var(--lh-tight);
font-weight: var(--fw-heavy);
letter-spacing: var(--ls-tight);
color: var(--text-primary);
margin: 0 0 var(--space-5) 0;
}
#s2-hero p.body {
font-size: var(--fs-body-lg);
line-height: var(--lh-body);
color: var(--text-muted);
margin: 0 0 var(--space-7) 0;
max-width: 556px;
}
#s2-hero .cta-row {
display: flex;
gap: var(--space-5);
align-items: center;
}
#s2-hero .btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--accent-green-primary);
color: var(--text-primary);
padding: var(--space-4) var(--space-6);
border-radius: var(--radius-md);
border: 0;
font-size: var(--fs-body);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
text-decoration: none;
font-weight: var(--fw-semibold);
line-height: var(--lh-ui);
}
#s2-hero .btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
color: var(--text-primary);
padding: var(--space-4) var(--space-6);
border-radius: var(--radius-md);
border: 1px solid var(--text-primary);
font-size: var(--fs-body);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
text-decoration: none;
font-weight: var(--fw-semibold);
line-height: var(--lh-ui);
}
#s2-hero .hero-media {
width: 421px;
height: 428px;
background: #091114;
border-radius: var(--radius-2xl);
justify-self: end;
overflow: hidden;
}
#s2-hero .hero-media img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--radius-2xl);
}
/* ============================================================
S3 — Editorial Feature
============================================================ */
#s3-editorial {
min-height: 669px;
background: var(--bg-editorial);
color: var(--text-primary);
padding-top: 147px;
padding-bottom: 0;
}
#s3-editorial .ed-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-8);
align-items: center;
}
#s3-editorial .eyebrow {
font-size: var(--fs-eyebrow);
color: var(--accent-green-link);
text-transform: uppercase;
letter-spacing: var(--ls-wide);
margin: 0 0 var(--space-5) 0;
font-weight: var(--fw-semibold);
line-height: var(--lh-ui);
}
#s3-editorial h2 {
font-size: var(--fs-h2);
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
font-weight: var(--fw-bold);
color: var(--text-primary);
margin: 0 0 var(--space-6) 0;
max-width: 613px;
}
#s3-editorial p.body {
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--text-muted);
margin: 0 0 var(--space-6) 0;
max-width: 595px;
}
#s3-editorial .action-link {
display: inline-block;
font-size: var(--fs-eyebrow);
color: var(--accent-green-link);
text-transform: uppercase;
letter-spacing: var(--ls-wide);
text-decoration: none;
font-weight: var(--fw-semibold);
line-height: var(--lh-ui);
}
#s3-editorial .feature-image {
width: 628px;
height: 352px;
background: #173544;
border-radius: var(--radius-xl);
justify-self: end;
overflow: hidden;
}
#s3-editorial .feature-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* ============================================================
S4 — Latest Acquisitions
============================================================ */
#s4-products {
min-height: 838px;
background: var(--bg-acquisitions);
color: var(--text-primary);
padding-top: 145px;
padding-bottom: 0;
}
#s4-products .header-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: var(--space-8);
}
#s4-products .eyebrow {
font-size: var(--fs-eyebrow);
color: var(--accent-green-link);
text-transform: uppercase;
letter-spacing: var(--ls-wide);
margin: 0 0 var(--space-4) 0;
font-weight: var(--fw-semibold);
line-height: var(--lh-ui);
}
#s4-products h2 {
font-size: var(--fs-h2);
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
font-weight: var(--fw-bold);
color: var(--text-primary);
margin: 0;
}
#s4-products .action-link {
font-size: var(--fs-eyebrow);
color: var(--accent-green-link);
text-transform: uppercase;
letter-spacing: var(--ls-wide);
text-decoration: none;
font-weight: var(--fw-semibold);
line-height: var(--lh-ui);
}
#s4-products .product-grid {
display: grid;
grid-template-columns: repeat(5, 244px);
gap: 29px;
justify-content: space-between;
}
.product-card {
width: 244px;
height: 401px;
background: var(--bg-card-product);
border-radius: var(--radius-lg);
padding: var(--space-4);
position: relative;
display: flex;
flex-direction: column;
}
.product-card .card-image {
width: 100%;
height: 220px;
border-radius: var(--radius-md);
margin-bottom: var(--space-4);
}
.product-card .card-title {
font-size: var(--fs-h4);
color: var(--text-primary);
margin: 0 0 var(--space-3) 0;
font-weight: var(--fw-medium);
line-height: var(--lh-card);
}
.product-card .card-price {
font-size: var(--fs-body-lg);
color: var(--accent-coral);
margin: 0;
font-weight: var(--fw-semibold);
margin-top: auto;
line-height: var(--lh-ui);
}
.product-card .staff-pick {
position: absolute;
top: var(--space-4);
left: var(--space-4);
background: var(--accent-teal);
color: var(--accent-forest-text);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
font-weight: var(--fw-semibold);
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
line-height: var(--lh-ui);
}
/* ============================================================
S5 — The Curator's Vault
============================================================ */
#s5-testimonials {
min-height: 1131px;
background: var(--bg-vault);
color: var(--text-primary);
padding-top: 148px;
padding-bottom: 181px;
}
#s5-testimonials .heading-block {
text-align: center;
margin-bottom: var(--space-9);
}
#s5-testimonials h1 {
font-size: var(--fs-h1);
color: var(--text-primary);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-tight);
margin: 0 0 var(--space-5) 0;
line-height: var(--lh-tight);
}
#s5-testimonials .subheading {
font-size: var(--fs-body-lg);
color: var(--text-primary);
margin: 0;
font-weight: var(--fw-regular);
font-style: italic;
line-height: var(--lh-body);
opacity: 0.85;
}
#s5-testimonials .testimonial-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 131px;
}
.testimonial-card {
background: var(--bg-card-testimonial);
border-radius: var(--radius-2xl);
padding: var(--space-6);
display: flex;
flex-direction: column;
min-height: 284px;
}
.testimonial-card .card-image {
width: 100%;
height: 180px;
border-radius: var(--radius-md);
margin-bottom: var(--space-5);
}
.testimonial-card blockquote {
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--text-primary);
margin: 0 0 var(--space-6) 0;
font-style: italic;
}
.testimonial-card .divider {
height: 1px;
background: rgba(242, 245, 242, 0.2);
margin: 0 0 var(--space-5) 0;
}
.testimonial-card .author-row {
display: flex;
align-items: center;
gap: var(--space-3);
}
.testimonial-card .avatar {
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--accent-mint);
}
.testimonial-card .author-name {
font-size: var(--fs-h4);
color: var(--text-primary);
font-weight: var(--fw-semibold);
margin: 0 0 var(--space-1) 0;
line-height: var(--lh-card);
}
.testimonial-card .author-role {
font-size: var(--fs-eyebrow);
color: var(--text-primary);
opacity: 0.75;
margin: 0;
text-transform: uppercase;
letter-spacing: var(--ls-wide);
font-weight: var(--fw-semibold);
line-height: var(--lh-ui);
}
/* ============================================================
S6 — Explore the Archive
============================================================ */
#s6-categories {
min-height: 1176px;
background: var(--bg-acquisitions);
color: var(--text-primary);
padding-top: 151px;
padding-bottom: 0;
}
#s6-categories h1 {
font-size: var(--fs-h1);
color: var(--text-primary);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-tight);
margin: 0 0 var(--space-4) 0;
line-height: var(--lh-tight);
}
#s6-categories .heading-underline {
width: 60px;
height: 3px;
background: var(--accent-green-underline);
margin: 0 0 var(--space-9) 0;
border: 0;
}
#s6-categories .tile-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 38px;
}
.category-tile {
position: relative;
width: 100%;
border-radius: var(--radius-xl);
overflow: hidden;
background-size: cover;
background-position: center;
}
.category-tile.top {
height: 415px;
}
.category-tile.bottom {
height: 284px;
}
.category-tile::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.85) 100%);
pointer-events: none;
}
.category-tile .tile-label {
position: absolute;
left: var(--space-5);
right: var(--space-5);
bottom: var(--space-5);
z-index: 2;
color: #FFFFFF;
}
.category-tile .tile-title {
font-size: var(--fs-h3);
margin: 0 0 var(--space-1) 0;
font-weight: var(--fw-bold);
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
color: #FFFFFF;
}
.category-tile .tile-meta {
font-size: var(--fs-eyebrow);
margin: 0;
color: var(--accent-green-link);
text-transform: uppercase;
letter-spacing: var(--ls-wider);
font-weight: var(--fw-semibold);
line-height: var(--lh-ui);
}
/* ============================================================
S7 — This week at the shop
============================================================ */
#s7-events {
min-height: 647px;
background: var(--bg-events);
color: var(--text-on-light);
padding-top: 146px;
padding-bottom: 0;
}
#s7-events .header-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: var(--space-8);
}
#s7-events .eyebrow {
font-size: var(--fs-eyebrow);
color: var(--accent-green-link);
text-transform: uppercase;
letter-spacing: var(--ls-wide);
margin: 0 0 var(--space-4) 0;
font-weight: var(--fw-semibold);
line-height: var(--lh-ui);
}
#s7-events h1 {
font-size: var(--fs-h1);
color: var(--text-on-light);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-tight);
margin: 0;
line-height: var(--lh-tight);
max-width: 520px;
}
#s7-events .btn-dark-pill {
background: var(--text-on-light);
color: var(--bg-events);
padding: var(--space-3) var(--space-5);
border-radius: var(--radius-md);
border: 0;
font-size: var(--fs-body);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
font-weight: var(--fw-semibold);
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: var(--lh-ui);
}
#s7-events .event-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-7);
}
.event-card {
background: var(--bg-card-event);
border: 1px solid var(--border-card-event);
border-radius: var(--radius-lg);
padding: var(--space-7);
display: grid;
grid-template-columns: 72px 1fr;
gap: var(--space-6);
align-items: start;
min-height: 180px;
}
.event-card .date-badge {
background: var(--bg-editorial);
color: #FFFFFF;
border-radius: var(--radius-sm);
padding: var(--space-3) var(--space-2);
text-align: center;
width: 72px;
height: 72px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.event-card .date-day {
font-size: var(--fs-eyebrow);
text-transform: uppercase;
letter-spacing: var(--ls-wide);
font-weight: var(--fw-semibold);
color: var(--accent-green-link);
line-height: var(--lh-ui);
}
.event-card .date-num {
font-size: var(--fs-h4);
font-weight: var(--fw-bold);
color: #FFFFFF;
line-height: var(--lh-tight);
margin-top: var(--space-1);
}
.event-card .event-body {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.event-card .event-title {
font-size: var(--fs-h4);
font-weight: var(--fw-bold);
color: var(--text-on-light);
margin: 0;
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
}
.event-card .event-meta {
font-size: var(--fs-body-sm);
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: var(--ls-wide);
margin: 0;
font-weight: var(--fw-medium);
line-height: var(--lh-ui);
}
.event-card .event-action {
font-size: var(--fs-eyebrow);
color: var(--accent-green-link);
text-transform: uppercase;
letter-spacing: var(--ls-wide);
text-decoration: none;
font-weight: var(--fw-semibold);
margin-top: var(--space-4);
display: inline-block;
line-height: var(--lh-ui);
}
/* ============================================================
S8 — Join the Inner Circle
============================================================ */
#s8-newsletter {
min-height: 444px;
background: var(--bg-newsletter);
color: var(--text-primary);
padding-top: 113px;
padding-bottom: 0;
text-align: center;
}
#s8-newsletter h1 {
font-size: var(--fs-h1);
color: var(--text-primary);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-tight);
margin: 0 0 var(--space-6) 0;
line-height: var(--lh-tight);
}
#s8-newsletter .subheading {
font-size: var(--fs-body-lg);
color: var(--text-primary);
max-width: 815px;
margin: 0 auto var(--space-7) auto;
line-height: var(--lh-body);
opacity: 0.8;
}
/* Form: two SEPARATE rectangles with a gap between them.
NOT joined. NOT pill-shaped. */
#s8-newsletter .form-row {
display: flex;
gap: var(--space-3);
justify-content: center;
align-items: center;
margin: 0 auto;
background: transparent;
border-radius: 0;
overflow: visible;
width: auto;
height: auto;
}
#s8-newsletter .form-row input[type="email"] {
width: 560px;
height: 64px;
background: var(--bg-form-input);
border: 0;
outline: 0;
color: var(--text-primary);
padding: var(--space-4) var(--space-5);
font-size: var(--fs-body);
font-family: inherit;
border-radius: var(--radius-md);
line-height: var(--lh-ui);
}
#s8-newsletter .form-row input[type="email"]::placeholder {
color: var(--text-form-placeholder);
opacity: 1;
}
#s8-newsletter .form-row button {
width: 180px;
height: 64px;
background: var(--accent-mint);
color: var(--accent-forest-text);
border: 0;
font-size: var(--fs-body);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
font-weight: var(--fw-semibold);
cursor: default;
border-radius: var(--radius-md);
padding: var(--space-4) var(--space-6);
line-height: var(--lh-ui);
}
/* ============================================================
S9 — From the Archive
============================================================ */
#s9-archive {
min-height: 827px;
background: var(--bg-editorial);
color: var(--text-primary);
padding-top: 150px;
padding-bottom: 0;
}
#s9-archive .header-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: var(--space-8);
}
#s9-archive h2 {
font-size: var(--fs-h2);
color: var(--text-primary);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-heading);
margin: 0;
line-height: var(--lh-heading);
}
#s9-archive .action-link {
font-size: var(--fs-eyebrow);
color: var(--accent-green-link);
text-transform: uppercase;
letter-spacing: var(--ls-wide);
text-decoration: none;
font-weight: var(--fw-semibold);
line-height: var(--lh-ui);
}
#s9-archive .article-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 47px;
}
.editorial-card {
/* chromeless — no bg, no border */
background: transparent;
border: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.editorial-card .card-image {
width: 100%;
height: 230px;
border-radius: var(--radius-lg);
margin-bottom: var(--space-6);
}
.editorial-card .card-tag {
font-size: var(--fs-eyebrow);
color: var(--accent-gold);
text-transform: uppercase;
letter-spacing: var(--ls-wider);
font-weight: var(--fw-semibold);
margin: 0 0 var(--space-4) 0;
line-height: var(--lh-ui);
}
.editorial-card .card-title {
font-size: var(--fs-h4);
color: var(--text-primary);
font-weight: var(--fw-medium);
margin: 0 0 var(--space-4) 0;
line-height: var(--lh-card);
letter-spacing: var(--ls-heading);
}
.editorial-card .card-body {
font-size: var(--fs-body);
color: var(--text-muted);
line-height: var(--lh-body);
margin: 0;
}
/* ============================================================
S10 — Footer
============================================================ */
#s10-footer {
min-height: 173px;
background: var(--bg-footer);
color: var(--text-primary);
padding-top: 78px;
padding-bottom: 79px;
}
#s10-footer .container {
display: flex;
align-items: center;
gap: var(--space-7);
}
#s10-footer .wordmark {
font-size: var(--fs-eyebrow);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-wider);
background: var(--text-primary);
color: var(--bg-footer);
padding: var(--space-1) var(--space-3);
}
#s10-footer .footer-nav {
display: flex;
gap: var(--space-6);
margin: 0 auto;
}
#s10-footer .footer-nav a {
font-size: var(--fs-eyebrow);
color: var(--text-primary);
text-decoration: none;
text-transform: uppercase;
letter-spacing: var(--ls-wider);
font-weight: var(--fw-semibold);
opacity: 0.7;
line-height: var(--lh-ui);
}
#s10-footer .copyright {
font-size: var(--fs-micro);
color: var(--text-primary);
opacity: 0.55;
text-transform: uppercase;
letter-spacing: var(--ls-widest);
margin-left: auto;
line-height: var(--lh-ui);
}
</style>
</head>
<body>
<!-- ==========================================================
S1 — Navigation
========================================================== -->
<section id="s1-nav">
<div class="container">
<div class="wordmark">NERDWORKS</div>
<nav class="nav-links">
<a href="#">The Vault</a>
<a href="#">Archives</a>
<a href="#">Curations</a>
<a href="#">Collections</a>
</nav>
<div class="nav-icons">
<button class="nav-icon">🛒</button>
<button class="nav-icon">👤</button>
</div>
</div>
</section>
<!-- ==========================================================
S2 — Hero
========================================================== -->
<section id="s2-hero">
<div class="container">
<div class="hero-grid">
<div class="hero-copy">
<p class="eyebrow">THE OBSIDIAN SELECTION</p>
<h1>Curated for Collectors</h1>
<p class="body">The definitive archive for Trading Card Games, miniatures, and board game rarities. Treated with the reverence of fine art.</p>
<div class="cta-row">
<a href="#" class="btn-primary">Enter the Vault</a>
<a href="#" class="btn-secondary">View Portfolio</a>
</div>
</div>
<div class="hero-media">
<img src="https://placehold.co/421x428/091114/CD9862?text=Hero+Card" alt="Collector card hero">
</div>
</div>
</div>
</section>
<!-- ==========================================================
S3 — Editorial Feature (MTG Foundations)
========================================================== -->
<section id="s3-editorial">
<div class="container">
<div class="ed-grid">
<div class="ed-copy">
<p class="eyebrow">EDITORIAL FEATURE</p>
<h2>MTG Foundations: The Genesis of Modern Play</h2>
<p class="body">Unveiling the structural origins of competitive play. This curation explores the cards that defined a generation and the architectural shift in the game's evolving meta.</p>
<a href="#" class="action-link">READ THE FULL ARCHIVE →</a>
</div>
<div class="feature-image">
<img src="https://placehold.co/628x352/173544/9FB0B7?text=MTG+Cards" alt="MTG cards on a dark table">
</div>
</div>
</div>
</section>
<!-- ==========================================================
S4 — Latest Acquisitions (5-col raised cards)
========================================================== -->
<section id="s4-products">
<div class="container">
<div class="header-row">
<div>
<p class="eyebrow">THE GALLERY</p>
<h2>Latest Acquisitions</h2>
</div>
<a href="#" class="action-link">BROWSE ALL ITEMS →</a>
</div>
<div class="product-grid">
<div class="product-card">
<span class="staff-pick">STAFF PICK</span>
<div class="card-image" style="background:#A6ABA5;"></div>
<p class="card-title">Pokémon Prismatic Evolutions ETB</p>
<p class="card-price">£54.99</p>
</div>
<div class="product-card">
<div class="card-image" style="background:#E0E3DD;"></div>
<p class="card-title">MTG Foundations Collector Booster Box</p>
<p class="card-price">£189.99</p>
</div>
<div class="product-card">
<div class="card-image" style="background:#D2D6D0;"></div>
<p class="card-title">Lorcana Shimmering Skies Booster Box</p>
<p class="card-price">£109.99</p>
</div>
<div class="product-card">
<div class="card-image" style="background:#F7F6CF;"></div>
<p class="card-title">One Piece Starter Deck</p>
<p class="card-price">£12.99</p>
</div>
<div class="product-card">
<div class="card-image" style="background:#7DF7F6;"></div>
<p class="card-title">Star Wars Unlimited Booster Box</p>
<p class="card-price">£99.99</p>
</div>
</div>
</div>
</section>
<!-- ==========================================================
S5 — The Curator's Vault (3-col testimonials)
========================================================== -->
<section id="s5-testimonials">
<div class="container">
<div class="heading-block">
<h1>The Curator's Vault</h1>
<p class="subheading">Personal recommendations from our head archivist.</p>
</div>
<div class="testimonial-grid">
<div class="testimonial-card">
<div class="card-image" style="background:#EDC6B8;"></div>
<blockquote>"The level of detail on this Warhammer limited run is unprecedented. It's not just a game piece; it's a sculptor's masterpiece."</blockquote>
<div class="divider"></div>
<div class="author-row">
<div class="avatar"></div>
<div>
<p class="author-name">Marcus Thorne</p>
<p class="author-role">Head Curator</p>
</div>
</div>
</div>
<div class="testimonial-card">
<div class="card-image" style="background:#A59178;"></div>
<blockquote>"Spirit Island remains the gold standard of modern board gaming. A perfect marriage of theme and mechanics."</blockquote>
<div class="divider"></div>
<div class="author-row">
<div class="avatar"></div>
<div>
<p class="author-name">Elena Voss</p>
<p class="author-role">Miniature Specialist</p>
</div>
</div>
</div>
<div class="testimonial-card">
<div class="card-image" style="background:#E7F2F6;"></div>
<blockquote>"Finding a slabbed Charizard of this quality is becoming increasingly rare. A cornerstone for any serious portfolio."</blockquote>
<div class="divider"></div>
<div class="author-row">
<div class="avatar"></div>
<div>
<p class="author-name">Jordan Chen</p>
<p class="author-role">TCG Analyst</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ==========================================================
S6 — Explore the Archive (3x2 scrim tiles)
========================================================== -->
<section id="s6-categories">
<div class="container">
<h1>Explore the Archive</h1>
<hr class="heading-underline">
<div class="tile-grid">
<div class="category-tile top" style="background-color:#0C0703; background-image: url('https://placehold.co/419x415/0C0703/80D8A5?text=Pokemon');">
<div class="tile-label">
<h3 class="tile-title">Pokémon</h3>
<p class="tile-meta">TRADING CARD GAME</p>
</div>
</div>
<div class="category-tile top" style="background-color:#21100C; background-image: url('https://placehold.co/417x325/21100C/FFFFFF?text=Magic');">
<div class="tile-label">
<h3 class="tile-title">Magic</h3>
<p class="tile-meta">THE GATHERING</p>
</div>
</div>
<div class="category-tile top" style="background-color:#151E1C; background-image: url('https://placehold.co/417x428/151E1C/71BF92?text=Lorcana');">
<div class="tile-label">
<h3 class="tile-title">Lorcana</h3>
<p class="tile-meta">DISNEY LEGACY</p>
</div>
</div>
<div class="category-tile bottom" style="background-color:#070400; background-image: url('https://placehold.co/419x284/070400/96948D?text=Board+Games');">
<div class="tile-label">
<h3 class="tile-title">Board Games</h3>
<p class="tile-meta">STRATEGIC PLAY</p>
</div>
</div>
<div class="category-tile bottom" style="background-color:#26180C; background-image: url('https://placehold.co/419x284/26180C/848380?text=Warhammer');">
<div class="tile-label">
<h3 class="tile-title">Warhammer</h3>
<p class="tile-meta">MINIATURE BATTLE FORGE</p>
</div>
</div>
<div class="category-tile bottom" style="background-color:#030D0C; background-image: url('https://placehold.co/372x262/030D0C/938F8A?text=Accessories');">
<div class="tile-label">
<h3 class="tile-title">Accessories</h3>
<p class="tile-meta">PREMIUM PROTECTION</p>
</div>
</div>
</div>
</div>
</section>
<!-- ==========================================================
S7 — This week at the shop (2-col events)
========================================================== -->
<section id="s7-events">
<div class="container">
<div class="header-row">
<div>
<p class="eyebrow">THE SOCIAL HUB</p>
<h1>This week at the shop.</h1>
</div>
<a href="#" class="btn-dark-pill">FULL CALENDAR</a>
</div>
<div class="event-grid">
<div class="event-card">
<div class="date-badge">
<span class="date-day">FRI</span>
<span class="date-num">15</span>
</div>
<div class="event-body">
<h3 class="event-title">Friday Night Magic</h3>
<p class="event-meta">STANDARD / DRAFT • 6:30 PM</p>
<a href="#" class="event-action">JOIN EVENT →</a>
</div>
</div>
<div class="event-card">
<div class="date-badge">
<span class="date-day">SAT</span>
<span class="date-num">16</span>
</div>
<div class="event-body">
<h3 class="event-title">Pokémon League</h3>
<p class="event-meta">STANDARD OPEN PLAY • 11:00 AM</p>
<a href="#" class="event-action">JOIN EVENT →</a>
</div>
</div>
</div>
</div>
</section>
<!-- ==========================================================
S8 — Join the Inner Circle (form CTA)
========================================================== -->
<section id="s8-newsletter">
<div class="container">
<h1>Join the Inner Circle</h1>
<p class="subheading">First access to rare restocks, exclusive pre-orders, and curator-led community events.</p>
<form class="form-row" onsubmit="return false;">
<input type="email" placeholder="Your collector email address">
<button type="submit">SUBSCRIBE</button>
</form>
</div>
</section>
<!-- ==========================================================
S9 — From the Archive (3-col no_chrome cards)
========================================================== -->
<section id="s9-archive">
<div class="container">
<div class="header-row">
<h2>From the Archive</h2>
<a href="#" class="action-link">VIEW INSIGHTS →</a>
</div>
<div class="article-grid">
<article class="editorial-card">
<div class="card-image" style="background:#3B393B;"></div>
<p class="card-tag">MARKET TRENDS</p>
<h3 class="card-title">The Resurgence of Vintage 90s Games</h3>
<p class="card-body">Analyzing why 1990s board games are suddenly commanding premium collector prices.</p>
</article>
<article class="editorial-card">
<div class="card-image" style="background:#0C1312;"></div>
<p class="card-tag">CARE GUIDE</p>
<h3 class="card-title">Preserving Your Foil Assets</h3>
<p class="card-body">Humidity control and the science of long-term archival.</p>
</article>
<article class="editorial-card">
<div class="card-image" style="background:#060402;"></div>
<p class="card-tag">DEEP DIVE</p>
<h3 class="card-title">Beyond the Box: LCG vs TCG</h3>
<p class="card-body">Understanding the economic differences between Living and Trading card games.</p>
</article>
</div>
</div>
</section>
<!-- ==========================================================
S10 — Footer
========================================================== -->
<footer id="s10-footer">
<div class="container">
<div class="wordmark">NERDWORKS</div>
<nav class="footer-nav">
<a href="#">PROVENANCE</a>
<a href="#">SHIPPING</a>
<a href="#">TERMS OF CURATION</a>
<a href="#">PRIVACY</a>
</nav>
<span class="copyright">© 2024 NERDWORKS COLLECTOR ARCHIVE. ALL RIGHTS RESERVED.</span>
</div>
</footer>
</body>
</html>
/* ============================================================
Nerdworks Homepage Showcase Dark — v7
Refactor of v6. Structure preserved; style block rewritten
to reference tokens from nerdworks-design-system.md.
Raw pixel values only permitted for:
- Grid template columns / widths from deep-scan
- Section min-heights from deep-scan
- Container max-width (1440px)
============================================================ */
:root {
/* --- Typography scale --- */
--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;
/* --- Font weights --- */
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--fw-heavy: 800;
/* --- Line heights --- */
--lh-tight: 1.05;
--lh-heading: 1.15;
--lh-body: 1.5;
--lh-card: 1.35;
--lh-ui: 1.2;
/* --- Letter spacing --- */
--ls-tight: -0.02em;
--ls-heading: -0.01em;
--ls-normal: 0;
--ls-wide: 0.08em;
--ls-wider: 0.14em;
--ls-widest: 0.2em;
/* --- Border radius scale --- */
--radius-none: 0;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-2xl: 24px;
/* --- Spacing scale --- */
--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;
/* --- Section backgrounds --- */
--bg-nav: #06251D;
--bg-hero: #0B0D0B;
--bg-editorial: #28302A;
--bg-acquisitions: #101411;
--bg-vault: #266038;
--bg-newsletter: #25653C;
--bg-events: #F8F9F8;
--bg-footer: #022C22;
/* --- Card surfaces --- */
--bg-card-product: #1C2520;
--bg-card-testimonial: #1F4F2E;
--bg-card-event: #FFFFFF;
--border-card-event: #E4E8E6;
/* --- Text colours --- */
--text-primary: #F2F5F2;
--text-on-light: #0E1311;
--text-muted: #8A9891;
--text-micro: #6B8278;
--text-cream: #E8E4D6;
/* --- Brand accents --- */
--accent-green-primary: #1F8A4C;
--accent-green-link: #4CAF7A;
--accent-green-underline: #4E8C6A;
--accent-mint: #7FD9A0;
--accent-forest-text: #0F3A24;
--accent-teal: #3FE0C4;
--accent-coral: #E87A5D;
--accent-gold: #B89968;
/* --- Form surfaces --- */
--bg-form-input: #12331F;
--text-form-placeholder: #8FBAA0;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: var(--bg-hero);
color: var(--text-primary);
line-height: var(--lh-body);
}
.container {
max-width: 1440px;
margin: 0 auto;
padding-left: 56px;
padding-right: 56px;
}
/* ============================================================
S1 — Navigation
============================================================ */
#s1-nav {
min-height: 90px;
background: var(--bg-nav);
color: var(--text-primary);
padding-top: var(--space-6);
padding-bottom: var(--space-6);
}
#s1-nav .container {
display: flex;
align-items: center;
gap: var(--space-7);
height: 27px;
}
#s1-nav .wordmark {
font-size: var(--fs-body-sm);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-wider);
background: var(--text-primary);
color: var(--bg-nav);
padding: var(--space-1) var(--space-3);
}
#s1-nav .nav-links {
display: flex;
gap: var(--space-7);
margin-left: auto;
margin-right: auto;
}
#s1-nav .nav-links a {
color: var(--text-muted);
text-decoration: none;
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
font-weight: var(--fw-semibold);
}
#s1-nav .nav-icons {
display: flex;
gap: var(--space-4);
margin-left: auto;
}
#s1-nav .nav-icon {
background: transparent;
border: 0;
color: var(--text-primary);
font-size: var(--fs-body-sm);
cursor: default;
}
/* ============================================================
S2 — Hero
============================================================ */
#s2-hero {
min-height: 1058px;
background: var(--bg-hero);
color: var(--text-primary);
padding-top: 267px;
padding-bottom: 0;
}
#s2-hero .hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-7);
align-items: center;
}
#s2-hero .hero-copy {
max-width: 612px;
}
#s2-hero .eyebrow {
font-size: var(--fs-eyebrow);
color: var(--accent-green-link);
text-transform: uppercase;
letter-spacing: var(--ls-wide);
margin: 0 0 var(--space-5) 0;
font-weight: var(--fw-semibold);
line-height: var(--lh-ui);
}
#s2-hero h1 {
/* HARD-OVERRIDE: display heading must be 112px */
font-size: var(--fs-display);
line-height: var(--lh-tight);
font-weight: var(--fw-heavy);
letter-spacing: var(--ls-tight);
color: var(--text-primary);
margin: 0 0 var(--space-5) 0;
}
#s2-hero p.body {
font-size: var(--fs-body-lg);
line-height: var(--lh-body);
color: var(--text-muted);
margin: 0 0 var(--space-7) 0;
max-width: 556px;
}
#s2-hero .cta-row {
display: flex;
gap: var(--space-5);
align-items: center;
}
#s2-hero .btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--accent-green-primary);
color: var(--text-primary);
padding: var(--space-4) var(--space-6);
border-radius: var(--radius-md);
border: 0;
font-size: var(--fs-body);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
text-decoration: none;
font-weight: var(--fw-semibold);
line-height: var(--lh-ui);
}
#s2-hero .btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
color: var(--text-primary);
padding: var(--space-4) var(--space-6);
border-radius: var(--radius-md);
border: 1px solid var(--text-primary);
font-size: var(--fs-body);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
text-decoration: none;
font-weight: var(--fw-semibold);
line-height: var(--lh-ui);
}
#s2-hero .hero-media {
width: 421px;
height: 428px;
background: #091114;
border-radius: var(--radius-2xl);
justify-self: end;
overflow: hidden;
}
#s2-hero .hero-media img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--radius-2xl);
}
/* ============================================================
S3 — Editorial Feature
============================================================ */
#s3-editorial {
min-height: 669px;
background: var(--bg-editorial);
color: var(--text-primary);
padding-top: 147px;
padding-bottom: 0;
}
#s3-editorial .ed-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-8);
align-items: center;
}
#s3-editorial .eyebrow {
font-size: var(--fs-eyebrow);
color: var(--accent-green-link);
text-transform: uppercase;
letter-spacing: var(--ls-wide);
margin: 0 0 var(--space-5) 0;
font-weight: var(--fw-semibold);
line-height: var(--lh-ui);
}
#s3-editorial h2 {
font-size: var(--fs-h2);
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
font-weight: var(--fw-bold);
color: var(--text-primary);
margin: 0 0 var(--space-6) 0;
max-width: 613px;
}
#s3-editorial p.body {
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--text-muted);
margin: 0 0 var(--space-6) 0;
max-width: 595px;
}
#s3-editorial .action-link {
display: inline-block;
font-size: var(--fs-eyebrow);
color: var(--accent-green-link);
text-transform: uppercase;
letter-spacing: var(--ls-wide);
text-decoration: none;
font-weight: var(--fw-semibold);
line-height: var(--lh-ui);
}
#s3-editorial .feature-image {
width: 628px;
height: 352px;
background: #173544;
border-radius: var(--radius-xl);
justify-self: end;
overflow: hidden;
}
#s3-editorial .feature-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* ============================================================
S4 — Latest Acquisitions
============================================================ */
#s4-products {
min-height: 838px;
background: var(--bg-acquisitions);
color: var(--text-primary);
padding-top: 145px;
padding-bottom: 0;
}
#s4-products .header-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: var(--space-8);
}
#s4-products .eyebrow {
font-size: var(--fs-eyebrow);
color: var(--accent-green-link);
text-transform: uppercase;
letter-spacing: var(--ls-wide);
margin: 0 0 var(--space-4) 0;
font-weight: var(--fw-semibold);
line-height: var(--lh-ui);
}
#s4-products h2 {
font-size: var(--fs-h2);
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
font-weight: var(--fw-bold);
color: var(--text-primary);
margin: 0;
}
#s4-products .action-link {
font-size: var(--fs-eyebrow);
color: var(--accent-green-link);
text-transform: uppercase;
letter-spacing: var(--ls-wide);
text-decoration: none;
font-weight: var(--fw-semibold);
line-height: var(--lh-ui);
}
#s4-products .product-grid {
display: grid;
grid-template-columns: repeat(5, 244px);
gap: 29px;
justify-content: space-between;
}
.product-card {
width: 244px;
height: 401px;
background: var(--bg-card-product);
border-radius: var(--radius-lg);
padding: var(--space-4);
position: relative;
display: flex;
flex-direction: column;
}
.product-card .card-image {
width: 100%;
height: 220px;
border-radius: var(--radius-md);
margin-bottom: var(--space-4);
}
.product-card .card-title {
font-size: var(--fs-h4);
color: var(--text-primary);
margin: 0 0 var(--space-3) 0;
font-weight: var(--fw-medium);
line-height: var(--lh-card);
}
.product-card .card-price {
font-size: var(--fs-body-lg);
color: var(--accent-coral);
margin: 0;
font-weight: var(--fw-semibold);
margin-top: auto;
line-height: var(--lh-ui);
}
.product-card .staff-pick {
position: absolute;
top: var(--space-4);
left: var(--space-4);
background: var(--accent-teal);
color: var(--accent-forest-text);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
font-weight: var(--fw-semibold);
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
line-height: var(--lh-ui);
}
/* ============================================================
S5 — The Curator's Vault
============================================================ */
#s5-testimonials {
min-height: 1131px;
background: var(--bg-vault);
color: var(--text-primary);
padding-top: 148px;
padding-bottom: 181px;
}
#s5-testimonials .heading-block {
text-align: center;
margin-bottom: var(--space-9);
}
#s5-testimonials h1 {
font-size: var(--fs-h1);
color: var(--text-primary);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-tight);
margin: 0 0 var(--space-5) 0;
line-height: var(--lh-tight);
}
#s5-testimonials .subheading {
font-size: var(--fs-body-lg);
color: var(--text-primary);
margin: 0;
font-weight: var(--fw-regular);
font-style: italic;
line-height: var(--lh-body);
opacity: 0.85;
}
#s5-testimonials .testimonial-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 131px;
}
.testimonial-card {
background: var(--bg-card-testimonial);
border-radius: var(--radius-2xl);
padding: var(--space-6);
display: flex;
flex-direction: column;
min-height: 284px;
}
.testimonial-card .card-image {
width: 100%;
height: 180px;
border-radius: var(--radius-md);
margin-bottom: var(--space-5);
}
.testimonial-card blockquote {
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--text-primary);
margin: 0 0 var(--space-6) 0;
font-style: italic;
}
.testimonial-card .divider {
height: 1px;
background: rgba(242, 245, 242, 0.2);
margin: 0 0 var(--space-5) 0;
}
.testimonial-card .author-row {
display: flex;
align-items: center;
gap: var(--space-3);
}
.testimonial-card .avatar {
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--accent-mint);
}
.testimonial-card .author-name {
font-size: var(--fs-h4);
color: var(--text-primary);
font-weight: var(--fw-semibold);
margin: 0 0 var(--space-1) 0;
line-height: var(--lh-card);
}
.testimonial-card .author-role {
font-size: var(--fs-eyebrow);
color: var(--text-primary);
opacity: 0.75;
margin: 0;
text-transform: uppercase;
letter-spacing: var(--ls-wide);
font-weight: var(--fw-semibold);
line-height: var(--lh-ui);
}
/* ============================================================
S6 — Explore the Archive
============================================================ */
#s6-categories {
min-height: 1176px;
background: var(--bg-acquisitions);
color: var(--text-primary);
padding-top: 151px;
padding-bottom: 0;
}
#s6-categories h1 {
font-size: var(--fs-h1);
color: var(--text-primary);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-tight);
margin: 0 0 var(--space-4) 0;
line-height: var(--lh-tight);
}
#s6-categories .heading-underline {
width: 60px;
height: 3px;
background: var(--accent-green-underline);
margin: 0 0 var(--space-9) 0;
border: 0;
}
#s6-categories .tile-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 38px;
}
.category-tile {
position: relative;
width: 100%;
border-radius: var(--radius-xl);
overflow: hidden;
background-size: cover;
background-position: center;
}
.category-tile.top {
height: 415px;
}
.category-tile.bottom {
height: 284px;
}
.category-tile::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.85) 100%);
pointer-events: none;
}
.category-tile .tile-label {
position: absolute;
left: var(--space-5);
right: var(--space-5);
bottom: var(--space-5);
z-index: 2;
color: #FFFFFF;
}
.category-tile .tile-title {
font-size: var(--fs-h3);
margin: 0 0 var(--space-1) 0;
font-weight: var(--fw-bold);
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
color: #FFFFFF;
}
.category-tile .tile-meta {
font-size: var(--fs-eyebrow);
margin: 0;
color: var(--accent-green-link);
text-transform: uppercase;
letter-spacing: var(--ls-wider);
font-weight: var(--fw-semibold);
line-height: var(--lh-ui);
}
/* ============================================================
S7 — This week at the shop
============================================================ */
#s7-events {
min-height: 647px;
background: var(--bg-events);
color: var(--text-on-light);
padding-top: 146px;
padding-bottom: 0;
}
#s7-events .header-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: var(--space-8);
}
#s7-events .eyebrow {
font-size: var(--fs-eyebrow);
color: var(--accent-green-link);
text-transform: uppercase;
letter-spacing: var(--ls-wide);
margin: 0 0 var(--space-4) 0;
font-weight: var(--fw-semibold);
line-height: var(--lh-ui);
}
#s7-events h1 {
font-size: var(--fs-h1);
color: var(--text-on-light);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-tight);
margin: 0;
line-height: var(--lh-tight);
max-width: 520px;
}
#s7-events .btn-dark-pill {
background: var(--text-on-light);
color: var(--bg-events);
padding: var(--space-3) var(--space-5);
border-radius: var(--radius-md);
border: 0;
font-size: var(--fs-body);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
font-weight: var(--fw-semibold);
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: var(--lh-ui);
}
#s7-events .event-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-7);
}
.event-card {
background: var(--bg-card-event);
border: 1px solid var(--border-card-event);
border-radius: var(--radius-lg);
padding: var(--space-7);
display: grid;
grid-template-columns: 72px 1fr;
gap: var(--space-6);
align-items: start;
min-height: 180px;
}
.event-card .date-badge {
background: var(--bg-editorial);
color: #FFFFFF;
border-radius: var(--radius-sm);
padding: var(--space-3) var(--space-2);
text-align: center;
width: 72px;
height: 72px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.event-card .date-day {
font-size: var(--fs-eyebrow);
text-transform: uppercase;
letter-spacing: var(--ls-wide);
font-weight: var(--fw-semibold);
color: var(--accent-green-link);
line-height: var(--lh-ui);
}
.event-card .date-num {
font-size: var(--fs-h4);
font-weight: var(--fw-bold);
color: #FFFFFF;
line-height: var(--lh-tight);
margin-top: var(--space-1);
}
.event-card .event-body {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.event-card .event-title {
font-size: var(--fs-h4);
font-weight: var(--fw-bold);
color: var(--text-on-light);
margin: 0;
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
}
.event-card .event-meta {
font-size: var(--fs-body-sm);
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: var(--ls-wide);
margin: 0;
font-weight: var(--fw-medium);
line-height: var(--lh-ui);
}
.event-card .event-action {
font-size: var(--fs-eyebrow);
color: var(--accent-green-link);
text-transform: uppercase;
letter-spacing: var(--ls-wide);
text-decoration: none;
font-weight: var(--fw-semibold);
margin-top: var(--space-4);
display: inline-block;
line-height: var(--lh-ui);
}
/* ============================================================
S8 — Join the Inner Circle
============================================================ */
#s8-newsletter {
min-height: 444px;
background: var(--bg-newsletter);
color: var(--text-primary);
padding-top: 113px;
padding-bottom: 0;
text-align: center;
}
#s8-newsletter h1 {
font-size: var(--fs-h1);
color: var(--text-primary);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-tight);
margin: 0 0 var(--space-6) 0;
line-height: var(--lh-tight);
}
#s8-newsletter .subheading {
font-size: var(--fs-body-lg);
color: var(--text-primary);
max-width: 815px;
margin: 0 auto var(--space-7) auto;
line-height: var(--lh-body);
opacity: 0.8;
}
/* Form: two SEPARATE rectangles with a gap between them.
NOT joined. NOT pill-shaped. */
#s8-newsletter .form-row {
display: flex;
gap: var(--space-3);
justify-content: center;
align-items: center;
margin: 0 auto;
background: transparent;
border-radius: 0;
overflow: visible;
width: auto;
height: auto;
}
#s8-newsletter .form-row input[type="email"] {
width: 560px;
height: 64px;
background: var(--bg-form-input);
border: 0;
outline: 0;
color: var(--text-primary);
padding: var(--space-4) var(--space-5);
font-size: var(--fs-body);
font-family: inherit;
border-radius: var(--radius-md);
line-height: var(--lh-ui);
}
#s8-newsletter .form-row input[type="email"]::placeholder {
color: var(--text-form-placeholder);
opacity: 1;
}
#s8-newsletter .form-row button {
width: 180px;
height: 64px;
background: var(--accent-mint);
color: var(--accent-forest-text);
border: 0;
font-size: var(--fs-body);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
font-weight: var(--fw-semibold);
cursor: default;
border-radius: var(--radius-md);
padding: var(--space-4) var(--space-6);
line-height: var(--lh-ui);
}
/* ============================================================
S9 — From the Archive
============================================================ */
#s9-archive {
min-height: 827px;
background: var(--bg-editorial);
color: var(--text-primary);
padding-top: 150px;
padding-bottom: 0;
}
#s9-archive .header-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: var(--space-8);
}
#s9-archive h2 {
font-size: var(--fs-h2);
color: var(--text-primary);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-heading);
margin: 0;
line-height: var(--lh-heading);
}
#s9-archive .action-link {
font-size: var(--fs-eyebrow);
color: var(--accent-green-link);
text-transform: uppercase;
letter-spacing: var(--ls-wide);
text-decoration: none;
font-weight: var(--fw-semibold);
line-height: var(--lh-ui);
}
#s9-archive .article-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 47px;
}
.editorial-card {
/* chromeless — no bg, no border */
background: transparent;
border: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.editorial-card .card-image {
width: 100%;
height: 230px;
border-radius: var(--radius-lg);
margin-bottom: var(--space-6);
}
.editorial-card .card-tag {
font-size: var(--fs-eyebrow);
color: var(--accent-gold);
text-transform: uppercase;
letter-spacing: var(--ls-wider);
font-weight: var(--fw-semibold);
margin: 0 0 var(--space-4) 0;
line-height: var(--lh-ui);
}
.editorial-card .card-title {
font-size: var(--fs-h4);
color: var(--text-primary);
font-weight: var(--fw-medium);
margin: 0 0 var(--space-4) 0;
line-height: var(--lh-card);
letter-spacing: var(--ls-heading);
}
.editorial-card .card-body {
font-size: var(--fs-body);
color: var(--text-muted);
line-height: var(--lh-body);
margin: 0;
}
/* ============================================================
S10 — Footer
============================================================ */
#s10-footer {
min-height: 173px;
background: var(--bg-footer);
color: var(--text-primary);
padding-top: 78px;
padding-bottom: 79px;
}
#s10-footer .container {
display: flex;
align-items: center;
gap: var(--space-7);
}
#s10-footer .wordmark {
font-size: var(--fs-eyebrow);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-wider);
background: var(--text-primary);
color: var(--bg-footer);
padding: var(--space-1) var(--space-3);
}
#s10-footer .footer-nav {
display: flex;
gap: var(--space-6);
margin: 0 auto;
}
#s10-footer .footer-nav a {
font-size: var(--fs-eyebrow);
color: var(--text-primary);
text-decoration: none;
text-transform: uppercase;
letter-spacing: var(--ls-wider);
font-weight: var(--fw-semibold);
opacity: 0.7;
line-height: var(--lh-ui);
}
#s10-footer .copyright {
font-size: var(--fs-micro);
color: var(--text-primary);
opacity: 0.55;
text-transform: uppercase;
letter-spacing: var(--ls-widest);
margin-left: auto;
line-height: var(--lh-ui);
}