/** * Estilos próprios da página. Tudo o que o Bootstrap já resolve não está aqui. * * Carregado DEPOIS do ../assets/css/style1.css, para estas regras ganharem. */ /* ── Alinhamento com a identidade do site ────────────────────────── */ /* A barra de navegação do nav.html é .fixed-top, ou seja, sai do fluxo da página e taparia o início do conteúdo. As outras páginas do site resolvem-no com style="padding-top: 5rem" no ; fica aqui em vez de no HTML por ser estilo, e para haver um só sítio a mudar se a altura da barra mudar. */ body { padding-top: 5rem; } /* O style1.css só aplica a fonte Meta Pro a p, body e h3 — os restantes títulos ficariam com a fonte por omissão do Bootstrap, que é o que fazia esta página parecer de outro site. */ h1, h2, h3, h4, h5, h6, .card-header, .btn, .form-label { font-family: 'Meta Pro', sans-serif; } /* Os cabeçalhos de cartão do site são discretos e em maiúsculas pequenas. */ .card-header h3 { letter-spacing: .02em; } /* Os números grandes dos indicadores ficam melhor na variante pesada da fonte, como nos cartões das outras páginas. */ .indicador-valor { font-family: 'Meta Pro', sans-serif; font-weight: 900; } /* ── Campo de pesquisa com sugestões ─────────────────────────────── */ .campo-pesquisa { position: relative; } .sugestoes { position: absolute; z-index: 1050; top: calc(100% + 2px); left: 0; right: 0; max-height: 20rem; overflow-y: auto; margin: 0; padding: 0; list-style: none; background: #fff; border: 1px solid #dee2e6; border-radius: .5rem; box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1); } .sugestao { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .5rem .75rem; cursor: pointer; border-bottom: 1px solid #f1f3f5; } .sugestao:last-child { border-bottom: 0; } .sugestao:hover, .sugestao:focus { background: #f8f9fa; } .sugestao-nome { font-size: .95rem; line-height: 1.25; } .sugestao-codigo { flex: 0 0 auto; font-size: .8rem; color: #6c757d; font-variant-numeric: tabular-nums; } .sugestao-vazia { padding: .75rem; color: #6c757d; font-size: .9rem; } /* ── Indicadores ─────────────────────────────────────────────────── */ .grelha-indicadores { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 768px) { .grelha-indicadores { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ── Cartões dos resultados nacionais ────────────────────────────── */ /* Mesma anatomia dos .card-stat do concursos_26_27.html: ícone em quadrado arredondado à esquerda, rótulo em maiúsculas, número grande, e uma nota com a etiqueta do ano letivo. Aqui em CSS próprio porque lá está embutido na página. */ .grelha-cartoes { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 576px) { .grelha-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1200px) { .grelha-cartoes { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .cartao-nacional { display: flex; align-items: flex-start; gap: 1rem; padding: 1.25rem; background: #fff; border-radius: 16px; box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075); transition: transform .2s ease, box-shadow .2s ease; } .cartao-nacional:hover { transform: translateY(-3px); box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .1); } .cartao-icone { flex: 0 0 auto; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 14px; font-size: 1.25rem; } .cartao-info { min-width: 0; } .cartao-rotulo { font-family: 'Meta Pro', sans-serif; font-weight: 900; font-size: .78rem; letter-spacing: .03em; text-transform: uppercase; color: #4a5057; margin-bottom: .35rem; } .cartao-valor { font-family: 'Meta Pro', sans-serif; font-weight: 900; font-size: 2rem; line-height: 1.1; color: #212529; font-variant-numeric: tabular-nums; } .cartao-sufixo { font-size: .95rem; color: #6c757d; } .cartao-nota { margin-top: .35rem; font-size: .78rem; color: #6c757d; } .cartao-nota .badge { font-size: .7rem; } /* Tons dos ícones, alinhados com os da página em produção. */ .cor-ambar { background: #fdf0d5; color: #b8860b; } .cor-azul { background: #dbe7fb; color: #2f6fb3; } .cor-verde { background: #d9efdd; color: #1f7a37; } .cor-ciano { background: #d5eef1; color: #17798a; } .cor-laranja { background: #fde3d1; color: #c25a12; } .cor-rosa { background: #fbdde3; color: #b3325a; } .cor-violeta { background: #e5ddf7; color: #6a3fb0; } /* Esqueleto enquanto os números não chegam. */ .cartao-vazio { box-shadow: none; background: #f8f9fa; } .cartao-vazio:hover { transform: none; box-shadow: none; } .cartao-vazio .cartao-icone { background: #e9ecef; } .cartao-vazio .cartao-rotulo, .cartao-vazio .cartao-valor { background: #e9ecef; border-radius: 4px; color: transparent; } .cartao-vazio .cartao-rotulo { width: 70%; } .cartao-vazio .cartao-valor { width: 45%; height: 2rem; margin-top: .35rem; } /* ── Gráfico ─────────────────────────────────────────────────────── */ /* Altura fixa no contentor: sem isto, o Chart.js com maintainAspectRatio desligado cresce indefinidamente a cada redimensionamento. */ .grafico-caixa { position: relative; height: 18rem; } @media (min-width: 768px) { .grafico-caixa { height: 22rem; } } /* ── Diversos ────────────────────────────────────────────────────── */ .marca-cor { display: inline-block; width: .65rem; height: .65rem; border-radius: 50%; margin-right: .5rem; vertical-align: baseline; } .smaller { font-size: .78rem; } table td, table th { font-variant-numeric: tabular-nums; }