MediaWiki:Vector-2022.css: mudanças entre as edições

Edição das 06h59min de 28 de julho de 2026

/*!
 * =============================================================================
 *  GUIA GALÁCTICO — MediaWiki:Vector-2022.css
 *  REVISÃO 3 — 2026-07-28
 *
 *  Confira que esta versão é a que está no ar: abra o load.php do site e
 *  procure por "REVISÃO 3". O ResourceLoader guarda o CSS do site por até
 *  cinco minutos, e o navegador guarda mais um tanto além disso.
 * =============================================================================
 *
 *  O QUE MUDOU NESTA REVISÃO
 *   - Herói da inicial vira um bloco contínuo: título, subtítulo e painel de
 *     números formam um degradê vertical só, sem nenhuma linha entre eles.
 *   - Bordas de 1px varridas da inicial. Sobraram três: o traço de acento sob
 *     cada seção, a barra lateral das pastilhas e o tracejado do {{Esboço}}.
 *   - Título da infobox costurado à caixa: raios idênticos, bordas contínuas,
 *     e o acento virou sombra interna (não gera linha própria).
 *   - Busca sem borda nenhuma. Campo preenchido, botão discreto.
 *   - SPORE em h1, h2 e h3 com especificidade alta o bastante para vencer o
 *     serifado que o MediaWiki injeta junto com o conteúdo (ver §6).
 *
 *  REGRA DE OURO
 *  Nenhum componente pode ter regra presa a um tema. Toda diferença entre
 *  claro e escuro vive nos tokens (§2 e §3). O MediaWiki tem TRÊS classes de
 *  tema — clientpref-day, clientpref-night e clientpref-os (automático) — e
 *  regra presa a "night" não vale no automático.
 *
 *  ÍNDICE
 *   1. Fontes                      9. Infoboxes
 *   2. Tokens — claro             10. {{Esboço}}
 *   3. Tokens — escuro            11. {{Trilha de estágios}}
 *   4. Ponte com o Codex          12. Tabelas
 *   5. Base                       13. Página inicial
 *   6. Títulos                    14. Imagens e miscelânea
 *   7. Texto e código             15. Responsivo
 *   8. Estrutura da skin          16. Preferências do leitor
 * =============================================================================
 */


/* =============================================================================
 *  1. FONTES — remova se já estiverem em MediaWiki:Common.css
 * ========================================================================== */

@font-face {
	font-family: 'Atkinson Hyperlegible Next';
	src: url('/images/fonts/AtkinsonHyperlegibleNext.woff2') format('woff2');
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Atkinson Hyperlegible Mono';
	src: url('/images/fonts/AtkinsonHyperlegibleMono.woff2') format('woff2');
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'SPORE';
	src: url('/images/fonts/SPORELight.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'SPORE';
	src: url('/images/fonts/SPORERegular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'SPORE';
	src: url('/images/fonts/SPOREBold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}


/* =============================================================================
 *  2. TOKENS — TEMA CLARO
 * ========================================================================== */

:root {
	/* --- Marca --- */
	--gg-azul-abissal: #041c3a;
	--gg-azul-profundo: #0a2f5c;
	--gg-azul: #0b5ea8;
	--gg-azul-vivo: #1a8fd0;
	--gg-roxo: #6d2a86;

	--gg-verde: #256b42;
	--gg-vermelho: #b3341f;

	/*
	 * Rampa do herói. Quatro paradas, distribuídas em três blocos empilhados.
	 * A cor final de um bloco é a inicial do seguinte, então a emenda somem.
	 * A parada mais clara (--gg-heroi-4) tem 4,7:1 contra branco: texto
	 * pequeno branco em cima dela ainda passa no AA.
	 */
	--gg-heroi-1: #041c3a;
	--gg-heroi-2: #093a68;
	--gg-heroi-3: #0b5ea8;
	--gg-heroi-4: #0f77c0;
	--gg-sobre-heroi: #ffffff;
	--gg-sobre-heroi-linha: rgba(255, 255, 255, .22);

	/* --- Superfícies --- */
	--gg-fundo: #eef3f9;
	--gg-superficie: #ffffff;
	--gg-superficie-2: #f3f7fc;
	--gg-superficie-3: #e4edf7;
	--gg-borda: #d7e3f0;
	--gg-borda-forte: #9db8d3;

	/* --- Texto --- */
	--gg-texto: #14202e;
	--gg-texto-suave: #48596d;
	--gg-titulo-cor: #0a2f5c;
	--gg-sobre-acento: #ffffff;

	/* --- Ligações --- */
	--gg-link: #0b5ea8;
	--gg-link-hover: #0a2f5c;
	--gg-link-visitado: #6d2a86;
	--gg-link-novo: #b3341f;

	--gg-foco: #1a8fd0;
	--gg-codigo-cor: #0a2f5c;

	/* --- Cores de espécie das infoboxes (acento / fundo do acento) --- */
	--gg-a-jogo: #0b5ea8;       --gg-a-jogo-f: #e6eef8;
	--gg-a-estagio: #256b42;    --gg-a-estagio-f: #e3f2e9;
	--gg-a-criador: #0f6f8c;    --gg-a-criador-f: #e0f1f6;
	--gg-a-criacao: #6d2a86;    --gg-a-criacao-f: #f1e6f5;
	--gg-a-download: #37527a;   --gg-a-download-f: #e8edf5;
	--gg-a-raridade: #7d5308;   --gg-a-raridade-f: #f7efdd;
	--gg-a-ferramenta: #9c4315; --gg-a-ferramenta-f: #f9e9e0;
	--gg-a-arquetipo: #4b3fa0;  --gg-a-arquetipo-f: #e9e7f7;

	--gg-acento: var(--gg-a-jogo);
	--gg-acento-fraco: var(--gg-a-jogo-f);

	/* --- Tipografia --- */
	--gg-fonte-texto: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', system-ui, sans-serif;
	--gg-fonte-display: 'SPORE', 'Atkinson Hyperlegible Next', system-ui, sans-serif;
	--gg-fonte-mono: 'Atkinson Hyperlegible Mono', ui-monospace, monospace;

	/* --- Forma --- */
	--gg-r-1: 6px;
	--gg-r-2: 12px;
	--gg-r-3: 18px;
	--gg-r-pilula: 999px;

	--gg-sombra-1: 0 1px 2px rgba(4, 28, 58, .04), 0 4px 16px rgba(4, 28, 58, .06);
	--gg-sombra-2: 0 2px 4px rgba(4, 28, 58, .06), 0 16px 40px rgba(4, 28, 58, .10);

	--gg-glifos-opacidade: .55;
	--gg-glifos-filtro: none;
	--gg-glifos-tamanho: 420px;

	--gg-transicao: 140ms ease;
}


/* =============================================================================
 *  3. TOKENS — TEMA ESCURO
 *
 *  Dois blocos idênticos de propósito: (a) escuro fixo, (b) escuro automático
 *  — vale para clientpref-os e para wikis sem modo noturno, exceto quando o
 *  leitor fixou o claro. Ao editar um, edite o outro.
 *
 *  Sombra aqui é NONE: sombra preta sobre fundo escuro vira borrão. A
 *  separação entre camadas vem da borda, que fica mais visível.
 * ========================================================================== */

html.skin-theme-clientpref-night {
	--gg-azul-abissal: #050d19;
	--gg-azul-profundo: #0d2440;
	--gg-azul: #7ec9f3;
	--gg-azul-vivo: #8fd4fa;
	--gg-roxo: #c79ce0;

	--gg-verde: #74d19a;
	--gg-vermelho: #ff9d86;

	/* O herói continua escuro nos dois temas: as paradas quase não mudam. */
	--gg-heroi-1: #03101f;
	--gg-heroi-2: #072a4c;
	--gg-heroi-3: #0a4a85;
	--gg-heroi-4: #0d5fa4;
	--gg-sobre-heroi: #ffffff;
	--gg-sobre-heroi-linha: rgba(255, 255, 255, .18);

	--gg-fundo: #0a1220;
	--gg-superficie: #111c2e;
	--gg-superficie-2: #17243a;
	--gg-superficie-3: #22344f;
	--gg-borda: #2f4467;
	--gg-borda-forte: #55719d;

	--gg-texto: #e7eef8;
	--gg-texto-suave: #b3c3d8;
	--gg-titulo-cor: #e7eef8;
	--gg-sobre-acento: #06101f;

	--gg-link: #7ec9f3;
	--gg-link-hover: #b0e2fb;
	--gg-link-visitado: #d3aae9;
	--gg-link-novo: #ff9d86;

	--gg-foco: #8fd4fa;
	--gg-codigo-cor: #a5e4f7;

	--gg-a-jogo: #7ec9f3;       --gg-a-jogo-f: #17293e;
	--gg-a-estagio: #7ed9a5;    --gg-a-estagio-f: #14301f;
	--gg-a-criador: #7cd8ef;    --gg-a-criador-f: #103040;
	--gg-a-criacao: #d3aae9;    --gg-a-criacao-f: #291a36;
	--gg-a-download: #a9bedd;   --gg-a-download-f: #1a2438;
	--gg-a-raridade: #e6bd72;   --gg-a-raridade-f: #31260f;
	--gg-a-ferramenta: #f2a97f; --gg-a-ferramenta-f: #331f10;
	--gg-a-arquetipo: #b3a7f5;  --gg-a-arquetipo-f: #201d3c;

	--gg-sombra-1: none;
	--gg-sombra-2: none;

	--gg-glifos-opacidade: .06;
	--gg-glifos-filtro: invert(1);
}

@media (prefers-color-scheme: dark) {
	html:not(.skin-theme-clientpref-day) {
		--gg-azul-abissal: #050d19;
		--gg-azul-profundo: #0d2440;
		--gg-azul: #7ec9f3;
		--gg-azul-vivo: #8fd4fa;
		--gg-roxo: #c79ce0;

		--gg-verde: #74d19a;
		--gg-vermelho: #ff9d86;

		--gg-heroi-1: #03101f;
		--gg-heroi-2: #072a4c;
		--gg-heroi-3: #0a4a85;
		--gg-heroi-4: #0d5fa4;
		--gg-sobre-heroi: #ffffff;
		--gg-sobre-heroi-linha: rgba(255, 255, 255, .18);

		--gg-fundo: #0a1220;
		--gg-superficie: #111c2e;
		--gg-superficie-2: #17243a;
		--gg-superficie-3: #22344f;
		--gg-borda: #2f4467;
		--gg-borda-forte: #55719d;

		--gg-texto: #e7eef8;
		--gg-texto-suave: #b3c3d8;
		--gg-titulo-cor: #e7eef8;
		--gg-sobre-acento: #06101f;

		--gg-link: #7ec9f3;
		--gg-link-hover: #b0e2fb;
		--gg-link-visitado: #d3aae9;
		--gg-link-novo: #ff9d86;

		--gg-foco: #8fd4fa;
		--gg-codigo-cor: #a5e4f7;

		--gg-a-jogo: #7ec9f3;       --gg-a-jogo-f: #17293e;
		--gg-a-estagio: #7ed9a5;    --gg-a-estagio-f: #14301f;
		--gg-a-criador: #7cd8ef;    --gg-a-criador-f: #103040;
		--gg-a-criacao: #d3aae9;    --gg-a-criacao-f: #291a36;
		--gg-a-download: #a9bedd;   --gg-a-download-f: #1a2438;
		--gg-a-raridade: #e6bd72;   --gg-a-raridade-f: #31260f;
		--gg-a-ferramenta: #f2a97f; --gg-a-ferramenta-f: #331f10;
		--gg-a-arquetipo: #b3a7f5;  --gg-a-arquetipo-f: #201d3c;

		--gg-sombra-1: none;
		--gg-sombra-2: none;

		--gg-glifos-opacidade: .06;
		--gg-glifos-filtro: invert(1);
	}
}


/* =============================================================================
 *  4. PONTE COM OS TOKENS DO CODEX
 * ========================================================================== */

:root {
	--background-color-base: var(--gg-superficie);
	--background-color-neutral: var(--gg-superficie-2);
	--background-color-neutral-subtle: var(--gg-superficie-2);
	--background-color-interactive-subtle: var(--gg-superficie-2);
	--background-color-interactive: var(--gg-superficie-3);
	--background-color-progressive: var(--gg-azul);
	--background-color-progressive--hover: var(--gg-link-hover);
	--background-color-progressive-subtle: var(--gg-superficie-3);
	--background-color-button-quiet--hover: var(--gg-superficie-3);
	--background-color-button-quiet--active: var(--gg-superficie-3);

	--color-base: var(--gg-texto);
	--color-emphasized: var(--gg-texto);
	--color-subtle: var(--gg-texto-suave);
	--color-placeholder: var(--gg-texto-suave);
	--color-progressive: var(--gg-link);
	--color-progressive--hover: var(--gg-link-hover);
	--color-visited: var(--gg-link-visitado);
	--color-destructive: var(--gg-link-novo);
	--color-inverted: var(--gg-sobre-acento);
	--color-icon: var(--gg-texto-suave);

	--border-color-base: var(--gg-borda-forte);
	--border-color-subtle: var(--gg-borda);
	--border-color-muted: var(--gg-borda);
	--border-color-interactive: var(--gg-borda-forte);
	--border-color-progressive: var(--gg-azul);
	--box-shadow-color-progressive--focus: var(--gg-foco);
}


/* =============================================================================
 *  5. BASE
 * ========================================================================== */

html,
body {
	background-color: var(--gg-fundo);
	color: var(--gg-texto);
}

body {
	font-family: var(--gg-fonte-texto);
	font-size: 1rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: url('/images/background.jpg');
	background-repeat: repeat;
	background-size: var(--gg-glifos-tamanho) auto;
	opacity: var(--gg-glifos-opacidade);
	filter: var(--gg-glifos-filtro);
}

:focus-visible {
	outline: 3px solid var(--gg-foco);
	outline-offset: 2px;
	border-radius: 3px;
}

::selection {
	background: color-mix(in srgb, var(--gg-azul-vivo) 30%, transparent);
	color: var(--gg-texto);
}

::placeholder {
	color: var(--gg-texto-suave);
	opacity: 1;
}

.mw-parser-output a:not(.image):not(.mw-file-description) {
	color: var(--gg-link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
	text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
	transition: color var(--gg-transicao), text-decoration-color var(--gg-transicao);
}

.mw-parser-output a:not(.image):not(.mw-file-description):hover {
	color: var(--gg-link-hover);
	text-decoration-color: currentColor;
	text-decoration-thickness: 2px;
}

.mw-parser-output a:visited:not(.image):not(.mw-file-description) {
	color: var(--gg-link-visitado);
}

.mw-parser-output a.new,
.mw-parser-output a.new:visited {
	color: var(--gg-link-novo);
}

.mw-parser-output a.external {
	background-position: right center;
	padding-right: .95em;
}


/* =============================================================================
 *  6. TÍTULOS
 *
 *  DUAS ARMADILHAS, e as duas custaram uma revisão cada:
 *
 *  (a) INVÓLUCRO. Desde o MediaWiki 1.43 o parser embrulha os títulos em
 *      <div class="mw-heading mw-heading2"><h2>…</h2></div>. Estilo aplicado
 *      só no invólucro deixa o texto com o padrão do MediaWiki. Por isso cada
 *      regra aparece em duas famílias: uma para o ELEMENTO (fonte, cor) e
 *      outra para a CAIXA (régua, margem).
 *
 *  (b) ORDEM DE CARGA. O MediaWiki injeta os estilos de conteúdo junto com a
 *      página, e eles podem entrar DEPOIS do CSS do site. Com especificidade
 *      igual, quem vem depois ganha — e o serifado voltava. Daí os seletores
 *      com duas classes (.mw-body .mw-parser-output h2), que sobem a
 *      especificidade para 0-2-1 e vencem o 0-1-1 do núcleo sem !important.
 * ========================================================================== */

.mw-body .mw-parser-output h1,
.mw-body .mw-parser-output h2,
.mw-body .mw-parser-output h3,
.mw-body .mw-heading h1,
.mw-body .mw-heading h2,
.mw-body .mw-heading h3,
.mw-body-content .mw-parser-output h1,
.mw-body-content .mw-parser-output h2,
.mw-body-content .mw-parser-output h3,
.mw-parser-output .mw-heading h1,
.mw-parser-output .mw-heading h2,
.mw-parser-output .mw-heading h3,
.vector-body h1,
.vector-body h2,
.vector-body h3,
.vector-page-titlebar h1,
.mw-first-heading,
#firstHeading {
	font-family: var(--gg-fonte-display);
	color: var(--gg-titulo-cor);
	line-height: 1.22;
	letter-spacing: .005em;
	border-bottom: 0;
	scroll-margin-top: 5rem;
	text-wrap: balance;
}

/* h4 a h6 ficam na Atkinson: em corpo pequeno ela lê melhor. */
.mw-body .mw-parser-output h4,
.mw-body .mw-parser-output h5,
.mw-body .mw-parser-output h6,
.mw-parser-output .mw-heading h4 {
	font-family: var(--gg-fonte-texto);
	color: var(--gg-texto);
	line-height: 1.3;
}

.mw-body .mw-parser-output h1,
.mw-body .mw-heading h1,
.vector-body h1,
.vector-page-titlebar h1,
.mw-first-heading,
#firstHeading {
	font-weight: 400;
	font-size: 2.25rem;
	margin: 0;
}

.mw-body .mw-parser-output h2,
.mw-body .mw-heading h2,
.mw-parser-output .mw-heading h2,
.vector-body h2 {
	font-weight: 700;
	font-size: 1.55rem;
	margin: 0;
}

.mw-body .mw-parser-output h3,
.mw-parser-output .mw-heading h3,
.vector-body h3 {
	font-weight: 700;
	font-size: 1.22rem;
	margin: 0;
}

.mw-parser-output .mw-heading4 h4,
.mw-parser-output > h4 {
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--gg-texto-suave);
	margin: 0;
}

/*
 * A CAIXA do h2. .mw-heading2 cobre o MediaWiki novo, .mw-parser-output > h2
 * cobre o antigo — nunca coincidem, então a régua nunca duplica.
 */
.mw-parser-output .mw-heading2,
.mw-parser-output > h2 {
	position: relative;
	border-bottom: 1px solid var(--gg-borda);
	padding-bottom: .45rem;
	margin: 2.4rem 0 1.1rem;
}

.mw-parser-output .mw-heading2::after,
.mw-parser-output > h2::after {
	content: "";
	position: absolute; /* absoluto: não vira item do flex do invólucro */
	left: 0;
	bottom: -1px;
	width: 2.5rem;
	height: 3px;
	background: var(--gg-azul-vivo);
	border-radius: var(--gg-r-pilula);
}

.mw-parser-output .mw-heading3,
.mw-parser-output > h3 {
	margin: 1.9rem 0 .6rem;
}

.mw-parser-output .mw-heading4,
.mw-parser-output > h4 {
	margin: 1.4rem 0 .5rem;
}

.mw-editsection {
	font-family: var(--gg-fonte-texto);
	font-size: .8rem;
	font-weight: 400;
}

/*
 * Título da wiki no cabeçalho. Só tem efeito se o wordmark for texto; se for
 * imagem (o padrão do $wgLogos), o CSS não alcança — nesse caso troque o
 * wordmark por um SVG com a SPORE já convertida em curvas.
 */
.mw-logo-wordmark,
.mw-logo-container .mw-logo-wordmark,
.vector-sticky-header-context-bar-primary {
	font-family: var(--gg-fonte-display);
	font-weight: 700;
	letter-spacing: .01em;
}


/* =============================================================================
 *  7. TEXTO E CÓDIGO
 * ========================================================================== */

.mw-parser-output p {
	margin: .8em 0;
	max-width: 78ch;
}

code,
kbd,
samp,
pre,
.mw-code {
	font-family: var(--gg-fonte-mono);
	font-size: .92em;
}

code {
	background: var(--gg-superficie-2);
	border: 1px solid var(--gg-borda);
	border-radius: var(--gg-r-1);
	padding: .1em .35em;
	color: var(--gg-codigo-cor);
}

pre,
.mw-code {
	background: var(--gg-superficie-2);
	color: var(--gg-texto);
	border: 0;
	border-left: 3px solid var(--gg-azul-vivo);
	border-radius: var(--gg-r-2);
	padding: 1rem 1.15rem;
	overflow-x: auto;
	line-height: 1.55;
}

kbd {
	background: var(--gg-superficie);
	color: var(--gg-texto);
	border: 1px solid var(--gg-borda-forte);
	border-bottom-width: 3px;
	border-radius: var(--gg-r-1);
	padding: .1em .45em;
}

blockquote {
	border: 0;
	border-left: 3px solid var(--gg-azul-vivo);
	background: var(--gg-superficie-2);
	margin: 1.25rem 0;
	padding: .85rem 1.15rem;
	border-radius: 0 var(--gg-r-2) var(--gg-r-2) 0;
	color: var(--gg-texto-suave);
	font-style: normal;
}

hr {
	border: 0;
	height: 1px;
	background: linear-gradient(90deg, var(--gg-borda-forte), transparent);
	margin: 2rem 0;
}


/* =============================================================================
 *  8. ESTRUTURA DA SKIN
 * ========================================================================== */

.mw-page-container {
	background: transparent;
	max-width: 1600px;
}

/* Cartão do artigo: sombra no claro, borda no escuro (os tokens cuidam disso). */
.mw-content-container,
#content.mw-body {
	background: var(--gg-superficie);
	color: var(--gg-texto);
	border: 1px solid var(--gg-borda);
	border-radius: var(--gg-r-3);
	box-shadow: var(--gg-sombra-1);
}

.mw-content-container #content.mw-body {
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
}

#content.mw-body,
.vector-body {
	padding: 1.6rem 2.1rem 2.6rem;
}

/* --- Cabeçalho --- */
.vector-header-container .vector-header {
	background: transparent;
	padding-block: .5rem;
}

.vector-sticky-header {
	background: color-mix(in srgb, var(--gg-superficie) 90%, transparent);
	-webkit-backdrop-filter: blur(10px) saturate(1.25);
	backdrop-filter: blur(10px) saturate(1.25);
	border-bottom: 1px solid var(--gg-borda);
	box-shadow: none;
}

.mw-logo-wordmark {
	max-height: 2.1em;
}

.mw-logo-tagline {
	font-family: var(--gg-fonte-texto);
	color: var(--gg-texto-suave);
	font-size: .8rem;
	letter-spacing: .02em;
}

/* --- BUSCA ---
 * Zero borda. O Codex empilha invólucro sobre invólucro (.cdx-typeahead-search
 * > .cdx-search-input > .cdx-search-input__input-wrapper > .cdx-text-input),
 * e qualquer borda sobrevivente vira um anel a mais em volta do campo. Todos
 * ficam transparentes; o campo é um preenchimento, e o botão é discreto.
 */
.vector-search-box .cdx-typeahead-search,
.vector-search-box .cdx-search-input,
.vector-search-box .cdx-search-input__input-wrapper,
.vector-search-box .cdx-text-input,
.vector-search-box-inner,
.vector-typeahead-search-container {
	background: transparent;
	border: 0;
	box-shadow: none;
}

