/* =====================================================================
GERADOR DE SENHAS — folha da página. 13/09/2026.
A PALETA É DECLARADA AQUI, não herdada. Copiei uma vez um bloco de CSS
entre folhas e deixei para trás as variáveis de que ele dependia: uma
`var()` por definir invalida a propriedade inteira EM SILÊNCIO, e o botão
ficou sem fundo nem moldura sem dar erro nenhum.
O CARTÃO TEM TRÊS ZONAS, pela ordem da atenção de quem chega:
1. a senha — o único artefacto da página — com a força e as acções
logo por baixo dela;
2. os controlos;
3. o extra (a impressão digital), atrás de um risco.
===================================================================== */
#sn-generator, #sn-artigos, #sn-apoio, #sn-how, #sn-modal {
--sn-ac: #00acc8; /* a acção */
--sn-c: #d60037; /* a marca */
--sn-t: #1f2835; /* o texto */
--sn-l: #edeff0; /* o cinzento da casa */
--sn-l2: #e2e6ea;
--sn-g: #5b6879;
--sn-g2: #8b95a5;
--sn-ok: #1d8f4e;
--sn-dig: #00788c; /* os dígitos: o teal da casa escurecido até 5,17:1 */
}
#sn-generator, #sn-artigos, #sn-apoio { padding: 60px 0; }
#sn-generator { background: #fff; }
#sn-artigos { background: var(--sn-l); }
#sn-apoio { background: #fff; }
#sn-generator, #sn-how, #sn-guardar, #sn-artigos, #sn-apoio { scroll-margin-top: 100px; }
/* =====================================================================
O ESPAÇO DESENHADO NÃO É ESPAÇO DE TEXTO — apanhado pelo dono ao colar o
cartão em texto: «Gerador de senhastudo acontece», «Forte102 bits».
Num contentor `flex` os nós de texto que só têm espaços são deitados
fora — não chegam a ser itens. O afastamento vem do `gap`, que é desenho
e não texto. No ecrã lê-se bem; quando a página deixa de ser VISTA e
passa a ser LIDA (copiar, leitor de ecrã, modo de leitura, tradutor) as
palavras colam-se.
A `.sn-vis` NÃO usa `position: absolute`: isso tira-a do fluxo e o
separador ganha uma linha só para ele, que é pior. Letra de tamanho zero
não ocupa nada, não se vê, e continua no texto e na mesma linha.
===================================================================== */
.sn-vis { font-size: 0; line-height: 0; letter-spacing: 0; }
/* =====================================================================
O CARTÃO
===================================================================== */
/* A CAIXA E A DA CASA, lida do `gerador.css` do gerador de nomes -- branca,
moldura fina de #dfe3e6, sombra leve, e CANTOS DIREITOS. A regra esta
escrita no cabecalho dessa folha: «o tema nao arredonda nada: nem o campo
de pesquisa, nem o botao, nem os cartoes. Uma pastilha arredondada no meio
disto le-se como peca de outro sitio». O meu cartao tinha cantos de 18px,
botoes em pastilha e uma barra escura no topo -- nada disso existe na casa.
Tambem se foi a barra escura: a promessa que ela levava esta no subtitulo
da seccao e no bloco «Esta senha nao sai daqui». */
.sn-cartao {
max-width: 760px; margin: 0 auto;
background: #fff;
border: 1px solid #dfe3e6;
box-shadow: 2px 12px 10px rgba(0, 0, 0, .06);
}
/* uma caixa so, com dois riscos finos -- em vez de tres faixas de cores
diferentes, que era mais cromo do que informacao */
.sn-cartao__corpo { padding: 30px 30px 26px; background: #fff; }
/* =====================================================================
A SENHA. É o único artefacto da página: tudo o resto é moldura.
VISÍVEL, não escondida atrás de pontos: uma senha que se vai copiar tem
de se poder ler para conferir, e ninguém a está a escrever — ela é
gerada aqui.
NÃO É UM `` NEM UM `