/* ============================================================
CORES DO PORTAL DO CIDADÃO
------------------------------------------------------------
Fonte única das cores. Antes disto os mesmos valores estavam
repetidos em doze páginas — e já tinham divergido: mz/carteira
usava #12325C onde as outras usavam #002E64.
Houve aqui quatro paletas trocáveis por `data-tema` no
(padrão, alto contraste, institucional, escuro), comandadas pela
barra de acessibilidade no topo. O cliente dispensou a troca de
cores: ficou só o verde gov.mz, e as três variantes saíram com o
selector que as ligava. Estão no histórico do git se voltarem.
Regra ao mexer nisto: nunca escrever uma cor directamente numa
página — se faltar um token, acrescenta-se aqui.
============================================================ */
:root {
/* marca — redesign UI (Portal do Cidadão · refactoring 2026)
Um verde de acção (#146B3A), superfície institucional (#0B3B24),
ponto dourado da marca (#F0A81F). Grelha de 8 px · raio 10 px. */
--mz-verde: #146B3A;
--mz-verde-esc: #0B3B24;
--mz-verde-vivo: #146B3A;
--mz-azul: #1D5FA8;
--mz-amarelo: #F0A81F;
--mz-bandeira-preto: #10231A;
--mz-bandeira-vermelho: #C0392B;
/* texto por cima de uma cor de marca. A marca é superfície escura nas
quatro paletas, por isso este token é branco nas quatro — existe para
que uma paleta futura o possa inverter sem partir as páginas. */
--tinta-marca: #ffffff;
/* superfícies */
--papel: #ffffff;
--fundo: #EEF1EE;
--fundo-2: #EEF1EE;
/* tinta */
--tinta: #10231A;
--tinta-2: #374A3E;
--tinta-3: #5B6B60;
/* #6E7C73: placeholder / muted; passa WCAG sobre branco. */
--cinza: #6E7C73;
--cinza-2: #8A9990;
/* traços */
--linha-suave: #F7FAF8;
--linha: #E7ECE7;
--linha-2: #DCE3DC;
--linha-forte: #C9D3CB;
/* tintas de marca */
--verde-fundo: #EDF6F0;
--verde-fundo-2: #F7FCF9;
--verde-linha: #C6E0D0;
--azul-fundo: #F0F6FB;
/* tipografia do redesign */
--fonte-titulo: "Archivo", "Titillium Web", system-ui, sans-serif;
--fonte-corpo: "Public Sans", "Noto Sans", system-ui, sans-serif;
--fonte-mono: "IBM Plex Mono", ui-monospace, monospace;
--raio-campo: 8px;
--altura-campo: 48px;
/* estados */
--ambar: #e6a700;
--ambar-texto: #886b00;
--ambar-fundo: #fff4d6;
--ambar-fundo-2: #fff8e6;
--ambar-linha: #f0d17a;
--vermelho: #c0392b;
--vermelho-esc: #a5281b;
--vermelho-fundo: #fbe4e1;
}
/* ---------- ponte para as variáveis do tema ----------
O tema govmz tem o seu próprio sistema (--gz-*), definido em style.all.css.
Como esta folha carrega depois, redefini-lo aqui faz o tema inteiro seguir
as nossas cores — sem tocar num único ficheiro de terceiros e sem perseguir
selectores um a um. Foi assim que os botões do Bootstrap, como o
«Pesquisar», deixaram de destoar da marca.
A escala de verdes colapsa nos três tons de marca, e --mz-verde-esc é
sempre mais escuro do que --mz-verde: o que é superfície mantém-se
superfície. */
:root {
--gz-verde-50: var(--verde-fundo-2);
--gz-verde-100: var(--verde-linha);
--gz-verde-500: var(--mz-verde-vivo);
--gz-verde-600: var(--mz-verde);
--gz-verde-700: var(--mz-verde-esc);
--gz-verde-800: var(--mz-verde-esc);
--gz-verde-900: var(--mz-verde-esc);
--gz-cinza-50: var(--fundo);
--gz-cinza-100: var(--linha-suave);
--gz-cinza-200: var(--linha);
--gz-cinza-300: var(--linha-forte);
--gz-cinza-600: var(--tinta-3);
--gz-tinta: var(--tinta);
--gz-amarelo: var(--mz-amarelo);
--gz-info: var(--mz-azul);
--gz-alerta: var(--ambar-texto);
}
/* O Bootstrap pinta com as suas próprias variáveis; sem isto, tabelas, listas
e componentes que não estejam explicitamente sobrepostos aqui ficariam com
fundo branco no tema escuro. */
:root {
--bs-body-bg: var(--fundo);
--bs-body-color: var(--tinta);
--bs-border-color: var(--linha);
--bs-secondary-color: var(--cinza);
--bs-emphasis-color: var(--tinta);
--bs-link-color: var(--mz-verde);
--bs-link-hover-color: var(--mz-verde-esc);
}
body {
font-family: var(--fonte-corpo);
color: var(--tinta);
background: var(--fundo);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6,
.gz-titulo, .marca-nome, .marca-moz {
font-family: var(--fonte-titulo);
}
code, kbd, .font-mono, .otp-digitos input {
font-family: var(--fonte-mono);
}
/* Wordmark tipográfico + faixa da bandeira */
.marca-moz {
font-family: var(--fonte-titulo);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1;
color: var(--mz-verde-esc);
}
.marca-moz-ponto { color: var(--mz-amarelo); }
.marca-moz--neg { color: var(--tinta-marca); }
.marca-moz--neg .marca-moz-ponto { color: var(--mz-amarelo); }
.mz-faixa-bandeira {
display: flex;
height: 4px;
width: 100%;
}
.mz-faixa-bandeira > span { display: block; height: 100%; }
.mz-faixa-verde { flex: 3; background: var(--mz-verde); }
.mz-faixa-preto { flex: 1; background: var(--mz-bandeira-preto); }
.mz-faixa-amarelo { flex: 1; background: var(--mz-amarelo); }
.mz-faixa-vermelho { flex: 1; background: var(--mz-bandeira-vermelho); }
/* O logótipo é uma versão positiva, feita para fundo claro. */
/* ---------- selo de estado ----------
A cor sozinha não chega: cerca de 8% dos homens não distingue
vermelho de verde, e para essas pessoas «Concluído» e «Indeferido»
eram o mesmo selo. O ícone e o contorno resolvem-no em qualquer
paleta, e também num ecrã a preto e branco ou impresso. */
.selo-estado {
display: inline-flex; align-items: center; gap: .35rem;
padding: .22rem .6rem; border-radius: 2rem;
font-size: .78rem; font-weight: 700; white-space: nowrap;
border: 1px solid transparent;
}
.selo-estado::before { font-weight: 900; font-size: .9em; line-height: 1; }
.selo-estado.e-concluido { background: var(--verde-fundo); color: var(--mz-verde); border-color: var(--verde-linha); }
.selo-estado.e-concluido::before { content: "\2713"; }
.selo-estado.e-analise { background: var(--azul-fundo); color: var(--mz-azul); border-color: var(--mz-azul); }
.selo-estado.e-analise::before { content: "\21BB"; }
.selo-estado.e-pendente { background: var(--ambar-fundo); color: var(--ambar-texto); border-color: var(--ambar-linha); }
.selo-estado.e-pendente::before { content: "\0021"; }
.selo-estado.e-indeferido { background: var(--vermelho-fundo); color: var(--vermelho-esc); border-color: var(--vermelho); }
.selo-estado.e-indeferido::before { content: "\2715"; }
.selo-estado.e-submetido { background: var(--fundo-2); color: var(--tinta-3); border-color: var(--linha-forte); }
.selo-estado.e-submetido::before { content: "\2192"; }
/* ---------- escolher paleta ---------- */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
/* GOVMZ */
.btn-outline-primary {
border-color: var(--mz-verde) !important;
color: var(--mz-verde) !important;
}
.btn-outline-primary:hover {
background: var(--mz-verde) !important;
color: var(--tinta-marca) !important;
}
.text-primary {
color: var(--mz-verde) !important;
}
.bg-primary {
background: var(--mz-verde) !important;
}
.btn-primary {
background: var(--mz-verde) !important;
border-color: var(--mz-verde) !important;
}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
background: var(--mz-verde) !important;
border-color: var(--mz-verde) !important;
}
.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover {
background: var(--mz-verde-esc) !important;
color: var(--tinta-marca) !important;
}
.btn-outline-primary:active,
.btn-outline-primary:focus,
.btn-outline-primary:hover {
background: var(--linha) !important;
color: var(--mz-verde) !important;
border: 1px solid var(--mz-verde) !important;
}
.float-right, .pull-right {
float: right !important;
}
.float-left , .pull-left {
float: left !important;
}
.linha_separadora {
margin: 3% 0;
}
/* áea reservada - gov - tabelas de serviço e pedidos/registos */
.table-sm {
font-size: 14px;
}
.dropdown-menu {
padding: 10px;
}
/* tabelas de serviço e pedidos/registos */
a.social i {
font-size: 20px;
vertical-align: middle;
}
.icons-topo i {
font-size: 20px;
vertical-align: middle;
margin: 0 0 0 2px;
}
a.idioma {
overlay: none;
}
.logo_footer {
max-height: 40px;
}
/*
eLoja
*/
.catalogo_eloja .grx__content{
padding-top:1%;
}
.catalogo_eloja .grx__wrapper{
margin: 2% auto;
}
.catalogo_eloja .eloja_header {
text-align: center;
}
.catalogo_eloja .eloja_header h1.titulo {
margin: 1% auto 2.5%;
font-size: 45px;
font-weight: 600;
letter-spacing: 1px;
color: var(--tinta);
}
.catalogo_eloja .eloja_header .subtitulo {
margin: 4% 0px 2%;
font-size: 30px;
font-weight: 500;
letter-spacing: 1px;
color: var(--tinta);
}
.catalogo_eloja .eloja_header .texto{
margin: 2% 0px 2.3%;
font-size: 30px;
font-weight: 500;
letter-spacing: 1px;
color: var(--tinta);
}
.catalogo_eloja .eloja_header h2.titulo {
margin: 4% 0px 2%;
font-size: 30px;
font-weight: 500;
letter-spacing: 1px;
color: var(--tinta);
}
.catalogo_eloja .texto,
.catalogo_eloja .slogan{
font-size: 35px;
font-weight: 300;
line-height: 1.11;
text-align: center;
color: var(--tinta);
margin: -20px auto 30px;
}
.catalogo_eloja .lista-produtos{
margin:auto -15px;
}
.catalogo_eloja .mosaico {
height: 285px;
overflow:hidden;
border-radius: 5px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.18);
background-color: var(--papel);
padding:15px;
cursor:default;
text-decoration: none;
box-sizing: border-box;
}
.catalogo_eloja .mosaico .url:hover{
text-decoration: none;
}
.catalogo_eloja .mosaico .titulo {
font-size: 22px;
font-weight: 500;
letter-spacing: -0.44px;
margin: 10px 0;
color: var(--tinta);
font-size: calc(18px + 0.3vw);
}
.catalogo_eloja .mosaico .subtitulo {
margin: 0px 0 25px;
font-size: calc(12px + 0.3vw);
line-height: 1.17;
color: var(--tinta);
}
.catalogo_eloja .mosaico .preco {
margin: 10px 0;
font-size: 22px;
font-weight: bold;
color: var(--tinta);
}
.catalogo_eloja .mosaico .sabermais {
margin: 15px 0;
font-size: 15px;
font-weight: 600;
line-height: 1.75;
color: var(--tinta);
cursor:pointer;
text-decoration: underline;
}
.catalogo_eloja .mosaico .icon {
margin: 20px 0 20px;
max-height:80px;
max-width:100%;
}
.catalogo_eloja .destaque_secundario {
background-color: var(--fundo);
text-align:center;
display: block;
padding:2% 0 4%;
}
.catalogo_eloja .destaque_secundario h3 {
padding:0 0 1%;
font-size: 30px;
font-weight: 600;
color: var(--tinta);
}
.catalogo_eloja .destaque_secundario p {
font-size: 23px;
line-height: 0.92;
letter-spacing: -0.44px;
text-align: center;
color: var(--tinta);
}
.catalogo_eloja .destaque_secundario iframe,
.catalogo_eloja .destaque_secundario frame,
.catalogo_eloja .destaque_secundario .video{
margin: 2% auto;
width:92%;
max-width:800px;
display:blok;
clear: both;
}
.catalogo_eloja .destaque_secundario a.button{
clear: both;
}
.destaques_eloja{
margin:4% auto !important;
backgroung:blue;
display: block;
}
.destaques_eloja .mosaico{
width: 390px;
height: 400px;
}
.destaques_eloja img{
width: 100%;
height: 300px;;
object-fit: cover;
}
.destaques_eloja .titulo{
margin:15px 0px 0px;
font-size: 20px;
font-weight: 600;
line-height: 0.92;
letter-spacing: -0.44px;
color: var(--tinta);
}
.destaques_eloja .subtitulo{
font-size: 16px;
color: var(--cinza-2);
font-weight: normal;
}
.destaques_eloja .sabermais{
font-size: 15px;
font-weight: 600;
line-height: 1.75;
color: var(--tinta);
}
.catalogo_separadores ul.menu_subcategorias,
.catalogo_separadores ul.menu_sub_subcategorias {
list-style: none;
text-align:center;
padding:0;
}
.catalogo_separadores ul.menu_subcategorias li,
.catalogo_separadores ul.menu_sub_subcategorias li {
display: inline-block;
margin:10px 20px;
}
.catalogo_separadores ul.menu_subcategorias li a,
.catalogo_separadores ul.menu_sub_subcategorias li a {
color:var(--cinza-2);
}
.catalogo_separadores ul.menu_subcategorias .active,
.catalogo_separadores ul.menu_sub_subcategorias .active {
color:var(--tinta);
}
.catalogo_separadores ul.menu_subcategorias li a {
font-size: 16px;
font-weight: 600;
}
.catalogo_separadores .artigo{
min-height: 450px;
}
.catalogo_separadores .artigo a{
text-decoration: none;
}
.catalogo_separadores .artigo .titulo{
font-size: 16px;
font-weight: 600;
height:30px;
}
.lista-produtos .card {
background-color: var(--fundo);
}
.compromisso_honra label{
text-align: justify;
font-size: 14px;
display: inline;
font-weight: normal;
cursor: pointer;
}
.termos_condicoes label{
text-align: justify;
font-size: 14px;
display: inline;
font-weight: normal;
cursor: pointer;
}
.catalogo_categoria .lista-produtos{
margin:auto -15px;
}
.catalogo_categoria .mosaico {
height: 285px;
overflow:hidden;
border-radius: 5px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.18);
background-color: var(--papel);
padding:15px;
cursor:default;
text-decoration: none;
box-sizing: border-box;
margin-bottom: 20px;
}
.catalogo_categoria .mosaico.categorias{
height: 245px;
}
.catalogo_categoria .mosaico .url:hover{
text-decoration: none;
}
.catalogo_categoria .mosaico .titulo {
font-size: 22px;
font-weight: 500;
letter-spacing: -0.44px;
margin: 10px 0;
color: var(--tinta);
font-size: calc(16px + 0.3vw);
/*height:70px;
overflow: hidden;*/
}
.catalogo_categoria .mosaico .subtitulo {
margin: 0px 0 25px;
font-size: calc(12px + 0.3vw);
line-height: 1.17;
color: var(--tinta);
}
.catalogo_categoria .mosaico .preco {
margin: 10px 0;
font-size: 22px;
font-weight: bold;
color: var(--tinta);
}
.catalogo_categoria .mosaico .sabermais {
margin: 15px 0;
font-size: 15px;
font-weight: 600;
line-height: 1.75;
color: var(--tinta);
cursor:pointer;
text-decoration: underline;
}
.catalogo_categoria .mosaico .icon {
margin: 20px 0 20px;
max-height:80px;
max-width:100%;
}
.table th:last-child,
.table td:last-child {
text-align: right;
}
.table td.truncate{
white-space: nowrap; text-overflow:ellipsis; overflow: hidden; max-width:1px;
}
.modal-dialog {
width:100% !important;
max-width: 90% !important;
}
@media(max-width: 560px){
.btn-group {
display: flex;
flex-direction: column;
}
.btn-group .btn {
margin: 2px 0;
border-radius: 0;;
}
}
/* novo estilo dos formulários -start */
.registos_editar .nav-tabs a.nav-link {
font-size: 14px;
text-transform: uppercase;
}
.registos_editar .nav-tabs a.nav-link.active {
background-color: var(--fundo);
}
.formulario legend,
.apresentacao legend{
font-size: 16px;
border-bottom: 1px solid var(--cinza);
padding-bottom: 10px;
margin-bottom: 20px;
font-weight: 600;
}
.formulario .grupo,
.apresentacao .grupo {
padding: 8% 10% 8%;
border-radius: 0px;
border: 1px solid var(--linha);
background-color: var(--papel);
}
.formulario .grupo i,
.apresentacao .grupo i{
color: var(--tinta-3);
font-size: 0.76em;
}
.formulario .grupo:empty,
.apresentacao .grupo:empty {
background-color: transparent;
border-color: transparent;
}
.formulario .separador,
.apresentacao .separador {
margin: 0px;
}
.formulario fieldset fieldset,
.apresentacao fieldset fieldset {
height: 100%;
}
.formulario
{
background-color: var(--fundo);
padding: 1% 3% 3%;
border: 1px solid var(--linha);
border-radius: 5px;
border-top: 0px;
}
.formulario input:not(input[type=submit]), .formulario select, .formulario textarea {
}
/* Only apply to input elements with type="text" or similar, and readonly attribute */
input[readonly] {
color: var(--cinza-2) !important;
background-color: var(--fundo-2) !important;
pointer-events: none;
user-select: none;
}
.formulario label{
font-weight: 500;
margin-bottom: 3px;
}
.formNovoStepControl{
float: none !important;
text-align: right !important;
margin: 30px 0 0 0 !important;
min-height: 44px;
display: block;
}
.apresentacao {
padding: 0;
}
.apresentacao .separador:first-child {
margin-top: -10px;
}
.apresentacao .separador .grupo{
margin: 10px 0 0px;
--bs-bg-opacity: 1;
/*background-color: rgba(var(--bs-light-rgb),var(--bs-bg-opacity))!important;*/
border: 1px solid rgba(0, 0, 0, 0.1);
}
.apresentacao .separador .grupo p{
margin: 0 0 7px;
color: var(--tinta-3);
}
.apresentacao .separador .grupo p label{
font-weight: 500;
color: var(--tinta);
}
.row.equal-cols {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.row.equal-cols:before,
.row.equal-cols:after {
display: block;
}
.row.equal-cols > [class*='col-'] {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.row.equal-cols > [class*='col-'] > * {
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
input::placeholder {
color: rgb(212, 212, 212);
}
/* novo estilo dos formulários - end */
.categorias_landignpage .card-body {
background-color: var(--fundo);
min-height: 128px;
}
.lista-produtos .card-body {
border: none;
border-radius: 10px !important;
min-height: 145px;
}
/*
.utentes > .container > h1 {
display: none;
}*/
main {
min-height: 50vh;
margin-bottom: 30px;
}
main.auth-main {
margin-bottom: 0;
}
.logo-composition {
font-size: 24px;
font-weight: 200;
color: var(--gz-verde-800);
font-family: Helvetica, Arial, sans-serif;
}
.logo-composition .gz-ponto {
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--gz-amarelo);
margin: 0 3px;
}
.logo-composition.light {
color: var(--tinta-marca);
}
header {
background-color: var(--papel) !important;
}
/* Rodapé do redesign: verde institucional, não o branco do style.css. */
footer.gz-rodape,
footer.mz-rodape {
background: var(--mz-verde-esc) !important;
background-color: var(--mz-verde-esc) !important;
}
.utentes_login .card-header h4 {
color: var(--tinta-marca) !important;
}
.gca .card span a {
text-decoration: none !important;
}
#noticias .titulo {
font-size: 14px !important;
}
.caixa_selecao_entidade {
width:100%;
max-width: 300px;
margin-top: -80px;
z-index: 100 !important;
position: relative;
text-align: right;
}
.intl-tel-input input[type="text"] {
padding: 8px 48px !important;
}
.opcoes2 {
min-width: 150px;
}
footer:not(.mz-rodape) a:hover {
color: var(--linha) !important;
}
/* ============================================================
ILUSTRAÇÃO DA ASSINATURA DE DISPOSITIVOS (mz/index.html)
------------------------------------------------------------
Era um JPEG de 1200×670. As cores estavam gravadas no ficheiro,
e nenhuma variável CSS chega aos pixéis de uma imagem — por isso
ficava igual nas quatro paletas. O caso que decidiu a mudança foi
o alto contraste: existe para quem vê mal, e a ilustração
passava-lhe ao lado, verde sobre verde.
Tem de ser SVG *inline*. Um 
renderiza num
documento isolado, onde as custom properties da página não
existem — trocar o .jpg por um .svg no mesmo ![]()
não mudaria
absolutamente nada.
A divisão dos tokens é deliberada: o hardware é objecto físico e
mantém-se neutro — um portátil é cinzento seja qual for o tema.
O que está NOS ECRÃS é o portal, e esse segue a paleta.
============================================================ */
:root {
/* O que se vê NOS ecrãs. Segue a paleta por omissão, mas é token próprio
porque um ecrã numa ilustração não é uma superfície da página: emite luz.
Na paleta escura estes valores não acompanham o resto — ver mais abaixo. */
--ilu-ecra: var(--papel);
--ilu-ecra-linha: var(--linha);
--ilu-ecra-traco: var(--linha-forte);
--ilu-ecra-banda: var(--verde-linha);
--ilu-ecra-banda2: var(--verde-fundo);
--ilu-fundo: var(--mz-verde-esc);
--ilu-aparelho: #4b525b;
--ilu-aparelho-2: #575f69;
--ilu-aparelho-3: #363c44;
--ilu-tecla: #444b55;
--ilu-lcd: #9dbd8f;
--ilu-lcd-tinta: #2c4527;
--ilu-moldura: #16181c;
--ilu-metal: #c2c8cf;
--ilu-metal-2: #a7aeb7;
--ilu-metal-3: #878f99;
--ilu-teclado: #2b3038;
}
/* No alto contraste o hardware inverte: aparelhos claros sobre fundo
quase preto. Deixam de ser massas cinzentas indistintas e passam a
silhuetas com limite nítido — que é o que serve a baixa visão. */
/* No escuro o fundo da ilustração já é escuro; o metal sobe um pouco
para o portátil não se dissolver nele.
E os ecrãs NÃO acompanham a paleta. Deixá-los escurecer com o resto punha
o portátil todo dentro de uma faixa estreita de tons escuros — cabeçalho
verde, corpo e cartões quase indistinguíveis — e a barra de pesquisa,
pintada de --papel, virava um buraco preto no meio do ecrã. Um ecrã aceso
numa ilustração é objecto iluminado, não superfície da página. */
/* O herói trazia links com class="text-white" — cor fixa. Enquanto a marca
clareou no tema escuro, isso dava 2.50:1. A marca já não clareia, mas a
cor deixa de ser fixa na mesma: segue o token da tinta sobre marca, e
volta a corrigir-se sozinha se alguma paleta futura mexer na superfície. */
.gz-heroi .text-white { color: var(--tinta-marca) !important; }
/* Sem height:auto o SVG não conserva a proporção quando a largura vem de
um clamp() — ficaria com a altura de 670px do viewBox. */
svg.gz-assinatura-dispositivos { height: auto; display: block; }
/* ============================================================
TEMA ESCURO — repintura das superfícies fixas do tema
------------------------------------------------------------
As folhas do tema escrevem background:#fff literal em cerca de
trinta sítios. Não é uma variável, logo a ponte --gz-* não lhes
chega: o fundo fica branco e a tinta, que VEM do token, clareia.
Resultado — texto claro sobre branco, ilegível.
O caso mais visível era .gz-cartao e os oito irmãos (style.all.css
linha 104), que pintam a página inicial inteira.
============================================================ */
/* Botões claros do Bootstrap: fundo branco fixo, tinta do token. */
/* O mesmo erro de categoria da paleta, um nível abaixo: a ponte manda
--gz-verde-500 para --mz-verde-vivo, que no escuro é a marca-TEXTO.
Mas .btn-gz-primario usa-o como FUNDO, com color:#fff por cima —
branco sobre #7ac79c dá 2.07:1. Nos botões, a marca é superfície. */
/* Links dentro das superfícies repintadas. O tema pinta-os com a marca — que
no escuro é superfície escura: dá 1.24:1 sobre o papel, invisível. Num link
a marca é TEXTO, e o token do texto é o tom vivo: 8.39:1. Os botões ficam
de fora, porque aí a marca volta a ser fundo. */
/* ---------- o segundo sistema do tema: --gz2-* ----------
O tema govmz tem DUAS famílias de variáveis. A ponte acima cobria a --gz-*
e ignorava esta, que é pequena (oito) mas pinta secções inteiras: era daqui
que vinha a faixa dos «Balcões únicos» a ficar cor de areia no tema escuro,
com o título claro por cima — invisível.
Cada uma leva o valor que corresponde ao PAPEL que tem no tema, verificado
uma a uma: areia-50 e teal-50 são fundo, teal-500 é traço, teal-700 e
carvao-600 são texto, carvao-800/900 são painéis escuros. */
/* Utilitárias de texto do Bootstrap: cor fixa que não passa pelos tokens.
.text-secondary aparece treze vezes só na página inicial. */
/* .gz-balcao e .gz-boasvindas faltavam na repintura acima — os cartões dos
balcões ficavam claros com o título claro por cima. E no bloco da data o
texto vem de --gz-verde-700/500, que são superfície: preto sobre verde
escuro. Ali o número é texto, e usa o tom vivo. */
/* ============================================================
BARRA DE ACESSIBILIDADE
------------------------------------------------------------
Vive ACIMA do cabeçalho. Antes, o controlo de paletas era um botão
«Cores» encostado ao de entrar na conta — enquadramento errado por
duas razões.
A primeira é de nome: o alto contraste não é decoração, é o que torna
o portal legível a quem vê mal. Quem precisa dele procura
«acessibilidade», não «cores».
A segunda é de lugar: ocupava o espaço mais valioso do cabeçalho, a
competir com a acção principal, e ainda ajudava a esmagar a barra de
navegação em ecrãs de portátil.
O contraste ganhou atalho directo — um clique, sem abrir menu nenhum.
Quem tem baixa visão não devia ter de navegar um submenu para chegar
ao que torna a página legível.
============================================================ *//* Amarelo e não branco: sobre o verde escuro é o que se vê primeiro, e o
anel tem de sobreviver a quem navega só por teclado. *//* Estado ligado do atalho de contraste — visível sem depender só da cor. */
/* Os três tamanhos formam um só controlo, encostados. */
/* O botão da paleta vinha desenhado para fundo claro do cabeçalho:
papel branco e tinta escura. Aqui o fundo é escuro. */
/* No telemóvel o rótulo sai e fica o símbolo — os controlos são o que
importa, e o espaço é pouco. */