/* ============================================================ REVELARIUM — Ferramenta de Tarot (/ferramentas/tarot/) Carrega DEPOIS de /style.css, que traz a paleta, a tipografia, o cabeçalho, o rodapé e — o que mais importa aqui — a mecânica do flip da carta (.carta, .carta-interior, .carta-face, .carta-verso, .carta-frente) e o bloco de prefers-reduced-motion que troca a virada por cross-fade. Nada disso é reescrito neste arquivo: a revelação da ferramenta é a MESMA peça da Carta do Dia da home. Documentos: _infos/ESPEC_Ferramenta_Tarot.md Mobile-first. Um ponto de quebra em 900px, o mesmo da home. ============================================================ */ /* ============================================================ OS ESTADOS Um documento, cinco telas, trocadas por data-estado no — a mesma convenção da Numerologia. convite · embaralhando · leque · revelacao · leitura O conteúdo de SEO NÃO some em nenhum deles. Aqui a ferramenta diverge da Numerologia de propósito: lá o cálculo toma a tela inteira e o texto de baixo atrapalharia; aqui o ritual ocupa a primeira tela e o conteúdo continua abaixo, alcançável por rolagem em qualquer momento. É a ESPEC §3, e é o que sustenta o critério de aceite 14. ============================================================ */ .tar-fase{ display:none; } body[data-estado="convite"] .tar-fase-convite, body[data-estado="embaralhando"] .tar-fase-mesa, body[data-estado="leque"] .tar-fase-mesa, body[data-estado="revelacao"] .tar-fase-carta, body[data-estado="leitura"] .tar-fase-carta{ display:block; } /* ------------------------------------------------------------ A COLUNA — mesma conta do cabeçalho e das outras ferramentas ------------------------------------------------------------ */ .tar-wrap{ padding-left:max(var(--respiro), calc((100% - var(--medida)) / 2)); padding-right:max(var(--respiro), calc((100% - var(--medida)) / 2)); } /* ============================================================ O BLOCO DO RITUAL Ocupa a primeira tela e tem ALTURA FIXA. Não é capricho de composição: é o que segura o CLS em zero. As cinco fases têm conteúdos de alturas muito diferentes (um botão, um leque, uma carta virando, um texto de 150 palavras) e, sem um piso comum, cada troca de estado empurraria a página. O piso é calculado, não chutado: cabeçalho 84px + rótulo e título ~150px + leque ~300px + ações ~110px = cabe em 640px de altura sem rolagem, que é o critério de aceite 10 (tela de 360×640). ============================================================ */ #ritual{ position:relative; /* O 84px de topo é a folga do cabeçalho fixo, a mesma do #hero da Numerologia. Os ZEROS laterais são deliberados: o /style.css dá `section{padding:90px 24px}` ao site inteiro, e esses 24px se somariam ao respiro da .tar-wrap. Quem manda na coluna aqui é a .tar-wrap, sozinha — e é ela que alinha com o cabeçalho. */ padding:84px 0 34px; min-height:min(560px, 88svh); display:flex; flex-direction:column; justify-content:center; background: radial-gradient(120% 80% at 50% 8%, rgba(217,164,65,.09) 0%, rgba(217,164,65,0) 60%), linear-gradient(to bottom, var(--azul-abismo), var(--azul-noite)); border-bottom:1px solid var(--linha); overflow:hidden; /* as pontas do leque morrem na borda da tela */ } @media (min-width:900px){ #ritual{ min-height:min(640px, 84svh); padding-top:96px; } } .tar-cabecalho{ text-align:center; } .tar-cabecalho .eyebrow, .tar-cabecalho .rotulo{ margin-bottom:10px; } /* UM tamanho só, em todos os cinco estados. A primeira versão encolhia o título ao entrar no leque, para dar a tela ao baralho — e isso mudava a altura do cabeçalho, empurrava tudo abaixo dele e punha 0,086 de CLS na conta. O título é o h1 da página; ele fica quieto. */ #ritual h1{ font-family:var(--serif); font-weight:600; font-size:clamp(21px, 4.8vw, 34px); line-height:1.14; letter-spacing:-.01em; text-align:center; text-wrap:balance; /* O /style.css dá `h1{max-width:19ch}` — medida do hero da home, onde o título é gigante. Aqui ela encolhe a caixa do h1 para menos da metade da coluna e, com margem zero, o título encosta à esquerda mesmo estando centralizado por dentro. */ max-width:none; margin-inline:auto; } /* ------------------------------------------------------------ FASE 1 — O CONVITE Uma tela silenciosa: a instrução de mentalização e um botão. ------------------------------------------------------------ */ /* As duas fases anteriores à revelação dividem a mesma altura, e é por isso que a troca entre elas não move um pixel do que vem depois. */ .tar-fase-convite, .tar-fase-mesa{ min-height:var(--tar-fase-alt); } /* `display` NÃO entra aqui. `.tar-fase-convite` tem a mesma especificidade de `.tar-fase{display:none}` e vem depois no arquivo: declarar display nesta regra deixa o convite visível em todos os estados, e ele soma a própria altura à do leque. O display é do seletor de estado, lá em cima — aqui só o arranjo interno. */ .tar-fase-convite{ text-align:center; } /* O `h2` global do site vem com 52px de margem embaixo e corpo de título de seção. Aqui ele é a chamada do ritual, logo abaixo do h1. */ .tar-convite-titulo{ font-family:var(--serif); font-weight:600; font-size:clamp(20px, 4.4vw, 27px); line-height:1.2; margin:18px 0 14px; } body[data-estado="convite"] .tar-fase-convite{ display:flex; flex-direction:column; justify-content:center; } .tar-instrucao{ max-width:32rem; margin:0 auto 26px; color:var(--ocre-suave); line-height:1.7; font-size:16px; } .tar-fase-convite .cta{ border:0; cursor:pointer; font-family:var(--sans); } .tar-fase-convite .micro{ display:block; margin-top:14px; } /* ============================================================ FASE 2 e 3 — A MESA: o baralho fechado e o leque A mesa tem altura própria e reservada. Enquanto ela existir, nada dentro dela pode mudar a altura de nada fora dela. ============================================================ */ /* O respiro de 18px é PADDING da fase, não margem da mesa. Como margem, ele atravessava a fase por colapso e somava 18px à altura do ritual só nos estados da mesa — a página descia 18px ao sair do convite. Como padding, fica dentro da altura já reservada. */ .tar-fase-mesa{ padding-top:18px; } .tar-mesa{ position:relative; height:var(--tar-mesa-alt); /* SANGRA ATÉ A BORDA DA TELA E RECORTA ALI. O leque é mais largo que a coluna de texto, e as cartas das pontas têm que morrer na borda do aparelho — é isso que dá a sensação de leque na mão, e não a de um objeto centrado com margem dos dois lados. Sem o recorte, as cartas mais abertas do arco descem além da mesa e passam por cima do "embaralhar de novo". `left:50%` desloca metade da coluna; o translate devolve metade da tela. O par centraliza a faixa de 100vw no mesmo eixo da coluna, em qualquer largura. Não gera rolagem horizontal porque o #ritual já é overflow:hidden. */ width:100vw; left:50%; transform:translateX(-50%); overflow:hidden; } /* A carta do leque. A largura mora aqui porque a geometria do JS depende dela, e o RAIO da ESPEC §12 foi calibrado contra ela: com carta de 150px e passo de 7°, aparecem ~6 cartas numa tela de 390px, que é a sensação de leque na mão. Mexer numa sem mexer na outra desmancha a conta. */ :root{ /* 33vw, e não os 40vw da primeira tentativa: com carta de 156px e passo de 75px cada carta mostrava 48% de si mesma e o leque virava uma persiana — nem o sigilo aparecia. Em 129px a carta mostra 58%, que é sobreposição de baralho na mão e ainda deixa ~6 na tela. */ --tar-carta-larg:clamp(104px, 33vw, 150px); /* O respiro acima da carta. Precisa caber a elevação da carta escolhida (18px) mais o halo dela, senão o recorte da mesa come a sombra justamente na carta que deveria se destacar. */ --tar-carta-topo:30px; /* Altura da mesa: a carta, o respiro de cima, e uma folga embaixo para o arco descer sem bater no recorte. Os 66px da folga são medida, não estimativa. Uma carta a θ graus do centro desce RAIO × (1 − cos θ) pixels. Na tela do celular, a carta mais aberta que ainda aparece está a uns 25° (além disso ela já saiu pela lateral), e 620 × (1 − cos 25°) dá 58px. Com 66 nenhuma carta VISÍVEL é cortada embaixo. Ainda cabe em 640px de altura, que é o critério de aceite 10. */ --tar-mesa-alt:calc(var(--tar-carta-larg) * 1.5 + var(--tar-carta-topo) + 66px); /* A ALTURA COMPARTILHADA DAS FASES ANTES DA REVELAÇÃO. `convite`, `embaralhando` e `leque` têm conteúdos de alturas muito diferentes — um parágrafo com um botão, uma pilha de 8 versos, um leque de 22 cartas. Sem um piso comum, cada troca de estado empurrava o conteúdo de SEO e a página inteira se mexia. O piso é a altura da fase mais alta, a da mesa: leque + margem de 18px + 16px + as ações. */ --tar-fase-alt:calc(var(--tar-mesa-alt) + 158px); } @media (min-width:900px){ :root{ --tar-carta-larg:196px; --tar-carta-topo:34px; /* No desktop o arco é bem mais aberto e as cartas das pontas descem centenas de pixels: elas SÃO cortadas embaixo, e é assim que se lê um baralho aberto na mesa. Os 96px cobrem o miolo. */ --tar-mesa-alt:calc(var(--tar-carta-larg) * 1.5 + var(--tar-carta-topo) + 96px); --tar-fase-alt:calc(var(--tar-mesa-alt) + 166px); } } /* ------------------------------------------------------------ A PILHA DO EMBARALHAMENTO — 8 versos, não 22 Oito bastam para ler como "baralho" e custam um terço do que custariam 22. A animação é encenação: o sorteio de verdade acontece no JS, no mesmo instante, e está descrito lá. Cada verso recebe as suas próprias variáveis de deslocamento (--dx, --dy, --rot, --atraso) pelo JS na hora de montar, e a animação só compõe transform e opacity — nenhuma propriedade que dispare layout. ------------------------------------------------------------ */ .tar-pilha{ position:absolute; inset:0; display:none; } body[data-estado="embaralhando"] .tar-pilha{ display:block; } .tar-pilha .tar-verso{ position:absolute; left:50%; top:var(--tar-carta-topo); width:var(--tar-carta-larg); margin-left:calc(var(--tar-carta-larg) / -2); animation:tar-riffle var(--dur-embaralhar, 1100ms) cubic-bezier(.36,.06,.2,1) var(--atraso, 0ms) both; } @keyframes tar-riffle{ 0% { transform:translate3d(0,0,0) rotate(0deg); } 22% { transform:translate3d(var(--dx), var(--dy), 0) rotate(var(--rot)); } 46% { transform:translate3d(calc(var(--dx) * -.55), calc(var(--dy) * .4), 0) rotate(calc(var(--rot) * -.5)); } 72% { transform:translate3d(calc(var(--dx) * .3), calc(var(--dy) * -.2), 0) rotate(calc(var(--rot) * .28)); } 100% { transform:translate3d(0,0,0) rotate(0deg); } } /* ------------------------------------------------------------ O LEQUE Cada carta é posicionada por rotação em torno de um ponto que fica ABAIXO da mesa — o `transform-origin` em `50% RAIOpx` coloca o pivô a RAIO pixels do topo da própria carta. Com isso `rotate(θ)` sozinho já descreve o arco, e o JS escreve uma propriedade só por quadro. `touch-action: pan-y` é inegociável: o arrasto horizontal é da ferramenta, o vertical continua rolando a página. Sem essa linha o navegador decide sozinho e a página escorrega no meio do gesto — critério de aceite 2. ------------------------------------------------------------ */ .tar-leque{ position:absolute; inset:0; touch-action:pan-y; -webkit-user-select:none; user-select:none; cursor:grab; } body[data-estado="leque"] .tar-leque{ display:block; } body:not([data-estado="leque"]) .tar-leque{ display:none; } .tar-leque.arrastando{ cursor:grabbing; } .tar-carta{ position:absolute; left:50%; top:var(--tar-carta-topo); width:var(--tar-carta-larg); margin-left:calc(var(--tar-carta-larg) / -2); padding:0; border:0; background:none; font:inherit; color:inherit; transform-origin:50% var(--tar-raio); /* A transição existe só para o encaixe e a elevação. Durante o arrasto o JS a desliga (classe .arrastando no contêiner), senão cada quadro brigaria com o anterior e o leque ficaria borrachudo. */ transition:transform .26s cubic-bezier(.2,.8,.2,1), opacity .26s ease, filter .26s ease; cursor:pointer; } .tar-leque.arrastando .tar-carta{ transition:none; } /* ---- A SAÍDA DO LEQUE E O SALTO DE ALTURA ---- A leitura é muito mais alta que o leque, e essa diferença tem que entrar na tela NO INSTANTE do toque em "É esta" — não 400ms depois, quando as cartas terminam de sair. Deslocamento causado por um gesto da pessoa é resposta; o mesmo deslocamento meio segundo depois é salto, e conta como CLS. Então o estado troca junto com o toque, e a mesa que ainda está animando é fixada por cima, fora do fluxo: ela continua na tela e para de ocupar espaço. O JS grava a posição exata que ela tinha antes da troca, para o leque não pular meio pixel ao sair do fluxo. A carta revelada fica invisível durante esses 400ms — ela só aparece quando a transição FLIP a traz do leque para o centro. */ body.tar-saindo .tar-fase-mesa{ display:block; position:absolute; margin:0; min-height:0; pointer-events:none; } body.tar-saindo .tar-acoes{ display:none; } body.tar-saindo #cartaRevelada, body.tar-saindo .tar-nome{ opacity:0; } /* ---- a saída do leque ---- Confirmada a escolha, as outras 21 deslizam para fora e apagam. A escolhida fica, e é dela que a transição FLIP do JS parte para o centro do palco. */ .tar-leque.saindo .tar-carta:not([aria-pressed="true"]){ opacity:0; transition:opacity .4s ease, transform .4s ease; /* DUR_SAIDA_LEQUE no tarot.js */ pointer-events:none; } .tar-leque.saindo{ pointer-events:none; } /* Só as cartas dentro da janela visível são desenhadas. As outras saem do fluxo de raster inteiro — é o que mantém o arrasto em 60fps num aparelho de entrada. O JS decide quem entra e quem sai. */ .tar-carta[hidden]{ display:none; } /* `will-change` entra no gesto e sai no fim dele. Deixar fixo nas 22 mantém 22 camadas de textura vivas o tempo todo, que é justamente o que derruba a memória do aparelho de entrada. */ .tar-leque.arrastando .tar-carta:not([hidden]){ will-change:transform; } /* ---- a carta escolhida, antes da confirmação ---- O halo âmbar nunca é o único sinal: a elevação e a escala vêm junto, e é por elas que a escolha se lê sem depender de cor (FUNDAMENTOS, contraste; ESPEC §11). */ .tar-carta[aria-pressed="true"]{ z-index:40 !important; filter:drop-shadow(0 0 14px rgba(217,164,65,.55)); } /* A ESCALA é do VERSO, não da carta. A carta gira em torno de um pivô a 620px dela (o centro do arco); escalar em volta desse pivô jogaria a carta para fora da tela. O verso tem origem no próprio centro. */ .tar-carta[aria-pressed="true"] .tar-verso{ outline:1px solid var(--ambar-claro); outline-offset:2px; transform:scale(var(--tar-elevacao-escala, 1.08)); box-shadow:0 12px 30px rgba(4,8,16,.7); } .tar-verso{ transform-origin:50% 50%; transition:transform .26s cubic-bezier(.2,.8,.2,1); } /* As outras perdem saturação levemente. `filter` compõe na GPU e não dispara layout. */ .tar-leque.tem-escolha .tar-carta:not([aria-pressed="true"]){ filter:saturate(.55) brightness(.72); } /* ============================================================ O VERSO DO LEQUE — versão reduzida, e por quê O verso completo vive em /style.css e monta o campo de estrelas com 60 gradientes radiais (30 pares, para o verso girado 180° continuar o mesmo verso). Numa carta só, na home, isso é barato. Vinte e duas cartas na tela ao mesmo tempo é outro problema: são ~1.320 gradientes para rasterizar antes do primeiro quadro do leque, e o custo aparece exatamente no aparelho que o critério de aceite 1 protege. Aqui o campo cai para 5 pares. A perda é invisível: no leque a carta tem 150px de largura e cada estrela mede um pixel. A moldura dupla, o halo e o sigilo — que é o que se reconhece — continuam idênticos, e continuam com simetria rotacional total. A carta REVELADA usa o verso completo do /style.css, sem nenhuma redução: ali é uma carta só, em tamanho grande, e é o momento em que a arte do baralho tem que aparecer inteira. ============================================================ */ .tar-verso{ /* `display:block` é obrigatório e não é decoração: o verso é um , e em `inline` o navegador ignora o aspect-ratio — a carta nasce com nove pixels de altura. No /style.css isso vem de graça porque lá o verso também carrega a classe .carta-face. */ display:block; position:relative; aspect-ratio:2/3; overflow:hidden; border-radius:2.4% / 1.6%; --m-ext-borda:2px; --m-int-borda:1px; --e-p:.10% .067%; --e-m:.13% .087%; background-color:var(--azul-noite); background-image: /* 5 pares — toda estrela em (x, y) tem a gêmea em (100−x, 100−y) */ radial-gradient(var(--e-m) at 79% 93%, rgba(234,224,203,.4) 50%, transparent 51%), radial-gradient(var(--e-m) at 21% 7%, rgba(234,224,203,.4) 50%, transparent 51%), radial-gradient(var(--e-p) at 14% 34%, rgba(234,224,203,.4) 50%, transparent 51%), radial-gradient(var(--e-p) at 86% 66%, rgba(234,224,203,.4) 50%, transparent 51%), radial-gradient(var(--e-m) at 9% 16%, rgba(234,224,203,.4) 50%, transparent 51%), radial-gradient(var(--e-m) at 91% 84%, rgba(234,224,203,.4) 50%, transparent 51%), radial-gradient(var(--e-p) at 71% 93%, rgba(234,224,203,.4) 50%, transparent 51%), radial-gradient(var(--e-p) at 29% 7%, rgba(234,224,203,.4) 50%, transparent 51%), radial-gradient(var(--e-m) at 74% 46%, rgba(234,224,203,.4) 50%, transparent 51%), radial-gradient(var(--e-m) at 26% 54%, rgba(234,224,203,.4) 50%, transparent 51%), radial-gradient(ellipse 40% 26.7% at 50% 50%, rgba(217,164,65,.10) 0%, rgba(217,164,65,.04) 55%, rgba(217,164,65,0) 100%); box-shadow:0 6px 18px rgba(4,8,16,.55); } /* Moldura dupla — os mesmos insets medidos na arte real das 22 cartas, copiados do /style.css. Se um lado mudar, o outro muda. */ .tar-verso::before, .tar-verso::after{ content:""; position:absolute; pointer-events:none; } .tar-verso::before{ inset:2.765% 3.225%; border:var(--m-ext-borda) solid var(--ambar); } .tar-verso::after{ inset:4.899% 5.955%; border:var(--m-int-borda) solid rgba(217,164,65,.72); } @supports (container-type: inline-size){ .tar-verso{ container-type:inline-size; --m-ext-borda:max(1px, .59cqw); --m-int-borda:max(1px, .39cqw); --e-p:max(1px, .10cqw) max(1px, .10cqw); --e-m:max(1px, .13cqw) max(1px, .13cqw); } } /* O sigilo usa a mesma regra .verso-sigilo do /style.css. */ /* ------------------------------------------------------------ AÇÕES DO LEQUE Reservadas em altura desde o primeiro paint. O botão "É esta" só aparece depois do primeiro toque, mas o espaço dele já está lá — senão o leque inteiro saltaria para cima no momento da escolha, que é o pior instante possível para a página se mexer. ------------------------------------------------------------ */ /* 92px é a altura do arranjo MAIS ALTO: o "É esta" (54) somado ao "escolher outra" (20) e ao espaço de 12 entre eles. O arranjo sem escolha tem só o "embaralhar de novo" e sobra folga — de propósito. Sem esta reserva o leque saltaria para cima no exato instante da escolha, que é o pior momento possível para a página se mexer. */ .tar-acoes{ min-height:92px; margin-top:16px; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; } .tar-acoes .cta{ border:0; cursor:pointer; font-family:var(--sans); } /* Durante o embaralhamento as ações somem sem devolver o espaço: `visibility`, não `display`. Devolver a altura faria a mesa subir e descer a cada embaralhada. */ body[data-estado="embaralhando"] .tar-acoes{ visibility:hidden; } .tar-acoes [hidden]{ display:none; } /* Link de texto, nunca botão âmbar. Vale para "escolher outra", "embaralhar de novo" e "tirar outra carta": os três são caminhos que existem sem convidar (ESPEC §5.3). */ .tar-link{ background:none; border:0; padding:0; cursor:pointer; font-family:var(--sans); font-size:14px; letter-spacing:.04em; color:var(--ocre-suave); text-decoration:underline; text-underline-offset:3px; } .tar-link:hover{ color:var(--ambar); } /* "Deslize e escolha a sua carta" fica ACIMA do leque, como manda o TEXTOS. A altura dela entra na conta do --tar-fase-alt. */ .tar-dica{ text-align:center; height:20px; margin-bottom:12px; font-size:13px; letter-spacing:.06em; color:var(--ocre-suave); } /* ============================================================ FASE 4 e 5 — A REVELAÇÃO E A LEITURA A carta que vira é a peça do /style.css: .carta > .carta-interior > (.carta-face.carta-verso | .carta-face.carta-frente). Aqui só entram o tamanho e o arranjo das duas colunas. AS DUAS ÁREAS — ARTE E TEXTO — SÃO RESERVADAS EM ALTURA DESDE A PRIMEIRA PINTURA. A da arte sai do aspect-ratio 2:3 da .carta, que não depende de imagem nenhuma ter chegado. A do texto sai de um gabarito invisível que o JS monta medindo os 22 textos na largura real da coluna — a mesma rotina da Carta do Dia, e pelo mesmo motivo: quem manda na altura é a quebra de linha, não a contagem de caracteres. ============================================================ */ .tar-fase-carta{ --carta-larg:min(58vw, 250px); } .tar-palco{ display:grid; gap:26px; justify-items:center; align-items:start; margin-top:18px; } @media (min-width:900px){ .tar-fase-carta{ --carta-larg:280px; } .tar-palco{ grid-template-columns:var(--carta-larg) minmax(0, 30rem); justify-content:center; gap:48px; } } .tar-coluna-carta{ display:flex; flex-direction:column; align-items:center; gap:14px; } .tar-coluna-carta .rotulo{ margin-bottom:0; } .tar-coluna-carta .carta{ cursor:default; } /* O h2 nasce com um espaço em branco em cada linha (ver o parcial): é isso que reserva a altura das duas antes de a carta ter nome, sem precisar de número mágico nenhum. Preenchido, ele não muda de altura — os 22 nomes cabem numa linha na largura da coluna da carta. */ .tar-nome{ font-family:var(--serif); font-size:22px; font-weight:600; text-align:center; line-height:1.2; /* O /style.css dá `h2{margin-bottom:52px}` — medida de título de seção da home. Aqui o nome da carta é legenda da arte, e os 52px abriam um vão entre ela e a leitura. */ margin-bottom:0; } /* "XVI · A Torre", numa linha só — formato literal do TEXTOS. */ .tar-nome .tar-numeral, .tar-nome .tar-sep{ color:var(--ambar); } /* O nome só entra depois da virada, junto com o texto. Antes disso ele denunciaria a carta que ainda está de costas. */ body[data-estado="revelacao"] .tar-nome{ visibility:hidden; } /* ---- a coluna do texto ---- */ .tar-leitura{ position:relative; display:grid; /* gabarito e texto na MESMA célula */ width:100%; max-width:34rem; } .tar-texto, .tar-gabarito{ grid-area:1 / 1; } .tar-texto{ opacity:0; transform:translateY(8px); transition:opacity .4s ease, transform .4s ease; /* DUR_TEXTO no tarot.js */ } .tar-texto.visivel{ opacity:1; transform:none; } /* O gabarito é o maior dos 22 textos, invisível, na mesma célula do grid. É ele que dá altura à coluna antes de o texto de verdade chegar. Montado pelo JS, e não escrito no HTML, para não servir a visitante nenhum um parágrafo escondido que o buscador leria. */ .tar-gabarito{ visibility:hidden; pointer-events:none; opacity:0; transform:none; } /* Os microtítulos dos três movimentos. Discretos, em ocre-suave, como pede o TEXTOS: eles nomeiam a estrutura da leitura sem competir com ela. */ .tar-mov{ font-family:var(--sans); font-weight:600; font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--ocre-suave); margin:0 0 8px; } .tar-texto .tar-mov + p{ margin-bottom:22px; } .tar-texto .tar-mov + p:last-child{ margin-bottom:0; } .tar-texto p{ margin:0; line-height:1.68; } .tar-texto .mov1{ color:var(--pergaminho); } .tar-texto .mov2, .tar-texto .mov3{ color:var(--pergaminho); } /* O terceiro movimento é a resposta à pergunta que a pessoa mentalizou. Ganha um fio acima, e não pergunta de volta. */ .tar-texto .tar-mov:last-of-type{ padding-top:20px; border-top:1px solid var(--linha); color:var(--ambar); } /* Rede lenta ou dado fora do ar. A carta virou e a arte está lá — o que falta é o texto, e o aviso diz isso sem fingir que houve leitura. */ .tar-erro{ padding:16px 18px; border:1px solid var(--linha); border-radius:4px; background:var(--azul-card); color:var(--ocre-suave); font-size:15px; line-height:1.6; } /* ---- o fim da leitura, nesta ordem: ponte, outra carta, irmãs ---- */ .tar-fim{ margin-top:30px; display:grid; gap:22px; } /* A ponte é a única coisa no fim da leitura que leva a pessoa adiante, e é a única que ganha botão âmbar. "Tirar outra carta" e as irmãs são links de texto — ESPEC §5.3. */ .tar-ponte{ padding:24px 20px; background:var(--azul-card); border:1px solid var(--linha); border-radius:4px; text-align:center; } .tar-ponte p:first-child{ font-size:16px; line-height:1.6; color:var(--pergaminho); max-width:30rem; margin:0 auto 18px; } .tar-ponte .cta{ margin-bottom:12px; } .tar-ponte .micro{ display:block; } .tar-outra{ text-align:center; } .tar-irmas{ border-top:1px solid var(--linha); padding-top:18px; text-align:center; font-size:14px; color:var(--ocre-suave); } /* ============================================================ CONTEÚDO DE SEO Está no HTML servido, não é injetado por JS e não é escondido em nenhum estado. Só sai de vista por rolagem. ============================================================ */ #conteudo-seo{ padding:56px 0 64px; border-top:1px solid var(--linha); } #conteudo-seo > .tar-wrap > *{ max-width:44rem; } #conteudo-seo h2{ text-align:left; font-size:clamp(23px, 4.6vw, 31px); margin:38px 0 14px; } /* A abertura são dois parágrafos de entrada, não corpo de texto: sustentam sozinhos a primeira leitura de quem chegou da busca. */ .tar-abertura{ font-size:19px; line-height:1.65; } .tar-abertura:first-child{ margin-top:0; } #conteudo-seo p{ margin-bottom:14px; color:var(--pergaminho); } .tar-faq details{ border-top:1px solid var(--linha); padding:14px 0; } .tar-faq summary{ cursor:pointer; font-weight:600; color:var(--pergaminho); list-style:none; } .tar-faq summary::-webkit-details-marker{ display:none; } .tar-faq summary::before{ content:"› "; color:var(--ambar); } .tar-faq details[open] summary::before{ content:"⌄ "; } .tar-faq p{ margin:10px 0 0; color:var(--ocre-suave); font-size:15px; } /* ------------------------------------------------------------ A MALHA DOS 22 ARCANOS Lista de links para /tarot/significado/{slug}/, no fim do conteúdo de SEO. Vinte e dois itens em linha corrida seriam uma parede; em coluna única, uma rolagem inútil. A grade resolve os dois casos sozinha: `auto-fill` escolhe quantas colunas cabem, e o mínimo de 15rem é a largura do nome mais longo do baralho — A RODA DA FORTUNA — sem quebra. Escapa do limite de 44rem do #conteudo-seo pelo mesmo motivo pelo qual a FAQ não escapa: aqui não há leitura corrida, há varredura, e a coluna estreita só faria a lista crescer. ------------------------------------------------------------ */ #conteudo-seo > .tar-wrap > .tar-arcanos{ max-width:none; } .tar-arcanos{ list-style:none; margin:18px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(15rem, 1fr)); gap:2px; } .tar-arcanos li{ margin:0; } .tar-arcanos a{ display:block; padding:11px 14px; font-size:15px; color:var(--pergaminho); border:1px solid transparent; border-radius:3px; transition:background .2s, border-color .2s, color .2s; } .tar-arcanos a:hover{ background:var(--azul-card); border-color:var(--linha); color:var(--ambar-claro); } .tar-arcanos-todas{ margin-top:16px; font-size:14px; } .tar-disclaimer{ margin-top:34px; font-size:13px; line-height:1.6; color:var(--ocre-suave); border-top:1px solid var(--linha); padding-top:16px; } /* ============================================================ MOVIMENTO REDUZIDO A ferramenta continua INTEIRA — apenas para de se mover: · sem animação de embaralhamento (o leque já entra montado) · sem inércia: o leque anda por passos discretos (no JS) · a virada vira cross-fade de 300ms — regra que já está no /style.css e vale para esta página sem uma linha a mais ============================================================ */ @media (prefers-reduced-motion: reduce){ .tar-pilha .tar-verso{ animation:none; } .tar-carta{ transition:none; } .tar-texto{ transition:opacity .3s ease; transform:none; } .tar-texto.visivel{ transform:none; } }