/* ============================================================================ Kalebe RH — landing comercial. Direção C, "Aço". A ficha inteira e medida está em docs/MARCA.md. A REGRA QUE VALE PARA TUDO: nenhum valor de cor, tamanho, espaço ou raio é escrito na mão dentro de uma regra. Tudo sai daqui. Se você precisou de um número que não existe na ficha, ou o número está errado, ou falta ficha. Ordem de carga: tokens.css -> componentes.css -> paginas.css ============================================================================ */ /* ======================= as fontes, servidas daqui ======================= */ /* Self-hosted de propósito: zera requisição a terceiro e o nginx já cacheia .woff2 por 7 dias. Instrument Sans é variável, 400 a 700, num arquivo só. A IBM Plex Mono saiu: nenhuma regra desta página usa monoespaçada desde que a faixa de números passou a ser sans em negrito. Os arquivos foram apagados da pasta. A família continua registrada na ficha de marca (docs/MARCA.md) caso volte a fazer falta. */ @font-face{ font-family:"Instrument Sans"; font-style:normal; font-weight:400 700; font-display:swap; src:url("../fontes/instrument-sans-400-700-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"Instrument Sans"; font-style:normal; font-weight:400 700; font-display:swap; src:url("../fontes/instrument-sans-400-700-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* ================================ a ficha =============================== */ :root{ color-scheme:light; /* ---- a rampa neutra, fria. Nove degraus. ---- */ --n-0:#FFFFFF; /* superfície elevada: é onde a ficha vive */ --n-1:#F7F8F8; /* o papel, o fundo da página */ --n-2:#EDEFF0; /* superfície recuada */ --n-3:#DCE0E2; /* divisória decorativa */ --n-4:#C6CCD0; /* divisória marcada */ --n-5:#808A90; /* borda de CAMPO. 3,31:1 no papel */ --n-6:#5E656A; /* texto de apoio. 5,57:1 no papel */ --n-7:#333A3E; /* tinta média */ --n-8:#15181A; /* a tinta */ /* ---- os papéis: os nomes que o resto da folha usa ---- */ --papel:var(--n-1); --tinta:var(--n-8); --tinta-media:var(--n-7); --suave:var(--n-6); --linha:var(--n-3); --linha-forte:var(--n-4); /* ---- a marca. Uma cor só, medida contra as quatro do DISC. ---- */ --marca:#0B4F63; --marca-escura:#073C4C; --marca-fraca:#E4EFF3; --marca-borda:#B4D2DD; --marca-tinta:var(--n-1); --marca-clara:#7FC3DE; /* só SOBRE fundo escuro */ --marca-brilho:#10637C; /* o ponto quente do radial na dobra e no CTA */ --marca-fraca-2:#D5E7ED; /* o fim do gradiente do cartão da foto */ /* ---- o branco translúcido SOBRE o azul ---- Eram 22 usos com 13 opacidades diferentes escritas à mão, e a diferença entre .88 e .90 não existe para o olho: existe só para quem lê o código e fica sem saber qual é a certa. Viraram seis papéis. */ --sobre-texto:rgba(247,248,248,.90); /* corpo e apoio */ --sobre-fraco:rgba(247,248,248,.78); /* legenda, link de rodapé, nota */ --sobre-chapa:rgba(247,248,248,.16); /* chapa de selo e de ícone */ --sobre-chapa-leve:rgba(247,248,248,.12); /* realce de hover */ --sobre-linha:rgba(247,248,248,.22); /* filete divisório, borda de selo */ --sobre-borda:rgba(247,248,248,.45); /* borda do botão de contorno */ /* o branco da barra, que e translucido para o desfoque aparecer. Branco puro de proposito, e nao --n-0: a barra flutua sobre a dobra azul e sobre o papel, e qualquer tom quebraria o desfoque. */ --barra-fundo:rgba(255,255,255,.90); --barra-fundo-fixa:rgba(255,255,255,.97); /* ---- o verde do check das listas ---- Medido no branco: 5,9:1. Vive aqui sozinho de propósito. As quatro cores do DISC, os estados de recomendação, a superfície escura e as cores de erro do formulário saíram desta folha: nenhuma regra desta página as usava, e token que não pinta nada ainda assim viaja para o navegador de quem abre o site. Continuam registradas em `docs/MARCA.md`, que é onde a régua mora. */ --ok-forte:#0F6B41; /* ---- tipo: a rampa inteira em rem, fluida no grande ---- Os degraus de apoio eram px, e px NAO acompanha o tamanho de fonte que a pessoa configurou no navegador. Quem aumentou a fonte por enxergar mal via a pagina inteira ignorar a escolha dele: so o corpo crescia, porque so o corpo estava em rem. Agora a rampa toda e relativa, e a grade aguenta ate 300% sem estourar (conferido em 23/09/2026). Os comentarios dizem o tamanho com a raiz no padrao de 16px. */ --t-12:.75rem; /* 12 */ --t-13:.8125rem; /* 13 */ --t-14:.875rem; /* 14 */ --t-15:.9375rem; /* 15 */ --t-corpo:1rem; /* 16 — o piso de leitura da web */ --t-display:clamp(2.25rem,1.58rem + 2.7vw,4rem); /* 36 -> 64 */ --t-h2:clamp(1.75rem,1.4rem + 1.4vw,2.625rem); /* 28 -> 42 */ --t-h2b:clamp(1.375rem,1.2rem + .72vw,1.75rem); /* 22 -> 28 */ --t-h3:clamp(1.1875rem,1.04rem + .62vw,1.5rem); /* 19 -> 24 */ --t-lg:clamp(1.0625rem,1rem + .26vw,1.25rem); /* 17 -> 20 */ --t-num:clamp(1.75rem,1.4rem + 1.5vw,2.75rem); /* 28 -> 44 */ /* aperto do display. O piso da skill é -.04em; ficamos acima dele. */ --aperto-display:-.035em; --aperto-h2:-.028em; /* ---- a régua de 4px, estendida para o ritmo de seção ---- */ --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px; --e-5:20px; --e-6:24px; --e-7:32px; --e-8:40px; --e-9:56px; --e-10:80px; --e-11:112px; --e-12:152px; /* o alvo mínimo de toque. Não sai da régua de 4px por acaso: é o piso de 44px da WCAG 2.5.5, e por isso tem nome próprio. */ --alvo:44px; /* ---- o raio: aperta no controle, amacia na superfície grande ---- */ --r-1:6px; --r-2:8px; --r-4:16px; --r-5:20px; --r-6:28px; --r-cheio:99px; /* ---- elevação, no cinza frio e nunca no preto puro ---- */ --sombra-1:0 1px 2px rgba(16,42,52,.05), 0 4px 10px -6px rgba(16,42,52,.10); --sombra-2:0 1px 3px rgba(16,42,52,.06), 0 10px 24px -12px rgba(16,42,52,.16); --sombra-3:0 2px 6px rgba(16,42,52,.06), 0 22px 44px -20px rgba(16,42,52,.22); --sombra-4:0 4px 10px rgba(16,42,52,.07), 0 40px 72px -32px rgba(16,42,52,.30); /* O anel de foco nao vive aqui: e outline, desenhado la embaixo em :focus-visible. As duas sombras que existiam neste lugar nao eram usadas por regra nenhuma. */ /* ---- movimento. Pouco, e com propósito. ---- */ --rapido:120ms; --medio:320ms; /* O gesto autoral das solucoes usa milissegundos literais em paginas.css, um por batida (300 / 320 / 340), e nao um token compartilhado: cada batida tem duracao propria e amarrar as tres a um numero so esconderia isso de quem for mexer. */ --curva:cubic-bezier(.2,.6,.3,1); --saida:cubic-bezier(.16,1,.3,1); /* ease-out exponencial da entrada */ /* ---- medida ---- */ --faixa:1200px; --barra-alt:72px; /* ---- tipo. Uma família só, e nenhuma serifa. A monoespaçada saiu junto com os arquivos dela: nenhuma regra desta página usava dado em mono, e a família continua descrita em `docs/MARCA.md`. ---- */ --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; } /* OS PONTOS DE QUEBRA REAIS, conferidos no código em 22/09/2026. Não dá para guardar em var() porque @media não lê custom property, então esta lista é a única fonte. Ela já mentiu uma vez: dizia "quatro pontos consolidados: 480 · 720 · 960 · 1200", e nem 480 nem 1200 existiam. Largura: 359 (só-abaixo) · 560 · 640 · 720 · 760 · 800 · 820 859 (só-abaixo) · 860 · 880 · 960 · 1080 · 1180 Conferida de novo em 23/09/2026: faltava o 800, que é onde os três diferenciais viram três colunas. Ela mente sempre que alguém acrescenta um ponto e não volta aqui. Altura: 520 (celular deitado) Entrada: pointer:coarse · hover:none · prefers-reduced-motion · print Ao adicionar um ponto novo, acrescente aqui. Lista desatualizada engana mais do que lista nenhuma. */ /* ================================ o casco =============================== */ *,*::before,*::after{box-sizing:border-box} html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--barra-alt) + var(--e-4)); } /* Quem pediu menos movimento no sistema nao quer 6.000px de rolagem animada ao clicar numa ancora. O bloco de movimento reduzido de componentes.css cobre revelacao, seta e recorte, mas nao alcanca isto: scroll-behavior mora aqui. */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} } body{ margin:0; background:var(--papel); /* explícito: a página não herda o tema do SO */ color:var(--tinta); font-family:var(--sans); font-size:var(--t-corpo); line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; touch-action:manipulation; -webkit-tap-highlight-color:transparent; } img{max-width:100%;height:auto;display:block} a{color:inherit} svg{display:block} /* Palavra que nao cabe quebra em vez de vazar, mas SO em texto corrido. Titulo nao quebra no meio da palavra por nada: a primeira versao desta regra estava no body e produzia "acompanhamen / to" em "Como funciona", a 1440, com a fonte no tamanho padrao. Titulo que nao couber tem que estourar visivelmente, para obrigar a consertar a causa em vez de esconder o sintoma. */ p,li,dd,figcaption,blockquote{overflow-wrap:break-word} h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.12;text-wrap:balance} p{margin:0} ul,ol{margin:0;padding:0;list-style:none} /* ------- as superfícies do navegador que ninguém desenha, e que entregam a página como montada em vez de construída. Todas saem da ficha. ------- */ ::selection{background:var(--marca);color:var(--marca-tinta)} :root{caret-color:var(--marca)} :focus-visible{ outline:2px solid var(--marca); outline-offset:3px; border-radius:var(--r-1); } /* sobre a dobra, o CTA e o rodape, que sao azuis cheios */ .hero :focus-visible,.cta :focus-visible,.rodape :focus-visible{outline-color:var(--marca-clara)} a{text-underline-offset:.22em;text-decoration-thickness:1px} @supports (scrollbar-color:auto){ html{scrollbar-color:var(--linha-forte) var(--papel);scrollbar-width:thin} } @supports not (scrollbar-color:auto){ ::-webkit-scrollbar{width:11px;height:11px} ::-webkit-scrollbar-track{background:var(--papel)} ::-webkit-scrollbar-thumb{background:var(--linha-forte);border-radius:var(--r-cheio);border:3px solid var(--papel)} ::-webkit-scrollbar-thumb:hover{background:var(--n-5)} } /* todo número que se compara na vertical alinha por coluna */ /* Numero grande da faixa agora e sans em negrito, como no modelo. A mono continua declarada na ficha, mas nenhuma regra a usa, entao o navegador nao baixa os arquivos dela. */ [data-conta]{font-variant-numeric:tabular-nums} /* ============================== utilidades ============================== */ .faixa{width:100%;max-width:var(--faixa);margin-inline:auto;padding-inline:var(--e-5)} .pular{ position:absolute;left:var(--e-4);top:var(--e-4); /* sai de cena por transform e não por top: top dispara layout */ transform:translateY(calc(-100% - var(--e-8))); z-index:100; background:var(--marca);color:var(--marca-tinta); padding:var(--e-3) var(--e-5);border-radius:var(--r-2); font-size:var(--t-14);font-weight:600;text-decoration:none; transition:transform var(--rapido) var(--curva); } .pular:focus{transform:none} @media (min-width:720px){ .faixa{padding-inline:var(--e-7)} } /* O movimento vive todo em componentes.css, num lugar só. Este bloco estava duplicado aqui com valores diferentes (8px contra 16px, atrasos 70/140/210 contra 80/160/240) e o outro arquivo vencia por ordem de carga, então metade disto era código morto. */ /* ------- texto claro sobre superficie escura ------- Letra clara em fundo escuro espalha e parece mais apertada do que e. A compensacao e nos tres eixos: mais entrelinha (ja aplicada por seção), um fio de tracking, e um degrau de peso onde a face precisa. */