/*
tokens.css — Chollima Hunter global design system
==================================================
This is the single global stylesheet linked from base.njk
(). Every page reuses
the classes/tokens defined here rather than inventing parallel ones. In
particular:
.disclaimer-banner — sourcing/attribution disclaimer banner
(used on profile pages, hunt pages, scan-result
pages, EtherHiding result pages — anywhere a
"claims are sourced / matches require manual
review" notice is needed)
.query-block — copy-paste-able code/query block (used for
hunt queries, IOC lists, scan commands, etc.)
FONTS: Inter, Space Grotesk, and JetBrains Mono are self-hosted from
src/assets/fonts/ (SIL OFL-licensed static .woff2 weights) and loaded via
the @font-face block below — no external font CDN request at runtime.
See src/assets/fonts/LICENSE-fonts.txt for provenance.
DESIGN LANGUAGE: "Minimalist Dark, DPRK flag palette" — atmospheric depth
built from layered slate darkness (three visible tones: #0A0A0F ->
#12121A -> #1A1A24) rather than pure black, carrying the flag's red and
blue as two functional accents against a white/near-white foreground:
red (--accent, a brightened take on the flag's red so it clears AA
contrast on a near-black background) marks resting-state brand elements
— links, buttons, glows, badges, the footer star — while blue
(--accent-blue) is reserved for interactive-focus states — keyboard
focus rings, form-field focus, visited links, and the "medium
confidence" badge tier — so the two hues read as distinct signals rather
than competing for the same attention. Depth comes from soft ambient red
glows and semi-transparent "glass" card surfaces (backdrop-blur,
low-opacity borders), not hard shadows. Space Grotesk carries
headlines/display text, Inter carries body copy, JetBrains Mono carries
code and small metadata/label chrome (nav links, badges, tag chips).
Motion is smooth and restrained: 200ms ease-out for buttons/links, 300ms
ease-out for cards, subtle scale on hover/active — nothing bouncy or
dramatic. Borders stay very subtle (8-15% white opacity) throughout.
*/
/* ------------------------------------------------------------------ */
/* Self-hosted fonts */
/* ------------------------------------------------------------------ */
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/inter-400.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/assets/fonts/inter-500.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/assets/fonts/inter-600.woff2") format("woff2");
}
@font-face {
font-family: "Space Grotesk";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/assets/fonts/space-grotesk-500.woff2") format("woff2");
}
@font-face {
font-family: "Space Grotesk";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/assets/fonts/space-grotesk-700.woff2") format("woff2");
}
@font-face {
font-family: "JetBrains Mono";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/jetbrains-mono-400.woff2") format("woff2");
}
@font-face {
font-family: "JetBrains Mono";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/assets/fonts/jetbrains-mono-500.woff2") format("woff2");
}
/* ------------------------------------------------------------------ */
/* Design tokens */
/* ------------------------------------------------------------------ */
:root {
/* DPRK flag palette — canonical hex values, kept for reference. The
active UI accents below (--accent, --accent-blue) are brightened
derivatives of --dprk-red / --dprk-blue rather than these literal
values, because the flag's actual red and blue are both too dark to
clear WCAG AA text contrast against a near-black background. */
--dprk-red: #C60C30;
--dprk-blue: #024FA2;
--dprk-white: #FFFFFF;
--dprk-near-black: #171717;
/* Layered slate ground, red + blue accent palette */
--background: #0A0A0F;
--background-alt: #12121A;
--foreground: #FAFAFA;
--muted: #1A1A24;
/* The design system's literal zinc-500 (#71717A) only measures 4.09:1
against --background (#0A0A0F) — short of the WCAG AA 4.5:1 the spec
itself claims for this pairing. Nudged one step lighter (still the
same muted zinc hue family) to actually hit ~5.77:1 and honor the
spec's stated accessibility intent rather than its literal hex value. */
--muted-foreground: #8A8A93;
/* Brightened from --dprk-red (#C60C30, ~2.4:1 on this background) to
clear AA's 4.5:1 for normal text while staying unmistakably red. */
--accent: #FF3B4E;
--accent-foreground: #0A0A0F;
/* 0.15 left the red badge text at 4.48:1 on the card surface, a hair under
AA; 0.10 clears it without changing the hue. */
--accent-muted: rgba(255, 59, 78, 0.10);
/* Borders, underlines and glows drawn in the accent hue — distinct from
--accent-muted (a fill) and merged from three near-identical opacities
(0.35, 0.4, 0.45) that were never meant to read as different strengths. */
--accent-line: rgba(255, 59, 78, 0.4);
--accent-line-soft: rgba(255, 59, 78, 0.25);
/* Brightened from --dprk-blue (#024FA2) the same way, for the same
reason. Reserved for interactive-focus signals — see the design-
language note at the top of this file. */
--accent-blue: #60A5FA;
--accent-blue-muted: rgba(96, 165, 250, 0.15);
--accent-blue-line: rgba(96, 165, 250, 0.3);
--accent-blue-line-strong: rgba(96, 165, 250, 0.5);
--border: rgba(255, 255, 255, 0.08);
--border-hover: rgba(255, 255, 255, 0.15);
--border-strong: rgba(255, 255, 255, 0.25);
/* The boundary of an interactive control (a text input, a select, the
dropdown trigger, a filter chip). WCAG 1.4.11 wants 3:1 for the edge
that shows where a control is; --border is 1.19:1 and is kept for
surfaces that are not controls. This measures 3.75:1 on --background,
3.54:1 on --background-alt and 3.27:1 on --card-solid. */
--control-border: #6B6B75;
/* Faint white washes for a hovered row/link over a dark surface — two
strengths, not a severity scale. */
--surface-hover: rgba(255, 255, 255, 0.05);
--surface-hover-faint: rgba(255, 255, 255, 0.03);
--card: rgba(26, 26, 36, 0.6);
--card-hover: rgba(26, 26, 36, 0.8);
--card-solid: #1A1A24;
/* Deliberately the least transparent surface on the site — see .query-block. */
--surface-code: rgba(10, 10, 15, 0.7);
--ring: var(--accent-blue);
/* The focus-visible glow on text inputs, one declaration instead of the
ring + halo pair repeated wherever a field needs it. */
--focus-ring: 0 0 0 3px rgba(96, 165, 250, 0.2), 0 0 20px rgba(96, 165, 250, 0.1);
/* Back-compat aliases so every existing selector below keeps working */
--color-bg: var(--background);
--color-bg-alt: var(--background-alt);
--color-text: var(--foreground);
--color-text-muted: var(--muted-foreground);
--color-link: var(--accent);
--color-link-visited: var(--accent-blue);
--color-accent: var(--accent);
--color-focus-ring: var(--ring);
--color-border: var(--border);
--color-border-strong: var(--border-hover);
--color-surface: var(--card);
/* Disclaimer / warning surfaces — pushed to a higher red intensity
(border + glow) than a plain card, the same visual language as a
highlighted card, rather than introducing a third hue. */
--color-disclaimer-bg: rgba(255, 59, 78, 0.08);
--color-disclaimer-border: var(--accent-line);
--color-disclaimer-text: #ffd0d6;
/* .badge--high's text color — a pale rose tint of --accent, legible at the
badge's low background opacity where --accent itself reads too dark. */
--badge-high-foreground: #ffb3ba;
/* Typography */
--font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
/* Type scale. Every literal font-size in the file below resolves to one of
these; values in em or "inherit" stay literal on purpose (relative to
whatever they sit inside). The four clamp() entries are the size-critical
display headings, kept fluid rather than snapping at a breakpoint. */
--text-xs: 0.72rem;
--text-sm: 0.8rem;
--text-md: 0.875rem;
--text-base: 1rem;
--text-lg: 1.15rem;
--text-xl: 1.25rem;
--text-2xl: 1.4rem;
--text-h1: clamp(2rem, 4vw, 3rem);
--text-h1-sub: clamp(1.25rem, 2.5vw, 1.75rem);
--text-display: clamp(2.75rem, 7vw, 4.5rem);
--font-size-base: var(--text-base); /* alias — pre-dates the scale above, kept for callers that reach for it by this name */
--line-height-base: 1.65;
--tracking-tight: -0.025em;
--tracking-wide: 0.025em;
/* Motion — smooth and restrained, not bouncy */
--transition-fast: 200ms ease-out;
--transition-card: 300ms ease-out;
/* Shadows & glows — the signature effect: soft red light in the dark,
not hard drop shadows */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3);
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.4);
--glow-sm: 0 0 20px rgba(255, 59, 78, 0.15);
--glow-md: 0 0 40px rgba(255, 59, 78, 0.2);
--glow-lg: 0 0 60px rgba(255, 59, 78, 0.25);
--border-glow: 0 0 0 1px rgba(255, 59, 78, 0.3), 0 0 20px rgba(255, 59, 78, 0.15);
/* Spacing scale */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 1rem;
--space-4: 1.5rem;
--space-5: 2.5rem;
--space-6: 4.5rem;
/* Layout */
--content-max-width: 80rem;
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-full: 9999px;
}
/* ------------------------------------------------------------------ */
/* Breakpoint scale */
/* ------------------------------------------------------------------ */
/* Custom properties can't be referenced inside a media-query condition, so
this comment is the source of truth: every media query in this file
(besides prefers-reduced-motion) uses one of these four widths.
36rem phone landscape / small tablet — first breakpoint off the
single-column phone default
48rem tablet
64rem desktop
72rem wide
*/
/* ------------------------------------------------------------------ */
/* Reset / base */
/* ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; }
body {
position: relative;
margin: 0;
background: var(--background);
color: var(--foreground);
font-family: var(--font-body);
font-size: var(--font-size-base);
line-height: var(--line-height-base);
/* A long unbroken word in prose wraps rather than running under the
overflow-x clip below; links and code break more eagerly still. */
overflow-wrap: break-word;
/* A safety net, not a layout tool: it stops a stray wide element from
scrolling the page sideways. Fix the element itself, never rely on this. */
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
/* Ambient backdrop: three layered slate tones plus two soft, oversized
red glows (the "embers in the night" effect), fixed behind all
content. Kept extremely subtle — this is atmosphere, not decoration. */
body::before {
content: "";
position: fixed;
inset: -10%;
z-index: 0;
pointer-events: none;
/* These two opacities stay literal — one-off ambient atmosphere, not a
reusable accent strength. */
background-image:
radial-gradient(55rem 42rem at 18% -8%, rgba(255, 59, 78, 0.055), transparent 55%),
radial-gradient(48rem 40rem at 100% 92%, rgba(255, 59, 78, 0.035), transparent 55%),
linear-gradient(180deg, var(--background) 0%, var(--background-alt) 55%, var(--background) 100%);
}
/* A very faint grain, for the tactile quality of a well-crafted dark UI
rather than a flat gradient. */
body::after {
content: "";
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0.35;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: no-preference) {
body::before { animation: drift 50s ease-in-out infinite alternate; }
}
/* A reader who asks for less motion gets no hover lift, no press shrink and
no transitions, anywhere on the site. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
transition: none !important;
}
.card:hover, .profile-card:hover, .profile-card:focus-visible,
.btn:active, .btn--secondary:active, .donate-button:active {
transform: none !important;
}
}
@keyframes drift {
from { transform: translate3d(0, 0, 0) scale(1); }
to { transform: translate3d(-1%, 0.6%, 0) scale(1.02); }
}
.site-header, .site-main, .site-footer { position: relative; z-index: 1; }
img, svg { max-width: 100%; }
a {
color: var(--accent);
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-color: var(--accent-line);
transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}
/* A link is the same colour before and after it is visited. */
a:link, a:visited { color: var(--color-link-visited); }
a:hover { text-decoration-color: var(--accent); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible,
.table-scroll:focus-visible, .query-block:focus-visible {
outline: 2px solid var(--ring);
outline-offset: 3px;
border-radius: 2px;
}
h1, h2, h3, h4 {
font-family: var(--font-display);
line-height: 1.2;
letter-spacing: var(--tracking-tight);
font-weight: 700;
color: var(--foreground);
}
h2, h3, h4 { font-weight: 600; }
code, pre { font-family: var(--font-mono); }
/* A contract address or a bare URL is one unbreakable word; let it wrap at
any character rather than run past a phone screen. */
a, code { overflow-wrap: anywhere; }
.skip-link {
position: absolute;
left: -999px;
top: 0;
background: var(--card-solid);
border: 1px solid var(--border-hover);
color: var(--foreground);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-md);
z-index: 100;
font-weight: 600;
}
.skip-link:focus { left: var(--space-2); top: var(--space-2); }
/* ------------------------------------------------------------------ */
/* Header / nav */
/* ------------------------------------------------------------------ */
.site-header {
position: sticky;
top: 0;
z-index: 20;
background: var(--card);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border);
}
.site-header__inner {
/* Wider than --content-max-width on purpose: the nav is chrome, not prose,
and the 80rem cap left it 138px short of fitting at any viewport width. */
max-width: 92rem;
margin: 0 auto;
/* Vertical padding trimmed as the brand mark grew, so the header keeps its
previous height. */
padding: var(--space-2) var(--space-4);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-2) var(--space-3);
}
.site-brand {
display: flex;
align-items: center;
gap: var(--space-2);
flex-shrink: 0;
text-decoration: none;
color: var(--foreground);
font-family: var(--font-display);
font-weight: 700;
font-size: var(--text-xl);
letter-spacing: var(--tracking-tight);
}
.site-brand__mark {
/* The pegasus is wider than tall; height sets the size. */
height: 4em;
width: auto;
flex-shrink: 0;
filter: drop-shadow(0 0 0 transparent);
transition: filter var(--transition-card);
}
.site-brand:hover .site-brand__mark {
filter: drop-shadow(0 0 10px var(--accent-line));
}
.site-brand:hover .site-brand__text { color: var(--accent); }
.site-brand__text {
transition: color var(--transition-fast);
word-spacing: 0.2em;
}
/* The English name and its Korean rendering stacked in the masthead, the
Korean spread to exactly the English name's width: the column is as wide
as its widest line, the English, and the Korean characters are laid out
across it with space-between, so the two lines share both edges on any
system font. */
.site-brand__names {
display: inline-flex;
flex-direction: column;
gap: 0.3em;
line-height: 1;
}
.site-brand__ko {
font-size: 0.85em;
font-weight: 600;
color: var(--accent);
letter-spacing: normal;
}
/* Korean set one character per span and spread across its container's
width (partials/ko-spread.njk): the masthead logo and the home title. */
.ko-spread {
display: flex;
justify-content: space-between;
}
.ko-spread__gap {
width: 0.4em;
}
/* On a wide viewport the links wrap onto a second row when they do not fit
beside the brand; below 48rem they become one row that scrolls within
itself (see the media query below). min-width: 0 is required for a flex
child to shrink below its content size instead of forcing the row (and
the site-brand next to it) to overflow. */
.site-nav {
min-width: 0;
}
.site-nav__list {
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: var(--space-1) var(--space-2);
margin: 0;
padding: 0 var(--space-1);
}
.site-nav__link {
display: inline-block;
white-space: nowrap;
text-decoration: none;
color: var(--muted-foreground);
font-family: var(--font-mono);
font-weight: 500;
font-size: var(--text-md);
letter-spacing: var(--tracking-wide);
padding: var(--space-2);
border-radius: var(--radius-full);
border: 1px solid transparent;
transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
}
.site-nav__link:hover,
.site-nav__link:focus-visible {
color: var(--foreground);
background: var(--surface-hover);
border-color: var(--border);
}
/* The page or section the reader is in, set by base.njk from the page URL:
aria-current="page" on an exact match, "true" on an ancestor section. */
.site-nav__link[aria-current] {
color: var(--foreground);
border-color: var(--border-hover);
}
/* Narrow viewports: the seven links wrapped onto four rows under the brand and
the sticky header stood 280px tall on a 390px phone, pinning a third of the
screen. The nav becomes a single row that scrolls sideways within itself,
under a smaller brand mark, so the header stays about 100px tall. */
@media (max-width: 47.99rem) {
.site-header__inner {
padding: var(--space-2) var(--space-3);
gap: var(--space-1) var(--space-3);
}
.site-brand { font-size: var(--text-lg); }
.site-brand__mark { height: 3em; }
.site-nav {
flex-basis: 100%;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
/* Bleed to the header's edge so the last link is not clipped by padding. */
margin: 0 calc(-1 * var(--space-3));
padding: 0 var(--space-3);
/* Fade the trailing edge so the row visibly continues past the screen;
without a cue, three visible links read as the whole nav. */
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); /* css-allow */
mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); /* css-allow */
}
.site-nav::-webkit-scrollbar { display: none; }
.site-nav__list {
flex-wrap: nowrap;
justify-content: flex-start;
padding: 0;
}
.site-nav__link { padding: var(--space-1) var(--space-2); }
}
/* ------------------------------------------------------------------ */
/* Main content */
/* ------------------------------------------------------------------ */
.site-main {
max-width: var(--content-max-width);
margin: 0 auto;
/* Top gap deliberately smaller than the side/bottom rhythm: 4.5rem left the
first heading floating well below the header on every page. Any block that
leads a page (.hero, .hero--home) zeroes its own top padding so this is the
only thing contributing, and the gap stays identical site-wide. */
padding: var(--space-5) var(--space-4) var(--space-6);
}
/* The page's leading heading contributes no margin of its own, so the gap under
the header is .site-main's padding and nothing else — identical on every
page. Without this, .hero h1 (margin-top: 0) sat 40px down while every other
page's h1 sat at 61px. */
.site-main > :first-child > h1:first-child,
.site-main > h1:first-child {
margin-top: 0;
}
/* Section separation. 4.5rem read as a page break rather than a section
break — enough dead space that the next heading looked detached from the
page. 2.5rem still separates clearly at these heading sizes. */
section + section { margin-top: var(--space-5); }
/* Hero content floats directly on the ambient background rather than
sitting inside its own bordered card — "content doesn't crowd, it
floats in space" per the design system's spacing philosophy. The warm
glow already fixed behind the page (body::before) is what lights it. */
.hero {
padding: 0;
margin: 0 0 var(--space-5);
max-width: 46rem;
}
.hero h1 {
margin-top: 0;
font-size: var(--text-h1);
}
.hero p:last-child { margin-bottom: 0; }
.hero p { color: var(--muted-foreground); font-size: var(--text-lg); }
/* Home page only: a true centered hero rather than a left-hugging intro
block, so the page reads as centered on wide viewports instead of
floating against the left edge of the (already-centered) content
column. */
.hero--home {
margin-left: auto;
margin-right: auto;
max-width: 54rem;
text-align: center;
padding-top: 0;
margin-top: 0;
}
/* ------------------------------------------------------------------ */
/* Home page: the headline counts under the hero */
/* ------------------------------------------------------------------ */
/* The four counts under the hero. Each is a link to the section it counts,
so the row doubles as the page's primary navigation and the reader gets a
sense of the site's size before reading a word of prose.
Explicit column counts rather than auto-fit: the lead tile is double-width,
and auto-fit picks a track count from the container without knowing that,
which lands the fourth tile alone on a second row at common widths. Three
stated layouts (one column, 2x2, then 2fr + three 1fr) are predictable at
every width instead. */
.stat-row {
list-style: none;
padding: 0;
margin: var(--space-4) 0;
display: grid;
grid-template-columns: 1fr;
gap: var(--space-3);
}
@media (min-width: 36rem) {
.stat-row { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) {
.stat-row { grid-template-columns: 2fr 1fr 1fr 1fr; }
}
/* The