/* ============================================================ HUMANO — css/main.css Base do shell: tokens, reset, tipografia, topbar, bottom-nav, componentes compartilhados, trava de sessão e acessibilidade. Fatiado do style.css monolítico: nenhum seletor, classe, id, animação ou variável foi renomeado ou removido. ============================================================ */ /* ---------- 1. TOKENS --------------------------------------- */ :root { /* superfícies */ --bg: #0A0A0C; --surface: #121216; --surface-hi: #16161A; --surface-well: var(--surface-well); /* fundo "afundado" — inputs, trilhos, poços visuais */ --border: #1F1F24; --border-strong: #2A2A31; /* dourado nobre — só em estado ativo e micro-destaques */ --gold: #D4AF37; --gold-dim: rgba(212, 175, 55, 0.16); --gold-line: rgba(212, 175, 55, 0.32); --gold-glow: rgba(212, 175, 55, 0.55); /* azul de marca — do novo logo HUMANO, par do dourado. Valor estimado visualmente a partir do degradê do logo (não pipetado de um arquivo de design) — ajustar aqui se o hex exato de origem for diferente. */ --azul: #1E6FB8; --azul-dim: rgba(30, 111, 184, 0.16); --azul-line: rgba(30, 111, 184, 0.32); --azul-glow: rgba(30, 111, 184, 0.55); /* tipografia */ --text: #FFFFFF; --muted: #94A3B8; --muted-dim: #5C6675; --muted-hi: var(--muted-hi); /* hover de item "muted" — um degrau mais perto do texto */ /* semânticos (reservados para os módulos futuros) */ --danger: #EF4444; --fatura: #F97316; /* reservado: recorrências futuras (fora da aba financeira) */ --warn: #F59E0B; --success: #10B981; --info: #3B82F6; --indigo: #6366F1; /* ações e FIIs */ --violeta: #8B5CF6; /* cripto e outros */ /* métricas */ --radius: 8px; --radius-sm: 6px; --header-h: 56px; --nav-h: 64px; --shell-max: 720px; --gutter: 20px; /* movimento */ --ease: cubic-bezier(0.2, 0.8, 0.2, 1); --fast: 160ms; --base: 240ms; --slow: 340ms; --font: "Inter", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif; } /* ---------- 1B. TEMAS — Sistema / Escuro / Claro ------------- Três predefinições, ligadas via [data-tema] na tag (ver config.js e o script de aplicação antecipada em index.html, que evita o "flash" do tema errado no primeiro pixel renderizado): (sem atributo) ou [data-tema="sistema"] — o tema original do app, fundo com uma leve mistura azulada (#0A0A0C) — é o :root acima, nada aqui precisa redeclarar. [data-tema="escuro"] — preto de verdade, neutro, sem nenhuma mistura de cor — pedido explícito: "totalmente preto", diferente do Sistema de propósito. [data-tema="claro"] — fundo claro; dourado e azul ficam mais escuros aqui, porque os tons pensados pra brilhar num fundo preto perdem contraste de leitura num fundo claro sem esse ajuste. Tudo que não é redeclarado em cada bloco é herdado do :root escuro (Sistema) no topo do arquivo — só o que muda com o tema está listado. ---------------------------------------------------------------- */ :root[data-tema="escuro"] { --bg: #000000; --surface: #121212; --surface-hi: #1A1A1A; --surface-well: #000000; --border: #262626; --border-strong: #333333; } :root[data-tema="claro"] { --bg: #F7F7F5; --surface: #FFFFFF; --surface-hi: #FFFFFF; --surface-well: #EFEFED; --border: #E4E4E7; --border-strong: #D4D4D8; --gold: #A9791F; --gold-dim: rgba(169, 121, 31, 0.12); --gold-line: rgba(169, 121, 31, 0.30); --gold-glow: rgba(169, 121, 31, 0.40); --azul: #1857A0; --azul-dim: rgba(24, 87, 160, 0.10); --azul-line: rgba(24, 87, 160, 0.28); --azul-glow: rgba(24, 87, 160, 0.40); --text: #0F0F12; --muted: #52525B; --muted-dim: #8A8A93; --muted-hi: #3F3F46; --danger: #DC2626; --fatura: #EA580C; --warn: #B45309; --success: #059669; --info: #2563EB; --indigo: #4F46E5; --violeta: #7C3AED; } /* ---------- 2. RESET ---------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100dvh; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* brilho dourado fosco no topo — única textura do tema, agora com um segundo brilho em azul (marca nova) no canto oposto — os dois em opacidade bem baixa (0.06-0.07) e atrás de tudo (z-index 0), nunca competem com texto ou controle nenhum por cima */ /* halo duplo (dourado + azul) respirando devagar — visível de propósito, não é mais um brilho parado no canto */ @keyframes flutuar-fundo { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-2.5%, 3%) scale(1.06); } } body::before { content: ""; position: fixed; inset: -10%; /* margem extra: a animação não revela borda ao se mover */ pointer-events: none; z-index: 0; background: radial-gradient(45% 35% at 50% 8%, rgba(212, 175, 55, 0.12), transparent 65%), radial-gradient(40% 32% at 92% 96%, rgba(30, 111, 184, 0.11), transparent 62%); animation: flutuar-fundo 16s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { body::before { animation: none; } } h1, h2, h3, p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } img, svg { display: block; max-width: 100%; } /* ---------- 3. SHELL ---------------------------------------- */ .app-content { position: relative; z-index: 1; max-width: var(--shell-max); margin: 0 auto; padding: calc(var(--header-h) + env(safe-area-inset-top) + 28px) var(--gutter) calc(var(--nav-h) + env(safe-area-inset-bottom) + 40px); } /* ---------- 4. HEADER --------------------------------------- */ .app-header { position: fixed; top: 0; left: 0; right: 0; z-index: 20; padding-top: env(safe-area-inset-top); /* cor de identidade por tema — pedido explícito: dourado no Claro, azul no Sistema, preto no Escuro (que já é preto puro por padrão, não precisa de regra própria — ver --bg em cada tema). */ background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid var(--border); transition: background-color var(--base) var(--ease); } :root[data-tema="sistema"] .app-header { background: color-mix(in srgb, var(--azul) 16%, rgba(10, 10, 12, 0.86)); } :root[data-tema="claro"] .app-header { background: color-mix(in srgb, var(--gold) 12%, rgba(255, 255, 255, 0.88)); } .app-header__inner { max-width: var(--shell-max); height: var(--header-h); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 16px; } /* logotipo: brasão + wordmark com tracking largo e "&" dourado */ .logo { display: inline-flex; align-items: center; gap: 11px; min-width: 0; } .logo__mark { flex: 0 0 26px; width: 26px; /* proporção real do arquivo (1080×1350px = 4:5) — nasce na altura certa em vez de espremer um quadrado sobre um retângulo. object-fit é redundância de segurança, não a correção principal desta vez. */ height: 32px; object-fit: contain; } .logo__text { display: inline-flex; align-items: baseline; gap: 6px; font-size: 14px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; white-space: nowrap; } /* indicador de status */ .status { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--muted); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; } .status__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 var(--gold-glow); animation: pulse 2.6s var(--ease) infinite; } .status[data-tone="pending"] .status__dot { background: var(--warn); animation-duration: 1.4s; } .status[data-tone="offline"] .status__dot { background: var(--muted-dim); animation: none; } .status[data-tone="alerta"] .status__dot { background: var(--danger); animation-duration: 1s; } .status[data-tone="alerta"] { border-color: rgba(239, 68, 68, 0.35); color: var(--danger); } @keyframes pulse { 0% { box-shadow: 0 0 0 0 var(--gold-glow); } 70% { box-shadow: 0 0 0 6px rgba(212, 175, 55, 0); } 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); } } /* ---------- 5. NAVEGAÇÃO INFERIOR --------------------------- */ .app-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; padding-bottom: env(safe-area-inset-bottom); background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border-top: 1px solid var(--border); transition: background-color var(--base) var(--ease); } .app-nav__inner { position: relative; max-width: var(--shell-max); margin: 0 auto; height: var(--nav-h); display: grid; grid-template-columns: repeat(var(--nav-total, 4), 1fr); } /* trilho dourado que desliza — assinatura visual do shell */ .app-nav__rail { position: absolute; top: 0; left: 0; /* acompanha a quantidade de abas — o app.js define --nav-total */ width: calc(100% / var(--nav-total, 4)); height: 2px; transform: translateX(calc(var(--nav-index, 0) * 100%)); transition: transform var(--slow) var(--ease); } .app-nav__rail::after { content: ""; display: block; width: 30px; height: 2px; margin: 0 auto; background: var(--gold); box-shadow: 0 0 12px var(--gold-glow); } .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--muted); transition: color var(--fast) var(--ease); -webkit-tap-highlight-color: transparent; } .nav-item__icon { width: 22px; height: 22px; background-color: currentColor; /* a cor do ícone segue a cor do item */ -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; transition: transform var(--base) var(--ease); } .nav-item__label { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } .nav-item__icon { flex: 0 0 auto; } .nav-item[aria-current="page"] { color: var(--gold); } .nav-item[aria-current="page"] .nav-item__icon { transform: translateY(-1px); } @media (hover: hover) { .nav-item:hover { color: var(--muted-hi); } .nav-item[aria-current="page"]:hover { color: var(--gold); } } /* ---------- 6. VIEWS (troca de tela) ------------------------ */ .view { animation: viewIn var(--base) var(--ease) both; } .view--leaving { animation: viewOut var(--fast) var(--ease) both; } @keyframes viewIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes viewOut { from { opacity: 1; } to { opacity: 0; } } .view__head { margin-bottom: 22px; } .view__eyebrow { display: inline-block; margin-bottom: 8px; color: var(--muted); font-size: 10.5px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; /* "PESSOA FÍSICA" com 0.2em de tracking é largo: sem isto ele quebra em duas linhas num cabeçalho apertado e vira "PESSOA" / "FÍSICA" */ white-space: nowrap; } .view__title { font-size: 26px; font-weight: 600; letter-spacing: -0.01em; } .view__sub { margin-top: 6px; color: var(--muted); font-size: 14px; max-width: 48ch; } .view__rule { height: 1px; margin-top: 18px; background: linear-gradient(90deg, var(--gold-line), rgba(212, 175, 55, 0) 45%); } /* ---------- 7. COMPONENTES ---------------------------------- */ /* área reservada para o conteúdo futuro de cada módulo */ .slot { display: grid; place-content: center; gap: 10px; min-height: 240px; padding: 32px 24px; text-align: center; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(180deg, var(--surface), var(--surface-well)); } .slot__mark { width: 5px; height: 5px; margin: 0 auto; border-radius: 50%; background: var(--gold); opacity: 0.75; } .slot__text { color: var(--muted); font-size: 13.5px; max-width: 34ch; } /* seções */ .section { margin-top: 28px; } .section__label { margin-bottom: 12px; color: var(--muted); font-size: 10.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; } /* cards de navegação (hub de ajustes) */ .card-list { display: grid; gap: 10px; } /* entrada em cascata — bem mais visível que uma sutileza de 6px: sobe de verdade e cresce de 92% até o tamanho real, com uma sombra que também "assenta" junto */ @keyframes entrar-subindo { from { opacity: 0; transform: translateY(22px) scale(0.94); } to { opacity: 1; transform: translateY(0) scale(1); } } .card, .row { animation: entrar-subindo 480ms cubic-bezier(0.16, 1, 0.3, 1) both; } .card-list .card:nth-child(1), .section .row:nth-child(1) { animation-delay: 0ms; } .card-list .card:nth-child(2), .section .row:nth-child(2) { animation-delay: 70ms; } .card-list .card:nth-child(3), .section .row:nth-child(3) { animation-delay: 140ms; } .card-list .card:nth-child(4), .section .row:nth-child(4) { animation-delay: 210ms; } .card-list .card:nth-child(5), .section .row:nth-child(5) { animation-delay: 280ms; } @media (prefers-reduced-motion: reduce) { .card, .row { animation: none; } } .card { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px; text-align: left; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease), transform var(--fast) var(--ease); } .card__icon { flex: 0 0 20px; width: 20px; height: 20px; background-color: var(--muted); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; transition: background-color var(--fast) var(--ease); } .card__body { flex: 1 1 auto; min-width: 0; } .card__title { font-size: 15px; font-weight: 500; } .card__desc { margin-top: 3px; color: var(--muted); font-size: 12.5px; } .card__chevron { flex: 0 0 auto; color: var(--muted-dim); font-size: 17px; line-height: 1; transition: color var(--fast) var(--ease), transform var(--fast) var(--ease); } @media (hover: hover) { .card:hover { border-color: var(--border-strong); background: var(--surface-hi); transform: translateY(-1px); } .card:hover .card__icon { background-color: var(--gold); } .card:hover .card__chevron { color: var(--gold); transform: translateX(2px); } } .card:active { transform: scale(0.98); } /* linhas de configuração */ .row { display: flex; align-items: center; gap: 16px; padding: 15px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .row + .row { margin-top: 10px; } .row__body { flex: 1 1 auto; min-width: 0; } .row__title { font-size: 14.5px; font-weight: 500; } .row__desc { margin-top: 3px; color: var(--muted); font-size: 12.5px; } .row__note { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12.5px; } .row--stack { flex-direction: column; align-items: stretch; gap: 0; } .row--stack .lentes { margin-top: 12px; align-self: flex-start; } .row__main { display: flex; align-items: center; gap: 16px; width: 100%; } /* interruptor */ .switch { flex: 0 0 auto; position: relative; width: 44px; height: 26px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface-well); transition: background-color var(--base) var(--ease), border-color var(--base) var(--ease), box-shadow var(--base) var(--ease); } .switch::after { content: ""; position: absolute; top: 50%; left: 3px; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: var(--muted); transition: transform var(--base) cubic-bezier(0.34, 1.56, 0.64, 1), background-color var(--base) var(--ease); } .switch[aria-checked="true"] { background: var(--gold-dim); border-color: var(--gold-line); box-shadow: 0 0 12px var(--gold-glow); } .switch[aria-checked="true"]::after { transform: translateX(18px); background: var(--gold); } /* aperta um pouco ao tocar — mesma linguagem tátil do resto do app */ .switch:active::after { width: 15px; margin-top: -7.5px; } .switch[aria-checked="true"]:active::after { transform: translateX(21px); } /* botões */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-hi); color: var(--text); font-size: 13px; font-weight: 500; letter-spacing: 0.02em; white-space: nowrap; transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease); } @media (hover: hover) { .btn:hover { border-color: var(--gold-line); color: var(--gold); } } /* ação primária — usada no overlay de desbloqueio */ .btn--gold { border-color: var(--gold-line); background: var(--gold-dim); color: var(--gold); } @media (hover: hover) { .btn--gold:hover { border-color: var(--gold); background: rgba(212, 175, 55, 0.22); } } .btn-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; color: var(--muted); font-size: 13px; letter-spacing: 0.04em; transition: color var(--fast) var(--ease); } @media (hover: hover) { .btn-back:hover { color: var(--gold); } } /* rodapé de assinatura */ .signature { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--border); color: var(--muted-dim); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; text-align: center; } /* ---------- 8. RESPONSIVO ----------------------------------- */ /* telas estreitas: o status vira só o ponto, para o lockup não quebrar */ @media (max-width: 400px) { .status { position: relative; gap: 0; padding: 6px; } .status__label { /* some da tela, mas continua sendo lido */ position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; white-space: nowrap; clip-path: inset(50%); } } @media (min-width: 768px) { :root { --gutter: 28px; } /* no desktop a barra vira um painel flutuante centralizado */ .app-nav { left: 50%; right: auto; bottom: 24px; width: min(480px, calc(100% - 56px)); transform: translateX(-50%); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55); } .app-nav__inner { height: 62px; } .app-content { padding-bottom: calc(var(--nav-h) + 72px); } .view__title { font-size: 30px; } } /* ---------- 10. TRAVA DE SESSÃO ----------------------------- */ /* A transição mora na regra base: se ficasse dentro de .app-locked, ela deixaria de existir no instante em que a classe sai e o desfoque desapareceria de uma vez ao destravar. */ .app-content, .app-nav { transition: filter var(--base) var(--ease); } /* o conteúdo continua no DOM, mas ilegível e inerte */ .app-locked .app-content, .app-locked .app-nav { filter: blur(12px); user-select: none; } .app-locked { overflow: hidden; } .lock-overlay { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; background: rgba(10, 10, 12, 0.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: viewIn var(--base) var(--ease) both; } .lock-overlay[hidden] { display: none; } .lock-card { width: 100%; max-width: 320px; padding: 28px 24px 24px; text-align: center; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); } .lock-card__mark { width: 44px; height: 44px; margin: 0 auto 16px; } .lock-card__title { font-size: 16px; font-weight: 600; letter-spacing: 0.02em; } .lock-card__desc { margin-top: 8px; color: var(--muted); font-size: 13px; } .lock-card__erro { margin-top: 14px; color: var(--danger); font-size: 12.5px; } .lock-card .btn { width: 100%; margin-top: 20px; } .lock-pin { margin-top: 20px; } .lock-pin__label { display: block; margin-bottom: 8px; color: var(--muted-dim); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; } .lock-pin__row { display: flex; gap: 8px; } .lock-pin__input { flex: 1 1 auto; min-width: 0; padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-well); color: var(--text); font: inherit; font-size: 14px; letter-spacing: 0.3em; text-align: center; } .lock-pin__input::placeholder { color: var(--muted-dim); letter-spacing: 0.3em; } .lock-pin .btn { width: auto; margin-top: 0; } /* ---------- UTILITÁRIOS DE VISUALIZAÇÃO --------------------- */ /* --- placeholder de valor não carregado --- */ /* monoespaçado para os traços ficarem com a largura de dígitos reais, assim o layout não pula quando o número verdadeiro chega */ .valor-vazio { color: var(--muted-dim); font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace; font-size: 0.92em; letter-spacing: -0.01em; } /* elemento presente no DOM porém oculto */ .hidden { display: none !important; } /* ---------- 15. ACESSIBILIDADE ------------------------------ */ :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: var(--radius-sm); } /* o roteador move o foco para a tela nova: sem anel quando não é teclado */ .view:focus:not(:focus-visible) { outline: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }