/* ============================================================================ componentes.css — Componentes reutilizáveis do portal Referência: DES.md §5. Cobre §5.4 e §5.5 (card de serviço e chips), §5.6 a §5.9 (portais, notícias, telefones e FAQ), §5.10 (rodapé), além dos blocos de dados institucionais, mapa e contato. Carrega assíncrono na home. A barra de acessibilidade (§5.1), o cabeçalho (§5.2) e os flutuantes (§5.11) moram em critico.css, embutido no . ========================================================================= */ /* ============================================================================ §5.4 Card de serviço — componente principal da grade Estrutura: o card é um contêiner posicionado; .card-servico__link cobre a área inteira por um ::after esticado, o que mantém "card todo clicável" sem aninhar links. O "Saiba mais" fica acima dessa camada. ========================================================================= */ .card-servico { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--esp-3); height: 100%; padding: var(--esp-4); text-align: center; background: var(--cor-superficie); border: 1px solid var(--cor-borda-sutil); border-radius: var(--raio-card); box-shadow: var(--sombra-1); transition: transform var(--transicao-padrao), box-shadow var(--transicao-padrao), border-color var(--transicao-padrao); } /* Bloco do ícone: o canto único arredondado da marca (DES §4.5). Dimensões em rem para acompanhar o controle A+ / A / A−. */ .card-servico__icone { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 5rem; height: 5rem; font-size: 2.25rem; color: var(--cor-primaria); background: var(--sn-azul-100); border-radius: var(--raio-marca); transition: background-color var(--transicao-padrao), color var(--transicao-padrao); } .card-servico__link { font-family: var(--fonte-display); font-weight: var(--peso-titulo); font-size: var(--txt-card-p); line-height: 1.25; color: var(--cor-primaria); text-decoration: none; } /* O corte de linhas fica no , e não no : o overflow do link interferiria no ::after que cobre o card. */ .card-servico__rotulo { /* 3 linhas, e não 2 como no rascunho do DES: em 2 colunas (< 576 px) "Nota Fiscal de Serviços (NFS-e)" ocupa 3 linhas e seria truncado. */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Área clicável do card inteiro. */ .card-servico__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .card-servico__saiba { position: relative; /* acima do ::after esticado */ z-index: 1; margin-top: auto; font-size: var(--txt-micro); color: var(--cor-texto-suave); text-decoration: underline; } .card-servico__saiba:hover { color: var(--cor-primaria); } /* Indicador de nova aba (variante .card-servico--externo). */ .card-servico__externo { position: absolute; top: var(--esp-2); right: var(--esp-2); font-size: .75rem; color: var(--cor-texto-suave); } /* --- Estados --------------------------------------------------------------- */ .card-servico:hover, .card-servico:has(.card-servico__link:focus-visible) { transform: translateY(-6px); box-shadow: var(--sombra-2); border-color: var(--cor-acento); } .card-servico:hover .card-servico__icone, .card-servico:has(.card-servico__link:focus-visible) .card-servico__icone { background: var(--sn-verde-100); } /* O foco por teclado contorna o card, não o texto do link. */ .card-servico:has(:focus-visible) { outline: var(--foco-espessura) solid var(--foco-cor); outline-offset: var(--foco-deslocamento); } @supports selector(:has(*)) { .card-servico__link:focus-visible { outline: none; } } /* --- Variante de destaque: IPTU e NFS-e (DES §5.4) -------------------------- */ .card-servico--destaque { border: 2px solid var(--sn-amarelo); } .card-servico--destaque .card-servico__icone { color: var(--sn-grafite); background: var(--sn-amarelo); } /* No destaque o amarelo permanece no hover: é o que identifica o serviço. */ .card-servico--destaque:hover .card-servico__icone, .card-servico--destaque:has(.card-servico__link:focus-visible) .card-servico__icone { background: var(--sn-amarelo); } /* ============================================================================ §5.5 Chips de filtro ========================================================================= */ .chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--esp-2); margin-bottom: var(--esp-5); } .chip { display: inline-flex; align-items: center; gap: var(--esp-1); min-height: 40px; padding: var(--esp-2) var(--esp-4); font-family: var(--fonte-display); font-weight: var(--peso-titulo); font-size: var(--txt-card-p); line-height: 1.2; color: var(--cor-texto); background: var(--cor-superficie); border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-pill); transition: background-color var(--transicao-rapida), border-color var(--transicao-rapida), color var(--transicao-rapida); } .chip:hover { color: var(--cor-primaria); border-color: var(--cor-primaria); } .chip[aria-pressed="true"] { color: var(--sn-branco); background: var(--cor-primaria); border-color: var(--cor-primaria); } .chip__contagem { font-family: var(--fonte-corpo); font-weight: var(--peso-corpo); color: var(--cor-texto-suave); } .chip[aria-pressed="true"] .chip__contagem { color: rgba(255, 255, 255, .85); } /* ============================================================================ §5.6 Card de portal (largo) Horizontal em desktop, empilhado em mobile. Faixa superior de 6 px em verde e botão "Acessar" que também cobre o card inteiro. ========================================================================= */ .card-portal { position: relative; display: flex; align-items: center; gap: var(--esp-4); height: 100%; padding: var(--esp-5); background: var(--cor-superficie); border: 1px solid var(--cor-borda-sutil); border-top: 6px solid var(--sn-verde-claro); border-radius: var(--raio-card); box-shadow: var(--sombra-1); transition: transform var(--transicao-padrao), box-shadow var(--transicao-padrao); } .card-portal:hover, .card-portal:has(.card-portal__acao:focus-visible) { transform: translateY(-4px); box-shadow: var(--sombra-2); } .card-portal__icone { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 3.5rem; /* 56 px na escala padrão */ height: 3.5rem; font-size: 1.75rem; color: var(--cor-primaria); background: var(--sn-azul-100); border-radius: var(--raio-marca); } .card-portal__texto { flex: 1 1 auto; } .card-portal__titulo { margin-bottom: var(--esp-1); font-size: var(--txt-card-g); font-weight: var(--peso-titulo); } .card-portal__descricao { /* 2 linhas (DES §5.6); acima disso o card perde o alinhamento da faixa. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--txt-card-p); color: var(--cor-texto-suave); } .card-portal__acao { flex: 0 0 auto; } /* Mesmo recurso do card de serviço: um único link, esticado sobre o card. */ .card-portal__acao::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .card-portal:has(.card-portal__acao:focus-visible) { outline: var(--foco-espessura) solid var(--foco-cor); outline-offset: var(--foco-deslocamento); } @supports selector(:has(*)) { .card-portal__acao:focus-visible { outline: none; } } @media (max-width: 767.98px) { .card-portal { flex-direction: column; align-items: flex-start; text-align: left; } .card-portal__acao { align-self: stretch; } } /* ============================================================================ §5.7 Card de notícia ========================================================================= */ .card-noticia { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--cor-superficie); border: 1px solid var(--cor-borda-sutil); border-radius: var(--raio-card); box-shadow: var(--sombra-1); transition: transform var(--transicao-padrao), box-shadow var(--transicao-padrao); } .card-noticia:hover, .card-noticia:has(.card-noticia__link:focus-visible) { transform: translateY(-5px); box-shadow: var(--sombra-2); } .card-noticia__figura { display: block; } .card-noticia__capa { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } /* Sem imagem: bloco de cor da identidade com pictograma (DES §5.7). */ .card-noticia__capa--vazia { display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--sn-branco); background: linear-gradient(135deg, var(--sn-azul) 0%, var(--sn-verde-escuro) 100%); } .card-noticia__corpo { display: flex; flex-direction: column; flex: 1 1 auto; gap: var(--esp-2); padding: var(--esp-4); } .card-noticia__data { font-size: var(--txt-micro); color: var(--cor-texto-suave); } .card-noticia__titulo { font-size: var(--txt-card-p); line-height: 1.3; } .card-noticia__link { color: var(--cor-primaria); text-decoration: none; } /* Corte em 3 linhas no , que é o elemento com o texto do título. */ .card-noticia__link { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .card-noticia__link::after { content: ""; position: absolute; inset: 0; } .card-noticia__resumo { font-size: var(--txt-micro); color: var(--cor-texto-suave); } .card-noticia__leia { margin-top: auto; font-family: var(--fonte-display); font-weight: var(--peso-titulo); font-size: var(--txt-micro); color: var(--cor-primaria); } .card-noticia:has(.card-noticia__link:focus-visible) { outline: var(--foco-espessura) solid var(--foco-cor); outline-offset: var(--foco-deslocamento); } @supports selector(:has(*)) { .card-noticia__link:focus-visible { outline: none; } } /* ============================================================================ §7.4 Dados institucionais ========================================================================= */ .dados { display: grid; gap: var(--esp-4); margin: 0; padding: var(--esp-5); background: var(--cor-superficie); border: 1px solid var(--cor-borda-sutil); border-radius: var(--raio-card); box-shadow: var(--sombra-1); } .dados__item { display: grid; gap: var(--esp-1); } .dados__rotulo { font-family: var(--fonte-display); font-weight: var(--peso-titulo); font-size: var(--txt-micro); text-transform: uppercase; letter-spacing: .04em; color: var(--cor-texto-suave); } .dados__rotulo .icone { color: var(--cor-primaria); } .dados__valor { margin: 0; } /* ============================================================================ §5.8 Lista de telefones com filtro ========================================================================= */ .telefones { padding: var(--esp-5); background: var(--cor-superficie); border: 1px solid var(--cor-borda-sutil); border-radius: var(--raio-card); box-shadow: var(--sombra-1); } .telefones__busca { position: relative; margin-bottom: var(--esp-4); } .telefones__busca > .icone { position: absolute; top: 50%; left: var(--esp-4); transform: translateY(-50%); color: var(--cor-texto-suave); pointer-events: none; } .telefones__campo { width: 100%; min-height: 48px; padding: var(--esp-2) var(--esp-4) var(--esp-2) var(--esp-8); color: var(--cor-texto); background: var(--cor-superficie); border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-pill); } .telefones__campo:focus { border-color: var(--cor-primaria); outline: none; } .telefones__campo:focus-visible { outline: var(--foco-espessura) solid var(--foco-cor); outline-offset: 1px; } .telefones__lista { display: grid; gap: var(--esp-2); } /* Em desktop a lista rola dentro do próprio bloco (DES §5.8). */ @media (min-width: 992px) { .telefones__lista { max-height: 480px; overflow-y: auto; padding-right: var(--esp-2); } } .telefone { display: flex; align-items: center; gap: var(--esp-3); padding: var(--esp-2); border-radius: var(--raio-card); transition: background-color var(--transicao-rapida); } .telefone:hover { background: var(--sn-azul-100); } .telefone[hidden] { display: none; } .telefone__icone { flex: 0 0 auto; width: 36px; height: 36px; font-size: .875rem; } .telefone__dados { display: grid; gap: 0; } .telefone__numero { font-family: var(--fonte-display); font-weight: var(--peso-titulo); color: var(--cor-primaria); text-decoration: none; } .telefone__numero:hover { text-decoration: underline; } .telefone__setor { font-size: var(--txt-micro); color: var(--cor-texto-suave); } .telefones__vazio { padding: var(--esp-5) 0 var(--esp-2); color: var(--cor-texto-suave); text-align: center; } .telefones__vazio[hidden] { display: none; } /* ============================================================================ Mapa carregado sob demanda (DES §8.2) ========================================================================= */ .mapa { overflow: hidden; background: var(--cor-superficie); border: 1px solid var(--cor-borda-sutil); border-radius: var(--raio-card); box-shadow: var(--sombra-1); } .mapa__placeholder { display: grid; justify-items: center; gap: var(--esp-3); padding: var(--esp-8) var(--esp-4); text-align: center; } .mapa__icone { font-size: 2.5rem; color: var(--cor-primaria); } .mapa__texto { max-width: 52ch; font-size: var(--txt-card-p); color: var(--cor-texto-suave); } .mapa__acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--esp-3); } .mapa__quadro { display: block; width: 100%; height: 380px; border: 0; } /* ============================================================================ §5.9 FAQ (acordeão) ========================================================================= */ .faq { max-width: 800px; margin-inline: auto; } .faq__item { margin-bottom: var(--esp-3); background: var(--cor-superficie); border: 1px solid var(--cor-borda-sutil); border-radius: var(--raio-card); box-shadow: var(--sombra-1); overflow: hidden; } .faq__cabeca { margin: 0; font-size: inherit; } .faq__pergunta { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-4); width: 100%; padding: var(--esp-4); text-align: left; color: var(--cor-primaria); background: transparent; border: 0; font-family: var(--fonte-display); font-weight: var(--peso-titulo); font-size: var(--txt-card-g); line-height: 1.3; } .faq__pergunta:hover { background: var(--sn-azul-100); } .faq__chevron { flex: 0 0 auto; font-size: .875rem; transition: transform var(--transicao-padrao); } .faq__pergunta[aria-expanded="true"] .faq__chevron { transform: rotate(180deg); } .faq__resposta { padding: 0 var(--esp-4) var(--esp-4); color: var(--cor-texto); } .faq__resposta[hidden] { display: none; } /* ============================================================================ Cards de contato ========================================================================= */ .card-contato { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-3); height: 100%; padding: var(--esp-5); background: var(--cor-superficie); border: 1px solid var(--cor-borda-sutil); border-radius: var(--raio-card); box-shadow: var(--sombra-1); } .card-contato__icone { width: 3rem; height: 3rem; font-size: 1.25rem; } .card-contato__titulo { font-size: var(--txt-card-g); } .card-contato__corpo a { font-family: var(--fonte-display); font-weight: var(--peso-titulo); } .card-contato__nota { font-size: var(--txt-micro); color: var(--cor-texto-suave); } /* ============================================================================ Lista de legislação (seção #legislacao) Um link por linha: bloco de ícone da marca, título da lei e ação "Acessar". Segue o padrão do item de telefone (§5.8), mas sem rolagem interna. ========================================================================= */ /* O seletor é `ul.leis`, e não `.leis`: o reset `ul[class]` de base.css tem especificidade (0,1,1) e venceria o margin-inline de uma classe pura — a lista ficava encostada à esquerda apesar do `auto`. */ ul.leis { display: grid; gap: var(--esp-3); max-width: 800px; margin-inline: auto; } .leis__link { display: flex; align-items: center; flex-wrap: wrap; gap: var(--esp-3); padding: var(--esp-3) var(--esp-4); color: var(--cor-texto); text-decoration: none; background: var(--cor-superficie); border: 1px solid var(--cor-borda-sutil); border-radius: var(--raio-card); box-shadow: var(--sombra-1); transition: transform var(--transicao-padrao), box-shadow var(--transicao-padrao), border-color var(--transicao-padrao); } /* Mesmo gesto dos cards de serviço e portal: levanta e acende a borda. */ .leis__link:hover { transform: translateY(-2px); border-color: var(--cor-acento); box-shadow: var(--sombra-2); } .leis__icone { flex: 0 0 auto; width: 36px; height: 36px; font-size: .875rem; } .leis__titulo { flex: 1 1 24ch; } /* A ação é um pill de verdade, não só texto — lê-se como botão. */ .leis__acao { display: inline-flex; align-items: center; gap: var(--esp-1); flex: 0 0 auto; margin-left: auto; padding: var(--esp-1) var(--esp-3); font-family: var(--fonte-display); font-weight: var(--peso-titulo); font-size: var(--txt-micro); color: var(--cor-primaria); white-space: nowrap; border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-pill); transition: color var(--transicao-rapida), border-color var(--transicao-rapida); } .leis__link:hover .leis__acao { color: var(--sn-branco); background: var(--cor-primaria); border-color: var(--cor-primaria); } /* ============================================================================ §5.10 Rodapé ========================================================================= */ .rodape { padding-top: var(--esp-8); color: var(--sn-branco); background: var(--sn-azul-900); } .rodape__logo { height: var(--altura-logo); width: auto; margin-bottom: var(--esp-4); } .rodape__texto { font-size: var(--txt-card-p); color: rgba(255, 255, 255, .85); } .rodape__titulo { margin-bottom: var(--esp-4); font-size: var(--txt-card-g); font-weight: var(--peso-titulo); color: var(--sn-branco); } .rodape__lista { display: grid; gap: var(--esp-2); } .rodape__lista a, .rodape__redes a { color: rgba(255, 255, 255, .9); text-decoration: none; } .rodape__lista a:hover, .rodape__redes a:hover { color: var(--sn-branco); text-decoration: underline; } .rodape__lista--contato li { display: grid; grid-template-columns: 20px 1fr; gap: var(--esp-2); align-items: start; font-size: var(--txt-card-p); } .rodape__lista--contato .icone { margin-top: .3em; color: var(--cor-destaque); } .rodape__endereco { color: rgba(255, 255, 255, .9); } .rodape__redes { display: flex; gap: var(--esp-3); margin-top: var(--esp-4); font-size: 1.125rem; } .rodape__base { margin-top: var(--esp-6); padding: var(--esp-4) 0; border-top: 1px solid rgba(255, 255, 255, .15); font-size: var(--txt-micro); color: rgba(255, 255, 255, .8); } .rodape :focus-visible { outline-color: var(--sn-branco); }