Ir para o conteúdo

MediaWiki:Common.css

De Guia Galáctico
Revisão de 20h46min de 27 de julho de 2026 por Admin (discussão | contribs)

Nota: Após publicar, você pode ter que limpar o "cache" do seu navegador para ver as alterações.

  • Firefox / Safari: Pressione Shift enquanto clica Recarregar, ou pressione Ctrl-F5 ou Ctrl-R (⌘-R no Mac)
  • Google Chrome: Pressione Ctrl-Shift-R (⌘-Shift-R no Mac)
  • Edge: Pressione Ctrl enquanto clica Recarregar, ou pressione Ctrl-F5.
  • Opera: Pressione Ctrl-F5.
/* ==========================================================================
   GUIA GALÁCTICO — MediaWiki:Common.css
   Tokens de design + componentes de conteúdo (infoboxes, página inicial).

   Vive em Common.css (e não em Vector-2022.css) porque isto é CONTEÚDO:
   precisa funcionar no Vector 2022, no Minerva (mobile), no editor visual
   e na pré-visualização. O CSS do skin fica no outro arquivo.

   Modo noturno: MediaWiki 1.43+ marca <html> com .skin-theme-clientpref-night
   (escolha explícita) ou .skin-theme-clientpref-os (segue o sistema).
   Os dois casos estão cobertos abaixo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. FONTES
   Servidas localmente. Atkinson Next e Mono são variáveis (200–800);
   SPORE tem três instâncias estáticas: 300, 400 e 700.
   -------------------------------------------------------------------------- */

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

/* NOTA: removi os dois blocos com font-style: italic apontando para o MESMO
   arquivo dos normais. Declarar um itálico que na verdade é o romano faz o
   navegador confiar nele e desligar a síntese oblíqua — resultado: <em> e
   ''ênfase'' deixam de ter QUALQUER marca visual. Sem o bloco, o navegador
   sintetiza a inclinação e a ênfase volta a ser perceptível.
   Se você tiver os arquivos itálicos de verdade (a família Next tem), é só
   readicionar apontando para AtkinsonHyperlegibleNextItalic.woff2. */

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

/* --------------------------------------------------------------------------
   1. TOKENS — tema claro
   -------------------------------------------------------------------------- */

:root {
	/* Paleta bruta: ficção científica de capa de livro anos 70, que é
	   basicamente o DNA visual do Spore. */
	--gg-cosmo-900: #0b0417;
	--gg-cosmo-800: #150a26;
	--gg-cosmo-700: #241141;
	--gg-nebulosa:  #6d2a86;
	--gg-nebulosa-viva: #a83fb8;
	--gg-celula:    #6d9f26;   /* verde do estágio celular */
	--gg-celula-viva: #a8d84a;
	--gg-ambar:     #d9700a;
	--gg-ambar-vivo: #ffb03a;
	--gg-ciano:     #2fb6bd;
	--gg-papel:     #fbf6ea;
	--gg-papel-2:   #f3e9d6;
	--gg-tinta:     #241a33;
	--gg-tinta-2:   #5b4a72;

	/* Papéis semânticos — é isto que os componentes consomem. */
	--gg-superficie:    var(--gg-papel);
	--gg-superficie-2:  var(--gg-papel-2);
	--gg-texto:         var(--gg-tinta);
	--gg-texto-suave:   var(--gg-tinta-2);
	--gg-borda:         #ddd0b8;
	--gg-borda-forte:   #c3b294;
	--gg-link:          #7b2691;   /* 7.1:1 sobre --gg-papel */
	--gg-link-visitado: #6a4478;   /* 6.3:1 */
	--gg-link-novo:     #a92020;   /* 5.9:1 */
	--gg-realce:        var(--gg-ambar);
	--gg-sombra:        rgba(36, 17, 65, 0.16);
	--gg-sombra-forte:  rgba(36, 17, 65, 0.28);

	/* Cores das trilhas de escolha (Predefinição:Tabela evolutiva).
	   Batem com a convenção do próprio jogo: verde social, azul adaptável,
	   vermelho agressivo. */
	--gg-cor-verde:    var(--gg-celula);
	--gg-cor-azul:     var(--gg-ciano);
	--gg-cor-vermelho: #c0392b;
	--gg-cor-neutra:   var(--gg-borda-forte);

	/* Superfície cósmica — escura nos DOIS temas, de propósito.
	   O espaço não fica claro de dia. */
	--gg-cosmo-texto:   #f2ecff;
	--gg-cosmo-texto-2: #c2b2e0;

	--gg-nebulosa-fundo:
		radial-gradient(120% 90% at 12% 0%, rgba(168, 63, 184, 0.55) 0%, transparent 55%),
		radial-gradient(90% 80% at 88% 8%, rgba(47, 182, 189, 0.32) 0%, transparent 50%),
		radial-gradient(70% 70% at 60% 100%, rgba(109, 159, 38, 0.28) 0%, transparent 60%),
		linear-gradient(165deg, var(--gg-cosmo-700) 0%, var(--gg-cosmo-900) 100%);

	/* Campo de estrelas: pontos posicionados à mão, sem imagem externa. */
	--gg-estrelas:
		radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,.9), transparent 60%),
		radial-gradient(1px 1px   at 27% 61%, rgba(255,255,255,.7), transparent 60%),
		radial-gradient(1px 1px   at 41% 12%, rgba(255,255,255,.8), transparent 60%),
		radial-gradient(2px 2px   at 55% 44%, rgba(255,236,196,.9), transparent 60%),
		radial-gradient(1px 1px   at 68% 76%, rgba(255,255,255,.6), transparent 60%),
		radial-gradient(1.5px 1.5px at 79% 27%, rgba(200,240,255,.85), transparent 60%),
		radial-gradient(1px 1px   at 91% 55%, rgba(255,255,255,.7), transparent 60%),
		radial-gradient(1px 1px   at 6% 84%,  rgba(255,255,255,.55), transparent 60%),
		radial-gradient(1px 1px   at 47% 92%, rgba(255,255,255,.65), transparent 60%);

	--gg-raio:    14px;
	--gg-raio-g:  22px;

	--gg-fonte-titulo: 'SPORE', 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
	--gg-fonte-texto:  'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', 'Segoe UI', Verdana, sans-serif;
	--gg-fonte-mono:   'Atkinson Hyperlegible Mono', ui-monospace, 'Cascadia Code', monospace;

	/* Caixa alta precisa de mais entreletra quanto menor o corpo.
	   Três degraus cobrem tudo que a wiki usa. */
	--gg-tracking-display: 0.005em;   /* títulos grandes */
	--gg-tracking-titulo:  0.03em;    /* seções */
	--gg-tracking-rotulo:  0.08em;    /* rótulos miúdos */
}

/* --------------------------------------------------------------------------
   2. TOKENS — tema noturno
   Duplicado de propósito: são dois seletores diferentes e CSS não tem
   como agrupá-los sem pré-processador. Editou um, edite o outro.
   -------------------------------------------------------------------------- */

@media screen {
	html.skin-theme-clientpref-night {
		--gg-superficie:    #1a1130;
		--gg-superficie-2:  #241738;
		--gg-texto:         #ece5f8;
		--gg-texto-suave:   #b3a3cc;
		--gg-borda:         #392a55;
		--gg-borda-forte:   #533f78;
		--gg-link:          #e0b3ff;   /* 8.4:1 sobre a superfície */
		--gg-link-visitado: #b79bd4;
		--gg-link-novo:     #ff9494;
		--gg-realce:        var(--gg-ambar-vivo);
		--gg-sombra:        rgba(0, 0, 0, 0.45);
		--gg-sombra-forte:  rgba(0, 0, 0, 0.6);
		--gg-cor-verde:     var(--gg-celula-viva);
		--gg-cor-azul:      #56d3da;
		--gg-cor-vermelho:  #ff8a7a;
		--gg-cor-neutra:    var(--gg-borda-forte);
	}
}

