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

Edição das 21h51min de 27 de julho de 2026

/*!
 * =============================================================================
 *  GUIA GALÁCTICO — MediaWiki:Vector-2022.css
 * =============================================================================
 *
 *  Estilo personalizado para a skin Vector 2022.
 *
 *  Conceito: "caderno de campo do xenobiólogo". Papel claro com o fundo
 *  glífico da marca, cartões flutuando sobre ele, e o azul Spore
 *  (extraído do brand toolkit) como cor condutora. Cada tipo de infobox
 *  ganha uma cor de espécie própria.
 *
 *  Convenções:
 *   - Todas as variáveis usam o prefixo --gg-.
 *   - Nada depende de JavaScript.
 *   - Cor nunca é o único portador de significado.
 *   - Contraste mínimo 4.5:1 para texto; 3:1 para bordas e ícones.
 *   - Tema escuro automático + respeito ao seletor de aparência do MediaWiki.
 *   - Movimento sempre atrás de prefers-reduced-motion.
 *
 *  Manutenção:
 *   - Para trocar a fonte display de todo o site, mexa só em --gg-fonte-display.
 *   - Para trocar a cor de um tipo de infobox, mexa só em --gg-acento na regra
 *     .gg-infobox-<tipo>.
 *   - Os caminhos url() são absolutos a partir da raiz do domínio de propósito:
 *     o CSS do site é servido por load.php, então caminhos relativos quebram.
 * =============================================================================
 */


/* =============================================================================
 *  1. FONTES
 *  Remova este bloco se ele já estiver 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 (amostras tiradas do brand toolkit) --- */
	--gg-azul-abissal: #041c3a;
	--gg-azul-profundo: #0a2f5c;
	--gg-azul: #0b5ea8;
	--gg-azul-vivo: #1a8fd0;
	--gg-ciano: #4fc3e8;
	--gg-roxo: #6d2a86;

	/* --- Cores de significado (consequências, raridades, avisos) --- */
	--gg-verde: #2e7d4f;
	--gg-vermelho: #b3341f;
	--gg-ambar: #92610a;
	--gg-laranja: #b04d1c;

	/* --- Superfícies --- */
	--gg-fundo: #eef3f9;
	--gg-superficie: #ffffff;
	--gg-superficie-2: #f4f8fc;
	--gg-superficie-3: #e6eef8;
	--gg-borda: #cbdbeb;
	--gg-borda-forte: #9db8d3;

	/* --- Texto --- */
	--gg-texto: #14202e;
	--gg-texto-suave: #48596d;
	--gg-texto-invertido: #ffffff;

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

	/* --- Foco: sempre visível, sempre com 3:1 contra o fundo --- */
	--gg-foco: #1a8fd0;
	--gg-foco-sombra: #041c3a;

	/* --- Acento padrão (cada infobox sobrescreve o seu) --- */
	--gg-acento: var(--gg-azul);
	--gg-acento-fraco: #e6eef8;

	/* --- 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, 'Cascadia Code', monospace;

	/* --- Forma --- */
	--gg-r-1: 6px;
	--gg-r-2: 10px;
	--gg-r-3: 16px;
	--gg-r-pilula: 999px;

	/* --- Profundidade --- */
	--gg-sombra-1: 0 1px 2px rgba(4, 28, 58, .05), 0 2px 8px rgba(4, 28, 58, .06);
	--gg-sombra-2: 0 2px 4px rgba(4, 28, 58, .07), 0 12px 32px rgba(4, 28, 58, .10);

	/* --- Fundo glífico --- */
	--gg-glifos-opacidade: .55;
	--gg-glifos-filtro: none;
	--gg-glifos-tamanho: 420px;

	/* --- Ritmo --- */
	--gg-transicao: 140ms ease;
}


/* =============================================================================
 *  3. TOKENS — TEMA ESCURO
 *
 *  Dois gatilhos:
 *   a) o seletor de aparência do MediaWiki (skin-theme-clientpref-night);
 *   b) a preferência do sistema, a menos que o leitor tenha fixado o modo claro.
 *  Assim funciona com ou sem o modo noturno instalado no wiki.
 * ========================================================================== */

html.skin-theme-clientpref-night {
	--gg-azul-abissal: #06101f;
	--gg-azul-profundo: #0d2440;
	--gg-azul: #6ec1f0;
	--gg-azul-vivo: #8fd4fa;
	--gg-ciano: #a5e4f7;
	--gg-roxo: #c79ce0;

	--gg-verde: #74d19a;
	--gg-vermelho: #ff9d86;
	--gg-ambar: #e2b565;
	--gg-laranja: #f0a072;

	--gg-fundo: #0a1220;
	--gg-superficie: #111c2e;
	--gg-superficie-2: #17243a;
	--gg-superficie-3: #1e2f4a;
	--gg-borda: #2c405f;
	--gg-borda-forte: #46608a;

	--gg-texto: #e7eef8;
	--gg-texto-suave: #a9bad0;
	--gg-texto-invertido: #06101f;

	--gg-link: #6ec1f0;
	--gg-link-hover: #a5e4f7;
	--gg-link-visitado: #c79ce0;
	--gg-link-novo: #ff9d86;

	--gg-foco: #8fd4fa;
	--gg-foco-sombra: #06101f;

	--gg-acento: #6ec1f0;
	--gg-acento-fraco: #1e2f4a;

	--gg-sombra-1: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .3);
	--gg-sombra-2: 0 2px 4px rgba(0, 0, 0, .45), 0 12px 32px rgba(0, 0, 0, .4);

	/* O fundo glífico é claro: invertemos e apagamos bastante. */
	--gg-glifos-opacidade: .07;
	--gg-glifos-filtro: invert(1);
}

@media (prefers-color-scheme: dark) {
	html:not(.skin-theme-clientpref-day) {
		--gg-azul-abissal: #06101f;
		--gg-azul-profundo: #0d2440;
		--gg-azul: #6ec1f0;
		--gg-azul-vivo: #8fd4fa;
		--gg-ciano: #a5e4f7;
		--gg-roxo: #c79ce0;

		--gg-verde: #74d19a;
		--gg-vermelho: #ff9d86;
		--gg-ambar: #e2b565;
		--gg-laranja: #f0a072;

		--gg-fundo: #0a1220;
		--gg-superficie: #111c2e;
		--gg-superficie-2: #17243a;
		--gg-superficie-3: #1e2f4a;
		--gg-borda: #2c405f;
		--gg-borda-forte: #46608a;

		--gg-texto: #e7eef8;
		--gg-texto-suave: #a9bad0;
		--gg-texto-invertido: #06101f;

		--gg-link: #6ec1f0;
		--gg-link-hover: #a5e4f7;
		--gg-link-visitado: #c79ce0;
		--gg-link-novo: #ff9d86;

		--gg-foco: #8fd4fa;
		--gg-foco-sombra: #06101f;

		--gg-acento: #6ec1f0;
		--gg-acento-fraco: #1e2f4a;

		--gg-sombra-1: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .3);
		--gg-sombra-2: 0 2px 4px rgba(0, 0, 0, .45), 0 12px 32px rgba(0, 0, 0, .4);

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


/* =============================================================================
 *  4. PONTE COM OS TOKENS DO CODEX
 *  Faz os componentes que ainda não estilizamos herdarem a paleta sozinhos.
 * ========================================================================== */

:root,
html.skin-theme-clientpref-night {
	--background-color-base: var(--gg-superficie);
	--background-color-neutral-subtle: var(--gg-superficie-2);
	--background-color-interactive-subtle: var(--gg-superficie-2);
	--background-color-interactive: var(--gg-superficie-3);
	--color-base: var(--gg-texto);
	--color-emphasized: var(--gg-texto);
	--color-subtle: 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);
	--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);
}


/* =============================================================================
 *  5. BASE — PÁGINA, FUNDO, TIPOGRAFIA
 * ========================================================================== */

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;
}

/*
 * Camada de glifos. Fica atrás de tudo, em position: fixed, para que o
 * padrão não role junto com o texto e não vire ruído durante a leitura.
 */
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);
}

/* Foco visível e generoso — vale para tudo, inclusive links dentro do texto. */
:focus-visible {
	outline: 3px solid var(--gg-foco);
	outline-offset: 2px;
	border-radius: 3px;
	box-shadow: 0 0 0 5px color-mix(in srgb, var(--gg-foco-sombra) 22%, transparent);
}

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

/* --- Ligações --- *
 * Sublinhado mantido: em texto corrido ele é o único sinal não cromático
 * de que algo é clicável.
 */
.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 45%, 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;
}


/* --- Títulos --- *
 * A fonte SPORE entra só nos títulos grandes. Corpo de texto e títulos
 * pequenos ficam com a Atkinson, que foi desenhada para legibilidade.
 */
.mw-body h1,
.mw-body h2,
.mw-body h3,
.mw-body h4,
.mw-body h5,
.mw-body h6,
.mw-heading {
	font-family: var(--gg-fonte-texto);
	color: var(--gg-texto);
	line-height: 1.25;
	scroll-margin-top: 4.5rem;
}

.mw-body h1,
.mw-body-header h1,
#firstHeading {
	font-family: var(--gg-fonte-display);
	font-weight: 400;
	font-size: 2.15rem;
	letter-spacing: .01em;
	border-bottom: 0;
	color: var(--gg-azul-profundo);
}

html.skin-theme-clientpref-night #firstHeading {
	color: var(--gg-texto);
}

/* h2 recebe uma régua com um "cromossomo" de acento à esquerda. */
.mw-body h2,
.mw-heading2 {
	font-family: var(--gg-fonte-texto);
	font-weight: 700;
	font-size: 1.5rem;
	border-bottom: 2px solid var(--gg-borda);
	padding-bottom: .35rem;
	margin-top: 2.2rem;
	position: relative;
}

.mw-body h2::after,
.mw-heading2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 2.75rem;
	height: 2px;
	background: var(--gg-azul-vivo);
	border-radius: var(--gg-r-pilula);
}

.mw-body h3,
.mw-heading3 {
	font-weight: 700;
	font-size: 1.2rem;
	margin-top: 1.6rem;
}

.mw-body h4,
.mw-heading4 {
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--gg-texto-suave);
}

.mw-parser-output p {
	margin: .75em 0;
	max-width: 78ch; /* medida de leitura confortável */
}

.mw-parser-output b,
.mw-parser-output strong {
	font-weight: 700;
}

/* --- Código --- */
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-azul-profundo);
}

html.skin-theme-clientpref-night code {
	color: var(--gg-ciano);
}

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

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

blockquote {
	border-left: 4px 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;
}


/* =============================================================================
 *  6. ESTRUTURA DA SKIN — CONTÊINER, CABEÇALHO, COLUNAS, RODAPÉ
 * ========================================================================== */

/* O contêiner vira um cartão flutuando sobre os glifos. */
.mw-page-container {
	background: transparent;
	max-width: 1600px;
}

.mw-content-container,
.mw-body,
.mw-body-content,
#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);
}

/* Evita cartão-dentro-de-cartão quando os dois seletores coincidem. */
.mw-content-container .mw-body {
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
}

#content.mw-body,
.vector-body {
	padding: 1.75rem 2rem 2.5rem;
}

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

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

.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 --- */
.vector-search-box .cdx-text-input__input,
.vector-search-box input[type="search"] {
	background: var(--gg-superficie);
	border: 1px solid var(--gg-borda-forte);
	border-radius: var(--gg-r-pilula);
	color: var(--gg-texto);
	font-family: var(--gg-fonte-texto);
	padding-left: 2.4em;
	transition: border-color var(--gg-transicao), box-shadow var(--gg-transicao);
}

