/* ============================================================ LEVEL ONE — Tema oficial v1.1 (base Level HUB) Como usar: importe este arquivo DEPOIS do seu CSS atual. As fontes precisam estar no — veja fonts-head.html ============================================================ */ :root { /* Azul Level */ --lo-blue-50:#EBF6FC; --lo-blue-100:#D3ECF8; --lo-blue-200:#A8D9F1; --lo-blue-300:#74C2E8; --lo-blue-400:#3FA9DC; --lo-blue-500:#0F91CF; --lo-blue-600:#0C7AB0; --lo-blue-700:#0A648F; --lo-blue-800:#084F72; --lo-blue-900:#063C57; --lo-blue-950:#04293C; /* Grafite */ --lo-gray-50:#F7F7F7; --lo-gray-100:#EFEFEF; --lo-gray-200:#DFDFE0; --lo-gray-300:#C6C7C8; --lo-gray-400:#9A9B9C; --lo-gray-500:#6F7071; --lo-gray-600:#58595A; --lo-gray-700:#434444; --lo-gray-800:#323333; --lo-gray-900:#232424; --lo-gray-950:#161717; /* Semânticas */ --lo-success:#1FA971; --lo-success-text:#157A52; --lo-success-bg:#E6F6EF; --lo-warning:#DE9426; --lo-warning-text:#A66C12; --lo-warning-bg:#FCF3E2; --lo-danger:#D64545; --lo-danger-text:#A32F2F; --lo-danger-bg:#FBEAEA; --lo-info:var(--lo-blue-500); --lo-info-text:var(--lo-blue-700); --lo-info-bg:var(--lo-blue-50); /* Superfícies (padrão HUB) */ --lo-canvas:#F5F7FA; /* fundo geral das telas */ --lo-surface:#FFFFFF; /* cards, sidebar, topbar */ --lo-border:var(--lo-gray-200); /* Tema escuro (preferência do usuário) */ --lo-dk-bg:#10181D; --lo-dk-surface:#182228; --lo-dk-border:#24313A; --lo-dk-text:#E8EDF0; --lo-dk-muted:#8FA0AB; /* Tipografia */ --lo-font-display:'Sora', system-ui, -apple-system, sans-serif; --lo-font-body:'Inter', system-ui, -apple-system, sans-serif; --lo-font-mono:'JetBrains Mono', ui-monospace, monospace; /* Forma */ --lo-radius:10px; --lo-radius-sm:8px; --lo-skew:-18deg; /* inclinação do "1" — assinatura gráfica */ } /* ---------- Base tipográfica ---------- */ body { font-family: var(--lo-font-body); color: var(--lo-gray-800); background: var(--lo-canvas); } h1, h2, h3, h4, h5, h6, .lo-display { font-family: var(--lo-font-display); font-weight: 700; color: var(--lo-gray-900); letter-spacing: -0.01em; } h1, .lo-h1 { font-weight: 800; } code, kbd, pre, .lo-mono { font-family: var(--lo-font-mono); } /* Números tabulares em valores e tabelas (essencial p/ financeiro) */ table, .lo-valor { font-variant-numeric: tabular-nums; } /* ---------- Assinaturas da marca ---------- */ /* Eyebrow — rótulo espaçado (eco do "C o n t a b i l i d a d e") */ .lo-eyebrow { font-family: var(--lo-font-body); font-size: 11px; font-weight: 600; letter-spacing: .38em; text-transform: uppercase; color: var(--lo-blue-600); } /* Rótulo de KPI — versão compacta do eyebrow */ .lo-kpi-label { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--lo-gray-500); } /* Traço inclinado */ .lo-slash { display: inline-block; width: 32px; height: 5px; background: var(--lo-blue-500); transform: skewX(var(--lo-skew)); border-radius: 1px; vertical-align: middle; } /* ---------- Componentes HUB ---------- */ .lo-card { background: var(--lo-surface); border: 1px solid var(--lo-border); border-radius: var(--lo-radius); } .lo-card--hot { border-left: 3px solid var(--lo-blue-500); } /* cartão/aba em destaque */ .lo-kpi-num { font-family: var(--lo-font-display); font-weight: 800; font-size: 26px; color: var(--lo-gray-900); } .lo-btn { font-family: var(--lo-font-body); font-weight: 600; font-size: 14px; padding: 10px 20px; border-radius: var(--lo-radius-sm); border: 1px solid transparent; cursor: pointer; transition: background .15s, border-color .15s; } .lo-btn--primary { background: var(--lo-blue-500); color: #fff; } .lo-btn--primary:hover { background: var(--lo-blue-600); } .lo-btn--secondary{ background: var(--lo-surface); color: var(--lo-gray-700); border-color: var(--lo-gray-300); } .lo-btn--ghost { background: transparent; color: var(--lo-blue-600); } .lo-btn--danger { background: var(--lo-danger); color: #fff; } .lo-input { font-family: var(--lo-font-body); font-size: 14px; padding: 10px 14px; border: 1px solid var(--lo-gray-300); border-radius: var(--lo-radius-sm); color: var(--lo-gray-800); background: var(--lo-surface); } .lo-input:focus { outline: 2px solid var(--lo-blue-300); border-color: var(--lo-blue-500); } .lo-badge { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 99px; display: inline-block; } .lo-badge--success { background: var(--lo-success-bg); color: var(--lo-success-text); } .lo-badge--warning { background: var(--lo-warning-bg); color: var(--lo-warning-text); } .lo-badge--danger { background: var(--lo-danger-bg); color: var(--lo-danger-text); } .lo-badge--info { background: var(--lo-info-bg); color: var(--lo-info-text); } /* Chip de status da topbar (ex.: "Grupo consolidado") */ .lo-chip { font-size: 11.5px; font-weight: 600; color: var(--lo-gray-600); background: var(--lo-gray-50); border: 1px solid var(--lo-border); border-radius: 99px; padding: 4px 12px; display: inline-flex; align-items: center; gap: 6px; } .lo-chip::before { content: ''; width: 7px; height: 7px; border-radius: 99px; background: var(--lo-success); } /* ---------- Sidebar (padrão canônico) ---------- */ .lo-sidebar { width: 224px; background: var(--lo-surface); border-right: 1px solid var(--lo-border); } .lo-sidebar__logo { height: 26px; margin: 14px 16px 20px; } /* logo horizontal COMPLETA */ .lo-sidebar--rail { width: 52px; } /* colapsada: usar só o ícone */ .lo-sidebar__item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--lo-radius-sm); font-size: 13.5px; color: var(--lo-gray-600); cursor: pointer; } .lo-sidebar__item:hover { background: var(--lo-gray-50); } .lo-sidebar__item--active { background: var(--lo-blue-50); color: var(--lo-blue-700); font-weight: 600; border-left: 3px solid var(--lo-blue-500); padding-left: 9px; } /* ---------- Tema escuro (opcional, via classe .dark no ) ---------- */ .dark body { background: var(--lo-dk-bg); color: var(--lo-dk-text); } .dark .lo-card, .dark .lo-sidebar { background: var(--lo-dk-surface); border-color: var(--lo-dk-border); } .dark h1,.dark h2,.dark h3,.dark h4,.dark h5,.dark h6 { color: var(--lo-dk-text); } .dark .lo-btn--primary { background: var(--lo-blue-400); color: var(--lo-blue-950); } /* azul sobe 1 tom */ .dark .lo-input { background: var(--lo-dk-surface); border-color: var(--lo-dk-border); color: var(--lo-dk-text); }