/* Estilo base do portal. Cores, espacamento e tipografia num lugar so, em variaveis, para que a troca de tema exigida pelo item 2.7 do edital seja alteracao de valor e nao de codigo espalhado. */ :root { --cor-primaria: #10446f; --cor-primaria-escura: #0a2f4e; --cor-destaque: #1d7a4c; --cor-texto: #1f2933; --cor-texto-suave: #52606d; --cor-borda: #dfe3e8; --cor-erro: #a4262c; --cor-erro-fundo: #fdf3f4; /* Sucesso e informacao ganharam cor propria na F-10: ate entao todo recado do portal saia com a aparencia de erro, e "Alteracoes salvas." aparecia em vermelho. */ --cor-sucesso: #1c5c31; --cor-sucesso-fundo: #f1f8f3; --cor-informacao: #10446f; --cor-informacao-fundo: #f2f6fa; --cor-fundo: #f7f8fa; --cor-superficie: #ffffff; /* Cinza para texto secundario que ainda precisa passar em 4,5:1. */ --cor-apagado: #667085; /* As duas cores do anel de foco. Ver a regra :focus-visible mais abaixo. */ --foco-interno: #ffffff; --foco-externo: #0a2f4e; --largura-maxima: 1100px; --raio: 8px; } * { box-sizing: border-box; } /* O tamanho de base fica no , e nao no . E o que permite ao cidadao aumentar a letra do portal INTEIRO num clique: todo o resto do arquivo mede em rem, que conta a partir daqui. Com o tamanho preso no body em pixel, como era ate esta tarefa, mudar a fonte exigiria mexer em cada medida do portal. 100% e o tamanho que a pessoa escolheu na configuracao do proprio navegador, e nao 16px fixo. Quem ja aumentou a letra de todos os sites nao precisa aumentar de novo aqui. */ html { font-size: 100%; } html.fonte-2 { font-size: 115%; } html.fonte-3 { font-size: 132%; } body { margin: 0; background: var(--cor-fundo); color: var(--cor-texto); font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 1rem; line-height: 1.6; } .container { width: 100%; max-width: var(--largura-maxima); margin: 0 auto; padding: 0 20px; } /* Link que aparece so quando recebe foco pelo teclado. Exigencia de acessibilidade: quem navega por teclado nao deve percorrer o menu inteiro a cada pagina. */ .pular-para-conteudo { position: absolute; left: -9999px; background: var(--cor-primaria); color: #fff; padding: 10px 16px; } .pular-para-conteudo:focus { left: 8px; top: 8px; z-index: 10; } .faixa { background: var(--cor-primaria-escura); color: #cfe0ee; font-size: 13px; } .faixa-conteudo { display: flex; justify-content: space-between; padding-top: 6px; padding-bottom: 6px; } .cabecalho { background: var(--cor-primaria); color: #fff; } .cabecalho-conteudo { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding-top: 18px; padding-bottom: 18px; } .marca { display: flex; align-items: center; gap: 14px; } .brasao { width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--cor-primaria); display: flex; align-items: center; justify-content: center; font-weight: 700; letter-spacing: 0.5px; } .marca-titulo { margin: 0; font-size: 18px; font-weight: 700; } .marca-subtitulo { margin: 2px 0 0; font-size: 13px; color: #cfe0ee; } .menu { display: flex; flex-wrap: wrap; gap: 20px; } .menu a { color: #fff; text-decoration: none; font-size: 15px; padding-bottom: 2px; border-bottom: 2px solid transparent; } .menu a:hover, .menu a:focus { border-bottom-color: #fff; } .conteudo { padding-top: 36px; padding-bottom: 56px; } .etiqueta { margin: 0 0 6px; text-transform: uppercase; letter-spacing: 1.5px; font-size: 12px; font-weight: 700; color: var(--cor-texto-suave); } .destaque h1 { margin: 0 0 12px; font-size: 34px; line-height: 1.2; } .destaque-texto { margin: 0; max-width: 62ch; color: var(--cor-texto-suave); font-size: 18px; } .cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 32px 0; } .cartao { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: 18px; } .cartao h2 { margin: 0 0 6px; font-size: 17px; color: var(--cor-primaria); } .cartao p { margin: 0; font-size: 14px; color: var(--cor-texto-suave); } .aviso { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-left: 4px solid var(--cor-destaque); border-radius: var(--raio); padding: 22px; } .aviso h1, .aviso h2 { margin: 0 0 10px; font-size: 20px; } .aviso p { margin: 0 0 12px; color: var(--cor-texto-suave); } .aviso-nota { margin: 0; font-size: 14px; } code { background: #eef1f4; padding: 1px 5px; border-radius: 4px; font-size: 13px; } .ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 0 0 14px; padding: 0; } .ficha dt { font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--cor-texto-suave); } .ficha dd { margin: 2px 0 0; font-size: 17px; font-weight: 600; } .voltar { color: var(--cor-primaria); font-weight: 600; } .rodape { background: var(--cor-primaria-escura); color: #cfe0ee; padding: 28px 0; } .rodape-titulo { margin: 0 0 6px; color: #fff; font-weight: 700; } .rodape-texto { margin: 0 0 4px; font-size: 14px; max-width: 70ch; } .rodape-creditos { margin-top: 10px; font-size: 13px; } @media (max-width: 640px) { .destaque h1 { font-size: 26px; } .cabecalho-conteudo { align-items: flex-start; } } /* --- Formularios do ambiente de gerenciamento -------------------------- */ .formulario { max-width: 26rem; } .campo { margin-bottom: 1rem; } .campo label { display: block; margin-bottom: 0.35rem; font-weight: 600; color: var(--cor-texto); } .campo input { width: 100%; padding: 0.6rem 0.7rem; border: 1px solid var(--cor-borda); border-radius: var(--raio); background: var(--cor-superficie); color: var(--cor-texto); font-family: inherit; font-size: 1rem; } /* O contorno de foco fica visivel de proposito. Retirar o outline e comum em sites bonitos e torna o portal inutilizavel para quem navega por teclado, o que a Lei de Acesso a Informacao nao permite (art. 8, par. 3, VIII). */ .campo input:focus-visible, .botao:focus-visible { outline: 3px solid var(--cor-destaque); outline-offset: 2px; } .botao { display: inline-block; padding: 0.65rem 1.4rem; border: 1px solid var(--cor-primaria); border-radius: var(--raio); background: var(--cor-primaria); color: #fff; font-family: inherit; font-size: 1rem; font-weight: 600; cursor: pointer; } .botao:hover { background: var(--cor-primaria-escura); border-color: var(--cor-primaria-escura); } .botao-secundario { background: transparent; color: var(--cor-primaria); } .botao-secundario:hover { background: var(--cor-primaria); color: #fff; } /* Erro nao se anuncia so pela cor: quem nao distingue vermelho precisa do texto e da borda para perceber. */ .erro-mensagem, .mensagem-erro { margin: 0 0 1rem; padding: 0.7rem 0.9rem; border: 1px solid var(--cor-erro); border-left-width: 4px; border-radius: var(--raio); background: var(--cor-erro-fundo); color: var(--cor-erro); font-weight: 600; } /* --- Ambiente de gerenciamento ----------------------------------------- */ .menu-admin { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; padding: 0.6rem 0.9rem; border: 1px solid var(--cor-borda); border-radius: var(--raio); background: var(--cor-superficie); } .menu-admin ul { display: flex; flex-wrap: wrap; /* Espaço maior ENTRE os itens do que dentro deles: é o que deixa claro a qual nome o botãozinho de outra aba pertence. */ gap: 0.2rem 1rem; margin: 0; padding: 0; list-style: none; } .menu-admin a { display: inline-block; padding: 0.35rem 0.8rem; border-radius: var(--raio); color: var(--cor-primaria); font-weight: 600; text-decoration: none; } .menu-admin a:hover { background: var(--cor-fundo); } /* aria-current marca a tela aberta. Usar o proprio atributo como seletor mantem o visual e a informacao para o leitor de tela sempre em acordo: nao da para destacar visualmente sem anunciar, nem o contrario. */ .menu-admin a[aria-current='page'] { background: var(--cor-primaria); color: #fff; } .menu-admin form { margin: 0; } .formulario-linha { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; max-width: none; } .formulario-linha .campo { flex: 1 1 14rem; margin-bottom: 0; } .formulario-linha .campo-estreito { flex: 0 1 12rem; } .campo select { width: 100%; padding: 0.6rem 0.7rem; border: 1px solid var(--cor-borda); border-radius: var(--raio); background: var(--cor-superficie); color: var(--cor-texto); font-family: inherit; font-size: 1rem; } .campo select:focus-visible { outline: 3px solid var(--cor-destaque); outline-offset: 2px; } .botao-pequeno { padding: 0.3rem 0.75rem; font-size: 0.9rem; } /* Tabela larga rola dentro da propria caixa. Sem isto, a pagina inteira ganharia rolagem lateral no celular e o cabecalho sairia da tela. */ /* A tabela larga rola dentro desta caixa, e nao empurra a pagina. O "overflow-x: auto" sozinho NAO resolve, e isso custou tempo para descobrir: com ele, a tabela rola por dentro como esperado, mas o navegador continua contando a largura total da tabela ao decidir o tamanho da pagina — e o celular passa a rolar de lado tambem. Em 320px, a tela de usuarios empurrava a pagina para 872px. O "contain: paint" e o que fecha a conta: ele diz ao navegador que nada dentro desta caixa desenha fora dela, entao a largura da tabela para de contar para a pagina. CUIDADO ao mexer aqui: o contain tambem torna esta caixa a referencia de posicao para qualquer elemento com position: fixed dentro dela. Um modal colocado dentro de uma linha da tabela deixaria de cobrir a tela e passaria a ficar preso a esta caixa. Modal dentro de tabela, portanto, nao. */ .tabela-rolagem { overflow-x: auto; contain: paint; } .tabela { width: 100%; border-collapse: collapse; font-size: 0.95rem; } .tabela th, .tabela td { padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--cor-borda); text-align: left; vertical-align: middle; } .tabela thead th { border-bottom-width: 2px; color: var(--cor-texto-suave); font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; } .tabela form { margin: 0; } .linha-inativa td { color: var(--cor-texto-suave); } /* Visivel para leitor de tela, invisivel na tela. Serve a legendas de tabela e a rotulos de coluna de acoes, que a pessoa vidente entende pelo contexto e a pessoa cega nao. */ .apenas-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; border: 0; clip-path: inset(50%); white-space: nowrap; } /* --- Trilha de auditoria ------------------------------------------------ */ .celula-id { font-family: ui-monospace, 'Cascadia Mono', 'Consolas', monospace; font-size: 0.8rem; color: var(--cor-texto-suave); } .lista-mudancas { margin: 0; padding-left: 1.1rem; font-size: 0.9rem; } /* O valor antigo riscado e o novo em destaque deixam a leitura imediata: nao e preciso comparar duas colunas para achar a diferenca. */ .valor-antigo { color: var(--cor-texto-suave); text-decoration: line-through; } .valor-novo { font-weight: 600; } .paginacao { margin-top: 1rem; font-size: 0.9rem; } .paginacao a { margin-left: 0.8rem; color: var(--cor-primaria); font-weight: 600; } /* --- Biblioteca de arquivos --------------------------------------------- */ .galeria { display: grid; /* O minmax(0, ...) do segundo argumento nao e detalhe. Uma coluna "1fr" vale, por baixo, "minmax(auto, 1fr)" — e esse "auto" manda a coluna nunca ficar menor que o maior conteudo indivisivel dela. Um nome de arquivo longo, que nao tem onde quebrar, virava uma coluna de 348px dentro de um espaco de 247px, e o celular passava a rolar de lado. Com o minimo em zero, a coluna respeita o espaco e o nome quebra. */ grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); gap: 1rem; margin: 0 0 1rem; padding: 0; list-style: none; } .item-galeria { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.7rem; border: 1px solid var(--cor-borda); border-radius: var(--raio); background: var(--cor-superficie); } /* Altura fixa com o mesmo enquadramento para todos: sem isso, a grade fica com cartoes de alturas diferentes e a leitura vira zigue-zague. */ .item-visual { display: flex; align-items: center; justify-content: center; height: 120px; overflow: hidden; border-radius: var(--raio); background: var(--cor-fundo); } .item-visual img { max-width: 100%; max-height: 100%; object-fit: contain; } .selo-extensao { color: var(--cor-primaria); font-size: 1.5rem; font-weight: 700; text-transform: uppercase; } /* Nome longo nao pode empurrar o cartao: corta com reticencias e o nome inteiro fica no title, ao passar o mouse. */ .item-nome { margin: 0; overflow: hidden; font-size: 0.85rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; /* Nome de arquivo longo quebra em vez de empurrar a coluna. */ overflow-wrap: anywhere; } .item-dados { margin: 0; color: var(--cor-texto-suave); font-size: 0.75rem; line-height: 1.4; } .item-galeria form { margin-top: auto; } .campo input[type='file'] { padding: 0.45rem; background: var(--cor-fundo); } /* --- Noticias: listagem publica ---------------------------------------- */ .lista-noticias { display: grid; gap: 1.25rem; margin-bottom: 1.5rem; } .cartao-noticia { display: grid; grid-template-columns: 260px 1fr; gap: 1.25rem; align-items: start; padding: 1.25rem; background: #fff; border: 1px solid #dde3ea; border-radius: 8px; } .cartao-noticia:has(> .cartao-noticia-texto:only-child) { grid-template-columns: 1fr; } .cartao-noticia-capa { display: block; overflow: hidden; border-radius: 6px; background: #eef2f6; } .cartao-noticia-capa img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .cartao-noticia-texto h2 { margin: 0.25rem 0 0.5rem; font-size: 1.25rem; line-height: 1.3; } .cartao-noticia-texto h2 a { color: #10306b; text-decoration: none; } .cartao-noticia-texto h2 a:hover, .cartao-noticia-texto h2 a:focus { text-decoration: underline; } .cartao-noticia-texto p { margin: 0; color: #445; line-height: 1.55; } .noticia-meta { margin: 0; font-size: 0.85rem; color: #667; text-transform: uppercase; letter-spacing: 0.04em; } @media (max-width: 640px) { .cartao-noticia { grid-template-columns: 1fr; } } /* --- Noticia: pagina da publicacao ------------------------------------- */ .noticia { max-width: 46rem; margin: 0 auto 2rem; } .noticia-cabecalho h1 { margin: 0.5rem 0; font-size: 2rem; line-height: 1.2; color: #10306b; } .noticia-resumo { margin: 0; font-size: 1.1rem; color: #445; line-height: 1.55; } .noticia-capa { margin: 1.5rem 0; } .noticia-capa img { display: block; width: 100%; border-radius: 8px; } .noticia-corpo p { margin: 0 0 1rem; line-height: 1.7; color: #223; } .evento { margin: 1.5rem 0; padding: 1rem 1.25rem; background: #f2f6fb; border-left: 4px solid #10306b; border-radius: 4px; } .evento h2 { margin: 0 0 0.5rem; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.05em; color: #10306b; } .midias { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #dde3ea; } .midias h2 { font-size: 1.1rem; margin: 0 0 1rem; } .midia { margin: 0 0 1.5rem; } .midia img, .midia video { display: block; width: 100%; border-radius: 6px; background: #000; } .midia audio { width: 100%; } .midia figcaption { margin-top: 0.4rem; font-size: 0.9rem; color: #667; } .midia-documento { display: flex; gap: 0.75rem; align-items: center; padding: 0.75rem 1rem; border: 1px solid #dde3ea; border-radius: 6px; color: #10306b; text-decoration: none; } .midia-documento:hover, .midia-documento:focus { background: #f2f6fb; } /* --- Selos e filtros ---------------------------------------------------- */ .selo { display: inline-block; padding: 0.1rem 0.45rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; vertical-align: middle; } .selo-evento { background: #e3efe6; color: #1c5c31; } .selo-destaque { background: #fdf0d5; color: #7a5211; } .filtros { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; } .filtros a { padding: 0.3rem 0.75rem; border: 1px solid #dde3ea; border-radius: 999px; font-size: 0.9rem; color: #10306b; text-decoration: none; } .filtros a:hover, .filtros a:focus { background: #f2f6fb; } .filtros a[aria-current='page'] { background: #10306b; border-color: #10306b; color: #fff; } /* --- Formulario de conteudo -------------------------------------------- */ .campo textarea { width: 100%; padding: 0.6rem 0.7rem; font: inherit; color: #223; background: #fff; border: 1px solid #c3ccd6; border-radius: 4px; resize: vertical; } .campo textarea:focus-visible { outline: 3px solid #10306b; outline-offset: 1px; } .campo-ajuda { margin: 0.35rem 0 0; font-size: 0.85rem; color: #667; } .campo-opcional { font-weight: 400; color: #667; } .campo-marcavel { flex-direction: row; align-items: center; gap: 0.5rem; } .campo-marcavel label { margin: 0; } .campo-marcavel input { width: auto; } .bloco { margin: 0; padding: 1rem 1.25rem; border: 1px solid #dde3ea; border-radius: 6px; } .bloco legend { padding: 0 0.4rem; font-weight: 600; color: #10306b; } .acoes-linha { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; } /* --- Busca --------------------------------------------------------------- */ .cabecalho-direita { display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem; } .busca-topo { display: flex; gap: 0.35rem; } .busca-topo input { width: 15rem; max-width: 100%; padding: 0.35rem 0.6rem; font: inherit; font-size: 0.9rem; color: #223; background: #fff; border: 1px solid #c3ccd6; border-radius: 4px; } .busca-topo button { padding: 0.35rem 0.8rem; font: inherit; font-size: 0.9rem; color: #10306b; background: #fff; border: 1px solid #c3ccd6; border-radius: 4px; cursor: pointer; } .busca-topo button:hover { background: #f2f6fb; } .busca-topo input:focus-visible, .busca-topo button:focus-visible { outline: 3px solid #fff; outline-offset: 1px; } .resultados { margin: 0; padding: 0; list-style: none; } .resultado { padding: 1rem 0; border-top: 1px solid #e4e9ef; } .resultado:first-child { border-top: none; } .resultado h3 { margin: 0.25rem 0 0.4rem; font-size: 1.15rem; line-height: 1.3; } .resultado h3 a { color: #10306b; text-decoration: none; } .resultado h3 a:hover, .resultado h3 a:focus { text-decoration: underline; } .resultado-trecho { margin: 0; color: #445; line-height: 1.6; } .resultado-trecho mark { padding: 0 0.15rem; background: #fdf0c8; color: inherit; font-weight: 600; } .selo-fonte { background: #e6ecf6; color: #10306b; } @media (max-width: 720px) { .cabecalho-direita { align-items: stretch; width: 100%; } .busca-topo input { width: 100%; } } /* --- Exportacao de relatorios ------------------------------------------- */ .exportar { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; align-items: center; margin: 0 0 1rem; } .exportar-linha { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0; } .campo-embutido { padding: 0.3rem 0.5rem; font: inherit; font-size: 0.85rem; color: #223; background: #fff; border: 1px solid #c3ccd6; border-radius: 4px; } .exportar-rotulo { font-size: 0.85rem; color: #667; } /* --- Tarefas de segundo plano ------------------------------------------- */ .selo-na_fila { background: #e6ecf6; color: #10306b; } .selo-executando { background: #fdf0d5; color: #7a5211; } .selo-concluida { background: #e3efe6; color: #1c5c31; } .selo-falhou { background: #fbe3e3; color: #8c2020; } /* --- Componentes do ambiente de gerenciamento (F-10, parte 2) ----------- */ /* A mensagem que o portal dá de volta a quem acabou de fazer alguma coisa. Três aparências, um formato só. A marca da esquerda (✓, !, i) não é enfeite: quem não distingue verde de vermelho precisa de algo além da cor para saber se deu certo. É o mesmo motivo da borda grossa à esquerda, que já existia no aviso de erro. */ .mensagem { display: flex; gap: 0.6rem; align-items: flex-start; margin: 0 0 1rem; padding: 0.7rem 0.9rem; border: 1px solid; border-left-width: 4px; border-radius: var(--raio); font-weight: 600; } .mensagem-marca { flex-shrink: 0; width: 1.25rem; height: 1.25rem; line-height: 1.25rem; font-size: 0.8rem; text-align: center; color: var(--cor-superficie); border-radius: 50%; } .mensagem-sucesso { border-color: var(--cor-sucesso); background: var(--cor-sucesso-fundo); color: var(--cor-sucesso); } .mensagem-sucesso .mensagem-marca { background: var(--cor-sucesso); } .mensagem-erro .mensagem-marca { background: var(--cor-erro); } .mensagem-informacao { border-color: var(--cor-informacao); background: var(--cor-informacao-fundo); color: var(--cor-informacao); } .mensagem-informacao .mensagem-marca { background: var(--cor-informacao); } /* --- Busca das listagens ------------------------------------------------ */ .busca-listagem { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; margin: 0 0 0.75rem; } .busca-listagem .campo { flex: 1 1 18rem; margin: 0; } /* --- Cabeçalho de coluna que ordena ------------------------------------- */ .coluna-ordenavel { display: inline-flex; gap: 0.35rem; align-items: center; color: inherit; text-decoration: none; white-space: nowrap; } .coluna-ordenavel:hover, .coluna-ordenavel:focus-visible { text-decoration: underline; } /* A seta da coluna que não está ordenando fica apagada, mas continua na tela. Some-la só na coluna ativa resolveria a poluição visual e criaria outro problema: sem nenhuma marca, ninguém descobre que dá para clicar ali. */ .coluna-seta { font-size: 0.7rem; opacity: 0.35; } .coluna-ordenada .coluna-seta { opacity: 1; } .coluna-ordenada { color: var(--cor-primaria); } /* --- Paginação ---------------------------------------------------------- */ .paginacao { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 1rem; font-size: 0.9rem; } .paginacao-posicao { color: var(--cor-texto-suave); } .paginacao-total { color: var(--cor-texto-suave); font-size: 0.85rem; } /* O "Anterior" da primeira página fica visível e apagado, em vez de sumir. Botão que aparece e desaparece conforme a página faz o resto da linha dançar de lugar a cada virada — e quem clica rápido erra o alvo. */ .paginacao-vazio { padding: 0.3rem 0.7rem; /* Cinza que ainda passa no contraste minimo de 4,5:1. A versao anterior usava opacidade, e opacidade rebaixa o contraste sem avisar: a auditoria automatizada reprovou exatamente esta linha. */ color: var(--cor-apagado); font-size: 0.85rem; } /* --- Confirmação de exclusão (modal sem JavaScript) --------------------- */ .botao-perigo { border-color: var(--cor-erro); color: var(--cor-erro); } a.botao-perigo:hover, a.botao-perigo:focus-visible, button.botao-perigo:hover, button.botao-perigo:focus-visible { background: var(--cor-erro); color: var(--cor-superficie); } button.botao-perigo { background: var(--cor-erro); color: var(--cor-superficie); } /* O modal fica escondido ate ser o destino do endereco. :target e o seletor que diz "este elemento e o pedaco da pagina para onde o endereco aponta agora". O botao e um link para ele; o Cancelar e um link para lugar nenhum. E o modal inteiro, abrir e fechar, sem uma linha de JavaScript — o que importa porque isto guarda uma exclusao. */ .confirmar-modal { display: none; } .confirmar-modal:target { display: flex; position: fixed; inset: 0; z-index: 50; align-items: center; justify-content: center; padding: 1rem; /* O fundo escurecido nao e enfeite: e o que deixa claro que o resto da tela esta esperando uma resposta. */ background: rgb(31 41 51 / 55%); } .confirmar-caixa { width: min(26rem, 100%); padding: 1.25rem; text-align: left; background: var(--cor-superficie); border-top: 4px solid var(--cor-erro); border-radius: var(--raio); box-shadow: 0 12px 32px rgb(31 41 51 / 35%); } .confirmar-pergunta { margin: 0 0 0.5rem; font-size: 1.05rem; font-weight: 600; color: var(--cor-texto); } .confirmar-detalhe { margin: 0 0 1rem; font-size: 0.9rem; color: var(--cor-texto-suave); } /* --- Abrir em outra aba -------------------------------------------------- */ /* O botãozinho ao lado de cada item do menu e de cada registro. Fica discreto até alguém precisar dele: cinza, pequeno, e escurece ao passar o mouse ou ao receber o foco pelo teclado. Se fosse do mesmo peso do link principal, cada linha da lista passaria a ter dois alvos disputando a atenção — e o alvo que interessa é o nome do registro. A área clicável é maior que o desenho (o padding), porque doze pixels de ícone é alvo pequeno demais para quem usa mouse com pressa ou toca a tela com o dedo. */ .nova-aba { display: inline-flex; align-items: center; justify-content: center; padding: 0.25rem; color: var(--cor-texto-suave); line-height: 0; border-radius: 3px; vertical-align: middle; } .nova-aba:hover, .nova-aba:focus-visible { color: var(--cor-primaria); background: var(--cor-fundo); } .menu-admin-item { display: inline-flex; align-items: center; } /* O botão encosta no nome: o espaço do link já separa o suficiente. */ .menu-admin-item .nova-aba { margin-left: -0.35rem; } /* O mesmo desenho, parado dentro de um texto explicativo. */ .nova-aba-exemplo { display: inline-flex; padding: 0.2rem; color: var(--cor-primaria); line-height: 0; border: 1px solid var(--cor-borda); border-radius: 3px; vertical-align: middle; } /* --- Foco visível, um só para o portal inteiro (F-11) -------------------- */ /* O anel de foco tem DUAS cores, e isso não é enfeite. A exigência é que o indicador de foco tenha contraste de pelo menos 3:1 contra o que está atrás dele. O problema é que o portal tem fundo branco no miolo e azul-escuro no cabeçalho — e não existe uma cor só que contraste bem com os dois. Testei laranja, roxo, verde e vinho: cada uma passa num fundo e falha no outro. A saída é um anel branco por dentro e um anel escuro por fundo. No branco, quem se vê é o escuro; no azul do cabeçalho, quem se vê é o branco. Um dos dois sempre aparece, qualquer que seja o fundo. :focus-visible, e não :focus: o navegador só marca quando o foco veio do teclado. Quem clica com o mouse não ganha um anel que não pediu. */ :focus-visible { outline: 3px solid var(--foco-interno); outline-offset: 0; box-shadow: 0 0 0 6px var(--foco-externo); border-radius: 2px; } /* O miolo da página recebe foco ao se usar o "Pular para o conteúdo", mas não entra na ordem do Tab: tabindex="-1" no HTML faz isso. Sem o anel aqui — a página inteira contornada de azul assusta e não informa nada. */ main:focus-visible { outline: none; box-shadow: none; } /* --- Controles de acessibilidade do cidadão ----------------------------- */ .acessibilidade { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; } .acessibilidade-botao { padding: 0.15rem 0.5rem; color: #fff; font-size: 0.8rem; font-weight: 600; text-decoration: none; border: 1px solid rgb(255 255 255 / 45%); border-radius: 4px; white-space: nowrap; } .acessibilidade-botao:hover { background: rgb(255 255 255 / 18%); } /* O botão que não tem mais para onde ir (a fonte já está no menor ou no maior) fica apagado, mas CONTINUA alcançável pelo teclado e continua anunciado pelo leitor de tela, por causa do aria-disabled. Tirá-lo da ordem do Tab faria a barra mudar de tamanho conforme o estado — e quem navega por teclado conta quantas vezes aperta Tab. */ .acessibilidade-botao[aria-disabled='true'] { opacity: 0.5; cursor: default; } .acessibilidade-ligado { background: #fff; color: var(--cor-primaria-escura); border-color: #fff; } /* --- Alto contraste ------------------------------------------------------ */ /* Preto e branco, com links em amarelo. Não é "o tema escuro": é o modo que uma pessoa com baixa visão consegue ler, e por isso todas as combinações ficam acima de 12:1 — muito além dos 4,5:1 exigidos. Está escrito como troca de VARIÁVEIS, e não como regras novas para cada elemento. É o que faz o modo alcançar o portal inteiro, inclusive as telas que ainda nem foram escritas: quem usar as variáveis, como todo o resto deste arquivo faz, já nasce funcionando no alto contraste. */ html.contraste-alto { --cor-primaria: #ffff00; --cor-primaria-escura: #000000; --cor-destaque: #ffff00; --cor-texto: #ffffff; --cor-texto-suave: #ffffff; --cor-apagado: #d0d0d0; --cor-borda: #ffffff; --cor-erro: #ff8080; --cor-erro-fundo: #000000; --cor-sucesso: #7cff7c; --cor-sucesso-fundo: #000000; --cor-informacao: #ffff00; --cor-informacao-fundo: #000000; --cor-fundo: #000000; --cor-superficie: #000000; --foco-interno: #000000; --foco-externo: #ffff00; } html.contraste-alto body { background: #000; color: #fff; } /* A regra que alcança TUDO, inclusive o que ainda não foi escrito. A primeira versão deste modo trocava só as variáveis de cor, o que é o jeito elegante — e não funcionou. O portal tem dezenas de cores escritas direto na regra, herdadas de antes das variáveis existirem: um cinza #444455 na data da notícia, um #667 no rodapé do cartão. Sobre fundo preto, esse cinza dá contraste de 2,2:1, metade do mínimo exigido, e a auditoria automatizada reprovou 26 pedaços só na tela de notícias. Daí o !important: aqui ele não é preguiça, é a definição do recurso. Alto contraste é a pessoa dizendo "ignore o que o site achou bonito, eu preciso ler". Uma regra que pode ser vencida por outra não cumpre isso — e a cada tela nova alguém teria que lembrar de conferir. A imagem fica de fora: inverter a foto da obra não ajuda ninguém a lê-la. */ html.contraste-alto *:not(img):not(svg):not(path) { background-color: #000 !important; color: #fff !important; border-color: #fff !important; text-shadow: none !important; } /* Link em amarelo: é a convenção de alto contraste que o Windows usa há trinta anos, e quem precisa do modo já a conhece. 19,6:1 sobre o preto. */ html.contraste-alto a:not(.botao), html.contraste-alto summary, html.contraste-alto .coluna-ordenavel { color: #ff0 !important; } /* O "a" na frente de cada seletor nao e enfeite. A regra de cima pinta todo link de amarelo, e o seletor dela tem peso "elemento + duas classes". Escrito como ".acessibilidade-ligado", este bloco pesava menos e perdia — o botao de alto contraste ligado ficava com fundo amarelo e letra amarela, ou seja, um retangulo amarelo sem texto nenhum. Com o "a", os dois pesam igual, e vence quem vem depois: este. */ html.contraste-alto a:hover, html.contraste-alto a:focus-visible, html.contraste-alto a[aria-current='page'], html.contraste-alto a.acessibilidade-ligado, html.contraste-alto .botao:hover { background-color: #ff0 !important; color: #000 !important; border-color: #ff0 !important; } /* O texto de dica dentro dos campos ("Buscar no portal") tambem precisa ser legivel: ele nao e alcancado pela regra geral, porque e desenhado pelo navegador e nao pelo HTML. */ html.contraste-alto ::placeholder { color: #d0d0d0 !important; opacity: 1; } /* O anel de foco vira amarelo sobre preto: é o par de maior contraste que existe, e vem depois da regra geral para não ser apagado por ela. */ html.contraste-alto :focus-visible { outline: 3px solid #ff0 !important; box-shadow: 0 0 0 6px #000 !important; } /* Onde o portal escreve cor fixa em vez de variável, o alto contraste corrige. São poucos pontos, e cada um deles é um lugar onde valeria a pena usar variável desde o começo. */ html.contraste-alto .cabecalho, html.contraste-alto .faixa, html.contraste-alto .rodape, html.contraste-alto .destaque, html.contraste-alto .aviso, html.contraste-alto .tabela, html.contraste-alto .menu-admin, html.contraste-alto .confirmar-caixa, html.contraste-alto .cartao-noticia { background: #000; color: #fff; } html.contraste-alto a, html.contraste-alto .menu a, html.contraste-alto .coluna-ordenavel { color: #ff0; } html.contraste-alto .botao, html.contraste-alto .acessibilidade-botao, html.contraste-alto .selo, html.contraste-alto .campo input, html.contraste-alto .campo select, html.contraste-alto .campo textarea { background: #000; color: #fff; border: 1px solid #fff; } html.contraste-alto .botao:hover, html.contraste-alto .acessibilidade-ligado { background: #ff0; color: #000; border-color: #ff0; } html.contraste-alto .menu a[aria-current='page'], html.contraste-alto .menu-admin a[aria-current='page'], html.contraste-alto .filtros a[aria-current='page'] { background: #ff0; color: #000; } html.contraste-alto .brasao { background: #000; color: #ff0; border: 2px solid #ff0; } /* A imagem não é desligada no alto contraste, mas ganha uma borda: sobre fundo preto, foto escura some, e a pessoa não descobre que havia uma foto ali. */ html.contraste-alto img { border: 1px solid #fff; } /* --- Telas estreitas: o portal precisa funcionar a partir de 320px ------- */ @media (max-width: 30rem) { .container { padding: 0 12px; } .faixa-conteudo { flex-wrap: wrap; gap: 0.4rem; justify-content: center; text-align: center; } .cabecalho-conteudo, .cabecalho-direita { flex-direction: column; align-items: stretch; gap: 0.75rem; } .menu { flex-wrap: wrap; justify-content: center; } .formulario-linha { flex-direction: column; align-items: stretch; } .campo, .campo-estreito { width: 100%; min-width: 0; } /* Em 320px, um botão por linha. Botões lado a lado nessa largura ficam com dois caracteres cada e o texto quebra no meio da palavra. */ .acoes-linha, .exportar, .exportar-linha { flex-direction: column; align-items: stretch; } .acoes-linha > *, .exportar-linha > * { width: 100%; } .galeria { grid-template-columns: minmax(0, 1fr); } .paginacao { justify-content: space-between; } /* Nenhuma palavra longa — um endereço, um e-mail — pode empurrar a página para o lado. Rolagem lateral é o defeito de celular mais reclamado. */ body { overflow-wrap: break-word; } }