.vector-search-box .cdx-text-input__input:hover {
	border-color: var(--gg-azul-vivo);
}

.vector-search-box .cdx-text-input__input:focus {
	border-color: var(--gg-azul-vivo);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--gg-azul-vivo) 28%, transparent);
	outline: 0;
}

.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 (menu principal, sumário, ferramentas) --- */
.vector-column-start,
.vector-column-end {
	color: var(--gg-texto);
}

.vector-main-menu-container .vector-main-menu,
.vector-page-tools,
.vector-toc,
.vector-appearance,
#vector-main-menu-dropdown .vector-dropdown-content,
.vector-dropdown-content {
	background: var(--gg-superficie);
	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;
}

/* Item ativo do sumário: barra de acento + peso, não só cor. */
.vector-toc-list-item-active > .vector-toc-link {
	background: var(--gg-acento-fraco);
	font-weight: 700;
	box-shadow: inset 3px 0 0 var(--gg-azul-vivo);
}

/* --- Abas de página (Artigo / Discussão / Ler / Editar / Histórico) --- */
.vector-menu-tabs .mw-list-item a,
.vector-menu-tabs-legacy li a {
	background: transparent;
	border: 0;
	border-radius: var(--gg-r-pilula) var(--gg-r-pilula) 0 0;
	color: var(--gg-link);
	font-weight: 500;
	transition: background-color var(--gg-transicao), box-shadow var(--gg-transicao);
}

.vector-menu-tabs .mw-list-item a:hover {
	background: var(--gg-superficie-3);
}

.vector-menu-tabs .selected a,
.vector-menu-tabs .selected a:visited {
	color: var(--gg-texto);
	font-weight: 700;
	background: var(--gg-superficie-2);
	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);
	transition: transform var(--gg-transicao), box-shadow var(--gg-transicao);
}

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

html.skin-theme-clientpref-night .cdx-button--action-progressive.cdx-button--weight-primary {
	color: var(--gg-azul-abissal);
}

.cdx-button:not(.cdx-button--weight-quiet):hover {
	transform: translateY(-1px);
	box-shadow: var(--gg-sombra-1);
}

.cdx-button:active {
	transform: translateY(0);
}

/* --- 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);
}


/* =============================================================================
 *  7. INFOBOXES — {{Infobox}} e derivadas
 * ========================================================================== */

.gg-infobox {
	--gg-acento: var(--gg-azul);
	--gg-acento-fraco: #e6eef8;

	float: right;
	clear: right;
	width: 22.5rem;
	max-width: 100%;
	margin: 0 0 1.25rem 1.5rem;
	border: 1px solid var(--gg-borda);
	border-top: 4px solid var(--gg-acento);
	border-radius: var(--gg-r-2);
	background: var(--gg-superficie);
	box-shadow: var(--gg-sombra-1);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	font-size: .92rem;
	line-height: 1.5;
}

.gg-infobox-titulo {
	font-family: var(--gg-fonte-display);
	font-weight: 400;
	font-size: 1.35rem;
	line-height: 1.2;
	text-align: left;
	padding: .85rem 1rem .3rem;
	color: var(--gg-acento);
	background: var(--gg-acento-fraco);
	caption-side: top;
}

html.skin-theme-clientpref-night .gg-infobox-titulo {
	color: var(--gg-texto);
}

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

.gg-infobox-imagem {
	padding: .9rem 1rem;
	text-align: center;
	background: var(--gg-superficie-2);
	border-bottom: 1px solid var(--gg-borda);
}

.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: .55rem .5rem .55rem 1rem;
	border-bottom: 1px solid var(--gg-borda);
	hyphens: auto;
}

