/* ========================================================================== estilo.css · folha unica do prototipo Terranova Copy -------------------------------------------------------------------------- Wireframe navegavel: alta fidelidade de ESTRUTURA, baixa fidelidade VISUAL. Cinzas, uma cor de destaque so, tipografia do sistema. Nao e identidade visual e nao deve virar uma. Regras que esta folha faz cumprir, e que nao se negociam: 1. Alvo de toque de 44x44 no minimo, medido no visivel, sem preenchimento invisivel. Vale para botao, link de navegacao, linha de lista tocavel, campo e o carimbo de idade do dado. 2. Um ponto de quebra so, declarado em --quebra e escrito em UM lugar: a media query de 900px la embaixo. Nao crie outro. 3. Celular e computador sao dois desenhos. Use .so-celular e .so-computador para trocar o BLOCO inteiro, nao para esconder coluna de tabela. 4. O botao de forcar a visao de celular liga .forcar-celular no e cancela a media query. Por isso toda regra de computador nasce dentro de html:not(.forcar-celular). ========================================================================== */ /* --- 1. Tokens ----------------------------------------------------------- */ :root { color-scheme: light dark; /* ponto de quebra, aqui so como documentacao legivel: CSS nao aceita variavel dentro de media query. O numero de verdade esta na secao 12. */ --quebra: 900px; /* cinzas do tema claro */ --fundo: #f4f5f7; --fundo-2: #ffffff; --fundo-3: #eaecef; --tinta: #16181d; --tinta-2: #4b5162; --tinta-3: #6f7686; --borda: #d4d8df; --borda-forte: #b4bac6; /* a UNICA cor de destaque do prototipo */ --destaque: #2f5d9e; --destaque-sup: #e6edf8; /* atencao: nao e "cor de marca", e sinalizacao de estado */ --alerta: #8a4b12; --alerta-sup: #fbf0e4; --raio: 8px; --pad: 16px; --toque: 44px; /* regra de aceite 1 do parecer 05 */ --largura-computador: 1080px; --largura-celular: 412px; --texto: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } @media (prefers-color-scheme: dark) { :root { --fundo: #101216; --fundo-2: #171a20; --fundo-3: #1f232b; --tinta: #e8eaee; --tinta-2: #a9b0bd; --tinta-3: #7e8695; --borda: #2b303a; --borda-forte: #3d4450; --destaque: #7fa8dd; --destaque-sup: #1b2635; --alerta: #e0a15e; --alerta-sup: #2a2015; } } /* --- 2. Base ------------------------------------------------------------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font: var(--texto); background: var(--fundo); color: var(--tinta); -webkit-text-size-adjust: 100%; padding-bottom: 148px; /* barra inferior de celular + barra do prototipo */ } h1, h2, h3 { margin: 0; font-weight: 650; line-height: 1.25; } h1 { font-size: 1.35rem; } h2 { font-size: 0.82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); font-weight: 700; } h3 { font-size: 1rem; } p { margin: .45rem 0; } a { color: var(--destaque); } .mono { font: var(--mono); } .nota { color: var(--tinta-3); font-size: .85rem; margin: .35rem 0 0; } .total { color: var(--tinta-3); font-size: .8rem; font-weight: 600; letter-spacing: .03em; } .numero { font-variant-numeric: tabular-nums; } .grande { font-size: 1.6rem; font-weight: 680; font-variant-numeric: tabular-nums; } /* --- 3. Moldura ---------------------------------------------------------- */ /* Cabecalho do assinante: identidade, navegacao, carimbo de idade. No celular o cabecalho e so titulo + carimbo, e a navegacao vai para a barra inferior (.nav-inferior). */ .cabecalho { background: var(--fundo-2); border-bottom: 1px solid var(--borda); position: sticky; top: 0; z-index: 20; } .cabecalho-dentro { max-width: var(--largura-computador); margin: 0 auto; padding: 8px var(--pad); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .marca { font-weight: 700; letter-spacing: .04em; font-size: .9rem; text-transform: uppercase; color: var(--tinta-2); } .titulo-tela { flex: 1 1 auto; min-width: 0; } .titulo-tela h1 { font-size: 1.1rem; } .titulo-tela .sub { color: var(--tinta-3); font-size: .85rem; } /* Navegacao principal do computador */ .nav-principal { display: flex; gap: 4px; flex: 1 1 auto; } .nav-principal a { min-height: var(--toque); display: inline-flex; align-items: center; padding: 0 14px; border-radius: var(--raio); text-decoration: none; color: var(--tinta-2); font-weight: 600; } .nav-principal a:hover { background: var(--fundo-3); } .nav-principal a[aria-current="page"] { background: var(--destaque-sup); color: var(--destaque); box-shadow: inset 0 -2px 0 var(--destaque); } /* Carimbo: idade do dado E atualizar sao UM controle so (regra de aceite 8) */ .carimbo { min-height: var(--toque); display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border: 1px solid var(--borda-forte); border-radius: var(--raio); background: var(--fundo-2); color: var(--tinta-2); font-size: .85rem; cursor: pointer; font-family: inherit; } .carimbo:hover { border-color: var(--destaque); color: var(--destaque); } .carimbo b { font-weight: 600; } /* Faixa de estado persistente: so aparece em quebrou ou degradado. Nao some sozinha. */ .faixa { background: var(--alerta-sup); color: var(--alerta); border-bottom: 1px solid var(--borda); padding: 12px var(--pad); font-size: .9rem; } .faixa-dentro { max-width: var(--largura-computador); margin: 0 auto; } .faixa strong { color: inherit; } /* --- 4. Corpo e blocos --------------------------------------------------- */ .corpo { max-width: var(--largura-computador); margin: 0 auto; padding: var(--pad); display: grid; gap: 14px; } /* .bloco e a unidade de conteudo. Todo bloco de wireframe vira um .bloco. */ .bloco { background: var(--fundo-2); border: 1px solid var(--borda); border-radius: var(--raio); padding: var(--pad); } .bloco-cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; } .bloco-liso { background: none; border: none; padding: 0; } /* A conclusao: primeira linha da tela, ela E a resposta */ .conclusao { border-left: 3px solid var(--destaque); } .conclusao.grave { border-left-color: var(--alerta); background: var(--alerta-sup); } .conclusao h3 { font-size: 1.15rem; margin-bottom: .3rem; } /* Duas colunas no computador, empilhadas no celular */ .grade-2 { display: grid; gap: 14px; grid-template-columns: 1fr; } /* Par rotulo/valor */ .par { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--borda); } .par:last-child { border-bottom: none; } .par dt { color: var(--tinta-2); } .par dd { margin: 0; font-weight: 640; font-variant-numeric: tabular-nums; } dl.par-lista { margin: 0; } /* --- 5. Tabela (computador) ---------------------------------------------- */ /* No celular a tabela NAO encolhe: ela e substituida por .lista-toque. Encolher entrega menos informacao com a mesma aparencia de completude. */ .tabela-caixa { overflow-x: auto; } table.tabela { width: 100%; border-collapse: collapse; font-size: .9rem; } table.tabela th, table.tabela td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--borda); white-space: nowrap; } table.tabela th { color: var(--tinta-3); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; } table.tabela td.n { text-align: right; font-variant-numeric: tabular-nums; } table.tabela th.n { text-align: right; } table.tabela tr:last-child td { border-bottom: none; } /* --- 6. Listas ----------------------------------------------------------- */ .lista { list-style: none; margin: 0; padding: 0; } .lista > li { padding: 10px 0; border-bottom: 1px solid var(--borda); } .lista > li:last-child { border-bottom: none; } /* Lista tocavel: cada linha e um alvo de 44 no minimo, com folga de 8 */ .lista-toque { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .lista-toque > li > a, .lista-toque > li > button { min-height: var(--toque); width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--fundo-2); color: var(--tinta); text-decoration: none; font: inherit; text-align: left; cursor: pointer; } .lista-toque > li > a:hover, .lista-toque > li > button:hover { border-color: var(--destaque-sup); background: var(--fundo-3); } .lista-toque .rotulo { min-width: 0; } .lista-toque .valor { font-variant-numeric: tabular-nums; font-weight: 640; white-space: nowrap; } .lista-toque .abaixo { display: block; color: var(--tinta-3); font-size: .82rem; } /* --- 7. Botoes ----------------------------------------------------------- */ .btn { min-height: var(--toque); min-width: var(--toque); display: inline-flex; align-items: center; justify-content: center; padding: 0 18px; border-radius: var(--raio); border: 1px solid var(--borda-forte); background: var(--fundo-2); color: var(--tinta); font: inherit; font-weight: 620; text-decoration: none; cursor: pointer; } .btn:hover { border-color: var(--destaque); color: var(--destaque); } .btn-principal { background: var(--destaque); border-color: var(--destaque); color: #fff; } .btn-principal:hover { color: #fff; filter: brightness(1.08); } .btn-perigo { border-color: var(--alerta); color: var(--alerta); } .btn-perigo:hover { background: var(--alerta-sup); color: var(--alerta); } .btn-largo { width: 100%; } /* Fila de botoes com folga de 8, que e o minimo entre alvos */ .botoes { display: flex; flex-wrap: wrap; gap: 8px; } /* O alvo que abre porta irreversivel anda sozinho, com folga maior */ .botoes-perigo { margin-top: 20px; } /* --- 8. Campos ----------------------------------------------------------- */ .campo { display: block; margin-bottom: 14px; } .campo > span { display: block; margin-bottom: 6px; color: var(--tinta-2); font-size: .9rem; font-weight: 600; } .campo input, .campo select, .campo textarea { width: 100%; min-height: var(--toque); padding: 10px 12px; font: inherit; background: var(--fundo-2); color: var(--tinta); border: 1px solid var(--borda-forte); border-radius: var(--raio); } .campo input:focus, .campo select:focus { outline: 2px solid var(--destaque); outline-offset: 1px; } /* --- 9. Aviso e estado vazio --------------------------------------------- */ /* .aviso carrega os quatro campos obrigatorios de "quebrou": o que aconteceu, o que significa para o dinheiro dela, o que o sistema ja fez, e a proxima acao dela nomeada. */ .aviso { border: 1px solid var(--borda-forte); border-left: 3px solid var(--alerta); background: var(--alerta-sup); color: var(--tinta); border-radius: var(--raio); padding: 14px; } .aviso h3 { color: var(--alerta); font-size: .98rem; margin-bottom: .3rem; } .aviso.neutro { border-left-color: var(--destaque); background: var(--destaque-sup); } .aviso.neutro h3 { color: var(--destaque); } /* Estado vazio: nunca metrica zerada, nunca tracinho, nunca "sem dados". Ele nomeia a causa e declara qual das quatro leituras e. */ .vazio { padding: 22px var(--pad); text-align: left; } .vazio h3 { margin-bottom: .4rem; } .vazio p { color: var(--tinta-2); max-width: 56ch; } /* --- 10. Rodape e navegacao inferior ------------------------------------- */ .rodape { max-width: var(--largura-computador); margin: 0 auto; padding: 8px var(--pad) 24px; } .rodape a { min-height: var(--toque); display: inline-flex; align-items: center; padding: 0 4px; } /* Barra inferior do celular: 4 itens, 56 de altura, sem hamburguer */ .nav-inferior { position: fixed; left: 0; right: 0; bottom: 44px; z-index: 30; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--fundo-2); border-top: 1px solid var(--borda); } .nav-inferior a { min-height: 56px; display: flex; align-items: center; justify-content: center; text-decoration: none; color: var(--tinta-2); font-size: .82rem; font-weight: 600; padding: 0 4px; text-align: center; } .nav-inferior a[aria-current="page"] { color: var(--destaque); box-shadow: inset 0 2px 0 var(--destaque); background: var(--destaque-sup); } /* --- 11. Barra do prototipo (injetada pelo app.js) ----------------------- */ /* Esta barra e andaime do prototipo, NAO e produto. CORRIGIDO EM 29/08: ela era a unica excecao aos 44pt, com 34px de altura de botao. Tirei a excecao. E justamente aqui que o Vini vai tocar com o polegar para trocar entre normal, vazio e erro, que e a coisa mais importante de olhar no prototipo. Regra sem excecao e mais facil de auditar do que regra com uma. */ .barra-prototipo { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: 6px; /* CORRIGIDO 29/08: era nowrap com overflow-x, e a 375px o primeiro botao ficava cortado pela metade. Rolagem lateral escondida numa barra de controle e a forma mais facil de a pessoa nao achar um botao. */ flex-wrap: wrap; row-gap: 4px; background: var(--fundo-3); border-top: 1px solid var(--borda-forte); padding: 4px 8px; min-height: 52px; font-size: .78rem; color: var(--tinta-3); } .barra-prototipo .rot { white-space: nowrap; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } /* Em tela estreita o rotulo da barra some: ele nao e controle, e so etiqueta, e esta ocupando o lugar de um botao. */ @media (max-width: 460px) { .barra-prototipo .rot { display: none; } } .barra-prototipo button { min-height: 44px; min-width: 44px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--borda-forte); background: var(--fundo-2); color: var(--tinta-2); font: inherit; cursor: pointer; white-space: nowrap; } .barra-prototipo button[aria-pressed="true"] { background: var(--destaque); border-color: var(--destaque); color: #fff; } /* --- 12. O PONTO DE QUEBRA, e ele e unico -------------------------------- */ /* Base = celular. Tudo daqui para baixo e o desenho de computador, e todo seletor nasce dentro de html:not(.forcar-celular) para o botao de forcar a visao de celular poder cancelar o desenho de computador numa tela larga. */ /* O ponto de quebra e 900. Ele aparece em duas media queries porque a troca tem dois lados, e 899 e so "900 menos um pixel". Nao existe outro numero de quebra nesta folha, e nao deve passar a existir. Por que NAO usar "display: none" fixo em .so-computador e depois desfazer com "display: revert": revert volta ao valor do navegador, que e block. Um .grade-2.so-computador viraria block e perderia as duas colunas. Entao o esconder mora dentro da media query, e no desenho de computador nenhuma regra toca o display desses elementos. */ /* lado CELULAR: abaixo de 900, ou sempre que a visao de celular for forcada */ @media (max-width: 899px) { .so-computador { display: none; } } html.forcar-celular .so-computador { display: none; } /* lado COMPUTADOR: de 900 para cima, e so quando nao esta forcado */ @media (min-width: 900px) { html:not(.forcar-celular) .so-celular { display: none; } html:not(.forcar-celular) .nav-inferior { display: none; } html:not(.forcar-celular) body { padding-bottom: 64px; } html:not(.forcar-celular) .grade-2 { grid-template-columns: 1fr 1fr; } html:not(.forcar-celular) .corpo { padding: 20px var(--pad); gap: 16px; } html:not(.forcar-celular) h1 { font-size: 1.5rem; } } /* Visao de celular forcada numa tela larga: moldura estreita e centrada, para o Vini comparar os dois desenhos lado a lado sem pegar o telefone. */ html.forcar-celular body { max-width: var(--largura-celular); margin: 0 auto; border-left: 1px solid var(--borda-forte); border-right: 1px solid var(--borda-forte); min-height: 100vh; } html.forcar-celular .nav-inferior { left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--largura-celular); border-left: 1px solid var(--borda-forte); border-right: 1px solid var(--borda-forte); } /* --- 13. Seletor de estado ---------------------------------------------- O app.js escreve data-estado no a partir de ?estado= na URL. Um bloco marcado com data-estado="vazio erro" so aparece nesses estados. Bloco sem o atributo aparece em todos. Isto e CSS puro, nao depende do JS rodar de novo a cada troca. */ body[data-estado="normal"] [data-estado]:not([data-estado~="normal"]) { display: none; } body[data-estado="vazio"] [data-estado]:not([data-estado~="vazio"]) { display: none; } body[data-estado="erro"] [data-estado]:not([data-estado~="erro"]) { display: none; } /* Link para tela que ainda nao existe como arquivo. O app.js poe esta classe sozinho, a partir de DADOS.telas_prontas. */ .em-obras { opacity: .42; cursor: not-allowed; }