/* ========================================================================== SISTEMA VISUAL — Plataforma ConectaOn Arquivo unico, CSS escrito a mao. Sem build, sem framework, sem CDN. Ordem do arquivo: 0. Fontes da marca 5. Componentes 1. Fichas (variaveis) 6. Estados (carregando, vazio, erro, alcada) 2. Reset e base 7. Celular 3. Tipografia 8. Utilitarios 4. Layout e grade ------------------------------------------------------------------------ A REGRA QUE SEGURA O SISTEMA INTEIRO VIOLETA = ACAO. So aparece em coisa que a pessoa clica para fazer algo, no link, e no "voce esta aqui". Nunca em aviso, nunca em grafico. Se o violeta virar "chamar atencao para qualquer coisa", ele para de significar "aperte aqui". LARANJA = APOIO. Contador, destaque de ambiente, calor da marca. Nunca e o botao principal. ------------------------------------------------------------------------ O QUE MUDOU EM RELACAO A VERSAO ANTERIOR, E POR QUE A folha antiga foi construida sobre uma leitura ERRADA da marca: azul #1a0a5e com laranja #ff6b35 como cor de acao. A identidade oficial da ConectaOn (o mesmo brandbook da epoca da ConectaSaude) e outra: #0C0047 roxo escuro a base, a cor do wordmark #A24CFF violeta o destaque, a cor "on" #E77642 laranja apoio #EFEFEF cinza claro fundo #D3D3D3 cinza bordas Entao: o roxo escuro virou a base, o VIOLETA virou a acao, e o laranja desceu para apoio. Quem procurar --marca-azul e --marca-roxo vai achar: ficaram como apelido da cor nova, para nenhuma tela quebrar de repente. Sobre os dois cinzas do brandbook: #EFEFEF e #D3D3D3 sao cinzas PUROS, sem matiz. Cinza puro encostado num violeta saturado parece defeito de monitor — o olho le o cinza como esverdeado. Entao a escala de neutros daqui tem a MESMA CLARIDADE desses dois (--n100 e --n300 sao os equivalentes) com um vies do matiz 250, que e exatamente o matiz do #0C0047. A marca continua sendo obedecida; o que muda e que ela para de brigar consigo mesma na tela. ========================================================================== */ /* ========================================================================== 0. FONTES DA MARCA O brandbook e literal: "A fonte do logotipo e a Inter ExtraBold. Para textos longos, utilizar a Poppins." Entao o papel de cada uma aqui: Inter -> marca, titulo, numero-heroi. E a letra do wordmark. Poppins -> texto corrido, rotulo, botao, tabela. ------------------------------------------------------------------------ LEIA ISTO ANTES DE PROCURAR BUG DE FONTE OS ARQUIVOS .woff2 NAO ESTAO NO REPOSITORIO. Nao foram baixados: esta sessao nao tinha autorizacao para baixar arquivo para a maquina, e preferimos deixar o buraco a vista a mentir que embutimos. Enquanto os arquivos nao existirem, o navegador simplesmente ignora cada @font-face que nao carrega e cai sozinho na proxima familia da pilha declarada em --fonte-marca / --fonte-texto. O sistema fica bonito e legivel; so nao fica com a letra da marca. Nada quebra. PARA EMBUTIR DE VERDADE (5 minutos, uma vez so): 1. Baixe as duas familias. As duas sao SIL Open Font License, o que permite hospedar no proprio servidor: Inter https://github.com/rsms/inter/releases (ou Google Fonts) Poppins https://fonts.google.com/specimen/Poppins Se pegar do Google Fonts, o jeito rapido de obter woff2 ja recortado no alfabeto latino e abrir a URL da familia com um User-Agent de navegador moderno e ler os enderecos .woff2 de dentro do CSS que ele devolve. 2. Renomeie e coloque exatamente nestes nomes, em servidor/estatico/fontes/ : inter-600.woff2 inter-700.woff2 inter-800.woff2 poppins-400.woff2 poppins-500.woff2 poppins-600.woff2 poppins-700.woff2 3. Pronto. Nao precisa mexer em CSS nenhum: as regras abaixo ja apontam para esses caminhos. font-display: swap em todas: o texto aparece na hora com a fonte do sistema e troca quando a da marca chega. O contrario (texto invisivel esperando a fonte) e inaceitavel numa tela de elegibilidade, onde alguem pode estar com um paciente na frente. ========================================================================== */ @font-face { font-family: "Inter ConectaOn"; src: url("/estatico/fontes/inter-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Inter ConectaOn"; src: url("/estatico/fontes/inter-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Inter ConectaOn"; src: url("/estatico/fontes/inter-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins ConectaOn"; src: url("/estatico/fontes/poppins-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins ConectaOn"; src: url("/estatico/fontes/poppins-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins ConectaOn"; src: url("/estatico/fontes/poppins-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins ConectaOn"; src: url("/estatico/fontes/poppins-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* ========================================================================== 1. FICHAS ========================================================================== */ :root { /* --- cores da marca, cruas e intocadas, direto do brandbook ---------- */ --marca-roxo-esc: #0c0047; /* matiz 250 — a base, o wordmark */ --marca-violeta: #a24cff; /* matiz 269 — o destaque, a cor "on" */ --marca-laranja: #e77642; /* matiz 19 — apoio */ --marca-cinza-clr: #efefef; /* referencia de claridade do brandbook */ --marca-cinza: #d3d3d3; /* referencia de claridade do brandbook */ /* Apelidos da folha antiga. Ficam para nenhuma tela quebrar enquanto a equipe atualiza. Sao APELIDO, nao cor nova: nao use em codigo novo. */ --marca-azul: var(--marca-roxo-esc); --marca-azul-esc: var(--marca-roxo-esc); --marca-roxo: var(--marca-violeta); --marca-roxo-clr: var(--marca-violeta); /* --- neutros com vies do roxo escuro da marca ------------------------ Todos no matiz 250, o mesmo do #0C0047. A saturacao sobe nas pontas (perto do branco e perto do preto) porque e ali que a cor desaparece se voce nao empurrar. --n100 tem a claridade do #EFEFEF do brandbook e --n300 a do #D3D3D3. */ --n0: #fcfbff; --n25: #f8f7fd; --n50: #f3f1fa; --n100: #eceaf6; /* ~ #EFEFEF do brandbook, com matiz */ --n200: #dbd8eb; --n300: #cbc7de; /* ~ #D3D3D3 do brandbook, com matiz */ --n400: #a19cba; --n450: #8c86a9; --n500: #6e6693; --n600: #565077; --n700: #3d375d; --n800: #292348; --n900: #191334; --n950: #0f0a26; --n1000: #08051a; /* --- espaco: escala de 4 em 4 --------------------------------------- Mais generosa que a anterior. A tela estava apertada: cartao com 20px de folga, grade com 16px de respiro e secao com 24px de margem faziam tudo encostar em tudo. Aqui o padrao de cartao subiu para 24, a grade para 20 e a margem de secao para 32. */ --e1: 0.25rem; /* 4px */ --e2: 0.5rem; /* 8px */ --e3: 0.75rem; /* 12px */ --e4: 1rem; /* 16px */ --e5: 1.25rem; /* 20px */ --e6: 1.5rem; /* 24px — folga padrao de cartao */ --e7: 1.75rem; /* 28px */ --e8: 2rem; /* 32px — margem entre secoes */ --e10: 2.5rem; /* 40px */ --e12: 3rem; /* 48px */ --e14: 3.5rem; /* 56px */ --e16: 4rem; /* 64px */ --e20: 5rem; /* 80px — folga de estado vazio, que precisa de ar */ /* --- cantos ---------------------------------------------------------- 8px em controle (botao, campo), 12px em cartao e tabela, 16px em modal. Abaixo de 8 parece caixa de dialogo de 2009; acima de 16 em cartao pequeno o canto come o conteudo. */ --r1: 6px; --r2: 8px; --r3: 12px; --r4: 16px; --r5: 20px; --r-pilula: 999px; /* --- tipografia ------------------------------------------------------ A primeira familia de cada pilha e a da marca (secao 0). O resto e rede de seguranca para quando o .woff2 ainda nao esta no servidor: Inter -> Segoe UI Variable / system-ui sao as mais parecidas Poppins -> Avenir Next (todo Mac) e Century Gothic (vem com o Office, que o RH das clientes tem) sao as geometricas ja instaladas que chegam perto */ --fonte-marca: "Inter ConectaOn", "Inter", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --fonte-texto: "Poppins ConectaOn", "Poppins", "Avenir Next", "Avenir", "Century Gothic", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif; /* Numero, CPF, CNPJ, codigo, chave de API, valor em reais. Largura fixa por caractere: uma coluna de CPF vira uma coluna reta, e o olho acha o digito diferente sem ler o numero todo. */ --fonte-numero: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, "Cascadia Mono", "Cascadia Code", Consolas, "Roboto Mono", "DejaVu Sans Mono", monospace; --t-xs: 0.75rem; /* 12px — rotulo em caixa alta, nota de rodape */ --t-sm: 0.8125rem; /* 13px — celula de tabela densa, legenda */ --t-base: 0.875rem; /* 14px — PADRAO do sistema */ --t-md: 1rem; /* 16px — texto corrido, campo no celular */ --t-lg: 1.125rem; /* 18px — subtitulo */ --t-xl: 1.5rem; /* 24px — titulo de secao */ --t-2xl: 1.875rem; /* 30px — titulo de pagina */ --t-3xl: 2.5rem; /* 40px — numero de cartao */ --t-4xl: 3.25rem; /* 52px — resposta da consulta de elegibilidade*/ --p-normal: 400; --p-medio: 500; --p-forte: 600; --p-titulo: 700; --p-marca: 800; /* Inter ExtraBold: so no wordmark, como manda o brandbook */ --lh-titulo: 1.15; --lh-densa: 1.4; --lh-normal: 1.6; --entreletra-titulo: -0.018em; /* geometrica grande respira melhor apertada */ --entreletra-marca: -0.028em; /* o wordmark e mais fechado ainda */ --entreletra-rotulo: 0.07em; /* caixa alta pequena precisa de ar */ /* --- medidas do esqueleto ------------------------------------------- */ --largura-app: 1480px; --largura-leitura: 68ch; /* texto corrido nunca passa disso */ --largura-forma: 34rem; /* formulario de uma coluna */ --lateral: 272px; --lateral-fechada: 76px; --topo: 64px; --toque: 44px; /* area minima de toque no celular */ /* Duas velocidades. A curta e para cor e borda, que precisam responder na hora. A longa e para sombra e deslocamento, que ficam elegantes quando chegam um pouquinho depois do dedo. */ --transicao: 150ms cubic-bezier(.4, 0, .2, 1); --transicao-lenta: 260ms cubic-bezier(.2, .7, .3, 1); color-scheme: light; } /* -------------------------------------------------------------------------- TEMA CLARO — os papeis Neutro nao e cor, e funcao. Aqui cada neutro ganha um nome de trabalho. Os numeros de contraste ao lado sao medidos, nao chutados. -------------------------------------------------------------------------- */ :root { --fundo-pagina: var(--n50); --fundo-cartao: #ffffff; --fundo-elevado: #ffffff; /* modal, menu suspenso */ --fundo-sutil: var(--n50); /* cabecalho de tabela, area de apoio */ --fundo-zebra: #f7f6fc; --fundo-hover: #eeedf8; --fundo-marcado: #f0e5fd; /* linha selecionada, com tinta do violeta */ --fundo-desab: var(--n100); --texto: var(--n900); /* 17.7:1 no branco */ --texto-2: var(--n600); /* 7.5:1 */ --texto-3: var(--n500); /* 5.3:1 no branco, 4.7:1 no fundo da pagina */ --texto-desab: var(--n400); --texto-inv: #ffffff; --borda: var(--n200); /* separador, sem funcao de leitura */ --borda-forte: var(--n300); --borda-controle: var(--n450); /* 3.4:1 — contorno de campo e botao */ /* --- a cor de acao ----------------------------------------------------- ESTA E A DECISAO MAIS IMPORTANTE DA FOLHA, ENTAO VAI ESCRITA: O violeta da marca, #A24CFF, com texto branco por cima da 4.19:1. Isso REPROVA no AA para texto pequeno, que exige 4.5:1. Medido, nao estimado. Havia tres saidas e escolhemos a primeira: (a) escurecer SO O PREENCHIMENTO do botao, mantendo o matiz exato 269 da marca <- escolhida (b) texto escuro sobre o violeta puro (c) deixar reprovado Por que (a): o botao principal com texto BRANCO e o que a pessoa espera de um botao principal — em qualquer produto que ela use fora daqui e assim. Violeta claro com texto escuro parece selo desligado, nao parece "aperte aqui". E baixar a claridade de 65% para 55% mantendo matiz 269 e saturacao 92% nao muda a familia da cor: o #8823f6 continua sendo, para o olho, o violeta da ConectaOn. O #A24CFF puro nao some: ele fica onde nao precisa carregar texto — anel de foco, barra do item ativo do menu, sublinhado de aba, e o simbolo da marca, que ja vem violeta no proprio arquivo. */ --acao: var(--marca-violeta); /* a cor de marca, sem texto por cima */ --acao-solido: #8823f6; /* preenchimento de botao — branco da 5.8:1 */ --acao-hover: #760aeb; /* 7.0:1 */ --acao-ativo: #6709ce; /* 8.4:1 */ --acao-txt: #7b0df2; /* violeta como TEXTO: 6.6:1 no branco */ --foco: var(--marca-violeta); /* 4.2:1 no branco, 3.7:1 no fundo da pagina */ /* Icone de lupa embutido no CSS. Sem CDN, sem arquivo de imagem, sem fonte de icone: e um SVG dentro da propria variavel. */ --icone-busca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%236e6693' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='6.8' cy='6.8' r='4.4'/%3E%3Cpath d='M10.2 10.2 L13.8 13.8'/%3E%3C/svg%3E"); /* --- sombras em camadas ------------------------------------------------ Tres camadas em vez de uma. Uma sombra so, dura, e o que faz interface parecer de 2014: a borda fica marcada e o objeto parece colado. Com camadas (um contato curto e apertado + uma difusa e larga) o cartao parece flutuar de leve, que e o efeito que Linear e Stripe usam. Todas tingidas do roxo #191334, nunca preto: sombra preta sobre fundo roxeado deixa um halo cinza sujo na borda. */ --sombra1: 0 1px 2px rgba(25, 19, 52, .04), 0 1px 3px rgba(25, 19, 52, .06); --sombra2: 0 1px 2px rgba(25, 19, 52, .04), 0 4px 8px rgba(25, 19, 52, .05), 0 12px 24px rgba(25, 19, 52, .07); --sombra3: 0 2px 4px rgba(25, 19, 52, .05), 0 12px 24px rgba(25, 19, 52, .09), 0 32px 64px rgba(25, 19, 52, .13); /* Halo de acao: o brilho violeta que o botao principal ganha no hover. E o violeta puro da marca aparecendo sem precisar carregar texto. */ --halo-acao: 0 0 0 4px rgba(162, 76, 255, .22); /* --- familias semanticas ------------------------------------------------ Quatro papeis por familia: -txt texto e icone sobre a propria tinta -fundo tinta de fundo do selo e do aviso -borda contorno do selo e do aviso -solido preenchimento cheio (botao perigo, barra de progresso) A distancia de matiz ate o VIOLETA de acao (269) e o que impede a confusao: sucesso 117 graus, aviso 134, erro 83, info 70, apoio 110. O vizinho mais proximo agora e o info (azul 199) — e mesmo ele nunca aparece cheio no formato de botao. Selo e sempre tinta clara com texto escuro; botao e sempre preenchimento cheio. Formatos diferentes, papeis diferentes, sem ambiguidade. */ --ok-txt: #127848; --ok-fundo: #f1fcf6; --ok-borda: #a2d7be; --ok-solido: #0b7f49; --at-txt: #876103; --at-fundo: #fef8e9; --at-borda: #e4cb8b; --at-solido: #da9e07; --erro-txt: #9e1a2b; --erro-fundo: #fdeff1; --erro-borda: #e4aab2; --erro-solido: #ba1c31; --info-txt: #06638e; --info-fundo: #edf8fd; --info-borda: #9ac9df; --info-solido: #0977aa; --acao-fundo: #f6eefe; --acao-borda: #cbb0e8; --neu-txt: var(--n600); --neu-fundo: var(--n100); --neu-borda: var(--n300); --neu-solido: var(--n500); /* Familia de APOIO: o laranja #E77642 do brandbook. Nao e alerta, nao e acao. E o calor da marca: contador do menu, ambiente que nao e producao, o brilho do fundo da tela de entrada. */ --ap-txt: #954018; --ap-fundo: #fdf0ea; --ap-borda: #e5b59e; --ap-solido: #b14a1b; /* Apelidos da familia "roxo" da folha antiga. Ela virou a familia de acao. Apelido, nao cor nova: em codigo novo use --acao-*. */ --roxo-txt: var(--acao-txt); --roxo-fundo: var(--acao-fundo); --roxo-borda: var(--acao-borda); --roxo-solido: var(--acao-solido); /* Texto que fica POR CIMA do preenchimento cheio. */ --sobre-ok: #ffffff; /* 5.1:1 */ --sobre-at: var(--n900); /* ambar cheio com texto branco e ilegivel */ --sobre-erro: #ffffff; /* 6.4:1 */ --sobre-info: #ffffff; /* 5.0:1 */ --sobre-acao: #ffffff; /* 5.8:1 — ver a decisao la em cima */ --sobre-apoio: #ffffff; /* 5.4:1 */ --sobre-roxo: var(--sobre-acao); --sobre-laranja: var(--sobre-apoio); } /* -------------------------------------------------------------------------- TEMA ESCURO Duas regras que mudam tudo: (a) no escuro a hierarquia se inverte: o cartao e MAIS CLARO que a pagina, porque sombra nao existe em fundo preto; (b) cor saturada em fundo escuro vibra e cansa. Toda tinta de fundo do tema escuro e quase preta com o matiz certo, e o texto e que fica claro. -------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { color-scheme: dark; } } :root[data-tema="escuro"] { color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --fundo-pagina: #0c0a18; --fundo-cartao: #141122; --fundo-elevado: #1c182d; --fundo-sutil: #181528; --fundo-zebra: #181625; --fundo-hover: #221e33; --fundo-marcado: #2d1547; --fundo-desab: #1c1a28; --texto: #eae8f3; /* 15.3:1 no cartao */ --texto-2: #b8b5c9; /* 9.3:1 */ --texto-3: #9893ae; /* 6.3:1 */ --texto-desab: #6f698c; --texto-inv: var(--n900); --borda: #2b273f; --borda-forte: #3d3857; --borda-controle: #655e87; /* 3.1:1 no cartao */ /* No escuro o preenchimento pode subir um pouco de claridade sem perder o branco por cima: #9031f6 da 5.3:1. O hover NAO clareia mais que isso — clarear derruba o contraste do texto branco. Ele escurece de leve e ganha o halo violeta, que e o que da a sensacao de relevo em fundo escuro. */ --acao-solido: #9031f6; --acao-hover: #8014f5; --acao-ativo: #6709ce; --acao-txt: #b570ff; /* 5.9:1 no cartao */ --foco: var(--marca-violeta); /* 4.4:1 no cartao */ --halo-acao: 0 0 0 4px rgba(162, 76, 255, .30); --icone-busca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%239893ae' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='6.8' cy='6.8' r='4.4'/%3E%3Cpath d='M10.2 10.2 L13.8 13.8'/%3E%3C/svg%3E"); --sombra1: 0 1px 2px rgba(0,0,0,.5); --sombra2: 0 1px 2px rgba(0,0,0,.45), 0 4px 10px rgba(0,0,0,.5), 0 12px 28px rgba(0,0,0,.38); --sombra3: 0 2px 6px rgba(0,0,0,.5), 0 14px 32px rgba(0,0,0,.55), 0 36px 72px rgba(0,0,0,.5); --ok-txt: #83e2b6; --ok-fundo: #163b2a; --ok-borda: #396f56; --ok-solido: #28c37a; --at-txt: #f5cd66; --at-fundo: #3e3214; --at-borda: #796634; --at-solido: #f0b319; --erro-txt: #f87788; --erro-fundo: #40171c; --erro-borda: #7f3942; --erro-solido: #d62940; --info-txt: #5cc4f5; --info-fundo: #12313f; --info-borda: #326076; --info-solido: #1399d8; --acao-fundo: #2d1547; --acao-borda: #5b3582; --ap-txt: #f0956a; --ap-fundo: #3c2215; --ap-borda: #7b4932; --ap-solido: #de6b35; --neu-txt: #b8b5c9; --neu-fundo: #221e33; --neu-borda: #3d3857; --neu-solido: #655e87; --sobre-ok: var(--n900); --sobre-at: var(--n900); --sobre-erro: #ffffff; --sobre-info: var(--n900); --sobre-acao: #ffffff; --sobre-apoio: var(--n900); --sobre-roxo: var(--sobre-acao); --sobre-laranja: var(--sobre-apoio); } } /* A mesma coisa, forcada pelo atributo. Vem depois para ganhar do @media nos dois sentidos: data-tema="escuro" acende o escuro num aparelho claro, e data-tema="claro" (la em cima, no :root) volta o claro num aparelho escuro. O botao de tema do usuario sempre vence o sistema operacional. */ :root[data-tema="escuro"] { --fundo-pagina: #0c0a18; --fundo-cartao: #141122; --fundo-elevado: #1c182d; --fundo-sutil: #181528; --fundo-zebra: #181625; --fundo-hover: #221e33; --fundo-marcado: #2d1547; --fundo-desab: #1c1a28; --texto: #eae8f3; --texto-2: #b8b5c9; --texto-3: #9893ae; --texto-desab: #6f698c; --texto-inv: var(--n900); --borda: #2b273f; --borda-forte: #3d3857; --borda-controle: #655e87; --acao-solido: #9031f6; --acao-hover: #8014f5; --acao-ativo: #6709ce; --acao-txt: #b570ff; --foco: var(--marca-violeta); --halo-acao: 0 0 0 4px rgba(162, 76, 255, .30); --icone-busca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%239893ae' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='6.8' cy='6.8' r='4.4'/%3E%3Cpath d='M10.2 10.2 L13.8 13.8'/%3E%3C/svg%3E"); --sombra1: 0 1px 2px rgba(0,0,0,.5); --sombra2: 0 1px 2px rgba(0,0,0,.45), 0 4px 10px rgba(0,0,0,.5), 0 12px 28px rgba(0,0,0,.38); --sombra3: 0 2px 6px rgba(0,0,0,.5), 0 14px 32px rgba(0,0,0,.55), 0 36px 72px rgba(0,0,0,.5); --ok-txt: #83e2b6; --ok-fundo: #163b2a; --ok-borda: #396f56; --ok-solido: #28c37a; --at-txt: #f5cd66; --at-fundo: #3e3214; --at-borda: #796634; --at-solido: #f0b319; --erro-txt: #f87788; --erro-fundo: #40171c; --erro-borda: #7f3942; --erro-solido: #d62940; --info-txt: #5cc4f5; --info-fundo: #12313f; --info-borda: #326076; --info-solido: #1399d8; --acao-fundo: #2d1547; --acao-borda: #5b3582; --ap-txt: #f0956a; --ap-fundo: #3c2215; --ap-borda: #7b4932; --ap-solido: #de6b35; --neu-txt: #b8b5c9; --neu-fundo: #221e33; --neu-borda: #3d3857; --neu-solido: #655e87; --sobre-ok: var(--n900); --sobre-at: var(--n900); --sobre-erro: #ffffff; --sobre-info: var(--n900); --sobre-acao: #ffffff; --sobre-apoio: var(--n900); --sobre-roxo: var(--sobre-acao); --sobre-laranja: var(--sobre-apoio); } /* ========================================================================== 2. RESET E BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--fundo-pagina); color: var(--texto); font-family: var(--fonte-texto); font-size: var(--t-base); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; } ul[class], ol[class] { list-style: none; margin: 0; padding: 0; } img, svg, video { max-width: 100%; height: auto; display: block; } button, input, select, textarea { font: inherit; color: inherit; } table { border-collapse: collapse; border-spacing: 0; } hr { border: 0; border-top: 1px solid var(--borda); margin: var(--e8) 0; } a { color: var(--acao-txt); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--transicao); } a:hover { text-decoration-thickness: 2px; } /* --- foco visivel, uma regra so, valendo no sistema inteiro ------------ :focus-visible e nao :focus. Quem clica com o mouse nao ve o anel; quem navega de Tab ve sempre. O anel e desenhado com outline (que acompanha o formato do canto) e nao com box-shadow (que some quando o elemento esta dentro de um container com overflow escondido). O anel usa o #A24CFF PURO. E o lugar em que a cor da marca aparece inteira, sem precisar carregar texto por cima. */ :focus { outline: none; } :focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: var(--r1); } ::selection { background: var(--acao-fundo); color: var(--acao-txt); } /* Pular para o conteudo. Primeiro Tab da pagina, para quem usa teclado nao ter que atravessar o menu lateral inteiro toda vez. */ .pular { position: absolute; left: var(--e4); top: -100px; z-index: 100; padding: var(--e3) var(--e5); background: var(--marca-roxo-esc); color: #fff; font-weight: var(--p-forte); border-radius: var(--r2); text-decoration: none; box-shadow: var(--sombra3); transition: top var(--transicao); } .pular:focus { top: var(--e4); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ========================================================================== 3. TIPOGRAFIA Titulo em Inter (a fonte do logotipo), texto em Poppins (a fonte de texto longo). E o que o brandbook manda, nesta ordem. Uma observacao honesta para quem for refinar as telas depois: a Poppins e mais larga que a media, e numa tabela de 883 linhas a 13px isso custa coluna. Se a operacao reclamar de linha cortada, trocar a familia de .tabela para var(--fonte-marca) e UMA linha, e a Inter foi desenhada justamente para tamanho pequeno em tela. Nao fizemos isso por conta propria porque a fonte de texto do brandbook e a Poppins. ========================================================================== */ h1, h2, h3, h4 { font-family: var(--fonte-marca); font-weight: var(--p-titulo); line-height: var(--lh-titulo); letter-spacing: var(--entreletra-titulo); color: var(--texto); text-wrap: balance; } h1 { font-size: var(--t-2xl); font-weight: var(--p-marca); } h2 { font-size: var(--t-xl); } h3 { font-size: var(--t-lg); font-weight: var(--p-forte); } h4 { font-size: var(--t-md); font-weight: var(--p-forte); } .subtitulo { color: var(--texto-2); font-size: var(--t-md); line-height: var(--lh-normal); margin-top: var(--e2); max-width: var(--largura-leitura); } /* Rotulo pequeno em caixa alta. So funciona com entreletra aberta, senao as maiusculas colam umas nas outras. */ .rotulo { font-size: var(--t-xs); font-weight: var(--p-forte); letter-spacing: var(--entreletra-rotulo); text-transform: uppercase; color: var(--texto-3); } /* Texto corrido nunca passa da largura de leitura. Linha de 200 caracteres faz o olho perder onde estava ao voltar para a esquerda. */ .prosa { max-width: var(--largura-leitura); } .prosa p + p { margin-top: var(--e5); } /* --- numeros ------------------------------------------------------------ .num -> qualquer numero em coluna: alinha o digito, casa a virgula .cod -> CPF, CNPJ, codigo CON-000712, chave de API, uuid */ .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } .cod { font-family: var(--fonte-numero); font-variant-numeric: tabular-nums slashed-zero; font-feature-settings: "tnum" 1, "zero" 1; font-size: 0.95em; /* monoespacada parece maior que a de texto */ letter-spacing: 0; /* CPF e codigo NUNCA quebram em duas linhas. "048.617.234-" numa linha e "05" na outra deixa de ser um numero conferivel e vira duas metades. */ white-space: nowrap; } /* CPF mascarado por alcada */ .dinheiro { font-variant-numeric: tabular-nums; font-weight: var(--p-medio); white-space: nowrap; } .dinheiro::before { content: "R$ "; color: var(--texto-3); font-weight: var(--p-normal); } .negativo { color: var(--erro-txt); } /* ========================================================================== 4. LAYOUT E GRADE ========================================================================== */ /* O esqueleto: menu lateral fixo + area de trabalho. grid-template-columns com variavel para o menu colapsar sem JS de layout. */ .app { display: grid; grid-template-columns: var(--lateral) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; } .app[data-menu="fechado"] { --lateral: var(--lateral-fechada); } .area { min-width: 0; /* sem isto a tabela larga estoura a grade */ display: flex; flex-direction: column; } .conteudo { flex: 1; width: 100%; max-width: var(--largura-app); margin-inline: auto; padding: var(--e8); /* era 24px; o briefing pede respiro */ padding-bottom: var(--e14); /* o fim da pagina nao encosta na borda */ } /* Cabecalho da pagina: titulo a esquerda, acoes a direita, quebra no celular */ .pagina-topo { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--e5); margin-bottom: var(--e8); } .pagina-acoes { display: flex; flex-wrap: wrap; gap: var(--e3); } /* Grade de conteudo. 12 colunas so quando faz falta; no resto, auto-fit, que se resolve sozinha sem media query. */ .grade { display: grid; gap: var(--e5); } .grade-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .grade-auto { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .grade-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); } .col-4 { grid-column: span 4; } .col-8 { grid-column: span 8; } .col-12 { grid-column: span 12; } .pilha { display: flex; flex-direction: column; gap: var(--e5); } .linha { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; } /* ========================================================================== 5. COMPONENTES ========================================================================== */ /* -------------------------------------------------------------------------- 5.1 BOTAO O primario e o violeta da marca escurecido o suficiente para carregar texto branco (a decisao esta escrita por extenso na secao 1, junto de --acao-solido). No hover ele escurece mais um degrau e acende o halo com o #A24CFF puro: e ali que o violeta original aparece inteiro. -------------------------------------------------------------------------- */ .bt { display: inline-flex; align-items: center; justify-content: center; gap: var(--e2); min-height: 40px; padding: 0 var(--e5); border: 1px solid transparent; border-radius: var(--r2); background: transparent; font-family: var(--fonte-texto); font-size: var(--t-base); font-weight: var(--p-forte); line-height: 1; letter-spacing: -0.005em; white-space: nowrap; cursor: pointer; text-decoration: none; transition: background var(--transicao), border-color var(--transicao), color var(--transicao), box-shadow var(--transicao-lenta), transform var(--transicao); } .bt:active { transform: translateY(1px); } .bt[disabled], .bt[aria-disabled="true"] { cursor: not-allowed; opacity: 1; /* opacity apaga a borda junto: nao serve */ background: var(--fundo-desab); border-color: var(--borda); color: var(--texto-desab); transform: none; box-shadow: none; } /* primario — a acao que a tela existe para fazer. UM por tela. */ .bt-1 { background: var(--acao-solido); color: var(--sobre-acao); box-shadow: var(--sombra1); } .bt-1:hover:not([disabled]):not([aria-disabled="true"]) { background: var(--acao-hover); box-shadow: var(--sombra2), var(--halo-acao); } .bt-1:active:not([disabled]) { background: var(--acao-ativo); box-shadow: var(--sombra1); } /* secundario — a acao alternativa, legitima, so nao e a principal */ .bt-2 { background: var(--fundo-cartao); border-color: var(--borda-controle); color: var(--texto); box-shadow: var(--sombra1); } .bt-2:hover:not([disabled]):not([aria-disabled="true"]) { background: var(--fundo-hover); border-color: var(--texto-3); box-shadow: var(--sombra2); } /* perigo — inativar, excluir, cancelar lote. Vermelho cheio, nunca violeta: se destruir e violeta igual a confirmar, mais dia menos dia alguem erra. */ .bt-perigo { background: var(--erro-solido); color: var(--sobre-erro); box-shadow: var(--sombra1); } .bt-perigo:hover:not([disabled]) { filter: brightness(.92); box-shadow: var(--sombra2); } /* fantasma — acao de apoio, cabe em barra de ferramentas e dentro de linha */ .bt-fantasma { color: var(--texto-2); } .bt-fantasma:hover:not([disabled]) { background: var(--fundo-hover); color: var(--texto); } /* tamanhos */ .bt-p { min-height: 32px; padding: 0 var(--e3); font-size: var(--t-sm); } .bt-g { min-height: 48px; padding: 0 var(--e7); font-size: var(--t-md); border-radius: var(--r2); } .bt-cheio { width: 100%; } /* botao so de icone: o quadrado precisa ser quadrado */ .bt-icone { padding: 0; width: 40px; min-height: 40px; } .bt-icone.bt-p { width: 32px; min-height: 32px; } /* grupo colado */ /* -------------------------------------------------------------------------- 5.2 CAMPO DE FORMULARIO -------------------------------------------------------------------------- */ .campo { display: flex; flex-direction: column; gap: var(--e2); } .campo > label { font-size: var(--t-sm); font-weight: var(--p-forte); color: var(--texto); letter-spacing: -0.003em; } .campo .obrigatorio { color: var(--erro-txt); margin-left: 2px; } /* A dica vem ANTES do campo, nao depois. Quem le com leitor de tela ouve a regra antes de digitar, e nao depois de errar. */ .campo .dica { font-size: var(--t-sm); color: var(--texto-2); margin-top: -2px; } .entrada, .selecao, .area-texto { width: 100%; min-height: 40px; padding: var(--e2) var(--e3); background: var(--fundo-cartao); color: var(--texto); border: 1px solid var(--borda-controle); border-radius: var(--r2); font-size: 0.9375rem; /* 15px: densidade no computador */ line-height: 1.4; transition: border-color var(--transicao), box-shadow var(--transicao), background var(--transicao); } .area-texto { min-height: 112px; resize: vertical; padding: var(--e3); } .entrada::placeholder, .area-texto::placeholder { color: var(--texto-3); } .entrada:hover:not([disabled]), .selecao:hover:not([disabled]) { border-color: var(--texto-3); } .entrada:focus, .selecao:focus, .area-texto:focus { outline: none; border-color: var(--foco); box-shadow: 0 0 0 3px color-mix(in srgb, var(--foco) 26%, transparent); } /* rede de seguranca para navegador sem color-mix */ @supports not (color: color-mix(in srgb, red, blue)) { .entrada:focus, .selecao:focus, .area-texto:focus { outline: 3px solid var(--foco); outline-offset: 1px; } } .entrada[disabled], .selecao[disabled], .area-texto[disabled] { background: var(--fundo-desab); color: var(--texto-desab); border-color: var(--borda); cursor: not-allowed; } .entrada[readonly] { background: var(--fundo-sutil); } /* Campo de CPF, codigo e chave: monoespacado ja na digitacao, para o usuario conferir digito por digito enquanto escreve. */ .entrada.cod { font-family: var(--fonte-numero); letter-spacing: .02em; } /* seta do select, desenhada em CSS para nao depender de imagem */ .selecao { appearance: none; padding-right: var(--e8); background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 18px center, right 13px center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } /* CAMPO COM ERRO — e o que este bloco pinta AINDA NAO E USADO por formulario nenhum. O comentario antigo afirmava "tem borda grossa, texto de erro com icone, e aria-invalid no HTML". O `aria-invalid` NAO EXISTE em template nenhum, e `data-erro` e `class="erro"` tambem nao: hoje o erro aparece como faixa no TOPO da pagina (`recado-erro`, `aviso-erro`, 19 usos), e nao ao lado do campo que errou. Isso importa por acessibilidade: sem `aria-invalid`, o leitor de tela nao anuncia QUAL campo esta errado — a pessoa ouve a faixa do topo e volta a procurar. O bloco fica porque e o desenho certo para quando os formularios marcarem o campo; o que sai e a afirmacao de que ja marcam. */ .campo[data-erro] .entrada, .campo[data-erro] .selecao, .campo[data-erro] .area-texto, .entrada[aria-invalid="true"] { border-color: var(--erro-solido); border-width: 2px; padding: calc(var(--e2) - 1px) calc(var(--e3) - 1px); } .campo .erro { display: flex; align-items: flex-start; gap: var(--e1); font-size: var(--t-sm); font-weight: var(--p-medio); color: var(--erro-txt); } .campo .erro::before { content: "!"; flex: none; font-weight: var(--p-titulo); } /* marcar e escolher */ .marcar { display: flex; align-items: flex-start; gap: var(--e3); cursor: pointer; } .marcar input[type="checkbox"], .marcar input[type="radio"] { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--acao-solido); /* pinta o controle nativo, sem redesenhar */ cursor: pointer; } .marcar span { font-size: var(--t-base); } /* busca com lupa embutida */ /* A lupa e DESENHO DE FUNDO DO PROPRIO CAMPO, nao um enfeite posicionado por cima do grupo. Assim ela fica centrada sozinha, com ou sem rotulo em cima, e continua certa quando o campo cresce para 44px no celular. */ .busca .entrada { padding-left: var(--e10); background-image: var(--icone-busca); background-repeat: no-repeat; background-position: left var(--e3) center; background-size: 16px 16px; } /* o X nativo do type=search encosta na borda no Chrome */ .busca .entrada[type="search"]::-webkit-search-cancel-button { margin-right: 2px; } /* barra de filtro */ .filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e4); padding: var(--e5) var(--e6); background: var(--fundo-cartao); border: 1px solid var(--borda); border-radius: var(--r3); box-shadow: var(--sombra1); margin-bottom: var(--e6); } .filtros .campo { min-width: 170px; flex: 1 1 170px; } .filtros .busca { flex: 2 1 300px; } /* -------------------------------------------------------------------------- 5.3 SELO DE SITUACAO Seis situacoes, seis matizes, e nenhum deles e o violeta CHEIO de acao: Ativo verde 152 Inativo neutro 250 (o proprio cinza roxeado) Suspenso ambar 43 Pendente de envio ciano 199 Com erro vermelho 352 Aguardando correcao violeta 269, em tinta clara Sobre o ultimo, que e o unico discutivel: agora que a acao e violeta, por que "Aguardando correcao" continua violeta? Porque o formato resolve. Selo e SEMPRE tinta clara com texto escuro e canto de pilula; botao e SEMPRE preenchimento cheio e canto de 8px. Ninguem confunde uma pilula lilas pastel com um botao violeta solido, do mesmo jeito que ninguem confunde um adesivo com uma maçaneta. A alternativa seria pintar de laranja de apoio, e ela e PIOR: o laranja #E77642 (matiz 19) fica a 24 graus do ambar do "Suspenso" (matiz 43), e dois selos vizinhos quase da mesma cor e exatamente o erro que custa caro numa lista. Se ainda assim quiserem o laranja, e trocar --acao-* por --ap-* na regra .selo-correcao, uma linha. Todo selo tem PONTO colorido + TEXTO. Quem nao distingue verde de vermelho (8% dos homens) le a palavra. Cor sozinha nunca carrega o significado. -------------------------------------------------------------------------- */ .selo { display: inline-flex; align-items: center; gap: var(--e2); padding: 4px var(--e3) 4px var(--e2); border: 1px solid; border-radius: var(--r-pilula); font-size: var(--t-xs); font-weight: var(--p-forte); line-height: 1.4; white-space: nowrap; vertical-align: middle; } .selo::before { content: ""; flex: none; width: 6px; height: 6px; margin-left: var(--e1); border-radius: 50%; background: currentColor; } .selo-sem-ponto::before { display: none; } .selo-sem-ponto { padding-left: var(--e3); } .selo-ativo { color: var(--ok-txt); background: var(--ok-fundo); border-color: var(--ok-borda); } .selo-inativo { color: var(--neu-txt); background: var(--neu-fundo); border-color: var(--neu-borda); } .selo-suspenso { color: var(--at-txt); background: var(--at-fundo); border-color: var(--at-borda); } .selo-pendente { color: var(--info-txt); background: var(--info-fundo); border-color: var(--info-borda); } .selo-erro { color: var(--erro-txt); background: var(--erro-fundo); border-color: var(--erro-borda); } .selo-correcao { color: var(--acao-txt); background: var(--acao-fundo); border-color: var(--acao-borda); } /* ===================================================================== * FORMULARIO EM LINHA * * Usei estas quatro classes nas telas de Contrato e de Scans achando que * existiam. Nao existiam: os campos ficavam empilhados na largura toda, o * titulo do cartao brigava com o campo ao lado, e o botao "Ver" ficava orfao * embaixo do campo de competencia. * * E a segunda vez nesta rodada que inventei classe (a primeira foi .mini-num). * A licao: escrever a regra ANTES de usar no template, ou conferir depois — e * agora ha um teste varrendo classe usada e nao definida. * ===================================================================== */ .linha-campos { display: flex; flex-wrap: wrap; align-items: flex-end; /* alinha pelo campo, e nao pelo rotulo */ gap: var(--e3) var(--e4); } .linha-campos > .bt { flex: none; } .campo-inline { display: flex; flex-direction: column; gap: 2px; min-width: 0; /* deixa encolher em vez de vazar do cartao */ } .campo-inline > input, .campo-inline > select { width: 100%; } /* `cresce` e o campo que fica com a folga que sobrar: o texto longo (motivo, nome) em vez do campo curto (data, valor). */ .campo-inline.cresce { flex: 1 1 14rem; } /* Caixa de marcar com o texto ao lado, e nao em cima: aqui o rotulo E o controle sao uma frase so ("E um segundo scan no mesmo dia"). */ .campo-inline.campo-caixa { flex-direction: row; align-items: center; gap: var(--e2); padding-bottom: 10px; /* encosta na linha de base dos outros campos */ } .campo-inline.campo-caixa > input { width: auto; } /* No CELULAR o cabecalho do cartao empilha. Sem isto, "Fatura de 07/2026" quebrava em duas linhas ao lado do campo de competencia e o botao ficava solto embaixo — o pior arranjo possivel dos tres elementos. */ @media (max-width: 640px) { .cartao-topo { flex-direction: column; align-items: stretch; gap: var(--e3); } /* O botao NAO vira largura cheia: "Ver" ocupando uma linha inteira, sem moldura, lia-se como texto solto e nao como botao. Ele fica ao lado do campo, que e onde a mao vai depois de escolher a competencia. */ .cartao-topo .linha-campos { align-items: flex-end; } .campo-inline.cresce { flex: 1 1 100%; } } /* Selo de alerta na linha: CPF invalido, E-mail placeholder, Sem empresa, Nome divergente. Sao FATOS sobre o dado, nao a situacao do cadastro, entao sao quadrados, sem ponto e sem preenchimento. Formato diferente = categoria diferente, mesmo antes de ler. */ .marca-alerta { display: inline-flex; align-items: center; gap: var(--e1); padding: 2px var(--e2); border: 1px dashed var(--at-borda); border-radius: var(--r1); background: transparent; color: var(--at-txt); font-size: var(--t-xs); font-weight: var(--p-medio); white-space: nowrap; } .marca-alerta-grave { border-color: var(--erro-borda); color: var(--erro-txt); border-style: solid; } /* Selo de perfil e de alcada */ .selo-perfil { display: inline-block; padding: 3px var(--e2); border-radius: var(--r1); background: var(--fundo-sutil); border: 1px solid var(--borda); color: var(--texto-2); font-size: var(--t-xs); font-weight: var(--p-forte); letter-spacing: var(--entreletra-rotulo); text-transform: uppercase; } /* -------------------------------------------------------------------------- 5.4 CARTAO e CARTAO DE NUMERO -------------------------------------------------------------------------- */ .cartao { background: var(--fundo-cartao); border: 1px solid var(--borda); border-radius: var(--r3); box-shadow: var(--sombra1); } .cartao-corpo { padding: var(--e6); } .cartao-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--e4); padding: var(--e5) var(--e6); border-bottom: 1px solid var(--borda); } .cartao-topo h3 { font-size: var(--t-md); } .cartao-pe { padding: var(--e4) var(--e6); border-top: 1px solid var(--borda); background: var(--fundo-sutil); border-radius: 0 0 var(--r3) var(--r3); font-size: var(--t-sm); color: var(--texto-2); } /* Cartao de numero. O numero e o heroi: fonte grande, tabular, peso alto, na Inter. O rotulo vem em cima e pequeno, a comparacao vem embaixo e discreta. */ .num-cartao { display: flex; flex-direction: column; gap: var(--e2); padding: var(--e6); background: var(--fundo-cartao); border: 1px solid var(--borda); border-radius: var(--r3); box-shadow: var(--sombra1); transition: box-shadow var(--transicao-lenta), border-color var(--transicao), transform var(--transicao-lenta); } .num-cartao .rotulo { margin: 0; } /* Cartao de NUMERO DE APOIO, e nao numero-heroi. * * O .valor normal vai de 34 a 52px, dimensionado para os quatro numeros do * painel, que sao curtos ("27", "R$ 151,80"). Numa fila de quatro cartoes de * saldo, valores como "R$ 23.706,20" tem doze caracteres e vazavam para fora * da borda do cartao — o numero literalmente saia do quadro. * * Aqui o numero e apoio: quem le a fila de saldo esta acompanhando uma conta, * nao batendo o olho num indicador. Cabe menor. */ .num-cartao-apoio { padding: var(--e4) var(--e4); } .num-cartao-apoio .valor { font-size: var(--t-lg); line-height: 1.15; } .num-cartao-apoio .rotulo { font-size: var(--t-xs); } .num-cartao .valor { font-family: var(--fonte-marca); font-size: var(--t-3xl); font-weight: var(--p-marca); line-height: 1.02; letter-spacing: var(--entreletra-marca); font-variant-numeric: tabular-nums; color: var(--texto); } .num-cartao .nota { font-size: var(--t-sm); color: var(--texto-2); } /* Faixa colorida a esquerda quando o numero pede atencao. Nunca o cartao inteiro colorido: cinco cartoes coloridos lado a lado nao destacam nada. */ .num-cartao[data-tom="atencao"] { border-left: 4px solid var(--at-solido); } .num-cartao[data-tom="erro"] { border-left: 4px solid var(--erro-solido); } .num-cartao[data-tom="ok"] { border-left: 4px solid var(--ok-solido); } /* Cartao clicavel: a area toda vira alvo, sem aninhar botao dentro de link. O leve subir no hover e o que faz o cartao parecer clicavel antes de a pessoa ler que ele e um link. */ .num-cartao[href], a.num-cartao { text-decoration: none; color: inherit; } a.num-cartao:hover { border-color: var(--borda-forte); box-shadow: var(--sombra2); transform: translateY(-2px); } /* -------------------------------------------------------------------------- 5.5 TABELA A tela que o operador vive dentro. Prioridades, nesta ordem: 1. achar a linha certa entre 883 2. comparar valores na vertical (por isso tabular-nums em tudo) 3. so entao, agir A linha ficou mais alta que na versao anterior (16px de folga vertical contra 12px). Custa umas linhas por tela, e paga: a lista para de parecer um extrato bancario e o olho acha a linha certa mais rapido. -------------------------------------------------------------------------- */ .tabela-caixa { background: var(--fundo-cartao); border: 1px solid var(--borda); border-radius: var(--r3); box-shadow: var(--sombra1); overflow: hidden; } /* A rolagem lateral mora AQUI, nunca no body. */ .tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* O CABECALHO GRUDADO SO GRUDA SE HOUVER ONDE ROLAR. O `position: sticky` das colunas ja estava escrito, e estava morto: sem teto de altura na caixa, quem rola e a PAGINA, e o cabecalho sobe junto. A partir da linha ~15 de qualquer lista o operador le selos parecidos ("Situacao" contra "No fornecedor") sem saber qual coluna e qual — e decide pela coluna errada. O autor sabia do problema: a tela de simulacao da importacao ganhou o conserto, e as listas do dia a dia nao. So no computador. No celular a tabela vira cartao e nao ha cabecalho. */ @media (min-width: 900px) { .tabela-rolagem { max-height: min(70vh, 720px); overflow-y: auto; } } .tabela { width: 100%; font-size: var(--t-sm); line-height: var(--lh-densa); } /* A LINHA DE HOJE. O `data-hoje` ja era escrito pela agenda e nao tinha estilo nenhum: quem abre a agenda quer achar o dia de hoje primeiro, e procurava a data a olho numa lista de trinta dias. */ .tabela tr[data-hoje] > td { background: var(--info-fundo); } .tabela tr[data-hoje] > td:first-child { box-shadow: inset 3px 0 0 var(--info-solido); } .tabela thead th { position: sticky; top: 0; z-index: 2; padding: var(--e3) var(--e5); background: var(--fundo-sutil); border-bottom: 1px solid var(--borda-forte); text-align: left; font-size: var(--t-xs); font-weight: var(--p-forte); letter-spacing: var(--entreletra-rotulo); text-transform: uppercase; color: var(--texto-2); white-space: nowrap; } .tabela tbody td { padding: var(--e4) var(--e5); border-bottom: 1px solid var(--borda); vertical-align: middle; } .tabela tbody tr:last-child td { border-bottom: 0; } .tabela tbody tr:nth-child(even) { background: var(--fundo-zebra); } .tabela tbody tr { transition: background var(--transicao); } .tabela tbody tr:hover { background: var(--fundo-hover); } .tabela tbody tr[aria-selected="true"] { background: var(--fundo-marcado); } /* Numero, dinheiro e data vao para a direita: a unidade fica alinhada e a comparacao vertical funciona. */ .tabela .dir { text-align: right; font-variant-numeric: tabular-nums; } .tabela .centro { text-align: center; } .tabela .apertado { width: 1%; white-space: nowrap; } /* Numero em celula NUNCA quebra em duas linhas. A coluna e estreita e o navegador quebra justamente no hifen: "900.000.001-" numa linha e "75" na outra deixa de ser um CPF conferivel e vira duas metades. A folha ja garantia isso em .cod, mas as telas marcaram a coluna de CPF como .num, que ficava de fora — e com a folga de celula maior desta versao a quebra passou a acontecer de verdade. Com nowrap a tabela alarga a coluna sozinha, que e o certo: quem cede espaco e o nome, que tem reticencias, nao o numero. */ .tabela td.num, .tabela td.dir { white-space: nowrap; } /* A DESCRICAO E UMA SEGUNDA LINHA, NAO UM APENDICE DO NOME. `.dica` so tinha estilo dentro de `.campo` (linha 860, o formulario). Numa celula de tabela ela caia como texto inline do MESMO tamanho, colado ao nome — "Essencial Familia Nacional24h por dia, todo o Brasil" numa linha so, que a celula corta com reticencias. Pior que o feio: como a celula e `nowrap` e dimensiona pela linha inteira, a descricao alargava a coluna do nome e empurrava as colunas de "Quem enxerga" e "Situacao" — que e o que a tela de planos existe para mostrar. Aqui ela vira o que ja era em formulario: linha propria, menor, apagada. */ .tabela td .dica { display: block; font-size: var(--t-xs); font-weight: var(--p-normal); color: var(--texto-3); overflow: hidden; text-overflow: ellipsis; } /* Coluna do nome: nunca quebra em duas linhas, corta com reticencias. */ .tabela .nome { font-weight: var(--p-medio); color: var(--texto); max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Primeira coluna grudada, para o nome nao sumir ao rolar para o lado. */ .tabela-fixa th:first-child, .tabela-fixa td:first-child { position: sticky; left: 0; z-index: 1; background: var(--fundo-cartao); box-shadow: 1px 0 0 var(--borda); } .tabela-fixa thead th:first-child { z-index: 3; } .tabela-fixa tbody tr:nth-child(even) td:first-child { background: var(--fundo-zebra); } .tabela-fixa tbody tr:hover td:first-child { background: var(--fundo-hover); } /* Cabecalho que ordena */ .tabela th[aria-sort] { cursor: pointer; user-select: none; } .tabela th[aria-sort]:hover { color: var(--texto); } .tabela th[aria-sort="ascending"]::after { content: " ▲"; font-size: .8em; color: var(--acao-txt); } .tabela th[aria-sort="descending"]::after { content: " ▼"; font-size: .8em; color: var(--acao-txt); } /* Barra de acao em massa: aparece quando ha selecao. Grudada no rodape para nao sumir quando a lista e longa. Fundo no roxo escuro da marca, que aqui e o unico lugar da area de trabalho onde ele aparece cheio. */ /* Aviso de alcada dentro da barra: TETO_LOTE do usuarios.py chegando. */ .tabela-pe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e4); padding: var(--e4) var(--e5); border-top: 1px solid var(--borda); background: var(--fundo-sutil); font-size: var(--t-sm); color: var(--texto-2); } /* -------------------------------------------------------------------------- 5.6 AVISO (a caixa de recado) -------------------------------------------------------------------------- */ .aviso { display: flex; gap: var(--e4); padding: var(--e5); border: 1px solid; border-left-width: 4px; border-radius: var(--r3); font-size: var(--t-base); line-height: var(--lh-normal); } .aviso-icone { flex: none; width: 22px; height: 22px; margin-top: 1px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: var(--p-titulo); font-size: var(--t-xs); background: currentColor; } /* O glifo fica na cor da tinta de fundo, dentro de um disco na cor do texto. Da um icone solido sem imagem nenhuma. */ .aviso-icone::before { color: var(--fundo-cartao); } .aviso-corpo { min-width: 0; } .aviso strong { display: block; font-weight: var(--p-forte); margin-bottom: 2px; } .aviso-acoes { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e4); } .aviso p { max-width: var(--largura-leitura); } .aviso-ok { color: var(--ok-txt); background: var(--ok-fundo); border-color: var(--ok-borda); border-left-color: var(--ok-solido); } .aviso-at { color: var(--at-txt); background: var(--at-fundo); border-color: var(--at-borda); border-left-color: var(--at-solido); } .aviso-erro { color: var(--erro-txt); background: var(--erro-fundo); border-color: var(--erro-borda); border-left-color: var(--erro-solido); } .aviso-info { color: var(--info-txt); background: var(--info-fundo); border-color: var(--info-borda); border-left-color: var(--info-solido); } .aviso-ok .aviso-icone::before { content: "✓"; } .aviso-at .aviso-icone::before { content: "!"; } .aviso-erro .aviso-icone::before { content: "✕"; } .aviso-info .aviso-icone::before { content: "i"; } /* Aviso de bloqueio: a mensagem que trava o "Confirmar importacao". Ganha peso maior porque impede a acao. */ .aviso-bloqueio { background: var(--erro-fundo); border: 2px solid var(--erro-solido); border-radius: var(--r3); color: var(--erro-txt); padding: var(--e5) var(--e6); font-weight: var(--p-medio); } /* -------------------------------------------------------------------------- 5.7 MODAL Usa o nativo: fecha no Esc, prende o Tab dentro e devolve o foco sozinho. Nada disso precisa de JavaScript nosso. -------------------------------------------------------------------------- */ /* Confirmacao destrutiva: o botao que destroi fica a DIREITA e o de escapar a esquerda, e o destrutivo nunca recebe foco automatico. */ /* -------------------------------------------------------------------------- 5.8 ABAS -------------------------------------------------------------------------- */ /* Aba com pendencia: a contagem fica vermelha, nao a aba inteira. */ /* -------------------------------------------------------------------------- 5.9 PAGINACAO -------------------------------------------------------------------------- */ .paginacao { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; } .paginacao .pag { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 var(--e3); border: 1px solid var(--borda); border-radius: var(--r2); background: var(--fundo-cartao); color: var(--texto-2); font-size: var(--t-sm); font-weight: var(--p-medio); font-variant-numeric: tabular-nums; text-decoration: none; cursor: pointer; transition: background var(--transicao), color var(--transicao), border-color var(--transicao); } .paginacao .pag:hover:not([disabled]):not([aria-disabled="true"]):not([aria-current]) { background: var(--fundo-hover); color: var(--texto); border-color: var(--borda-forte); } .paginacao .pag[aria-current="page"] { background: var(--acao-solido); border-color: var(--acao-solido); color: var(--sobre-acao); font-weight: var(--p-forte); } /* O macro de paginacao usa quando nao ha para onde ir: nao e botao desligado, e um destino que nao existe. */ .paginacao .pag[disabled], .paginacao .pag[aria-disabled="true"] { color: var(--texto-desab); background: var(--fundo-desab); border-color: var(--borda); cursor: not-allowed; } .paginacao .reticencias { padding: 0 var(--e2); color: var(--texto-3); font-size: var(--t-sm); } /* -------------------------------------------------------------------------- 5.10 BARRA DE PROGRESSO Usada no acompanhamento de lote. Precisa de numero ao lado: barra sozinha nao diz se 60% de 883 ja acabou ou vai levar mais meia hora. -------------------------------------------------------------------------- */ .progresso { display: flex; flex-direction: column; gap: var(--e2); } .progresso-topo { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e4); font-size: var(--t-sm); } .progresso-topo .valor { font-weight: var(--p-forte); font-variant-numeric: tabular-nums; color: var(--texto); } .progresso-topo .resto { color: var(--texto-2); font-variant-numeric: tabular-nums; } /* Trilho repartido: sucesso, erro e restante na MESMA barra. E o que a tela de lote precisa mostrar (141 sucesso, 7 erro, 735 na fila) sem tres barras. */ .progresso-misto { display: flex; height: 10px; border-radius: var(--r-pilula); overflow: hidden; border: 1px solid var(--borda); background: var(--neu-fundo); } .progresso-misto span { height: 100%; transition: width 400ms cubic-bezier(.4,0,.2,1); } .progresso-misto .p-ok { background: var(--ok-solido); } .progresso-misto .p-erro { background: var(--erro-solido); } .progresso-misto .p-at { background: var(--at-solido); } /* Trabalho em andamento sem porcentagem conhecida. */ @keyframes correndo { 0% { margin-left: -35%; } 100% { margin-left: 100%; } } .legenda { display: flex; flex-wrap: wrap; gap: var(--e5); font-size: var(--t-sm); color: var(--texto-2); } .legenda span { display: inline-flex; align-items: center; gap: var(--e2); } .legenda i { width: 10px; height: 10px; border-radius: 3px; flex: none; } /* -------------------------------------------------------------------------- 5.11 MENU LATERAL Fundo no roxo escuro #0C0047 da marca — a cor do wordmark, usada aqui inteira. O item ativo e preenchido com o violeta de acao, que da 3.3:1 contra o fundo do menu (visivel por si so, sem depender de cor de texto) mais uma barra de 3px no #A24CFF puro a esquerda. Dois sinais: um de preenchimento, um de forma. Quem enxerga mal acha o "voce esta aqui" pela barra mesmo sem distinguir os dois violetas. A MARCA DE VERDADE: o simbolo do infinito com as duas cabecas, o arquivo /estatico/marca/simbolo.png, entra como fundo do que o base.html ja renderiza. Antes ali havia uma bolinha laranja desenhada em CSS fingindo ser a marca. O simbolo ja vem violeta e com fundo transparente, entao ele cai certo sobre o roxo escuro sem precisar de versao alternativa. -------------------------------------------------------------------------- */ .lateral { position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: var(--marca-roxo-esc); color: #fff; overflow-y: auto; overscroll-behavior: contain; z-index: 20; } .lateral-marca { display: flex; align-items: center; gap: var(--e3); padding: var(--e6) var(--e5) var(--e5); font-family: var(--fonte-marca); font-size: var(--t-lg); font-weight: var(--p-marca); /* Inter ExtraBold, como manda o brandbook */ letter-spacing: var(--entreletra-marca); color: #fff; text-decoration: none; } /* O simbolo da marca. Proporcao do arquivo: 256x195, ou seja 1,31:1 — por isso 34x26 e nao um quadrado, que amassaria o infinito. */ .lateral-marca .ponto { flex: none; width: 34px; height: 26px; border-radius: 0; background: url("/estatico/marca/simbolo.png") center / contain no-repeat; } .lateral-nav { flex: 1; padding: 0 var(--e3) var(--e5); } .lateral-grupo { margin-top: var(--e6); } .lateral-grupo > .rotulo { display: block; padding: 0 var(--e3) var(--e2); color: #9c93bd; /* 6.6:1 no roxo escuro da marca */ } .lateral-item { position: relative; display: flex; align-items: center; gap: var(--e3); min-height: var(--toque); padding: var(--e2) var(--e3); border-radius: var(--r2); color: #beb8d5; /* 9.9:1 no roxo escuro da marca */ font-size: var(--t-base); font-weight: var(--p-medio); text-decoration: none; transition: background var(--transicao), color var(--transicao); } .lateral-item:hover { background: rgba(255,255,255,.09); color: #fff; } .lateral-item[aria-current="page"] { background: var(--acao-solido); color: #fff; font-weight: var(--p-forte); box-shadow: 0 2px 10px rgba(162, 76, 255, .35); } .lateral-item[aria-current="page"]::before { content: ""; position: absolute; left: calc(var(--e3) * -1 + 2px); top: 8px; bottom: 8px; width: 3px; border-radius: var(--r-pilula); background: var(--marca-violeta); } .lateral-item:focus-visible { outline-color: var(--marca-violeta); } .lateral-item .icone { flex: none; width: 20px; text-align: center; opacity: .9; } .lateral-item .texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* O contador e o unico lugar do menu onde o LARANJA DE APOIO aparece. Texto escuro por cima: #191334 sobre #E77642 da 6.0:1. */ .lateral-item .conta { padding: 2px 8px; border-radius: var(--r-pilula); background: var(--marca-laranja); color: var(--n900); font-size: var(--t-xs); font-weight: var(--p-titulo); font-variant-numeric: tabular-nums; } /* Subitens (Lista geral, Importar planilha, Fila de qualidade...) */ /* Rodape: quem esta logado e com qual perfil. Fundamental num sistema com alcada, porque a pergunta "por que nao consigo fazer isso" comeca aqui. */ .lateral-pe { padding: var(--e4) var(--e5); border-top: 1px solid rgba(255,255,255,.14); font-size: var(--t-sm); } .lateral-pe .nome { color: #fff; font-weight: var(--p-forte); } .lateral-pe .perfil { color: #a9a3c2; } /* 7.9:1 no roxo escuro */ .lateral-pe .lateral-item { margin-left: calc(var(--e3) * -1); } /* Menu fechado: some o texto, ficam os icones. O simbolo da marca CONTINUA visivel: some so o wordmark. A folha antiga escondia .lateral-marca span, que apagava a marca inteira — inclusive o proprio simbolo, que tambem e um span. */ .app[data-menu="fechado"] .lateral-item .texto, .app[data-menu="fechado"] .lateral-grupo > .rotulo, .app[data-menu="fechado"] .lateral-marca span:not(.ponto), .app[data-menu="fechado"] .lateral-pe .nome, .app[data-menu="fechado"] .lateral-pe .perfil{ display: none; } .app[data-menu="fechado"] .lateral-item { justify-content: center; padding-inline: 0; } .app[data-menu="fechado"] .lateral-marca { justify-content: center; padding-inline: 0; } .app[data-menu="fechado"] .lateral-pe .lateral-item { margin-left: 0; } /* Barra de topo da area de trabalho */ .topo { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: var(--e4); min-height: var(--topo); padding: 0 var(--e8); background: color-mix(in srgb, var(--fundo-pagina) 82%, transparent); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--borda); } @supports not (backdrop-filter: blur(1px)) { .topo { background: var(--fundo-pagina); } } .topo > strong { font-family: var(--fonte-marca); font-weight: var(--p-forte); letter-spacing: var(--entreletra-titulo); } .topo .abre-menu { display: none; } /* -------------------------------------------------------------------------- 5.12 MIGALHAS, LISTA DE DADOS, LINHA DO TEMPO -------------------------------------------------------------------------- */ .migalhas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); font-size: var(--t-sm); color: var(--texto-2); margin-bottom: var(--e4); } .migalhas a { color: var(--texto-2); text-decoration: none; } .migalhas a:hover { color: var(--texto); text-decoration: underline; } .migalhas li + li::before { content: "/"; margin-right: var(--e2); color: var(--texto-3); } .migalhas ol { display: flex; flex-wrap: wrap; gap: var(--e2); list-style: none; margin: 0; padding: 0; } .migalhas li { display: flex; align-items: center; gap: var(--e2); } /* Ficha: rotulo em cima, valor embaixo. Em coluna unica no celular. */ .ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--e5) var(--e6); } .ficha .item { min-width: 0; } .ficha .item dt { font-size: var(--t-xs); font-weight: var(--p-forte); letter-spacing: var(--entreletra-rotulo); text-transform: uppercase; color: var(--texto-3); margin-bottom: var(--e1); } .ficha .item dd { margin: 0; font-size: var(--t-base); color: var(--texto); overflow-wrap: anywhere; } .ficha .item dd:empty::after { content: "sem informação"; color: var(--texto-3); font-style: italic; } .tempo { list-style: none; margin: 0; padding: 0 0 0 var(--e6); border-left: 2px solid var(--borda); } .tempo li { position: relative; padding: 0 0 var(--e6) var(--e3); } .tempo li::before { content: ""; position: absolute; left: calc(var(--e6) * -1 - 6px); top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--fundo-cartao); border: 2px solid var(--borda-forte); } .tempo li[data-tom="ok"]::before { border-color: var(--ok-solido); } .tempo li[data-tom="erro"]::before { border-color: var(--erro-solido); } .tempo .quando { font-size: var(--t-xs); color: var(--texto-3); font-variant-numeric: tabular-nums; } .tempo .quem { font-weight: var(--p-forte); } /* -------------------------------------------------------------------------- 5.13 TELA DE ENTRADA Estas quatro classes vinham num