/* ============================================================================ POKETRACK BR — SISTEMA DE TEMAS ============================================================================ Um tema é um conjunto de valores para os MESMOS tokens. Nenhum componente conhece nome de tema: todo componente lê token. Trocar de tema é trocar o atributo `data-tema` no — nada mais. COMO APLICAR ...... (js/tema.js faz isso) TEMA PADRÃO ....... :root, sem atributo — hoje é o Voltagem ⚠️ O PADRÃO MUDOU (12/08/2026, ADR-089): o Voltagem saiu de [data-tema] e veio para :root; o Clássico virou a opção. Quem estiver lendo isto por causa de um defeito "o site inteiro está com a cor errada": o :root é o tema padrão, e trocar o padrão é MOVER os valores entre os dois blocos — não basta mudar a constante do JS. ⚠️ REGRA QUE SUSTENTA O SISTEMA: componente NUNCA usa cor, fonte, raio ou sombra literal. Sempre var(--token). Uma cor fixa (#facc15) é um pedaço da tela que não troca de tema, e o defeito é invisível até alguém trocar. AO CRIAR UM TEMA NOVO: copie o bloco [data-tema="..."] inteiro e preencha TODOS os tokens. Token faltando cai no valor de :root e mistura os dois visuais — é o modo de falha mais comum aqui. ============================================================================ */ /* ═══════════════════════════════════════════════════════════════════════════ TEMA PADRÃO — "Voltagem" O site não é um site, é um equipamento que liga: chanfro no lugar do raio, sombra dura no lugar da difusa, caixa alta e fonte monoespaçada nos rótulos, amarelo mais saturado. Fica em :root por ser o PADRÃO — e por isso é também o fallback de qualquer token que um tema novo esqueça de definir. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ---- identidade ---- */ --tema-nome: "Voltagem"; /* ---- cor: superfícies ---- */ --bg: #0B0B0D; --bg-card: #17191F; --bg-elevated: #1E212A; --bg-inset: #101116; /* ---- cor: traços ---- */ --border: #2B2F3A; --border-strong: #3D4351; /* ---- cor: texto ---- */ --text: #F2F1EC; --text-muted: #9A9EAB; --text-subtle: #676C7A; /* ---- cor: marca ---- */ --accent: #FFC800; --accent-dark: #C79A00; --accent-light: #FFE066; /* cor do texto EM CIMA do accent — nunca escreva #111 solto num botão */ --accent-contrast: #0B0B0D; --accent-glow: rgba(255,200,0,.55); /* canais crus do accent: existe para montar rgba() com opacidade variável (brilho, véu, sombra colorida) sem fixar a cor. Sem isto, todo rgba(255,200,0,.1) do projeto fica preso no amarelo deste tema. */ --accent-rgb: 255, 200, 0; /* ---- cor: estado ---- */ --success: #3DDC84; --danger: #FF4438; --warning: #FFC800; --info: #22D3EE; /* ---- forma ---- Os dois convivem de propósito: um tema usa raio, outro usa chanfro. Quando --clip-* é `none`, o clip-path não corta nada. */ --radius: 0px; --radius-sm: 0px; --radius-pill: 0px; --clip-card: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)); --clip-btn: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px)); --clip-badge: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px)); /* ⚠️ Chanfro para container COMPACTO (padding pequeno). O corte de 16px do --clip-card é maior que o padding de vários cards do projeto (`.cs-card-faltante` tem 8px) e COME O CONTEÚDO: foi o que deixou nome de Pokémon ilegível no grid e decepou a primeira letra dos textos do Pulse. Regra: o chanfro nunca pode ser maior que o padding do elemento. */ --clip-compacto: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); /* ---- tipografia ---- ⚠️ As 3 famílias entram por no de cada página, não por JS. Como tema padrão elas pintam a PRIMEIRA tela: carregadas depois, o texto nasce em system-ui e salta de fonte na frente do visitante. */ --font-body: "Space Grotesk", system-ui, sans-serif; --font-display: "Archivo", "Arial Black", sans-serif; --font-data: "JetBrains Mono", ui-monospace, monospace; --display-weight: 900; --display-stretch: 125%; --display-tracking: -0.035em; --display-transform: uppercase; /* ---- botão (o componente com mais variação entre temas) ---- */ --btn-font: var(--font-data); --btn-weight: 700; --btn-transform: uppercase; --btn-tracking: 0.1em; --btn-padding: 13px 22px; --btn-size: 0.875rem; /* ---- profundidade ---- */ --shadow: 0 18px 40px -20px #000; --shadow-btn: 6px 6px 0 rgba(0,0,0,.55); --shadow-btn-hover: 8px 8px 0 rgba(0,0,0,.55); --btn-lift: translate(-1px,-1px); --btn-press: translate(3px,3px); /* ---- movimento ---- */ --transition: 0.16s cubic-bezier(.2,.8,.2,1); --ease: cubic-bezier(.16,1,.3,1); --ease-mec: cubic-bezier(.85,0,.15,1); /* ---- pano de fundo (camadas decorativas do ) ---- Os dois halos saem do próprio accent (um mais forte à esquerda, um sutil à direita). O arquivo original usava roxo no segundo; trocado a pedido do Ricardo — uma terceira cor na tela briga com o amarelo da marca. */ --fundo-brilho: radial-gradient(900px 620px at 12% -8%, rgba(255,200,0,.13), transparent 62%), radial-gradient(760px 560px at 96% 4%, rgba(255,200,0,.06), transparent 60%); --fundo-grade: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); --fundo-grade-size: 64px 64px; /* ---- espaçamento (igual em todos os temas, por enquanto) ---- */ --gap-xs: 4px; --gap-sm: 8px; --gap-md: 12px; --gap-lg: 16px; --gap-xl: 24px; --modal-padding: 28px; --modal-overlay-padding: 24px; } /* ═══════════════════════════════════════════════════════════════════════════ TEMA "CLÁSSICO" O visual que o site teve até 12/08/2026 — cantos arredondados, amarelo PokeTrack, sombra difusa. Foi o padrão; hoje é a opção (ADR-089). Precisa redefinir TUDO que difere do :root, inclusive desligando o que o Voltagem liga: os `none` de --clip-* e de --fundo-* abaixo não são enfeite, são o que impede o chanfro e a grade de vazarem para cá. ═══════════════════════════════════════════════════════════════════════════ */ [data-tema="classico"] { --tema-nome: "Clássico"; --bg: #0f0f13; --bg-card: #1a1a22; --bg-elevated: #22222e; --bg-inset: #14141b; --border: #2e2e3e; --border-strong: #3d3d52; --text: #f0f0f5; --text-muted: #8888aa; --text-subtle: #555570; --accent: #FACC15; --accent-dark: #D4A90E; --accent-light: #FDE047; --accent-contrast: #111111; --accent-glow: transparent; --accent-rgb: 250, 204, 21; --success: #22c55e; --danger: #ef4444; --warning: #f59e0b; --info: #38bdf8; /* raio no lugar do chanfro — e os --clip-* voltam a não cortar nada */ --radius: 12px; --radius-sm: 8px; --radius-pill: 99px; --clip-card: none; --clip-btn: none; --clip-badge: none; --clip-compacto: none; --font-body: 'Roboto', system-ui, -apple-system, sans-serif; --font-display: 'Roboto', system-ui, sans-serif; --font-data: 'Roboto', system-ui, sans-serif; --display-weight: 900; --display-stretch: normal; --display-tracking: -0.02em; --display-transform: none; --btn-font: var(--font-body); --btn-weight: 600; --btn-transform: none; --btn-tracking: normal; --btn-padding: 10px 20px; --btn-size: 0.9rem; --shadow: 0 4px 24px rgba(0,0,0,0.4); --shadow-btn: none; --shadow-btn-hover: none; --btn-lift: translateY(-1px); --btn-press: translateY(0); --transition: 0.18s ease; --ease: ease; --ease-mec: ease; --fundo-brilho: none; --fundo-grade: none; --fundo-grade-size: 0; } /* ═══════════════════════════════════════════════════════════════════════════ CAMADAS DE FUNDO Ficam aqui, e não no style.css, porque são puramente do tema: no clássico os dois tokens são `none` e as camadas não desenham nada. ═══════════════════════════════════════════════════════════════════════════ */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: var(--fundo-brilho); } body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5; background-image: var(--fundo-grade); background-size: var(--fundo-grade-size); mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 78%); -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 78%); } /* ═══════════════════════════════════════════════════════════════════════════ MOVIMENTO — respeitado em todo tema ═══════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }