← Nerdworks

Nerdworks Homepage FD mockup

MNW1 Homepage Nerdworks
Pick a template type (suggested from BBNW1: Full-page Gutenberg):

Mockup HTML

Open in New Tab
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Nerdworks — Trading cards, tabletop & specialist gaming</title>
<link rel="stylesheet" href="https://use.typekit.net/vlm3jnu.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet">
<style>
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    background: #1f231f;
    color: #f0f2ee;
    font-family: "proxima-nova", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
  }
  img { display: block; max-width: 100%; }
  a { color: inherit; text-decoration: none; }
  button { font-family: inherit; cursor: pointer; border: none; background: none; }

  /* Section pattern */
  .section { width: 100%; }
  .section > div { max-width: 1400px; margin: 0 auto; padding: 60px 20px; }
  .section--anchor { background: #1f231f; color: #f0f2ee; }
  .section--bright { background: #f0f2ee; color: #1f231f; }
  .section--primary { background: #266038; color: #f0f2ee; }

  .wrapper { max-width: 1400px; margin: 0 auto; padding: 0 20px; }

  /* Typography */
  h1, h2, h3, h4, h5 { font-family: "proxima-nova", sans-serif; margin: 0; letter-spacing: -0.01em; }
  h1 { font-size: 56px; font-weight: 800; line-height: 1.1; }
  h2 { font-size: 32px; font-weight: 700; line-height: 1.15; }
  h3 { font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: 0; }
  h4 { font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: 0; }
  p { margin: 0; }

  .lead { font-size: 20px; line-height: 1.5; }
  .meta { font-size: 14px; line-height: 1.5; }

  .eyebrow {
    font-family: "proxima-nova", sans-serif;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 15px;
    display: inline-block;
  }
  .section--anchor .eyebrow { color: #f5c840; }
  .section--bright .eyebrow { color: #266038; }
  .section--primary .eyebrow { color: #f5c840; }

  .label {
    font-family: "JetBrains Mono", monospace;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0;
  }
  .section--anchor .label { color: #f5c840; }
  .section--bright .label { color: #266038; }
  .section--primary .label { color: #f5c840; }

  .price {
    font-family: "JetBrains Mono", monospace;
    font-weight: 500;
    font-size: 24px;
  }
  .section--anchor .price { color: #f5c840; }
  .section--bright .price { color: #266038; }
  .section--primary .price { color: #f5c840; }

  /* Buttons */
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 20px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 4px;
    border: 1px solid transparent;
    transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
    text-align: center;
  }
  .section--anchor .button--primary { background: #f5c840; color: #1f231f; }
  .section--anchor .button--primary:hover { background: #f0f2ee; }
  .section--bright .button--primary { background: #266038; color: #f0f2ee; }
  .section--bright .button--primary:hover { background: #1f231f; }
  .section--primary .button--primary { background: #1f231f; color: #f0f2ee; }
  .section--primary .button--primary:hover { background: #f5c840; color: #1f231f; }

  /* Hero exception: primary fill on anchor */
  .button--hero { background: #266038; color: #f0f2ee; }
  .button--hero:hover { background: #f5c840; color: #1f231f; }

  .button--ghost { background: transparent; }
  .section--anchor .button--ghost { border-color: #f5c840; color: #f5c840; }
  .section--anchor .button--ghost:hover { background: #f5c840; color: #1f231f; }
  .section--bright .button--ghost { border-color: #266038; color: #266038; }
  .section--bright .button--ghost:hover { background: #266038; color: #f0f2ee; }
  .section--primary .button--ghost { border-color: #f5c840; color: #f5c840; }
  .section--primary .button--ghost:hover { background: #f5c840; color: #1f231f; }

  /* Site header */
  .site-header {
    background: #1f231f;
    border-bottom: 1px solid rgba(240, 242, 238, 0.12);
  }
  .site-header__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
  }
  .site-header__logo {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #f0f2ee;
  }
  .site-header__logo span { color: #f5c840; }
  .site-header__nav { display: flex; gap: 30px; }
  .site-header__nav a {
    font-size: 14px;
    font-weight: 500;
    color: #f0f2ee;
    transition: color 0.15s;
  }
  .site-header__nav a:hover { color: #f5c840; }
  .site-header__actions { display: flex; gap: 15px; align-items: center; }
  .site-header__search {
    width: 240px;
    height: 40px;
    background: #262a26;
    border: 1px solid rgba(240, 242, 238, 0.12);
    border-radius: 4px;
    padding: 0 12px;
    color: #f0f2ee;
    font-family: inherit;
    font-size: 14px;
  }
  .site-header__search::placeholder { color: rgba(240, 242, 238, 0.5); }
  .site-header__icons { display: flex; gap: 15px; }
  .site-header__icons a {
    font-size: 14px;
    font-weight: 500;
    color: #f0f2ee;
    transition: color 0.15s;
  }
  .site-header__icons a:hover { color: #f5c840; }

  /* ====== HERO ====== */
  .hero {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 720px;
    overflow: hidden;
  }
  .hero__left {
    padding: 60px 60px 60px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    z-index: 2;
  }
  .hero__intro { max-width: 560px; padding-top: 40px; }
  .hero__intro h1 { margin-bottom: 20px; }
  .hero__intro .lead { margin-bottom: 40px; color: rgba(240, 242, 238, 0.85); }
  .hero__right { position: relative; }
  .hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .hero__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, #1f231f 0%, #1f231f 10%, rgba(31, 35, 31, 0.85) 30%, rgba(31, 35, 31, 0) 60%);
    z-index: 1;
  }

  .usp-panel {
    background: rgba(31, 35, 31, 0.72);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(240, 242, 238, 0.12);
    border-radius: 8px;
    padding: 30px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 60px;
  }
  .usp-cell { display: flex; gap: 15px; align-items: flex-start; }
  .usp-cell + .usp-cell { border-left: 1px solid rgba(240, 242, 238, 0.12); padding-left: 20px; }
  .usp-cell__icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #266038;
  }
  .usp-cell__label { font-size: 14px; font-weight: 700; color: #f0f2ee; margin-bottom: 2px; }
  .usp-cell__sub { font-size: 12px; line-height: 1.4; color: rgba(240, 242, 238, 0.65); }

  /* ====== SHOP BY GAME ====== */
  .shop-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .shop-tile {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    display: block;
    transition: transform 0.2s;
  }
  .shop-tile:hover { transform: translateY(-2px); }
  .shop-tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .shop-tile__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(31, 35, 31, 0.85) 0%, rgba(31, 35, 31, 0.2) 60%, rgba(31, 35, 31, 0) 100%);
    transition: background 0.2s;
  }
  .shop-tile:hover .shop-tile__overlay { background: linear-gradient(to top, rgba(31, 35, 31, 0.9) 0%, rgba(31, 35, 31, 0.35) 70%, rgba(31, 35, 31, 0.1) 100%); }
  .shop-tile__name {
    position: absolute;
    left: 20px;
    bottom: 20px;
    right: 20px;
    font-size: 24px;
    font-weight: 700;
    color: #f0f2ee;
    letter-spacing: -0.01em;
    line-height: 1.15;
  }
  .shop-tile__count {
    position: absolute;
    top: 15px;
    right: 15px;
    font-family: "JetBrains Mono", monospace;
    font-weight: 500;
    font-size: 12px;
    color: #f5c840;
    background: rgba(31, 35, 31, 0.85);
    padding: 4px 8px;
    border-radius: 4px;
  }

  /* Section header row */
  .section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 40px;
    gap: 40px;
  }
  .section-header__left { max-width: 720px; }
  .section-header__link {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    padding-bottom: 2px;
    border-bottom: 1px solid;
    transition: opacity 0.15s;
  }
  .section--anchor .section-header__link { color: #f5c840; border-color: #f5c840; }
  .section--bright .section-header__link { color: #266038; border-color: #266038; }
  .section--primary .section-header__link { color: #f5c840; border-color: #f5c840; }
  .section-header__link:hover { opacity: 0.7; }

  /* ====== FEATURED PRODUCT ====== */
  .featured-product {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
  }
  .featured-product__image {
    aspect-ratio: 4 / 5;
    border-radius: 8px;
    overflow: hidden;
  }
  .featured-product__image img { width: 100%; height: 100%; object-fit: cover; }
  .featured-product__content { padding: 20px 0; }
  .featured-product__content h2 { margin-bottom: 20px; }
  .featured-product__content .lead { margin-bottom: 30px; color: rgba(240, 242, 238, 0.9); }
  .featured-product__meta {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    padding: 15px 0;
    border-top: 1px solid rgba(240, 242, 238, 0.18);
    border-bottom: 1px solid rgba(240, 242, 238, 0.18);
  }
  .featured-product__meta .label { color: rgba(240, 242, 238, 0.75); }
  .featured-product__meta .price { color: #f5c840; }

  /* ====== PRODUCT CARDS (New Arrivals on anchor) ====== */
  .product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  .product-card {
    background: #262a26;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .product-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(25, 28, 25, 0.5);
  }
  .product-card__image {
    aspect-ratio: 4 / 5;
    overflow: hidden;
  }
  .product-card__image img { width: 100%; height: 100%; object-fit: cover; }
  .product-card__body {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
  }
  .product-card__eyebrow {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #f5c840;
  }
  .product-card__title {
    font-size: 16px;
    font-weight: 600;
    color: #f0f2ee;
    line-height: 1.3;
  }
  .product-card__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    margin-top: auto;
    border-top: 1px solid rgba(240, 242, 238, 0.12);
  }
  .product-card__price {
    font-family: "JetBrains Mono", monospace;
    font-weight: 500;
    font-size: 18px;
    color: #f5c840;
  }
  .product-card__stock {
    font-family: "JetBrains Mono", monospace;
    font-weight: 500;
    font-size: 11px;
    color: rgba(240, 242, 238, 0.6);
  }
  .product-card__cta {
    margin-top: 10px;
    width: 100%;
    min-height: 40px;
    padding: 0 15px;
    font-size: 14px;
    font-weight: 600;
    background: transparent;
    border: 1px solid #f5c840;
    color: #f5c840;
    border-radius: 4px;
    transition: background 0.2s, color 0.2s;
  }
  .product-card__cta:hover { background: #f5c840; color: #1f231f; }

  /* ====== PRE-ORDER ====== */
  .pre-order {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
  }
  .pre-order__image {
    aspect-ratio: 3 / 2;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 40px;
  }
  .pre-order__image img { width: 100%; height: 100%; object-fit: cover; }
  .pre-order h2 { margin-bottom: 20px; }
  .pre-order .lead { margin-bottom: 30px; color: rgba(31, 35, 31, 0.8); }
  .pre-order__meta {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 30px;
    padding: 15px 0;
    border-top: 1px solid rgba(25, 28, 25, 0.12);
    border-bottom: 1px solid rgba(25, 28, 25, 0.12);
    flex-wrap: wrap;
  }
  .pre-order__meta-item { display: flex; flex-direction: column; gap: 4px; }
  .pre-order__meta-item .meta { color: rgba(25, 28, 25, 0.6); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }

  /* ====== HOTTEST SINGLES ====== */
  .hot-singles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }
  .hot-single {
    background: #f0f2ee;
    color: #1f231f;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(25, 28, 25, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
  }
  .hot-single:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(25, 28, 25, 0.2); }
  .hot-single__image { aspect-ratio: 4 / 5; overflow: hidden; }
  .hot-single__image img { width: 100%; height: 100%; object-fit: cover; }
  .hot-single__body { padding: 20px; display: flex; flex-direction: column; gap: 15px; flex: 1; }
  .hot-single__title { font-size: 22px; font-weight: 600; line-height: 1.3; color: #1f231f; }
  .hot-single__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(25, 28, 25, 0.12);
  }
  .hot-single__meta span {
    font-family: "JetBrains Mono", monospace;
    font-weight: 500;
    font-size: 12px;
    color: #266038;
  }
  .hot-single__price {
    font-family: "JetBrains Mono", monospace;
    font-weight: 500;
    font-size: 28px;
    color: #266038;
  }
  .hot-single__commentary { font-size: 14px; line-height: 1.6; color: rgba(25, 28, 25, 0.85); }
  .hot-single__commentary strong { font-weight: 600; }

  /* ====== SINGLES INTRO GRID ====== */
  .singles-intro { text-align: center; max-width: 720px; margin: 0 auto 40px; }
  .singles-intro h2 { margin-bottom: 20px; }
  .singles-intro .lead { color: rgba(240, 242, 238, 0.85); }
  .singles-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    margin-bottom: 40px;
  }
  .single-tile {
    background: #262a26;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s;
  }
  .single-tile:hover { transform: translateY(-2px); }
  .single-tile__image { aspect-ratio: 4 / 5; overflow: hidden; }
  .single-tile__image img { width: 100%; height: 100%; object-fit: cover; }
  .single-tile__body { padding: 12px; display: flex; flex-direction: column; gap: 6px; }
  .single-tile__name { font-size: 13px; font-weight: 600; color: #f0f2ee; line-height: 1.25; }
  .single-tile__set { font-size: 11px; color: rgba(240, 242, 238, 0.6); }
  .single-tile__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid rgba(240, 242, 238, 0.12);
  }
  .single-tile__condition {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    color: #1f231f;
    background: #f5c840;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
  }
  .single-tile__price {
    font-family: "JetBrains Mono", monospace;
    font-weight: 500;
    font-size: 14px;
    color: #f5c840;
  }
  .singles-ctas { display: flex; gap: 15px; justify-content: center; }

  /* ====== TRUST STRIP ====== */
  .trust-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    padding: 0;
  }
  .section--bright .trust-strip-section > div { padding: 40px 20px; }
  .trust-cell {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 20px;
  }
  .trust-cell + .trust-cell { border-left: 1px solid rgba(25, 28, 25, 0.12); }
  .trust-cell__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #266038;
  }
  .trust-cell__figure {
    font-family: "JetBrains Mono", monospace;
    font-weight: 500;
    font-size: 24px;
    color: #266038;
    line-height: 1;
    margin-bottom: 4px;
  }
  .trust-cell__label { font-size: 13px; color: rgba(25, 28, 25, 0.75); line-height: 1.3; }

  /* ====== SET SPOTLIGHT ====== */
  .spotlight {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
  }
  .spotlight__image {
    aspect-ratio: 4 / 5;
    border-radius: 8px;
    overflow: hidden;
  }
  .spotlight__image img { width: 100%; height: 100%; object-fit: cover; }
  .spotlight__content h2 { margin-bottom: 20px; }
  .spotlight__content p { margin-bottom: 20px; color: rgba(240, 242, 238, 0.9); }
  .spotlight__meta {
    display: flex;
    gap: 30px;
    margin-bottom: 30px;
    padding: 15px 0;
    border-top: 1px solid rgba(240, 242, 238, 0.18);
    border-bottom: 1px solid rgba(240, 242, 238, 0.18);
  }
  .spotlight__meta-item .meta { color: rgba(240, 242, 238, 0.65); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }
  .spotlight__meta-item .label { color: #f5c840; font-size: 16px; }

  /* ====== SALE OR RETURN ====== */
  .sor { text-align: center; }
  .sor__intro { max-width: 720px; margin: 0 auto 60px; }
  .sor__intro h2 { margin-bottom: 20px; }
  .sor__intro .lead { color: rgba(240, 242, 238, 0.85); }
  .sor__process {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 60px;
    text-align: left;
  }
  .sor-step {
    background: #262a26;
    padding: 30px;
    border-radius: 8px;
  }
  .sor-step__num {
    font-family: "proxima-nova", sans-serif;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #f5c840;
    margin-bottom: 15px;
    display: block;
  }
  .sor-step h3 { margin-bottom: 15px; color: #f0f2ee; }
  .sor-step p { color: rgba(240, 242, 238, 0.8); font-size: 14px; line-height: 1.6; }

  /* ====== TABLE BOOKING ====== */
  .table-booking { text-align: center; }
  .table-booking__intro { max-width: 720px; margin: 0 auto 40px; }
  .table-booking__intro h2 { margin-bottom: 20px; }
  .table-booking__intro .lead { color: rgba(25, 28, 25, 0.8); }
  .terrain-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 40px;
  }
  .terrain-card {
    background: #1f231f;
    color: #f0f2ee;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(25, 28, 25, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
    text-align: left;
  }
  .terrain-card:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(25, 28, 25, 0.2); }
  .terrain-card__image { aspect-ratio: 4 / 5; overflow: hidden; }
  .terrain-card__image img { width: 100%; height: 100%; object-fit: cover; }
  .terrain-card__body { padding: 15px; display: flex; flex-direction: column; gap: 6px; }
  .terrain-card__name { font-size: 16px; font-weight: 600; color: #f0f2ee; }
  .terrain-card__sub { font-family: "JetBrains Mono", monospace; font-size: 11px; color: #f5c840; }
  .table-booking__ctas { display: flex; gap: 15px; justify-content: center; }

  /* ====== EVENTS ====== */
  .events-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  .event-card {
    background: #f0f2ee;
    color: #1f231f;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(25, 28, 25, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
  }
  .event-card:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(25, 28, 25, 0.2); }
  .event-card__image { aspect-ratio: 3 / 2; overflow: hidden; }
  .event-card__image img { width: 100%; height: 100%; object-fit: cover; }
  .event-card__body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
  .event-card__eyebrow {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #266038;
  }
  .event-card__name { font-size: 18px; font-weight: 600; color: #1f231f; line-height: 1.3; }
  .event-card__date {
    font-family: "JetBrains Mono", monospace;
    font-weight: 500;
    font-size: 13px;
    color: #266038;
  }
  .event-card__desc { font-size: 13px; line-height: 1.5; color: rgba(25, 28, 25, 0.75); }
  .event-card__cta {
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid rgba(25, 28, 25, 0.12);
    font-size: 13px;
    font-weight: 600;
    color: #266038;
    align-self: flex-start;
    transition: opacity 0.15s;
  }
  .event-card__cta:hover { opacity: 0.7; }

  /* ====== FEATURED EVENT ====== */
  .featured-event {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    min-height: 520px;
    display: flex;
    align-items: flex-end;
  }
  .featured-event__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .featured-event__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(31, 35, 31, 0.92) 0%, rgba(31, 35, 31, 0.7) 45%, rgba(31, 35, 31, 0.2) 80%, rgba(31, 35, 31, 0) 100%);
  }
  .featured-event__content {
    position: relative;
    z-index: 2;
    padding: 60px;
    max-width: 640px;
    color: #f0f2ee;
  }
  .featured-event__date {
    font-family: "JetBrains Mono", monospace;
    font-weight: 500;
    font-size: 14px;
    color: #f5c840;
    margin-bottom: 15px;
    display: block;
  }
  .featured-event__content h2 { font-size: 48px; line-height: 1.1; margin-bottom: 20px; color: #f0f2ee; }
  .featured-event__content p { font-size: 16px; line-height: 1.6; margin-bottom: 30px; color: rgba(240, 242, 238, 0.9); }

  /* ====== EVENTS GALLERY ====== */
  .gallery-mosaic {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 140px;
    gap: 15px;
    margin-bottom: 30px;
  }
  .gallery-mosaic > a {
    overflow: hidden;
    border-radius: 8px;
    display: block;
    transition: transform 0.2s;
  }
  .gallery-mosaic > a:hover { transform: scale(1.01); }
  .gallery-mosaic img { width: 100%; height: 100%; object-fit: cover; }
  .gm-1 { grid-column: span 3; grid-row: span 2; }
  .gm-2 { grid-column: span 2; grid-row: span 2; }
  .gm-3 { grid-column: span 1; grid-row: span 1; }
  .gm-4 { grid-column: span 1; grid-row: span 1; }
  .gm-5 { grid-column: span 2; grid-row: span 1; }
  .gm-6 { grid-column: span 4; grid-row: span 2; }
  .gallery-caption {
    text-align: center;
    font-size: 14px;
    color: rgba(25, 28, 25, 0.7);
    max-width: 560px;
    margin: 0 auto;
  }
  .gallery-caption a { color: #266038; font-weight: 600; border-bottom: 1px solid #266038; }
  .gallery-caption a:hover { opacity: 0.7; }

  /* ====== BLOG ====== */
  .blog-intro { max-width: 720px; margin-bottom: 40px; }
  .blog-intro p { color: rgba(240, 242, 238, 0.85); margin-top: 10px; }
  .blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 40px;
  }
  .blog-card {
    background: #f0f2ee;
    color: #1f231f;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(25, 28, 25, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
  }
  .blog-card:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(25, 28, 25, 0.2); }
  .blog-card__image { aspect-ratio: 3 / 2; overflow: hidden; }
  .blog-card__image img { width: 100%; height: 100%; object-fit: cover; }
  .blog-card__body { padding: 25px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
  .blog-card__eyebrow {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #266038;
  }
  .blog-card__date {
    font-family: "JetBrains Mono", monospace;
    font-weight: 500;
    font-size: 12px;
    color: rgba(25, 28, 25, 0.6);
  }
  .blog-card__title { font-size: 20px; font-weight: 600; line-height: 1.3; color: #1f231f; }
  .blog-card__hook { font-size: 14px; line-height: 1.6; color: rgba(25, 28, 25, 0.8); }
  .blog-card__read {
    margin-top: auto;
    font-size: 13px;
    font-weight: 600;
    color: #266038;
    padding-top: 15px;
    border-top: 1px solid rgba(25, 28, 25, 0.12);
  }
  .blog-all { text-align: center; }
  .blog-all a {
    font-size: 14px;
    font-weight: 600;
    color: #f5c840;
    border-bottom: 1px solid #f5c840;
    padding-bottom: 2px;
  }
  .blog-all a:hover { opacity: 0.7; }

  /* ====== NEWSLETTER ====== */
  .newsletter { text-align: center; max-width: 560px; margin: 0 auto; }
  .newsletter h2 { margin-bottom: 20px; }
  .newsletter p { margin-bottom: 30px; color: rgba(240, 242, 238, 0.85); font-size: 18px; line-height: 1.5; }
  .newsletter__form {
    display: flex;
    gap: 10px;
    align-items: stretch;
  }
  .newsletter__input {
    flex: 1;
    height: 48px;
    background: #262a26;
    border: 1px solid rgba(240, 242, 238, 0.18);
    border-radius: 4px;
    padding: 0 15px;
    color: #f0f2ee;
    font-family: inherit;
    font-size: 15px;
  }
  .newsletter__input:focus { outline: none; border-color: #f5c840; }
  .newsletter__input::placeholder { color: rgba(240, 242, 238, 0.5); }
  .newsletter__submit {
    height: 48px;
    padding: 0 24px;
    background: #f5c840;
    color: #1f231f;
    font-weight: 600;
    font-size: 15px;
    border-radius: 4px;
    transition: background 0.2s;
  }
  .newsletter__submit:hover { background: #f0f2ee; }

  /* ====== SITE FOOTER ====== */
  .site-footer {
    background: #1f231f;
    color: #f0f2ee;
    border-top: 1px solid rgba(240, 242, 238, 0.12);
  }
  .site-footer__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px 20px 30px;
  }
  .site-footer__top {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(240, 242, 238, 0.12);
  }
  .site-footer__brand h3 {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 15px;
    letter-spacing: -0.01em;
  }
  .site-footer__brand h3 span { color: #f5c840; }
  .site-footer__brand p { font-size: 14px; color: rgba(240, 242, 238, 0.7); line-height: 1.6; }
  .site-footer__col h4 {
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #f5c840;
    margin-bottom: 15px;
  }
  .site-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
  .site-footer__col a { font-size: 14px; color: rgba(240, 242, 238, 0.8); transition: color 0.15s; }
  .site-footer__col a:hover { color: #f5c840; }
  .site-footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 30px;
    font-size: 13px;
    color: rgba(240, 242, 238, 0.6);
  }
  .site-footer__legal { display: flex; gap: 20px; }
  .site-footer__legal a:hover { color: #f5c840; }

  .icon { width: 20px; height: 20px; flex-shrink: 0; }
  .icon-lg { width: 28px; height: 28px; }
</style>
</head>
<body>

<header class="site-header">
  <div class="site-header__inner">
    <a href="#" class="site-header__logo">NERD<span>WORKS</span></a>
    <nav class="site-header__nav">
      <a href="#">Trading cards</a>
      <a href="#">Singles</a>
      <a href="#">Warhammer</a>
      <a href="#">D&D</a>
      <a href="#">Star Wars</a>
      <a href="#">Events</a>
      <a href="#">Journal</a>
    </nav>
    <div class="site-header__actions">
      <input type="search" class="site-header__search" placeholder="Search cards, sets, products…">
      <div class="site-header__icons">
        <a href="#">Account</a>
        <a href="#">Cart (0)</a>
      </div>
    </div>
  </div>
</header>

<section class="section section--anchor">
  <div>
    <div class="hero">
      <div class="hero__left">
        <div class="hero__intro">
          <span class="eyebrow">Independent specialists · est. 2014</span>
          <h1>Cards, kits and tabletop, curated by people who play.</h1>
          <p class="lead">Trading card games, Warhammer, D&D and Star Wars collectibles — hand-picked stock, fair prices and a real shop floor behind every listing.</p>
          <a href="#" class="button button--hero">Shop new arrivals</a>
        </div>
        <div class="usp-panel">
          <div class="usp-cell">
            <div class="usp-cell__icon">
              <svg class="icon-lg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75"><path d="M12 2l8 4v6c0 5-3.5 9-8 10-4.5-1-8-5-8-10V6l8-4z"/><path d="M9 12l2 2 4-4"/></svg>
            </div>
            <div>
              <div class="usp-cell__label">Authenticity</div>
              <div class="usp-cell__sub">Every single staff-verified at intake</div>
            </div>
          </div>
          <div class="usp-cell">
            <div class="usp-cell__icon">
              <svg class="icon-lg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75"><path d="M3 7h13v8H3z"/><path d="M16 10h4l1 3v2h-5"/><circle cx="7" cy="17" r="2"/><circle cx="18" cy="17" r="2"/></svg>
            </div>
            <div>
              <div class="usp-cell__label">Shipping</div>
              <div class="usp-cell__sub">Tracked UK dispatch within 24 hours</div>
            </div>
          </div>
          <div class="usp-cell">
            <div class="usp-cell__icon">
              <svg class="icon-lg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75"><rect x="4" y="10" width="16" height="11" rx="1"/><path d="M8 10V7a4 4 0 018 0v3"/></svg>
            </div>
            <div>
              <div class="usp-cell__label">Security</div>
              <div class="usp-cell__sub">Secure checkout, buyer protection</div>
            </div>
          </div>
          <div class="usp-cell">
            <div class="usp-cell__icon">
              <svg class="icon-lg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75"><circle cx="9" cy="9" r="3"/><circle cx="17" cy="11" r="2"/><path d="M3 19c0-3 3-5 6-5s6 2 6 5"/><path d="M15 18c0-2 2-3 4-3s2 1 2 1"/></svg>
            </div>
            <div>
              <div class="usp-cell__label">Community</div>
              <div class="usp-cell__sub">In-store events, leagues, painting nights</div>
            </div>
          </div>
        </div>
      </div>
      <div class="hero__right">
        <img class="hero__img" src="https://camcom.dev/wp-content/uploads/2026/04/trading-cards-mtg-display-1.jpg" alt="Magic the Gathering trading cards on display">
        <div class="hero__gradient"></div>
      </div>
    </div>
  </div>
</section>

<section class="section section--bright">
  <div>
    <div class="section-header">
      <div class="section-header__left">
        <span class="eyebrow">Trading card games</span>
        <h2>Shop by game</h2>
      </div>
      <a href="#" class="section-header__link">View all games →</a>
    </div>
    <div class="shop-grid">
      <a href="#" class="shop-tile">
        <img src="https://camcom.dev/wp-content/uploads/2026/04/trading-cards-pokemon-stack-1.jpg" alt="Pokémon trading cards">
        <div class="shop-tile__overlay"></div>
        <span class="shop-tile__count">2,840 listings</span>
        <span class="shop-tile__name">Pokémon</span>
      </a>
      <a href="#" class="shop-tile">
        <img src="https://camcom.dev/wp-content/uploads/2026/04/trading-cards-mtg-1.jpg" alt="Magic: The Gathering cards">
        <div class="shop-tile__overlay"></div>
        <span class="shop-tile__count">4,120 listings</span>
        <span class="shop-tile__name">Magic: The Gathering</span>
      </a>
      <a href="#" class="shop-tile">
        <img src="https://camcom.dev/wp-content/uploads/2026/04/playing-cards-1.jpg" alt="Lorcana trading cards">
        <div class="shop-tile__overlay"></div>
        <span class="shop-tile__count">680 listings</span>
        <span class="shop-tile__name">Lorcana</span>
      </a>
      <a href="#" class="shop-tile">
        <img src="https://camcom.dev/wp-content/uploads/2026/04/trading-cards-playing-1.jpg" alt="One Piece trading card game">
        <div class="shop-tile__overlay"></div>
        <span class="shop-tile__count">410 listings</span>
        <span class="shop-tile__name">One Piece</span>
      </a>
      <a href="#" class="shop-tile">
        <img src="https://camcom.dev/wp-content/uploads/2026/04/trading-cards-pokemon-table-1.jpg" alt="Star Wars Unlimited cards">
        <div class="shop-tile__overlay"></div>
        <span class="shop-tile__count">520 listings</span>
        <span class="shop-tile__name">Star Wars Unlimited</span>
      </a>
      <a href="#" class="shop-tile">
        <img src="https://camcom.dev/wp-content/uploads/2026/04/dice-polyhedral-1.jpg" alt="Riftbound trading card game">
        <div class="shop-tile__overlay"></div>
        <span class="shop-tile__count">New launch</span>
        <span class="shop-tile__name">Riftbound</span>
      </a>
    </div>
  </div>
</section>

<section class="section section--primary">
  <div>
    <div class="featured-product">
      <div class="featured-product__image">
        <img src="https://camcom.dev/wp-content/uploads/2026/04/product-pokemon-etb-1.jpg" alt="Pokémon Elite Trainer Box">
      </div>
      <div class="featured-product__content">
        <span class="eyebrow">Featured · Pokémon TCG</span>
        <h2>Scarlet & Violet — Twilight Masquerade Elite Trainer Box</h2>
        <p class="lead">Nine booster packs, full-art Ogerpon promo, sleeves and dice — a clean entry point for the format and a smart hold for collectors tracking sealed product. Limited UK allocation, packed and sealed by our team.</p>
        <div class="featured-product__meta">
          <span class="label">SKU · NW-PKM-TWM-ETB</span>
          <span class="label">In stock · 38 units</span>
          <span class="price">£49.95</span>
        </div>
        <a href="#" class="button button--primary">Add to cart</a>
      </div>
    </div>
  </div>
</section>

<section class="section section--anchor">
  <div>
    <div class="section-header">
      <div class="section-header__left">
        <span class="eyebrow">Just landed · this week</span>
        <h2>New arrivals</h2>
      </div>
      <a href="#" class="section-header__link">View all new arrivals →</a>
    </div>
    <div class="product-grid">
      <a href="#" class="product-card">
        <div class="product-card__image">
          <img src="https://camcom.dev/wp-content/uploads/2026/04/product-switch-1.jpg" alt="Nintendo Switch console">
        </div>
        <div class="product-card__body">
          <span class="product-card__eyebrow">Console</span>
          <div class="product-card__title">Nintendo Switch — OLED Model</div>
          <div class="product-card__row">
            <span class="product-card__price">£309.00</span>
            <span class="product-card__stock">In stock</span>
          </div>
          <button type="button" class="product-card__cta">Add to cart</button>
        </div>
      </a>
      <a href="#" class="product-card">
        <div class="product-card__image">
          <img src="https://camcom.dev/wp-content/uploads/2026/04/product-ps5-controller-1.jpg" alt="PS5 DualSense controller">
        </div>
        <div class="product-card__body">
          <span class="product-card__eyebrow">Accessory</span>
          <div class="product-card__title">DualSense Wireless Controller</div>
          <div class="product-card__row">
            <span class="product-card__price">£59.99</span>
            <span class="product-card__stock">In stock · 12</span>
          </div>
          <button type="button" class="product-card__cta">Add to cart</button>
        </div>
      </a>
      <a href="#" class="product-card">
        <div class="product-card__image">
          <img src="https://camcom.dev/wp-content/uploads/2026/04/figurines-miniatures-1.jpg" alt="Warhammer miniatures">
        </div>
        <div class="product-card__body">
          <span class="product-card__eyebrow">Warhammer 40K</span>
          <div class="product-card__title">Space Marines — Combat Patrol</div>
          <div class="product-card__row">
            <span class="product-card__price">£90.00</span>
            <span class="product-card__stock">In stock · 6</span>
          </div>
          <button type="button" class="product-card__cta">Add to cart</button>
        </div>
      </a>
      <a href="#" class="product-card">
        <div class="product-card__image">
          <img src="https://camcom.dev/wp-content/uploads/2026/04/gaming-handheld-1.jpg" alt="Gaming handheld console">
        </div>
        <div class="product-card__body">
          <span class="product-card__eyebrow">Handheld</span>
          <div class="product-card__title">Steam Deck OLED — 512GB</div>
          <div class="product-card__row">
            <span class="product-card__price">£479.00</span>
            <span class="product-card__stock">Low stock · 2</span>
          </div>
          <button type="button" class="product-card__cta">Add to cart</button>
        </div>
      </a>
    </div>
  </div>
</section>

<section class="section section--bright">
  <div>
    <div class="pre-order">
      <div class="pre-order__image">
        <img src="https://camcom.dev/wp-content/uploads/2026/04/trading-cards-mtg-display-1.jpg" alt="Magic: The Gathering set release">
      </div>
      <span class="eyebrow">Pre-order · Magic: The Gathering</span>
      <h2>Bloomburrow — Collector Booster Box</h2>
      <p class="lead">A woodland-folk set with serialised foils, retro-frame treatments and tournament-relevant reprints. Pre-orders ship priority on release day with our usual sleeve-on-arrival service for collector cases.</p>
      <div class="pre-order__meta">
        <div class="pre-order__meta-item">
          <span class="meta">Release date</span>
          <span class="label">02 August 2025</span>
        </div>
        <div class="pre-order__meta-item">
          <span class="meta">Format</span>
          <span class="label">Standard · Modern legal</span>
        </div>
        <div class="pre-order__meta-item">
          <span class="meta">Edition</span>
          <span class="label">Collector Booster</span>
        </div>
        <div class="pre-order__meta-item">
          <span class="meta">Pre-order</span>
          <span class="label">£269.00</span>
        </div>
      </div>
      <a href="#" class="button button--primary">Reserve a box</a>
    </div>
  </div>
</section>

<section class="section section--primary">
  <div>
    <div class="section-header">
      <div class="section-header__left">
        <span class="eyebrow">Singles · The buying desk</span>
        <h2>Hottest singles</h2>
      </div>
      <a href="#" class="section-header__link">Browse all singles →</a>
    </div>
    <div class="hot-singles-grid">
      <article class="hot-single">
        <div class="hot-single__image">
          <img src="https://camcom.dev/wp-content/uploads/2026/04/trading-cards-pokemon-stack-1.jpg" alt="Pokémon Charizard card">
        </div>
        <div class="hot-single__body">
          <h3 class="hot-single__title">Charizard ex — 199/197</h3>
          <div class="hot-single__meta">
            <span>Obsidian Flames</span>
            <span>Special Illustration Rare</span>
            <span>NM</span>
          </div>
          <div class="hot-single__price">£284.00</div>
          <p class="hot-single__commentary"><strong>Why we love this:</strong> the Yuu Nishida illustration carries the set on its own. Demand keeps creeping up as Obsidian Flames falls out of print and the Special Illustration Rare slot stays the headline pull. One of two we have in NM.</p>
        </div>
      </article>
      <article class="hot-single">
        <div class="hot-single__image">
          <img src="https://camcom.dev/wp-content/uploads/2026/04/trading-cards-mtg-1.jpg" alt="Magic: The Gathering rare card">
        </div>
        <div class="hot-single__body">
          <h3 class="hot-single__title">The One Ring — Serialised</h3>
          <div class="hot-single__meta">
            <span>LOTR: Tales of Middle-earth</span>
            <span>Serialised /001</span>
            <span>NM</span>
          </div>
          <div class="hot-single__price">£1,895.00</div>
          <p class="hot-single__commentary"><strong>Why we love this:</strong> a low-numbered serialised copy from a fresh consignment, fully sleeved on intake. Format-legal in Modern and Commander, and a centrepiece for any LOTR collector display.</p>
        </div>
      </article>
      <article class="hot-single">
        <div class="hot-single__image">
          <img src="https://camcom.dev/wp-content/uploads/2026/04/trading-cards-playing-1.jpg" alt="Lorcana enchanted card">
        </div>
        <div class="hot-single__body">
          <h3 class="hot-single__title">Elsa — Spirit of Winter (Enchanted)</h3>
          <div class="hot-single__meta">
            <span>Rise of the Floodborn</span>
            <span>Enchanted Rare</span>
            <span>LP</span>
          </div>
          <div class="hot-single__price">£198.50</div>
          <p class="hot-single__commentary"><strong>Why we love this:</strong> still the chase Enchanted for Sapphire/Steel decks and a beautiful alt-art treatment. Light play, edge-checked under loupe — priced honestly against current Cardmarket averages.</p>
        </div>
      </article>
    </div>
  </div>
</section>

<section class="section section--anchor">
  <div>
    <div class="singles-intro">
      <span class="eyebrow">Nerdworks Singles</span>
      <h2>Every card, individually listed.</h2>
      <p class="lead">Browse our full singles catalogue across Pokémon, Magic, Lorcana and One Piece. Every card is staff-verified, condition-graded NM or LP, and priced against live Cardmarket and Pricecharting data.</p>
    </div>
    <div class="singles-grid">
      <a href="#" class="single-tile">
        <div class="single-tile__image"><img src="https://camcom.dev/wp-content/uploads/2026/04/trading-cards-pokemon-table-1.jpg" alt="Pikachu V card"></div>
        <div class="single-tile__body">
          <span class="single-tile__name">Pikachu V — 043/172</span>
          <span class="single-tile__set">Brilliant Stars</span>
          <div class="single-tile__row">
            <span class="single-tile__condition">NM</span>
            <span class="single-tile__price">£18.50</span>
          </div>
        </div>
      </a>
      <a href="#" class="single-tile">
        <div class="single-tile__image"><img src="https://camcom.dev/wp-content/uploads/2026/04/trading-cards-mtg-display-1.jpg" alt="Liliana of the Veil card"></div>
        <div class="single-tile__body">
          <span class="single-tile__name">Liliana of the Veil</span>
          <span class="single-tile__set">Innistrad</span>
          <div class="single-tile__row">
            <span class="single-tile__condition">LP</span>
            <span class="single-tile__price">£64.00</span>
          </div>
        </div>
      </a>
      <a href="#" class="single-tile">
        <div class="single-tile__image"><img src="https://camcom.dev/wp-content/uploads/2026/04/playing-cards-1.jpg" alt="Mickey Mouse Lorcana"></div>
        <div class="single-tile__body">
          <span class="single-tile__name">Mickey Mouse — Brave Tailor</span>
          <span class="single-tile__set">The First Chapter</span>
          <div class="single-tile__row">
            <span class="single-tile__condition">NM</span>
            <span class="single-tile__price">£42.00</span>
          </div>
        </div>
      </a>
      <a href="#" class="single-tile">
        <div class="single-tile__image"><img src="https://camcom.dev/wp-content/uploads/2026/04/trading-cards-playing-1.jpg" alt="Monkey D. Luffy card"></div>
        <div class="single-tile__body">
          <span class="single-tile__name">Monkey D. Luffy — Leader</span>
          <span class="single-tile__set">Romance Dawn</span>
          <div class="single-tile__row">
            <span class="single-tile__condition">NM</span>
            <span class="single-tile__price">£28.75</span>
          </div>
        </div>
      </a>
      <a href="#" class="single-tile">
        <div class="single-tile__image"><img src="https://camcom.dev/wp-content/uploads/2026/04/trading-cards-pokemon-stack-1.jpg" alt="Umbreon VMAX card"></div>
        <div class="single-tile__body">
          <span class="single-tile__name">Umbreon VMAX — Alt Art</span>
          <span class="single-tile__set">Evolving Skies</span>
          <div class="single-tile__row">
            <span class="single-tile__condition">NM</span>
            <span class="single-tile__price">£420.00</span>
          </div>
        </div>
      </a>
      <a href="#" class="single-tile">
        <div class="single-tile__image"><img src="https://camcom.dev/wp-content/uploads/2026/04/trading-cards-mtg-1.jpg" alt="Ragavan Magic card"></div>
        <div class="single-tile__body">
          <span class="single-tile__name">Ragavan, Nimble Pilferer</span>
          <span class="single-tile__set">Modern Horizons 2</span>
          <div class="single-tile__row">
            <span class="single-tile__condition">NM</span>
            <span class="single-tile__price">£72.50</span>
          </div>
        </div>
      </a>
    </div>
    <div class="singles-ctas">
      <a href="#" class="button button--primary">Browse all singles</a>
      <a href="#" class="button button--ghost">Search by card name</a>
    </div>
  </div>
</section>

<section class="section section--bright trust-strip-section">
  <div>
    <div class="trust-strip">
      <div class="trust-cell">
        <div class="trust-cell__icon">
          <svg class="icon-lg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75"><path d="M3 7h13v8H3z"/><path d="M16 10h4l1 3v2h-5"/><circle cx="7" cy="17" r="2"/><circle cx="18" cy="17" r="2"/></svg>
        </div>
        <div>
          <div class="trust-cell__figure">48,200+</div>
          <div class="trust-cell__label">Orders shipped across the UK</div>
        </div>
      </div>
      <div class="trust-cell">
        <div class="trust-cell__icon">
          <svg class="icon-lg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75"><rect x="3" y="5" width="18" height="16" rx="1"/><path d="M3 9h18M8 3v4M16 3v4"/></svg>
        </div>
        <div>
          <div class="trust-cell__figure">11 years</div>
          <div class="trust-cell__label">Trading from our Bristol shop floor</div>
        </div>
      </div>
      <div class="trust-cell">
        <div class="trust-cell__icon">
          <svg class="icon-lg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75"><path d="M12 2l3 6.5 7 .8-5.3 4.8 1.6 7-6.3-3.7-6.3 3.7 1.6-7L2 9.3l7-.8L12 2z"/></svg>
        </div>
        <div>
          <div class="trust-cell__figure">4.9 / 5</div>
          <div class="trust-cell__label">2,140 verified Trustpilot reviews</div>
        </div>
      </div>
      <div class="trust-cell">
        <div class="trust-cell__icon">
          <svg class="icon-lg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75"><circle cx="9" cy="9" r="3"/><circle cx="17" cy="11" r="2"/><path d="M3 19c0-3 3-5 6-5s6 2 6 5"/><path d="M15 18c0-2 2-3 4-3s2 1 2 1"/></svg>
        </div>
        <div>
          <div class="trust-cell__figure">14 specialists</div>
          <div class="trust-cell__label">A team that plays the games it sells</div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section section--primary">
  <div>
    <div class="spotlight">
      <div class="spotlight__image">
        <img src="https://camcom.dev/wp-content/uploads/2026/04/figurines-dice-map-1.jpg" alt="D&D campaign set on a map">
      </div>
      <div class="spotlight__content">
        <span class="eyebrow">Set Spotlight · Pokémon TCG</span>
        <h2>Stellar Crown — the format reset everyone wanted.</h2>
        <p>A Terastal-focused set with a stripped-back rare slot and one of the cleanest pull rates of the year. Headline chases include Terapagos ex, Gholdengo ex and the Lacey Special Illustration Rare — all of which our buying desk has been tracking on Cardmarket since announcement.</p>
        <p>We've cracked our own sealed case to verify pulls and stock the singles directly. ETBs are limited to two per customer; booster bundles are unlimited while stock holds.</p>
        <div class="spotlight__meta">
          <div class="spotlight__meta-item">
            <div class="meta">Released</div>
            <div class="label">13 September 2024</div>
          </div>
          <div class="spotlight__meta-item">
            <div class="meta">Format</div>
            <div class="label">Standard · 2024 rotation</div>
          </div>
          <div class="spotlight__meta-item">
            <div class="meta">In stock</div>
            <div class="label">ETB, BB, singles</div>
          </div>
        </div>
        <a href="#" class="button button--primary">Shop the set</a>
      </div>
    </div>
  </div>
</section>

<section class="section section--anchor">
  <div>
    <div class="sor">
      <div class="sor__intro">
        <span class="eyebrow">Sale or return</span>
        <h2>Sell through us, on your terms.</h2>
        <p class="lead">Bring in cards, sealed product or whole collections. We list them at an agreed minimum on Nerdworks stock, sell to our customers, and pay you the day they ship — minus a transparent commission.</p>
      </div>
      <div class="sor__process">
        <article class="sor-step">
          <span class="sor-step__num">Step 1</span>
          <h3>Bring it in</h3>
          <p>Visit any Nerdworks store with your cards or product. Our buying desk grades and photographs everything at intake — no postage, no waiting on a courier.</p>
        </article>
        <article class="sor-step">
          <span class="sor-step__num">Step 2</span>
          <h3>We list it at an agreed price</h3>
          <p>We benchmark every listing against live Cardmarket and Pricecharting data and agree a minimum with you. Listings go live within 48 hours, fully attributed to Nerdworks stock.</p>
        </article>
        <article class="sor-step">
          <span class="sor-step__num">Step 3</span>
          <h3>You get paid on sale</h3>
          <p>Payment lands in your bank account or as store credit the same day the card ships. Track everything from your My Consignments dashboard, including unsold inventory.</p>
        </article>
      </div>
      <a href="#" class="button button--primary">Start a sale or return</a>
    </div>
  </div>
</section>

<section class="section section--bright">
  <div>
    <div class="table-booking">
      <div class="table-booking__intro">
        <span class="eyebrow">Warhammer · Table booking</span>
        <h2>Book a fully modelled battle table.</h2>
        <p class="lead">Reserve a private session on one of our hand-built Warhammer tables. Choose your terrain layout from the catalogue below and our staff will set the board for you before you arrive — paint pots, brushes and rulers included.</p>
      </div>
      <div class="terrain-grid">
        <a href="#" class="terrain-card">
          <div class="terrain-card__image"><img src="https://camcom.dev/wp-content/uploads/2026/04/figurines-dice-map-1.jpg" alt="Urban ruins terrain"></div>
          <div class="terrain-card__body">
            <div class="terrain-card__name">Sector Imperialis</div>
            <div class="terrain-card__sub">6×4 · Urban ruins</div>
          </div>
        </a>
        <a href="#" class="terrain-card">
          <div class="terrain-card__image"><img src="https://camcom.dev/wp-content/uploads/2026/04/figurines-miniatures-1.jpg" alt="Forest battle map"></div>
          <div class="terrain-card__body">
            <div class="terrain-card__name">Death World Forest</div>
            <div class="terrain-card__sub">6×4 · Jungle & ruins</div>
          </div>
        </a>
        <a href="#" class="terrain-card">
          <div class="terrain-card__image"><img src="https://camcom.dev/wp-content/uploads/2026/04/board-game-setup-1.jpg" alt="Industrial terrain"></div>
          <div class="terrain-card__body">
            <div class="terrain-card__name">Manufactorum Hive</div>
            <div class="terrain-card__sub">6×4 · Industrial</div>
          </div>
        </a>
        <a href="#" class="terrain-card">
          <div class="terrain-card__image"><img src="https://camcom.dev/wp-content/uploads/2026/04/dice-polyhedral-1.jpg" alt="Wasteland board"></div>
          <div class="terrain-card__body">
            <div class="terrain-card__name">Ash Wastes</div>
            <div class="terrain-card__sub">4×4 · Necromunda</div>
          </div>
        </a>
      </div>
      <div class="table-booking__ctas">
        <a href="#" class="button button--primary">Book a session</a>
        <a href="#" class="button button--ghost">Browse maps</a>
      </div>
    </div>
  </div>
</section>

<section class="section section--primary">
  <div>
    <div class="section-header">
      <div class="section-header__left">
        <span class="eyebrow">In-store · Coming up</span>
        <h2>Events</h2>
      </div>
      <a href="#" class="section-header__link">View all events →</a>
    </div>
    <div class="events-grid">
      <a href="#" class="event-card">
        <div class="event-card__image"><img src="https://camcom.dev/wp-content/uploads/2026/04/trading-cards-pokemon-table-1.jpg" alt="Pokémon league night"></div>
        <div class="event-card__body">
          <span class="event-card__eyebrow">Pokémon TCG</span>
          <div class="event-card__name">League Cup — Standard Format</div>
          <div class="event-card__date">Sat 14 Sep · 11:00</div>
          <div class="event-card__desc">Eight-round Swiss, prize wall packs and championship points on the line.</div>
          <span class="event-card__cta">Book →</span>
        </div>
      </a>
      <a href="#" class="event-card">
        <div class="event-card__image"><img src="https://camcom.dev/wp-content/uploads/2026/04/trading-cards-mtg-1.jpg" alt="Magic Commander night"></div>
        <div class="event-card__body">
          <span class="event-card__eyebrow">Magic: The Gathering</span>
          <div class="event-card__name">Commander Night — Pods of Four</div>
          <div class="event-card__date">Thu 19 Sep · 18:30</div>
          <div class="event-card__desc">Casual EDH, bring any 100-card deck. Snacks, sleeves, drinks on the bar.</div>
          <span class="event-card__cta">Book →</span>
        </div>
      </a>
      <a href="#" class="event-card">
        <div class="event-card__image"><img src="https://camcom.dev/wp-content/uploads/2026/04/figurines-miniatures-1.jpg" alt="Warhammer painting workshop"></div>
        <div class="event-card__body">
          <span class="event-card__eyebrow">Warhammer 40K</span>
          <div class="event-card__name">Painting Workshop — Layering & Shades</div>
          <div class="event-card__date">Sun 22 Sep · 13:00</div>
          <div class="event-card__desc">Three-hour tutored session with our resident painter. All paints provided.</div>
          <span class="event-card__cta">Book →</span>
        </div>
      </a>
      <a href="#" class="event-card">
        <div class="event-card__image"><img src="https://camcom.dev/wp-content/uploads/2026/04/figurines-dice-map-1.jpg" alt="D&D one-shot"></div>
        <div class="event-card__body">
          <span class="event-card__eyebrow">Dungeons & Dragons</span>
          <div class="event-card__name">One-Shot Night — Beginners Welcome</div>
          <div class="event-card__date">Fri 27 Sep · 19:00</div>
          <div class="event-card__desc">Pre-gen characters, three tables, a DM each. New players get priority booking.</div>
          <span class="event-card__cta">Details →</span>
        </div>
      </a>
    </div>
  </div>
</section>

<section class="section section--anchor">
  <div>
    <div class="featured-event">
      <img class="featured-event__img" src="https://camcom.dev/wp-content/uploads/2026/04/hero-gaming-setup-1.jpg" alt="Nerdworks Open tournament setup">
      <div class="featured-event__overlay"></div>
      <div class="featured-event__content">
        <span class="featured-event__date">Sat 26 — Sun 27 October 2024 · Bristol Flagship</span>
        <h2>Nerdworks Open — Autumn Championship</h2>
        <p>Two days of competitive play across Magic, Pokémon and Lorcana. £4,500 prize pool, invited judges, side events all weekend, and the back room turned into a single 64-player feature table. Early-bird seats close 30 September.</p>
        <a href="#" class="button button--hero">Reserve a seat</a>
      </div>
    </div>
  </div>
</section>

<section class="section section--bright">
  <div>
    <div class="section-header">
      <div class="section-header__left">
        <span class="eyebrow">Around the shop</span>
        <h2>Events gallery</h2>
      </div>
    </div>
    <div class="gallery-mosaic">
      <a href="#" class="gm-1"><img src="https://camcom.dev/wp-content/uploads/2026/04/board-game-setup-1.jpg" alt="Customers around a board game table"></a>
      <a href="#" class="gm-2"><img src="https://camcom.dev/wp-content/uploads/2026/04/trading-cards-mtg-display-1.jpg" alt="Magic tournament play"></a>
      <a href="#" class="gm-3"><img src="https://camcom.dev/wp-content/uploads/2026/04/dice-polyhedral-1.jpg" alt="Dice on a play mat"></a>
      <a href="#" class="gm-4"><img src="https://camcom.dev/wp-content/uploads/2026/04/figurines-miniatures-1.jpg" alt="Painted Warhammer miniatures"></a>
      <a href="#" class="gm-5"><img src="https://camcom.dev/wp-content/uploads/2026/04/figurines-dice-map-1.jpg" alt="D&D battle map in play"></a>
      <a href="#" class="gm-6"><img src="https://camcom.dev/wp-content/uploads/2026/04/hero-gaming-setup-1.jpg" alt="Nerdworks shop floor on event night"></a>
    </div>
    <p class="gallery-caption">Photographs from recent league cups, painting nights and the Autumn Open. <a href="#">Follow Nerdworks on Instagram</a> for weekly drops.</p>
  </div>
</section>

<section class="section section--primary">
  <div>
    <div class="blog-intro">
      <span class="eyebrow">The Nerdworks journal</span>
      <h2>Set breakdowns, buying desk notes, deck tech.</h2>
      <p>Long-form writing from our team — set reviews after we've cracked the cases, buying desk notes when prices move, and deck tech for the formats we actually play on Friday nights.</p>
    </div>
    <div class="blog-grid">
      <a href="#" class="blog-card">
        <div class="blog-card__image"><img src="https://camcom.dev/wp-content/uploads/2026/04/trading-cards-pokemon-stack-1.jpg" alt="Stellar Crown set review"></div>
        <div class="blog-card__body">
          <span class="blog-card__eyebrow">Set review · Pokémon</span>
          <span class="blog-card__date">Posted 18 Sep 2024 · 8 min read</span>
          <h3 class="blog-card__title">Stellar Crown — what we pulled from a full case</h3>
          <p class="blog-card__hook">We opened a sealed case across two evenings. Here's the pull rate by rarity, the cards we expect to move, and what we'd hold.</p>
          <span class="blog-card__read">Read the breakdown →</span>
        </div>
      </a>
      <a href="#" class="blog-card">
        <div class="blog-card__image"><img src="https://camcom.dev/wp-content/uploads/2026/04/trading-cards-mtg-1.jpg" alt="Modern deck tech"></div>
        <div class="blog-card__body">
          <span class="blog-card__eyebrow">Deck tech · Magic</span>
          <span class="blog-card__date">Posted 12 Sep 2024 · 12 min read</span>
          <h3 class="blog-card__title">Boros Energy after Modern Horizons 3 — the 75 we're running</h3>
          <p class="blog-card__hook">Six weeks of league play and one regional later. The list, the matchups, the swaps we keep coming back to.</p>
          <span class="blog-card__read">Read the article →</span>
        </div>
      </a>
      <a href="#" class="blog-card">
        <div class="blog-card__image"><img src="https://camcom.dev/wp-content/uploads/2026/04/figurines-miniatures-1.jpg" alt="Warhammer painting guide"></div>
        <div class="blog-card__body">
          <span class="blog-card__eyebrow">Painting guide · Warhammer</span>
          <span class="blog-card__date">Posted 04 Sep 2024 · 15 min read</span>
          <h3 class="blog-card__title">Edge-highlighting Ultramarines without losing your weekend</h3>
          <p class="blog-card__hook">A step-by-step from our resident painter — paints, brush sizes, and the two shortcuts we use on tabletop-standard squads.</p>
          <span class="blog-card__read">Read the guide →</span>
        </div>
      </a>
    </div>
    <div class="blog-all"><a href="#">View all posts →</a></div>
  </div>
</section>

<section class="section section--anchor">
  <div>
    <div class="newsletter">
      <span class="eyebrow">The Nerdworks dispatch</span>
      <h2>Stock drops, event dates, market notes.</h2>
      <p>One email a week. New singles and sealed product as it lands, upcoming events at all our stores, and short notes from the buying desk when prices move.</p>
      <form class="newsletter__form" onsubmit="return false;">
        <input type="email" class="newsletter__input" placeholder="your@email.com" aria-label="Email address">
        <button type="submit" class="newsletter__submit">Subscribe</button>
      </form>
    </div>
  </div>
</section>

<footer class="site-footer">
  <div class="site-footer__inner">
    <div class="site-footer__top">
      <div class="site-footer__brand">
        <h3>NERD<span>WORKS</span></h3>
        <p>An independent specialist for trading card games, Warhammer, D&D and Star Wars collectibles. Shops in Bristol, Bath and Exeter. Online dispatch UK-wide.</p>
      </div>
      <div class="site-footer__col">
        <h4>Shop</h4>
        <ul>
          <li><a href="#">Pokémon</a></li>
          <li><a href="#">Magic: The Gathering</a></li>
          <li><a href="#">Lorcana</a></li>
          <li><a href="#">Warhammer</a></li>
          <li><a href="#">Singles</a></li>
        </ul>
      </div>
      <div class="site-footer__col">
        <h4>Services</h4>
        <ul>
          <li><a href="#">Sale or return</a></li>
          <li><a href="#">Buy & trade</a></li>
          <li><a href="#">Table booking</a></li>
          <li><a href="#">Click & collect</a></li>
        </ul>
      </div>
      <div class="site-footer__col">
        <h4>Community</h4>
        <ul>
          <li><a href="#">Events calendar</a></li>
          <li><a href="#">Journal</a></li>
          <li><a href="#">Instagram</a></li>
          <li><a href="#">Discord</a></li>
        </ul>
      </div>
      <div class="site-footer__col">
        <h4>Help</h4>
        <ul>
          <li><a href="#">Contact us</a></li>
          <li><a href="#">Store locator</a></li>
          <li><a href="#">Shipping & returns</a></li>
          <li><a href="#">FAQ</a></li>
        </ul>
      </div>
    </div>
    <div class="site-footer__bottom">
      <span>© 2024 Nerdworks Limited · Registered in England 09832147</span>
      <div class="site-footer__legal">
        <a href="#">Privacy</a>
        <a href="#">Terms</a>
        <a href="#">Cookies</a>
      </div>
    </div>
  </div>
</footer>

</body>
</html>