/* ============================================================ BALERA — Design tokens Cores da marca extraídas de balera.com.br. O tema é escolhido pelo atributo data-tema no : (padrão, é a cara do site) Nenhum arquivo deve usar cor fixa: tudo sai daqui. ============================================================ */ :root{ /* --- identidade da marca (não muda entre temas) --- */ --b-blue: #00B3FF; --b-blue-deep: #007AFF; --b-yellow: #FEE010; --font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --ease: cubic-bezier(.22,.61,.36,1); } /* ============================================================ TEMA ESCURO (padrão) ============================================================ */ :root, :root[data-tema="escuro"]{ color-scheme: dark; /* superfícies */ --fundo: #06080B; --fundo-blur: rgba(6,8,11,.92); --sup: #0B0E12; --sup-fundo: #080C10; --sup-alt: #0E141B; --campo: #0C1218; --chip: #131B23; --overlay: rgba(3,5,8,.82); --sombra: rgba(0,0,0,.9); --sombra-forte: rgba(0,0,0,.96); /* bordas */ --bd-sutil: #10171E; --bd: #151D26; --bd-forte: #1E2831; --bd-topo: #26333F; --bd-tracejada: #253240; /* texto */ --tx: #FFFFFF; --tx-forte: #E4EBF1; --tx-1: #DCE4EB; --tx-2: #B4C1CD; --tx-3: #8494A3; --tx-4: #76848F; /* 4,82:1 sobre --sup-alt */ --tx-5: #76838F; /* 4,99:1 sobre --sup */ /* marca aplicada */ --azul: #00B3FF; /* preenchimento (botão, barra) */ --azul-tx: #00B3FF; /* quando vira texto ou traço fino */ --azul-h: #2CC4FF; --azul-sobre: #00121C; /* texto por cima do azul */ --azul-fundo: #0A6C99; --azul-suave: rgba(0,179,255,.12); --azul-anel: rgba(0,179,255,.14); /* status */ --ok: #21D07A; --ok-bg: #0F2318; --ok-bd: #123020; --ok-grad: #08160F; --aviso: #FFA726; --aviso-bg: #2A2011; --aviso-bd: #3A2E16; --aviso-grad:#161107; --aviso-tx: #E8C88A; --erro: #FF5A5A; --erro-2: #FF7B7B; --erro-bg: #2A1116; --erro-bd: #3A1A20; --erro-grad: #180C0F; --erro-tx: #F0A9A9; --info-bg: #08131A; --info-bd: #14303F; --info-tx: #9FC8DC; --pista-achou: #8ACBE8; --pista-sumiu: #E8A87C; /* botões */ --bt-bg: #101720; --bt-bd: #22303C; --bt-hover: #16202B; --bt-bd-hover: #2E4050; --bt-fant-hover:#111922; /* cartão de destaque */ --kpi-bd: #123044; --kpi-grad: #0A1620; /* tooltip */ --tip-bg: #121A22; --tip-bd: #26333F; --tip-tx: #C6D2DD; --tip-tx-forte: #FFFFFF; --tip-tx-dim: #7A8896; --icone-fraco: #33495C; /* ---- gráficos ---- Paleta conferida por cálculo (OKLCH + simulação de daltonismo) contra a superfície deste tema. Ver assets/js/graficos.js. */ --g-serie: #00B3FF; --g-serie2: #1E7BA8; --g-grid: #1C242E; --g-base: #2A3540; --g-eixo: #8494A3; --g-resto: #5B6875; --g-trilho: #121A22; --g-cat-1: #2195D6; --g-cat-2: #EF26A1; --g-cat-3: #23A752; --g-cat-4: #A263F7; --g-cat-5: #CE701D; --g-cat-6: #239FA0; } /* ============================================================ TEMA CLARO Não é uma inversão automática do escuro: cada valor foi escolhido e, no caso dos gráficos, conferido contra o fundo branco. O azul da marca (#00B3FF) tem contraste 2,4:1 sobre branco — reprova como traço fino —, então quando vira texto ou linha ele escurece para #0086C9 (4,0:1). Como preenchimento de botão, segue o azul da marca. ============================================================ */ :root[data-tema="claro"]{ color-scheme: light; --fundo: #F3F6F9; --fundo-blur: rgba(243,246,249,.92); --sup: #FFFFFF; --sup-fundo: #F7F9FC; --sup-alt: #F1F5F9; --campo: #FFFFFF; --chip: #E9EFF4; --overlay: rgba(20,30,40,.45); --sombra: rgba(20,35,55,.14); --sombra-forte: rgba(20,35,55,.20); --bd-sutil: #EDF1F5; --bd: #E2E8EE; --bd-forte: #CCD6DF; --bd-topo: #BAC6D1; --bd-tracejada: #B9C6D2; --tx: #0B131C; --tx-forte: #16202B; --tx-1: #223040; --tx-2: #3D4B59; --tx-3: #5A6875; --tx-4: #66717C; /* 4,54:1 sobre --sup-alt */ --tx-5: #636E78; /* 4,90:1 mesmo sobre --sup-alt */ --azul: #00B3FF; --azul-tx: #0086C9; --azul-h: #009EE3; --azul-sobre: #00121C; --azul-fundo: #7FD4FF; --azul-suave: rgba(0,134,201,.10); --azul-anel: rgba(0,134,201,.18); --ok: #0F7A46; /* 4,80:1 sobre --ok-bg */ --ok-bg: #E4F6EC; --ok-bd: #B6E3C9; --ok-grad: #F0FBF5; --aviso: #9A5B06; --aviso-bg: #FDF2DE; --aviso-bd: #EED5A4; --aviso-grad:#FEF9EF; --aviso-tx: #7A4A08; --erro: #C42B2B; --erro-2: #D14343; --erro-bg: #FCE8E8; --erro-bd: #F2C2C2; --erro-grad: #FEF5F5; --erro-tx: #9E2222; --info-bg: #E8F4FC; --info-bd: #BEDCF0; --info-tx: #10608F; --pista-achou: #0F6494; --pista-sumiu: #9A5410; --bt-bg: #FFFFFF; --bt-bd: #D3DCE4; --bt-hover: #F1F5F9; --bt-bd-hover: #A9BAC9; --bt-fant-hover:#EAF0F5; --kpi-bd: #A9DCF5; --kpi-grad: #EAF7FE; /* o tooltip segue escuro no tema claro: destaca-se do fundo branco */ --tip-bg: #16202B; --tip-bd: #2E3D4C; --tip-tx: #D3DCE4; --tip-tx-forte: #FFFFFF; --tip-tx-dim: #94A3B0; --icone-fraco: #A9B7C4; /* ---- gráficos, conferidos contra #FFFFFF ---- A paleta categórica passa nos dois temas (banda de luminosidade, croma, ΔE deutan 9,6 e contraste ≥ 3:1), então é a mesma. Só a série principal escurece. */ --g-serie: #0086C9; --g-serie2: #62BFE8; --g-grid: #E6ECF2; --g-base: #C6D2DD; --g-eixo: #66717C; --g-resto: #9AA8B5; --g-trilho: #EDF1F5; --g-cat-1: #2195D6; --g-cat-2: #EF26A1; --g-cat-3: #23A752; --g-cat-4: #A263F7; --g-cat-5: #CE701D; --g-cat-6: #239FA0; } /* ============================================================ BASE ============================================================ */ *,*::before,*::after{ box-sizing:border-box; } html,body{ margin:0; padding:0; background:var(--fundo); color:var(--tx); font-family:var(--font); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } ::selection{ background:var(--b-blue); color:#00121C; } ::-webkit-scrollbar{ width:10px; height:10px; } ::-webkit-scrollbar-track{ background:var(--fundo); } ::-webkit-scrollbar-thumb{ background:var(--bd-forte); border-radius:99px; } ::-webkit-scrollbar-thumb:hover{ background:var(--tx-5); } /* --- Marca --- */ .brand-mark{ font-weight:800; letter-spacing:.22em; font-size:13px; color:var(--tx); } .brand-b{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; color:var(--b-blue); font-weight:900; font-size:22px; line-height:1; } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* O atributo hidden precisa vencer qualquer display de classe. Sem isto, um .vaziao{display:flex} continua aparecendo mesmo com [hidden]. */ [hidden]{ display:none !important; } /* ============================================================ BOTÃO DE TEMA ============================================================ */ .tema-bt{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; flex:none; border:1px solid var(--bt-bd); border-radius:99px; background:var(--bt-bg); color:var(--tx-3); cursor:pointer; padding:0; transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease); } .tema-bt:hover{ background:var(--bt-hover); color:var(--azul-tx); border-color:var(--bt-bd-hover); } .tema-bt svg{ width:16px; height:16px; } .tema-bt .ico-claro{ display:none; } .tema-bt .ico-escuro{ display:block; } :root[data-tema="claro"] .tema-bt .ico-claro{ display:block; } :root[data-tema="claro"] .tema-bt .ico-escuro{ display:none; } /* a troca de tema não deve virar um festival de transições */ .trocando-tema, .trocando-tema *{ transition:none !important; animation:none !important; }