/* ============================================================ IDENTIDADE DA IR SOLAR — 03/09/2026 Por que este arquivo existe, e por que ele vem DEPOIS do styles.css: O diagnóstico do "está feio" não era falta de cor. O styles.css pedia a fonte Inter no `font:` mas nunca a carregava — sem @import e sem , toda a interface caía no fallback do sistema. Um produto financeiro na fonte padrão do navegador parece rascunho, por melhor que seja o backend. Aqui só se redefinem TOKENS e tipografia. Nenhuma classe existente é reescrita, nada de layout é tocado: as regras do styles.css continuam valendo e apenas passam a ler valores novos. Isso mantém a mudança reversível — apagar esta linha do devolve exatamente o estado anterior. A paleta reconcilia três que divergiam e envergonhavam a marca: · artes de campanha (BRAND_RULES.md): #071426 #0B2A55 #FFC400 #22C55E · plataforma (antigo Hub): #061a36 #087fc1 #ffc400 #07996b · app da IR no Converta: ciano #22D3EE, limão #A3E635 Vence a das artes: é a que o cliente vê PRIMEIRO, no anúncio. Quem clica num anúncio azul-e-amarelo não pode cair numa tela ciano. Fira Sans é a fonte das artes da IR — usar a mesma faz o anúncio e o aplicativo parecerem a mesma empresa. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;600;700;800;900&display=swap'); :root{ /* --- cor: nomes preservados, valores reconciliados --- */ --ink: #071426; /* azul-noite. Texto e fundos escuros. */ --blue: #0B2A55; /* azul IR. Superfícies e destaques sóbrios. */ --sky: #EAF1FB; /* azul claro de apoio. */ --sun: #FFC400; /* amarelo IR. O acento. Usar com parcimônia. */ --green: #22C55E; /* verde WhatsApp. Só ação e resultado bom. */ --paper: #F6F8FB; /* fundo da página. */ --muted: #5D7089; /* texto de apoio. */ --line: #DCE4EE; /* divisórias. */ --bad: #DC3545; /* erro e perda. */ --surface: #FFFFFF; --surface-alt: #F0F4F9; --ink-soft: #2B3D52; /* --- tipografia --- */ --fonte: 'Fira Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* Escala tipográfica. Corpo em 16px: abaixo disso o iOS dá zoom sozinho ao focar um campo, e o cliente perde o contexto da tela. */ --t-display: clamp(34px, 6vw, 54px); --t-titulo: clamp(24px, 4vw, 34px); --t-secao: 20px; --t-corpo: 16px; --t-apoio: 14px; --t-legal: 12px; /* --- espaço: escala de 4, para o respiro ser decisão e não acaso --- */ --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 64px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-full: 999px; --sombra: 0 1px 2px rgba(7,20,38,.06), 0 8px 24px -12px rgba(7,20,38,.18); --sombra-alta: 0 2px 4px rgba(7,20,38,.08), 0 24px 48px -24px rgba(7,20,38,.30); } body{ font-family: var(--fonte); font-size: var(--t-corpo); line-height: 1.55; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Títulos com peso alto e entrelinha curta: em tela financeira o número e o título precisam ganhar do resto sem depender de cor. */ h1,h2,h3,h4{ font-family: var(--fonte); font-weight: 800; line-height: 1.12; letter-spacing: -.015em; margin: 0 0 var(--e-3); } h1{ font-size: var(--t-titulo); } h2{ font-size: var(--t-secao); } h3{ font-size: 18px; font-weight: 700; } p{ margin: 0 0 var(--e-4); } .hero h1, .heroGrid h1{ font-size: var(--t-display); font-weight: 900; letter-spacing: -.03em; } .eyebrow{ font-size: var(--t-apoio); font-weight: 800; letter-spacing: .12em; } .muted{ color: var(--muted); font-size: var(--t-apoio); } /* Números dominam o cartão: é o que o cliente procura ao abrir o painel. */ .kpi strong, .metric strong, .metric b{ font-family: var(--fonte); font-weight: 900; font-size: clamp(26px, 4.5vw, 36px); letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; } /* Tabular garante que a coluna de valores não dance ao atualizar. */ table, .lead, .kanban, .metric, .kpi{ font-variant-numeric: tabular-nums; } /* `.lead` é usada em DOIS sentidos no app.js: o cartão de lead no CRM e o parágrafo de destaque do hero. Estilizar as duas juntas punha um retângulo branco por cima do texto branco do hero, deixando-o ilegível. Por isso o cartão é escopado ao kanban, e o parágrafo do hero fica limpo. */ .card, .kpi, .metric, .lane, .kanban .lead{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sombra); } .hero .lead, .heroGrid .lead{ background: none; border: 0; box-shadow: none; font-size: clamp(17px, 2.2vw, 20px); line-height: 1.55; max-width: 34em; color: #C9D8EC; } .btn{ font-family: var(--fonte); font-weight: 800; border-radius: var(--r-sm); letter-spacing: .005em; min-height: 46px; /* alvo de toque confortável no celular */ transition: transform .12s ease, box-shadow .12s ease, background .12s ease; } .btn:hover{ transform: translateY(-1px); box-shadow: var(--sombra-alta); } .btn:active{ transform: translateY(0); } .btn.sun{ background: var(--sun); color: var(--ink); } .btn.primary{ background: var(--green); color: #06280F; } .btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, button:focus-visible{ outline: 3px solid var(--sun); outline-offset: 2px; } input, select, textarea{ font-family: var(--fonte); font-size: var(--t-corpo); /* 16px evita o zoom automático do iOS */ border-radius: var(--r-sm); border: 1px solid var(--line); padding: 12px 14px; background: var(--surface); color: var(--ink); width: 100%; } input:focus, select:focus, textarea:focus{ border-color: var(--blue); } .pill{ border-radius: var(--r-full); font-weight: 800; font-size: var(--t-legal); letter-spacing: .04em; } .hero{ background: linear-gradient(150deg, var(--blue) 0%, var(--ink) 58%); } /* Estado vazio não é sobra de tela: é onde se diz o motivo e o próximo passo. Regra da casa — toda tela que mostra estado mostra o MOTIVO e o PRÓXIMO PASSO. */ .empty{ border: 1px dashed var(--line); border-radius: var(--r-md); padding: var(--e-6) var(--e-5); color: var(--muted); text-align: center; background: var(--surface-alt); } .legal{ font-size: var(--t-legal); line-height: 1.5; color: var(--muted); } @media (max-width: 600px){ :root{ --t-secao: 18px; } .btn{ width: 100%; } /* botão de largura cheia: o polegar acerta sempre */ .shell{ width: calc(100% - 24px); } } @media (prefers-reduced-motion: reduce){ *{ animation: none !important; transition: none !important; } }