/* ============================================================ * Nexo Legal — nexo-ui.css (KIT DE MARCA / design system único) * ------------------------------------------------------------ * O "manual de decoração" que TODAS as telas seguem. * Aqui ficam as cores oficiais, a tipografia, os botões, os * cartões, os campos, os selos e o cabeçalho. Mudou aqui, * mudou em todas as telas de uma vez. * * Clima visual: CLARO INSTITUCIONAL (sério, confiável, jurídico). * Carregue este arquivo no de cada tela, ANTES dos estilos * próprios da tela (se houver). * ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap'); /* ── 1. TOKENS (as "latas de tinta" oficiais) ───────────────── */ :root { /* Marca — navy / ciano / verde */ --navy: #002060; --navy-prof: #04407E; --navy-900: #001845; --cyan: #1BA5DC; --cyan-claro: #4AC8F0; --cyan-escuro: #0E7BA8; --green: #1D9E75; --green-lt: #5DCAA5; --green-escuro:#0F6E56; /* Semânticos (estado) */ --vermelho: #DC2626; --vermelho-bg: #FDECEC; --amarelo: #D97706; --amarelo-bg: #FFF8EC; --sucesso: #1D9E75; --sucesso-bg: #E9F7F1; /* Neutros / superfícies */ --texto: #16202E; --suave: #5A6772; --suave-2: #8A95A1; --borda: #E2E8F0; --borda-forte: #CBD5E1; --fundo: #EEF3F8; --superficie: #FFFFFF; --superficie-2:#F8FAFC; --branco: #FFFFFF; /* Tipografia */ --fonte: 'Inter', 'Segoe UI', 'Arial Nova', Arial, system-ui, sans-serif; --fonte-mono: 'SFMono-Regular', 'Consolas', 'Roboto Mono', monospace; /* Raios de canto (consistência de arredondamento) */ --raio-sm: 7px; --raio: 11px; --raio-lg: 16px; --raio-xl: 22px; --raio-full: 999px; /* Sombras (suaves, profissionais) */ --sombra-sm: 0 1px 2px rgba(16,32,64,.06), 0 1px 3px rgba(16,32,64,.05); --sombra: 0 4px 12px rgba(16,32,64,.08), 0 2px 4px rgba(16,32,64,.04); --sombra-lg: 0 18px 48px rgba(0,32,96,.16), 0 6px 16px rgba(16,32,64,.08); --foco: 0 0 0 3px rgba(27,165,220,.28); /* Ritmo de espaço */ --gap-1: 6px; --gap-2: 10px; --gap-3: 16px; --gap-4: 24px; --gap-5: 32px; --gap-6: 48px; /* Gradiente institucional da marca (cabeçalhos, fundos hero) */ --grad-marca: linear-gradient(135deg, var(--navy) 0%, var(--navy-prof) 60%, #063b6e 100%); --grad-faixa: linear-gradient(90deg, var(--navy) 0%, var(--navy-prof) 14%, #1565C0 28%, var(--cyan) 46%, var(--cyan-claro) 60%, var(--green-lt) 78%, var(--green) 100%); } /* ── 2. RESET + BASE ────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--fonte); background: var(--fundo); color: var(--texto); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--cyan-escuro); text-decoration: none; } a:hover { text-decoration: underline; } ::selection { background: rgba(27,165,220,.22); } /* Barra de rolagem discreta e na marca */ * { scrollbar-width: thin; scrollbar-color: var(--borda-forte) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--borda-forte); border-radius: var(--raio-full); border: 3px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: var(--suave-2); } /* ── 3. TIPOGRAFIA ──────────────────────────────────────────── */ .nx-h1 { font-size: 1.5rem; font-weight: 800; color: var(--navy); letter-spacing: -.01em; line-height: 1.2; } .nx-h2 { font-size: 1.18rem; font-weight: 800; color: var(--navy); letter-spacing: -.01em; } .nx-h3 { font-size: 1.02rem; font-weight: 700; color: var(--navy); } .nx-sub { font-size: .82rem; color: var(--suave); } .nx-rotulo { font-size: .72rem; font-weight: 700; color: var(--suave); text-transform: uppercase; letter-spacing: .07em; } .nx-mono { font-family: var(--fonte-mono); font-size: .86em; } .nx-muted { color: var(--suave); } /* ── 4. MARCA (logotipo textual + faixa) ────────────────────── */ .nx-brand { display: flex; flex-direction: column; gap: 2px; line-height: 1; } .nx-brand-nome { font-size: 1.2rem; font-weight: 900; letter-spacing: .08em; color: var(--branco); } .nx-brand-sub { font-size: .63rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan-claro); } .nx-faixa { height: 3px; background: var(--grad-faixa); } /* Selo "nó" do Nexo — quadradinho com gradiente, usado ao lado do nome */ .nx-no { width: 30px; height: 30px; border-radius: 9px; background: var(--grad-faixa); flex-shrink: 0; display: flex; align-items: center; justify-content: center; box-shadow: var(--sombra-sm); } .nx-no::after { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--branco); box-shadow: 0 0 0 3px rgba(0,32,96,.25); } /* ── 5. CABEÇALHO (topo institucional) ──────────────────────── */ .nx-header { background: var(--grad-marca); color: var(--branco); padding: 0 28px; min-height: 62px; display: flex; align-items: center; gap: 16px; box-shadow: 0 3px 16px rgba(0,32,96,.28); position: sticky; top: 0; z-index: 100; } .nx-header .nx-header-titulo { font-size: 1.04rem; font-weight: 800; letter-spacing: .01em; } .nx-header .nx-header-right { margin-left: auto; display: flex; align-items: center; gap: 12px; } .nx-header a { color: var(--cyan-claro); } /* ── 6. BOTÕES ──────────────────────────────────────────────── */ .nx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; font-size: .9rem; font-weight: 700; letter-spacing: .01em; padding: 11px 18px; border-radius: var(--raio-sm); border: 1.5px solid transparent; cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s, transform .05s; white-space: nowrap; line-height: 1; } .nx-btn:active { transform: translateY(1px); } .nx-btn:focus-visible { outline: none; box-shadow: var(--foco); } .nx-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; } .nx-btn-primario { background: var(--cyan); color: #fff; box-shadow: var(--sombra-sm); } .nx-btn-primario:hover:not(:disabled) { background: var(--cyan-escuro); } .nx-btn-marca { background: var(--navy); color: #fff; box-shadow: var(--sombra-sm); } .nx-btn-marca:hover:not(:disabled) { background: var(--navy-prof); } .nx-btn-sucesso { background: var(--green); color: #fff; } .nx-btn-sucesso:hover:not(:disabled) { background: var(--green-escuro); } .nx-btn-perigo { background: var(--vermelho); color: #fff; } .nx-btn-perigo:hover:not(:disabled) { background: #b91c1c; } .nx-btn-contorno { background: var(--branco); color: var(--navy); border-color: var(--borda-forte); } .nx-btn-contorno:hover:not(:disabled) { border-color: var(--cyan); color: var(--cyan-escuro); } .nx-btn-fantasma { background: transparent; color: var(--suave); } .nx-btn-fantasma:hover:not(:disabled) { background: var(--superficie-2); color: var(--navy); } .nx-btn-bloco { width: 100%; } .nx-btn-sm { padding: 7px 12px; font-size: .8rem; } .nx-btn-lg { padding: 14px 22px; font-size: .98rem; } /* ── 7. CAMPOS DE FORMULÁRIO ────────────────────────────────── */ .nx-campo { margin-bottom: 15px; } .nx-label { display: block; font-size: .76rem; font-weight: 700; color: var(--navy); margin-bottom: 6px; } .nx-input, .nx-select, .nx-textarea { width: 100%; font-family: inherit; font-size: .9rem; color: var(--texto); padding: 11px 13px; background: var(--branco); border: 1.5px solid var(--borda); border-radius: var(--raio-sm); transition: border-color .15s, box-shadow .15s; } .nx-input::placeholder, .nx-textarea::placeholder { color: var(--suave-2); } .nx-input:focus, .nx-select:focus, .nx-textarea:focus { outline: none; border-color: var(--cyan); box-shadow: var(--foco); } .nx-input:hover, .nx-select:hover, .nx-textarea:hover { border-color: var(--borda-forte); } .nx-textarea { resize: vertical; min-height: 90px; line-height: 1.5; } .nx-dica { font-size: .7rem; color: var(--suave); margin-top: 5px; } /* ── 8. CARTÕES ─────────────────────────────────────────────── */ .nx-card { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-lg); box-shadow: var(--sombra-sm); } .nx-card-pad { padding: 22px 24px; } .nx-card-hover { transition: box-shadow .18s, transform .18s, border-color .18s; } .nx-card-hover:hover { box-shadow: var(--sombra); transform: translateY(-2px); border-color: var(--borda-forte); } /* ── 9. SELOS / BADGES ──────────────────────────────────────── */ .nx-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: var(--raio-full); font-size: .72rem; font-weight: 800; letter-spacing: .02em; line-height: 1.3; } .nx-badge-neutro { background: #EEF2F7; color: var(--suave); } .nx-badge-info { background: #EAF4FB; color: var(--cyan-escuro); } .nx-badge-sucesso { background: var(--sucesso-bg); color: var(--green-escuro); } .nx-badge-aviso { background: var(--amarelo-bg); color: #8a5a00; } .nx-badge-perigo { background: var(--vermelho-bg); color: var(--vermelho); } .nx-badge-marca { background: rgba(0,32,96,.08); color: var(--navy); } /* Pontinho de status dentro do selo */ .nx-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; } /* ── 10. MENSAGENS (alertas) ────────────────────────────────── */ .nx-msg { padding: 11px 14px; border-radius: var(--raio-sm); font-size: .84rem; font-weight: 600; border: 1px solid transparent; } .nx-msg-erro { background: var(--vermelho-bg); color: var(--vermelho); border-color: #f5c2c2; } .nx-msg-ok { background: var(--sucesso-bg); color: var(--green-escuro); border-color: #b6e3d2; } .nx-msg-aviso { background: var(--amarelo-bg); color: #8a5a00; border-color: #f3d9a6; } .nx-msg-info { background: #EAF4FB; color: var(--cyan-escuro); border-color: #bfe1f3; } .nx-oculto { display: none !important; } /* ── 11. SPINNER / CARGA ────────────────────────────────────── */ .nx-spinner { display: inline-block; width: 18px; height: 18px; border: 2.5px solid var(--borda); border-top-color: var(--cyan); border-radius: 50%; animation: nx-spin .6s linear infinite; } @keyframes nx-spin { to { transform: rotate(360deg); } } /* ── 12. UTILITÁRIOS ────────────────────────────────────────── */ .nx-wrap { max-width: 1180px; margin: 0 auto; padding: 24px 20px; } .nx-flex { display: flex; } .nx-col { flex-direction: column; } .nx-center { align-items: center; } .nx-between { justify-content: space-between; } .nx-gap-1 { gap: var(--gap-1); } .nx-gap-2 { gap: var(--gap-2); } .nx-gap-3 { gap: var(--gap-3); } .nx-grid { display: grid; gap: var(--gap-3); } .nx-anim-up { animation: nx-up .35s cubic-bezier(.2,.7,.3,1) both; } @keyframes nx-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }