/* ========================================================================= Mojibake — folha de estilo única. Princípios: 1. TODO tamanho em rem. A escala de fonte do usuário multiplica o font-size do , então tudo — cabeçalho, formulários, grafo — acompanha. Nada em px, exceto bordas de 1px e sombras. 2. Cores só via custom properties, definidas por tema. Contraste do texto do corpo ≥ 4,5:1 (WCAG 2.1 AA) em TODOS os temas, não só no de alto contraste. 3. Mobile-first. Breakpoints em rem — mas veja a ressalva na seção 17: em media query, `rem` NÃO acompanha a escala de fonte do usuário. 4. Alvos de toque ≥ 2.75rem (~44px). Nenhuma função depende de hover. ========================================================================= */ /* --- 1. Escala de fonte controlada pelo usuário ------------------------- */ :root { --fs: 1; /* sobrescrito inline pelo JS antes da pintura */ /* Coluna de leitura. 39rem dá ~71 caracteres por linha na base de 18px — dentro da faixa confortável de 45 a 75. Antes eram 46rem, que rendiam 87: acima de 80, o olho começa a errar a volta para a linha seguinte, e quem tem dificuldade de enxergar paga esse erro mais caro. Medido no navegador, contando as linhas cheias de um parágrafo real — não estimado por largura média de caractere. Em rem, então acompanha a escala de fonte: aumentar o texto alarga a coluna na mesma proporção e o número de caracteres por linha não muda. */ --largura: 39rem; /* Cabeçalho, rodapé, painel e grafo. Não seguem a coluna de leitura. */ --largura-larga: 72rem; --raio: 0.375rem; --espaco: 1rem; } /* Base do site: 112,5% da fonte padrão do navegador — 18px onde o padrão são os 16px de sempre. Texto de nota fica em 19px. Em porcentagem, e não em px, de propósito: quem já aumentou a fonte padrão do próprio navegador continua sendo respeitado, com o aumento aplicado por cima. Um valor em px anularia essa escolha em silêncio. Como TODO tamanho da folha é em rem, mexer só aqui move a interface inteira — e a coluna de texto cresce junto, então o número de palavras por linha não muda: o texto fica maior, não mais espremido. */ html { font-size: calc(112.5% * var(--fs)); -webkit-text-size-adjust: 100%; } /* --- 2. Temas ----------------------------------------------------------- */ /* Claro (padrão). Texto #1a1a1a sobre #fff ≈ 17:1. Secundário #595959 ≈ 7:1. */ :root, :root[data-tema="claro"] { color-scheme: light; /* PALETA SATORII (§52). Adaptada do tema WordPress Satorii, de Felipe Lavin. O caráter é dele — creme de papel, tinta quente, acentos de terra. O que mudou foi a CLARIDADE: o sage, o dourado e os apagados originais ficavam entre 2,5 e 2,9:1, abaixo do mínimo de 4,5. Matiz preservado, luminosidade corrigida. O azul de link do original saiu: ele brigava com a paleta nos dois temas, e o tan ocupou o lugar. */ --bg: #fffdf6; /* papel, não folha de escritório */ --bg-alt: #f2efdf; /* o creme #eeeedc do Satorii */ --bg-code: #f7f4ea; /* o creme das tabelas dele */ --texto: #2b2a24; /* tinta quente, no lugar de um cinza frio */ --texto-suave: #4b5049; /* o sage #868F83, escurecido até 8,1:1 */ --borda: #d8d4bf; --borda-forte: #8d8a72; --link: #8a5a1f; /* o tan do escuro, escurecido para o papel */ --acento: #5f3d18; /* o marrom #963 das tabelas dele, escurecido */ --foco: #c2410c; /* o laranja #f30 do hover dele */ --perigo: #9b1c1c; --ok: #3f5c22; --marca-privada: #523d00; /* o dourado #c90, escurecido */ /* Mapa de escrita: do creme ao marrom, em vez de branco ao azul. Cinco degraus de luminosidade bem separados — diferença de tom é o primeiro sinal a sumir com sensibilidade ao contraste reduzida. */ --mapa-0: #f2efdf; --mapa-1: #d6c096; --mapa-2: #c0a06c; --mapa-3: #96703a; --mapa-4: #5f3d18; --sombra: 0 1px 2px rgba(60, 50, 30, .10); } /* Escuro. Texto #e8eaed sobre #14161a ≈ 15:1. Secundário #a3a9b3 ≈ 7,4:1. */ :root[data-tema="escuro"] { color-scheme: dark; /* A contraparte do Satorii, que o tema original não tem (§52). Não é inversão: é a mesma lógica sob outra luz. O creme, que era fundo, vira o TEXTO; a terra escura vira o fundo — nunca preto, que com texto claro cria halo para quem tem astigmatismo. O link é o tan #d3a97a, escolhido por ele. Para caber, três vizinhos se afastaram: o sage escureceu, o dourado clareou e o verde do selo escureceu — antes os quatro tinham praticamente a mesma luminosidade, e matiz é o primeiro sinal a sumir. */ --bg: #16150f; --bg-alt: #211f17; --bg-code: #1c1b14; --texto: #eae6d5; /* o creme do Satorii, agora como tinta */ --texto-suave: #879084; /* o sage, clareado o suficiente e não mais */ --borda: #3c3a2c; --borda-forte: #7d7f6e; --link: #d3a97a; /* o tan */ --acento: #a8846a; --foco: #ff8a4c; --perigo: #f08a8a; --ok: #739b3b; --marca-privada: #f0d385; --mapa-0: #211f17; --mapa-1: #4a3f2c; --mapa-2: #7d6544; --mapa-3: #b08d5e; --mapa-4: #e8cfa6; --sombra: 0 1px 2px rgba(0, 0, 0, .5); } @media (prefers-color-scheme: dark) { :root[data-tema="auto"] { color-scheme: dark; /* A contraparte do Satorii, que o tema original não tem (§52). Não é inversão: é a mesma lógica sob outra luz. O creme, que era fundo, vira o TEXTO; a terra escura vira o fundo — nunca preto, que com texto claro cria halo para quem tem astigmatismo. O link é o tan #d3a97a, escolhido por ele. Para caber, três vizinhos se afastaram: o sage escureceu, o dourado clareou e o verde do selo escureceu — antes os quatro tinham praticamente a mesma luminosidade, e matiz é o primeiro sinal a sumir. */ --bg: #16150f; --bg-alt: #211f17; --bg-code: #1c1b14; --texto: #eae6d5; /* o creme do Satorii, agora como tinta */ --texto-suave: #879084; /* o sage, clareado o suficiente e não mais */ --borda: #3c3a2c; --borda-forte: #7d7f6e; --link: #d3a97a; /* o tan */ --acento: #a8846a; --foco: #ff8a4c; --perigo: #f08a8a; --ok: #739b3b; --marca-privada: #f0d385; --mapa-0: #211f17; --mapa-1: #4a3f2c; --mapa-2: #7d6544; --mapa-3: #b08d5e; --mapa-4: #e8cfa6; --sombra: 0 1px 2px rgba(0, 0, 0, .5); } } /* Alto contraste: preto puro / branco puro = 21:1. Bordas sólidas, sem cinzas. */ :root[data-tema="contraste"] { color-scheme: dark; --bg: #000000; --bg-alt: #000000; --bg-code: #000000; --texto: #ffffff; --texto-suave: #ffffff; --borda: #ffffff; --borda-forte: #ffffff; --link: #ffe680; --acento: #ffe680; --foco: #00e5ff; --perigo: #ff9a8f; --ok: #7dffab; --marca-privada: #ffe680; /* Alto contraste: degraus em cinza puro, do preto ao branco. */ --mapa-0: #000000; --mapa-1: #595959; --mapa-2: #8c8c8c; --mapa-3: #c4c4c4; --mapa-4: #ffffff; --sombra: none; } :root[data-tema="contraste"] * { text-shadow: none !important; box-shadow: none !important; } :root[data-tema="contraste"] a, :root[data-tema="contraste"] .etiqueta { text-decoration: underline; } :root[data-tema="contraste"] button, :root[data-tema="contraste"] .botao, :root[data-tema="contraste"] input, :root[data-tema="contraste"] select, :root[data-tema="contraste"] textarea, :root[data-tema="contraste"] .cartao { border: 2px solid var(--borda) !important; } /* --- 2½. Fonte de leitura ----------------------------------------------- */ /* Bitter, hospedada por nós e reduzida ao subconjunto latino: 33 KB por corte. Nada de CDN — menos uma dependência externa, e a NFSN cobra banda. Serifa em bloco e traço quase monolinear: não tem filete fino para sumir, que é o defeito das serifadas de contraste alto. Medida no navegador, a altura-x é 52% do corpo — a MESMA da sans do sistema, então a troca não encolhe nem aumenta o texto aparente. `font-display: swap`: o texto aparece imediatamente na fonte de reserva e troca quando a Bitter chega. Nunca fica invisível esperando download. */ @font-face { font-family: "Bitter"; src: url("../fonts/bitter-latin.woff2") format("woff2"); font-weight: 100 900; /* fonte variável: um arquivo cobre os pesos */ font-style: normal; font-display: swap; } @font-face { font-family: "Bitter"; src: url("../fonts/bitter-latin-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; } /* Só o texto de leitura. A interface — cabeçalho, botões, formulários, painel — continua na sans do sistema: é o pareamento que o gwern.net usa, e limita o download ao que de fato se lê por muito tempo. Georgia como reserva por ser serifada, larga e presente em quase todo lugar: a troca ao carregar a Bitter fica discreta em vez de dar um salto. */ .conteudo, .item__resumo, /* O título da nota também é conteúdo, e ele mora FORA de .conteudo. Sem esta linha, o título saía em sans logo acima dos títulos de seção em serifada. `article > header > h1` acerta só as três telas de conteúdo (nota, página, livro): nenhuma tela do painel usa
. */ article > header > h1 { font-family: "Bitter", Georgia, "Times New Roman", serif; } /* Hifenização só no texto corrido — não em título, que fica feio quebrado. Não é adivinhação do navegador: são dicionários de padrões por idioma, escolhidos pelo `lang="pt-BR"` do . Testado com 16 palavras difíceis em português (dígrafos, hiatos, encontros consonantais): 16 acertos. O modo de falhar é NÃO separar — `ilhéu` ele se recusou a quebrar, porque deixaria uma letra sozinha na linha. Sem justificação de propósito: alinhar as duas margens faria o espaço entre palavras variar de linha para linha, e é a constância desse espaço que ajuda o olho a achar o começo da linha seguinte. */ .conteudo p, .conteudo li, .conteudo blockquote { hyphens: auto; -webkit-hyphens: auto; } /* --- 3. Reset e base ---------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; /* Container de consulta para as notas de margem (seção 22). Precisa medir a largura DISPONÍVEL na página, não a da coluna de leitura — por isso mora aqui, e não no
, que já vem limitado por --largura. */ container: pagina / inline-size; background: var(--bg); color: var(--texto); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 1rem; line-height: 1.65; overflow-wrap: break-word; } h1, h2, h3, h4, h5, h6 { line-height: 1.25; margin: 2rem 0 0.75rem; font-weight: 650; } h1 { font-size: 1.875rem; margin-top: 0; } h2 { font-size: 1.5rem; } h3 { font-size: 1.25rem; } h4 { font-size: 1.0625rem; } h5, h6 { font-size: 1rem; } p, ul, ol, blockquote, pre, table, figure { margin: 0 0 1.15rem; } a { color: var(--link); text-underline-offset: 0.15em; } a:hover { text-decoration-thickness: 0.14em; } /* NENHUM link muda de cor por ter sido visitado. A regra é explícita (em vez de simplesmente ausente) para também anular o roxo padrão da folha de estilo do navegador. Por quê: a cor de :visited só tem contraste garantido sobre o fundo da página. Sobre qualquer outro fundo — botão, cartão, selo — ela vira risco de legibilidade, e já causou um rótulo de botão a 1,00:1 no tema escuro. Um único par de cores por link é uma coisa a menos para dar errado. */ a:visited { color: var(--link); } /* Guarda de especificidade. Estes componentes definem a própria cor por classe (0-1-0), o que hoje já ganha de `a` (0-0-1). As regras abaixo existem para o caso de alguém reintroduzir coloração por estado no futuro: com classe + pseudo-classe (0-2-0) elas vencem qualquer `a:visited` ou `a:hover`. */ .botao:link, .botao:visited, .topo__marca:link, .topo__marca:visited, .nav-principal a:link, .nav-principal a:visited, .perfis a:link, .perfis a:visited, .pular-para-conteudo:link,.pular-para-conteudo:visited, .estante a:link, .estante a:visited { color: var(--texto); } .botao--principal:link, .botao--principal:visited { color: var(--bg); } .botao--perigo:link, .botao--perigo:visited { color: var(--perigo); } img { max-width: 100%; height: auto; } /* Foco visível em TUDO que é interativo. Nunca removido. */ :focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 2px; } :focus:not(:focus-visible) { outline: none; } /* --- 4. Utilitários ----------------------------------------------------- */ .vh { /* visualmente oculto, mas lido por leitor de tela */ position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .pular-para-conteudo { position: absolute; left: 0.5rem; top: -6rem; z-index: 100; padding: 0.75rem 1rem; background: var(--bg); color: var(--texto); border: 2px solid var(--foco); border-radius: var(--raio); transition: top .15s ease; } .pular-para-conteudo:focus { top: 0.5rem; } .rolagem-lateral { overflow-x: auto; max-width: 100%; } .suave { color: var(--texto-suave); } .pequeno { font-size: 0.875rem; } /* Ícones inline. Dimensionados em `em` de propósito: acompanham a escala de fonte do usuário e o tamanho do texto ao lado, sem regra extra por contexto. A cor vem de currentColor, então herdam o tema — inclusive o alto contraste. */ .icone { width: 1em; height: 1em; flex: none; /* não encolhe dentro de contêiner flex */ vertical-align: -0.125em; /* alinha com a linha de base do texto */ } /* Marca de conteúdo privado. Amarelo/âmbar auditado em todos os temas (≥ 7,4:1) — o ícone carrega informação, então precisa de contraste real, não do mínimo tolerado para enfeite. */ .icone--privado { color: var(--marca-privada); } /* --- 5. Layout ---------------------------------------------------------- */ .envoltorio { width: 100%; max-width: var(--largura); margin-inline: auto; padding-inline: var(--espaco); } .envoltorio--largo { max-width: var(--largura-larga); } main { padding-block: 1.5rem 3rem; } /* --- 6. Cabeçalho e barra de acessibilidade ----------------------------- */ .topo { border-bottom: 1px solid var(--borda); background: var(--bg); } .topo__linha { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding-block: 0.75rem; /* Âncora do painel de opções. Precisa ser ESTA linha, e não a engrenagem: quando o menu quebra em várias linhas, a engrenagem vai parar à esquerda, e um painel de 17rem alinhado à direita DELA sai pela borda esquerda da tela. Visto no celular. Ancorado aqui, o painel encosta sempre na margem direita do cabeçalho. */ position: relative; } .topo__marca { font-weight: 700; font-size: 1.125rem; text-decoration: none; color: var(--texto); margin-right: auto; min-height: 2.75rem; display: inline-flex; align-items: center; } .nav-principal ul { display: flex; flex-wrap: wrap; gap: 0.125rem 0.25rem; list-style: none; margin: 0; padding: 0; } /* Os perfis das redes (§68) dividem a linha da engrenagem em vez de abrirem uma terceira no celular — o porquê, com a medida, está no layout.php. Herdam as regras do link de menu abaixo, e o alvo de toque de 2.75rem junto: são ícones de 1em, e sem isso o alvo teria 18px num dedo. */ .perfis { display: flex; gap: 0.125rem 0.25rem; flex: none; } .nav-principal a, .perfis a { display: inline-flex; align-items: center; /* Em contêiner flex, um nó de texto só com espaço é descartado — era por isso que a marca de privado colava no nome do blog. O gap repõe o espaçamento de forma explícita, sem depender de espaço no HTML. */ gap: 0.4em; min-height: 2.75rem; /* alvo de toque ≥ 44px */ padding-inline: 0.6rem; border-radius: var(--raio); text-decoration: none; color: var(--texto); } .nav-principal a:hover, .perfis a:hover { background: var(--bg-alt); text-decoration: underline; } .nav-principal a[aria-current="page"] { background: var(--bg-alt); box-shadow: inset 0 -0.1875rem 0 var(--acento); font-weight: 600; } /* Opções atrás da engrenagem, ao lado do sorteio. Substituiu a barra sempre visível. A decisão anterior — não esconder controle de acessibilidade — foi revista porque fonte e tema PERSISTEM no localStorage: são escolhidos uma vez, e a barra custava três linhas de altura no celular em toda visita. */ .opcoes { flex: none; } /* Some com o triângulo nativo do , nos dois motores. */ .opcoes__botao { list-style: none; } .opcoes__botao::-webkit-details-marker { display: none; } .opcoes__botao::marker { content: ""; } .opcoes__botao { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; /* alvo de toque ≥ 44px */ min-height: 2.75rem; padding-inline: 0.5rem; border: 1px solid var(--borda-forte); border-radius: var(--raio); cursor: pointer; color: var(--texto); font-size: 1.15rem; /* a engrenagem é dimensionada em em */ } .opcoes__botao:hover { background: var(--bg-alt); } /* Aberta, a engrenagem gira um oitavo — confirma o estado sem depender de cor. O giro respeita prefers-reduced-motion na seção 18. */ .opcoes[open] .opcoes__botao { background: var(--bg-alt); box-shadow: inset 0 -0.1875rem 0 var(--acento); } .opcoes[open] .opcoes__botao .icone { transform: rotate(45deg); } .opcoes__botao .icone { transition: transform .18s ease; } .opcoes__painel { position: absolute; top: calc(100% + 0.4rem); right: 0; z-index: 60; width: 17rem; max-width: calc(100vw - 2rem); /* nunca sai da tela no celular */ padding: 0.875rem; background: var(--bg); border: 1px solid var(--borda-forte); border-radius: var(--raio); box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 0.875rem; } .opcoes__bloco { display: flex; flex-direction: column; gap: 0.3rem; margin: 0; } .opcoes__bloco > label, .opcoes__bloco > span:first-child { font-size: 0.8125rem; color: var(--texto-suave); } .opcoes__linha { display: flex; align-items: center; gap: 0.25rem; } .opcoes__linha input[type="search"] { flex: 1 1 auto; min-width: 0; } .opcoes__linha button { flex: none; } .opcoes__valor { min-width: 3.2rem; text-align: center; font-size: 0.8125rem; color: var(--texto-suave); } .opcoes__bloco--conta { border-top: 1px solid var(--borda); padding-top: 0.875rem; } .opcoes__bloco--conta .botao, .opcoes__bloco--conta button { width: 100%; justify-content: center; } /* --- 7. Botões e formulários -------------------------------------------- */ button, .botao { font: inherit; min-height: 2.75rem; min-width: 2.75rem; padding: 0.375rem 0.875rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; background: var(--bg-alt); color: var(--texto); border: 1px solid var(--borda-forte); border-radius: var(--raio); cursor: pointer; text-decoration: none; } button:hover, .botao:hover { border-color: var(--borda-forte); } .botao--principal { background: var(--acento); border-color: var(--acento); color: var(--bg); font-weight: 600; } :root[data-tema="contraste"] .botao--principal { color: #000; } .botao--perigo { color: var(--perigo); border-color: var(--perigo); } .botao--fantasma { background: transparent; } .botao-icone { padding: 0.375rem; font-size: 1.0625rem; line-height: 1; } input, select, textarea { font: inherit; color: var(--texto); background: var(--bg); border: 1px solid var(--borda-forte); border-radius: var(--raio); padding: 0.5rem 0.625rem; min-height: 2.75rem; width: 100%; max-width: 100%; } textarea { min-height: 18rem; resize: vertical; line-height: 1.6; } .campo { margin-bottom: 1.15rem; } .campo > label, .campo > .campo__rotulo { display: block; font-weight: 600; margin-bottom: 0.3125rem; } .campo__ajuda { display: block; font-size: 0.8125rem; color: var(--texto-suave); margin-top: 0.3125rem; } /* As seções da tela de configuração (§69). * * `fieldset` chega com borda e recuo próprios do navegador, diferentes em cada * um; aqui ele é zerado e redesenhado com os tokens do tema, para a caixa * parecer com o resto do painel e acompanhar claro/escuro/alto contraste. * * `min-width: 0` no fieldset não é firula: sem ele o elemento se recusa a * encolher abaixo do conteúdo mais largo — é um comportamento antigo e * específico dele — e um