.skip { position: fixed; z-index: 30; left: 12px; top: -80px; background: #eee9df; color: #111; padding: 12px; } .skip:focus { top: 12px; } /* P0-2 — o bloco `.core` daqui competia com style.css e com core-fix.css por !important, e quem vencia era decidido pela ordem de injeção do JS. Agora o núcleo é governado só por core-fix.css, carregado no . */ /* P1-6 — o terracota agora só existe como PREENCHIMENTO de CTA, e o rótulo é sempre a tinta #160b07 (4,55:1 sobre #be6041). Antes o `.cta` era um contorno em currentColor: sobre o campo terracota da `.beta` ele desaparecia, e em toda seção ele empatava em contraste com o corpo de texto ao redor. */ .cta { display: inline-block; margin-top: 18px; padding: 13px 17px; background: #be6041; color: #160b07; /* A borda NÃO acompanha o preenchimento. Sobre a areia da `.noise` (#c9c0b3) um botão #be6041 sem contorno próprio mede 2,36:1 de LIMITE — abaixo do 3:1 que a WCAG 1.4.11 pede para a borda de um controle, e o botão perde o contorno. #8f4530 devolve 3,81:1 ali e não atrapalha nos campos escuros, onde quem define o limite já é o próprio preenchimento. */ border: 1px solid #8f4530; text-decoration: none; font-size: var(--fs-cta); letter-spacing: 0.08em; } /* HOS-792 · OPÇÃO CONSERVADORA A (decisão vinculante do Founder, 02/08). A régua DEC-5R B1→B2 mede a CAIXA INTEIRA do hero. O preenchimento terracota do P1-6 aplicado ao CTA do hero era o ÚNICO delta de pixel da transição (0,9444% em 1440 · 2,4327% em 390, todo ele fora da banda, contra orçamento E2 de ≤0,1%) — o desenho de convergência não sofreu nada (dentroBanda = 0). Aqui o CTA do hero volta ao estado B1 medido: preenchimento nenhum e contorno em currentColor, que em B1 computa rgb(170,161,154) nos dois viewports. A caixa não muda (301,7×45,6 em 1440 · 253,4×42,4 em 390 nas duas pontas), então a reversão é de tinta, não de geometria. O P1-6 segue de pé em toda seção fora do hero — o escopo é `somente o CTA Entrar no Beta` do hero, como ordenado. */ .hero .cta { background: none; color: inherit; border-color: currentColor; } /* P1-6 — a `.auto` é a última seção antes do campo terracota da `.human`, e o seu CTA final divide a tela com aquele campo em três posições de rolagem (medido: y=5700/6000/6300 em 1440x900). É a MESMA regra que a `.beta` já obedece — quem divide o olho com o campo terracota cede o terracota — e aqui ela ainda SOBE o contraste do CTA: 11,6:1 em areia contra 4,4:1 em terracota. O rótulo continua em tinta #160b07. */ .auto .cta { background: #eee9df; border-color: #eee9df; color: #160b07; } /* CTA secundário — contorno, nunca preenchido. É o que garante o aceite "o CTA primário é o de maior contraste da seção": o de baixo tem que ceder. */ .steps a:not(.cta) { display: inline-block; padding: 13px 17px; border: 1px solid #ffffff40; color: #aaa19a; text-decoration: none; font-size: var(--fs-cta); letter-spacing: 0.08em; } /* REV18 · P1 — as regras da `.hero-sample` (rev16 e rev17) saíram junto com o markup. Não sobra seletor órfão nem estado preso para um elemento que não existe mais. */ .lead { max-width: 860px; font-size: var(--fs-d3); line-height: 1.25; } /* REV19 — a `.div.prose` saiu do DOM com o corte da .noise para 3 blocos (C2). As duas regras que só serviam a ela foram removidas para não deixar CSS órfão apontando para um seletor que não existe mais. */ .agents { padding: 14vh 4vw; background: #eee9df; color: #111; } .agents > h2 { max-width: 1100px; } .events article p { line-height: 1.55; } /* P1-4 — o nome do imóvel media 14px: MENOR que o corpo (16px), invertendo a escala justamente onde ela precisa agrupar. Passa a usar o degrau D3 global (clamp(17px,1.25vw,20px)), que é o aceite "h3 > corpo". */ .events h3 { color: #3a332c; font-size: var(--fs-body); } .controls { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #ffffff25; /* P2-5 — a margem de 60px abria um vão que PARTIA a espinha em três tocos. O respiro passa a vir do padding dos `.step`, e a coluna da espinha vira uma calha de 46px à esquerda. Markup intocado. */ margin: 0 0 0 46px; } .controls article { padding: 30px; border-right: 1px solid #ffffff25; } .controls h3 { color: #d87859; } .controls p { line-height: 1.55; } /* P2-5 — ESPINHA CONTÍNUA dos três `.step` (contraproposta de DEC-4). * * Os três passos eram três blocos com `border-top` e nada os ligava: a leitura * era "três avisos", não "uma sequência". Entre o passo 1 e o passo 2 mora a * grade `.controls`, que é IRMÃ dos passos, não filha — não dá para desenhar a * linha dentro de um só elemento sem mexer no markup, e mexer no markup está * vetado. * * A saída: cada caixa da sequência (os três `.step` E a `.controls`) desenha o * seu PRÓPRIO segmento de 1px na mesma calha. Como as caixas são adjacentes e * não há margem entre elas, os segmentos se encostam e leem como uma linha só. * A linha termina no nó do passo 3 em vez de vazar para o CTA. */ .step { font-size: var(--fs-d3); border-top: 1px solid #ffffff25; padding: 24px 0; position: relative; margin: 0 0 0 46px; } /* P2-7 — `--desenho` é a fração da espinha já traçada. O VALOR INICIAL É 1: sem JS, sob reduced-motion ou se o pacote de movimento falhar, a espinha nasce inteira. Quem a apaga para depois desenhá-la é o motion.js, e só depois de o guarda autorizar. É a regra 5 do guarda em uma linha de CSS. */ @property --desenho { syntax: ""; initial-value: 1; inherits: false; } .step::before, .controls::before { content: ""; position: absolute; left: -37px; top: 0; bottom: 0; width: 1px; background: linear-gradient( #ffffff2e calc(var(--desenho, 1) * 100%), transparent 0 ); } .controls { position: relative; } /* O nó: só os passos recebem, a `.controls` é trecho de passagem. */ .step::after { content: ""; position: absolute; left: -41px; top: 26px; width: 9px; height: 9px; border-radius: 50%; background: #be6041; } /* `.step + .step` casa SÓ com o passo 3 (o passo 2 é precedido pela `.controls`). É onde a espinha para. */ .step + .step::before { bottom: auto; height: 31px; } .human p { max-width: 700px; line-height: 1.65; } .beta form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1000px; margin-top: 50px; } .beta label { display: grid; gap: 8px; font-size: var(--fs-label); } /* P1-6 — o campo da `.beta` virou #1a0f0a; a borda #160b07 e o botão #160b07 ficariam INVISÍVEIS sobre ele. O input passa a contornar em areia e o botão assume o preenchimento terracota com rótulo em tinta: é o elemento de maior contraste da seção, que é exatamente o que o aceite pede. */ .beta input { min-height: 48px; border: 1px solid #eee9df66; background: transparent; color: #eee9df; padding: 12px; font: inherit; } .beta input:focus-visible { outline: 2px solid #e5926f; outline-offset: 2px; } .beta button { min-height: 48px; border: 1px solid #be6041; background: #be6041; color: #160b07; padding: 12px; font: inherit; letter-spacing: 0.08em; cursor: pointer; } .beta form > p { grid-column: 1/-1; } .faq { padding: 10vh 4vw; background: #ded8ce; color: #111; } .faq details { max-width: 1000px; border-top: 1px solid #111; padding: 24px 0; } .faq summary { font-size: var(--fs-d3); cursor: pointer; } .faq p { max-width: 760px; line-height: 1.7; } /* P2-6 — transição de altura no `
` NATIVO via `grid-template-rows`. * * `
`/`` não se troca por div e Radix está fora, então a * altura anima em `::details-content` — a única caixa que o UA nos dá — com * 0fr -> 1fr. `content-visibility` entra como propriedade discreta, senão o * conteúdo fechado nunca chega a existir para transicionar. * * TUDO ISTO MORA ATRÁS DE `html.movimento`, que é o guarda. Sem JS, sob * `prefers-reduced-motion: reduce` ou com a aba oculta, a classe não existe e * o `
` volta a ser 100% nativo: abre instantâneo, sem estado colapsado * preso no CSS. É a regra 5 do guarda — o estado inicial não mora aqui. */ html.movimento .faq details::details-content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.32s ease, content-visibility 0.32s; transition-behavior: allow-discrete; } html.movimento .faq details[open]::details-content { grid-template-rows: 1fr; } html.movimento .faq details p { min-height: 0; overflow: hidden; } .faq summary:focus-visible { outline: 2px solid #be6041; outline-offset: 3px; } .close { min-height: 80vh; padding: 15vh 4vw; display: grid; align-content: center; } .close h2 { max-width: 1100px; } .close p { font-size: var(--fs-lead); } @media (max-width: 760px) { /* REV18 · P1+P3 — os 1120px de piso do hero em 390 foram dimensionados para caber o readout (182px de caixa) ABAIXO do CTA e ainda deixar o núcleo em 72% com os rótulos no rodapé. Com o readout fora, aqueles 182px viravam preto liso na parte de baixo do hero — o mesmo defeito do print 1. O piso cai para 900px, que é o que a composição precisa: o CTA fecha em ~540px e o núcleo (centro em 72%, raio 63) começa em ~585px. A geometria do desenho de convergência é percentual, então ela acompanha e nada desalinha. */ .hero{min-height:900px}.tag{visibility:hidden} .controls, .beta form { grid-template-columns: 1fr; } .controls article { border-right: 0; border-bottom: 1px solid #ffffff25; } .agents, .faq, .close { padding: 100px 22px; } /* P1-2 — em 390px o padding lateral de 24px do artigo somava 48px à margem de 44px da seção e derrubava a medida para ~33 caracteres. Zerado na horizontal, a linha volta a passar de 45. */ .events article { padding: 22px 0; min-height: 0; } /* P2-5 — a calha de 46px come 12% da largura em 390px. Some para 26px. */ .step, .controls { margin-left: 26px; } .step::before, .controls::before { left: -19px; } .step::after { left: -23px; } .hero .copy { max-width: 100%; } .hero .copy p { max-width: 300px; } /* REV20 · o override de tamanho saiu: `--fs-cta` ja governa o componente inteiro em todas as larguras. O que sobrava aqui era duplicata. */ } /* ========================================================================== HOS-780 · rev17 — correções do BRIEF VINCULANTE DO FOUNDER (02/08/2026). Seis itens reprovados, seis correções. Nenhuma palavra da rev16 se move: o copy-guard compara o multiconjunto de palavras do FONTE e continua OK. ========================================================================== */ /* -------------------------------------------------------------------------- REV18 · P1 · HERO — o readout saiu inteiro (markup + estilo + estado). A rev17 tentou salvar aquelas duas linhas dando-lhes a forma de um "readout do núcleo", com nó terracota e acendimento sincronizado com o pulso do fluxo. O Founder reprovou o CONTEÚDO, não a forma: evento operacional de imóvel não pertence ao hero. Então não sobrou nada para estilizar — o bloco F-1 inteiro foi retirado em vez de neutralizado, para não deixar regra morta no arquivo. O hero é agora, e só: rótulo do beta · h1 da tese · a frase do "eles agem" · CTA · o desenho de convergência (canvas + núcleo + rótulos dos quatro fluxos), que é a parte do hero que o Founder nunca reprovou. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- F-2 · "Exemplo de rotina do dia a dia fica sem contexto algum. Não está interativo nem explicativo." Três defeitos somados: (a) os cartões 2 e 4 não nomeavam o imóvel, então o par não lia; (b) nada dizia que os quatro eventos são O MESMO DIA; (c) não havia o que operar. Correção: uma LINHA DO TEMPO única, com eixo visível, o nome do imóvel valendo para o par inteiro, e cada evento navegável por clique e por teclado. Sem JS os quatro continuam abertos. -------------------------------------------------------------------------- */ .events { position: relative; border-top: 0; margin-top: 8vh; } /* o eixo do dia, contínuo sob os quatro eventos */ .events::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, #11111138, #111111d9 12%, #111111d9 88%, #11111138); } .events article { position: relative; min-height: 0; padding: 34px 26px 30px; border-left: 0; background: none; transition: background 0.3s ease, opacity 0.3s ease; } @media (prefers-reduced-motion: reduce) { .events article { transition: none; } } /* o nó de cada evento, sobre o eixo */ .events article::before { content: ""; position: absolute; left: 26px; top: -4px; width: 9px; height: 9px; border-radius: 50%; background: #c9c0b3; border: 1px solid #111; transition: background 0.3s ease, transform 0.3s ease; } @media (prefers-reduced-motion: reduce) { .events article::before { transition: none; } } /* AGRUPAMENTO POR IMÓVEL — o que faltava. O primeiro evento de cada imóvel abre um campo; o segundo o continua. A divisória forte cai só na TROCA de imóvel, então o olho lê "dois imóveis, dois momentos cada". */ .events article[data-imovel="a"] { background: #1111110d; } .events article[data-seq="3"] { border-left: 1px solid #11111159; } .events article[data-seq="2"], .events article[data-seq="4"] { border-left: 1px dotted #00000030; } /* o cartão sem

herda o nome do imóvel do par: a faixa continua reservada (P1-2 segue de pé) e recebe um traço que diz "mesmo imóvel, mais tarde". */ .events article:not(:has(h3)) > time::before { content: ""; display: block; width: 22px; height: 1px; background: #11111159; margin-bottom: 13px; } .events h3 { color: #1a1a1a; } .events time { color: #111; transition: color 0.3s ease; } /* ESTADO NAVEGADO — o app.js promove cada artigo a passo. O evento em foco fica em contraste pleno; os demais recuam, sem nunca sair da legibilidade (opacidade mínima 0,62 sobre areia = corpo ainda acima de 4,5:1). */ .events[data-navegando] article { opacity: 0.62; } .events[data-navegando] article.ativo { opacity: 1; background: #11111114; } .events[data-navegando] article.ativo::before { background: #be6041; transform: scale(1.35); } .events article[tabindex] { cursor: pointer; } .events article[tabindex]:focus-visible { outline: 2px solid #be6041; outline-offset: -2px; } /* os agentes citados viram figura dentro do texto: é o que torna o bloco EXPLICATIVO — dá para ver quem passou o quê para quem. */ .events article p strong { font-weight: 500; color: #7a3220; } /* -------------------------------------------------------------------------- REV18 · P4 · "O foco para a hospedagem voltar a ser humana" — a hierarquia tipográfica refeita como SISTEMA. O que a rev17 fez de errado, medido no computado da URL viva: · `.human h2 em` ficou IDÊNTICO ao h2 (63,36px / 250 / #160b07 / sem decoração). Ou seja: a frase de impacto perdeu 100% da evidência. Foi exatamente a leitura do Founder — "resolveu apagando a ênfase". · A escala prometida na entrega ("72 → 26 → 17, monotônica") não é a que renderiza. Na ORDEM DE LEITURA o DOM é h2 → p → p.lead, então o que o olho recebe é 63 → 17 → 26: o último bloco SOBE de novo e volta a se apresentar como um segundo título. O defeito que a rev17 dizia ter corrigido continuava lá, só que uma casa adiante. · Três tratamentos disputando no mesmo campo: display 250 com ls -0,065em, corpo 400 com ls normal, e um lead de 26px com barra de 2px à esquerda. Família única, mas três lógicas — é a "mistura aleatória". O SISTEMA DA REV18. Três níveis, um eixo só, nada além disto: N1 · título display, peso 250, ls -0,03em — a entrada N2 · frase de impacto display, peso 250, ls -0,062em — DOMINANTE N3 · apoio texto, peso 400, ls 0 — os dois parágrafos Duas regras que o sistema obedece e que a rev17 violava: (a) A EVIDÊNCIA DA FRASE DE IMPACTO VEM DE ESCALA E DE LINHA PRÓPRIA, não de peso, não de família, não de decoração e não de cor. Peso 250→400 em corpo grande lê como outra fonte (o Founder já disse). Traço lê como hyperlink (já testado duas vezes e reprovado). Cor terracota sobre o degradê mede 2,10:1 e reprova em contraste. Escala é o único eixo livre — e é o mesmo eixo que a página inteira já usa em D1 > D2 > D3. O `` ganha linha própria e o maior corpo da seção; o título recua um degrau e vira a entrada dele. A dominante fica óbvia em desktop e em mobile. (b) O APOIO É UM NÍVEL SÓ. Os dois parágrafos passam a ter o MESMO corpo, o mesmo peso, a mesma entrelinha e a mesma medida. O parágrafo de fecho não sobe de escala para se destacar — ele se destaca por ESPAÇO, que é composição e não tipografia. Assim a escala nunca mais volta a subir no fim da leitura, e não há um quarto tratamento competindo. A barra de 2px do lead saiu: era o único ornamento da seção e era mais uma voz na mistura. A tinta continua #160b07 em tudo — já medida em 4,58:1 na ponta #bf6041 do degradê e 9,54:1 na ponta #d9ae87, passa nas duas, e os níveis 1 e 2 ainda são texto grande, onde o piso da WCAG é 3:1. -------------------------------------------------------------------------- */ .human { min-height: 0; padding: 16vh 4vw; } /* N1 · título — a entrada da frase de impacto, UM degrau abaixo dela. O degrau é 1,86× (41,8 -> 77,8 em 1440; 24 -> 40 em 390), que é a mesma ordem de grandeza do salto D1/D2 que a página já pratica (100,8/63,4 = 1,59). Um degrau maior faria o título ler como legenda, não como entrada. `max-width` em px porque `ch` aqui se mede contra o corpo do PRÓPRIO h2: em 20ch a entrada quebrava em duas linhas ("Tecnologia para que a / hospedagem") e devolvia à seção o ar de composição acidental que era o defeito. */ .human h2 { max-width: 640px; font-size: var(--fs-d3); line-height: 1.1; letter-spacing: -0.03em; font-weight: 250; color: #160b07; margin: 0 0 7vh; } /* N2 · frase de impacto — DOMINANTE. Linha própria e o maior corpo da seção. `font-weight` declarado de propósito: o `style.css` ainda traz `.human h2 em{font-weight:400}`, e é justamente esse salto de peso que o Founder rejeitou. Aqui ele é anulado sem editar a folha antiga. */ .human h2 em { display: block; font-style: normal; font-weight: 250; font-size: var(--fs-d1); line-height: 0.92; letter-spacing: -0.062em; color: #160b07; text-decoration: none; margin-top: 0.14em; max-width: 13ch; } /* N3 · apoio — UM nível. Os dois parágrafos são o mesmo tratamento; o que separa o fecho é espaço, não escala. */ .human p, .human .lead { /* 60ch media 765px em 1440 — mais LARGO que os 640px do título, e o apoio passava a correr numa linha maior que a da dominante. 46ch devolve 586px (~60 caracteres, dentro da faixa de leitura) e mantém a medida do apoio abaixo da medida do título, que é a mesma hierarquia dita em escala. */ max-width: 46ch; font-size: var(--fs-body); line-height: 1.65; letter-spacing: 0; font-weight: 400; color: #160b07; margin: 0; padding-left: 0; border-left: 0; } .human .lead { margin-top: 2.6em; } /* -------------------------------------------------------------------------- F-4 · "Não há mudança perceptível entre assistido e autônomo; o usuário fica perdido e sem nexo." Era literalmente duas palavras em negrito, uma ao lado da outra, e as duas frases de estado empilhadas embaixo sem dizer a qual posição pertenciam. Agora o par É o controle, e trocar de posição TROCA O CARTÃO: muda a tinta do campo, muda a borda, muda qual frase está em contraste pleno e muda a marca do estado. As duas frases seguem no DOM e ambas visíveis — a que não está selecionada recua, o que deixa a diferença comparável lado a lado em vez de escondida. É a seção que a copy chama de "decisão por agente": não há chave global, só três controles independentes. -------------------------------------------------------------------------- */ .controls { border: 0; gap: 14px; grid-template-columns: repeat(3, 1fr); } .controls article { border: 1px solid #ffffff1f; border-right: 1px solid #ffffff1f; padding: 26px 24px 24px; background: #ffffff05; transition: background 0.3s ease, border-color 0.3s ease; } @media (prefers-reduced-motion: reduce) { .controls article { transition: none; } } .controls article[data-modo-ativo="autonomo"] { background: #be60411f; border-color: #be604173; } .controls h3 { margin: 0 0 18px; } /* o controle segmentado */ .modos { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0 0 20px; padding: 4px; border: 1px solid #ffffff26; border-radius: 999px; background: #00000038; } .modos strong { display: block; padding: 9px 4px; border-radius: 999px; text-align: center; font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.06em; /* #a49a92 media 1,63:1 dentro da pílula escura — o rótulo não selecionado era praticamente invisível, e ele é METADE do controle. */ color: #b9b0a8; transition: background 0.25s ease, color 0.25s ease; } @media (prefers-reduced-motion: reduce) { .modos strong { transition: none; } } /* o app.js promove os a radio: só então eles viram alvo de clique. */ .modos strong[role="radio"] { cursor: pointer; } .modos strong[aria-checked="true"] { background: #eee9df; color: #160b07; } .controls article[data-modo-ativo="autonomo"] .modos strong[aria-checked="true"] { background: #be6041; color: #160b07; } .modos strong:focus-visible { outline: 2px solid #e5926f; outline-offset: 2px; } /* as duas frases de estado */ .controls article p[data-estado] { position: relative; margin: 0; padding: 11px 0 11px 20px; font-size: var(--fs-note); line-height: 1.5; /* MEDIDO: #8b827b dava 3,52:1 sobre o campo composto da `.auto` — reprova. A posição NÃO selecionada precisa recuar sem sair da legibilidade, porque ela continua sendo texto que o visitante lê para COMPARAR as duas posições. #a9a099 mede 5,46:1 e ainda fica claramente atrás do #eee9df da selecionada. */ color: #a9a099; transition: color 0.3s ease; } @media (prefers-reduced-motion: reduce) { .controls article p[data-estado] { transition: none; } } .controls article p[data-estado]::before { content: ""; position: absolute; left: 0; top: 17px; width: 9px; height: 1px; background: currentColor; } /* a frase da posição selecionada: contraste pleno e marca terracota */ .controls article[data-modo-ativo="assistido"] p[data-estado="assistido"], .controls article[data-modo-ativo="autonomo"] p[data-estado="autonomo"] { color: #eee9df; } .controls article[data-modo-ativo="assistido"] p[data-estado="assistido"]::before, .controls article[data-modo-ativo="autonomo"] p[data-estado="autonomo"]::before { width: 13px; height: 3px; top: 16px; background: #e5926f; } /* -------------------------------------------------------------------------- REV18 · P2 + P3 · ORQUESTRADOR — o desenho saiu e o vão morto foi fechado. P2 — as regras da `.rota` (figura, traços, nós, brasa) saíram junto com o markup. Nenhuma ornamentação entra no lugar: a instrução foi "se o bloco funcionar apenas com texto e composição, priorizar clareza e ritmo". P3 — a rev17 sustentava a coluna da direita com ALTURA DECLARADA. Em 390px `style.css` dava `.steps article{min-height:340px}` para DUAS caixas: a primeira tinha 160px de texto em 340px de caixa (180px mortos) e a segunda, 187px de botões em 340px (152px mortos). Somados aos 300px da figura, eram ~630px de preto liso — a viewport vazia do print do Founder. A altura passa a ser ditada pelo conteúdo, e o respiro vem de padding declarado em px, que não infla com a viewport. Nenhuma caixa desta seção volta a ter altura mínima. -------------------------------------------------------------------------- */ .steps > article { min-height: 0; } .steps .acoes { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; padding: 34px 3vw; } .steps .acoes .cta { margin-top: 0; } /* -------------------------------------------------------------------------- NÃO era defeito. Eu suspeitei que o h2 da `.auto` nascia por baixo da faixa fixa de 64px e MEDI antes de "corrigir": navegando pelo link "Quero operar assim" e esperando a rolagem estabilizar, o topo do h2 fica em 268px contra 64px do rodapé do header em 1440, e 260 contra 64 em 390. Folga real, nos dois viewports. O corte que eu tinha visto era artefato do MEU instrumento (`scrollIntoViewIfNeeded` ignora `scroll-margin-top`), não da página. A folga de 12px fica como margem de segurança; não conta como correção. -------------------------------------------------------------------------- */ .auto > h2 { margin-top: 0; padding-top: 12px; } @media (max-width: 760px) { .events { margin-top: 6vh; } .events article { padding: 30px 0 26px 22px; } .events article::before { left: 0; } .events article[data-seq="3"], .events article[data-seq="2"], .events article[data-seq="4"] { border-left: 0; } /* em coluna única a divisória vertical não agrupa nada: o campo faz o trabalho, e a troca de imóvel ganha uma régua horizontal. */ .events article[data-seq="3"] { border-top: 1px solid #11111159; margin-top: 18px; } /* MEDIDO: sem esta linha a `.controls` vazava 234px para fora da viewport em 390. A regra móvel original (`.prose,.controls,.beta form{1fr}`) vem ANTES deste bloco no arquivo, e o meu `repeat(3,1fr)` fora de media query a sobrescrevia — media query não acrescenta especificidade, quem vence é a ordem. A coluna única é redeclarada aqui, depois. */ .controls { grid-template-columns: 1fr; gap: 12px; } .controls article { border-bottom: 1px solid #ffffff1f; } /* alvo de toque: 9px de padding davam 35px de altura, abaixo dos 44 que a WCAG 2.5.5 pede para um controle operado com o dedo. */ .modos strong { padding: 14px 4px; } .human { padding: 110px 22px; } /* O sistema de três níveis vale igual em 390: a dominante continua sendo a frase de impacto, com folga de escala sobre o título (40 vs 23) e sobre o apoio (40 vs 17). A medida cai para a coluna inteira, não a hierarquia. */ .human h2 { max-width: 100%; margin-bottom: 34px; } .human h2 em { max-width: 100%; } .human p, .human .lead { max-width: 100%; } /* REV18 · P3 — a coluna de conclusão do Orquestrador em 390. O respiro vem daqui, em px, e não de `min-height`: é o que impede a caixa de crescer para além do que ela tem para dizer. */ .steps > article { padding: 0; } .steps > article p { padding: 30px 0; } .steps .acoes { padding: 28px 0; } } /* ========================================================================== HOS-780 · REV19 — comentário do Founder de 02/08/2026 20:21. Nova versão; a rev18 NÃO foi sobrescrita (segue viva e intacta em :8241). Aqui só entram os itens 2 e 4, que são correção NUMÉRICA de elementos que já existem. Os itens 7 (gráfico do Orquestrador) e 9 (ícones dos agentes) pedem ATIVO NOVO e não estão aqui: geração de ativo visual é do Open Design, que está com AGENT_AUTH_REQUIRED. Não desenhei à mão para não repetir o gráfico ornamental que ele já reprovou uma vez. ========================================================================== */ /* REV19 · F4 — "A fonte da Hero está MUITO GRANDE na versão WEB, a página Hero está GIGANTE. A hierarquia do tamanho da fonte na Hero está ruim. A Sub-Hero parece sujeira." Diagnóstico medido: o `h1` era clamp(52px,7vw,116px) = 100,8px em 1440. E o sub-hero `.copy p` NÃO TINHA font-size nenhum — herdava os 16px do body. Ou seja: 101px caindo direto em 16px cinza, sem degrau intermediário. Não era impressão dele; o segundo nível de leitura literalmente não existia. */ .copy h1 { font-size: var(--fs-d1); } /* O degrau que faltava. Em 1440 dá 21,6px entre o h1 (77,8px) e o CTA (13px): lendo na ORDEM DO DOM a escala agora cai monotonicamente e não volta a subir. Sobe também o tom: #aaa19a era apoio, #c6bdb2 é segundo nível. */ .hero .copy p { font-size: var(--fs-lead); line-height: 1.55; color: #c6bdb2; max-width: 520px; } /* A caixa do hero encolhe junto — era max(100svh,700px) com até 150px de respiro em cima e embaixo, o que empurrava o CTA para fora da primeira dobra em telas de notebook. */ .hero { min-height: max(88svh, 620px); padding: clamp(64px, 10vh, 110px) 4vw; } /* REV19 · F2 — "Botão do Hero CTA precisa estar com mais impacto e parecer mais um botão clicável, está com pouco contraste." REGISTRO IMPORTANTE: o contraste baixo não era descuido. Veio do HOS-792 "Opção Conservadora A", decisão VINCULANTE do próprio Founder em 02/08, que mandou o CTA do hero voltar a contorno sem preenchimento (currentColor = rgb(170,161,154)) porque o preenchimento era o único delta da régua DEC-5R. O comentário de agora REVERTE aquela decisão. Estou cumprindo a ordem nova e deixando a anterior nomeada, porque ela foi dele e não minha. */ .hero .cta { background: #be6041; color: #160b07; border-color: #8f4530; padding: 16px 26px; font-weight: 500; box-shadow: 0 1px 0 #00000040; transition: background 0.18s ease; } .hero .cta:hover { background: #d0704e; } .hero .cta:focus-visible { outline: 2px solid #f2ece4; outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .hero .cta { transition: none; } } /* O override de 390px mandava o CTA do hero para 9px — que é menor que o corpo e é parte do "não parece clicável". Sobe para 12px e mantém área de toque. */ @media (max-width: 760px) { .hero .cta { padding: 15px 22px; } } /* REV19 — efeito colateral do corte da .noise para 3 blocos (C2 do Landing Page): o último parágrafo morava dentro da `.prose`, que era um grid de 3 colunas e portanto lhe dava medida. Com a `.prose` fora do DOM ele passou a sangrar a largura inteira — medido em 1.170px de linha em 1440, muito além da medida legível. Recebe a mesma medida do `.lead` da seção. */ .noise > p { max-width: 860px; line-height: 1.65; } /* ========================================================================== REV20 · ITEM 3 DO FOUNDER — "não foi modificado nada da secção do agente orquestrador". Ele tem razão, e o motivo de ela ter ficado parada é que a rev18 tirou o diagrama e não colocou hierarquia no lugar — só texto. Medido na rev19, em 1440x900, dentro da própria seção: • o h2 "Um Orquestrador que conecta..." 63,4px • o parágrafo do argumento (.sticky p) 16px • a CONCLUSÃO (.steps article p) 16px Ou seja: a seção que explica o mecanismo central do produto entregava o seu desfecho no MESMO tamanho do corpo de apoio, e mais claro que ele em nada. Não existia terceiro nível — existiam um título grande e dois blocos de 16px. Somado a isso, a coluna da direita terminava em y≈360 numa seção de 704px: ~340px de preto liso no canto inferior direito, o mesmo defeito que o Founder já tinha reprovado no bloco anterior. O que NÃO entra: nenhum desenho, nenhuma figura, nenhum ícone, nenhum nó pontilhado. A ordem da rev18 continua valendo — "se o bloco funcionar apenas com texto e composição, priorizar clareza e ritmo". Isto aqui é composição: a conclusão sobe para o degrau D3 e passa a ser a coisa mais clara da coluna, que é o papel que ela sempre teve no argumento e nunca teve no render. Nenhuma palavra da copy muda. ========================================================================== */ /* O argumento deixa de ser 16px órfão (nenhum degrau da escala valia 16) e assume o corpo de leitura da página, no tom de segundo nível que o hero da rev19 já tinha adotado. */ .orq .sticky p { font-size: var(--fs-body); color: #c6bdb2; } /* A conclusão. Sobe de 16px para D3 e troca #aaa19a por #eee9df: passa a ser figura, não rodapé do argumento. O peso 250 é o mesmo do display da página — ela lê como desfecho, não como um segundo título competindo com o h2, que continua quase o dobro (63,4px contra 34,5px em 1440). */ .orq .steps > article p { font-size: var(--fs-d3); color: #eee9df; font-weight: 250; line-height: 1.15; letter-spacing: -0.03em; max-width: 20ch; } /* As duas colunas não partiam de lugar nenhum em comum: a régua da direita nascia em 126px (topo do padding) e a maiúscula do h2 só aparecia ~61px abaixo. A causa não era decorativa — o h2 carregava a margem PADRÃO do user-agent (0,83em ≈ 52px), a única margem de bloco desta seção que nunca foi declarada. Zerada, as duas colunas partem da mesma linha. */ .orq .sticky h2 { margin-top: 0; } .orq .steps > article:first-child { margin-top: 0; } @media (max-width: 760px) { /* Em coluna única a conclusão não precisa de medida curta: a largura da tela já limita, e 20ch deixaria a linha curta demais. */ .orq .steps > article p { max-width: none; } .orq .steps > article:first-child { margin-top: 0; } } /* ========================================================================== REV21 · os dois itens do comentário do Founder de 03/08. ========================================================================== */ /* -------------------------------------------------------------------------- ITEM 1 · "O bloco do orquestrador ainda está bem ruim! Ele não explica o que é de forma simples além de possuir muito texto! Um gráfico consegue explicar de forma mais simples, como por exemplo o da Jurny." A seção deixa de ser duas colunas de texto. Vira três faixas de largura cheia: o título, o GRÁFICO e o desfecho com as ações. O parágrafo não foi encurtado — ele virou os rótulos dos nós, que é a única forma de tirar o "muito texto" sem tocar em copy congelada. -------------------------------------------------------------------------- */ .orq { display: grid; grid-template-columns: 1fr; align-items: start; gap: 8vh; } /* o `position:sticky` existia para o h2 acompanhar a rolagem da coluna vizinha. Não há mais coluna vizinha: em faixa cheia o sticky só faria o título flutuar sobre o gráfico. */ .orq .sticky { position: static; top: auto; padding-right: 0; max-width: 15ch; } /* REV27 · ITEM 2 do Founder (03/08 14:52): "O bloco do Orquestrador em tom escuro dificulta a leitura e visualização do Gráfico." O sintoma é real; a causa não é o tom da seção. Amostrado no pixel renderizado (não no token — o fundo aqui é degradê, e sonda que lê `background-color` do pai devolve o preto do body e mente): anel dos discos de agente ......... 1,46:1 ← estrutura anel do núcleo .................... 1,49:1 ← estrutura fios pontilhados .................. 1,69:1 ← estrutura ponto dos passos .................. 4,21:1 ← estrutura, JÁ passava ícones dentro dos discos .......... 6,94:1 símbolo do núcleo ................ 16,73:1 rótulos ................... 10,87 a 16,66:1 Tudo que NOMEIA está desenhado; tudo que CONECTA está apagado. Num diagrama de orquestração o que carrega a tese é a ligação, não o substantivo — o leitor recebia os nós e perdia a sintaxe. O `.no-ponto` a 4,21:1 é a prova de que isto era inconsistência de tinta, não escolha uniforme: o mesmo desenho já tinha um elemento no valor certo. Piso: 3:1 (WCAG 1.4.11, objeto gráfico que carrega significado). O plano do painel sobe um passo — responde ao "tom escuro" sem clarear a SEÇÃO, que continua preta: clarear a seção a aproximaria da `.auto` (#302b26) e apagaria a fronteira entre as duas. */ .fluxo { margin: 0; padding: clamp(32px, 3.4vw, 52px) clamp(24px, 3vw, 46px); border: 1px solid #ffffff2e; border-radius: 18px; /* A faixa do degradê é estreita de propósito. Os discos precisam de um halo opaco para mascarar o fio pontilhado que passa por trás deles; um halo é uma cor só, então se o chão variasse muito o halo viraria um anel escuro visível em volta de cada nó. Extremos a 1,08:1 entre si — o halo `--chao` encosta nos dois sem aparecer. */ background: radial-gradient(120% 140% at 8% 50%, #20140e 0%, #130f0c 58%); } /* premissa e fecho são a moldura de leitura do gráfico: mesma tinta, mesmo corpo, um acima e um abaixo. Nada de escala nova — os dois usam o corpo de leitura da página. */ .fluxo-premissa, .fluxo-fecho { margin: 0; max-width: 52ch; font-size: var(--fs-body); line-height: 1.6; color: #c6bdb2; } .fluxo-fecho { margin-top: clamp(30px, 3.4vw, 46px); padding-top: clamp(22px, 2.4vw, 32px); border-top: 1px solid #ffffff14; } /* O GRAFO. Quatro nós numa linha, o primeiro é o hub — é a topologia da referência que o Founder mandou. O fio corre atrás dos nós, na altura do centro da fileira de círculos, e por isso a fileira tem altura fixa: é o que garante que o fio cruze todos os círculos pelo meio, e não pelo meio do rótulo mais alto. */ .fluxo-grafo { --no-fileira: 104px; margin-top: clamp(30px, 3.4vw, 44px); display: grid; grid-template-columns: 1.15fr 1fr 1fr 1.25fr; gap: 0 clamp(14px, 1.6vw, 30px); position: relative; } /* o fio. Começa no centro do hub e morre no centro do último nó — não vaza para fora da fileira, que é o que faz um diagrama parecer enfeite. */ .fluxo-grafo::before { content: ""; position: absolute; left: 12%; right: 12%; top: calc(var(--no-fileira) / 2); height: 1px; background: linear-gradient(90deg, #be6041 0%, #be604166 42%, #ffffff26 100%); } .no { position: relative; display: grid; grid-template-rows: var(--no-fileira) auto; align-items: center; justify-items: start; } /* o disco do nó. Fundo opaco de propósito: é ele que "corta" o fio e faz o nó ler como parada do percurso, não como bolinha por cima de uma linha. */ .no-ponto { width: 15px; height: 15px; border-radius: 50%; background: #0d0b0a; border: 1px solid #be6041; box-shadow: 0 0 0 6px #0d0b0a; } .no-hub .no-marca { width: var(--no-fileira); height: var(--no-fileira); border-radius: 50%; display: grid; place-items: center; background: #0d0b0a; border: 1px solid #be604159; /* o halo é o que diz "este nó é diferente dos outros três" sem precisar de rótulo dizendo isso. Mesma função do glow roxo na referência. */ box-shadow: 0 0 0 8px #0d0b0a, 0 0 46px -6px #be604173; } .no-hub .no-marca svg { width: 46%; height: 46%; display: block; } .no-rotulo { display: block; padding: 22px 1.6em 0 0; font-size: var(--fs-body); line-height: 1.35; letter-spacing: -0.01em; color: #aaa19a; } /* o rótulo do hub é o único que nomeia quem coordena: fica em contraste pleno, como o "NIA — Universal AI Agent" da referência. */ .no-hub .no-rotulo { color: #eee9df; } @media (max-width: 760px) { .orq { gap: 46px; } .orq .sticky { max-width: none; } .fluxo { padding: 30px 22px; border-radius: 14px; } /* em 390 a fileira horizontal viraria quatro colunas de ~70px: o rótulo mais longo quebraria em nove linhas. O grafo gira 90° e vira percurso vertical, com o fio à esquerda e o rótulo ao lado do nó. */ .fluxo-grafo { --no-fileira: 62px; grid-template-columns: 1fr; gap: 26px 0; } .fluxo-grafo::before { left: calc(var(--no-fileira) / 2); right: auto; top: calc(var(--no-fileira) / 2); bottom: calc(var(--no-fileira) / 2); width: 1px; height: auto; background: linear-gradient(180deg, #be6041 0%, #be604166 42%, #ffffff26 100%); } .no { grid-template-rows: auto; grid-template-columns: var(--no-fileira) 1fr; align-items: center; } .no-ponto { justify-self: center; } .no-hub .no-marca { width: var(--no-fileira); height: var(--no-fileira); } .no-rotulo { padding: 0 0 0 16px; } } /* o desfecho e as ações voltam a dividir a linha, agora abaixo do gráfico: é o que impede a seção de virar uma pilha vertical longa depois de perder as duas colunas. */ .orq .steps { display: grid; grid-template-columns: 1fr 1fr; align-items: center; } @media (max-width: 760px) { .orq .steps { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- ITEM 2 · "O bloco 'Tecnologia para que a hospedagem volte a ser humana.' está estranho a leitura! o Texto deve possuir o mesmo tamanho. (...) Tem 6 tipos de tamanho de texto e além disso tem frases que há mais de um tamanho. Reveja os tamanhos e tipo de fonte, podemos ter apenas dois tipos de fontes e um número padronizado." MEDIDO NO DOM da rev20, não estimado — e ele está certo nas duas acusações: (a) "frases que há mais de um tamanho". Literal, e é ESTA frase: o `h2` da `.human` renderiza "Tecnologia para que a hospedagem" a 34px e "volte a ser humana." a 77,8px. Uma sentença, dois corpos. Isso foi decisão minha na rev18 — usei ESCALA como eixo de ênfase porque peso e cor já tinham sido reprovados. O comentário de agora revoga essa decisão explicitamente. A ênfase passa a vir só de LINHA PRÓPRIA e ESPAÇO, que é composição — o mesmo princípio que a própria rev18 já aplicava aos dois parágrafos desta seção ("o que separa o fecho é espaço, não escala"). Agora a regra vale para a seção inteira, sem exceção. (b) tamanhos distintos na página: eram NOVE em 1440 e NOVE em 390, não seis. Ele subestimou. O excesso estava todo num lugar: QUATRO corpos micro espremidos em 5px de faixa — 14 (frase de estado), 13 (botão), 11 (label de formulário) e 9 (sobrancelha). Nessa faixa a diferença não lê como hierarquia, lê como descuido. Viram UM corpo só; o que separa os papéis passa a ser tracking e caixa, não tamanho. `--fs-num` também some como token próprio: em 1440 já valia o mesmo que D3 (34px) e só divergia em 390, criando um degrau que existia num viewport só. A ESCALA FINAL — seis corpos em 1440, um por papel: D1 77,8px display dominante ....... só o h1 do hero D2 63,4px título de seção ......... todo h2, .human incluída D3 34px sub-display em prosa .... .lead, .faq summary, .events time, .step lead 21,6px segundo nível do hero body 18px corpo de leitura ........ todo texto corrido, h3, rótulo de nó micro 12px texto funcional ......... botão, label, sobrancelha, estado Em 390 são CINCO: `lead` e `body` são clamps que convergem em 17px na base — é a escala fluida fazendo o que promete, não um degrau perdido. Tipografia: uma família (Outfit). O teto de duas que ele pediu está cumprido com folga, e isso já era verdade na rev20 — medido, `familias: ['o']`. -------------------------------------------------------------------------- */ :root { --fs-micro: 12px; --fs-num: var(--fs-d3); --fs-cta: var(--fs-micro); --fs-label: var(--fs-micro); --fs-note: var(--fs-micro); --fs-eyebrow: var(--fs-micro); } /* A frase de impacto e a entrada passam a ser O MESMO CORPO — e é o corpo que todo h2 da página usa, então a `.human` deixa de ser o único título fora do sistema. A dominância dela continua existindo: vem da linha própria, da medida curta e dos 7vh de respiro, não de um segundo tamanho. */ .human h2 { font-size: var(--fs-d2); max-width: 15ch; } .human h2 em { font-size: inherit; line-height: inherit; letter-spacing: inherit; max-width: none; margin-top: 0.12em; } /* -------------------------------------------------------------------------- REV21 · correções medidas no primeiro render de 1440. -------------------------------------------------------------------------- */ /* 1. o h2 em 15ch caía em SEIS linhas a 63,4px e virava a parede de texto que o gráfico tinha acabado de desfazer. 20ch devolve três linhas. */ .orq .sticky { max-width: 20ch; } /* 2. o fio. A primeira versão era UMA régua em `left:12%/right:12%`, e as porcentagens não caem nos centros dos nós: sobrava um toco de ~200px depois do último disco e faltava contato com o hub. Um traço que termina no vazio é exatamente o "recurso estético" já reprovado uma vez. Agora cada nó desenha o segmento até o PRÓXIMO disco — geometria derivada da grade, não de palpite em %. O último nó não desenha nada, então o fio morre no centro do último disco. */ .fluxo-grafo { --fluxo-gap: clamp(14px, 1.6vw, 30px); --no-raio: 7.5px; column-gap: var(--fluxo-gap); } .fluxo-grafo::before { display: none; } .no:not(:last-child)::after { content: ""; position: absolute; z-index: 0; top: calc(var(--no-fileira) / 2); left: var(--no-raio); width: calc(100% + var(--fluxo-gap)); height: 1px; background: #be604173; } /* o hub é maior, então o segmento dele nasce no centro do círculo grande e não na borda esquerda da coluna. */ .no-hub:not(:last-child)::after { left: calc(var(--no-fileira) / 2); width: calc(100% + var(--fluxo-gap) + var(--no-raio) - var(--no-fileira) / 2); background: linear-gradient(90deg, #be6041, #be604173); } .no-ponto, .no-hub .no-marca { position: relative; z-index: 1; } /* 3. as duas réguas de `.steps` nasciam em alturas diferentes porque os dois artigos estavam centrados verticalmente: duas linhas soltas em `y` diferentes leem como defeito, não como divisão. Partem da mesma linha. */ .orq .steps { align-items: start; } @media (max-width: 760px) { /* em coluna o fio volta a ser uma régua só: em vertical os nós têm alturas diferentes (o rótulo quebra em 1, 2 ou 3 linhas) e o segmento por nó não tem como saber onde o disco seguinte cai. */ .fluxo-grafo::before { display: block; } .no:not(:last-child)::after { display: none; } } /* 4. o `max-width:20ch` no `.sticky` não fez NADA e eu quase entreguei assim: o `ch` mede contra o corpo do PRÓPRIO elemento, e o `.sticky` herda os 18px do corpo — 20ch ali valiam ~190px, não os ~590px que eu queria. A mesma armadilha já estava anotada no bloco da `.human`. A medida vai para o h2, onde 1ch vale a caixa do display. */ .orq .sticky { max-width: none; } .orq .sticky h2 { max-width: 20ch; } /* 5. as duas colunas do desfecho partiam de alturas diferentes (34px de padding contra os 40px do parágrafo). Mesma linha de partida nas duas. */ .steps .acoes { padding-top: 40px; } /* 6. a régua acima do fecho nascia no próprio `.fluxo-fecho`, que tem medida de leitura de 52ch — então ela cruzava só ~45% do painel e lia como um traço solto, não como divisão. A régua passa para o rodapé do grafo, onde tem a largura inteira; o texto continua em 52ch. */ .fluxo-grafo { padding-bottom: clamp(30px, 3.4vw, 46px); border-bottom: 1px solid #ffffff14; } .fluxo-fecho { border-top: 0; padding-top: 0; } /* ========================================================================== REV22 · comentário do Founder de 03/08 11:20. ========================================================================== */ /* -------------------------------------------------------------------------- ITEM 3 · "Ainda há vários tamanhos de texto em TODA A PAGINA! Precisamos ter definido no máximo dois tamanhos de textos para TUDO o que estiver escrito na pagina e a única excessão deverá ser o texto do CTA." É a terceira vez que ele pede, e as duas anteriores só ENCOLHERAM a rampa — 22 valores → 10 degraus → 6 corpos medidos em 1440. Encolher não era o pedido. Agora a escala não é uma rampa curta: são DOIS CORPOS e mais nada, com o CTA como a única exceção que ele autorizou. display 63,4px em 1440 · 36px em 390 ... h1, todo h2, a ênfase da .human texto 18px em 1440 · 17px em 390 ... TODO o resto, sem exceção cta 14,4px em 1440 · 13px em 390 ... só o texto de ação Os oito tokens antigos não foram apagados — viram apelidos de um dos dois corpos. É de propósito: qualquer regra em qualquer das três folhas continua válida e passa a resolver para o corpo certo, então não sobra uma declaração esquecida capaz de reintroduzir um sétimo tamanho depois. O QUE ISSO CUSTA, declarado: escala era o eixo de ênfase de cinco elementos — `.lead`, as horas da linha do dia, os `.step` numerados, o `summary` do FAQ e o h1 do hero, que era o único corpo acima do h2. Nenhum deles pode ceder a ênfase junto com o tamanho, e nenhum pode recuperá-la em escala. A ênfase passa a vir de PESO, TINTA, MEDIDA e ESPAÇO, elemento por elemento, logo abaixo. É composição — e é o que sobra quando a escala sai de cena. -------------------------------------------------------------------------- */ :root { --fs-display: clamp(36px, 4.4vw, 64px); --fs-text: clamp(17px, 1.25vw, 20px); /* REV27 · ITEM 3: o piso do clamp só é atingido no mobile (a 390px, 1vw = 3,9px), e era 13px — abaixo do piso de 14px, nos OITO elementos de ação da página e em nenhum texto de corpo. O defeito estava inteiro na camada de ação. O teto não muda: a 1440 o valor continua 14,4px. */ --fs-cta: clamp(14px, 1vw, 15px); --fs-d1: var(--fs-display); --fs-d2: var(--fs-display); --fs-d3: var(--fs-text); --fs-num: var(--fs-text); --fs-lead: var(--fs-text); --fs-body: var(--fs-text); --fs-micro: var(--fs-text); --fs-label: var(--fs-text); --fs-note: var(--fs-text); --fs-eyebrow: var(--fs-text); } /* o h1 perde os 14px que o separavam do h2. O que o mantém dominante é o que sempre deveria ter mantido: ele está sozinho na primeira tela, com o núcleo ao lado e 680px de medida contra os 20ch dos títulos de seção. */ .copy h1 { font-size: var(--fs-display); } /* `.lead` era 34px contra 18px do corpo — quase o dobro. Sem escala, o que distingue um parágrafo de entrada de um parágrafo de continuação é peso, tinta plena e medida curta. Os três juntos, e não um só. */ .lead { max-width: 46ch; font-weight: 500; line-height: 1.5; color: #eee9df; } .noise .lead, .human .lead { color: #160b07; } .agents .lead { color: #111; } /* as horas da linha do dia eram 34px: o degrau que fazia os quatro eventos lerem como cronologia. Viram 18px, e a cronologia passa a vir da caixa alta em terracota com tracking largo — marcador, não parágrafo. */ .events time { font-weight: 500; letter-spacing: 0.16em; color: #8f4530; margin-bottom: 10px; } /* os três `.step` numerados eram 34px sobre a espinha vertical. Sem escala eles ficariam indistinguíveis do corpo ao lado; o peso e a tinta plena devolvem o degrau, e a espinha continua fazendo o resto. */ .step { font-weight: 500; line-height: 1.5; color: #eee9df; } /* a pergunta do FAQ é o alvo de clique da seção: sem os 34px, o que a separa da resposta é peso e a medida curta. */ .faq summary { font-weight: 500; max-width: 46ch; } /* micro-texto: os quatro papéis que viviam em 9–14px agora falam no corpo de leitura. Sem tracking largo, "HOSTIC / 01" a 18px viraria um título — a caixa alta com tracking é o que mantém a leitura de rótulo. */ header { letter-spacing: 0.1em; height: 68px; } .copy small, section > small, .sticky small, .tag { letter-spacing: 0.1em; } /* o `BETA ↘` do header é chamada para o Beta: é CTA, e cai na exceção. */ header a[href="#beta"] { font-size: var(--fs-cta); letter-spacing: 0.14em; } .beta button { font-size: var(--fs-cta); } /* rótulo de formulário a 18px empurraria o campo; o que o mantém rótulo é a tinta recuada e o tracking, não um terceiro tamanho. */ .beta label { letter-spacing: 0.04em; color: #b9b0a8; } /* -------------------------------------------------------------------------- ITENS 1 e 2 · o gráfico do Orquestrador. "Não teve icones dos agentes" · "Há muita coisa jogada, descentralizada e sem um trabalho de organização textual de leitura". A fileira horizontal alinhada à esquerda sai. Entra um eixo VERTICAL centrado — agentes → núcleo → orações — que é a mesma convergência do hero aprovado. Cada faixa é uma grade de três colunas iguais, então nada mais fica "jogado": ícone, fio e coluna de texto compartilham o mesmo centro. -------------------------------------------------------------------------- */ .fluxo-premissa, .fluxo-fecho { max-width: 52ch; margin-inline: auto; text-align: center; } .fluxo-grafo { /* REV27: 0x66 (40%) = 1,69:1. Os fios são subordinados aos nós, então ficam abaixo do anel (4,21:1) e acima do piso de 3:1. 0xcc (80%) = 3,28:1. */ --trilho: #be6041cc; /* o chão do painel, para os halos que mascaram o fio atrás de cada nó */ --chao: #191310; --coluna: min(760px, 100%); display: block; margin: clamp(34px, 4vw, 56px) auto 0; padding-bottom: clamp(34px, 3.6vw, 50px); grid-template-columns: none; gap: 0; } .fluxo-grafo::before { display: none; } /* faixa 1 — os três agentes. */ .fluxo-agentes { position: relative; width: var(--coluna); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); justify-items: center; padding-bottom: 34px; } .ag { position: relative; width: clamp(56px, 5vw, 68px); aspect-ratio: 1; display: grid; place-items: center; /* REV27: 0x59 (35%) = 1,46:1. Opaco = 4,21:1 — a MESMA tinta que o `.no-ponto` dos passos já usava. Todos os anéis do desenho passam a ter um valor só, porque são o mesmo tipo de objeto. */ border: 1px solid #be6041; border-radius: 50%; background: var(--chao); color: #e0805e; } .ico { width: 46%; height: 46%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* o pé de cada ícone desce até o trilho, e o trilho liga os três centros. */ .ag::after { content: ""; position: absolute; top: 100%; left: 50%; width: 1px; height: 34px; border-left: 1px dashed var(--trilho); } .fluxo-agentes::after { content: ""; position: absolute; bottom: 0; left: 16.666%; right: 16.666%; border-top: 1px dashed var(--trilho); } /* faixa 2 — o núcleo. Sozinho na linha e centrado: é o único elemento da seção que não divide a largura com ninguém, e é assim que ele domina. */ .fluxo-nucleo { position: relative; display: grid; justify-items: center; gap: 18px; padding: 40px 0; text-align: center; } .fluxo-nucleo::before, .fluxo-nucleo::after { content: ""; position: absolute; left: 50%; width: 1px; height: 40px; border-left: 1px dashed var(--trilho); } .fluxo-nucleo::before { top: 0; } .fluxo-nucleo::after { bottom: 0; } .fluxo-nucleo .no-marca { width: clamp(96px, 9vw, 126px); height: clamp(96px, 9vw, 126px); border-radius: 50%; display: grid; place-items: center; background: var(--chao); /* REV27: o núcleo é o nó em que o desenho inteiro converge — é o único anel que fica ACIMA dos outros (6,94:1 contra 4,21:1). A hierarquia do desenho passa a ser legível como tinta: núcleo > agentes = passos > fios. */ border: 1px solid #e0805e; box-shadow: 0 0 0 10px var(--chao), 0 0 56px -6px #be604173; } .fluxo-nucleo .no-marca svg { width: 46%; height: 46%; display: block; } .fluxo-nucleo .no-rotulo { padding: 0; color: #eee9df; font-weight: 500; } /* faixa 3 — as três orações da frase congelada. Três colunas de largura igual, mesmo topo, mesma medida: é aqui que estava a "desorganização textual". */ .fluxo-passos { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: clamp(20px, 2.4vw, 40px); padding-top: 40px; } .fluxo-passos::before { content: ""; position: absolute; top: 0; left: 16.666%; right: 16.666%; border-top: 1px dashed var(--trilho); } .passo { position: relative; margin: 0; padding-top: 30px; text-align: center; } /* o fio desce do trilho até o disco de cada oração. */ .passo::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 22px; border-left: 1px dashed var(--trilho); } .passo .no-ponto { position: absolute; top: 15px; left: 50%; transform: translate(-50%, 0); width: 15px; height: 15px; border-radius: 50%; background: var(--chao); border: 1px solid #be6041; box-shadow: 0 0 0 5px var(--chao); z-index: 1; } .passo .no-rotulo { display: block; padding: 0; max-width: 28ch; margin-inline: auto; color: #c6bdb2; line-height: 1.45; } /* os mesmos três ícones, agora NOMEADOS, na seção de controle logo abaixo. É este par que dispensa rótulo dentro do gráfico. */ .controls h3 { display: flex; align-items: center; gap: 10px; } .ico-h3 { flex: none; width: 1.35em; height: 1.35em; color: #e0805e; } @media (max-width: 760px) { /* em 390 as três colunas de oração dariam ~28 caracteres por linha. O eixo continua vertical, mas as orações empilham e o trilho vira uma régua à esquerda — mesma leitura, uma coluna. */ .fluxo-agentes { padding-bottom: 26px; } .ag::after { height: 26px; } .fluxo-nucleo { padding: 30px 0; } .fluxo-nucleo::before, .fluxo-nucleo::after { height: 30px; } .fluxo-passos { grid-template-columns: 1fr; row-gap: 26px; padding-top: 30px; } .fluxo-passos::before { left: 0; right: 0; } .passo { padding-top: 26px; } .passo .no-rotulo { max-width: none; } } /* -------------------------------------------------------------------------- REV22 · correções medidas no primeiro render de 1440. -------------------------------------------------------------------------- */ /* 1. os DOIS trilhos nasciam com larguras diferentes — o de cima em 16,6% de uma coluna de 760px (506px) e o de baixo em 16,6% do painel inteiro (820px). Duas réguas paralelas de comprimentos diferentes leem exatamente como o "descentralizado" que ele apontou. Agora as três faixas dividem a MESMA coluna, então os dois trilhos medem igual e os fios caem no mesmo x. A coluna também cresce: 760px deixava ~35% do painel em preto liso de cada lado, que era o outro item ("melhorar o preenchimento da página"). */ .fluxo-grafo { --coluna: min(1120px, 100%); } .fluxo-passos { width: var(--coluna); margin-inline: auto; } /* 2. o vão vertical. Medido: 200px entre a base do h2 e o topo do painel, mais 40+40 de haste em volta do núcleo. O eixo não precisa de tanto curso para ler como percurso — o que faz a leitura é o fio, não o comprimento dele. */ .orq { gap: 5vh; } .fluxo-agentes { padding-bottom: 28px; } .ag::after { height: 28px; } .fluxo-nucleo { padding: 32px 0; } .fluxo-nucleo::before, .fluxo-nucleo::after { height: 32px; } .fluxo-passos { padding-top: 32px; } /* 3. o desfecho da seção. Medido: o parágrafo de conclusão ficou preso em `max-width:20ch`, uma medida que tinha sido calculada para os 34px do D3 antigo — a 18px os mesmos 20ch valem 237px, e a conclusão virou uma coluna de cinco linhas rasgadas encostada na esquerda, com um vão morto de 400px no meio e as duas ações empilhadas na direita. É literalmente o "muita coisa jogada, descentralizada" do comentário, no mesmo bloco. O desfecho passa a ser UMA faixa centrada sob o painel, com a mesma linha de simetria do gráfico: régua de largura cheia, conclusão em medida de leitura e as duas ações lado a lado no centro. O peso 250 também sai — ele existia para um corpo de 34px; a 18px é fino demais para ler. */ .orq .steps { display: block; text-align: center; border-top: 1px solid #ffffff20; padding-top: clamp(36px, 3.6vw, 54px); } .orq .steps > article { padding: 0; border-top: 0; } .orq .steps > article p { max-width: 58ch; margin: 0 auto; padding: 0; font-weight: 400; line-height: 1.55; letter-spacing: 0; } .steps .acoes { justify-content: center; padding: clamp(26px, 2.6vw, 34px) 0 0; } /* 4. o `BETA ↘` do header volta ao corpo de texto. Eu o tinha posto na exceção do CTA por ser chamada para o Beta, e a medida mostrou o preço: dentro da MESMA faixa de 68px passavam a conviver 18px ("HOSTIC / 01", "SISTEMA NERVOSO") e 14,4px — uma linha só com dois corpos, que é exatamente o defeito que ele apontou na rev20. A exceção fica onde ela é visível como componente à parte: os botões `.cta` e o botão de envio do formulário. */ header a[href="#beta"] { font-size: inherit; letter-spacing: 0.1em; } /* 5. `.controls h3` — o nome do agente media 4,17:1 sobre o cartão da `.auto` (4,26:1 na rev21: reprova nas duas, não é regressão desta revisão, e a medida é do pixel fotografado atrás do texto, não do background do pai). É o rótulo que NOMEIA cada ícone novo — se ele não lê, o par ícone→agente que substitui o rótulo dentro do gráfico não se fecha. #e2896a é o mesmo terracota clareado até 4,96:1; a família não muda. */ .controls h3 { color: #e2896a; } /* ========================================================================== HOS-780 · REV23 — comentário do Founder de 03/08/2026 11:57 (HOS-782). Cinco itens. Quatro entram aqui; o item 3 (os 4 CTAs com a mesma chamada) depende de ESCOLHA dele na tabela já entregue em HOS-808 e por isso NÃO foi executado — executar sem a escolha seria eu redigindo copy. A rev22 não foi tocada: segue viva e intacta em :8252. Esta é :8253. ========================================================================== */ /* -------------------------------------------------------------------------- ITEM 2 — "A parte do Print está MUITO apertado!" O print dele é o desfecho da `.orq`. Medido no pixel: o intervalo entre a conclusão e a linha dos dois botões é ZERO. Não é "pouco", é zero — a caixa das ações nasce exatamente na borda inferior do parágrafo (y=3885,1 nas duas). E não é decisão de ninguém: é uma colisão de especificidade. A intenção estava escrita duas vezes — .steps .acoes { padding: 34px 3vw } (L687) .steps .acoes { padding: clamp(26px,2.6vw,34px) 0 0 } (L1667) — e as duas perdem para .orq .steps > article { padding: 0 } (L1655) porque `.acoes` É um
: 0,2,1 contra 0,2,0. O respiro foi escrito três vezes e nunca chegou à tela. O número não é invenção minha. O intervalo texto→CTA desta página já existe e vale 36px em 1440 e 35px em 390 — soma do margin-bottom do parágrafo com o `margin-top:18px` do `.cta`. Ele é o mesmo na `.hero`, na `.noise` e na `.auto`. Só o desfecho da `.orq` estava fora, em 0. A correção devolve o intervalo da própria página, e o aceite é a igualdade dos quatro. O que NÃO mexo: os 140px de vazio abaixo do bloco. Aquilo é o padding de seção que TODAS as seções têm; encurtar só aqui trocaria um defeito por uma assimetria nova. -------------------------------------------------------------------------- */ .orq .steps > article.acoes { padding: 36px 0 0; } @media (max-width: 760px) { .orq .steps > article.acoes { padding: 35px 0 0; } } /* -------------------------------------------------------------------------- ITENS 4 e 5 — o topo da página, e o "BETA" como botão. O que a medida mostra da faixa de 68px: três elementos, e os três com EXATAMENTE o mesmo tratamento — 18px, letter-spacing 1,8px, #eee9df, sem fundo, sem borda, sem padding. Um deles é link para a home, um é rótulo estático e um é a chamada para o Beta. Nada na tinta diz qual é qual, e o `BETA ↘` não muda NADA no hover (medido: cor, fundo, borda, transform e opacity idênticos antes e depois — ele não tem estado). Duas correções, nenhuma palavra alterada: (a) hierarquia por função, não por corpo. O rótulo estático `SISTEMA NERVOSO` cede para o cinza que a página já usa em corpo de apoio (#aaa19a). Os dois links ficam em #eee9df. A faixa passa a ler marca › contexto › ação em vez de três iguais. Não mexo no CORPO de ninguém: a rev20 foi reprovada justamente por conviverem dois corpos na mesma faixa, e a nota do `header a[href="#beta"]` acima registra isso. A distinção vem de tinta e de caixa — nunca de um segundo tamanho de letra. (b) o `SISTEMA NERVOSO` não estava centrado. Com `space-between` e itens laterais de larguras diferentes (116,7 contra 69,7), o miolo caía em 743,5 — 23,5px fora do eixo 720 da página. Grade de três colunas (1fr auto 1fr) com coluna FIXA por filho: assim o `display:none` do miolo abaixo de 760px não empurra o botão para a coluna do meio. -------------------------------------------------------------------------- */ header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } header > :nth-child(1) { grid-column: 1; justify-self: start; } header > :nth-child(2) { grid-column: 2; justify-self: center; } header > :nth-child(3) { grid-column: 3; justify-self: end; } header span { color: #aaa19a; } /* a faixa inverte para areia sobre as seções claras (`header.claro`). O rótulo inverte junto: 62% de #160b07 sobre #eee9df mede 5,1:1 — passa como texto. */ header.claro span { color: #160b079e; } /* -------------------------------------------------------------------------- ITEM 5 — "O Beta escrito no Topo deverá parecer mais um Botão interativo!" Ele passa a ter caixa: contorno, padding e estado. O corpo continua sendo o mesmo dos vizinhos (18px) — a afordância vem da CAIXA, que é o que resolve a tensão que a rev20 criou: dá botão sem trazer um segundo tamanho de letra para dentro da faixa. Não usa o terracota preenchido. Dois motivos: o preenchido é o CTA primário da página (o do hero), e a faixa é navegação — se ela ganhar a mesma tinta, passam a existir dois primários acima da dobra; e o preenchimento terracota já está registrado como reprovação de contraste em backlog. O estado ativo inverte para areia, que mede 11,6:1 contra a tinta do rótulo. -------------------------------------------------------------------------- */ header a[href="#beta"] { padding: 7px 14px; border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 42%, transparent); line-height: 1; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } header a[href="#beta"]:hover, header a[href="#beta"]:focus-visible { background: #eee9df; border-color: #eee9df; color: #160b07; } header.claro a[href="#beta"]:hover, header.claro a[href="#beta"]:focus-visible { background: #160b07; border-color: #160b07; color: #eee9df; } @media (prefers-reduced-motion: reduce) { header a[href="#beta"] { transition: none; } } /* a seta do topo, agora desenhada. Alinha pela caixa da letra, não pela linha de base: `.ico` herda width/height em % e aqui a medida é em `em`, para que ela acompanhe o corpo do rótulo se ele mudar. */ header a[href="#beta"] .ico-seta { width: 0.82em; height: 0.82em; margin-left: 0.4em; vertical-align: -0.1em; /* o `.ico` nasce com stroke 1.7 num viewBox de 24. Reduzido a 0,82em (~15px) o traço chegaria a 1,06px na tela — mais fino que a haste da letra ao lado, e a seta leria como um resíduo. 2,5 devolve ~1,56px, que é a haste do Outfit 400 a 18px. */ stroke-width: 2.5; } /* ========================================================================== REV24 — as duas escolhas que o Founder fez na interação de 03/08. `cta: recomendado` → três dos quatro slots trocam de frase (só index.html). `topo: navegacao` → o rótulo estático `SISTEMA NERVOSO` vira