The Obsidian Selection

Curated for collectors

A limited-run exhibition of the UK's most prestigious Trading Card Game assets. Authenticated, archived, and ready for the next guardian.

Close-up of a rare holographic trading card in a clear protective case with dramatic spotlights highlighting the foil texture on a dark surface

<section class="hero">
	<div class="container hero__grid">
		<div class="hero__content">
			<span class="eyebrow hero__eyebrow">The Obsidian Selection</span>
			<h1 class="hero__title">Curated for collectors</h1>
			<p class="hero__subtitle">A limited-run exhibition of the UK's most prestigious Trading Card Game assets. Authenticated, archived, and ready for the next guardian.</p>
			<div class="hero__actions">
				<button class="btn--primary">Enter the Vault</button>
				<button class="btn--ghost">Browse the Archive</button>
			</div>
		</div>
		<div class="hero__image-wrap">
			<img src="https://lh3.googleusercontent.com/aida-public/AB6AXuDKXmS-eXQXfe6rrGJfdaaZxZ1pS4ktZ9o3MCvdkqijbI_iR1vUQjK5DeJXcZ2nW10Ai9Ux7AU3MF1i2zihjQKNoGbD97dmqYNWNDP2836oQwzW7uJ8SjoI08bcj7lSs-HCGaDr_2cOoMRWYwvTL1Tqa4J-FuUoGHvGB5kSNHhJ8TLDWngl1lfuEctEpL2kHVXRfjYXuSW0EoIDr5Ah-BANPsmgGcuQRxgCAfn9paBinDraxVVIbR0Q8v4cMXVLebUOagCMs21O" alt="Close-up of a rare holographic trading card in a clear protective case with dramatic spotlights highlighting the foil texture on a dark surface">
		</div>
	</div>
</section>

/* ═══════════════════════════════════════════════
		   HERO
		   ═══════════════════════════════════════════════ */

		.hero {
background-color: var(--bg-primary-dark);
			padding: var(--space-10) 0;
}

.hero__grid {
display: grid;
			grid-template-columns: 1fr 0.7fr;
			gap: var(--space-8);
			align-items: center;
}

.hero__content {
display: flex;
			flex-direction: column;
			gap: var(--space-6);
}

.hero__eyebrow {
color: var(--text-eyebrow);
}

.hero__title {
font-size: var(--fs-display);
			font-weight: var(--fw-extrabold);
			line-height: var(--lh-tight);
			letter-spacing: var(--ls-tight);
}

.hero__subtitle {
color: var(--text-on-dark-muted);
			font-size: var(--fs-body-lg);
			max-width: 560px;
			line-height: var(--lh-body);
}

.hero__actions {
display: flex;
			flex-wrap: wrap;
			gap: var(--space-4);
			margin-top: var(--space-4);
}

.hero__image-wrap {
aspect-ratio: 4 / 5;
			width: 100%;
			background-color: var(--bg-surface-dark);
			border-radius: var(--radius-xl);
			overflow: hidden;
}

.hero__image-wrap img {
width: 100%;
			height: 100%;
			object-fit: cover;
}

Origin

Prototype TTF2 — NW Homepage Showcase Dark (TN15 — MN19 Converted, 1440px Container)

Styleguide STF2 — Nerdworks \u2014 The Showcase Dark

Tokens Used

--bg-primary-dark
--bg-surface-dark
--fs-body-lg
--fs-display
--fw-extrabold
--lh-body
--lh-tight
--ls-tight
--radius-xl
--space-10
--space-4
--space-6
--space-8
--text-eyebrow
--text-on-dark-muted

Hero

Curated for collectors

Origin

Tokens Used