MediaWiki:Common.css
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. */
/* PALETA OFICIAL — SPORE ID Toolkit 10.07.08, seção 3.1.
Nada de sépia: a base da marca é branco, cinza-frio e azul-espaço.
Os hex abaixo são os do toolkit; os rgb foram convertidos. */
/* Primárias */
--gg-branco: #ffffff; /* spore white */
--gg-frio: #f0f1f4; /* spore cool */
--gg-cinza: #939496; /* spore neutral */
--gg-cinza-escuro: #6d6e70; /* spore deep grey */
--gg-espaco-claro: #4e9dd8; /* spore light space */
--gg-espaco-medio: #2361a7; /* spore mid space */
--gg-espaco-fundo: #000112; /* spore deep space */
/* Acentos — o toolkit é explícito: usar COM PARCIMÔNIA, em apoio à
paleta azul e branca. Cada um vem no par claro/escuro da prancha. */
--gg-verde: #b1cd49;
--gg-verde-escuro: #004620;
--gg-laranja: #e0932f;
--gg-laranja-escuro: #a42433;
--gg-roxo: #ca0088;
--gg-roxo-escuro: #5b308d;
/* Papéis semânticos — é isto que os componentes consomem. */
--gg-superficie: var(--gg-branco);
--gg-superficie-2: var(--gg-frio);
--gg-texto: #16202e;
--gg-texto-suave: var(--gg-cinza-escuro); /* 4.9:1 sobre branco */
--gg-borda: #dde1e7;
--gg-borda-forte: #b6bcc5;
--gg-link: var(--gg-espaco-medio); /* 6.5:1 sobre branco */
--gg-link-visitado: var(--gg-roxo-escuro); /* 8.0:1 */
--gg-link-novo: var(--gg-laranja-escuro); /* 7.4:1 */
--gg-realce: var(--gg-laranja); /* acento decorativo */
--gg-foco: var(--gg-roxo); /* anel de foco, 4.3:1 */
--gg-sombra: rgba(0, 17, 34, 0.14);
--gg-sombra-forte: rgba(0, 17, 34, 0.26);
/* Cores das trilhas de escolha (Predefinição:Tabela evolutiva).
Saem dos acentos da marca, não de cores inventadas. */
--gg-cor-verde: var(--gg-verde-escuro);
--gg-cor-azul: var(--gg-espaco-medio);
--gg-cor-vermelho: var(--gg-laranja-escuro);
--gg-cor-neutra: var(--gg-borda-forte);
/* Superfície espacial — escura nos DOIS temas, de propósito.
É o "spore deep space gradient" da prancha 3.1, na ordem original:
#2070b8 → #233164 → #00000d. */
--gg-espaco-texto: #f6f6f6; /* spore text gradient, topo */
--gg-espaco-texto-2: #ced1d4; /* spore text gradient, base */
--gg-espaco-gradiente:
radial-gradient(115% 85% at 14% -8%, #2070b8 0%, transparent 58%),
radial-gradient(85% 75% at 88% 4%, rgba(78, 157, 216, 0.34) 0%, transparent 52%),
linear-gradient(168deg, #233164 0%, #00000d 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(246,246,246,.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,230,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: #0e1723;
--gg-superficie-2: #17222f;
--gg-texto: #e9eef3;
--gg-texto-suave: #a3aeba;
--gg-borda: #25313f;
--gg-borda-forte: #3a4959;
--gg-link: #7cc0ef; /* spore light space clareado, 7.9:1 */
--gg-link-visitado: #c6a2e8;
--gg-link-novo: #ff9a8a;
--gg-realce: var(--gg-laranja);
--gg-foco: #ff5cc0; /* acento roxo clareado, 5.1:1 */
--gg-sombra: rgba(0, 0, 0, 0.45);
--gg-sombra-forte: rgba(0, 0, 0, 0.62);
--gg-cor-verde: var(--gg-verde);
--gg-cor-azul: var(--gg-espaco-claro);
--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: #0e1723;
--gg-superficie-2: #17222f;
--gg-texto: #e9eef3;
--gg-texto-suave: #a3aeba;
--gg-borda: #25313f;
--gg-borda-forte: #3a4959;
--gg-link: #7cc0ef; /* spore light space clareado, 7.9:1 */
--gg-link-visitado: #c6a2e8;
--gg-link-novo: #ff9a8a;
--gg-realce: var(--gg-laranja);
--gg-foco: #ff5cc0; /* acento roxo clareado, 5.1:1 */
--gg-sombra: rgba(0, 0, 0, 0.45);
--gg-sombra-forte: rgba(0, 0, 0, 0.62);
--gg-cor-verde: var(--gg-verde);
--gg-cor-azul: var(--gg-espaco-claro);
--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;
padding: 0.9rem 1.1rem 0.85rem;
background-color: var(--gg-espaco-fundo);
background-image: var(--gg-espaco-gradiente);
color: var(--gg-espaco-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-espaco-claro);
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-espaco-fundo);
background-image: var(--gg-espaco-gradiente);
color: var(--gg-espaco-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-espaco-texto);
font-family: var(--gg-fonte-titulo);
font-size: clamp(2rem, 5.5vw, 3.25rem);
font-weight: 700;
line-height: 1.05;
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-espaco-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-verde);
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-espaco-texto);
}
.gg-stat-acervo { color: var(--gg-verde); }
.gg-stat-hoje { color: var(--gg-realce); }
.gg-stat-criadores { color: var(--gg-espaco-claro); }
.gg-stat-criadores-hoje{ color: #f06fc4; } /* roxo de acento clareado */
.gg-stat-rotulo {
display: block;
margin-top: 0.45rem;
color: var(--gg-espaco-texto-2);
font-family: var(--gg-fonte-titulo);
font-size: 0.875rem;
font-weight: 300;
line-height: 1.35;
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-espaco-claro);
}
.gg-inicio h2 {
margin: 0;
border: 0;
padding: 0;
background: none;
color: var(--gg-espaco-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-verde);
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-espaco-texto);
font-family: var(--gg-fonte-titulo);
font-size: 0.9375rem;
font-weight: 400;
line-height: 1.35;
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-verde);
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-foco);
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-realce);
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-verde) 0 55%, var(--gg-verde-escuro) 56% 100%);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--gg-verde-escuro) 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-foco);
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.875rem;
font-weight: 400;
text-align: left;
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.9375rem;
font-weight: 400;
text-decoration: none;
transition: background-color 140ms ease, color 140ms ease;
}
.gg-evolucao-etapa a:hover {
background: color-mix(in srgb, var(--gg-espaco-medio) 12%, 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-espaco-medio);
background: var(--gg-espaco-medio);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--gg-espaco-medio) 25%, transparent);
}
.gg-evolucao-atual a,
.gg-evolucao-atual .mw-selflink,
.gg-evolucao-atual a:hover {
background: none;
color: #ffffff;
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: #ffffff;
}
}
/* 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;
}
}