/* ============ 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; --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; --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. */ html{scroll-behavior:smooth} 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. */ @media(pointer:coarse){ .icon-btn{width:44px;height:44px} } /* ---- 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)} .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} /* Cabeçalho de seção do formulário — evita o "paredão" de campos */ .form-sec{grid-column:1/-1;display:flex;align-items:center;gap:9px;margin-top:6px} .form-sec:first-child{margin-top:0} .form-sec .fs-t{font-size:0.78125rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);white-space:nowrap} .form-sec .fs-l{flex:1;height:1px;background:var(--line)} /* Rádio em cartões */ .card-radio{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:9px} .card-radio .cr-opt{ border:1px solid var(--line);border-radius:12px;padding:12px 10px;text-align:center; cursor:pointer;background:var(--panel);transition:border-color .15s,background .15s; } .card-radio .cr-opt:hover{border-color:var(--tinta)} .card-radio .cr-opt.ativo{ border-color:var(--marca);background:var(--panel); box-shadow:0 0 0 1.5px var(--marca); } .card-radio .cr-tit{font-size:0.8125rem;font-weight:700} .card-radio .cr-sub{font-size:0.6875rem;color:var(--dim);margin-top:2px} /* ---- Modal ---- */ .modal-back{ position:fixed;inset:0;background:rgba(15,15,20,.55);backdrop-filter:blur(3px); display:flex;align-items:center;justify-content:center;padding:20px;z-index:80; } .modal{ background:var(--panel);border:1px solid var(--modal-border);border-radius:var(--rad); width:100%;max-width:560px;max-height:90vh;display:flex;flex-direction:column; overflow:hidden;position:relative;box-shadow:var(--shadow-forte); } .modal::before{content:'';position:absolute;inset:0 0 auto 0;height:3px;background:var(--marca)} .modal.wide{max-width:860px} .modal.xwide{max-width:1180px} .modal-head{padding:18px 22px 12px;font-size:1.03125rem;font-weight:700;display:flex;align-items:center;gap:9px} .modal-body{padding:6px 22px 18px;overflow-y:auto;flex:1} .modal-foot{padding:14px 22px;border-top:1px solid var(--line);display:flex;gap:9px;justify-content:flex-end;background:var(--bg2)} /* ---- Toast ---- */ /* Sobe acima do indicador de gesto do iPhone — senão o toast nasce debaixo da barra. */ #toast-root{ position:fixed;z-index:120;display:flex;flex-direction:column;gap:9px; right:max(18px,env(safe-area-inset-right)); bottom:max(18px,env(safe-area-inset-bottom)); } .toast{ background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--green); border-radius:var(--rad-sm);padding:11px 16px;font-size:0.84375rem;box-shadow:var(--shadow); max-width:340px;animation:toast-in .22s ease-out; } .toast.err{border-left-color:var(--red)} .toast.warn{border-left-color:var(--yellow)} .toast.saindo{opacity:0;transition:opacity .3s} @keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* ---- Badges e chips ---- */ .badge{ display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px; font-size:0.71875rem;font-weight:600;border:1px solid var(--chip-border);white-space:nowrap; } /* Letra ESCURA com contorno vermelho: em 11px, letra vermelha sobre branco lê laranja. O vermelho fica no traço da borda, onde não tem esse problema. */ .b-marca{color:var(--txt);border-color:var(--marca)} .b-green{color:var(--green);border-color:color-mix(in srgb,var(--green) 40%,transparent);background:color-mix(in srgb,var(--green) 9%,transparent)} .b-blue{color:var(--blue);border-color:color-mix(in srgb,var(--blue) 40%,transparent);background:color-mix(in srgb,var(--blue) 9%,transparent)} .b-red{color:var(--red);border-color:color-mix(in srgb,var(--red) 40%,transparent);background:color-mix(in srgb,var(--red) 9%,transparent)} .b-yellow{color:var(--yellow);border-color:color-mix(in srgb,var(--yellow) 40%,transparent);background:color-mix(in srgb,var(--yellow) 9%,transparent)} .b-purple{color:var(--purple);border-color:color-mix(in srgb,var(--purple) 40%,transparent);background:color-mix(in srgb,var(--purple) 9%,transparent)} .b-gray{color:var(--dim)} .chip{ display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px; border:1px solid var(--line-strong);background:var(--panel);font-size:0.78125rem;color:var(--dim); cursor:pointer;transition:border-color .15s,color .15s;text-decoration:none; } .chip:hover{border-color:var(--marca);color:var(--txt)} .chip.ativo{background:var(--marca-solida);border-color:var(--marca-solida);color:#fff} /* ---- Tabelas ---- */ table{width:100%;border-collapse:collapse;font-size:0.84375rem} th{ text-align:left;padding:9px 10px;border-bottom:1px solid var(--line); font-size:0.6875rem;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);font-weight:600;white-space:nowrap; } td{padding:10px;border-bottom:1px solid var(--line-soft);vertical-align:middle} tbody tr:hover{background:var(--hover-row)} .t-strong{font-weight:600} .t-dim{color:var(--dim);font-size:0.78125rem} .t-actions{display:flex;gap:5px;justify-content:flex-end} .tabela-rolavel{overflow-x:auto} /* ---- Abas ---- */ .subtabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:18px} .subtab{ padding:9px 15px;border:none;background:none;color:var(--dim);font:inherit;font-size:0.875rem; font-weight:600;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px; } .subtab:hover{color:var(--txt)} .subtab.ativa{color:var(--marca);border-bottom-color:var(--marca)} /* ---- Cabeçalho de página do painel ---- */ .page-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px} .page-head h2{font-size:1.5rem} /* ---- Barra de progresso ---- */ .gauge{height:7px;border-radius:999px;background:var(--panel2);overflow:hidden} .gauge>i{display:block;height:100%;background:var(--marca);border-radius:999px;transition:width .3s} /* ---- Estados de carregamento ---- */ .skel{background:linear-gradient(90deg,var(--panel2) 25%,var(--line-soft) 50%,var(--panel2) 75%); background-size:200% 100%;animation:skel 1.3s infinite;border-radius:var(--rad-sm)} @keyframes skel{from{background-position:200% 0}to{background-position:-200% 0}} /* ---- Crédito no rodapé ---- */ .credito-softone{display:inline-flex;align-items:center;gap:6px;font-size:0.71875rem;color:var(--faint);text-decoration:none} .credito-softone:hover{color:var(--dim)}