=1914px. Nenhum bloco consegue alcançar a borda direita, porque o pai deles já não alcança — e como o trilho é transparente, os 6px mostram o fundo creme do site. Era a listra fina em todas as seções. Aqui a barra da PÁGINA passa a não ocupar espaço. O seletor com elemento (body::-webkit-scrollbar) tem especificidade maior que o global, então vence mesmo os !important de lá. Painéis internos (chat, listas) mantêm a barra deles: a regra é só para html e body. ============================================================================= */ html::-webkit-scrollbar, body::-webkit-scrollbar{ width:0 !important; height:0 !important } html, body{ scrollbar-width:none !important } /* O display da tela de entrada só vale quando ela é a tela ativa. Fora daí, quem manda é o .screen{display:none} do app — senão ela fica visível por baixo de todas as telas internas. */ #screenStart.show{ display:block !important } #screenStart{ /* superfícies claras (do site) */ --k-page:#f5f0e8; --k-surf:#ffffff; --k-surf2:#f4f5f7; --k-surf3:#eceef2; --k-line:rgba(17,24,39,.12); --k-line2:rgba(17,24,39,.22); /* PALCO CLARO — antes era #0e1014, o "quase-preto da sala de edição". A ideia funcionava isolada e falhava na soma: as quatro demonstrações da página (entrada, retenção, fluxo, catálogo de formatos) caíam em blocos pretos, e no meio de um site creme cada um deles lia como TELA APAGADA — não como palco. Trocado por superfície clara: o mesmo papel do resto do site, com a mídia recortada em quadros de borda fina. Os nomes das variáveis ficaram (stage / on-stage) porque são usadas em ~70 regras deste arquivo; o que mudou foi o valor. */ --k-stage:#ffffff; --k-stage2:#f7f4ef; --k-stage-line:rgba(17,24,39,.13); /* texto */ --k-ink:#111827; --k-mut:#4b5563; --k-soft:#6b7280; /* 6,4:1 no branco e 6,0:1 sobre o --k-stage2: passa nos dois fundos claros em que este tom aparece */ --k-on-stage:#111827; --k-on-stage-mut:#55606f; /* marca */ --k-gold:#fcbc1d; --k-gold-hi:#dcb134; --k-gold-ink:#7a5d10; --k-gold-weak:rgba(201,160,42,.13); --k-gold-line:rgba(201,160,42,.45); --k-r:4px; --k-max:1280px; --k-gut:clamp(16px,4vw,48px); /* O

