/* MeshWars: styles for the standalone /about page (frontend/about.html).
Matches the dark theme shared with join.css -- self-contained, no
external fonts, libraries, or CDN assets. */
* { box-sizing: border-box; }
/* Type scales modestly with the viewport instead of being one fixed
size everywhere -- subtle (15px-17px base), not the enormous text a
naive vw-only scale would produce on a large monitor. Site chrome
(.mw-nav, frontend/nav.css) stays in px throughout and is unaffected
-- it needs to render identically on every page regardless of this
page's root font-size. */
html {
font-size: clamp(15px, 0.35vw + 14px, 17px);
}
body {
margin: 0;
background: var(--mw-page);
color: var(--mw-text-1);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.landing-wrap {
/* Fluid: grows with the viewport (block default width is already
100% of the available space) up to a real reading-page maximum,
rather than a fixed narrow column. On a phone this is just 100%
minus the 16px side padding below -- effectively full width with
small gutters. */
max-width: 1160px;
margin: 0 auto;
padding: calc(var(--mw-nav-h) + 16px) 16px 64px;
}
/* ---- page header ---------------------------------------------------------
.landing-header/.landing-title/.landing-sub: the plain "large gold
title plus a one-line subtitle" header rules.css's own .rules-header/
.rules-title/.rules-sub define -- used as-is by /results (this file
is the only stylesheet that page loads besides theme.css/results.css,
neither of which carry a header treatment of their own). /about
doesn't use these three classes at all; its own header is the hero
lockup below instead. */
.landing-header { margin-bottom: 32px; }
.landing-title {
font-size: clamp(2rem, 6vw, 2.75rem);
font-weight: 800;
letter-spacing: 0.02em;
color: var(--mw-gold-light);
margin: 0 0 8px;
}
.landing-sub {
color: var(--mw-text-2);
font-size: 1rem;
line-height: 1.55;
margin: 0;
max-width: 62ch;
}
/* ---- hero --------------------------------------------------------------
The page's one hero moment: nav mark stays a small wordmark, this is
the full lockup, shown once, centered, over the topographic texture
plate from the brand pack (darkened so the lockup and tagline stay
legible). If the texture is ever removed, the gradient fallback
below still gives the band its own presence rather than resting on
flat page background. */
.landing-hero {
position: relative;
text-align: center;
padding: 48px 20px 40px;
margin-bottom: 28px;
border: 1px solid var(--mw-line);
border-radius: 12px;
background-color: var(--mw-page);
background-image:
var(--mw-hero-scrim),
url("/static/assets/texture/meshwars-topo.webp");
background-size: cover;
background-position: center;
}
/* A background rather than an , so the lockup follows --mw-logo the
way the crest follows --mw-crest. The aspect ratio is stated here
because a background carries no intrinsic size: both artworks are
1010x320, so the box reserves its space before either loads and the
hero never jumps. The element keeps role="img" and a label, since a
background has no alt text of its own. */
.landing-hero-logo {
display: block;
width: min(640px, 100%);
aspect-ratio: 1010 / 320;
margin: 0 auto;
background-image: var(--mw-logo);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
/* ---- live numbers band --------------------------------------------------
Real-time figures fetched by about.js from the existing /api/mc/scores
and /api/mc/players endpoints. Every value starts as an em dash in the
markup itself, so with JS disabled -- or if either fetch fails -- the
band still renders cleanly with dashes instead of an error or a
layout break. This is deliberately a flat row of labeled numbers, not
another grey panel, so it reads as a live status strip under the hero
rather than one more section of text. */
.landing-stats {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-bottom: 28px;
}
.landing-stat {
flex: 1 1 160px;
max-width: 220px;
text-align: center;
background: var(--mw-panel);
border: 1px solid var(--mw-line);
border-radius: 8px;
padding: 14px 12px;
}
.landing-stat-value {
display: block;
font-size: 1.5rem;
font-weight: 800;
color: var(--mw-gold-light);
line-height: 1.2;
}
.landing-stat-label {
display: block;
margin-top: 4px;
font-size: 0.6875rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--mw-text-5);
}
/* ---- panels ------------------------------------------------------------
No boxed cards -- Matt does not want bordered, rounded-corner panels
around plain content. These now read the way rules.css's own
s do: prose under a gold heading with a 2px gold rule,
separated from the next one by a thin bottom border rather than a
background/border/radius box. The hero and the stat tiles above
(.landing-hero/.landing-stat) and the protocol cards inside "The two
protocols" below (.protocol-card) are deliberately NOT included here
-- those are genuinely their own component, not a content section,
and stay boxed. */
.landing-panel {
padding-bottom: 28px;
margin-bottom: 28px;
border-bottom: 1px solid var(--mw-line);
}
.landing-panel:last-child {
border-bottom: 0;
margin-bottom: 0;
padding-bottom: 0;
}
/* This page's own h2 -- same size/weight/rule as rules.css's
.rules-body h2, so a heading reads the same whether it's reached on
/about or /rules. Was a plain
, uppercase and smaller, until
this page grew the same contents rail /docs, /rules and /account use
-- search and the rail both need a real heading with an id
(frontend/page-search.js only indexes h2/h3), so every one of these
is now an