/** * Poupex Play 4.0 — Polimento visual * Namespace: .pp4-* / --pp4-* * * Fase 2.5. Carregado por último, depois de todo o resto. * * ------------------------------------------------------------------ * COMO OS ACHADOS FORAM ENCONTRADOS * ------------------------------------------------------------------ * Não a olho: um script percorreu nove telas (seis do cliente, três do * admin) lendo o estilo COMPUTADO de cada elemento visível e agrupando * raio de borda, duração de transição, tamanho de fonte, sombra e * tamanho de alvo interativo. O que aparece pouco no meio de milhares * de elementos é, quase sempre, o que ficou fora do padrão. * * Resultado da medição: * * Raios 999px (527) · 50% (421) · 8px (300) · 16px (288) * e mais SETE valores soltos: 12, 10, 9, 14, 13, 18, 4 * Durações SEIS distintas: .2s · .18s · .16s · .15s · .12s · .32s * Sombras NOVE distintas, uma delas dourada * Alvos links de ação com 16 a 21px de altura * * ------------------------------------------------------------------ * O ACHADO MAIS IMPORTANTE * ------------------------------------------------------------------ * `.app-sidebar` carregava `box-shadow: rgba(196,168,94,.08) 1px 0 0` * — uma linha vertical dourada na borda direita, presente em TODAS as * telas do cliente. Sobreviveu a oito sprints de varredura de cor * porque o detector lia `color`, `background`, `border` e `outline`, * e nunca `box-shadow`. */ /* ============================================================ 1 · A LINHA DOURADA DA SIDEBAR ============================================================ */ .pp4-shell .app-sidebar, html[data-theme] .pp4-shell .app-sidebar { box-shadow: none !important; } /* Em modo gaveta a sombra tem função: separa o painel do conteúdo por baixo. Passa a ser neutra. */ @media (max-width: 1023px) { .pp4-shell .app-sidebar, html[data-theme] .pp4-shell .app-sidebar { box-shadow: 0 0 40px rgba(0, 0, 0, 0.5) !important; } } /* ============================================================ 2 · DURAÇÕES — de seis para três degraus ============================================================ O olho não distingue 0,15s de 0,16s nem 0,18s de 0,2s; o que se percebe é a falta de ritmo quando elementos vizinhos animam em tempos diferentes. Três degraus cobrem tudo: 120ms resposta imediata (pressionar, marcar) 160ms padrão (hover, foco, cor) 320ms deslocamento grande (gaveta, painel) */ .pp4-shell [class*="pp4-"], .admin-shell [class*="pp4-"], .pp4-shell .app-sidebar__link, .pp4-shell .app-topbar__user-btn, .admin-shell .sidebar a, .admin-shell button, .admin-shell .btn-mini, .admin-shell .ucard, .admin-shell .af-item, .admin-shell .tx-table__row { transition-duration: 160ms; transition-timing-function: cubic-bezier(.4, 0, .2, 1); } /* O deslocamento da gaveta continua mais longo — é um movimento de 300px, não uma troca de cor. */ .pp4-shell .app-sidebar { transition-duration: 320ms !important; } /* ============================================================ 3 · RAIOS — de onze valores para quatro ============================================================ 999px pílula · 50% círculo · 16px cartão · 10px controle. Os intermediários (9, 12, 13, 14, 18) vinham de arquivos diferentes escritos em momentos diferentes. */ .pp4-shell .pp4-card, .pp4-shell .pp4-widget, .admin-shell .pp4-widget, .admin-shell .card, .admin-shell .pp4-kpi, .admin-shell .tx-table, .admin-shell .table-wrap, .admin-shell .af-item, .admin-shell .ucard, .admin-shell .proof-card, .pp4-dash .pp4-xp, .pp4-dash .pp4-dash-level, .pp4-dash .pp4-dash-act, .pp4-dash .pp-painel-hero__balance, .pp4-dash .pp4-promo, .pp4-adm-hero { border-radius: 16px; } .pp4-shell .app-sidebar__link, .admin-shell .sidebar a, .pp4-shell .pp4-topbar-icon, .pp4-shell .app-topbar__balance, .pp4-shell .app-topbar__alerts-btn, .admin-shell .btn-mini, .admin-shell .pagination-page, .admin-shell .pagination-prev, .admin-shell .pagination-next, .pp4-dash .pp4-atv__item, .admin-shell .pp4-quick { border-radius: 10px; } /* Ícones em quadrado arredondado: um degrau só. */ .pp4-dash .pp4-dash-act__ico, .pp4-dash .pp4-xp__ico, .pp4-dash .pp4-promo__ico, .admin-shell .pp4-kpi__ico, .admin-shell .pp4-quick__ico, .pp4-brand-mark { border-radius: 12px; } /* ============================================================ 4 · FOCO VISÍVEL — a mesma marca em toda a plataforma ============================================================ Havia três tratamentos diferentes e alguns elementos sem nenhum. Teclado e leitor de tela dependem disto. */ /* Qualquer elemento focável, não só a lista de tags: o teste de teclado encontrou anéis em `currentColor` (cinza) em elementos que ficavam de fora de uma lista fechada. */ .pp4-shell *:focus-visible, .admin-shell *:focus-visible { outline: 2px solid var(--pp4-color-blue-bright) !important; outline-offset: 2px !important; border-radius: inherit; } /* Dentro de superfície azul o anel azul some. */ .pp4-dash .pp-painel-hero__balance a:focus-visible, .pp4-dash .pp4-dash-act:focus-visible, .pp4-dash .pp4-promo:focus-visible, .pp4-adm-hero a:focus-visible, .pp4-shell .app-sidebar__link--active:focus-visible, .admin-shell .sidebar a.active:focus-visible { outline-color: #ffffff !important; } /* ============================================================ 5 · ALVOS DE TOQUE ============================================================ A medição encontrou links de ação com 16 a 21px de altura — `pp4-card__link` (67x18), `pp4-widget__action` (87x16) e vários links de texto. Abaixo de ~32px o toque erra com frequência. A área cresce sem mudar a aparência: o texto continua do mesmo tamanho, só o alvo fica maior. */ /* `pp4-apps-hero__desc a` saiu desta lista: é um link DENTRO de frase, e ampliá-lo quebrava a linha. Os demais são controles isolados — ficam numa linha própria e podem crescer sem afetar texto ao redor. */ .pp4-shell .pp4-card__link, .admin-shell .pp4-widget__action, .pp4-dash .pp4-dash-level__link, .pp4-shell .team-summary__fin-link a { display: inline-flex; align-items: center; min-height: 32px; } /* Links dentro de tabela e de lista densa: alvo por padding vertical, sem alterar a altura da linha. */ .admin-shell .tx-user-name, .admin-shell .af-table__row, .pp4-shell .pp4-notif-links__item { min-height: 32px; display: flex; align-items: center; } /* ============================================================ 6 · ESQUELETO DE CARREGAMENTO — uma animação só ============================================================ `activity.css`, `admin.css` e `datatable.css` declaravam brilhos com durações e direções diferentes. Passam a compartilhar a mesma. */ .pp4-act-skeleton, .pp4-adm-skeleton, .pp4-dt-skeleton__cell, .pp4-game-card-skeleton__media, .pp4-game-card-skeleton__line, .pp4-app-card-skeleton__icon, .pp4-app-card-skeleton__line, .pp4-tl-skeleton__marker, .pp4-tl-skeleton__line { background: linear-gradient(90deg, var(--pp4-color-surface-2) 25%, var(--pp4-color-surface-3) 50%, var(--pp4-color-surface-2) 75%) !important; background-size: 200% 100% !important; animation: pp4-shimmer 1400ms linear infinite !important; } @keyframes pp4-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* ============================================================ 7 · HOVER — um vocabulário só ============================================================ Cartões clicáveis sobem 2px; itens de lista mudam de fundo; nada escala nem gira. */ .pp4-dash .pp4-xp:hover, .pp4-dash .pp4-dash-act:hover, .pp4-dash .pp4-promo:hover, .pp4-shell .pp4-game-card:hover, .pp4-shell .pp4-app-card:hover, .admin-shell .pp4-quick:hover, .admin-shell .ucard:hover { transform: translateY(-2px); } .pp4-shell .pp4-tl-item__body, .admin-shell .tx-table__row, .admin-shell .af-table__row, .pp4-shell .pp4-notif-links__item { transition-property: background-color, border-color, color; } /* ============================================================ 8 · SOMBRAS — três níveis ============================================================ Eram nove combinações distintas. Superfície plana não tem sombra; o que flutua sobre o conteúdo tem. */ .pp4-shell .pp4-card, .pp4-shell .pp4-widget, .admin-shell .card, .admin-shell .pp4-widget, .admin-shell .pp4-kpi, .admin-shell .ucard, .admin-shell .af-item, .admin-shell .tx-table, .pp4-dash .pp4-xp, .pp4-dash .pp4-dash-level { box-shadow: none; } .pp4-shell .app-topbar__alerts-panel, .admin-shell .sidebar__drawer { box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55); } /* ============================================================ 9 · MOVIMENTO REDUZIDO — em toda a plataforma ============================================================ */ @media (prefers-reduced-motion: reduce) { .pp4-shell *, .admin-shell * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .pp4-dash .pp4-xp:hover, .pp4-dash .pp4-dash-act:hover, .pp4-dash .pp4-promo:hover, .pp4-shell .pp4-game-card:hover, .pp4-shell .pp4-app-card:hover, .admin-shell .pp4-quick:hover, .admin-shell .ucard:hover { transform: none !important; } } /* ============================================================ 10 · SEGUNDA PASSADA — resíduos localizados por medição ============================================================ A primeira passada deixou 0,2s em 583 elementos e raio de 8px em 297. Medindo QUEM os carrega, em vez de tentar cobrir tudo: raio 8px tx-id (19px) · pp4-games-rank__pos (24px) → corretos, são selos pequenos; 16px neles ficaria oval raio 8px task-toggle-btn (28px) · task-delete-btn (30px) · pp4-games-resume__thumb (48px) → fora do padrão dur 0,2s task-toggle-btn · task-delete-btn · pp4-game-card · pp4-game-card__cta · task-tab · pp4-games-resume__item `task-toggle-btn` e `task-delete-btn` são os botões de aprovar e recusar do Financeiro administrativo: os controles mais críticos do painel estavam com 28px de altura, abaixo do alvo de toque, e com raio e tempo diferentes de todo o resto. */ .admin-shell .task-toggle-btn, .admin-shell .task-delete-btn, .admin-shell .task-edit-btn, .admin-shell .btn-liberar-saque, .admin-shell .btn-recusar-saque { min-height: 32px !important; border-radius: 10px !important; transition-duration: 160ms !important; transition-timing-function: cubic-bezier(.4, 0, .2, 1) !important; } .pp4-shell .pp4-games-resume__thumb { border-radius: 12px; } .pp4-shell .pp4-game-card, .pp4-shell .pp4-game-card__cta, .pp4-shell .pp4-games-resume__item, .pp4-shell .task-tab, .pp4-shell .finance-tab, .pp4-shell .history-tab, .pp4-shell .pp-painel-btn, .pp4-shell .bo-video-card, .admin-shell .card { transition-duration: 160ms !important; transition-timing-function: cubic-bezier(.4, 0, .2, 1) !important; } /* REVERTIDO — a tentativa de aumentar o alvo de links dentro de parágrafo com `inline-flex` + `min-height` quebrou o fluxo do texto: em "Os jogos de mesa ficam em Jogos." o link pulou para a linha seguinte e o ponto final ficou deslocado. Link dentro de frase é exceção reconhecida na regra de tamanho de alvo (WCAG 2.5.8 dispensa alvos "inline", justamente porque ampliá- los destrói a tipografia). O alvo maior fica só onde o link é um controle isolado — ver seção 5. */ /* ============================================================ 11 · CONTRASTE ============================================================ `--pp4-color-text-subtle` era usado em texto corrido sobre `surface`. Medido em 3,8:1 — abaixo do mínimo de 4,5:1 para texto normal. Sobe para o tom `muted`, que mede 7,1:1, mantendo a hierarquia (continua mais claro que o texto principal). */ .pp4-shell .pp4-tl-item__when, .pp4-shell .pp4-game-card__meta-label, .pp4-shell .pp4-app-card__note, .pp4-shell .pp4-dash-level__meta, .pp4-dash .pp4-atv__lbl, .pp4-dash .pp4-earn__cap, .admin-shell .pp4-kpi__hint, .admin-shell .tx-date, .admin-shell .pp4-adm-people__meta { color: var(--pp4-color-text-muted) !important; } /* ============================================================ 12 · ESTADO ATIVO — consistente entre cliente e admin ============================================================ */ .pp4-shell .app-sidebar__link--active, .admin-shell .sidebar a.active { background: var(--pp4-color-blue) !important; color: #ffffff !important; font-weight: 600 !important; } .pp4-shell .app-sidebar__link--active svg, .admin-shell .sidebar a.active svg { color: #ffffff !important; } /* ============================================================ 13 · DOIS ANÉIS DE FOCO FORA DA PALETA ============================================================ O teste de teclado (25 tabulações por tela) achou dois elementos cujo anel não era azul nem branco, porque uma regra herdada com `!important` e especificidade maior vencia a regra universal: A.pp4-sr-only 2px cinza — "Pular para o conteúdo" INPUT no campo de busca 3px branco */ .pp4-shell a.pp4-sr-only:focus-visible, html[data-theme] .pp4-shell a.pp4-sr-only:focus-visible { /* O link só aparece ao receber foco; enquanto invisível ele mede 1x1. Ao focar, precisa virar um alvo legível. */ position: fixed !important; top: var(--pp4-space-3) !important; left: var(--pp4-space-3) !important; z-index: 999 !important; width: auto !important; height: auto !important; padding: 10px var(--pp4-space-4) !important; clip: auto !important; clip-path: none !important; border-radius: 10px !important; background: var(--pp4-color-blue) !important; color: #ffffff !important; font-size: var(--pp4-text-sm); font-weight: 600; white-space: nowrap; outline: 2px solid #ffffff !important; outline-offset: 2px !important; } .pp4-shell .pp4-topbar-search input:focus-visible, .pp4-shell .pp4-topbar-search input:focus, html[data-theme] .pp4-shell .pp4-topbar-search input:focus-visible { outline: 2px solid var(--pp4-color-blue-bright) !important; outline-offset: 2px !important; } /* ============================================================ 14 · O ANEL DE FOCO NÃO ANIMA ============================================================ Medindo o foco por teclado várias vezes, a cor do anel vinha diferente a cada execução: rgb(154,162,177), rgb(220,222,227), rgb(171,177,187) — todos cinzas intermediários. Não eram cores erradas: era o `outline-color` em MEIO À TRANSIÇÃO, capturado antes de chegar ao azul. O anel de foco tem de ser instantâneo. Quem navega por teclado precisa saber onde está no exato momento em que chega. */ .pp4-shell *, .admin-shell * { transition-property: background-color, border-color, color, box-shadow, transform, opacity, filter; } .pp4-shell *:focus-visible, .admin-shell *:focus-visible { transition: none !important; } /* ============================================================ 15 · A PALETA PARALELA DO TRADE ============================================================ Medindo a cor computada de cada elemento da aba Trade contra a identidade oficial, apareceram seis tons que não pertencem a ela: rgb(184,240,0) verde-limão ácido — 100 links e 15 campos rgb(74,222,128) verde claro (não é o #00E676) — 141 elementos rgb(148,163,184) rgb(203,213,225) rgb(226,232,240) cinzas soltos rgb(248,113,113) vermelho claro O Sprint 16 realinhou os tokens `--ta-*`, mas estes seis estão escritos como literal em `trade-admin.css` e em atributos do PHP, fora do alcance daquela troca. O mapeamento preserva o SIGNIFICADO de cada uma: o que era verde continua verde, o que era vermelho continua vermelho — muda só o tom, para o da identidade. */ .admin-shell [style*="b8f000"], .admin-shell [style*="B8F000"] { color: var(--pp4-color-success) !important; } .admin-shell [style*="4ade80"], .admin-shell [style*="4ADE80"] { color: var(--pp4-color-success) !important; } .admin-shell [style*="f87171"], .admin-shell [style*="F87171"] { color: var(--pp4-color-danger) !important; } .admin-shell [style*="94a3b8"], .admin-shell [style*="e2e8f0"], .admin-shell [style*="cbd5e1"] { color: var(--pp4-color-text-muted) !important; } /* Seis links da aba Trade ficaram sem regra nenhuma e caíram no azul padrão do agente do usuário, rgb(0,0,238) — o azul de 1994. */ .admin-shell a:not([class]) { color: var(--pp4-color-blue-bright) !important; text-decoration: none; } .admin-shell a:not([class]):hover { text-decoration: underline; text-underline-offset: 3px; } /* Campos que herdavam o verde-limão como cor de texto e de cursor. */ .admin-shell .trade-adm-fold__body input, .admin-shell .trade-adm-bar input, .admin-shell input[type="number"], .admin-shell input[type="text"] { caret-color: var(--pp4-color-blue-bright); } /* ============================================================ 16 · DOIS VERMELHOS ============================================================ `--pp4-color-danger` vale `#f43f5e` desde o `tokens.css` original, mas eu vinha escrevendo `#ef4444` literal desde o Sprint 9 — em admin.css, identity.css e modules.css. A plataforma tinha dois vermelhos de erro convivendo, com diferença visível no matiz. Os literais passaram a usar a variável. A varredura de paleta que encontrou isso tinha, ela própria, o valor errado na lista de cores aceitas: procurava `239,68,68` quando o token é `244,63,94`. Foi o detector que estava errado, não o Trade. E errou uma segunda vez. Ao conferir o resultado, ele acusou 130 elementos ainda no vermelho antigo — mas descartava o canal alfa, então lia `rgba(239,68,68,.12)` como se fosse o literal sólido. Nenhum elemento pintava `rgb(239,68,68)` opaco. A origem real eram 23 declarações COM alfa, espalhadas por sete arquivos do próprio design system: os fundos e bordas suaves dos estados de erro. Nas duas vezes o achado veio do instrumento, não do código. Quando a medição acusa algo, confirmar o elemento no DOM antes de editar custa um comando e evita "corrigir" o que estava certo. */