/* ============================================================================
mmapromoter.com — the whole stylesheet.
One file on purpose: the site is a single page, and a second request buys
nothing. Order: fonts -> tokens -> primitives -> page.
HOUSE RULES (these are what keep the page from reading as a template):
1. NO ROUNDED CORNERS. Radius is 0 everywhere. Fight bills, tickets and
commission paperwork have hard edges; soft 12px cards do not.
2. NO SOFT DROP SHADOWS. Depth comes from hairlines and hard borders.
3. TRACKING CAPS AT .04em. The 11px/uppercase/letter-spacing:.16em micro-
label is the single most recognisable generated-landing-page fingerprint.
It appeared nine times on this page. It appears zero times now.
4. GOLD IS PRECIOUS — BRAND_GUIDELINES.md §3: one gold moment per screen.
On this page that moment is the wordmark's "PROMOTER" and nothing else.
Section numbers, eyebrows, badges and rules are all ink or hairline.
========================================================================== */
/* ---------------------------------------------------------------- 1. FONTS */
/* Inter, self-hosted variable (400-900), one file per script. Self-hosted
rather than pulled from Google Fonts: one less third-party request, no EU
consent question, and it survives a Google outage. ZH/JA fall through to a
system CJK face — Inter has no CJK glyphs, and that is a script fallback,
not a second typeface. Regenerate with website/tools/websiteAssets.py. */
@font-face{
font-family:'Inter';font-style:normal;font-weight:400 900;font-display:swap;
src:url(../assets/fonts/inter-latin.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
font-family:'Inter';font-style:normal;font-weight:400 900;font-display:swap;
src:url(../assets/fonts/inter-latin-ext.woff2) format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
font-family:'Inter';font-style:normal;font-weight:400 900;font-display:swap;
src:url(../assets/fonts/inter-cyrillic.woff2) format('woff2');
unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
font-family:'Inter';font-style:normal;font-weight:400 900;font-display:swap;
src:url(../assets/fonts/inter-cyrillic-ext.woff2) format('woff2');
unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
/* --------------------------------------------------------------- 2. TOKENS */
:root{
--paper:#e8e2d8; /* page (bone) */
--raise:#f1ece3; /* raised surface / cards */
--ink:#161207; /* primary text (near-black warm) */
--ink2:#6f685a; /* secondary text */
--line:#cbc3b4; /* hairline */
--gold:#a97f2c; /* GLORY. The wordmark, and the focus ring. Nothing else. */
--cjk:"PingFang SC","Hiragino Sans","Yu Gothic","Microsoft YaHei";
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',var(--cjk),system-ui,sans-serif;background:var(--paper);color:var(--ink);
letter-spacing:.01em;font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.num{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);
padding:12px 18px;font-weight:700;z-index:100}
.skip:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* ----------------------------------------------------------- 3. PRIMITIVES */
/* Square, hard-bordered. Rule 1 + 2. */
.btn{font:inherit;cursor:pointer;border-radius:0;padding:14px 26px;font-weight:700;font-size:14px;
border:1px solid var(--ink);display:inline-flex;align-items:center;gap:8px;letter-spacing:.01em;
transition:background .12s,color .12s}
.btn-ink{background:var(--ink);color:var(--paper)}.btn-ink:hover{background:#2f2712}
.btn-line{background:transparent;color:var(--ink)}.btn-line:hover{background:var(--ink);color:var(--paper)}
/* language menu — was uppercase at .14em tracking (rule 3) */
.langmenu{position:relative}
.langtrig{font:inherit;cursor:pointer;background:none;border:1px solid var(--line);color:var(--ink);
border-radius:0;padding:7px 11px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:7px}
.langtrig:hover{border-color:var(--ink)}.langtrig svg{opacity:.5}
.langpop{position:absolute;right:0;top:100%;margin-top:-1px;background:var(--paper);
border:1px solid var(--ink);border-radius:0;padding:0;min-width:158px;
display:none;flex-direction:column;z-index:40;max-height:300px;overflow:auto}
.langpop.open{display:flex}
.lang-opt{font:inherit;cursor:pointer;background:none;border:0;border-top:1px solid var(--line);
color:var(--ink2);text-align:left;padding:9px 12px;font-size:13.5px;font-weight:600}
.lang-opt:first-child{border-top:none}
.lang-opt:hover{background:var(--ink);color:var(--paper)}
.lang-opt[aria-selected="true"]{color:var(--ink);font-weight:800}
/* notify form */
.nform{display:flex;gap:0;flex-wrap:wrap}
.nform input{flex:1;min-width:200px;background:transparent;border:1px solid var(--ink);border-right:none;
color:var(--ink);border-radius:0;padding:14px 15px;font:inherit}
.nform input::placeholder{color:var(--ink2)}
.nd{display:none;color:#41652f;font-weight:700;width:100%;margin-top:12px;font-size:14px}
.nd.err{color:#8d3630}
@media(max-width:460px){.nform input{border-right:1px solid var(--ink);min-width:100%}}
/* screenshot — a press photo, not a fake browser window.
The three grey dots and the URL pill were tell #1; there is no chrome now. */
.shot{position:relative;border:1px solid var(--ink);background:var(--raise)}
.shot .body{position:relative;aspect-ratio:16/9;display:flex;overflow:hidden}
.shot .body picture{display:block;width:100%;height:100%}
.shot .body img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}
figure{margin:52px 0 0}
figcaption{margin-top:11px;font-size:12.5px;color:var(--ink2);letter-spacing:.01em}
figcaption b{color:var(--ink);font-weight:700}
/* gallery — five plates in one frame.
The slides are stacked and cross-faded rather than scrolled: a horizontal
track would need a scrollbar or momentum physics, and neither belongs on a
page whose depth cue is a hairline. Every slide is in the DOM (the captions
too), which is what lets applyLang() translate all five in one pass. */
.gal .slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .18s}
.gal .slide.is-on{opacity:1;visibility:visible}
figcaption .cap{display:none}
figcaption .cap.is-on{display:block}
/* the arrows materialise over the image — and stay for keyboard and touch,
where "hover" either does not exist or cannot be discovered. Square, ink,
flush to the frame: rules 1 and 2. */
.gnav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
width:46px;height:66px;padding:0;border:0;border-radius:0;cursor:pointer;
background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;
opacity:0;transition:opacity .12s,background .12s}
.gnav.prev{left:0}
.gnav.next{right:0}
.gnav:hover{background:#2f2712}
.shot:hover .gnav,.gal:focus-within .gnav{opacity:1}
@media(hover:none){.gnav{opacity:1}}
/* thumbnail strip — the index to the plates above. Capped in width, not
stretched across the frame: it is a contact sheet, and a contact sheet whose
frames rival the print is competing with it. */
.thumbs{display:grid;grid-template-columns:repeat(5,minmax(0,124px));gap:8px;margin-top:8px}
.thumb{display:block;padding:0;line-height:0;cursor:pointer;border:1px solid var(--line);
border-radius:0;background:var(--raise);opacity:.5;transition:opacity .12s,border-color .12s}
/* height:auto or the width/height attributes on the ![]()
win and the strip
comes out 16:9-wide but square-tall. */
.thumb img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:top left}
.thumb:hover{opacity:.85}
.thumb.is-on{opacity:1;border-color:var(--ink)}
@media(max-width:640px){
.thumbs{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
.gnav{width:38px;height:54px}
}
/* PORTRAIT PLATES — the Arena is a phone game, so its captures are ~9:16.5.
Same gallery, same markup, same script: only the frame ratio and the widths
change. A portrait plate at the content column's full width would stand
1500px tall, so the frame is capped and the strip follows it down.
The ratio is the capture's own (518x944) — forcing 9:16 would letterbox it. */
.soc{color:var(--ink);display:inline-flex}
/* --------------------------------------------------------------- 4. LAYOUT */
.wrap{max-width:1200px;margin:0 auto;padding:0 40px}
@media(max-width:640px){.wrap{padding:0 22px}}
.rule{height:1px;background:var(--line)}
.rule.ink{height:2px;background:var(--ink)}
/* the header sticks — rule, nav and rule as ONE block, so the hairlines that
frame it travel with it. Opaque paper: the page scrolls under it, not
through it. Below the announcement modal (z 60) on purpose. */
.topstick{position:sticky;top:0;z-index:50;background:var(--paper);padding-top:16px}
/* every jump target clears the stuck header instead of landing under it */
section[id],[id="notify"]{scroll-margin-top:88px}
@media(max-width:640px){section[id],[id="notify"]{scroll-margin-top:150px}}
/* masthead — index.html has none: the section index below is the header, and
the logo it used to hold repeated the wordmark 60px underneath it. These
rules are 404.html's, where the logo is the only brand mark on the page.
The master is 320px tall (websiteAssets.py), so 104px is still 3x retina. */
.mast{display:flex;align-items:center;gap:20px;padding:16px 0 14px}
.brandlogo{height:104px;width:auto;margin-right:auto;display:block}
@media(max-width:640px){.brandlogo{height:72px}}
/* header row: the section index, with the language chip riding at its end */
.topbar{display:flex;align-items:stretch}
.topbar .toc{flex:1;min-width:0}
.topbar .langmenu{display:flex;align-items:center;padding-left:18px}
@media(max-width:640px){
.topbar{flex-wrap:wrap}
.topbar .toc{flex:1 1 100%}
.topbar .langmenu{padding:2px 0 8px;margin-left:auto}
/* tighter, because a stuck two-row header on a phone is expensive */
.topbar .toc a{padding:11px 0 11px 12px;font-size:13.5px}
.topstick{padding-top:10px}
}
/* contents index — the gold 01/02/03 numbers were tell #3; names only now */
.toc{display:flex;gap:0;flex-wrap:wrap}
.toc a{flex:1;min-width:140px;padding:15px 0 15px 16px;border-left:1px solid var(--line);
font-weight:700;font-size:14px;color:var(--ink);transition:background .1s,color .1s}
.toc a:first-child{border-left:none}
.toc a:hover{background:var(--ink);color:var(--paper)}
@media(max-width:640px){.toc a{min-width:33%;flex:none}}
/* hero */
.hero{padding:60px 0 8px}
.wordmark{font-weight:900;line-height:.84;letter-spacing:-.035em;color:var(--ink)}
.wordmark .mma{font-size:clamp(72px,19vw,232px);display:block}
/* The ONE gold moment on the page (rule 4). */
.wordmark .pro{font-size:clamp(20px,5vw,60px);color:var(--gold);letter-spacing:.09em;font-weight:800;display:block;margin-top:8px}
.hero-grid{display:grid;grid-template-columns:2fr 1fr;gap:40px;align-items:end;margin-top:46px}
.big-tag{font-size:clamp(22px,3.2vw,34px);font-weight:600;line-height:1.15;max-width:22ch;letter-spacing:-.012em}
.cta-row{display:flex;gap:0;flex-wrap:wrap;margin-top:30px}
.cta-row .btn+.btn{border-left:none}
@media(max-width:460px){.cta-row{flex-direction:column;align-items:flex-start}
.cta-row .btn+.btn{border-left:1px solid var(--ink);border-top:none}}
/* alpha date + clock — was a four-cell boxed countdown with DAYS/HRS/MIN/SEC
micro-labels (tell #4). One line of tabular numerals reads as a clock. */
.hcol.side{text-align:right}
.hcol.side .alpha{font-size:13px;font-weight:700;letter-spacing:.02em;line-height:1.45;
padding-bottom:12px;border-bottom:2px solid var(--ink);display:inline-block}
.clock{font-size:clamp(30px,3.6vw,46px);font-weight:900;letter-spacing:-.02em;line-height:1;margin-top:16px}
.clock .sfx{font-size:.55em;font-weight:700;margin:0 .3em 0 .05em}
@media(max-width:720px){.hero-grid{grid-template-columns:1fr;gap:26px}
.hcol.side{text-align:left}}
/* numbered blocks — the gold 01..05 sticky numerals are gone, and the section
heading no longer appears twice (the left rail label and the below it
were the same i18n key on all four blocks). */
.block{display:grid;grid-template-columns:1fr 3fr;gap:44px;padding:58px 0;border-top:1px solid var(--line)}
.block .l{position:sticky;top:26px;align-self:start}
.block h2{font-size:clamp(22px,2.6vw,30px);font-weight:800;letter-spacing:-.018em;max-width:14ch}
.block .lede{color:var(--ink2);font-size:16.5px;max-width:60ch}
@media(max-width:720px){.block{grid-template-columns:1fr;gap:16px;padding:44px 0}.block .l{position:static}}
/* arena — was a gold left-border callout (tell #7); now an inset ruled note */
.sep{margin-top:4px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0}
.sep .flag{font-size:13px;font-weight:800;letter-spacing:.02em;display:block}
.sep p{color:var(--ink2);max-width:62ch;margin-top:7px}
/* about */
.qa .item{padding:22px 0;border-top:1px solid var(--line)}
.qa .item:first-child{border-top:none;padding-top:0}
.qa .q{font-size:17.5px;font-weight:800;max-width:34ch;letter-spacing:-.01em}
.qa .a{color:var(--ink2);margin-top:9px;max-width:64ch}
/* channels — the ↗ glyph on every row was tell #8. The handle is more use. */
.chan{display:grid;grid-template-columns:30px 1fr auto;gap:16px;align-items:center;padding:17px 0;
border-top:1px solid var(--line)}
.chan:first-of-type{border-top:none}
.chan b{font-weight:800;font-size:15.5px}
.chan .d{color:var(--ink2);font-size:13.5px;display:block}
.chan .at{color:var(--ink2);font-size:13.5px;font-weight:600}
.chan:hover .at{color:var(--ink)}
.chan.soon{cursor:default}
.soon-badge{color:var(--ink2);font-size:12px;font-weight:700;border:1px solid var(--line);padding:3px 9px}
/* dev-log entry — was a rounded raised card with a gold date and a pill badge */
.post{border:0;border-top:2px solid var(--ink);background:none;padding:20px 0 0;cursor:pointer;
max-width:760px;text-align:left;font:inherit;color:inherit;display:block;width:100%}
.post+.post{margin-top:34px}
.post:hover .post-title{text-decoration:underline;text-underline-offset:4px}
.post-top{display:flex;align-items:baseline;gap:14px;margin-bottom:9px;font-size:12.5px;font-weight:700}
.post-date{color:var(--ink)}
.post-badge{color:var(--ink2);font-weight:600}
.post-title{display:block;font-size:23px;font-weight:800;letter-spacing:-.018em}
.post-teaser{display:block;color:var(--ink2);margin-top:9px;max-width:62ch}
.readmore{display:inline-block;margin-top:15px;color:var(--ink);font-weight:700;font-size:14px;
border-bottom:2px solid var(--ink);padding-bottom:1px}
/* announcement modal */
.backdrop{position:fixed;inset:0;z-index:60;background:rgba(22,18,7,.5);
display:none;align-items:flex-start;justify-content:center;padding:60px 20px;overflow:auto}
.backdrop.open{display:flex}
.sheet{position:relative;background:var(--paper);border:1px solid var(--ink);max-width:640px;
width:100%;padding:36px}
.sheet .close{position:absolute;top:14px;right:14px;background:none;border:1px solid var(--line);
color:var(--ink);width:32px;height:32px;cursor:pointer;font-size:17px;line-height:1}
.sheet .close:hover{background:var(--ink);color:var(--paper)}
.sheet-title{font-size:27px;font-weight:800;letter-spacing:-.02em;margin:6px 0 16px;max-width:24ch}
.sheet p{color:var(--ink2);margin-top:12px}
.sheet p:first-of-type{margin-top:0}
/* the long read — fourteen headed sections rather than one wall of text */
.sheet.long{max-width:760px}
.sheet h3{font-size:16.5px;font-weight:800;letter-spacing:-.01em;margin:28px 0 8px;
padding-top:14px;border-top:1px solid var(--line);color:var(--ink)}
.sheet .sheet-end{margin-top:26px;padding-top:16px;border-top:2px solid var(--ink);
color:var(--ink);font-weight:700}
/* footer */
footer{padding:38px 0 52px;color:var(--ink2);font-size:13px}
footer .fr{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:baseline}
footer a{color:var(--ink);border-bottom:1px solid var(--line)}
footer a:hover{border-color:var(--ink)}
footer .cl{color:var(--ink2);font-weight:600;margin-right:8px}
/* 404 */
.oops{padding:100px 0 120px}
.oops .code{font-size:clamp(64px,14vw,150px);font-weight:900;letter-spacing:-.05em;line-height:.86;color:var(--ink)}
.oops h1{font-size:clamp(22px,3.4vw,32px);font-weight:800;margin-top:16px;letter-spacing:-.02em}
.oops p{color:var(--ink2);margin-top:10px}
@media(prefers-reduced-motion:reduce){
*{transition:none!important;animation:none!important}
html{scroll-behavior:auto}
}