/* ============================================================================
mr-design.css - the MapRaiders design system. One file, no JavaScript.
Owner A3. Read by A3 (web/, battle/web/) and by A7 (the static pages under
docs/). It is linked, never copied: a copy drifts within a week and then the
visitor feels he changed companies on the way from the landing page into the
game.
Served from web/public/, which Vite copies verbatim into dist/:
https://mapraiders.com/play/mr-design.css
A0 has been asked for an nginx alias so the same file also answers at
https://mapraiders.com/mr-design.css
Until that exists, link the /play/ path. Same file either way.
WHY EVERY NAME STARTS WITH --mr-
Three stylesheets already meet on one page and two of them own short names:
art/template/card.css sets --ink, --ground, --accent and --hair on :root, and
web/src/index.css sets --bg, --accent, --text. --hair is a colour in one and a
stroke width in the other. battle/web/build_cardpack.mjs documents that
collision and works around it by moving card.css's :root onto .card. This file
does not need that workaround because it claims no short name at all.
NO DARK MODE, ON PURPOSE. The 992 pages under docs/ are light, printed cards
are light, and paper does not change theme. One look, measured once.
Structure:
1 Fonts
2 Tokens: brand, ink, camps, rarity, space, type, motion
3 Base: reset, typography, focus, reduced motion
4 Layout: page, section, grid, panel
5 Navigation and footer
6 Buttons, including the locked "coming soon" state
7 Badges, pills, prices, odds tables
8 The card frame and its placeholder
9 The slider: scroll-snap, swipeable, keyboard operable
10 Trade surfaces: shop, marketplace, arena
11 Forms
12 Utilities
========================================================================== */
/* ---------------------------------------------------------------------------
1 Fonts
Same two families the landing page already loads, so a visitor crossing from
docs/ into /play/ does not watch the type change. Loaded here so that one
to this file is enough for a static page.
--------------------------------------------------------------------------- */
/* SELBST AUSGELIEFERT, NICHT NACHGELADEN. Hier stand ein @import auf fonts.googleapis.com, und
dieser eine Import schickte die IP jedes Besuchers an einen Dritten: auf den 15 Seiten, die
diese Datei verlinken, UND im Spielclient unter /play/, dort ausdruecklich VOR dem Login.
(Die Zahl stand hier zuerst als 787, und die Herkunft gehoert zur Lehre: der Kopf DIESER Datei
behauptete 992, A9 meldete 787, und beides ging ungeprueft durch mehrere Haende, meine
eingeschlossen. Gemessen hat es dann A7 an docs/ selbst: 15 Seiten binden mr-design.css ein,
746 haben eigene link-Zeilen, 0 haben beides, 36 laden gar keine fremde Schrift, 17 Familien. 746 weitere Seiten laden ihre Schriften
ueber eigene -Zeilen aus 17 Familien und sind von dieser Umstellung NICHT gedeckt.)
Es gibt also keinen Zeitpunkt, an dem eine Einwilligung haette vorliegen koennen, und ein
Zustimmungsbanner fuer eine Schriftart waere ohnehin absurd. Das LG Muenchen I hat 2022 zu
genau dieser Konstellation entschieden (Az. 3 O 17493/20).
Die Regel dahinter ist groesser als die Schriften: keine Besucher-IP an einen Dritten ohne
Einwilligung. Ich hatte sie beim Kartenbild der Startseite von mir aus angewendet und hier
uebersehen, weil ein @import wie Gestaltung aussieht und nicht wie ein Datenabfluss.
Die Dateien liegen unter /assets/schriften/, erzeugt von web/tools/schriften_holen.mjs.
Der 300er-Schnitt von Outfit faellt dabei weg, er wird nirgends benutzt. */
@import url('/assets/schriften/schriften.css');
/* ---------------------------------------------------------------------------
2 Tokens
--------------------------------------------------------------------------- */
:root {
/* -- Brand. Standing rule: white, blue, amber, off-white. No purple. ------ */
--mr-blue: #1558f0;
--mr-blue-bright: #4b7bff;
--mr-blue-deep: #0b3aa8;
--mr-blue-wash: rgba(21, 88, 240, 0.08);
--mr-blue-edge: rgba(21, 88, 240, 0.24);
/* Der Fokusring, als eigenes Token: eine dunkle Seite setzt ihn auf --mr-blue-bright um. */
--mr-focus: var(--mr-blue);
--mr-amber: #f5a623;
--mr-amber-wash: rgba(245, 166, 35, 0.14);
/* -- Ground and ink ------------------------------------------------------ */
--mr-paper: #f6f4f1; /* the page */
--mr-surface: #ffffff; /* panels, cards, rows */
--mr-surface-2: #efede8; /* a surface on a surface */
--mr-ink: #141210; /* body text */
--mr-ink-2: #4a4643; /* secondary text, still passes AA on paper */
/* Measured, not chosen by eye: #7a7470 passed on paper (4.61) and failed on every tinted
surface (3.94 on --mr-surface-2), and captions sit on tinted surfaces all over this file.
This value is 4.5 or better on paper, white and surface-2. */
--mr-ink-3: #6f6960; /* captions, quiet labels */
--mr-line: #ddd8d2; /* hairlines between rows */
--mr-line-strong: #c0bab4; /* borders that must be seen */
/* -- Semantic ------------------------------------------------------------ */
--mr-good: #1b9e5a;
--mr-warn: #b4690e;
--mr-bad: #d7263d;
/* The locked grey. Never red: nothing failed, it is simply not open yet, and a red control
reads as an error the visitor thinks he caused.
It is DARKER than a normal disabled grey on purpose. WCAG exempts inactive controls from
contrast, and taking that exemption would be wrong here: our locked button is not a dead
control, it is a sentence the visitor is meant to read, carrying the price, the "coming soon"
and the reason. Measured: #8a8378 gave 3.21 against the locked ground and failed; this value
gives 4.64 on --mr-surface-2, 4.95 on paper, 5.43 on white. */
--mr-locked: #6f6960;
/* -- The camps -----------------------------------------------------------
Values from agents/A0_koordination/LAGER_ENTWURF_v1.md, set v1.2 (08.09.),
which A6 measured as CIEDE2000 pairs against the card frame. Under dE 20 a
pair reads as one colour at 24 px; the weakest pair in v1.2 is 24,3.
Do not count the entries here. How many camps there are is A8's answer, not
a number this file may imply: "eight camps" currently means two different
eights in two contracts. A page renders the camps a list gives it.
The KEY is the catalog's own `welt` value (battle/catalog, KATALOG.md §2),
because that is what A1 delivers today. The names from the camp draft
(Antike new, Strasse folded into Unterwelt, Zucht -> Natur, Abgrund ->
Hoelle) are aliases further down. When A8's camp bible fixes the ids this
is one block to rename, not a search across 992 pages. */
--mr-camp-unterwelt: #7a1b2e; /* Bordeaux. Still red, dark enough to leave */
--mr-camp-unterwelt-accent: #c0161c; /* the ember to Hoelle (dE 30 not 19) */
--mr-camp-kapital: #8c5a2b; /* Tabak. Moved off gold so Himmel keeps bronze */
--mr-camp-kapital-accent: #b8860b; /* gold, as an impression under 10 % */
--mr-camp-antike: #7a7a3c; /* Oliv, bronze-age green */
--mr-camp-antike-accent: #6e1e3a; /* Bordeaux, under 10 %. Open with A0. */
/* Called "Purpur" here until 08.09., which was a bad word for it in a house that has a standing
rule against purple. The value never was purple (hue 340, wine red); only the label was. */
--mr-camp-ordnung: #1558f0; /* Brand blue (v1.2). The frame gave its blue up */
--mr-camp-ordnung-accent: #141210; /* so the state could have it. See note. */
--mr-camp-stahl: #0e6b73; /* Petrol */
--mr-camp-stahl-accent: #19c3e6; /* signal cyan */
--mr-camp-natur: #6db33f; /* Giftgruen */
--mr-camp-natur-accent: #2f6b1c;
--mr-camp-himmel: #7eb6e6; /* Sky blue (v1.2). Bronze was dE 12 from Tabak */
--mr-camp-himmel-accent: #efe6d2; /* Ivory */
--mr-camp-hoelle: #ff4500; /* Ember carries the colour (v1.2), black is only */
--mr-camp-hoelle-accent: #141414; /* the ground it sits on */
/* Fund / Archive is deliberately colourless: paper and ink plus the archive mark (D22, A0
08.09.). It is the one camp that must not read as a colour, because a Fund card is legal in
every deck. The swatch stays visible through its ink rim, not through a fill. */
--mr-camp-fund: var(--mr-paper);
--mr-camp-fund-accent: var(--mr-ink);
/* THE INK ON A CAMP TILE, AND WHY IT CANNOT BE ONE COLOUR.
A camp tile is a filled surface with a label on it, and the camps span from Bordeaux to sky
blue. Measured against the whole set: white text fails on Natur (2.57), Himmel (2.16),
Hoelle (3.44) and Fund (1.1); ink fails on Unterwelt (1.8), Kapital (3.21), Ordnung (3.28)
and Stahl (3.0). One fixed choice makes four camps unreadable either way, and picking by eye
picks wrong, because a saturated mid-tone looks darker than it measures.
So every camp carries its own pair, computed once. Antike is the only one where neither
worked on the full colour (white 4.49, ink 4.16), so its TILE is 4 percent darker than its
mark; the mark keeps the exact camp colour. Same principle the printed card already uses,
where a mechanic pill decides its own ink (card.js, inkOn).
Lowest ratio in the set after this: 4.81. */
--mr-camp-unterwelt-tile: #7a1b2e; /* 10.38 */
--mr-camp-unterwelt-on: #ffffff;
--mr-camp-kapital-tile: #8c5a2b; /* 5.81 */
--mr-camp-kapital-on: #ffffff;
--mr-camp-antike-tile: #75753a; /* 4.81 */
--mr-camp-antike-on: #ffffff;
--mr-camp-ordnung-tile: #0b3aa8; /* 9.61, deep blue: the tile must not be the action blue */
--mr-camp-ordnung-on: #ffffff;
--mr-camp-stahl-tile: #0e6b73; /* 6.23 */
--mr-camp-stahl-on: #ffffff;
--mr-camp-natur-tile: #6db33f; /* 7.27 */
--mr-camp-natur-on: #141210;
--mr-camp-himmel-tile: #7eb6e6; /* 8.65 */
--mr-camp-himmel-on: #141210;
--mr-camp-hoelle-tile: #ff4500; /* 5.43 */
--mr-camp-hoelle-on: #141210;
--mr-camp-fund-tile: #f6f4f1; /* 17.02 */
--mr-camp-fund-on: #141210;
/* ONE COLLISION THAT IS DELIBERATE AND HAS TO BE HANDLED, NOT HIDDEN.
Since v1.2 the camp Ordnung IS the brand blue. On a card that is fine, because the frame gave
its blue up. On the website it is not: a filled blue surface next to a blue button reads as a
button.
This rule used to say "never next to an action", and that phrasing was worthless. The primary
button lives in the sticky nav, so it is on screen at every scroll position on every page.
"Next to an action" is therefore ALWAYS true, and a rule that needs a judgement call per page
is a rule 992 generated pages will break. It was already broken in the first draft that used
it.
So the collision is removed in the token instead of avoided by discipline: the Ordnung TILE is
the deep blue, the Ordnung MARK keeps the exact camp colour. Same construction Antike already
uses, and it improves the tile on the way (white 5.70 on the brand blue, 9.61 on the deep).
Measured pairs for the whole set are in LAGER_ENTWURF_v1.md section "Farbsatz v1.2".
Unterwelt and Hoelle can still turn once (decided red against ember), so they stay
variables like everything else here. */
/* -- Rarity. Mirrors web/src/theme.ts, no purple in the ladder. ---------- */
--mr-rar-c: #7a7470;
--mr-rar-uc: #1b9e5a;
--mr-rar-r: #1558f0;
--mr-rar-e: #0e7490;
--mr-rar-l: #f5a623;
--mr-rar-s: #7a1b2e;
/* -- Space. One 4 px ladder; every gap on the site is one of these. ------ */
--mr-s1: 4px;
--mr-s2: 8px;
--mr-s3: 12px;
--mr-s4: 16px;
--mr-s5: 24px;
--mr-s6: 32px;
--mr-s7: 48px;
--mr-s8: 64px;
--mr-s9: 96px;
/* -- Radius and shadow --------------------------------------------------- */
--mr-r1: 6px;
--mr-r2: 10px;
--mr-r3: 16px;
--mr-r4: 24px;
--mr-r-pill: 999px;
--mr-shadow-1: 0 1px 2px rgba(20, 18, 16, 0.06), 0 2px 8px rgba(20, 18, 16, 0.05);
--mr-shadow-2: 0 2px 6px rgba(20, 18, 16, 0.07), 0 12px 28px rgba(20, 18, 16, 0.09);
--mr-shadow-lift: 0 6px 14px rgba(20, 18, 16, 0.1), 0 22px 48px rgba(20, 18, 16, 0.12);
/* -- Type ---------------------------------------------------------------- */
--mr-font: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--mr-font-alt: 'Space Grotesk', ui-monospace, 'Segoe UI', sans-serif;
--mr-font-num: 'Space Grotesk', ui-monospace, SFMono-Regular, Menlo, monospace;
/* Fluid steps. clamp() so a phone and a 27 inch screen both read well and
nothing needs a media query for size alone. */
--mr-t-hero: clamp(2.25rem, 1.35rem + 4.2vw, 4.5rem);
--mr-t-h1: clamp(1.85rem, 1.25rem + 2.6vw, 3rem);
--mr-t-h2: clamp(1.45rem, 1.15rem + 1.4vw, 2.125rem);
--mr-t-h3: clamp(1.15rem, 1.03rem + 0.55vw, 1.5rem);
--mr-t-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
--mr-t-small: 0.9375rem;
--mr-t-cap: 0.8125rem;
--mr-t-micro: 0.6875rem;
/* -- Motion. Everything is switched off under reduced-motion, section 3. -- */
--mr-fast: 120ms;
--mr-base: 220ms;
--mr-slow: 420ms;
--mr-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
/* -- Layout -------------------------------------------------------------- */
--mr-page: 1200px;
--mr-page-narrow: 760px;
--mr-gutter: clamp(var(--mr-s4), 1rem + 2vw, var(--mr-s8));
--mr-nav-h: 64px;
/* -- Stacking. Named, so nobody invents z-index: 99999 again. ------------ */
--mr-z-base: 1;
--mr-z-sticky: 100;
--mr-z-nav: 500;
--mr-z-overlay: 800;
--mr-z-modal: 900;
--mr-z-toast: 1000;
}
/* Camp aliases from the camp draft. Same values, second name, so a page can
write data-camp="natur" today and data-camp="zucht" keeps working. A8's camp
bible decides which name survives; then one of the two blocks is deleted. */
:root {
--mr-camp-zucht-tile: var(--mr-camp-natur-tile);
--mr-camp-zucht-on: var(--mr-camp-natur-on);
--mr-camp-abgrund-tile: var(--mr-camp-hoelle-tile);
--mr-camp-abgrund-on: var(--mr-camp-hoelle-on);
--mr-camp-strasse-tile: var(--mr-camp-unterwelt-tile);
--mr-camp-strasse-on: var(--mr-camp-unterwelt-on);
--mr-camp-zucht: var(--mr-camp-natur);
--mr-camp-zucht-accent: var(--mr-camp-natur-accent);
--mr-camp-abgrund: var(--mr-camp-hoelle);
--mr-camp-abgrund-accent: var(--mr-camp-hoelle-accent);
--mr-camp-strasse: var(--mr-camp-unterwelt); /* folded in, decision of 07.09. */
--mr-camp-strasse-accent: var(--mr-camp-unterwelt-accent);
}
/* ---------------------------------------------------------------------------
3 Base
--------------------------------------------------------------------------- */
.mr,
.mr *,
.mr *::before,
.mr *::after {
box-sizing: border-box;
}
/* Scoped to .mr so this file can be dropped onto an existing page without
taking over elements it was not asked about. A7 puts class="mr" on . */
.mr {
margin: 0;
background: var(--mr-paper);
color: var(--mr-ink);
font-family: var(--mr-font);
font-size: var(--mr-t-body);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.mr h1,
.mr h2,
.mr h3,
.mr h4 {
margin: 0 0 var(--mr-s3);
line-height: 1.14;
letter-spacing: -0.02em;
font-weight: 700;
text-wrap: balance;
}
.mr h1 {
font-size: var(--mr-t-h1);
}
.mr h2 {
font-size: var(--mr-t-h2);
}
.mr h3 {
font-size: var(--mr-t-h3);
letter-spacing: -0.01em;
}
.mr p {
margin: 0 0 var(--mr-s4);
max-width: 68ch; /* measure, not container width: 140 characters is unreadable */
text-wrap: pretty;
}
/* Link colour belongs to links in PROSE, not to every anchor on the page.
*
* `.mr a` looks harmless and is not: it scores 0,1,1, which beats every single-class component
* below it. An then gets blue text on a blue ground and the button reads as
* an empty rectangle; the nav links, the camp chips and the card tiles lose their colours the
* same way. Found on the first full page that used buttons as links, not in review.
*
* So: prose links are coloured, components colour themselves. A component that wants the link
* colour asks for it. */
/* "A link in prose" is an anchor WITHOUT A CLASS. A component always carries one, so :not([class])
keeps this rule out of every nav list, footer column and camp index, all of which are