direto, sem largura própria, então sem o teto do body ela já sangra sozinha — e o conteúdo de dentro já mora num .sitio__miolo (index.html), que trava e centra do jeito de sempre. Fundo sangrado, conteúdo travado: a MESMA composição do herói acima, só que "de graça" porque a seção já nasceu na forma faixa-e-miolo. Decisão medida (Task 28): faixa de papel travada no meio com o fundo escuro dos dois lados, numa tela larga, lia pior que sangrada — o mesmo raciocínio do campo. O rodapé (.rodape) é a mesma decisão, mas ele não nasceu com um miolo próprio — index.html ganhou um pra ele; a regra é a seção 8, mais abaixo neste arquivo. */ @media (max-width: 680px) { :root { --sitio-sangria: 20px; } } /* ── 2 · A escala de tela ───────────────────────────────── */ /* Cada clamp fecha no valor do pacote a 1440px: 64 / 1440 = 4.444vw · 40 / 1440 = 2.778vw · 26 / 1440 = 1.806vw 18 / 1440 = 1.250vw · 16 / 1440 = 1.111vw */ :root { --sitio-manchete-corpo: clamp(34px, 4.444vw, 64px); --sitio-manchete-entrelinha: clamp(38px, 4.722vw, 68px); --sitio-secao-corpo: clamp(26px, 2.778vw, 40px); --sitio-secao-entrelinha: clamp(32px, 3.333vw, 48px); --sitio-ficha-corpo: clamp(20px, 1.806vw, 26px); --sitio-ficha-entrelinha: clamp(26px, 2.222vw, 32px); --sitio-deck-corpo: clamp(16px, 1.250vw, 18px); --sitio-deck-entrelinha: clamp(24px, 1.944vw, 28px); --sitio-corpo-corpo: clamp(15px, 1.111vw, 16px); --sitio-corpo-entrelinha: clamp(23px, 1.667vw, 24px); } /* ── Famílias compartilhadas ────────────────────────────── */ /* Bloco de propósito vazio. elementos.css dimensiona em 22-30px (escala de vídeo, achado 5), mas a janela da busca NÃO precisa de re-base aqui: ds/sitio/elementos-sitio.css já re-baseia .sitio .janela inteira para a escala do sítio, calibrada à mão (.janela__titulo 11px/16px, .janela__campo 12.5px/21px), e .sitio .saida-codigo é font-size/line-height: inherit DE PROPÓSITO — herda do campo porque a saída de terminal tem um corpo só; destoar do tamanho faz a linha parecer legenda, não terminal. Uma versão anterior deste arquivo tinha `.sitio .janela, .sitio .janela *` aqui, redeclarando --sitio-mono-corpo/-entrelinha (13px/20px). Como esta folha carrega DEPOIS de elementos-sitio.css e a especificidade das duas regras empata em (0,2,0), a ordem de carga decidia o empate e atropelava a calibragem deliberada do pacote — trocava 11px/12.5px por 13px e quebrava o inherit do saida-codigo. Removido. Se uma re-base de família compartilhada for necessária aqui no futuro, ela precisa vencer por especificidade REAL (seletor mais específico que o de elementos-sitio.css), nunca só por ordem de carga — senão o próximo leitor reintroduz este mesmo defeito achando que está consertando o achado 5. */ /* ── 3 · O realce sobre papel ───────────────────────────── */ /* --sitio-sinal (#f09400) é usado por elementos-sitio.css como cor de link/destaque em toda a página (.sitio a, .secao__numero, .secao__nome). Sobre fundo escuro isso passa; sobre as duas superfícies claras da faixa de papel (achado I1, revisão de acessibilidade 2026-08-13), não: --sitio-papel #ecece4 → 1,98:1 (precisa 4,5:1) --sitio-papel-superficie #f6f5f0 → 2,15:1 (precisa 4,5:1) Não existe variante clara do token no pacote. Mesmo matiz, luminosidade menor: --sitio-papel-realce escurece o âmbar até passar 4,5:1 nas DUAS superfícies (medido: 4,96:1 sobre --sitio-papel, 5,40:1 sobre --sitio-papel-superficie — margem sobre o piso de 4,5, não só encostando nele). --sitio-papel-realce-forte é o mesmo escurecimento pro estado :hover, que sem isto herdava --sitio-sinal-forte (#ffab1f, ainda mais claro que o próprio --sitio-sinal) por empate de especificidade com `.sitio a:hover` — ficaria pior no hover do que no repouso. Escopado à faixa de papel (.rodape, .papel) — o âmbar sobre fundo escuro (--sitio-fundo/--sitio-superficie), correto como está, não é tocado. */ :root { --sitio-papel-realce: #8f5800; --sitio-papel-realce-forte: #7a4b00; } .rodape__legal a, .papel .secao__numero, .papel .secao__nome, .papel .contato__linha { color: var(--sitio-papel-realce); } .rodape__legal a:hover, .papel .contato__linha:hover { color: var(--sitio-papel-realce-forte); } /* ── 4 · O foco do campo de busca ────────────────────────── */ /* Achado I3 (revisão de acessibilidade 2026-08-13): .prompt__entrada (elementos-sitio.css) declara `outline:0` sem repor nada em :focus — parada de tabulação 14, medido computed style idêntico com e sem foco (outline 0px none nos dois estados). Sem indicador nenhum, quem navega por teclado perde o campo de vista assim que sai do clique/toque. :focus-visible (não :focus) — o campo já reage a pointer com o próprio .prompt em volta (box-shadow no container em hover), então o anel só precisa aparecer pra navegação por teclado, igual ao resto da página faz com o outline padrão do agente. --sitio-sinal é o próprio vocabulário de "ativo" do kit aqui (borda de chip pressionado, sublinhado do link atual de nav) — reaproveitado em vez de inventar cor nova. Contraste medido contra --sitio-superficie (fundo do .prompt, #080d13): 8,3:1, folgado acima do piso de 3:1 pra indicador de foco (não é texto). */ .prompt__entrada:focus-visible { outline: 2px solid var(--sitio-sinal); outline-offset: 2px; border-radius: 3px; } /* ── 5 · (vago) ─────────────────────────────────────────────── */ /* Aqui morava a correção de contraste do `.acesso__youtube`, o botão "Entrar com o YouTube" do painel de acesso da seção 03. A Task 31 tirou o painel da home — os quatro cards da Bancada de Testes o substituem, e cada um aponta pro próprio relatório em vez de pra rota de login. Sem marcação que case, as regras eram folha morta. O ACHADO continua valendo pra qualquer botão novo desta página, e é a quarta vez que ele aparece nesta base: classe única (0,1,0) perde de `.sitio a` (0,1,1, elementos-sitio.css), então `color:#fff` declarado só na classe nunca aplica e o texto renderiza âmbar. Escope com o elemento (`.sitio a.minha-classe`, 0,2,1) — ver `.sitio a.ficha__mais` na seção 6 abaixo e `a.cromo__marca` em home.css. E vermelho puro (#ff0000) nunca alcança 4,5:1 com branco em texto pequeno: escureça o fundo, não clareie o :hover. */ /* ── 6 · O "+" temático das fichas ──────────────────────────── */ /* Mesma armadilha, achado varrendo a folha atrás de outras aparições do Critical acima. `.ficha__mais` é `` (0,1,0) e também perde pra `.sitio a` (0,1,1). Não é falha de contraste — a cor perdedora (--sitio-sinal) ainda lê bem sobre o fundo tingido de cada ficha — é bug de marca: as quatro fichas (index.html) declaram --ficha-tinta por ficha (âmbar/azul/verde/roxo via style inline), mas o "+" de TODAS renderiza no mesmo âmbar, porque `.sitio a` vence a variável com a cor errada. Escopado com o elemento pra restaurar a cor por ficha. */ .sitio a.ficha__mais { color: var(--ficha-tinta, var(--sitio-sinal)); } /* ── 7 · O botão de Membros ganha realce próprio ───────────── */ /* Pedido do dono: o CTA de Membros (.cromo__fim, ao lado do YouTube) sai do contorno neutro (acao--traco) e ganha cor própria — mas não pode ser nenhum dos quatro realces já emprestados às fichas de projeto (âmbar/azul/verde/roxo, .ficha__tarja/.ficha__mais) nem --sitio-sinal (o âmbar do YouTube, "um sinal por vista" — tokens/sitio.css). --casa (#52a5ba) é do lado oposto do anel de matizes em relação ao âmbar — lê como outra cor de relance, sem competir — e é a cor de identidade do sistema inteiro, sentido que bate com "Membros" (o círculo de dentro). --sitio-realce-coral era a alternativa (a única realce livre das fichas), descartado por ser quente, da mesma família do âmbar — não lê como "outra coisa" à primeira vista. --casa não é vocabulário nativo do kit sitio (pertence à peça de vídeo), mas o token existe em :root sem escopo — usável aqui como qualquer outro custom property. Preenchida, não contornada — mesma forma do botão do YouTube (mesma cápsula, mesma altura, só a cor muda). Medido: texto claro (--sitio-tinta-cheia 2,27:1, --casa-texto pior ainda) sobre --casa NÃO passa 4,5:1; --sobre-sinal (tinta quase preta, já o papel de ".acao--sinal" pra "tinta escura sobre preenchimento claro" — não é exclusiva do âmbar, é o token de contraste do sistema) sobre --casa mede 6,56:1, folgado. O botão em si contra o fundo do cabeçalho (--sitio-cromo #02060a) mede 7,21:1, folgado acima do piso de 3:1 pra elemento de interface. Preenchimento cheio ao lado do vermelho do YouTube (ambos "pesados") funcionava contra a própria ideia de "não competir" — medido lado a lado nas duas larguras (cromo cheio e compacto): teal + vermelho são complementares no anel de cor, então leem como DUAS coisas mesmo os dois preenchidos, sem brigar por atenção da mesma forma que duas ações no MESMO matiz brigariam. Especificidade: mesma armadilha do achado Critical acima (`.sitio a` vencendo classe única) — escopado com o elemento pra valer de verdade. :hover clareia (com tinta escura, mais claro só melhora o contraste — ao contrário do problema do YouTube, que precisou escurecer). :focus-visible reusa o anel do sítio (--sitio-sinal) — é o indicador de foco do sistema inteiro (mesmo anel do .prompt__entrada acima), não o "sinal de ação" da regra "um por vista": aquela é sobre EMPHASIS de ação, esta é o vocabulário universal de "isto tem foco de teclado". */ .sitio a.acao--casa { background-color: var(--casa); color: var(--sobre-sinal); } .sitio a.acao--casa:hover { /* mistura de --casa 82% + branco 18% escrita literal, não color-mix(): getComputedStyle() serializa o color-mix() como oklab(...) neste Chromium (achado rodando a prova de contraste abaixo — não é bug do CSS, é só um formato que a leitura de teste não precisa aprender a parsear). #71b5c6 mede 8,04:1 com --sobre-sinal, folgado. */ background-color: #71b5c6; color: var(--sobre-sinal); } .sitio a.acao--casa:focus-visible { outline: 2px solid var(--sitio-sinal); outline-offset: 2px; border-radius: var(--sitio-raio-capsula); } /* ── 8 · O rodapé sangra, o conteúdo trava (mudança 1) ─────── */ /* .rodape (elementos-sitio.css) é `display:flex;justify-content:space- between;padding:18px 32px` nos PRÓPRIOS filhos — sem um miolo, deixar o fundo sangrar (seção 1 acima, "de graça" pro .rodape em si) espalharia a marca, o texto e o nav legal pela largura inteira da tela numa tela larga: com space-between numa faixa de 2560px, a marca ia pra ponta esquerda de verdade e o nav legal pra ponta direita, um vão enorme e vazio no meio — pior que a versão travada de antes. index.html ganhou um `.sitio__miolo` por dentro do `