/* ==========================================================================
creator.playprimetanki.com: the whole design system, one file.
Since 2026-10-03 the site is one long home page on dark greys: a hero with a
text column and a red colour field behind a torn edge, cards on a texture of
dark shards, a full-width tiers band whose picture has a spiked edge, and the
questions in boxes. Every picture is our own: the torn edge, the burst, the
spikes and the shards are drawn by our art tool, and the key art, the sticker
and the icons are baked from the game's own files.
Order of this file:
1 fonts 8 section shell 15 final call, data line
2 tokens 9 cards 16 footer
3 base 10 perks, steps 17 the leaderboard page
4 type 11 gift status boxes 18 forms (apply)
5 buttons 12 the tiers band 19 languages
6 header, language 13 top creators 20 motion
7 hero (and the 404's) 14 FAQ
House rules: only transform and opacity animate, never a filter, no
backdrop-filter, no !important, no inline styles; every page centred; images
at the size they are shown; a 320px phone never scrolls sideways.
========================================================================== */
/* --------------------------------------------------------------------------
1. Fonts. Inter only (owner, 2026-10-03), for the headlines as for the text.
Prime Intl carries the scripts the Latin file lacks, each scoped by
unicode-range, so Latin never falls through to it.
-------------------------------------------------------------------------- */
@font-face {
font-family: "Prime Text";
src: url("/assets/fonts/inter-v20-latin-var.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Prime Intl";
src: url("/assets/fonts/noto-sans-georgian-v48-georgian-var.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
unicode-range: U+0589, U+10A0-10FF, U+1C90-1CBF, U+2D00-2D2F;
}
/* Cyrillic is Inter's own cut, the same version as the Latin file, so Russian
reads as the site's typeface and not a lookalike. */
@font-face {
font-family: "Prime Intl";
src: url("/assets/fonts/inter-v20-cyrillic-var.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Armenian after Georgian on purpose: both claim U+0589, the Armenian full
stop, and where two ranges overlap the last one wins. */
@font-face {
font-family: "Prime Intl";
src: url("/assets/fonts/noto-sans-armenian-v47-armenian-var.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
unicode-range: U+0530-058F, U+FB13-FB17;
}
/* --------------------------------------------------------------------------
2. Tokens. The red, the gold and the tier colours are the owner's choices of
2026-10-03.
-------------------------------------------------------------------------- */
:root {
color-scheme: dark;
/* Surfaces */
--bg: #0d0d0d;
--surface: #161616;
--surface-high: #242424;
--surface-faq: #11171d;
--surface-faq-fade: rgba(17, 23, 29, 0.15);
--fill-tertiary: rgba(248, 248, 248, 0.08);
--fill-tertiary-hover: rgba(248, 248, 248, 0.14);
--header-bg: rgba(0, 0, 0, 0.9);
--menu-bg: #161616;
/* Text */
--fg-1: rgba(255, 255, 255, 0.95);
--fg-2: rgba(255, 255, 255, 0.75);
--fg-3: rgba(255, 255, 255, 0.6);
--fg-on-gold: #ffffff;
/* Edges */
--border: rgba(255, 255, 255, 0.08);
--stroke: rgba(255, 255, 255, 0.32);
--halo: 0 0 0 4px rgba(255, 255, 255, 0.24);
--halo-press: 0 0 0 4px rgba(0, 0, 0, 0.12);
--focus: rgba(255, 255, 255, 0.95);
/* Accent: a red for the hero field, a gold for the program name */
--red: #eb0029;
--red-fade: rgba(235, 0, 41, 0.15);
--gold-1: #ffb50d;
--gold-2: #ebcc9c;
--gold-deep: #572100;
--gold-text: linear-gradient(90deg, var(--gold-1) 0%, var(--gold-2) 100%);
--gold-button: linear-gradient(90deg, var(--gold-1) 0%, var(--gold-deep) 100%);
--gold-panel: linear-gradient(90deg, rgba(255, 181, 13, 0.15) 0%, transparent 100%);
--btn-shine: rgba(255, 255, 255, 0.12);
--band-tint: rgba(110, 24, 47, 0.25);
/* The three tiers: each name in the colour of its own art */
--tier-creator: #9ed36a;
--tier-creator-tint: rgba(58, 104, 34, 0.28);
--tier-partner: #f2c46b;
--tier-partner-tint: rgba(118, 90, 28, 0.28);
--tier-signature: #ff8a3d;
--tier-signature-tint: rgba(140, 48, 18, 0.3);
/* Discord, unchanged from the main site */
--discord: #5865f2;
--discord-deep: #4752c4;
--discord-tint: rgba(88, 101, 242, 0.12);
--discord-ring: rgba(88, 101, 242, 0.45);
/* The board's silver and bronze places (the game's own numerals' colours) */
--rank-2: #d7dde4;
--rank-3: #d9a477;
/* Depth: a menu or a pill floating over the page; the ring round a flag */
--shadow-pop: 0 16px 40px rgba(0, 0, 0, 0.6);
--flag-ring: rgba(255, 255, 255, 0.3);
/* Hover by opacity, never by colour (only transform and opacity animate):
the step from one text tone to the next, as an opacity of the brighter one.
fg-1 to fg-2 is .75 / .95, fg-2 to fg-3 is .6 / .75. */
--dim-1-2: 0.79;
--dim-2-3: 0.8;
/* Status */
--up: #6fdc9a;
--down: #ff8f7a;
/* Type. Phone values; the desktop scale follows below, from 1024px. */
--font: "Prime Text", "Prime Intl", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--track: -0.02em;
--track-label: 0.04em;
--d1: 3.25rem; --d1-lh: 3.5rem;
--d2: 2.75rem; --d2-lh: 3rem;
--d3: 2.25rem; --d3-lh: 2.5rem;
--d4: 2rem; --d4-lh: 2.25rem;
--d5: 1.5rem; --d5-lh: 1.875rem;
--d6: 1.25rem; --d6-lh: 1.5rem;
--d7: 1rem; --d7-lh: 1.25rem;
--b1: 1.125rem; --b1-lh: 1.625rem;
--b2: 1rem; --b2-lh: 1.5rem;
--b3: 0.875rem; --b3-lh: 1.25rem;
--l2: 0.75rem; --l2-lh: 0.75rem;
--l3: 0.625rem; --l3-lh: 0.625rem;
/* The logo's two words, in the header and the footer */
--logo-word: 0.8125rem;
--logo-sub: 0.6875rem;
--logo-word-lg: 1.25rem;
--logo-sub-lg: 0.875rem;
--logo-mark: 40px;
--logo-mark-sm: 32px;
--logo-mark-lg: 64px;
--logo-mark-xl: 80px;
/* Radii */
--r-xs: 8px;
--r-sm: 12px;
--r-m: 20px;
--r-lg: 24px;
--r-xxl: 36px;
--r-round: 50%;
/* Space */
--s-1: 4px;
--s-2: 8px;
--s-3: 12px;
--s-4: 16px;
--s-5: 20px;
--s-6: 24px;
--s-7: 32px;
--s-8: 40px;
--s-9: 48px;
--s-10: 60px;
--s-11: 64px;
--s-12: 96px;
--s-13: 100px;
/* Layout */
--header-h: 80px;
--shell: 1100px;
--shell-form: 720px;
--gutter: 16px;
--title-in: 8px;
--section-y: 24px;
--section-x: 16px;
/* Pieces. --hit is the smallest thing a finger is asked to press; --control-h
the 40px of buttons and chips, 44px on a touch screen; --field-h a form field. */
--hit: 44px;
--control-h: 40px;
--field-h: 48px;
--chip: 32px;
--face: 48px;
--face-sm: 40px;
--face-lg: 72px;
--face-xl: 120px;
--face-xl-sm: 96px;
--medal: 40px;
--milestone: 56px;
--gift-w: 56px;
--gift-h: 56px;
--glyph-sm: 16px;
--icon: 40px;
--perk-w: 112px;
--perk-h: 70px;
--glyph: 24px;
--tab: 52px;
--tab-art: 38px;
--sticker: 150px;
--sticker-hero: 340px;
--status-x: 28px;
--band-spikes: 80px;
/* The hero key art's width over its height (hero-logo-v1.webp, 983x903: our logo's
frame, the streamer at the desk, the tank breaking out on the left) */
--hero-slab-ratio: 1.09;
/* The shard texture's tile, and how far down each section starts it, so the same
shard never frames two headings (set per section below) */
--shard-tile: 1200px;
--shard-y: 0px;
/* The hero. Stacked below 1024px: the art panel's height, then the words in
one column. From 1024px: the dark side's width (the tear starts there), the
words column, and the art centred in the red that is left. */
--hero-art-h: 30vh;
--hero-art-min: 200px;
--hero-words-max: 560px;
--hero-lead-max: 448px;
--hero-title: min(var(--d1), 15vw);
--hero-title-scale: 1;
--hero-split: 35vw;
--hero-words: 46vw;
--hero-art-in-start: 14vw;
--hero-art-in-end: 5vw;
--hero-art-x: calc(var(--hero-art-in-start) + (100vw - var(--hero-split) - var(--hero-art-in-start) - var(--hero-art-in-end)) / 2);
/* Motion */
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--t-fast: 200ms;
--t-base: 300ms;
--t-slow: 400ms;
--t-reveal: 800ms;
--t-reveal-move: 1000ms;
--t-vt-out: 220ms;
--t-vt-in: 450ms;
--reveal-rise: 24px;
}
@media (pointer: coarse) {
:root {
--control-h: 44px;
}
}
@media (min-width: 768px) {
:root {
--gutter: 32px;
--title-in: 36px;
--section-y: 100px;
--section-x: 64px;
--icon: 48px;
--perk-w: 160px;
--perk-h: 100px;
--glyph: 28px;
--sticker: 226px;
--status-x: 36px;
}
}
@media (min-width: 1024px) {
:root {
--d1: 5rem; --d1-lh: 5.5rem;
--d2: 4rem; --d2-lh: 3.625rem;
--d3: 3rem; --d3-lh: 3.5rem;
--d4: 2rem; --d4-lh: 2.375rem;
--d6: 1.25rem; --d6-lh: 1.625rem;
--d7: 1rem; --d7-lh: 1.375rem;
/* 80px, smaller where the screen is narrower than 1380px or shorter
than 890px */
--hero-title: min(var(--d1), 5.8vw, 9vh);
/* the program card's title: 32px, less where the screen is narrower
than 1280px or shorter than 728px */
--program-title: min(var(--d4), 2.5vw, 4.4vh);
--sticker-hero: 452px;
}
}
/* --------------------------------------------------------------------------
3. Base.
-------------------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* A component's own display rule would beat the browser's [hidden]; naming the
attribute twice outweighs a single class whatever the order. */
[hidden][hidden] {
display: none;
}
html {
min-width: 320px;
overflow-x: clip;
background: var(--bg);
/* the fixed bar would cover the top of whatever an anchor jumps to */
scroll-padding-top: calc(var(--header-h) + var(--s-4));
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
.c-body {
min-height: 100vh;
margin: 0;
overflow-x: clip;
background: var(--bg);
color: var(--fg-2);
font-family: var(--font);
font-size: var(--b2);
font-weight: 500;
line-height: var(--b2-lh);
letter-spacing: var(--track);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Content starts under the fixed bar. */
main {
display: flex;
flex-direction: column;
padding-top: var(--header-h);
}
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd {
margin: 0;
}
ul,
ol {
padding: 0;
list-style: none;
}
a {
color: inherit;
text-decoration: none;
}
img,
svg,
video {
display: block;
max-width: 100%;
}
button,
input,
select,
textarea {
color: inherit;
font: inherit;
letter-spacing: inherit;
}
button,
a {
-webkit-tap-highlight-color: transparent;
}
:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 3px;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
border: 0;
clip-path: inset(50%);
white-space: nowrap;
}
.skip-link {
position: fixed;
top: var(--s-3);
left: var(--s-3);
z-index: 100;
padding: var(--s-3) var(--s-4);
border-radius: var(--r-xs);
background: var(--fg-1);
color: var(--bg);
font-size: var(--b3);
font-weight: 700;
transform: translateY(-200%);
}
.skip-link:focus {
transform: none;
}
/* --------------------------------------------------------------------------
4. Type. One scale, in Inter. The classes name the step, not the place, so
any block can wear one.
-------------------------------------------------------------------------- */
.c-d1,
.c-d3,
.c-d4,
.c-d5,
.c-d6,
.c-d7 {
color: var(--fg-1);
font-weight: 700;
letter-spacing: var(--track);
}
.c-d1 {
font-size: var(--d1);
font-weight: 600;
line-height: var(--d1-lh);
text-transform: uppercase;
}
.c-d3 {
font-size: var(--d3);
line-height: var(--d3-lh);
}
.c-d4 {
font-size: var(--d4);
line-height: var(--d4-lh);
}
.c-d5 {
font-size: var(--d5);
line-height: var(--d5-lh);
}
.c-d6 {
font-size: var(--d6);
line-height: var(--d6-lh);
}
.c-d7 {
color: var(--fg-2);
font-size: var(--d7);
line-height: var(--d7-lh);
text-transform: uppercase;
}
.c-b1 {
color: var(--fg-2);
font-size: var(--b1);
line-height: var(--b1-lh);
}
.c-b2 {
color: var(--fg-2);
font-size: var(--b2);
line-height: var(--b2-lh);
}
.c-l2,
.c-l3 {
font-weight: 700;
letter-spacing: var(--track-label);
text-transform: uppercase;
}
.c-l2 {
font-size: var(--l2);
line-height: var(--l2-lh);
}
.c-l3 {
color: var(--fg-3);
font-size: var(--l3);
line-height: var(--l3-lh);
}
/* The program name's gold, as text. */
.c-gold-text {
background: var(--gold-text);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-transform: uppercase;
}
/* --------------------------------------------------------------------------
5. Buttons. 40px tall (44px on a touch screen), 8px corners,
12px capitals, a 1px light ring inside. Hover is a 4px halo that fades in
(opacity only).
-------------------------------------------------------------------------- */
.c-btn,
.c-btn-quiet,
.discord-button {
position: relative;
display: inline-flex;
min-height: var(--control-h);
align-items: center;
justify-content: center;
gap: var(--s-2);
padding: var(--s-2) var(--s-6);
border: 0;
border-radius: var(--r-xs);
box-shadow: inset 0 0 0 1px var(--stroke);
color: var(--fg-1);
cursor: pointer;
font-size: var(--l2);
font-weight: 700;
letter-spacing: var(--track-label);
line-height: var(--l2-lh);
text-align: center;
text-transform: uppercase;
user-select: none;
}
.c-btn {
background: var(--gold-button);
color: var(--fg-on-gold);
}
.c-btn-quiet {
background: var(--fill-tertiary);
}
/* Everything that opens Discord wears Discord's own colour (main site rule). */
.discord-button {
background: var(--discord);
}
.c-btn::after,
.c-btn-quiet::after,
.discord-button::after {
position: absolute;
inset: 0;
content: "";
border-radius: inherit;
box-shadow: var(--halo);
opacity: 0;
pointer-events: none;
transition: opacity var(--t-fast) var(--ease);
}
/* The gold button also brightens under the pointer: a light pane fades in over it. */
.c-btn::before {
position: absolute;
inset: 0;
content: "";
border-radius: inherit;
background: var(--btn-shine);
opacity: 0;
pointer-events: none;
transition: opacity var(--t-fast) var(--ease);
}
@media (hover: hover) {
.c-btn:hover::before {
opacity: 1;
}
.c-btn:hover::after,
.c-btn-quiet:hover::after,
.discord-button:hover::after {
opacity: 1;
}
}
.c-btn:active,
.c-btn-quiet:active,
.discord-button:active {
color: var(--fg-2);
}
.c-btn:active::after,
.c-btn-quiet:active::after,
.discord-button:active::after {
box-shadow: var(--halo-press);
opacity: 1;
}
.c-btn:disabled {
cursor: default;
opacity: 0.6;
}
.c-btn--block {
display: flex;
width: 100%;
}
.c-btn--lg {
min-height: var(--field-h);
padding-inline: var(--s-7);
}
/* --------------------------------------------------------------------------
6. Header: fixed, 80px, near-black, no blur. Logo left; one quiet link and
the language globe right. Nothing else (owner, 2026-10-03).
-------------------------------------------------------------------------- */
.c-header {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 30;
display: flex;
height: var(--header-h);
align-items: center;
gap: var(--s-6);
padding-inline: var(--s-4);
background: var(--header-bg);
}
@media (min-width: 768px) {
.c-header {
padding-inline: var(--s-7);
}
}
/* Every control in the bar is at least a finger tall (--hit, 44px); the words and
the globe keep their places, the hit areas grow around them. */
.c-logo {
display: inline-flex;
min-height: var(--hit);
align-items: center;
gap: var(--s-3);
margin-inline-end: auto;
color: var(--fg-1);
}
.c-logo img {
width: var(--logo-mark);
height: var(--logo-mark);
flex: none;
}
.c-logo-words {
display: grid;
gap: 3px;
font-weight: 800;
letter-spacing: 0.06em;
line-height: 1;
text-transform: uppercase;
white-space: nowrap;
}
.c-logo-words span {
font-size: var(--logo-word);
}
.c-logo-words b {
background: var(--gold-text);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-size: var(--logo-sub);
letter-spacing: 0.12em;
}
.c-nav {
display: flex;
align-items: center;
}
/* A 320px phone holds the logo, its two words, the link and the globe. */
@media (max-width: 400px) {
.c-header {
gap: var(--s-3);
}
.c-logo {
gap: var(--s-2);
}
.c-logo img {
width: var(--logo-mark-sm);
height: var(--logo-mark-sm);
}
}
.c-nav a {
display: inline-flex;
min-height: var(--hit);
align-items: center;
margin-inline: calc(-1 * var(--s-2));
padding-inline: var(--s-2);
color: var(--fg-1);
font-size: var(--l2);
font-weight: 700;
letter-spacing: var(--track-label);
line-height: var(--l2-lh);
text-transform: uppercase;
transition: opacity var(--t-base) var(--ease);
}
/* Hover to the secondary tone, as an opacity (see --dim-1-2) */
.c-nav a[aria-current="page"] {
opacity: var(--dim-1-2);
}
@media (hover: hover) {
.c-nav a:hover {
opacity: var(--dim-1-2);
}
}
/* The language globe. lang.js draws a button (flag, code, caret) and a list
into .lang-switch; here the button becomes a 16px globe, its hit area a
finger wide but pulled in at both sides, so the glyph sits where a 32px
box would put it; the list a small dark card. The flag and code stay in the list. */
/* English for now (owner, 2026-10-03): the pages say data-lang-codes="en", so lang.js
offers no other language and makes no "also in your language" offer, and the globe,
which would list English alone, is not shown. Take the attribute off the four pages
(and this rule goes quiet) when the translations come back. */
[data-lang-switch][data-lang-codes="en"] {
display: none;
}
.lang-switch {
position: relative;
flex: none;
width: var(--hit);
height: var(--hit);
margin-inline: calc((var(--chip) - var(--hit)) / 2);
}
.lang-current {
display: grid;
width: 100%;
height: 100%;
place-items: center;
padding: 0;
border: 0;
border-radius: var(--r-xs);
background: none;
color: var(--fg-1);
cursor: pointer;
transition: opacity var(--t-base) var(--ease);
}
.lang-current::before {
width: var(--glyph-sm);
height: var(--glyph-sm);
content: "";
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Ccircle cx='8' cy='8' r='6.8'/%3E%3Cellipse cx='8' cy='8' rx='2.9' ry='6.8'/%3E%3Cpath d='M1.4 8h13.2M2.6 4.4h10.8M2.6 11.6h10.8'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Ccircle cx='8' cy='8' r='6.8'/%3E%3Cellipse cx='8' cy='8' rx='2.9' ry='6.8'/%3E%3Cpath d='M1.4 8h13.2M2.6 4.4h10.8M2.6 11.6h10.8'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
.lang-current > * {
display: none;
}
.lang-switch.is-open .lang-current {
opacity: var(--dim-1-2);
}
@media (hover: hover) {
.lang-current:hover {
opacity: var(--dim-1-2);
}
}
.lang-menu {
position: absolute;
top: calc(100% + var(--s-3));
right: 0;
z-index: 60;
min-width: 152px;
margin: 0;
padding: var(--s-2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--menu-bg);
box-shadow: var(--shadow-pop);
}
.lang-menu li + li {
margin-top: calc(var(--s-1) / 2);
}
.lang-menu a {
display: flex;
min-height: var(--hit);
align-items: center;
gap: var(--s-3);
padding: var(--s-2) var(--s-3);
border-radius: var(--r-xs);
color: var(--fg-2);
font-size: var(--l2);
font-weight: 700;
letter-spacing: var(--track-label);
}
.lang-menu a:hover {
background: var(--fill-tertiary);
color: var(--fg-1);
}
.lang-menu a.is-current {
background: var(--fill-tertiary);
box-shadow: inset 0 0 0 1px var(--stroke);
color: var(--fg-1);
}
.flag {
flex: none;
width: 18px;
height: 18px;
border-radius: var(--r-round);
background-position: center;
background-size: cover;
box-shadow: inset 0 0 0 1px var(--flag-ring);
}
/* The folder and the flag are the country (br, ge, am); the code is the
language (pt, ka, hy). Both are right. */
.flag-en { background-image: url("/assets/flags/en.svg"); }
.flag-ka { background-image: url("/assets/flags/ka.svg"); }
.flag-ru { background-image: url("/assets/flags/ru.svg"); }
.flag-pt { background-image: url("/assets/flags/br.svg"); }
.flag-de { background-image: url("/assets/flags/de.svg"); }
.flag-hy { background-image: url("/assets/flags/am.svg"); }
/* "This page is also in your language": an offer, never a redirect. */
.lang-pill {
position: fixed;
right: 0;
bottom: var(--s-4);
left: 0;
z-index: 70;
display: flex;
width: max-content;
max-width: min(620px, calc(100% - 2 * var(--s-4)));
align-items: center;
gap: var(--s-3);
margin-inline: auto;
padding: var(--s-3) var(--s-4);
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--surface-high);
box-shadow: var(--shadow-pop);
opacity: 0;
transform: translateY(18px);
transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.lang-pill.is-in {
opacity: 1;
transform: none;
}
.lang-pill-text {
color: var(--fg-1);
font-size: var(--b3);
line-height: var(--b3-lh);
}
.lang-pill-go {
flex: none;
padding: var(--s-2) var(--s-4);
border-radius: var(--r-xs);
background: var(--gold-button);
box-shadow: inset 0 0 0 1px var(--stroke);
color: var(--fg-on-gold);
font-size: var(--l2);
font-weight: 700;
letter-spacing: var(--track-label);
text-transform: uppercase;
}
.lang-pill-x {
flex: none;
padding: var(--s-2) var(--s-1);
border: 0;
background: none;
color: var(--fg-3);
cursor: pointer;
font-size: var(--b3);
}
.lang-pill-x:hover {
color: var(--fg-1);
}
/* A phone: the sentence takes the first line beside its flag and the two
choices the second, instead of a sentence squeezed into a narrow column. */
@media (max-width: 520px) {
.lang-pill {
flex-wrap: wrap;
}
.lang-pill-text {
flex: 1 1 calc(100% - 18px - var(--s-3));
}
}
/* --------------------------------------------------------------------------
7. The hero. From 1024px: the section is the red field; a dark panel holds
the words on the left, our torn edge runs down its right side, dark speed
lines burst from behind the key art, and the art is cut into slabs. Below
1024px (phones, tablets, a phone held sideways): the art panel comes first,
full width, its bottom edge torn; the words follow. A tablet's dark side
would be too narrow for the program card, which would sit across the tear.
-------------------------------------------------------------------------- */
.c-hero {
position: relative;
display: flex;
min-height: calc(100vh - var(--header-h));
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
padding: var(--s-9) var(--section-x);
isolation: isolate;
overflow: clip;
background: var(--surface);
}
/* One cell the size of the panel, so the slab's height: 100% is the panel's own
height: an auto row took the picture's height from its sizes attribute instead
(400px wide on a tablet) and a short panel cut its bottom off. */
.c-hero-art {
position: absolute;
top: 0;
right: 0;
left: 0;
display: grid;
height: var(--hero-art-h);
min-height: var(--hero-art-min);
grid-template-columns: minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr);
place-items: center;
padding-bottom: var(--s-3);
overflow: clip;
background: var(--red);
}
/* The torn bottom edge of the stacked layout's red panel (below 1024px only, so
a desktop never fetches it). */
@media (max-width: 1023px) {
.c-hero-art::after {
position: absolute;
right: 0;
bottom: -1px;
left: 0;
z-index: 2;
height: 42%;
content: "";
background: url("/assets/hero-tear-phone-v1.svg") center bottom / 100% 100% no-repeat;
pointer-events: none;
}
}
.c-hero-burst {
position: absolute;
inset: 0;
z-index: 1;
background: url("/assets/hero-burst-v1.svg") center / cover no-repeat;
}
.c-hero-slab {
position: relative;
z-index: 3;
width: auto;
max-width: 86vw;
height: 100%;
object-fit: contain;
}
.c-hero-words {
position: relative;
z-index: 4;
display: flex;
width: 100%;
max-width: var(--hero-words-max);
flex-direction: column;
align-items: flex-start;
padding-top: max(var(--hero-art-h), var(--hero-art-min));
}
/* --hero-title: the screen's width, and from 1024px its height as well, sets
the size, so a laptop's short screen still shows the card and its button.
--hero-title-scale: a script whose capitals run wider steps down. */
.c-hero-title {
margin-bottom: var(--s-6);
font-size: calc(var(--hero-title) * var(--hero-title-scale));
line-height: 1.1;
overflow-wrap: break-word;
hyphens: manual;
text-wrap: balance;
}
.c-hero-lead {
max-width: var(--hero-lead-max);
margin-bottom: var(--s-7);
}
.c-program {
width: 100%;
}
.c-program-card {
display: flex;
flex-direction: column;
gap: var(--s-4);
padding: var(--s-2);
border-radius: var(--r-m);
background: var(--surface-high);
}
.c-program-title {
padding: var(--s-2) var(--s-3);
}
/* Two lines at every width: the gold name, then the white words under
it, which wrap inside the card where a language says them longer. */
.c-program-title > span {
display: block;
}
.c-status-panel {
display: flex;
flex-direction: column;
gap: var(--s-4);
padding: var(--s-4) var(--s-3);
border-radius: var(--r-sm);
background: var(--gold-panel);
}
.c-status-text {
display: flex;
min-width: 0;
flex-direction: column;
gap: var(--s-1);
margin-inline-start: var(--s-2);
}
.c-status-panel .c-btn {
width: 100%;
}
.c-hero-note {
margin-top: var(--s-7);
}
/* The card from 768px, the stacked tablet hero included: rounder,
roomier, and the status beside its button, never under it. The button keeps its
label on one line while it can; the status words take what is left and wrap,
and only when even they cannot give way does the button's label wrap too. */
@media (min-width: 768px) {
.c-program-card {
padding: var(--s-3) var(--s-4) var(--s-4);
border-radius: var(--r-xxl);
}
.c-program-title {
padding: var(--s-2) var(--s-5);
}
.c-status-panel {
display: grid;
align-items: center;
gap: var(--s-6);
padding: var(--s-5);
border-radius: var(--r-m);
grid-template-columns: minmax(min-content, 1fr) auto;
}
.c-status-panel .c-btn {
width: auto;
}
.c-status-text {
margin-inline-start: 0;
}
}
@media (min-width: 1024px) {
.c-hero {
justify-content: center;
padding: var(--s-9) var(--s-11);
background: var(--red);
}
/* the dark side of the hero */
.c-hero::before {
position: absolute;
top: 0;
bottom: 0;
left: 0;
z-index: 0;
width: var(--hero-split);
content: "";
background: var(--surface);
}
/* the torn edge: the SVG's solid left continues the dark side */
.c-hero::after {
position: absolute;
top: 0;
bottom: 0;
left: calc(var(--hero-split) - 1px);
z-index: 2;
width: calc(100% - var(--hero-split));
content: "";
background: url("/assets/hero-tear-v1.svg") left top / auto 100% no-repeat;
pointer-events: none;
}
.c-hero-art {
top: 0;
bottom: 0;
left: var(--hero-split);
height: auto;
min-height: 0;
padding: 0 var(--hero-art-in-end) 0 var(--hero-art-in-start);
background: none;
}
/* the burst is centred on the art, which sits --hero-art-x into this layer */
.c-hero-burst {
--burst: max(130vh, 76vw);
background-position: calc(var(--hero-art-x) - var(--burst) / 2) 50%;
background-size: var(--burst) var(--burst);
}
.c-hero-slab {
width: min(47vw, (100vh - var(--header-h) - 100px) * var(--hero-slab-ratio), 800px);
max-width: none;
height: auto;
}
/* The left column, 46vw. The title takes all of it, so a long headline
breaks into two or three lines rather than four. */
.c-hero-words {
width: var(--hero-words);
max-width: none;
padding-top: 0;
}
.c-hero-lead {
max-width: 30vw;
}
/* 31vw, hung out of the column by the card's own corner radius
(36px); never narrower than the title and the status line need */
.c-program {
width: max(31vw, 340px);
max-width: 800px;
transform: translateX(calc(-1 * var(--r-xxl)));
}
/* 32px in the 31vw card, smaller on a narrow or short screen, so a long
name ("Programa de criadores") stays on fewer lines and the button above the
fold; the line height keeps 38 over 32 */
.c-program-title {
font-size: var(--program-title);
line-height: 1.1875;
}
.c-hero-note {
max-width: 30vw;
}
}
/* A laptop's short screen (1366x768, 1280x800): the same layout, tighter, so
the card's Apply button and the line under it stay above the fold. */
@media (min-width: 1024px) and (max-height: 860px) {
.c-hero {
padding-block: var(--s-7);
}
.c-hero-title {
margin-bottom: var(--s-4);
}
.c-hero-lead {
max-width: 36vw;
margin-bottom: var(--s-6);
}
.c-hero-note {
margin-top: var(--s-6);
}
}
/* A browser window 700px tall or less (a 14-inch laptop at 150%, a 1280x720
screen): a step tighter again. */
@media (min-width: 1024px) and (max-height: 700px) {
.c-hero {
padding-block: var(--s-6);
}
.c-hero-lead {
margin-bottom: var(--s-5);
}
.c-program-card {
gap: var(--s-3);
}
}
/* The small hero (the 404 page): the same field, edge and burst, no taller than
it needs to be, the tank sticker where the key art stands, and two buttons
under the words instead of the program card. */
.c-hero--small {
min-height: 0;
}
/* never taller than the panel, so a short stacked panel shows the whole sticker */
.c-hero-sticker {
position: relative;
z-index: 3;
width: min(72vw, var(--sticker-hero));
height: auto;
max-height: 100%;
object-fit: contain;
}
.c-hero-actions {
display: flex;
flex-wrap: wrap;
gap: var(--s-3);
}
/* a phone: full width, one under the other; from 768px each button is
its own width, so the gold never stretches across a tablet */
@media (max-width: 767px) {
.c-hero-actions {
width: 100%;
flex-direction: column;
}
}
@media (min-width: 1024px) {
.c-hero--small {
min-height: min(calc(100vh - var(--header-h)), 640px);
}
/* one step down from the home page's 80px, so the words stay on the dark side */
.c-hero--small .c-hero-title {
max-width: 32vw;
font-size: calc(min(var(--d2), 4.4vw) * var(--hero-title-scale));
}
.c-hero-sticker {
width: min(30vw, var(--sticker-hero));
}
/* stacked, one width, until the dark side is wide enough for the two in a row */
.c-hero-actions {
flex-direction: column;
}
}
/* 1400px: the dark side (35vw) holds the 64px gutter and both buttons side by side */
@media (min-width: 1400px) {
.c-hero-actions {
flex-direction: row;
}
}
/* --------------------------------------------------------------------------
8. The section shell: 100px 64px around a 1100px column, the shard texture
behind, the title and its intro 36px in from the cards' edge.
-------------------------------------------------------------------------- */
.c-section {
padding: var(--section-y) var(--section-x);
background: var(--bg) url("/assets/shards-v2.svg") 50% var(--shard-y) / var(--shard-tile) auto repeat;
}
/* Each section restarts the tile at its own top: three different starting heights, so
neighbouring headings and the cards of two 2+1 rows never sit on the same shards. */
main > :nth-child(3n + 2) {
--shard-y: calc(var(--shard-tile) / -3);
}
main > :nth-child(3n) {
--shard-y: calc(var(--shard-tile) / -1.5);
}
.c-shell {
width: 100%;
max-width: var(--shell);
margin-inline: auto;
}
/* Below 400px wide the title steps down with the screen, so a long Russian or
German word ("присоединиться") fits a 320px phone whole instead of breaking. */
.c-section-title {
padding-inline: var(--title-in);
color: var(--fg-1);
font-size: min(var(--d3), 9vw);
font-weight: 700;
letter-spacing: var(--track);
line-height: var(--d3-lh);
overflow-wrap: break-word;
}
.c-section-intro {
margin-top: var(--s-4);
padding-inline: var(--title-in);
color: var(--fg-2);
font-size: var(--b2);
line-height: var(--b2-lh);
}
.c-section-intro--lg {
font-size: var(--b1);
line-height: var(--b1-lh);
}
/* The italic note under a grid. */
.c-note {
max-width: 840px;
margin: var(--s-7) auto 0;
color: var(--fg-2);
font-size: var(--b3);
font-style: italic;
line-height: var(--b3-lh);
}
@media (min-width: 768px) {
.c-note {
text-align: center;
}
}
/* --------------------------------------------------------------------------
9. Cards: two to a row at 538px, an odd last one centred on its own row.
-------------------------------------------------------------------------- */
.c-cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--s-4);
margin-top: var(--s-6);
}
.c-card {
display: flex;
width: 100%;
gap: var(--s-4);
padding: var(--s-3);
border-radius: var(--r-m);
background: var(--surface);
}
@media (min-width: 768px) {
.c-cards {
gap: var(--s-6);
margin-top: var(--s-8);
}
.c-card {
width: calc(50% - var(--s-6) / 2);
padding: var(--s-6);
}
}
.c-card-body {
display: flex;
min-width: 0;
flex: 1;
flex-direction: column;
gap: var(--s-3);
}
/* A card that is only a title ("13 or older") stretches to its row's height
beside a card with text: the glyph and the title sit in its middle rather than
on top of an empty surface. */
.c-card:not(:has(.c-card-text)) {
align-items: center;
}
@media (min-width: 768px) {
.c-card-body {
gap: var(--s-4);
}
}
.c-card-title {
color: var(--fg-1);
font-size: var(--d6);
font-weight: 700;
letter-spacing: var(--track);
line-height: var(--d6-lh);
}
.c-card-text {
color: var(--fg-3);
font-size: var(--b3);
line-height: var(--b3-lh);
}
.c-card-text a {
color: var(--fg-1);
text-decoration: underline;
text-underline-offset: 2px;
}
/* A small glyph of our own (inline SVG), white, in the icon column. */
.c-glyph {
width: var(--glyph);
height: var(--glyph);
flex: none;
color: var(--fg-1);
}
/* --------------------------------------------------------------------------
10. Perks and steps. The icon slot holds a small crop of our reward art.
-------------------------------------------------------------------------- */
/* A reward's own picture, large enough to read (the CREATOR CODE card's words, the
Spectator button's label): 112x70 on phones, 160x100 from 768px. */
.c-perk-icon {
width: var(--perk-w);
height: var(--perk-h);
flex: none;
object-fit: contain;
}
.c-perk-tag {
color: var(--fg-3);
font-size: var(--l2);
font-weight: 700;
letter-spacing: var(--track-label);
line-height: var(--l2-lh);
text-transform: uppercase;
}
.c-perk-head {
display: flex;
flex-direction: column;
gap: var(--s-2);
}
/* How it works (2026-10-04): what we look for, how to apply, how the system works.
A sub-heading per part; the three "look for" cards share one row from 1024px; the two
lists of steps sit side by side on a surface each, the gold number beside every line. */
.c-sub {
margin-top: var(--s-8);
padding-inline: var(--title-in);
color: var(--fg-1);
font-size: var(--d5);
font-weight: 700;
letter-spacing: var(--track);
line-height: var(--d5-lh);
}
.c-section-title + .c-sub {
margin-top: var(--s-6);
}
.c-cards--3 {
margin-top: var(--s-4);
}
.c-how {
display: grid;
gap: var(--s-4);
margin-top: var(--s-8);
}
.c-how-col {
padding: var(--s-6);
border-radius: var(--r-m);
background: var(--surface);
}
.c-how-col .c-sub {
margin-top: 0;
padding-inline: 0;
}
.c-how-steps {
display: grid;
gap: var(--s-4);
margin-top: var(--s-5);
}
.c-how-steps li {
display: flex;
align-items: baseline;
gap: var(--s-4);
}
.c-how-steps p {
color: var(--fg-3);
font-size: var(--b2);
line-height: var(--b2-lh);
}
.c-how-steps b {
color: var(--fg-1);
}
.c-how-steps a {
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;
}
@media (min-width: 1024px) {
.c-cards--3 .c-card {
width: calc((100% - 2 * var(--s-6)) / 3);
}
.c-how {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: var(--s-6);
}
}
/* How it works: the step's number stands in the icon column. */
.c-step-num {
width: var(--icon);
flex: none;
background: var(--gold-text);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-size: var(--d4);
font-weight: 700;
letter-spacing: var(--track);
line-height: var(--d6-lh);
text-align: center;
}
/* The two videos that made us: picture on top, title, who and how many. */
.c-video {
flex-direction: column;
}
.c-video-shot {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
border-radius: var(--r-sm);
object-fit: cover;
}
.c-video figcaption {
display: flex;
flex-direction: column;
gap: var(--s-2);
}
/* --------------------------------------------------------------------------
11. Status boxes: a small label and a value in a framed box, used for the
three gifts, the tiers and the final call. Insets: 28px across on a phone,
36px from 768px (not our --s-7 / --s-9).
Two departures, on purpose: a gift box puts the number above its word
("5,000 / CRYSTALS" reads as "5,000 crystals"), and a tier box's value is
20px, not 32px, because what a tier takes is a sentence, not two words.
-------------------------------------------------------------------------- */
.c-status-box {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--s-1);
padding: var(--s-4) var(--status-x);
border: 1px solid var(--border);
border-radius: var(--r-lg);
background: var(--surface-high);
text-align: center;
}
.c-status-box .c-l2 {
color: var(--fg-3);
}
/* The gift (owner, 2026-10-03): one picture of all of it, painted box and the game's own
crystals, Containers and Premium crown, with the three facts beside it. Stacked on phones
and tablets: the picture, then the facts in one row. (.c-gifts below is the older three
tiles, still used by the translated pages until they are rebuilt.) */
.c-gift {
display: grid;
gap: var(--s-6);
margin-top: var(--s-6);
}
.c-gift-art {
width: 100%;
height: auto;
}
.c-gift-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--s-3);
}
.c-gift-list .c-status-box {
padding-inline: var(--s-2);
}
@media (min-width: 1024px) {
.c-gift {
grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
align-items: center;
gap: var(--s-10);
}
.c-gift-list {
grid-template-columns: minmax(0, 1fr);
gap: var(--s-4);
}
}
.c-gifts {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--s-4);
margin-top: var(--s-6);
}
.c-gifts .c-status-box {
flex: 1 1 200px;
max-width: 300px;
padding-block: var(--s-6) var(--s-5);
}
.c-gifts img {
width: var(--gift-w);
height: var(--gift-h);
margin-bottom: var(--s-3);
object-fit: contain;
}
/* Phones: three compact rows, the picture beside its number. */
@media (max-width: 767px) {
.c-gifts {
flex-direction: column;
align-items: stretch;
gap: var(--s-3);
}
.c-gifts .c-status-box {
display: grid;
max-width: none;
flex: none;
align-items: center;
justify-items: start;
padding: var(--s-3) var(--s-6) var(--s-3) var(--s-3);
column-gap: var(--s-4);
grid-template-columns: auto minmax(0, 1fr);
text-align: start;
}
.c-gifts img {
grid-row: span 2;
margin-bottom: 0;
}
}
@media (min-width: 768px) {
.c-gifts {
gap: var(--s-6);
margin-top: var(--s-8);
}
}
/* --------------------------------------------------------------------------
12. The tiers band. Full bleed, two columns: the
tier's art with a spiked right edge, and the words with the tabs over them.
Phones: art on top, spiked along its bottom. Without JavaScript the first
tier shows and the others are reached through their tab links (:target).
-------------------------------------------------------------------------- */
.c-tiers-head {
padding: var(--section-y) var(--section-x) var(--s-6);
background: var(--bg) url("/assets/shards-v2.svg") 50% var(--shard-y) / var(--shard-tile) auto repeat;
}
@media (min-width: 768px) {
.c-tiers-head {
padding-bottom: var(--s-8);
}
}
.c-band {
position: relative;
display: flex;
flex-direction: column;
isolation: isolate;
overflow: hidden;
background: var(--bg);
}
.c-band-tints {
position: absolute;
inset: 0;
z-index: -1;
}
.c-band-tints i {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, var(--tint), transparent);
opacity: 0;
transition: opacity var(--t-slow) var(--ease);
}
.c-band-tints i:first-child,
.c-band-tints i.is-active {
opacity: 1;
}
.c-band.is-js .c-band-tints i:first-child:not(.is-active) {
opacity: 0;
}
/* From 1024px each tier has its own picture cut for the tall column (the
tier-*-band files, about 0.95 wide for 1 tall), its subject clear of the spiked
edge. Where the column is narrower than that, --focus-x says which side gives
way: the creator tank keeps its rear (the flag goes), the partner column keeps its
lead tank. Below 1024px the band is stacked like the hero (a 384px column on a
tablet cut half the creator tank away) and shows the 16:9 picture centred.
Superstar is the exception (owner, 2026-10-03): the live site's hero, the Viking on
the lit stage, whole and 2:1. The band is always 678 tall, so it always shows at
1356x678, full height, and the column is a window on it: the whole tank from 1920,
the turret and gun at 1280 to 1440, the gun and the gold head at 1024. */
@media (min-width: 1024px) {
[data-tier-art="creator"] { --focus-x: 85%; }
[data-tier-art="partner"] { --focus-x: 48%; }
[data-tier-art="signature"] { --focus-x: 50%; }
}
/* Below 1200px the creator tank is wider than the column left of the spikes (526
against 432 to 496 px), so something must go: here its rear runs under the
spikes and the whole gun stays, which is what makes it read as a tank. */
@media (min-width: 1024px) and (max-width: 1199px) {
[data-tier-art="creator"] { --focus-x: 60%; }
[data-tier-art="partner"] { --focus-x: 44%; }
}
[data-tier-tint="creator"] { --tint: var(--tier-creator-tint); }
[data-tier-tint="partner"] { --tint: var(--tier-partner-tint); }
[data-tier-tint="signature"] { --tint: var(--tier-signature-tint); }
/* Stacked: the 16:9 picture a little taller than itself, never taller than most
of the screen (a phone or tablet held sideways) */
.c-band-art {
position: relative;
height: min(60vw, 70vh);
overflow: hidden;
-webkit-mask-image: linear-gradient(#000, #000), url("/assets/band-spikes-phone-v1.svg");
mask-image: linear-gradient(#000, #000), url("/assets/band-spikes-phone-v1.svg");
-webkit-mask-position: 0 0, 0 100%;
mask-position: 0 0, 0 100%;
-webkit-mask-size: 100% calc(100% - var(--s-8) + 1px), 100% var(--s-8);
mask-size: 100% calc(100% - var(--s-8) + 1px), 100% var(--s-8);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.c-band-art img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: var(--focus-x, 50%) 50%;
opacity: 0;
transition: opacity var(--t-slow) var(--ease);
}
.c-band-art [data-tier-art="creator"] {
opacity: 1;
}
/* Only the first tier's picture loads with the page: the other two have no box
(so their lazy loading never starts) until creator-site.js primes the band, the
first time a tab is pointed at or chosen, or, with no script, their tier is in
the address. */
.c-band-art img:not([data-tier-art="creator"]) {
display: none;
}
.c-band.is-primed .c-band-art img,
.c-band:not(.is-js):has(#tier-partner:target) [data-tier-art="partner"],
.c-band:not(.is-js):has(#tier-signature:target) [data-tier-art="signature"] {
display: block;
}
/* A 24px inset below the words on a phone, so the band ends close under the
status box. The panels share one cell; stacked (below 1024px) only the shown one
takes room, so the band ends under its own status box and a tab moves only what
is below it (see "With JavaScript" further down). */
.c-band-text {
display: flex;
flex-direction: column;
align-items: center;
padding: var(--s-6) var(--s-4);
text-align: center;
}
.c-tabs {
display: flex;
align-items: center;
gap: var(--s-3);
margin-top: var(--s-5);
}
.c-tab {
position: relative;
display: grid;
width: var(--tab);
height: var(--tab);
place-items: center;
border-radius: var(--r-sm);
background: var(--fill-tertiary);
opacity: 0.6;
transition: opacity var(--t-fast) var(--ease);
}
.c-tab img {
width: var(--tab-art);
height: var(--tab-art);
object-fit: contain;
}
.c-tab::after {
position: absolute;
inset: 0;
content: "";
border-radius: inherit;
box-shadow: var(--halo);
opacity: 0;
pointer-events: none;
transition: opacity var(--t-fast) var(--ease);
}
@media (hover: hover) {
.c-tab:hover {
opacity: 1;
}
.c-tab:hover::after {
opacity: 1;
}
}
/* The tiers as words, not rank icons (owner, 2026-10-04): the name in its tier's colour. */
.c-tab--word {
width: auto;
padding-inline: var(--s-4);
}
.c-tab-word {
font-size: var(--l1, 0.875rem);
font-weight: 800;
letter-spacing: var(--track-label);
text-transform: uppercase;
}
#tab-creator .c-tab-word { color: var(--tier-creator); }
#tab-partner .c-tab-word { color: var(--tier-partner); }
#tab-signature .c-tab-word { color: var(--tier-signature); }
/* The same words where a milestone box would show a picture (leaderboard). */
.c-tier-mark {
display: grid;
height: var(--gift-h);
margin-bottom: var(--s-3);
place-items: center;
font-size: var(--d5);
font-weight: 800;
letter-spacing: var(--track);
line-height: 1;
text-transform: uppercase;
}
.c-tier-mark--partner { color: var(--tier-partner); }
.c-tier-mark--signature { color: var(--tier-signature); }
/* The selected tab: full strength, a light 2px ring. No JS: the first one. */
.c-tab[aria-selected="true"] {
opacity: 1;
box-shadow: inset 0 0 0 2px var(--fg-1);
}
.c-tier-panels {
display: grid;
width: 100%;
align-content: start;
justify-items: center;
}
.c-tier-panel {
display: flex;
max-width: 460px;
flex-direction: column;
align-items: center;
grid-area: 1 / 1;
}
.c-band:not(.is-js) .c-tier-panel {
display: none;
}
.c-band:not(.is-js) .c-tier-panel:first-child,
.c-band:not(.is-js) .c-tier-panels:has(.c-tier-panel:target) .c-tier-panel:target {
display: flex;
}
.c-band:not(.is-js) .c-tier-panels:has(.c-tier-panel:target) .c-tier-panel:first-child:not(:target) {
display: none;
}
.c-band:not(.is-js):has(#tier-partner:target) [data-tier-art="partner"],
.c-band:not(.is-js):has(#tier-signature:target) [data-tier-art="signature"] {
opacity: 1;
}
.c-band:not(.is-js):has(#tier-partner:target, #tier-signature:target) [data-tier-art="creator"] {
opacity: 0;
}
/* ...and the tab and the tint follow the tier in the address, as they do with JS */
.c-band:not(.is-js):has(#tier-partner:target) #tab-partner,
.c-band:not(.is-js):has(#tier-signature:target) #tab-signature {
opacity: 1;
box-shadow: inset 0 0 0 2px var(--fg-1);
}
.c-band:not(.is-js):has(#tier-partner:target, #tier-signature:target) #tab-creator {
opacity: 0.6;
box-shadow: none;
}
.c-band:not(.is-js):has(#tier-partner:target) [data-tier-tint="partner"],
.c-band:not(.is-js):has(#tier-signature:target) [data-tier-tint="signature"] {
opacity: 1;
}
.c-band:not(.is-js):has(#tier-partner:target, #tier-signature:target) [data-tier-tint="creator"] {
opacity: 0;
}
/* With JavaScript the three panels share one cell and cross-fade. */
.c-band.is-js .c-tier-panel {
opacity: 0;
visibility: hidden;
transition: opacity var(--t-base) var(--ease), visibility 0s linear var(--t-base);
}
.c-band.is-js .c-tier-panel.is-active {
opacity: 1;
visibility: visible;
transition: opacity var(--t-base) var(--ease), visibility 0s;
}
/* Stacked, the tabs sit above the panel, so a shorter tier may make the band
shorter: the hidden panels leave the flow (still in the same cell, so the
outgoing one fades out where it stood) and the band follows the shown tier
instead of keeping the tallest one's room under every tier. From 1024px the
words are centred in the band, so there the cell keeps the tallest panel's
height and the tabs never jump. */
@media (max-width: 1023px) {
.c-band.is-js .c-tier-panels {
position: relative;
}
.c-band.is-js .c-tier-panel:not(.is-active) {
position: absolute;
top: 0;
right: 0;
left: 0;
margin-inline: auto;
}
}
.c-band.is-js .c-band-art img {
opacity: 0;
}
.c-band.is-js .c-band-art img.is-active {
opacity: 1;
}
.c-tier-name {
margin-top: var(--s-7);
font-size: var(--d3);
font-weight: 700;
letter-spacing: var(--track);
line-height: var(--d3-lh);
text-transform: uppercase;
}
#tier-creator .c-tier-name { color: var(--tier-creator); }
#tier-partner .c-tier-name { color: var(--tier-partner); }
#tier-signature .c-tier-name { color: var(--tier-signature); }
.c-tier-perks {
display: flex;
flex-direction: column;
gap: var(--s-1);
margin-top: var(--s-4);
padding-inline: var(--s-6);
color: var(--fg-2);
font-size: var(--b2);
line-height: var(--b2-lh);
}
.c-tier-panel .c-status-box {
margin-top: var(--s-7);
}
/* "Join with 10,000 followers. Climb with 250 players brought."
is one translated string: each bold label sits on its own line in the
status box's small capitals, the words after it in the value style. */
.c-tier-req {
color: var(--fg-1);
font-size: var(--d6);
font-weight: 700;
letter-spacing: var(--track);
line-height: var(--d6-lh);
}
.c-tier-req b {
display: block;
margin-bottom: var(--s-1);
color: var(--fg-3);
font-size: var(--l2);
letter-spacing: var(--track-label);
line-height: var(--l2-lh);
text-transform: uppercase;
}
.c-tier-req b:not(:first-child) {
margin-top: var(--s-3);
}
/* Two columns from 1024px; below that the band is stacked like the hero */
@media (min-width: 1024px) {
.c-band {
display: grid;
min-height: 678px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.c-band-art {
height: auto;
-webkit-mask-image: linear-gradient(#000, #000), url("/assets/band-spikes-v2.svg");
mask-image: linear-gradient(#000, #000), url("/assets/band-spikes-v2.svg");
-webkit-mask-position: 0 0, 100% 0;
mask-position: 0 0, 100% 0;
-webkit-mask-size: calc(100% - var(--band-spikes) + 1px) 100%, var(--band-spikes) 100%;
mask-size: calc(100% - var(--band-spikes) + 1px) 100%, var(--band-spikes) 100%;
}
/* All three tiers show their whole 2:1 picture (owner, 2026-10-05: the
cover crop was "too zoomed in"): full column width, centred, the top and
bottom edges fading into the tint, never shorter than 60% of the band. */
.c-band-art [data-tier-art="creator"],
.c-band-art [data-tier-art="partner"],
.c-band-art [data-tier-art="signature"] {
top: 50%;
bottom: auto;
height: auto;
min-height: 60%;
aspect-ratio: 2 / 1;
transform: translateY(-50%);
object-position: 50% 50%;
-webkit-mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent);
mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent);
}
.c-band-tints i {
background: linear-gradient(to right, var(--tint), transparent);
}
.c-band-text {
justify-content: center;
padding: var(--s-12) var(--s-11);
}
.c-tier-name {
margin-top: var(--s-10);
}
.c-tier-perks {
margin-top: var(--s-6);
padding-inline: 0;
}
.c-tier-panel .c-status-box {
margin-top: var(--s-10);
}
}
/* --------------------------------------------------------------------------
13. Top creators: the first three, from the live feed, as cards in a column.
-------------------------------------------------------------------------- */
.c-top3 {
max-width: 760px;
margin: var(--s-6) auto 0;
}
/* creator-site.js writes the list: an , so the place is said as well as shown. */
.c-top3-list {
display: flex;
flex-direction: column;
gap: var(--s-3);
}
.c-top3-row {
display: flex;
align-items: center;
gap: var(--s-4);
padding: var(--s-3) var(--s-6);
border-radius: var(--r-m);
background: var(--surface);
}
.c-top3-row img {
width: var(--medal);
height: var(--medal);
flex: none;
object-fit: contain;
}
/* A creator's name is the point of the row: it is never cut short. */
.c-top3-row b {
min-width: 0;
flex: 1;
color: var(--fg-1);
font-size: var(--d6);
font-weight: 700;
line-height: var(--d6-lh);
overflow-wrap: anywhere;
}
.c-top3-row span {
flex: none;
color: var(--fg-2);
font-size: var(--b3);
line-height: var(--b3-lh);
}
/* A phone: the count goes under the name, so the name has the whole row. */
@media (max-width: 767px) {
.c-top3-row {
display: grid;
padding: var(--s-3) var(--s-4);
gap: 0 var(--s-4);
grid-template-columns: auto minmax(0, 1fr);
}
.c-top3-row img {
grid-row: span 2;
}
}
.c-top3-empty {
max-width: 640px;
margin-inline: auto;
color: var(--fg-2);
font-size: var(--b3);
font-style: italic;
line-height: var(--b3-lh);
text-align: center;
}
.c-more {
display: flex;
justify-content: center;
margin-top: var(--s-7);
}
@media (min-width: 768px) {
.c-top3 {
margin-top: var(--s-8);
}
}
/* --------------------------------------------------------------------------
14. FAQ: one box per question. , so it opens with no script; only the
chevron turns and the tint fades (no height animation). Our sticker sits on
the top-right corner of the list.
-------------------------------------------------------------------------- */
.c-faq-section {
overflow-x: clip;
}
.c-faq {
position: relative;
display: flex;
flex-direction: column;
gap: var(--s-4);
margin-top: var(--s-7);
}
/* Behind the questions: the first item's see-through right end lies
over it. */
.c-sticker {
position: absolute;
top: calc(var(--sticker) * -0.5);
/* hangs 40% past the list's corner, but never past the screen's edge */
right: calc(-1 * min(var(--sticker) * 0.4, (100vw - min(var(--shell), 100vw - 2 * var(--section-x))) / 2 - var(--s-2)));
z-index: 0;
width: var(--sticker);
height: auto;
pointer-events: none;
}
/* On a narrow screen it would sit on the intro's words: it goes. */
@media (max-width: 767px) {
.c-sticker {
display: none;
}
}
.c-faq-item {
position: relative;
z-index: 1;
border-radius: var(--r-sm);
background: linear-gradient(90deg, var(--surface-faq) 40%, var(--surface-faq-fade));
}
/* the open tint, and the hover halo: both pseudo-elements, both opacity */
.c-faq-item::before,
.c-faq-item::after {
position: absolute;
inset: 0;
content: "";
border-radius: inherit;
opacity: 0;
pointer-events: none;
}
.c-faq-item::before {
background: linear-gradient(90deg, transparent 40%, var(--red-fade));
transition: opacity var(--t-base) var(--ease);
}
.c-faq-item::after {
box-shadow: var(--halo);
transition: opacity var(--t-fast) var(--ease);
}
.c-faq-item[open]::before {
opacity: 1;
}
@media (hover: hover) {
.c-faq-item:hover::after {
opacity: 1;
}
}
.c-faq-item summary {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-2);
padding: var(--s-3) var(--s-4);
border-radius: inherit;
color: var(--fg-1);
cursor: pointer;
font-size: var(--d6);
font-weight: 700;
letter-spacing: var(--track);
line-height: var(--d6-lh);
list-style: none;
}
.c-faq-item summary::-webkit-details-marker {
display: none;
}
/* An 18x12 glyph, 2.5 units thick */
.c-chevron {
width: 18px;
height: 12px;
flex: none;
color: var(--fg-1);
transition: transform var(--t-fast) var(--ease);
}
.c-faq-item[open] .c-chevron {
transform: rotate(180deg);
}
.c-faq-body {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: var(--s-4);
padding: var(--s-3) var(--s-4) var(--s-4);
color: var(--fg-2);
font-size: var(--b2);
line-height: var(--b2-lh);
}
/* From 768px the FAQ title stands 24px in, not the other sections' 36px. On a
phone it keeps the shell's own inset (16 + 8 = 24px), in line with every other
section. */
@media (min-width: 768px) {
.c-faq-section .c-section-title,
.c-faq-section .c-section-intro {
padding-inline: var(--s-6);
}
.c-faq-item {
border-radius: var(--r-m);
}
.c-faq-item summary {
padding: var(--s-4) var(--s-5);
}
.c-faq-body {
padding: var(--s-2) var(--s-5) var(--s-5);
}
}
/* --------------------------------------------------------------------------
15. The final call and the data line.
-------------------------------------------------------------------------- */
.c-final {
padding: var(--section-y) var(--section-x);
background: var(--bg) linear-gradient(to bottom, transparent, var(--band-tint) 50%, transparent);
}
.c-final .c-shell {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.c-final-text {
max-width: 400px;
margin-top: var(--s-4);
}
.c-final .c-status-box {
margin-top: var(--s-7);
}
.c-final .c-btn {
margin-top: var(--s-6);
}
@media (min-width: 768px) {
.c-final-text {
margin-top: var(--s-6);
}
.c-final .c-status-box {
margin-top: var(--s-9);
}
}
.c-dataline {
padding: var(--s-6) var(--s-4);
background: var(--bg);
}
.c-dataline p {
max-width: 840px;
margin-inline: auto;
color: var(--fg-2);
font-size: var(--b3);
font-style: italic;
line-height: var(--b3-lh);
}
.c-dataline a {
text-decoration: underline;
text-underline-offset: 2px;
}
/* brighter under the pointer, at once: a colour never animates */
.c-dataline a:hover {
color: var(--fg-1);
}
@media (min-width: 768px) {
.c-dataline {
padding: var(--s-8) var(--s-11);
}
.c-dataline p {
text-align: center;
}
}
/* --------------------------------------------------------------------------
16. Footer: one centred column, 720px at most.
-------------------------------------------------------------------------- */
.c-footer {
display: flex;
justify-content: center;
padding: var(--s-6) var(--s-4) var(--s-9);
background: var(--bg);
}
.c-footer-in {
display: flex;
width: 100%;
max-width: 720px;
flex-direction: column;
align-items: center;
gap: var(--s-6);
color: var(--fg-2);
text-align: center;
}
.c-footer-logo {
display: inline-flex;
align-items: center;
gap: var(--s-4);
color: var(--fg-1);
}
.c-footer-logo img {
width: var(--logo-mark-lg);
height: var(--logo-mark-lg);
}
.c-footer-logo .c-logo-words span {
font-size: var(--logo-word-lg);
}
.c-footer-logo .c-logo-words b {
font-size: var(--logo-sub-lg);
}
.c-footer-copy {
font-size: var(--b3);
line-height: var(--b3-lh);
}
/* Stacked on a phone, each link a finger tall, the links closer together. */
.c-footer-links {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--s-1);
}
.c-footer-links a {
display: inline-flex;
min-height: var(--hit);
align-items: center;
color: var(--fg-2);
font-size: var(--l2);
font-weight: 700;
letter-spacing: var(--track-label);
line-height: var(--l2-lh);
text-transform: uppercase;
transition: opacity var(--t-base) var(--ease);
}
/* Hover to the tertiary tone, as an opacity (see --dim-2-3) */
@media (hover: hover) {
.c-footer-links a:hover {
opacity: var(--dim-2-3);
}
}
@media (min-width: 768px) {
.c-footer {
padding: var(--s-7) var(--s-11) var(--s-9);
}
.c-footer-logo img {
width: var(--logo-mark-xl);
height: var(--logo-mark-xl);
}
.c-footer-links {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: var(--s-4) var(--s-11);
}
}
/* a mouse needs no more than the words; a finger keeps the 44px */
@media (min-width: 768px) and (pointer: fine) {
.c-footer-links a {
min-height: var(--s-6);
}
}
/* --------------------------------------------------------------------------
17. The leaderboard page, in the home page's section shell: the range tabs in
the chip style of the tiers band, the champion in the hero's program card
(#242424, 36px corners, the gold panel), every other row a card, the
hall of fame and the milestones as status boxes. creator-site.js builds the
rows, the champion and the hall of fame cards; every class it writes is
styled here.
-------------------------------------------------------------------------- */
.c-board-wrap {
margin-top: var(--s-6);
}
@media (min-width: 768px) {
.c-board-wrap {
margin-top: var(--s-8);
}
}
/* The range tabs sit under the intro, on its 36px inset. */
/* Wraps rather than run off a 320px phone; a label that has to break keeps its
two lines close together. */
.c-board-tabs {
display: flex;
width: fit-content;
max-width: 100%;
flex-wrap: wrap;
gap: var(--s-3);
margin: 0 0 var(--s-6);
margin-inline-start: var(--title-in);
}
.c-board-tabs button {
position: relative;
min-height: var(--control-h);
padding: var(--s-2) var(--s-6);
border: 0;
border-radius: var(--r-sm);
background: var(--fill-tertiary);
color: var(--fg-1);
cursor: pointer;
font-size: var(--l2);
font-weight: 700;
letter-spacing: var(--track-label);
line-height: 1.2;
text-transform: uppercase;
opacity: 0.6;
transition: opacity var(--t-fast) var(--ease);
}
.c-board-tabs button[aria-pressed="true"] {
opacity: 1;
}
@media (hover: hover) {
.c-board-tabs button:hover {
opacity: 1;
}
}
@media (max-width: 400px) {
.c-board-tabs button {
padding-inline: var(--s-4);
white-space: nowrap;
}
}
.c-board-tabs button[aria-pressed="true"] {
box-shadow: inset 0 0 0 2px var(--fg-1);
}
.c-board {
display: grid;
gap: var(--s-3);
grid-template-columns: minmax(0, 1fr);
}
[data-board].is-loading {
min-height: 112px;
}
[data-board].is-loading [data-board-empty],
[data-board].is-loading .c-board-tabs {
display: none;
}
.c-board.is-roster .c-row {
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-areas: "face name links";
}
.c-champion {
position: relative;
display: grid;
align-items: center;
margin-bottom: var(--s-3);
padding: var(--s-6);
gap: var(--s-2) var(--s-6);
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-areas:
"face name metric"
"face links metric";
isolation: isolate;
overflow: hidden;
border-radius: var(--r-xxl);
background: var(--surface-high);
}
.c-champion::before {
position: absolute;
inset: 0;
z-index: -1;
content: "";
background: var(--gold-panel);
}
.c-champion-art {
position: absolute;
inset: 0;
z-index: -2;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 55%);
mask-image: linear-gradient(90deg, transparent, #000 55%);
}
.c-champion-art img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.18;
}
.c-champion-title {
display: flex;
min-width: 0;
align-items: center;
gap: var(--s-4);
grid-area: name;
}
.c-champion-medal {
width: auto;
height: var(--milestone);
flex: none;
}
.c-champion-side {
display: flex;
min-width: 0;
flex-wrap: wrap;
align-items: center;
gap: var(--s-4);
grid-area: links;
}
.c-champion-face {
display: grid;
width: var(--face-xl);
height: var(--face-xl);
grid-area: face;
place-items: center;
border-radius: var(--r-round);
background: var(--surface);
box-shadow: 0 0 0 3px var(--gold-1);
color: var(--fg-1);
font-size: var(--d3);
font-weight: 700;
object-fit: cover;
}
.c-champion .c-champion-name {
overflow: hidden;
overflow-wrap: anywhere;
color: var(--fg-1);
font-size: var(--d4);
font-weight: 700;
letter-spacing: var(--track);
line-height: var(--d4-lh);
text-overflow: ellipsis;
/* a nickname keeps the case its owner typed */
text-transform: none;
}
.c-champion-metric {
display: flex;
flex-direction: column;
align-items: flex-end;
grid-area: metric;
color: var(--fg-1);
text-align: right;
}
.c-champion-metric b {
font-size: var(--d2);
font-weight: 700;
letter-spacing: var(--track);
line-height: var(--d2-lh);
}
.c-champion-metric span {
color: var(--fg-3);
font-size: var(--l2);
font-weight: 700;
letter-spacing: var(--track-label);
line-height: var(--l2-lh);
text-transform: uppercase;
}
/* The champion card has no sweep of light, neither as it arrives nor on hover
(owner, 2026-10-03). Do not put one back. */
.c-row {
display: grid;
min-height: 64px;
align-items: center;
padding: var(--s-3) var(--s-6);
gap: var(--s-1) var(--s-4);
grid-template-columns: 2.5rem var(--face) minmax(0, 1fr) auto auto auto;
grid-template-areas: "pos face name links move metric";
border-radius: var(--r-m);
background: var(--surface);
}
.c-row > .c-row-pos { grid-area: pos; }
.c-row > .c-face { grid-area: face; }
.c-row > .c-row-name { grid-area: name; }
.c-row > .c-row-links { grid-area: links; }
.c-row > .c-move { grid-area: move; justify-self: end; }
.c-row > .c-row-metric { grid-area: metric; justify-self: end; }
.c-row-pos {
color: var(--fg-3);
font-size: var(--d6);
font-weight: 700;
}
.c-row.is-second .c-row-pos { color: var(--rank-2); }
.c-row.is-third .c-row-pos { color: var(--rank-3); }
.c-face {
display: grid;
width: var(--face);
height: var(--face);
place-items: center;
border-radius: var(--r-round);
background: var(--surface-high);
box-shadow: 0 0 0 1px var(--border);
object-fit: cover;
}
.c-face--letter {
color: var(--fg-1);
font-size: var(--d6);
font-weight: 700;
line-height: 1;
}
.c-row-name {
overflow: hidden;
color: var(--fg-1);
font-size: var(--d6);
font-weight: 700;
line-height: var(--d6-lh);
text-overflow: ellipsis;
white-space: nowrap;
}
.c-row-metric {
color: var(--fg-1);
font-size: var(--d6);
font-weight: 700;
}
.c-row-links {
display: flex;
align-items: center;
gap: var(--s-2);
}
/* A 32px chip, its hit area a finger wide: the transparent ::after reaches
6px past each edge (the chips stand 12px apart on a touch screen, so two
never overlap). */
.c-row-links a {
position: relative;
display: inline-grid;
width: var(--chip);
height: var(--chip);
place-items: center;
border-radius: var(--r-xs);
background: var(--fill-tertiary);
color: var(--fg-2);
}
.c-row-links a::after {
position: absolute;
inset: calc((var(--chip) - var(--hit)) / 2);
content: "";
}
@media (pointer: coarse) {
.c-row-links {
gap: var(--s-3);
}
}
.c-row-links a::before {
width: 15px;
height: 15px;
content: "";
background-color: currentColor;
-webkit-mask: var(--social-logo) no-repeat center / contain;
mask: var(--social-logo) no-repeat center / contain;
}
@media (hover: hover) {
.c-row-links a:hover {
color: var(--fg-1);
}
}
.c-row-links a.social-youtube { --social-logo: url("/assets/social-youtube.svg"); }
.c-row-links a.social-tiktok { --social-logo: url("/assets/social-tiktok.svg"); }
.c-row-links a.social-kick { --social-logo: url("/assets/social-kick.svg"); }
.c-row-links a.social-discord { --social-logo: url("/assets/nav-discord.svg"); }
.c-row-links a.social-facebook { --social-logo: url("/assets/social-facebook.svg"); }
/* A channel with no logo file (Twitch today) is its name, not a blank square. */
.c-row-links a:not(.social-youtube, .social-tiktok, .social-kick, .social-discord, .social-facebook) {
width: auto;
padding: 0 var(--s-3);
font-size: var(--l3);
font-weight: 700;
letter-spacing: var(--track-label);
text-transform: uppercase;
}
.c-row-links a:not(.social-youtube, .social-tiktok, .social-kick, .social-discord, .social-facebook)::before {
content: none;
}
.c-move {
display: inline-flex;
align-items: center;
gap: var(--s-1);
font-size: var(--b3);
font-weight: 700;
line-height: 1;
}
.c-move::before {
width: 0;
height: 0;
content: "";
border-inline: 5px solid transparent;
}
.c-move--up { color: var(--up); }
.c-move--up::before { border-bottom: 7px solid currentColor; }
.c-move--down { color: var(--down); }
.c-move--down::before { border-top: 7px solid currentColor; }
.c-move--same { color: var(--fg-3); }
.c-move--same::before {
width: 8px;
height: 2px;
border: 0;
background: currentColor;
}
.c-move--new { color: var(--gold-1); }
.c-move--new::before { content: none; }
/* Nothing counted yet: the honest line and the Apply button in one card, over
the creators' names. */
.c-board-empty {
display: grid;
justify-items: center;
gap: var(--s-4);
margin-bottom: var(--s-3);
padding: var(--s-6);
border-radius: var(--r-m);
background: var(--surface);
color: var(--fg-2);
font-size: var(--b2);
line-height: var(--b2-lh);
text-align: center;
}
.c-board-empty p {
max-width: 560px;
}
/* The hall of fame: each month's winner in a status box. The month is the
small capitals label, the count the gold value. */
.c-hof {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--s-4);
margin-top: var(--s-6);
}
.c-hof-card {
display: flex;
width: 240px;
flex-direction: column;
align-items: center;
gap: var(--s-1);
padding: var(--s-6) var(--s-4) var(--s-5);
border: 1px solid var(--border);
border-radius: var(--r-lg);
background: var(--surface-high);
text-align: center;
}
.c-hof-card .c-face {
width: var(--face-lg);
height: var(--face-lg);
margin-bottom: var(--s-3);
box-shadow: 0 0 0 3px var(--gold-1);
}
.c-hof-card .c-face--letter {
font-size: var(--d5);
}
.c-hof-card strong {
max-width: 100%;
overflow: hidden;
color: var(--fg-1);
font-size: var(--d6);
font-weight: 700;
letter-spacing: var(--track);
line-height: var(--d6-lh);
text-overflow: ellipsis;
white-space: nowrap;
}
.c-hof-card .c-meta {
color: var(--fg-3);
font-size: var(--l2);
font-weight: 700;
letter-spacing: var(--track-label);
line-height: var(--l2-lh);
text-transform: uppercase;
}
.c-hof-card .c-row-metric {
margin-top: var(--s-2);
background: var(--gold-text);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-size: var(--d4);
letter-spacing: var(--track);
line-height: var(--d4-lh);
}
@media (min-width: 768px) {
.c-hof {
gap: var(--s-6);
margin-top: var(--s-8);
}
}
/* The milestones wear the gift section's status boxes (section 11): five to a
row on a desktop, compact rows on a phone. What it takes is the label, what
it gives the value. */
.c-milestones img {
width: var(--milestone);
height: var(--milestone);
}
/* "10 players, then every 10" runs to two lines in a fifth of the shell */
.c-milestones .c-l2 {
line-height: 1.35;
text-wrap: balance;
}
.c-milestones .c-d6 {
margin-top: var(--s-1);
text-wrap: balance;
}
@media (min-width: 768px) {
.c-milestones .c-status-box {
justify-content: flex-start;
padding-inline: var(--s-4);
}
.c-milestones img {
width: var(--face-lg);
height: var(--face-lg);
margin-bottom: var(--s-2);
}
}
@media (max-width: 767px) {
.c-champion {
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"face"
"name"
"links"
"metric";
justify-items: center;
text-align: center;
}
.c-champion-metric {
align-items: center;
text-align: center;
}
.c-champion-face {
width: var(--face-xl-sm);
height: var(--face-xl-sm);
}
.c-row {
padding: var(--s-3);
gap: var(--s-1) var(--s-3);
grid-template-columns: 2rem var(--face-sm) minmax(0, 1fr) auto;
grid-template-areas:
"pos face name metric"
"pos face links move";
}
.c-face {
width: var(--face-sm);
height: var(--face-sm);
}
/* a creator's name wraps rather than end in an ellipsis */
.c-row-name {
overflow-wrap: anywhere;
text-overflow: clip;
white-space: normal;
}
.c-board.is-roster .c-row {
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas:
"face name"
"face links";
}
.c-hof-card {
width: 100%;
}
}
/* --------------------------------------------------------------------------
18. Forms (the apply page): the fields are the #161616 surface with 12px
corners, a 1px edge and a light focus ring, in one 720px column; the steps
above are the home page's step cards. Every state class creator-site.js writes
is here.
-------------------------------------------------------------------------- */
.c-shell--form {
max-width: var(--shell-form);
}
/* From 768px the fields' own edge is the column's edge, so the title stands on
it. On a phone both columns are the screen's width and the title keeps the
shell's inset, in line with "How to join" above it. */
@media (min-width: 768px) {
.c-shell--form .c-section-title {
padding-inline: 0;
}
}
/* The gold runs dark to the right: on a short button. Full width on a
phone; from 768px no wider than its words need, centred. */
.c-form-submit {
width: 100%;
}
@media (min-width: 768px) {
.c-form-submit {
width: auto;
min-width: 240px;
justify-self: center;
}
}
.c-form-stage {
display: grid;
gap: var(--s-4);
margin-top: var(--s-6);
}
@media (min-width: 768px) {
.c-form-stage {
gap: var(--s-5);
margin-top: var(--s-8);
}
}
/* Sent, or not sent: one card in place of the form. */
.c-form-done {
justify-items: center;
padding: var(--s-7) var(--s-4);
border-radius: var(--r-m);
background: var(--surface);
text-align: center;
}
.c-form-done p {
max-width: 480px;
}
.c-form-done .discord-button {
max-width: 360px;
}
@media (min-width: 768px) {
.c-form-done {
padding: var(--s-9) var(--s-11);
border-radius: var(--r-xxl);
}
}
.c-field {
display: grid;
min-width: 0;
gap: var(--s-2);
}
.c-field-row {
display: grid;
gap: var(--s-4);
grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
.c-field-row {
gap: var(--s-5);
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.c-form label {
color: var(--fg-2);
font-size: var(--l2);
font-weight: 700;
letter-spacing: var(--track-label);
line-height: 1.4;
text-transform: uppercase;
}
.c-form input,
.c-form select,
.c-form textarea {
width: 100%;
min-height: var(--field-h);
padding: var(--s-3) var(--s-4);
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--surface);
color: var(--fg-1);
/* 16px, the size below which iOS zooms into a field */
font-size: var(--b2);
font-weight: 500;
line-height: 1.4;
}
.c-form textarea {
min-height: 132px;
resize: vertical;
}
.c-form select {
appearance: none;
padding-right: 44px;
background-image:
linear-gradient(45deg, transparent 50%, var(--fg-3) 50%),
linear-gradient(135deg, var(--fg-3) 50%, transparent 50%);
background-position: calc(100% - 24px) calc(50% + 1px), calc(100% - 18px) calc(50% + 1px);
background-repeat: no-repeat;
background-size: 6px 6px, 6px 6px;
}
.c-form input::placeholder,
.c-form textarea::placeholder {
color: var(--fg-3);
}
.c-form input:hover,
.c-form select:hover,
.c-form textarea:hover {
border-color: var(--stroke);
}
.c-form input:focus-visible,
.c-form select:focus-visible,
.c-form textarea:focus-visible {
border-color: var(--fg-2);
outline: 2px solid var(--focus);
outline-offset: 2px;
}
.c-form input[aria-invalid="true"],
.c-form select[aria-invalid="true"],
.c-form textarea[aria-invalid="true"],
.c-field:has(.c-field-status.is-err) input,
.c-field:has(.c-field-status.is-err) select,
.c-field:has(.c-field-status.is-err) textarea {
border-color: var(--down);
}
.c-field-hint {
color: var(--fg-3);
font-size: var(--b3);
line-height: var(--b3-lh);
}
.c-field-status {
font-size: var(--b3);
font-weight: 700;
line-height: var(--b3-lh);
}
.c-field-status:empty {
display: none;
}
.c-field-status.is-err,
.c-field-hint.is-err {
color: var(--down);
}
.c-field-status.is-ok {
color: var(--up);
}
/* "Your channel", "About you", "Discord", "Before you send": the card title
size over a hairline. */
.c-form-part {
margin-top: var(--s-4);
padding-top: var(--s-6);
border-top: 1px solid var(--border);
color: var(--fg-1);
font-size: var(--d6);
font-weight: 700;
letter-spacing: var(--track);
line-height: var(--d6-lh);
}
.c-form .c-check label {
display: flex;
align-items: flex-start;
gap: var(--s-3);
color: var(--fg-2);
cursor: pointer;
font-size: var(--b2);
font-weight: 500;
letter-spacing: var(--track);
line-height: var(--b2-lh);
text-transform: none;
}
.c-form .c-check input {
width: 20px;
height: 20px;
min-height: 0;
flex: none;
margin: 2px 0 0;
padding: 0;
accent-color: var(--gold-1);
cursor: pointer;
}
.c-check a {
color: var(--fg-1);
text-decoration: underline;
text-underline-offset: 2px;
}
/* "Not yet" on the Discord question: the invite, in Discord's own colour. */
.c-join {
display: grid;
gap: var(--s-3);
padding: var(--s-5);
border-radius: var(--r-m);
background: var(--discord-tint);
box-shadow: inset 0 0 0 1px var(--discord-ring);
}
.c-form-stage p {
color: var(--fg-2);
}
.cf-turnstile {
margin-top: var(--s-2);
}
/* The human check never goes below 300px wide; zoom, unlike scale, also
shrinks the room it takes, so a 320px phone keeps its edges. */
@media (max-width: 380px) {
.c-form-stage .cf-turnstile {
zoom: 0.86;
}
}
/* --------------------------------------------------------------------------
19. Languages. Georgian has no capitals: uppercase gives Mtavruli, right for
a heading but wide, so the capitals step down a size and lose their
tracking. Armenian capitals run wide as well. Long words in German,
Armenian and Russian break rather than push the page sideways.
-------------------------------------------------------------------------- */
:is(:lang(ka), :lang(hy)) :is(.c-l2, .c-l3, .c-nav a, .c-footer-links a, .c-btn, .c-btn-quiet,
.c-perk-tag, .c-tier-req b, .c-logo-words, .c-logo-words b, .lang-menu a, .c-board-tabs button,
.c-form label) {
letter-spacing: 0;
}
/* The hero title's capitals: Georgian and Armenian at 78% of the English size
at any width; Russian, whose capitals are wider than Latin, a step down on a
desktop so "СНИМАЛИ TANKI" shares a line; Portuguese a smaller step, so
"TAMBÉM FOMOS" shares one wherever the screen's width sets the size (it is a
hair wider than the words column there, and the title ran to four lines). */
:root:is(:lang(ka), :lang(hy)) {
--hero-title-scale: 0.78;
}
@media (min-width: 1024px) {
:root:lang(ru) {
--hero-title-scale: 0.92;
}
:root:lang(pt) {
--hero-title-scale: 0.96;
}
}
:is(:lang(ka), :lang(hy), :lang(ru), :lang(de)) :is(.c-hero-title, .c-section-title, .c-tier-name, .c-card-title) {
hyphens: auto;
overflow-wrap: anywhere;
}
/* --------------------------------------------------------------------------
20. Motion. Everything above moves by opacity or transform only; a reader
who asked for less motion gets the end states at once.
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
html.can-reveal:not(.is-lite) [data-reveal] {
opacity: 0;
transform: translate3d(0, var(--reveal-rise), 0);
transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal-move) var(--ease);
}
html.can-reveal:not(.is-lite) [data-reveal].is-in {
opacity: 1;
transform: none;
}
}
/* Every transition above takes its time from these three tokens, so setting
them to zero settles the whole site at once, with no !important. */
@media (prefers-reduced-motion: reduce) {
:root {
--t-fast: 0s;
--t-base: 0s;
--t-slow: 0s;
}
}
/* Page to page: a short fade instead of a hard blink (browsers without
cross-document view transitions just load as before). */
@view-transition {
navigation: auto;
}
::view-transition-old(root) {
animation: var(--t-vt-out) ease both c-vt-out;
}
::view-transition-new(root) {
animation: var(--t-vt-in) var(--ease-out) both c-vt-in;
}
@keyframes c-vt-out {
to {
opacity: 0;
}
}
@keyframes c-vt-in {
from {
opacity: 0;
transform: translateY(10px);
}
}
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root),
::view-transition-new(root) {
animation: none;
}
}
/* Rewards: the wide card for what every player brings. Same pattern as the other cards
(picture, then title and text), with one picture of the whole bundle, larger because it
shows four things, and each reward beside how it is earned. Phones: picture on top. */
.c-card--haul {
width: 100%;
flex-direction: column;
}
.c-haul-art {
align-self: center;
width: 100%;
max-width: 380px;
height: auto;
flex: none;
}
.c-haul {
display: grid;
grid-template-columns: max-content minmax(0, 1fr);
gap: var(--s-2) var(--s-4);
font-size: var(--b3);
line-height: var(--b3-lh);
}
.c-haul dt {
color: var(--fg-1);
font-weight: 700;
}
.c-haul dd {
color: var(--fg-3);
}
@media (min-width: 768px) {
.c-card--haul {
flex-direction: row;
align-items: center;
gap: var(--s-6);
}
.c-haul-art {
width: 300px;
}
}
@media (min-width: 1024px) {
.c-haul-art {
width: 380px;
}
}
/* --------------------------------------------------------------------------
19. The creator account (from launch, owner 2026-10-04): the login on
/apply and /dashboard, the "logged in as" line, and the dashboard's cards,
numbers and tables. The form's surfaces and type; only transform and
opacity move. Logged out, and for an application still waiting, the
dashboard keeps the form's 720px column (.c-shell--form); the creator's
own view takes the full shell, and creator-site.js swaps the class.
-------------------------------------------------------------------------- */
.c-form-wait {
margin-top: var(--s-6);
color: var(--fg-3);
}
.c-form-stage .c-form-lead {
color: var(--fg-2);
font-size: var(--b1);
line-height: var(--b1-lh);
}
.c-form-stage .c-form-note,
.c-dash-card .c-form-note {
color: var(--fg-3);
font-size: var(--b3);
line-height: var(--b3-lh);
text-align: center;
}
/* A button that reads as a link: "Log out", "Go back". */
.c-link-btn {
padding: 0;
border: 0;
background: none;
color: var(--fg-1);
cursor: pointer;
font: inherit;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 2px;
transition: opacity var(--t-fast) var(--ease);
}
.c-link-btn:focus-visible {
border-radius: 2px;
outline: 2px solid var(--focus);
outline-offset: 2px;
}
@media (hover: hover) {
.c-link-btn:hover {
opacity: 0.75;
}
}
/* "Applying as Raen. Log out": one quiet strip over the form or the dashboard. */
.c-who {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-2);
padding: var(--s-3) var(--s-4);
border-radius: var(--r-sm);
background: var(--surface);
color: var(--fg-2);
font-size: var(--b3);
line-height: var(--b3-lh);
}
.c-form-stage .c-who {
color: var(--fg-2);
}
.c-who b {
color: var(--fg-1);
}
.c-who .c-link-btn {
margin-left: auto;
}
.c-dash {
display: grid;
gap: var(--s-5);
margin-top: var(--s-6);
}
@media (min-width: 768px) {
.c-dash {
gap: var(--s-6);
margin-top: var(--s-8);
}
}
/* Not applied, waiting, accepted, not accepted: one card, like "sent". */
.c-dash-card {
display: grid;
justify-items: center;
gap: var(--s-4);
padding: var(--s-7) var(--s-4);
border-radius: var(--r-m);
background: var(--surface);
text-align: center;
}
.c-dash-card p {
max-width: 480px;
color: var(--fg-2);
}
@media (min-width: 768px) {
.c-dash-card {
padding: var(--s-9) var(--s-11);
border-radius: var(--r-xxl);
}
}
.c-dash-body {
display: grid;
gap: var(--s-4);
}
.c-dash-top {
display: grid;
gap: var(--s-3);
grid-template-columns: minmax(0, 1fr);
}
/* The numbers: label over value, on the field surface. */
.c-stat {
display: grid;
align-content: start;
gap: var(--s-2);
min-width: 0;
padding: var(--s-5);
border-radius: var(--r-m);
background: var(--surface);
}
.c-stat-label {
color: var(--fg-3);
font-size: var(--l2);
font-weight: 700;
letter-spacing: var(--track-label);
line-height: 1.4;
text-transform: uppercase;
}
.c-stat-num {
color: var(--fg-1);
font-size: var(--d5);
font-variant-numeric: tabular-nums;
font-weight: 800;
letter-spacing: var(--track);
line-height: var(--d5-lh);
overflow-wrap: anywhere;
}
.c-stat-hint {
color: var(--fg-2);
font-size: var(--b3);
line-height: var(--b3-lh);
}
/* The tier as its word, in its colour, as on the home page's tabs. */
.c-dash-tier {
font-size: var(--d4);
font-weight: 800;
letter-spacing: var(--track-label);
line-height: var(--d4-lh);
text-transform: uppercase;
}
.c-dash-tier.is-creator { color: var(--tier-creator); }
.c-dash-tier.is-partner { color: var(--tier-partner); }
.c-dash-tier.is-signature { color: var(--tier-signature); }
/* How far to the next tier: the gold, grown by transform alone. */
.c-progress {
display: block;
height: 8px;
overflow: hidden;
border-radius: 4px;
background: var(--fill-tertiary);
}
.c-progress i {
display: block;
height: 100%;
background: var(--gold-text);
transform: scaleX(0);
transform-origin: left center;
transition: transform var(--t-slow) var(--ease-out);
}
.c-dash-url {
color: var(--fg-1);
font-size: var(--d6);
font-weight: 700;
line-height: var(--d6-lh);
overflow-wrap: anywhere;
}
.c-stat--link .c-btn-quiet {
justify-self: start;
}
.c-dash-h {
margin-top: var(--s-5);
color: var(--fg-1);
font-size: var(--d6);
font-weight: 700;
letter-spacing: var(--track);
line-height: var(--d6-lh);
}
.c-stats {
display: grid;
gap: var(--s-3);
grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* An odd last card on a phone takes the whole row rather than half of it. */
.c-stats > :last-child:nth-child(odd) {
grid-column: 1 / -1;
}
.c-dash-note {
color: var(--fg-3);
font-size: var(--b3);
line-height: var(--b3-lh);
}
.c-dash-empty {
padding: var(--s-4) var(--s-5);
border-radius: var(--r-m);
background: var(--surface);
color: var(--fg-3);
font-size: var(--b3);
line-height: var(--b3-lh);
}
.c-money {
display: grid;
gap: var(--s-3);
}
.c-dash-codes {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-2);
}
/* A creator code, as the player types it in the shop. */
.c-code {
display: inline-flex;
min-height: var(--chip);
align-items: center;
padding: 0 var(--s-3);
border-radius: var(--r-xs);
background: var(--gold-panel);
box-shadow: inset 0 0 0 1px var(--stroke);
color: var(--gold-1);
font-size: var(--b2);
font-weight: 800;
letter-spacing: var(--track-label);
}
.c-dash-tables {
display: grid;
gap: var(--s-3);
}
.c-dash-table {
display: grid;
min-width: 0;
align-content: start;
gap: var(--s-3);
padding: var(--s-5);
border-radius: var(--r-m);
background: var(--surface);
}
.c-dash-table table {
width: 100%;
border-collapse: collapse;
font-size: var(--b3);
line-height: var(--b3-lh);
}
.c-dash-table th {
padding: 0 0 var(--s-2);
border-bottom: 1px solid var(--border);
color: var(--fg-3);
font-size: var(--l2);
font-weight: 700;
letter-spacing: var(--track-label);
text-align: left;
text-transform: uppercase;
}
.c-dash-table td {
padding: var(--s-3) 0;
border-bottom: 1px solid var(--border);
color: var(--fg-2);
}
.c-dash-table tr:last-child td {
border-bottom: 0;
}
.c-dash-table th + th,
.c-dash-table td + td {
padding-left: var(--s-3);
}
.c-dash-table .num {
font-variant-numeric: tabular-nums;
text-align: right;
}
.c-dash-table td.num:last-child {
color: var(--fg-1);
font-weight: 700;
}
.c-dash-table .c-dash-empty {
padding: 0;
background: none;
}
@media (min-width: 768px) {
.c-dash-top {
gap: var(--s-4);
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.c-stats {
gap: var(--s-4);
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.c-stats--4 {
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.c-stats > :last-child:nth-child(odd) {
grid-column: auto;
}
.c-stat-num {
font-size: var(--d4);
line-height: var(--d4-lh);
}
.c-dash-tier {
font-size: var(--d3);
line-height: var(--d3-lh);
}
}
@media (min-width: 900px) {
.c-dash-tables {
gap: var(--s-4);
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* --------------------------------------------------------------------------
20. Where an application stands, in the home page hero (owner, 2026-10-04,
after Riot's "Your application status"): the panel's text and its button,
then three steps (sent, in review, answered) and a line under them, both
across the whole panel.
-------------------------------------------------------------------------- */
/* The Discord link goes last, under the note, so the status keeps the panel's width;
the dashboard button (accepted only) sits beside the status, like the panel above. */
.c-app-status .c-btn-quiet {
grid-column: 1 / -1;
grid-row: 4;
justify-self: start;
}
.c-app-steps {
display: grid;
grid-column: 1 / -1;
gap: var(--s-2);
margin: 0;
padding: 0;
list-style: none;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.c-app-steps li {
height: 4px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.14);
}
.c-app-steps li.is-done {
background: var(--red);
}
.c-app-status.is-accepted .c-app-steps li.is-done {
background: var(--gold-1);
}
.c-app-note {
grid-column: 1 / -1;
margin: 0;
color: var(--fg-2);
}
/* Views and promo codes on the dashboard (owner 2026-10-24). */
.c-views {
display: grid;
gap: var(--s-3);
}
.c-views .c-dash-h {
margin-bottom: 0;
}
.c-dash-link-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-3);
padding: var(--s-4) var(--s-5);
border-radius: var(--r-m);
background: var(--surface);
color: var(--fg-2);
font-size: var(--b3);
line-height: var(--b3-lh);
}
.c-dash-link-row[hidden],
.c-views [hidden] {
display: none;
}
.c-dash-link-word {
flex: 1 1 14rem;
}
.c-dash-table td a {
color: var(--fg-1);
overflow-wrap: anywhere;
}
.c-dash-table td a:hover {
opacity: .8;
}
@media (min-width: 768px) {
.c-stats--2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* --------------------------------------------------------------------------
Dashboard: your channels (owner 2026-10-24, creator-site/_mockup-channels.html)
-------------------------------------------------------------------------- */
.c-ch-h {
margin-top: 18px;
}
.c-ch-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
gap: 14px;
margin: 10px 0 22px;
}
.c-ch-grid[hidden],
.c-ch[hidden],
.c-ch-btn[hidden] {
display: none;
}
.c-ch {
display: flex;
align-items: center;
gap: 16px;
padding: 18px 20px;
border-radius: 14px;
background: var(--fill-tertiary);
border: 1px solid var(--border);
min-width: 0;
}
.c-ch-logo {
flex: none;
width: 48px;
height: 48px;
border-radius: 12px;
display: grid;
place-items: center;
}
.c-ch-logo svg {
width: 26px;
height: 26px;
fill: #fff;
}
.c-ch--yt .c-ch-logo { background: #ff0033; }
.c-ch--tt .c-ch-logo { background: #000; box-shadow: inset 0 0 0 1px var(--stroke); }
.c-ch-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.c-ch-name {
color: var(--fg-1);
font-size: 16px;
font-weight: 700;
line-height: 1.25;
}
.c-ch-sub {
color: var(--fg-3);
font-size: 13px;
line-height: 1.4;
margin-top: 3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.c-ch-state {
display: inline-flex;
white-space: nowrap;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
margin-top: 8px;
}
.c-ch-state::before {
content: "";
flex: none;
width: 8px;
height: 8px;
border-radius: 50%;
background: currentColor;
}
.c-ch-state.is-on { color: #4ade80; }
.c-ch-state.is-off { color: #fbbf24; }
.c-ch-btn {
flex: none;
border: 0;
border-radius: 10px;
padding: 11px 16px;
font: inherit;
font-size: 14px;
font-weight: 700;
line-height: 1;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none;
transition: opacity var(--t-fast, 0.15s) ease;
}
.c-ch-btn:hover { opacity: 0.85; }
.c-ch-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.c-ch-btn svg { width: 16px; height: 16px; fill: currentColor; }
.c-ch-btn--tt { background: #fe2c55; color: #fff; }
.c-ch-btn--ghost { background: transparent; color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--stroke); }
@media (max-width: 520px) {
.c-ch { flex-wrap: wrap; }
.c-ch-btn { width: 100%; justify-content: center; }
}
/* --------------------------------------------------------------------------
Dashboard v2: a left menu and one page at a time (owner 2026-10-25,
creator-site/_mockup-dashboard-v2.html). On a phone the menu slides in.
-------------------------------------------------------------------------- */
.c-dash:has(> .c-dl:not([hidden])) > .c-who {
display: none;
}
.c-dl:not([hidden]) {
display: grid;
grid-template-columns: 232px minmax(0, 1fr);
gap: 28px;
align-items: start;
}
.c-dl-side {
position: sticky;
top: 88px;
display: flex;
flex-direction: column;
gap: 4px;
padding: 16px 12px;
border-radius: 16px;
background: var(--surface);
border: 1px solid var(--border);
min-height: 420px;
}
.c-dl-who {
display: flex;
flex-direction: column;
gap: 2px;
padding: 6px 12px 16px;
margin-bottom: 8px;
border-bottom: 1px solid var(--border);
}
.c-dl-who b {
color: var(--fg-1);
font-size: 15px;
overflow: hidden;
text-overflow: ellipsis;
}
.c-dl-who span {
color: var(--gold-1);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.c-dl-go {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 11px 12px;
border: 0;
border-radius: 10px;
background: transparent;
color: var(--fg-2);
font: inherit;
font-size: 14px;
font-weight: 600;
text-align: left;
text-decoration: none;
cursor: pointer;
transition: opacity 0.15s ease;
}
.c-dl-go:hover {
opacity: 0.8;
}
.c-dl-go:focus-visible,
.c-dl-out:focus-visible,
.c-dl-burger:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 2px;
}
.c-dl-go svg {
flex: none;
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.c-dl-go.is-on {
background: var(--surface-high);
color: var(--fg-1);
box-shadow: inset 3px 0 0 var(--gold-1);
}
.c-dl-badge {
margin-left: auto;
padding: 2px 7px;
border-radius: 999px;
background: var(--gold-1);
color: #111;
font-size: 11px;
font-style: normal;
font-weight: 800;
}
.c-dl-badge[hidden] {
display: none;
}
.c-dl-spacer {
flex: 1;
min-height: 24px;
}
.c-dl-out {
padding: 10px 12px;
border: 0;
background: transparent;
color: var(--fg-3);
font: inherit;
font-size: 13px;
text-align: left;
cursor: pointer;
}
.c-dl-main {
min-width: 0;
}
.c-dl-page {
display: grid;
gap: var(--s-4);
}
.c-dl-page[hidden] {
display: none;
}
.c-dl-page > .c-dash-h:first-child {
margin-top: 0;
}
.c-dash-h--sm {
font-size: 16px;
}
.c-dl-how .c-dash-card {
justify-items: start;
text-align: left;
padding: 20px 22px;
}
.c-dl-how .c-dash-card p {
max-width: none;
}
.c-dl-burger,
.c-dl-scrim {
display: none;
}
@media (max-width: 860px) {
.c-dl:not([hidden]) {
grid-template-columns: minmax(0, 1fr);
}
.c-dl-side {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 60;
width: min(300px, 82vw);
min-height: 0;
border-radius: 0 16px 16px 0;
transform: translateX(-105%);
transition: transform 0.2s ease;
overflow-y: auto;
}
.c-dl-side.is-open {
transform: none;
box-shadow: 20px 0 40px rgba(0, 0, 0, 0.6);
}
.c-dl-scrim:not([hidden]) {
display: block;
position: fixed;
inset: 0;
z-index: 59;
background: rgba(0, 0, 0, 0.55);
}
.c-dl-burger {
display: inline-flex;
flex-direction: column;
justify-content: center;
gap: 4px;
width: 44px;
height: 44px;
margin-bottom: 14px;
padding: 0 12px;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--surface);
cursor: pointer;
}
.c-dl-burger span {
display: block;
height: 2px;
border-radius: 2px;
background: var(--fg-1);
}
}
/* Dashboard v2: the players under the link, and "This month" as one card. */
.c-dl-players {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--border);
}
.c-dl-pl {
display: grid;
gap: 4px;
min-width: 0;
}
.c-dl-pl .c-stat-label {
font-size: 10px;
}
.c-dl-pl-num {
color: var(--fg-1);
font-size: 20px;
font-weight: 800;
}
.c-dl-month {
display: grid;
grid-template-columns: 220px minmax(0, 1fr);
gap: 24px;
align-items: center;
padding: 20px 22px;
border-radius: 16px;
background: var(--surface);
}
.c-dl-month-total {
display: grid;
gap: 4px;
}
.c-dl-month-num {
color: var(--fg-1);
font-size: 40px;
font-weight: 800;
line-height: 1.1;
}
.c-dl-kinds {
display: grid;
gap: 14px;
}
.c-dl-kinds[hidden] {
display: none;
}
.c-dl-kind {
display: grid;
grid-template-columns: 130px minmax(0, 1fr) 80px;
gap: 6px 12px;
align-items: center;
}
.c-dl-kind b {
color: var(--fg-1);
font-size: 13px;
}
.c-dl-kind .c-progress {
margin: 0;
}
.c-dl-kind-num {
color: var(--fg-1);
font-weight: 700;
text-align: right;
}
.c-dl-kind .c-stat-hint {
grid-column: 2 / 4;
}
@media (max-width: 860px) {
.c-dl-month {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 520px) {
.c-dl-kind {
grid-template-columns: minmax(0, 1fr) 70px;
}
.c-dl-kind .c-progress {
grid-column: 1 / 3;
grid-row: 2;
}
.c-dl-kind .c-stat-hint {
grid-column: 1 / 3;
}
}
/* All / YouTube / TikTok over the videos (owner 2026-10-25). */
.c-vfilter {
display: flex;
flex-wrap: wrap;
gap: var(--s-2);
}
.c-vfilter[hidden] {
display: none;
}
.c-vfilter button {
min-height: 36px;
padding: 0 var(--s-4);
border: 0;
border-radius: 999px;
background: var(--fill-tertiary);
color: var(--fg-2);
font: inherit;
font-size: var(--b3);
font-weight: 700;
cursor: pointer;
transition: opacity var(--t-fast) var(--ease);
}
.c-vfilter button[aria-pressed="true"] {
background: var(--fg-1);
color: var(--bg, #0d0d0d);
}
@media (hover: hover) {
.c-vfilter button[aria-pressed="false"]:hover {
opacity: 0.8;
}
}
/* Views / Players over This month / All time (owner 2026-10-25). */
.c-board-tabs--metric {
margin-bottom: var(--s-3);
}
/* Connect YouTube and TikTok coming soon (owner 2026-10-25) */
.c-ch:has(.c-ch-connect:not([hidden])) { flex-wrap: wrap; }
.c-ch-connect { flex: 1 1 100%; display: grid; gap: 8px; min-width: 0; }
.c-ch-connect[hidden] { display: none; }
.c-ch-connect-row { display: flex; gap: 10px; min-width: 0; }
.c-ch-connect input {
flex: 1;
min-width: 0;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid var(--stroke);
background: var(--bg-1, transparent);
color: var(--fg-1);
font: inherit;
font-size: 14px;
}
.c-ch-connect input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.c-ch-note { color: var(--fg-3); font-size: 13px; line-height: 1.45; }
.c-ch-note b { color: var(--fg-1); user-select: all; }
.c-ch-btn--yt { background: #ff0033; color: #fff; }
.c-ch-btn:disabled { opacity: 0.6; cursor: default; }
.c-ch-state.is-soon { color: var(--fg-3); }
@media (max-width: 520px) {
.c-ch-connect-row { flex-direction: column; }
}
/* First login setup (owner 2026-10-25, _mockup-setup.html) */
.c-setup { max-width: 760px; margin: 0 auto; padding: 28px; border-radius: 18px; background: var(--fill-tertiary); border: 1px solid var(--border); }
.c-setup[hidden] { display: none; }
.c-setup-kicker { color: #fbbf24; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.c-setup-h { color: var(--fg-1); font-size: 28px; line-height: 1.2; margin: 10px 0 6px; }
.c-setup-lead { color: var(--fg-2); font-size: 15px; line-height: 1.5; margin: 0 0 22px; }
.c-setup-step { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 18px 0; border-top: 1px solid var(--border); }
.c-setup-n { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 16px; background: #fbbf24; color: #111; }
.c-setup-t { color: var(--fg-1); font-size: 16px; font-weight: 700; line-height: 1.3; margin: 6px 0; }
.c-setup-p { color: var(--fg-3); font-size: 14px; line-height: 1.5; margin: 0; }
.c-setup-link { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.c-setup-link code { padding: 10px 12px; border-radius: 10px; background: rgba(0, 0, 0, .35); color: var(--fg-1); font-size: 15px; user-select: all; overflow-wrap: anywhere; }
.c-setup-skip { margin: 18px 0 0; color: var(--fg-3); font-size: 13px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.c-setup-skip[hidden] { display: none; }
.c-setup-skipbtn { border: 0; background: none; padding: 0; color: var(--fg-1); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
@media (max-width: 520px) { .c-setup { padding: 20px 16px; } .c-setup-h { font-size: 24px; } }
/* Admin (owner 2026-10-26, the owner only): applications, creators, gift codes, rewards. */
.c-adm { display: grid; gap: var(--s-4); }
.c-adm [hidden] { display: none !important; }
.c-adm-stale { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-m); background: var(--surface); color: var(--fg-1); font-weight: 700; }
.c-adm-count { display: inline-grid; min-width: 20px; height: 20px; margin-left: 4px; padding: 0 6px; place-items: center; border-radius: 999px; background: var(--gold-button); color: var(--fg-on-gold); font-size: 12px; font-style: normal; }
.c-adm-sub button { min-height: 30px; font-size: 13px; }
.c-adm-list { display: grid; gap: var(--s-3); }
.c-adm-app { display: grid; gap: var(--s-2); padding: var(--s-4) var(--s-5); border-radius: var(--r-m); background: var(--surface); color: var(--fg-2); font-size: var(--b3); line-height: var(--b3-lh); }
.c-adm-app-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.c-adm-app-head b { color: var(--fg-1); font-size: var(--b2); }
.c-adm-tag, .c-adm-status { padding: 2px 8px; border-radius: 999px; background: var(--fill-tertiary); font-size: 12px; font-weight: 700; text-transform: capitalize; }
.c-adm-status { margin-left: auto; }
.c-adm-status.is-accepted { background: rgba(70, 200, 120, 0.18); color: #6fe09b; }
.c-adm-status.is-declined { background: rgba(255, 90, 90, 0.16); color: #ff8a8a; }
.c-adm-line, .c-adm-why { margin: 0; overflow-wrap: anywhere; }
.c-adm-why { color: var(--fg-1); white-space: pre-wrap; }
.c-adm-app a, .c-adm-table a { color: var(--fg-1); overflow-wrap: anywhere; }
.c-adm-more summary { cursor: pointer; color: var(--fg-1); font-weight: 700; }
.c-adm-more .c-adm-line { margin-top: var(--s-2); white-space: pre-wrap; }
.c-adm-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-2); }
.c-adm-addr { display: inline-flex; align-items: center; gap: 2px; color: var(--fg-3); }
.c-adm input, .c-adm select { min-height: 40px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg); color: var(--fg-1); font: inherit; font-size: 15px; }
.c-adm-addr input { width: 180px; }
.c-adm-go { background: var(--gold-button); color: var(--fg-on-gold); }
.c-adm-bar { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-3); }
.c-adm-field { display: grid; gap: 6px; color: var(--fg-3); font-size: 12px; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; }
.c-adm-field input, .c-adm-field select { text-transform: none; letter-spacing: 0; font-weight: 500; }
.c-adm-check { display: inline-flex; align-items: center; gap: 8px; align-self: end; min-height: 40px; color: var(--fg-2); font-weight: 700; }
.c-adm-check input { min-height: 0; width: 18px; height: 18px; }
.c-adm-form { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); padding: var(--s-5); border-radius: var(--r-m); background: var(--surface); }
.c-adm-wide { grid-column: 1 / -1; }
.c-adm-actions { display: flex; gap: var(--s-2); }
.c-adm-made { display: grid; gap: var(--s-3); padding: var(--s-5); border-radius: var(--r-m); background: var(--surface); color: var(--fg-1); }
.c-adm-codes { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.c-adm-table { font-variant-numeric: tabular-nums; }
.c-adm-table td.c-adm-cellbtn { text-align: right; white-space: nowrap; }
.c-adm-cellbtn .c-ch-btn { padding: 8px 12px; font-size: 13px; }
.c-adm-cellbtn .c-ch-btn + .c-ch-btn { margin-left: 6px; }
.c-adm-table tr.is-out td { opacity: 0.45; }
.c-adm-table tr.is-out td.c-adm-cellbtn { opacity: 1; }
.c-adm-name { padding: 0; border: 0; background: none; color: var(--fg-1); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.c-adm-detail { display: grid; gap: var(--s-3); }
.c-adm .c-dash-table { overflow-x: auto; }
.c-adm input, .c-adm select { color-scheme: dark; }
/* A promo code with every use taken (owner 2026-10-26): the row and its chip greyed out. */
.c-dash-table tr.is-used td { color: var(--fg-3); }
.c-dash-table tr.is-used td.num:last-child { color: var(--fg-3); font-weight: 500; }
.c-dash-table tr.is-used .c-code { background: var(--fill-tertiary); box-shadow: none; color: var(--fg-3); }
/* Spectator mode on the dashboard (owner 2026-10-26): yellow when on, else the bar to it. */
.c-spec { display: flex; align-items: center; margin: 0 0 var(--s-4); }
.c-spec[hidden], .c-spec [hidden] { display: none !important; }
.c-spec b { color: #ffd23f; font-size: var(--b2); font-weight: 800; letter-spacing: var(--track-label); }
.c-spec > span { display: grid; flex: 1; gap: 6px; max-width: 420px; color: var(--fg-2); font-size: var(--b3); }
.c-adm-manual { color: var(--fg-3); }
/* The apply gate */
.c-gate { display: grid; gap: var(--s-4); }
.c-gate [hidden] { display: none !important; }
.c-gate-yt { display: grid; gap: var(--s-3); }
.c-gate-proof, .c-gate-points { display: grid; gap: var(--s-2); padding: var(--s-4) var(--s-5); border-radius: var(--r-m); background: var(--surface); color: var(--fg-2); }
.c-gate-proof p, .c-gate-points p { margin: 0; }
.c-gate-link { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.c-gate-link b { color: var(--fg-1); overflow-wrap: anywhere; }
/* Spectator mode reads as an achievement (owner 2026-10-26): gold, bigger, both states. */
.c-spec b,
.c-spec .c-stat-label {
background: linear-gradient(180deg, #fff1b8 0%, #ffd23f 45%, #e0a21a 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-size: 22px;
font-weight: 900;
letter-spacing: 0.08em;
line-height: 1.1;
text-transform: uppercase;
filter: drop-shadow(0 0 10px rgba(255, 196, 40, 0.25));
}
.c-spec .c-stat-label { font-size: 18px; }
.c-spec > span { gap: 10px; }
/* One bar per platform under Spectator mode (2026-10-26). */
.c-spec-bars { display: grid; gap: 12px; }
.c-spec-bar { display: grid; gap: 6px; }
.c-spec .c-spec-name { background: none; filter: none; color: var(--fg-1); font-size: 13px; letter-spacing: 0.04em; -webkit-background-clip: border-box; background-clip: border-box; }
/* Viewing a creator's dashboard (owner 2026-10-26): a clear bar, and nothing that acts. */
.c-viewbar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); padding: var(--s-3) var(--s-4); border-radius: var(--r-m); background: #3a2a00; box-shadow: inset 0 0 0 1px #ffd23f; color: #ffe9a3; font-weight: 700; }
.c-viewbar[hidden] { display: none; }
.c-viewbar b { color: #fff; }
.is-viewing .c-dl-page:not(.c-adm) :is(button, input, select, textarea, a.c-ch-btn) { pointer-events: none; opacity: 0.5; }
.c-adm-dc { display: block; color: var(--fg-3); font-size: 12px; font-weight: 500; }
/* Your Discord */
.c-discord-box { display: grid; gap: var(--s-2); padding: var(--s-4) var(--s-5); border-radius: var(--r-m); background: var(--surface); }
.c-discord-box[hidden] { display: none; }
.c-discord-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.c-discord-row input { flex: 1 1 200px; min-height: 40px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg); color: var(--fg-1); font: inherit; font-size: 16px; color-scheme: dark; }
.c-adm-status.is-removed { background: rgba(255, 170, 60, 0.16); color: #ffbe6b; }