/* platformgate.css - THE PLATFORM CHOOSER and its header switcher.
=========================================================================
A fleet feature, OFF by default, switched on by one manifest block
(`web.platformgate`). See assemble.py::platformgate_config for the switch
and frontend/js/platformgate.js for the runtime half.
WHY IT EXISTS (New Age Dinos, 2026-08-24): one domain now carries TWO
servers - the Legacy island the site was built for and a new Evrima
island. A visitor's first question is no longer "what is this" but "which
one am I here for", and a site that answers that with a nav entry buried
among nine others has not answered it.
DIRECTION CONTRACT
---------------------------------------------------------------------------
THESIS: the choice is the WHOLE SCREEN, once, and then it is a pill.
Nothing else is on the page while it is up, because a chooser competing
with a hero is a chooser people scroll past.
IT IS AN INSTRUMENT, NOT A SPLASH (rebuilt 2026-08-24 on the owner's
"make it look more professional and advanced"). The first build was two
words on flat charcoal with a hairline between them and a small outlined
ENTER - honest, and unfinished-looking. What carries "professional" is
not more colour, it is EVIDENCE OF A SYSTEM: a registration frame on the
stage, an index numeral per plate, one tracked micro-label, a seam with
real light in it, and motion that arrives and leaves on purpose. Every
one of those is house furniture this site already owns (terminal.css's
tick marks and tracking), spent here at full size.
THE SEAM IS DIAGONAL, and that is the one structural move. Two rectangles
side by side read as a table of options; a diagonal cut reads as one
surface torn in half, which is what two eras of one game are. The cut
is drawn with `clip-path` on each half, so the two panels genuinely
interlock rather than being two boxes with a slanted graphic between.
★ THE SEAM IS NOW LIT, AND IT IS LIT PER HALF. A single seam element
centred in the grid would desync the moment hover moves the columns -
the cut belongs to the panels, so each half draws its own narrow
parallelogram along its OWN cut with the identical run. They meet on one
line at every width and at every hover state by construction.
HOVER WIDENS THE PANEL rather than lighting it: the grid columns move,
so the panel the pointer is on takes territory from the other one. The
accent glow rides along, but the SIZE is the signal - it survives a
colourblind reader and a dimmed screen.
ONE WORD AND ONE LINE. The display face carries the era's name in caps;
underneath it is a single short sentence and nothing else. Design copy
is short (house law) - a paragraph here would be an essay standing
between a player and the server they came for. The index numeral is a
COUNTER, not copy: no owner types it and no translator has to.
THE ART IS A SILHOUETTE, not a photograph: it is `--art-*` owner data
drawn at low contrast behind the word, so the word always wins. An owner
who supplies none gets an empty span, and the plate is designed to be
complete without it - the frame, the numeral and the seam are the
picture.
NO-JS: `platformgate.js` is what removes the gate, so with scripting off
the gate stays up and IS the page - two big links to the two platforms,
which is exactly the fallback the design asks for. Nothing here hides
content behind a reveal that may never run. ★ Every ARRIVAL animation is
keyed on `html.pgate-open`, which only the script sets, so a reader with
no scripting gets the finished picture rather than a plate parked at
opacity 0 waiting for a frame that never comes.
THE PRICE OF THE LAYER: tokens only (this sheet invents no colour and is
scanned for it by tests/frontend/run_all.py::TOKEN_SHEETS), no !important,
and every selector is under `.pgate` / `.pswitch` so a site without the
feature is unaffected by the sheet even if it somehow shipped.
========================================================================= */
/* ---- the stage --------------------------------------------------------- */
/* Fixed rather than absolute: the document behind it may be any height, and
a chooser that scrolls off is a chooser that can be scrolled past. */
.pgate {
/* THE CUT'S RUN, IN ONE PLACE. Both halves and both seam bars read it, and
the phone breakpoint overwrites it once - so the geometry can never
disagree with itself the way four hand-typed 3.2vw would. */
--pg-run: 3.2vw;
--pg-seam: 3px;
position: fixed;
inset: 0;
z-index: 9000;
display: grid;
grid-template-rows: auto 1fr auto;
background:
radial-gradient(120% 78% at 50% 0%, var(--tm-lift), transparent 62%),
radial-gradient(90% 60% at 50% 118%, var(--tm-lift-soft), transparent 70%),
var(--bg-deep);
overscroll-behavior: contain;
transition: opacity .34s ease;
}
/* THE VIGNETTE. One radial, no edges in it, no repeat: the house's SECOND
ruling on this site's ground was that it carries no repeating geometry at
all (terminal.css section 2, the owner's "it looks horrible" twice), and
the chooser is a full-viewport ground like any other. So the stage is lit,
never ruled - the measured marks live on the PLATES, where they are
instrumentation on an object rather than wallpaper. */
.pgate::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 3;
background: radial-gradient(128% 88% at 50% 46%,
transparent 42%, var(--veil-mid) 100%);
}
/* The document does not scroll while the choice is open. Set by the script
on , so it is impossible for the class to outlive the gate. */
html.pgate-open,
html.pgate-open body {
overflow: hidden;
}
.pgate-head {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: clamp(20px, 4vh, 44px) var(--gut) 18px;
text-align: center;
z-index: 2;
}
.pgate-mark {
width: clamp(52px, 8vw, 78px);
height: auto;
}
.pgate-title {
font-family: var(--font-display);
text-transform: uppercase;
letter-spacing: var(--tm-track);
font-size: var(--tm-h-sec);
color: var(--fg);
margin: 0;
}
.pgate-sub {
font-family: var(--font-ui);
font-size: var(--fs-1);
color: var(--fg-mute);
margin: 0;
letter-spacing: var(--tm-track);
text-transform: uppercase;
}
/* THE RULE UNDER THE LOCKUP. An accent-lit centre falling away to nothing at
both ends - one gradient, no repeat. A first draft ruled the house's tick
pitch across it and it read as a SCRATCHED line rather than a measured
one: at this width the ticks are sub-pixel and the browser dithers them
into noise. The mark that says "drawn" is the clean falloff. */
.pgate-head::after {
content: "";
width: min(460px, 66vw);
height: 2px;
margin-top: 6px;
background: linear-gradient(90deg,
transparent, var(--tm-hot) 34%, var(--accent-hi) 50%,
var(--tm-hot) 66%, transparent);
}
/* ---- the two halves ----------------------------------------------------- */
/* The grid columns ARE the hover feedback. 1fr/1fr at rest; the hovered
column takes 1.14fr and the transition carries both. `min-height: 0` so a
short viewport shrinks the panels instead of overflowing the fixed host. */
.pgate-halves {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 0;
/* The numeral on each plate is a COUNTER: nothing in the markup, nothing
for an owner to type and nothing for a catalog to translate. */
counter-reset: pgate;
transition: grid-template-columns .28s ease;
}
.pgate-halves:has(.pgate-half:first-child:hover),
.pgate-halves:has(.pgate-half:first-child:focus-visible) {
grid-template-columns: 1.14fr .86fr;
}
.pgate-halves:has(.pgate-half:last-child:hover),
.pgate-halves:has(.pgate-half:last-child:focus-visible) {
grid-template-columns: .86fr 1.14fr;
}
.pgate-half {
position: relative;
display: grid;
place-content: center;
gap: 10px;
padding: clamp(18px, 5vw, 60px);
text-align: center;
text-decoration: none;
color: var(--fg);
border: 0;
counter-increment: pgate;
/* A FACE, NOT A FILL. The plate is lit from its own top edge and sinks to
the ground, which is the same material every panel on this site is made
of - and the grain is the house's, not a second texture invented here.
★ THE FIRST PASS PUT `--bg` AT THE FOOT AND THE PLATE VANISHED INTO THE
STAGE: `--bg` and `--bg-deep` are four points apart on this owner, so a
face that ran down to the ground colour was a face with no bottom edge.
It sinks to `--surface` instead and the SEPARATION from the stage is the
top light, which is what makes two plates read as objects standing on a
ground rather than as two regions of it. */
background:
radial-gradient(112% 62% at 50% 0%, var(--tm-lift), transparent 60%),
var(--grain),
linear-gradient(178deg, var(--surface-3), var(--surface-2) 46%,
var(--surface));
cursor: pointer;
overflow: hidden;
transition: background .28s ease, box-shadow .28s ease,
transform .3s cubic-bezier(.4, 0, .2, 1), opacity .3s ease;
}
/* THE SEAM. The left half gives up its right edge, the right half gives up
its left one, and the two cuts are complements - so the halves meet on one
line with no gap and no overlap at any width. --pg-run is the run of the
slant; a fixed pixel run would be a dramatic diagonal on a phone and a
hairline on a desktop. */
.pgate-half:first-child {
clip-path: polygon(0 0, 100% 0, calc(100% - var(--pg-run)) 100%, 0 100%);
}
.pgate-half:last-child {
clip-path: polygon(var(--pg-run) 0, 100% 0, 100% 100%, 0 100%);
margin-left: calc(var(--pg-run) * -1);
}
/* THE LIGHT IN THE CUT. A 2px parallelogram that follows each half's own
slant exactly - same run, same direction - so the two lit edges land on
one line however the columns are sized. The moving highlight is a second
background layer travelling down the bar; it is a background-position
animation on a 2px-wide strip, which costs nothing and is the detail that
reads as a powered instrument rather than a printed one. */
.pgate-half::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 2;
background:
linear-gradient(180deg,
transparent 0%,
var(--tm-hot) 18%,
var(--accent-hi) 50%,
var(--tm-hot) 82%,
transparent 100%),
linear-gradient(180deg, var(--tm-hot), var(--tm-hot));
background-size: 100% 46%, 100% 100%;
background-position: 0 -60%, 0 0;
background-repeat: no-repeat, no-repeat;
opacity: .9;
}
.pgate-half:first-child::after {
clip-path: polygon(
calc(100% - var(--pg-seam)) 0,
100% 0,
calc(100% - var(--pg-run)) 100%,
calc(100% - var(--pg-run) - var(--pg-seam)) 100%);
}
.pgate-half:last-child::after {
clip-path: polygon(
var(--pg-run) 0,
calc(var(--pg-run) + var(--pg-seam)) 0,
var(--pg-seam) 100%,
0 100%);
}
.pgate-half:hover,
.pgate-half:focus-visible {
background:
radial-gradient(112% 62% at 50% 0%, var(--tm-warm), transparent 62%),
var(--grain),
linear-gradient(178deg, var(--surface-3), var(--surface-2) 46%,
var(--surface));
box-shadow: inset 0 0 0 1px var(--tm-hot),
inset 0 -120px 160px -90px var(--tm-warm);
outline: none;
}
/* ★ A HOVER RULE THAT SETS `outline: none` AND SHARES ITS SELECTOR WITH
:focus-visible TAKES THE KEYBOARD READER'S ONLY MARKER AWAY. The panels
are the two controls on this screen; a reader arriving on Tab has to be
able to see which one they are on. Restated as its own rule AFTER the
shared one so it wins, and drawn as an inset ring because the plate is
clipped - an outline outside a clip-path is invisible. */
.pgate-half:focus-visible {
box-shadow: inset 0 0 0 var(--tm-tick-w) var(--accent-hi),
inset 0 0 0 4px var(--tm-warm),
inset 0 -120px 160px -90px var(--tm-warm);
}
/* THE INDEX NUMERAL. A GHOST FIGURE BEHIND THE WORD, not a chip in a corner.
The first pass drew it as a bordered pill pinned to each plate's outer
corner and the two of them read as debris - two small dark boxes at the
far edges of a mostly empty screen, which is the opposite of the ask. Set
at display size behind the era's name it does the job a plate number does
on real equipment: it says this is one of a numbered set, and it fills the
upper half of the plate that was empty.
It is a COUNTER, so no owner types it, no catalog translates it, and it
cannot disagree with the order the manifest declares. */
.pgate-half::before {
content: counter(pgate, decimal-leading-zero);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -152%);
font-family: var(--font-display);
font-size: clamp(96px, 19vw, 250px);
line-height: .78;
letter-spacing: -.02em;
color: var(--fg);
opacity: .045;
pointer-events: none;
transition: opacity .32s ease, color .32s ease;
z-index: 0;
}
.pgate-half:hover::before,
.pgate-half:focus-visible::before {
color: var(--accent-hi);
opacity: .13;
}
/* THE PLATE'S OWN BRACKETS. Two registration marks on each panel's OUTER
corners - never the seam corners, where the diagonal would cut them in
half. Drawn on `.pgate-art`, which is always in the markup (an owner with
no silhouette ships it empty), so the frame does not depend on artwork
this owner may never supply. */
.pgate-art::before,
.pgate-art::after {
content: "";
position: absolute;
width: calc(var(--tm-tick) * 2.4);
height: calc(var(--tm-tick) * 2.4);
border: 0 solid var(--tm-hair);
transition: border-color .28s ease;
}
.pgate-art::before {
top: clamp(14px, 3vh, 32px);
border-top-width: var(--tm-tick-w);
}
.pgate-art::after {
bottom: clamp(14px, 3vh, 32px);
border-bottom-width: var(--tm-tick-w);
}
.pgate-half:first-child .pgate-art::before,
.pgate-half:first-child .pgate-art::after {
left: clamp(14px, 3vw, 40px);
border-left-width: var(--tm-tick-w);
}
.pgate-half:last-child .pgate-art::before,
.pgate-half:last-child .pgate-art::after {
right: clamp(14px, 3vw, 40px);
border-right-width: var(--tm-tick-w);
}
.pgate-half:hover .pgate-art::before,
.pgate-half:hover .pgate-art::after,
.pgate-half:focus-visible .pgate-art::before,
.pgate-half:focus-visible .pgate-art::after {
border-color: var(--tm-hot);
}
/* The silhouette. A REAL rather than a background on a token, for two
reasons that both bite: a background-image needs the URL in an inline
style attribute (one more thing for a content policy to argue with), and
an can be lazy, sized, and skipped by a browser that decides not to
fetch it - a decorative picture must never hold up the word behind it.
An owner who supplies no art ships an empty span, which is correct rather
than broken: the word and the line are the content. */
.pgate-art {
position: absolute;
inset: 0;
display: grid;
place-items: center;
pointer-events: none;
}
.pgate-art img {
width: min(62%, 380px);
height: auto;
margin-top: 12%;
opacity: .17;
filter: grayscale(1) contrast(1.4);
transition: opacity .28s ease, filter .28s ease, transform .5s ease;
}
.pgate-half:hover .pgate-art img,
.pgate-half:focus-visible .pgate-art img {
opacity: .3;
filter: grayscale(0) contrast(1.1);
transform: scale(1.04);
}
.pgate-word {
position: relative;
display: block;
font-family: var(--font-display);
text-transform: uppercase;
font-size: clamp(38px, 7vw, 96px);
line-height: .94;
letter-spacing: .01em;
color: var(--fg);
margin: 0;
/* CUT INTO THE PLATE rather than sitting on it: a lit top edge and a sunk
bottom one, the same two-sided light the panels are made with. */
text-shadow: 0 var(--tm-tick-w) 0 var(--edge-sink),
0 calc(var(--tm-tick-w) * -1) 0 var(--edge-top);
transition: color .28s ease, text-shadow .28s ease;
}
/* THE RULE UNDER THE NAME. The one piece of structure between the word and
the sentence, so the stack reads as a composed block rather than three
things that happen to be centred. It WIDENS on hover, which makes the
panel's own accent travel with the pointer at a size the eye reads before
it reads any colour. */
.pgate-word::after {
content: "";
display: block;
width: 58px;
height: 2px;
margin: 16px auto 2px;
background: var(--rule-accent);
opacity: .55;
transition: width .3s cubic-bezier(.4, 0, .2, 1), opacity .3s ease;
}
.pgate-half:hover .pgate-word::after,
.pgate-half:focus-visible .pgate-word::after {
width: 128px;
opacity: 1;
}
.pgate-half:hover .pgate-word,
.pgate-half:focus-visible .pgate-word {
color: var(--accent-hi);
text-shadow: 0 var(--tm-tick-w) 0 var(--edge-sink),
0 0 42px var(--tm-warm);
}
.pgate-line {
position: relative;
font-family: var(--font-ui);
font-size: var(--fs-2);
color: var(--fg-dim);
margin: 0;
}
/* THE CALL. An outlined chip at rest that FILLS on hover, with an arrow that
travels - so the panel says where the click goes before the click happens.
★ NO RESTING `background`. A rule that sets a background AND a border is
describing a SURFACE, and test_house_look.py::EveryCardLikeSurfaceIsRegistered
refuses a page sheet that owns one without naming it in terminal.css's
surface register. This is a call to action, not a record, so it must not be
in that list - and the way to stay out of it is to not draw a plate. The
hover state fills it, and that selector carries `.pgate-half`, which IS
registered. */
.pgate-go {
position: relative;
justify-self: center;
display: inline-flex;
align-items: center;
gap: 12px;
margin-top: 20px;
padding: 13px 30px;
border: var(--tm-tick-w) solid var(--tm-hot);
border-radius: var(--r-pill);
font-family: var(--font-ui);
font-size: var(--fs-1);
letter-spacing: var(--tm-track);
text-transform: uppercase;
color: var(--accent);
overflow: hidden;
transition: color .24s ease, background .24s ease, border-color .24s ease,
box-shadow .24s ease;
}
/* The arrow. A glyph rather than an SVG because the whole mark is one
character and an inline