` puro, sem componente do `_ds`: a conversão pra estático do
Bloco 5 custa por componente em uso, e um acordeão que o navegador já sabe
fazer não precisa de React pra existir. Sem JS também: abre e fecha
nativamente, e continua funcionando com o script fora do ar.
O sinal de "+" nasce do ::after, não de um : assim ele não vira
caractere solto no leitor de tela, que já anuncia o estado pelo próprio
. */
[data-faq] { display: flex; flex-direction: column; }
[data-faq] details { border-top: 1px solid var(--lg-aro); }
[data-faq] details:last-of-type { border-bottom: 1px solid var(--lg-aro); }
[data-faq] summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ofc-space-5, 20px);
/* a folga é o que garante os 44px de alvo de toque sem altura fixa */
padding-block: var(--ofc-space-5, 20px);
font-size: var(--ofc-size-sm);
font-weight: 500;
cursor: pointer;
list-style: none;
}
[data-faq] summary::-webkit-details-marker { display: none; }
[data-faq] summary::after {
content: "+";
flex: none;
color: var(--latao);
font-size: 1.5em;
line-height: 0.8;
transition: transform 260ms cubic-bezier(0.22, 1.08, 0.36, 1);
}
[data-faq] details[open] summary::after { transform: rotate(45deg); }
@media (hover: hover) and (pointer: fine) {
[data-faq] summary:hover { color: var(--ofc-accent); }
}
[data-faq] details > p {
margin: 0 0 var(--ofc-space-5, 20px);
max-width: 62ch;
color: var(--ofc-text-muted);
font-size: var(--ofc-size-body-sm);
}
@media (prefers-reduced-motion: reduce) {
[data-faq] summary::after { transition: none; }
}
/* ================== o menu abrindo, item por item =========================
Pedido do João: ao clicar no botão, o menu não deve simplesmente aparecer —
deve carregar item por item.
É `animation`, não `transition`, de propósito: o estado fechado é
`display: none`, e transição não roda em elemento que acabou de existir.
Animação roda. O preço é que só a ABERTURA é animada; fechar continua
instantâneo, que é o comportamento normal de menu e não incomoda.
`both` no fill faz o item nascer no primeiro quadro da animação em vez de
piscar no estado final antes de começar. */
[data-site-header].abrindo[data-menu="aberto"] {
animation: ofc-painel-entra 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
[data-site-header].abrindo[data-menu="aberto"] > nav a,
[data-site-header].abrindo[data-menu="aberto"] > [data-aba-sep],
[data-site-header].abrindo[data-menu="aberto"] > [data-cta-topo] {
animation: ofc-item-entra 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
[data-site-header].abrindo[data-menu="aberto"] > nav a:nth-child(1) { animation-delay: 80ms; }
[data-site-header].abrindo[data-menu="aberto"] > nav a:nth-child(2) { animation-delay: 140ms; }
[data-site-header].abrindo[data-menu="aberto"] > nav a:nth-child(3) { animation-delay: 200ms; }
[data-site-header].abrindo[data-menu="aberto"] > [data-aba-sep] { animation-delay: 240ms; }
[data-site-header].abrindo[data-menu="aberto"] > [data-cta-topo] { animation-delay: 270ms; }
@keyframes ofc-painel-entra {
from { opacity: 0; transform: translateY(-10px) scale(0.97); }
to { opacity: 1; transform: none; }
}
@keyframes ofc-item-entra {
from { opacity: 0; transform: translateY(-7px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
[data-site-header].abrindo[data-menu="aberto"],
[data-site-header].abrindo[data-menu="aberto"] > nav a,
[data-site-header].abrindo[data-menu="aberto"] > [data-aba-sep],
[data-site-header].abrindo[data-menu="aberto"] > [data-cta-topo] { animation: none; }
}
/* ============================ modal =======================================
Sem uso nas cinco páginas hoje (o briefing virou WhatsApp), mas o desenho
fica: é o destino previsto se o formulário voltar. */
[data-modal] {
position: fixed;
inset: 0;
z-index: 200;
display: none;
align-items: flex-start;
justify-content: center;
padding: var(--ofc-space-6, 24px);
overflow-y: auto;
overscroll-behavior: contain;
}
[data-modal][data-aberto] { display: flex; }
[data-modal-fundo] {
position: fixed;
inset: 0;
background: rgba(12, 10, 7, 0.72);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
animation: ofc-fundo-entra 260ms ease both;
}
@keyframes ofc-fundo-entra { from { opacity: 0; } to { opacity: 1; } }
[data-modal-caixa] {
position: relative;
z-index: 1;
/* sem border-box o padding soma por fora e o teto de 760 vira 890 */
box-sizing: border-box;
width: 100%;
max-width: 760px;
margin-block: auto;
padding: var(--ofc-space-8, 32px);
border-radius: var(--lg-raio);
animation: ofc-caixa-entra 320ms cubic-bezier(0.22, 1.08, 0.36, 1) both;
}
@keyframes ofc-caixa-entra {
from { opacity: 0; transform: translateY(14px) scale(0.985); }
to { opacity: 1; transform: none; }
}
[data-modal-fecha] {
position: absolute;
top: 14px;
right: 14px;
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
color: var(--pergaminho);
font-size: 18px;
line-height: 1;
cursor: pointer;
}
/* a página não rola atrás do modal */
html[data-travado], body[data-travado] { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
[data-modal-fundo], [data-modal-caixa] { animation: none; }
}
@media (max-width: 760px) {
[data-modal] { padding: var(--ofc-space-3, 12px); }
[data-modal-caixa] { padding: var(--ofc-space-6, 24px) var(--ofc-space-4, 16px); }
}
/* o container do _ds carrega largura e padding de página; dentro do modal
quem manda na medida é a caixa */
[data-modal-caixa] .ofc-container {
max-width: 100% !important;
padding-inline: 0 !important;
}
[data-modal-caixa] [data-secao],
[data-modal-caixa] .ofc-root { background: transparent !important; }
/* ============================ quadro ======================================
O cartão da chamada final. Era uma moldura acesa por baixo pela lâmpada;
com a lâmpada removida ele não tem mais de onde reagir, então virou o que
já devia ser: uma placa de vidro maior que as outras. Mesmo material,
raio maior e mais peso de sombra — hierarquia por tamanho, não por cor. */
[data-quadro] {
border-radius: calc(var(--lg-raio) * 1.5);
box-shadow:
inset 0 1px 0 rgba(241, 232, 214, 0.34),
inset 0 -1px 0 rgba(241, 232, 214, 0.08),
inset 0 16px 32px -26px rgba(241, 232, 214, 0.6),
0 1px 1px rgba(0, 0, 0, 0.35),
0 40px 90px -50px rgba(0, 0, 0, 0.98);
}
/* ============================ topo ========================================
A marca fica solta no canto; a cápsula guarda navegação, CTA e menu. */
[data-topo] {
position: fixed;
inset: 0 0 auto 0;
z-index: 60;
padding-block: var(--ofc-space-4, 16px);
pointer-events: none; /* o vão entre marca e cápsula não bloqueia */
}
[data-topo] > * { pointer-events: auto; }
/* Tudo à esquerda desde 26/08. Antes a marca ficava num canto e a cápsula no
outro; agora o botão de menu é a PRIMEIRA CÉLULA da cápsula e ela cresce a
partir dele — o menu abre de dentro do próprio botão, em vez de aparecer no
outro lado da tela. */
[data-topo-linha] {
display: flex;
/* pelo topo, não pelo centro: quando o menu abre no telefone a cápsula
cresce pra baixo, e centralizar faria o corvo afundar até o meio dela */
align-items: flex-start;
justify-content: flex-start;
gap: var(--ofc-space-3, 12px);
flex-wrap: wrap;
}
/* a marca tem 48px de caixa e a cápsula fechada também: alinhados pelo topo,
os dois centros coincidem sem precisar de ajuste */
[data-marca] { margin-top: 0; }
/* [data-topo-esq] existiu por um dia (25/08) e saiu em 26/08: com o botão
dentro da cápsula, não há mais grupo pra agrupar — a marca é filha direta
da linha. */
/* A marca fica solta: sem cápsula, sem borda, sem fundo. Quem separa o corvo
do que rola por trás é a sombra projetada — não uma segunda forma ao lado
da cápsula da navegação. Com a pele clara removida, o corvo é sempre o
claro: não há mais fundo de papel passando por baixo do topo. */
[data-marca] {
display: inline-flex;
align-items: center;
pointer-events: auto;
padding: 4px;
filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 24px rgba(0, 0, 0, 0.45));
transition: transform 320ms cubic-bezier(0.22, 1.08, 0.36, 1);
}
@media (hover: hover) and (pointer: fine) {
[data-marca]:hover { transform: translateY(-1px) scale(1.03); }
}
[data-site-header] {
pointer-events: auto;
display: flex;
align-items: center;
gap: var(--ofc-space-5, 20px);
padding: 6px;
border-radius: var(--ofc-radius-pill, 999px);
}
/* ====================== abas que abrem ===================================
Portado da referência `animacoes/expandable-tabs.md`: no repouso a aba é só
o ícone; a que está ativa — ou sob o cursor — abre e revela o nome.
Do original vieram o comportamento e o desenho. Não veio nada do resto: lá
são React, Tailwind, framer-motion, usehooks-ts e lucide-react; aqui são
três SVG escritos à mão e uma transição de CSS. Regra da casa: vendoriza ou
não entra, e cinco dependências para um menu de três itens não paga.
O QUE MUDA NA ADAPTAÇÃO: no original o estado vem de um clique que guarda
índice em React. Num site, clicar em item de menu **navega** — guardar
seleção seria estado que morre no próximo carregamento. Então "selecionada"
passa a querer dizer **a página em que você está** (`aria-current="page"`,
posto pelo JS), e o hover abre como prévia. Ganha-se de brinde uma coisa
que o original não tem: o menu diz onde você está.
A abertura é `grid-template-columns: 0fr → 1fr`, não `max-width`. Largura
automática não anima; a coluna de grade anima até o tamanho exato do texto,
sem precisar medir nada em JavaScript. */
[data-site-header] > nav {
display: flex;
align-items: center;
gap: 2px;
font-size: var(--ofc-size-body-sm);
}
[data-site-header] > nav a {
display: inline-flex;
align-items: center;
gap: 0;
padding: 8px;
border-radius: 999px;
color: var(--ofc-text-muted);
transition: background-color 260ms ease, color 260ms ease,
gap 420ms cubic-bezier(0.22, 1, 0.36, 1),
padding 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
[data-site-header] > nav a svg { width: 20px; height: 20px; flex: none; display: block; }
[data-rotulo] {
display: grid;
grid-template-columns: 0fr;
opacity: 0;
white-space: nowrap;
transition: grid-template-columns 420ms cubic-bezier(0.22, 1, 0.36, 1),
opacity 240ms ease;
}
/* o filho é quem esconde o texto enquanto a coluna tem largura zero — e ele
continua no DOM, então o leitor de tela lê o nome mesmo com a aba fechada */
[data-rotulo] > span { overflow: hidden; }
[data-site-header] > nav a[aria-current="page"],
[data-site-header] > nav a:hover,
[data-site-header] > nav a:focus-visible {
gap: 8px;
padding-inline: 14px;
color: var(--pergaminho);
background-color: rgba(255, 252, 245, 0.10);
}
[data-site-header] > nav a[aria-current="page"] [data-rotulo],
[data-site-header] > nav a:hover [data-rotulo],
[data-site-header] > nav a:focus-visible [data-rotulo] {
grid-template-columns: 1fr;
opacity: 1;
}
/* O CTA do topo é a quarta aba. Fechado, é só o glifo do WhatsApp; abre no
cursor ou no foco, como as outras três.
Ele deixou de ser componente do `_ds` pra isso: o rótulo precisa morar num
wrapper que colapsa, e o texto passado como filho do componente é nó de
texto puro — CSS não colapsa nó de texto. Continua com as classes
`.ofc-button` do design system, então a aparência é a mesma; o que mudou é
quem monta o HTML. De quebra, é um componente a menos na conta da conversão
pra estático (Bloco 5). */
[data-cta-topo] {
gap: 0;
/* alinha com as abas: elas medem 36px (20 de ícone + 8+8 de folga), e o
botão vinha 7px mais baixo por herdar o padding do tamanho `sm` */
min-height: 36px;
padding-inline: 9px !important;
transition: gap 420ms cubic-bezier(0.22, 1, 0.36, 1),
padding 420ms cubic-bezier(0.22, 1, 0.36, 1),
background-color 240ms ease, box-shadow 240ms ease, transform 240ms ease;
}
/* 1,05em da fonte `caption` dava 14px, contra os 20px dos ícones das abas —
ao lado deles o WhatsApp parecia outro tamanho de peça */
[data-cta-topo]::before { width: 18px !important; height: 18px !important; }
[data-cta-topo]:hover,
[data-cta-topo]:focus-visible {
gap: 8px;
padding-inline: 16px !important;
}
[data-cta-topo]:hover [data-rotulo],
[data-cta-topo]:focus-visible [data-rotulo] {
grid-template-columns: 1fr;
opacity: 1;
}
/* o filete entre a navegação e o CTA, como na referência */
[data-aba-sep] {
flex: none;
width: 1px;
height: 22px;
margin-inline: 4px;
background: rgba(255, 252, 245, 0.28);
}
@media (prefers-reduced-motion: reduce) {
[data-site-header] > nav a, [data-rotulo] { transition: none; }
}
/* três barrinhas: o ícone diz "menu", não "fechar". Vira X só quando existe
um painel aberto por cima — no telefone. */
[data-menu-toggle] span:nth-child(2) { transition: opacity 200ms ease, transform 280ms ease; }
/* O X vale em QUALQUER largura desde 26/08. Antes era só no telefone, com o
argumento de que três barrinhas dizem "menu" e o X só faz sentido havendo
painel por cima. Isso deixou de valer quando o botão virou a primeira
célula da cápsula: agora ele abre e fecha algo visível em toda largura, e
mostrar "menu" com o menu aberto seria mentira.
Quem carrega o estado é o aria-expanded, que o botão tem por obrigação de
acessibilidade — não uma classe inventada. */
[data-menu-toggle][aria-expanded="true"] span:nth-child(2) { opacity: 0; }
[data-menu-toggle][aria-expanded="true"] span:first-child { transform: translateY(6.5px) rotate(45deg); }
[data-menu-toggle][aria-expanded="true"] span:last-child { transform: translateY(-6.5px) rotate(-45deg); }
/* ---------------------------------------------------------------- rodapé
O _ds fecha o rodapé com um filete de 2px em Latão. Numa pele chapada isso
é justamente o degrau de cor que saiu de todo o resto: vira aro de vidro,
como qualquer outra borda do site. */
.ofc-footer { border-top: 1px solid var(--lg-aro); }
/* espaço reservado de foto: sem JS, o slot do Claude Design não existe — o
lugar precisa continuar reservado e dizer o que falta */
[data-foto-pendente] {
position: relative;
width: 100%;
height: 100%;
min-height: 220px;
display: flex;
align-items: center;
justify-content: center;
padding: var(--ofc-space-5, 20px);
border-radius: var(--ofc-radius-md, 12px);
border-style: dashed;
}
[data-foto-pendente] span {
max-width: 30ch;
text-align: center;
font-family: var(--ofc-font-mono);
font-size: var(--ofc-size-micro);
letter-spacing: 0.06em;
color: rgba(241, 232, 214, 0.55);
}
img[data-foto] { width: 100%; height: 100%; object-fit: cover; display: block; }
/* -------------------------------------------------------------- vídeo do hero
O vídeo é fundo, nunca conteúdo: fica na camada 0 da seção (a regra genérica
de [data-secao] > div sobe tudo pra 2, por isso o z-index vem inline no HTML
também). Roda em laço, sem fim e sem quadro de reserva — o arquivo é curto
e emenda em si mesmo.
No celular não adianta reenquadrar: 16:9 dentro de uma tela 9:19 vira uma
fatia estreita. Testado em 62%/30% e 78%/18% — os dois leem como borrão.
Fica o centro: no celular o vídeo é atmosfera, não figura. */
[data-video-fundo] { background: var(--ferro); }
[data-video-fundo] video { will-change: transform; }
/* Véu: cor chapada de Ferro sobre o vídeo, autorizado pelo João em 25/08
depois da medição — com o vídeo cru a sobrelinha do hero dava 1,06:1 e a
descrição 2,28:1, contra um mínimo de 4,5:1 (3:1 acima de 24px).
A primeira tentativa foi a 0,46 e ficou pesada demais: véu é tinta por
cima, levanta o preto e o quadro fica leitoso. Aqui ele é o mais leve que
a conta permite, porque duas outras coisas carregam parte do peso — a
sombra do texto (que escurece só atrás da letra) e a descrição em
Pergaminho no lugar do cinza de apoio. Chapado, não rampa: escurecer por
degradê criaria uma segunda transição competindo com a do pé. */
[data-video-fundo]::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: rgba(20, 17, 12, 0.34);
}
/* Sobre imagem, o texto ainda precisa de um pé próprio: a sombra macia separa
a letra do que passa atrás em qualquer quadro do laço, sem escurecer nada
fora dela. E a descrição sai do cinza de apoio (#a89c8a, feito pra Ferro
chapado) e vai pro Pergaminho — sobre vídeo, cinza é aposta. */
#topo .ofc-hero__title,
#topo .ofc-hero__description,
#topo .ofc-hero__eyebrow,
#topo .ofc-eyebrow,
#topo [data-mono-row] {
text-shadow: 0 1px 2px rgba(12, 10, 7, 0.85), 0 2px 20px rgba(12, 10, 7, 0.7);
}
#topo .ofc-hero__description { color: rgba(241, 232, 214, 0.94); }
#topo .ofc-hero__eyebrow,
#topo .ofc-eyebrow { color: rgba(241, 232, 214, 0.86); }
/* ------------------------------------------------------- pé do fundo do hero
O ÚNICO degradê do site. Uma camada só, ancorada embaixo: transparente no
alto, onde o vídeo aparece limpo, e fechando em Ferro no pé — é o que
segura o texto da primeira dobra e o que emenda o hero com a seção seguinte
sem deixar corte. Sem ele a passagem fica chapada. */
[data-video-pe] {
background: linear-gradient(180deg,
rgba(26, 22, 16, 0) 0%,
rgba(26, 22, 16, 0.06) 20%,
rgba(26, 22, 16, 0.40) 40%,
rgba(26, 22, 16, 0.72) 58%,
rgba(26, 22, 16, 0.92) 80%,
var(--ferro) 100%);
}
@media (max-width: 768px) {
/* na tela estreita o texto ocupa quase toda a altura: o pé sobe. */
[data-video-pe] {
background: linear-gradient(180deg,
rgba(26, 22, 16, 0) 0%,
rgba(26, 22, 16, 0.30) 22%,
rgba(26, 22, 16, 0.62) 48%,
rgba(26, 22, 16, 0.86) 74%,
var(--ferro) 100%);
}
}
/* ============================== faixa em rolagem =========================
Entre o hero e a dor: uma linha do que muda pra quem contrata. Roda por
transform, nunca por left/scroll — fica na GPU e não dispara layout.
O laço é sem emenda porque o trilho tem duas filas idênticas e anda
exatamente meia largura: quando a primeira sai, a segunda está no lugar
dela, pixel a pixel. Por isso a cópia não pode ser abreviada.
Fundo transparente: a faixa usava --ferro-alto, um degrau acima do Ferro, e
esse degrau era visível como "mais uma cor de seção". Agora ela é só duas
linhas de aro sobre o mesmo chão. */
[data-faixa] {
position: relative;
z-index: 3;
overflow: hidden;
background: transparent;
border-block: 1px solid var(--lg-aro);
padding-block: var(--ofc-space-4, 16px);
/* as pontas dissolvem: item cortado na borda lê como bug, não como fluxo */
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
[data-faixa-trilho] {
display: flex;
width: max-content;
animation: ofc-faixa 46s linear infinite;
}
[data-faixa-fila] {
display: flex;
align-items: center;
margin: 0;
padding: 0;
list-style: none;
}
[data-faixa-fila] li {
display: inline-flex;
align-items: center;
white-space: nowrap;
font-family: var(--ofc-font-mono);
font-size: var(--ofc-size-caption);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--latao);
}
/* o losango é separador, não conteúdo: nasce do ::after pra não virar
caractere solto no leitor de tela */
[data-faixa-fila] li::after {
content: "◆";
margin-inline: var(--ofc-space-6, 24px);
font-size: 0.55em;
color: rgba(201, 154, 75, 0.45);
}
@keyframes ofc-faixa {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
/* parar no hover deixa ler o item inteiro sem correr atrás dele */
@media (hover: hover) and (pointer: fine) {
[data-faixa]:hover [data-faixa-trilho] { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
[data-faixa-trilho] { animation: none; }
}
@media (max-width: 768px) {
[data-faixa-fila] li { font-size: var(--ofc-size-micro); }
[data-faixa-fila] li::after { margin-inline: var(--ofc-space-5, 20px); }
[data-faixa-trilho] { animation-duration: 34s; }
}
/* ============================ a prova ====================================
A foto deixa de ser um bloco 4:5 ao lado do texto e passa a ser a seção:
horizontal, sangrada de ponta a ponta, com o conteúdo por cima.
Aqui o escurecimento não é opcional como no hero: no hero o vídeo é o
assunto, aqui a foto é o palco e o assunto é o texto. Ainda assim é cor
chapada, não rampa — a regra da casa não muda por seção. */
[data-prova] { isolation: isolate; }
[data-prova-fundo] {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 42%;
/* a foto vem em luz fria; puxa pro quente da casa */
filter: saturate(0.82) contrast(1.05) sepia(0.14);
}
[data-prova-veu] {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: rgba(20, 17, 12, 0.58);
}
/* Sobre foto, o cinza de apoio (#a89c8a) não serve: medido contra o quadro,
ele dava 3,32:1 e o mínimo é 4,5:1. Aqui a coluna de texto vira Pergaminho
e ganha a mesma sombra macia do hero — é o que permitiu o véu descer de
0,66 para 0,58 e a foto aparecer mais. */
#prova [data-escalonar] .ofc-eyebrow,
#prova [data-escalonar] .ofc-text,
#prova [data-escalonar] .ofc-text--muted { color: rgba(241, 232, 214, 0.94); }
#prova [data-escalonar] .ofc-heading,
#prova [data-escalonar] .ofc-eyebrow,
#prova [data-escalonar] .ofc-text {
text-shadow: 0 1px 2px rgba(12, 10, 7, 0.85), 0 2px 20px rgba(12, 10, 7, 0.7);
}
/* dois caminhos lado a lado; no telefone empilham e ocupam a linha inteira,
porque botão espremido em 375px não é escolha, é sorteio */
[data-acoes-prova] {
display: flex;
flex-wrap: wrap;
gap: var(--ofc-space-4, 16px);
align-items: center;
}
@media (max-width: 560px) {
[data-acoes-prova] { flex-direction: column; align-items: stretch; }
[data-acoes-prova] > a,
[data-acoes-prova] .ofc-button { width: 100%; justify-content: center; }
}
/* ---------------------------------------------------------------- conversa
O trecho da conversa deixa de ser tipografia parada e passa a ser o que
ele é: uma conversa que aconteceu. Bolhas, lados, hora, os dois tiques —
a gramática que qualquer pessoa lê como mensagem sem precisar de legenda.
Não é a interface do WhatsApp: nada de verde, nada de fonte de outra
marca, nada de moldura de aparelho. É a estrutura de um fio de mensagens
nas cores da casa — o que se copia é o gesto, não a tela dos outros.
As bolhas nascem VISÍVEIS. Quem esconde é o JS, que só esconde depois de
existir para poder trazer de volta em ordem. Sem script, a prova continua
legível — a armadilha do elemento que depende do observer para existir já
custou a lâmpada e o fio de luz dos cartões uma vez. */
[data-chat] { padding: var(--ofc-space-6, 24px); }
[data-chat-titulo] {
margin: 0 0 var(--ofc-space-5, 20px);
padding-bottom: var(--ofc-space-4, 16px);
border-bottom: 1px solid var(--lg-aro);
font-family: var(--ofc-font-mono);
font-size: var(--ofc-size-micro);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--latao);
}
[data-chat-fio] {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
[data-chat-bolha] {
position: relative;
max-width: 82%;
padding: 10px 14px 8px;
border-radius: 16px;
font-size: var(--ofc-size-body-sm);
line-height: 1.4;
color: var(--pergaminho);
box-shadow: 0 2px 8px -4px rgba(0, 0, 0, 0.7);
}
/* recebida: o que o assistente perguntou. Canto de cima cortado do lado de
onde a mensagem veio — é o "rabinho" sem desenhar rabinho nenhum. */
[data-chat-bolha="recebida"] {
align-self: flex-start;
border-top-left-radius: 5px;
background: rgba(255, 252, 245, 0.07);
border: 1px solid rgba(255, 252, 245, 0.13);
border-top-color: rgba(255, 252, 245, 0.2);
}
/* enviada: a resposta do dono da empresa. Latão em vez do verde da outra
marca — e é aqui que mora a frase que dói, então ela ganha o acento. */
[data-chat-bolha="enviada"] {
align-self: flex-end;
border-top-right-radius: 5px;
background: rgba(201, 154, 75, 0.20);
border: 1px solid rgba(201, 154, 75, 0.38);
border-top-color: rgba(201, 154, 75, 0.55);
}
[data-chat-bolha] time {
display: inline-block;
margin-left: 10px;
transform: translateY(1px);
font-family: var(--ofc-font-mono);
font-size: 10px;
letter-spacing: 0.04em;
color: rgba(241, 232, 214, 0.55);
white-space: nowrap;
}
[data-chat-bolha="enviada"] time { color: rgba(241, 232, 214, 0.6); }
[data-chat-bolha] time::after { content: ""; }
[data-chat-bolha="enviada"] time::after {
content: " ✓✓";
color: var(--latao);
letter-spacing: -0.15em;
}
/* os três pontos. Nasce escondido: sem JS ele nunca aparece, e a conversa
fica sendo só as quatro mensagens. */
[data-chat-digitando] {
display: none;
align-self: flex-start;
gap: 5px;
padding: 13px 16px;
border-radius: 16px;
border-top-left-radius: 5px;
background: rgba(255, 252, 245, 0.07);
border: 1px solid rgba(255, 252, 245, 0.13);
}
[data-chat-digitando][data-lado="enviada"] {
align-self: flex-end;
border-radius: 16px;
border-top-right-radius: 5px;
background: rgba(201, 154, 75, 0.16);
border-color: rgba(201, 154, 75, 0.3);
}
[data-chat-digitando].mostrando { display: inline-flex; }
[data-chat-digitando] span {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(241, 232, 214, 0.75);
animation: ofc-chat-ponto 1.25s ease-in-out infinite;
}
[data-chat-digitando] span:nth-child(2) { animation-delay: 0.16s; }
[data-chat-digitando] span:nth-child(3) { animation-delay: 0.32s; }
@keyframes ofc-chat-ponto {
0%, 72%, 100% { opacity: 0.3; transform: translateY(0); }
36% { opacity: 1; transform: translateY(-3px); }
}
/* o estado escondido só existe depois que o JS assume a sequência */
[data-chat].tem-js [data-chat-bolha] {
opacity: 0;
transform: translateY(10px) scale(0.97);
}
[data-chat].tem-js [data-chat-bolha].chegou {
opacity: 1;
transform: none;
transition: opacity 240ms ease, transform 420ms cubic-bezier(0.22, 1.2, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
[data-chat-digitando] span { animation: none; }
}
@media (max-width: 900px) {
[data-prova-fundo] { object-position: center 38%; }
[data-prova-veu] { background: rgba(20, 17, 12, 0.74); }
[data-chat-bolha] { max-width: 90%; }
}