@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os {
		--gg-superficie:    #1a1130;
		--gg-superficie-2:  #241738;
		--gg-texto:         #ece5f8;
		--gg-texto-suave:   #b3a3cc;
		--gg-borda:         #392a55;
		--gg-borda-forte:   #533f78;
		--gg-link:          #e0b3ff;
		--gg-link-visitado: #b79bd4;
		--gg-link-novo:     #ff9494;
		--gg-realce:        var(--gg-ambar-vivo);
		--gg-sombra:        rgba(0, 0, 0, 0.45);
		--gg-sombra-forte:  rgba(0, 0, 0, 0.6);
		--gg-cor-verde:     var(--gg-celula-viva);
		--gg-cor-azul:      #56d3da;
		--gg-cor-vermelho:  #ff8a7a;
		--gg-cor-neutra:    var(--gg-borda-forte);
	}
}

/* --------------------------------------------------------------------------
   3. INFOBOX
   Casa com Predefinição:Infobox — .gg-infobox e filhas.
   -------------------------------------------------------------------------- */

.gg-infobox {
	float: right;
	clear: right;
	width: 22.5rem;
	max-width: 100%;
	margin: 0 0 1.25rem 1.5rem;
	border: 1px solid var(--gg-borda);
	border-radius: var(--gg-raio-g);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;   /* segura os cantos arredondados no cabeçalho */
	background: var(--gg-superficie);
	color: var(--gg-texto);
	box-shadow: 0 10px 28px -14px var(--gg-sombra-forte);
	font-size: 0.875rem;
	line-height: 1.5;
}

.gg-infobox-titulo {
	caption-side: top;
	display: block;
	padding: 0.9rem 1.1rem 0.85rem;
	background-color: var(--gg-cosmo-800);
	background-image: var(--gg-estrelas), var(--gg-nebulosa-fundo);
	color: var(--gg-cosmo-texto);
	font-family: var(--gg-fonte-titulo);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: left;
	text-transform: uppercase;
	letter-spacing: var(--gg-tracking-titulo);
	text-wrap: balance;
}

.gg-infobox-subtitulo {
	padding: 0.55rem 1.1rem;
	background: var(--gg-superficie-2);
	border-bottom: 1px solid var(--gg-borda);
	color: var(--gg-texto-suave);
	font-size: 0.8125rem;
	font-style: italic;
	text-align: left;
}

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

.gg-infobox-imagem img {
	display: block;
	width: 100%;
	height: auto;
}

.gg-infobox-legenda {
	padding: 0.5rem 1.1rem 0.6rem;
	color: var(--gg-texto-suave);
	font-size: 0.78125rem;
	line-height: 1.4;
	text-align: left;
}

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

.gg-infobox-dado {
	padding: 0.55rem 1.1rem 0.55rem 0.6rem;
	vertical-align: top;
}

/* Zebrado por par rótulo/dado — sem tocar no HTML da predefinição. */
.gg-infobox tr:nth-of-type(odd) .gg-infobox-rotulo,
.gg-infobox tr:nth-of-type(odd) .gg-infobox-dado {
	background: color-mix(in srgb, var(--gg-superficie-2) 55%, transparent);
}

.gg-infobox-dado ul,
.gg-infobox-dado ol {
	margin: 0;
	padding-left: 1.1rem;
}

.gg-infobox-rodape {
	padding: 0.6rem 1.1rem 0.75rem;
	border-top: 2px solid var(--gg-celula);
	background: var(--gg-superficie-2);
	color: var(--gg-texto-suave);
	font-size: 0.78125rem;
	text-align: left;
}

