/* =========================================================================== Duas peles, um layout. O Gui pediu para ver as duas antes de decidir, então elas não são temas pintados por cima: são dois conjuntos de tokens, e todo o resto do arquivo só usa token. Trocar de pele é trocar o atributo data-pele no . JARVIS é a pele do cockpit de desktop — escuro azulado, celeste e âmbar. As duas séries foram validadas contra daltonismo (ΔE 22,6); celeste com violeta colide (ΔE 0,1) e por isso violeta não aparece em lugar nenhum. CLARO existe porque celular se usa na rua, e tela escura no sol vira espelho. =========================================================================== */ :root[data-pele="jarvis"] { --fundo: #0a1219; --fundo-alto: #0f1d29; --cartao: #101f2c; --cartao-borda: #1c3244; --cartao-alto: #142737; --tinta: #e2eef7; --tinta-media: #8fa9bd; --tinta-fraca: #5c7488; --acento: #3691d2; /* celeste — a cor do varejo e do "agora" */ --acento-suave: #7cc4ee; --ambar: #d0762b; /* âmbar — a cor do atacado e do passado */ --ambar-suave: #e9a869; --bom: #46b17b; --ruim: #e2564a; --sombra: 0 1px 0 rgba(255,255,255,.04), 0 8px 24px rgba(0,0,0,.4); --vidro: rgba(10,18,25,.82); --hachura: rgba(226,238,247,.14); } :root[data-pele="claro"] { --fundo: #f2f4f7; --fundo-alto: #ffffff; --cartao: #ffffff; --cartao-borda: #e3e8ee; --cartao-alto: #f7f9fb; --tinta: #14202b; --tinta-media: #5c6b7a; --tinta-fraca: #93a1b0; --acento: #1b6fb5; --acento-suave: #3f93d6; --ambar: #b1620f; --ambar-suave: #d68b3c; --bom: #197a4c; --ruim: #c3372c; --sombra: 0 1px 2px rgba(20,32,43,.06), 0 6px 20px rgba(20,32,43,.07); --vidro: rgba(242,244,247,.86); --hachura: rgba(20,32,43,.16); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { background: var(--fundo); color: var(--tinta); /* -apple-system é SF Pro no iPhone. Nenhuma fonte de fora: uma web font atrasaria o primeiro número na tela, e o primeiro número é o app. */ font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif; font-size: 16px; line-height: 1.35; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; /* Impede o "puxa a página inteira" do Safari, que denuncia site. */ overscroll-behavior-y: none; } body { min-height: 100dvh; /* Combina com status-bar translúcida: o fundo passa por baixo do relógio. */ padding-top: env(safe-area-inset-top); transition: background .35s ease, color .35s ease; } /* Dinheiro alinhado exige largura fixa de dígito. Sem isto, o número dança quando muda de 9 para 10 e o olho perde a comparação entre linhas. */ .numerao, .split-valor, .mes-canal-valor, .delta, .valor, .chip, .data-dia { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* ------------------------------------------------------------- cabeçalho -- */ .topo { position: sticky; top: 0; z-index: 30; padding: calc(env(safe-area-inset-top) + 10px) 16px 10px; margin-top: calc(-1 * env(safe-area-inset-top)); background: var(--vidro); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid var(--cartao-borda); } .topo-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .marca { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .marca-nome { font-size: 17px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* O frescor do dado fica no cabeçalho, não escondido num rodapé: um painel que não diz de quando ele é convida a confiar em número velho. */ .frescor { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; color: var(--tinta-media); font: inherit; font-size: 12.5px; cursor: pointer; } .ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--bom); flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--bom) 22%, transparent); } .ponto.velho { background: var(--ambar); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ambar) 22%, transparent); } .ponto.parado { background: var(--ruim); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ruim) 22%, transparent); } .pele-troca { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--cartao-alto); color: var(--tinta-media); border: 1px solid var(--cartao-borda); cursor: pointer; transition: transform .15s ease, background .2s ease; } .pele-troca:active { transform: scale(.92); } /* ----------------------------------------------------------------- telas -- */ main { padding: 14px 14px calc(84px + env(safe-area-inset-bottom)); max-width: 640px; margin: 0 auto; } .tela { display: none; animation: entra .28s cubic-bezier(.22,.61,.36,1); } .tela.ativa { display: grid; gap: 11px; } @keyframes entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* --------------------------------------------------------------- cartões -- */ .cartao { background: var(--cartao); border: 1px solid var(--cartao-borda); border-radius: 18px; padding: 15px; box-shadow: var(--sombra); text-align: left; width: 100%; color: inherit; font: inherit; } button.cartao { cursor: pointer; transition: transform .15s cubic-bezier(.22,.61,.36,1); } button.cartao:active { transform: scale(.975); } .cartao-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .rotulo { font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-fraca); } .chip { font-size: 11.5px; font-weight: 600; color: var(--tinta-fraca); background: var(--cartao-alto); border: 1px solid var(--cartao-borda); padding: 3px 8px; border-radius: 999px; white-space: nowrap; } .data-dia { font-size: 13px; color: var(--tinta-media); font-weight: 600; } /* O número principal. 40px é o tamanho em que ele é legível de relance, com o celular na mão e o carro parado no sinal — que é o cenário de uso real. */ .numerao { font-size: 40px; font-weight: 760; letter-spacing: -.035em; line-height: 1.05; font-family: -apple-system, "SF Pro Display", system-ui, sans-serif; } .numerao.medio { font-size: 32px; } .numerao.pequeno { font-size: 23px; } .destaque { background: linear-gradient(168deg, var(--cartao-alto), var(--cartao) 62%); } .sub { font-size: 12.5px; color: var(--tinta-media); display: block; margin-top: 3px; } .explica { font-size: 13px; color: var(--tinta-media); line-height: 1.45; } /* ------------------------------------------------------------ comparação -- */ .comparacao { margin-top: 7px; font-size: 13.5px; color: var(--tinta-media); } .delta { font-weight: 700; font-size: 13px; } .delta.sobe { color: var(--bom); } .delta.desce { color: var(--ruim); } .delta.neutro { color: var(--tinta-fraca); } /* ------------------------------------------------- split varejo/atacado -- */ .split { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; margin-top: 13px; } .split-lado { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .split-lado.direita { align-items: flex-end; text-align: right; } .split-rotulo { font-size: 11.5px; color: var(--tinta-fraca); font-weight: 600; } .split-valor { font-size: 16px; font-weight: 700; } .split-lado:not(.direita) .split-valor { color: var(--acento-suave); } .split-lado.direita .split-valor { color: var(--ambar-suave); } .split-barra { grid-column: 1 / -1; grid-row: 2; height: 7px; border-radius: 999px; overflow: hidden; background: var(--ambar); margin-top: 8px; } .split-preenche { height: 100%; background: var(--acento); border-radius: 999px; width: 50%; transition: width .6s cubic-bezier(.22,.61,.36,1); } /* -------------------------------------------------------- corrida do mês -- */ .mes-linha { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .corrida { margin-top: 12px; } .corrida-trilho { position: relative; height: 26px; } .corrida-fita { position: absolute; left: 0; height: 10px; border-radius: 999px; transition: width .7s cubic-bezier(.22,.61,.36,1); } .corrida-fita.atual { top: 0; background: var(--acento); } .corrida-fita.anterior { top: 14px; background: color-mix(in srgb, var(--tinta-fraca) 45%, transparent); } .corrida-legenda { display: flex; gap: 12px; align-items: center; font-size: 11px; color: var(--tinta-fraca); margin-top: 2px; white-space: nowrap; overflow: hidden; } .corrida-legenda span { display: inline-flex; align-items: center; gap: 5px; } .marcador { width: 9px; height: 9px; border-radius: 3px; display: inline-block; flex: none; } .marcador.atual, .marcador.varejo { background: var(--acento); } .marcador.anterior { background: color-mix(in srgb, var(--tinta-fraca) 45%, transparent); } .marcador.atacado { background: var(--ambar); } .legenda-serie { display: inline-flex; align-items: center; gap: 5px; } .legenda-serie .marcador + .marcador { margin-left: 8px; } .mes-canais { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; } .mes-canal { background: var(--cartao-alto); border: 1px solid var(--cartao-borda); border-radius: 12px; padding: 8px 10px; display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 8px; } .mes-canal-nome { grid-column: 1 / -1; } .mes-canal-nome { font-size: 11.5px; color: var(--tinta-fraca); font-weight: 600; } .mes-canal-valor { font-size: 16px; font-weight: 700; } /* ---------------------------------------------------------------- canais -- */ /* Sem barra de progresso aqui de propósito. A barra custava 40px de altura por canal e só repetia o que dois números lado a lado já dizem — e a altura era justamente o que faltava para os quatro blocos caberem sem rolar. */ .canais { display: grid; gap: 9px; } .canal { display: grid; gap: 4px; } .canal-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .canal-nome { font-size: 14.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 7px; } .canal-nome::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: var(--acento); } .canal.atacado .canal-nome::before { background: var(--ambar); } .canal-receita { font-size: 15px; font-weight: 700; } .canal-pe { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--tinta-media); flex-wrap: wrap; } /* ---------------------------------------------- gramática de confiança --- */ /* O selo acompanha o número que ele qualifica, e não uma nota de rodapé: quem lê "22%" precisa ver ali mesmo se aquilo foi medido ou estimado. */ .selo { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; cursor: pointer; } .selo::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; } .selo.medido { color: var(--bom); background: color-mix(in srgb, var(--bom) 13%, transparent); border-color: color-mix(in srgb, var(--bom) 30%, transparent); } .selo.calculado { color: var(--acento-suave); background: color-mix(in srgb, var(--acento) 15%, transparent); border-color: color-mix(in srgb, var(--acento) 32%, transparent); } .selo.nao_confie { color: var(--ambar-suave); background: color-mix(in srgb, var(--ambar) 15%, transparent); border-color: color-mix(in srgb, var(--ambar) 34%, transparent); } /* A hachura a 45° é reservada a UMA coisa: dado que existe mas não merece confiança. Ela não decora nada e não aparece em nenhum outro significado — é o que a mantém legível como aviso. */ /* Fio fino e espaçado: precisa ler como textura de fundo, não como rasura em cima da palavra. A primeira versão usava traço de 1,5px a cada 7px e o número saía parecendo riscado — que é outro significado, e errado. */ .hachurado { /* inline-flex colapsa o espaço entre "margem" e o número; o gap devolve. */ display: inline-flex; align-items: baseline; gap: 4px; background-image: repeating-linear-gradient( 45deg, var(--hachura) 0, var(--hachura) 1px, transparent 1px, transparent 6px ); border: 1px solid color-mix(in srgb, var(--ambar) 26%, transparent); border-radius: 7px; padding: 2px 7px; } /* ---------------------------------------------------------------- dupla -- */ .dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .compacto { display: flex; flex-direction: column; gap: 5px; padding: 14px; } .compacto .numerao { margin-top: 2px; } .alerta-cartao .numerao { color: var(--ambar); } .alerta-cartao.limpo .numerao { color: var(--bom); } /* -------------------------------------------------------------- gráfico -- */ .grafico { display: flex; align-items: flex-end; gap: 3px; height: 108px; margin-top: 4px; } .barra-dia { flex: 1; display: flex; flex-direction: column-reverse; gap: 2px; height: 100%; justify-content: flex-start; align-items: stretch; border-radius: 4px; overflow: hidden; position: relative; } .barra-parte { border-radius: 3px; min-height: 0; transition: height .5s cubic-bezier(.22,.61,.36,1); } .barra-parte.varejo { background: var(--acento); } .barra-parte.atacado { background: var(--ambar); } .barra-dia.vazio::after { content: ""; position: absolute; inset: auto 0 0 0; height: 2px; background: var(--cartao-borda); border-radius: 2px; } /* --------------------------------------------------------------- listas -- */ .lista-alertas, .lista-fiado, .lista-campeoes { display: grid; gap: 10px; } .item { background: var(--cartao); border: 1px solid var(--cartao-borda); border-radius: 16px; padding: 14px; box-shadow: var(--sombra); } .item-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .item-titulo { font-size: 15px; font-weight: 700; line-height: 1.25; } .item-detalhe { font-size: 13px; color: var(--tinta-media); margin-top: 5px; line-height: 1.4; } .item-valor { font-size: 15px; font-weight: 750; white-space: nowrap; } .item-valor.negativo { color: var(--ruim); } .gravidade { width: 4px; border-radius: 999px; align-self: stretch; flex: none; } .item.alta { border-left: 3px solid var(--ruim); } .item.media { border-left: 3px solid var(--ambar); } .item.baixa { border-left: 3px solid var(--tinta-fraca); } .sublista { margin-top: 12px; display: grid; gap: 8px; border-top: 1px solid var(--cartao-borda); padding-top: 11px; } .subitem { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; } .subitem-nome { color: var(--tinta); font-weight: 600; min-width: 0; } .subitem-extra { display: block; color: var(--tinta-fraca); font-size: 11.5px; font-weight: 500; margin-top: 1px; } .subitem-valor { color: var(--ruim); font-weight: 700; white-space: nowrap; } .vazio-bom { text-align: center; padding: 44px 20px; color: var(--tinta-media); } .vazio-bom .emoji { font-size: 40px; display: block; margin-bottom: 10px; } /* ---------------------------------------------------------------- abas --- */ .abas { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--vidro); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-top: 1px solid var(--cartao-borda); padding: 7px 8px calc(7px + env(safe-area-inset-bottom)); } .aba { position: relative; background: none; border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 2px; border-radius: 12px; color: var(--tinta-fraca); font: inherit; font-size: 10.5px; font-weight: 600; transition: color .2s ease, transform .15s ease; } .aba svg { width: 21px; height: 21px; } /* O atributo hidden vale display:none por regra do navegador, mas as regras .aba e .abas definem display e vencem por especificidade — a aba escondida continuava aparecendo, e a barra inteira também. Vale para todo elemento deste arquivo que ganhe display explícito e possa ser escondido. */ .abas .aba[hidden], .abas[hidden], .cartao[hidden], #busca-resultados[hidden], #comprar-conteudo[hidden] { display: none; } .aba.ativa { color: var(--acento); } .aba:active { transform: scale(.9); } .badge { position: absolute; top: 2px; right: calc(50% - 17px); width: 8px; height: 8px; border-radius: 50%; background: var(--ambar); box-shadow: 0 0 0 2px var(--fundo); } /* --------------------------------------------------------------- folha --- */ /* Folha que sobe de baixo, do jeito que o iOS faz. Explica de onde vem o número quando o dono toca no selo — é o lugar onde a desconfiança vira informação em vez de virar dúvida solta. */ .folha { position: fixed; inset: 0; z-index: 60; } .folha[hidden] { display: none; } .folha-fundo { position: absolute; inset: 0; background: rgba(0,0,0,.45); animation: aparece .25s ease; } @keyframes aparece { from { opacity: 0 } to { opacity: 1 } } .folha-corpo { position: absolute; left: 0; right: 0; bottom: 0; background: var(--fundo-alto); border-radius: 22px 22px 0 0; padding: 10px 20px calc(22px + env(safe-area-inset-bottom)); max-height: 82dvh; overflow-y: auto; animation: sobe .32s cubic-bezier(.22,.61,.36,1); border-top: 1px solid var(--cartao-borda); } @keyframes sobe { from { transform: translateY(100%) } to { transform: none } } .folha-puxador { width: 38px; height: 4px; border-radius: 999px; background: var(--tinta-fraca); opacity: .5; margin: 0 auto 16px; } .folha-corpo h3 { font-size: 19px; font-weight: 750; letter-spacing: -.02em; margin-bottom: 10px; } .folha-corpo p { font-size: 14px; color: var(--tinta-media); line-height: 1.5; margin-bottom: 10px; } .folha-corpo p strong { color: var(--tinta); font-weight: 650; } .folha-fecha { width: 100%; margin-top: 14px; padding: 14px; border-radius: 14px; border: 0; cursor: pointer; background: var(--acento); color: #fff; font: inherit; font-weight: 700; font-size: 15px; } .folha-fecha:active { transform: scale(.98); } .legenda-selos { display: grid; gap: 10px; margin-top: 6px; } .legenda-selo { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; } .legenda-selo p { margin: 0; font-size: 13px; } /* ------------------------------------------------------------ estados --- */ .carregando .numerao, .carregando .split-valor, .carregando .mes-canal-valor { color: transparent; background: linear-gradient(90deg, var(--cartao-alto) 25%, var(--cartao-borda) 50%, var(--cartao-alto) 75%); background-size: 200% 100%; animation: brilha 1.4s infinite; border-radius: 8px; } @keyframes brilha { from { background-position: 200% 0 } to { background-position: -200% 0 } } .aviso-offline { margin: 0 0 12px; padding: 11px 14px; border-radius: 14px; background: color-mix(in srgb, var(--ambar) 14%, transparent); border: 1px solid color-mix(in srgb, var(--ambar) 32%, transparent); color: var(--ambar-suave); font-size: 13px; font-weight: 600; } @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ===================================================== tela de compra ===== */ /* A busca fica no topo e é grande: o dedo procura ela primeiro quando o item não está entre os 34, e um campo pequeno num app de câmara fria — com a mão fria e pressa — não é acertado de primeira. */ .busca-caixa { display: flex; align-items: center; gap: 8px; background: var(--cartao); border: 1px solid var(--cartao-borda); border-radius: 14px; padding: 0 12px; box-shadow: var(--sombra); } .busca-lupa { width: 19px; height: 19px; color: var(--tinta-fraca); flex: none; } #busca { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--tinta); font: inherit; font-size: 16px; /* 16px evita o zoom do iOS ao focar */ padding: 14px 0; } #busca::placeholder { color: var(--tinta-fraca); } #busca::-webkit-search-cancel-button { display: none; } .busca-limpa { background: none; border: 0; cursor: pointer; flex: none; color: var(--tinta-fraca); font-size: 15px; padding: 6px; } .aviso-estoque { padding: 13px 15px; border-radius: 15px; background: color-mix(in srgb, var(--ambar) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ambar) 30%, transparent); font-size: 12.5px; line-height: 1.5; color: var(--tinta-media); } .aviso-estoque b { color: var(--ambar-suave); } .lista-compra { display: grid; gap: 9px; } .compra-item { background: var(--cartao); border: 1px solid var(--cartao-borda); border-radius: 15px; box-shadow: var(--sombra); overflow: hidden; } .compra-cabeca { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; width: 100%; padding: 13px 15px; background: none; border: 0; cursor: pointer; color: inherit; font: inherit; text-align: left; } .compra-cabeca:active { background: var(--cartao-alto); } .compra-nome { font-size: 14.5px; font-weight: 700; line-height: 1.25; } .compra-qtde { font-size: 21px; font-weight: 780; letter-spacing: -.02em; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; } .compra-un { font-size: 12px; font-weight: 600; color: var(--tinta-fraca); margin-left: 3px; } .compra-dias { display: flex; gap: 5px; flex-wrap: wrap; grid-column: 1; } .dia-chip { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--cartao-alto); border: 1px solid var(--cartao-borda); color: var(--tinta-media); font-variant-numeric: tabular-nums; } .dia-chip b { color: var(--acento-suave); } .compra-aviso { grid-column: 1 / -1; font-size: 11.5px; color: var(--ambar-suave); display: flex; align-items: center; gap: 5px; } /* Detalhe que abre ao tocar: quem pede, quanto, e quando entrou pela última vez. Fechado por padrão porque a lista precisa caber na tela inteira. */ .compra-detalhe { display: none; padding: 0 15px 14px; border-top: 1px solid var(--cartao-borda); margin-top: -1px; } .compra-item.aberto .compra-detalhe { display: block; } .detalhe-titulo { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-fraca); margin: 13px 0 7px; } .detalhe-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; padding: 6px 0; } .detalhe-linha + .detalhe-linha { border-top: 1px solid color-mix(in srgb, var(--cartao-borda) 55%, transparent); } .detalhe-cliente { color: var(--tinta); font-weight: 600; min-width: 0; } .detalhe-dia { /* Bloco próprio: em linha, "terça · pede em 100% das entregas" enrola no nome do cliente e as duas informações viram uma frase só. */ display: block; margin-top: 1px; color: var(--tinta-fraca); font-weight: 500; font-size: 11.5px; } .detalhe-valor { white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; } .detalhe-linha.eventual .detalhe-valor { color: var(--tinta-fraca); font-weight: 600; } .detalhe-linha.eventual .detalhe-cliente { color: var(--tinta-media); font-weight: 500; } .entrada-velha { color: var(--ambar-suave); font-weight: 650; } .busca-vazia { padding: 30px 16px; text-align: center; color: var(--tinta-media); font-size: 13.5px; }