do site aplica 18px de padding lateral. Medido no navegador: o palco escuro parava 18px antes da borda da janela, deixando uma tira creme de cada lado — o "espacinho sobrando". As faixas escuras (hero e CTA) são full-bleed de propósito: encostam na borda e o miolo delas continua alinhado com o resto da página somando este valor ao gutter. */ --k-bleed:18px; /* NÃO colocar display aqui. O sistema de telas do app esconde com .screen{display:none} e mostra com .screen.show. Um display:block !important nesta regra vencia o none e a tela de entrada nunca sumia: ao abrir qualquer tela interna (#screenMegaPlace, #screenProcurar), ela era renderizada LOGO ABAIXO desta — medido, a grade do Mega Place nascia a 5958px do topo, e a tela parecia vazia. O display fica na regra .show no fim deste arquivo. */ background:transparent !important; color:var(--k-ink) !important; /* rede de segurança: uma faixa sangrada nunca pode gerar rolagem lateral */ overflow-x:clip; /* sobe a tela inteira até o topo da janela. Vai aqui e não no .kHero porque a margem negativa do primeiro filho colapsaria com a do pai. */ margin-top:calc(-1 * var(--k-bleed-top, 0px)); } /* O redesign.css pinta todo p/span/li de #111 com !important. Dentro desta tela a cor precisa vir do pai — senão nada de texto claro sobre o palco funciona. */ #screenStart p, #screenStart span, #screenStart li, #screenStart small, #screenStart strong, #screenStart b, #screenStart h1, #screenStart h2, #screenStart h3, #screenStart h4, #screenStart label, #screenStart summary, #screenStart div, #screenStart a, #screenStart figcaption{ color:inherit !important; } #screenStart .kWrap{ width:100%; max-width:var(--k-max); margin:0 auto; padding-inline:var(--k-gut); } /* ---- tipografia base ---- */ #screenStart .kDisplay{ font-weight:800; letter-spacing:-.042em; line-height:.98; color:var(--k-ink); margin:0; } #screenStart .kH2{ font-size:clamp(1.75rem,3.9vw,2.9rem); font-weight:800; letter-spacing:-.038em; line-height:1.04; margin:0 0 14px; color:var(--k-ink); } #screenStart .kLead{ margin:0; max-width:58ch; color:var(--k-mut); font-size:clamp(.98rem,1.4vw,1.08rem); line-height:1.55; } /* rótulo de seção: linha + texto, sem pílula colorida (pílula em toda seção é ruído; a linha organiza e não compete) */ #screenStart .kEyebrow{ display:flex; align-items:center; gap:10px; margin-bottom:16px; color:var(--k-gold-ink); font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; } #screenStart .kEyebrow::before{ content:""; width:22px; height:2px; background:var(--k-gold); flex:0 0 auto; } #screenStart .kSec{ padding-block:clamp(56px,8vw,104px) } #screenStart .kSecHead{ max-width:64ch; margin-bottom:clamp(28px,4vw,44px) } /* ---- botões ---- */ #screenStart .kBtn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:50px; padding:0 22px; border-radius:var(--k-r); border:1px solid transparent; font-family:inherit; font-size:.96rem; font-weight:800; letter-spacing:-.01em; cursor:pointer; text-decoration:none; transition:background .16s, border-color .16s, transform .12s; } #screenStart .kBtn:active{ transform:translateY(1px) } #screenStart .kBtn.kBtn--primary{ background:var(--k-gold); color:#1c1405 !important; border-color:var(--k-gold); } #screenStart .kBtn.kBtn--primary:hover{ background:var(--k-gold-hi) } #screenStart .kBtn.kBtn--line{ background:transparent; color:var(--k-ink) !important; border-color:var(--k-line2); } #screenStart .kBtn.kBtn--line:hover{ background:var(--k-surf3) } #screenStart .kBtn.kBtn--onStage{ background:transparent; color:#f3f5f8 !important; border-color:rgba(255,255,255,.34); } #screenStart .kBtn.kBtn--onStage:hover{ background:rgba(255,255,255,.08) } /* usado no fechamento: é a última chamada da página, pode ser maior que as do topo */ #screenStart .kBtn.kBtn--lg{ min-height:56px; padding:0 30px; font-size:1rem } #screenStart .kBtn:focus-visible{ outline:2px solid var(--k-gold-ink); outline-offset:2px } /* sobre o palco escuro o dourado do foco some — usa o dourado claro */ #screenStart .kCta .kBtn:focus-visible{ outline-color:var(--k-gold-hi) } /* ============================================================================= HERO — promessa + login à esquerda; palco de frames verticais à direita ============================================================================= O lado direito NÃO é uma imagem decorativa: é o produto. Uma fita de frames 9:16 subindo devagar mostra, sem texto, o que sai daqui. É o "produto visível acima da dobra" que a fórmula de landing exige. ============================================================================= */ /* SEM 100svh forçado. Medido em telas reais, o conteúdo da coluna esquerda (título + texto + CTAs + provas + formulário completo) passa de 900px — e travar o hero na altura da janela empurrava o botão "Entrar agora" para fora da primeira tela: faltavam 287px num 1366x768. Numa tela de LOGIN isso é inaceitável. Agora o conteúdo define a altura, com um piso para o palco não virar uma faixa fina em monitor grande. */ #screenStart .kHero{ /* ── O PALCO ESCURO VIVE SÓ AQUI ────────────────────────────────────────── Em 13/08/2026 as demonstrações da página trocaram o quase-preto por superfície clara, e os tokens --k-stage* passaram a valer claro. O hero ficou de fora por decisão do Kauan, comparando as duas versões lado a lado: nesta faixa a foto grande precisa do fundo escuro para saltar. Por isso as cores dele moram nestas variáveis próprias — mexer nos --k-stage* daqui para baixo NÃO afeta mais este bloco. */ --k-palco:#0e1014; --k-palco2:#171b22; --k-palco-line:rgba(255,255,255,.13); --k-palco-ink:#f3f5f8; --k-palco-mut:#9aa4b2; display:grid; /* o palco ganhou a coluna maior: era 1.02/0.98 (texto maior que o preto), agora o preto avança para a esquerda */ grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); align-items:stretch; min-height:min(100svh, 680px); /* encosta nas bordas laterais, furando o padding do

