/* ============================================================ SPINA · base visual única ------------------------------------------------------------ Um arquivo, uma fonte da verdade. Toda tela do sistema importa este arquivo e para de definir cor, fonte, raio e altura por conta própria. Valores escolhidos a partir do que JÁ EXISTE no sistema: peguei o valor dominante de cada família (o que aparece em mais telas) em vez de inventar. Migrar para cá muda pouca coisa na aparência e elimina a divergência. Uso: ============================================================ */ :root{ /* ---------- marca ---------- */ --spina-azul: #00ACE6; /* azul oficial, sobre fundo claro */ --spina-azul-escuro: #0088C7; /* links, hover, texto sobre claro */ --spina-azul-fundo: rgba(0,172,230,.10); --spina-azul-claro: #7FDCFF; /* sobre fundo escuro */ /* ---------- superfícies ---------- */ --spina-campo: #F5F7FA; /* fundo da página */ --spina-campo-azul: #EAF7FC; --spina-superficie: #FFFFFF; /* cartões */ --spina-escuro: #0E1218; /* blocos escuros, capa do diagnóstico */ /* ---------- texto ---------- */ --spina-texto: #101318; /* títulos e corpo forte */ --spina-texto-2: #636F84; /* apoio, descrições */ --spina-texto-3: #9AA5B8; /* rótulos, metadados */ --spina-texto-inv: #FFFFFF; /* ---------- linhas ---------- */ --spina-linha: #DCE0E8; --spina-linha-fina: #E8ECF2; /* ---------- estados ---------- */ --spina-ok: #16A34A; --spina-atencao: #D97706; --spina-erro: #DC2626; --spina-whatsapp: #25D366; /* ---------- tipografia ---------- Três famílias, não quatro. O dashboard e a hospedagem carregam 'Instrument Sans' além destas: é peso extra sem ganho. */ --spina-fonte: 'Inter', system-ui, -apple-system, sans-serif; --spina-fonte-tit: 'Barlow Condensed', 'Arial Narrow', sans-serif; --spina-fonte-mono: 'JetBrains Mono', ui-monospace, monospace; --spina-corpo: 16px; /* a hospedagem usa 14px: destoa */ --spina-entrelinha: 1.55; /* ---------- escala de raios ---------- Hoje existem 11 raios diferentes só na landing page. Quatro bastam. */ --spina-r-p: 12px; /* campos, chips, itens de lista */ --spina-r-m: 16px; /* botões, blocos internos */ --spina-r-g: 22px; /* cartões */ --spina-r-pill: 999px; /* pílulas e etiquetas */ /* ---------- escala de espaço ---------- */ --spina-e1: 4px; --spina-e2: 8px; --spina-e3: 12px; --spina-e4: 16px; --spina-e5: 24px; --spina-e6: 32px; --spina-e7: 48px; /* ---------- altura de controles ---------- Hoje há 7 alturas de botão na LP e 7 no dashboard. Três bastam. 48px é o mínimo confortável para o polegar. */ --spina-alt-g: 52px; /* ação principal, tela cheia */ --spina-alt-m: 48px; /* padrão */ --spina-alt-p: 40px; /* ação secundária, barra densa */ --spina-sombra: 0 8px 30px -12px rgba(0,172,230,.18); --spina-sombra-alta: 0 14px 40px -18px rgba(16,19,24,.28); } /* ---------- modo escuro ---------- A tela de hospedagem já tem modo escuro e usa #22B8EE no lugar do #00ACE6. Não é divergência: o azul da marca não tem contraste suficiente sobre fundo escuro, e clarear é o correto. Fica registrado aqui para as outras telas herdarem a mesma decisão quando ganharem modo escuro, em vez de cada uma escolher um azul. */ [data-tema="escuro"], .tema-escuro{ --spina-azul: #22B8EE; --spina-azul-escuro: #1596CC; --spina-campo: #12171E; --spina-superficie: #1A212B; --spina-texto: #F2F5F8; --spina-texto-2: #A7B2C0; --spina-texto-3: #78859A; --spina-linha: #252D38; --spina-linha-fina: #333C48; } /* ============================================================ COMPONENTES BASE ============================================================ */ .spina-bt{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:var(--spina-alt-m); padding:0 20px; border:none; border-radius:var(--spina-r-m); cursor:pointer; font:700 15px var(--spina-fonte); text-decoration:none; transition:background .14s, opacity .14s, transform .14s; -webkit-tap-highlight-color:transparent; } .spina-bt:active{ transform:translateY(1px) } .spina-bt[disabled]{ opacity:.38; pointer-events:none } .spina-bt svg{ width:18px; height:18px; flex:none } .spina-bt--azul{ background:var(--spina-azul); color:#fff } .spina-bt--azul:hover{ background:var(--spina-azul-escuro) } .spina-bt--escuro{ background:var(--spina-texto); color:#fff } .spina-bt--wa{ background:var(--spina-whatsapp); color:#fff } .spina-bt--fantasma{ background:var(--spina-superficie); color:var(--spina-texto-2); border:1px solid var(--spina-linha); } .spina-bt--g{ height:var(--spina-alt-g) } .spina-bt--p{ height:var(--spina-alt-p); padding:0 14px; font-size:13.5px } .spina-cartao{ background:var(--spina-superficie); border:1px solid var(--spina-linha); border-radius:var(--spina-r-g); box-shadow:var(--spina-sombra); } .spina-rotulo{ /* o "eyebrow" usado em todas as telas */ font-family:var(--spina-fonte-mono); font-weight:700; font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--spina-azul-escuro); } .spina-rotulo--cinza{ color:var(--spina-texto-3) } .spina-titulo{ font-family:var(--spina-fonte-tit); font-weight:800; text-transform:uppercase; letter-spacing:.015em; line-height:1; } .spina-chip{ display:inline-flex; align-items:center; font-family:var(--spina-fonte-mono); font-weight:700; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--spina-texto-2); background:var(--spina-campo); border:1px solid var(--spina-linha); border-radius:var(--spina-r-pill); padding:6px 10px; } /* foco visível — hoje nenhuma tela trata isso, e teclado/leitor de tela ficam sem referência de onde estão */ .spina-bt:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{ outline:2px solid var(--spina-azul); outline-offset:2px; } @media (prefers-reduced-motion:reduce){ *{ animation-duration:.01ms !important; transition-duration:.01ms !important } }