/* ========================================================= 1) VARIÁVEIS DE COR Uma variável CSS é um "apelido" para um valor. Em vez de repetir a mesma cor em 30 lugares, escrevemos o apelido: var(--cor-fundo). Para mudar o visual do site inteiro, basta mexer aqui. Aqui o TEMA ESCURO é o padrão (fica em :root). Mais abaixo, o bloco [data-theme="light"] troca os mesmos apelidos pelas cores claras. Trocar de tema = trocar uma palavrinha na tag . ========================================================= */ :root { /* --- Tema escuro: grafite esverdeado, ouro e verde neon --- */ --cor-fundo: #0a0f0c; --cor-fundo-suave: #0f1713; --cor-cartao: #131c17; --cor-texto: #e9f2ec; --cor-texto-suave: #94a89b; --cor-borda: #223029; --cor-ouro: #d4af37; /* cor secundária: riqueza, metais */ --cor-neon: #39ff14; /* cor terciária: verde neon, o destaque */ --cor-neon-tinta: #39ff14; /* versão do neon usada em TEXTO e bordas */ --cor-neon-fundo: rgba(57, 255, 20, 0.12); --cor-sobre-neon: #06230a; /* texto escrito por cima do neon */ --cor-perigo: #ff6b6b; --sombra: 0 10px 30px rgba(0, 0, 0, 0.45); /* Medidas reaproveitadas em vários lugares */ --raio: 14px; --largura-maxima: 1100px; --altura-cabecalho: 68px; /* Três fontes, cada uma com um papel: títulos (Archivo, encorpada), texto corrido (IBM Plex Sans) e números (IBM Plex Mono, onde todo dígito tem a mesma largura — é o que faz as colunas de dinheiro ficarem alinhadas). Depois da vírgula vêm as fontes de reserva, usadas se as do Google não carregarem. */ --fonte-titulo: "Archivo", "Segoe UI", system-ui, sans-serif; --fonte-texto: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; --fonte-numero: "IBM Plex Mono", "Consolas", ui-monospace, monospace; } [data-theme="light"] { /* --- Tema claro --- O neon puro sobre fundo branco fica ilegível como texto. Por isso --cor-neon-tinta (texto/bordas) vira um verde escuro, enquanto --cor-neon (usado nos gráficos, sobre áreas coloridas) continua neon. */ --cor-fundo: #f7f8f5; --cor-fundo-suave: #edf1ea; --cor-cartao: #ffffff; --cor-texto: #14201a; --cor-texto-suave: #566258; --cor-borda: #dde4dc; --cor-ouro: #8a6a16; --cor-neon: #39ff14; --cor-neon-tinta: #0d7a17; --cor-neon-fundo: rgba(13, 122, 23, 0.10); --cor-sobre-neon: #06230a; --cor-perigo: #c2372f; --sombra: 0 6px 20px rgba(0, 0, 0, 0.08); } /* ========================================================= 2) BASE — o que vale para a página inteira ========================================================= */ * { box-sizing: border-box; /* a largura declarada já inclui borda e recheio */ } html { scroll-behavior: smooth; /* ROLAGEM SUAVE ao clicar nos links do menu */ scroll-padding-top: 90px; /* impede o cabeçalho fixo de cobrir o título */ } /* Quem configurou o sistema para evitar animações não recebe a rolagem suave */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--fonte-texto); /* Impede o iPhone de aumentar as letras sozinho ao virar a tela */ -webkit-text-size-adjust: 100%; background-color: var(--cor-fundo); color: var(--cor-texto); line-height: 1.6; /* transition = a mudança de cor acontece suave ao trocar de tema */ transition: background-color 0.25s, color 0.25s; } /* Caixa central: segura o conteúdo no meio e dá respiro nas laterais */ .container { width: 100%; max-width: var(--largura-maxima); margin: 0 auto; padding: 0 20px; } /* Classe utilitária: some com o elemento sem apagá-lo do HTML */ .escondido { display: none !important; } /* ========================================================= 3) CABEÇALHO E MENU ========================================================= */ .cabecalho { position: sticky; /* gruda no topo enquanto a página rola */ top: 0; z-index: 50; /* fica por cima do resto */ background-color: color-mix(in srgb, var(--cor-fundo) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--cor-borda); } .cabecalho__interno { height: var(--altura-cabecalho); display: flex; align-items: center; justify-content: space-between; gap: 16px; } .logo { font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.5px; text-decoration: none; color: var(--cor-texto); } /* A segunda metade do nome sai em neon */ .logo span { color: var(--cor-neon-tinta); } .menu__lista { display: flex; gap: 24px; list-style: none; /* tira as bolinhas da lista */ margin: 0; padding: 0; } .menu__lista a { text-decoration: none; color: var(--cor-texto-suave); font-size: 0.95rem; padding: 6px 2px; border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s; } .menu__lista a:hover, .menu__lista a:focus-visible { color: var(--cor-texto); border-bottom-color: var(--cor-neon-tinta); } .cabecalho__acoes { display: flex; align-items: center; gap: 8px; } /* Botões redondos do cabeçalho (tema e três risquinhos) */ .botao-icone { width: 40px; height: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background-color: var(--cor-cartao); border: 1px solid var(--cor-borda); border-radius: 10px; color: var(--cor-texto); font-size: 1rem; cursor: pointer; transition: border-color 0.2s, transform 0.1s; } .botao-icone:hover { border-color: var(--cor-neon-tinta); } .botao-icone:active { transform: scale(0.95); } /* Os três risquinhos do menu do celular */ .risquinho { display: block; width: 18px; height: 2px; background-color: var(--cor-texto); border-radius: 2px; } /* No computador o botão de três risquinhos não aparece */ .botao-menu { display: none; } /* ========================================================= 4) TÍTULOS E TEXTOS DAS SEÇÕES ========================================================= */ .secao { padding: 72px 0; } .secao--topo { padding-top: 56px; } /* Seção com fundo levemente diferente, para separar visualmente */ .secao--alternada { background-color: var(--cor-fundo-suave); border-top: 1px solid var(--cor-borda); border-bottom: 1px solid var(--cor-borda); } .sobretitulo { margin: 0 0 8px; color: var(--cor-neon-tinta); font-size: 0.8rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; } .titulo-grande { margin: 0 0 12px; font-family: var(--fonte-titulo); font-size: clamp(2rem, 5vw, 3rem); /* cresce junto com a tela */ line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; /* evita uma palavra sozinha na última linha */ } .subtitulo, .texto-apoio { margin: 0 0 28px; max-width: 62ch; /* linha curta é mais fácil de ler */ color: var(--cor-texto-suave); } .titulo-secao { margin: 0 0 10px; font-family: var(--fonte-titulo); font-size: clamp(1.5rem, 3.5vw, 2rem); letter-spacing: -0.015em; } /* Uma listra dourada curta abaixo do título da seção */ .titulo-secao::after { content: ""; display: block; width: 46px; height: 3px; margin-top: 12px; border-radius: 3px; background-color: var(--cor-ouro); } /* ========================================================= 5) CARTÕES DE NÚMERO (resumo e projeção) grid + auto-fit = as caixas se reorganizam sozinhas conforme a largura da tela, sem precisar de regra para cada tamanho. ========================================================= */ /* Faixa dourada do modo exemplo */ .faixa-exemplo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; padding: 14px 18px; border: 1px dashed var(--cor-ouro); border-radius: var(--raio); background-color: color-mix(in srgb, var(--cor-ouro) 8%, transparent); } .faixa-exemplo p { margin: 0; max-width: 58ch; font-size: 0.9rem; color: var(--cor-texto-suave); } .faixa-exemplo strong { color: var(--cor-ouro); } .cartoes-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; } .cartoes-resumo--tres { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 28px; } .cartao-numero { background-color: var(--cor-cartao); border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: 20px; box-shadow: var(--sombra); } /* O cartão principal ganha uma borda neon e um brilho de fundo */ .cartao-numero--destaque { border-color: var(--cor-neon-tinta); background-image: linear-gradient(160deg, var(--cor-neon-fundo), transparent 60%); } .cartao-numero__rotulo { margin: 0 0 6px; font-size: 0.78rem; letter-spacing: 1px; text-transform: uppercase; color: var(--cor-texto-suave); } .cartao-numero__valor { margin: 0; font-family: var(--fonte-numero); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; /* tabular-nums alinha os dígitos em coluna, como numa calculadora */ font-variant-numeric: tabular-nums; } .cartao-numero--destaque .cartao-numero__valor { color: var(--cor-neon-tinta); } /* ========================================================= 6) FORMULÁRIOS ========================================================= */ .formulario { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; align-items: end; background-color: var(--cor-cartao); border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: 20px; margin-bottom: 26px; } .campo { display: flex; flex-direction: column; gap: 6px; } .campo label { font-size: 0.8rem; color: var(--cor-texto-suave); } .campo input, .campo select { width: 100%; padding: 11px 12px; /* 16px é proposital: abaixo disso o iPhone dá um zoom no campo toda vez que você toca nele para digitar */ font-size: 16px; font-family: inherit; color: var(--cor-texto); background-color: var(--cor-fundo); border: 1px solid var(--cor-borda); border-radius: 10px; } /* Anel de foco: mostra em qual campo o teclado está */ .campo input:focus, .campo select:focus, .botao:focus-visible, .botao-icone:focus-visible, .menu__lista a:focus-visible { outline: 2px solid var(--cor-neon-tinta); outline-offset: 2px; } .campo--botoes { flex-direction: row; gap: 10px; } /* ========================================================= 7) BOTÕES ========================================================= */ .botao { display: inline-block; padding: 11px 18px; font-size: 0.92rem; font-family: inherit; font-weight: 600; border-radius: 10px; border: 1px solid transparent; cursor: pointer; transition: transform 0.1s, opacity 0.2s, border-color 0.2s; } .botao:active { transform: translateY(1px); } /* Botão principal: fundo neon com texto bem escuro por cima */ .botao--principal { background-color: var(--cor-neon-tinta); color: var(--cor-sobre-neon); } .botao--principal:hover { opacity: 0.88; } .botao--secundario { background-color: transparent; color: var(--cor-texto); border-color: var(--cor-borda); } .botao--secundario:hover { border-color: var(--cor-neon-tinta); } .botao--perigo { background-color: transparent; color: var(--cor-perigo); border-color: var(--cor-perigo); } .botao--perigo:hover { background-color: var(--cor-perigo); color: #ffffff; } /* Botõezinhos de editar/remover dentro da tabela */ .botao-mini { /* alvo de toque maior, para o dedo acertar no celular */ padding: 8px 12px; margin-left: 6px; font-size: 0.78rem; font-family: inherit; color: var(--cor-texto-suave); background-color: transparent; border: 1px solid var(--cor-borda); border-radius: 8px; cursor: pointer; } .botao-mini:hover { color: var(--cor-texto); border-color: var(--cor-neon-tinta); } .botao-mini--remover:hover { color: var(--cor-perigo); border-color: var(--cor-perigo); } /* ========================================================= 8) TABELA DE ATIVOS No celular a tabela não cabe na tela, então ela ganha uma rolagem lateral própria (a página em si nunca rola de lado). ========================================================= */ .tabela-rolagem { overflow-x: auto; border: 1px solid var(--cor-borda); border-radius: var(--raio); background-color: var(--cor-cartao); } .tabela { width: 100%; min-width: 720px; /* abaixo disso, a rolagem lateral entra em ação */ border-collapse: collapse; font-size: 0.92rem; } .tabela th, .tabela td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--cor-borda); white-space: nowrap; } .tabela th { font-size: 0.75rem; letter-spacing: 1px; text-transform: uppercase; color: var(--cor-texto-suave); background-color: var(--cor-fundo-suave); } /* A última linha não precisa de risco embaixo */ .tabela tbody tr:last-child td { border-bottom: none; } .tabela tbody tr:hover td { background-color: var(--cor-neon-fundo); } .alinha-direita { text-align: right !important; } /* Números da tabela alinhados como numa planilha */ .tabela td.alinha-direita { font-family: var(--fonte-numero); font-size: 0.86rem; font-variant-numeric: tabular-nums; } .celula-nome { font-weight: 600; } /* Etiqueta colorida da classe do ativo */ .etiqueta-classe { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; border: 1px solid; } /* Aviso de "nada cadastrado ainda" */ .vazio { margin: 18px 0 0; padding: 26px; text-align: center; color: var(--cor-texto-suave); border: 1px dashed var(--cor-borda); border-radius: var(--raio); } /* ========================================================= 9) SEÇÃO CARTEIRA — rosquinha + lista de classes ========================================================= */ .grade-carteira { display: grid; grid-template-columns: 280px 1fr; /* gráfico à esquerda, lista à direita */ gap: 32px; align-items: start; } .grafico-rosca svg { width: 100%; height: auto; } /* Textos que ficam no buraco do meio da rosquinha */ .rosca__rotulo { fill: var(--cor-texto-suave); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; } .rosca__valor { fill: var(--cor-texto); font-family: var(--fonte-numero); font-size: 16px; font-weight: 600; } .lista-classes { display: flex; flex-direction: column; gap: 10px; } /* Cada linha: cor | nome e % real | campo da meta | selo de desvio */ .classe-linha { display: grid; grid-template-columns: 14px 1fr 128px 96px; gap: 14px; align-items: center; background-color: var(--cor-cartao); border: 1px solid var(--cor-borda); border-radius: 12px; padding: 12px 16px; } .classe-cor { width: 14px; height: 14px; border-radius: 50%; } .classe-nome { font-weight: 600; } .classe-detalhe { display: block; font-family: var(--fonte-numero); font-size: 0.78rem; color: var(--cor-texto-suave); font-variant-numeric: tabular-nums; } /* Barrinha que mostra a fatia real da classe */ .classe-barra { height: 5px; margin-top: 7px; border-radius: 3px; background-color: var(--cor-fundo-suave); overflow: hidden; } .classe-barra span { display: block; height: 100%; border-radius: 3px; } .classe-meta { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--cor-texto-suave); } .classe-meta input { width: 68px; padding: 8px; text-align: right; font-family: var(--fonte-numero); font-size: 16px; /* mesmo motivo: evita o zoom automático do iPhone */ color: var(--cor-texto); background-color: var(--cor-fundo); border: 1px solid var(--cor-borda); border-radius: 8px; } .classe-meta input:focus { outline: 2px solid var(--cor-neon-tinta); outline-offset: 1px; } /* Selo do desvio: verde quando está acima da meta, vermelho abaixo */ .selo { text-align: center; padding: 5px 8px; border-radius: 999px; font-family: var(--fonte-numero); font-size: 0.78rem; font-weight: 600; font-variant-numeric: tabular-nums; border: 1px solid; } .selo--acima { color: var(--cor-neon-tinta); border-color: var(--cor-neon-tinta); background-color: var(--cor-neon-fundo); } .selo--abaixo { color: var(--cor-perigo); border-color: var(--cor-perigo); background-color: transparent; } .selo--igual { color: var(--cor-texto-suave); border-color: var(--cor-borda); } .aviso-meta { margin-top: 18px; font-size: 0.88rem; color: var(--cor-ouro); min-height: 1.4em; /* reserva a linha para o texto não "pular" */ } /* ========================================================= 10) GRÁFICO DE BARRAS DA PROJEÇÃO ========================================================= */ .grafico-barras { margin-top: 30px; padding: 20px; background-color: var(--cor-cartao); border: 1px solid var(--cor-borda); border-radius: var(--raio); overflow-x: auto; } .grafico-barras svg { width: 100%; min-width: 520px; height: auto; } .barra-texto { fill: var(--cor-texto-suave); font-family: var(--fonte-numero); font-size: 11px; } .barra-valor { fill: var(--cor-texto); font-family: var(--fonte-numero); font-size: 11px; font-weight: 600; } /* ========================================================= 11) RODAPÉ ========================================================= */ .rodape { padding: 40px 0; background-color: var(--cor-fundo-suave); border-top: 1px solid var(--cor-borda); } .rodape__aviso { margin: 0 0 18px; max-width: 62ch; font-size: 0.9rem; color: var(--cor-texto-suave); } .rodape__acoes { display: flex; flex-wrap: wrap; gap: 10px; } .rodape__assinatura { margin: 24px 0 0; font-size: 0.82rem; color: var(--cor-texto-suave); } /* ========================================================= 12) CELULAR — o que muda em telas estreitas Regra @media = "aplique isto só quando a tela for até 820px". ========================================================= */ @media (max-width: 820px) { /* O menu vira uma caixa que desce do cabeçalho quando aberto */ .menu { position: absolute; top: var(--altura-cabecalho); left: 0; right: 0; display: none; /* escondido por padrão */ background-color: var(--cor-fundo); border-bottom: 1px solid var(--cor-borda); box-shadow: var(--sombra); } /* A classe "aberto" é colocada e retirada pelo JavaScript */ .menu.aberto { display: block; } .menu__lista { flex-direction: column; gap: 0; padding: 8px 20px 16px; } .menu__lista a { display: block; padding: 12px 0; border-bottom: 1px solid var(--cor-borda); } /* Agora sim: o botão de três risquinhos aparece */ .botao-menu { display: flex; } /* Gráfico e lista de classes passam a ficar um embaixo do outro */ .grade-carteira { grid-template-columns: 1fr; } .grafico-rosca { max-width: 260px; margin: 0 auto; } .secao { padding: 52px 0; } } @media (max-width: 520px) { /* Em telas bem estreitas, a linha da classe se reorganiza em duas fileiras */ .classe-linha { grid-template-columns: 14px 1fr 88px; row-gap: 10px; } .classe-meta { grid-column: 2 / 4; /* a meta ocupa a fileira de baixo inteira */ } .campo--botoes { flex-direction: column; } .campo--botoes .botao { width: 100%; } }