MediaWiki:Vector-2022.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: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;
}
}