. A subida até o topo é feita no #screenStart. */ margin-inline:calc(-1 * var(--k-bleed)); /* Superfície própria. Sem isto aparecia a textura de fundo do site (assets/site-background-new.png, com os arcos dourados e as bolinhas) na faixa à esquerda do conteúdo — o hero era transparente. O palco cobre a metade direita por cima. */ background:linear-gradient(180deg, #f8f5ef 0%, var(--k-page) 58%, #f1ebe1 100%); } /* Em telas de pouca altura (notebook 768px) o hero encolhe o que dá para o formulário caber: título menor, menos respiro. Melhor um hero compacto do que um botão de login escondido abaixo da dobra. */ @media (min-width:1021px) and (max-height:860px){ #screenStart .kHeroLeft{ gap:13px; padding-bottom:22px; padding-top:calc(clamp(64px,7vh,76px) + var(--k-bleed-top, 0px)); } #screenStart .kHeroTitle{ font-size:clamp(1.9rem,3.2vw,2.5rem) } #screenStart .kHeroLead{ font-size:.98rem } #screenStart .kHeroActions .kBtn{ min-height:44px } #screenStart .kLogin{ padding:13px 14px 14px } } /* gap e padding enxutos de propósito: esta é a tela de LOGIN do site, e o formulário precisa caber na primeira tela num notebook de 900px de altura. Na primeira medição o botão "Entrar agora" caía abaixo da dobra. */ #screenStart .kHeroLeft{ display:flex; flex-direction:column; justify-content:center; gap:18px; /* o topo soma o que a margem negativa do hero tirou, senão a etiqueta "Editores verificados" encostaria na borda da janela. A esquerda usa --k-wrap-x (medido em JS: onde começa o .kWrap das outras seções), de modo que o título do hero nasce na mesma linha vertical que "Três motivos" e "Quem passa o dedo". Antes era max-width + margin-left:auto, que em 1920px empurrava o bloco 41px para fora do alinhamento e deixava 261px de fundo cru à esquerda. */ padding:calc(clamp(76px,9vh,96px) + var(--k-bleed-top, 0px)) clamp(20px,3.4vw,44px) clamp(28px,4vh,40px) var(--k-wrap-x, calc(var(--k-gut) + var(--k-bleed))); } #screenStart .kHeroTag{ display:inline-flex; align-items:center; gap:8px; align-self:flex-start; padding:6px 12px; border:1px solid var(--k-gold-line); border-radius:100px; background:var(--k-gold-weak); color:var(--k-gold-ink); font-size:.73rem; font-weight:800; letter-spacing:.02em; } #screenStart .kHeroTag i{ width:6px; height:6px; border-radius:50%; background:var(--k-gold); display:block } /* O app.js reescreve este h1 com a frase rotativa, no formato frase
Karameloo. Por isso o estilo mora nessas classes — um meu seria apagado pelo JS. */ /* A frase rotativa muda de comprimento a cada troca. Reservar espaço só no h1 (min-height) não resolvia: quando a frase passava de 2 para 3 linhas o bloco crescia 111px e empurrava os botões para baixo — medido. A altura é travada parte por parte, cada uma com espaço para o seu pior caso. */ #screenStart .kHeroTitle{ font-size:clamp(2.2rem,4.4vw,3.4rem); line-height:1.08; } /* 2 linhas fixas: cabe a frase mais longa ("Quem edita para viralizar está no") nesta largura de coluna, e as curtas não encolhem o bloco. É `block`, não `inline-block`, porque inline-block só reserva a altura do próprio conteúdo — a linha de baixo continuava subindo quando a frase encurtava. */ /* O !important não é preguiça: existe `.kmlHeroTitle .heroSwap{display:inline !important}` em outra folha, e elemento inline IGNORA height — era por isso que nenhuma reserva de altura funcionava e o bloco pulava 128px. */ #screenStart .kHeroTitle .heroSwap{ display:flex !important; height:2.3em !important; /* o espaço reservado que sobra fica ACIMA, para uma frase de uma linha encostar em "Karameloo" em vez de flutuar longe dela. A folga extra (2.3em em vez de 2.16em) é para o cursor de digitação, que ao cair numa terceira linha empurrava o texto por cima da etiqueta. O overflow é a rede: se transbordar, corta — nunca sobrepõe o que está acima. */ align-items:flex-end; align-content:flex-end; flex-wrap:wrap; overflow:hidden; color:var(--k-ink) !important; transition:opacity .3s ease, transform .3s ease; } /* Especificidade reforçada de propósito: existe um