/* * Tokens de cor do painel. As folhas das telas só leem variáveis; o tema * claro (MIV Blind Tecnologia, o mesmo do protótipo betaBlind) redefine os * valores em `:root[data-tema="claro"]`. * * Cor com transparência é escrita como `rgb(var(--fs-ink-rgb) / 0.4)`: o hex * de 8 dígitos (#e8ecf166) não deixa trocar a cor base sem trocar a regra. */ :root { --fs-primary: #004dfd; --fs-secondary: #a8b4c4; --fs-tertiary: #4a5568; --fs-strategic: #553cf9; --fs-neutral: #e8ecf1; --fs-banner: #0b1018; --fs-background: #05070b; --fs-success: #3d8f4a; --fs-critical: #a51d27; --fs-high: #d4891a; --fs-red: #e5433f; --fs-orange: #df9a22; --fs-yellow: #d8b21b; --fs-green: #2f9e44; --fs-magenta: #c44bb8; --fs-teal: #2aa8a0; --fs-strong: #ced2e1; --fs-muted: #9199a7; --fs-ink-rgb: 232 236 241; --fs-banner-rgb: 11 16 24; --fs-bg-rgb: 5 7 11; --fs-faint: rgb(var(--fs-ink-rgb) / 0.267); /* Sombra interna dos painéis e sombra projetada (menus, modais). */ --fs-inset-rgb: 0 0 0; --fs-shadow-rgb: 0 0 0; --fs-shadow-k: 1; --fs-backdrop: rgba(2, 4, 8, 0.82); /* Trilha vazia da cronologia (Análise Profunda). */ --fs-track: #050505; --fs-scroll-track: #080b10; --fs-scroll-thumb: #29323d; --fs-scroll-thumb-hover: #3a4654; /* Cores de DESTAQUE de texto no incidente (497): mais claras que os acentos, porque o vermelho de marca (#a51d27) some como texto sobre o fundo escuro. Contraste medido >= 4,5 sobre o fundo dos blocos nos dois temas. */ --fs-destaque-vermelho: #f05252; --fs-destaque-laranja: #f5953b; --fs-destaque-ambar: #e5c04a; --fs-destaque-azul: #5cc8fa; --fs-destaque-verde: #4cc764; color-scheme: dark; } :root[data-tema="claro"] { --fs-secondary: #5a6578; --fs-tertiary: #7d8794; --fs-neutral: #0b1018; --fs-banner: #ffffff; --fs-background: #e8eaed; --fs-strong: #1a2030; --fs-muted: #5a6578; --fs-ink-rgb: 11 16 24; --fs-banner-rgb: 255 255 255; --fs-bg-rgb: 232 234 237; --fs-inset-rgb: 232 234 237; --fs-shadow-rgb: 11 16 24; --fs-shadow-k: 0.25; --fs-backdrop: rgba(11, 16, 24, 0.45); --fs-track: #eef0f3; --fs-scroll-track: #dfe2e8; --fs-scroll-thumb: #c5cad3; --fs-scroll-thumb-hover: #a8b0bc; /* style.css (legado) pinta o body e o loader com estas. */ --bg-dark: #e8eaed; --text-main: #0b1018; --text-muted: #5a6578; --fs-destaque-vermelho: #b42318; --fs-destaque-laranja: #a14a07; --fs-destaque-ambar: #8a6400; --fs-destaque-azul: #0369a1; --fs-destaque-verde: #2a7136; color-scheme: light; } * { scrollbar-color: var(--fs-scroll-thumb) var(--fs-scroll-track) !important; } *::-webkit-scrollbar-track, *::-webkit-scrollbar-corner { background: var(--fs-scroll-track) !important; } *::-webkit-scrollbar-thumb { background: var(--fs-scroll-thumb) !important; } *::-webkit-scrollbar-thumb:hover { background: var(--fs-scroll-thumb-hover) !important; } /* ---------- Ajustes que não cabem em token (só no claro) ---------- */ :root[data-tema="claro"] body { background: var(--fs-background); color: var(--fs-neutral); } /* Fundo de rede: traço e nós escuros, um pouco mais visíveis (betaBlind). */ :root[data-tema="claro"] .fs-view::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='220' viewBox='0 0 360 220'%3E%3Cg fill='none' stroke='%230b1018' stroke-opacity='.22' stroke-width='.6'%3E%3Cpath d='M18 44L92 20l76 54 82-38 91 58M42 176l80-52 76 45 66-54 78 42M92 20l30 104M168 74l30 95M250 36l14 79'/%3E%3C/g%3E%3Cg fill='%230b1018' fill-opacity='.32'%3E%3Ccircle cx='18' cy='44' r='1.6'/%3E%3Ccircle cx='92' cy='20' r='2'/%3E%3Ccircle cx='168' cy='74' r='1.5'/%3E%3Ccircle cx='250' cy='36' r='1.8'/%3E%3Ccircle cx='341' cy='94' r='1.4'/%3E%3Ccircle cx='42' cy='176' r='1.5'/%3E%3Ccircle cx='122' cy='124' r='2'/%3E%3Ccircle cx='198' cy='169' r='1.5'/%3E%3Ccircle cx='264' cy='115' r='1.8'/%3E%3Ccircle cx='342' cy='157' r='1.5'/%3E%3C/g%3E%3C/svg%3E"); } :root[data-tema="claro"] .fs-view::after { background: radial-gradient(circle at 12% 24%, rgba(11, 16, 24, 0.38) 0 1px, transparent 2px), radial-gradient(circle at 31% 72%, rgba(11, 16, 24, 0.34) 0 1px, transparent 2px), radial-gradient(circle at 54% 18%, rgba(11, 16, 24, 0.42) 0 1px, transparent 2px), radial-gradient(circle at 73% 64%, rgba(11, 16, 24, 0.36) 0 1px, transparent 2px), radial-gradient(circle at 91% 34%, rgba(11, 16, 24, 0.34) 0 1px, transparent 2px); } :root[data-tema="claro"] .fs-hours { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%230b1018' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); } :root[data-tema="claro"] .ff-busca, :root[data-tema="claro"] .ib-busca, :root[data-tema="claro"] .ob-busca { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24'%3E%3Cpath fill='%237d8794' d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14'/%3E%3C/svg%3E"); } /* Logo: versão branca no escuro, colorida com texto escuro no claro. */ :root[data-tema="claro"] .top-bar .logo .logo-escuro { display: none; } :root[data-tema="claro"] .top-bar .logo .logo-claro { display: block; } /* Menu do usuário: painel sólido com borda fina, sem vidro. */ :root[data-tema="claro"] .top-bar .hd-menu-usuario { background: var(--fs-banner); border: 1px solid rgb(var(--fs-ink-rgb) / 0.08); backdrop-filter: none; -webkit-backdrop-filter: none; } :root[data-tema="claro"] .top-bar .hd-avatar { box-shadow: inset 0 0 0 1px #03d1fd44; } /* flowspec-soc.css (legado) força branco com !important no nome do usuário. */ :root[data-tema="claro"] .top-bar .username-display { color: var(--fs-neutral) !important; text-shadow: none; } /* Selos e chips: no claro a cor vira fundo sólido com texto branco (betaBlind). */ :root[data-tema="claro"] .fs-view table.table-soc .bg-danger { background: var(--fs-critical) !important; color: #fff !important; border-color: var(--fs-critical) !important; } :root[data-tema="claro"] .fs-view table.table-soc .bg-warning { background: var(--fs-orange) !important; color: #fff !important; border-color: var(--fs-orange) !important; } :root[data-tema="claro"] .fs-view table.table-soc .bg-info { background: #0b8fc4 !important; color: #fff !important; border-color: #0b8fc4 !important; } :root[data-tema="claro"] .fs-view table.table-soc .bg-secondary { background: var(--fs-tertiary) !important; color: #fff !important; border-color: var(--fs-tertiary) !important; } :root[data-tema="claro"] .fs-view table.table-soc .bg-primary { background: var(--fs-primary) !important; color: #fff !important; border-color: var(--fs-primary) !important; } :root[data-tema="claro"] .fs-view .ff-modal-selo.bg-danger { background: var(--fs-critical) !important; color: #fff !important; } :root[data-tema="claro"] .fs-view .ff-modal-selo.bg-warning { background: var(--fs-orange) !important; color: #fff !important; } :root[data-tema="claro"] .fs-view .ff-modal-selo.bg-info { background: #0b8fc4 !important; color: #fff !important; } :root[data-tema="claro"] .fs-view .ff-modal-selo.bg-secondary { background: var(--fs-tertiary) !important; color: #fff !important; } :root[data-tema="claro"] .fs-view .fs-toggle button.ativo { background: var(--fs-red); color: #fff; border-color: var(--fs-red); } /* Classes do Bootstrap pensadas para fundo escuro. */ :root[data-tema="claro"] .fs-view .text-white, :root[data-tema="claro"] .fs-view .text-verdict { color: var(--fs-neutral) !important; } :root[data-tema="claro"] .fs-view .text-white-50 { color: var(--fs-muted) !important; } :root[data-tema="claro"] .fs-view .btn-close { filter: none; } /* O DESTAQUE DAS CAIXAS NO ESCURO, como o claro já tem (pedido do dono, 20/10/2026). No claro a caixa é branca sobre cinza e salta; no escuro era #0b1018 sobre #050608 com uma sombra interna preta que escurecia as bordas — a caixa se fundia no fundo. Aqui: um tom acima, um fio de contorno e uma sombra externa leve. O contorno é anel de sombra, não borda: nenhuma medida muda. */ :root:not([data-tema="claro"]) .fs-panel { background: #131a27; box-shadow: inset 0 1px 0 rgb(var(--fs-ink-rgb) / 0.045), 0 0 0 1px rgb(var(--fs-ink-rgb) / 0.1), 0 8px 22px rgb(0 0 0 / 0.38); } /* TEXTO BRANCO SOBRE BRANCO NA TABELA DE CASOS E ALERTAS (tema claro, visto pelo dono em 20/10/2026: alcance, confiança, nome da ameaça e "último" sumiam). A tabela é `table-dark`, e o Bootstrap pinta cada célula com `--bs-table-color` (#fff) — a cor do `table-soc` nunca chegava às células. E a regra antiga `#flowspec-table-body .text-muted` (com id) cravava #cbd5e1 por cima da deles, na tabela e no detalhe do alerta. Só o claro muda; o escuro fica como está. */ :root[data-tema="claro"] .fs-view table.table-soc { --bs-table-color: var(--fs-neutral); --bs-table-striped-color: var(--fs-neutral); --bs-table-hover-color: var(--fs-neutral); --bs-table-active-color: var(--fs-neutral); --bs-table-bg: transparent; } :root[data-tema="claro"] #view-flowspec .text-muted, :root[data-tema="claro"] #flowspec-table-body .text-muted, :root[data-tema="claro"] #threatModal .text-muted { color: var(--fs-muted) !important; } /* O ciano #00f2ff cravado (com !important) no relógio da sessão e nos títulos das colunas: realce no escuro, contraste 1,4 sobre o branco. No claro, o mesmo realce na cor primária. */ :root[data-tema="claro"] #soc-clock, :root[data-tema="claro"] .table-soc thead th { color: var(--fs-primary) !important; text-shadow: none !important; } /* O detalhe do alerta (nosso, na casca deles): o ciano `text-info` e o âmbar #f59e0b escritos no script ficam em ~1,7 de contraste sobre o branco. No claro, os mesmos tons mais fechados (o #0b8fc4 é o "info" do claro acima). */ :root[data-tema="claro"] #threatModal .text-info, :root[data-tema="claro"] .ff-modal .text-info { color: #0b8fc4 !important; } :root[data-tema="claro"] #threatModal [style*="#f59e0b"], :root[data-tema="claro"] .ff-modal [style*="#f59e0b"] { color: #b45309 !important; } /* O FUNDO DE REDE UM POUCO MAIS APARENTE (pedido do dono, 20/10/2026: "só dá para notar se olhar fixamente", nos dois temas). O desenho, o movimento e o tempo são os de flowspec-base.css (24 s de deriva, 7 s de pisca, os mesmos passos); muda só a AMPLITUDE da opacidade, ~1,8× — as animações originais ficam intactas, estas têm outro nome. Valem no escuro e no claro (o claro troca só a cor do traço, acima). */ .fs-view::before { animation-name: fs-network-drift-aparente; } .fs-view::after { animation-name: fs-network-node-blink-aparente; } @keyframes fs-network-drift-aparente { 0% { background-position: 0 0; opacity: 0.18; } 45% { opacity: 0.36; } 100% { background-position: 360px 220px; opacity: 0.18; } } @keyframes fs-network-node-blink-aparente { 0%, 100% { opacity: 0.14; } 24% { opacity: 0.46; } 38% { opacity: 0.18; } 72% { opacity: 0.34; } } /* No claro, traço escuro sobre cinza-claro aparece menos que traço claro sobre preto com a mesma opacidade: a mesma curva, ~1,4× acima da do escuro. */ :root[data-tema="claro"] .fs-view::before { animation-name: fs-network-drift-aparente-claro; } :root[data-tema="claro"] .fs-view::after { animation-name: fs-network-node-blink-aparente-claro; } @keyframes fs-network-drift-aparente-claro { 0% { background-position: 0 0; opacity: 0.26; } 45% { opacity: 0.5; } 100% { background-position: 360px 220px; opacity: 0.26; } } @keyframes fs-network-node-blink-aparente-claro { 0%, 100% { opacity: 0.2; } 24% { opacity: 0.62; } 38% { opacity: 0.25; } 72% { opacity: 0.48; } } @media (prefers-reduced-motion: reduce) { .fs-view::before, .fs-view::after, :root[data-tema="claro"] .fs-view::before, :root[data-tema="claro"] .fs-view::after { animation: none; opacity: 0.22; } :root[data-tema="claro"] .fs-view::before, :root[data-tema="claro"] .fs-view::after { opacity: 0.3; } } /* OS BLOCOS DO DETALHE (caso e alerta) com o destaque das caixas do feed (pedido do dono, 20/10/2026, "principalmente no escuro"). No escuro o bloco era o fundo da página a 53% sobre a caixa do modal — quase a mesma cor — com a sombra interna preta; agora um tom acima e um fio de contorno (anel de sombra: nenhuma medida muda). O grupo de destinos, dentro dele, ganha o mesmo fio. No claro o fundo já contrasta: só o fio, leve. */ :root:not([data-tema="claro"]) .fs-view .ff-inv-bloco { background: #121a26; box-shadow: inset 0 1px 0 rgb(var(--fs-ink-rgb) / 0.04), 0 0 0 1px rgb(var(--fs-ink-rgb) / 0.1); } :root:not([data-tema="claro"]) .fs-view .ff-inv-grupo { box-shadow: 0 0 0 1px rgb(var(--fs-ink-rgb) / 0.08); } :root[data-tema="claro"] .fs-view .ff-inv-bloco, :root[data-tema="claro"] .fs-view .ff-inv-grupo { box-shadow: 0 0 0 1px rgb(var(--fs-ink-rgb) / 0.06); } /* O MESMO DESTAQUE NAS TELAS QUE TÊM CAIXA PRÓPRIA (pedido do dono, 20/10/2026). A Visão Global e a Reputação ASN não usam `.fs-panel`: cada uma tem as suas caixas com a mesma receita (fundo banner + sombra interna preta) e ficaram de fora do ajuste do feed. Dois níveis, como no feed e no detalhe: o PAINEL (um tom acima do fundo, fio, sombra externa) e o CARTÃO dentro dele (um tom acima do painel, fio). E as JANELAS (detalhe de caso/alerta e o modal da Reputação) ganham o fio por fora, que sobre o fundo escurecido sumia. Só o escuro; anel de sombra, nenhuma medida muda. */ :root:not([data-tema="claro"]) .vg-banner, :root:not([data-tema="claro"]) .vg-painel, :root:not([data-tema="claro"]) .vg-volume, :root:not([data-tema="claro"]) .vg-mapa, :root:not([data-tema="claro"]) .fs-view .ra-asn-lista, :root:not([data-tema="claro"]) .fs-view .ra-busca, :root:not([data-tema="claro"]) .fs-view .ra-filtros { background: #131a27; box-shadow: inset 0 1px 0 rgb(var(--fs-ink-rgb) / 0.045), 0 0 0 1px rgb(var(--fs-ink-rgb) / 0.1), 0 8px 22px rgb(0 0 0 / 0.38); } /* As linhas da Reputação são muitas e coladas: o tom e o fio, sem a sombra projetada (que viraria uma faixa escura entre elas). */ :root:not([data-tema="claro"]) .fs-view .ra-linha { background: #131a27; box-shadow: inset 0 1px 0 rgb(var(--fs-ink-rgb) / 0.04), 0 0 0 1px rgb(var(--fs-ink-rgb) / 0.09); } :root:not([data-tema="claro"]) .vg-card, :root:not([data-tema="claro"]) .fs-view .ra-card, :root:not([data-tema="claro"]) .fs-view .ra-modal-vazio { background: #19222f; box-shadow: inset 0 1px 0 rgb(var(--fs-ink-rgb) / 0.04), 0 0 0 1px rgb(var(--fs-ink-rgb) / 0.1); } :root:not([data-tema="claro"]) .fs-view .ff-modal-caixa, :root:not([data-tema="claro"]) .fs-view .ra-modal-caixa { box-shadow: 0 0 0 1px rgb(var(--fs-ink-rgb) / 0.12), 0 24px 80px rgb(0 0 0 / 0.72); } /* (20/10/2026, depois de medir) O claro separa a caixa do fundo da página com contraste ~1,21 (branco sobre cinza); o escuro, com #0f151f, ficava em ~1,10. Os tons acima (#131a27 o painel, #19222f o cartão) e o fio a 10% aproximam o escuro do claro, em todas as telas por igual. */ /* Selos de fundo cheio (vermelho, verde) da Reputação ASN: o texto era a cor de texto do tema — clara no escuro, quase preta no claro (escuro sobre o vermelho). No claro, branco, como os selos do feed (pedido do dono, 20/10). */ :root[data-tema="claro"] .fs-view .ra-chip-critico, :root[data-tema="claro"] .fs-view .ra-chip-saudavel, :root[data-tema="claro"] .fs-view .ra-lista-critica { color: #fff; } /* A TELA DE TRANSIÇÃO (pedido do dono, 20/10/2026): o fundo de rede de dentro, a logo de cada tema, uma linha de carregamento e um texto curto. A camada (`#loader-layer`, fixa, por cima de tudo) vem de style.css; aqui o conteúdo. */ #loader-layer { background: var(--fs-background); transition: opacity 0.5s ease; } #loader-layer.carregando-saindo { opacity: 0; pointer-events: none; } #loader-layer .carregando-fundo { position: absolute; inset: 0; display: block; overflow: hidden; } #loader-layer .carregando-centro { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 18px; } /* A logo do tema: as duas regras com o MESMO peso da que dá o tamanho — uma `img { display: block }` mais específica mostrava as duas ao mesmo tempo. */ #loader-layer .carregando-centro img { height: 52px; width: auto; } #loader-layer .carregando-centro .logo-escuro { display: block; } #loader-layer .carregando-centro .logo-claro { display: none; } :root[data-tema="claro"] #loader-layer .carregando-centro .logo-escuro { display: none; } :root[data-tema="claro"] #loader-layer .carregando-centro .logo-claro { display: block; } .carregando-linha { width: 180px; height: 2px; overflow: hidden; border-radius: 1px; background: rgb(var(--fs-ink-rgb) / 0.1); } .carregando-linha span { display: block; width: 40%; height: 100%; background: var(--fs-primary); animation: carregando-corre 1.1s ease-in-out infinite; } @keyframes carregando-corre { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } } .carregando-texto { margin: 0; color: var(--fs-muted); font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif; font-size: 13px; letter-spacing: 0.04em; } @media (prefers-reduced-motion: reduce) { .carregando-linha span { animation: none; width: 100%; opacity: 0.6; } }