/* ===================================================================== AprovAKI — Patente v16.2 (2026-07-29 · tonalidade unificada) --------------------------------------------------------------------- Carrega DEPOIS de aki_uiux_v15.css. OBJETIVO -------- Padronizar a "cor da patente" em TODOS os lugares onde ela aparece: 1) Perfil (avatar_badge.php) — .avatar-cluster + .avatar-wrapper 2) Ranking pódio (.podium-avatar.ranking-patente-) 3) Top 50 (.ranking-avatar.ranking-patente-) 4) Header/dropdown (.aki-userchip[data-patente=""]) 5) Chips e legendas que herdam --patente-color / --aki-p O que muda: - Cada patente passa a ter um GRADIENTE vibrante, coerente com o lilás/roxo do AprovAKI (não mais cores planas apagadas). - Os anéis externos que envolvem o avatar usam o gradiente conic, dando sensação de "coroa energizada". - A trilha (parte ainda vazia do progresso) fica em um lilás bem suave para não roubar atenção do progresso já conquistado. - Bronze/Prata/Ouro etc mantêm sua identidade cromática, mas com brilho e saturação empurrados para o vivo (empoderamento). - Alexandrita ganha o gradiente multicor da pedra (v16 base). ===================================================================== */ /* --------------------------------------------------------------- 1) VARIÁVEIS OFICIAIS DE PATENTE --------------------------------------------------------------- Uma única fonte de cor por patente. Todos os componentes que suportam --patente-color (perfil/ranking) e --aki-p (dropdown) passam a receber os MESMOS valores. Cada patente define: --pt-solid : cor principal (fallback para elementos que não aceitam gradient, como stroke SVG e text-color). --pt-grad : gradiente principal (usado no anel do avatar). --pt-track : cor da parte vazia do progresso. --pt-glow : sombra de brilho externa (halo). --------------------------------------------------------------- */ :root { --aki-brand-purple: #7c3aed; --aki-brand-purple-2: #a855f7; /* Bronze — cobre quente, sem marrom escuro sujo */ --pt-bronze-solid: #c98a3c; --pt-bronze-grad: conic-gradient(from 210deg, #f2c78a 0deg, #d9954a 90deg, #c98a3c 180deg, #a86a25 270deg, #f2c78a 360deg); --pt-bronze-track: #f5e6d0; --pt-bronze-glow: rgba(201, 138, 60, 0.35); /* Prata — cinza-azulado com brilho de metal polido */ --pt-prata-solid: #7b8aa1; --pt-prata-grad: conic-gradient(from 200deg, #e6ecf5 0deg, #b8c2d1 90deg, #7b8aa1 180deg, #c9d3e2 270deg, #e6ecf5 360deg); --pt-prata-track: #e5ebf3; --pt-prata-glow: rgba(123, 138, 161, 0.30); /* Ouro — dourado nobre, cor de joia (nunca marrom) */ --pt-ouro-solid: #e5b400; --pt-ouro-grad: conic-gradient(from 200deg, #fff2a8 0deg, #ffd94a 90deg, #f0c419 180deg, #d9a300 270deg, #fff2a8 360deg); --pt-ouro-track: #fdf1c0; --pt-ouro-glow: rgba(240, 196, 25, 0.50); /* Esmeralda — verde-esmeralda vivo, tirada do palette Tailwind emerald */ --pt-esmeralda-solid: #059669; --pt-esmeralda-grad: conic-gradient(from 210deg, #6ee7b7 0deg, #10b981 90deg, #059669 180deg, #047857 270deg, #6ee7b7 360deg); --pt-esmeralda-track: #d1fae5; --pt-esmeralda-glow: rgba(16, 185, 129, 0.40); /* Rubi — vermelho-rosa fundo saturado */ --pt-rubi-solid: #dc2626; --pt-rubi-grad: conic-gradient(from 210deg, #fca5a5 0deg, #ef4444 90deg, #b91c1c 180deg, #dc2626 270deg, #fca5a5 360deg); --pt-rubi-track: #fee2e2; --pt-rubi-glow: rgba(220, 38, 38, 0.40); /* Diamante — azul-céu com brilho branco (não confundir com Prata) */ --pt-diamante-solid: #0ea5e9; --pt-diamante-grad: conic-gradient(from 200deg, #bae6fd 0deg, #38bdf8 90deg, #0284c7 180deg, #6fd5ff 270deg, #bae6fd 360deg); --pt-diamante-track: #e0f2fe; --pt-diamante-glow: rgba(14, 165, 233, 0.45); /* Alexandrita — pedra iridescente (verde → ciano → azul → lilás → magenta) */ --pt-alexandrita-solid: #7c3aed; --pt-alexandrita-grad: conic-gradient(from 210deg, #22c55e 0deg, #06b6d4 72deg, #3b82f6 144deg, #7c3aed 216deg, #ec4899 288deg, #22c55e 360deg); --pt-alexandrita-track: #ede9fe; --pt-alexandrita-glow: 0 0 12px rgba(124, 58, 237, 0.40), 0 0 8px rgba(236, 72, 153, 0.25); } /* --------------------------------------------------------------- 2) HELPER — cada patente aplica seu gradiente no anel externo --------------------------------------------------------------- Regra genérica: o wrapper que já usava background: conic-gradient(var(--patente-color) var(--patente-progress), var(--patente-track) 0); perdeu a graça — a cor plana chapava contra o roxo do AprovAKI. Solução: reescrevemos o background usando `background-image` composto de duas camadas: - Camada superior: `conic-gradient` MONOCROMÁTICO (transparente na parte já preenchida + trilha na parte vazia) → funciona como "máscara" do progresso. - Camada inferior: o gradiente vivo da patente. O truque `background-blend-mode: source-over` mantém a nitidez do corte de progresso. --------------------------------------------------------------- */ /* v16.6 · 2026-07-29: o wrapper do avatar volta a ser apenas a TRILHA suave da patente (fundo neutro sob o SVG). A barra de progresso circular vem do SVG por cima (bloco 6, mais abaixo). Assim reproduzimos exatamente o comportamento do avatar do dropdown: trilha discreta + arco de progresso na cor viva da patente, sem "fatia de pizza" e sem anel maciço. */ /* Bronze */ .avatar-cluster.is-bronze .avatar-wrapper, .avatar-wrapper.is-bronze, .podium-avatar.ranking-patente-bronze, .ranking-avatar.ranking-patente-bronze { background: var(--pt-bronze-track) !important; box-shadow: none !important; } /* Prata */ .avatar-cluster.is-prata .avatar-wrapper, .avatar-wrapper.is-prata, .podium-avatar.ranking-patente-prata, .ranking-avatar.ranking-patente-prata { background: var(--pt-prata-track) !important; box-shadow: none !important; } /* Ouro */ .avatar-cluster.is-ouro .avatar-wrapper, .avatar-wrapper.is-ouro, .podium-avatar.ranking-patente-ouro, .ranking-avatar.ranking-patente-ouro { background: var(--pt-ouro-track) !important; box-shadow: none !important; } /* Esmeralda */ .avatar-cluster.is-esmeralda .avatar-wrapper, .avatar-wrapper.is-esmeralda, .podium-avatar.ranking-patente-esmeralda, .ranking-avatar.ranking-patente-esmeralda { background: var(--pt-esmeralda-track) !important; box-shadow: none !important; } /* Rubi */ .avatar-cluster.is-rubi .avatar-wrapper, .avatar-wrapper.is-rubi, .podium-avatar.ranking-patente-rubi, .ranking-avatar.ranking-patente-rubi { background: var(--pt-rubi-track) !important; box-shadow: none !important; } /* Diamante */ .avatar-cluster.is-diamante .avatar-wrapper, .avatar-wrapper.is-diamante, .podium-avatar.ranking-patente-diamante, .ranking-avatar.ranking-patente-diamante { background: var(--pt-diamante-track) !important; box-shadow: none !important; } /* Alexandrita — trilha lilás; o arco iridescente vem do SVG */ .avatar-cluster.is-alexandrita .avatar-wrapper, .avatar-wrapper.is-alexandrita, .podium-avatar.ranking-patente-alexandrita, .ranking-avatar.ranking-patente-alexandrita { background: var(--pt-alexandrita-track) !important; box-shadow: none !important; } /* --------------------------------------------------------------- 3) DROPDOWN (aki-userchip) — mesma tonalidade --------------------------------------------------------------- O header já injeta data-patente="" e uma variável --aki-p com a cor plana antiga. Aqui: - Sobrescrevemos --aki-p para a cor sólida VIVA de cada patente. - O anel SVG (.aki-userchip__ring-bar) usa stroke=currentColor herdado de --aki-p — logo, muda automaticamente. - Ainda desenhamos um halo no wrapper do avatar do dropdown com o gradiente conic, coerente com o resto do site. --------------------------------------------------------------- */ .aki-userchip[data-patente="bronze"] { --aki-p: var(--pt-bronze-solid); --aki-p-track: var(--pt-bronze-track); } .aki-userchip[data-patente="prata"] { --aki-p: var(--pt-prata-solid); --aki-p-track: var(--pt-prata-track); } .aki-userchip[data-patente="ouro"] { --aki-p: var(--pt-ouro-solid); --aki-p-track: var(--pt-ouro-track); } .aki-userchip[data-patente="esmeralda"] { --aki-p: var(--pt-esmeralda-solid); --aki-p-track: var(--pt-esmeralda-track); } .aki-userchip[data-patente="rubi"] { --aki-p: var(--pt-rubi-solid); --aki-p-track: var(--pt-rubi-track); } .aki-userchip[data-patente="diamante"] { --aki-p: var(--pt-diamante-solid); --aki-p-track: var(--pt-diamante-track); } .aki-userchip[data-patente="alexandrita"] { --aki-p: var(--pt-alexandrita-solid); --aki-p-track: var(--pt-alexandrita-track); } /* Anel do avatar dentro do dropdown (o círculo pequeno perto do nome + o círculo grande do balão aberto). Substituímos a moldura plana por um gradiente idêntico ao usado no perfil. */ .aki-userchip[data-patente="bronze"] .aki-userchip__avatar { background: var(--pt-bronze-grad) !important; } .aki-userchip[data-patente="prata"] .aki-userchip__avatar { background: var(--pt-prata-grad) !important; } .aki-userchip[data-patente="ouro"] .aki-userchip__avatar { background: var(--pt-ouro-grad) !important; } .aki-userchip[data-patente="esmeralda"] .aki-userchip__avatar { background: var(--pt-esmeralda-grad) !important; } .aki-userchip[data-patente="rubi"] .aki-userchip__avatar { background: var(--pt-rubi-grad) !important; } .aki-userchip[data-patente="diamante"] .aki-userchip__avatar { background: var(--pt-diamante-grad) !important; } .aki-userchip[data-patente="alexandrita"] .aki-userchip__avatar { background: var(--pt-alexandrita-grad) !important; animation: aki-alex-ring-rotate 14s linear infinite; } /* Barra de progresso da linha "Próximo: X · Y" no dropdown. FIX (v16.3 · 2026-07-29): o HTML real usa `.aki-userchip__next-bar i`; a versão anterior mirava `.aki-userchip__head-progress-fill` (classe que não existe), então a barra herdava o gradiente lilás/dourado genérico de notificacoes.css. Agora o seletor casa e a barra sempre fica na tonalidade da patente atual do usuário — igual ao anel do perfil e do ranking. */ .aki-userchip[data-patente="bronze"] .aki-userchip__next-bar i { background: linear-gradient(90deg, #f2c78a, #c98a3c) !important; } .aki-userchip[data-patente="prata"] .aki-userchip__next-bar i { background: linear-gradient(90deg, #cbd5e1, #7b8aa1) !important; } .aki-userchip[data-patente="ouro"] .aki-userchip__next-bar i { background: linear-gradient(90deg, #fff2a8, #f0c419) !important; } .aki-userchip[data-patente="esmeralda"] .aki-userchip__next-bar i { background: linear-gradient(90deg, #6ee7b7, #059669) !important; } .aki-userchip[data-patente="rubi"] .aki-userchip__next-bar i { background: linear-gradient(90deg, #fca5a5, #b91c1c) !important; } .aki-userchip[data-patente="diamante"] .aki-userchip__next-bar i { background: linear-gradient(90deg, #bae6fd, #0284c7) !important; } .aki-userchip[data-patente="alexandrita"] .aki-userchip__next-bar i { background: linear-gradient(90deg, #22c55e, #06b6d4, #7c3aed, #ec4899) !important; } /* Fundo (track) da barra segue a mesma família da patente, no lugar do lilás genérico. */ .aki-userchip[data-patente] .aki-userchip__next-bar { background: var(--aki-p-track, #eef1f7) !important; } /* --------------------------------------------------------------- 4) LEGENDA DA PATENTE NO PERFIL (patente-caption) --------------------------------------------------------------- O nome e a classe (ex.: "Ouro · Competitivo") herdam a cor da patente. Aqui garantimos que a tonalidade seja igual à do anel. --------------------------------------------------------------- */ .patente-caption--bronze strong, .patente-caption--bronze span { color: var(--pt-bronze-solid) !important; } .patente-caption--prata strong, .patente-caption--prata span { color: var(--pt-prata-solid) !important; } .patente-caption--ouro strong, .patente-caption--ouro span { color: var(--pt-ouro-solid) !important; } .patente-caption--esmeralda strong, .patente-caption--esmeralda span { color: var(--pt-esmeralda-solid) !important; } .patente-caption--rubi strong, .patente-caption--rubi span { color: var(--pt-rubi-solid) !important; } .patente-caption--diamante strong, .patente-caption--diamante span { color: var(--pt-diamante-solid) !important; } /* Alexandrita continua usando gradiente no texto (fica na v15). */ .patente-caption--alexandrita small { display: block !important; color: var(--pt-alexandrita-solid); font-weight: 700; margin-top: 4px; font-size: 0.6rem; } /* --------------------------------------------------------------- 5) TROFÉU NO CANTO DO AVATAR v16.4 · 2026-07-29: sem drop-shadow. UI mais limpa e coerente com o dropdown do header (que já é chapado, sem halo). --------------------------------------------------------------- */ .avatar-cluster .nivel-badge, .podium-avatar .podium-avatar-badge, .ranking-avatar .ranking-avatar-badge { filter: none !important; } /* --------------------------------------------------------------- v16.6 · 2026-07-29: os SVGs do ring VOLTAM a ser visíveis — eles é que desenham a barra circular de progresso na cor da patente, por cima da trilha do wrapper (bloco 2). A trilha interna do SVG fica transparente para não haver duplicação com o fundo do wrapper. --------------------------------------------------------------- */ .avatar-cluster .progress-ring, .podium-avatar .ranking-avatar-ring, .ranking-avatar .ranking-avatar-ring { display: block !important; overflow: visible !important; } .avatar-cluster .progress-ring__circle, .podium-avatar .ranking-avatar-ring__track, .ranking-avatar .ranking-avatar-ring__track { stroke: transparent !important; } /* --------------------------------------------------------------- 6) BARRA CURVA (SVG) — quando existe (progress-ring / ranking-ring) --------------------------------------------------------------- Não conseguimos gradient direto num stroke SVG sem um inline, mas garantimos que a cor sólida da barra seja a mesma cor VIVA da patente (--patente-color), sincronizada com o anel externo. Assim mesmo quando o wrapper usa background conic e a UI usa SVG por cima, os dois ficam na mesma família cromática. --------------------------------------------------------------- */ .avatar-cluster.is-bronze .progress-ring__bar, .podium-avatar.ranking-patente-bronze .ranking-avatar-ring__bar, .ranking-avatar.ranking-patente-bronze .ranking-avatar-ring__bar { stroke: var(--pt-bronze-solid) !important; } .avatar-cluster.is-prata .progress-ring__bar, .podium-avatar.ranking-patente-prata .ranking-avatar-ring__bar, .ranking-avatar.ranking-patente-prata .ranking-avatar-ring__bar { stroke: var(--pt-prata-solid) !important; } .avatar-cluster.is-ouro .progress-ring__bar, .podium-avatar.ranking-patente-ouro .ranking-avatar-ring__bar, .ranking-avatar.ranking-patente-ouro .ranking-avatar-ring__bar { stroke: var(--pt-ouro-solid) !important; } .avatar-cluster.is-esmeralda .progress-ring__bar, .podium-avatar.ranking-patente-esmeralda .ranking-avatar-ring__bar, .ranking-avatar.ranking-patente-esmeralda .ranking-avatar-ring__bar { stroke: var(--pt-esmeralda-solid) !important; } .avatar-cluster.is-rubi .progress-ring__bar, .podium-avatar.ranking-patente-rubi .ranking-avatar-ring__bar, .ranking-avatar.ranking-patente-rubi .ranking-avatar-ring__bar { stroke: var(--pt-rubi-solid) !important; } .avatar-cluster.is-diamante .progress-ring__bar, .podium-avatar.ranking-patente-diamante .ranking-avatar-ring__bar, .ranking-avatar.ranking-patente-diamante .ranking-avatar-ring__bar { stroke: var(--pt-diamante-solid) !important; } .avatar-cluster.is-alexandrita .progress-ring__bar, .podium-avatar.ranking-patente-alexandrita .ranking-avatar-ring__bar, .ranking-avatar.ranking-patente-alexandrita .ranking-avatar-ring__bar { stroke: var(--pt-alexandrita-solid) !important; filter: drop-shadow(0 0 3px rgba(124, 58, 237, 0.55)) drop-shadow(0 0 4px rgba(236, 72, 153, 0.35)) !important; } /* --------------------------------------------------------------- 7) ANIMAÇÕES --------------------------------------------------------------- */ @keyframes aki-alex-ring-rotate { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .avatar-cluster.is-alexandrita .avatar-wrapper, .avatar-wrapper.is-alexandrita, .podium-avatar.ranking-patente-alexandrita, .ranking-avatar.ranking-patente-alexandrita, .aki-userchip[data-patente="alexandrita"] .aki-userchip__avatar { animation: none !important; } }