# Build Prompt — Nerdworks Homepage Showcase Dark (TN5 v5, end-to-end pipeline validation) You are a Sonnet build session producing the first HTML/CSS prototype from the new per-strip mockup analysis pipeline. This build is a **validation test** of the pipeline: does the decoupled spec (dimensions + colours, produced by parallel per-strip Sonnet reads) actually deliver a visually accurate prototype without the component-dimension errors of earlier approaches? Your job is to **implement the spec faithfully**. You are not redesigning, not improving, not "fixing" anything you think looks off. The spec is authoritative. If something in the spec feels ambiguous, flag it in a Notes section at the end of your output — don't invent values. --- ## What you are building A **standalone HTML file with inline CSS** reproducing the full homepage of a dark-themed collectibles retailer called **Nerdworks**. The mockup is a 2560×12538 Stitch AI export showing a 10-section desktop homepage. **Nerdworks context:** - Sells Magic: The Gathering singles, sealed product, Pokémon, Lorcana, board games, Warhammer, and accessories - Dark theme with forest/emerald greens as the brand colour - Editorial / premium positioning (not a bargain retailer) - 10 sections top-to-bottom: Nav, Hero, Editorial feature, Latest Acquisitions (5-col product grid), Curator's Vault (3-col testimonials), Explore the Archive (3×2 category tiles), This Week at the Shop (Events, white bg), Join the Inner Circle (Newsletter, green bg), Insights from the Archive (3-col editorial cards), Footer This is the **fifth revision** of TN5. TN5 v4 was built from the earlier full-page dimensions map and had visibly off component dimensions (card heights wrong, font sizes wrong, card grid gaps wrong, wrong card treatments across the three grids). Your job is to produce v5 that fixes all of that using the new decoupled spec. --- ## Authoritative input files **Read these in order:** 1. **Dimensions map (layout, spacing, typography, component dimensions):** `/var/www/vhosts/camcom.dev/httpdocs/build-prompts/nerdworks-homepage-showcase-dark.dimensions-v3.md` 2. **Colour map (palette, backgrounds, text colours, component colours):** `/var/www/vhosts/camcom.dev/httpdocs/build-prompts/nerdworks-homepage-showcase-dark.colours.md` 3. **Source mockup image (for visual spot-checking only):** `/var/www/vhosts/camcom.dev/httpdocs/mockups/nerdworks/stitch/nw-homepage-showcase-dark.jpg` (2560 × 12538 px) Use this sparingly — the dimensions and colours maps are already derived from it. Open it only when you need to visually confirm a design intent (e.g. "is this heading centred or left-aligned?") that the spec didn't clarify. **Do NOT read** the earlier dimensions files (`.dimensions.md`, `.dimensions-grid.md`, `.dimensions-grid-30*.md`) — they are legacy and less accurate than v3. Do not use them for any value. --- ## Output file Write the completed prototype to: ``` /var/www/vhosts/camcom.dev/httpdocs/build-prompts/prototypes/nw-homepage-showcase-dark-v5.html ``` **Self-contained HTML file.** All CSS inline in `<style>` tags in the `<head>`. No external CSS files. No external JavaScript. No framework dependencies. The file should be openable in a browser as a local file and render correctly. --- ## Technical constraints ### HTML structure - `<!DOCTYPE html>` + `<html lang="en">` + `<head>` with title, charset, viewport meta - Single `<style>` block in `<head>` - `<body>` with one `<section>` per S-code from the dimensions map - Use semantic HTML where it makes sense (`<nav>`, `<header>`, `<main>`, `<footer>`, `<article>` for editorial cards, `<h1>`/`<h2>`/`<h3>` in the right places) - Each `<section>` should have an `id` matching the S-code (e.g. `id="s4-acquisitions"`) so the future overlay system can reference sections ### CSS approach - **CSS custom properties at `:root`** for every colour from the unified colour map. Use the variable names suggested in the colour map's "Brand palette" section. This is non-negotiable — the prototype must be themeable by updating custom properties. - **Desktop-first** — assume a 1440px content column. Do not implement responsive breakpoints for this version. We'll add mobile once the desktop layout is validated. - **Flex and Grid** for layout, not floats or tables. Use CSS Grid for the card grids (S4 Acquisitions, S6 Category tiles, S7 Events, S9 Insights). Use Flex for section headers with eyebrow+heading+action-link rows. - **Box-sizing: border-box** on everything. - **`margin: 0; padding: 0`** reset on body. Use explicit spacing values from the dimensions map for every component. - **Font stack:** the mockup uses a sans-serif. Since we don't have the exact font identified yet, use a clean default stack: ```css font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; ``` This is fine for prototype validation — font swap can come later. - **Font sizes in px** for this prototype (not rem). We're validating pixel-accurate measurements against the mockup, so explicit px values make comparison easier. - **No CSS animations, transitions, or hover states** for v5. This is a static visual validation — keep it simple. ### Images The mockup has multiple image types: 1. **S2 Hero product card image** (decorative collectible card art on the right of the hero) 2. **S4 product card images** (5 product photos, each with a specific product) 3. **S5 Curator's Vault 3-up row images** (3 staggered images) 4. **S6 Category tile images** (6 full-bleed category photos with gradient scrims) 5. **S9 Editorial card images** (3 editorial feature photos) **Use `placehold.co` URLs for all images**, with URL-parameterised dimensions and a matching placeholder colour from the colour map's image-derived accents where specified. Format: ```html <img src="https://placehold.co/WIDTHxHEIGHT/BGHEX/FGHEX?text=Label" alt="..."> ``` For S6 category tiles specifically, use the per-tile dominant colours from the colour map (e.g. `#2D4A5C` for Pokémon, `#8A5A32` for Magic, etc.). This produces a reasonable visual approximation without needing real assets. For other images, use a generic dark-theme placeholder (e.g. `https://placehold.co/600x600/1A1E1B/E8E4D6?text=PRODUCT`). ### Three different card treatments (CRITICAL) The colour map's "Three card treatments" section documents three **distinct** card patterns. You MUST implement each differently: 1. **S4 Product cards (raised surface treatment)** — card has a bg `#18211C` distinct from the section bg `#0E1310`, 12–16 px border-radius, product image at top, title + price below with internal padding, optional STAFF PICK badge on first card 2. **S6 Category tiles (full-bleed image with scrim)** — NO card chrome. The tile IS the image. A dark gradient scrim fades from transparent at the top to `#050605` at the bottom for text legibility. White title + muted subtitle overlay the bottom of the image. 16–20 px border-radius on the entire tile. 3. **S9 Editorial cards (floating, no chrome)** — NO card bg, NO border, NO raised surface. Images sit directly on the section background with their own border-radius (probably matching the image shape). Title + excerpt sit below the image with no card frame around them. Do not unify these three patterns under a single `.card` class. Use three distinct class names (e.g. `.product-card`, `.category-tile`, `.editorial-card`) with their own CSS rules. ### S7 Events section specifics S7 is the only **white-background** section in the page. Dark text on white. Event cards have a subtle hairline border (`#E4E8E6`) rather than a bg fill — the cards are nearly imperceptible from the section bg except for the border. This is a sophisticated design choice — implement it faithfully (don't use a tinted card bg, don't add a shadow, just the hairline border). The "FULL CALENDAR" pill button is dark (`#0E1311`) on the white section — inverse of the normal dark-theme button pattern. ### S8 Newsletter section specifics Full-bleed green background (`#1F5234`). Centred content column approximately 880 px wide. Form row has an email input field with a darker green inset bg (`#12331F`), and a pale mint SUBSCRIBE button (`#7FD9A0` fill, `#0F3A24` dark forest text). The button is a pill shape. ### S1 Navigation specifics **Wordmark only.** The dimensions map confirms the nav has no right-side content — no nav links, no CTA button, no burger menu. Just the NERDWORKS wordmark on the left of a dark bar. Do not invent navigation items. ### Mixed heading alignment patterns The dimensions map notes that sections use different heading alignments: - Centred: S4 Acquisitions, S5 Curator's Vault, S8 Newsletter - Left-aligned with right-aligned action link: S6 Explore, S7 Events, S9 Insights Implement each section's alignment as specified — don't force a single pattern. ### S5 Curator's Vault zonal background The colour map notes S5 may have a gradient or zonal variance in its background (darker between cards, brighter near heading). For v5, implement S5 as a **flat background** using the mid value (`#1F4A32`) for simplicity. Add a CSS comment noting the option to use a gradient. If the visual comparison shows it needs a gradient, we iterate. --- ## What NOT to do - Do not change any dimension value from the dimensions map to "round it nicely" — 237 px cards stay 237 px, not 240 or 250. - Do not substitute colours from the colour map with "nicer" ones — use the exact hex values given. - Do not add content that isn't in the mockup (extra nav links, fake social icons in the footer, a breadcrumb, a cookie banner, etc.). - Do not add CSS resets beyond the minimal `margin: 0; padding: 0; box-sizing: border-box`. - Do not use CSS frameworks (Tailwind, Bootstrap, etc.). - Do not invent placeholder text content that wasn't in the mockup. Use the actual text from the spec: eyebrows, headings, card titles, category names, event names, etc. - Do not add responsive breakpoints for this version. - Do not add hover states, transitions, or animations. - Do not add `aria-*` or accessibility attributes beyond basic semantic HTML. Full a11y pass comes later; for v5 it would add noise to the visual validation. --- ## Quality bar **The prototype should be openable in a Chrome browser at 1440 px viewport width and look like the mockup.** When you compare the rendered prototype side-by-side with the source mockup image at the same zoom level, section heights, card grids, font sizes, colours, and overall layout should match visually. You don't need to be 100% pixel-perfect — small ±5 px variations are fine — but the overall composition should feel **"of course, this is the same page"** and not "hmm, this looks different." Specific things to check as you build: - All 10 sections present in the right order with the right heights - S1 Nav has only the wordmark, nothing on the right - S4 card grid is 5 columns with the STAFF PICK badge on the first card - S6 category tiles use the full-bleed-image-with-scrim treatment, not a plain card - S7 Events has a WHITE background (distinct from the dark theme) - S8 Newsletter has a GREEN background with a pale mint button - S9 editorial cards have no card chrome (images and text sit directly on section bg) - S10 Footer has the NERDWORKS wordmark left, 4 nav links centre, copyright right - Mixed heading alignments respected per section - All three card treatments visually distinct --- ## Output structure Write the file. Then, at the top of your reply (under 300 words), report: 1. **File written** (yes/no, path) 2. **Approximate total page height** of the rendered prototype (match against 7053 px target) 3. **Sections you found ambiguous** in the spec (with the specific value or decision you needed) — flag these for orchestrator review 4. **Any spec values you overrode** and why — should be zero if you followed the rules, but if you found a value that couldn't possibly be right (e.g. negative padding), say so 5. **Your gut-feeling confidence** that the rendered prototype matches the mockup — High / Medium / Low 6. **Anything the build process made you realise** about the spec that would improve the next iteration Then I'll review the HTML and compare it visually to the mockup. --- ## Final notes This is a **first end-to-end test** of the per-strip pipeline. It doesn't need to be perfect — it needs to be **visually close enough** that we can confidently say "yes, this pipeline delivers the fidelity we need" and then iterate on specific sections that are still off. If you hit something that truly blocks you (e.g. a spec value contradicts itself, or a component has no colour specified anywhere), stop and report in your reply rather than making something up. Blocking loudly is better than silently fabricating. Good luck. Measure twice, implement once, and trust the spec.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1440">
<title>Nerdworks — Curated for Collectors (TN5 v5)</title>
<style>
:root {
/* Brand palette */
--brand-green-primary: #1F8A4C;
--brand-green-eyebrow: #4CAF7A;
--brand-green-accent: #4E8C6A;
--brand-green-link: #2F6E5A;
--brand-mint-cta: #7FD9A0;
--brand-forest-text: #0F3A24;
--brand-teal-accent: #3FE0C4;
--brand-coral-price: #E87A5D;
--brand-gold-eyebrow: #B89968;
--brand-cream-wordmark: #E8E4D6;
/* Text / neutrals */
--text-white: #F2F5F2;
--text-white-warm: #F1EFE7;
--text-body-dark: #E8E8E6;
--text-body-soft: #C4CEC8;
--text-body-muted: #8A9891;
--text-nav-muted: #6B8278;
--text-copy-muted: #5A6E65;
--text-dark-ink: #0E1311;
--text-pill-light: #F5F6F5;
--text-badge-dark: #0A1512;
/* Overlays / borders */
--overlay-scrim-bottom: #050605;
--card-border-white-section: #E4E8E6;
--card-border-dark: #243028;
--card-border-vault: #1E3529;
--date-badge-fill: #E8ECEA;
/* Section backgrounds */
--s1-bg: #0A1410;
--s2-bg: #0A1410;
--s2-bg-bottom: #0B0F0D;
--s3-bg: #18211C;
--s4-bg: #0E1310;
--s4-card-bg: #18211C;
--s5-bg: #184030;
--s5-card-bg: #12281F;
--s6-bg: #0A0D0C;
--s7-bg: #F7F8F7;
--s7-bg-bottom: #F4F1EA;
--s7-card-bg: #FFFFFF;
--s8-bg: #1F5234;
--s8-input-bg: #12331F;
--s9-bg: #0A1210;
--s10-bg: #05231A;
/* Hero accents */
--s2-eyebrow: #3E6B56;
--s2-secondary-border: #3A4440;
/* S4 text */
--s4-heading: #ECEBE4;
--s4-eyebrow: #6E8C78;
--s4-browse-link: #B8BCB4;
--s4-card-title: #E8E8E6;
/* S5 text */
--s5-heading: #EDF3EE;
--s5-subheading: #A8C4B1;
--s5-quote: #D8E0DB;
--s5-role: #8A958F;
/* S6 text */
--s6-heading: #F5F5F2;
--s6-tile-title: #F4F4F2;
--s6-tile-subtitle: #A8A39A;
/* S7 text */
--s7-eyebrow: #6B7872;
--s7-meta: #4A5550;
/* S8 text */
--s8-lede: #C8DCCF;
--s8-placeholder: #6E8A78;
/* S9 text */
--s9-card-excerpt: #8A9691;
--s9-view-link: #C8DCCF;
}
* {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: var(--s1-bg);
color: var(--text-white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img {
display: block;
max-width: 100%;
}
a {
text-decoration: none;
color: inherit;
}
.container {
max-width: 1440px;
margin: 0 auto;
padding: 0 40px;
}
/* ========================================================= */
/* S1 — Navigation */
/* ========================================================= */
#s1-nav {
background: var(--s1-bg);
height: 90px;
display: flex;
align-items: center;
}
#s1-nav .wordmark {
color: #E8EDE9;
font-size: 18px;
font-weight: 600;
letter-spacing: 1.2px;
text-transform: uppercase;
}
/* ========================================================= */
/* S2 — Hero "Curated for Collectors" */
/* ========================================================= */
#s2-hero {
background: linear-gradient(to bottom, var(--s2-bg) 0%, var(--s2-bg-bottom) 100%);
height: 1058px;
position: relative;
}
#s2-hero .hero-inner {
max-width: 1440px;
margin: 0 auto;
padding: 225px 40px 0 40px;
display: flex;
gap: 40px;
}
#s2-hero .hero-text {
width: 55%;
}
#s2-hero .eyebrow {
font-size: 13px;
font-weight: 500;
color: var(--s2-eyebrow);
text-transform: uppercase;
letter-spacing: 2.5px;
margin: 0 0 60px 0;
}
#s2-hero h1 {
font-size: 120px;
line-height: 130px;
font-weight: 800;
color: var(--text-white);
margin: 0;
letter-spacing: -1px;
}
#s2-hero .lede {
font-size: 17px;
line-height: 26px;
color: var(--text-body-muted);
margin: 55px 0 0 0;
max-width: 360px;
}
#s2-hero .cta-row {
display: flex;
gap: 16px;
margin: 70px 0 0 40px;
}
#s2-hero .btn {
height: 44px;
padding: 0 22px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 600;
border-radius: 5px;
border: none;
cursor: pointer;
}
#s2-hero .btn-primary {
background: var(--brand-green-primary);
color: #FFFFFF;
}
#s2-hero .btn-secondary {
background: transparent;
color: #E8EDE9;
border: 1px solid var(--s2-secondary-border);
}
#s2-hero .hero-media {
width: 45%;
position: relative;
padding-top: 90px;
}
#s2-hero .hero-card {
width: 310px;
height: 440px;
background: #0E1A15;
border: 1px solid #1C4538;
border-radius: 6px;
margin-left: 70px;
box-shadow: 0 0 160px 30px #0F2A2080;
}
#s2-hero .hero-card img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 6px;
}
/* ========================================================= */
/* S3 — Editorial "MTG Foundations" */
/* ========================================================= */
#s3-editorial {
background: linear-gradient(to bottom, #101814 0%, #222A24 100%);
height: 669px;
position: relative;
}
#s3-editorial .editorial-inner {
max-width: 1440px;
margin: 0 auto;
padding: 120px 40px 0 40px;
display: flex;
gap: 40px;
}
#s3-editorial .editorial-text {
flex: 0 0 680px;
}
#s3-editorial .eyebrow {
font-size: 13px;
font-weight: 600;
color: var(--brand-green-eyebrow);
text-transform: uppercase;
letter-spacing: 2.2px;
margin: 0 0 16px 0;
}
#s3-editorial h2 {
font-size: 68px;
line-height: 1.06;
font-weight: 700;
color: #FFFFFF;
margin: 0;
letter-spacing: -1px;
max-width: 680px;
}
#s3-editorial .body {
font-size: 16px;
line-height: 1.6;
color: var(--text-body-soft);
margin: 55px 0 0 0;
max-width: 580px;
}
#s3-editorial .read-link {
display: inline-block;
margin: 45px 0 0 40px;
font-size: 12px;
font-weight: 500;
color: #D8D8D0;
text-transform: uppercase;
letter-spacing: 2px;
}
#s3-editorial .editorial-media {
flex: 1;
position: relative;
min-height: 400px;
}
#s3-editorial .editorial-media img {
width: 620px;
height: 410px;
border-radius: 6px;
margin-top: 15px;
object-fit: cover;
}
/* ========================================================= */
/* S4 — Latest Acquisitions */
/* ========================================================= */
#s4-acquisitions {
background: var(--s4-bg);
height: 838px;
padding: 120px 0 0 0;
}
#s4-acquisitions .inner {
max-width: 1440px;
margin: 0 auto;
padding: 0 80px;
}
#s4-acquisitions .heading-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 110px;
}
#s4-acquisitions .heading-left .eyebrow {
font-size: 11px;
font-weight: 500;
color: var(--s4-eyebrow);
text-transform: uppercase;
letter-spacing: 2.5px;
margin: 0 0 12px 0;
}
#s4-acquisitions h2 {
font-size: 58px;
font-weight: 400;
color: var(--s4-heading);
margin: 0;
font-family: Georgia, 'Times New Roman', serif;
letter-spacing: -0.5px;
}
#s4-acquisitions .browse-link {
font-size: 11px;
font-weight: 500;
color: var(--s4-browse-link);
text-transform: uppercase;
letter-spacing: 2px;
}
#s4-acquisitions .product-grid {
display: grid;
grid-template-columns: repeat(5, 237px);
gap: 24px;
justify-content: space-between;
}
.product-card {
background: var(--s4-card-bg);
border: 1px solid var(--card-border-dark);
border-radius: 14px;
overflow: hidden;
position: relative;
height: 360px;
display: flex;
flex-direction: column;
}
.product-card .image-wrap {
position: relative;
width: 100%;
height: 275px;
overflow: hidden;
}
.product-card .image-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
}
.product-card .staff-pick {
position: absolute;
top: 11px;
left: 11px;
background: var(--brand-teal-accent);
color: var(--text-badge-dark);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
padding: 5px 10px;
border-radius: 4px;
}
.product-card .product-text {
padding: 16px 18px 28px 18px;
flex: 1;
}
.product-card .product-title {
font-size: 18px;
font-weight: 600;
color: var(--s4-card-title);
margin: 0 0 9px 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.product-card .product-price {
font-size: 17px;
font-weight: 600;
color: var(--brand-coral-price);
margin: 0;
}
/* ========================================================= */
/* S5 — The Curator's Vault */
/* ========================================================= */
#s5-vault {
/* Flat bg using mid value. Option: could render as
radial/linear gradient from #266038 (top/heading)
through #1F4A32 (mid) down to #0C1F18 (card row). */
background: var(--s5-bg);
height: 1131px;
padding: 125px 0 0 0;
}
#s5-vault .inner {
max-width: 1440px;
margin: 0 auto;
padding: 0 120px;
}
#s5-vault .heading-block {
text-align: center;
margin-bottom: 120px;
}
#s5-vault h2 {
font-size: 74px;
font-weight: 700;
color: var(--s5-heading);
margin: 0 0 25px 0;
letter-spacing: -0.5px;
}
#s5-vault .subheading {
font-size: 23px;
font-style: italic;
font-weight: 400;
color: var(--s5-subheading);
margin: 0;
}
#s5-vault .testimonial-grid {
display: grid;
grid-template-columns: repeat(3, 380px);
gap: 40px;
justify-content: center;
}
.vault-card {
display: flex;
flex-direction: column;
}
.vault-card .item-image {
width: 100%;
height: 200px;
background: var(--s5-card-bg);
border: 1px solid var(--card-border-vault);
border-radius: 8px;
overflow: hidden;
}
.vault-card .item-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.vault-card:nth-child(1) .item-image {
margin-top: 0;
}
.vault-card:nth-child(2) .item-image {
margin-top: 25px;
}
.vault-card:nth-child(3) .item-image {
margin-top: -25px;
}
.vault-card .quote {
font-size: 18px;
line-height: 32px;
color: var(--s5-quote);
margin: 55px 0 40px 0;
}
.vault-card .attribution {
display: flex;
align-items: center;
gap: 12px;
margin-top: auto;
}
.vault-card .avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: #1E3529;
flex-shrink: 0;
overflow: hidden;
}
.vault-card .avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.vault-card .name {
font-size: 16px;
font-weight: 600;
color: #FFFFFF;
margin: 0 0 3px 0;
}
.vault-card .role {
font-size: 13px;
font-weight: 400;
color: var(--s5-role);
margin: 0;
}
/* ========================================================= */
/* S6 — Explore the Archive */
/* ========================================================= */
#s6-explore {
background: var(--s6-bg);
height: 1175px;
padding: 95px 0 0 0;
}
#s6-explore .inner {
max-width: 1440px;
margin: 0 auto;
padding: 0 40px;
}
#s6-explore .heading-block {
margin-bottom: 80px;
}
#s6-explore h2 {
font-size: 58px;
font-weight: 500;
color: var(--s6-heading);
margin: 0 0 14px 0;
letter-spacing: 0;
}
#s6-explore .underline-accent {
width: 65px;
height: 3px;
background: var(--brand-green-accent);
}
#s6-explore .category-grid {
display: grid;
grid-template-columns: repeat(3, 425px);
gap: 55px 40px;
justify-content: space-between;
padding: 0 40px;
}
.category-tile {
position: relative;
width: 425px;
height: 485px;
border-radius: 18px;
overflow: hidden;
}
.category-tile img {
width: 100%;
height: 100%;
object-fit: cover;
}
.category-tile .scrim {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 55%;
background: linear-gradient(to bottom, rgba(10, 13, 12, 0) 0%, var(--overlay-scrim-bottom) 100%);
}
.category-tile .tile-text {
position: absolute;
left: 24px;
bottom: 22px;
right: 24px;
}
.category-tile .tile-title {
font-size: 40px;
font-weight: 700;
color: var(--s6-tile-title);
margin: 0 0 8px 0;
line-height: 1;
}
.category-tile .tile-subtitle {
font-size: 12px;
font-weight: 500;
color: var(--s6-tile-subtitle);
text-transform: uppercase;
letter-spacing: 1.8px;
margin: 0;
}
.category-tile .corner-indicator {
position: absolute;
right: 18px;
bottom: 18px;
width: 22px;
height: 22px;
border-radius: 50%;
background: rgba(216, 212, 204, 0.15);
border: 1px solid rgba(216, 212, 204, 0.4);
}
/* ========================================================= */
/* S7 — This Week at the Shop */
/* ========================================================= */
#s7-events {
background: linear-gradient(to bottom, var(--s7-bg) 0%, var(--s7-bg-bottom) 100%);
height: 647px;
padding: 144px 0 0 0;
color: var(--text-dark-ink);
}
#s7-events .inner {
max-width: 1440px;
margin: 0 auto;
padding: 0 75px;
}
#s7-events .heading-row {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 75px;
}
#s7-events .heading-left .eyebrow {
font-size: 13px;
font-weight: 600;
color: var(--s7-eyebrow);
text-transform: uppercase;
letter-spacing: 2.2px;
margin: 0 0 14px 0;
}
#s7-events h2 {
font-size: 74px;
font-weight: 700;
color: var(--text-dark-ink);
margin: 0;
letter-spacing: -1.5px;
}
#s7-events .calendar-btn {
height: 40px;
padding: 0 22px;
background: var(--text-dark-ink);
color: var(--text-pill-light);
border: none;
border-radius: 20px;
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1.5px;
cursor: pointer;
display: inline-flex;
align-items: center;
}
#s7-events .events-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px;
}
.event-card {
background: var(--s7-card-bg);
border: 1px solid var(--card-border-white-section);
border-radius: 15px;
padding: 25px;
display: flex;
gap: 30px;
align-items: flex-start;
height: 170px;
}
.event-card .date-badge {
width: 62px;
height: 68px;
background: var(--date-badge-fill);
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.event-card .date-badge .dow {
font-size: 11px;
font-weight: 600;
color: var(--text-dark-ink);
text-transform: uppercase;
letter-spacing: 1.2px;
}
.event-card .date-badge .day {
font-size: 34px;
font-weight: 700;
color: var(--text-dark-ink);
line-height: 1;
margin-top: 2px;
}
.event-card .event-text {
flex: 1;
}
.event-card .event-title {
font-size: 23px;
font-weight: 700;
color: var(--text-dark-ink);
margin: 0 0 8px 0;
}
.event-card .event-meta {
font-size: 14px;
font-weight: 400;
color: var(--s7-meta);
margin: 0 0 20px 0;
}
.event-card .join-link {
font-size: 12px;
font-weight: 600;
color: var(--brand-green-link);
text-transform: uppercase;
letter-spacing: 1.5px;
}
/* ========================================================= */
/* S8 — Join the Inner Circle */
/* ========================================================= */
#s8-newsletter {
background: var(--s8-bg);
height: 445px;
display: flex;
flex-direction: column;
align-items: center;
padding: 72px 0 0 0;
}
#s8-newsletter .content {
width: 880px;
text-align: center;
}
#s8-newsletter h2 {
font-size: 56px;
font-weight: 700;
color: #FFFFFF;
margin: 0 0 35px 0;
line-height: 1.1;
letter-spacing: -0.5px;
}
#s8-newsletter .lede {
font-size: 18px;
font-weight: 400;
color: var(--s8-lede);
margin: 0 0 60px 0;
line-height: 1.5;
}
#s8-newsletter .form-row {
display: flex;
gap: 16px;
width: 800px;
margin: 0 auto;
}
#s8-newsletter .email-input {
flex: 1;
height: 76px;
background: var(--s8-input-bg);
border: none;
border-radius: 38px;
padding: 0 32px;
font-size: 17px;
color: #FFFFFF;
font-family: inherit;
outline: none;
}
#s8-newsletter .email-input::placeholder {
color: var(--s8-placeholder);
}
#s8-newsletter .subscribe-btn {
height: 76px;
padding: 0 38px;
background: var(--brand-mint-cta);
color: var(--brand-forest-text);
border: none;
border-radius: 38px;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.8px;
cursor: pointer;
font-family: inherit;
}
/* ========================================================= */
/* S9 — Insights from the Archive */
/* ========================================================= */
#s9-insights {
background: var(--s9-bg);
height: 826px;
padding: 85px 0 0 0;
}
#s9-insights .inner {
max-width: 1440px;
margin: 0 auto;
padding: 0 100px;
}
#s9-insights .heading-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 100px;
}
#s9-insights h2 {
font-size: 46px;
font-weight: 700;
color: var(--text-white-warm);
margin: 0;
line-height: 1.15;
}
#s9-insights .view-link {
font-size: 12px;
font-weight: 500;
color: var(--s9-view-link);
text-transform: uppercase;
letter-spacing: 1.8px;
}
#s9-insights .insights-grid {
display: grid;
grid-template-columns: repeat(3, 387px);
gap: 40px;
justify-content: space-between;
}
.editorial-card {
/* Treatment 3 — no card chrome, no bg, no border */
display: flex;
flex-direction: column;
}
.editorial-card .card-image {
width: 100%;
height: 220px;
border-radius: 4px;
overflow: hidden;
margin-bottom: 24px;
}
.editorial-card .card-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.editorial-card .card-eyebrow {
font-size: 11px;
font-weight: 600;
color: var(--brand-gold-eyebrow);
text-transform: uppercase;
letter-spacing: 1.8px;
margin: 0 0 12px 0;
}
.editorial-card .card-title {
font-size: 23px;
line-height: 1.25;
font-weight: 700;
color: var(--text-white-warm);
margin: 0 0 16px 0;
}
.editorial-card .card-excerpt {
font-size: 14px;
line-height: 1.5;
color: var(--s9-card-excerpt);
margin: 0;
}
/* ========================================================= */
/* S10 — Footer */
/* ========================================================= */
#s10-footer {
background: var(--s10-bg);
height: 174px;
display: flex;
align-items: center;
}
#s10-footer .inner {
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding: 0 100px;
display: flex;
align-items: center;
justify-content: space-between;
}
#s10-footer .wordmark {
font-size: 17px;
font-weight: 700;
color: var(--brand-cream-wordmark);
text-transform: uppercase;
letter-spacing: 1.5px;
}
#s10-footer .nav-links {
display: flex;
gap: 50px;
}
#s10-footer .nav-links a {
font-size: 11px;
font-weight: 500;
color: var(--text-nav-muted);
text-transform: uppercase;
letter-spacing: 1.5px;
}
#s10-footer .copyright {
font-size: 11px;
font-weight: 500;
color: var(--text-copy-muted);
text-transform: uppercase;
letter-spacing: 1.5px;
}
</style>
</head>
<body>
<!-- S1 — Navigation (wordmark only, no right-side content) -->
<nav id="s1-nav">
<div class="container">
<div class="wordmark">NERDWORKS</div>
</div>
</nav>
<!-- S2 — Hero "Curated for Collectors" -->
<section id="s2-hero">
<div class="hero-inner">
<div class="hero-text">
<p class="eyebrow">THE OBSIDIAN SELECTION</p>
<h1>Curated for<br>Collectors</h1>
<p class="lede">The definitive archive for Trading Card Games, miniatures, and board game rarities. Treated with the reverence of fine art.</p>
<div class="cta-row">
<button class="btn btn-primary">Enter the Vault</button>
<button class="btn btn-secondary">View Portfolio</button>
</div>
</div>
<div class="hero-media">
<div class="hero-card">
<img src="https://placehold.co/310x440/0E1A15/C9A24A?text=HERO+CARD" alt="Featured trading card">
</div>
</div>
</div>
</section>
<!-- S3 — Editorial "MTG Foundations" -->
<section id="s3-editorial">
<div class="editorial-inner">
<div class="editorial-text">
<p class="eyebrow">EDITORIAL FEATURE</p>
<h2>MTG Foundations: The<br>Genesis of Modern Play</h2>
<p class="body">A deep-dive archive of the foundational sets that shaped Magic: The Gathering's modern era. Our curators unpack the provenance, the lore, and the plays that defined a generation — a reference work every serious collector explores.</p>
<a href="#" class="read-link">READ THE FULL ARCHIVE →</a>
</div>
<div class="editorial-media">
<img src="https://placehold.co/620x410/2B3A44/B8936A?text=MTG+FOUNDATIONS" alt="MTG Foundations">
</div>
</div>
</section>
<!-- S4 — Latest Acquisitions (5-col product grid, raised cards) -->
<section id="s4-acquisitions">
<div class="inner">
<div class="heading-row">
<div class="heading-left">
<p class="eyebrow">THE GALLERY</p>
<h2>Latest Acquisitions</h2>
</div>
<a href="#" class="browse-link">BROWSE ALL ITEMS →</a>
</div>
<div class="product-grid">
<article class="product-card">
<div class="image-wrap">
<img src="https://placehold.co/237x275/1A1E1B/E8E4D6?text=DEMON+PRISMATIC" alt="Demon Prismatic">
<span class="staff-pick">STAFF PICK</span>
</div>
<div class="product-text">
<h3 class="product-title">Demon Prismatic</h3>
<p class="product-price">$1,250</p>
</div>
</article>
<article class="product-card">
<div class="image-wrap">
<img src="https://placehold.co/237x275/1A1E1B/B23028?text=MTG+FOUNDATIONS" alt="MTG Foundations">
</div>
<div class="product-text">
<h3 class="product-title">MTG Foundations</h3>
<p class="product-price">$89</p>
</div>
</article>
<article class="product-card">
<div class="image-wrap">
<img src="https://placehold.co/237x275/1A1E1B/C29A4E?text=LORCANA+SHIMMERING" alt="Lorcana Shimmering">
</div>
<div class="product-text">
<h3 class="product-title">Lorcana Shimmering</h3>
<p class="product-price">$145</p>
</div>
</article>
<article class="product-card">
<div class="image-wrap">
<img src="https://placehold.co/237x275/1A1E1B/B23028?text=ONE+PIECE" alt="One Piece Starter Deck">
</div>
<div class="product-text">
<h3 class="product-title">One Piece Starter Deck</h3>
<p class="product-price">$60</p>
</div>
</article>
<article class="product-card">
<div class="image-wrap">
<img src="https://placehold.co/237x275/1A1E1B/3FE0C4?text=STAR+WARS+UNLIMITED" alt="Star Wars Unlimited">
</div>
<div class="product-text">
<h3 class="product-title">Star Wars Unlimited</h3>
<p class="product-price">$220</p>
</div>
</article>
</div>
</div>
</section>
<!-- S5 — The Curator's Vault -->
<section id="s5-vault">
<div class="inner">
<div class="heading-block">
<h2>The Curator's Vault</h2>
<p class="subheading">Personal recommendations from our head archivist.</p>
</div>
<div class="testimonial-grid">
<article class="vault-card">
<div class="item-image">
<img src="https://placehold.co/380x200/B97A52/12281F?text=FIGURE+PORTRAIT" alt="Character figurine">
</div>
<p class="quote">A meticulously preserved archive piece that captures the golden era of character modelling — from mould to patina, every detail is correct.</p>
<div class="attribution">
<div class="avatar"><img src="https://placehold.co/36x36/B97A52/FFFFFF?text=MT" alt=""></div>
<div>
<p class="name">Marcus Thorne</p>
<p class="role">Head Curator</p>
</div>
</div>
</article>
<article class="vault-card">
<div class="item-image">
<img src="https://placehold.co/380x200/C89A52/12281F?text=GOLD+COINS" alt="Gold coin stack">
</div>
<p class="quote">For the serious collector of numismatic curiosities, this stack represents the kind of provenance we obsess over — documented, authenticated, pristine.</p>
<div class="attribution">
<div class="avatar"><img src="https://placehold.co/36x36/C89A52/FFFFFF?text=EV" alt=""></div>
<div>
<p class="name">Elena Voss</p>
<p class="role">Miniature Specialist</p>
</div>
</div>
</article>
<article class="vault-card">
<div class="item-image">
<img src="https://placehold.co/380x200/3E6AA8/12281F?text=GRADED+CARD" alt="Graded trading card">
</div>
<p class="quote">A slabbed specimen from the original print run, population report single digits. We don't see cards like this pass through the vault often.</p>
<div class="attribution">
<div class="avatar"><img src="https://placehold.co/36x36/3E6AA8/FFFFFF?text=JC" alt=""></div>
<div>
<p class="name">Jordan Chen</p>
<p class="role">TCG Analyst</p>
</div>
</div>
</article>
</div>
</div>
</section>
<!-- S6 — Explore the Archive (3x2 category tiles) -->
<section id="s6-explore">
<div class="inner">
<div class="heading-block">
<h2>Explore the Archive</h2>
<div class="underline-accent"></div>
</div>
<div class="category-grid">
<div class="category-tile">
<img src="https://placehold.co/425x485/2D4A5C/1A2028?text=POKEMON" alt="Pokemon">
<div class="scrim"></div>
<div class="tile-text">
<h3 class="tile-title">Pokémon</h3>
<p class="tile-subtitle">TRADING CARD GAME</p>
</div>
<div class="corner-indicator"></div>
</div>
<div class="category-tile">
<img src="https://placehold.co/425x485/8A5A32/1C120A?text=MAGIC" alt="Magic">
<div class="scrim"></div>
<div class="tile-text">
<h3 class="tile-title">Magic</h3>
<p class="tile-subtitle">THE GATHERING</p>
</div>
</div>
<div class="category-tile">
<img src="https://placehold.co/425x485/6C8A92/2A3638?text=LORCANA" alt="Lorcana">
<div class="scrim"></div>
<div class="tile-text">
<h3 class="tile-title">Lorcana</h3>
<p class="tile-subtitle">DISNEY LEGACY</p>
</div>
<div class="corner-indicator"></div>
</div>
<div class="category-tile">
<img src="https://placehold.co/425x485/B89464/2A1C10?text=BOARD+GAMES" alt="Board Games">
<div class="scrim"></div>
<div class="tile-text">
<h3 class="tile-title">Board Games</h3>
<p class="tile-subtitle">STRATEGIC PLAY</p>
</div>
</div>
<div class="category-tile">
<img src="https://placehold.co/425x485/8A7A5C/14100A?text=WARHAMMER" alt="Warhammer">
<div class="scrim"></div>
<div class="tile-text">
<h3 class="tile-title">Warhammer</h3>
<p class="tile-subtitle">MINIATURE WARGAMING</p>
</div>
</div>
<div class="category-tile">
<img src="https://placehold.co/425x485/1E3A2C/0A1410?text=ACCESSORIES" alt="Accessories">
<div class="scrim"></div>
<div class="tile-text">
<h3 class="tile-title">Accessories</h3>
<p class="tile-subtitle">PREMIUM PROTECTION</p>
</div>
</div>
</div>
</div>
</section>
<!-- S7 — This Week at the Shop (WHITE bg) -->
<section id="s7-events">
<div class="inner">
<div class="heading-row">
<div class="heading-left">
<p class="eyebrow">SOCIAL HUB</p>
<h2>This week at the shop.</h2>
</div>
<button class="calendar-btn">FULL CALENDAR</button>
</div>
<div class="events-grid">
<article class="event-card">
<div class="date-badge">
<span class="dow">FRI</span>
<span class="day">15</span>
</div>
<div class="event-text">
<h3 class="event-title">Friday Night Magic</h3>
<p class="event-meta">Standard / Draft • 6:30 PM</p>
<a href="#" class="join-link">JOIN EVENT ›</a>
</div>
</article>
<article class="event-card">
<div class="date-badge">
<span class="dow">SAT</span>
<span class="day">16</span>
</div>
<div class="event-text">
<h3 class="event-title">Pokémon League</h3>
<p class="event-meta">Standard Open Play • 11:00 AM</p>
<a href="#" class="join-link">JOIN EVENT ›</a>
</div>
</article>
</div>
</div>
</section>
<!-- S8 — Join the Inner Circle (GREEN bg, newsletter) -->
<section id="s8-newsletter">
<div class="content">
<h2>Join the Inner Circle</h2>
<p class="lede">First access to rare restocks, exclusive pre-orders, and curator-led community events.</p>
<form class="form-row" onsubmit="return false;">
<input type="email" class="email-input" placeholder="Your collector email address">
<button type="submit" class="subscribe-btn">SUBSCRIBE</button>
</form>
</div>
</section>
<!-- S9 — Insights from the Archive (editorial cards, no chrome) -->
<section id="s9-insights">
<div class="inner">
<div class="heading-row">
<h2>Insights from the Archive</h2>
<a href="#" class="view-link">VIEW INSIGHTS →</a>
</div>
<div class="insights-grid">
<article class="editorial-card">
<div class="card-image">
<img src="https://placehold.co/387x220/C88A3C/1A1E1B?text=MARKET+TRENDS" alt="Market trends">
</div>
<p class="card-eyebrow">MARKET TRENDS</p>
<h3 class="card-title">The Modern Reserved List: What Collectors Should Watch</h3>
<p class="card-excerpt">Our analysts break down the quiet shifts in the secondary market and the sets worth tracking this quarter.</p>
</article>
<article class="editorial-card">
<div class="card-image">
<img src="https://placehold.co/387x220/4B5E8A/1A1E1B?text=CARE+GUIDE" alt="Care guide">
</div>
<p class="card-eyebrow">CARE GUIDE</p>
<h3 class="card-title">Long-Term Storage for Foil Cards: Preventing Pringling</h3>
<p class="card-excerpt">A practical archival guide from our head curator on humidity, sleeves, and climate-controlled long-term storage.</p>
</article>
<article class="editorial-card">
<div class="card-image">
<img src="https://placehold.co/387x220/7A5A32/1A1E1B?text=DEEP+DIVE" alt="Deep dive">
</div>
<p class="card-eyebrow">DEEP DIVE</p>
<h3 class="card-title">Provenance in Miniature Wargaming: Authenticating Vintage Squads</h3>
<p class="card-excerpt">The hallmarks of a genuine vintage kit — sprue patterns, casting seams, and the tells that betray a reproduction.</p>
</article>
</div>
</div>
</section>
<!-- S10 — Footer -->
<footer id="s10-footer">
<div class="inner">
<div class="wordmark">NERDWORKS</div>
<div class="nav-links">
<a href="#">PROVENANCE</a>
<a href="#">SHIPPING</a>
<a href="#">TERMS OF CURATION</a>
<a href="#">PRIVACY</a>
</div>
<div class="copyright">© 2024 NERDWORKS COLLECTOR ARCHIVE. ALL RIGHTS RESERVED.</div>
</div>
</footer>
</body>
</html>
:root {
/* Brand palette */
--brand-green-primary: #1F8A4C;
--brand-green-eyebrow: #4CAF7A;
--brand-green-accent: #4E8C6A;
--brand-green-link: #2F6E5A;
--brand-mint-cta: #7FD9A0;
--brand-forest-text: #0F3A24;
--brand-teal-accent: #3FE0C4;
--brand-coral-price: #E87A5D;
--brand-gold-eyebrow: #B89968;
--brand-cream-wordmark: #E8E4D6;
/* Text / neutrals */
--text-white: #F2F5F2;
--text-white-warm: #F1EFE7;
--text-body-dark: #E8E8E6;
--text-body-soft: #C4CEC8;
--text-body-muted: #8A9891;
--text-nav-muted: #6B8278;
--text-copy-muted: #5A6E65;
--text-dark-ink: #0E1311;
--text-pill-light: #F5F6F5;
--text-badge-dark: #0A1512;
/* Overlays / borders */
--overlay-scrim-bottom: #050605;
--card-border-white-section: #E4E8E6;
--card-border-dark: #243028;
--card-border-vault: #1E3529;
--date-badge-fill: #E8ECEA;
/* Section backgrounds */
--s1-bg: #0A1410;
--s2-bg: #0A1410;
--s2-bg-bottom: #0B0F0D;
--s3-bg: #18211C;
--s4-bg: #0E1310;
--s4-card-bg: #18211C;
--s5-bg: #184030;
--s5-card-bg: #12281F;
--s6-bg: #0A0D0C;
--s7-bg: #F7F8F7;
--s7-bg-bottom: #F4F1EA;
--s7-card-bg: #FFFFFF;
--s8-bg: #1F5234;
--s8-input-bg: #12331F;
--s9-bg: #0A1210;
--s10-bg: #05231A;
/* Hero accents */
--s2-eyebrow: #3E6B56;
--s2-secondary-border: #3A4440;
/* S4 text */
--s4-heading: #ECEBE4;
--s4-eyebrow: #6E8C78;
--s4-browse-link: #B8BCB4;
--s4-card-title: #E8E8E6;
/* S5 text */
--s5-heading: #EDF3EE;
--s5-subheading: #A8C4B1;
--s5-quote: #D8E0DB;
--s5-role: #8A958F;
/* S6 text */
--s6-heading: #F5F5F2;
--s6-tile-title: #F4F4F2;
--s6-tile-subtitle: #A8A39A;
/* S7 text */
--s7-eyebrow: #6B7872;
--s7-meta: #4A5550;
/* S8 text */
--s8-lede: #C8DCCF;
--s8-placeholder: #6E8A78;
/* S9 text */
--s9-card-excerpt: #8A9691;
--s9-view-link: #C8DCCF;
}
* {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: var(--s1-bg);
color: var(--text-white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img {
display: block;
max-width: 100%;
}
a {
text-decoration: none;
color: inherit;
}
.container {
max-width: 1440px;
margin: 0 auto;
padding: 0 40px;
}
/* ========================================================= */
/* S1 — Navigation */
/* ========================================================= */
#s1-nav {
background: var(--s1-bg);
height: 90px;
display: flex;
align-items: center;
}
#s1-nav .wordmark {
color: #E8EDE9;
font-size: 18px;
font-weight: 600;
letter-spacing: 1.2px;
text-transform: uppercase;
}
/* ========================================================= */
/* S2 — Hero "Curated for Collectors" */
/* ========================================================= */
#s2-hero {
background: linear-gradient(to bottom, var(--s2-bg) 0%, var(--s2-bg-bottom) 100%);
height: 1058px;
position: relative;
}
#s2-hero .hero-inner {
max-width: 1440px;
margin: 0 auto;
padding: 225px 40px 0 40px;
display: flex;
gap: 40px;
}
#s2-hero .hero-text {
width: 55%;
}
#s2-hero .eyebrow {
font-size: 13px;
font-weight: 500;
color: var(--s2-eyebrow);
text-transform: uppercase;
letter-spacing: 2.5px;
margin: 0 0 60px 0;
}
#s2-hero h1 {
font-size: 120px;
line-height: 130px;
font-weight: 800;
color: var(--text-white);
margin: 0;
letter-spacing: -1px;
}
#s2-hero .lede {
font-size: 17px;
line-height: 26px;
color: var(--text-body-muted);
margin: 55px 0 0 0;
max-width: 360px;
}
#s2-hero .cta-row {
display: flex;
gap: 16px;
margin: 70px 0 0 40px;
}
#s2-hero .btn {
height: 44px;
padding: 0 22px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 600;
border-radius: 5px;
border: none;
cursor: pointer;
}
#s2-hero .btn-primary {
background: var(--brand-green-primary);
color: #FFFFFF;
}
#s2-hero .btn-secondary {
background: transparent;
color: #E8EDE9;
border: 1px solid var(--s2-secondary-border);
}
#s2-hero .hero-media {
width: 45%;
position: relative;
padding-top: 90px;
}
#s2-hero .hero-card {
width: 310px;
height: 440px;
background: #0E1A15;
border: 1px solid #1C4538;
border-radius: 6px;
margin-left: 70px;
box-shadow: 0 0 160px 30px #0F2A2080;
}
#s2-hero .hero-card img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 6px;
}
/* ========================================================= */
/* S3 — Editorial "MTG Foundations" */
/* ========================================================= */
#s3-editorial {
background: linear-gradient(to bottom, #101814 0%, #222A24 100%);
height: 669px;
position: relative;
}
#s3-editorial .editorial-inner {
max-width: 1440px;
margin: 0 auto;
padding: 120px 40px 0 40px;
display: flex;
gap: 40px;
}
#s3-editorial .editorial-text {
flex: 0 0 680px;
}
#s3-editorial .eyebrow {
font-size: 13px;
font-weight: 600;
color: var(--brand-green-eyebrow);
text-transform: uppercase;
letter-spacing: 2.2px;
margin: 0 0 16px 0;
}
#s3-editorial h2 {
font-size: 68px;
line-height: 1.06;
font-weight: 700;
color: #FFFFFF;
margin: 0;
letter-spacing: -1px;
max-width: 680px;
}
#s3-editorial .body {
font-size: 16px;
line-height: 1.6;
color: var(--text-body-soft);
margin: 55px 0 0 0;
max-width: 580px;
}
#s3-editorial .read-link {
display: inline-block;
margin: 45px 0 0 40px;
font-size: 12px;
font-weight: 500;
color: #D8D8D0;
text-transform: uppercase;
letter-spacing: 2px;
}
#s3-editorial .editorial-media {
flex: 1;
position: relative;
min-height: 400px;
}
#s3-editorial .editorial-media img {
width: 620px;
height: 410px;
border-radius: 6px;
margin-top: 15px;
object-fit: cover;
}
/* ========================================================= */
/* S4 — Latest Acquisitions */
/* ========================================================= */
#s4-acquisitions {
background: var(--s4-bg);
height: 838px;
padding: 120px 0 0 0;
}
#s4-acquisitions .inner {
max-width: 1440px;
margin: 0 auto;
padding: 0 80px;
}
#s4-acquisitions .heading-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 110px;
}
#s4-acquisitions .heading-left .eyebrow {
font-size: 11px;
font-weight: 500;
color: var(--s4-eyebrow);
text-transform: uppercase;
letter-spacing: 2.5px;
margin: 0 0 12px 0;
}
#s4-acquisitions h2 {
font-size: 58px;
font-weight: 400;
color: var(--s4-heading);
margin: 0;
font-family: Georgia, 'Times New Roman', serif;
letter-spacing: -0.5px;
}
#s4-acquisitions .browse-link {
font-size: 11px;
font-weight: 500;
color: var(--s4-browse-link);
text-transform: uppercase;
letter-spacing: 2px;
}
#s4-acquisitions .product-grid {
display: grid;
grid-template-columns: repeat(5, 237px);
gap: 24px;
justify-content: space-between;
}
.product-card {
background: var(--s4-card-bg);
border: 1px solid var(--card-border-dark);
border-radius: 14px;
overflow: hidden;
position: relative;
height: 360px;
display: flex;
flex-direction: column;
}
.product-card .image-wrap {
position: relative;
width: 100%;
height: 275px;
overflow: hidden;
}
.product-card .image-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
}
.product-card .staff-pick {
position: absolute;
top: 11px;
left: 11px;
background: var(--brand-teal-accent);
color: var(--text-badge-dark);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
padding: 5px 10px;
border-radius: 4px;
}
.product-card .product-text {
padding: 16px 18px 28px 18px;
flex: 1;
}
.product-card .product-title {
font-size: 18px;
font-weight: 600;
color: var(--s4-card-title);
margin: 0 0 9px 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.product-card .product-price {
font-size: 17px;
font-weight: 600;
color: var(--brand-coral-price);
margin: 0;
}
/* ========================================================= */
/* S5 — The Curator's Vault */
/* ========================================================= */
#s5-vault {
/* Flat bg using mid value. Option: could render as
radial/linear gradient from #266038 (top/heading)
through #1F4A32 (mid) down to #0C1F18 (card row). */
background: var(--s5-bg);
height: 1131px;
padding: 125px 0 0 0;
}
#s5-vault .inner {
max-width: 1440px;
margin: 0 auto;
padding: 0 120px;
}
#s5-vault .heading-block {
text-align: center;
margin-bottom: 120px;
}
#s5-vault h2 {
font-size: 74px;
font-weight: 700;
color: var(--s5-heading);
margin: 0 0 25px 0;
letter-spacing: -0.5px;
}
#s5-vault .subheading {
font-size: 23px;
font-style: italic;
font-weight: 400;
color: var(--s5-subheading);
margin: 0;
}
#s5-vault .testimonial-grid {
display: grid;
grid-template-columns: repeat(3, 380px);
gap: 40px;
justify-content: center;
}
.vault-card {
display: flex;
flex-direction: column;
}
.vault-card .item-image {
width: 100%;
height: 200px;
background: var(--s5-card-bg);
border: 1px solid var(--card-border-vault);
border-radius: 8px;
overflow: hidden;
}
.vault-card .item-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.vault-card:nth-child(1) .item-image {
margin-top: 0;
}
.vault-card:nth-child(2) .item-image {
margin-top: 25px;
}
.vault-card:nth-child(3) .item-image {
margin-top: -25px;
}
.vault-card .quote {
font-size: 18px;
line-height: 32px;
color: var(--s5-quote);
margin: 55px 0 40px 0;
}
.vault-card .attribution {
display: flex;
align-items: center;
gap: 12px;
margin-top: auto;
}
.vault-card .avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: #1E3529;
flex-shrink: 0;
overflow: hidden;
}
.vault-card .avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.vault-card .name {
font-size: 16px;
font-weight: 600;
color: #FFFFFF;
margin: 0 0 3px 0;
}
.vault-card .role {
font-size: 13px;
font-weight: 400;
color: var(--s5-role);
margin: 0;
}
/* ========================================================= */
/* S6 — Explore the Archive */
/* ========================================================= */
#s6-explore {
background: var(--s6-bg);
height: 1175px;
padding: 95px 0 0 0;
}
#s6-explore .inner {
max-width: 1440px;
margin: 0 auto;
padding: 0 40px;
}
#s6-explore .heading-block {
margin-bottom: 80px;
}
#s6-explore h2 {
font-size: 58px;
font-weight: 500;
color: var(--s6-heading);
margin: 0 0 14px 0;
letter-spacing: 0;
}
#s6-explore .underline-accent {
width: 65px;
height: 3px;
background: var(--brand-green-accent);
}
#s6-explore .category-grid {
display: grid;
grid-template-columns: repeat(3, 425px);
gap: 55px 40px;
justify-content: space-between;
padding: 0 40px;
}
.category-tile {
position: relative;
width: 425px;
height: 485px;
border-radius: 18px;
overflow: hidden;
}
.category-tile img {
width: 100%;
height: 100%;
object-fit: cover;
}
.category-tile .scrim {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 55%;
background: linear-gradient(to bottom, rgba(10, 13, 12, 0) 0%, var(--overlay-scrim-bottom) 100%);
}
.category-tile .tile-text {
position: absolute;
left: 24px;
bottom: 22px;
right: 24px;
}
.category-tile .tile-title {
font-size: 40px;
font-weight: 700;
color: var(--s6-tile-title);
margin: 0 0 8px 0;
line-height: 1;
}
.category-tile .tile-subtitle {
font-size: 12px;
font-weight: 500;
color: var(--s6-tile-subtitle);
text-transform: uppercase;
letter-spacing: 1.8px;
margin: 0;
}
.category-tile .corner-indicator {
position: absolute;
right: 18px;
bottom: 18px;
width: 22px;
height: 22px;
border-radius: 50%;
background: rgba(216, 212, 204, 0.15);
border: 1px solid rgba(216, 212, 204, 0.4);
}
/* ========================================================= */
/* S7 — This Week at the Shop */
/* ========================================================= */
#s7-events {
background: linear-gradient(to bottom, var(--s7-bg) 0%, var(--s7-bg-bottom) 100%);
height: 647px;
padding: 144px 0 0 0;
color: var(--text-dark-ink);
}
#s7-events .inner {
max-width: 1440px;
margin: 0 auto;
padding: 0 75px;
}
#s7-events .heading-row {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 75px;
}
#s7-events .heading-left .eyebrow {
font-size: 13px;
font-weight: 600;
color: var(--s7-eyebrow);
text-transform: uppercase;
letter-spacing: 2.2px;
margin: 0 0 14px 0;
}
#s7-events h2 {
font-size: 74px;
font-weight: 700;
color: var(--text-dark-ink);
margin: 0;
letter-spacing: -1.5px;
}
#s7-events .calendar-btn {
height: 40px;
padding: 0 22px;
background: var(--text-dark-ink);
color: var(--text-pill-light);
border: none;
border-radius: 20px;
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1.5px;
cursor: pointer;
display: inline-flex;
align-items: center;
}
#s7-events .events-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px;
}
.event-card {
background: var(--s7-card-bg);
border: 1px solid var(--card-border-white-section);
border-radius: 15px;
padding: 25px;
display: flex;
gap: 30px;
align-items: flex-start;
height: 170px;
}
.event-card .date-badge {
width: 62px;
height: 68px;
background: var(--date-badge-fill);
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.event-card .date-badge .dow {
font-size: 11px;
font-weight: 600;
color: var(--text-dark-ink);
text-transform: uppercase;
letter-spacing: 1.2px;
}
.event-card .date-badge .day {
font-size: 34px;
font-weight: 700;
color: var(--text-dark-ink);
line-height: 1;
margin-top: 2px;
}
.event-card .event-text {
flex: 1;
}
.event-card .event-title {
font-size: 23px;
font-weight: 700;
color: var(--text-dark-ink);
margin: 0 0 8px 0;
}
.event-card .event-meta {
font-size: 14px;
font-weight: 400;
color: var(--s7-meta);
margin: 0 0 20px 0;
}
.event-card .join-link {
font-size: 12px;
font-weight: 600;
color: var(--brand-green-link);
text-transform: uppercase;
letter-spacing: 1.5px;
}
/* ========================================================= */
/* S8 — Join the Inner Circle */
/* ========================================================= */
#s8-newsletter {
background: var(--s8-bg);
height: 445px;
display: flex;
flex-direction: column;
align-items: center;
padding: 72px 0 0 0;
}
#s8-newsletter .content {
width: 880px;
text-align: center;
}
#s8-newsletter h2 {
font-size: 56px;
font-weight: 700;
color: #FFFFFF;
margin: 0 0 35px 0;
line-height: 1.1;
letter-spacing: -0.5px;
}
#s8-newsletter .lede {
font-size: 18px;
font-weight: 400;
color: var(--s8-lede);
margin: 0 0 60px 0;
line-height: 1.5;
}
#s8-newsletter .form-row {
display: flex;
gap: 16px;
width: 800px;
margin: 0 auto;
}
#s8-newsletter .email-input {
flex: 1;
height: 76px;
background: var(--s8-input-bg);
border: none;
border-radius: 38px;
padding: 0 32px;
font-size: 17px;
color: #FFFFFF;
font-family: inherit;
outline: none;
}
#s8-newsletter .email-input::placeholder {
color: var(--s8-placeholder);
}
#s8-newsletter .subscribe-btn {
height: 76px;
padding: 0 38px;
background: var(--brand-mint-cta);
color: var(--brand-forest-text);
border: none;
border-radius: 38px;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.8px;
cursor: pointer;
font-family: inherit;
}
/* ========================================================= */
/* S9 — Insights from the Archive */
/* ========================================================= */
#s9-insights {
background: var(--s9-bg);
height: 826px;
padding: 85px 0 0 0;
}
#s9-insights .inner {
max-width: 1440px;
margin: 0 auto;
padding: 0 100px;
}
#s9-insights .heading-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 100px;
}
#s9-insights h2 {
font-size: 46px;
font-weight: 700;
color: var(--text-white-warm);
margin: 0;
line-height: 1.15;
}
#s9-insights .view-link {
font-size: 12px;
font-weight: 500;
color: var(--s9-view-link);
text-transform: uppercase;
letter-spacing: 1.8px;
}
#s9-insights .insights-grid {
display: grid;
grid-template-columns: repeat(3, 387px);
gap: 40px;
justify-content: space-between;
}
.editorial-card {
/* Treatment 3 — no card chrome, no bg, no border */
display: flex;
flex-direction: column;
}
.editorial-card .card-image {
width: 100%;
height: 220px;
border-radius: 4px;
overflow: hidden;
margin-bottom: 24px;
}
.editorial-card .card-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.editorial-card .card-eyebrow {
font-size: 11px;
font-weight: 600;
color: var(--brand-gold-eyebrow);
text-transform: uppercase;
letter-spacing: 1.8px;
margin: 0 0 12px 0;
}
.editorial-card .card-title {
font-size: 23px;
line-height: 1.25;
font-weight: 700;
color: var(--text-white-warm);
margin: 0 0 16px 0;
}
.editorial-card .card-excerpt {
font-size: 14px;
line-height: 1.5;
color: var(--s9-card-excerpt);
margin: 0;
}
/* ========================================================= */
/* S10 — Footer */
/* ========================================================= */
#s10-footer {
background: var(--s10-bg);
height: 174px;
display: flex;
align-items: center;
}
#s10-footer .inner {
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding: 0 100px;
display: flex;
align-items: center;
justify-content: space-between;
}
#s10-footer .wordmark {
font-size: 17px;
font-weight: 700;
color: var(--brand-cream-wordmark);
text-transform: uppercase;
letter-spacing: 1.5px;
}
#s10-footer .nav-links {
display: flex;
gap: 50px;
}
#s10-footer .nav-links a {
font-size: 11px;
font-weight: 500;
color: var(--text-nav-muted);
text-transform: uppercase;
letter-spacing: 1.5px;
}
#s10-footer .copyright {
font-size: 11px;
font-weight: 500;
color: var(--text-copy-muted);
text-transform: uppercase;
letter-spacing: 1.5px;
}