, sem uma linha de JavaScript: esta pagina roda em navegador de
celular antigo e em rede corporativa que bloqueia script de terceiro. Tudo
que puder ser HTML puro aqui, e HTML puro.
----------------------------------------------------------------------------- */
.ch-cofre {
border-color: rgba(245, 158, 11, .35);
border-top: 3px solid var(--ig-warning);
background: #fffdf7;
}
.ch-cofre > summary {
display: flex;
align-items: center;
gap: var(--ig-sp-2);
cursor: pointer;
list-style: none;
font-size: var(--ig-fs-md);
font-weight: var(--ig-fw-bold);
color: var(--ig-warning-ink);
}
/* O triangulo padrao do
e cinza e some no ambar; o + / - proprio fica
na cor do bloco e diz melhor "abre e fecha". */
.ch-cofre > summary::marker { content: ''; }
.ch-cofre > summary::-webkit-details-marker { display: none; }
.ch-cofre > summary::after {
content: '+';
margin-left: auto;
font-size: var(--ig-fs-lg);
line-height: 1;
color: #b45309;
}
.ch-cofre[open] > summary::after { content: '\2212'; }
.ch-cofre > summary:hover { color: #7c4a06; }
.ch-cofre-icone { flex: none; font-size: var(--ig-fs-md); }
.ch-cofre-corpo { margin-top: var(--ig-sp-4); }
.ch-cofre-regra {
margin: 0 0 var(--ig-sp-3);
padding: var(--ig-sp-3) var(--ig-sp-4);
border-radius: var(--ig-radius-sm);
background: var(--ig-warning-soft);
border: 1px solid rgba(245, 158, 11, .30);
font-size: var(--ig-fs-sm);
line-height: 1.6;
color: var(--ig-warning-ink);
}
.ch-cofre-regra b { color: #7c4a06; font-weight: var(--ig-fw-bold); }
.ch-cofre textarea { min-height: 108px; }
.ch-cofre textarea:focus {
border-color: var(--ig-warning);
box-shadow: 0 0 0 .2rem rgba(245, 158, 11, .22);
}
.ch-cofre-nota {
margin: var(--ig-sp-3) 0 0;
font-size: var(--ig-fs-xs);
line-height: 1.6;
color: var(--ig-muted);
}
/* CANAL FORA DO AR: diz, em vez de sumir. Um painel que simplesmente nao existe
nao da nenhuma pista de por que - e o cliente que veio mandar o comprovante
nao desiste: ele cola no campo de resposta comum, que a equipe inteira le. */
.ch-cofre-off {
border-color: rgba(220, 38, 38, .30);
border-top: 3px solid var(--ig-danger);
background: #fffafa;
}
.ch-cofre-off-titulo {
display: flex;
align-items: center;
gap: var(--ig-sp-2);
font-size: var(--ig-fs-md);
font-weight: var(--ig-fw-bold);
color: var(--ig-danger-ink);
}
/* -----------------------------------------------------------------------------
13. RODAPE
----------------------------------------------------------------------------- */
.ch-rodape {
margin: var(--ig-sp-6) 0 0;
text-align: center;
font-size: var(--ig-fs-xs);
line-height: 1.7;
color: var(--ig-muted);
}
.ch-rodape b { color: var(--ig-text-soft); font-weight: var(--ig-fw-bold); }
/* -----------------------------------------------------------------------------
14. CELULAR
576px e o mesmo corte do Portal (`max-width: 575.98px`), para as duas telas
virarem ao mesmo tempo.
----------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
.ch-tela { padding: var(--ig-sp-5) var(--ig-sp-3) var(--ig-sp-6); }
/* O BLOCO DE `.ch-marca` QUE FICAVA AQUI FOI REMOVIDO.
Ele dava 48px de padding vertical, 16px de margem inferior e um raio ao
`.ch-marca`, e fazia sentido quando ele era um CARTAO roxo flutuando no
topo. Desde que a marca virou faixa de ponta a ponta, `.ch-marca` e um
flex item dentro de `.ch-barra-interna`: o padding inchava a faixa, a
margem empurrava a logo 8px acima do centro - desalinhando-a do selo ao
lado - e o raio nao pintava nada, porque a classe nao tem mais fundo.
Codigo morto com efeito colateral visivel, nas tres telas que usam a
barra. */
.ch-card {
padding: var(--ig-sp-4);
border-radius: var(--ig-radius);
}
.ch-numero .n { font-size: var(--ig-fs-lg); }
.ch-topo h1,
.ch-assunto h1 { font-size: var(--ig-fs-md); }
/* 96%, e nao 86%: numa tela de 360px, 86% deixa a mensagem com pouco mais
de 300px de largura util - e ai o balao vira uma coluna estreita de
palavras quebradas. A pista do lado continua legivel pela cor e pelo
recuo que sobra. */
.ch-fala {
max-width: 96%;
padding: var(--ig-sp-3) var(--ig-sp-4);
}
/* Botao de largura inteira e alvo de toque confortavel. */
.ch-acoes .ch-btn { width: 100%; }
}
/* -----------------------------------------------------------------------------
15. IMPRESSAO
Acontece: o cliente imprime a conversa para anexar num processo ou levar a
uma reuniao. Sem isto sai fundo cinza, sombra e um botao "ENVIAR RESPOSTA"
que nao faz nada no papel.
----------------------------------------------------------------------------- */
@media print {
body.ch { background: #fff; }
.ch-tela { padding: 0; display: block; }
/* O FUNDO DA BARRA TEM DE IR PARA O PAPEL.
O navegador nao imprime cor de fundo por padrao. Sem isto a faixa roxa
vira branca e o logo - que e branco - desaparece: a folha sai com um
retangulo vazio no topo. `print-color-adjust: exact` e a unica excecao
de cor desta folha impressa, e existe so por causa disso. */
.ch-barra {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
break-inside: avoid;
}
.ch-barra-interna { padding: 14px var(--ig-sp-5); }
/* O selo e reasseguramento de tela; no papel e so tinta. */
.ch-selo-barra { display: none; }
.ch-card { box-shadow: none; break-inside: avoid; }
.ch-fala { box-shadow: none; break-inside: avoid; max-width: 100%; }
.ch-responder,
.ch-cofre,
.ch-cofre-off,
.ch-acoes { display: none; }
}
/* =============================================================================
PARTE 2 - AS TELAS DA CENTRAL DE PAGAMENTO (prefixo `pg-`)
Aqui comeca outra coisa. Tudo acima e escrito do zero para as telas de
chamado; daqui para baixo e uma CAMADA DE COR por cima do `pagamento.css`,
que continua sendo carregado antes deste arquivo.
---------------------------------------------------------------------------
POR QUE CAMADA, E NAO REESCRITA
O `pagamento.css` tem 44 KB e descreve muito mais do que cor: a grade de
tres colunas de cada cobranca, a largura dos cartoes de forma de pagamento,
a lista de parcelas em duas colunas, o comportamento no celular. Nada disso
muda ao trocar o tema - e reescrever tudo para mudar a paleta seria trocar
um risco pequeno (cor errada) por um grande (layout quebrado numa tela que
movimenta dinheiro).
A paleta daquele arquivo passa quase inteira por 17 variaveis `--pg-*`.
Redefini-las aqui vira o tema de uma vez. O que sobra sao ~20 regras com cor
CHUMBADA - veus de branco translucido, gradientes escuros e sombras pretas,
que so fazem sentido sobre fundo escuro. Essas estao refeitas uma a uma
abaixo, cada uma com o motivo.
---------------------------------------------------------------------------
COMO VOLTAR
Tire o deste arquivo dos templates. O `pagamento.css` sozinho volta a
ser o que era - ele nao foi tocado. Ver
backup-publico-escuro-2026-08-28/COMO-VOLTAR.txt.
============================================================================= */
/* -----------------------------------------------------------------------------
2.1 AS 17 VARIAVEIS
Cada uma vira do escuro para o equivalente do Portal. A ordem e os nomes sao
os mesmos do `:root` do pagamento.css, de proposito: da para abrir os dois
lado a lado e conferir linha por linha.
----------------------------------------------------------------------------- */
body.pg {
/* Superficies: o fundo quase preto vira o cinza-azulado do Portal, e os
dois tons de cartao viram branco e um branco levemente sujo. */
--pg-bg: #f5f7fb;
--pg-bg-2: #eef1f7;
--pg-card: #ffffff;
--pg-card-2: #f7f9fc;
--pg-linha: #e6e9f0;
--pg-linha-2: #d6dbe6;
/* Texto: a escala INVERTE. No escuro `ink` era o mais claro; aqui e o mais
escuro. Os tres degraus continuam sendo os mesmos tres papeis - corpo,
apoio, legenda. */
--pg-ink: #16203a;
--pg-ink-2: #4a5568;
--pg-ink-3: #6b7280;
/* MARCA. No escuro havia um rosa e um roxo, os dois usados como destaque -
um sobre fundo preto aguenta dois neons. No claro isso vira ruido, e o
Portal tem UMA cor de marca. As duas variaveis apontam para ela.
Consequencia: o `` rosa dentro do H1 da capa passa a ser roxo, e o
fio do topo dos cartoes tambem. E o certo - eram dois destaques
disputando a mesma tela. */
--pg-rosa: #25006b;
--pg-roxo: #25006b;
/* Os status ESCURECEM. #60a5fa e #22c55e foram escolhidos para brilhar no
preto; no branco eles reprovam em contraste (o verde da 2,3:1). Aqui
entram os tons `-ink` do Portal, que sao a versao desses mesmos matizes
feita para ler sobre fundo claro. */
--pg-azul: #1d4ed8;
--pg-azul-claro: #1d4ed8;
--pg-verde: #0a7a31;
--pg-alerta: #92610a;
--pg-erro: #b02020;
/* 18px -> 14px, o raio grande do Portal. */
--pg-raio: 14px;
}
/* A fonte tambem: o pagamento.css usa a stack da Apple primeiro; o Portal
comeca por "Inter". Sem isto, as duas telas do mesmo cliente teriam
tipografia diferente no mesmo Mac. */
body.pg {
font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* -----------------------------------------------------------------------------
2.2 O QUE ESTAVA CHUMBADO
Cada regra abaixo existe porque a original traz cor de tema escuro escrita a
mao, que variavel nenhuma alcanca.
----------------------------------------------------------------------------- */
/* O CABECALHO ERA UMA AURORA: dois gradientes radiais roxo e rosa sobre preto.
No claro isso vira uma mancha suja. Fica o fundo liso da pagina, e a
separacao passa a ser a borda inferior - que ja existia. */
.pg-topo {
background: var(--pg-bg);
border-bottom: 1px solid var(--pg-linha);
}
/* Pilulas do cabecalho: fundo `rgba(18, 27, 48, .8)` (azul-noite) e texto
#dbe4ff. Viram cartao branco com borda, como as pilulas do Portal. */
.pg-selo-seguro,
.pg-etiqueta {
background: var(--pg-card);
border-color: var(--pg-linha);
color: var(--pg-ink-2);
}
.pg-etiqueta svg { color: var(--pg-roxo); }
/* O CARTAO DE RESUMO era um gradiente escuro com sombra de 80px. Vira o cartao
padrao do Portal: branco, borda fina, sombra minima.
E ganha o fio roxo no topo, que os cartoes da tela de chamado tem. E o que
faz o bloco pertencer ao sistema em vez de ser uma caixa branca qualquer. */
.pg-cartao-resumo {
position: relative;
overflow: hidden;
background: var(--pg-card);
border-color: var(--pg-linha);
border-radius: var(--pg-raio);
box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
.pg-cartao-resumo::before {
content: '';
position: absolute;
inset: 0 0 auto 0;
height: 3px;
background: var(--pg-roxo);
}
/* VEUS DE BRANCO TRANSLUCIDO. `rgba(255,255,255,.04)` sobre preto e um cinza
um pouco mais claro; sobre branco e branco. Todos viram o cinza-azulado. */
.pg-resumo-grade > div,
.pg-atualizado,
.pg-parcela,
.pg-saida,
.pg-tag-numero {
background: var(--pg-bg);
}
.pg-tag-numero { border-color: var(--pg-linha-2); color: var(--pg-ink-2); }
/* ATRASO: o gradiente vermelho desbotado nao aparece no branco. A marca passa
a ser a barra lateral (que o `::before` do .pg-item ja desenha) mais um
fundo rosa muito leve, no tom `-soft` do Portal. */
.pg-item-atraso {
border-color: rgba(220, 38, 38, .30);
background: #fffafa;
}
.pg-item-destaque { box-shadow: 0 0 0 3px rgba(22, 163, 74, .16); }
.pg-item-destaque.pg-item-atraso { box-shadow: 0 0 0 3px rgba(220, 38, 38, .14); }
/* Cartoes de cobranca e demais superficies: sombra do Portal, nao a de 30px do
escuro. Sombra forte sobre fundo claro suja a tela inteira. */
.pg-item,
.pg-forma,
.pg-pago,
.pg-regras,
.pg-vazio-bloco {
box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
/* -----------------------------------------------------------------------------
2.3 BOTOES
Eram quatro cores saturadas com sombra colorida - desenho de tema escuro, em
que o botao precisa brilhar para existir. No claro, quatro botoes berrantes
na mesma tela viram uma feira.
A hierarquia passa a ser a do Portal: UM botao cheio, o resto contornado. O
que muda de verdade e qual acao e a principal, e nao qual cor cada meio de
pagamento tem.
----------------------------------------------------------------------------- */
.pg-btn-boleto,
.pg-btn-pix,
.pg-btn-pdf,
.pg-btn-copiar {
background: var(--pg-roxo);
box-shadow: none;
}
.pg-btn-boleto:hover,
.pg-btn-pix:hover,
.pg-btn-pdf:hover,
.pg-btn-copiar:hover { background: #34108f; filter: none; }
/* CARTAO segue distinto, e continua sendo o unico. Nao por gosto: e o meio com
TAXA, e o cliente tem de conseguir ver que aquele botao e diferente antes de
clicar. Ambar em vez do laranja queimado, com texto escuro - branco sobre
ambar reprova em contraste. */
.pg-btn-cartao,
.pg-btn-cartao-ir {
background: #f0a91b;
color: #1f2937;
box-shadow: none;
}
.pg-btn-cartao:hover,
.pg-btn-cartao-ir:hover { background: #d99512; color: #1f2937; filter: none; }
.pg-btn-fantasma,
.pg-saida-acoes .pg-btn-fantasma {
background: var(--pg-card);
border-color: var(--pg-linha-2);
color: var(--pg-ink);
}
.pg-btn-fantasma:hover,
.pg-saida-acoes .pg-btn-fantasma:hover {
background: #f4f6fa;
border-color: var(--pg-linha-2);
}
/* O botao ATIVO era um anel preto sobre preto. Vira o halo roxo do foco do
Portal - a mesma linguagem do `:focus` dos campos. */
.pg-btn.pg-btn-ativo,
.pg-btn-boleto.pg-btn-ativo,
.pg-btn-pix.pg-btn-ativo,
.pg-btn-cartao.pg-btn-ativo {
box-shadow: 0 0 0 3px rgba(37, 0, 107, .18);
}
/* -----------------------------------------------------------------------------
2.4 AS TARJAS E OS BLOCOS DE SAIDA
----------------------------------------------------------------------------- */
/* "MELHOR OPCAO" e a unica tarja verde da tela, e continua sendo - e o que diz
que boleto e PIX nao tem taxa. Fundo `-soft`, texto `-ink`. */
.pg-forma-tarja {
background: #fff5e0;
border-bottom-color: rgba(245, 158, 11, .30);
color: #92610a;
}
.pg-forma-tarja-melhor {
background: #e8f7ee;
border-bottom-color: #bfe6cd;
color: #0a7a31;
}
.pg-parcelas {
border-color: rgba(245, 158, 11, .35);
background: #fffdf7;
}
.pg-parcelas .pg-bloco-titulo { color: #92610a; }
.pg-parcelas-aviso { color: var(--pg-ink-2); }
.pg-saida-boleto,
.pg-saida-pix {
border-color: rgba(37, 0, 107, .22);
border-top-color: var(--pg-roxo);
background: #faf8ff;
}
.pg-saida-boleto h4,
.pg-saida-pix h4 { color: var(--pg-roxo); }
.pg-sem-opcao {
border-color: #f6c6c6;
background: #fdeaea;
color: #b02020;
}
/* -----------------------------------------------------------------------------
2.5 A TELA DE LINK NAO DISPONIVEL
Mesmo tratamento da tela de chamado: cartao branco centralizado, sem o
gradiente escuro e sem a aurora de fundo.
----------------------------------------------------------------------------- */
.pg-vazio { background: var(--pg-bg); }
.pg-vazio-card {
background: var(--pg-card);
border-color: rgba(220, 38, 38, .28);
border-radius: var(--pg-raio);
box-shadow: 0 6px 18px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .04);
}
/* O card ROXO na tela de escolha de servico: la nao se recusa nada, pergunta-se
- e o rosa de recusa fazia parecer que algo deu errado antes de a pessoa ler
o titulo. Regra ja existente no template; aqui so o tom claro. */
.pg-vazio-card.pg-largo { border-color: rgba(37, 0, 107, .26); }
.pg-vazio-card.pg-ok { border-color: #bfe6cd; }
/* O LOGO precisa de fundo escuro por baixo: `logo.avif` e a versao para a barra
lateral do Portal, e no branco ele some.
NA TELA DE LINK INVALIDO ele e um cartao, porque ali a pagina inteira e um
cartao centralizado - uma barra de ponta a ponta com um card solto embaixo
nao teria a que se ligar.
Na Central e o contrario: ver `.pg-nav` na secao 2.9. */
.pg-vazio-logo {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 22px;
padding: 22px 26px;
background: var(--pg-roxo);
border-radius: var(--pg-raio);
}
/* -----------------------------------------------------------------------------
2.6 IMPRESSAO
Acontece: o cliente imprime a Central para levar ao financeiro da empresa
dele. Fora o fundo do logo, nada mais precisa de tinta.
----------------------------------------------------------------------------- */
@media print {
body.pg { background: #fff; }
.pg-topo { background: #fff; }
.pg-logo,
.pg-vazio-logo {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.pg-item,
.pg-pago,
.pg-cartao-resumo { box-shadow: none; break-inside: avoid; }
.pg-item-acoes,
.pg-forma-botoes,
.pg-capa-acoes,
.pg-parcelas { display: none; }
}
/* -----------------------------------------------------------------------------
2.7 O QUE A PRIMEIRA PASSAGEM DEIXOU ESCAPAR
Tudo aqui saiu de uma revisao que leu o pagamento.css linha a linha
procurando cor CHUMBADA que a secao 2.2 nao tinha coberto. Cada uma quebrava
alguma coisa de verdade, e as duas primeiras impediam PAGAR.
----------------------------------------------------------------------------- */
/* CRITICO 1 - O CAMPO DO PIX ERA UM RETANGULO PRETO.
`.pg-codigo` tinha `background: #04070f` escrito a mao (quase preto) e a cor
do texto vinha de `var(--pg-ink)`, que a secao 2.1 virou para #16203a. Nas
duas pontas escuro: contraste 1,24:1. O cliente abria a Central, mandava
gerar o PIX e recebia um bloco preto no lugar do codigo copia-e-cola.
O botao "Copiar" continuava funcionando - o valor estava no `value` -, o que
torna o defeito pior: quem confiasse no botao pagava, quem quisesse conferir
os ultimos digitos nao conseguia, e ninguem entenderia por que.
Monoespacada sobre cinza-claro, que e como codigo para copiar tem de ser. */
.pg-codigo {
background: var(--pg-bg);
border-color: var(--pg-linha-2);
color: var(--pg-ink);
}
/* CRITICO 2 - O LINK DO SUPORTE ERA BRANCO SOBRE BRANCO.
`.pg-link-suporte { color: #fff }` vive dentro da mensagem de erro que o
pagamento.js monta quando a emissao FALHA. O fundo daquele bloco e claro
agora: 1,05:1, sobrava um sublinhado boiando.
E o caminho de fuga de quem ja nao conseguiu pagar - exatamente a hora em
que a tela nao pode esconder nada. */
.pg-link-suporte { color: var(--pg-roxo); }
.pg-link-suporte:hover { color: #34108f; }
/* O VERDE #4ade80 EM TRES LUGARES.
Foi escolhido para brilhar sobre preto; sobre os fundos `-soft` claros ele
da 1,6:1. Some inteiro. Vai para o tom `-ink` do Portal, que e o mesmo
matiz feito para ler no claro.
A irma `.pg-pastilha-alerta` ja usava `var(--pg-erro)` e por isso escapou -
so o lado do SUCESSO estava com cor chumbada. */
.pg-tag-aberto { color: var(--pg-verde); }
.pg-pastilha-ok { color: var(--pg-verde); }
.pg-item-icone { color: var(--pg-verde); }
/* O CIRCULO DO ICONE CONTINUAVA ROSA.
`.pg-vazio-icone` tinha fundo e borda em `rgba(244, 63, 110, ...)` escritos a
mao; so o traco vinha de variavel. No escuro, 12% de rosa sobre preto era
quase invisivel e ninguem notava. No branco, e um circulo rosa.
Pior no `pagamento-cartao.html`: "Pagamento confirmado" aparecia com um
visto VERDE dentro de um circulo ROSA. Dois sinais se contradizendo, e o
olho acredita no errado. */
.pg-vazio-icone {
background: rgba(37, 0, 107, .07);
border-color: rgba(37, 0, 107, .22);
}
/* Deu certo: o circulo acompanha o visto. */
.pg-vazio-card.pg-ok .pg-vazio-icone,
.pg-icone-ok {
background: #e8f7ee;
border-color: #bfe6cd;
color: var(--pg-verde);
}
/* A TELA DE RETORNO DO CARTAO nascia com moldura VERMELHA mesmo quando o
pagamento tinha dado certo: `.pg-vazio-card` e a mesma classe da tela de
"link nao disponivel", e la a borda de recusa faz sentido.
Aquele template nao aplica `.pg-ok` - quem aplica e o `chamado-confirmado`.
Entao a regra vai pelo ICONE, que o template ja marca com `pg-icone-ok`: se
ha um visto verde na tela, a moldura nao pode ser vermelha. */
.pg-vazio-card:has(.pg-icone-ok) { border-color: #bfe6cd; }
/* O HALO DO DESTAQUE SUMIA - e a culpa era minha, nao do pagamento.css.
A secao 2.2 poe `box-shadow` em `.pg-item` para trocar a sombra pesada do
escuro. Mesma especificidade do `.pg-item-destaque`, declarada DEPOIS: o
anel verde da cobranca que motivou o e-mail era apagado. Sobrevivia so na
versao em atraso, que tem dois seletores.
Duas classes no seletor resolvem sem depender da ordem. */
.pg-item.pg-item-destaque { box-shadow: 0 0 0 3px rgba(22, 163, 74, .16); }
.pg-item.pg-item-destaque.pg-item-atraso { box-shadow: 0 0 0 3px rgba(220, 38, 38, .14); }
/* A ABA DE 3px DO BLOCO DE PARCELAS. O `border-color` da secao 2.4 e shorthand
dos quatro lados e apagou o `border-top-color` laranja do original, deixando
a faixa quase invisivel. Nos blocos de saida eu tinha lembrado; aqui nao. */
.pg-parcelas { border-top-color: var(--ig-warning, #f59e0b); }
/* BOLETO E PIX PRECISAM CONTINUAR DIFERENTES.
A secao 2.3 pintou os dois de roxo, e isso desfez uma decisao que o
pagamento.css documenta: "dois botoes da mesma cor fariam o cliente clicar
no que estivesse mais perto, sem ler". Eles ficam LADO A LADO no mesmo
cartao, e o bloco de saida abaixo herdava a mesma moldura - quem clicava num,
olhava, clicava no outro e voltava nao tinha cor nenhuma para se orientar.
O PIX volta a ser azul. Nao o #2563eb do escuro, que sobre branco fica
estridente ao lado do roxo: o azul `-ink` do Portal, que convive com a
marca. O boleto fica com o roxo, que e a acao padrao. */
.pg-btn-pix,
.pg-btn-copiar { background: #1d4ed8; }
.pg-btn-pix:hover,
.pg-btn-copiar:hover { background: #1e40af; }
.pg-saida-pix { border-top-color: #1d4ed8; background: #f5f8ff; }
.pg-saida-pix h4 { color: #1d4ed8; }
/* AQUI HAVIA UM `.pg-btn { background: var(--pg-roxo) }`, E ELE QUEBROU A TELA.
A intencao era cobrir o botao SEM modificador, que no pagamento.css cai num
`#2f3f66` de reserva. O efeito foi outro: `.pg-btn` tem a MESMA
especificidade de `.pg-btn-cartao`, `.pg-btn-fantasma` e companhia, e esta
regra estava DEPOIS de todas elas na folha. Resultado: o fundo de TODOS os
botoes virava roxo, enquanto a cor do texto continuava a do modificador -
"Pagar com Cartao" ficou com texto #1f2937 sobre roxo, "Ver cobrancas" com
texto #16203a sobre roxo. Ilegiveis.
A regra saiu em vez de ser movida para o topo da secao. O caso que ela
cobria nao existe - nenhum botao dos templates ou do pagamento.js fica sem
modificador -, e o `#2f3f66` de reserva e azul-escuro com texto branco, que
no claro le sem problema. Cobrir um caso hipotetico nao vale o risco de
ordem que ele acabou de provar. */
/* -----------------------------------------------------------------------------
2.8 DETALHES QUE NAO QUEBRAM NADA, MAS DIVERGEM
----------------------------------------------------------------------------- */
/* O anel de foco, que a Parte 1 so dava para as telas de chamado. Metade da
folha com foco proprio e metade com o do navegador e a divergencia que esta
mudanca inteira existe para eliminar. */
body.pg :focus-visible {
outline: 2px solid var(--pg-roxo);
outline-offset: 2px;
}
/* A moldura do QR sumia contra o bloco de saida claro. A zona de silencio de
12px continua - o que faltava era a borda que a delimita. */
.pg-qr { border: 1px solid var(--pg-linha); }
/* -----------------------------------------------------------------------------
2.9 A BARRA DA MARCA, DE PONTA A PONTA
O logo era uma caixinha roxa flutuando no canto superior esquerdo, e do
outro lado da mesma linha havia uma pilula branca. Duas ilhas sem relacao
nenhuma numa faixa vazia - o cabecalho nao parecia um cabecalho.
Agora a linha inteira e uma barra roxa que vai de borda a borda da janela,
com o logo na esquerda e o selo de seguranca na direita. E a mesma leitura
da barra lateral do Portal: uma faixa roxa e a assinatura da casa.
----------------------------------------------------------------------------- */
/* SANGRIA ATE AS BORDAS SEM MEXER NO HTML.
`.pg-nav` vive dentro do `.pg-container`, que tem `max-width: 1180px` e
`padding: 0 28px`. Pintar o fundo dele pararia nessa largura.
`box-shadow` com raio zero e espalhamento de 100vmax desenha um retangulo da
cor da barra transbordando muito alem da janela nos quatro lados; o
`clip-path` corta o que vazou em cima e embaixo, deixando so a extensao
horizontal. Sobra exatamente a faixa cheia.
A alternativa era `margin-inline: calc(50% - 50vw)`, que estoura quando ha
barra de rolagem (50vw a inclui e 50% nao) e cria rolagem horizontal. */
.pg-topo .pg-nav {
position: relative;
background: var(--pg-roxo);
box-shadow: 0 0 0 100vmax var(--pg-roxo);
clip-path: inset(0 -100vmax);
/* ALTURA PELO PADDING, e nao por `height`.
O conteudo mais alto da barra e o logo: 190px de largura sobre a
proporcao real do arquivo (632x147) dao ~44px.
A conta ate aqui: 18px de cada lado davam ~80px; 38px levaram a ~120px;
30,5px trazem de volta para ~105px - os 15px a menos.
MEIO PIXEL nao e desleixo: e o valor que fecha a conta, e o navegador
resolve isso arredondando para o pixel do dispositivo. Escrever 30 ou 31
daria 104 ou 106, e ai o numero no codigo nao explicaria mais o numero
na tela.
`height` fixa brigaria com tudo isso na primeira vez que alguem mexesse
na largura do logo; o padding acompanha sozinho. */
padding: 30.5px 0;
margin-bottom: 44px;
}
/* Dentro da barra, o logo perde a caixa: o fundo dela agora e a barra. */
.pg-topo .pg-logo {
display: inline-flex;
align-items: center;
padding: 0;
background: none;
border-radius: 0;
}
.pg-topo .pg-logo img { width: 190px; max-width: 52vw; }
/* O SELO INVERTE. Sobre a barra roxa ele nao pode mais ser cartao branco - a
pilula branca dentro de uma faixa roxa vira um buraco. Vidro claro sobre a
propria barra, como os itens do menu do Portal. */
.pg-topo .pg-selo-seguro {
background: rgba(255, 255, 255, .12);
border-color: rgba(255, 255, 255, .22);
color: #e2daf0;
}
.pg-topo .pg-selo-seguro svg { color: #b9a8f0; }
/* O `border-bottom` da secao 2.2 sai: a barra ja separa o cabecalho do resto,
e uma linha logo abaixo dela seria um segundo separador para a mesma coisa. */
.pg-topo { border-bottom: 0; }
/* NO CELULAR A BARRA CRESCE MENOS, e de proposito.
No desktop os +40px sao respiro; numa tela de 667px de altura eles seriam um
terco do que o cliente ve antes de rolar - e o que ele veio fazer esta
abaixo da barra, nao nela. Aqui o aumento e de 20px (14 -> 24 de cada lado),
que mantem a proporcao sem comer a tela.
A barra tambem empilha em duas linhas nesta largura, entao o padding maior
ja rende mais altura do que renderia no desktop. */
@media (max-width: 575.98px) {
.pg-topo .pg-nav { padding: 24px 0; margin-bottom: 28px; }
.pg-topo .pg-logo img { width: 150px; }
}
/* Na impressao a barra vai junto - e o unico bloco colorido que precisa de
tinta, pelo mesmo motivo do logo: ele e branco. */
@media print {
.pg-topo .pg-nav {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
box-shadow: none;
clip-path: none;
}
.pg-topo .pg-selo-seguro { display: none; }
}
/* -----------------------------------------------------------------------------
2.10 A PALAVRA EM DESTAQUE DO TITULO
"Gerencie suas cobrancas com seguranca."
O `` sempre existiu e sempre teve cor - no escuro era o rosa neon, que
saltava do branco do resto. A secao 2.1 apontou `--pg-rosa` para o roxo da
marca, e ali o destaque MORREU: #25006b e #16203a sao os dois muito escuros,
e lado a lado numa mesma frase o olho le uma cor so.
O problema nao era matiz, era LUMINOSIDADE. A correcao vem em duas camadas
que se somam.
----------------------------------------------------------------------------- */
.pg-capa h1 span {
/* 1) UM ROXO MAIS CLARO, nao uma cor nova.
#6d28d9 e da mesma familia da marca, so que no meio da escala em vez
do fundo dela. Contra o #16203a do resto da frase a diferenca de
luminosidade e grande o bastante para a palavra se separar sozinha, e
continua passando folgado em contraste sobre o branco.
Nao usei o rosa de volta: o Portal tem UMA cor de marca, e trazer um
segundo matiz seria refazer a confusao que a secao 2.1 desfez. */
color: #6d28d9;
/* 2) SEM MARCA-TEXTO.
Houve aqui uma faixa lilas cobrindo o pe da palavra, como grifo de
caneta. A ideia era ajudar quem passa o olho pelas tres linhas do
titulo - mas ela virou um sublinhado grosso, e num titulo isso le
como link.
A cor sozinha ja faz o trabalho: #6d28d9 contra o #16203a do resto da
frase da 2,27:1 de diferenca de luminosidade, o suficiente para a
palavra se separar sem nenhum adorno. */
}
/* =============================================================================
PARTE 3 - `pd-`: ACOMPANHAMENTO DO PEDIDO /pedido/{token}
A sexta tela sem login, e a unica que o cliente abre ANTES de ser cliente:
ele comprou pelo site ha cinco minutos, ainda nao tem senha do Portal, e
quer saber o que acontece agora.
REAPROVEITA O `ch-` INTEIRO. A pagina e `body class="ch"` e usa a mesma
barra da marca, o mesmo cartao, os mesmos botoes e o mesmo rodape da tela de
chamado. So a LISTA DE PASSOS e nova - e e so ela que mora aqui.
Escrever um `pd-card`, um `pd-btn` e um `pd-barra` teria sido a decisao
errada mais confortavel do arquivo: tres componentes a mais para manter, e a
garantia de que um dia a borda de um cartao mudaria em cinco telas e nao na
sexta.
============================================================================= */
/* -----------------------------------------------------------------------------
3.1 A LISTA
Vertical, e nao a barra horizontal de quatro bolinhas que este tipo de tela
costuma ter. Tres motivos, nesta ordem:
1. cada passo tem uma FRASE - "fatura nº 238913, vencimento em 12/09",
"os dados de acesso foram enviados em 10/09 as 14:22". A barra
horizontal nao tem onde por texto, e sem o texto a tela vira enfeite:
diz que voce esta no passo 2 e nao diz o que fazer;
2. no celular, quatro colunas com rotulo viram quatro palavras cortadas;
3. o pedido manual tem CINCO passos. Uma barra dimensionada para quatro
quebraria no dia em que o quinto aparecesse.
----------------------------------------------------------------------------- */
.pd-passos {
list-style: none;
margin: 0;
padding: 0;
}
/* Cada passo e uma linha de duas colunas: o marcador e o texto.
O FIO QUE LIGA UM AO OUTRO e o ::before do , e nao uma borda do
marcador: assim ele nasce atras da bolinha e some sozinho no ultimo item,
sem precisar de uma classe "e o ultimo" vinda do servidor. */
.pd-passo {
position: relative;
display: grid;
grid-template-columns: 28px 1fr;
gap: var(--ig-sp-4);
padding: 0 0 var(--ig-sp-5);
}
.pd-passo:last-child { padding-bottom: 0; }
.pd-passo::before {
content: '';
position: absolute;
left: 13px;
top: 30px;
bottom: 2px;
width: 2px;
background: var(--ig-line-strong);
}
.pd-passo:last-child::before { display: none; }
/* O fio ACIMA de um passo concluido fica verde: lido de cima para baixo, o
verde mostra ate onde o pedido chegou sem precisar contar as bolinhas. */
.pd-passo-ok::before { background: var(--ig-success); }
/* -----------------------------------------------------------------------------
3.2 O MARCADOR
Tres estados, e a diferenca entre eles nao pode ser SO a cor: um em cada
doze homens nao distingue verde de cinza. Por isso o concluido leva um
tique desenhado, o atual e um anel vazado com o ponto no meio, e o pendente
e um circulo oco. Forma primeiro, cor depois.
----------------------------------------------------------------------------- */
.pd-marca {
position: relative;
z-index: 1;
width: 28px;
height: 28px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
/* A BORDA E `--ig-muted`, E NAO `--ig-line-strong`.
Era #d6dbe6, que sobre o branco da 1,39:1 - abaixo dos 3:1 que a WCAG
1.4.11 exige de componente de interface. O circulo do passo pendente e o
carregador declarado da informacao ("forma primeiro, cor depois"), e a
essa razao ele simplesmente nao existe para quem tem baixa visao: a
forma nao estava la para essa pessoa mais do que a cor estava.
#6b7280 da 4,83:1 e continua discreto ao lado do verde do concluido. */
border: 2px solid var(--ig-muted);
background: var(--ig-card);
color: var(--ig-muted);
}
.pd-marca svg { width: 15px; height: 15px; }
.pd-passo-ok .pd-marca {
background: var(--ig-success);
border-color: var(--ig-success);
color: #fff;
}
.pd-passo-atual .pd-marca {
border-color: var(--ig-primary);
color: var(--ig-primary);
background: var(--ig-primary-soft);
}
/* O ponto pulsante do passo atual. `prefers-reduced-motion` desliga: pulsacao
permanente na tela e desconforto real para quem tem enxaqueca ou vertigem,
e a informacao ja esta na cor e no anel. */
.pd-passo-atual .pd-marca::after {
content: '';
width: 9px;
height: 9px;
border-radius: 999px;
background: var(--ig-primary);
animation: pd-pulso 1.8s ease-in-out infinite;
}
@keyframes pd-pulso {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(.62); opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
.pd-passo-atual .pd-marca::after { animation: none; }
}
/* -----------------------------------------------------------------------------
3.3 O TEXTO DE CADA PASSO
----------------------------------------------------------------------------- */
.pd-corpo { min-width: 0; padding-top: 2px; }
.pd-titulo {
margin: 0 0 var(--ig-sp-1);
font-size: var(--ig-fs-md);
font-weight: var(--ig-fw-medium);
line-height: var(--ig-lh-tight);
color: var(--ig-text-soft);
}
/* O passo ATUAL e o unico em negrito e na cor cheia. Se todos tivessem o mesmo
peso, a pergunta "onde eu estou?" - a unica que traz o cliente aqui - ficaria
sem resposta ate ele ler as cinco linhas. */
.pd-passo-atual .pd-titulo {
color: var(--ig-text);
font-weight: var(--ig-fw-bold);
}
.pd-passo-ok .pd-titulo { color: var(--ig-text); }
.pd-detalhe {
margin: 0;
font-size: var(--ig-fs-sm);
line-height: var(--ig-lh);
color: var(--ig-muted);
}
/* O passo ATUAL le em tom cheio. Os outros quatro sao contexto - o que ja
passou e o que ainda vem -, e disputar atencao com a unica linha que pede
uma acao e o motivo de ninguem ler nenhuma delas. */
.pd-passo-atual .pd-detalhe { color: var(--ig-text-soft); }
/* A ACAO do passo atual - hoje so o botao de pagar.
RESPIRO MAIOR EM CIMA DO QUE EMBAIXO (sp-4 contra o sp-5 do proximo passo):
o botao pertence ao passo 2, e espacamento igual dos dois lados o deixaria
flutuando entre o 2 e o 3, sem dono visivel. */
.pd-acao { margin-top: var(--ig-sp-4); }
/* A SETA NAO E ENFEITE: ela diz que o botao LEVA para outro lugar (a Central
de Pagamento, noutro endereco). Sem ela, "Pagar agora" numa pagina que se
atualiza sozinha pode ser lido como "pagar aqui mesmo". */
/* SEM repetir `display:inline-flex` e `gap`: o `.ch-btn` ja traz os dois, e
redeclarar cria duas fontes para a mesma decisao - a proxima pessoa a mexer
no espacamento dos botoes mudaria uma e nao a outra. */
.pd-acao-botao svg {
width: 16px;
height: 16px;
flex: none;
}
/* -----------------------------------------------------------------------------
3.4 O RESUMO DA COMPRA
Tres blocos com formas diferentes - faixa do plano, lista de recursos e
tira de dados -, porque os dados desta tela tem tamanhos muito diferentes.
A secao 3.4.1 abaixo conta o que havia antes e por que mudou. Escrito aqui,
e nao reaproveitado da Central, porque esta tela nao carrega o
`pagamento.css`.
----------------------------------------------------------------------------- */
/* -----------------------------------------------------------------------------
3.4.1 O QUE FOI CONTRATADO: faixa do plano, recursos e tira de dados
O DEFEITO QUE ESTA SECAO CORRIGE. Os cinco dados do pedido (servico,
dominio, valor, fatura, e-mail) dividiam UMA GRADE `auto-fit` unica, que da
a MESMA largura para todos. Numa coluna de 160px o resultado era:
SERVICO DOMINIO VALOR
PLANO VPS ICP CORE · vps11635.panel.ico R$ 34,90
Recursos: · - CPU: 4 ntainer.net
vCPU @ AMD EPYC 2.6...
O plano - que e a resposta da unica pergunta que o cliente faz nesta pagina
- saia truncado no meio de uma palavra, o dominio quebrava no meio de um
rotulo de DNS (e endereco partido em duas linhas e endereco que a pessoa
digita errado), e sobrava espaco morto ao lado de "R$ 34,90".
A GRADE UNIFORME E A ESCOLHA ERRADA quando os dados tem tamanhos muito
diferentes: ela trata um preco de 8 caracteres e uma descricao de 300 como
se fossem a mesma coisa. Cada bloco abaixo tem a forma do proprio conteudo.
----------------------------------------------------------------------------- */
/* A FAIXA: nome do plano a esquerda, valor a direita, na mesma linha.
Fundo tenue com uma marca roxa na borda esquerda - e o titulo do cartao, e
precisa se destacar da lista que vem logo abaixo sem virar outro cabecalho.
`flex-wrap` porque nome longo + preco nao cabem lado a lado no celular: ali
o preco desce, em vez de espremer o nome. */
.pd-plano {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--ig-sp-2) var(--ig-sp-4);
padding: var(--ig-sp-3) var(--ig-sp-4);
border-left: 3px solid var(--ig-primary);
border-radius: var(--ig-radius-sm);
background: var(--ig-primary-soft);
}
.pd-plano-nome {
/* `min-width: 0` E OBRIGATORIO: item de flex tem largura minima automatica
igual ao conteudo, entao um nome comprido empurraria o preco para fora
do cartao em vez de quebrar. */
min-width: 0;
font-size: var(--ig-fs-md);
font-weight: var(--ig-fw-bold);
line-height: var(--ig-lh-tight);
color: var(--ig-text);
overflow-wrap: anywhere;
}
.pd-plano-valor {
flex: none;
font-size: var(--ig-fs-lg);
font-weight: var(--ig-fw-bold);
line-height: var(--ig-lh-tight);
color: var(--ig-primary-700);
/* Numeros de mesma largura: numa coluna de precos, "1" estreito desalinha
a virgula e o olho percebe como desleixo antes de entender por que. */
font-variant-numeric: tabular-nums;
}
/* OS RECURSOS. Marcador proprio (`::before`), e nao `list-style`: o marcador
nativo fica FORA da caixa do item, e com `padding-left` do `ul` ele ora
encosta na borda do cartao, ora some. Aqui ele e conteudo, alinhado com o
texto em qualquer largura. */
.pd-recursos {
margin: var(--ig-sp-4) 0 0;
padding: 0;
list-style: none;
display: grid;
gap: 6px;
}
.pd-recursos li {
position: relative;
padding-left: 18px;
font-size: var(--ig-fs-sm);
line-height: var(--ig-lh);
color: var(--ig-text-soft);
overflow-wrap: anywhere;
}
.pd-recursos li::before {
content: "";
position: absolute;
left: 4px;
/* 0.62em desce o ponto ate a altura do meio da minuscula - centrar por
`top: 50%` erraria em item de duas linhas, que e o caso comum aqui. */
top: .62em;
width: 5px;
height: 5px;
border-radius: 999px;
background: var(--ig-primary);
opacity: .55;
}
/* A TIRA DE DADOS: uma linha por dado, rotulo fixo a esquerda.
`160px` de rotulo e o resto para o valor - assim o dominio recebe toda a
largura que sobra e para de quebrar. A linha divisoria entre os itens dá o
ritmo de extrato, que e o que esta parte e. */
.pd-dados {
margin: var(--ig-sp-5) 0 0;
padding-top: var(--ig-sp-4);
border-top: 1px solid var(--ig-line);
display: grid;
gap: var(--ig-sp-3);
}
.pd-dados > div {
display: grid;
grid-template-columns: 160px minmax(0, 1fr);
align-items: baseline;
gap: var(--ig-sp-2) var(--ig-sp-4);
}
.pd-dados dt {
margin: 0;
font-size: var(--ig-fs-xs);
letter-spacing: .04em;
text-transform: uppercase;
color: var(--ig-muted);
}
.pd-dados dd {
margin: 0;
font-size: var(--ig-fs-md);
font-weight: var(--ig-fw-medium);
color: var(--ig-text);
/* `anywhere` continua aqui como ULTIMO recurso: com 160px a mais de
espaco o dominio cabe inteiro nas larguras usuais, mas numa tela de
320px alguma quebra e melhor do que texto saindo do cartao. */
overflow-wrap: anywhere;
}
/* O vencimento e complemento do numero da fatura, nao um segundo dado: fica
na mesma linha, em tom menor, separado por ponto medio. */
.pd-dados-nota {
color: var(--ig-muted);
font-weight: var(--ig-fw);
font-size: var(--ig-fs-sm);
}
.pd-dados-nota::before {
content: " · ";
color: var(--ig-line-strong);
}
@media (max-width: 560px) {
/* ROTULO EM CIMA, VALOR EMBAIXO. Abaixo de ~560px os 160px de rotulo
comem metade da tela e o dominio volta a quebrar - exatamente o que
esta secao veio resolver. */
.pd-dados > div {
grid-template-columns: 1fr;
gap: 2px;
}
.pd-dados { gap: var(--ig-sp-4); }
}
/* -----------------------------------------------------------------------------
3.5 A NOTA DE ATUALIZACAO AUTOMATICA
Discreta, no pe do cartao dos passos. Ela existe para o cliente NAO ficar
recarregando a pagina - e para nao desconfiar que a tela travou quando nada
muda por meia hora.
O DEFEITO QUE ESTA SECAO CORRIGE, porque ele era invisivel no CSS e gritante
na tela: a regra era `.pd-auto span`, e a nota tem DOIS spans - o ponto e a
FRASE. A frase levava os mesmos 7px de largura, 7px de altura, fundo verde,
`border-radius:999px` e `flex:none` do ponto. Resultado: "Atualizando
automaticamente" espremido numa coluna de 7 pixels, transbordando por cima do
proprio ponto, em duas linhas tortas. Seletor por elemento em bloco que pode
ganhar um segundo elemento e uma armadilha - agora o ponto tem nome
(`.pd-auto-ponto`) e a frase e so texto.
E ela deixou de ser texto solto: virou uma ETIQUETA de estado, com fundo
verde claro e canto arredondado. Uma frase cinza de 12px perdida sob uma
linha divisoria parece sobra de layout; a mesma frase numa pilula parece o
que e - o sinal de que a pagina esta viva.
----------------------------------------------------------------------------- */
.pd-auto {
display: inline-flex;
align-items: center;
gap: var(--ig-sp-2);
margin: var(--ig-sp-5) 0 0;
padding: 7px var(--ig-sp-3) 7px var(--ig-sp-3);
border-radius: 999px;
background: var(--ig-success-soft);
font-size: var(--ig-fs-xs);
font-weight: var(--ig-fw-medium);
line-height: 1.35;
/* `-ink`, e nao `--ig-success`: o verde base da 3.1:1 sobre o verde claro e
reprova em contraste para texto pequeno. */
color: var(--ig-success-ink);
}
.pd-auto-ponto {
width: 7px;
height: 7px;
border-radius: 999px;
background: var(--ig-success);
flex: none;
animation: pd-pulso 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.pd-auto-ponto { animation: none; }
}
@media (max-width: 560px) {
.pd-passo { grid-template-columns: 24px 1fr; gap: var(--ig-sp-3); }
.pd-passo::before { left: 11px; }
.pd-marca { width: 24px; height: 24px; }
.pd-marca svg { width: 13px; height: 13px; }
}
/* -----------------------------------------------------------------------------
3.6 O TITULO DE CADA CARTAO, e o texto so para leitor de tela
Os cartoes desta pagina nao tinham nome nenhum - eram quatro caixas brancas
em sequencia. Sem cabecalho, quem usa leitor de tela nao tem por onde pular,
e quem le com os olhos nao sabe o que aquela lista e.
`