/* ============================================================ CULORI DE NUME — DONATORI (Bronze/Silver/Gold/Platinum) Fiecare nivel are propria temă vizuală, ALEASĂ LIBER (nu legată de culoarea literală a metalului — cerut explicit de user: "nu e musai ca culoarea sa fie culoarea bronzului, inventeaza ceva frumos") — patru concepte distincte, cu spectacol crescător pe măsură ce nivelul crește: Bronze → Apus de Soare (vișiniu → portocaliu → auriu cald) Silver → Aurora Boreală (teal/smarald cu flash violet) Gold → Foc de Phoenix (roșu-portocaliu-auriu, "blaze") Platinum → Nebuloasă Cosmică (indigo-violet-magenta-cyan + stea aurie) Mecanismul de aplicare rămâne cel simplu, existent din formatNick() (Data/core.php) — un singur per rând din yoorapperu_culorinick, FĂRĂ cod PHP nou. Doar 2 lucruri nu pot sta în style= inline și trăiesc aici: @keyframes și variabilele CSS pentru adaptare pe temă (citite din style= via var(...,fallback)). Tema e marcată cu data-bs-theme="light"/"dark" pe (Data/assets/js/tabler-theme.min.js); pe dark, fallback-urile din var(...,fallback) se aplică; pe light, sunt suprascrise mai jos cu tonuri mai închise/saturate, ca gradientele (care trec prin zone deschise) să rămână lizibile pe alb. La Platinum, chiar și culorile de bază ale gradientului sunt legate de variabile (--plat-c1..c7), nu doar glow-ul — altfel paleta cosmică pastelată ar fi prea slabă pe fundal alb. ATENȚIE la lungime: coloana yoorapperu_culorinick.culoare e varchar(1500) (mărită de la 500, care tăia silențios string-urile lungi ale Bronze/Gold/Platinum și lăsa stilul complet nefuncțional — bug găsit și reparat separat). Orice extindere viitoare a acestor stiluri trebuie să verifice LENGTH(culoare) după UPDATE. ============================================================ */ :root{ /* Gold/Platinum aveau --gold-stroke/--platinum-stroke definite DOAR pe light theme - pe dark, var(...,transparent) cădea pe fallback-ul literal "transparent" (fără contur deloc). Combinat cu capetele foarte închise ale gradientului (#3d0b0b la Gold, #0a0a1f la Platinum) care se pierd oricum pe fundalul navy închis al temei dark, în acele momente ale animației textul devenea complet invizibil (fără fill vizibil, fără contur care să-l țină vizibil) - semnalat de user. Fix: o valoare reală de contur și pe dark (subtilă, translucidă, în tonul temei), nu doar fallback "transparent". */ --gold-stroke: rgba(255,180,90,0.4); --platinum-stroke: rgba(190,160,255,0.35); } [data-bs-theme="light"]{ --bronze-glow-tight: rgba(190,40,60,0.55); --bronze-glow-wide: rgba(200,80,30,0.32); --bronze-stroke: rgba(90,10,30,0.4); --silver-glow-tight: rgba(20,120,90,0.55); --silver-glow-wide: rgba(80,40,140,0.32); --silver-stroke: rgba(10,40,35,0.4); --gold-glow-tight: rgba(200,50,10,0.6); --gold-glow-wide: rgba(180,30,10,0.35); --gold-stroke: rgba(60,5,5,0.45); --gold-glare: rgba(200,90,10,0.8); --platinum-glow-tight: rgba(90,40,150,0.55); --platinum-glow-wide: rgba(180,110,10,0.35); --platinum-stroke: rgba(30,15,50,0.5); --platinum-glare: rgba(110,50,180,0.75); --plat-c1: #060614; --plat-c2: #1c1147; --plat-c3: #4a1f70; --plat-c4: #8a2a86; --plat-c5: #1f8fae; --plat-c6: #b8860b; --plat-c7: #0e6f8c; } /* ---------- BRONZE — Apus de Soare ---------- */ @keyframes bronzeEmberShimmer{ 0% { background-position: 0% center; } 100% { background-position: 300% center; } } @keyframes bronzeBreathe{ 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } } @keyframes bronzeLetterBreathe{ 0%, 100% { letter-spacing: 0px; } 50% { letter-spacing: 0.6px; } } /* ---------- SILVER — Aurora Boreală ---------- */ @keyframes silverAuroraShimmer{ 0% { background-position: 0% center; } 100% { background-position: 300% center; } } @keyframes silverAuroraFlicker{ 0% { filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)) drop-shadow(0 0 6px var(--silver-glow-tight, rgba(120,255,200,.6))) drop-shadow(0 0 14px var(--silver-glow-wide, rgba(180,140,255,.4))) hue-rotate(0deg); } 50% { filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)) drop-shadow(0 0 12px var(--silver-glow-tight, rgba(120,255,200,.9))) drop-shadow(0 0 24px var(--silver-glow-wide, rgba(180,140,255,.65))) hue-rotate(20deg); } 100% { filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)) drop-shadow(0 0 6px var(--silver-glow-tight, rgba(120,255,200,.6))) drop-shadow(0 0 14px var(--silver-glow-wide, rgba(180,140,255,.4))) hue-rotate(0deg); } } /* ---------- GOLD — Foc de Phoenix ---------- */ @keyframes goldPhoenixSweep{ 0% { background-position: 0% center, -150% center; } 100% { background-position: 300% center, 350% center; } } @keyframes goldPhoenixPulse{ 0%, 100% { filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)) drop-shadow(0 0 6px var(--gold-glow-tight, rgba(255,140,60,.75))) drop-shadow(0 0 16px var(--gold-glow-wide, rgba(255,60,30,.5))) brightness(1); } 50% { filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)) drop-shadow(0 0 15px var(--gold-glow-tight, rgba(255,170,90,1))) drop-shadow(0 0 30px var(--gold-glow-wide, rgba(255,90,40,.75))) brightness(1.2); } } @keyframes goldEmberBreathe{ 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.045) rotate(-0.6deg); } } /* ---------- PLATINUM — Nebuloasă Cosmică ---------- */ @keyframes platinumNebulaShimmer{ 0% { background-position: 0% center, -170% center; } 100% { background-position: 300% center, 330% center; } } @keyframes platinumNebulaAura{ 0% { filter: drop-shadow(0 1px 1px rgba(0,0,0,.55)) drop-shadow(0 0 6px var(--platinum-glow-tight, rgba(200,150,255,.75))) drop-shadow(0 0 16px var(--platinum-glow-wide, rgba(255,200,120,.5))) drop-shadow(0 0 26px rgba(220,120,200,.3)) hue-rotate(0deg) brightness(1); } 25% { filter: drop-shadow(0 1px 1px rgba(0,0,0,.55)) drop-shadow(0 0 10px var(--platinum-glow-tight, rgba(200,150,255,.9))) drop-shadow(0 0 22px var(--platinum-glow-wide, rgba(255,200,120,.65))) drop-shadow(0 0 32px rgba(220,120,200,.4)) hue-rotate(18deg) brightness(1.12); } 50% { filter: drop-shadow(0 1px 1px rgba(0,0,0,.55)) drop-shadow(0 0 14px var(--platinum-glow-tight, rgba(200,150,255,1))) drop-shadow(0 0 28px var(--platinum-glow-wide, rgba(255,200,120,.8))) drop-shadow(0 0 40px rgba(220,120,200,.5)) hue-rotate(0deg) brightness(1.22); } 75% { filter: drop-shadow(0 1px 1px rgba(0,0,0,.55)) drop-shadow(0 0 10px var(--platinum-glow-tight, rgba(200,150,255,.9))) drop-shadow(0 0 22px var(--platinum-glow-wide, rgba(255,200,120,.65))) drop-shadow(0 0 32px rgba(220,120,200,.4)) hue-rotate(-18deg) brightness(1.12); } 100% { filter: drop-shadow(0 1px 1px rgba(0,0,0,.55)) drop-shadow(0 0 6px var(--platinum-glow-tight, rgba(200,150,255,.75))) drop-shadow(0 0 16px var(--platinum-glow-wide, rgba(255,200,120,.5))) drop-shadow(0 0 26px rgba(220,120,200,.3)) hue-rotate(0deg) brightness(1); } } @keyframes platinumStarBreathe{ 0%, 100% { transform: scale(1) rotate(0deg); letter-spacing: 0px; } 50% { transform: scale(1.05) rotate(0.8deg); letter-spacing: 0.8px; } }