/* Em telas estreitas a infobox vira bloco no fluxo — nada de coluna de 3
   caracteres de largura ao lado dela. */
@media (max-width: 45rem) {
	.gg-infobox {
		float: none;
		width: auto;
		margin: 0 0 1.5rem;
	}
}

/* --------------------------------------------------------------------------
   4. PÁGINA INICIAL — .gg-inicio
   Painel cósmico: escuro nos dois temas. É a peça de identidade da wiki.
   -------------------------------------------------------------------------- */

.gg-inicio {
	position: relative;
	isolation: isolate;
	margin: 0 0 2rem;
	padding: clamp(1.75rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 3rem) clamp(1.5rem, 4vw, 2.5rem);
	border-radius: var(--gg-raio-g);
	background-color: var(--gg-cosmo-800);
	background-image: var(--gg-nebulosa-fundo);
	color: var(--gg-cosmo-texto);
	overflow: hidden;
}

/* Camada de estrelas separada, para poder animar sem repintar o resto. */
.gg-inicio::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--gg-estrelas);
	background-size: 340px 340px;
	opacity: 0.85;
	pointer-events: none;
	animation: gg-deriva 240s linear infinite;
}

@keyframes gg-deriva {
	to { background-position: 340px 170px; }
}

@media (prefers-reduced-motion: reduce) {
	.gg-inicio::before { animation: none; }
}

.gg-inicio .mw-heading1,
.gg-inicio > h1 {
	margin: 0;
	border: 0;
	padding: 0;
	background: none;
}

.gg-inicio h1 {
	margin: 0;
	border: 0;
	padding: 0;
	color: var(--gg-cosmo-texto);
	font-family: var(--gg-fonte-titulo);
	font-size: clamp(2rem, 5.5vw, 3.25rem);
	font-weight: 700;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: var(--gg-tracking-display);
	text-wrap: balance;
}

.gg-subtitulo {
	max-width: 46ch;
	margin: 0.75rem 0 0;
	color: var(--gg-cosmo-texto-2);
	font-size: clamp(1rem, 2.2vw, 1.15rem);
	line-height: 1.5;
	text-wrap: pretty;
}

.gg-subtitulo b,
.gg-subtitulo strong {
	color: var(--gg-celula-viva);
	font-weight: 700;
}

/* -- Contadores ------------------------------------------------------------ */

.gg-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
	gap: 0.75rem;
	margin: 2rem 0 2.5rem;
}

.gg-stat {
	padding: 1rem 1.1rem 0.9rem;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--gg-raio);
	background: rgba(255, 255, 255, 0.06);
	backdrop-filter: blur(2px);
}

.gg-stat-numero {
	display: block;
	font-family: var(--gg-fonte-titulo);
	font-size: clamp(1.75rem, 4vw, 2.4rem);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	/* Enquanto o JS não preenche, o travessão fica discreto. */
	color: var(--gg-cosmo-texto);
}

.gg-stat-acervo        { color: var(--gg-celula-viva); }
.gg-stat-hoje          { color: var(--gg-ambar-vivo); }
.gg-stat-criadores     { color: var(--gg-ciano); }
.gg-stat-criadores-hoje{ color: var(--gg-nebulosa-viva); }

.gg-stat-rotulo {
	display: block;
	margin-top: 0.45rem;
	color: var(--gg-cosmo-texto-2);
	font-family: var(--gg-fonte-titulo);
	font-size: 0.8125rem;
	font-weight: 300;
	line-height: 1.35;
	text-transform: uppercase;
	letter-spacing: var(--gg-tracking-rotulo);
	text-wrap: balance;
}

/* -- Seções: cabeçalho + grade de atalhos ---------------------------------- */

.gg-inicio .mw-heading2,
.gg-inicio > h2 {
	margin: 0;
	border: 0;
	padding: 0.7rem 1.1rem;
	border-radius: var(--gg-raio) var(--gg-raio) 0 0;
	background: rgba(255, 255, 255, 0.08);
	border-bottom: 2px solid var(--gg-celula);
}

