/*
* Lorcana Coaching — Design System
* Style: Neobrutalist. Reference: Goblynz.xyz.
* Typefaces: New Rocker (display/logo) + Archivo (body grotesque)
* Base unit: 8px. Modular type scale: 1.25 ratio.
* Hard-offset shadow is intentional and systematic — every component uses
* the same offset values. Consistency makes it a system, not an accident.
*/
/* ============================================================
GOOGLE FONTS
Load before this stylesheet in your :
DM Sans — display / headings / stat numbers (exact goblynz heading face).
Inter — body / UI / labels / buttons (exact goblynz body face).
(The blackletter "Goblynz" wordmark itself is a custom logo asset.)
============================================================ */
/* ============================================================
1. DESIGN TOKENS — CSS CUSTOM PROPERTIES
All values live here. Change a token; the whole system updates.
============================================================ */
:root {
/* --- COLOR PALETTE ---
60% background (cream), 30% surface (white cards),
10% brand accent (lime). Black is structure, not color. */
/* Backgrounds — EXACT values pulled from live goblynz.xyz */
--color-bg: #F5F3ED; /* warm cream — page canvas */
--color-surface: #FAFAF5; /* card / input surface (near-white, warm) */
--color-dot: #CCCCCC; /* dot-grid texture color on the canvas */
/* Brand accent */
--color-lime: #C6F135; /* primary CTA fill (exact) */
--color-lime-dark: #A8D020; /* lime hover state (exact) */
/* Pastel pill fills — exact goblynz palette */
--color-pill-lime: #C6F135; /* lime tag */
--color-pill-peach: #FFB2A6; /* peach / warm tag */
--color-pill-lavender: #C4A1FF; /* purple / class tag */
--color-pill-sky: #87CEEB; /* blue / info tag */
--color-pill-mint: #90EE90; /* green / win tag */
--color-pill-yellow: #FDFD96; /* yellow / highlight tag */
--color-pill-coral: #FF6B6B; /* red / loss tag */
--color-pill-neutral: #FFFFFF; /* plain white tag */
/* Text */
--color-ink: #1A1A1A; /* primary text + borders (exact) */
--color-ink-muted: #5A5A5A; /* section labels, meta — passes AA on cream */
--color-ink-faint: #888888; /* only use at 18px+ bold */
/* Structure */
--color-border: #1A1A1A; /* all borders — unified near-black */
--color-focus-ring: #C6F135; /* focus outline: lime reads clearly */
/* Colored glow accents (goblynz signature) — for featured/hover only */
--glow-lime: 0 0 12px rgba(198,241,53,.5);
--glow-purple: 0 0 25px rgba(196,161,255,.4), 0 0 50px rgba(196,161,255,.25);
/* --- SHADOW SYSTEM ---
Hard offset, zero blur. Every component uses the SAME offset.
Neobrutalist signature. Do not deviate per-component.
Active/press states: halve the offset to simulate push-down. */
/* exact goblynz offsets: 2px / 3px hard, zero blur */
--shadow-hard: 3px 3px 0 0 var(--color-ink); /* standard: cards, buttons */
--shadow-hard-sm: 2px 2px 0 0 var(--color-ink); /* small: pills */
--shadow-hard-lg: 5px 5px 0 0 var(--color-ink); /* large/hover */
--shadow-hard-press: 1px 1px 0 0 var(--color-ink); /* active/pressed */
/* --- BORDER ---
One width, one color. No 1px hairlines; no 3px accents elsewhere. */
--border-width: 2px;
--border: var(--border-width) solid var(--color-border);
/* --- CORNER RADIUS ---
Two values only: tight (components) and loose (cards/surfaces).
Pills use 999px (fully round). No other values. */
--radius-sm: 6px; /* inputs, tight components (exact) */
--radius-md: 18px; /* cards, stat panels (goblynz uses 16-20px) */
--radius-pill: 50px; /* buttons, tags — pill (exact) */
/* --- TYPOGRAPHY ---
Display: New Rocker (blackletter gothic, logo / hero numbers only)
Body: Archivo (grotesque, everything UI)
Scale: 1.25 modular ratio anchored at 16px
Sizes: 12 / 14 / 16 / 20 / 24 / 32 / 40 / 56px */
/* System font stack — ZERO webfonts: no third-party calls, instant render, snappy.
The neobrutalist look comes from color/borders/hard shadows/heavy weights, not the face.
(Self-hosted DM Sans/Inter could be added later if the exact look is wanted.) */
--font-display: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
/* Type scale — 1.25 ratio, anchored at 16px (1rem = 16px) */
--text-xs: 0.75rem; /* 12px — fine print, timestamps */
--text-sm: 0.875rem; /* 14px — labels, pill text */
--text-base: 1rem; /* 16px — body copy */
--text-md: 1.25rem; /* 20px — card subheads */
--text-lg: 1.5rem; /* 24px — section headlines */
--text-xl: 2rem; /* 32px — page headline */
--text-2xl: 2.5rem; /* 40px — hero stat / win rate */
--text-3xl: 3.5rem; /* 56px — logo / display */
/* Weight scale — use only these three */
--weight-regular: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* Line-height */
--leading-tight: 1.1; /* display, stat numbers */
--leading-ui: 1.3; /* buttons, labels */
--leading-body: 1.6; /* paragraph copy */
/* --- SPACING SCALE (8px base) ---
Use these variables exclusively. No magic numbers. */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
/* --- MOTION ---
Only two speeds. Prefer ease-out for entrances. */
--duration-fast: 150ms;
--duration-base: 200ms;
--easing-out: cubic-bezier(0.0, 0.0, 0.2, 1);
}
/* ============================================================
2. RESET & BASE
============================================================ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
-webkit-text-size-adjust: 100%;
}
body {
background-color: var(--color-bg);
/* goblynz signature: subtle dot-grid texture over the cream canvas */
background-image: radial-gradient(circle, var(--color-dot) 0.8px, transparent 0.8px);
background-size: 24px 24px;
color: var(--color-ink);
font-family: var(--font-body);
font-size: var(--text-base);
font-weight: var(--weight-regular);
line-height: var(--leading-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Numeric data in tables: tabular figures prevent jitter on updates */
table, .stat-number, .record {
font-variant-numeric: tabular-nums;
}
/* ============================================================
3. FOCUS STATES
Global. Never remove outline — override with a visible custom ring.
============================================================ */
:focus-visible {
outline: 3px solid var(--color-focus-ring);
outline-offset: 3px;
}
/* Suppress the default outline only when :focus-visible handles it */
:focus:not(:focus-visible) {
outline: none;
}
/* ============================================================
4. COMPONENT: .card
White surface, thick border, hard offset shadow.
The defining structural unit. Use for record panels, stat
summaries, per-game reviews, deck stats.
============================================================ */
.card {
background-color: var(--color-surface);
border: var(--border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-hard);
padding: var(--space-6);
/* Offset shadow means the card needs clearance on its bottom-right.
Callers that stack cards should account for this with gap. */
position: relative;
}
/* Larger variant — hero stats, featured deck panels */
.card--lg {
box-shadow: var(--shadow-hard-lg);
padding: var(--space-8);
}
/* Interactive card (clickable drill-down) */
.card--interactive {
cursor: pointer;
transition:
box-shadow var(--duration-fast) var(--easing-out),
transform var(--duration-fast) var(--easing-out);
}
.card--interactive:hover {
box-shadow: var(--shadow-hard-lg);
transform: translate(-1px, -1px);
}
.card--interactive:active {
box-shadow: var(--shadow-hard-press);
transform: translate(2px, 2px);
}
/* ============================================================
5. COMPONENT: BUTTONS
Pill shape (radius-pill) + hard offset shadow.
Two variants: primary (lime fill) and secondary (white fill).
The trailing "→" is part of the text content, not a pseudo-element,
so screen readers announce it correctly as "arrow" (or you can
aria-label the button to override).
============================================================ */
/* --- Base button (shared structure) --- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-6);
border: var(--border);
border-radius: var(--radius-pill);
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: var(--weight-bold);
line-height: var(--leading-ui);
letter-spacing: 0.01em;
cursor: pointer;
text-decoration: none;
white-space: nowrap;
transition:
box-shadow var(--duration-fast) var(--easing-out),
transform var(--duration-fast) var(--easing-out),
background-color var(--duration-fast) var(--easing-out);
/* Minimum touch target: 44px height */
min-height: 44px;
user-select: none;
}
/* Pressed / active state (shared) */
.btn:active {
box-shadow: var(--shadow-hard-press);
transform: translate(2px, 2px);
}
/* --- Primary button: lime fill --- */
.btn-primary {
background-color: var(--color-lime);
color: var(--color-ink); /* black on lime: 14.85:1 — AAA */
box-shadow: var(--shadow-hard);
}
.btn-primary:hover {
background-color: var(--color-lime-dark);
box-shadow: var(--shadow-hard-lg);
transform: translate(-1px, -1px);
}
/* --- Secondary button: white fill --- */
.btn-secondary {
background-color: var(--color-surface);
color: var(--color-ink);
box-shadow: var(--shadow-hard);
}
.btn-secondary:hover {
box-shadow: var(--shadow-hard-lg);
transform: translate(-1px, -1px);
}
/* --- Size modifier: large (mobile hero CTA) --- */
.btn--lg {
font-size: var(--text-base);
padding: var(--space-4) var(--space-8);
min-height: 52px;
}
/* Disabled state */
.btn:disabled,
.btn[aria-disabled="true"] {
opacity: 0.45;
cursor: not-allowed;
box-shadow: none;
transform: none;
pointer-events: none;
}
/* ============================================================
6. COMPONENT: .pill
Small rounded tags for deck types, outcomes, categories.
Base: white fill. Variants: colored fills.
Text is always near-black for contrast on all fill colors.
============================================================ */
.pill {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 3px var(--space-3);
border: var(--border);
border-radius: var(--radius-pill);
background-color: var(--color-pill-neutral);
box-shadow: var(--shadow-hard-sm);
color: var(--color-ink);
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: var(--weight-bold);
line-height: var(--leading-ui);
letter-spacing: 0.03em;
white-space: nowrap;
/* Minimum tap target when pills are interactive */
min-height: 28px;
}
/* Pastel fill variants */
.pill--lime { background-color: var(--color-pill-lime); }
.pill--peach { background-color: var(--color-pill-peach); }
.pill--lavender { background-color: var(--color-pill-lavender); }
.pill--sky { background-color: var(--color-pill-sky); }
.pill--mint { background-color: var(--color-pill-mint); }
/* Interactive pills (clickable filters) */
.pill[role="button"],
.pill--interactive {
cursor: pointer;
transition:
box-shadow var(--duration-fast) var(--easing-out),
transform var(--duration-fast) var(--easing-out);
}
.pill[role="button"]:hover,
.pill--interactive:hover {
box-shadow: 3px 3px 0 0 #111111;
transform: translate(-1px, -1px);
}
.pill[role="button"]:active,
.pill--interactive:active {
box-shadow: none;
transform: translate(2px, 2px);
}
/* ============================================================
7. COMPONENT: .section-label
All-caps, letter-spaced, small, muted.
Use above card groups, stat panels, table sections.
============================================================ */
.section-label {
display: block;
font-family: var(--font-body);
font-size: var(--text-xs); /* 12px */
font-weight: var(--weight-bold);
letter-spacing: 0.10em; /* loosen all-caps per reference §1 */
line-height: var(--leading-ui);
color: var(--color-ink-muted); /* #5A5A5A — 6.26:1 on cream */
text-transform: uppercase;
margin-bottom: var(--space-3);
}
/* ============================================================
8. COMPONENT: .stat and .stat-number
For win rate, games played, record counters.
stat-number uses the display face for punch.
stat-label uses section-label styling.
============================================================ */
.stat {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.stat-number {
font-family: var(--font-display); /* DM Sans — heavy display weight */
font-size: var(--text-2xl); /* 40px */
font-weight: var(--weight-black); /* 800/900 for impact */
letter-spacing: -0.02em;
line-height: var(--leading-tight);
color: var(--color-ink);
font-variant-numeric: tabular-nums;
}
/* Hero-sized stat: win rate percentage, total record */
.stat-number--lg {
font-size: var(--text-3xl); /* 56px */
}
/* Colored stat numbers for win/loss indicators */
.stat-number--win { color: #1A7A40; } /* dark green — not stock green */
.stat-number--loss { color: #A0200E; } /* dark red — not stock red */
.stat-label {
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: var(--weight-bold);
letter-spacing: 0.10em;
line-height: var(--leading-ui);
color: var(--color-ink-muted);
text-transform: uppercase;
}
/* ============================================================
9. COMPONENT: .record
Inline W/L/D display: "12W 3L 0D"
Tabular numerals, pill-based chips.
============================================================ */
.record {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-variant-numeric: tabular-nums;
}
.record-chip {
display: inline-flex;
align-items: center;
gap: 3px;
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: var(--weight-bold);
line-height: 1;
white-space: nowrap;
}
.record-chip--win .record-chip__count { color: #1A7A40; }
.record-chip--loss .record-chip__count { color: #A0200E; }
.record-chip--draw .record-chip__count { color: var(--color-ink-muted); }
.record-chip__label {
color: var(--color-ink-muted);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
}
/* ============================================================
10. DISPLAY TYPOGRAPHY UTILITIES
Use sparingly: page titles, logo wordmark, section heroes.
============================================================ */
.display {
font-family: var(--font-display);
font-weight: var(--weight-black); /* DM Sans 800/900 — heavy headlines */
line-height: var(--leading-tight);
letter-spacing: -0.02em;
}
.display--xl { font-size: var(--text-xl); } /* 32px */
.display--2xl { font-size: var(--text-2xl); } /* 40px */
.display--3xl { font-size: var(--text-3xl); } /* 56px */
/* Highlight accent: one warm-colored word in a headline.
Mirrors the Goblynz bold-serif warm-highlight technique.
Use on a single word inside a .display heading only. */
.display-accent {
color: var(--color-lime-dark); /* #A8CC00 — readable on cream */
font-style: italic;
}
/* ============================================================
11. LAYOUT UTILITIES
Minimal helpers. Not a framework. Use as needed.
============================================================ */
/* Page container */
.container {
width: 100%;
max-width: 680px; /* mobile-first tool; single column */
margin-inline: auto;
padding-inline: var(--space-4);
}
/* Card grid: auto-fit columns, mobile-first */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-6);
}
/* Stat row: horizontal flex of stat blocks */
.stat-row {
display: flex;
flex-wrap: wrap;
gap: var(--space-6);
}
/* Pill cluster */
.pill-group {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
/* Section spacing */
.section {
margin-block-end: var(--space-12);
}
/* ============================================================
12. REDUCED MOTION
Required: honor the OS preference. Hard-offset shadows stay
(structural, not motion), but transitions are zeroed.
============================================================ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
}
}
/* ============================================================
13. MOBILE OVERRIDES (360px floor)
The tool is primarily mobile. These adjust density for
small screens — no layout breaks, just tighter padding.
============================================================ */
@media (max-width: 480px) {
.card {
padding: var(--space-4);
border-radius: var(--radius-sm);
}
.card--lg {
padding: var(--space-6);
}
.stat-number--lg {
font-size: var(--text-2xl); /* drop hero stat from 56px to 40px */
}
.container {
padding-inline: var(--space-3);
}
.card-grid {
grid-template-columns: 1fr; /* single column on smallest phones */
}
}