/* COPIED from ../assets/css/site.css by portal/scripts/sync-theme.mjs.
Do not edit here: change the main site and re-run `npm run sync-theme`. */
/* ===================================================================
THE ISLE — site.css
-------------------------------------------------------------------
One stylesheet for the whole site. No frameworks, no build step, no
external requests. Everything renders from a file:// double-click.
Design constraints taken from the design document:
- Near-black and charcoal surfaces, restrained accent colour.
- Large condensed display type, simple body type.
- Minimal interface chrome. No decorative HUD.
- No rounded SaaS cards, no feature grids, no RGB glow.
- Imagery carries the mood; the interface gets out of the way.
Section map:
01 Tokens
02 Reset
03 Typography
04 Layout primitives
05 Header + navigation
06 Actions (CTA hierarchy)
07 Plates (image / video slots + placeholders)
08 Hero
09 Statement + editorial sections
10 Creature modules
11 Update / news modules
12 Media gallery + lightbox
13 Community + final CTA
14 Footer
15 Field guide (species pages)
16 Roster (creatures index)
17 Utility pages
18 Draft-copy mode
19 Motion + responsive
20 Restricted tier
21 Status marker
22 Terminal skin (theme layer)
23 Deck (paged sections)
=================================================================== */
/* ===================================================================
01 TOKENS
=================================================================== */
:root {
/* -----------------------------------------------------------------
PHOSPHOR
Blue tube, built around the brand primary #1A4EBC (hue 221 deg).
#1A4EBC measures 2.86:1 against the page black, so it cannot carry
text -- it is a BLOCK colour. It fills the primary action, and the
readable interface runs on brighter tints of the same hue, which
is how a phosphor behaves anyway: the glow is lighter than the
pigment. Contrast against --ink is noted on each step.
----------------------------------------------------------------- */
--ink: #000000; /* the screen itself is black */
--ink-2: #050913;
--surface: #070c1a;
--surface-2: #0a1223;
--surface-3: #0e182e;
/* The specified primary, and the only text that ever sits on it. */
--blue-core: #1a4ebc;
--blue-core-hot: #2a63dd;
--on-core: #dce8ff; /* 5.95:1 on --blue-core */
/* Text at three burn levels. Nothing on the site is white. */
--text: #6a98fb; /* 7.50:1 */
--text-strong: #b8cfff; /* 13.41:1 */
--muted: #3e72e0; /* 4.69:1 */
--dim: #2d5cb8; /* 3.33:1 -- chrome only, never body copy */
/* Rules are phosphor at low burn, never neutral grey. */
--line: rgba(106, 152, 251, 0.18);
--line-strong: rgba(106, 152, 251, 0.42);
/* -----------------------------------------------------------------
ALERT CHANNEL
Amber is the second gun and reads hard against blue. It is never
decorative: restricted records, warnings and threat data only.
----------------------------------------------------------------- */
--amber: #ffb000;
--amber-hot: #ffd166;
--amber-dim: rgba(255, 176, 0, 0.14);
--alert: #ff4a2f;
--accent: var(--amber);
--accent-hot: var(--amber-hot);
--accent-dim: var(--amber-dim);
/* Threat scale climbs out of the blue channel into the alert one. */
--threat-none: #2d5cb8;
--threat-low: #3e72e0;
--threat-moderate: #ffb000;
--threat-high: #ff8c1a;
--threat-extreme: #ff4a2f;
/* -----------------------------------------------------------------
TYPE
One monospace stack for everything. A terminal has one font; the
hierarchy comes from size, tracking and burn level. Cascadia and
Consolas ship with Windows, Menlo/DejaVu cover everywhere else.
----------------------------------------------------------------- */
--font-mono: "Cascadia Mono", "Consolas", "Lucida Console",
"DejaVu Sans Mono", "Menlo", ui-monospace, monospace;
--font-display: var(--font-mono);
--font-body: var(--font-mono);
/* Rhythm. Tighter than the editorial build -- terminals are dense. */
--gutter: clamp(1rem, 3.5vw, 3.5rem);
--measure: 74ch;
--section-y: clamp(3.5rem, 8vw, 8rem);
--max: 1560px;
/* Phosphor bloom. Applied to interface text, not to body copy, or
long paragraphs turn into a smear. */
--glow: 0 0 1px currentColor, 0 0 7px rgba(106, 152, 251, 0.35);
--glow-hot: 0 0 1px currentColor, 0 0 10px rgba(184, 207, 255, 0.5);
--glow-amber:0 0 1px currentColor, 0 0 9px rgba(255, 176, 0, 0.45);
/* Grain, kept from the previous build for the image placeholders. */
--grain: url("data:image/svg+xml;utf8,");
/* Duotone conversion for imagery that the terminal "rasterises".
sepia(1) lands a grey at hue 38.6deg; hue-rotate(183deg) carries it
to 221.1deg, which is the brand hue to within half a degree.
Media and creature photography opt out -- see section 22.6. */
--phosphor-filter: grayscale(1) contrast(1.12) brightness(0.82)
sepia(1) hue-rotate(183deg) saturate(3.4);
}
/* ===================================================================
02 RESET
=================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
background: var(--ink);
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
margin: 0;
background: var(--ink);
color: var(--text);
font-family: var(--font-body);
font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
line-height: 1.65;
font-weight: 380;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }
::selection { background: var(--accent); color: #fff; }
:focus-visible {
outline: 2px solid var(--accent-hot);
outline-offset: 3px;
}
.skip-link {
position: absolute;
top: -100%;
left: var(--gutter);
z-index: 200;
padding: 0.75rem 1.25rem;
background: var(--accent);
color: #fff;
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.16em;
text-transform: uppercase;
text-decoration: none;
}
.skip-link:focus { top: 1rem; }
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/* ===================================================================
03 TYPOGRAPHY
=================================================================== */
.display,
h1, h2, h3, h4 {
margin: 0;
font-family: var(--font-display);
font-weight: 700;
font-variation-settings: "wght" 700, "wdth" 75;
font-stretch: 75%;
text-transform: uppercase;
line-height: 0.88;
letter-spacing: -0.005em;
color: var(--text-strong);
text-wrap: balance;
}
/* Four display steps. Everything on the site uses one of these. */
.d1 { font-size: clamp(3.25rem, 12vw, 11.5rem); line-height: 0.84; }
.d2 { font-size: clamp(2.5rem, 7.5vw, 6.5rem); line-height: 0.86; }
.d3 { font-size: clamp(1.9rem, 4vw, 3.5rem); line-height: 0.92; }
.d4 { font-size: clamp(1.35rem, 2vw, 1.9rem); line-height: 1.0; letter-spacing: 0.01em; }
p { margin: 0 0 1.1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }
.lede {
font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.375rem);
line-height: 1.55;
color: var(--text);
}
.muted { color: var(--muted); }
/* The mono label is the site's only recurring piece of chrome. It marks
Apollo Engineering system text: section indices, classifications,
data field names. */
.label {
display: inline-block;
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--muted);
}
.label--accent { color: var(--accent-hot); }
.label-rule {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.label-rule::after {
content: "";
flex: 1;
height: 1px;
background: var(--line);
}
/* Emphasis inside body copy: never bold, always a colour shift. AE does
not shout in its own documentation. */
strong { font-weight: 500; color: var(--text-strong); }
/* ===================================================================
04 LAYOUT PRIMITIVES
=================================================================== */
.wrap {
width: 100%;
max-width: var(--max);
margin-inline: auto;
padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 1180px; }
.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(3rem, 6vw, 6rem); }
.section--flush { padding-block: 0; }
.section--ink { background: var(--ink); }
.section--surface { background: var(--surface); }
.section--surface2 { background: var(--surface-2); }
.hairline { border-top: 1px solid var(--line); }
/* Editorial split: image on one side, copy on the other, image bleeding
to the viewport edge. Not a card, not a grid cell. */
.split {
display: grid;
gap: clamp(2rem, 5vw, 5rem);
align-items: center;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}
.split--flip > :first-child { order: 2; }
.split__copy { max-width: 46ch; }
.stack { display: grid; gap: clamp(1rem, 2vw, 1.75rem); }
.stack--s { gap: 0.75rem; }
/* ===================================================================
05 HEADER + NAVIGATION
=================================================================== */
.site-header {
position: fixed;
inset: 0 0 auto 0;
z-index: 100;
display: flex;
align-items: center;
gap: clamp(1.5rem, 4vw, 3.5rem);
padding: 1.15rem var(--gutter);
background: transparent;
border-bottom: 1px solid transparent;
transition: background 280ms ease, border-color 280ms ease, padding 280ms ease;
}
/* Transparent over the hero, charcoal once the page moves. */
.site-header.is-scrolled {
padding-block: 0.8rem;
background: rgba(10, 11, 12, 0.94);
border-bottom-color: var(--line);
backdrop-filter: blur(14px);
}
.brand {
display: flex;
align-items: center;
gap: 0.7rem;
text-decoration: none;
flex-shrink: 0;
}
.brand__mark {
width: 30px; height: 30px;
flex-shrink: 0;
color: var(--text-strong);
}
.brand__word {
font-family: var(--font-display);
font-weight: 700;
font-variation-settings: "wght" 700, "wdth" 75;
font-stretch: 75%;
font-size: 1.4rem;
line-height: 1;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--text-strong);
}
.nav {
display: flex;
align-items: center;
gap: clamp(1rem, 2.2vw, 2.1rem);
margin-left: auto;
}
.nav__link {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
text-decoration: none;
color: var(--muted);
padding-block: 0.4rem;
border-bottom: 1px solid transparent;
transition: color 160ms ease, border-color 160ms ease;
white-space: nowrap;
}
.nav__link:hover { color: var(--text-strong); }
.nav__link[aria-current="page"] {
color: var(--text-strong);
border-bottom-color: var(--accent);
}
/* Exactly one dominant control in the header. */
.nav__cta { margin-left: clamp(0.5rem, 1.5vw, 1.25rem); }
.nav-toggle { display: none; }
/* ===================================================================
06 ACTIONS — CTA HIERARCHY
-------------------------------------------------------------------
Three tiers only, and the doc is strict about it:
.btn filled, oxide -> PLAY ON STEAM and nothing else
.btn--ghost outlined -> trailer, discord, section CTAs
.textlink underlined -> everything contextual
=================================================================== */
.btn {
display: inline-flex;
align-items: center;
gap: 0.65rem;
padding: 0.95rem 1.85rem;
background: var(--accent);
color: #fff;
font-family: var(--font-mono);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
text-decoration: none;
border: 1px solid var(--accent);
transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.btn:hover { background: var(--accent-hot); border-color: var(--accent-hot); }
.btn:active { transform: translateY(1px); }
.btn--sm { padding: 0.6rem 1.15rem; font-size: 0.68rem; letter-spacing: 0.16em; }
.btn--ghost {
background: transparent;
color: var(--text);
border-color: var(--line-strong);
}
.btn--ghost:hover {
background: transparent;
border-color: var(--text);
color: var(--text-strong);
}
.textlink {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
text-decoration: none;
border-bottom: 1px solid var(--line-strong);
padding-bottom: 0.2rem;
transition: color 160ms ease, border-color 160ms ease;
}
.textlink:hover { color: var(--text-strong); border-bottom-color: var(--accent); }
.textlink::after { content: "\2192"; font-size: 0.9em; }
.textlink--plain::after { content: none; }
.actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: clamp(0.75rem, 1.5vw, 1.25rem);
}
/* ===================================================================
07 PLATES — image / video slots
-------------------------------------------------------------------
Every image on the site is a "plate". Until a real file is dropped
into assets/img, the plate paints a procedural dark landscape from
layered gradients and shows the filename it is waiting for.
Markup:
site.js tries to load data-src; if the file exists it swaps in, if it
does not the placeholder simply stays. Nothing breaks either way.
=================================================================== */
.plate {
position: relative;
overflow: hidden;
background: var(--ink-2);
aspect-ratio: 16 / 9;
isolation: isolate;
}
.plate > img,
.plate > video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Procedural landscape.
Built back to front: sky, haze glow, far ridge, fog bank, near ridge,
foreground mass. Hard-ish radial stops give the ridges an edge so the
plate reads as terrain in depth rather than as a gradient. */
.plate::before {
content: "";
position: absolute;
inset: -1px;
background:
/* foreground mass, bottom of frame */
radial-gradient(58% 20% at 14% 100%, var(--p-fg) 0 60%, transparent 72%),
radial-gradient(46% 15% at 62% 102%, var(--p-fg) 0 62%, transparent 74%),
linear-gradient(180deg, transparent 74%, var(--p-fg) 96%),
/* near ridge */
radial-gradient(64% 17% at 26% 78%, var(--p-mid) 0 62%, transparent 66%),
radial-gradient(52% 13% at 76% 80%, var(--p-mid) 0 62%, transparent 66%),
/* fog bank sitting in the valley */
linear-gradient(180deg, transparent 56%, var(--p-fog) 66%, transparent 79%),
/* far ridge */
radial-gradient(78% 12% at 58% 68%, var(--p-ridge) 0 64%, transparent 68%),
radial-gradient(46% 9% at 12% 69%, var(--p-ridge) 0 64%, transparent 68%),
/* haze behind the horizon */
radial-gradient(70% 34% at 54% 70%, var(--p-glow) 0%, transparent 68%),
/* sky */
linear-gradient(184deg, var(--p-sky-a) 0%, var(--p-sky-b) 46%, var(--p-base) 76%);
}
/* Grain + vignette. Together they keep the flat gradients from reading
as a CSS background. */
.plate::after {
content: "";
position: absolute;
inset: 0;
background-image: var(--grain);
background-size: 180px 180px;
opacity: 0.16;
mix-blend-mode: overlay;
pointer-events: none;
}
.plate--lit::after { opacity: 0.10; }
.plate__vignette {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background:
radial-gradient(115% 85% at 50% 42%, transparent 42%, rgba(4,5,6,0.72) 100%),
linear-gradient(180deg, rgba(4,5,6,0.30) 0%, transparent 26%);
}
/* Variants. Each one only re-declares the colour stops. Everything
stays desaturated — these stand in for photography, not for art. */
.plate {
--p-base: #0a0c0d;
--p-sky-a: #232c31;
--p-sky-b: #141b1f;
--p-glow: rgba(158,178,190,0.10);
--p-ridge: #12181b;
--p-fog: rgba(150,168,178,0.13);
--p-mid: #0b1012;
--p-fg: #050708;
}
.plate[data-plate="fog"] {
--p-base:#0d1113; --p-sky-a:#333e44; --p-sky-b:#1a2328;
--p-glow:rgba(190,206,214,0.16); --p-ridge:#182126;
--p-fog:rgba(186,202,211,0.20); --p-mid:#0e1417; --p-fg:#070a0b;
}
.plate[data-plate="water"] {
--p-base:#070b0e; --p-sky-a:#25353d; --p-sky-b:#101c22;
--p-glow:rgba(130,172,192,0.13); --p-ridge:#0f1a20;
--p-fog:rgba(126,168,188,0.15); --p-mid:#0a1319; --p-fg:#04080b;
}
.plate[data-plate="forest"] {
--p-base:#070a08; --p-sky-a:#212b21; --p-sky-b:#101710;
--p-glow:rgba(152,176,150,0.10); --p-ridge:#0e150f;
--p-fog:rgba(146,170,146,0.12); --p-mid:#0a110b; --p-fg:#040705;
}
.plate[data-plate="night"] {
--p-base:#050607; --p-sky-a:#151b21; --p-sky-b:#0a0e11;
--p-glow:rgba(120,145,170,0.08); --p-ridge:#0a0e11;
--p-fog:rgba(118,140,162,0.08); --p-mid:#070a0c; --p-fg:#030405;
}
.plate[data-plate="rain"] {
--p-base:#090b0d; --p-sky-a:#2b343a; --p-sky-b:#151c21;
--p-glow:rgba(170,188,200,0.12); --p-ridge:#141a1e;
--p-fog:rgba(164,184,196,0.17); --p-mid:#0c1114; --p-fg:#050708;
}
.plate[data-plate="dome"] {
--p-base:#0b0a09; --p-sky-a:#302a22; --p-sky-b:#191512;
--p-glow:rgba(196,166,118,0.12); --p-ridge:#171310;
--p-fog:rgba(190,164,120,0.11); --p-mid:#100d0b; --p-fg:#070605;
}
.plate[data-plate="dusk"] {
--p-base:#0b0a0a; --p-sky-a:#3a3129; --p-sky-b:#1b1614;
--p-glow:rgba(198,140,92,0.14); --p-ridge:#181312;
--p-fog:rgba(178,142,110,0.12); --p-mid:#0f0c0b; --p-fg:#050404;
}
/* Ratios used across the site. */
.plate[data-ratio="21/9"] { aspect-ratio: 21 / 9; }
.plate[data-ratio="4/3"] { aspect-ratio: 4 / 3; }
.plate[data-ratio="3/4"] { aspect-ratio: 3 / 4; }
.plate[data-ratio="1/1"] { aspect-ratio: 1 / 1; }
.plate[data-ratio="2/3"] { aspect-ratio: 2 / 3; }
.plate[data-ratio="fill"] { aspect-ratio: auto; height: 100%; }
/* The asset slot marker. Only visible while the plate is empty, so it
disappears on its own the moment a real file lands. */
.plate__slot {
position: absolute;
left: 0; bottom: 0;
z-index: 3;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.4rem 0.85rem;
max-width: 100%;
padding: 0.6rem 0.85rem;
background: rgba(6, 7, 8, 0.6);
border-top: 1px solid var(--line);
border-right: 1px solid var(--line);
font-family: var(--font-mono);
font-size: 0.625rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--dim);
}
.plate__slot b { font-weight: 500; color: var(--muted); }
.plate__slot em { font-style: normal; color: var(--dim); }
/* On plates used as full-bleed backgrounds the copy sits bottom-left, so
the marker moves to the top-right corner instead — clear of both the
headline and the fixed header. */
.hero__media .plate__slot,
.community__media .plate__slot,
.guide-hero__media .plate__slot {
top: 4.75rem;
right: 0;
bottom: auto;
left: auto;
max-width: min(30rem, 60vw);
border: 1px solid var(--line);
border-right: 0;
}
/* Corner brackets. Used only on plates standing in for trail-cam
footage, which the design doc names as the visual identity. */
.plate--cam .plate__cam {
position: absolute;
inset: 0.7rem;
z-index: 3;
pointer-events: none;
border: 1px solid rgba(231, 228, 222, 0.14);
clip-path: polygon(
0 0, 22px 0, 22px 1px, 1px 1px, 1px 22px, 0 22px,
0 100%, 22px 100%, 22px calc(100% - 1px), 1px calc(100% - 1px), 1px calc(100% - 22px), 0 calc(100% - 22px),
100% 100%, calc(100% - 22px) 100%, calc(100% - 22px) calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 1px) calc(100% - 22px), 100% calc(100% - 22px),
100% 0, calc(100% - 22px) 0, calc(100% - 22px) 1px, calc(100% - 1px) 1px, calc(100% - 1px) 22px, 100% 22px
);
}
.plate__cam-id {
position: absolute;
top: 0.9rem; right: 1rem;
z-index: 3;
font-family: var(--font-mono);
font-size: 0.625rem;
letter-spacing: 0.16em;
color: rgba(231, 228, 222, 0.34);
pointer-events: none;
}
/* Full-bleed plate that breaks the wrap and touches both edges. */
.plate--bleed {
width: 100vw;
margin-left: calc(50% - 50vw);
}
/* ===================================================================
08 HERO
=================================================================== */
.hero {
position: relative;
min-height: 100svh;
display: flex;
align-items: flex-end;
overflow: hidden;
}
.hero__media {
position: absolute;
inset: 0;
z-index: 0;
}
.hero__media .plate { height: 100%; aspect-ratio: auto; }
.hero__inner {
position: relative;
z-index: 2;
width: 100%;
max-width: var(--max);
margin-inline: auto;
padding: 0 var(--gutter) clamp(3.5rem, 8vh, 7rem);
}
.hero__headline {
max-width: 20ch;
margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.hero__support {
max-width: 52ch;
margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
color: var(--text);
}
.hero__tertiary {
margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}
/* Small, honest scroll cue. It marks the page as scrollable and does
nothing else. */
.hero__cue {
position: absolute;
right: var(--gutter);
bottom: clamp(3.5rem, 8vh, 7rem);
z-index: 2;
display: flex;
align-items: center;
gap: 0.7rem;
font-family: var(--font-mono);
font-size: 0.625rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--dim);
}
.hero__cue::after {
content: "";
width: 1px; height: 44px;
background: linear-gradient(180deg, var(--line-strong), transparent);
}
/* ===================================================================
09 STATEMENT + EDITORIAL
=================================================================== */
.statement {
max-width: 22ch;
margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
/* Three large editorial blocks, alternating side, each led by its own
image. Deliberately not a feature grid. */
.feature {
display: grid;
gap: clamp(1.75rem, 4vw, 4.5rem);
align-items: center;
grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
padding-block: clamp(2.5rem, 6vw, 5.5rem);
}
.feature + .feature { border-top: 1px solid var(--line); }
.feature:nth-child(even) > .feature__media { order: 2; }
.feature__copy { max-width: 44ch; }
.feature__index {
display: block;
margin-bottom: 1.1rem;
}
.feature__title { margin-bottom: 1rem; }
/* ===================================================================
10 CREATURE MODULES
=================================================================== */
/* Homepage: a short field-guide run, deliberately light on data. */
.creature-run {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1px;
background: var(--line);
border-block: 1px solid var(--line);
}
.creature-entry {
display: flex;
flex-direction: column;
background: var(--ink);
text-decoration: none;
color: inherit;
transition: background 200ms ease;
}
.creature-entry:hover { background: var(--surface); }
.creature-entry:hover .creature-entry__name { color: var(--accent-hot); }
.creature-entry__media { position: relative; }
.creature-entry__body { padding: 1.35rem 1.35rem 1.6rem; flex: 1; display: flex; flex-direction: column; }
.creature-entry__name {
margin-bottom: 0.55rem;
transition: color 180ms ease;
}
/* The field-guide data line: diet / role / habitat. Detailed statistics
stay off the homepage, per the doc. */
.creature-entry__meta {
display: grid;
gap: 0.3rem;
margin-bottom: 0.9rem;
padding-bottom: 0.9rem;
border-bottom: 1px solid var(--line);
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: 0.08em;
color: var(--muted);
}
.creature-entry__meta div { display: flex; gap: 0.6rem; }
.creature-entry__meta dt { color: var(--dim); min-width: 5.5rem; text-transform: uppercase; letter-spacing: 0.14em; }
.creature-entry__meta dd { margin: 0; }
.creature-entry__blurb {
font-size: 0.9375rem;
line-height: 1.6;
color: var(--muted);
margin: 0;
}
/* Threat classification chip. Colour is data, not decoration. */
.threat {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-family: var(--font-mono);
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
}
.threat::before {
content: "";
width: 7px; height: 7px;
background: currentColor;
}
.threat[data-threat="NONE"] { color: var(--threat-none); }
.threat[data-threat="LOW"] { color: var(--threat-low); }
.threat[data-threat="MODERATE"] { color: var(--threat-moderate); }
.threat[data-threat="HIGH"] { color: var(--threat-high); }
.threat[data-threat="EXTREME"] { color: var(--threat-extreme); }
.creature-entry__foot {
margin-top: auto;
padding-top: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
/* ===================================================================
11 UPDATE / NEWS
=================================================================== */
/* The newest update is one of the largest modules on the page. */
.update-lead {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: clamp(1.75rem, 4vw, 4rem);
align-items: center;
}
.update-lead__meta {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.25rem;
margin-bottom: 1.15rem;
}
.update-lead__title { margin-bottom: 1.15rem; }
.update-lead__summary { margin-bottom: 1.75rem; color: var(--muted); }
/* Recent posts below the lead: a plain list, not cards. */
.post-list {
list-style: none;
margin: clamp(2.5rem, 5vw, 4rem) 0 0;
padding: 0;
border-top: 1px solid var(--line);
}
.post-list li { border-bottom: 1px solid var(--line); }
.post-row {
display: grid;
grid-template-columns: 8.5rem 7rem minmax(0, 1fr) auto;
gap: 1.5rem;
align-items: baseline;
padding: 1.15rem 0;
text-decoration: none;
color: inherit;
transition: color 160ms ease;
}
.post-row:hover { color: var(--text-strong); }
.post-row:hover .post-row__title { color: var(--accent-hot); }
.post-row__date,
.post-row__kind {
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--dim);
}
.post-row__kind[data-source="steam"] { color: var(--muted); }
.post-row__title {
font-family: var(--font-display);
font-weight: 700;
font-variation-settings: "wght" 700, "wdth" 75;
font-stretch: 75%;
text-transform: uppercase;
font-size: 1.15rem;
line-height: 1.1;
letter-spacing: 0.01em;
color: var(--text);
transition: color 160ms ease;
}
.post-row__go {
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--dim);
}
/* News page article layout */
.news-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: clamp(1.5rem, 3vw, 2.5rem);
}
.news-card {
display: flex;
flex-direction: column;
gap: 1rem;
text-decoration: none;
color: inherit;
}
.news-card:hover .news-card__title { color: var(--accent-hot); }
.news-card__title { transition: color 160ms ease; }
.news-card__summary { font-size: 0.9375rem; color: var(--muted); }
/* ===================================================================
12 MEDIA GALLERY + LIGHTBOX
=================================================================== */
.tabs {
display: flex;
gap: 0;
margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
border-bottom: 1px solid var(--line);
}
.tab {
padding: 0.85rem 1.4rem;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--dim);
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color 160ms ease, border-color 160ms ease;
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--text-strong); border-bottom-color: var(--accent); }
/* Asymmetric gallery. Deliberately uneven — no grid of six equal
thumbnails. Sizes are assigned per item in the data. */
.gallery {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: clamp(90px, 11vw, 160px);
gap: clamp(0.5rem, 1vw, 0.9rem);
}
.gallery__item {
position: relative;
display: block;
padding: 0;
overflow: hidden;
background: var(--ink-2);
cursor: zoom-in;
}
.gallery__item .plate { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
.gallery__item[data-size="hero"] { grid-column: span 4; grid-row: span 3; }
.gallery__item[data-size="tall"] { grid-column: span 2; grid-row: span 3; }
.gallery__item[data-size="wide"] { grid-column: span 3; grid-row: span 2; }
.gallery__item[data-size="box"] { grid-column: span 2; grid-row: span 2; }
.gallery__item[data-size="small"] { grid-column: span 2; grid-row: span 2; }
.gallery__caption {
position: absolute;
inset: auto 0 0 0;
z-index: 4;
padding: 1.4rem 1rem 0.85rem;
background: linear-gradient(180deg, transparent, rgba(5,6,7,0.9));
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text);
opacity: 0;
transform: translateY(6px);
transition: opacity 200ms ease, transform 200ms ease;
}
.gallery__item:hover .gallery__caption,
.gallery__item:focus-visible .gallery__caption { opacity: 1; transform: none; }
.gallery__play {
position: absolute;
inset: 0;
z-index: 4;
display: grid;
place-items: center;
pointer-events: none;
}
.gallery__play span {
width: 62px; height: 62px;
display: grid;
place-items: center;
border: 1px solid rgba(231,228,222,0.45);
color: var(--text-strong);
font-size: 0.8rem;
padding-left: 4px;
background: rgba(8,9,10,0.35);
transition: background 180ms ease, border-color 180ms ease;
}
.gallery__item:hover .gallery__play span { background: var(--accent); border-color: var(--accent); }
/* Lightbox */
.lightbox {
position: fixed;
inset: 0;
z-index: 300;
display: none;
place-items: center;
padding: clamp(1rem, 4vw, 3rem);
background: rgba(4, 5, 6, 0.96);
}
.lightbox[open], .lightbox.is-open { display: grid; }
.lightbox__frame {
position: relative;
width: min(1500px, 100%);
max-height: 100%;
}
.lightbox__frame .plate { aspect-ratio: 16 / 9; }
.lightbox__bar {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1.5rem;
padding-top: 0.9rem;
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
}
.lightbox__close {
position: absolute;
top: clamp(1rem, 3vw, 2rem);
right: clamp(1rem, 3vw, 2rem);
z-index: 2;
width: 44px; height: 44px;
display: grid;
place-items: center;
border: 1px solid var(--line-strong);
color: var(--text);
font-family: var(--font-mono);
transition: border-color 160ms ease, color 160ms ease;
}
.lightbox__close:hover { border-color: var(--text); color: var(--text-strong); }
.lightbox__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 52px; height: 72px;
display: grid;
place-items: center;
color: var(--muted);
font-size: 1.3rem;
background: rgba(8,9,10,0.5);
transition: color 160ms ease, background 160ms ease;
}
.lightbox__nav:hover { color: var(--text-strong); background: rgba(8,9,10,0.85); }
.lightbox__nav--prev { left: 0; }
.lightbox__nav--next { right: 0; }
/* ===================================================================
13 COMMUNITY + FINAL CTA
=================================================================== */
.community {
position: relative;
min-height: clamp(520px, 74vh, 780px);
display: grid;
align-items: center;
overflow: hidden;
}
.community__media { position: absolute; inset: 0; z-index: 0; }
.community__media .plate { height: 100%; aspect-ratio: auto; }
.community__inner { position: relative; z-index: 2; }
.community__links {
display: flex;
flex-wrap: wrap;
gap: 1.5rem 2.5rem;
margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
border-top: 1px solid var(--line);
max-width: 46rem;
}
.final-cta {
background: var(--ink);
text-align: center;
padding-block: clamp(6rem, 14vw, 13rem);
}
.final-cta .statement { max-width: 26ch; margin-inline: auto; }
.final-cta .actions { justify-content: center; }
/* ===================================================================
14 FOOTER
=================================================================== */
.site-footer {
background: var(--ink);
border-top: 1px solid var(--line);
padding-block: clamp(1.5rem, 3vw, 2.25rem);
font-size: 0.9375rem;
}
.footer-base {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 1rem 2rem;
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--dim);
}
.footer-base a { color: var(--dim); text-decoration: none; }
.footer-base a:hover { color: var(--muted); }
/* ===================================================================
15 FIELD GUIDE — species pages
-------------------------------------------------------------------
Styled as an Apollo Engineering document rather than a stat card.
=================================================================== */
.guide-hero {
position: relative;
min-height: clamp(460px, 68vh, 760px);
display: flex;
align-items: flex-end;
overflow: hidden;
}
.guide-hero__media { position: absolute; inset: 0; z-index: 0; }
.guide-hero__media .plate { height: 100%; aspect-ratio: auto; }
.guide-hero__inner {
position: relative;
z-index: 2;
width: 100%;
max-width: var(--max);
margin-inline: auto;
/* Top padding clears the fixed header: with the historical record
folded in, this block can outgrow the hero and would otherwise
slide up behind the nav. */
padding: calc(var(--header-h, 78px) + clamp(1.5rem, 4vh, 3rem)) var(--gutter) clamp(2.5rem, 6vh, 4.5rem);
}
.guide-hero__crumb { margin-bottom: 1.25rem; }
.guide-hero__facts {
display: flex;
flex-wrap: wrap;
gap: 0.6rem 2rem;
margin-top: 1.5rem;
}
/* Diet sits directly under the name, so it closes up to the heading and
the summary keeps its own breathing room below. */
h1 + .guide-hero__facts,
.d2 + .guide-hero__facts { margin-top: 0.9rem; }
/* The header block: Developed From / Key Enhancements / etc. */
.spec-sheet {
display: grid;
grid-template-columns: 13rem minmax(0, 1fr);
border-top: 1px solid var(--line);
}
.spec-sheet > dt,
.spec-sheet > dd {
padding: 1rem 0;
border-bottom: 1px solid var(--line);
margin: 0;
}
.spec-sheet > dt {
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--dim);
padding-right: 1.5rem;
}
.spec-sheet > dd { color: var(--text); }
/* Lifecycle table. AE data, so mono, dense, unstyled beyond rules. */
.data-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9375rem;
}
.data-table caption {
text-align: left;
padding-bottom: 1rem;
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--dim);
}
.data-table th,
.data-table td {
text-align: left;
padding: 0.95rem 1.25rem 0.95rem 0;
border-bottom: 1px solid var(--line);
vertical-align: top;
}
.data-table thead th {
font-family: var(--font-mono);
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--dim);
border-bottom-color: var(--line-strong);
white-space: nowrap;
}
.data-table tbody th {
font-family: var(--font-display);
font-weight: 700;
font-variation-settings: "wght" 700, "wdth" 75;
font-stretch: 75%;
text-transform: uppercase;
font-size: 1.05rem;
letter-spacing: 0.02em;
color: var(--text-strong);
white-space: nowrap;
}
.data-table td:nth-child(2) { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--muted); white-space: nowrap; }
.data-table td:last-child { color: var(--muted); }
/* Protocol / observation lists — numbered, clinical, no bullets. */
.proto-list {
list-style: none;
margin: 0;
padding: 0;
counter-reset: proto;
border-top: 1px solid var(--line);
}
.proto-list li {
counter-increment: proto;
display: grid;
grid-template-columns: 3.5rem minmax(0, 1fr);
gap: 1rem;
padding: 1rem 0;
border-bottom: 1px solid var(--line);
color: var(--muted);
}
.proto-list li::before {
content: counter(proto, decimal-leading-zero);
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.1em;
color: var(--dim);
padding-top: 0.2em;
}
/* Lifecycle prose blocks */
.stage-note { padding-block: 1.4rem; border-bottom: 1px solid var(--line); }
.stage-note:first-child { border-top: 1px solid var(--line); }
.stage-note h3 { margin-bottom: 0.6rem; font-size: 1.2rem; }
.stage-note p { color: var(--muted); margin: 0; }
/* Anomalous specimen block — the one place the page raises its voice. */
.specimen {
border-left: 2px solid var(--accent);
background: var(--surface);
padding: clamp(1.5rem, 3vw, 2.25rem);
}
.specimen + .specimen { margin-top: 1.25rem; }
.specimen__code {
font-family: var(--font-mono);
font-size: 0.8125rem;
letter-spacing: 0.16em;
color: var(--accent-hot);
margin-bottom: 1rem;
display: block;
}
.specimen ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.5rem; color: var(--muted); font-size: 0.9375rem; }
.guide-nav {
display: flex;
justify-content: space-between;
gap: 1.5rem;
padding-block: clamp(2rem, 4vw, 3rem);
border-top: 1px solid var(--line);
}
/* ===================================================================
16 ROSTER — creatures index
=================================================================== */
.roster-controls {
display: flex;
flex-wrap: wrap;
gap: 1rem 1.5rem;
align-items: center;
padding-block: 1.25rem;
border-block: 1px solid var(--line);
margin-bottom: clamp(2rem, 4vw, 3rem);
}
.search {
flex: 1 1 260px;
display: flex;
align-items: center;
gap: 0.75rem;
max-width: 26rem;
}
.search input {
flex: 1;
background: transparent;
border: 0;
border-bottom: 1px solid var(--line-strong);
padding: 0.55rem 0;
color: var(--text-strong);
font-family: var(--font-mono);
font-size: 0.8125rem;
letter-spacing: 0.1em;
}
.search input::placeholder { color: var(--dim); letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.72rem; }
.search input:focus { outline: none; border-bottom-color: var(--accent); }
.filters { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.filter {
padding: 0.45rem 0.9rem;
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--dim);
border: 1px solid var(--line);
transition: color 150ms ease, border-color 150ms ease;
}
.filter:hover { color: var(--text); }
.filter[aria-pressed="true"] { color: var(--text-strong); border-color: var(--line-strong); background: var(--surface-2); }
.roster-count {
margin-left: auto;
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--dim);
}
.roster {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
}
.roster-empty {
padding: clamp(3rem, 8vw, 6rem) 0;
text-align: center;
color: var(--dim);
font-family: var(--font-mono);
font-size: 0.8125rem;
letter-spacing: 0.16em;
text-transform: uppercase;
}
/* ===================================================================
17 UTILITY PAGES
=================================================================== */
.page-head {
padding-block: clamp(8rem, 16vh, 12rem) clamp(2.5rem, 5vw, 4rem);
border-bottom: 1px solid var(--line);
}
.page-head .label-rule { margin-bottom: 1.5rem; }
.page-head p { color: var(--muted); margin-top: 1.5rem; }
.prose { max-width: 72ch; }
.prose h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); margin: clamp(2.5rem, 5vw, 3.5rem) 0 1rem; }
.prose h3 { font-size: 1.2rem; margin: 2rem 0 0.75rem; }
.prose ul { color: var(--muted); padding-left: 1.2rem; display: grid; gap: 0.6rem; }
.prose a { color: var(--text); text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.prose a:hover { color: var(--accent-hot); }
.contact-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
margin-top: clamp(2rem, 4vw, 3rem);
}
.contact-cell { background: var(--ink); padding: 1.6rem; }
.contact-cell .label { display: block; margin-bottom: 0.7rem; }
.contact-cell a { font-family: var(--font-mono); font-size: 0.875rem; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line-strong); overflow-wrap: anywhere; }
.contact-cell a:hover { color: var(--accent-hot); }
/* ===================================================================
18 DRAFT-COPY MODE
-------------------------------------------------------------------
Everything written by Claude rather than taken from an existing
source is tagged data-draft. Add ?draft=1 to any URL to outline it
all and see exactly what still needs a pass. Off by default.
=================================================================== */
body.draft-mode [data-draft] {
outline: 1px dashed rgba(184, 84, 31, 0.75);
outline-offset: 5px;
position: relative;
}
body.draft-mode [data-draft]::after {
content: "DRAFT";
position: absolute;
top: -0.65rem;
left: -0.35rem;
padding: 1px 5px;
background: var(--accent);
color: #fff;
font-family: var(--font-mono);
font-size: 0.5rem;
font-weight: 600;
letter-spacing: 0.16em;
pointer-events: none;
z-index: 5;
}
.draft-banner {
position: fixed;
left: 0; bottom: 0;
z-index: 250;
display: none;
gap: 1rem;
align-items: center;
padding: 0.6rem 1rem;
background: var(--accent);
color: #fff;
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: 0.14em;
text-transform: uppercase;
}
body.draft-mode .draft-banner { display: flex; }
.draft-banner a { color: #fff; }
/* ===================================================================
19 MOTION + RESPONSIVE
=================================================================== */
/* Sections rise slightly into place. Small enough to read as film
rather than as a web animation.
[data-reveal] is visible by default and site.js only hides the ones
that start below the fold. Hiding in CSS instead would mean a page
with broken or disabled JavaScript renders as an empty black column,
and it would flash the above-the-fold content on every load. */
[data-reveal].reveal-armed {
opacity: 0;
transform: translateY(18px);
transition: opacity 700ms cubic-bezier(0.2, 0.7, 0.3, 1),
transform 700ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
[data-reveal].reveal-armed.is-visible { opacity: 1; transform: none; }
@media (max-width: 1080px) {
.split,
.feature,
.update-lead { grid-template-columns: minmax(0, 1fr); }
.feature:nth-child(even) > .feature__media,
.split--flip > :first-child { order: 0; }
.spec-sheet { grid-template-columns: minmax(0, 1fr); }
.spec-sheet > dt { padding-bottom: 0; border-bottom: 0; }
.spec-sheet > dd { padding-top: 0.35rem; }
.post-row { grid-template-columns: 7rem minmax(0, 1fr); }
.post-row__kind, .post-row__go { display: none; }
}
@media (max-width: 860px) {
/* Nav collapses to the dominant CTA plus a disclosure. The doc asks
for one dominant action; on mobile that is the only one left. */
.nav {
position: fixed;
inset: 0 0 auto 0;
z-index: 1;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 5rem var(--gutter) 2rem;
/* Fully opaque. A translucent panel over a full-screen hero
leaves the headline legible straight through the menu. */
background: var(--ink);
border-bottom: 1px solid var(--line);
transform: translateY(-100%);
transition: transform 320ms cubic-bezier(0.3, 0.8, 0.3, 1);
max-height: 100svh;
overflow-y: auto;
}
.nav.is-open { transform: none; }
.nav__link { padding: 1rem 0; border-bottom: 1px solid var(--line); font-size: 0.85rem; }
.nav__cta { margin: 1.5rem 0 0; justify-content: center; }
.nav-toggle {
display: grid;
place-items: center;
margin-left: auto;
width: 42px; height: 42px;
z-index: 2;
color: var(--text);
font-family: var(--font-mono);
font-size: 0.65rem;
letter-spacing: 0.14em;
text-transform: uppercase;
border: 1px solid var(--line-strong);
}
.gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(110px, 26vw, 180px); }
.gallery__item[data-size] { grid-column: span 2; grid-row: span 2; }
.gallery__item[data-size="small"],
.gallery__item[data-size="box"] { grid-column: span 1; grid-row: span 1; }
.hero__cue { display: none; }
.data-table thead { display: none; }
.data-table tbody th,
.data-table td { display: block; padding: 0.3rem 0; border: 0; }
.data-table tbody tr { display: block; padding-block: 1.1rem; border-bottom: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
[data-reveal].reveal-armed { opacity: 1; transform: none; }
}
@media print {
.site-header, .hero__cue, .draft-banner, .lightbox { display: none !important; }
body { background: #fff; color: #000; }
}
/* ===================================================================
20 RESTRICTED TIER
-------------------------------------------------------------------
Species pages publish what Apollo Engineering would publish: the
palaeontology, the growth chart, the acknowledged engineering. The
internal field guide — containment category, strain purpose, handling
protocols, anomalous specimen files — sits underneath it behind a
clearance gate.
Built on / so it opens without JavaScript and is
keyboard operable for free.
=================================================================== */
.restricted {
border-top: 1px solid var(--line);
background: var(--ink);
}
.restricted > summary {
display: block;
list-style: none;
cursor: pointer;
padding-block: clamp(2rem, 4vw, 3rem);
transition: background 200ms ease;
}
.restricted > summary::-webkit-details-marker { display: none; }
.restricted > summary:hover { background: var(--surface); }
.restricted > summary:focus-visible { outline: 2px solid var(--accent-hot); outline-offset: -2px; }
.restricted__bar {
display: flex;
align-items: baseline;
gap: clamp(0.75rem, 2vw, 1.5rem);
flex-wrap: wrap;
padding-left: clamp(1rem, 2vw, 1.5rem);
border-left: 2px solid var(--accent);
}
.restricted__state {
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--accent-hot);
}
.restricted__title {
font-family: var(--font-display);
font-weight: 700;
font-variation-settings: "wght" 700, "wdth" 75;
font-stretch: 75%;
text-transform: uppercase;
font-size: clamp(1.35rem, 2.4vw, 2rem);
line-height: 1;
color: var(--text-strong);
}
.restricted__hint {
margin-left: auto;
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--dim);
white-space: nowrap;
}
.restricted__hint::after { content: " [+]"; }
.restricted[open] .restricted__hint::after { content: " [\2212]"; }
.restricted__note {
width: 100%;
max-width: 62ch;
margin-top: 0.85rem;
font-size: 0.9375rem;
color: var(--muted);
}
/* Everything inside the gate carries a faint warning ground so it never
reads as the same document as the page above it. */
.restricted__body {
border-top: 1px solid var(--line);
background:
linear-gradient(180deg, var(--accent-dim) 0%, transparent 380px),
var(--ink);
}
.restricted__stamp {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.3rem 0.7rem;
border: 1px solid var(--accent);
color: var(--accent-hot);
font-family: var(--font-mono);
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
}
/* ===================================================================
21 STATUS MARKER
-------------------------------------------------------------------
Used on anything that exists but is not finished. The Sandbox mode
on game#modes is the one thing wearing it now.
=================================================================== */
.env__status {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1rem;
padding: 0.32rem 0.75rem;
border: 1px dashed var(--line-strong);
font-family: var(--font-mono);
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--muted);
}
.env__status::before {
content: "";
width: 7px; height: 7px;
border: 1px solid currentColor;
}
/* ===================================================================
22 TERMINAL SKIN
-------------------------------------------------------------------
Retro-futuristic CRT treatment, referencing the ship-computer
interfaces of late-70s science fiction: blue phosphor, amber as
a second alert gun, one monospace face, and simulated tube hardware.
This section is a THEME LAYER. It sits after the structural CSS and
overrides it, so the layout above stays readable and the skin can be
lifted out in one block if the direction changes.
Contents:
22.1 Tube hardware (scanlines, roll, vignette, bloom)
22.2 Type on a character grid
22.3 Interface chrome (labels, rules, cursors)
22.4 Actions in inverse video
22.5 Header and navigation
22.6 Imagery: what the terminal rasterises and what it does not
22.7 Data display
22.8 The alert channel (restricted, threat, in-development)
22.9 Inputs
22.10 Motion and reduced motion
=================================================================== */
/* -------------------------------------------------------------------
22.1 TUBE HARDWARE
Three fixed, non-interactive layers over the whole viewport. They sit
above the lightbox as well, because the lightbox is on the same
screen as everything else.
------------------------------------------------------------------- */
/* Scanlines. 3px period: two lit, one dark. */
body::before {
content: "";
position: fixed;
inset: 0;
z-index: 9998;
pointer-events: none;
background-image: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.32) 50%);
background-size: 100% 3px;
}
/* Vignette plus the faint glow of an energised tube. */
body::after {
content: "";
position: fixed;
inset: 0;
z-index: 9999;
pointer-events: none;
background: radial-gradient(125% 100% at 50% 50%, transparent 52%, rgba(0, 0, 0, 0.62) 100%);
box-shadow: inset 0 0 200px rgba(62, 114, 224, 0.07);
}
/* A single bright band drifting down the screen, the way an unsynced
tube rolls. Very slow and very faint -- it should register only when
you are not looking for it. */
html::before {
content: "";
position: fixed;
left: 0;
right: 0;
height: 32vh;
z-index: 9997;
pointer-events: none;
background: linear-gradient(180deg,
transparent 0%,
rgba(150, 190, 255, 0.022) 46%,
rgba(150, 190, 255, 0.032) 52%,
transparent 100%);
animation: crt-roll 11s linear infinite;
}
@keyframes crt-roll {
from { transform: translateY(-40vh); }
to { transform: translateY(140vh); }
}
/* -------------------------------------------------------------------
22.2 TYPE
One face, uppercase interface, sentence-case body. Full-uppercase
body copy would be truer to the reference and genuinely unreadable
across pages this long; to switch it, add text-transform: uppercase
to `p` here and nothing else needs to change.
------------------------------------------------------------------- */
body {
font-size: clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem);
line-height: 1.78;
font-weight: 400;
letter-spacing: 0.012em;
}
.display, h1, h2, h3, h4 {
/* Monospace is not variable -- clear the variable-font axes or the
stack falls back oddly on some systems. */
font-variation-settings: normal;
font-stretch: normal;
font-weight: 700;
letter-spacing: 0.045em;
text-shadow: var(--glow);
text-wrap: balance;
}
/* Display steps, re-cut for a monospace face. Monospace runs far wider
per character, so the old editorial scale would overflow every line. */
.d1 { font-size: clamp(1.65rem, 4.9vw, 4.15rem); line-height: 1.04; letter-spacing: 0.035em; }
.d2 { font-size: clamp(1.3rem, 3.3vw, 2.5rem); line-height: 1.1; letter-spacing: 0.045em; }
.d3 { font-size: clamp(1.05rem, 1.9vw, 1.55rem); line-height: 1.18; letter-spacing: 0.06em; }
.d4 { font-size: clamp(0.95rem, 1.2vw, 1.1rem); line-height: 1.25; letter-spacing: 0.09em; }
.lede {
font-size: clamp(0.95rem, 0.9rem + 0.28vw, 1.125rem);
line-height: 1.7;
color: var(--text);
}
/* Body copy gets no bloom. Glow on a paragraph is a smear. */
p, li, dd { text-shadow: none; }
strong { font-weight: 700; color: var(--text-strong); text-shadow: var(--glow); }
::selection { background: var(--text); color: var(--ink); text-shadow: none; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
/* -------------------------------------------------------------------
22.3 INTERFACE CHROME
------------------------------------------------------------------- */
.label {
text-shadow: var(--glow);
letter-spacing: 0.2em;
}
.label--accent { color: var(--amber); text-shadow: var(--glow-amber); }
/* Section rules become a dashed phosphor trace rather than a hairline. */
.label-rule::after {
height: 1px;
background: none;
background-image: repeating-linear-gradient(90deg,
var(--line-strong) 0 5px, transparent 5px 11px);
}
/* Blinking block cursor after the primary heading of a view. Nothing
else on the page blinks. */
@keyframes crt-blink { 0%, 48% { opacity: 1; } 49%, 100% { opacity: 0; } }
.hero__headline::after,
.page-head h1::after,
.guide-hero__inner h1::after {
content: "\2588";
margin-left: 0.12em;
color: var(--text-strong);
animation: crt-blink 1.05s steps(1) infinite;
}
.hairline { border-top-color: var(--line); }
/* -------------------------------------------------------------------
22.4 ACTIONS
The primary action is inverse video -- a solid block of phosphor with
the page colour punched out of it. That is how a terminal shouts,
and it keeps one unmistakable dominant control per the design doc.
------------------------------------------------------------------- */
/* The primary action is the one place the brand blue appears at full
strength. It is too dark to be text, but as a solid block against the
page black it is the most saturated thing on screen, and --on-core
keeps the label at 5.95:1. */
.btn {
background: var(--blue-core);
border: 1px solid var(--blue-core-hot);
color: var(--on-core);
text-shadow: none;
letter-spacing: 0.18em;
box-shadow: 0 0 16px rgba(26, 78, 188, 0.55);
transition: background 140ms ease, border-color 140ms ease,
box-shadow 140ms ease, transform 140ms ease;
}
.btn:hover {
background: var(--blue-core-hot);
border-color: var(--text);
color: #fff;
box-shadow: 0 0 24px rgba(42, 99, 221, 0.7);
}
/* Secondary actions are bracketed, the way a selectable option reads
on a command line. */
.btn--ghost {
background: transparent;
border-color: var(--line-strong);
color: var(--text);
text-shadow: var(--glow);
box-shadow: none;
}
.btn--ghost::before { content: "[ "; }
.btn--ghost::after { content: " ]"; }
.btn--ghost:hover {
background: transparent;
border-color: var(--text);
color: var(--text-strong);
box-shadow: 0 0 14px rgba(106, 152, 251, 0.18);
}
/* Contextual links take a prompt marker instead of a trailing arrow. */
.textlink {
color: var(--muted);
text-shadow: var(--glow);
border-bottom-color: var(--line);
}
.textlink::after { content: none; }
.textlink::before { content: "> "; color: var(--dim); }
.textlink:hover {
color: var(--text-strong);
border-bottom-color: var(--text);
}
.textlink:hover::before { color: var(--text-strong); }
/* -------------------------------------------------------------------
22.5 HEADER AND NAVIGATION
------------------------------------------------------------------- */
.site-header.is-scrolled {
background: rgba(0, 0, 0, 0.94);
border-bottom-color: var(--line-strong);
backdrop-filter: none; /* a CRT does not frost */
}
.brand__word {
font-variation-settings: normal;
font-stretch: normal;
font-size: 1.05rem;
letter-spacing: 0.24em;
text-shadow: var(--glow);
}
.brand__mark { filter: drop-shadow(0 0 5px rgba(106, 152, 251, 0.5)); }
.nav__link {
color: var(--muted);
text-shadow: var(--glow);
border-bottom: 0;
position: relative;
padding-inline: 0.85rem;
}
/* Bracket the active and hovered entry rather than underlining it. */
.nav__link::before,
.nav__link::after {
position: absolute;
top: 50%;
transform: translateY(-50%);
opacity: 0;
transition: opacity 130ms ease;
color: var(--text-strong);
}
.nav__link::before { content: "["; left: 0; }
.nav__link::after { content: "]"; right: 0; }
.nav__link:hover,
.nav__link[aria-current="page"] { color: var(--text-strong); }
.nav__link:hover::before,
.nav__link:hover::after,
.nav__link[aria-current="page"]::before,
.nav__link[aria-current="page"]::after { opacity: 1; }
.nav-toggle { text-shadow: var(--glow); border-color: var(--line-strong); }
.hero__cue { text-shadow: var(--glow); }
.hero__cue::after { background: linear-gradient(180deg, var(--text), transparent); }
/* -------------------------------------------------------------------
22.6 IMAGERY
Atmospheric and section imagery is rasterised into the phosphor. The
media gallery, the lightbox and creature photography are NOT: those
are the captured-footage feeds and stay full colour, framed by the
terminal rather than converted by it.
------------------------------------------------------------------- */
.plate { filter: var(--phosphor-filter); }
.gallery .plate,
.lightbox .plate,
.creature-entry .plate,
.guide-hero__media .plate { filter: none; }
/* Scanlines inside every plate, converted or not -- the image is on the
same screen either way. */
.plate__vignette {
background:
linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.22) 50%),
radial-gradient(115% 85% at 50% 42%, transparent 42%, rgba(2, 4, 10, 0.78) 100%),
linear-gradient(180deg, rgba(2, 4, 10, 0.34) 0%, transparent 26%);
background-size: 100% 3px, auto, auto;
}
/* Slot markers and trail-cam framing read as terminal overlays. */
.plate__slot {
background: rgba(4, 6, 13, 0.78);
border-color: var(--line);
color: var(--dim);
text-shadow: var(--glow);
}
.plate__slot b { color: var(--muted); }
.plate--cam .plate__cam { border-color: rgba(106, 152, 251, 0.28); }
.plate__cam-id { color: var(--muted); text-shadow: var(--glow); }
.gallery__caption {
background: linear-gradient(180deg, transparent, rgba(4, 6, 13, 0.94));
color: var(--text-strong);
text-shadow: var(--glow);
}
.gallery__play span {
border-color: var(--line-strong);
background: rgba(4, 6, 13, 0.5);
color: var(--text-strong);
}
.gallery__item:hover .gallery__play span {
background: var(--text);
border-color: var(--text);
color: var(--ink);
}
.lightbox { background: rgba(2, 4, 9, 0.97); }
.lightbox__bar { color: var(--muted); text-shadow: var(--glow); }
.lightbox__close,
.lightbox__nav { color: var(--text); text-shadow: var(--glow); border-color: var(--line-strong); }
.lightbox__close:hover,
.lightbox__nav:hover { color: var(--ink); background: var(--text); text-shadow: none; }
/* -------------------------------------------------------------------
22.7 DATA DISPLAY
Tables, spec sheets and protocol lists are the most terminal-native
things on the site. They get a hard frame and a lit header row.
------------------------------------------------------------------- */
.data-table {
border: 1px solid var(--line-strong);
font-size: 0.875rem;
}
.data-table caption {
text-align: left;
padding: 0.75rem 1rem;
border: 1px solid var(--line-strong);
border-bottom: 0;
background: var(--surface);
color: var(--muted);
text-shadow: var(--glow);
}
.data-table thead th {
background: var(--surface-2);
color: var(--text-strong);
padding-inline: 1rem;
text-shadow: var(--glow);
border-bottom-color: var(--line-strong);
}
.data-table th,
.data-table td { padding-inline: 1rem; }
.data-table tbody th {
font-variation-settings: normal;
font-stretch: normal;
font-size: 0.875rem;
letter-spacing: 0.1em;
color: var(--text-strong);
}
.data-table tbody tr:hover td,
.data-table tbody tr:hover th { background: rgba(106, 152, 251, 0.045); }
.spec-sheet { border-top-color: var(--line-strong); }
.spec-sheet > dt {
color: var(--muted);
text-shadow: var(--glow);
}
.spec-sheet > dt::before { content: "> "; color: var(--dim); }
.spec-sheet > dd { color: var(--text); }
.proto-list { border-top-color: var(--line-strong); }
.proto-list li::before { color: var(--amber); text-shadow: var(--glow-amber); }
.creature-entry__meta dt { color: var(--dim); }
.creature-entry__meta dd { color: var(--muted); }
.creature-entry:hover { background: rgba(106, 152, 251, 0.05); }
.creature-entry:hover .creature-entry__name { color: var(--text-strong); }
.roster,
.creature-run,
.contact-grid { background: var(--line); }
/* Six channels and three contacts both divide by three, so fixing the
column count keeps the gap lines from framing an empty cell. */
@media (min-width: 781px) {
.panel .contact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.post-row:hover { background: rgba(106, 152, 251, 0.045); }
.post-row__title {
font-variation-settings: normal;
font-stretch: normal;
font-size: 0.9375rem;
letter-spacing: 0.08em;
}
.post-row:hover .post-row__title { color: var(--text-strong); }
.post-row__go { color: var(--muted); }
/* -------------------------------------------------------------------
22.8 ALERT CHANNEL
Amber and red appear only on restricted material, threat ratings and
in-development notices. If amber shows up anywhere else, it is a bug.
------------------------------------------------------------------- */
.restricted { border-top-color: var(--line-strong); }
.restricted > summary:hover { background: rgba(255, 176, 0, 0.05); }
.restricted__bar { border-left-color: var(--amber); }
.restricted__state,
.restricted__hint { color: var(--amber); text-shadow: var(--glow-amber); }
.restricted__title { color: var(--amber-hot); text-shadow: var(--glow-amber); }
.restricted__note { color: var(--muted); }
.restricted__body {
border-top-color: var(--amber-dim);
background:
linear-gradient(180deg, rgba(255, 176, 0, 0.07) 0%, transparent 420px),
var(--ink);
}
.restricted__stamp {
border-color: var(--amber);
color: var(--amber-hot);
text-shadow: var(--glow-amber);
}
/* Everything inside the gate runs on the amber gun. */
.restricted__body .label { color: var(--amber); text-shadow: var(--glow-amber); }
.restricted__body .label-rule::after {
background-image: repeating-linear-gradient(90deg,
rgba(255, 176, 0, 0.42) 0 5px, transparent 5px 11px);
}
.restricted__body h2,
.restricted__body h3 { color: var(--amber-hot); text-shadow: var(--glow-amber); }
.restricted__body .data-table thead th { color: var(--amber-hot); text-shadow: var(--glow-amber); }
.restricted__body .spec-sheet > dt::before,
.restricted__body .proto-list li::before { color: var(--amber); }
.specimen {
border-left-color: var(--alert);
background: rgba(255, 74, 47, 0.05);
}
.specimen__code { color: var(--alert); text-shadow: 0 0 8px rgba(255, 74, 47, 0.45); }
.threat { text-shadow: 0 0 7px currentColor; }
.threat::before { box-shadow: 0 0 6px currentColor; }
.env__status { color: var(--amber); border-color: rgba(255, 176, 0, 0.5); text-shadow: var(--glow-amber); }
/* -------------------------------------------------------------------
22.9 INPUTS
------------------------------------------------------------------- */
.search { position: relative; }
.search .label { color: var(--muted); }
.search input {
color: var(--text-strong);
border-bottom-color: var(--line-strong);
text-shadow: var(--glow);
background: rgba(106, 152, 251, 0.03);
padding-inline: 0.55rem;
}
.search input::placeholder { color: var(--dim); }
.search input:focus {
border-bottom-color: var(--text);
background: rgba(106, 152, 251, 0.07);
outline: none;
}
.filter {
color: var(--dim);
border-color: var(--line);
text-shadow: var(--glow);
}
.filter:hover { color: var(--text); border-color: var(--line-strong); }
.filter[aria-pressed="true"] {
background: var(--text);
border-color: var(--text);
color: var(--ink);
text-shadow: none;
}
.roster-count,
.roster-empty { color: var(--muted); text-shadow: var(--glow); }
.tabs { border-bottom-color: var(--line-strong); }
.tab { color: var(--dim); text-shadow: var(--glow); }
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] {
color: var(--text-strong);
border-bottom-color: var(--text);
background: rgba(106, 152, 251, 0.06);
}
.tab[aria-selected="true"]::before { content: "["; margin-right: 0.4em; }
.tab[aria-selected="true"]::after { content: "]"; margin-left: 0.4em; }
.contact-cell a { color: var(--text); text-shadow: var(--glow); border-bottom-color: var(--line-strong); }
.contact-cell a:hover { color: var(--text-strong); }
.footer-base { color: var(--dim); }
.prose a { color: var(--text-strong); text-decoration-color: var(--line-strong); }
.prose a:hover { color: var(--amber-hot); text-decoration-color: var(--amber); }
.skip-link { background: var(--text); color: var(--ink); text-shadow: none; }
.draft-banner { background: var(--amber); color: var(--ink); text-shadow: none; }
body.draft-mode [data-draft] { outline-color: rgba(255, 176, 0, 0.7); }
body.draft-mode [data-draft]::after { background: var(--amber); color: var(--ink); }
/* Amber is the alert gun only. These two inherited it from the previous
theme's single-accent model and have to come back to the blue one. */
.news-card:hover .news-card__title { color: var(--text-strong); text-shadow: var(--glow); }
.prose a:hover { color: var(--text-strong); text-decoration-color: var(--text); }
/* .plate--bleed is sized in vw, which counts the vertical scrollbar, so
full-bleed images sit a scrollbar-width wider than the viewport.
overflow-x: clip trims it without creating a scroll container the way
overflow-x: hidden would. */
html { overflow-x: clip; }
/* Monospace runs wide: the three media tabs no longer fit a 375px
viewport, and html { overflow-x: clip } would silently cut the last
one off. Give the strip its own scroll instead. */
@media (max-width: 680px) {
.tabs {
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
flex: 0 0 auto;
padding-inline: 0.9rem;
font-size: 0.66rem;
letter-spacing: 0.14em;
}
}
/* A plain stated note in the public tier. Deliberately NOT amber: this is
Apollo Engineering explaining itself to visitors, not flagging a
restricted record. */
.note {
border-left: 2px solid var(--line-strong);
background: var(--surface);
padding: clamp(1.25rem, 2.5vw, 2rem);
}
/* ---- record labels -------------------------------------------------
On a species record the small labels are the index to the document:
the diet chip and the numbered section rules. Those two take the
amber channel so they read as apparatus rather than as another line
of copy, matching the "In active development" marker on game#modes.
Nothing else does: the note marker, the spec keys and the mass table
caption stay on the house colour, on Don's instruction. Do not add
selectors here without asking.
------------------------------------------------------------------- */
.page-guide .label-rule .label,
.page-guide .guide-hero__facts .label,
.species-detail .label-rule .label,
.species-detail .guide-hero__facts .label {
color: var(--amber);
text-shadow: var(--glow-amber);
}
.note__label {
display: block;
margin-bottom: 0.85rem;
color: var(--muted);
}
.note p { color: var(--text); margin: 0; max-width: 68ch; }
.note p + p { margin-top: 0.9em; }
/* Migrated pages inside a panel run denser than they did standalone.
The species roster is long by nature, so its detail pane scrolls inside
itself; the section strip and the controls stay put, which is the part
that matters on a phone. */
.panel .roster { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.panel .creature-entry__body { padding: 1rem 1rem 1.15rem; }
.panel .creature-entry__meta { font-size: 0.625rem; gap: 0.2rem; margin-bottom: 0.6rem; padding-bottom: 0.6rem; }
.panel .creature-entry__blurb { font-size: 0.8125rem; line-height: 1.5; }
.panel .creature-entry__foot { padding-top: 0.7rem; }
.panel .roster-controls { padding-block: 0.85rem; margin-bottom: 1.25rem; }
/* Contact cells sit inside panels on the Community deck, where vertical
space is the constraint rather than the page length. */
.panel .contact-cell { padding: 1.05rem 1.15rem; }
.panel .contact-cell p { font-size: 0.8125rem; line-height: 1.5; margin-bottom: 0.75rem; }
.panel .contact-cell .label { margin-bottom: 0.5rem; }
/* Long panels get a little breathing room at the foot so the last line
is not flush against the control bar. */
.panel--long .panel__inner { padding-bottom: clamp(2rem, 4vh, 3.5rem); }
/* An inline link on the amber gun. Used where a line of body copy points
at something the reader is expected to go and read -- the Server Guide
from the Modes panel. Rare by design: amber still means "pay attention
to this", it has just stopped meaning "classified". */
.link-alert {
color: var(--amber);
text-shadow: var(--glow-amber);
text-decoration: underline;
text-decoration-color: rgba(255, 176, 0, 0.5);
text-underline-offset: 3px;
transition: color 140ms ease, text-decoration-color 140ms ease;
}
.link-alert:hover {
color: var(--amber-hot);
text-decoration-color: var(--amber-hot);
}
/* Landing banner for a deck panel: headline on the left, the one
dominant action on the right. Used by Community panel 01. */
.panel__banner {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: clamp(1rem, 3vw, 2.5rem);
margin-bottom: clamp(1.5rem, 3.5vh, 2.75rem);
padding-bottom: clamp(1.25rem, 3vh, 2rem);
border-bottom: 1px solid var(--line);
}
.panel__banner h1 { margin: 0; max-width: 14ch; }
.panel__banner .actions { flex: 0 0 auto; }
@media (max-width: 780px) {
.panel__banner {
gap: 1rem;
margin-bottom: 1.1rem;
padding-bottom: 0.9rem;
}
.panel__banner h1 { max-width: none; }
}
/* -------------------------------------------------------------------
SPECIES BROWSER
Master/detail inside a deck panel. The panel fills the viewport and
the two columns scroll independently, so the Species section obeys
the one-screen rule that the card roster could never meet.
------------------------------------------------------------------- */
.deck.is-enhanced .panel--browser { overflow: hidden; }
.deck.is-enhanced .panel--browser > .panel__inner {
margin-block: 0;
height: 100%;
display: flex;
flex-direction: column;
min-height: 0;
}
.species-head { flex: 0 0 auto; }
.species-head__controls {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1.5rem;
padding-block: 0.85rem;
border-block: 1px solid var(--line);
margin-bottom: clamp(0.85rem, 2vh, 1.5rem);
}
.species-head__about { margin-left: auto; }
.species-browser {
flex: 1 1 auto;
min-height: 0;
display: grid;
/* The list column is exactly as wide as the longest species name. */
grid-template-columns: max-content minmax(0, 1fr);
border: 1px solid var(--line);
}
.species-list {
overflow-y: auto;
border-right: 1px solid var(--line);
background: var(--surface);
}
.species-list__item {
display: block;
width: 100%;
text-align: left;
padding: 0.5rem 1.5rem 0.5rem 1rem;
font-family: var(--font-mono);
font-size: 0.8125rem;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
color: var(--muted);
text-shadow: var(--glow);
border-bottom: 1px solid var(--line);
transition: color 120ms ease, background 120ms ease;
}
.species-list__item:hover { color: var(--text-strong); background: rgba(106, 152, 251, 0.07); }
.species-list__item[aria-selected="true"] {
color: var(--ink);
background: var(--text);
text-shadow: none;
}
.species-list__empty {
padding: 1rem;
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--dim);
white-space: nowrap;
}
.species-detail {
overflow-y: auto;
padding: clamp(1rem, 2.4vw, 2rem);
}
.species-detail:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
.species-detail__head { margin-bottom: clamp(1rem, 2.5vh, 1.75rem); }
.species-detail__head h3 { margin-bottom: 0.6rem; }
.species-detail__head .lede { margin-bottom: 1rem; }
.species-detail__section + .species-detail__section { margin-top: clamp(1.25rem, 3vh, 2rem); }
.species-detail__section .label-rule { margin-bottom: 0.85rem; }
.species-detail__section .spec-sheet { margin-top: 1rem; }
.species-detail__section .data-table { font-size: 0.8125rem; }
.species-detail__foot {
margin-top: clamp(1.25rem, 3vh, 2rem);
padding-top: 1rem;
border-top: 1px solid var(--line);
}
@media (max-width: 780px) {
/* Side by side leaves nothing for the record on a phone, so the list
becomes a capped, scrollable strip above it. */
.species-browser {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: minmax(0, 0.38fr) minmax(0, 1fr);
}
.species-list {
border-right: 0;
border-bottom: 1px solid var(--line-strong);
}
.species-list__item { padding: 0.45rem 0.85rem; font-size: 0.78rem; }
.species-detail { padding: 0.9rem; }
/* Reclaim the header. The section strip above already reads
"SPECIES", so the panel title is saying it twice, and the filter
row wraps to three lines at this width unless it scrolls. */
.panel--browser .panel__title { display: none; }
.species-head__controls {
gap: 0.6rem;
padding-block: 0.5rem;
margin-bottom: 0.6rem;
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
}
.species-head__controls::-webkit-scrollbar { display: none; }
.species-head__controls > * { flex: 0 0 auto; }
.species-head__controls .search { min-width: 8.5rem; }
.species-head__about { margin-left: 0; }
.species-browser { grid-template-rows: minmax(120px, 0.42fr) minmax(0, 1fr); }
}
/* Deck panels keep their two columns down to the phone breakpoint.
The site-wide rule collapses .panel__cols at 1080px, which is right
for a scrolling page but wrong inside a panel: stacking puts a
full-width image above the copy and pushes the section off a laptop
screen. Higher specificity, so it wins over the 1080px rule. */
@media (min-width: 781px) {
.panel .panel__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.panel .panel__cols--media { grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); }
.panel .panel__cols--media .panel__media { display: block; }
}
/* "About this list" reads as selected while its view is showing. */
.species-head__about[aria-current="true"] {
color: var(--text-strong);
border-bottom-color: var(--text);
}
/* -------------------------------------------------------------------
GALLERY IN A PANEL
The asymmetric grid the design document asks for, sized to the panel
instead of to the page. Implicit rows at 1fr split whatever height is
left, so the whole gallery lands on one screen however many items a
category holds -- and the spans that make it asymmetric still work,
because a "span 3" item just takes three of those shares.
------------------------------------------------------------------- */
.gallery--panel {
flex: 1 1 auto;
min-height: 0;
/* Rows are sized against the viewport WIDTH, not divided out of the
remaining height. Splitting the height with 1fr sounds right and
looks wrong: nine items with three-row spans means ten rows, so
each tile ends up 840x80 -- a letterbox sliver, not a photograph.
Proportional rows keep the mosaic in shape and the gallery takes
its own scroll instead.
Nine asymmetric tiles will not fit ~600px of panel at a sane
aspect no matter how the rows are cut; the choice is a gallery
that scrolls or a gallery you cannot read, and this is the first
one. Videos (five tiles) very nearly fits as it is. */
grid-auto-rows: clamp(72px, 7.4vw, 126px);
overflow-y: auto;
gap: clamp(0.4rem, 0.8vw, 0.75rem);
}
/* The banner on a media panel is a title with a note beside it, not a
headline with a call to action, so it runs tighter. */
.panel__banner--tight {
align-items: baseline;
margin-bottom: clamp(0.75rem, 2vh, 1.25rem);
padding-bottom: clamp(0.6rem, 1.5vh, 1rem);
}
.media-note { max-width: 46ch; margin: 0; font-size: 0.8125rem; }
.media-note a { color: var(--text-strong); text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.media-note a:hover { color: var(--amber-hot); }
@media (max-width: 780px) {
.panel__banner--tight { display: block; }
.media-note { margin-top: 0.5rem; font-size: 0.75rem; }
/* Six columns of thumbnail is unreadable on a phone. Two columns at a
fixed row height, and the gallery takes its own scroll rather than
shrinking nine tiles to 65px to force them onto one screen. A
gallery that scrolls is normal; a gallery you cannot see is not. */
.gallery--panel {
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 88px;
overflow-y: auto;
}
.gallery--panel .gallery__item[data-size="hero"] { grid-column: span 2; grid-row: span 2; }
.gallery--panel .gallery__item[data-size="wide"] { grid-column: span 2; grid-row: span 1; }
.gallery--panel .gallery__item[data-size="tall"] { grid-column: span 1; grid-row: span 2; }
.gallery--panel .gallery__item[data-size="box"],
.gallery--panel .gallery__item[data-size="small"] { grid-column: span 1; grid-row: span 1; }
}
/* -------------------------------------------------------------------
22.10 MOTION
The tube effects are decoration. Anyone who has asked for less motion
gets a flat, static screen with the palette intact.
------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
html::before { display: none; }
.hero__headline::after,
.page-head h1::after,
.guide-hero__inner h1::after { animation: none; }
}
@media print {
html::before, body::before, body::after { display: none !important; }
}
/* ===================================================================
23 DECK
-------------------------------------------------------------------
One screen, one section. Used on the Game page in place of a long
scroll, so the whole thing works on a phone or a tablet without the
reader losing their place.
Progressive enhancement: without JavaScript the panels render as a
normal stacked scrolling page and none of this applies. site.js adds
.is-enhanced, and only then do the panels stack on top of each other
and the controls appear.
=================================================================== */
.deck { --header-h: 68px; }
.deck.is-enhanced {
height: 100svh;
padding-top: var(--header-h);
display: flex;
flex-direction: column;
overflow: hidden;
}
/* The deck occupies the first screen exactly; the footer sits below it,
the same footer every other page carries. The page therefore scrolls
-- but only to reach the footer, never to read a section. */
body.page-deck.deck-enhanced { overflow-x: clip; }
body.deck-enhanced .site-footer { border-top: 1px solid var(--line-strong); }
/* The header sits over the deck and never gets a scroll event to react
to, so it is pinned to its solid state from the start. */
body.page-deck .site-header {
background: rgba(0, 0, 0, 0.94);
border-bottom-color: var(--line-strong);
}
/* ...and it stops being fixed once the deck is running. The deck is one
screen and the footer sits below it, so scrolling down means leaving
the deck behind. A fixed header would stay put and cover the section
strip as the deck slid under it. Absolute means header, deck and
footer all move together, which is what a reader expects. */
body.page-deck.deck-enhanced .site-header { position: absolute; }
/* ---- section strip ------------------------------------------------- */
/* The section bar: tabs on the left, "Follow us" pinned to the right.
Only the strip scrolls, so the social block stays put on a narrow
screen instead of sliding away with the tabs. */
.deck__bar {
flex: 0 0 auto;
display: flex;
align-items: stretch;
border-bottom: 1px solid var(--line);
}
.deck__strip {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: stretch;
gap: 0;
overflow-x: auto;
scrollbar-width: none;
}
/* The block is shorter than a tab, so it never sets the bar's height:
the tabs do, exactly as they did before this was added. */
.follow {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 0.55rem;
padding-inline: clamp(0.75rem, 1.6vw, 1.35rem);
border-left: 1px solid var(--line);
}
.follow__label {
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--dim);
white-space: nowrap;
}
.follow__link {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--dim);
transition: color 150ms ease;
}
.follow__link svg { display: block; width: 15px; height: 15px; }
.follow__link:hover,
.follow__link:focus-visible { color: var(--text-strong); }
/* On a page that is not a deck the bar is written into the markup and
pinned directly under the fixed header. The header is given its solid
treatment from the start there, so the two read as one block of chrome
rather than a floating strip under a transparent bar. */
.section-bar {
position: fixed;
top: var(--header-h, 67px);
left: 0;
right: 0;
z-index: 90;
background: rgba(0, 0, 0, 0.94);
}
body.has-section-bar .site-header {
background: rgba(0, 0, 0, 0.94);
border-bottom-color: var(--line-strong);
}
.section-bar .deck__tab { text-decoration: none; }
/* The bar eats the clearance the page head was relying on, so give it
back the bar's own height. */
body.has-section-bar .page-head { padding-block-start: calc(clamp(8rem, 16vh, 12rem) + 3rem); }
/* Anchor targets have to clear the header and the bar together. */
.section--anchored { scroll-margin-top: calc(var(--header-h, 67px) + 4.5rem); }
/* Phone: the label goes, the icons stay. */
@media (max-width: 640px) {
.follow { gap: 0.7rem; padding-inline: 0.75rem; }
.follow__label { display: none; }
}
.deck__strip::-webkit-scrollbar { display: none; }
.deck__tab {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.85rem clamp(0.75rem, 1.6vw, 1.35rem);
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--dim);
text-shadow: var(--glow);
border-right: 1px solid var(--line);
white-space: nowrap;
transition: color 140ms ease, background 140ms ease;
}
.deck__tab:hover { color: var(--text); }
.deck__tab[aria-selected="true"] {
color: var(--ink);
background: var(--text);
text-shadow: none;
}
.deck__tab-index { opacity: 0.7; }
/* ---- panels -------------------------------------------------------- */
.deck__viewport {
position: relative;
flex: 1 1 auto;
min-height: 0; /* lets the flex child actually shrink */
}
.deck.is-enhanced .panel {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
/* NOT align-items/justify-content: center. A flex item centred in a
scrollable box gets its overflowing top clipped and unreachable.
An auto margin centres it when there is room and yields when there
is not, which is what the long panels need. */
justify-content: flex-start;
/* Contained scroll. At tablet width and up everything fits; on a
small phone the longer panels can still be read without the page
behind them moving or the controls leaving the screen. */
overflow-y: auto;
opacity: 0;
visibility: hidden;
transform: translateX(var(--enter, 0));
transition: opacity 260ms ease, transform 320ms cubic-bezier(0.2, 0.7, 0.3, 1),
visibility 0s linear 320ms;
}
.deck.is-enhanced .panel.is-active {
opacity: 1;
visibility: visible;
transform: none;
transition: opacity 260ms ease, transform 320ms cubic-bezier(0.2, 0.7, 0.3, 1),
visibility 0s;
}
.deck.is-enhanced .panel > .panel__inner { margin-block: auto; }
.panel__inner {
width: 100%;
max-width: var(--max);
margin-inline: auto;
padding: clamp(1.25rem, 3vh, 2.5rem) var(--gutter);
}
.panel__index { display: block; margin-bottom: clamp(0.75rem, 2vh, 1.25rem); }
.panel__title { margin-bottom: clamp(0.7rem, 1.6vh, 1.2rem); }
/* Panels run tighter than the scrolling pages: the type scale steps down
one notch so a section lands inside a laptop viewport. */
.panel .d1 { font-size: clamp(1.5rem, 3.6vw, 3rem); }
.panel .d2 { font-size: clamp(1.25rem, 2.6vw, 2rem); }
.panel .d3 { font-size: clamp(1rem, 1.6vw, 1.35rem); }
.panel .lede { font-size: clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem); }
.panel p { font-size: clamp(0.8125rem, 0.8rem + 0.15vw, 0.9rem); line-height: 1.65; margin-bottom: 0.85em; }
/* Two-column body used by most panels. */
.panel__cols {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(1.25rem, 3vw, 3.5rem);
align-items: start;
}
/* Copy gets the larger share: the image can shrink, the words cannot. */
.panel__cols--media { grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); align-items: center; }
/* Three pillars, side by side rather than stacked. */
.pillars {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(1rem, 2.2vw, 2.25rem);
}
.pillar__media { margin-bottom: 0.9rem; }
.pillar__index { display: block; margin-bottom: 0.55rem; }
.pillar h3 { margin-bottom: 0.6rem; }
/* Compact protocol list for the systems panel. */
.panel .proto-list li { padding: 0.5rem 0; font-size: 0.8125rem; }
.panel .proto-list { columns: 2; column-gap: clamp(1.5rem, 3vw, 3rem); }
.panel .proto-list li { break-inside: avoid; }
.panel .prose ul { font-size: 0.8125rem; gap: 0.4rem; }
.panel__actions { margin-top: clamp(1.25rem, 3vh, 2rem); gap: clamp(1.25rem, 2.5vw, 2rem); }
.panel__subhead { margin-bottom: 0.9rem; }
.panel__subhead--spaced { margin-top: 1.5rem; }
.panel .stage-note { padding-block: 0.9rem; }
/* Modes panel: one bordered column per mode, matched height so the two
read as a pair rather than as a long entry beside a short one. */
.panel__cols--modes { align-items: stretch; }
.mode {
border: 1px solid var(--line);
padding: clamp(1rem, 2.2vw, 1.75rem);
}
.mode__title { margin-bottom: 0.9rem; }
/* Heading and status marker share a line, so the marker reads as a
property of the mode rather than as a line of its own. */
.mode__head {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem 0.85rem;
margin-bottom: 0.9rem;
}
.mode__head .mode__title { margin-bottom: 0; }
/* The marker is taller than the heading and carries its own bottom
margin, so left alone it sets the row height and drops the Sandbox
heading and copy below Survival's. Negative margins take it out of
the height calculation: the row is the heading line box, the marker
is centred on it, and the two columns start level. */
.mode__head .env__status { margin: -0.3rem 0; }
.mode p:last-child { margin-bottom: 0; }
/* ---- controls ------------------------------------------------------ */
.deck__controls {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.7rem var(--gutter);
border-top: 1px solid var(--line);
background: var(--surface);
}
.deck__btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 1.1rem;
border: 1px solid var(--line-strong);
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text);
text-shadow: var(--glow);
transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}
.deck__btn:hover { color: var(--ink); background: var(--text); text-shadow: none; }
.deck__count {
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: 0.2em;
color: var(--muted);
text-shadow: var(--glow);
white-space: nowrap;
}
.deck__count b { color: var(--text-strong); font-weight: 400; }
/* ---- responsive ---------------------------------------------------- */
@media (max-width: 1080px) {
.pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.pillar__media { display: none; } /* copy first when space is tight */
}
@media (max-width: 780px) {
.deck.is-enhanced { --header-h: 62px; }
.panel__cols,
.panel__cols--media { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.panel__cols--media .panel__media { display: none; }
.pillars { grid-template-columns: minmax(0, 1fr); gap: 0.85rem; }
.panel .proto-list { columns: 1; }
.panel .proto-list li { grid-template-columns: 2.5rem minmax(0, 1fr); padding: 0.4rem 0; }
.deck__tab { padding-inline: 0.8rem; font-size: 0.625rem; }
/* The strip already scrolls; hide the labels so the numbers alone
stay readable at phone width. */
.deck__tab-name { display: none; }
.deck__tab[aria-selected="true"] .deck__tab-name { display: inline; }
.deck__btn { padding: 0.55rem 0.85rem; font-size: 0.625rem; letter-spacing: 0.12em; }
/* Phone: the panels have to earn their place inside ~625px of usable
height, so the type steps down again and the vertical rhythm
tightens. Measured against the longest panel, not guessed. */
.panel__inner { padding: clamp(0.85rem, 1.8vh, 1.3rem) var(--gutter); }
.panel .d1 { font-size: clamp(1.3rem, 6.4vw, 1.85rem); }
.panel .d2 { font-size: clamp(1.1rem, 5vw, 1.45rem); }
.panel .d3 { font-size: 0.95rem; }
.panel .lede { font-size: 0.8375rem; line-height: 1.55; }
.panel p { font-size: 0.775rem; line-height: 1.58; margin-bottom: 0.55em; }
.panel .prose ul { font-size: 0.775rem; gap: 0.3rem; }
.panel__index { margin-bottom: 0.45rem; }
.panel__title { margin-bottom: 0.6rem; }
.pillar h3 { margin-bottom: 0.3rem; }
.pillar__index { margin-bottom: 0.25rem; }
.panel .stage-note { padding-block: 0.55rem; }
.panel .proto-list li { padding: 0.32rem 0; font-size: 0.775rem; }
/* Last of the height budget: the strip and control bars give back
what the densest panel still needs. */
.deck__tab { padding-block: 0.55rem; }
.deck__controls { padding-block: 0.5rem; }
.panel p { line-height: 1.5; margin-bottom: 0.45em; }
.panel .d3 { font-size: 0.9rem; }
.pillars { gap: 0.7rem; }
.pillar__index { display: none; }
.panel__actions { margin-top: 0.7rem; }
.panel__subhead { margin-bottom: 0.5rem; }
.panel .prose ul { gap: 0.22rem; line-height: 1.45; }
/* Six social channels will not stack one to a row on a phone, so the
grid goes to two columns there. */
.panel .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.panel .contact-cell { padding: 0.75rem 0.9rem; }
.panel .contact-cell p { font-size: 0.75rem; margin-bottom: 0.5rem; }
.panel .contact-cell .label { margin-bottom: 0.35rem; }
.panel .contact-cell a { font-size: 0.78rem; }
.panel .prose h2 { font-size: 0.9rem; }
.panel__subhead--spaced { margin-top: 0.85rem; }
.panel .prose li { line-height: 1.4; }
}
/* The modes are two short text columns with no image to squeeze, so they
stay side by side through tablet width and only stack on a phone. */
@media (min-width: 561px) and (max-width: 780px) {
.panel__cols--modes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
.deck.is-enhanced .panel { transition: opacity 1ms linear, visibility 0s; transform: none; }
}