Moldura de seção

Uma dobra de tom vizinho — .sec-deep entre duas .sec-dark — com as bordas dissolvidas. Duas faixas de gradiente, no topo e na base, pintam o tom das seções de fora e vão a zero para dentro: onde deveria haver uma emenda entre dois pretos parecidos, não há nada. Por cima, uma cercadura chanfrada marca onde a dobra começa e onde termina — dois chanfros de 30px mergulhando para os cantos, dois filetes e um losango de 6px no meio.

O componente não é a seção: é a junção. Ele não sabe nem quer saber o que está dentro.

Por que ele existe — §3 do contrato

O CLAUDE.md §3 fecha uma porta:

Fundos escuros adjacentes têm de ser quase idênticos (#0a0a0a / #131313). Salto forte de tom entre seções suja a página.

A regra está certa e cria um problema imediato: se a diferença entre a dobra e as vizinhas é quase imperceptível, como fazer a dobra ler como bloco à parte? As duas saídas óbvias são proibidas ou feias — subir o contraste desobedece à regra, e traçar uma linha reta na borda transforma a página em tabela.

Esta é a terceira saída, e a resposta canônica da biblioteca a essa regra: mantenha a diferença de tom minúscula, apague as duas emendas com um degradê que devolve o tom de fora, e marque o início e o fim com um acabamento fino. A dobra passa a ser emoldurada em vez de cortada. O olho registra "outro bloco" sem registrar "outra cor".

Quando o que você precisa é contraste de verdade, o §3 já responde por outro caminho: uma .sec-paper inteira como respiro — e aí o componente é o efeitos/quebra-papel-rasgado.

Quando usar

• Dobra de tom vizinho que precisa ler como bloco fechado: um diagrama, um FAQ, um hub, um formulário — conteúdo que é denso e que não é continuação da seção anterior.
• Quando a seção tem forma própria por dentro e a emenda com a vizinha estraga essa forma.
• Duas, no máximo três vezes na mesma página.

Quando não usar

• Em toda seção. Moldura em tudo é moldura em nada, e a página vira álbum de figurinhas.
• Entre duas seções do mesmo tom. Sem diferença de fundo a faixa não tem o que dissolver: sobra a cercadura solta. Nesse caso use só o .frame-edge e assuma que é acabamento, não moldura.
• Quando você precisa de contraste real. É outra decisão editorial — vá de .sec-paper (§3).
• Em seção com foto de fundo. A faixa é camada de background da própria seção; imagem de fundo e faixa disputam o mesmo lugar. Para dobra com mídia, o contorno tem de vir de dentro do componente de mídia.
• Como divisor entre hero e primeira dobra. O hero já termina em degradê próprio; dois degradês seguidos borram a virada.

Padrão editorial

Este componente não tem slot de texto — o que ele pede é arranjo de tons, e é isso que a tabela governa:

Geometria

Como usar

<link rel="stylesheet" href="componentes/efeitos/moldura-secao/estilo.css">

Sem script. São duas peças, e a segunda é opcional:

<section class="sec-deep sec-pad frame">
  <div class="frame-edge frame-edge--top" aria-hidden="true"></div>
  <div class="frame-edge frame-edge--bottom" aria-hidden="true"></div>
  <div class="wrap">…</div>
</section>

Só a classe .frame já entrega a dissolução — os dois <div> acrescentam o acabamento chanfrado. As vizinhas continuam sendo as seções que você já tem; nada é colado nelas.

Ganchos

Variações

As cores não têm knob, e é de propósito: o filete lê --rule-2 e o losango lê --accent-2, os dois vindos do escopo de tom. É o que faz a mesma cercadura funcionar numa .sec-deep e numa .sec-paper sem uma linha de ajuste.

Gotchas

• A faixa é camada de background da seção, não pseudo-elemento. Consequência boa: ela fica atrás do conteúdo sem stacking context, sem z-index e sem overflow:hidden. Consequência a saber: se o <section> já usa background-image (foto, textura), um dos dois perde. Moldura e mídia de fundo não convivem.

• Sem overflow:hidden, e isso importa. A origem cortava a seção para conter os pseudo-elementos. overflow:hidden numa seção mata o position:sticky de qualquer componente colado dentro — o listas/baralho-sticky pararia de grudar sem erro nenhum no console. Aqui não há corte. Não reintroduza.

• --frame-tone e --frame-tone-rgb andam em par. O fim do gradiente tem de ser a mesma cor com alfa 0. Trocar só um faz a faixa passar por um cinza no meio do caminho — o defeito é sutil e só aparece em tela boa.

• Faixa mais alta que --sec-gap invade o conteúdo. O padrão (13vh) já fica abaixo do respiro da dobra. Se subir --frame-band, confira em tela baixa, onde vh é pequeno e o texto sobe.

• A cercadura refaz a conta da coluna em inset, não herda o .wrap. Ela alinha sozinha com --pad e --max — mas mede 50% da seção. Se a seção ganhar padding lateral próprio (nenhuma da biblioteca ganha), a cercadura desalinha da coluna.

• Abaixo de 640px o losango some e o vão fecha junto. São duas linhas de CSS que andam casadas: esconder só o losango deixa um buraco de 34px no meio do filete.

• Os chanfros são gradiente a 45°, não SVG. Um SVG em data: URI não enxerga var(), então a cor da linha ficaria cravada dentro do componente — e a cor tem de vir do escopo de tom. O preço é que a diagonal é antialiasada e, em tela 1x, lê meio ponto mais macia que o filete reto. É o preço certo.

• .frame-edge nunca ganha conteúdo. É aria-hidden e vazio. Um dia alguém vai querer pôr o número da seção ali dentro; esse dia é o dia em que a cercadura vira conteúdo escondido de leitor de tela.

Histórico

Calibragem no primeiro uso. Ressalva de proveniência: a regra só existe na composição site/ da Liberta Wealth, cuja ida ao ar não está confirmada — na versão confirmada (github-repo/, o design system v5 que a biblioteca varreu) nem .framed nem .edge existem. Foi construído em casa, então não há autoria nem licença externa a creditar.

Normalizações aplicadas na extração:

A decisão de arquitetura: pseudo-elemento onde cabe, markup onde acabou

A origem repetia 14 nós de decoração por seção (dois .edge, cada um com .wrap, dois SVG, dois filetes e o losango). A pergunta na extração era se dava para zerar isso.

Deu, para a metade que importa. As faixas — o efeito essencial, a resposta ao §3 — não têm markup nenhum: são duas camadas de background da própria seção. Quem quiser só a dissolução escreve uma classe e acabou.

Não deu para a cercadura, e o motivo é estrutural: ela tem 5 marcas por borda (dois chanfros, dois filetes, um losango) e pseudo-elemento não tem pseudo-elemento. Os dois pseudos da seção já seriam poucos para as duas bordas; e o losango, sendo forma girada, não existe em camada de background sem virar quatro triângulos de gradiente. Zerar o markup custaria oito camadas por borda com listas de background-size e background-position casadas na unha — ilegível, frágil, e impossível de ajustar sem recontar posições.

O saldo: 1 nó vazio por borda, sem filhos, contra 7. O <div> vazio com aria-hidden é mais barato de manter e de entender do que a alternativa "elegante", e tem um bônus que a versão sem markup não teria: a cercadura passa a ser peça independente — dá para usar a faixa sem ela, ela sem a faixa, ou só numa das bordas.

Divergências conhecidas vs. produção: nenhuma verificável — a composição de origem não está publicada. O desenho (30px de chanfro, 6px de losango, clamp(80px,13vh,180px) de faixa) é o da origem, medida por medida.