/*
Theme Name: Trade Manifesto
Theme URI: https://italogomes.com/
Author: Crazy Diamond Soluções Digitais
Author URI: https://crazydiamond.com.br/
Description: Tema sob medida para o site de autor de Italo Gomes e a loja de ferramentas do Trade Manifesto. Sem page builder, sem dependência de plugin de layout.
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.0
License: Proprietário, uso exclusivo de italogomes.com
Text Domain: trade-manifesto
Tags: e-commerce, custom-colors, dark-mode
*/
/* ==========================================================================
1. Tokens
O tema nasce escuro. O modo claro reescreve os mesmos tokens, então nenhuma
regra abaixo precisa saber em qual tema está.
========================================================================== */
:root {
--tm-vermelho: #c0181a;
--tm-vermelho-claro: #e02b2d;
--tm-fundo: #0a0a0a;
--tm-fundo-2: #141414;
--tm-fundo-3: #1e1e1e;
--tm-texto: #f2f2f2;
--tm-texto-2: #a8a8a8;
--tm-borda: #2b2b2b;
/* Tipografia condensada. A fonte da capa do livro ainda não chegou:
quando chegar, é aqui que ela entra, com @font-face local (nunca CDN). */
--tm-fonte-titulo: "Oswald", "Archivo Narrow", "Roboto Condensed", "Arial Narrow", "Helvetica Neue Condensed", sans-serif;
--tm-fonte-texto: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
/* A capa tem duas famílias: a condensada do título e uma serifada no subtítulo.
Esta é a serifada, que devolve ao site a assinatura editorial do livro. */
--tm-fonte-serifa: "Playfair Display", "Bodoni MT", "Didot", Georgia, "Times New Roman", serif;
--tm-max: 1200px;
--tm-gutter: clamp(1.25rem, 4vw, 2.5rem);
--tm-radius: 2px;
--tm-transicao: 180ms ease;
}
[data-theme="light"] {
--tm-fundo: #ffffff;
--tm-fundo-2: #f4f4f4;
--tm-fundo-3: #e9e9e9;
--tm-texto: #101010;
--tm-texto-2: #565656;
--tm-borda: #d6d6d6;
}
/* ==========================================================================
2. Base
========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
/* Quem pede menos movimento recebe a página pronta, nunca escondida. */
.tm-js .tm-revelar { opacity: 1 !important; transform: none !important; }
}
/* ==========================================================================
1.1 Movimento
Página de venda precisa de ritmo, mas o livro vende sobriedade. Então:
distâncias curtas, nada de quique, nada de elemento entrando da lateral.
Só existe com JS ativo (classe tm-js) para o conteúdo nunca ficar preso
invisível se algo falhar.
========================================================================== */
.tm-js .tm-revelar {
opacity: 0;
transform: translateY(18px);
/*
* 0,45s, e não 0,7s. Medido em 20/08/2026, numa rolagem em ritmo humano: o texto da biografia
* só chegava a opacidade cheia 119ms antes do bloco sair pelo topo da tela, e o quarto pilar
* chegava 577ms DEPOIS de o bloco já ter saído. A animação terminava sem ninguém para ver, e o
* efeito era o de um site que responde devagar. Foi o que o cliente descreveu como "truncada".
*/
transition:
opacity .45s cubic-bezier(.2, .7, .3, 1) var(--tm-atraso, 0s),
transform .45s cubic-bezier(.2, .7, .3, 1) var(--tm-atraso, 0s);
will-change: opacity, transform;
}
.tm-js .tm-revelar.tm-visivel {
opacity: 1;
transform: none;
}
/* O hero não espera rolagem: entra assim que a página abre. */
.tm-js .tm-hero .tm-revelar { transition-duration: .85s; }
/* --- Título do hero: sobe de trás de uma máscara, como letra de abertura de filme --- */
.tm-js .tm-hero h1 {
clip-path: inset(0 0 105% 0);
transform: translateY(.22em);
transition: clip-path 1s cubic-bezier(.16, .84, .28, 1) .1s,
transform 1s cubic-bezier(.16, .84, .28, 1) .1s;
}
.tm-js .tm-hero .tm-visivel h1 { clip-path: inset(0 0 -10% 0); transform: none; }
/* --- Capa: entra girando e depois respira devagar --- */
.tm-js .tm-hero__capa > img {
opacity: 0;
transform: rotateY(-26deg) rotateX(3deg) scale(.94) translateY(14px);
}
.tm-js .tm-hero__capa.tm-visivel > img {
opacity: 1;
transform: rotateY(-9deg) rotateX(1.5deg);
transition: opacity .9s ease .15s, transform 1.1s cubic-bezier(.16, .84, .28, 1) .15s, box-shadow .6s ease;
}
/* A flutuação infinita desta capa saiu em 24/08/2026, junto com a do livro em 3D. O cliente pediu
as animações fora, e uma imagem que se move para sempre é redesenho eterno pela mesma razão.
A entrada continua: gira e sobe uma vez, e para. `@keyframes tm-flutua` saiu com ela. */
/* --- Ícones dos pilares: o traço é desenhado, não aparece pronto --- */
.tm-js .tm-pilar svg path,
.tm-js .tm-pilar svg circle:not(.tm-icone__no) {
stroke-dasharray: 1;
stroke-dashoffset: 1;
}
.tm-js .tm-pilar.tm-visivel svg path,
.tm-js .tm-pilar.tm-visivel svg circle:not(.tm-icone__no) {
animation: tm-desenha 1.05s cubic-bezier(.5, 0, .2, 1) forwards;
animation-delay: calc(var(--tm-atraso, 0s) + .2s);
}
/* O tracejado do ícone de atalho não pode virar linha cheia: só surge. */
.tm-js .tm-pilar.tm-visivel svg .tm-icone__tracejado {
animation: tm-surge .8s ease forwards;
stroke-dasharray: 4 5;
stroke-dashoffset: 0;
opacity: 0;
}
/* Nós da rede: círculos preenchidos não desenham, então eles pipocam em sequência. */
.tm-js .tm-pilar svg .tm-icone__no { transform: scale(0); transform-origin: center; transform-box: fill-box; }
.tm-js .tm-pilar.tm-visivel svg .tm-icone__no {
animation: tm-pipoca .5s cubic-bezier(.34, 1.56, .64, 1) forwards;
animation-delay: calc(var(--tm-atraso, 0s) + var(--tm-no, 0s) + .55s);
}
@keyframes tm-desenha { to { stroke-dashoffset: 0; } }
@keyframes tm-surge { to { opacity: 1; } }
@keyframes tm-pipoca { to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
.tm-js .tm-hero h1 { clip-path: none; transform: none; }
.tm-js .tm-hero__capa > img,
.tm-js .tm-hero__capa.tm-visivel > img { opacity: 1; transform: none; animation: none; }
.tm-js .tm-pilar svg path,
.tm-js .tm-pilar svg circle:not(.tm-icone__no) { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
.tm-js .tm-pilar svg .tm-icone__no { transform: none; animation: none; }
.tm-js .tm-pilar.tm-visivel svg .tm-icone__tracejado { opacity: 1; animation: none; }
}
/* A régua vermelha do bloco cresce da esquerda, como a da capa do livro. */
.tm-js .tm-pilar { position: relative; border-top-color: transparent; }
.tm-js .tm-pilar::before {
content: "";
position: absolute;
top: -2px; left: 0;
height: 2px;
width: 0;
background: var(--tm-vermelho);
transition: width .6s cubic-bezier(.2, .7, .3, 1) calc(var(--tm-atraso, 0s) + .15s);
}
.tm-js .tm-pilar.tm-visivel::before { width: 100%; }
@media (prefers-reduced-motion: reduce) {
.tm-js .tm-pilar { border-top-color: var(--tm-vermelho); }
.tm-js .tm-pilar::before { display: none; }
}
body {
margin: 0;
background: var(--tm-fundo);
color: var(--tm-texto);
font-family: var(--tm-fonte-texto);
font-size: 1rem;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
transition: background-color var(--tm-transicao), color var(--tm-transicao);
}
h1, h2, h3, h4 {
font-family: var(--tm-fonte-titulo);
font-weight: 700;
line-height: 1.05;
letter-spacing: .01em;
text-transform: uppercase;
margin: 0 0 .5em;
}
h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
a { color: var(--tm-texto); text-decoration-color: var(--tm-vermelho); text-underline-offset: .2em; }
a:hover { color: var(--tm-vermelho-claro); }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 2px solid var(--tm-vermelho-claro); outline-offset: 3px; }
.tm-skip-link {
position: absolute;
left: -9999px;
top: 0;
background: var(--tm-vermelho);
color: #fff;
padding: .75rem 1.25rem;
z-index: 100;
}
.tm-skip-link:focus { left: 0; }
.tm-container {
width: 100%;
max-width: var(--tm-max);
margin-inline: auto;
padding-inline: var(--tm-gutter);
}
.tm-secao { padding-block: clamp(3.5rem, 8vw, 6rem); }
.tm-secao--alt { background: var(--tm-fundo-2); }
.tm-etiqueta {
font-family: var(--tm-fonte-titulo);
font-size: .8rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--tm-vermelho-claro);
margin: 0 0 .75rem;
}
.tm-sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0);
white-space: nowrap; border: 0;
}
/* ==========================================================================
3. Botões
========================================================================== */
.tm-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
font-family: var(--tm-fonte-titulo);
font-size: 1rem;
letter-spacing: .08em;
text-transform: uppercase;
padding: .9rem 1.75rem;
border: 2px solid var(--tm-vermelho);
border-radius: var(--tm-radius);
background: var(--tm-vermelho);
color: #fff;
text-decoration: none;
cursor: pointer;
transition: background-color var(--tm-transicao), color var(--tm-transicao), border-color var(--tm-transicao);
}
.tm-btn:hover { background: var(--tm-vermelho-claro); border-color: var(--tm-vermelho-claro); color: #fff; }
.tm-btn--secundario { background: transparent; color: var(--tm-texto); border-color: var(--tm-borda); }
.tm-btn--secundario:hover { background: transparent; border-color: var(--tm-vermelho); color: var(--tm-vermelho-claro); }
/* Botão de compra cujo link ainda não existe (Amazon, Kindle e Google Play até 05/09). */
.tm-btn--embreve {
background: transparent;
color: var(--tm-texto-2);
border-color: var(--tm-borda);
border-style: dashed;
cursor: default;
pointer-events: none;
}
.tm-btn--embreve .tm-btn__nota {
font-size: .7rem;
letter-spacing: .12em;
opacity: .8;
}
/* ==========================================================================
4. Cabeçalho
========================================================================== */
.tm-header {
position: sticky;
top: 0;
z-index: 50;
background: color-mix(in srgb, var(--tm-fundo) 92%, transparent);
backdrop-filter: blur(8px);
border-bottom: 1px solid transparent;
transition: border-color var(--tm-transicao), background-color var(--tm-transicao);
}
/*
* Parado no topo o cabeçalho é vidro: sem fundo, sem desfoque e sem linha, para o hero passar
* inteiro por trás dele. A partir do primeiro rolar ele materializa, que é quando passa a ter
* conteúdo correndo por baixo e precisa de contraste.
*/
.tm-header[data-rolado="false"] {
background: transparent;
backdrop-filter: none;
border-bottom-color: transparent;
}
/* Ao sair do topo o cabeçalho encolhe e ganha a linha de baixo. */
.tm-header[data-rolado="true"] {
background: color-mix(in srgb, var(--tm-fundo) 97%, transparent);
border-bottom-color: var(--tm-borda);
}
.tm-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
min-height: 84px;
transition: min-height var(--tm-transicao);
}
.tm-header[data-rolado="true"] .tm-header__inner { min-height: 64px; }
/*
* O aviso de cookies é fixo na base e cobria o rodapé inteiro: o texto de fecho e a assinatura
* ficavam ilegíveis enquanto ninguém respondesse ao banner. A altura real dele vira espaço no
* fim da página, e some junto com o banner.
*/
body { padding-bottom: var(--tm-aviso-altura, 0px); }
.tm-marca {
font-family: var(--tm-fonte-titulo);
font-size: 1.15rem;
letter-spacing: .12em;
text-transform: uppercase;
text-decoration: none;
color: var(--tm-texto);
}
.tm-marca strong { color: var(--tm-vermelho-claro); font-weight: 700; }
.tm-nav ul {
display: flex;
align-items: center;
gap: 1.5rem;
list-style: none;
margin: 0;
padding: 0;
}
.tm-nav a {
font-family: var(--tm-fonte-titulo);
font-size: .95rem;
letter-spacing: .1em;
text-transform: uppercase;
text-decoration: none;
color: var(--tm-texto-2);
}
.tm-nav a:hover,
.tm-nav .current-menu-item > a { color: var(--tm-texto); }
.tm-header__acoes { display: flex; align-items: center; gap: .75rem; }
.tm-tema {
display: inline-grid;
place-items: center;
width: 40px; height: 40px;
padding: 0;
background: transparent;
border: 1px solid var(--tm-borda);
border-radius: var(--tm-radius);
color: var(--tm-texto);
cursor: pointer;
transition: border-color var(--tm-transicao), color var(--tm-transicao);
}
.tm-tema:hover { border-color: var(--tm-vermelho); color: var(--tm-vermelho-claro); }
.tm-tema svg { width: 20px; height: 20px; }
/* O ícone visível é sempre o do tema que o clique vai aplicar. */
.tm-tema__sol { display: none; }
[data-theme="light"] .tm-tema__sol { display: block; }
[data-theme="light"] .tm-tema__lua { display: none; }
.tm-menu-toggle { display: none; }
@media (max-width: 900px) {
.tm-menu-toggle {
display: inline-grid;
place-items: center;
width: 40px; height: 40px;
background: transparent;
border: 1px solid var(--tm-borda);
border-radius: var(--tm-radius);
color: var(--tm-texto);
cursor: pointer;
}
.tm-nav {
position: absolute;
inset: 100% 0 auto 0;
background: var(--tm-fundo-2);
border-bottom: 1px solid var(--tm-borda);
display: none;
}
.tm-nav[data-aberto="true"] { display: block; }
.tm-nav ul {
flex-direction: column;
align-items: flex-start;
gap: 0;
padding: 1rem var(--tm-gutter) 1.5rem;
}
.tm-nav li { width: 100%; }
.tm-nav a { display: block; padding: .75rem 0; }
}
/* ==========================================================================
5. Hero
========================================================================== */
.tm-hero {
position: relative;
isolation: isolate;
overflow: hidden;
/*
* O cabeçalho é `sticky`, então ocupa lugar na página: sem isto o hero começaria abaixo
* dele e o cabeçalho de vidro não mostraria nada. O hero sobe a altura exata do cabeçalho
* e devolve o espaço em padding, de modo que o conteúdo fica onde estava e só o fundo
* passa por trás.
*/
margin-top: -84px;
padding-top: calc(84px + clamp(2.5rem, 6vw, 4.5rem));
padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
border-bottom: 1px solid var(--tm-borda);
}
/* Textura de linhas verticais, herdada do tema antigo do proprio site.
Lembra candlestick e fluxo de dados, que e o assunto do livro. Fica quase apagada e some
antes de alcancar o texto e o livro: e chao, nao desenho. */
@media (max-width: 560px) {
.tm-hero { margin-top: -72px; padding-top: calc(72px + clamp(2.5rem, 6vw, 4.5rem)); }
}
.tm-hero::before {
content: "";
position: absolute;
inset: -8% 0 auto 0;
height: 76%;
z-index: -1;
background: image-set(url("assets/img/textura-linhas.webp") type("image/webp"),
url("assets/img/textura-linhas.jpg") type("image/jpeg"))
center top / cover no-repeat;
opacity: .07;
mix-blend-mode: screen;
-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .35) 38%, transparent 72%);
mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .35) 38%, transparent 72%);
pointer-events: none;
}
/* Vermelho bem baixo por cima, para a textura nao virar cinza no meio do preto. */
.tm-hero::after {
content: "";
position: absolute;
inset: -8% 0 auto 0;
height: 76%;
z-index: -1;
background: linear-gradient(180deg, rgba(192, 24, 26, .09), transparent 55%);
pointer-events: none;
}
/* No claro a textura precisa escurecer em vez de iluminar, senao some no branco. */
/* No claro a textura vira uma mancha rosada sobre o branco: o véu vermelho tinge tudo e as
listras somem. Ela e o véu saem, e o hero claro fica limpo. A textura foi desenhada para o
preto, e insistir nela no claro só suja. */
[data-theme="light"] .tm-hero::before { display: none; }
[data-theme="light"] .tm-hero::after { display: none; }
.tm-hero__grid {
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: clamp(2rem, 5vw, 4rem);
align-items: center;
}
.tm-hero__texto p { color: var(--tm-texto-2); max-width: 52ch; }
.tm-hero__texto p:first-of-type { color: var(--tm-texto); font-size: 1.15rem; }
/* Régua vermelha entre título e subtítulo, igual à da capa. */
.tm-hero__regua {
width: min(100%, 460px);
height: 3px;
background: linear-gradient(90deg, var(--tm-vermelho) 0%, var(--tm-vermelho) 70%, transparent 100%);
border: 0;
margin: .25rem 0 1.1rem;
transform-origin: left center;
}
.tm-js .tm-hero .tm-visivel .tm-hero__regua { animation: tm-regua .8s cubic-bezier(.2,.7,.3,1) .25s both; }
@keyframes tm-regua {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
.tm-hero__subtitulo {
font-family: var(--tm-fonte-serifa);
font-size: clamp(1.15rem, 2.2vw, 1.6rem);
font-style: italic;
letter-spacing: .01em;
color: var(--tm-texto-2);
margin: 0 0 1.75rem;
}
/* Selo de lançamento: a urgência é real e vem do autor, então aparece em cima. */
.tm-selo {
display: inline-flex;
align-items: center;
gap: .5rem;
font-family: var(--tm-fonte-titulo);
font-size: .8rem;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--tm-texto);
border: 1px solid var(--tm-vermelho);
border-radius: 999px;
padding: .35rem .9rem;
margin-bottom: 1.25rem;
}
.tm-selo::before {
content: "";
width: 7px; height: 7px;
border-radius: 50%;
background: var(--tm-vermelho);
box-shadow: 0 0 0 0 var(--tm-vermelho);
animation: tm-pulso 2.4s ease-out infinite;
}
@keyframes tm-pulso {
0% { box-shadow: 0 0 0 0 rgba(192, 24, 26, .7); }
70% { box-shadow: 0 0 0 9px rgba(192, 24, 26, 0); }
100% { box-shadow: 0 0 0 0 rgba(192, 24, 26, 0); }
}
.tm-hero__botoes { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
/* A capa é o produto, não uma ilustração: ganha volume, lombada e sombra projetada.
Antes ela ficava plana contra o fundo preto e simplesmente desaparecia. */
.tm-hero__capa {
position: relative;
margin: 0;
perspective: 1600px;
}
/* ==========================================================================
5.1 Livro em 3D — ⛔ PARADO EM 24/08/2026, NADA AQUI ESTÁ NO AR
`tm_livro_3d()` deixou de imprimir esta estrutura: o hero e a página Livros passaram a mostrar
uma imagem plana da capa. O motivo está por extenso no comentário daquela função, no
`functions.php` — em resumo, a cena de quatro faces chegava desmontada na tela do cliente e
três correções em dois dias não pegaram, num defeito que não reproduz em navegador controlado.
O bloco fica aqui inteiro, e não apagado, porque é uma implementação que funciona na maioria dos
navegadores e pode ser retomada. Enquanto `tm_livro_3d()` não voltar a imprimir `.tm-livro`,
NENHUMA regra daqui até o fim de 5.1 casa com coisa alguma.
Medidas fiéis ao impresso: 6 x 9 polegadas com lombada de 0,49.
Em pixels, a lombada é 0.49/6 da largura, que é o --tm-livro-e abaixo.
========================================================================== */
.tm-livro {
--tm-livro-l: min(340px, 62vw);
--tm-livro-a: calc(var(--tm-livro-l) * 1.5);
--tm-livro-e: calc(var(--tm-livro-l) * 0.0817);
position: relative;
width: var(--tm-livro-l);
height: var(--tm-livro-a);
margin-inline: auto;
transform-style: preserve-3d;
}
.tm-livro__corpo {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transform: rotateY(-30deg) rotateX(2deg);
transition: transform 1s cubic-bezier(.16, .84, .28, 1);
}
.tm-hero__capa:hover .tm-livro__corpo { transform: rotateY(-13deg) rotateX(1deg); }
/* As faces são `div` com fundo, não ``: ver o comentário longo em `tm_livro_3d()`, no
`functions.php`. `100% 100%` porque a face TEM a proporção da arte; não há o que recortar. */
.tm-livro__face {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
background-color: #0b0b0b;
backface-visibility: hidden;
border-radius: 1px 3px 3px 1px;
}
.tm-livro__frente { transform: translateZ(calc(var(--tm-livro-e) / 2)); }
.tm-livro__verso { transform: rotateY(180deg) translateZ(calc(var(--tm-livro-e) / 2)); border-radius: 3px 1px 1px 3px; }
.tm-livro__lombada {
width: var(--tm-livro-e);
left: calc(50% - var(--tm-livro-e) / 2);
transform: rotateY(-90deg) translateZ(calc(var(--tm-livro-l) / 2));
border-radius: 2px 0 0 2px;
}
/* Corte das páginas: faixa clara com listras finas, do lado oposto à lombada. */
.tm-livro__paginas {
position: absolute;
top: .6%;
height: 98.8%;
width: var(--tm-livro-e);
left: calc(50% - var(--tm-livro-e) / 2);
transform: rotateY(90deg) translateZ(calc(var(--tm-livro-l) / 2));
background:
repeating-linear-gradient(90deg, #e8e6e1 0 1px, #cfccc4 1px 2px),
linear-gradient(90deg, #b9b5ac, #f2f0eb 30%, #dedbd3);
border-radius: 0 2px 2px 0;
}
/* Sombra projetada no chão, separada do livro para não girar junto. */
.tm-livro__sombra {
position: absolute;
left: 6%;
right: 2%;
bottom: -26px;
height: 40px;
background: radial-gradient(ellipse at center, rgba(0, 0, 0, .65), transparent 72%);
filter: blur(10px);
z-index: -1;
transition: opacity .6s ease;
}
[data-theme="light"] .tm-livro__sombra { background: radial-gradient(ellipse at center, rgba(0, 0, 0, .35), transparent 72%); }
/* Entrada: o livro chega mais fechado e abre até a posição de repouso.
*
* ⚠️ Nada de `opacity` nem `will-change` daqui para dentro. Qualquer um dos dois força o
* navegador a achatar o `transform-style: preserve-3d`, e aí as faces param de ser lados de
* uma caixa e viram elementos soltos empilhados na página: a lombada e o verso literalmente
* despencaram para dentro da seção seguinte. A entrada do livro é só rotação; quem cuida do
* fade é a figura que envolve tudo, fora do contexto 3D.
*/
.tm-js .tm-hero__capa .tm-livro__corpo {
transform: rotateY(-60deg) rotateX(6deg) scale(.92);
}
/*
* A FLUTUAÇÃO INFINITA SAIU, em 23/08/2026, com o aval do cliente ("se a solução for retirar ali as
* animações não tem problema").
*
* O livro entra girando uma vez e para. Uma transformação 3D que não muda mais é rasterizada uma
* vez e fica; enquanto a animação existia, a cena era redesenhada para sempre, e era numa dessas
* passagens que a capa chegava pela metade na tela do cliente.
*
* A entrada continua: é ela que dá vida ao hero, dura 1,3s e termina. Para trazer a flutuação de
* volta, devolver a linha `animation` abaixo — e saber que se está devolvendo junto o risco.
*/
.tm-js .tm-hero__capa.tm-visivel .tm-livro__corpo {
transform: rotateY(-30deg) rotateX(2deg);
transition: transform 1.3s cubic-bezier(.16, .84, .28, 1) .2s;
}
/* A figura da capa não usa fade, pelo mesmo motivo: opacidade no ancestral que carrega a
perspectiva achata a cena 3D enquanto a transição roda. Ela entra só subindo. */
/*
* ⚠️ Aqui havia `will-change: transform`, e ele saiu em 23/08/2026.
*
* `will-change` é um aviso de "vou animar isto AGORA", e vale enquanto a animação corre. Deixado
* de forma permanente, ele obriga o navegador a manter esta figura numa camada própria de GPU
* para sempre — e esta figura não é uma imagem qualquer: ela carrega a `perspective` de uma cena
* 3D com quatro faces e uma animação infinita por dentro. Camada grande e permanente é rasterizada
* em pedaços, e pedaço pode ser descartado sob pressão de memória e redesenhado depois.
*
* É exatamente essa a forma do defeito que o cliente fotografou em 23/08: a capa aparece pintada
* até certa altura e o resto fica em branco, sem nada faltar no HTML nem no CSS.
*
* Não consegui reproduzir o artefato em navegador controlado — está dito assim no relatório, e não
* como "corrigido". O que dá para afirmar é que a camada permanente deixou de existir, e ela era o
* único mecanismo capaz de produzir esse desenho pela metade.
*/
.tm-js .tm-hero__capa:has(.tm-livro) {
opacity: 1;
transform: translateY(24px);
}
.tm-js .tm-hero__capa.tm-visivel:has(.tm-livro) { transform: none; }
/* Aqui viviam `@keyframes tm-livro-flutua` e a pausa dela no `:hover`. Saíram em 23/08/2026 junto
com a animação, para não ficar regra apontando para o que não existe mais. O histórico do
arquivo tem as duas, se um dia a flutuação voltar. */
@media (prefers-reduced-motion: reduce) {
.tm-js .tm-hero__capa .tm-livro__corpo,
.tm-js .tm-hero__capa.tm-visivel .tm-livro__corpo {
opacity: 1;
transform: rotateY(-24deg);
animation: none;
transition: none;
}
}
.tm-hero__capa > img {
position: relative;
border-radius: 2px 5px 5px 2px;
box-shadow:
-6px 0 0 rgba(255, 255, 255, .06) inset,
0 40px 80px rgba(0, 0, 0, .65),
0 8px 24px rgba(0, 0, 0, .45);
transform: rotateY(-9deg) rotateX(1.5deg);
transition: transform .6s cubic-bezier(.2, .7, .3, 1), box-shadow .6s ease;
}
.tm-hero__capa:hover > img {
transform: rotateY(-4deg) rotateX(0) translateY(-6px);
box-shadow:
-6px 0 0 rgba(255, 255, 255, .08) inset,
0 50px 90px rgba(0, 0, 0, .7),
0 10px 28px rgba(0, 0, 0, .5);
}
/* Brilho vermelho difuso atrás da capa, na cor da marca. */
.tm-hero__capa::after {
content: "";
position: absolute;
inset: 12% -8% -10% -8%;
background: radial-gradient(ellipse at center, rgba(192, 24, 26, .28), transparent 68%);
filter: blur(28px);
z-index: -1;
pointer-events: none;
}
[data-theme="light"] .tm-hero__capa > img {
box-shadow: 0 26px 55px rgba(0, 0, 0, .22), 0 6px 18px rgba(0, 0, 0, .12);
}
[data-theme="light"] .tm-hero__capa::after { opacity: .5; }
@media (prefers-reduced-motion: reduce) {
.tm-hero__capa > img,
.tm-hero__capa:hover > img { transform: none; transition: none; }
}
@media (max-width: 860px) {
.tm-hero__grid { grid-template-columns: 1fr; }
.tm-hero__capa { order: -1; max-width: 320px; margin-inline: auto; }
}
/* ==========================================================================
6. Biografia e pilares
========================================================================== */
/* Bloco do autor: foto como fundo, texto por cima, 60/40.
O retrato ocupa a faixa direita e o texto vive sobre o degradê da esquerda. */
.tm-bio {
position: relative;
isolation: isolate;
overflow: hidden;
min-height: min(68vh, 620px);
display: flex;
align-items: center;
padding-block: clamp(2.75rem, 5vw, 4rem);
background: var(--tm-fundo-2);
}
[data-theme="light"] .tm-bio { background: var(--tm-fundo); }
.tm-bio__fundo {
position: absolute;
inset: 0;
z-index: -1;
background-image: var(--tm-bio-foto);
background-repeat: no-repeat;
/* A versão larga já traz o fundo do estúdio estendido, então `cover` preenche a seção
inteira sem esticar a pessoa. Ancorado à direita: o corte, quando houver, come o fundo
vazio da esquerda e nunca a figura. */
background-size: cover;
/* Ancorado no topo, nao no centro. Com `cover` numa faixa baixa e larga, o corte vertical
e inevitavel: ancorando no centro ele tira metade em cima e metade embaixo, e os cinco
pixels de cima sao exatamente a cabeca do autor. Ancorado no topo, o que se perde e o
sapato. Ja decapitei ele uma vez por isso. */
background-position: right top;
filter: grayscale(1) contrast(1.02);
}
/* Modo claro: nada de véu por cima da figura. O degradê morre antes de alcançá-la e
só sustenta o texto; a foto fica limpa, do jeito que saiu do estúdio. */
[data-theme="light"] .tm-bio__fundo { filter: none; }
/*
* ⚠️ Esta regra é do DESKTOP e precisa dizer isso em voz alta.
*
* Ela nasceu sem `@media` e por isso valia também no celular, onde o retrato não é uma faixa à
* direita e sim uma faixa no topo. Como `[data-theme="light"] .tm-bio__fundo::after` tem
* especificidade maior que o `.tm-bio__fundo::after` escrito lá embaixo dentro do
* `@media (max-width: 900px)`, ela vencia dentro do celular: o navegador pintava o degradê
* HORIZONTAL por cima de um retrato VERTICAL e cobria de branco o terço esquerdo da foto.
*
* Foi exatamente a queixa do cliente em 23/08/2026: "no mobile no tema branco, na minha foto,
* metade dela fica branca". Medido antes de mexer, em 390px no tema claro: véu de 90deg.
*
* Lição, e vale para o tema inteiro: @media NÃO adiciona especificidade. Regra de tema escrita
* fora de breakpoint atravessa todos eles.
*/
@media (min-width: 901px) {
[data-theme="light"] .tm-bio__fundo::after {
background: linear-gradient(90deg,
var(--tm-fundo) 0%,
var(--tm-fundo) 30%,
color-mix(in srgb, var(--tm-fundo) 80%, transparent) 46%,
transparent 62%);
}
}
/* Duas camadas: o degradê horizontal abre espaço para o texto, e o véu geral
segura o contraste no mobile, quando a foto passa por baixo de tudo. */
.tm-bio__fundo::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(90deg,
var(--tm-fundo-2) 0%,
color-mix(in srgb, var(--tm-fundo-2) 90%, transparent) 48%,
color-mix(in srgb, var(--tm-fundo-2) 35%, transparent) 68%,
transparent 82%),
linear-gradient(180deg,
color-mix(in srgb, var(--tm-fundo-2) 55%, transparent) 0%,
transparent 30%,
transparent 70%,
color-mix(in srgb, var(--tm-fundo-2) 55%, transparent) 100%);
}
.tm-bio__grid {
display: grid;
grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
gap: clamp(2rem, 5vw, 4rem);
width: 100%;
}
.tm-bio__texto { max-width: 60ch; }
.tm-bio__texto p { color: var(--tm-texto-2); }
.tm-bio__texto h2 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.tm-pilares-faixa { border-top: 1px solid var(--tm-borda); padding-block: clamp(2.5rem, 4.5vw, 3.25rem); }
@media (max-width: 900px) {
.tm-bio { min-height: 0; }
.tm-bio__grid { grid-template-columns: 1fr; }
/* No celular o retrato desce para o topo do bloco e o texto fica embaixo,
sobre fundo cheio: sobrepor texto em retrato estreito não se lê. */
.tm-bio__fundo {
inset: 0 0 auto 0;
height: 62vw;
max-height: 440px;
/* No celular a faixa é alta e estreita: a versão larga viraria fundo vazio.
Volta o retrato original, ajustado pela altura para caber inteiro. */
background-image: var(--tm-bio-foto-alta);
background-size: auto 100%;
background-position: center top;
}
.tm-bio__fundo::after {
background: linear-gradient(180deg,
transparent 35%,
color-mix(in srgb, var(--tm-fundo-2) 70%, transparent) 78%,
var(--tm-fundo-2) 100%);
}
/* O tema claro precisa da sua própria versão VERTICAL aqui dentro. Sem ela, quem valia no
celular claro era a regra do desktop, por especificidade — ver o aviso longo lá em cima. */
[data-theme="light"] .tm-bio__fundo::after {
background: linear-gradient(180deg,
transparent 35%,
color-mix(in srgb, var(--tm-fundo) 70%, transparent) 78%,
var(--tm-fundo) 100%);
}
/* O espaçamento tem que acompanhar a faixa da foto, incluindo o teto de 440px.
Se os dois valores saírem de sincronia, o texto sobe por cima do retrato. */
.tm-bio { padding-top: calc(min(62vw, 440px) + 1.5rem); }
.tm-bio__texto { max-width: none; }
}
.tm-pilares {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 1.5rem;
margin-top: 2.5rem;
padding: 0;
list-style: none;
}
.tm-pilar {
border-top: 2px solid var(--tm-vermelho);
padding-top: 1rem;
}
.tm-pilar__icone { width: 46px; height: 46px; margin-bottom: 1rem; display: block; }
/* Traço branco herda a cor do texto; o acento é sempre o vermelho da marca.
É isto que faz o mesmo ícone funcionar no tema claro e no escuro. */
svg.tm-pilar__icone { color: var(--tm-texto); }
svg.tm-pilar__icone .tm-icone__acento { stroke: var(--tm-vermelho-claro); }
svg.tm-pilar__icone .tm-icone__acento--cheio { fill: var(--tm-vermelho-claro); }
.tm-pilar h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.tm-pilar p { color: var(--tm-texto-2); font-size: .95rem; }
/* ==========================================================================
7. Grades de ferramentas
========================================================================== */
.tm-secao__cabecalho {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1.5rem;
margin-bottom: 2.5rem;
flex-wrap: wrap;
}
.tm-secao__cabecalho h2 { margin-bottom: 0; }
.tm-grade {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 1.5rem;
list-style: none;
margin: 0;
padding: 0;
}
.tm-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--tm-fundo-2);
border: 1px solid var(--tm-borda);
border-radius: var(--tm-radius);
overflow: hidden;
transition: border-color .3s ease, transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s ease;
}
.tm-card:hover {
border-color: var(--tm-vermelho);
transform: translateY(-6px);
box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
[data-theme="light"] .tm-card:hover { box-shadow: 0 18px 36px rgba(0, 0, 0, .14); }
.tm-secao--alt .tm-card { background: var(--tm-fundo); }
/* Fio vermelho que corre no topo do card ao passar o mouse. */
.tm-card::before {
content: "";
position: absolute;
inset: 0 auto auto 0;
height: 2px;
width: 0;
background: var(--tm-vermelho);
transition: width .45s cubic-bezier(.2, .7, .3, 1);
z-index: 2;
}
.tm-card:hover::before { width: 100%; }
.tm-card__thumb { aspect-ratio: 1 / 1; overflow: hidden; background: var(--tm-fundo-3); }
.tm-card__thumb img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}
.tm-card:hover .tm-card__thumb img { transform: scale(1.06); }
.tm-card__acao { transition: color .25s ease, border-color .25s ease; }
.tm-card:hover .tm-card__acao { color: var(--tm-vermelho-claro); }
@media (prefers-reduced-motion: reduce) {
.tm-card, .tm-card__thumb img, .tm-card::before { transition: none; }
.tm-card:hover { transform: none; }
.tm-card:hover .tm-card__thumb img { transform: none; }
}
.tm-card__corpo { display: flex; flex-direction: column; gap: .6rem; padding: 1.25rem; flex: 1; }
.tm-card__titulo { font-size: 1.05rem; margin: 0; }
.tm-card__titulo a { text-decoration: none; }
.tm-card__resumo { color: var(--tm-texto-2); font-size: .9rem; margin: 0; }
.tm-card__rodape { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: .5rem; }
.tm-card__preco { font-family: var(--tm-fonte-titulo); font-size: 1.2rem; letter-spacing: .04em; }
.tm-card__preco .amount { color: var(--tm-texto); }
.tm-card__preco del { color: var(--tm-texto-2); font-size: .85em; margin-right: .35rem; }
.tm-card__gratis {
font-family: var(--tm-fonte-titulo);
font-size: .85rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--tm-vermelho-claro);
}
.tm-card__acao {
font-family: var(--tm-fonte-titulo);
font-size: .85rem;
letter-spacing: .1em;
text-transform: uppercase;
text-decoration: none;
color: var(--tm-texto);
border-bottom: 2px solid var(--tm-vermelho);
padding-bottom: 2px;
}
/* ==========================================================================
8. Conteúdo simples e busca
========================================================================== */
.tm-pagina { padding-block: clamp(3rem, 7vw, 5rem); }
.tm-pagina__conteudo { max-width: 72ch; }
.tm-pagina__conteudo h2 { margin-top: 2em; }
/* `min-width: 0` no campo: sem isso o input usa a largura implícita de 20 caracteres como
mínimo, se recusa a encolher na coluna do rodapé e empurra o botão "Ir" para fora da tela.
Eram os 12px de rolagem lateral medidos em 1280 em todas as páginas. */
.tm-busca { display: flex; gap: .5rem; max-width: 420px; }
.tm-busca input[type="search"] {
flex: 1 1 0;
min-width: 0;
padding: .75rem 1rem;
background: var(--tm-fundo-2);
border: 1px solid var(--tm-borda);
border-radius: var(--tm-radius);
color: var(--tm-texto);
font: inherit;
}
.tm-busca input[type="search"]::placeholder { color: var(--tm-texto-2); }
/* ==========================================================================
8.1 Barra fixa de conversão
========================================================================== */
.tm-barra {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 60;
background: color-mix(in srgb, var(--tm-fundo-2) 96%, transparent);
backdrop-filter: blur(10px);
border-top: 1px solid var(--tm-borda);
transform: translateY(110%);
transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}
.tm-barra[data-visivel="true"] { transform: none; }
.tm-barra__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding-block: .75rem;
}
.tm-barra__livro { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.tm-barra__livro img { border: 1px solid var(--tm-borda); flex: none; }
.tm-barra__livro div { display: grid; min-width: 0; }
.tm-barra__livro strong {
font-family: var(--tm-fonte-titulo);
font-size: 1rem;
letter-spacing: .06em;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tm-barra__livro span { font-size: .8rem; color: var(--tm-texto-2); }
.tm-barra .tm-btn { padding: .7rem 1.25rem; font-size: .9rem; white-space: nowrap; }
@media (max-width: 560px) {
.tm-barra__livro span { display: none; }
.tm-barra .tm-btn { padding: .7rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
.tm-barra { transition: none; }
}
/* ==========================================================================
9. Rodapé
========================================================================== */
.tm-footer {
background: var(--tm-fundo-2);
border-top: 1px solid var(--tm-borda);
padding-block: clamp(2.25rem, 4vw, 3.25rem) 1.75rem;
}
.tm-footer__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2.25rem;
margin-bottom: 2rem;
}
.tm-footer h3 { font-size: .95rem; letter-spacing: .14em; color: var(--tm-texto-2); }
.tm-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.tm-footer a { text-decoration: none; color: var(--tm-texto); }
.tm-footer a:hover { color: var(--tm-vermelho-claro); }
.tm-footer__base {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding-top: 1.5rem;
border-top: 1px solid var(--tm-borda);
color: var(--tm-texto-2);
font-size: .85rem;
}
.tm-footer__base a { color: var(--tm-texto-2); }
.tm-assinatura a {
display: inline-flex;
align-items: center;
gap: .4rem;
text-decoration: none;
transition: color var(--tm-transicao);
}
.tm-assinatura a:hover { color: var(--tm-texto); }
.tm-assinatura img { width: 20px; height: 20px; display: block; }
/* Só o ícone: o espaçamento que antes nascia da palavra "Desenvolvido por" precisa existir
sozinho, e a área de clique precisa ser confortável num alvo de 20px. */
.tm-assinatura--icone { display: inline-flex; align-items: center; }
.tm-assinatura--icone a { gap: 0; padding: .35rem; margin: -.35rem; border-radius: var(--tm-radius); opacity: .75; transition: opacity var(--tm-transicao); }
.tm-assinatura--icone a:hover,
.tm-assinatura--icone a:focus-visible { opacity: 1; }
.tm-assinatura--icone a:focus-visible { outline: 2px solid var(--tm-vermelho); outline-offset: 2px; }
/* Livro em 3D dentro do conteúdo de uma página, fora do hero. */
.tm-livro-solto {
perspective: 1600px;
margin: 0 auto 2.5rem;
max-width: 340px;
}
/* A capa plana que substituiu o livro em 3D (24/08/2026). No hero ela cai em
`.tm-hero__capa > img`, que já tinha sombra e entrada; aqui, no shortcode `[tm_livro]` da página
Livros, ela precisa do seu próprio acabamento. */
.tm-livro-solto .tm-livro-plano {
display: block;
width: 100%;
height: auto;
border-radius: 2px 5px 5px 2px;
transform: rotateY(-9deg) rotateX(1.5deg);
box-shadow:
-6px 0 0 rgba(255, 255, 255, .06) inset,
0 40px 80px rgba(0, 0, 0, .55),
0 8px 24px rgba(0, 0, 0, .4);
}
[data-theme="light"] .tm-livro-solto .tm-livro-plano {
box-shadow:
-6px 0 0 rgba(0, 0, 0, .06) inset,
0 30px 60px rgba(0, 0, 0, .28),
0 6px 18px rgba(0, 0, 0, .18);
}
/* ==========================================================================
10. Formulário de contato
========================================================================== */
.tm-form { max-width: 560px; display: grid; gap: 1.25rem; }
.tm-form__campo { display: grid; gap: .4rem; margin: 0; }
.tm-form label {
font-family: var(--tm-fonte-titulo);
font-size: .85rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--tm-texto-2);
}
.tm-form input[type="text"],
.tm-form input[type="email"],
.tm-form textarea {
width: 100%;
padding: .8rem 1rem;
background: var(--tm-fundo-2);
border: 1px solid var(--tm-borda);
border-radius: var(--tm-radius);
color: var(--tm-texto);
font: inherit;
transition: border-color var(--tm-transicao);
}
.tm-form input:focus,
.tm-form textarea:focus { border-color: var(--tm-vermelho); outline: none; }
.tm-form textarea { resize: vertical; min-height: 150px; }
.tm-form button { justify-self: start; }
/* Campo-isca do antispam: fora da tela, e não `display:none`, que robô detecta.
Largura livre de propósito: com `width:1px` o rótulo transbordava a própria caixa e aparecia
como texto cortado em toda auditoria de layout, um falso positivo que escondia os de verdade. */
.tm-form__isca { position: absolute; left: -9999px; top: auto; width: auto; height: auto; }
.tm-form__aviso {
border-left: 3px solid var(--tm-vermelho);
padding: .75rem 1rem;
background: var(--tm-fundo-2);
max-width: 560px;
}
.tm-form__aviso--ok { border-left-color: #2e9e5b; }
/* ==========================================================================
11. WooCommerce
O markup é do plugin; aqui só vestimos com os tokens do tema. Mexer o mínimo
possível é proposital: carrinho e checkout precisam sobreviver a atualização.
========================================================================== */
.tm-loja { padding-block: clamp(2.5rem, 5vw, 4rem); }
.tm-loja__topo { margin-bottom: clamp(2rem, 4vw, 3rem); }
.tm-loja__topo h1 { margin-bottom: .5rem; }
.tm-loja__descricao { color: var(--tm-texto-2); max-width: 65ch; }
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { color: var(--tm-texto-2); font-size: .9rem; }
/* --- grade de produtos --- */
.woocommerce ul.products {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 1.5rem;
margin: 0;
padding: 0;
list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }
.woocommerce ul.products li.product {
width: auto !important;
margin: 0 !important;
float: none !important;
display: flex;
flex-direction: column;
background: var(--tm-fundo-2);
border: 1px solid var(--tm-borda);
border-radius: var(--tm-radius);
overflow: hidden;
padding: 0 0 1.25rem;
transition: border-color .3s ease, transform .35s cubic-bezier(.2, .7, .3, 1);
}
.woocommerce ul.products li.product:hover { border-color: var(--tm-vermelho); transform: translateY(-4px); }
/* O link do WooCommerce embrulha imagem, título e preço. Ele vira a coluna do card para o
preço poder descer até a base e todos os cards ficarem alinhados, com título de uma ou de
duas linhas. */
.woocommerce ul.products li.product > a.woocommerce-loop-product__link {
display: flex;
flex-direction: column;
flex: 1;
text-decoration: none;
color: inherit;
}
/*
* As capas são quadradas, com o nome do produto desenhado dentro da arte. Recortar em 4:3
* comia o título da própria imagem: era o que aparecia "estourado". Caixa quadrada para arte
* quadrada não corta nada.
*/
.woocommerce ul.products li.product a img {
width: 100%;
margin: 0 0 1.1rem;
aspect-ratio: 1 / 1;
object-fit: cover;
display: block;
transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}
.woocommerce ul.products li.product:hover a img { transform: scale(1.04); }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-family: var(--tm-fonte-titulo);
font-size: 1rem !important;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: .02em;
padding: 0 1.25rem !important;
margin: 0 0 .6rem;
/* Duas linhas fixas: com títulos de tamanhos diferentes, o preço ficava em alturas
diferentes de card para card, e a grade parecia desalinhada. */
min-height: 2.4em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.woocommerce ul.products li.product .price {
display: block;
margin-top: auto;
padding: 0 1.25rem;
color: var(--tm-texto) !important;
font-family: var(--tm-fonte-titulo);
font-size: 1.2rem;
letter-spacing: .02em;
}
.woocommerce ul.products li.product .price del { color: var(--tm-texto-2); font-size: .8em; }
/* "a partir de" é informação de apoio: não pode ter o mesmo peso do número. */
.tm-preco__prefixo {
display: block;
font-family: var(--tm-fonte-texto);
font-size: .75rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--tm-texto-2);
margin-bottom: .1rem;
}
.tm-preco--gratis { color: var(--tm-vermelho); }
.woocommerce ul.products li.product .button {
display: block;
margin: 1.1rem 1.25rem 0;
text-align: center;
}
/* --- ficha do produto --- */
.woocommerce div.product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); }
.woocommerce div.product .woocommerce-product-gallery { width: 100% !important; float: none !important; margin: 0 !important; }
.woocommerce div.product .summary { width: 100% !important; float: none !important; margin: 0 !important; }
.woocommerce div.product .product_title { font-size: clamp(1.9rem, 4vw, 3rem); }
.woocommerce div.product p.price,
.woocommerce div.product span.price {
color: var(--tm-texto) !important;
font-family: var(--tm-fonte-titulo);
font-size: clamp(1.5rem, 3vw, 2.1rem);
}
.woocommerce div.product .woocommerce-tabs { grid-column: 1 / -1; }
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; border: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-color: var(--tm-borda); }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
background: var(--tm-fundo-2);
border-color: var(--tm-borda);
border-radius: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--tm-texto-2); font-family: var(--tm-fonte-titulo); text-transform: uppercase; letter-spacing: .08em; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--tm-texto); }
@media (max-width: 860px) {
.woocommerce div.product { grid-template-columns: 1fr; }
}
/* --- botões, formulários e avisos --- */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
background: var(--tm-vermelho);
color: #fff;
font-family: var(--tm-fonte-titulo);
font-size: .95rem;
letter-spacing: .08em;
text-transform: uppercase;
border-radius: var(--tm-radius);
padding: .85rem 1.6rem;
transition: background-color var(--tm-transicao);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover { background: var(--tm-vermelho-claro); color: #fff; }
.woocommerce .quantity .qty,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce table.cart td.actions .coupon .input-text {
background: var(--tm-fundo-2);
border: 1px solid var(--tm-borda);
color: var(--tm-texto);
border-radius: var(--tm-radius);
padding: .7rem .85rem;
}
.woocommerce table.shop_table,
.woocommerce table.shop_table td,
.woocommerce table.shop_table th { border-color: var(--tm-borda); color: var(--tm-texto); }
.woocommerce table.shop_table { border-radius: var(--tm-radius); }
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
background: var(--tm-fundo-2);
border-top: 3px solid var(--tm-vermelho);
color: var(--tm-texto);
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--tm-vermelho-claro); }
/* ==========================================================================
Tela do pedido com Pix — ajustes pedidos pelo cliente em 24/08/2026
O miolo desta tela é desenhado pelo plugin do Mercado Pago, com as cores dele. Duas medições
feitas em pedido real antes de mexer, em 1440x900:
.mp-details-title color: rgb(51, 51, 51) sobre um fundo rgb(10, 10, 10) no tema escuro
vão entre a caixa do Pix e "Detalhes do pedido": 133px
(30px de margem da caixa + 96px do ritmo de h2)
O cinza é cravado no CSS do plugin, e some contra o preto. No tema claro ele passa, mas a
frase é a mesma nos dois lugares: em vez de escrever branco na mão, ela passa a herdar a cor
de texto do tema, que resolve os dois de uma vez.
========================================================================== */
.woocommerce-order .mp-details-title {
color: var(--tm-texto);
}
/* O vão de 133px: 30px vinham da caixa do plugin e 96px do ritmo geral de `h2` do tema, que serve
para título de seção de página e é demais logo abaixo de um bloco fechado. Mesma correção, e
mesma razão, do vão acima de "Total no carrinho", resolvido em 21/08. */
.woocommerce-order .mp-details-pix { margin-bottom: 1rem; }
.woocommerce-order .woocommerce-order-details__title,
.woocommerce-order .mp-details-pix ~ h2 { margin-top: 2.5rem; }
/* Aviso de pedido esperando pagamento, no carrinho e no checkout vazios. Substituiu o
redirecionamento automático que prendia o visitante na tela do pedido (23/08/2026). */
.tm-aviso-pedido {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.tm-aviso-pedido .button { flex: 0 0 auto; margin: 0; }
.woocommerce .woocommerce-breadcrumb { color: var(--tm-texto-2); font-size: .85rem; }
.woocommerce .woocommerce-breadcrumb a { color: var(--tm-texto-2); }
/* Gate de e-mail na ficha da ferramenta gratuita. */
.tm-gate { margin: 1.5rem 0; }
.tm-gate__chamada {
font-family: var(--tm-fonte-titulo);
font-size: .9rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--tm-vermelho-claro);
margin-bottom: 1rem;
}
.tm-form--gate { max-width: 420px; gap: 1rem; }
/* No celular o trio carrinho + tema + menu passava de 290px e empurrava a linha para fora da
tela: 25px de rolagem lateral em 390px, medidos. A palavra "Carrinho" sai e fica a contagem. */
@media (max-width: 560px) {
.tm-header__acoes { gap: .5rem; }
.tm-header .tm-btn { padding: .7rem .85rem; font-size: .85rem; }
.tm-btn__rotulo { display: none; }
.tm-marca { font-size: 1rem; letter-spacing: .08em; }
}
/* --------------------------------------------------------------------------
11.1 Ficha de produto: botões, variações e abas
O WooCommerce e o plugin de swatches trazem o próprio visual, pensado para
tema claro: na ficha os botões de versão saíam branco sobre branco e o
"Adicionar ao carrinho" vinha roxo. Aqui eles entram na identidade do site.
-------------------------------------------------------------------------- */
.woocommerce div.product form.cart .variations,
.woocommerce div.product .cfvsw_variations_form { margin: 1.5rem 0 0; }
.woocommerce .cfvsw-swatches-option,
.woocommerce div.product form.cart .variations select {
background: var(--tm-fundo-2);
color: var(--tm-texto);
border: 1px solid var(--tm-borda);
border-radius: var(--tm-radius);
font: inherit;
font-size: .9rem;
padding: .6rem .9rem;
min-width: 0;
width: auto;
height: auto;
box-shadow: none;
transition: border-color var(--tm-transicao), background-color var(--tm-transicao), color var(--tm-transicao);
}
.woocommerce .cfvsw-swatches-option { cursor: pointer; line-height: 1.2; }
.woocommerce .cfvsw-swatches-option:hover { border-color: var(--tm-texto-2); }
.woocommerce .cfvsw-swatches-option.cfvsw-selected-swatch,
.woocommerce .cfvsw-swatches-option[class*="selected"] {
border-color: var(--tm-vermelho);
background: var(--tm-vermelho);
color: #fff;
}
/* O plugin usa a mesma classe para o texto interno; ele tem que herdar a cor. */
.woocommerce .cfvsw-swatches-option * { color: inherit; }
.woocommerce div.product .cfvsw_swatches_container { display: flex; flex-wrap: wrap; gap: .5rem; }
/* Rótulo da variação e descrição que muda conforme a versão escolhida. */
.woocommerce div.product .cfvsw_swatches_wrapper > .cfvsw_swatches_label,
.woocommerce div.product form.cart .variations th.label {
font-family: var(--tm-fonte-titulo);
text-transform: uppercase;
letter-spacing: .08em;
font-size: .8rem;
color: var(--tm-texto-2);
}
.woocommerce div.product .woocommerce-variation-description p {
color: var(--tm-texto-2);
font-size: .95rem;
margin: .75rem 0 0;
}
.woocommerce div.product .woocommerce-variation-price .price { font-size: 1.6rem; }
/* Botões do WooCommerce na identidade do tema. */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce div.product form.cart .button {
background: var(--tm-vermelho);
color: #fff;
font-family: var(--tm-fonte-titulo);
text-transform: uppercase;
letter-spacing: .08em;
font-weight: 700;
border: 0;
border-radius: var(--tm-radius);
padding: .95rem 1.6rem;
transition: background-color var(--tm-transicao), transform var(--tm-transicao);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce div.product form.cart .button:hover {
background: var(--tm-vermelho-claro);
color: #fff;
transform: translateY(-2px);
}
.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button.disabled { background: var(--tm-fundo-3); color: var(--tm-texto-2); transform: none; }
/* Abas: régua vermelha na ativa, como o resto do site. */
.woocommerce div.product .woocommerce-tabs { grid-column: 1 / -1; }
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin: 0 0 2rem; border-bottom: 1px solid var(--tm-borda); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
background: transparent;
border: 0;
border-radius: 0;
border-bottom: 2px solid transparent;
margin: 0 1.5rem 0 0;
padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
font-family: var(--tm-fonte-titulo);
text-transform: uppercase;
letter-spacing: .08em;
font-size: .9rem;
color: var(--tm-texto-2);
padding: .75rem 0;
display: block;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom-color: var(--tm-vermelho); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--tm-texto); }
/*
* O painel das abas era limitado a 70ch (673px) dentro de um bloco de 1120px. A medida existe por
* um bom motivo, linha longa demais cansa de ler, mas com o bloco inteiro vazio à direita o efeito
* lido pelo cliente em 20/08/2026 foi "está espremido", e ela também apertava a tabela de
* "Informação adicional" e qualquer vídeo que ele coloque na descrição.
*
* Agora o painel ocupa a largura toda e a medida vale só para texto corrido, mais folgada: 90ch.
* Tabela, imagem, vídeo e citação usam o espaço inteiro, que é onde ele faz falta.
*/
.woocommerce div.product .woocommerce-tabs .panel { max-width: none; }
.woocommerce div.product .woocommerce-tabs .panel > p,
.woocommerce div.product .woocommerce-tabs .panel > ul,
.woocommerce div.product .woocommerce-tabs .panel > ol,
.woocommerce div.product .woocommerce-tabs .panel > h2,
.woocommerce div.product .woocommerce-tabs .panel > h3,
.woocommerce div.product .woocommerce-tabs .panel > h4 { max-width: 90ch; }
.woocommerce div.product .woocommerce-tabs .panel > table,
.woocommerce div.product .woocommerce-tabs .panel > figure,
.woocommerce div.product .woocommerce-tabs .panel > blockquote,
.woocommerce div.product .woocommerce-tabs .panel > .wp-block-embed { max-width: none; width: 100%; }
.woocommerce div.product .product_meta { color: var(--tm-texto-2); font-size: .9rem; margin-top: 1.5rem; }
.woocommerce div.product .product_meta a { color: var(--tm-texto); }
@media (max-width: 860px) {
.woocommerce div.product { grid-template-columns: minmax(0, 1fr); }
}
/* A aba ativa do WooCommerce vem com fundo branco fixo, que no tema escuro deixava o rótulo
invisível. A régua vermelha embaixo já marca qual está ativa. */
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
background: transparent;
box-shadow: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--tm-texto); }
/* O seletor de ordenação vinha branco do navegador, único elemento claro numa página escura. */
.woocommerce .woocommerce-ordering select {
background: var(--tm-fundo-2);
color: var(--tm-texto);
border: 1px solid var(--tm-borda);
border-radius: var(--tm-radius);
padding: .55rem .8rem;
font: inherit;
font-size: .9rem;
}
.woocommerce .woocommerce-ordering { margin-bottom: 1.5rem; }
.woocommerce .woocommerce-result-count { margin-bottom: 1.5rem; }
/* No card de 260px o preço e o link "ver ferramenta" não cabiam lado a lado, e o link quebrava
em duas linhas por cima do preço. Eles passam a poder descer de linha juntos, inteiros. */
.tm-card__rodape { flex-wrap: wrap; gap: .5rem 1rem; }
.tm-card__acao { white-space: nowrap; font-size: .85rem; }
/* ==========================================================================
12. Aviso de cookies (SureCookie)
O plugin é do cliente e entrega uma barra branca fixa, com quatro botões de
pesos parecidos, em cima de todas as páginas. Aqui ela entra na identidade
do site e a hierarquia fica clara: aceitar é o botão vermelho, recusar é
texto. Nenhuma opção foi escondida.
========================================================================== */
.surecookie-public-banner.surecookie-banner {
background: var(--tm-fundo-2) !important;
color: var(--tm-texto) !important;
border-top: 1px solid var(--tm-borda);
box-shadow: 0 -18px 40px rgba(0, 0, 0, .45);
font-family: var(--tm-fonte-texto) !important;
}
.surecookie-public-banner.surecookie-banner p,
.surecookie-public-banner.surecookie-banner span,
.surecookie-public-banner.surecookie-banner div { color: var(--tm-texto-2) !important; }
.surecookie-public-banner .surecookie-btn-base {
font-family: var(--tm-fonte-titulo) !important;
text-transform: uppercase;
letter-spacing: .06em;
font-size: .8rem !important;
border-radius: var(--tm-radius) !important;
padding: .7rem 1.2rem !important;
transition: background-color var(--tm-transicao), color var(--tm-transicao);
}
.surecookie-public-banner .surecookie-accept-all-btn {
background: var(--tm-vermelho) !important;
border-color: var(--tm-vermelho) !important;
color: #fff !important;
}
.surecookie-public-banner .surecookie-accept-all-btn:hover { background: var(--tm-vermelho-claro) !important; }
.surecookie-public-banner .surecookie-accept-btn,
.surecookie-public-banner .surecookie-preferences-btn,
.surecookie-public-banner .surecookie-decline-btn {
background: transparent !important;
border: 1px solid var(--tm-borda) !important;
color: var(--tm-texto) !important;
}
.surecookie-public-banner .surecookie-accept-btn:hover,
.surecookie-public-banner .surecookie-preferences-btn:hover,
.surecookie-public-banner .surecookie-decline-btn:hover { border-color: var(--tm-texto-2) !important; }
/* A assinatura do plugin não precisa competir com o texto do aviso. */
.surecookie-public-banner .surecookie-branding { opacity: .45; }
/* O plugin marca o foco com um anel verde que não é de lugar nenhum do site. Trocado pelo
vermelho da identidade, mantendo o anel: quem navega por teclado precisa dele. */
.surecookie-public-banner .surecookie-btn-base:focus,
.surecookie-public-banner .surecookie-btn-base:focus-visible {
outline: 2px solid var(--tm-vermelho-claro) !important;
outline-offset: 2px;
box-shadow: none !important;
}
/* ==========================================================================
Descrição do produto: conteúdo livre do cliente
O cliente perguntou em 18/08 se pode colocar vídeo e foto na descrição. Pode:
a aba de descrição é a do WooCommerce e passa pelo `the_content()`, então
aceita tudo o que o editor do WordPress produz. O que faltava era o CSS.
`img` já tinha `max-width: 100%` global, mas `iframe` não tinha regra nenhuma:
um vídeo do YouTube colado ali sairia com a largura do embed (algo como 1200px)
e empurraria a página inteira para o lado no celular. É a mesma família de
defeito da rolagem lateral de 12px que já custou uma rodada de QA neste projeto.
========================================================================== */
.woocommerce div.product .woocommerce-tabs .panel > :first-child { margin-top: 0; }
.woocommerce div.product .woocommerce-tabs .panel > :last-child { margin-bottom: 0; }
/* Qualquer mídia incorporada cabe na coluna, sem exceção. */
.woocommerce div.product .woocommerce-tabs .panel iframe,
.woocommerce div.product .woocommerce-tabs .panel video,
.woocommerce div.product .woocommerce-tabs .panel embed,
.woocommerce div.product .woocommerce-tabs .panel object {
max-width: 100%;
border: 0;
display: block;
}
/* Vídeo do YouTube, Vimeo e afins: proporção 16:9 preservada em qualquer largura.
O WordPress envolve o embed em .wp-block-embed__wrapper (editor de blocos) ou
entrega o iframe solto (editor clássico). Os dois casos entram aqui. */
.woocommerce div.product .woocommerce-tabs .panel .wp-block-embed__wrapper,
.woocommerce div.product .woocommerce-tabs .panel .wp-video,
.woocommerce div.product .woocommerce-tabs .panel > iframe {
position: relative;
width: 100%;
margin: 1.5rem 0;
}
.woocommerce div.product .woocommerce-tabs .panel .wp-block-embed__wrapper > iframe,
.woocommerce div.product .woocommerce-tabs .panel > iframe {
aspect-ratio: 16 / 9;
height: auto;
width: 100%;
border-radius: var(--tm-radius);
}
/* Imagem e legenda dentro da descrição. */
.woocommerce div.product .woocommerce-tabs .panel figure { margin: 1.5rem 0; }
.woocommerce div.product .woocommerce-tabs .panel figure img { border-radius: var(--tm-radius); }
.woocommerce div.product .woocommerce-tabs .panel figcaption {
color: var(--tm-texto-2);
font-size: .85rem;
margin-top: .5rem;
}
/* Títulos, listas, citação e tabela: o cliente escreve no editor e sai na identidade
do site, sem precisar de nós. */
.woocommerce div.product .woocommerce-tabs .panel h2,
.woocommerce div.product .woocommerce-tabs .panel h3,
.woocommerce div.product .woocommerce-tabs .panel h4 {
font-family: var(--tm-fonte-titulo);
color: var(--tm-texto);
text-transform: uppercase;
letter-spacing: .04em;
margin: 2rem 0 .75rem;
line-height: 1.2;
}
.woocommerce div.product .woocommerce-tabs .panel h2 { font-size: 1.35rem; }
.woocommerce div.product .woocommerce-tabs .panel h3 { font-size: 1.15rem; }
.woocommerce div.product .woocommerce-tabs .panel h4 { font-size: 1rem; }
.woocommerce div.product .woocommerce-tabs .panel ul,
.woocommerce div.product .woocommerce-tabs .panel ol { padding-left: 1.25rem; margin: 1rem 0; }
.woocommerce div.product .woocommerce-tabs .panel li { margin-bottom: .4rem; }
.woocommerce div.product .woocommerce-tabs .panel blockquote {
margin: 1.5rem 0;
padding: .25rem 0 .25rem 1.25rem;
border-left: 2px solid var(--tm-vermelho);
color: var(--tm-texto-2);
}
.woocommerce div.product .woocommerce-tabs .panel a { color: var(--tm-texto); }
.woocommerce div.product .woocommerce-tabs .panel table {
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0;
display: block;
overflow-x: auto;
}
.woocommerce div.product .woocommerce-tabs .panel th,
.woocommerce div.product .woocommerce-tabs .panel td {
border-bottom: 1px solid var(--tm-borda);
padding: .6rem .75rem;
text-align: left;
}
/*
* Esta regra existia e era a que realmente prendia o painel em 673px, dentro de um `@media`.
* Removida em 20/08/2026: a largura do painel passou a ser livre e a medida de leitura vive nos
* elementos de texto, logo acima. Ficou aqui só o registro, porque a busca por "70ch" não a
* encontrava, ela dizia 78ch, e uma varredura de regras por `selectorText` também não: regra dentro
* de `@media` é uma `CSSMediaRule`, que não tem `selectorText`, e passa batido em qualquer
* inspeção que só olhe o seletor.
*/
/* ---------------------------------------------------------------------------
Carrinho, checkout e conta: largura de layout, não de leitura.
`.tm-pagina__conteudo` tem `max-width: 72ch`, que é a medida certa para texto
corrido (Sobre o Autor, Contato) e errada para uma tabela de compra: em 1440
prendia a página inteira em 621px dentro de um container de 1200, e o bloco de
totais, que o WooCommerce joga com `float: right`, ia parar no meio da tela.
Era o "dois blocos flutuando" que o cliente viu.
Medido em 20/08/2026 com carrinho de verdade. O QA de 19/08 passou por
`/carrinho/` com o carrinho VAZIO, então a tabela nunca existiu para ser medida.
--------------------------------------------------------------------------- */
.woocommerce-cart .tm-pagina__conteudo,
.woocommerce-checkout .tm-pagina__conteudo,
.woocommerce-account .tm-pagina__conteudo { max-width: none; }
/* O total encosta na borda direita da tabela em vez de flutuar no meio. */
.woocommerce-cart .cart-collaterals { display: flex; justify-content: flex-end; }
.woocommerce-cart .cart-collaterals .cart_totals { float: none; width: min(460px, 100%); }
/* "Total no carrinho" cabia em duas linhas na coluna estreita. */
.woocommerce-cart .cart_totals h2 { font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1.1; }
/* O campo do cupom encolhia até caber só "Código c": input precisa de min-width. */
.woocommerce table.cart td.actions .coupon .input-text,
.woocommerce-cart .coupon .input-text { min-width: 0; width: min(15rem, 100%); }
/* Quantidade travada em 1: o WooCommerce imprime só um input escondido, e a
coluna ficava em branco. `tm_quantidade_visivel()` devolve o número. */
.woocommerce td.product-quantity .tm-qtd { font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
.woocommerce-cart .cart-collaterals { display: block; }
.woocommerce-cart .cart-collaterals .cart_totals { width: 100%; }
}
/* ---------------------------------------------------------------------------
Checkout: colunas equilibradas e o seletor de país no tema.
Medido em 1440 em 20/08/2026. Duas coisas estavam erradas depois de a página
ganhar a largura inteira:
1. As duas colunas nasciam iguais (538px cada), mas uma leva os dados de
cobrança e a outra leva **um campo opcional**. Nome e Sobrenome ficavam com
247px, estreitos para um nome completo. A cobrança passa a levar 1,5x.
2. O Select2, que o WooCommerce usa no campo País, desenhava a caixa em
`background: rgb(255,255,255)`: um retângulo branco no meio de um site
preto. O CSS dele vem do plugin e não conhece as variáveis do tema.
A lista abre presa ao ``, fora de `.woocommerce`, por isso as regras
da lista não são escopadas.
--------------------------------------------------------------------------- */
@media (min-width: 861px) {
.woocommerce-checkout .col2-set {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
gap: clamp(2rem, 4vw, 3.5rem);
}
/* Colocação explícita. Sem ela, a cobrança caía na coluna estreita da direita:
virar o container em grid anula os floats do WooCommerce, que eram o que
posicionava as duas colunas, e a ordem resultante não é a da fonte. */
.woocommerce-checkout .col2-set .col-1 { grid-column: 1; grid-row: 1; }
.woocommerce-checkout .col2-set .col-2 { grid-column: 2; grid-row: 1; }
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 { width: 100%; float: none; margin: 0; }
}
.woocommerce .select2-container--default .select2-selection--single {
background: var(--tm-fundo-2);
border: 1px solid var(--tm-borda);
border-radius: var(--tm-radius);
height: auto;
padding: .55rem .85rem;
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
color: var(--tm-texto);
line-height: 1.45;
padding: 0;
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow {
top: 50%;
right: .5rem;
transform: translateY(-50%);
}
.select2-container--default .select2-dropdown {
background: var(--tm-fundo-2);
border-color: var(--tm-borda);
}
.select2-container--default .select2-results__option {
background: var(--tm-fundo-2);
color: var(--tm-texto);
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected="true"] {
background: var(--tm-vermelho);
color: #fff;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
background: var(--tm-fundo);
border: 1px solid var(--tm-borda);
color: var(--tm-texto);
border-radius: var(--tm-radius);
padding: .5rem .6rem;
}
/* A caixa de observações do pedido saía branca: o seletor do tema não alcançava
`#order_comments`, que o WooCommerce imprime fora de `.form-row` em alguns temas. */
.woocommerce-checkout textarea#order_comments,
.woocommerce form .form-row textarea#order_comments {
background: var(--tm-fundo-2);
border: 1px solid var(--tm-borda);
color: var(--tm-texto);
border-radius: var(--tm-radius);
padding: .7rem .85rem;
}
/* A linha de ações do carrinho: cupom à esquerda, atualizar à direita.
O WooCommerce empilha `.coupon` como bloco e deixa o input e o botão flutuando,
e o resultado era o campo em cima e o "Aplicar cupom" embaixo, deslocado.
Print do cliente em 20/08/2026. */
/*
* `display: flex` aqui era a solução óbvia e está errada: um container flex **deixa de ser célula
* de tabela**, e com isso o `colspan="6"` é ignorado. Enquanto a tabela era automática ninguém
* percebeu; quando ela virou `table-layout: fixed`, em 20/08/2026, a célula passou a herdar a
* largura da primeira coluna e o cupom desabou para 64px.
*
* A célula continua célula. Quem vira flex é o cupom, por dentro.
*/
.woocommerce-cart table.cart td.actions {
display: table-cell;
vertical-align: middle;
text-align: left;
overflow: hidden;
}
.woocommerce-cart table.cart td.actions .coupon {
display: inline-flex;
align-items: center;
/* `wrap` não é enfeite: o aviso de cupom inválido nasce DENTRO deste flex (ver abaixo) e
precisa de uma linha só dele. Sem isto ele vira uma terceira coluna e espreme as outras. */
flex-wrap: wrap;
gap: .75rem;
float: none;
padding: 0;
margin: 0;
vertical-align: middle;
}
/*
* Cupom que não existe: o aviso vai para BAIXO, em linha inteira.
*
* Print do cliente em 23/08/2026, no celular: o campo tinha 73px, o "Aplicar cupom" saía cortado
* e a frase do erro ficava espremida numa coluna de 60px, uma palavra por linha.
*
* A causa não é o texto: é onde o WooCommerce o imprime. Desde a versão 9 o erro de cupom não é
* mais um aviso no topo da página — é um `
` inserido por AJAX
* **dentro do próprio `.coupon`**, para leitor de tela achar o texto ao lado do campo
* (`aria-describedby`). Como `.coupon` é flex, esse parágrafo virou o terceiro item da linha e
* roubou a largura dos outros dois. Medido em produção: `.coupon` de 324px com 200px de altura.
*
* `flex: 1 0 100%` dá a linha inteira a ele, e o `order` garante que fique embaixo mesmo que o
* WooCommerce mude a ordem em que insere o elemento. O campo e o botão voltam ao tamanho normal.
*/
.woocommerce-cart table.cart td.actions .coupon .coupon-error-notice {
flex: 1 0 100%;
order: 9;
width: 100%;
margin: 0;
font-size: .9rem;
line-height: 1.5;
/* O vermelho da marca é a única cor da paleta legível nos dois temas. Mesma razão da seta
do seletor de versão, resolvida em 21/08. */
color: var(--tm-vermelho);
}
[data-theme="dark"] .woocommerce-cart table.cart td.actions .coupon .coupon-error-notice { color: var(--tm-vermelho-claro); }
/* O campo ganha a borda vermelha enquanto o código estiver recusado: o WooCommerce marca com
`has-error` e `aria-invalid`, e sem isto a única pista era o texto. */
.woocommerce-cart table.cart td.actions .coupon .input-text.has-error { border-color: var(--tm-vermelho); }
/* O campo cede espaço, o botão não: texto de botão cortado foi exatamente a queixa. */
.woocommerce-cart table.cart td.actions .coupon .input-text { flex: 1 1 8rem; }
.woocommerce-cart table.cart td.actions .coupon .button { flex: 0 0 auto; }
.woocommerce-cart table.cart td.actions > .button {
float: right;
margin: 0;
}
/* O `float: none` daqui valia também para o "Atualizar carrinho", e era ele que impedia o botão de
ir para a direita depois que a célula voltou a ser célula. Agora só alcança o que está dentro do
cupom. */
.woocommerce-cart table.cart td.actions .coupon .input-text,
.woocommerce-cart table.cart td.actions .coupon .button {
margin: 0;
float: none;
white-space: nowrap;
}
@media (max-width: 560px) {
.woocommerce-cart table.cart td.actions .coupon { display: flex; width: 100%; }
/* `width` não decide nada dentro de um flex quando existe `flex-basis`: quem manda é a base
de 8rem declarada acima. Fica pelo caso de o navegador cair no layout de bloco. */
.woocommerce-cart table.cart td.actions .coupon .input-text { width: 100%; }
/* O botão do cupom encolhe só aqui. Com o padding de 1,6rem ele ficava com 166px numa linha
de 324px e sobrava campo de digitar quase nenhum. */
.woocommerce-cart table.cart td.actions .coupon .button { padding-inline: 1rem; font-size: .85rem; }
.woocommerce-cart table.cart td.actions > .button { float: none; width: 100%; margin-top: .75rem; }
}
/* ==========================================================================
Ficha do produto: revisão pedida pelo cliente em 20/08/2026 (pontos A, B e C)
Medido antes de mexer, em 1440:
título 48px, quebrando em DUAS linhas em "Indicador Italo Arrows"
espaçamentos 24px, 39px, 0px e 32px entre os blocos do resumo, sem ritmo
select sem seta e sem cursor de clique: não parecia botão
relacionados 528px de largura, 2 colunas, porque caíam na coluna 1 da
grade de duas colunas da ficha, sem o `grid-column` que as
abas já tinham
========================================================================== */
/* --- C: o que vem depois do resumo ocupa a largura inteira --- */
.woocommerce div.product .related,
.woocommerce div.product .upsells,
.woocommerce div.product .up-sells { grid-column: 1 / -1; }
/* --- B: um ritmo só entre os blocos do resumo --- */
.woocommerce div.product .summary {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 1.15rem;
}
.woocommerce div.product .summary > * { margin: 0 !important; }
/* --- A: o título cabe em uma linha em "Indicador Italo Arrows" --- */
.woocommerce div.product .product_title { font-size: clamp(1.5rem, 2.4vw, 2.05rem); line-height: 1.12; }
/* --- A: o seletor de versão parece um seletor --- */
.woocommerce div.product form.cart table.variations,
.woocommerce div.product form.cart table.variations tbody,
.woocommerce div.product form.cart table.variations tr,
.woocommerce div.product form.cart table.variations th,
.woocommerce div.product form.cart table.variations td {
display: block;
width: 100%;
text-align: left;
padding: 0;
border: 0;
}
.woocommerce div.product form.cart table.variations { margin: 0; }
.woocommerce div.product form.cart table.variations th.label { margin-bottom: .45rem; }
.woocommerce div.product form.cart .variations select {
width: 100%;
max-width: 22rem;
cursor: pointer;
padding-right: 2.5rem;
/* A seta é desenhada aqui porque o campo tem `appearance: none`: sem ela, o
controle vira um retângulo escuro que ninguém identifica como clicável.
Ela nasceu cinza-claro (`#f2f2f2`), que é a cor do texto no tema escuro, e por isso
SUMIA no tema claro: fundo claro com seta clara. Print do cliente em 21/08/2026.
Agora é o vermelho da marca, `#c0181a`, que é a única cor da paleta que aparece nos dois
temas sem precisar de duas regras, e que de quebra marca o controle como o lugar de clicar.
O valor vai escrito à mão porque é um SVG embutido em `url()`: `var()` não vale dentro
de um data URI, e `#` precisa ir como `%23`. */
background-color: var(--tm-fundo-2);
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c0181a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right .8rem center;
background-size: 14px;
}
.woocommerce div.product form.cart .variations select:hover { border-color: var(--tm-texto-2); }
.woocommerce div.product form.cart .variations select:focus-visible {
outline: 2px solid var(--tm-vermelho);
outline-offset: 2px;
}
.woocommerce div.product form.cart .reset_variations { display: inline-block; margin-top: .5rem; font-size: .85rem; }
/* --- A: espaço entre o seletor e os botões, e os dois botões lado a lado --- */
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart,
.woocommerce div.product form.cart.tm-cart-simples {
display: flex;
flex-wrap: wrap;
/* `stretch` e não `center`: o "Comprar agora" tem borda de 1px e o outro não,
e lado a lado a diferença de 3px de altura aparece. */
align-items: stretch;
gap: .75rem;
margin-top: 1.25rem;
}
.woocommerce div.product form.cart .button.alt,
.woocommerce div.product form.cart .tm-comprar-agora { margin: 0; }
.woocommerce div.product form.cart .tm-comprar-agora {
background: transparent;
color: var(--tm-texto);
border: 1px solid var(--tm-vermelho);
}
.woocommerce div.product form.cart .tm-comprar-agora:hover {
background: var(--tm-vermelho);
color: #fff;
}
@media (max-width: 560px) {
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart,
.woocommerce div.product form.cart.tm-cart-simples { flex-direction: column; align-items: stretch; }
.woocommerce div.product form.cart .variations select { max-width: none; }
}
/* O PayPal deixa um `.ppcp-messages` vazio no resumo, para eventualmente escrever a mensagem de
parcelamento dele. Vazio ele tem altura zero, mas continua sendo um item do flex e come dois
espaçamentos: o vão antes da categoria dava 37px onde os outros davam 18px. Some enquanto estiver
vazio, e volta sozinho se o PayPal escrever algo lá dentro. */
.woocommerce div.product .summary > .ppcp-messages:empty { display: none; }
/* --- Produtos relacionados: separados do bloco de cima, e no tamanho da ficha ---
Pedido do cliente em 20/08/2026. O título saía em 48px, o mesmo tamanho que o título do produto
tinha antes de encolher, e sem nenhuma linha entre ele e a descrição acima: os dois pareciam o
mesmo bloco.
A linha é a mesma que o rodapé usa, `1px solid var(--tm-borda)`, para não inventar um separador
novo num site que já tem o seu. */
.woocommerce div.product .related,
.woocommerce div.product .upsells,
.woocommerce div.product .up-sells {
border-top: 1px solid var(--tm-borda);
margin-top: clamp(2.5rem, 5vw, 4rem);
padding-top: clamp(2rem, 4vw, 3rem);
}
.woocommerce div.product .related > h2,
.woocommerce div.product .upsells > h2,
.woocommerce div.product .up-sells > h2 {
font-size: clamp(1.5rem, 2.4vw, 2.05rem);
line-height: 1.12;
margin-bottom: 1.5rem;
}
/* --- Carrinho: largura das colunas ---------------------------------------
Efeito colateral de ter dado a largura inteira à tabela em 20/08/2026. A sobra
de espaço foi parar toda na coluna do "×": medido com dois produtos reais,
**572px para um caractere**, com o nome do produto em 197px e a miniatura
exibida a 26px. Antes da tabela ocupar a página inteira não havia sobra, então
o problema nasceu da correção anterior.
Duas tentativas antes desta não resolveram, e a razão é a mesma: em
`table-layout: auto` a largura declarada é uma **sugestão**, e o navegador
redistribui a sobra do jeito dele. Nem `width: 48px` nem `width: 1%` seguraram
a coluna, que continuou em 261px.
`table-layout: fixed` é o que torna a conta determinística: as larguras
declaradas valem, e o que sobra vai para a única coluna sem largura, o nome do
produto. Vale só a partir de 861px, porque abaixo disso o WooCommerce empilha
a tabela e a conta é outra.
-------------------------------------------------------------------------- */
@media (min-width: 861px) {
.woocommerce-cart table.cart { table-layout: fixed; }
.woocommerce-cart table.cart th.product-remove,
.woocommerce-cart table.cart td.product-remove { width: 64px; text-align: center; }
.woocommerce-cart table.cart th.product-thumbnail,
.woocommerce-cart table.cart td.product-thumbnail { width: 104px; }
.woocommerce-cart table.cart td.product-thumbnail img {
width: 72px;
height: auto;
border: 1px solid var(--tm-borda);
border-radius: var(--tm-radius);
}
.woocommerce-cart table.cart th.product-price,
.woocommerce-cart table.cart td.product-price { width: 120px; }
.woocommerce-cart table.cart th.product-quantity,
.woocommerce-cart table.cart td.product-quantity { width: 110px; }
.woocommerce-cart table.cart th.product-subtotal,
.woocommerce-cart table.cart td.product-subtotal { width: 130px; }
/* Sem largura de propósito: fica com todo o resto. */
.woocommerce-cart table.cart td.product-name { word-break: break-word; }
}
/* ==========================================================================
Bloco de pagamento no visual do tema — pedido do cliente em 21/08/2026
Ele descreveu a caixa do cartão como "tudo cinza com as letras brancas".
Medido no checkout, em produção: `.payment_box` estava com o padrão de fábrica do
WooCommerce, `rgb(220, 215, 226)` de fundo e `rgb(81, 81, 81)` de texto — um lavanda
claro com cinza médio, que nunca passou pelo tema. Vale para TODAS as caixas, a do
Mercado Pago inclusive, e não só a da Stripe.
E há um segundo motivo, que é o que resolve a queixa dele de verdade: o plugin da Stripe
NÃO recebe cores por configuração. Ele lê as cores computadas desta página e monta com
elas a aparência do formulário que roda dentro do iframe (Appearance API), guardando o
resultado no transient `wc_stripe_appearance`, por tema. Ou seja, o campo de cartão estava
copiando o lavanda de fábrica. Corrigir aqui é corrigir lá dentro, onde nosso CSS não entra.
Depois de mudar isto, o transient precisa ser descartado para a aparência ser gerada de novo.
========================================================================== */
/* `body` na frente vence a regra do WooCommerce, que é `.woocommerce-checkout #payment` e pinta
`rgba(129, 110, 153, 0.14)`.
Esta regra passou um bom tempo sem efeito e o motivo não estava nela: havia uma CHAVE DE
FECHAMENTO SOBRANDO no fim do bloco do carrinho, escrito em 20/08/2026. Uma `}` a mais faz o
navegador entrar em recuperação de erro e ENGOLIR a regra seguinte, sem avisar em lugar nenhum.
Prova: a regra estava no arquivo servido e NÃO estava no `document.styleSheets` da página, e a
segunda regra em diante funcionava normalmente. Quando o CSS servido não bate com o CSS
aplicado, conferir o balanço de chaves antes de brigar com especificidade. */
body.woocommerce-checkout #payment,
body.woocommerce-checkout #payment ul.payment_methods {
background: var(--tm-fundo-2);
border-radius: var(--tm-radius);
}
.woocommerce-checkout #payment ul.payment_methods {
border-bottom: 1px solid var(--tm-borda);
}
.woocommerce-checkout #payment ul.payment_methods li,
.woocommerce-checkout #payment ul.payment_methods li label {
color: var(--tm-texto);
}
.woocommerce-checkout #payment div.payment_box {
background: var(--tm-fundo-3);
color: var(--tm-texto);
border: 1px solid var(--tm-borda);
border-radius: var(--tm-radius);
}
/* A setinha que liga a caixa ao meio escolhido é desenhada com borda, e não com fundo:
sem esta linha ela continuaria lavanda apontando para uma caixa escura. */
.woocommerce-checkout #payment div.payment_box::before {
border-bottom-color: var(--tm-fundo-3);
}
.woocommerce-checkout #payment div.payment_box p,
.woocommerce-checkout #payment div.payment_box label,
.woocommerce-checkout #payment div.payment_box a {
color: var(--tm-texto);
}
.woocommerce-checkout #payment div.payment_box input[type="text"],
.woocommerce-checkout #payment div.payment_box input[type="email"],
.woocommerce-checkout #payment div.payment_box input[type="tel"],
.woocommerce-checkout #payment div.payment_box input[type="number"],
.woocommerce-checkout #payment div.payment_box select,
.woocommerce-checkout #payment div.payment_box textarea {
background: var(--tm-fundo);
border: 1px solid var(--tm-borda);
color: var(--tm-texto);
border-radius: var(--tm-radius);
}
.woocommerce-checkout #payment .place-order {
color: var(--tm-texto);
}
/* Dois elementos de serviço da Stripe que passaram a aparecer quando a caixa ficou escura.
`#wc-stripe-hidden-style-input` é o truque do plugin: ele planta um input de mentira na página
só para LER as cores dele e montar a aparência do iframe. É por isso que ele continua com o
mesmo visual dos campos de verdade aqui embaixo — mudar isso mudaria o que a Stripe copia.
O que ele não pode é ocupar espaço na tela.
`#wc-stripe-currency-selector` é o seletor de moeda, que nesta loja vem vazio: multimoeda não
está implementada (ver `entrega/mensagem-workana-2026-08-20-checkout-internacional.md`). Vazio,
ele pintava uma faixa clara logo abaixo do cartão. */
.woocommerce-checkout #payment div.payment_box input#wc-stripe-hidden-style-input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
pointer-events: none;
}
.woocommerce-checkout #payment div.payment_box #wc-stripe-currency-selector {
/* O conteúdo dele é um iframe da Stripe: fundo branco por dentro, fora do alcance do nosso
CSS. Deixar o embrulho transparente não bastava, a faixa continuava. Some inteiro.
Se um dia a loja passar a vender em mais de uma moeda, esta regra tem que sair. */
display: none;
}
/* A faixa clara que restava embaixo do cartão era um `