/* ============================================================================= base.css — tokens, reset e o esqueleto da tela. Verde-azulado como cor de marca, não verde-dinheiro: o produto fala de hábito, não de lucro. Vermelho é reservado para DÍVIDA e SALDO NEGATIVO — nunca para "gasto". Gasto normal não é erro, e pintar todo débito de vermelho ensina culpa em vez de controle, que é o oposto do que este app quer fazer. ============================================================================= */ :root { --marca: #0f766e; --marca-forte: #0a5750; --marca-fraca: #dff2ef; --marca-tinta: #ffffff; /* neutros com viés levemente quente: cinza frio ao lado do verde-azulado puxa para hospitalar, e o app é sobre a vida da pessoa */ --fundo: #f4f7f6; --superficie: #ffffff; --superficie-2: #f8fbfa; --tinta: #10201d; --tinta-2: #46605b; --tenue: #7d918d; --linha: #e2eae7; --linha-forte: #cbd8d4; /* semânticas — separadas da marca de propósito */ --ok: #0d7a56; --ok-fundo: #e1f4ec; --warn: #96600b; --warn-fundo: #fbeed8; --crit: #b02525; --crit-fundo: #fbe4e4; /* os três grupos do orçamento. São CATEGORIAS, não julgamentos: "desejo" é âmbar, não vermelho — desejo faz parte de um orçamento saudável */ --g-necessidade: #3b6fd4; --g-necessidade-fraca: #e6eefb; --g-desejo: #b8791b; --g-desejo-fraca: #fbf0dc; --g-futuro: #0d7a56; --g-futuro-fraca: #e1f4ec; --g-receita: #0f766e; --raio: 16px; --raio-p: 10px; --raio-g: 22px; --sombra: 0 1px 2px rgba(16, 32, 29, .05), 0 10px 24px -18px rgba(16, 32, 29, .35); --sombra-alta: 0 2px 6px rgba(16, 32, 29, .07), 0 22px 44px -26px rgba(16, 32, 29, .45); --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* tabular-nums é obrigatório onde há coluna de dinheiro: sem isso os algarismos dançam de largura e a coluna de valores fica torta */ --numeros: "Segoe UI Variable Text", "SF Pro Text", var(--fonte); --largura: 560px; --nav-altura: 62px; --seguro-baixo: env(safe-area-inset-bottom, 0px); --seguro-cima: env(safe-area-inset-top, 0px); } /* Um bloco escuro só, e o JS decide quando ele vale (ver js/tema.js). O `data-tema` é carimbado na raiz ANTES da primeira pintura por um script inline no — sem ele, quem prefere escuro veria um lampejo branco a cada carregamento. A alternativa seria repetir estes ~30 tokens dentro de um `@media (prefers-color-scheme: dark)` para o caso automático. Dois blocos divergem: alguém ajusta uma cor num deles, esquece o outro, e o modo escuro manual fica com uma cor errada que só aparece quando um usuário reclama. */ :root[data-tema="escuro"] { --marca: #4fd1c5; --marca-forte: #7ee0d7; --marca-fraca: #10312e; --marca-tinta: #06201d; --fundo: #07100f; --superficie: #101c1a; --superficie-2: #152422; --tinta: #e6f0ee; --tinta-2: #b0c4c0; --tenue: #7f9490; --linha: #1f3330; --linha-forte: #2c4440; --ok: #45c396; --ok-fundo: #0f2a22; --warn: #dda23e; --warn-fundo: #2b2313; --crit: #f07d7d; --crit-fundo: #331a1a; --g-necessidade: #7ba4ee; --g-necessidade-fraca: #16233a; --g-desejo: #e0ac52; --g-desejo-fraca: #2c2414; --g-futuro: #45c396; --g-futuro-fraca: #0f2a22; --g-receita: #4fd1c5; --sombra: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 24px -18px rgba(0, 0, 0, .9); --sombra-alta: 0 2px 6px rgba(0, 0, 0, .55), 0 22px 44px -26px rgba(0, 0, 0, .95); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100dvh; background: var(--fundo); color: var(--tinta); font-family: var(--fonte); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; } h1, h2, h3, p, dl, dd, figure, ul, ol { margin: 0; } ul, ol { padding: 0; list-style: none; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } a { color: var(--marca); text-decoration: none; } svg.ico { display: block; flex: none; } /* --- esqueleto da tela ------------------------------------------------------- */ #app { min-height: 100dvh; display: flex; flex-direction: column; } #cabecalho { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 8px; height: calc(56px + var(--seguro-cima)); padding: var(--seguro-cima) 12px 0; background: color-mix(in srgb, var(--fundo) 88%, transparent); backdrop-filter: saturate(1.6) blur(12px); border-bottom: 1px solid var(--linha); } .cab-titulo { font-size: 17px; font-weight: 650; letter-spacing: -.01em; } .cab-marca { font-size: 18px; font-weight: 750; letter-spacing: -.02em; color: var(--marca); } .cab-espaco { flex: 1; } .cab-btn { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--tinta-2); } .cab-btn:active { background: var(--linha); } #tela { flex: 1; width: 100%; max-width: var(--largura); margin: 0 auto; padding: 16px 16px calc(var(--nav-altura) + var(--seguro-baixo) + 88px); } /* Em telas largas a navegação vira coluna à esquerda: o mesmo app serve navegador e celular sem virar dois códigos. */ @media (min-width: 900px) { #app { flex-direction: row; } #cabecalho { display: none; } #tela { max-width: 720px; padding: 28px 32px 64px; margin: 0 auto; } } /* --- navegação inferior (celular) -------------------------------------------- */ #nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; height: calc(var(--nav-altura) + var(--seguro-baixo)); padding-bottom: var(--seguro-baixo); background: color-mix(in srgb, var(--superficie) 92%, transparent); backdrop-filter: saturate(1.6) blur(14px); border-top: 1px solid var(--linha); } .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10.5px; font-weight: 560; color: var(--tenue); text-decoration: none; } .nav-ativo { color: var(--marca); } /* --- botão de tema ------------------------------------------------------------- Existe em dois lugares porque o casco muda de forma: no celular o cabeçalho é a única barra persistente; a partir de 900px o cabeçalho some e quem fica é a coluna lateral. Um botão só ficaria invisível em metade dos tamanhos. */ #tema-nav { display: none; } @media (min-width: 900px) { #nav { position: sticky; top: 0; left: auto; right: auto; bottom: auto; align-self: flex-start; display: flex; flex-direction: column; justify-content: flex-start; gap: 4px; width: 232px; height: 100dvh; padding: 24px 12px; border-top: 0; border-right: 1px solid var(--linha); } /* `margin-top:auto` empurra para o rodapé da coluna: é ajuste de interface, não navegação, e não disputa atenção com as abas. */ #tema-nav { display: flex; align-items: center; gap: 12px; margin-top: auto; padding: 11px 12px; border: 0; border-radius: var(--raio-p); background: transparent; color: var(--tenue); font-size: 14.5px; font-weight: 560; text-align: left; } #tema-nav:hover { background: var(--superficie-2); color: var(--tinta-2); } #nav::before { content: "Bússola"; padding: 0 12px 18px; font-size: 20px; font-weight: 750; letter-spacing: -.02em; color: var(--marca); } .nav-item { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 11px 12px; border-radius: var(--raio-p); font-size: 14.5px; } .nav-ativo { background: var(--marca-fraca); } } /* --- botão flutuante de lançar ----------------------------------------------- */ #lancar-rapido { position: fixed; right: 18px; bottom: calc(var(--nav-altura) + var(--seguro-baixo) + 16px); z-index: 45; display: grid; place-items: center; width: 58px; height: 58px; border: 0; border-radius: 50%; background: var(--marca); color: var(--marca-tinta); box-shadow: var(--sombra-alta); transition: transform .12s ease; } #lancar-rapido:active { transform: scale(.93); } @media (min-width: 900px) { #lancar-rapido { left: 24px; right: auto; bottom: 28px; width: auto; height: 46px; padding: 0 20px 0 16px; gap: 8px; grid-auto-flow: column; border-radius: 999px; font-weight: 620; } #lancar-rapido::after { content: "Lançar"; font-size: 15px; } } /* --- aviso de rede ----------------------------------------------------------- */ #aviso-rede { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 12px; background: var(--warn-fundo); color: var(--warn); font-size: 12.5px; font-weight: 560; } /* --- esqueleto de carregamento ----------------------------------------------- */ .esqueleto-tela { display: grid; gap: 14px; padding-top: 6px; } .esqueleto { border-radius: var(--raio-p); background: linear-gradient(90deg, var(--linha) 25%, var(--superficie-2) 50%, var(--linha) 75%); background-size: 240% 100%; animation: brilho 1.3s ease-in-out infinite; } .esqueleto-linha { height: 15px; } .esqueleto-bloco { height: 132px; border-radius: var(--raio); } @keyframes brilho { to { background-position: -240% 0; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }