/* =========================================================================== VIA3 UI — sistema visual compartilhado Use este arquivo em todos os sistemas da Via3 Tecnologia. Ele define apenas os fundamentos: cores, tipografia, superfícies e componentes base. O CSS específico de cada sistema vem depois e só usa os tokens daqui. Temas: data-theme="escuro" (padrão) e data-theme="claro" no . =========================================================================== */ /* ------------------------------- tipografia ------------------------------ */ /* Poppins é a fonte da identidade. Se os arquivos existirem em /fonts, ela é usada; senão, a pilha cai para uma geométrica do sistema, sem quebrar nada. */ @font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/poppins-400.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/poppins-600.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/poppins-700.woff2") format("woff2"); } :root { --fonte: "Poppins", "Century Gothic", "Segoe UI Variable Display", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fonte-num: "Poppins", system-ui, sans-serif; --raio-sm: 8px; --raio: 12px; --raio-lg: 16px; --sombra: 0 18px 40px rgba(0, 0, 0, .28); --sombra-sutil: 0 2px 10px rgba(0, 0, 0, .18); --transicao: .18s ease; } /* ------------------------------ tema escuro ------------------------------ */ :root, html[data-theme="escuro"], html[data-theme="dark"] { color-scheme: dark; --fundo: #0e1a24; /* página */ --fundo-brilho: #16273a; /* clarão do gradiente, no topo */ --superficie: #1a2c3b; /* cards, painéis, cabeçalho de tabela */ --superficie-2: #16465f2e; /* faixas e hover (translúcido, funde com o fundo) */ --campo: #101e29; /* inputs */ --linha: rgba(255, 255, 255, .08); --linha-forte: #263d4f; --tinta: #e9eef2; /* texto principal */ --tinta-2: #a9b4bd; /* texto de apoio */ --tinta-fraca: #7c8c99; /* rótulos, legendas */ --acao: #e85a24; /* laranja da marca — o "3" da logo */ --acao-forte: #d24a18; /* fundo de botão (contraste com texto branco) */ --acao-suave: rgba(232, 90, 36, .14); --acao-tinta: #ffffff; --serie-1: #4a90d9; /* estimado / planejado */ --serie-2: #e85a24; /* realizado */ --ok: #2eb872; --atencao: #e8b33c; --alerta: #e8833c; --erro: #e2574c; } /* ------------------------------- tema claro ------------------------------ */ html[data-theme="claro"], html[data-theme="light"] { color-scheme: light; --fundo: #f2f5f8; --fundo-brilho: #ffffff; --superficie: #ffffff; --superficie-2: #eef2f6; --campo: #f7f9fb; --linha: rgba(14, 26, 36, .10); --linha-forte: #cdd8e1; --tinta: #12212c; --tinta-2: #4a5b68; --tinta-fraca: #6b7c89; --acao: #d1490f; --acao-forte: #c74210; --acao-suave: rgba(209, 73, 15, .10); --acao-tinta: #ffffff; --serie-1: #2f6fb5; --serie-2: #c74210; --ok: #1f8f57; --atencao: #b07d10; --alerta: #c2661f; --erro: #c23b32; --sombra: 0 14px 34px rgba(18, 33, 44, .10); --sombra-sutil: 0 1px 4px rgba(18, 33, 44, .08); } /* -------------------------------- base ---------------------------------- */ * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; background: var(--fundo); /* clarão suave no topo, como na tela de acesso do DP */ background-image: radial-gradient(1200px 520px at 12% -8%, var(--fundo-brilho) 0%, transparent 62%), radial-gradient(900px 420px at 92% -12%, color-mix(in srgb, var(--fundo-brilho) 70%, transparent) 0%, transparent 60%); background-attachment: fixed; color: var(--tinta); font-family: var(--fonte); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.015em; margin: 0; } a { color: var(--acao); } /* ------------------------------ formulários ------------------------------ */ button, select, input, textarea { font-family: inherit; font-size: inherit; color: var(--tinta); } input, select, textarea { background: var(--campo); border: 1px solid var(--linha); border-radius: var(--raio-sm); padding: 10px 12px; transition: border-color var(--transicao), box-shadow var(--transicao); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--acao); box-shadow: 0 0 0 3px var(--acao-suave); } input::placeholder { color: var(--tinta-fraca); } button { cursor: pointer; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-sm); padding: 8px 14px; font-weight: 500; transition: background var(--transicao), border-color var(--transicao), filter var(--transicao); } button:hover { border-color: var(--linha-forte); } button:disabled { opacity: .5; cursor: default; } /* botão de ação — laranja da marca */ button.acao, .botao-acao { background: var(--acao-forte); border-color: transparent; color: var(--acao-tinta); font-weight: 700; padding: 11px 18px; } button.acao:hover, .botao-acao:hover { filter: brightness(1.07); } button.fantasma { background: transparent; } button.perigo { color: var(--erro); border-color: color-mix(in srgb, var(--erro) 42%, transparent); } button.perigo:hover { background: color-mix(in srgb, var(--erro) 12%, transparent); } /* --------------------------------- marca -------------------------------- */ .marca-via3 { display: inline-block; line-height: 1; } .marca-via3 .nome { font-size: 22px; font-weight: 700; letter-spacing: .02em; color: var(--tinta); } .marca-via3 .nome i { font-style: normal; color: var(--acao); } .marca-via3 .sub { display: block; margin-top: 4px; font-size: 10px; font-weight: 500; letter-spacing: .34em; text-transform: uppercase; color: var(--tinta-fraca); } .marca-via3 img { display: block; height: 34px; width: auto; max-width: 210px; } .marca-via3 img[hidden] { display: none; } /* ------------------------------ superfícies ------------------------------ */ .cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra-sutil); } .cartao-flutuante { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-lg); box-shadow: var(--sombra); } /* ------------------------------ tela de acesso --------------------------- */ .acesso { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } .acesso .caixa { width: 100%; max-width: 408px; padding: 34px 34px 26px; } .acesso .marca-via3 { margin-bottom: 26px; } .acesso h1 { font-size: 22px; margin-bottom: 8px; } .acesso .apoio { color: var(--tinta-2); font-size: 13.5px; margin: 0 0 22px; } .acesso label { display: block; font-size: 12.5px; color: var(--tinta-2); margin-bottom: 7px; } .acesso input { width: 100%; margin-bottom: 16px; } .acesso .botao-acao, .acesso button.acao { width: 100%; } .acesso .rodape { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--linha); font-size: 11.5px; color: var(--tinta-fraca); text-align: center; } /* ------------------------------- utilidades ------------------------------ */ .rotulo { font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--tinta-fraca); } .num { font-variant-numeric: tabular-nums; } .oculto { display: none !important; } /* faixa superior da marca: laranja com queda para o azul do fundo */ .faixa-marca { height: 3px; border: 0; margin: 0; background: linear-gradient(90deg, var(--acao) 0%, color-mix(in srgb, var(--acao) 45%, transparent) 42%, transparent 100%); }