/* ============ SoftOne Design System ============ * Servido em runtime pelo Express em /css/app.css — NÃO passa pelo Vite, então mexer * aqui não exige rebuild do site (basta atualizar a página). * * O tema CLARO é o padrão (corporativo, vermelho da marca como acento); o escuro é o * override em [data-theme="dark"]. A porta de entrada define o tema antes do CSS carregar * (script inline no lendo localStorage), senão a página pisca no tema errado. * * Aqui moram só os componentes genéricos (botão, campo, cartão, modal, tabela…). * O visual das seções do site vive em site/src/site.css com o prefixo .so-*. */ :root{ /* Marca — a logo é PRETO + VERMELHO, com o preto dominante e o vermelho só no acento. NENHUM degradê de vermelho para vermelho-claro: quando o vermelho quente #e83700 preenche uma área grande com brilho por cima, o olho lê LARANJA. Área grande é vermelho CHAPADO; o degradê só existe como filete e vai do PRETO ao VERMELHO — que é literalmente a identidade. */ --marca:#e83700; --marca-esc:#c22d00; --tinta:#232323; --tinta-2:#000000; /* Vermelho de SUPERFÍCIE — o mesmo vermelho, 10 pontos mais escuro no canal R. Branco sobre o #e83700 dá 4.22:1 e esse é o TETO matemático da cor: não existe ajuste que chegue nos 4.5:1 do WCAG AA mantendo o vermelho idêntico. Então a área que carrega TEXTO BRANCO usa este (4.51:1) e o resto — filete, traço, borda, ícone, número grande — continua no #e83700 exato da logo. A diferença é imperceptível lado a lado; o objetivo é justamente que ninguém veja, só que passe. Regra: escreveu `color:#fff` sobre vermelho? O fundo é --marca-solida, não --marca. */ --marca-solida:#de3700; /* ⚠️ NÃO EXISTE MAIS DEGRADÊ NESTE PROJETO — e não reintroduza. Houve um `--grad` de preto para vermelho. Em barra de 3px não há espaço para a transição acontecer: o meio do caminho vira uma mancha amarronzada e o resultado parece sujo, não elegante. Foram várias tentativas de "consertar" o degradê até ficar claro que o problema era ele existir naquele tamanho. Onde havia degradê agora há vermelho CHAPADO ou um filete lateral. */ /* Superfícies (tema claro = padrão) */ --bg:#ffffff; --bg2:#f7f7f9; --panel:#ffffff; --panel2:#f2f2f5; --line:#e4e4e9; --line-soft:#eeeef2; --line-strong:#c9c9d2; /* Borda de cartão sob o mouse: cinza MÉDIO. Em 2px, qualquer cinza abaixo de ~0.45 de luminância o olho ainda lê como preto (o #4d4d57 anterior tinha 0.30 e foi recusado). Este está em ~0.55: cinza inequívoco, e ainda destaca contra a borda clara em repouso. Vira token porque precisa clarear no tema escuro e dentro de .so-escuro. */ --linha-hover:#8a8a96; /* Texto — o --faint estava em #8c8c99, que dá só 3.3:1 sobre branco e 3.1:1 sobre o --bg2 do rodapé. Como ele veste rótulo de campo, cabeçalho de tabela e legenda (11–13px), era justamente o texto MENOR do site reprovando no WCAG AA. Em #6f6f7c dá 4.95:1 no branco e 4.63:1 no --bg2, e continua mais claro que o --dim. */ --txt:#1b1b1f; --dim:#5c5c68; --faint:#6f6f7c; /* Apoio */ --blue:#2563eb; --green:#16a34a; --red:#dc2626; --yellow:#ca8a04; --purple:#7c3aed; /* Par ESCURO das cores de apoio, para quando elas viram LETRA. Mesma aritmética que criou o --marca-solida, aplicada à escala funcional: o tom vivo serve para traço, borda e fatia de gráfico, mas reprova no AA como texto pequeno. Medido sobre o fundo do badge (a própria cor a 9% sobre branco): #16a34a = 2,99:1 #ca8a04 = 2,68:1 #dc2626 = 4,19:1 — todos abaixo dos 4,5:1. Estes dão 5,46 / 5,41 / 4,98 e continuam inequivocamente verde, amarelo e vermelho. Regra: cor de apoio como TEXTO usa o token -txt; como traço ou superfície, o vivo. O azul e o roxo já passavam (4,56 e 5,70) e por isso apontam para o mesmo valor. */ --green-txt:#127238; --yellow-txt:#8a5a06; --red-txt:#c81e1e; --blue-txt:#2563eb; --purple-txt:#7c3aed; /* Séries de gráfico — vermelho e preto primeiro, o resto só entra com muitas fatias. Vira token porque o preto da fatia 2 dá 1,08:1 sobre o painel do tema escuro: some. O amarelo do claro é o par escuro (#a16207, 4,92:1) porque o vivo dá 2,94:1 no branco, abaixo dos 3:1 que a WCAG 1.4.11 pede para elemento gráfico. */ --serie-1:#e83700; --serie-2:#232323; --serie-3:#2563eb; --serie-4:#16a34a; --serie-5:#7c3aed; --serie-6:#a16207; --btn-txt:#ffffff; --hover-row:rgba(35,35,35,.04); --scroll:#cfcfd8; --modal-border:#e4e4e9; --topbar-bg:rgba(255,255,255,.85); --chip-border:rgba(0,0,0,.14); --rad:14px; --rad-sm:9px; --shadow:0 8px 24px rgba(35,35,35,.10); --shadow-forte:0 18px 48px rgba(35,35,35,.16); } /* ---- Tema escuro ---- */ :root[data-theme="dark"]{ --bg:#111114; --bg2:#17171c; --panel:#1c1c22; --panel2:#22222a; --line:#2c2c36; --line-soft:#24242c; --line-strong:#3d3d4a; --linha-hover:#9a9aa6; /* Mesmo problema do claro, espelhado: #71717f dava 3.5–3.7:1 sobre os painéis escuros. #8a8a98 dá 4.64:1 sobre o --panel2 (o fundo mais claro do tema) e segue abaixo do --dim. */ --txt:#f0f0f4; --dim:#a3a3b2; --faint:#8a8a98; --blue:#60a5fa; --green:#4ade80; --red:#f87171; --yellow:#facc15; --purple:#a78bfa; /* No escuro os tons vivos JÁ passam sobre o painel (9,7:1 o verde, 11:1 o amarelo), então o par -txt aponta para eles mesmos. O token existe para a regra ser uma só nos dois temas: cor de apoio como letra = -txt, sempre, sem o componente saber o tema. */ --green-txt:#4ade80; --yellow-txt:#facc15; --red-txt:#f87171; --blue-txt:#60a5fa; --purple-txt:#a78bfa; /* A fatia 2 é o preto da tinta e desapareceria no fundo escuro (1,08:1): vira cinza claro. */ --serie-1:#e83700; --serie-2:#d4d4dc; --serie-3:#60a5fa; --serie-4:#4ade80; --serie-5:#a78bfa; --serie-6:#facc15; --hover-row:rgba(255,255,255,.04); --scroll:#3a3a46; --modal-border:#33333f; --topbar-bg:rgba(23,23,28,.85); --chip-border:rgba(255,255,255,.2); --shadow:0 8px 28px rgba(0,0,0,.5); --shadow-forte:0 18px 48px rgba(0,0,0,.6); } *{box-sizing:border-box;margin:0;padding:0} /* ⚠️ NÃO defina `font-size` no html. Sem ela, 1rem É a preferência de tamanho de fonte do visitante no navegador — que é exatamente o ponto de o site inteiro medir texto em rem. Fixar `html{font-size:16px}` (ou 62.5%) anula a preferência e devolve o problema que a conversão resolveu: quem aumenta a fonte por necessidade não vê diferença nenhuma. */ /* `scrollbar-gutter:stable` reserva a calha da barra de rolagem SEMPRE, mesmo na página que cabe na tela. Sem isso o site inteiro pulava horizontalmente ao trocar de rota: página comprida tem barra e perde ~10px de largura útil, página curta (o /blog sem artigos, por exemplo) não tem — e como o `.wrap` é centralizado com `margin:0 auto`, a diferença se divide nos dois lados e o conteúdo salta 5px para a direita. Medido: /blog sem barra dava clientWidth 1280 e logo em x=74; com barra, 1270 e x=69. Em sistema com barra sobreposta (macOS, celular) a calha é 0 e a regra não custa nada. */ html{scroll-behavior:smooth;scrollbar-gutter:stable} body{ background:var(--bg);color:var(--txt); /* SEM 'Inter' na frente — e isso é decisão, não descuido. O projeto não baixa fonte (privacidade), então listar Inter só criava DUAS aparências: quem tem Inter instalada (designer, dev) via um site, e o dono de PME via outro, em Segoe UI. Medido: Inter tem largura idêntica ao fallback genérico nesta máquina, ou seja, nunca renderizou. Agora todo visitante vê a mesma coisa. ⚠️ NÃO troque por 'Segoe UI Variable Text' "porque é variável": medido, a Variable colapsa 700/800/900 num peso só (4 distintos), enquanto a estática mantém 5 e preserva o 800 dos números grandes. A variável seria um downgrade aqui. */ font-family:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif; /* TEXTO em rem, ESPAÇAMENTO em px, e a divisão é deliberada: o ganho de acessibilidade é a letra acompanhar a preferência do visitante. Converter padding e margem junto multiplicaria a superfície de regressão sem melhorar a leitura. 0.9375rem = os mesmos 15px de antes quando a preferência está no padrão. */ font-size:0.9375rem;line-height:1.55;-webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} /* Palavra longa SEM espaço — nome de sistema, termo técnico, URL colada — digitada no painel não pode empurrar a página. São duas coisas juntas, e uma sem a outra não resolve: `min-width:0` porque filho de grid/flex nasce com `min-width:auto` e se recusa a encolher abaixo da palavra mais longa; `overflow-wrap` para a palavra finalmente quebrar depois que o container pode encolher. Sem isso, um nome de produto comprido criava rolagem horizontal no site inteiro em 375px — e é conteúdo que o dono edita, não constante do código. */ body{overflow-wrap:break-word} .grid>*,.so-bento>*,.so-prod-grade>*,.so-passos>*,.so-nums>*,.so-stack>*{min-width:0} a{color:inherit} ::selection{background:color-mix(in srgb,var(--marca) 22%,transparent)} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:6px} ::-webkit-scrollbar-track{background:transparent} :focus-visible{outline:2px solid var(--marca);outline-offset:2px} /* Respeita quem pediu menos animação no sistema operacional */ @media(prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} html{scroll-behavior:auto} } /* ---- Layout ---- */ /* `max(24px, env(...))` e não `24px + env(...)`: em aparelho sem notch a env() vale 0 e o respiro continua exatamente 24px; em iPhone deitado, o recorte da câmera fica de um lado só e apenas AQUELE lado cresce. Somar daria 24px de sobra no lado que não precisa. */ .wrap{ width:100%;max-width:1180px;margin:0 auto; padding-left:max(24px,env(safe-area-inset-left)); padding-right:max(24px,env(safe-area-inset-right)); } .grid{display:grid;gap:18px} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} .row{display:flex;align-items:center;gap:10px} .row-wrap{flex-wrap:wrap} .spread{justify-content:space-between} .mt{margin-top:14px}.mb{margin-bottom:14px} .hidden{display:none!important} @media(max-width:900px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}} @media(max-width:620px){ .g2,.g3,.g4{grid-template-columns:1fr} .wrap{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))} } /* ---- Tipografia ---- */ h1,h2,h3,h4{line-height:1.18;font-weight:700;letter-spacing:-.02em} h1{font-size:clamp(2rem,5vw,3.4rem)} h2{font-size:clamp(1.5rem,3.2vw,2.3rem)} h3{font-size:1.2rem} .lead{font-size:clamp(1rem,1.7vw,1.18rem);color:var(--dim);line-height:1.65} /* Etiqueta de seção: texto NEUTRO com um traço vermelho na frente. Em vermelho, o texto pequeno em caixa-alta era o que mais puxava para o laranja. */ .eyebrow{ display:inline-flex;align-items:center;gap:9px; font-size:0.71875rem;letter-spacing:.16em;text-transform:uppercase; color:var(--dim);font-weight:700; } .eyebrow::before{content:'';width:18px;height:2px;background:var(--marca);flex:none} .dim{color:var(--dim)} .faint{color:var(--faint)} /* Destaque de texto: vermelho CHAPADO. Texto com degradê fica lavado e é justamente onde o vermelho quente começa a parecer laranja. */ .grad-txt{color:var(--marca)} /* ---- Botões ---- * Cor CHAPADA, canto discreto e nenhum efeito de brilho. A versão anterior tinha degradê, * glow colorido e um brilho que atravessava no hover — é o que deixava o site com cara de * laranja e de template. Aqui o contraste faz o trabalho: vermelho para a ação principal, * contorno preto para a secundária. */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:12px 22px;border:1.5px solid var(--line-strong);border-radius:8px; background:var(--panel);color:var(--txt);font:inherit;font-size:0.90625rem;font-weight:600; letter-spacing:-.01em;cursor:pointer;text-decoration:none; transition:background .16s,border-color .16s,color .16s,transform .1s; } .btn:hover{border-color:var(--tinta);background:var(--panel2)} .btn:active{transform:translateY(1px)} .btn:disabled{opacity:.5;cursor:not-allowed;transform:none} /* Ação principal — vermelho da marca, sem degradê. Superfície em --marca-solida porque carrega texto branco (ver o token lá em cima); o hover em --marca-esc escurece mais ainda e dá 5.72:1. */ .btn-primary{background:var(--marca-solida);border-color:var(--marca-solida);color:#fff} .btn-primary:hover{background:var(--marca-esc);border-color:var(--marca-esc);color:#fff} /* Ação secundária — o preto do wordmark, o par natural do vermelho */ .btn-escuro{background:var(--tinta);border-color:var(--tinta);color:#fff} .btn-escuro:hover{background:var(--tinta-2);border-color:var(--tinta-2);color:#fff} .btn-danger{background:var(--red);border-color:var(--red);color:#fff} .btn-danger:hover{background:#b91c1c;border-color:#b91c1c;color:#fff} .btn-ghost{background:transparent;border-color:transparent;color:var(--dim)} .btn-ghost:hover{background:var(--panel2);color:var(--txt);border-color:transparent} /* Contorno preto — usado ao lado do botão vermelho no hero */ .btn-linha{background:transparent;border-color:var(--tinta);color:var(--txt)} .btn-linha:hover{background:var(--tinta);border-color:var(--tinta);color:#fff} .btn-sm{padding:8px 15px;font-size:0.8125rem;border-radius:7px} .btn-lg{padding:15px 30px;font-size:0.96875rem} .btn-block{width:100%} /* No tema escuro o preto some no fundo: contorno e botão escuro passam a usar o claro */ :root[data-theme="dark"] .btn:hover{border-color:var(--line-strong)} :root[data-theme="dark"] .btn-linha{border-color:var(--line-strong)} :root[data-theme="dark"] .btn-linha:hover{background:var(--txt);border-color:var(--txt);color:var(--bg)} :root[data-theme="dark"] .btn-escuro{background:var(--txt);border-color:var(--txt);color:var(--bg)} :root[data-theme="dark"] .btn-escuro:hover{background:#fff;border-color:#fff;color:#000} .icon-btn{ display:inline-flex;align-items:center;justify-content:center; width:36px;height:36px;border:1px solid var(--line);border-radius:var(--rad-sm); background:var(--panel);color:var(--dim);cursor:pointer;transition:border-color .15s,color .15s; } .icon-btn:hover{border-color:var(--marca);color:var(--txt)} /* 36px é confortável para mouse e pequeno demais para polegar. Em ponteiro GROSSO (toque, caneta) vai para 44px — o mínimo de alvo de toque. Vale para o botão de tema e o hambúrguer, que são os dois controles principais do site no celular. `pointer:coarse` em vez de largura de tela porque o que decide é o dedo, não o monitor: notebook com tela sensível ao toque também precisa do alvo maior. */ /* Medido no navegador: .btn-sm sai com 38px de altura, .subtab com 42px e o item do menu do painel com 40px — todos abaixo do alvo mínimo de 44px, e todos eram controle de uso diário. O bump vale para o conjunto, não só para o .icon-btn como antes. */ @media(pointer:coarse){ .icon-btn{width:44px;height:44px} .btn-sm,.subtab,.chip{min-height:44px} .chip{padding-inline:16px} } /* ---- Cartões ---- */ .card{ background:var(--panel);border:1px solid var(--line);border-radius:var(--rad); padding:20px;position:relative; } .card.pad0{padding:0;overflow:hidden} .card-hover{transition:border-color .18s,transform .18s,box-shadow .18s} /* Levantar o cartão só onde existe ponteiro que paira DE VERDADE. No toque o `:hover` dispara junto com o tap e fica GRUDADO até o dedo tocar em outro lugar — o cartão continua levantado depois de o usuário já ter saído dele. Em dispositivo sem hover, o retorno vira `:active`: acontece durante o toque e some sozinho quando solta, que é o comportamento que o dedo espera. */ @media(hover:hover){ .card-hover:hover{border-color:var(--marca);transform:translateY(-3px);box-shadow:var(--shadow)} } @media(hover:none){ .card-hover:active{border-color:var(--marca)} } /* Indicador do painel: filete VERMELHO na lateral esquerda, sem barra no topo. Cantos retos de propósito — borda de um lado só com canto arredondado faz a cor curvar e parecer defeito. */ .kpi{ background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--marca); border-radius:0;padding:16px 18px;overflow:hidden;position:relative; } .kpi .kpi-v{font-size:1.625rem;font-weight:800;letter-spacing:-.02em;margin-top:6px} /* Rótulo em caixa-alta é peso 600 em todo o sistema. Este e outros dois não declaravam nada e herdavam 400, ficando visivelmente mais fracos que irmãos de mesmo papel. */ .kpi .kpi-t{font-size:0.71875rem;text-transform:uppercase;letter-spacing:.1em;color:var(--faint);font-weight:600} .kpi .kpi-sub{font-size:0.75rem;color:var(--dim);margin-top:3px} .empty{padding:38px 20px;text-align:center;color:var(--faint);font-size:0.875rem} /* ---- Formulários ---- */ .form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px} .form-grid .full{grid-column:1/-1} @media(max-width:620px){.form-grid{grid-template-columns:1fr}} .fld{display:flex;flex-direction:column;gap:5px} .fld>label{font-size:0.71875rem;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);font-weight:600} .fld input,.fld select,.fld textarea,.inp{ width:100%;padding:10px 12px;border:1px solid var(--line-strong);border-radius:var(--rad-sm); background:var(--bg);color:var(--txt);font:inherit;font-size:0.90625rem;transition:border-color .15s,box-shadow .15s; } .fld input:focus,.fld select:focus,.fld textarea:focus,.inp:focus{ outline:none;border-color:var(--marca);box-shadow:0 0 0 3px color-mix(in srgb,var(--marca) 16%,transparent); } .fld textarea{resize:vertical;min-height:110px;line-height:1.6} /* O Safari do iOS dá ZOOM na viewport sempre que o campo focado está abaixo de 16px — a página salta e reescala sozinha. Acontecia no campo da newsletter, no rodapé da home. 16px no toque resolve; o desktop segue nos 14.5px. */ @media(max-width:820px){ .fld input,.fld select,.fld textarea,.inp{font-size:1rem} } .fld .hint{font-size:0.71875rem;color:var(--faint)} .fld.erro input,.fld.erro textarea,.fld.erro select{border-color:var(--red)} /* A mensagem de erro fica NO campo. Antes o único retorno era um toast que sumia em 3,6s e não dizia qual campo estava errado — para quem não é técnico, isso é um beco sem saída. Usa --red-txt porque aqui a cor vira LETRA pequena (ver a Regra do Apoio como Letra). */ .fld .msg-erro{font-size:0.71875rem;color:var(--red-txt);font-weight:600} /* Resumo no topo do formulário, para erro que não pertence a um campo só */ .form-erros{ grid-column:1/-1;border:1px solid color-mix(in srgb,var(--red) 42%,transparent); background:color-mix(in srgb,var(--red) 7%,transparent); border-radius:var(--rad-sm);padding:11px 14px;font-size:0.84375rem;color:var(--txt); display:flex;gap:9px;align-items:flex-start; } .inp-sm{padding:6px 9px;font-size:0.8125rem} .check{display:flex;align-items:flex-start;gap:9px;font-size:0.84375rem;color:var(--dim);cursor:pointer} .check input{width:16px;height:16px;margin-top:2px;accent-color:var(--marca);flex:none} /* ⚠️ A caixa de marcar É um