|
|
| (2 revisões intermediárias pelo mesmo usuário não estão sendo mostradas) |
| Linha 1: |
Linha 1: |
| /* ==========================================================================
| |
| 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;
| |
| }
| |
| }
| |