.gg-infobox-dado {
	vertical-align: top;
	padding: .55rem 1rem .55rem .5rem;
	border-bottom: 1px solid var(--gg-borda);
}

/* Zebra suave: ajuda a rastrear a linha em infoboxes longas. */
.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: .7rem 1rem;
	background: var(--gg-superficie-2);
	border-top: 1px solid var(--gg-borda);
	font-size: .85em;
	color: var(--gg-texto-suave);
}

.gg-infobox tr:last-child .gg-infobox-rotulo,
.gg-infobox tr:last-child .gg-infobox-dado {
	border-bottom: 0;
}

/* --- Cor de espécie por tipo de infobox --- */
.gg-infobox-jogo       { --gg-acento: var(--gg-azul);     --gg-acento-fraco: #e6eef8; }
.gg-infobox-estagio    { --gg-acento: var(--gg-verde);    --gg-acento-fraco: #e3f2e9; }
.gg-infobox-criador    { --gg-acento: #0f6f8c;            --gg-acento-fraco: #e0f1f6; }
.gg-infobox-criacao    { --gg-acento: var(--gg-roxo);     --gg-acento-fraco: #f1e6f5; }
.gg-infobox-download   { --gg-acento: #37527a;            --gg-acento-fraco: #e8edf5; }
.gg-infobox-raridade   { --gg-acento: var(--gg-ambar);    --gg-acento-fraco: #f7efdd; }
.gg-infobox-ferramenta { --gg-acento: var(--gg-laranja);  --gg-acento-fraco: #f9e9e0; }
.gg-infobox-arquetipo  { --gg-acento: #4b3fa0;            --gg-acento-fraco: #e9e7f7; }

html.skin-theme-clientpref-night .gg-infobox-jogo       { --gg-acento: #6ec1f0; --gg-acento-fraco: #16293f; }
html.skin-theme-clientpref-night .gg-infobox-estagio    { --gg-acento: #74d19a; --gg-acento-fraco: #16301f; }
html.skin-theme-clientpref-night .gg-infobox-criador    { --gg-acento: #6fd0e8; --gg-acento-fraco: #113140; }
html.skin-theme-clientpref-night .gg-infobox-criacao    { --gg-acento: #c79ce0; --gg-acento-fraco: #2b1c39; }
html.skin-theme-clientpref-night .gg-infobox-download   { --gg-acento: #9fb6d8; --gg-acento-fraco: #1a2438; }
html.skin-theme-clientpref-night .gg-infobox-raridade   { --gg-acento: #e2b565; --gg-acento-fraco: #33270f; }
html.skin-theme-clientpref-night .gg-infobox-ferramenta { --gg-acento: #f0a072; --gg-acento-fraco: #35200f; }
html.skin-theme-clientpref-night .gg-infobox-arquetipo  { --gg-acento: #a99cf0; --gg-acento-fraco: #221e3f; }


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

.gg-esboco {
	display: flow-root;
	clear: both;
	margin: 2rem 0 1rem;
	padding: .9rem 1.1rem .9rem 3.25rem;
	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. Puramente CSS, portanto invisível para leitores de tela. */
.gg-esboco::before {
	content: "";
	position: absolute;
	left: 1.15rem;
	top: 1.05rem;
	width: .85rem;
	height: .85rem;
	border-radius: 60% 0 60% 60%;
	background: var(--gg-verde);
	transform: rotate(-15deg);
}


/* =============================================================================
 *  9. {{Trilha de estágios}} — .gg-evolucao
 * ========================================================================== */

.gg-evolucao {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	align-items: stretch;
	margin: 0 0 1.5rem;
	padding: .45rem;
	background: var(--gg-superficie-2);
	border: 1px solid var(--gg-borda);
	border-radius: var(--gg-r-pilula);
	counter-reset: etapa;
}

.gg-evolucao-etapa {
	counter-increment: etapa;
	flex: 1 1 7rem;
	position: relative;
	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: var(--gg-superficie);
	border: 1px solid var(--gg-borda);
	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 + borda dupla. Três sinais, para que a
 * informação sobreviva ao daltonismo e ao alto contraste.
 */
.gg-evolucao-atual a,
.gg-evolucao-atual a:visited {
	background: var(--gg-azul);
	border-color: var(--gg-azul);
	color: var(--gg-texto-invertido);
	font-weight: 700;
	box-shadow: 0 0 0 2px var(--gg-superficie-2), 0 0 0 4px var(--gg-azul);
}

html.skin-theme-clientpref-night .gg-evolucao-atual a,
html.skin-theme-clientpref-night .gg-evolucao-atual a:visited {
	color: var(--gg-azul-abissal);
}

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


/* =============================================================================
 *  10. 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;
	border-bottom: 2px solid var(--gg-borda-forte);
	padding: .6rem .75rem;
	text-align: left;
}

.mw-parser-output table.wikitable > * > tr > td {
	border: 0;
	border-bottom: 1px solid var(--gg-borda);
	padding: .55rem .75rem;
}

.mw-parser-output table.wikitable > * > tr:last-child > td {
	border-bottom: 0;
}

/* --- {{Tabela evolutiva}} --- */
.gg-tabela-evolutiva {
	width: 100%;
	margin: 1.5rem 0;
	background: var(--gg-superficie);
	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);
}

.gg-tabela-evolutiva caption {
	font-family: var(--gg-fonte-texto);
	font-weight: 700;
	text-align: left;
	padding: .8rem 1rem;
	color: var(--gg-texto);
	background: var(--gg-superficie-2);
	border-bottom: 1px solid var(--gg-borda);
}

.gg-tabela-evolutiva th[scope="col"] {
	background: var(--gg-superficie-3);
	padding: .6rem .8rem;
	text-align: left;
	font-size: .88rem;
	letter-spacing: .03em;
	text-transform: uppercase;
	border-bottom: 2px solid var(--gg-borda-forte);
}

.gg-tabela-evolutiva td,
.gg-tabela-evolutiva th[scope="row"] {
	padding: .65rem .8rem;
	border-bottom: 1px solid var(--gg-borda);
	vertical-align: top;
	text-align: left;
}

.gg-tabela-evolutiva tr:last-child td,
.gg-tabela-evolutiva tr:last-child th {
	border-bottom: 0;
}

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

/*
 * Marcador da escolha: a FORMA muda junto com a cor (círculo, losango,
 * triângulo). Assim a linha continua legível em escala de cinza.
 */
.gg-te-escolha::before {
	content: "";
	position: absolute;
	left: .85rem;
	top: 1.05em;
	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); }

.gg-cor-verde:hover,
.gg-cor-azul:hover,
.gg-cor-vermelho:hover,
.gg-cor-neutra:hover {
	background: var(--gg-superficie-2);
}


/* =============================================================================
 *  11. PÁGINA INICIAL — .gg-inicio
 * ========================================================================== */

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

/* Herói: gradiente do azul abissal ao azul Spore, com os glifos por cima. */
.gg-inicio > h1,
.gg-inicio > .mw-heading1 {
	font-family: var(--gg-fonte-display);
	font-weight: 400;
	font-size: clamp(2rem, 5.5vw, 3.1rem);
	line-height: 1.1;
	text-align: center;
	color: var(--gg-texto-invertido);
	background:
		linear-gradient(135deg, var(--gg-azul-abissal), var(--gg-azul) 60%, var(--gg-azul-vivo));
	border: 0;
	border-radius: var(--gg-r-3) var(--gg-r-3) 0 0;
	padding: 2.5rem 1.5rem 1rem;
	margin: 0;
	box-shadow: none;
}

.gg-subtitulo {
	text-align: center;
	color: color-mix(in srgb, #ffffff 88%, transparent);
	background: linear-gradient(135deg, var(--gg-azul) 20%, var(--gg-azul-vivo));
	padding: 0 1.5rem 2rem;
	font-size: 1.05rem;
	margin: 0;
}

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

/* --- Painel de estatísticas --- */
.gg-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
	gap: 1px;
	background: var(--gg-borda);
	border: 1px solid var(--gg-borda);
	border-top: 0;
	border-radius: 0 0 var(--gg-r-3) var(--gg-r-3);
	overflow: hidden;
	margin-bottom: 2.5rem;
	box-shadow: var(--gg-sombra-2);
}

.gg-stat {
	background: var(--gg-superficie);
	padding: 1.15rem .75rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: .2rem;
	justify-content: center;
}

.gg-stat-numero {
	font-family: var(--gg-fonte-display);
	font-size: 1.9rem;
	line-height: 1.1;
	font-weight: 400;
	color: var(--gg-azul);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

.gg-stat-rotulo {
	font-size: .82rem;
	line-height: 1.35;
	color: var(--gg-texto-suave);
	text-wrap: balance;
}

/* --- Seções da inicial viram cartões --- */
.gg-inicio h2,
.gg-inicio .mw-heading2 {
	font-size: 1.3rem;
	border: 0;
	padding: 0 0 .6rem;
	margin: 2rem 0 .85rem;
}

.gg-inicio h2::after,
.gg-inicio .mw-heading2::after {
	width: 2rem;
	height: 3px;
	bottom: 0;
}

/*
 * As listas da inicial viram grades de pastilhas. Continuam sendo <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.5rem;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
	gap: .6rem;
}

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

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

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

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

/* Na inicial não queremos o cartão externo duplicado. */
body.page-Página_inicial #content.mw-body,
body.page-Página_principal #content.mw-body {
	background: transparent;
	border: 0;
	box-shadow: none;
}


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

.mw-parser-output figure[typeof~='mw:File/Thumb'],
.mw-parser-output .thumbinner {
	background: var(--gg-superficie);
	border: 1px solid var(--gg-borda);
	border-radius: var(--gg-r-2);
	box-shadow: var(--gg-sombra-1);
	padding: .5rem;
}

.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);
}

/* Caixa de categorias */
.catlinks {
	background: var(--gg-superficie-2);
	border: 1px solid var(--gg-borda);
	border-radius: var(--gg-r-2);
	padding: .8rem 1rem;
	margin-top: 2rem;
}

/* Notas de rodapé e referências */
.mw-parser-output .reflist,
.mw-parser-output .references {
	font-size: .9rem;
	color: var(--gg-texto-suave);
}

/* Avisos do sistema */
.mw-message-box,
.cdx-message {
	border-radius: var(--gg-r-2);
}

/* Redirecionamentos, tabela de conteúdo em linha etc. */
.mw-parser-output .toc {
	background: var(--gg-superficie-2);
	border: 1px solid var(--gg-borda);
	border-radius: var(--gg-r-2);
}


/* =============================================================================
 *  13. RESPONSIVO
 * ========================================================================== */

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

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

	.gg-infobox {
		float: none;
		width: 100%;
		margin: 0 0 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);
	}

	/* Tabelas largas rolam em vez de estourar a página. */
	.gg-tabela-evolutiva,
	.mw-parser-output table.wikitable {
		display: block;
		overflow-x: auto;
		max-width: 100%;
	}
}


/* =============================================================================
 *  14. 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,
	.cdx-button:hover {
		transform: none;
	}
}

/* Modo de alto contraste do sistema: devolve bordas de verdade. */
@media (forced-colors: active) {
	.gg-infobox,
	.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;
	}
}

/* Impressão: sem cromo, sem fundo, tinta poupada. */
@media print {
	body::before {
		display: none;
	}

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

	.gg-inicio > h1,
	.gg-subtitulo {
		background: none !important;
		color: #000 !important;
	}

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

Edição das 21h51min de 27 de julho de 2026
