/* ============================================================================ TEMA VOLTAGEM — CAMADA DE COMPONENTES ============================================================================ css/temas.css define os TOKENS (cor, forma, fonte, sombra). Este arquivo traz o que o Voltagem tem de próprio e que token nenhum expressa: chanfro nos componentes que as páginas criaram por conta, trilho de energia no card, holo que segue o cursor na carta, varredura no esqueleto, topo que "gruda". TUDO aqui vive sob html:not([data-tema="classico"]). Nada neste arquivo pode vazar para o tema clássico — se vazar, é defeito. ⚠️ POR QUE O ESCOPO É `:not(classico)` E NÃO `[data-tema="voltagem"]`: desde a ADR-089 o Voltagem é o tema PADRÃO, e tema padrão não escreve `data-tema` no (ele é o :root). Um seletor por atributo positivo deixaria de casar justo no caso mais comum — a página sem atributo — e o site ficaria com a cor do tema e a forma do outro. A negação cobre os dois estados: sem atributo (padrão) e `data-tema="voltagem"` explícito, que ainda chega de HTML em cache com o boot antigo. Custo conhecido e aceito: a especificidade sobe de (0,1,0) para (0,1,1) — um elemento a mais. Só desempata contra regra de mesma classe, e este arquivo já carrega depois do style.css, então na prática nada muda. POR QUE POR PADRÃO DE NOME (`[class*="badge"]`) E NÃO CLASSE A CLASSE: as 34 páginas criaram 200+ classes próprias (.ci-tab, .com-badge-chip, .badge-status-aprovado, .ajuda-chip…). Listar uma a uma envelhece no primeiro componente novo que alguém escrever. O padrão de nome pega o que existe hoje E o que vier depois, desde que siga a convenção do projeto. 🔴 O PREÇO DO PADRÃO DE NOME: ELE PEGA O CONTÊINER JUNTO. `[class*="card"]` casava com `.cards-grid` — a caixa que ENVOLVE as 60 cartas da busca. Duas consequências, ambas medidas: 1. o grid inteiro recebia `clip-path` e `perspective` de card, ou seja as quinas do GRID vinham chanfradas; 2. pior, `:hover` PROPAGA PARA ANCESTRAIS: passar o mouse em uma carta colocava `.cards-grid` em hover, e `[class*="card"]:hover [img-wrap]` acendia a faixa de luz nas 60 cartas ao mesmo tempo. A exclusão é semântica, não uma lista de nomes: **plural é coleção, singular é item**. `cards-grid` / `cards-lista` / `cards-container` são contêineres; `card-item`, `card-img-wrap`, `pg-card` são peças. Por isso `:not([class*="cards"])` — e `:not([class*="grid"])` para o caso de alguém escrever `card-grid` no singular. ⚠️ Não troque isso por `>` (filho direto): a profundidade VARIA entre as páginas — em `portfolio-publico.html` a imagem é NETA do card (`.pub-card > div > .pub-card-img`), e o filho direto quebraria o efeito lá. Ao criar contêiner de cards, use o plural no nome. Ao criar um card, não. ⚠️ EXCEÇÕES OBRIGATÓRIAS no fim do arquivo: o que é REDONDO por desenho (avatar, logo, pokébola, o próprio seletor de tema) não pode ganhar chanfro. Chanfro em cima de border-radius:50% corta o círculo em bico. ============================================================================ */ /* ═══════════ 1. CHANFRO NOS COMPONENTES PRÓPRIOS DAS PÁGINAS ═══════════ */ /* Etiquetas, chips, abas, pills, selos → chanfro pequeno */ html:not([data-tema="classico"]) [class*="badge"], html:not([data-tema="classico"]) [class*="chip"], html:not([data-tema="classico"]) [class*="-tab"], html:not([data-tema="classico"]) [class*="tab-"], html:not([data-tema="classico"]) [class*="pill"], html:not([data-tema="classico"]) [class*="selo"], html:not([data-tema="classico"]) [class*="etq"], html:not([data-tema="classico"]) [class*="tag"] { border-radius: 0; clip-path: var(--clip-badge); font-family: var(--font-data); letter-spacing: .1em; text-transform: uppercase; } /* Containers em geral → chanfro COMPACTO (8px). ⚠️ Aqui não se usa --clip-card (16px): o seletor é genérico e pega cards de padding pequeno (`.cs-card-faltante` tem 8px). Corte maior que o padding come o conteúdo — foi o que deixou os nomes de Pokémon ilegíveis no grid e decepou a primeira letra dos textos do Pulse. */ html:not([data-tema="classico"]) [class*="card"]:not([class*="cards"]):not([class*="grid"]), html:not([data-tema="classico"]) [class*="painel"], html:not([data-tema="classico"]) [class*="-box"], html:not([data-tema="classico"]) [class*="bloco"], html:not([data-tema="classico"]) [class*="grupo"], html:not([data-tema="classico"]) [class*="modal-conteudo"], html:not([data-tema="classico"]) [class*="empty-state"] { border-radius: 0; clip-path: var(--clip-compacto); } /* O chanfro grande fica para quem tem padding que o comporte: o .card do design system (24px) e os cards de métrica. */ html:not([data-tema="classico"]) .card, html:not([data-tema="classico"]) .metric-card, html:not([data-tema="classico"]) .card-elevated { clip-path: var(--clip-card); } /* ⚠️ NÃO force padding de um lado só. Aqui existia uma "rede de segurança" com `padding-left: max(10px, …)` e `padding-bottom`, para o chanfro não encostar no texto. Ela sobrescrevia só a esquerda e deixava a direita no valor original: medido, todo card ficou com `padding-left: 10px` contra `padding-right: 0px`, e TODO o conteúdo (imagem, nome, etiquetas, botões) saiu 5px do centro. A tela inteira ficou torta por causa da proteção. A proteção real é o --clip-compacto (8px) do bloco acima: corte pequeno o bastante para caber no padding que os cards já têm. Se um dia for preciso mais respiro, mexa no padding dos DOIS lados, nunca de um. */ /* Botões, campos e o que se comporta como controle → chanfro de botão. ⚠️ `button[class]`, e não `button` puro. Botão SEM classe costuma ser link textual com `padding: 0` (`#btn-limpar-filtros` é assim), e chanfro sobre padding zero entra no texto: o "L" de "Limpar filtros" era decepado e a tela mostrava "impar filtros". Mesma regra do chanfro em card: o corte nunca pode ser maior que o padding. */ html:not([data-tema="classico"]) [class*="btn"], html:not([data-tema="classico"]) button[class], html:not([data-tema="classico"]) input:not([type="checkbox"]):not([type="radio"]), html:not([data-tema="classico"]) select, html:not([data-tema="classico"]) textarea { border-radius: 0; clip-path: var(--clip-btn); } /* Botão que é LINK (sem fundo, sem borda, texto sublinhado) nunca leva chanfro, tenha classe ou não. */ html:not([data-tema="classico"]) button[id*="limpar"], html:not([data-tema="classico"]) button[class*="limpar"], html:not([data-tema="classico"]) button[class*="-link"], html:not([data-tema="classico"]) button[class*="texto"] { clip-path: none; } /* Botão: a faísca que atravessa no hover (assinatura do tema) ⚠️ `.btn-hero` está aqui porque a LANDING TEM VOCABULÁRIO PRÓPRIO. Ela não carrega css/style.css, e os CTAs dela são `.btn-hero`, não `.btn` — então nunca receberam a faísca, enquanto o resto do site a tinha. Enquanto o Voltagem era opcional isso passou despercebido; ao virar padrão (ADR-089), os dois botões da PRIMEIRA tela do visitante viraram os únicos sem reação nenhuma ao hover, e foi assim que o Ricardo notou. `position: relative` é requisito da faísca (ela é `position: absolute`), e não redundância: `.btn` já é relative pelo style.css, `.btn-hero` não era. Ao criar botão com nome próprio numa página, ou use `.btn`, ou acrescente a classe aqui — senão ele nasce sem a assinatura do tema, calado. */ html:not([data-tema="classico"]) .btn, html:not([data-tema="classico"]) .btn-hero { overflow: hidden; position: relative; } html:not([data-tema="classico"]) .btn::after, html:not([data-tema="classico"]) .btn-hero::after { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); transition: left .5s var(--ease); pointer-events: none; } html:not([data-tema="classico"]) .btn:hover::after, html:not([data-tema="classico"]) .btn-hero:hover::after { left: 140%; } /* 🔴 `clip-path` CORTA `box-shadow`. Provado em isolado: dois elementos iguais com `box-shadow: 12px 12px 0 red`, e só o que não tem clip mostra o vermelho. Não existe `overflow: visible` que salve — é o mesmo corolário do chanfro que decepava letra (ADR-088), agora atingindo sombra em vez de texto. O CTA do hero anuncia o hover com `box-shadow` (glow que vai de 30px/0.2 a 40px/0.4). Sob o chanfro, os dois estados ficam invisíveis e o botão parece morto. `filter: drop-shadow()` é aplicado DEPOIS do recorte e acompanha a forma chanfrada, então o glow volta e sai com o bico do chanfro junto. Aqui é o GLOW da landing (halo difuso em volta, vocabulário próprio dela). A sombra dura de bloco, que vale para o resto do site, está no bloco seguinte — são efeitos diferentes e não se somam no mesmo botão. */ html:not([data-tema="classico"]) .btn-hero-primary { box-shadow: none; filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), .30)); } html:not([data-tema="classico"]) .btn-hero-primary:hover { box-shadow: none; filter: drop-shadow(0 0 16px rgba(var(--accent-rgb), .50)); } /* ═══════════ BOTÃO FÍSICO — a sombra dura que faltava em TODO o site ═══════ Os tokens `--shadow-btn: 6px 6px 0` / `--shadow-btn-hover: 8px 8px 0` e o par `--btn-lift` / `--btn-press` vieram juntos do tema de referência: são as DUAS METADES de um só efeito. O botão é uma peça física com sombra projetada — no hover ele levanta (recua 1px e a sombra se afasta para 8px) e no clique afunda (avança 3px e a sombra recua para 2px). Valores conferidos no arquivo de referência (`Temas Layout/Theme V2/poketrack-theme-voltagem-v2.html`, bloco BOTÕES): `--sombra-dura: 6px 6px 0 rgba(0,0,0,.55)` · hover `8px 8px 0` · active `2px 2px 0` · faísca em `rgba(255,255,255,.55)`. Ao mexer aqui, confira lá antes — foi assim que o `3px` que eu tinha chutado no active e a faísca em `.45` foram corrigidos. Só que `css/style.css` entrega essas sombras por `box-shadow`, e o chanfro as recorta: metade do efeito nunca existiu em tela nenhuma. O movimento sozinho — 1px sem sombra que o justifique — é o "pequeno movimento" que o Ricardo notou sem conseguir nomear. A soma deslocamento + sombra é sempre 6px, e é isso que faz o conjunto ler como peça sólida em vez de elemento escorregando: repouso 0px + 6px hover -1px + 8px (afasta: levanta) clique +3px + 3px (encosta: afunda) ⚠️ `filter` substitui `box-shadow` aqui, não acompanha: deixar os dois ativos empilharia uma sombra recortada por baixo de uma inteira. */ html:not([data-tema="classico"]) .btn { box-shadow: none; filter: drop-shadow(6px 6px 0 rgba(0,0,0,.55)); } html:not([data-tema="classico"]) .btn:hover { box-shadow: none; filter: drop-shadow(8px 8px 0 rgba(0,0,0,.55)); } html:not([data-tema="classico"]) .btn:active { box-shadow: none; /* 2px, não 3px: valor conferido no arquivo de referência (`.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0}`). O botão avança 3px e a sombra recua para 2px — a sobra de 1px é o que impede que ele pareça encostar no chão e sumir. */ filter: drop-shadow(2px 2px 0 rgba(0,0,0,.55)); } /* Botão desativado não tem profundidade: `.btn[disabled]{box-shadow:none}` na referência. Sem isto, um botão apagado continua projetando sombra e lê como clicável. */ html:not([data-tema="classico"]) .btn[disabled], html:not([data-tema="classico"]) .btn:disabled { filter: none; transform: none; } /* O MOVIMENTO vale para todas as variantes, não só a primária. Na referência quem move é o `.btn:hover` BASE — `--fantasma`, `--discreto`, `--psi` e `--perigo` herdam o `translate(-1px,-1px)` e só trocam cor ou sombra. No nosso design system o lift mora em `.btn-primary:hover` (`css/style.css`), então secundário e ghost ficavam parados: medido, os dois com `transform: none` no hover enquanto o primário recuava 1px. Fica aqui, no tema, e não no style.css, porque o Clássico não tem essa linguagem — lá `--btn-lift` é um translateY sutil de outro desenho. */ html:not([data-tema="classico"]) .btn:hover { transform: var(--btn-lift); } html:not([data-tema="classico"]) .btn:active { transform: var(--btn-press); } /* ⚠️ BOTÃO SEM FUNDO NÃO LEVA SOMBRA DURA — e isso é da referência, não contorno de limitação técnica. Lá, `.btn--fantasma` e `.btn--discreto` são `background: transparent` e TROCAM a sombra dura por `box-shadow: inset 0 0 0 1px` — ou seja, o secundário é contorno, não peça projetada. Só o botão de ação (fundo sólido) levanta do plano. Bate com o motivo técnico: `drop-shadow` projeta a silhueta do que é OPACO, não a caixa — num botão transparente ele desenharia a sombra da borda e das LETRAS, um texto fantasma deslocado. As duas razões apontam para o mesmo lugar. Nosso `.btn-ghost`/`.btn-outline` já têm `border: 1px solid` no design system, que cumpre o papel do `inset` da referência; então aqui só é preciso anular a sombra projetada que a regra de `.btn` acabou de dar. */ html:not([data-tema="classico"]) .btn-ghost, html:not([data-tema="classico"]) .btn-outline, html:not([data-tema="classico"]) .btn-ghost:hover, html:not([data-tema="classico"]) .btn-outline:hover, html:not([data-tema="classico"]) .btn-ghost:active, html:not([data-tema="classico"]) .btn-outline:active { filter: none; } /* ═══════════ 2. CARD COM TRILHO DE ENERGIA ═══════════ No tema original o card é um "chassi": trilho que carrega no hover e dois parafusos. Aqui o mesmo efeito é aplicado ao .card do design system. */ html:not([data-tema="classico"]) .card { position: relative; overflow: hidden; } html:not([data-tema="classico"]) .card::before { content: ""; position: absolute; left: 0; top: 24px; bottom: 16px; width: 3px; background: var(--border-strong); } html:not([data-tema="classico"]) .card::after { content: ""; position: absolute; left: 0; top: 24px; bottom: 16px; width: 3px; background: var(--accent); transform: scaleY(0); transform-origin: top; transition: transform var(--transition), box-shadow var(--transition); } html:not([data-tema="classico"]) .card:hover { transform: translateY(-3px); border-color: var(--border-strong); } html:not([data-tema="classico"]) .card:hover::after { transform: scaleY(1); box-shadow: 0 0 14px -1px var(--accent-glow); } /* ═══════════ 2b. CARTA NO GRID: SIMETRIA E LEGIBILIDADE ═══════════ O celular expôs três problemas que o desktop escondia. */ /* ⚠️ Badge SOBREPOSTO à carta não leva espaçamento de rótulo. `.idioma-badge` fica em position:absolute no canto da arte; com letter-spacing .1em + caixa alta, "PT-BR" inchou e cobriu metade da carta. Selo sobre imagem tem de ser o menor elemento da tela, não o maior. */ html:not([data-tema="classico"]) .idioma-badge, html:not([data-tema="classico"]) .badge-idioma, html:not([data-tema="classico"]) .badge-idioma-mini { letter-spacing: 0; text-transform: none; font-family: var(--font-data); font-size: .62rem; padding: 2px 6px; line-height: 1.2; white-space: nowrap; } /* A arte da carta centralizada dentro do card */ html:not([data-tema="classico"]) .card-img-wrap { display: grid; place-items: center; margin-inline: auto; width: 100%; } html:not([data-tema="classico"]) .card-img-wrap img { margin-inline: auto; object-fit: contain; } /* Corpo do card: uma coluna com respiro igual entre as partes, e os botões sempre encostados na base — sem isso, card com nome de 1 linha e card com nome de 2 linhas terminam em alturas diferentes e a grade fica torta. */ /* FOLGA entre a borda do card e o conteúdo (pedido do Ricardo). Sem ela a arte encosta na aresta do chanfro e a primeira letra do nome e do set PARECE cortada — a medição mostrava o texto inteiro dentro da caixa, mas encostado na diagonal do corte, que é o que o olho lê como letra decepada. */ html:not([data-tema="classico"]) .card-item { display: flex; flex-direction: column; padding: 4px; } /* ⚠️ `gap` pequeno de propósito. Medido: com gap 8px o card do Voltagem ficava com 442px contra 372px do clássico — 70px a mais, todos no .card-info, com a MESMA imagem (226px). Espaçamento generoso entre 4 elementos vira meia tela de altura quando multiplicado por 60 cartas na grade, e foi o que deixou o grid "esticado". */ html:not([data-tema="classico"]) .card-info { display: flex; flex-direction: column; gap: 3px; flex: 1; text-align: center; align-items: center; line-height: 1.3; } html:not([data-tema="classico"]) .card-nome { margin: 0; } html:not([data-tema="classico"]) .card-meta-line { margin: 0; font-size: .78rem; } /* ⚠️ O `margin-top: auto` NÃO vai nas etiquetas. Ele estava aqui para alinhar os botões na base, mas quem é empurrado é o elemento que o recebe: medido, abriu um vão de 37px entre o set e a etiqueta de raridade, e foi isso que deixou o grid alto e vazio no meio. O `auto` passa para o ÚLTIMO filho (o bloco de botões): as informações ficam juntas no topo e só os botões descem para a base. */ html:not([data-tema="classico"]) .card-badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: flex-start; margin-top: 2px; /* Altura reservada para DUAS linhas de etiqueta. Medido: "ULTRA RARE" ocupa 1 linha e "SPECIAL ILLUSTRATION RARE" ocupa 2, e isso deixava os botões 11px fora de alinhamento entre cards vizinhos. Reservar o espaço alinha a grade inteira SEM abrir vão — que era a alternativa (`margin-top: auto` nos botões) e foi justamente o que deixou o card alto e vazio no meio. */ /* Também reserva DUAS linhas. Medido: "MEGA HYPER RARE" ocupa 1 e "SPECIAL ILLUSTRATION RARE" ocupa 2, e com 1 linha reservada os botões desse card ficavam 10px acima dos vizinhos. Reservar nome (2 linhas) E etiqueta (2 linhas) faz TODOS os cards terem a mesma composição: a fileira alinha sozinha, sem `margin-top: auto` e sem vão no meio — as duas coisas que já tinham falhado antes. */ min-height: 38px; } /* Sobra de espaço no bloco de informação: medido, o padding somava 22px e os dois botões 63px, num card de 430px. A arte (226px) fica intocada — é o conteúdo, e carta pequena já foi problema antes. */ html:not([data-tema="classico"]) .card-info { padding: 8px 10px 10px; } /* Raridade longa ("SPECIAL ILLUSTRATION RARE") ocupava 3 linhas no celular por causa do espaçamento entre letras. Menos espaçamento, cabe em 2. */ html:not([data-tema="classico"]) .badge-legal, html:not([data-tema="classico"]) .badge-rare, html:not([data-tema="classico"]) .card-badges [class*="badge"] { letter-spacing: .04em; font-size: .64rem; line-height: 1.25; } /* ⚠️ O NOME DA CARTA QUEBRA, NÃO CORTA. A 1ª versão aplicava `nowrap` + reticências nos dois, e o nome virava "Mega Chandelur…", "Recruta do Clã C…" — o dado mais importante do card ficava ilegível para resolver um problema de largura. Nome: até 2 linhas, inteiro. Só a linha secundária (set · número), que é longa e repetitiva, continua com reticências. */ /* Nome: até 2 linhas, e SEMPRE ocupando a altura de 2. Medido: com nome de 1 linha o card terminava 18px acima do vizinho de 2 linhas, e era isso que desalinhava os botões na grade. Reservar a altura alinha a fileira inteira sem empurrar nada com `margin-top: auto` — que era a outra saída, e reabriria o vão no meio do card. */ html:not([data-tema="classico"]) .card-nome { max-width: 100%; white-space: normal; overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; } html:not([data-tema="classico"]) .card-meta-line { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Botão DENTRO de card estreito herda o padding generoso do tema (13px 22px) e estoura: no celular o "♡" chegou a quebrar do "Desejos", numa linha só para ele. Dentro do card o botão fica compacto e não quebra. */ html:not([data-tema="classico"]) .card-item .btn, html:not([data-tema="classico"]) .card-item button, html:not([data-tema="classico"]) .pg-card .btn, html:not([data-tema="classico"]) .pg-card button { padding: 5px 10px; font-size: .68rem; letter-spacing: .03em; gap: 4px; white-space: nowrap; min-width: 0; flex: 0 1 auto; } html:not([data-tema="classico"]) .card-acoes, html:not([data-tema="classico"]) .card-item .card-badges + div { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; width: 100%; } /* ═══════════ 3. CARTA: HOLO QUE SEGUE O CURSOR ═══════════ --mx/--my são escritos por js/temaEfeitos.js no pointermove. Sem o JS o brilho fica no centro (50%/50%), que é um estado válido. */ /* Cada tela batizou a moldura da carta à sua maneira — `card-img-wrap` na busca, `pg-card-img` no portfólio, `pub-card-img` na coleção pública, `lj-card-img` na lojinha, `ld-card-img`/`wm-card-img` nos desejos. Casar por padrão de nome cobre as seis e as que vierem; listar uma a uma deixaria o holo funcionando em duas telas e ausente nas outras quatro. */ html:not([data-tema="classico"]) [class*="-card-img"], html:not([data-tema="classico"]) [class*="img-wrap"], html:not([data-tema="classico"]) .carta__arte { position: relative; overflow: hidden; transform-style: preserve-3d; transition: transform var(--transition); } /* O brilho usa o AMARELO da marca, não o roxo do arquivo original. Decisão do Ricardo: o roxo entrava como uma terceira cor na tela e brigava com o accent — vira bagunça visual. Sai de --accent-rgb, então acompanha qualquer tema futuro (e a cor de destaque Pro, ADR-023) sem retoque. */ html:not([data-tema="classico"]) [class*="-card-img"]::before, html:not([data-tema="classico"]) [class*="img-wrap"]::before { content: ""; position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none; /* Raio pequeno de propósito: com 300px o brilho cobria a carta inteira e lia como "mancha", não como reflexo que o cursor carrega. O ponto de luz precisa ser menor que a arte para o olho perceber que ELE se move. */ background: radial-gradient(150px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.26), rgba(var(--accent-rgb),.16) 40%, transparent 70%); mix-blend-mode: screen; transition: opacity var(--transition); } html:not([data-tema="classico"]) [class*="card"]:not([class*="cards"]):not([class*="grid"]):hover [class*="-card-img"]::before, html:not([data-tema="classico"]) [class*="card"]:not([class*="cards"]):not([class*="grid"]):hover [class*="img-wrap"]::before { opacity: 1; } /* faixa de luz que atravessa a arte */ html:not([data-tema="classico"]) [class*="-card-img"]::after, html:not([data-tema="classico"]) [class*="img-wrap"]::after { content: ""; position: absolute; inset: -40% -120%; z-index: 3; pointer-events: none; background: linear-gradient(75deg, transparent 42%, rgba(255,255,255,.16) 50%, transparent 58%); transform: translateX(-40%); transition: transform .7s var(--ease); } html:not([data-tema="classico"]) [class*="card"]:not([class*="cards"]):not([class*="grid"]):hover [class*="-card-img"]::after, html:not([data-tema="classico"]) [class*="card"]:not([class*="cards"]):not([class*="grid"]):hover [class*="img-wrap"]::after { transform: translateX(40%); } html:not([data-tema="classico"]) .card-item, html:not([data-tema="classico"]) [class*="card"]:not([class*="cards"]):not([class*="grid"]) { perspective: 900px; } /* ═══════════ 4. BARRA DE VOLTAGEM (topo da página) ═══════════ */ html:not([data-tema="classico"]) .barra-voltagem { position: relative; height: 3px; background: var(--accent); overflow: hidden; box-shadow: 0 0 22px -4px var(--accent-glow); } html:not([data-tema="classico"]) .barra-voltagem::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0) 38%, rgba(255,255,255,.9) 50%, rgba(255,255,255,0) 62%, transparent 100%); transform: translateX(-100%); animation: voltagemLuz 5.5s cubic-bezier(.5,0,.5,1) infinite; } @keyframes voltagemLuz { 0% { transform: translateX(-100%) } 55%,100% { transform: translateX(100%) } } /* ═══════════ 5. NAV / TOPO GRUDADO ═══════════ */ html:not([data-tema="classico"]) nav { background: rgba(11,11,13,.86); transition: box-shadow var(--transition), background var(--transition); } html:not([data-tema="classico"]) nav.grudado { background: rgba(11,11,13,.95); box-shadow: 0 10px 30px -18px rgba(0,0,0,.9); } /* ⚠️ A nav NÃO recebe caixa alta nem letter-spacing largo. A 1ª versão usava `.16em` + uppercase: no dashboard, que tem 6 itens de menu, cada link ficou largo demais, a barra quebrou em DUAS LINHAS e os itens passaram por cima uns dos outros. Espaçamento de rótulo curto ("PRO", "SECRETA") não escala para um menu inteiro. Fica só o sublinhado animado, que é a assinatura do tema na navegação. */ html:not([data-tema="classico"]) nav a { position: relative; white-space: nowrap; } html:not([data-tema="classico"]) nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform var(--transition); } html:not([data-tema="classico"]) nav a:hover::after, html:not([data-tema="classico"]) nav a.active::after { transform: scaleX(1); transform-origin: left; } html:not([data-tema="classico"]) nav a:hover { color: var(--accent); background: transparent; } /* ═══════════ 6. TABELA ═══════════ */ html:not([data-tema="classico"]) table { font-family: var(--font-data); } html:not([data-tema="classico"]) th { font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-subtle); font-weight: 500; } html:not([data-tema="classico"]) tbody tr { transition: transform var(--transition); } html:not([data-tema="classico"]) tbody tr:hover { transform: translateX(4px); } html:not([data-tema="classico"]) tbody tr:hover td { background: var(--bg-elevated); color: var(--text); } /* ═══════════ 7. ESQUELETO COM VARREDURA ═══════════ */ html:not([data-tema="classico"]) .skeleton, html:not([data-tema="classico"]) [class*="skel"] { position: relative; overflow: hidden; background: var(--bg-elevated); } html:not([data-tema="classico"]) .skeleton::after, html:not([data-tema="classico"]) [class*="skel"]::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),.14), transparent); animation: voltagemVarredura 1.4s infinite; } @keyframes voltagemVarredura { to { transform: translateX(100%) } } /* ═══════════ 8. REVELAÇÃO POR SCROLL ═══════════ A classe é posta por js/temaEfeitos.js. Sem JS, nada fica invisível: o estado inicial só é aplicado quando o próprio JS marca o . */ html:not([data-tema="classico"])[data-revela="on"] .revela { opacity: 0; transform: translateY(26px); transition: opacity .55s var(--ease), transform .55s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); } html:not([data-tema="classico"])[data-revela="on"] .revela.visivel { opacity: 1; transform: none; } /* ═══════════ 9. TÍTULOS E RÓTULOS ═══════════ */ html:not([data-tema="classico"]) h1, html:not([data-tema="classico"]) h2 { line-height: .95; } html:not([data-tema="classico"]) .stat-label, html:not([data-tema="classico"]) .metric-label, html:not([data-tema="classico"]) [class*="rotulo"] { font-family: var(--font-data); font-size: .6875rem; letter-spacing: .22em; text-transform: uppercase; color: var(--text-subtle); } /* ⚠️ Número NÃO leva font-stretch: 125%. A Archivo esticada é ~25% mais larga que a Roboto, e "R$ 18.708,09" passou a estourar o card de métrica no dashboard — o resultado negativo chegou a quebrar em duas linhas com o "−" sozinho. Rótulo curto ("PRO", "SECRETA") aguenta o alargamento; valor monetário, não. `tabular-nums` mantém os dígitos com a mesma largura, então a coluna de valores não "dança" quando o número muda. */ html:not([data-tema="classico"]) .stat-value, html:not([data-tema="classico"]) .metric-value, html:not([data-tema="classico"]) [class*="kpi-valor"], html:not([data-tema="classico"]) [class*="-valor"] { font-family: var(--font-display); font-weight: 900; font-stretch: normal; font-variant-numeric: tabular-nums; letter-spacing: -.01em; min-width: 0; /* Tamanho fluido: encolhe no card estreito (4 métricas lado a lado na coleção pública) e cresce no largo, sem ninguém precisar escolher um número fixo que sirva para os dois. ⚠️ NADA de `overflow-wrap: anywhere` aqui: ele resolvia o transbordo quebrando o valor no meio — "R$ 137,15" virava "R$ 137," / "15", que é pior que estourar, porque parece dois números. */ font-size: clamp(1.15rem, 2.1vw, 1.75rem); line-height: 1.15; /* ⚠️ `nowrap` aqui embaixo, NÃO no elemento inteiro. O card de resultado mostra "-R$ 45,92 (-25.1%)": com nowrap no conjunto, o texto transbordava e o ")" era cortado fora da tela. Quem não pode quebrar é só o número; o percentual entre parênteses pode ir para a linha de baixo. */ white-space: normal; } /* O número em si é indivisível */ html:not([data-tema="classico"]) .valor-nucleo { white-space: nowrap; } /* Percentual de variação: acompanha, não compete com o valor */ html:not([data-tema="classico"]) .valor-sufixo { font-size: .58em; font-weight: 700; opacity: .85; white-space: nowrap; } /* Centavos em corpo menor: o olho lê a grandeza primeiro (o que importa numa métrica) e o detalhe depois. Quem separa os centavos é js/temaEfeitos.js; sem ele o valor continua inteiro e legível, só sem o refinamento. */ html:not([data-tema="classico"]) .valor-centavos { font-size: .62em; font-weight: 700; opacity: .72; letter-spacing: 0; vertical-align: baseline; } html:not([data-tema="classico"]) .valor-moeda { font-size: .68em; font-weight: 700; opacity: .8; margin-right: .12em; } /* ═══════════ 9b. TELA ESTREITA: O TEXTO DO BOTÃO NÃO PODE SER CORTADO ═══════════ 🔴 O Voltagem deixa o rótulo ~40% mais largo que o tema clássico: caixa alta + letter-spacing .1em + fonte monoespaçada. O que cabia no botão antes deixa de caber — e como `.btn` do design system tem `white-space: nowrap`, "não cabe" vira "corta". Medido no celular do Ricardo: "LOJINHA" virou "LOJINH", "COMPARTILHAR" virou "OMPARTI" e "ENTRAR EM CONTATO VIA WHATSAPP" perdeu as duas pontas. Abaixo de 640px o rótulo aperta o espaçamento e PODE quebrar em duas linhas. Botão com duas linhas é feio; botão com a palavra cortada está quebrado. */ @media (max-width: 640px) { html:not([data-tema="classico"]) .btn, html:not([data-tema="classico"]) button[class] { letter-spacing: .03em; white-space: normal; overflow-wrap: break-word; line-height: 1.25; text-align: center; } /* Barra de ações (Lojinha · Copiar · Compartilhar · Em massa · Adicionar). ⚠️ O nome da classe é `pf-actions`, em INGLÊS — meu seletor procurava "acoes" e não pegava nada. Os dois idiomas convivem no projeto; cobrir só um é o mesmo que não cobrir. Causa medida do corte: os botões têm `flex: 1 1 0%`. O `flex-basis: 0` manda o navegador ignorar o texto e dividir a largura por igual — 5 botões em 390px = 65px cada, e "Compartilhar" precisa de 87px. Com `flex: 0 1 auto` o botão PARTE do tamanho do próprio texto: encolhe se precisar, mas nunca começa do zero. */ html:not([data-tema="classico"]) [class*="actions"], html:not([data-tema="classico"]) [class*="acoes"], html:not([data-tema="classico"]) [class*="-toolbar"] { display: flex; flex-wrap: wrap; gap: 8px; } html:not([data-tema="classico"]) [class*="actions"] > .btn, html:not([data-tema="classico"]) [class*="actions"] > button, html:not([data-tema="classico"]) [class*="acoes"] > .btn, html:not([data-tema="classico"]) [class*="acoes"] > button { flex: 0 1 auto; min-width: 0; } } /* ═══════════ 10. FOCO VISÍVEL ═══════════ */ html:not([data-tema="classico"]) :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ═══════════ 11. CONTEÚDO QUE SAI PARA FORA DO CARD ═══════════ ⚠️ ARMADILHA GERAL DO CHANFRO, e ela volta: `clip-path` corta TUDO que ultrapassa a caixa do elemento — não existe `overflow:visible` que salve. Qualquer filho com `top/left/right/bottom` negativo (selo saliente, balão, menu suspenso, tooltip) é decepado quando o pai ganha chanfro. Varredura de 11/08/2026 nas 34 páginas: um único caso, o selo "MAIS POPULAR" do card Pro (`top:-13px`). Aqui ele é trazido para dentro do card, o que também é mais fiel ao tema original — nele nada escapa do chassi. AO CRIAR componente com filho saliente dentro de card: ou traga para dentro como abaixo, ou tire o chanfro daquele card. */ html:not([data-tema="classico"]) .plano-badge-destaque { top: 10px; border-radius: 0; clip-path: var(--clip-badge); color: var(--accent-contrast); } html:not([data-tema="classico"]) .plano-card { padding-top: 44px; } /* ════════════════════════════════════════════════════════════════════════ EXCEÇÕES — o que é REDONDO por desenho Chanfro sobre um círculo corta o canto e deixa bico. Estas regras vêm por último de propósito: precisam vencer as de cima. Ao criar componente redondo novo, acrescente aqui. ════════════════════════════════════════════════════════════════════════ */ html:not([data-tema="classico"]) [class*="avatar"], html:not([data-tema="classico"]) [class*="logo-icon"], html:not([data-tema="classico"]) [class*="pokebola"], html:not([data-tema="classico"]) [class*="-dot"], html:not([data-tema="classico"]) [class*="spinner"], html:not([data-tema="classico"]) .ts-fab, html:not([data-tema="classico"]) .ts-cor, html:not([data-tema="classico"]) input[type="checkbox"], html:not([data-tema="classico"]) input[type="radio"], /* ⚠️ A MOLDURA DA ARTE nunca leva chanfro. `.card-img-wrap` e `.pg-card-img` contêm "card" no nome e foram pegos pelo seletor genérico: o corte de 8px entrava na própria carta e decepava o NOME IMPRESSO na arte. A arte é conteúdo, não moldura do tema — quem tem forma é o card em volta dela. */ html:not([data-tema="classico"]) .card-img-wrap, html:not([data-tema="classico"]) .pg-card-img, html:not([data-tema="classico"]) [class*="img-wrap"], /* 🔴 ELEMENTO DE TEXTO NUNCA LEVA CHANFRO — a causa das "letras cortadas". `.card-nome`, `.card-meta-line` e `.card-preco` contêm "card" no nome e foram pegos pelo seletor genérico. Medido: `.card-meta-line` tem 16px de ALTURA e recebia um corte de 8px — metade da caixa some na diagonal, e com ela a primeira e a última letra. Foi o que o Ricardo flagrou selecionando o texto: a seleção saiu com as quinas cortadas. Chanfro é forma de SUPERFÍCIE (algo com fundo ou borda). Texto solto não é superfície: recortá-lo remove conteúdo, não decora. `.card-info` entra junto — é container interno, e o card em volta já tem a forma; chanfrar de novo só corta o que está dentro. */ html:not([data-tema="classico"]) [class*="-nome"], html:not([data-tema="classico"]) [class*="-meta"], html:not([data-tema="classico"]) [class*="-preco"], html:not([data-tema="classico"]) [class*="-titulo"], html:not([data-tema="classico"]) [class*="-label"], html:not([data-tema="classico"]) [class*="-texto"], html:not([data-tema="classico"]) [class*="-desc"], html:not([data-tema="classico"]) [class*="-info"], html:not([data-tema="classico"]) [class*="-num"] { clip-path: none !important; } html:not([data-tema="classico"]) [class*="avatar"], html:not([data-tema="classico"]) [class*="logo-icon"], html:not([data-tema="classico"]) .ts-fab { border-radius: 50% !important; }