/* INFRAMETRIA — folha de estilo do site. A paleta é a do logotipo e nada mais: preto, asfalto, amarelo e branco. O amarelo é a faixa da rodovia — fio de marca e sinal de atenção. Ele nunca é fundo largo nem texto corrido. TEMA. O claro é o padrão: fundo branco, logotipo preto com pista de asfalto. O escuro entra quando o aparelho está em modo escuro e ninguém forçou o claro, ou quando a pessoa escolheu "escuro" no seletor (data-tema no ). Tudo o que muda entre os dois está nas variáveis; o resto só as usa. */ :root { --preto: #000000; --grafite: #0B1014; --asfalto: #2B3338; --amarelo: #F2C230; --branco: #F2F6F8; --largura: 1120px; --fundo: #FFFFFF; --fundo-2: #F2F6F8; /* capa, cabeçalho de página */ --texto: #000000; --texto-2: #3A464E; --neutro: #5E7280; --borda: #DEE5EA; --fio: #000000; /* fios de seção e de cartão */ --foco: #2B3338; --topo-fundo: #FFFFFF; --topo-borda: #DEE5EA; --menu: #5E7280; --menu-ativo: #000000; --marca-pista: #2B3338; /* Em fundo claro o amarelo não segura texto: o chapéu vai de asfalto e ganha só o fio amarelo. Em fundo escuro ele volta a ser amarelo. */ --chapeu: #2B3338; --botao-fundo: #000000; --botao-texto: #FFFFFF; --botao-borda: #000000; /* blocos escuros que existem também no tema claro: são asfalto, cor da marca, e não "modo escuro" */ --bloco-escuro: #2B3338; --bloco-escuro-texto: #F2F6F8; --bloco-escuro-suave: #C7D3DA; --bloco-escuro-cartao: #1F272C; --campo-fundo: #FFFFFF; --campo-borda: #B7C3CC; --marcador-fundo: #FFF6E3; --marcador-texto: #6B5310; --erro: #8D2B1F; } @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --fundo: #0B1014; --fundo-2: #0B1014; --texto: #F2F6F8; --texto-2: #C7D3DA; --neutro: #93A6B2; --borda: #223039; --fio: #F2F6F8; --foco: #F2C230; --topo-fundo: #0B1014; --topo-borda: #223039; --menu: #93A6B2; --menu-ativo: #F2F6F8; --marca-pista: #F2F6F8; --chapeu: #F2C230; --botao-fundo: #F2F6F8; --botao-texto: #0B1014; --botao-borda: #F2F6F8; --bloco-escuro: #121A22; --bloco-escuro-texto: #F2F6F8; --bloco-escuro-suave: #C7D3DA; --bloco-escuro-cartao: #1A242D; --campo-fundo: #121A22; --campo-borda: #34454F; --marcador-fundo: #3A3012; --marcador-texto: #F2C230; --erro: #F0B7B7; } } :root[data-tema="escuro"] { --fundo: #0B1014; --fundo-2: #0B1014; --texto: #F2F6F8; --texto-2: #C7D3DA; --neutro: #93A6B2; --borda: #223039; --fio: #F2F6F8; --foco: #F2C230; --topo-fundo: #0B1014; --topo-borda: #223039; --menu: #93A6B2; --menu-ativo: #F2F6F8; --marca-pista: #F2F6F8; --chapeu: #F2C230; --botao-fundo: #F2F6F8; --botao-texto: #0B1014; --botao-borda: #F2F6F8; --bloco-escuro: #121A22; --bloco-escuro-texto: #F2F6F8; --bloco-escuro-suave: #C7D3DA; --bloco-escuro-cartao: #1A242D; --campo-fundo: #121A22; --campo-borda: #34454F; --marcador-fundo: #3A3012; --marcador-texto: #F2C230; --erro: #F0B7B7; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--fundo); color: var(--texto); font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 16px; line-height: 1.6; } h1, h2, h3 { margin: 0; line-height: 1.12; letter-spacing: -0.6px; overflow-wrap: break-word; } p { margin: 0 0 14px; } a { color: inherit; } img, svg { max-width: 100%; } :focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; } .dentro { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 24px; } .dentro.estreito { max-width: 720px; } .pular { position: absolute; left: -9999px; background: var(--grafite); color: var(--branco); padding: 12px 18px; } .pular:focus { left: 12px; top: 12px; z-index: 50; } /* ------------------------------------------------------------------ topo */ .topo { background: var(--topo-fundo); color: var(--texto); border-bottom: 1px solid var(--topo-borda); } .topo-interno { display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; width: 100%; max-width: var(--largura); margin: 0 auto; padding: 22px 24px; } .marca { display: block; text-decoration: none; color: var(--texto); } /* A assinatura completa herda a cor do texto; a pista lê --marca-pista: asfalto no claro, branca no escuro. */ .marca-assinatura { display: block; width: 264px; height: auto; aspect-ratio: 787.3 / 186.2; } .marca-simbolo { width: 30px; height: 30px; flex-shrink: 0; } .menu { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .menu a { color: var(--menu); text-decoration: none; font-size: 12.5px; font-weight: 600; letter-spacing: 1.4px; } .menu a:hover { color: var(--menu-ativo); } .menu a.aqui { color: var(--menu-ativo); border-bottom: 2px solid var(--amarelo); padding-bottom: 3px; } .menu .admin { color: var(--menu-ativo); border-bottom: 2px dotted var(--amarelo); } .botao-topo { background: var(--botao-fundo); color: var(--botao-texto) !important; padding: 9px 15px; border-radius: 6px; } .botao-topo:hover { background: var(--amarelo); color: var(--preto) !important; } /* ------------------------------------------------------------------ capa */ .capa { background: var(--fundo-2); color: var(--texto); padding: 80px 0 90px; } .capa h1 { font-size: 46px; font-weight: 800; margin: 0 0 22px; } .chapeu { display: inline-block; margin: 0 0 16px; color: var(--chapeu); font-size: 11.5px; font-weight: 700; letter-spacing: 3.2px; border-bottom: 2px solid var(--amarelo); padding-bottom: 4px; } .chapeu a { text-decoration: none; } .capa .linha-fina { max-width: 620px; color: var(--texto-2); font-size: 17px; margin-bottom: 30px; } .acoes { display: flex; gap: 12px; flex-wrap: wrap; } .botao { display: inline-block; padding: 14px 24px; border: 2px solid var(--botao-borda); border-radius: 7px; background: var(--botao-fundo); color: var(--botao-texto); font-size: 13.5px; font-weight: 700; letter-spacing: 1.4px; text-decoration: none; cursor: pointer; } .botao:hover { background: var(--amarelo); border-color: var(--amarelo); color: var(--preto); } .botao.vazado { background: transparent; color: var(--texto); border-color: var(--texto); } .botao.vazado:hover { background: var(--texto); color: var(--fundo); } .botao.amarelo { background: var(--amarelo); border-color: var(--amarelo); color: var(--preto); } .botao.amarelo:hover { background: var(--branco); border-color: var(--branco); } .faixa-numeros { background: var(--bloco-escuro); color: var(--bloco-escuro-texto); } .faixa-numeros .dentro { display: flex; gap: 40px; flex-wrap: wrap; padding-top: 22px; padding-bottom: 22px; } .faixa-numeros strong { display: block; font-size: 15px; letter-spacing: 1px; } .faixa-numeros span { font-size: 11.5px; letter-spacing: 2px; color: var(--bloco-escuro-suave); } /* ---------------------------------------------------------------- blocos */ .bloco { padding: 66px 0; } .bloco.escuro { background: var(--bloco-escuro); color: var(--bloco-escuro-texto); } .bloco.escuro .chapeu { color: var(--amarelo); } .bloco.escuro .botao { background: var(--amarelo); border-color: var(--amarelo); color: var(--preto); } .bloco.escuro .botao:hover { background: var(--branco); border-color: var(--branco); } .cabecalho-pagina { background: var(--fundo-2); color: var(--texto); padding: 62px 0 54px; border-bottom: 1px solid var(--borda); } .cabecalho-pagina h1 { font-size: 40px; font-weight: 800; } .cabecalho-pagina .linha-fina { margin-top: 18px; max-width: 620px; color: var(--texto-2); } .titulo-secao { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; border-bottom: 2px solid var(--fio); padding-bottom: 14px; margin-bottom: 30px; } .titulo-secao h2 { font-size: 24px; font-weight: 800; letter-spacing: 0; } h2 { font-size: 24px; font-weight: 800; } .leia { color: var(--texto); font-size: 12.5px; font-weight: 700; letter-spacing: 1.4px; text-decoration: none; border-bottom: 2px solid var(--amarelo); padding-bottom: 2px; } .leia:hover { border-bottom-width: 3px; } .grade-posts { display: grid; gap: 30px; grid-template-columns: repeat(2, 1fr); } .post-cartao { border-top: 2px solid var(--fio); padding-top: 18px; } /* O primeiro cartão encosta no fio do título da seção: dois fios paralelos a 30 px um do outro leem como erro de montagem. */ .grade-posts > .post-cartao:first-child { border-top: 0; padding-top: 0; } .post-cartao.destaque { grid-column: 1 / -1; } .post-cartao.destaque h3 { font-size: 32px; } .post-cartao .data { margin: 0 0 10px; color: var(--neutro); font-size: 11.5px; font-weight: 700; letter-spacing: 2px; } .post-cartao h3 { font-size: 21px; font-weight: 700; margin-bottom: 10px; } .post-cartao h3 a { text-decoration: none; } .post-cartao h3 a:hover { border-bottom: 3px solid var(--amarelo); } .post-cartao .resumo { color: var(--texto-2); } .vazio { color: var(--neutro); letter-spacing: 1.5px; font-size: 13px; } .sistema { display: grid; grid-template-columns: 1.4fr 1fr; gap: 50px; align-items: center; } .sistema h2 { margin-bottom: 18px; font-size: 30px; } .sistema p { color: var(--bloco-escuro-suave); } .sistema .botao { margin-top: 12px; } .cartao-sistema { background: var(--bloco-escuro-cartao); border-radius: 14px; padding: 34px; text-align: center; } .cartao-sistema .marca-simbolo { width: 76px; height: 76px; color: var(--branco); } .cartao-titulo { margin: 16px 0 6px; font-weight: 800; letter-spacing: 2px; } .cartao-texto { color: var(--bloco-escuro-suave); font-size: 14px; margin: 0; } /* ---------------------------------------------------------------- artigo */ .artigo { padding: 58px 0 70px; } .artigo h1 { font-size: 38px; font-weight: 800; margin-bottom: 16px; } .assinatura-post { color: var(--neutro); font-size: 12.5px; font-weight: 700; letter-spacing: 1.8px; border-bottom: 2px solid var(--fio); padding-bottom: 16px; margin-bottom: 30px; } .corpo { font-size: 17.5px; } .corpo h2 { font-size: 22px; margin: 34px 0 12px; } .corpo ul { margin: 0 0 16px; padding-left: 20px; } .corpo li { margin-bottom: 7px; } .corpo blockquote { margin: 24px 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--amarelo); color: var(--texto-2); font-style: italic; } .corpo a { text-decoration: underline; text-decoration-color: var(--amarelo); text-underline-offset: 3px; } .volta { margin-top: 40px; font-size: 13px; font-weight: 700; letter-spacing: 1.6px; } .volta a { text-decoration: none; border-bottom: 2px solid var(--amarelo); } /* ------------------------------------------------------------ formulário */ .formulario { display: grid; gap: 20px; } .campo { display: grid; gap: 7px; } .campo label { font-size: 12px; font-weight: 700; letter-spacing: 1.6px; } .campo .dica { margin: 0; color: var(--neutro); font-size: 12px; font-weight: 400; letter-spacing: 0; } input, textarea, select { font: inherit; color: inherit; padding: 13px 14px; border: 1px solid var(--campo-borda); border-radius: 7px; background: var(--campo-fundo); } textarea { resize: vertical; line-height: 1.55; } .formulario .botao { justify-self: start; } .formulario .acoes { gap: 10px; } .aviso { margin: 0; font-size: 14px; font-weight: 600; min-height: 22px; } .aviso.erro { color: var(--erro); } .aviso.ok { color: var(--texto-2); } .tabela { width: 100%; border-collapse: collapse; font-size: 14.5px; } .tabela th { text-align: left; font-size: 11.5px; letter-spacing: 1.6px; border-bottom: 2px solid var(--fio); padding: 10px 8px; } .tabela td { border-bottom: 1px solid var(--borda); padding: 12px 8px; vertical-align: top; } .marcador { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; } .marcador.rascunho { color: var(--marcador-texto); background: var(--marcador-fundo); padding: 3px 7px; border-radius: 4px; } .marcador.publicado { color: var(--texto-2); } .acoes-linha { display: flex; gap: 14px; } .link { border: 0; background: none; padding: 0; cursor: pointer; font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-decoration: underline; color: var(--texto); } .link.perigo { color: var(--erro); } .recados { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; } .recados li { border-top: 1px solid var(--borda); padding-top: 14px; } .recados .data { margin: 0 0 4px; color: var(--neutro); font-size: 12px; letter-spacing: 1.2px; } .recados .assunto { margin: 0 0 6px; font-weight: 700; } .recados .recado { margin: 0; white-space: pre-wrap; color: var(--texto-2); } /* ---------------------------------------------------------------- rodapé */ .rodape { background: var(--bloco-escuro); color: var(--bloco-escuro-suave); padding: 48px 0 34px; } .rodape-interno { display: flex; justify-content: space-between; gap: 34px; flex-wrap: wrap; width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 24px; } .rodape p { margin: 0 0 4px; font-size: 13px; } .rodape-marca { color: var(--bloco-escuro-texto); font-weight: 800; letter-spacing: 3px; font-size: 16px !important; } .rodape-credito { margin-top: 12px !important; font-size: 12px !important; } .rodape nav { display: grid; gap: 9px; align-content: start; } .rodape nav a, .rodape nav .tema { text-decoration: none; font-size: 12.5px; font-weight: 600; letter-spacing: 1.4px; color: inherit; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; font-family: inherit; } .rodape nav a:hover, .rodape nav .tema:hover { color: var(--bloco-escuro-texto); } .rodape nav .tema { margin-top: 8px; border-top: 1px solid #3A464E; padding-top: 12px; } .rodape-nota { width: 100%; max-width: var(--largura); margin: 34px auto 0; padding: 18px 24px 0; border-top: 1px solid #3A464E; font-size: 11.5px !important; line-height: 1.6; } /* ------------------------------------------------------------ responsivo */ @media (max-width: 860px) { .grade-posts { grid-template-columns: 1fr; } .sistema { grid-template-columns: 1fr; gap: 34px; } .capa h1 { font-size: 34px; } /* O br some, mas o espaço que vem depois dele no código continua lá — sem isso, "NA" e "INFRAESTRUTURA" viravam uma palavra só. */ .capa h1 br { display: none; } .cabecalho-pagina h1, .artigo h1 { font-size: 30px; } .post-cartao.destaque h3 { font-size: 26px; } .topo-interno { padding: 14px 20px; } .menu { gap: 16px; } .bloco { padding: 48px 0; } .capa { padding: 56px 0 64px; } } @media (max-width: 640px) { .topo-interno { padding: 13px 18px; gap: 12px; } .menu { gap: 15px; } .menu a { font-size: 11.5px; letter-spacing: 1px; } .botao-topo { padding: 8px 12px; } .marca-assinatura { width: 196px; } } @media (max-width: 520px) { .dentro { padding: 0 18px; } .corpo { font-size: 16.5px; } .capa h1 { font-size: 29px; } .cabecalho-pagina h1, .artigo h1 { font-size: 26px; } .capa { padding: 44px 0 52px; } .faixa-numeros .dentro { gap: 22px; } } /* ------------------------------------------- versão 1.3: imagens e editor */ .corpo img { max-width: 100%; height: auto; border-radius: 6px; } .corpo figure { margin: 18px 0; } .corpo figure.centro { text-align: center; } .corpo figure.esq { float: left; max-width: 46%; margin: 4px 22px 12px 0; } .corpo figure.dir { float: right; max-width: 46%; margin: 4px 0 12px 22px; } .corpo figcaption { font-size: 13px; color: var(--neutro); margin-top: 6px; } .corpo h3 { font-size: 19px; margin: 26px 0 10px; } .corpo ol { margin: 0 0 16px; padding-left: 22px; } .corpo hr { border: 0; border-top: 1px solid var(--borda); margin: 26px 0; } .corpo u { text-decoration: underline; } .corpo::after { content: ""; display: block; clear: both; } .capa-post { margin: 0 0 26px; } .capa-post img { width: 100%; height: auto; border-radius: 8px; display: block; } .post-cartao .capa-cartao { display: block; margin: 0 0 12px; } .post-cartao .capa-cartao img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; display: block; } .editor { min-height: 320px; padding: 14px 16px; background: var(--campo-fundo); border: 1px solid var(--campo-borda); border-radius: 0 0 6px 6px; outline: none; } .editor:focus { border-color: var(--foco); } .editor p { margin: 0 0 12px; } .barra-editor { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 6px; background: var(--fundo-2); border: 1px solid var(--campo-borda); border-bottom: 0; border-radius: 6px 6px 0 0; } .barra-editor button { min-width: 34px; height: 32px; padding: 0 8px; background: var(--campo-fundo); color: var(--texto); border: 1px solid var(--campo-borda); border-radius: 4px; font: inherit; font-size: 13px; cursor: pointer; } .barra-editor button:hover { border-color: var(--texto-2); } .barra-editor .sep { width: 1px; height: 22px; background: var(--borda); margin: 0 4px; } .caixa-link, .caixa-imagem { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; background: var(--fundo-2); border: 1px solid var(--campo-borda); border-bottom: 0; } .caixa-link input, .caixa-imagem input, .caixa-imagem select { flex: 1 1 200px; min-height: 36px; padding: 6px 10px; font: inherit; background: var(--campo-fundo); color: var(--texto); border: 1px solid var(--campo-borda); border-radius: 4px; } .botao.pequeno { padding: 7px 12px; font-size: 11px; } .capa-editor { display: grid; gap: 10px; } .capa-editor img { max-width: 320px; height: auto; border-radius: 6px; border: 1px solid var(--borda); } .capa-acoes { display: grid; gap: 8px; } .capa-acoes input[type="text"] { min-height: 40px; padding: 8px 10px; font: inherit; background: var(--campo-fundo); color: var(--texto); border: 1px solid var(--campo-borda); border-radius: 4px; } .oculto { display: none !important; } /* Sobre mim: texto justificado, sem hifenização (nenhuma palavra partida). */ .texto-sobre p { text-align: justify; hyphens: manual; -webkit-hyphens: manual; }