/* jarvis-wiki — folha de estilo pública. Única fonte de cor: o bloco :root abaixo. Nenhuma cor literal fora dele (regra global do projeto). O laranja da marca (`--marca-laranja`, `--linha`, `--linha-forte`) entra SÓ como aresta — borda, divisória, separador — nunca em texto, link, item ativo ou botão: essas ficam no violeta (`--cor-primaria`). Se o laranja vazar pra conteúdo, as duas cores passam a disputar "o que é importante aqui" na página. */ :root { color-scheme: dark; /* Marca (extraída da logo do servidor) */ --cor-primaria: #d08be5; --cor-primaria-forte: #c27bd0; --marca-1: #d08be5; --marca-2: #d887d1; --marca-3: #d55f8f; --marca-4: #d4516a; --marca-laranja: #fea610; --linha: rgba(198, 106, 13, .22); --linha-forte: rgba(198, 106, 13, .40); /* Superfícies e texto */ --cor-fundo: #14161f; --cor-elev: #1b1e2b; --cor-elev-2: #23273a; --cor-texto: #eceef4; --cor-sub: #a2a7bd; /* Semânticas (caixas, banner de anúncio) */ --cor-info: #7aa2ff; --cor-sucesso: #3dd68c; --cor-aviso: #f5c451; --cor-perigo: #e5484d; /* Cor inline `{nome:texto}` do markdown — mesmos hex do §5 da spec */ --c-roxo: #c27bd0; --c-lilas: #d08be5; --c-purpura: #d887d1; --c-rosa: #d55f8f; --c-coral: #d4516a; --c-vermelho: #e5484d; --c-verde: #3dd68c; --c-amarelo: #f5c451; --c-cinza: #a2a7bd; --raio: 10px; --raio-pequeno: 6px; --altura-header: 64px; --largura-sidebar: 288px; --largura-outline: 240px; --largura-conteudo: 768px; --largura-conteudo-larga: 1152px; --sombra: 0 8px 24px rgba(0, 0, 0, .35); } /* ===== Reset mínimo ===== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } /* O layout é montado com ÁREAS NOMEADAS, nunca com número de linha. Motivo concreto: dois filhos do são opcionais — o banner de anúncio (só existe quando há aviso no config) e a coluna "Nesta página" (some em página sem heading). Com `grid-row: 2 / 3` escrito à mão, a chegada do banner empurrava tudo uma linha e o cabeçalho — que ficava com linha automática — era jogado para uma linha implícita DEPOIS do conteúdo, isto é, renderizava no pé da página. Com área nomeada não existe número para desalinhar: cada elemento pede o nome do lugar dele. E a linha `auto` do banner colapsa sozinha para 0 quando o banner não é emitido, sem `:has()` e sem classe condicional no . */ body { margin: 0; background: var(--cor-fundo); color: var(--cor-texto); font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; display: grid; grid-template-columns: var(--largura-sidebar) 1fr var(--largura-outline); grid-template-rows: auto var(--altura-header) 1fr auto; grid-template-areas: "banner banner banner" "topo topo topo" "indice conteudo outline" "rodape rodape rodape"; min-height: 100vh; } /* Página sem heading (e também a 404 e a /recent): duas colunas. Redefinir só as colunas não bastaria — as ÁREAS também têm que perder a coluna da direita, senão sobra um nome de área apontando para uma coluna que não existe mais. */ body.sem-outline { grid-template-columns: var(--largura-sidebar) 1fr; grid-template-areas: "banner banner" "topo topo" "indice conteudo" "rodape rodape"; } img { max-width: 100%; } a { color: var(--cor-primaria); text-decoration: none; } a:hover { color: var(--cor-primaria-forte); text-decoration: underline; } a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 2px; } button { font: inherit; color: var(--cor-texto); background: var(--cor-elev); border: 1px solid var(--linha); border-radius: var(--raio-pequeno); cursor: pointer; } hr { border: 0; border-top: 1px solid var(--linha-forte); margin: 2rem 0; } /* Checkboxes de gaveta (menu mobile / outline mobile) — sem JS. Ficam antes dos elementos que controlam na ordem do documento (ver lib/views.mjs), o que os combinadores `~` abaixo exigem. */ .alterna-drawer { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } /* ===== Cabeçalho ===== */ .cabecalho { grid-area: topo; position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1rem; height: var(--altura-header); padding: 0 1.25rem; background: var(--cor-fundo); border-bottom: 1px solid var(--linha-forte); /* Item de grid tem mínimo AUTOMÁTICO: sem isto o cabeçalho se recusa a ficar menor que o próprio conteúdo e ESTOURA a coluna em vez de encolher o que está dentro — e quem rola horizontalmente é a página inteira, não ele. Medido a 320px com um `MARCA` longo: cabeçalho 376,1px numa tela de 320, com rolagem horizontal; com `min-width: 0` ele volta a 320 e o nome é cortado pela reticência, que é o que se quer. */ min-width: 0; } .cabecalho .marca { display: flex; align-items: center; gap: .6rem; color: var(--cor-texto); font-weight: 600; white-space: nowrap; /* O nome vem do `MARCA` do .env, ou seja, é texto que o dono escolhe e pode ser longo. Com `white-space: nowrap` e sem estes dois, um nome grande empurra o cabeçalho além da tela e a PÁGINA INTEIRA ganha rolagem horizontal no celular — medido a 320px: "Servidor Brasileiro de Minecraft Wiki" levava a marca a 280px de largura terminando em x=356 numa tela de 320. `min-width: 0` é o que destrava o encolhimento (item de flex não encolhe abaixo do conteúdo sem isso) e a reticência corta o que não couber. */ min-width: 0; } .cabecalho .marca span { /* O `min-width: 0` tem que estar AQUI também: o span é item de flex da própria `.marca`, e item de flex não encolhe abaixo do conteúdo enquanto o mínimo automático valer — sem ele a reticência nunca chega a ser usada e o nome empurra do mesmo jeito. */ min-width: 0; overflow: hidden; text-overflow: ellipsis; } .cabecalho .marca:hover { color: var(--cor-texto); text-decoration: none; } .cabecalho .marca img { border-radius: var(--raio-pequeno); } .cabecalho .busca { flex: 1; max-width: 420px; } .cabecalho .busca input { width: 100%; font: inherit; color: var(--cor-texto); background: var(--cor-elev); border: 1px solid var(--linha); border-radius: var(--raio); padding: .5rem .75rem; } .cabecalho .busca input::placeholder { color: var(--cor-sub); } .botao-menu { display: none; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--raio-pequeno); cursor: pointer; } .hamburguer, .hamburguer::before, .hamburguer::after { display: block; width: 1.25rem; height: 2px; background: var(--cor-texto); border-radius: 2px; } .hamburguer::before, .hamburguer::after { content: ""; position: relative; } .hamburguer::before { top: -5px; } .hamburguer::after { top: 3px; } /* ===== Sidebar ("Índice") ===== */ /* Quem gruda é o