.vector-search-box .cdx-text-input__input,
.vector-search-box input[type="search"] {
	background: var(--gg-superficie-2);
	color: var(--gg-texto);
	border: 1px solid transparent; /* transparente só para segurar a altura */
	border-radius: var(--gg-r-pilula);
	box-shadow: none;
	font-family: var(--gg-fonte-texto);
	padding-left: 2.5em;
	transition: background-color var(--gg-transicao), border-color var(--gg-transicao);
}

.vector-search-box .cdx-text-input__input:hover {
	background: var(--gg-superficie-3);
}

.vector-search-box .cdx-text-input__input:focus {
	background: var(--gg-superficie);
	border-color: var(--gg-azul-vivo);
	box-shadow: 0 0 0 2px var(--gg-azul-vivo);
	outline: 0;
}

.vector-search-box .cdx-search-input__end-button,
.vector-search-box .cdx-search-input__end-button:visited {
	background: transparent;
	border: 0;
	box-shadow: none;
	color: var(--gg-link);
	border-radius: var(--gg-r-pilula);
	margin-left: .3rem;
	font-family: var(--gg-fonte-texto);
	font-weight: 500;
}

.vector-search-box .cdx-search-input__end-button:hover {
	background: var(--gg-superficie-3);
	color: var(--gg-link-hover);
}

.cdx-menu {
	background: var(--gg-superficie);
	border: 1px solid var(--gg-borda);
	border-radius: var(--gg-r-2);
	box-shadow: var(--gg-sombra-2);
	overflow: hidden;
}

/* --- Colunas laterais --- */
.vector-main-menu-container .vector-main-menu,
.vector-page-tools,
.vector-toc,
.vector-appearance,
.vector-dropdown-content {
	background: var(--gg-superficie);
	color: var(--gg-texto);
	border: 1px solid var(--gg-borda);
	border-radius: var(--gg-r-2);
	box-shadow: var(--gg-sombra-1);
	padding: .6rem .5rem;
}

.vector-pinnable-header,
.vector-menu-heading,
.vector-toc-pinnable-header {
	font-family: var(--gg-fonte-texto);
	font-weight: 700;
	font-size: .78rem;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--gg-texto-suave);
}

.vector-menu-content-list li a,
.vector-toc-link,
.vector-page-tools .mw-list-item a {
	color: var(--gg-link);
	border-radius: var(--gg-r-1);
	padding-inline: .5rem;
	text-decoration: none;
	transition: background-color var(--gg-transicao), color var(--gg-transicao);
}

.vector-menu-content-list li a:hover,
.vector-toc-link:hover,
.vector-page-tools .mw-list-item a:hover {
	background: var(--gg-superficie-3);
	color: var(--gg-link-hover);
	text-decoration: underline;
}

.vector-toc-list-item-active > .vector-toc-link {
	background: var(--gg-superficie-3);
	font-weight: 700;
	box-shadow: inset 3px 0 0 var(--gg-azul-vivo);
}

/* --- Abas: só um sublinhado de acento --- */
.vector-menu-tabs .mw-list-item a,
.vector-menu-tabs-legacy li a {
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--gg-link);
	font-weight: 500;
	transition: color var(--gg-transicao), box-shadow var(--gg-transicao);
}

.vector-menu-tabs .mw-list-item a:hover {
	background: transparent;
	color: var(--gg-link-hover);
	text-decoration: underline;
}

.vector-menu-tabs .selected a,
.vector-menu-tabs .selected a:visited {
	background: transparent;
	color: var(--gg-texto);
	font-weight: 700;
	box-shadow: inset 0 -3px 0 var(--gg-azul-vivo);
}

/* --- Botões --- */
.cdx-button:not(.cdx-button--weight-quiet) {
	border-radius: var(--gg-r-pilula);
	font-family: var(--gg-fonte-texto);
	font-weight: 500;
	border-color: var(--gg-borda-forte);
	background: var(--gg-superficie-2);
	color: var(--gg-texto);
}

.cdx-button--action-progressive.cdx-button--weight-primary {
	background: var(--gg-azul);
	border-color: var(--gg-azul);
	color: var(--gg-sobre-acento);
}

.cdx-button--weight-quiet {
	color: var(--gg-link);
	border-radius: var(--gg-r-1);
}

/* --- Rodapé --- */
.mw-footer,
.mw-footer-container {
	background: transparent;
	color: var(--gg-texto-suave);
	border-top: 0;
}

.mw-footer-container {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--gg-borda);
}

.mw-footer li,
.mw-footer a {
	color: var(--gg-texto-suave);
}

.mw-footer a:hover {
	color: var(--gg-link-hover);
}


/* =============================================================================
 *  9. INFOBOXES
 *
 *  POR QUE O TÍTULO DESGRUDAVA
 *  O <caption> fica FORA da caixa da <table>: nem o border-radius nem o
 *  overflow da tabela o alcançam. São dois retângulos empilhados, e qualquer
 *  diferença entre eles aparece como emenda. A costura exige três coisas:
 *
 *    1. Raios espelhados — o título arredonda só em cima, a tabela só embaixo,
 *       com o MESMO valor (--gg-r-3).
 *    2. Bordas complementares — o título tem topo e laterais, a tabela tem
 *       laterais e base. Nenhum dos dois tem a borda do meio.
 *    3. Acento como SOMBRA INTERNA, não como borda. Borda ocuparia espaço
 *       próprio e reapareceria como aquela terceira linha entre os dois.
 *
 *  box-sizing: border-box nos dois garante largura idêntica ao pixel.
 * ========================================================================== */

.gg-infobox {
	float: right;
	clear: right;
	box-sizing: border-box;
	width: 22rem;
	max-width: 100%;
	margin: .3rem 0 1.5rem 1.75rem;
	background: var(--gg-superficie);
	border: 1px solid var(--gg-borda);
	border-top: 0;
	border-radius: 0 0 var(--gg-r-3) var(--gg-r-3);
	box-shadow: var(--gg-sombra-1);
	border-collapse: separate;
	border-spacing: 0;
	font-size: .92rem;
	line-height: 1.5;
}

.gg-infobox-titulo {
	caption-side: top;
	box-sizing: border-box;
	text-align: left;
	font-family: var(--gg-fonte-display);
	font-weight: 700;
	font-size: 1.35rem;
	line-height: 1.25;
	color: var(--gg-acento);
	background: var(--gg-acento-fraco);
	padding: .9rem 1.15rem .85rem;
	border: 1px solid var(--gg-borda);
	border-bottom: 0;
	border-radius: var(--gg-r-3) var(--gg-r-3) 0 0;
	box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--gg-acento) 30%, transparent);
}

.gg-infobox-subtitulo {
	padding: .7rem 1.15rem;
	background: var(--gg-acento-fraco);
	color: var(--gg-texto-suave);
	font-size: .9em;
}

.gg-infobox-imagem {
	padding: .95rem 1.15rem;
	text-align: center;
	background: var(--gg-superficie-2);
}

.gg-infobox-imagem img {
	max-width: 100%;
	height: auto;
	border-radius: var(--gg-r-1);
}

.gg-infobox-legenda {
	margin-top: .5rem;
	font-size: .85em;
	color: var(--gg-texto-suave);
	line-height: 1.45;
}

.gg-infobox-rotulo {
	width: 38%;
	text-align: left;
	vertical-align: top;
	font-weight: 700;
	color: var(--gg-texto-suave);
	padding: .6rem .5rem .6rem 1.15rem;
	hyphens: auto;
}

.gg-infobox-dado {
	vertical-align: top;
	padding: .6rem 1.15rem .6rem .5rem;
}

/* Zebra em vez de linhas: ajuda a rastrear a linha sem mais uma borda. */
.gg-infobox tr:nth-child(even) .gg-infobox-rotulo,
.gg-infobox tr:nth-child(even) .gg-infobox-dado {
	background: var(--gg-superficie-2);
}

.gg-infobox-rodape {
	padding: .75rem 1.15rem;
	background: var(--gg-superficie-2);
	font-size: .85em;
	color: var(--gg-texto-suave);
	border-radius: 0 0 var(--gg-r-3) var(--gg-r-3);
}

/* --- Cor de espécie. Os pares vêm dos tokens, logo já respeitam o tema. --- */
.gg-infobox-jogo       { --gg-acento: var(--gg-a-jogo);       --gg-acento-fraco: var(--gg-a-jogo-f); }
.gg-infobox-estagio    { --gg-acento: var(--gg-a-estagio);    --gg-acento-fraco: var(--gg-a-estagio-f); }
.gg-infobox-criador    { --gg-acento: var(--gg-a-criador);    --gg-acento-fraco: var(--gg-a-criador-f); }
.gg-infobox-criacao    { --gg-acento: var(--gg-a-criacao);    --gg-acento-fraco: var(--gg-a-criacao-f); }
.gg-infobox-download   { --gg-acento: var(--gg-a-download);   --gg-acento-fraco: var(--gg-a-download-f); }
.gg-infobox-raridade   { --gg-acento: var(--gg-a-raridade);   --gg-acento-fraco: var(--gg-a-raridade-f); }
.gg-infobox-ferramenta { --gg-acento: var(--gg-a-ferramenta); --gg-acento-fraco: var(--gg-a-ferramenta-f); }
.gg-infobox-arquetipo  { --gg-acento: var(--gg-a-arquetipo);  --gg-acento-fraco: var(--gg-a-arquetipo-f); }


/* =============================================================================
 *  10. {{Esboço}}
 * ========================================================================== */

.gg-esboco {
	display: flow-root;
	clear: both;
	margin: 2.25rem 0 1rem;
	padding: 1rem 1.2rem 1rem 3.4rem;
	background: var(--gg-superficie-2);
	border: 1px dashed var(--gg-borda-forte);
	border-radius: var(--gg-r-2);
	color: var(--gg-texto-suave);
	font-size: .95rem;
	position: relative;
}

/* Broto decorativo — CSS puro, invisível para leitores de tela. */
.gg-esboco::before {
	content: "";
	position: absolute;
	left: 1.25rem;
	top: 1.2rem;
	width: .85rem;
	height: .85rem;
	border-radius: 60% 0 60% 60%;
	background: var(--gg-verde);
	transform: rotate(-15deg);
}


/* =============================================================================
 *  11. {{Trilha de estágios}}
 * ========================================================================== */

.gg-evolucao {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	margin: 0 0 1.75rem;
	padding: .4rem;
	background: var(--gg-superficie-2);
	border: 0;
	border-radius: var(--gg-r-pilula);
	counter-reset: etapa;
}

.gg-evolucao-etapa {
	counter-increment: etapa;
	flex: 1 1 7rem;
	text-align: center;
}

.gg-evolucao-etapa a {
	display: block;
	padding: .5rem .65rem;
	border-radius: var(--gg-r-pilula);
	font-family: var(--gg-fonte-texto);
	font-weight: 500;
	font-size: .95rem;
	color: var(--gg-link);
	text-decoration: none;
	background: transparent;
	border: 0;
	transition: background-color var(--gg-transicao), color var(--gg-transicao), transform var(--gg-transicao);
}

.gg-evolucao-etapa a::before {
	content: counter(etapa) ".";
	margin-right: .35em;
	color: var(--gg-texto-suave);
	font-variant-numeric: tabular-nums;
}

.gg-evolucao-etapa a:hover {
	background: var(--gg-superficie-3);
	color: var(--gg-link-hover);
	transform: translateY(-1px);
	text-decoration: underline;
}

/* Estágio atual: cor + peso + preenchimento. Três sinais, não só cor. */
.gg-evolucao-atual a,
.gg-evolucao-atual a:visited {
	background: var(--gg-azul);
	color: var(--gg-sobre-acento);
	font-weight: 700;
}

.gg-evolucao-atual a::before {
	color: inherit;
	opacity: .7;
}


/* =============================================================================
 *  12. TABELAS
 * ========================================================================== */

.mw-parser-output table.wikitable {
	background: var(--gg-superficie);
	color: var(--gg-texto);
	border: 1px solid var(--gg-borda);
	border-radius: var(--gg-r-2);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	box-shadow: var(--gg-sombra-1);
}

.mw-parser-output table.wikitable > * > tr > th {
	background: var(--gg-superficie-3);
	color: var(--gg-texto);
	border: 0;
	padding: .65rem .8rem;
	text-align: left;
}

.mw-parser-output table.wikitable > * > tr > td {
	border: 0;
	padding: .6rem .8rem;
}