.gg-inicio h2 {
	margin: 0;
	border: 0;
	padding: 0;
	background: none;
	color: var(--gg-cosmo-texto);
	font-family: var(--gg-fonte-titulo);
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: var(--gg-tracking-titulo);
}

.gg-inicio h2 a {
	color: inherit;
	text-decoration-color: var(--gg-celula-viva);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.gg-inicio .mw-heading2 + ul,
.gg-inicio > h2 + ul {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
	gap: 0.5rem;
	margin: 0 0 1.75rem;
	padding: 0.75rem;
	list-style: none;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-top: 0;
	border-radius: 0 0 var(--gg-raio) var(--gg-raio);
	background: rgba(255, 255, 255, 0.04);
}

.gg-inicio .mw-heading2 + ul li,
.gg-inicio > h2 + ul li {
	margin: 0;
}

.gg-inicio .mw-heading2 + ul li a,
.gg-inicio > h2 + ul li a {
	display: block;
	padding: 0.6rem 0.85rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.05);
	color: var(--gg-cosmo-texto);
	font-family: var(--gg-fonte-titulo);
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.35;
	text-transform: uppercase;
	letter-spacing: var(--gg-tracking-titulo);
	text-decoration: none;
	text-wrap: balance;
	transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.gg-inicio .mw-heading2 + ul li a:hover,
.gg-inicio > h2 + ul li a:hover,
.gg-inicio .mw-heading2 + ul li a:focus-visible,
.gg-inicio > h2 + ul li a:focus-visible {
	background: rgba(168, 216, 74, 0.16);
	border-color: var(--gg-celula-viva);
	transform: translateY(-2px);
}

/* Links vermelhos continuam legíveis sobre o fundo escuro. */
.gg-inicio a.new,
.gg-inicio a.new:visited {
	color: #ff9494;
}

@media (prefers-reduced-motion: reduce) {
	.gg-inicio .mw-heading2 + ul li a,
	.gg-inicio > h2 + ul li a { transition: none; }
	.gg-inicio .mw-heading2 + ul li a:hover,
	.gg-inicio > h2 + ul li a:hover { transform: none; }
}

/* Foco visível sobre fundo escuro precisa de contraste próprio. */
.gg-inicio a:focus-visible {
	outline: 3px solid var(--gg-ambar-vivo);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   5. CAIXAS DE AVISO — .gg-esboco, .ambox
   -------------------------------------------------------------------------- */

.gg-esboco,
.mw-parser-output .ambox {
	position: relative;
	margin: 1.75rem 0 1.25rem;
	padding: 0.9rem 1.1rem 0.9rem 3.1rem;
	border: 1px solid var(--gg-borda);
	border-inline-start: 5px solid var(--gg-ambar);
	border-radius: var(--gg-raio);
	background: var(--gg-superficie-2);
	color: var(--gg-texto-suave);
	font-size: 0.9375rem;
	line-height: 1.55;
}

/* Um esporo no lugar do ícone: dois gradientes radiais, zero requisições
   de rede e nada de conteúdo gerado por CSS entrando no acessível. */
.gg-esboco::before {
	content: '';
	position: absolute;
	inset-inline-start: 1.05rem;
	top: 1rem;
	width: 1.1rem;
	height: 1.1rem;
	border-radius: 50%;
	background:
		radial-gradient(circle at 35% 32%, rgba(255, 255, 255, 0.65) 0 18%, transparent 19%),
		radial-gradient(circle at 50% 50%, var(--gg-celula-viva) 0 55%, var(--gg-celula) 56% 100%);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--gg-celula) 22%, transparent);
}

.gg-esboco b,
.gg-esboco strong {
	color: var(--gg-texto);
}

/* --------------------------------------------------------------------------
   6. TABELA EVOLUTIVA — .gg-tabela-evolutiva
   Escolhas de um estágio (linhas) × consequências nos seguintes (colunas).
   -------------------------------------------------------------------------- */

/* Envelope de rolagem. Precisa ser adicionado na predefinição — ver as notas.
   Uma tabela com display:block rola, mas perde o papel de tabela na árvore
   de acessibilidade; por isso a rolagem fica no <div> de fora. */
.gg-tabela-rolavel {
	max-width: 100%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	border-radius: var(--gg-raio);
}

.gg-tabela-rolavel:focus-visible {
	outline: 3px solid var(--gg-realce);
	outline-offset: 2px;
}

.gg-tabela-evolutiva {
	width: 100%;
	margin: 1.5rem 0;
	border: 1px solid var(--gg-borda);
	border-radius: var(--gg-raio);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: var(--gg-superficie);
	color: var(--gg-texto);
	box-shadow: 0 8px 22px -14px var(--gg-sombra);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.gg-tabela-evolutiva caption {
	caption-side: top;
	padding: 0.75rem 1rem;
	background: var(--gg-superficie-2);
	border-bottom: 1px solid var(--gg-borda);
	color: var(--gg-texto);
	font-family: var(--gg-fonte-titulo);
	font-size: 1rem;
	font-weight: 400;
	text-align: left;
	text-transform: uppercase;
	letter-spacing: var(--gg-tracking-titulo);
}

.gg-tabela-evolutiva th[scope='col'] {
	padding: 0.6rem 0.9rem;
	border-bottom: 2px solid var(--gg-borda-forte);
	background: var(--gg-superficie-2);
	color: var(--gg-texto);
	font-family: var(--gg-fonte-titulo);
	font-size: 0.8125rem;
	font-weight: 400;
	text-align: left;
	text-transform: uppercase;
	letter-spacing: var(--gg-tracking-rotulo);
	vertical-align: bottom;
	white-space: nowrap;
}

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

.gg-tabela-evolutiva tr:first-child th[scope='col'] {
	border-top: 0;
}

.gg-te-escolha {
	min-width: 8rem;
	padding-inline-start: 1.15rem !important;
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 6px 100%;
	color: var(--gg-texto);
	font-weight: 700;
	white-space: nowrap;
}

/* -- Trilhas de escolha ----------------------------------------------------
   Cada trilha tem cor E textura. Cor sozinha reprovaria no WCAG 1.4.1 para
   quem não distingue verde de vermelho — a faixa listrada resolve sem
   inserir nada na árvore de acessibilidade. */

.gg-cor-verde > td,
.gg-cor-verde > th {
	background-color: color-mix(in srgb, var(--gg-cor-verde) 9%, transparent);
}

.gg-cor-azul > td,
.gg-cor-azul > th {
	background-color: color-mix(in srgb, var(--gg-cor-azul) 9%, transparent);
}

.gg-cor-vermelho > td,
.gg-cor-vermelho > th {
	background-color: color-mix(in srgb, var(--gg-cor-vermelho) 9%, transparent);
}

.gg-cor-verde > .gg-te-escolha {
	/* faixa maciça */
	background-image: linear-gradient(var(--gg-cor-verde) 0 0);
}

.gg-cor-azul > .gg-te-escolha {
	/* traços horizontais */
	background-image: repeating-linear-gradient(
		0deg,
		var(--gg-cor-azul) 0 5px,
		transparent 5px 9px
	);
}

.gg-cor-vermelho > .gg-te-escolha {
	/* diagonais */
	background-image: repeating-linear-gradient(
		45deg,
		var(--gg-cor-vermelho) 0 3px,
		transparent 3px 6px
	);
}

.gg-cor-neutra > .gg-te-escolha {
	background-image: linear-gradient(var(--gg-cor-neutra) 0 0);
}

@media (max-width: 40rem) {
	.gg-tabela-evolutiva { font-size: 0.875rem; }
	.gg-tabela-evolutiva td,
	.gg-tabela-evolutiva th { padding: 0.55rem 0.7rem; }
}

/* --------------------------------------------------------------------------
   7. TRILHA DE ESTÁGIOS — .gg-evolucao
   -------------------------------------------------------------------------- */

.gg-evolucao {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1.75rem;
	padding: 0;
	list-style: none;   /* caso vire <ul> — ver notas */
}

.gg-evolucao-etapa {
	flex: 1 1 8rem;
	min-width: 0;
	border: 1px solid var(--gg-borda);
	border-radius: 999px;
	background: var(--gg-superficie-2);
	text-align: center;
}

.gg-evolucao-etapa a,
.gg-evolucao-etapa .mw-selflink {
	display: block;
	padding: 0.5rem 0.85rem;
	border-radius: inherit;
	color: var(--gg-texto-suave);
	font-family: var(--gg-fonte-titulo);
	font-size: 0.8125rem;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: var(--gg-tracking-rotulo);
	text-decoration: none;
	transition: background-color 140ms ease, color 140ms ease;
}

.gg-evolucao-etapa a:hover {
	background: color-mix(in srgb, var(--gg-celula) 14%, transparent);
	color: var(--gg-texto);
}

/* Etapa atual: preenchimento sólido + peso + halo. Três sinais somados,
   nenhum deles só a cor. */
.gg-evolucao-atual {
	border-color: var(--gg-celula);
	background: var(--gg-celula);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--gg-celula) 25%, transparent);
}

.gg-evolucao-atual a,
.gg-evolucao-atual .mw-selflink,
.gg-evolucao-atual a:hover {
	background: none;
	color: #10240a;
	font-weight: 700;
}

@media screen {
	html.skin-theme-clientpref-night .gg-evolucao-atual a,
	html.skin-theme-clientpref-night .gg-evolucao-atual .mw-selflink {
		color: #0b1a06;
	}
}

/* Uma seta discreta entre as etapas, só quando cabem todas na mesma linha.
   Feita com bordas: não é conteúdo, não vira ruído em leitor de tela. */
@media (min-width: 48rem) {
	.gg-evolucao {
		gap: 1.25rem;
	}

	.gg-evolucao-etapa {
		position: relative;
	}

	.gg-evolucao-etapa + .gg-evolucao-etapa::before {
		content: '';
		position: absolute;
		inset-inline-start: -0.95rem;
		top: 50%;
		width: 0.4rem;
		height: 0.4rem;
		border-top: 2px solid var(--gg-borda-forte);
		border-right: 2px solid var(--gg-borda-forte);
		transform: translateY(-50%) rotate(45deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.gg-evolucao-etapa a { transition: none; }
}

/* --------------------------------------------------------------------------
   8. IMPRESSÃO
   O cósmico vira tinta na folha. Ninguém merece isso.
   -------------------------------------------------------------------------- */

@media print {
	.gg-inicio,
	.gg-inicio::before,
	.gg-infobox-titulo {
		background: none !important;
		color: #000 !important;
	}
	.gg-inicio { padding: 0; }
	.gg-infobox { box-shadow: none; }
	.gg-tabela-evolutiva { box-shadow: none; }
	.gg-tabela-rolavel { overflow: visible; }
	/* As texturas das trilhas sobrevivem ao preto e branco; as cores de
	   fundo, não. É por isso que a textura existe. */
	.gg-cor-verde > td, .gg-cor-verde > th,
	.gg-cor-azul > td, .gg-cor-azul > th,
	.gg-cor-vermelho > td, .gg-cor-vermelho > th {
		background-color: transparent !important;
	}
	.gg-evolucao-atual {
		box-shadow: none;
		outline: 2px solid #000;
	}
}
Disponível em “https://beta.guia.esporo.net/index.php?title=MediaWiki:Common.css&oldid=80”