/* ========================================================================= PlayCash — base visual compartilhada Esta folha é o vocabulário comum das quatro frentes de tela. Tudo que aparece em mais de uma tela mora aqui, com nome; o que é de uma tela só mora em css/telas/*.css, que carrega depois desta e vence no empate. Regras da casa: - Nenhum hex, nenhum rgba, nenhum nome de cor neste arquivo. Cor vem de tokens.css. Onde é preciso um véu translúcido, color-mix() em cima de um token resolve — assim o véu acompanha o tema sozinho. - color-mix() SÓ dentro de @supports, nunca solto. A regra base fica com um token sólido; o véu entra depois, no bloco @supports. Escrever as duas declarações na mesma regra não segura nada: a segunda tem var() dentro, o navegador antigo só descobre que não entende na hora de computar, e aí a propriedade cai para o valor inicial — fundo transparente, traço nenhum — em vez de voltar para a declaração de cima. Aparelho popular é o público: bloco sem fundo é bloco sumido. - Espaço, raio, tamanho de texto, peso, tempo e curva também vêm de token. px solto só onde não existe token (diâmetro de avatar, traço de 1px). - Azul é o chassi. Verde é dinheiro entrando. Vermelho é risco. Ouro é conquista. Saída de saldo NÃO é vermelha: sair para o Pix é bom. - Marca como TEXTO usa --marca-texto (no escuro --marca não passa AA como texto). Marca como PREENCHIMENTO usa --marca. ========================================================================= */ /* =============================================================== 1. RESET */ *, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } /* Regra de autor com `display` vence o [hidden] do navegador. Sem esta linha o topo e a barra inferior aparecem na tela de entrada. Já aconteceu. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; color-scheme: light dark; } body { margin: 0; background: var(--fundo); color: var(--texto); font-family: var(--fonte); font-size: var(--txt-corpo); line-height: var(--altura-normal); -webkit-font-smoothing: antialiased; overscroll-behavior-y: contain; } /* Nenhuma largura pode empurrar a página para os lados entre 320 e 430px. `clip` é o certo; `hidden` fica de rede para o celular velho que não conhece. */ body, .app { max-width: 100%; overflow-x: hidden; overflow-x: clip; } /* Enquanto modal ou folha está aberta, o fundo não rola. Quem liga e desliga é fx.js — a classe é do , não de tela. */ body.sem-rolagem { overflow: hidden; } h1, h2, h3, h4, p, figure, ul, ol { margin: 0; } ul, ol { padding: 0; list-style: none; } img, svg, canvas { max-width: 100%; } button, input, select, textarea { font-family: inherit; } button { color: inherit; } a { color: var(--marca-texto); } /* Quebra de palavra longa (e-mail, chave aleatória) em vez de rolagem lateral. */ p, span, strong, li, td, th, label { overflow-wrap: anywhere; } /* ========================================================== 2. TIPOGRAFIA */ .h1 { font-size: var(--txt-titulo); font-weight: var(--peso-forte); letter-spacing: var(--letra-titulo); line-height: var(--altura-apertada); } .h2 { font-size: var(--txt-forte); font-weight: var(--peso-forte); line-height: var(--altura-apertada); } .h3 { font-size: var(--txt-corpo); font-weight: var(--peso-medio); line-height: var(--altura-apertada); } .destaque-titulo { font-size: var(--txt-destaque); font-weight: var(--peso-extra); letter-spacing: var(--letra-titulo); line-height: var(--altura-apertada); } .nota { color: var(--texto-fraco); font-size: var(--txt-nota); } .nota-fraca { color: var(--texto-3); font-size: var(--txt-mini); } .centro { text-align: center; } .direita { text-align: right; } .forte { font-weight: var(--peso-forte); } /* Rótulo em caixa-alta: grupo de dia no extrato, título de bloco pequeno. */ .rotulo-caixa, .grupo-dia { font-size: var(--txt-mini); font-weight: var(--peso-forte); text-transform: uppercase; letter-spacing: var(--letra-rotulo); color: var(--texto-fraco); } .grupo-dia { margin-top: var(--e-2); } /* Todo número em R$ é tabular: sem isto o saldo dança na contagem, e saldo que dança parece saldo que muda sozinho. */ .valor, .num, .topo-saldo-valor, .cartao-saldo-valor, .valor-mais, .valor-menos, .ganho-total, .selo-ganho, .stat-valor, .palco-tempo, .linha-resumo strong, .codigo, .agregado-pct { font-variant-numeric: tabular-nums; } .valor-grande { font-size: var(--txt-valor); font-weight: var(--peso-extra); line-height: var(--altura-apertada); letter-spacing: var(--letra-titulo); font-variant-numeric: tabular-nums; } .valor-mais { color: var(--verde); white-space: nowrap; } /* Saída de saldo não é perda: o dinheiro foi para o Pix da própria pessoa. */ .valor-menos { color: var(--texto-fraco); white-space: nowrap; } .link { background: none; border: 0; color: var(--marca-texto); font-weight: var(--peso-medio); font-size: var(--txt-nota); cursor: pointer; padding: var(--e-3) var(--e-2); margin: calc(var(--e-3) * -1) calc(var(--e-2) * -1); /* alvo sem mexer no layout */ min-height: var(--toque-min-compacto); } .link-perigo { color: var(--vermelho); } .mono { font-family: var(--fonte-mono); letter-spacing: .04em; } /* =============================================================== 3. TOPO */ /* A BARRA É ESCURA, E ISSO É POR CAUSA DA MARCA. Ela era dourada, com um degradê de --marca para --marca-2, e funcionava enquanto a marca ali era um ícone de traço com o nome escrito ao lado — traço escuro sobre dourado se lê bem. A arte real da marca é OURO SOBRE PRETO: posta naquele fundo, a moeda dourada encostava no dourado da barra e desaparecia. Trocar a cor da barra é o que devolve o contraste que a marca foi desenhada para ter. O carvão quente daqui é o mesmo --superficie do resto do app, então a barra deixa de ser uma faixa de outra cor no alto e passa a ser o app. */ .topo { position: fixed; inset: 0 0 auto 0; z-index: 40; height: calc(var(--topo-h) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) var(--pad-tela) 0; display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); background: linear-gradient(140deg, var(--barra-2) 0%, var(--barra) 100%); color: var(--sobre-barra); border-bottom: 1px solid var(--barra-borda); box-shadow: var(--sombra-topo); } /* A arte da marca, com o preto dela dissolvido. O arquivo é ouro sobre preto, e recortar o fundo à mão comeria o brilho que vaza da moeda — é justamente esse halo que faz a peça parecer metal. `screen` resolve os dois: preto sobre preto some, e o brilho continua brilhando. Só funciona porque a barra é escura; foi o que decidiu a cor dela acima. */ .topo-logo { height: 34px; width: auto; display: block; mix-blend-mode: screen; } /* É um