.mw-parser-output table.wikitable > * > tr:nth-child(even) > td {
	background: var(--gg-superficie-2);
}

/* --- {{Tabela evolutiva}}: mesma costura da infobox --- */
.gg-tabela-evolutiva {
	box-sizing: border-box;
	width: 100%;
	margin: 1.75rem 0;
	background: var(--gg-superficie);
	color: var(--gg-texto);
	border: 1px solid var(--gg-borda);
	border-top: 0;
	border-radius: 0 0 var(--gg-r-2) var(--gg-r-2);
	border-collapse: separate;
	border-spacing: 0;
	box-shadow: var(--gg-sombra-1);
}

.gg-tabela-evolutiva caption {
	caption-side: top;
	box-sizing: border-box;
	font-family: var(--gg-fonte-texto);
	font-weight: 700;
	text-align: left;
	padding: .85rem 1rem;
	color: var(--gg-texto);
	background: var(--gg-superficie-2);
	border: 1px solid var(--gg-borda);
	border-bottom: 0;
	border-radius: var(--gg-r-2) var(--gg-r-2) 0 0;
	box-shadow: inset 0 -2px 0 var(--gg-borda);
}

.gg-tabela-evolutiva th[scope="col"] {
	background: var(--gg-superficie-3);
	padding: .6rem .8rem;
	text-align: left;
	font-size: .82rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	border: 0;
}

.gg-tabela-evolutiva td,
.gg-tabela-evolutiva th[scope="row"] {
	padding: .7rem .8rem;
	border: 0;
	vertical-align: top;
	text-align: left;
}

.gg-tabela-evolutiva tbody tr:nth-child(even) td,
.gg-tabela-evolutiva tbody tr:nth-child(even) th[scope="row"] {
	background: var(--gg-superficie-2);
}

.gg-te-escolha {
	font-weight: 700;
	white-space: nowrap;
	position: relative;
	padding-left: 2.2rem !important;
}

/*
 * Marcador da escolha: a FORMA muda junto com a cor — círculo, losango,
 * triângulo. A linha continua legível em escala de cinza.
 */
.gg-te-escolha::before {
	content: "";
	position: absolute;
	left: .9rem;
	top: 1.1em;
	width: .6rem;
	height: .6rem;
	background: var(--gg-texto-suave);
}

.gg-cor-verde .gg-te-escolha::before    { background: var(--gg-verde); border-radius: 50%; }
.gg-cor-azul .gg-te-escolha::before     { background: var(--gg-azul); transform: rotate(45deg); }
.gg-cor-vermelho .gg-te-escolha::before { background: var(--gg-vermelho); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.gg-cor-neutra .gg-te-escolha::before   { background: var(--gg-texto-suave); border-radius: var(--gg-r-1); }

.gg-cor-verde > th:first-child    { box-shadow: inset 4px 0 0 var(--gg-verde); }
.gg-cor-azul > th:first-child     { box-shadow: inset 4px 0 0 var(--gg-azul); }
.gg-cor-vermelho > th:first-child { box-shadow: inset 4px 0 0 var(--gg-vermelho); }
.gg-cor-neutra > th:first-child   { box-shadow: inset 4px 0 0 var(--gg-borda-forte); }


/* =============================================================================
 *  13. PÁGINA INICIAL
 *
 *  Aqui a conta de bordas foi a zero. O herói é UM bloco contínuo: os três
 *  elementos empilhados (título, subtítulo, painel de números) carregam
 *  fatias da mesma rampa vertical, e a cor final de cada um é a inicial do
 *  seguinte — a emenda desaparece sem precisar de wrapper no wikitexto.
 * ========================================================================== */

/*
 * O cartão externo sai em qualquer página que contenha o herói, sem depender
 * de como a página se chama. A lista é generosa de propósito: cobre as
 * variações de estrutura entre versões do MediaWiki.
 */
.mw-page-container:has(.gg-inicio),
.mw-page-container-inner:has(.gg-inicio),
.mw-content-container:has(.gg-inicio),
.mw-body:has(.gg-inicio),
#content.mw-body:has(.gg-inicio),
.vector-body:has(.gg-inicio) {
	background: transparent;
	border: 0;
	box-shadow: none;
}

.gg-inicio {
	max-width: 62rem;
	margin-inline: auto;
}

/* --- Herói, fatia 1: a CAIXA do título (invólucro ou o próprio h1) --- */
.gg-inicio > h1,
.gg-inicio > .mw-heading1 {
	background: linear-gradient(180deg, var(--gg-heroi-1), var(--gg-heroi-2));
	border: 0;
	border-radius: var(--gg-r-3) var(--gg-r-3) 0 0;
	padding: 2.8rem 1.5rem 1.2rem;
	margin: 0;
	text-align: center;
	display: block;
}

/* --- Herói: o TEXTO do título, embrulhado ou não --- */
.gg-inicio > h1,
.gg-inicio > .mw-heading1 h1,
.gg-inicio .mw-heading1 h1 {
	font-family: var(--gg-fonte-display);
	font-weight: 400;
	font-size: clamp(2rem, 5.5vw, 3.2rem);
	line-height: 1.08;
	color: var(--gg-sobre-heroi);
	border: 0;
	margin: 0;
	text-align: center;
}

/* --- Herói, fatia 2: subtítulo --- */
.gg-subtitulo {
	text-align: center;
	color: var(--gg-sobre-heroi);
	background: linear-gradient(180deg, var(--gg-heroi-2), var(--gg-heroi-3));
	padding: 0 1.5rem 1.9rem;
	font-size: 1.05rem;
	margin: 0;
}

.gg-subtitulo b,
.gg-subtitulo strong {
	font-weight: 700;
}

/* --- Herói, fatia 3: painel de números --- */
.gg-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
	background: linear-gradient(180deg, var(--gg-heroi-3), var(--gg-heroi-4));
	border: 0;
	border-radius: 0 0 var(--gg-r-3) var(--gg-r-3);
	overflow: hidden;
	margin: 0 0 2.75rem;
	box-shadow: none;
}

.gg-stat {
	background: transparent;
	padding: 1.35rem .85rem 1.5rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: .15rem;
	justify-content: center;
	box-shadow: inset 1px 0 0 var(--gg-sobre-heroi-linha);
}

.gg-stat:first-child {
	box-shadow: none;
}

.gg-stat-numero {
	font-family: var(--gg-fonte-display);
	font-size: 2rem;
	line-height: 1.1;
	font-weight: 400;
	color: var(--gg-sobre-heroi);
	font-variant-numeric: tabular-nums;
}

.gg-stat-rotulo {
	font-size: .84rem;
	line-height: 1.35;
	color: var(--gg-sobre-heroi);
	text-wrap: balance;
}

/* --- Seções: sem régua, só o traço de acento --- */
.gg-inicio .mw-heading2,
.gg-inicio > h2 {
	border-bottom: 0;
	padding-bottom: .5rem;
	margin: 2.5rem 0 1rem;
}

.gg-inicio .mw-heading2::after,
.gg-inicio > h2::after {
	bottom: 0;
	width: 2.75rem;
}

.gg-inicio .mw-heading2 h2,
.gg-inicio > h2 {
	font-size: 1.4rem;
}

/*
 * Pastilhas: preenchimento em vez de contorno. Continuam <ul>/<li> no HTML,
 * então a semântica e a navegação por leitor de tela não mudam.
 */
.gg-inicio ul {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
	gap: .55rem;
}

.gg-inicio ul li {
	margin: 0;
}

.gg-inicio ul li a {
	display: block;
	padding: .85rem 1.05rem;
	background: var(--gg-superficie-2);
	border: 0;
	border-left: 4px solid var(--gg-azul-vivo);
	border-radius: var(--gg-r-1) var(--gg-r-2) var(--gg-r-2) var(--gg-r-1);
	color: var(--gg-link);
	font-weight: 500;
	text-decoration: none;
	box-shadow: none;
	transition: transform var(--gg-transicao), background-color var(--gg-transicao),
		border-color var(--gg-transicao);
}

.gg-inicio ul li a:hover {
	transform: translateY(-2px);
	background: var(--gg-superficie-3);
	border-left-color: var(--gg-azul);
	text-decoration: underline;
}

.gg-inicio ul li a.new {
	border-left-color: var(--gg-vermelho);
}


/* =============================================================================
 *  14. IMAGENS E MISCELÂNEA
 * ========================================================================== */

.mw-parser-output figure[typeof~='mw:File/Thumb'],
.mw-parser-output .thumbinner {
	background: var(--gg-superficie-2);
	color: var(--gg-texto);
	border: 0;
	border-radius: var(--gg-r-2);
	box-shadow: none;
	padding: .55rem;
}

.mw-parser-output .thumbcaption,
.mw-parser-output figcaption {
	color: var(--gg-texto-suave);
	font-size: .88rem;
	line-height: 1.45;
	padding: .5rem .35rem .2rem;
}

.mw-parser-output figure img,
.mw-parser-output .thumbimage {
	border: 0;
	border-radius: var(--gg-r-1);
}

.catlinks {
	background: var(--gg-superficie-2);
	color: var(--gg-texto);
	border: 0;
	border-radius: var(--gg-r-2);
	padding: .85rem 1.1rem;
	margin-top: 2.25rem;
}

.mw-parser-output .reflist,
.mw-parser-output .references {
	font-size: .9rem;
	color: var(--gg-texto-suave);
}

.mw-message-box,
.cdx-message {
	border-radius: var(--gg-r-2);
}

.mw-parser-output .toc {
	background: var(--gg-superficie-2);
	border: 0;
	border-radius: var(--gg-r-2);
}


/* =============================================================================
 *  15. RESPONSIVO
 * ========================================================================== */

@media (max-width: 720px) {
	#content.mw-body,
	.vector-body {
		padding: 1.25rem 1.1rem 2rem;
	}

	.mw-content-container,
	#content.mw-body {
		border-radius: var(--gg-r-2);
	}

	.gg-infobox,
	.gg-infobox-titulo {
		float: none;
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}

	.gg-infobox {
		margin-bottom: 1.5rem;
	}

	.gg-evolucao {
		border-radius: var(--gg-r-2);
	}

	.gg-inicio ul {
		grid-template-columns: 1fr;
	}

	.gg-stats {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Na grade 2×2 a linha separadora da terceira célula fica sobrando. */
	.gg-stat:nth-child(3) {
		box-shadow: none;
	}

	.gg-tabela-evolutiva,
	.mw-parser-output table.wikitable {
		display: block;
		overflow-x: auto;
		max-width: 100%;
	}
}


/* =============================================================================
 *  16. PREFERÊNCIAS DO LEITOR
 * ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}

	.gg-inicio ul li a:hover,
	.gg-evolucao-etapa a:hover {
		transform: none;
	}
}

@media (forced-colors: active) {
	.gg-infobox,
	.gg-infobox-titulo,
	.gg-esboco,
	.gg-evolucao,
	.gg-tabela-evolutiva,
	.gg-stats,
	.gg-inicio ul li a,
	.mw-content-container {
		border: 1px solid CanvasText;
		box-shadow: none;
	}

	.gg-evolucao-atual a {
		outline: 3px solid CanvasText;
		outline-offset: 2px;
	}

	body::before {
		display: none;
	}
}

@media print {
	body::before {
		display: none;
	}

	.mw-content-container,
	#content.mw-body,
	.gg-infobox,
	.gg-stats,
	.gg-tabela-evolutiva {
		box-shadow: none;
		border-color: #999;
	}

	.gg-inicio > h1,
	.gg-inicio > .mw-heading1,
	.gg-inicio > .mw-heading1 h1,
	.gg-subtitulo,
	.gg-stats,
	.gg-stat-numero,
	.gg-stat-rotulo {
		background: none !important;
		color: #000 !important;
	}

	.gg-evolucao,
	.catlinks {
		display: none;
	}
}
Admin (discussão | contribs)

Edição das 06h59min de 28 de julho de 2026
