/* ============================================================================= Totonho Locações — o que o theme.json não cobre. Um arquivo só. Cartão creme sobre foto, aba de rótulo, filete dourado, foco, barra fixa e formulário. Nada de framework, nada de biblioteca de carrossel. PALETA: manual da marca de out/2024 (rosa #F7EDEC · vinho #761752 · dourado #B89E7B · creme #FAEDCD). O papel de cada cor mudou em 10/08/2026: o claro virou a superfície dominante, o DOURADO virou a presença da marca (faixa, painel, rodapé, aba, filete) e o VINHO virou tinta e ênfase sobre o claro — que é onde ele mede 9 a 10:1. Régua completa no design-system.md §3. ========================================================================== */ :root{ /* forma */ --raio-botao:999px; --raio-campo:2px; --raio-cartao:0; --filete:1px solid var(--wp--preset--color--linha); --filete-nobre:1px solid var(--wp--preset--color--dourado); --sombra-barra:0 -1px 12px rgba(42,18,32,.14); --sombra-menu:0 12px 28px rgba(42,18,32,.16); --sombra-contato:0 8px 14px -10px rgba(42,18,32,.35); --transicao:160ms ease-out; --veu-foto:inset 0 0 0 1px rgba(90,15,61,.10); /* Véu do cabeçalho transparente sobre o hero — TRÊS botões, e os três são medidos (a conta inteira, com a tabela, está na nota do "cabeçalho"): --veu-cabecalho o creme CHAPADO, do topo à base da barra; --veu-topo o creme do DEGRADÊ, que começa no alto e some na base; --veu-desfoque o raio do backdrop-filter. 70% → 55% → **54%**, que é o PISO medido em 11/08. Abaixo disso o menu e a assinatura caem de 4,5:1 sobre a foto mais escura da vitrine. Os outros dois botões existem porque são as compensações autorizadas — e as duas foram testadas e quase não pagam (números na nota). Mexer em um sem remedir os três é o que quebra AA. */ /* O tom da barra sólida, e a base do véu translúcido: mesmo creme do manual, lavado com branco. Ver a nota em `.tt-header`. */ --fundo-cabecalho:color-mix(in srgb, var(--wp--preset--color--creme) 35%, var(--wp--preset--color--papel)); --veu-cabecalho:color-mix(in srgb, var(--fundo-cabecalho) 62%, transparent); --veu-topo:22%; --veu-desfoque:24px; /* ----------------------------------------------------------------------- SUPERFÍCIE CREME TRANSLÚCIDA — o "mais leve" pedido pelo cliente em 10/08. O creme do manual (#FAEDCD) é uma cor saturada para uma área grande: em bloco sólido, cada caixa de formulário, cada CTA e cada cartão viravam uma mancha bege pesada no meio do branco. Aqui ele passa a entrar a 55% — translúcido de verdade, e não um segundo tom inventado (tom aproximado foi exatamente o erro que o manual da marca veio corrigir, ver design-system §3). Sobre o papel branco da página o resultado efetivo é #FCF5E4, e o contraste MELHORA em todos os pares (fundo mais claro, tinta igual): tinta #2A1220 14,98:1 → 16,25:1 tinta-suave #5F4C56 6,80:1 → 7,37:1 vinho #761752 8,96:1 → 9,72:1 dourado-texto #7A5C33 5,30:1 → 5,75:1 Nenhum par sai de AA; três deles ganham folga. Em navegador sem `color-mix` o token continua sendo o creme sólido — a página fica como estava, nunca sem fundo. */ --superficie-creme:var(--wp--preset--color--creme); /* containers */ --lg-catalogo:1180px; --lg-institucional:1080px; /* Coluna de leitura: 720 px era largura FIXA e, numa tela de 1440, o cliente leu como fita estreita no meio de um deserto. Agora cresce com a tela até 880 px — o texto continua no conforto de leitura (o `max-width` em `ch` do `.tt-artigo` é quem manda nele), e quem ganha a largura extra é tabela, imagem e destaque, que transbordam a coluna (ver "guias"). */ --lg-leitura:720px; --margem:20px; } @supports (background:color-mix(in srgb,#000 50%,transparent)){ :root{--superficie-creme:color-mix(in srgb, var(--wp--preset--color--creme) 55%, transparent)} } @media(min-width:1280px){:root{--lg-leitura:800px}} @media(min-width:1600px){:root{--lg-leitura:880px}} /* Fundo de seção em creme translúcido. Substitui os `style="background:var(--wp--preset--color--creme)"` que estavam escritos à mão em quatro patterns — a regra vive aqui, e muda em um lugar só. */ .tt-fundo-creme{ background:var(--superficie-creme); border-top:var(--filete);border-bottom:var(--filete); } /* ---------- base ---------------------------------------------------------- */ /* ----------------------------------------------------------------------------- box-sizing: border-box — a linha que faltava. Sem ela, `padding` SOMA à `width`. As duas fotos de peça combinam `width:100%` com `padding:12%` (cartão do catálogo) e `padding:10%` (página de item): 124% e 120% de largura de coluna. Numa tela de 390 px o documento passava a medir 439 px — 49 px a mais. Consequências medidas em 07/08: • o botão "WhatsApp" da barra fixa terminava em 439 px, com 22% dele fora da tela — o CTA principal, na página de produto, no aparelho onde o público está; • o texto do banner de consentimento saía cortado à direita; • a página inteira rolava de lado; • no cartão de categoria o `overflow:hidden` salvava o layout cortando a peça: a Cadeira Luxemburgo perdia os pés e o topo do encosto. O design-system §9 pede 12% de RESPIRO; o render entregava 12% de CORTE. Vale para tudo (`*` e pseudoelementos), e não só para as imagens, porque a mesma soma silenciosa acontecia nos campos do formulário (`width:100%` com `padding:11px 13px`) e em todo contêiner com `max-width` + `padding-inline`. É o comportamento que o resto do CSS já assumia sem nunca ter sido declarado. -------------------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important} } body{padding-bottom:0} img{max-width:100%;height:auto} ::selection{background:var(--wp--preset--color--creme);color:var(--wp--preset--color--tinta)} /* ---------- revelação na rolagem ------------------------------------------ */ /* ----------------------------------------------------------------------------- Cada bloco que entra na tela sobe alguns pixels e aparece. É o efeito que a cliente viu no protótipo (`totonholocacoes.lovable.app`) e pediu. ⚠️ ESTA REGRA MORA DE PROPÓSITO COLADA NA DE `prefers-reduced-motion` ACIMA. A de cima zera `transition` no site inteiro com `!important`. Um estado inicial `opacity:0` que dependesse da transição para voltar a 1 ficaria ESCONDIDO PARA SEMPRE em quem pede movimento reduzido — é o erro clássico dessa combinação, e é justamente quem não pode pagar por ele. Por isso o estado inicial inteiro está dentro de `no-preference`: com `reduce` a regra não existe, nada esconde, e não há nada para "destravar". As três travas que sustentam o efeito: 1. **NADA ESCONDE SEM JAVASCRIPT.** São duas condições, e as duas são postas pelo JS: a classe `tt-revela-ativo` no `` e o atributo `data-tt-revela` no elemento. Sem o arquivo de script — bloqueado, quebrado, desligado — a página sai inteira, com tudo em `opacity:1`. O protótipo faz o contrário (esconde no CSS e conta com o script para mostrar), e é assim que uma página vira uma tela em branco com o conteúdo todo lá dentro. O editor de blocos do WordPress carrega este mesmo arquivo por `add_editor_style()` e não roda o `interacoes.js`: pela mesma trava, nada some na hora de editar. 2. **SÓ `opacity` E `transform`.** As duas são de compositor: animam fora do fluxo, sem recalcular layout e sem deslocar vizinho. Nenhuma linha aqui toca `height`, `margin`, `top` ou `display` — é o que mantém o CLS em 0. 3. **QUEM ESTÁ ACIMA DA DOBRA NUNCA É MARCADO.** Isso é decidido no JS, que mede a posição de cada candidato antes de escrever o atributo. Esconder o LCP para depois revelá-lo atrasaria a primeira pintura — o contrário do que o efeito quer transmitir. Os números (deslocamento, tempo e curva) são tokens: mexer em um lugar muda o site inteiro. A curva é uma saída suave de verdade (começa rápido, pousa devagar). O protótipo usa `cubic-bezier(.4,0,.2,1)`, que também desacelera a ENTRADA — em 24 px isso lê como atraso, não como suavidade. -------------------------------------------------------------------------- */ :root{ --revela-sobe:24px; /* bloco de seção */ --revela-tempo:520ms; --revela-curva:cubic-bezier(.22,.61,.36,1); } @media (prefers-reduced-motion:no-preference){ html.tt-revela-ativo [data-tt-revela]{ opacity:0; transform:translateY(var(--revela-sobe)); transition:opacity var(--revela-tempo) var(--revela-curva), transform var(--revela-tempo) var(--revela-curva); } /* Cartão de grade sobe menos e chega antes: são vários ao mesmo tempo, e o que dá o ritmo da cascata é o atraso entre irmãos (no JS), não a distância de cada um. */ html.tt-revela-ativo [data-tt-revela="cartao"]{--revela-sobe:16px;--revela-tempo:440ms} /* Foto de corpo, tabela, faixa de CTA: no meio do caminho. */ html.tt-revela-ativo [data-tt-revela="apoio"]{--revela-sobe:20px;--revela-tempo:480ms} html.tt-revela-ativo [data-tt-revela].tt-revelado{opacity:1;transform:none} } /* Impressão não tem rolagem: se o JS marcou e a página foi para o papel antes de o bloco entrar na tela, ele sairia branco. */ @media print{ html.tt-revela-ativo [data-tt-revela]{opacity:1!important;transform:none!important} } /* ----------------------------------------------------------------------------- As duas correções de estrutura do block theme — e as duas são no MESMO lugar: os filhos diretos de `.wp-site-blocks`, que é o contêiner que o WordPress põe em volta de header + main + footer. 1. CABEÇALHO QUE NÃO GRUDAVA. `position:sticky` estava no `.tt-header`, e o pai dele é o `
` que o template part gera — uma caixa com EXATAMENTE a altura do cabeçalho. Sticky só percorre a caixa do pai: sem folga nenhuma para percorrer, o elemento nunca gruda. Medido em 07/08, rolando 1200 px: `.tt-header` ia para `top: -1200`, ou seja, subia junto com a página como se fosse estático. O sticky sobe um nível, para o próprio wrapper do template part, cujo pai é o `.wp-site-blocks` — que abrange a página inteira. Vale em todas as páginas de uma vez porque todo template do tema usa o mesmo template part. 2. FAIXA BRANCA NO TOPO DO HERO. Medido: `headerBottom: 84` e topo da abertura em `102` — 18 px de papel entre os dois. Não vinha do hero: vinha do `blockGap` de 1.125rem (= 18 px) do theme.json, que o core aplica como `margin-block-start` em TODO filho direto de `.wp-site-blocks`. Zerar aqui não mexe no blockGap de dentro das seções, que é onde ele serve para alguma coisa. -------------------------------------------------------------------------- */ .wp-site-blocks > header{ position:sticky;top:0;z-index:60; /* O wrapper carrega a MESMA cor do cabeçalho sólido: sem isso, a faixa que gruda fica transparente por 1 px nas bordas quando a página rola. Sobre o hero ele fica transparente — a regra do overlay, logo abaixo, cuida disso. */ background:var(--wp--preset--color--creme); } .wp-site-blocks > main, .wp-site-blocks > footer{margin-block-start:0} /* O cabeçalho perde o blockGap por conta própria porque, quando ele sobrepõe o hero, quem zera a margem é a regra do overlay. Mantido aqui para o caso sem hero. */ .wp-site-blocks > header{margin-block-start:0} /* ----------------------------------------------------------------------------- CABEÇALHO SOBREPOSTO AO HERO — a decisão de layout, em duas linhas de CSS. ⚠️ REESCRITO EM 10/08 — o seletor antigo era `body:has(.tt-abertura:not( .tt-abertura-compacta))`, que pergunta "existe um cartaz sangrado em ALGUM lugar desta página?". A pergunta certa é outra: "a página COMEÇA com um cartaz sangrado?". Com a pergunta errada, bastava um cartaz no meio do documento para o cabeçalho ficar transparente sobre papel branco E o `main` inteiro subir 64 px — ou seja, o começo da página desaparecendo atrás da barra. Foi o defeito que o cliente reportou, e ele não depende de sorte: qualquer página futura que ganhe uma foto sangrada no meio o reproduz. Agora a marca é EXPLÍCITA (`.tt-hero-cartaz`, carimbada pelo PHP na vitrine da home e na abertura em cartaz — nunca na variante compacta) e ela só vale como PRIMEIRO filho do conteúdo. Os dois seletores cobrem as duas formas em que o WordPress monta a página: • home (front-page): `main > section.tt-hero-cartaz` • páginas com pattern: `main > div.entry-content > section.tt-hero-cartaz` A margem negativa puxa o conteúdo para debaixo do cabeçalho SEM tirá-lo do fluxo — é isso que preserva o `position:sticky` (armadilha 5 do manutencao.md: sticky precisa de espaço no PAI, e o pai continua sendo o `.wp-site-blocks`). `:has()` em vez de classe no por JS: assim não há salto de layout entre a primeira pintura e a execução do script. O JS só decide TRANSPARENTE × SÓLIDO. Em navegador sem `:has()`, nada disso aplica: a barra nasce sólida e o conteúdo começa abaixo dela — degrada para o certo, nunca para o escondido. -------------------------------------------------------------------------- */ body:has(main > .tt-hero-cartaz:first-child), body:has(main > :first-child > .tt-hero-cartaz:first-child){ --tt-hero-no-topo:1; } body:has(main > .tt-hero-cartaz:first-child) .wp-site-blocks > header, body:has(main > :first-child > .tt-hero-cartaz:first-child) .wp-site-blocks > header{ background:transparent; margin-block-end:calc(-1 * var(--altura-cabecalho)); } /* Foco: vinho sobre claro (10,4:1 no branco, 9,1 no rosa, 9,0 no creme) e vinho-profundo sobre dourado (5,2:1). Nunca outline:none. */ :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{ outline:2px solid var(--wp--preset--color--tinta); outline-offset:2px; } .tt-sobre-dourado :where(a,button,summary,input,select):focus-visible, .tt-footer :where(a,button):focus-visible, .tt-painel-orcamento :where(a,button):focus-visible{ outline-color:var(--wp--preset--color--tinta); } .tt-skip{ position:absolute;left:-9999px;top:0;z-index:999; background:var(--wp--preset--color--papel);color:var(--wp--preset--color--dourado-texto); padding:12px 18px;font-weight:700;text-decoration:underline; } .tt-skip:focus{left:8px;top:8px} /* ---------- utilitários de largura ---------------------------------------- */ .tt-larg{max-width:var(--lg-catalogo);margin-inline:auto;padding-inline:var(--margem)} .tt-larg-inst{max-width:var(--lg-institucional);margin-inline:auto;padding-inline:var(--margem)} .tt-larg-leitura{max-width:var(--lg-leitura);margin-inline:auto;padding-inline:var(--margem)} /* ----------------------------------------------------------------------------- RITMO VERTICAL — UMA ESCALA SÓ, TRÊS TAMANHOS. (reescrito em 10/08) O que havia antes: `.tt-secao` com 56/96 px, `.tt-secao-painel` com 64/112, e mais dezoito ajustes escritos à mão dentro dos patterns (`style="padding-top:8px"`, `16px`, `24px`, `32px`, `0`…). O resultado, medido nas 27 páginas em 1440: o vão entre duas seções ia de **32 px a 283 px**, com 23 valores diferentes. É exatamente o que o cliente descreveu — "umas muito mais espaçadas que outras". Agora existe UMA escala, e nada fora dela: --ritmo seção normal --ritmo-solto seção com painel de cor (o painel pede mais ar) --ritmo-colado continuação da seção de cima (trilha, nota de rodapé) E dois modificadores, para emendar duas seções sem inventar um quarto tamanho: `.tt-sem-topo` e `.tt-sem-base`. ⚠️ Regra da casa: **espaçamento de seção não se escreve em `style=`**. Se faltar um tamanho, ele entra aqui, na escala, e passa a valer no site inteiro. O vão entre duas seções é, agora, a soma de dois valores da escala — e só. Foi preciso zerar duas coisas para isso ser verdade: 1. o `blockGap` de 18 px que o core põe entre os filhos do `main` (ele somava um valor que não é da escala); 2. a margem do PRIMEIRO e do ÚLTIMO filho de cada contêiner (um `h2` de artigo carrega 48 px de margem superior — era ele que fazia o vão saltar para 192 px em `/catalogo/cadeiras/`). -------------------------------------------------------------------------- */ :root{ --ritmo:28px; --ritmo-solto:40px; --ritmo-colado:12px; } @media(min-width:900px){ :root{--ritmo:40px;--ritmo-solto:56px;--ritmo-colado:16px} } .tt-secao{padding-block:var(--ritmo)} .tt-secao-solta, .tt-secao-painel{padding-block:var(--ritmo-solto)} .tt-secao-colada{padding-block:var(--ritmo-colado)} .tt-sem-topo{padding-block-start:0} .tt-sem-base{padding-block-end:0} /* A trilha logo abaixo do hero é uma faixa, não uma seção: ar em cima, quase nada embaixo, porque ela pertence ao bloco que vem depois. */ .tt-faixa-trilha{padding-block:var(--ritmo) var(--ritmo-colado)} /* (1) O blockGap do core entre as seções do main — fora. Quem manda no vão é a escala acima. Dentro das seções o blockGap continua valendo. */ .wp-site-blocks main > *, .wp-site-blocks main > .entry-content > *{margin-block-start:0} /* (2) Margem do primeiro/último filho de cada contêiner — fora. Sem isto, a margem de 48 px de um `h2` de artigo se soma ao padding da seção e o ritmo deixa de ser previsível. */ /* ⚠️ SEM `:where()` aqui, e isso é medição, não gosto: `:where()` zera a especificidade, e a regra perdia para `.tt-artigo h2{margin:48px 0 16px}` (0,1,1). O resultado era um vão de 86 px onde a escala mandava 16. Com `.tt-artigo > :first-child` a conta é (0,2,0) e a margem do primeiro título realmente some. */ .tt-larg > :first-child, .tt-larg-inst > :first-child, .tt-larg-leitura > :first-child, .tt-artigo > :first-child{margin-block-start:0} .tt-larg > :last-child, .tt-larg-inst > :last-child, .tt-larg-leitura > :last-child, .tt-artigo > :last-child{margin-block-end:0} /* ----------------------------------------------------------------------------- RITMO CENTRALIZADO — uma regra só, para o site inteiro. A queixa do cliente ("o conteúdo está mais para a esquerda") tinha causa medida e ela não era da página: a coluna de leitura `.tt-artigo` limitava a largura (`max-width`) mas não tinha `margin-inline:auto`. Dentro de um contêiner de 1080 px ela encostava na esquerda e sobrava tudo à direita. Medido em 07/08, viewport de 1440: /sobre/ .tt-artigo esquerda 200 · direita 423 /aluguel-para-festas-em-maringa/ .tt-artigo esquerda 200 · direita 423 /como-funciona-a-locacao/ .tt-artigo esquerda 200 · direita 423 /catalogo/cadeiras/ .tt-artigo esquerda 200 · direita 423 223 px de diferença entre um lado e o outro, em toda página com texto. É exatamente o que se vê como "torto para a esquerda". O que este bloco faz, e o que deliberadamente NÃO faz: • toda coluna de conteúdo passa a ficar no eixo (`margin-inline:auto`); • abertura de seção — sobretítulo, título, linha de apoio — e todo bloco de CTA ficam centralizados, no mesmo ritmo da home; • texto CORRIDO de artigo continua alinhado à esquerda, dentro da coluna centralizada. Parágrafo de 70 caracteres centralizado obriga o olho a procurar o começo de cada linha — é problema conhecido de leitura, ainda mais para quem tem dislexia. A página fica centrada; a leitura, não. -------------------------------------------------------------------------- */ /* 1. Toda coluna de conteúdo no eixo. ⚠️ Reescrito em 10/08: a lista nominal ("`.tt-larg > p`, `.tt-larg-inst > p`…") cobria o parágrafo e esquecia a DIV. Foi por isso que sobrou torto justamente o bloco do print do cliente — "Assessorias e cerimonialistas agora têm por onde começar" é um `
` dentro de `.tt-larg-inst`, e uma caixa com `max-width` e sem `margin-inline:auto` encosta na esquerda e deixa 376 px de papel do outro lado (medido em 1440). Agora vale para TODO filho direto de contêiner de largura, seja qual for a tag: caixa larga fica larga do mesmo jeito, caixa estreita fica no eixo. */ .tt-larg > *, .tt-larg-inst > *, .tt-larg-leitura > *, .tt-artigo, .tt-abertura-simples .tt-resposta, .tt-faq-resposta{margin-inline:auto} /* 2. Abertura de seção centralizada. O `> p` agora é geral (era só `h2 + p`): o segundo parágrafo de uma seção ficava alinhado à esquerda dentro de uma caixa centralizada, que é a pior combinação — parece desalinhado sem que nada esteja errado no CSS. */ .tt-sobretitulo{justify-content:center;text-align:center} .tt-larg > h1, .tt-larg > h2, .tt-larg-inst > h1, .tt-larg-inst > h2, .tt-larg-leitura > h1, .tt-larg-leitura > h2, .tt-abertura-simples > h1, .tt-artigo > h2, .tt-artigo > h3, .tt-faq > h2, .tt-larg > p, .tt-larg-inst > p, .tt-bloco-centrado, .tt-abertura-simples .tt-resposta{text-align:center} /* Caixa de texto estreita dentro de uma seção larga (chamada de convite, nota introdutória). Existe para não haver mais `style="max-width:64ch"` solto: com `max-width` e sem eixo, a caixa encosta na esquerda. */ .tt-bloco-centrado{max-width:64ch;margin-inline:auto} /* Pilha vertical de blocos dentro de uma seção — o espaçamento sai da escala. ⚠️ NÃO usar `display:grid` para empilhar: em contêiner de grade, um filho com `margin-inline:auto` deixa de esticar e encolhe para o tamanho do conteúdo. Foi o que quebrou a grade de canais de `/contato/` (os quatro cartões viraram uma coluna só) quando a regra de centralização passou a valer para toda caixa. Fluxo normal + margem entre irmãos resolve os dois de uma vez. */ .tt-pilha > * + *{margin-block-start:var(--ritmo)} .tt-bloco-centrado .tt-acoes{justify-content:center} /* 3. Trilha, ações e chamada inline acompanham o eixo. */ .tt-trilha ol{justify-content:center} .tt-acoes,.tt-form-acoes{justify-content:center} .tt-cta-inline{text-align:center;margin-inline:auto} .tt-cta-inline .tt-acoes{justify-content:center} /* 4. Blocos em colunas: passos, faixa de prova e cartão de categoria também ficam centrados, senão o "ritmo" quebra justo onde há mais respiro. */ .tt-passo,.tt-prova-col{text-align:center} .tt-passo p,.tt-prova-txt{margin-inline:auto;max-width:34ch} .tt-passo .tt-marcador,.tt-prova-col .tt-marcador{margin-inline:auto} .tt-cartao-cat-txt{text-align:center} .tt-cartao-cat-txt .tt-marcador{margin-inline:auto} .tt-prova-card figcaption{text-align:center;margin-inline:auto;max-width:44ch} /* 5. Exceções — onde centralizar atrapalharia de verdade. Lista com marcador à esquerda, tabela, ficha do item e rodapé são estruturas de leitura em coluna: centralizar embaralha o alinhamento do marcador e da primeira coluna. */ .tt-lista-check,.tt-tabela,.tt-tabela th,.tt-tabela td, .tt-ficha,.tt-footer,.tt-item,.tt-form,.tt-painel-convite{text-align:left} .tt-artigo ul,.tt-artigo ol{text-align:left} /* Blocos em DUAS COLUNAS (ficha da peça ao lado da foto; convite do painel ao lado do formulário): centralizar só o sobretítulo e os botões deixava o título e o parágrafo à esquerda e o resto no meio — o pior dos dois. Nestes dois, tudo à esquerda. */ .tt-footer .tt-sobretitulo, .tt-item .tt-sobretitulo, .tt-painel-convite .tt-sobretitulo{justify-content:flex-start;text-align:left} .tt-item .tt-acoes, .tt-painel-convite .tt-acoes{justify-content:flex-start} .tt-painel-convite p{margin-inline:0} /* ---------- rótulo, sobretítulo, marcador dourado ------------------------- */ .tt-rotulo,.tt-sobretitulo,.tt-aba-ficha,.tt-trilha,.tt-legenda{ font-family:'Caviar Dreams','Century Gothic',sans-serif; } /* Sobretítulo (o "eyebrow" de cada seção). Era 12 px / peso 700 / tracking .16em. O cliente leu como caixa alta apertada e tracking exagerado, e ele tem razão: .16em em peso 700 fecha o desenho da letra e abre demais o espaço, que é a combinação que parece "fonte errada". Agora 12 px / peso 600 / .11em, com entrelinha maior — o gesto de caixa alta espaçada da marca continua (é citação do "LOCAÇÕES PARA FESTAS" do logo), sem o exagero. A hierarquia com o título passa a ser por PESO (600 rótulo · 300 display), como nos catálogos 2026. */ .tt-sobretitulo{ font-size:.75rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase; line-height:1.5;color:var(--wp--preset--color--tinta-suave); margin:0 0 16px;display:flex;align-items:center;gap:14px; } /* Marcador: VINHO, não dourado — e a razão é dura. O dourado mede 2,20:1 sobre creme e 2,56:1 sobre branco. Como superfície e como filete isso basta (não carrega informação); como MARCADOR de hierarquia antes do sobretítulo, ele é o único sinal daquele nível e some na tela do cliente. Regra da casa, escrita no design-system §3: **dourado nunca carrega informação sozinho**. Sobre dourado o marcador vira tinta (6,8:1). */ .tt-marcador{display:inline-block;width:56px;height:2px;background:var(--wp--preset--color--dourado-texto);flex:none} .tt-sobre-dourado .tt-sobretitulo,.tt-painel-orcamento .tt-sobretitulo{color:var(--wp--preset--color--tinta)} .tt-sobre-dourado .tt-marcador,.tt-painel-orcamento .tt-marcador{background:var(--wp--preset--color--tinta)} .tt-legenda{font-size:.875rem;line-height:1.55;color:var(--wp--preset--color--tinta-suave)} /* NOME DE COLEÇÃO — REMOVIDO EM 11/08/2026. Aqui moravam `.tt-colecao`, `.tt-colecao-linha`, `.tt-colecao-inline`, `.tt-colecoes-linha` e `.tt-colecoes-sep`: a única aplicação de Great Vibes do site, feita para escrever "Elegance", "Versatile", "Essenziale" e "Madeira de Demolição". A cliente decidiu não evidenciar as coleções; sem o nome na tela, a fonte ficou sem uso e saiu do tema (30 KB), e estas regras foram junto. A taxonomia continua no admin — o que saiu é a exibição. */ /* ----------------------------------------------------------------------------- Marca de conteúdo pendente do cliente. Some antes do go-live — e enquanto estiver aqui tem que ser IMPOSSÍVEL de não ver, porque é ela que impede uma pendência de escapar para o ar. Fora da paleta da marca DE PROPÓSITO: âmbar de obra não existe em nenhum outro lugar do site, então não se confunde com destaque editorial. O `` e o style inline (functions.php) garantem o amarelo mesmo se este arquivo não carregar; aqui vem o tratamento completo. -------------------------------------------------------------------------- */ .tt-pendente{ display:block;margin:14px 0;padding:14px 16px 14px 18px; background:#FFE58A;color:#4A2E00; border:2px dashed #B45309;border-left-width:8px;border-radius:2px; font:700 .9375rem/1.5 'Caviar Dreams','Century Gothic',sans-serif; } .tt-pendente::before{ content:"PENDENTE — NÃO PUBLICAR ASSIM"; display:block;margin-bottom:4px; font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:#7C2D12; } /* Dentro de lista ou tabela, onde o bloco quebraria a leitura, volta a ser inline. */ li>.tt-pendente,td>.tt-pendente{display:inline;margin:0;padding:2px 8px;border-left-width:2px} li>.tt-pendente::before,td>.tt-pendente::before{content:none} @media print{.tt-pendente{outline:3px solid #000}} /* ---------- modal de orçamento -------------------------------------------- */ /* ----------------------------------------------------------------------------- `` nativo. O que ele já resolve sozinho e por isso não está escrito aqui: armadilha de foco, Esc para fechar, o resto da página ficar inerte e o `::backdrop`. Só o que falta é aparência. ⚠️ `dialog` NÃO EXIBIDO tem `display:none` do próprio navegador, e é assim que tem que ser: o formulário existe no HTML de todas as páginas, mas não é focável nem lido enquanto está fechado. -------------------------------------------------------------------------- */ .tt-modal{ padding:0;border:0;background:transparent; width:min(680px, calc(100vw - 32px)); max-height:calc(100svh - 32px); overflow:visible; color:var(--wp--preset--color--tinta); } .tt-modal::backdrop{ background:rgba(26,10,20,.62); -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px); } .tt-modal-caixa{ background:var(--wp--preset--color--papel); border-radius:var(--raio-caixa, 4px); box-shadow:0 24px 64px rgba(42,18,32,.34); padding:26px 24px 28px; /* A rolagem é da CAIXA, não da página: com o modal aberto o corpo fica travado, e sem isto um formulário mais alto que a tela não teria como ser percorrido no celular. */ max-height:calc(100svh - 32px); overflow-y:auto; -webkit-overflow-scrolling:touch; } @media(min-width:700px){.tt-modal-caixa{padding:32px 34px 34px}} .tt-modal-topo{ display:flex;align-items:flex-start;justify-content:space-between;gap:16px; margin:0 0 6px; } .tt-modal-topo h2{margin:0;font-size:clamp(1.35rem,1.2rem + .6vw,1.75rem);line-height:1.15} /* O título recebe foco por script quando o modal abre (é o que faz o leitor de tela anunciar do que a janela trata). Esconder o contorno AQUI é seguro, e só aqui: o elemento tem `tabindex="-1"`, ou seja, nunca é alcançável por Tab — não existe usuário de teclado que precise deste indicador para se localizar. Com o contorno, um h2 ganhava uma caixa em volta e parecia um campo de formulário quebrado. Não replicar isso em nada que seja tabulável. */ .tt-modal-topo h2:focus{outline:none} .tt-modal-linha{ margin:0 0 20px;color:var(--wp--preset--color--tinta-suave); font-size:.9375rem;line-height:1.5; } /* 44×44 de alvo, como todo botão da casa — não o tamanho do desenho do X. */ .tt-modal-fecha{ flex:none;display:inline-flex;align-items:center;justify-content:center; width:44px;height:44px;margin:-8px -8px 0 0;padding:0; background:transparent;border:0;border-radius:var(--raio-botao); color:var(--wp--preset--color--tinta);cursor:pointer; transition:background var(--transicao),color var(--transicao); } .tt-modal-fecha:hover{background:var(--wp--preset--color--creme);color:var(--wp--preset--color--dourado-texto)} /* Dentro do modal o formulário respira menos: ele já está numa caixa. */ .tt-modal .tt-form{margin:0} .tt-modal .tt-form-acoes{margin-top:22px} /* Em tela estreita o modal encosta nas bordas e vira uma folha de baixo para cima — é o gesto que a pessoa espera no celular. */ @media(max-width:559.98px){ .tt-modal{ width:100vw;max-width:100vw;max-height:92svh; margin:auto auto 0; } .tt-modal-caixa{ border-radius:14px 14px 0 0; max-height:92svh; } } /* Movimento: uma entrada curta, e some inteira em movimento reduzido. */ @media (prefers-reduced-motion:no-preference){ .tt-modal[open]{animation:tt-modal-entra 220ms cubic-bezier(.22,.61,.36,1)} .tt-modal[open]::backdrop{animation:tt-veu-entra 220ms ease} } @keyframes tt-modal-entra{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} @keyframes tt-veu-entra{from{opacity:0}to{opacity:1}} /* Corpo travado enquanto o modal está aberto: sem isto, rolar dentro do modal "vaza" e rola a página atrás, no celular. */ body.tt-modal-aberto{overflow:hidden} /* Aviso de foto que ainda não chegou. Substitui a faixa amarela de pendência EM PRODUÇÃO: no ar não cabe "NÃO PUBLICAR ASSIM" num cartão de catálogo, cabe dizer com honestidade que a foto entra depois. Discreto de propósito — é uma ausência, não um destaque. */ .tt-sem-foto-aviso{ display:block;padding:10px 14px; font-size:.875rem;line-height:1.5; color:var(--wp--preset--color--tinta-suave); background:var(--wp--preset--color--creme); border:1px dashed var(--wp--preset--color--linha); border-radius:2px;text-align:center; } /* ---------- botões -------------------------------------------------------- */ .tt-btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; min-height:48px;padding:13px 28px;border-radius:var(--raio-botao); font:700 .9375rem/1.1 'Caviar Dreams','Century Gothic',sans-serif;text-decoration:none;border:1.5px solid transparent; cursor:pointer;transition:background var(--transicao),color var(--transicao),border-color var(--transicao); } .tt-btn-primario{background:var(--wp--preset--color--dourado);color:var(--wp--preset--color--tinta)} .tt-btn-primario:hover{background:var(--wp--preset--color--dourado-texto);color:#fff} .tt-btn-wpp{background:var(--wp--preset--color--verde-wpp);color:#fff} .tt-btn-wpp:hover{background:#0C6234;color:#fff} .tt-btn-fantasma{background:transparent;color:var(--wp--preset--color--dourado-texto);border-color:var(--wp--preset--color--dourado-texto)} .tt-btn-fantasma:hover{background:var(--wp--preset--color--dourado);color:var(--wp--preset--color--tinta)} /* Fantasma SOBRE DOURADO (faixa, painel de orçamento, rodapé). O nome ficou de quando o painel era vinho-profundo; o papel mudou junto com a paleta. Aqui o texto é tinta (6,81:1 sobre dourado) e a borda também — vinho sobre dourado dá 4,08:1, que passa em componente mas não em texto de 15 px. */ .tt-btn-fantasma-escuro{background:transparent;color:var(--wp--preset--color--tinta);border-color:var(--wp--preset--color--tinta)} .tt-btn-fantasma-escuro:hover{background:var(--wp--preset--color--dourado);color:var(--wp--preset--color--tinta);border-color:var(--wp--preset--color--dourado-texto)} /* Botão dourado — a segunda opção medida para o CTA (dourado + tinta, 6,81:1). Só entra sobre superfície CLARA e nunca com texto branco (2,56:1, reprovado). Sobre creme/branco a borda vinho garante os 3:1 de contorno que o preenchimento dourado sozinho não tem (2,20 e 2,56). */ .tt-btn-dourado{background:var(--wp--preset--color--dourado);color:var(--wp--preset--color--tinta);border-color:var(--wp--preset--color--dourado-texto)} .tt-btn-dourado:hover{background:var(--wp--preset--color--dourado);color:var(--wp--preset--color--tinta)} /* Sobre o hero escuro a borda vinho do dourado não tem função: ela existia para dar contorno de 3:1 quando o botão pousa em creme/branco. Aqui o próprio dourado já contrasta com o véu. */ .tt-btn-hero{border-color:transparent} /* Fantasma para FUNDO ESCURO (hero). Branco sobre o véu; a borda em branco a 72% passa os 3:1 de componente sem virar uma caixa dura na foto. */ .tt-btn-fantasma-claro{background:transparent;color:#fff;border-color:rgba(255,255,255,.72)} .tt-btn-fantasma-claro:hover{background:#fff;color:var(--wp--preset--color--tinta);border-color:#fff} .tt-glifo-wpp{flex:none} .tt-acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px} /* Estilos de bloco registrados no functions.php */ .wp-block-button.is-style-tt-fantasma .wp-block-button__link{ background:transparent;color:var(--wp--preset--color--dourado-texto); border:1.5px solid var(--wp--preset--color--dourado-texto); } .wp-block-button.is-style-tt-fantasma .wp-block-button__link:hover{ background:var(--wp--preset--color--dourado);color:var(--wp--preset--color--tinta); } .wp-block-button.is-style-tt-fantasma-escuro .wp-block-button__link{ background:transparent;color:var(--wp--preset--color--tinta); border:1.5px solid var(--wp--preset--color--tinta); } .wp-block-button.is-style-tt-fantasma-escuro .wp-block-button__link:hover{ background:var(--wp--preset--color--dourado);color:var(--wp--preset--color--tinta);border-color:var(--wp--preset--color--dourado-texto); } .wp-block-button.is-style-tt-whatsapp .wp-block-button__link{background:var(--wp--preset--color--verde-wpp);color:#fff} .wp-block-button.is-style-tt-whatsapp .wp-block-button__link:hover{background:#0C6234} /* ---------- cabeçalho ----------------------------------------------------- */ /* ----------------------------------------------------------------------------- DOIS ESTADOS, UMA BARRA — e o logo não muda de cor entre eles. • SOBRE O HERO: creme a **54%** com desfoque de 24 px (era 70%, depois 55%). É o "mais transparente" pedido pela cliente — e 54% é onde ele para. • FORA DO HERO: creme opaco, com filete dourado embaixo. Quem troca o estado é o `IntersectionObserver` do interacoes.js — não `scroll`, que dispara a cada quadro e obriga a calcular posição. • SEM HERO: nasce sólido. A regra de overlay só existe dentro do `body:has(main > .tt-hero-cartaz:first-child)`, então numa página institucional o cabeçalho nunca fica transparente sobre conteúdo branco. ----------------------------------------------------------------------------- OS 54% SÃO O PISO MEDIDO — E 45% NÃO EXISTE (remedido em 11/08/2026) A cliente pediu a barra mais transparente ainda, mirando 40–45%. Foi medido de novo, no render, e a resposta é não: 45% derruba o menu para 4,00:1 e a assinatura para 3,82:1, contra os 4,5:1 que texto exige. A tabela é o resultado do render de verdade (Chromium headless, backdrop-filter aplicado, texto escondido antes do print, PIOR PIXEL dentro da caixa de cada elemento, sobre as CINCO fotos da vitrine em 1440 — a que manda é a do salão à noite): | véu | menu (tinta) | assinatura (tinta) | lockup (vinho) | veredito | |-----|--------------|--------------------|----------------|----------------| | 55% | 5,29 | 5,10 | 3,13 | passa (antes) | |**54%**| **5,15** | **4,99** | **3,06** | **é o piso** | | 53% | 4,97 | 4,80 | 2,95 | logo < 3,0 | | 51% | 4,72 | 4,53 | 2,79 | logo < 3,0 | | 50% | 4,64 | 4,41 | 2,75 | assinatura < 4,5 | | 45% | 4,00 | 3,82 | 2,37 | REPROVA | | 40% | 3,42 | 3,26 | 2,02 | REPROVA | AS DUAS COMPENSAÇÕES AUTORIZADAS FORAM TESTADAS, e as duas quase não pagam: • DESFOQUE. De 24 px para 120 px o menu sobe 4,00 → 4,24 (a 45%). Não é surpresa: borrar uma área grande e escura devolve uma média igualmente escura. Fica em 24 px, que é escolha visual, não de contraste. • DEGRADÊ DO TOPO. Ele compra contraste, mas cobra em creme: para 50% chapado passar, o degradê precisa ir a 46% — e aí a barra fica com 73% de creme no alto (hoje: 65%) e 61,5% na média (hoje: 59,9%). Ou seja, a barra fica MENOS transparente no conjunto para poder anunciar um número menor. Rejeitado: 54% chapado com degradê de 22% é mais claro em toda a altura do que qualquer combinação que passe com o chapado abaixo disso. • (Testado também `brightness()` no backdrop, que clarearia a foto sem pôr creme: a 1,8× o menu vai só de 4,00 para 4,20 a 45%. A 45% de creme o composto já é dominado pelo creme, e clarear os 55% restantes quase não muda o resultado.) QUEM DEFINE O PISO É O LOGO, NÃO O TEXTO. O menu e a assinatura ainda passam a 51%; o lockup cai de 3:1 já em 53%. Formalmente o logotipo é ISENTO (WCAG 1.4.11 exclui "text or images that are part of a logo or brand name"), então dá para descer mais — a casa escolheu não descer. Se um dia essa régua mudar, o piso passa a ser 51%, e é o número que está na tabela acima. MÉTODO DO LOCKUP: a razão dele é tirada sobre a MÁSCARA DE TINTA do vetor (`isPointInFill` em cada traço), não sobre a caixa do ``. A caixa inclui o canto vazio em volta do emblema redondo e a faixa que sobrou da assinatura removida do vetor — lugares onde não há desenho nenhum, na parte baixa da barra onde há menos creme. Medir ali dava um número pior do que o objeto gráfico realmente tem. É também por isso que o lockup do cabeçalho é o MONOCROMÁTICO EM VINHO (a aplicação que o manual mostra na p. 13 sobre creme) e não o de duas cores: o "Totonho" em dourado mede 2,20:1 sobre o creme sólido e 1,08:1 sobre a foto — sumiria justamente no estado que a cliente pediu para ser transparente. -------------------------------------------------------------------------- */ /* FUNDO DO CABEÇALHO — creme LAVADO, não creme puro (12/08). O creme do manual (#FAEDCD) sozinho lê como bege numa barra que ocupa a largura toda. Diluído a 35% sobre branco (#FDF9EE) ele mantém o calor da marca e devolve o ar de branco que a cliente pediu. É token porque a barra sólida e o véu translúcido precisam sair do MESMO tom — senão a transição ao rolar muda de cor, e não só de opacidade. */ .tt-header{ position:relative;z-index:1; background:var(--fundo-cabecalho);color:var(--wp--preset--color--tinta); border-bottom:1px solid transparent; transition:background var(--transicao),border-color var(--transicao),box-shadow var(--transicao); } /* Estado transparente: só onde a página COMEÇA com cartaz sangrado (a mesma condição do overlay, logo acima) E enquanto o JS não marcou `solido`. Sem JS, o cabeçalho fica no estado translúcido — que é legível (5,15:1 no menu, pior caso medido) — em vez de sumir. */ body:has(main > .tt-hero-cartaz:first-child) .tt-header:not(.tt-header-solido), body:has(main > :first-child > .tt-hero-cartaz:first-child) .tt-header:not(.tt-header-solido){ background-color:var(--veu-cabecalho); /* O DEGRADÊ DO TOPO — compensação medida, não enfeite. Um creme que começa em +22% no alto e some na base devolve contraste onde o logo e o menu de fato estão, sem transformar a barra numa caixa opaca: a foto continua visível na metade de baixo, que é o que a cliente pediu. Ele vai a ZERO em 100% da altura da barra, e não em 82% como na primeira versão. O motivo é a assinatura em texto, que mora entre 64% e 81% da altura — justo onde o degradê antigo já tinha acabado. Medido, pior pixel das cinco fotos da vitrine em 1440: | elemento | até 82% | até 100% | |---------------------|---------|----------| | assinatura (tinta) | 4,56:1 | 4,82:1 | | menu (tinta) | 4,74:1 | 5,00:1 | | lockup (vinho) | 2,80:1 | 2,95:1 | ⚠️ SUBIR O 22% NÃO É ATALHO PARA BAIXAR O VÉU CHAPADO. Foi testado em 11/08: o degradê compra contraste cobrando creme no alto da barra, e o saldo é uma barra MENOS transparente no conjunto (a conta está na nota grande acima). O 22% é o teto útil. */ background-image:linear-gradient(180deg, color-mix(in srgb, var(--wp--preset--color--creme) var(--veu-topo), transparent) 0%, transparent 100%); -webkit-backdrop-filter:blur(var(--veu-desfoque)) saturate(112%); backdrop-filter:blur(var(--veu-desfoque)) saturate(112%); border-bottom-color:rgba(122,92,51,.10); } /* Sem suporte a `color-mix` (navegador antigo) a barra fica creme opaca: legibilidade ganha de efeito. */ @supports not (background:color-mix(in srgb,#000 50%,transparent)){ body:has(main > .tt-hero-cartaz:first-child) .tt-header:not(.tt-header-solido), body:has(main > :first-child > .tt-hero-cartaz:first-child) .tt-header:not(.tt-header-solido){ background:var(--fundo-cabecalho); } } /* ----------------------------------------------------------------------------- SÓ NA HOME: cabeçalho SEM faixa nenhuma, com a marca CLARA sobre a foto. Pedido em 12/08, no modelo do protótipo. ⚠️ O SELETOR É `.tt-hero-solo`, NÃO `.tt-hero-cartaz` — e essa diferença é o que impede um bug grave. `.tt-hero-cartaz` também está nas ABERTURAS DAS PÁGINAS INTERNAS, que são o oposto disto: foto clara com cartão creme por cima, feitas para conviver com marca ESCURA. Clarear o logo naquele seletor apagaria a marca em quinze páginas. A regra da faixa creme continua valendo lá, intacta, logo acima. POR QUE PODE SER TOTALMENTE TRANSPARENTE AQUI, e não nas internas: a faixa de cima do hero já é escurecida pelo próprio véu da foto (`--veu-hero-topo`), e é ele que dá o contraste. Ou seja, o cabeçalho não precisa de fundo próprio — ele pega carona num escurecimento que já existe por outro motivo. ⚠️ ISSO AMARRA OS DOIS: baixar `--veu-hero-topo` não escurece só o alto da foto, apaga o menu junto. Se mexer em um, meça o outro (manutencao.md, armadilha 13). Ao rolar para fora do hero o JS carimba `tt-header-solido` e tudo volta ao estado sólido de sempre — nada aqui interfere nisso. -------------------------------------------------------------------------- */ body:has(main > .tt-hero-solo:first-child) .tt-header:not(.tt-header-solido), body:has(main > :first-child > .tt-hero-solo:first-child) .tt-header:not(.tt-header-solido){ background-color:transparent; background-image:none; -webkit-backdrop-filter:none;backdrop-filter:none; border-bottom-color:transparent; } /* A marca inteira clareia por UMA propriedade: o lockup é `fill:currentColor` (o functions.php tira o
` da abertura das internas — as duas carregam a mesma classe. */ .tt-hero-solo-foto, .tt-hero-solo-foto img{position:absolute;inset:0;width:100%;height:100%} .tt-hero-solo-foto img{display:block;object-fit:cover;object-position:center} /* Dois gradientes empilhados, e a divisão de trabalho entre eles é o que permitiu clarear a foto sem perder legibilidade (12/08: a cliente achou o véu forte demais). A primeira versão escurecia tudo por igual — radial de 98% × 78%, ou seja, quase a imagem inteira. Media bem e parecia pesada, porque de fato era: canto, fundo e miolo pagavam o mesmo preço para proteger um texto que ocupa o centro. Agora o RADIAL é estreito (68% × 56%) e forte, e mora exatamente sob o texto; o LINEAR ficou quase transparente no meio da imagem (14–16% contra 38–42%), e só volta a pesar no topo, atrás do cabeçalho, e na base, para fechar a foto. Resultado: a foto respira nas bordas e o contraste sob a letra continua acima da norma. Somado ao texto que passou de creme a BRANCO — que sozinho compra 18% de contraste sem escurecer pixel nenhum —, deu para tirar peso de verdade. ⚠️ ESTREITAR MAIS O RADIAL É PERIGOSO. Ele tem que cobrir a LINHA MAIS LARGA do h1, e essa largura muda com a janela e com o texto. Se o título crescer, confira se as pontas das linhas não saíram da elipse — é lá que o contraste despenca primeiro. */ .tt-hero-solo-veu{ position:absolute;inset:0; background: radial-gradient(ellipse 95% 82% at 50% 46%, rgba(42,18,32,var(--veu-hero-meio)) 0%, rgba(42,18,32,calc(var(--veu-hero-meio) * .72)) 72%, rgba(42,18,32,0) 100%), linear-gradient(to bottom, rgba(42,18,32,var(--veu-hero-topo)) 0%, rgba(42,18,32,.22) 30%, rgba(42,18,32,.24) 62%, rgba(42,18,32,var(--veu-hero-base)) 100%); } /* PÁGINA INTERNA: mesmo modelo, altura menor. A home é porta de entrada e ocupa a tela toda; aqui o conteúdo precisa começar sem obrigar a rolar. */ .tt-hero-solo--interna{ min-height:min(58svh, 520px); padding-block:calc(var(--altura-cabecalho) + 40px) 48px; } @media(min-width:700px){ .tt-hero-solo--interna{min-height:min(62svh, 580px)} } /* O h1 de página interna é menor que o da home — lá ele é uma frase de marca, aqui é o assunto da página. */ .tt-hero-solo--interna h1{font-size:clamp(1.65rem, 1.1rem + 2.4vw, 2.75rem)} .tt-hero-solo--interna .tt-resposta{font-size:clamp(.9375rem, .9rem + .25vw, 1.0625rem)} .tt-hero-solo-texto{position:relative;z-index:1} .tt-hero-solo-caixa{max-width:860px;margin-inline:auto;text-align:center} /* A sombra do texto NÃO conta para a WCAG (a norma mede a cor de fundo, não o truque). Ela está aqui pelo caso que a norma não cobre: um brilho pequeno e claro caindo exatamente atrás de uma haste de letra. O contraste quem resolve é o véu. */ .tt-hero-solo-rotulo, .tt-hero-solo h1, .tt-hero-solo .tt-resposta{text-shadow:0 1px 16px rgba(20,8,14,.45)} .tt-hero-solo-rotulo{ margin:0 0 20px; font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase; line-height:1.5;color:#fff; } .tt-hero-solo h1{ margin:0 0 20px;color:#fff;font-weight:300; /* O piso é 1.75rem, não 2rem, e a razão é medida: com 2rem a última linha ("experiências memoráveis.") ocupava 343 px de uma caixa de 350 em 390 px — e transbordava em 360, que é iPhone SE e boa parte dos Android. */ font-size:clamp(1.75rem, 1.05rem + 3.6vw, 4rem); line-height:1.1;letter-spacing:-.01em; text-wrap:balance; } .tt-hero-solo .tt-resposta{ margin:0 auto;max-width:54ch;color:#fff; font-size:clamp(1rem, .95rem + .3vw, 1.1875rem);line-height:1.55; } .tt-hero-solo .tt-acoes{justify-content:center;margin-top:34px} /* No celular os dois botões ocupam a linha inteira: lado a lado, em 360 px, o rótulo "Solicitar orçamento" quebraria dentro do botão. */ @media(max-width:479px){ .tt-hero-solo .tt-acoes{flex-direction:column;align-items:stretch} .tt-hero-solo .tt-acoes .tt-btn{width:100%} } /* ---------- abertura das páginas internas ---------------------------------- */ /* O CARTÃO CREME SOBRE FOTO SAIU EM 12/08. Aqui moravam `.tt-abertura`, `.tt-abertura-foto` e `.tt-abertura-cartao`: uma foto sangrada com um cartão creme translúcido por cima, e o texto escuro dentro dele. Saiu porque a cliente pediu o cabeçalho da home — transparente, com a marca em creme — em todas as páginas, e marca clara só se lê sobre área escura. Com o cartão creme, o topo dessas páginas era claro e o logo sumiria. A abertura passou a usar as classes `.tt-hero-solo-*`, as mesmas da home, com o modificador `--interna` para a altura. O que sobrou aqui é só o que a variante COMPACTA (foto pequena ao lado do texto) ainda usa. */ /* AS REGRAS-BASE QUE A COMPACTA PRECISA. Antes elas serviam às duas variantes; com o cartaz virando o modelo do hero, sobraram só para a compacta. Ficam fora de qualquer `@media` porque abaixo de 900 px a compacta empilha (foto em cima, cartão embaixo) e continua usando estas mesmas caixas. */ .tt-abertura{position:relative;background:var(--wp--preset--color--papel)} .tt-abertura-foto{position:relative;line-height:0} .tt-abertura-foto img{width:100%;height:auto;object-fit:cover;box-shadow:var(--veu-foto)} .tt-abertura-cartao{ background:var(--wp--preset--color--creme); padding:28px var(--margem); } /* O BLOCO DO CARTÃO TRANSLÚCIDO SAIU JUNTO (12/08). Ele media o contraste de cada cor sobre creme a 70% com desfoque, por cima da foto — e três das cinco linhas daquela tabela eram sobre `vinho` e `vinho-profundo`, que não existem mais na paleta. O cartaz translúcido também não existe mais: virou o modelo do hero, com véu escuro e texto claro, cuja medição está no manutencao.md (armadilha 13). Manter aquela tabela seria documentação apontando para duas coisas extintas. */ /* ----------------------------------------------------------------------------- Abertura COMPACTA — para foto abaixo de 1000 px (design-system §9.1/§9.2). Cinco das oito fotos de categoria vieram dos catálogos em PDF, entre 450 e 860 px. No cartaz sangrado elas eram esticadas a ~3×, que é exatamente o que o design system proíbe ("foto abaixo de 1000 px não vira hero", "nunca ampliar além de 1,5×"). Aqui a foto divide a linha com o cartão em vez de virar fundo: na coluna de ~570 px do desktop, a menor delas fica em 1,27×. Quando as fotos originais chegarem, basta trocar o arquivo — o PHP volta sozinho para o cartaz (functions.php, totonho_abertura). -------------------------------------------------------------------------- */ @media(min-width:900px){ .tt-abertura-compacta{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); max-width:var(--lg-catalogo);margin-inline:auto;padding:0 var(--margem); align-items:center;column-gap:0;background:var(--wp--preset--color--papel); } /* `height:auto` desfaz o `calc(100svh - cabeçalho)` que a variante de CARTAZ impõe ao `.tt-abertura-foto` — e que esta variante herdava por também ter a classe `.tt-abertura`. Medido em 07/08, viewport de 1440: a coluna da foto ficava com 816 px de altura para uma imagem de 520 px e um cartão de 419, o que deixava cerca de 200 px de creme vazio acima e abaixo do cartão, entre a abertura e a trilha. Agora a coluna acompanha a linha e foto e cartão terminam juntos. */ .tt-abertura-compacta .tt-abertura-foto{grid-area:auto;height:auto;align-self:stretch;display:flex} .tt-abertura-compacta .tt-abertura-foto img{ width:100%;height:100%;min-height:100%;max-height:560px;object-fit:cover; } .tt-abertura-compacta .tt-abertura-cartao{ grid-area:auto;position:relative;z-index:1; width:auto;justify-self:stretch;margin-left:-56px; padding:44px;box-shadow:var(--veu-foto); } } @media(min-width:900px) and (max-width:1080px){ .tt-abertura-compacta .tt-abertura-cartao{margin-left:-28px;padding:32px} } /* variante sem foto (páginas institucionais) */ .tt-abertura-simples{padding-block:var(--ritmo) var(--ritmo-colado)} .tt-abertura-simples h1{margin:0 0 12px} .tt-abertura-simples .tt-resposta{max-width:62ch} /* Primeiro parágrafo — a resposta direta que a IA cita. */ .tt-resposta{font-size:1.1875rem;line-height:1.6;color:var(--wp--preset--color--tinta)} /* ---------- grade de categorias (home e hub) ------------------------------ */ /* ----------------------------------------------------------------------------- Cartão de categoria com ALTURA UNIFORME. O que estava medido em `/catalogo/`, viewport de 1440: os oito cartões com a mesma largura (267 px) e alturas de **334 a 532 px — 198 px de variação**. Duas causas somadas: 1. a alternância de proporção da foto (`4:5` na 1ª e na 4ª célula, `3:2` nas demais) fazia a imagem sozinha variar 89 px por cartão; 2. o `` era `display:block`. O item de grade (`
  • `) esticava até a altura da linha, mas o cartão dentro dele parava na altura do próprio texto — legenda mais curta, cartão mais baixo, borda flutuando no meio da célula. A assimetria proposital do design-system §5 não desaparece do site: ela continua na faixa "desde 1975" sangrada, na lista com filete das ocasiões e nos três passos com régua dourada. Ela só sai de dentro de uma grade em que o cliente lê como defeito, e com razão. -------------------------------------------------------------------------- */ .tt-grade-cat{list-style:none;margin:0;padding:0;display:grid;gap:24px;grid-auto-rows:1fr} @media(min-width:560px){.tt-grade-cat{grid-template-columns:repeat(2,1fr)}} @media(min-width:900px){.tt-grade-cat{grid-template-columns:repeat(4,1fr)}} .tt-grade-cat > li{display:flex} .tt-cartao-cat{ display:flex;flex-direction:column;flex:1 1 auto; text-decoration:none;color:inherit;border:var(--filete);background:var(--superficie-creme); transition:border-color var(--transicao); } .tt-cartao-cat:hover{border-color:var(--wp--preset--color--dourado)} .tt-cartao-cat figure{margin:0;line-height:0;overflow:hidden;flex:none} /* Proporção fixa e ÚNICA, em toda largura: 3:2. Duas razões, e a segunda decide. (1) É o formato de foto de ambiente do design-system §9. (2) Os arquivos de origem são 3:2 (1280×853): recortar para 4:5 no celular jogaria fora 40% da largura da composição — justamente a mesa posta inteira, que é o que a foto tem para mostrar. Medido: em 390 px, o cartão 4:5 ficava com 553 px de altura e os oito somavam quase cinco telas de rolagem só de categorias. */ .tt-cartao-cat img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;transition:transform var(--transicao)} .tt-cartao-cat:hover img{transform:scale(1.015)} /* a área de texto cresce; o rótulo de ação fica ancorado na base */ .tt-cartao-cat-txt{display:flex;flex-direction:column;flex:1 1 auto;padding:18px 20px 22px;gap:2px} .tt-cartao-cat-txt .tt-marcador{width:40px;margin-bottom:10px;display:block} .tt-cartao-cat-nome{ display:block; font-family:'Caviar Dreams','Century Gothic',sans-serif;font-weight:400; font-size:clamp(1.125rem,1.4vw,1.375rem);line-height:1.2;letter-spacing:-.01em; margin:0 0 6px;color:var(--wp--preset--color--tinta); } .tt-cartao-cat-txt .tt-legenda{flex:1 1 auto} .tt-cartao-cat-conta{ display:block;margin:auto 0 0;padding-top:12px;border-top:var(--filete); font-size:.6875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--wp--preset--color--dourado-texto); } .tt-cartao-cat-conta::after{content:" →"} /* ---------- cartão de item (o do catálogo 2026) --------------------------- */ .tt-grade-itens{list-style:none;margin:0;padding:0;display:grid;gap:32px 24px} @media(min-width:560px){.tt-grade-itens{grid-template-columns:repeat(2,1fr)}} @media(min-width:900px){.tt-grade-itens{grid-template-columns:repeat(3,1fr)}} @media(min-width:1180px){.tt-grade-itens{grid-template-columns:repeat(4,1fr)}} .tt-grade-itens.tt-grade-3 { grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) } .tt-cartao-item{display:block;text-decoration:none;color:inherit;position:relative;padding-bottom:8px} .tt-cartao-quadro{ display:block;position:relative;background:var(--superficie-creme); border:var(--filete);aspect-ratio:4/5;overflow:hidden; } .tt-cartao-quadro img{width:100%;height:100%;transition:transform var(--transicao)} /* peça recortada: respiro de 12% e sombra de contato (nunca drop-shadow difusa) */ .tt-quadro-peca img{object-fit:contain;padding:12%;filter:drop-shadow(var(--sombra-contato))} /* foto de ambiente: entra cortada, nunca esticada nem com tarja */ .tt-quadro-ambiente img{object-fit:cover;padding:0} .tt-cartao-item:hover .tt-cartao-quadro img{transform:scale(1.015)} .tt-cartao-semfoto{ display:flex;align-items:center;justify-content:center;height:100%; font-size:.8125rem;color:var(--wp--preset--color--tinta-suave);text-align:center;padding:20px; } /* o marcador de pendência dentro do cartão mantém o bloco amarelo de obra */ .tt-cartao-semfoto .tt-pendente{margin:0;font-size:.8125rem} /* O SELO DE COLEÇÃO (`.tt-selo`, `.tt-selo-colecao`) saiu do cartão em 11/08 — era o nome da coleção em Great Vibes no canto superior direito da foto, com cartão creme por trás quando a foto era de ambiente. Nada mais o emite. */ /* Aba de rótulo: canto vivo, sangra 16 px para fora da coluna à esquerda. Era `areia` (tom inventado entre creme e dourado). Agora é DOURADO puro do manual — é o lugar mais visível em que a marca aparece repetida na tela, e é o que faz o cartão de item ser da Totonho e não de um e-commerce qualquer. A ficha desce de `tinta-suave` (3,09:1 sobre dourado, reprova) para `tinta` (6,81:1). */ .tt-aba{ display:block;background:var(--wp--preset--color--dourado); padding:12px 16px;margin-left:-16px;margin-top:-1px;position:relative;z-index:2; transition:background var(--transicao),color var(--transicao); } .tt-aba-nome{ display:block;font:700 1rem/1.25 'Caviar Dreams','Century Gothic',sans-serif;color:var(--wp--preset--color--tinta); } .tt-aba-ficha{ display:block;font-size:.8125rem;line-height:1.45;margin-top:3px; color:var(--wp--preset--color--tinta); } /* O hover ESCURECE para dourado-texto — antes escurecia para vinho. Com o vinho fora, deixar o hover em dourado teria dois problemas de uma vez: nenhuma mudança visível (é a mesma cor do repouso) e creme sobre dourado a 2,08:1. Em dourado-texto o creme mede 4,87:1 e o estado volta a existir. */ .tt-cartao-item:hover .tt-aba,.tt-cartao-item:focus-visible .tt-aba{background:var(--wp--preset--color--dourado-texto)} .tt-cartao-item:hover .tt-aba-nome,.tt-cartao-item:hover .tt-aba-ficha, .tt-cartao-item:focus-visible .tt-aba-nome,.tt-cartao-item:focus-visible .tt-aba-ficha{color:var(--wp--preset--color--creme)} /* ---------- página de item ------------------------------------------------ */ .tt-item{display:grid;gap:32px} @media(min-width:900px){.tt-item{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}} .tt-item-foto{background:var(--superficie-creme);border:var(--filete);line-height:0} .tt-item-foto img{width:100%;height:auto;display:block} .tt-item-foto.tt-item-peca img{padding:10%;filter:drop-shadow(var(--sombra-contato))} /* `.tt-item-colecao` (o nome da coleção em manuscrita, abrindo a coluna de texto) saiu em 11/08. Quem abre a coluna agora é o sobretítulo com a categoria, que já tem estilo próprio. */ .tt-ficha{margin:26px 0 0;border-top:var(--filete-nobre)} .tt-ficha div{display:flex;gap:16px;padding:11px 0;border-bottom:var(--filete)} .tt-ficha dt{ flex:0 0 34%;font:700 .75rem/1.5 'Caviar Dreams','Century Gothic',sans-serif;letter-spacing:.14em;text-transform:uppercase; color:var(--wp--preset--color--tinta-suave);margin:0; } .tt-ficha dd{margin:0;font-size:.9375rem;color:var(--wp--preset--color--tinta)} /* ---------- faixa "desde 1975" -------------------------------------------- */ /* ----------------------------------------------------------------------------- A faixa era vinho sangrado; passa a ser DOURADA. É a primeira das duas superfícies em que a cor da marca ocupa a largura inteira — a substituição do bordô dominante que a cliente pediu, feita na cor que o manual chama de "exclusividade, requinte e elegância". Contraste sobre dourado #B89E7B: tinta 6,81:1 (passa em qualquer tamanho) · vinho 4,08:1 (só no número, que tem 36 a 52 px, acima dos 24 px de texto grande) · branco 2,56:1 (proibido, e é o erro clássico com dourado). A trama de linho saiu: era aproximação de uma textura de catálogo, não estava no manual, e a 5% sobre dourado não se via — uma requisição a menos. -------------------------------------------------------------------------- */ .tt-faixa-prova{ position:relative;overflow:hidden; background:var(--wp--preset--color--dourado);color:var(--wp--preset--color--tinta); border-top:1px solid var(--wp--preset--color--dourado-texto); border-bottom:1px solid var(--wp--preset--color--dourado-texto); /* faixa fina, mas na escala: --ritmo-colado, não um 8px avulso */ padding-block:var(--ritmo-colado); } .tt-faixa-prova .tt-larg{position:relative;z-index:1;display:grid;gap:0} @media(min-width:820px){.tt-faixa-prova .tt-larg{grid-template-columns:repeat(3,1fr)}} .tt-prova-col{padding:var(--ritmo-colado) 0} @media(min-width:820px){ .tt-prova-col{padding:0 32px} .tt-prova-col+.tt-prova-col{border-left:1px solid var(--wp--preset--color--dourado-texto)} } @media(max-width:819.98px){ .tt-prova-col+.tt-prova-col{border-top:1px solid var(--wp--preset--color--dourado-texto)} } .tt-prova-num{ font-family:'Caviar Dreams','Century Gothic',sans-serif;font-weight:400;line-height:1;margin:0 0 8px; font-size:clamp(2.25rem,5vw,3.25rem);color:var(--wp--preset--color--dourado-texto); } /* `margin:0 auto`, não `margin:0` — esta regra vem DEPOIS do bloco de ritmo centralizado e o `margin:0` zerava o `margin-inline:auto` que centraliza a linha de apoio. Só aparecia abaixo de 820 px, onde a coluna passa a ser a largura inteira e a caixa de 34ch fica encostada à esquerda. */ .tt-prova-txt{font-size:.875rem;line-height:1.55;margin:0 auto;color:var(--wp--preset--color--tinta)} /* ---------- painel de orçamento ------------------------------------------- */ /* A segunda superfície dourada, e a mais importante: é o bloco de conversão. O convite fica em tinta sobre dourado (6,81:1), o h2 em vinho (4,08:1 — tem 28 a 36 px, texto grande), e o formulário vira um cartão BRANCO com filete vinho, que dá os 10,4:1 de contorno que o branco sobre dourado (2,56) não daria sozinho. A marca d'água do emblema continua sendo o único ornamento grande do site — em vinho, que é o que o manual manda usar sobre dourado. */ .tt-painel-orcamento{ position:relative;overflow:hidden; background:var(--wp--preset--color--dourado);color:var(--wp--preset--color--tinta); border-top:1px solid var(--wp--preset--color--dourado-texto); border-bottom:1px solid var(--wp--preset--color--dourado-texto); } .tt-painel-orcamento::after{ content:"";position:absolute;right:-6%;top:50%;transform:translateY(-50%); width:min(520px,52vw);aspect-ratio:1; /* Marca d'água a 10%: 520 px em WebP (44 KB), gerado do PNG oficial de 1080. Não usa o SVG do emblema de propósito — nele o "LOCAÇÕES PARA FESTAS" que circunda o selo é TEXTO VIVO na fonte MADE TOMMY, que não está licenciada para a web: cairia numa fonte qualquer do sistema. O SVG serve para o lockup (só vetor, sem texto); o selo circular fica em raster. */ background:url("../marca/totonho-emblema-vinho.webp") no-repeat center/contain; opacity:.10;pointer-events:none; } /* ----------------------------------------------------------------------------- UMA COLUNA, CENTRADA — e é a mesma caixa de `/contato/`. Era uma grade de duas colunas (convite à esquerda, formulário à direita), e o cliente leu exatamente o que estava lá: "o formulário está na lateral e em outro formato". Estava mesmo — nesta seção o formulário não usava a `.tt-caixa-form`, então tinha largura, moldura e recuo diferentes dos outros dois formulários do site. Agora: convite centralizado em cima, formulário embaixo, dentro da MESMA `.tt-caixa-form` de `/contato/` e `/orcamento/` (760 px de caixa, 680 px de formulário, grade de dois campos por linha a partir de 640 px). O componente PHP sempre foi um só (`totonho_form_orcamento()`); o que estava duplicado era o invólucro. -------------------------------------------------------------------------- */ .tt-painel-in{position:relative;z-index:1;display:block} .tt-painel-convite{max-width:60ch;margin-inline:auto;text-align:center;margin-bottom:32px} /* TINTA, não dourado-texto: este h2 mora DENTRO do painel dourado, e dourado-texto sobre dourado mede 2,41:1 — reprova até como texto grande (exige 3). Sobre dourado quem passa é tinta, com 6,81:1. Foi o que a troca de paleta de 12/08 quase deixou escapar: a regra dizia `vinho`, que sobre dourado dava 4,08:1, e a substituição automática por dourado-texto derrubou o número sem mudar nada visível no código. */ .tt-painel-convite h2{color:var(--wp--preset--color--tinta);margin:0 0 14px} .tt-painel-convite p{color:var(--wp--preset--color--tinta);margin-inline:auto} .tt-painel-convite .tt-sobretitulo{justify-content:center;text-align:left} .tt-painel-convite .tt-acoes{justify-content:center} /* Sobre o dourado, a caixa do formulário é BRANCA com filete vinho: é esse contorno que dá os 10,4:1 que o branco sobre dourado (2,56:1) não daria sozinho. Aqui ela não é translúcida de propósito — translúcida sobre dourado viraria bege sobre bege. */ .tt-painel-orcamento .tt-caixa-form{ background:var(--wp--preset--color--papel);color:var(--wp--preset--color--tinta); border:1px solid var(--wp--preset--color--dourado-texto); } /* ---------- formulário ---------------------------------------------------- */ /* ----------------------------------------------------------------------------- Largura de formulário confortável. Medido em `/contato/`, viewport de 1440: o painel do formulário com **994 px** e os campos de texto com **962 px numa linha só**. É o que o cliente chamou de "campos grandes e mal posicionados", e ele está certo — campo de nome com um metro de largura não ajuda ninguém a preencher e faz o formulário parecer grande demais para o que pede. Três medidas, e valem para os três formulários do site (`/orcamento/`, `/contato/` e o de assessorias), porque a regra é da classe `.tt-form`: • caixa do formulário no máximo 760 px, centrada; • formulário no máximo 680 px, centrado dentro dela; • grade de duas colunas para campo curto (tipo, data, convidados, cidade, nome, WhatsApp) e linha inteira para campo longo (espaço, e-mail, pílulas, observação e consentimento) — sem buraco na grade. Altura de campo e de botão continuam em 48 px, acima dos 44 px de alvo de toque; o `align-items:start` impede que o campo de data, que é mais alto, estique o vizinho. -------------------------------------------------------------------------- */ .tt-caixa-form{ max-width:760px;margin-inline:auto; background:var(--superficie-creme);border:var(--filete-nobre); padding:28px 22px; } @media(min-width:700px){.tt-caixa-form{padding:40px 40px 36px}} .tt-form{max-width:680px;margin-inline:auto} .tt-form .tt-campos{display:grid;gap:18px} @media(min-width:640px){ .tt-form .tt-campos{grid-template-columns:1fr 1fr;align-items:start} .tt-campo-largo{grid-column:1/-1} } .tt-campo{margin:0;display:flex;flex-direction:column;gap:6px} .tt-campo > label,.tt-pilulas legend{ font:700 .75rem/1.3 'Caviar Dreams','Century Gothic',sans-serif;letter-spacing:.16em;text-transform:uppercase; color:var(--wp--preset--color--tinta-suave); } .tt-req{color:var(--wp--preset--color--dourado-texto)} .tt-campo input[type=text],.tt-campo input[type=tel],.tt-campo input[type=email], .tt-campo input[type=date],.tt-campo select,.tt-campo textarea{ width:100%;min-height:48px;padding:11px 13px;font:400 1.0625rem/1.4 'Caviar Dreams','Century Gothic',sans-serif; color:var(--wp--preset--color--tinta);background:var(--wp--preset--color--papel); border:1px solid var(--wp--preset--color--borda-campo);border-radius:var(--raio-campo); } .tt-campo textarea{min-height:96px;resize:vertical} .tt-campo-data{background:var(--wp--preset--color--rosa);padding:16px;border-radius:var(--raio-campo)} .tt-ajuda{font-size:.8125rem;color:var(--wp--preset--color--tinta-suave)} /* Alvo de toque do checkbox: 24 px de caixa (mínimo do WCAG 2.2 — 2.5.8) e 44 px de área clicável somando o rótulo, que é o que o design system pede. Atinge o consentimento LGPD e o "ainda não defini a data": justamente os dois que não podem ser difíceis de marcar. */ .tt-check{display:flex;align-items:flex-start;gap:10px;margin-top:6px;min-height:44px} .tt-check input{width:24px;height:24px;min-width:24px;margin:10px 0 0;accent-color:var(--wp--preset--color--dourado-texto)} /* `display:block`, não `flex`. O rótulo do consentimento é texto corrido com um link no meio ("…conforme a Política de Privacidade"). Como `display:flex`, o nó de texto e o `` viravam dois ITENS DE FLEX lado a lado: numa caixa estreita a frase quebrava em duas colunas e o link ia parar sozinho na direita. Só aparecia quando o formulário deixou de ter um metro de largura. O alvo de toque de 44 px continua garantido por `min-height` + `padding`, sem precisar de flex. */ .tt-check label{ font-size:.9375rem;line-height:1.5;text-transform:none;letter-spacing:0;font-weight:400; color:var(--wp--preset--color--tinta); display:block;min-height:44px;padding:10px 0;cursor:pointer; } .tt-consentimento label{color:var(--wp--preset--color--tinta)} /* pílulas de categoria — alvo de 44px, com input real por trás */ .tt-pilulas{border:0;padding:0;margin:0} .tt-pilulas-lista{display:flex;flex-wrap:wrap;gap:9px;margin-top:8px} .tt-pilula input{position:absolute;opacity:0;width:1px;height:1px} .tt-pilula label{ display:inline-flex;align-items:center;min-height:44px;padding:10px 18px; background:var(--wp--preset--color--papel);color:var(--wp--preset--color--dourado-texto); border:1.5px solid var(--wp--preset--color--dourado-texto); border-radius:var(--raio-botao);font:700 .875rem/1 'Caviar Dreams','Century Gothic',sans-serif;cursor:pointer; transition:background var(--transicao),color var(--transicao); } .tt-pilula input:checked + label{background:var(--wp--preset--color--dourado);color:var(--wp--preset--color--tinta)} .tt-pilula input:focus-visible + label{outline:2px solid var(--wp--preset--color--tinta);outline-offset:2px} .tt-painel-orcamento .tt-pilula input:focus-visible + label{outline-color:var(--wp--preset--color--dourado-texto)} .tt-form-acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px} @media(max-width:559.98px){.tt-form-acoes .tt-btn{width:100%}} .tt-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .tt-erro-campo{border-color:var(--wp--preset--color--erro)!important;border-width:2px!important} .tt-erro-msg{display:flex;gap:6px;align-items:center;color:var(--wp--preset--color--erro);font-size:.875rem;font-weight:600} .tt-erro-msg::before{content:"!";display:inline-flex;align-items:center;justify-content:center; width:18px;height:18px;border-radius:50%;background:var(--wp--preset--color--erro);color:#fff;font-size:.75rem} .tt-confirmacao{background:var(--superficie-creme);border:var(--filete-nobre);padding:32px 24px} .tt-confirmacao h2{margin:0 0 12px} /* Envio que falhou. Antes disso o visitante voltava ao formulário sem aviso nenhum, achando que tinha enviado — lead perdido sem ninguém saber. */ .tt-aviso-erro{ background:var(--wp--preset--color--papel); border:2px solid var(--wp--preset--color--erro);border-left-width:6px; padding:20px 22px;margin:0 0 26px; } .tt-aviso-erro p{margin:0 0 8px;font-size:.9375rem;line-height:1.55} .tt-aviso-erro-titulo{ font:700 1.0625rem/1.3 'Caviar Dreams','Century Gothic',sans-serif;color:var(--wp--preset--color--erro); } .tt-aviso-erro .tt-form-acoes{margin-top:14px} /* ---------- contato: um canal por cartão ---------------------------------- */ .tt-contato-grade{ display:grid;gap:28px 32px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); border-top:var(--filete-nobre);padding-top:32px; } .tt-contato-grade > div{text-align:center} .tt-contato-dado{ margin:0;font-size:1.1875rem;line-height:1.5;font-style:normal; color:var(--wp--preset--color--tinta); } .tt-contato-dado a{font-weight:600} .tt-contato-grade .tt-legenda{margin:8px 0 0} .tt-atendimento{text-align:center;max-width:52ch;margin-inline:auto;padding-top:8px} /* NAP da página local — mesmo bloco, em coluna única e centrado. */ .tt-nap-local{ font-style:normal;line-height:1.9;margin:0 auto 20px;max-width:44ch; font-size:1.0625rem; } .tt-nap-local a{font-weight:600} /* ---------- FAQ ----------------------------------------------------------- */ /* O respiro do FAQ é o da SEÇÃO que o contém — era `margin-block:56px`, e esses 56 px se somavam ao padding da seção dos dois lados: o vão entre o FAQ e o bloco seguinte chegava a 144 px em `/catalogo/cadeiras/` (medido). */ .tt-faq{margin-block:0} .tt-faq-lista{border-top:var(--filete)} .tt-faq-item{border-bottom:var(--filete)} .tt-faq-item summary{ display:flex;gap:16px;align-items:flex-start;justify-content:space-between; padding:18px 0;cursor:pointer;list-style:none; font:700 1.125rem/1.35 'Caviar Dreams','Century Gothic',sans-serif;color:var(--wp--preset--color--tinta); } .tt-faq-item summary::-webkit-details-marker{display:none} /* marcador +/– : peso leve, para não competir com a pergunta. Em dourado-texto (6,17:1) e não no dourado puro, que sobre claro mede 2,56:1 e some. */ .tt-faq-item summary::after{ content:"+";flex:none;font:400 1.625rem/1 'Caviar Dreams','Century Gothic',sans-serif; color:var(--wp--preset--color--dourado-texto); } .tt-faq-item[open] summary::after{content:"–"} .tt-faq-resposta{padding:0 0 20px;max-width:70ch} .tt-faq-resposta p{margin:0 0 10px} /* ---------- tabela -------------------------------------------------------- */ .tt-tabela-rolagem{overflow-x:auto;margin-block:24px} .tt-tabela{width:100%;border-collapse:collapse;font-size:.9375rem;min-width:520px} .tt-tabela th{background:var(--superficie-creme);color:var(--wp--preset--color--tinta); text-align:left;padding:11px 14px;font:700 .75rem/1.3 'Caviar Dreams','Century Gothic',sans-serif;letter-spacing:.1em;text-transform:uppercase} .tt-tabela td{padding:11px 14px;border-bottom:var(--filete);vertical-align:top} .tt-tabela tbody tr:nth-child(even) td{background:var(--wp--preset--color--rosa)} .wp-block-table table{border-collapse:collapse} .wp-block-table th{background:var(--superficie-creme);text-align:left} .wp-block-table td,.wp-block-table th{border:0;border-bottom:var(--filete);padding:11px 14px} /* ---------- listas de conteúdo -------------------------------------------- */ .tt-lista-check{list-style:none;padding:0;margin:20px 0;display:grid;gap:10px} .tt-lista-check li{position:relative;padding-left:26px} .tt-lista-check li::before{ content:"";position:absolute;left:0;top:.62em;width:12px;height:2px;background:var(--wp--preset--color--dourado-texto); } /* Lista de ocasiões (home): nome à esquerda, uma linha de explicação ao lado. Composição de propósito diferente da grade de categorias — a home não repete o mesmo bloco duas vezes (design-system §5). */ .tt-lista-ocasioes{list-style:none;padding:0;margin:32px 0 0;border-top:var(--filete-nobre)} .tt-lista-ocasioes li{border-bottom:var(--filete)} .tt-lista-ocasioes a{ display:flex;flex-wrap:wrap;gap:6px 28px;align-items:baseline; padding:20px 0;text-decoration:none;color:inherit; } .tt-ocasiao-nome{ flex:0 0 auto;min-width:230px; font-size:clamp(1.1875rem,1.6vw,1.4375rem);font-weight:400;line-height:1.25;letter-spacing:-.01em; color:var(--wp--preset--color--dourado-texto); } .tt-ocasiao-txt{flex:1 1 300px;font-size:.9375rem;color:var(--wp--preset--color--tinta-suave)} .tt-lista-ocasioes a:hover .tt-ocasiao-nome{color:var(--wp--preset--color--tinta)} @media(min-width:820px){ /* a lista é o único bloco de leitura em duas colunas — alinhamento à esquerda é o que faz o olho descer pela coluna dos nomes */ .tt-lista-ocasioes{text-align:left} } /* Três colunas com filete dourado entre elas (não são três cards com ícone). */ .tt-passos{display:grid;gap:0;margin-top:32px} @media(min-width:820px){.tt-passos{grid-template-columns:repeat(3,1fr)}} .tt-passo{padding:var(--ritmo-colado) 0} @media(min-width:820px){ .tt-passo{padding:4px 32px} .tt-passo+.tt-passo{border-left:1px solid var(--wp--preset--color--dourado)} } @media(max-width:819.98px){.tt-passo+.tt-passo{border-top:1px solid var(--wp--preset--color--linha)}} .tt-passo-num{ font:400 2.5rem/1 'Caviar Dreams','Century Gothic',sans-serif;letter-spacing:-.02em; color:var(--wp--preset--color--dourado-texto);margin:0 0 10px; } /* Título dentro de uma coluna de 1/3 não usa a escala de h2 de seção — seria maior que o próprio bloco. Aqui ele vale como h3 na escala, mantendo o nível semântico que a hierarquia da página pede. */ .tt-passo h2,.tt-passo h3{ margin:0 0 8px;font-size:clamp(1.1875rem,1.6vw,1.375rem);font-weight:600; line-height:1.3;letter-spacing:-.005em; } .tt-passo p{margin:0 auto;font-size:.9375rem;color:var(--wp--preset--color--tinta-suave)} /* Figura de prova das páginas de ocasião — era `style="margin:48px 0 0; max-width:760px"`, ou seja, caixa estreita sem eixo: 280 px de desvio para a esquerda em 1440 (medido). */ .tt-figura-prova{max-width:760px;margin:40px auto 0} .tt-figura-prova img{width:100%;height:auto;box-shadow:var(--veu-foto)} .tt-figura-prova figcaption{padding-top:10px;text-align:center} /* ---------- prova / eventos realizados ------------------------------------ */ .tt-prova-grade{list-style:none;margin:0;padding:0;display:grid;gap:24px} @media(min-width:760px){.tt-prova-grade{grid-template-columns:repeat(3,1fr)}} .tt-prova-card figure{margin:0;line-height:0} .tt-prova-card img{width:100%;aspect-ratio:3/2;object-fit:cover;box-shadow:var(--veu-foto)} .tt-prova-card figcaption{padding:12px 0 0;font-size:.875rem;line-height:1.55;color:var(--wp--preset--color--tinta-suave)} /* ---------- home: eventos em destaque ------------------------------------- */ /* ----------------------------------------------------------------------------- Três montagens, foto grande e UMA linha de rótulo — a legenda descritiva saiu. O bloco anterior trazia, além do `alt`, uma legenda de 12 a 18 palavras por foto ("Mesa longa com caminho de flores, e as redondas de toalha branca ao fundo…"). Eram ~55 palavras dizendo o que a foto já mostra para quem enxerga — e para quem não enxerga o `alt` continua dizendo, com mais detalhe. O que fica na tela é o TIPO de montagem, em uma linha. PROPORÇÃO 3:2, não retrato. Testado o 4:5 primeiro: as fotos de montagem são composições horizontais (mesa longa atravessando o salão, recepção sob tenda), e o recorte em retrato jogava fora 40% da largura — exatamente a mesa. É a mesma conta que já decidiu o cartão de categoria, algumas seções acima. -------------------------------------------------------------------------- */ .tt-eventos-grade{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:24px} @media(min-width:760px){.tt-eventos-grade{grid-template-columns:repeat(3,1fr);gap:20px}} .tt-eventos-grade figure{margin:0;line-height:0} .tt-eventos-grade img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;box-shadow:var(--veu-foto)} .tt-eventos-grade figcaption{ padding:14px 0 0;line-height:1.4;text-align:center; font:700 .75rem/1.5 'Caviar Dreams','Century Gothic',sans-serif; letter-spacing:.11em;text-transform:uppercase;color:var(--wp--preset--color--dourado-texto); } /* ---------- home: faixa de peças que rolava na horizontal ------------------ */ /* ----------------------------------------------------------------------------- REMOVIDA EM 11/08/2026, junto com a fileira de peças da home. Era o carrossel de peças da seção "O acervo" — `overflow-x:auto` + `scroll-snap`, sem uma linha de JavaScript. A cliente pediu a fileira fora da home, e a home era o único lugar que chamava `totonho_grade_itens()` com a classe `tt-faixa-itens`. Sem chamador, ~16 linhas de CSS viravam peso morto em toda página do site. O COMPONENTE não morreu: o cartão continua sendo `.tt-cartao-item`, e a grade (`.tt-grade-itens`) segue montando as oito páginas de categoria e a venda cruzada da página de item. O que saiu foi só a CAIXA que rolava. Se um dia a faixa voltar, o que ela precisa é: `display:grid` com `grid-auto-flow:column` e colunas de `minmax(190px,1fr)`, `scroll-snap-type:x` e — a parte que custou tempo — `scroll-padding-inline:16px` casado com `margin-inline:-16px`, por causa da aba do cartão, que sangra 16 px para fora da coluna e ficava cortada no primeiro item. -------------------------------------------------------------------------- */ /* ---------- home: faixa de orçamento sobre foto --------------------------- */ /* ----------------------------------------------------------------------------- O fecho da home: foto sangrada, uma frase e um botão. CONTRASTE — medido, não estimado. O cartão é creme a 88% com desfoque de 6 px sobre `corpo-salao-mesas-douradas.webp`. O número foi tirado no render, com o texto escondido antes do print, no PIOR PIXEL dentro da caixa da frase, nas três larguras: tinta #2A1220 sobre o cartão ..... 11,84:1 (390) · 11,41:1 (768) · 12,20:1 (1440) exigido ......................... 4,5:1 A folga é grande porque o cartão é quase opaco: aqui o efeito de foto vem da sangria, não da transparência. Trocar a foto ou baixar a opacidade obriga a refazer a medição — mesma regra do cartão do hero (design-system §3). -------------------------------------------------------------------------- */ .tt-faixa-cta{position:relative;isolation:isolate;display:grid;place-items:center;padding:56px 20px;min-height:320px} @media(min-width:900px){.tt-faixa-cta{padding:80px 20px;min-height:400px}} .tt-faixa-cta-foto{ position:absolute;inset:0;z-index:-1; width:100%;height:100%;object-fit:cover;object-position:center 60%; } .tt-faixa-cta-cartao{ max-width:620px;text-align:center;padding:32px 28px; background:var(--wp--preset--color--creme); border:var(--filete-nobre); } @supports (background:color-mix(in srgb,#000 50%,transparent)){ .tt-faixa-cta-cartao{ background:color-mix(in srgb, var(--wp--preset--color--creme) 88%, transparent); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); } } .tt-faixa-cta-frase{ margin:0 0 22px; font-family:'Caviar Dreams','Century Gothic',sans-serif;font-weight:400; font-size:clamp(1.25rem,2.2vw,1.625rem);line-height:1.3;letter-spacing:-.005em; color:var(--wp--preset--color--tinta); } /* ---------- cartão de guia (hub /guias/) ---------------------------------- */ /* Mesma mecânica de altura uniforme do cartão de categoria: a grade dá linhas de 1fr, o cartão é coluna flex, o resumo cresce e o rótulo de ação fica preso na base. Um guia com resumo de duas linhas e outro com quatro não desalinham. */ .tt-grade-guias{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:28px 24px;grid-auto-rows:1fr} @media(min-width:640px){.tt-grade-guias{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}} .tt-grade-guias > li{display:flex} .tt-cartao-guia{ display:flex;flex-direction:column;flex:1 1 auto; text-decoration:none;color:inherit;background:var(--superficie-creme); border:var(--filete);transition:border-color var(--transicao); } .tt-cartao-guia:hover{border-color:var(--wp--preset--color--dourado)} .tt-cartao-guia figure{margin:0;line-height:0;overflow:hidden;flex:none} .tt-cartao-guia img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;transition:transform var(--transicao)} .tt-cartao-guia:hover img{transform:scale(1.015)} .tt-cartao-guia-txt{display:flex;flex-direction:column;flex:1 1 auto;padding:22px 24px 24px;text-align:center} .tt-cartao-guia-txt .tt-marcador{margin:0 auto 12px} .tt-cartao-guia-txt .tt-legenda{flex:1 1 auto} /* Título de guia fica na SECUNDÁRIA mesmo sendo h2. Título editorial quase sempre tem pontuação ("Quantas mesas e cadeiras alugar?"), e a reserva automática da Edensor deixaria dois cartões vizinhos da mesma grade em fontes diferentes. Consistência da grade ganha do gesto tipográfico. */ .tt-cartao-guia-nome{ display:block;margin:0 0 8px; font-family:'Caviar Dreams','Century Gothic',sans-serif; font-size:clamp(1.1875rem,1.6vw,1.375rem);font-weight:700;line-height:1.25;letter-spacing:-.01em; color:var(--wp--preset--color--tinta); } .tt-cartao-guia-acao{ display:block;margin:auto 0 0;padding-top:14px; font-size:.6875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--wp--preset--color--dourado-texto); } .tt-cartao-guia-acao::after{content:" →"} /* ---------- guias --------------------------------------------------------- */ /* ----------------------------------------------------------------------------- 62ch — e o número saiu de CONTAGEM, não de fórmula. Os caracteres por linha foram medidos no navegador, percorrendo o nó de texto caractere a caractere e detectando a quebra pela mudança de topo do Range: coluna de 680 px → 78 caracteres por linha (média) coluna de 760 px → 89 coluna de 811 px → 94 A faixa de conforto é 70–80. Por isso a COLUNA DE TEXTO para em ~698 px (62ch ≈ 80 caracteres) e não acompanha o contêiner: quem cresce em tela grande é o `--lg-leitura`, e a largura extra vai para tabela, foto e destaque, que transbordam (regra logo abaixo). Aumentar `--lg-leitura` não estica o texto — é essa separação que atende o pedido do cliente sem estragar a leitura. */ .tt-artigo{max-width:62ch;margin-inline:auto} .tt-artigo h2{margin:48px 0 16px} .tt-artigo h3{margin:32px 0 8px} .tt-artigo p{margin:0 0 18px} .tt-artigo ul,.tt-artigo ol{margin:0 0 18px;padding-left:22px} .tt-artigo li{margin:0 0 8px} /* A política de privacidade cita nome de cookie e de parâmetro em . É a única monoespaçada do site e existe para o leitor distinguir "o cookie tt_origem" do texto em volta — sem ela o nome se confunde com prosa. Fica declarada aqui em vez de herdar a monoespaçada padrão do navegador, que vem com corpo maior e desalinha a linha. */ .tt-artigo code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.875em;background:var(--wp--preset--color--rosa); padding:1px 6px;border-radius:2px; } /* ----------------------------------------------------------------------------- Transbordo: tabela, foto e destaque saem da coluna de texto em tela larga. Tabela de quantidades presa em 720 px rolava de lado num monitor de 1440 sem nenhuma necessidade — havia 400 px de papel sobrando de cada lado. Aqui esses três blocos crescem até 1060 px (ou até a largura da janela menos as margens, o que for menor) e continuam centrados na mesma linha do texto. A conta da margem negativa é exata: `(100% − largura desejada) / 2`, onde `100%` é a largura da própria coluna de texto. Quando a coluna já é maior que o alvo, o valor fica positivo e nada transborda — não há caso de vazamento. -------------------------------------------------------------------------- */ @media(min-width:1100px){ .tt-artigo > .tt-tabela-rolagem, .tt-artigo > figure, .tt-artigo > .tt-cta-inline, .tt-artigo > .tt-foto-corpo{ --transbordo:min(1060px, calc(100vw - 56px)); width:var(--transbordo); margin-inline:calc((100% - var(--transbordo)) / 2); } .tt-artigo > .tt-tabela-rolagem .tt-tabela{min-width:0} } .tt-cta-inline{ background:var(--superficie-creme); border-top:var(--filete-nobre);border-bottom:var(--filete-nobre); /* `auto` no eixo horizontal, não `0`: com `margin:… 0` esta regra anulava o `margin-inline:auto` do bloco de ritmo e a caixa com `max-width` encostava na esquerda (−393 px em /eventos/, medido em 1440). */ padding:26px 24px;margin:var(--ritmo) auto; } /* Foto dentro do texto — a que quebra o paredão de leitura. */ .tt-foto-corpo{margin:var(--ritmo) 0;line-height:0} .tt-foto-corpo img{width:100%;height:auto;display:block;box-shadow:var(--veu-foto)} .tt-foto-corpo figcaption{ padding:12px 2px 0;font-size:.875rem;line-height:1.55;text-align:center; color:var(--wp--preset--color--tinta-suave); } .tt-cta-inline p{margin:0 0 12px} .tt-leia-tambem{border-top:var(--filete-nobre);margin-top:var(--ritmo);padding-top:var(--ritmo-colado)} .tt-leia-tambem ul{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:10px} /* ---------- rodapé -------------------------------------------------------- */ /* Era vinho profundo — o bloco mais escuro da página inteira. Vira DOURADO, que é a aplicação cromática oficial nº 2 do manual (p. 12: vinho sobre dourado) e fecha a página na cor da marca sem escurecer o site. Régua sobre dourado: link e NAP em tinta (6,81:1) · título de coluna e linha legal em vinho-profundo (5,23:1, e são 12–13 px, então precisam de 4,5) · nunca branco (2,56:1) e nunca vinho em texto pequeno (4,08:1). */ .tt-footer{ background:var(--wp--preset--color--dourado);color:var(--wp--preset--color--tinta); border-top:1px solid var(--wp--preset--color--dourado-texto);padding-block:56px 28px; } .tt-footer a{color:var(--wp--preset--color--tinta);text-decoration:none} .tt-footer a:hover{color:var(--wp--preset--color--tinta);text-decoration:underline} .tt-footer-cols{display:grid;gap:32px} @media(min-width:760px){.tt-footer-cols{grid-template-columns:1.3fr 1fr 1fr 1.2fr}} .tt-footer h2,.tt-footer h3{ font:700 .75rem/1.3 'Caviar Dreams','Century Gothic',sans-serif;letter-spacing:.16em;text-transform:uppercase; color:var(--wp--preset--color--tinta);margin:0 0 14px; } .tt-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:.9375rem} /* O lockup do rodapé é o mesmo SVG do cabeçalho, repintado por CSS: em vinho, que é o que o manual mostra sobre dourado (p. 12). */ /* No RODAPÉ o fundo é dourado, então aqui o logo NÃO pode ser dourado também — seria a mesma cor sobre a mesma cor. Fica em dourado-texto (2,41:1 sobre o dourado), que ainda é logotipo isento, mas ao menos se enxerga. */ .tt-footer-logo{color:var(--wp--preset--color--dourado-texto);display:block;margin-bottom:16px} /* 76 px, e o número é medido: é a altura em que a assinatura "LOCAÇÕES PARA FESTAS" chega a 7,50 px de altura de letra (a 52 px ela ficava em 5,13 px e virava um borrão — a queixa do cliente). O rodapé é o único lugar do site com espaço para o lockup inteiro; no cabeçalho entra a variante sem assinatura. */ .tt-footer-logo .tt-lockup{height:76px;width:auto;max-width:100%;display:block} @media(max-width:759.98px){.tt-footer-logo .tt-lockup{height:64px}} .tt-footer-nap{font-size:.9375rem;line-height:1.7;font-style:normal} .tt-footer-legal{ border-top:1px solid rgba(90,15,61,.35);margin-top:36px;padding-top:20px; display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between; font-size:.8125rem;color:var(--wp--preset--color--tinta); } /* ---------- barra fixa de CTA (celular) ----------------------------------- */ .tt-barra-cta{ position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex; background:var(--wp--preset--color--papel);box-shadow:var(--sombra-barra); padding-bottom:env(safe-area-inset-bottom); } .tt-barra-btn{ flex:1;display:flex;align-items:center;justify-content:center;gap:8px; min-height:60px;text-decoration:none;color:#fff; font:700 .9375rem/1 'Caviar Dreams','Century Gothic',sans-serif; } /* O rótulo desta barra herda `color:#fff` de `.tt-barra-btn`, que serve ao botão VERDE ao lado. Sobre dourado, branco mede 2,56:1 e reprova — por isso a cor é redeclarada aqui, e não no pai. */ .tt-barra-orcamento{background:var(--wp--preset--color--dourado);color:var(--wp--preset--color--tinta)} .tt-barra-wpp{background:var(--wp--preset--color--verde-wpp)} @media(min-width:1000px){.tt-barra-cta{display:none}} @media(max-width:999.98px){body{padding-bottom:60px}} /* ---------- WhatsApp flutuante -------------------------------------------- */ /* ----------------------------------------------------------------------------- Um caminho fixo para o WhatsApp em cada largura — nunca dois. Abaixo de 1000 px quem cumpre esse papel é a `.tt-barra-cta`, que já tem o botão de WhatsApp na base da tela. Este flutuante aparece só a partir de 1000 px, que é exatamente onde a barra some. É a conciliação: nada empilha, nada cobre o outro, e o polegar do celular continua com um alvo só. O glifo é o oficial do WhatsApp, desenhado em `totonho_glifo_wpp()` (path inline no tema, nenhuma imagem de terceiro). O rótulo existe no HTML e é escondido só visualmente — leitor de tela continua anunciando a ação. -------------------------------------------------------------------------- */ .tt-wa-flutuante{display:none} @media(min-width:1000px){ .tt-wa-flutuante{ position:fixed;right:24px;bottom:24px;z-index:75; display:inline-flex;align-items:center;justify-content:center; width:60px;height:60px;border-radius:var(--raio-botao); background:var(--wp--preset--color--verde-wpp);color:#fff;text-decoration:none; box-shadow:0 6px 20px rgba(42,18,32,.30); transition:background var(--transicao),transform var(--transicao); } .tt-wa-flutuante:hover{background:#0C6234;color:#fff;transform:translateY(-2px)} .tt-wa-flutuante .tt-glifo-wpp{width:30px;height:30px} /* rótulo acessível, invisível na tela — nunca `display:none`, que some do leitor de tela junto */ .tt-wa-flutuante .tt-rotulo-btn{ display:block;position:absolute;width:1px;height:1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap; } .tt-wa-flutuante:focus-visible{ outline:3px solid var(--wp--preset--color--tinta);outline-offset:3px; } /* Enquanto o banner de consentimento estiver aberto, o botão sobe para não ficar por cima dele (o banner é a escolha que a lei exige — tem precedência sobre o CTA). `:has()` porque o banner só ganha/perde o atributo `hidden`. */ body:has(.tt-consent:not([hidden])) .tt-wa-flutuante{bottom:120px} } /* ---------- banner de consentimento --------------------------------------- */ .tt-consent{ position:fixed;left:0;right:0;bottom:0;z-index:80; background:var(--wp--preset--color--creme);border-top:var(--filete-nobre); box-shadow:0 -2px 14px rgba(42,18,32,.12); } @media(max-width:999.98px){.tt-consent{bottom:60px}} .tt-consent-caixa{ max-width:var(--lg-catalogo);margin-inline:auto;padding:16px var(--margem); display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between; } .tt-consent-texto{margin:0;font-size:.875rem;line-height:1.55;max-width:64ch} .tt-consent-acoes{display:flex;gap:10px;flex:none} .tt-consent .tt-btn{min-height:44px;padding:10px 22px;font-size:.875rem} /* ---------- 404 ----------------------------------------------------------- */ .tt-404{padding-block:var(--ritmo-solto)} .tt-404 .wp-block-search__input{ min-height:48px;border:1px solid var(--wp--preset--color--borda-campo); border-radius:var(--raio-campo);padding:11px 13px; } /* ---------- a primária do manual (Edensor) e por que ela ainda não entra --- */ /* ----------------------------------------------------------------------------- O manual (p. 10) define **Edensor** como tipografia primária. O arquivo que existe é o corte "Edensor FREE", e ele foi conferido glifo a glifo com fontTools — não pelo `cmap`, que engana, e sim pelo CONTORNO de cada glifo: • o arquivo tem **69 glifos**: A–Z, a–z, 0–9, espaço e mais nada; • **nenhum sinal de pontuação** — sem vírgula, ponto, hífen, travessão, dois-pontos, aspas, apóstrofo, `&`, `º`, `ª`, `×`, `·`; • pior: o `cmap` MAPEIA os acentos, mas todos apontam para a letra sem acento. `á` desenha `a`. `ç` desenha `c`. `ã` desenha `a`. O navegador não cai para a fonte de reserva (do ponto de vista dele o glifo existe) — ele simplesmente escreve **"Maringa"** e **"mobiliario"**. Erro de português silencioso, na maior chamada da página. Por isso a primária está DESLIGADA: o `theme.json` não registra a família (se registrasse, ela apareceria no seletor de fontes do editor e o cliente escreveria um título errado sem saber), e título fica na **Caviar Dreams**, que é a secundária DO MESMO MANUAL e cobre acento e pontuação inteiros. A troca, quando um corte completo da Edensor for licenciado, é uma linha — procedimento em `manutencao.md`. O que fica montado é a TRAVA, não a fonte: `totonho_edensor_seguro()` (functions.php) valida o texto contra a lista exata de caracteres que o arquivo desenha, e o filtro `render_block` carimba `.tt-sem-edensor` em todo h1/h2 que não passa. No dia em que a família voltar ao `theme.json`, nenhum título consegue sair meio numa fonte e meio na outra — nem com acento. O `font-size-adjust` iguala a altura de x das duas famílias (Edensor 0,450 · Caviar Dreams 0,479): sem ele o título de reserva sairia ~6% maior e a página perderia o ritmo. Onde a propriedade não existe, é ignorada — degrada para "um pouco maior", não para quebrado. -------------------------------------------------------------------------- */ .tt-edensor:not(.tt-sem-edensor){ font-family:Edensor,Georgia,'Times New Roman',serif; font-weight:400;letter-spacing:-.005em; } h1.tt-sem-edensor,h2.tt-sem-edensor,.tt-sem-edensor{ font-family:'Caviar Dreams','Century Gothic',sans-serif; font-weight:400;letter-spacing:-.01em; font-size-adjust:0.45; } /* ---------- editor -------------------------------------------------------- */ .editor-styles-wrapper .tt-barra-cta, .editor-styles-wrapper .tt-consent{display:none}