/* ================================================================ KekoFeed — effects.css Efectos premium de nombre para el feed, posts, rankings y perfiles. Incluir en via head.php o directamente. ================================================================ */ /* ── BASE ── */ .nk-username { display: inline-flex; align-items: center; gap: 4px; font-weight: 900; } .nk-username[class*="fx-"] { display: inline; } /* ── COMMON ── */ .fx-glow-blue { color: #38bdf8; text-shadow: 0 0 6px rgba(56,189,248,0.9), 0 0 20px rgba(56,189,248,0.5), 0 0 40px rgba(56,189,248,0.25); } .fx-glow-red { color: #ef4444; text-shadow: 0 0 6px rgba(239,68,68,0.9), 0 0 20px rgba(239,68,68,0.5), 0 0 40px rgba(239,68,68,0.25); } .fx-glow-green { color: #10b981; text-shadow: 0 0 6px rgba(16,185,129,0.9), 0 0 20px rgba(16,185,129,0.5), 0 0 40px rgba(16,185,129,0.25); } /* ── RARE ── */ .fx-neon-purple { color: #a855f7; text-shadow: 0 0 8px rgba(168,85,247,0.95), 0 0 25px rgba(168,85,247,0.6), 0 0 50px rgba(168,85,247,0.3); animation: nk-pulse-purple 2.5s ease-in-out infinite; } @keyframes nk-pulse-purple { 0%,100% { text-shadow: 0 0 8px rgba(168,85,247,.95), 0 0 25px rgba(168,85,247,.6); } 50% { text-shadow: 0 0 14px rgba(168,85,247,1), 0 0 40px rgba(168,85,247,.8), 0 0 70px rgba(168,85,247,.4); } } .fx-neon-gold { color: #fbbf24; text-shadow: 0 0 8px rgba(251,191,36,0.95), 0 0 25px rgba(251,191,36,0.6), 0 0 50px rgba(251,191,36,0.3); animation: nk-pulse-gold 2s ease-in-out infinite; } @keyframes nk-pulse-gold { 0%,100% { text-shadow: 0 0 8px rgba(251,191,36,.9), 0 0 20px rgba(251,191,36,.5); } 50% { text-shadow: 0 0 16px rgba(251,191,36,1), 0 0 40px rgba(251,191,36,.8), 0 0 80px rgba(251,191,36,.4); } } /* ── EPIC ── */ .fx-rainbow { background: linear-gradient(90deg, #ff0000 0%, #ff7700 17%, #ffff00 33%, #00ff00 50%, #00bfff 67%, #7f00ff 83%, #ff0000 100%); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: nk-rainbow 3s linear infinite; font-weight: 900 !important; } @keyframes nk-rainbow { 0% { background-position: 0% center; } 100% { background-position: 200% center; } } .fx-fire { background: linear-gradient(0deg, #ef4444 0%, #f97316 40%, #fbbf24 70%, #fff 100%); background-size: 100% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: nk-fire 1.5s ease-in-out infinite alternate; filter: drop-shadow(0 0 6px rgba(239,68,68,0.8)); } @keyframes nk-fire { 0% { background-position: center bottom; } 100% { background-position: center top; } } .fx-electric { color: #facc15; text-shadow: 0 0 4px #facc15, 0 0 12px #facc15, 0 0 30px #fbbf24; animation: nk-electric 0.15s infinite; } @keyframes nk-electric { 0%,100% { text-shadow: 0 0 4px #facc15, 0 0 12px #facc15, 0 0 30px #fbbf24; opacity: 1; } 50% { text-shadow: 0 0 8px #ffffff, 0 0 20px #facc15, 0 0 50px #fbbf24; opacity: 0.92; } } .fx-gradient { background: linear-gradient(135deg, #38bdf8, #818cf8, #c084fc, #f472b6); background-size: 300% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: nk-gradient-shift 4s ease infinite; font-weight: 900 !important; } @keyframes nk-gradient-shift { 0%,100% { background-position: 0% center; } 50% { background-position: 100% center; } } /* ── LEGENDARY ── */ .fx-diamond { background: linear-gradient(135deg, #bae6fd, #e0f2fe, #7dd3fc, #38bdf8, #e0f2fe, #bfdbfe); background-size: 400% 400%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: nk-diamond 3s ease infinite; filter: drop-shadow(0 0 8px rgba(56,189,248,0.9)) drop-shadow(0 0 20px rgba(56,189,248,0.5)); } @keyframes nk-diamond { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .fx-og-gold { background: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706, #fbbf24, #fef3c7, #fbbf24); background-size: 300% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: nk-og-gold 2s linear infinite; filter: drop-shadow(0 2px 8px rgba(251,191,36,0.9)); font-style: italic; } @keyframes nk-og-gold { 0% { background-position: 0% center; } 100% { background-position: 300% center; } } .fx-cyber { color: #00ffff; text-shadow: 0 0 5px #00ffff, 0 0 15px #00ffff, 0 0 30px #00ffff, 0 0 60px #0ff; letter-spacing: 1px; animation: nk-cyber-flicker 4s infinite; } @keyframes nk-cyber-flicker { 0%,19%,21%,23%,25%,54%,56%,100% { text-shadow: 0 0 5px #00ffff, 0 0 15px #00ffff, 0 0 30px #00ffff; } 20%,24%,55% { text-shadow: none; color: #007777; } } .fx-cosmic { background: linear-gradient(135deg, #818cf8, #c084fc, #f472b6, #fb923c, #facc15, #818cf8); background-size: 400% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: nk-cosmic 6s linear infinite; filter: drop-shadow(0 0 10px rgba(192,132,252,0.8)) drop-shadow(0 0 25px rgba(129,140,248,0.5)); } @keyframes nk-cosmic { 0% { background-position: 0% center; } 100% { background-position: 400% center; } } /* ── TOOLTIP EFECTO al hacer HOVER ── */ .nk-effect-wrap { position: relative; display: inline; } .nk-effect-wrap::after { content: attr(data-effect-name); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: rgba(15,23,42,0.95); color: #e2e8f0; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 8px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s; border: 1px solid rgba(255,255,255,0.1); z-index: 999; } .nk-effect-wrap:hover::after { opacity: 1; } /* ── RAREZA COLORES ── */ .rarity-common { color: #94a3b8; } .rarity-rare { color: #3b82f6; } .rarity-epic { color: #a855f7; } .rarity-legendary{ background: linear-gradient(135deg,#fbbf24,#f59e0b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── BORDES DE RAREZA ── */ .border-common { border-color: #475569 !important; } .border-rare { border-color: #3b82f6 !important; box-shadow: 0 0 15px rgba(59,130,246,0.2) !important; } .border-epic { border-color: #a855f7 !important; box-shadow: 0 0 20px rgba(168,85,247,0.3) !important; } .border-legendary { border-color: #fbbf24 !important; box-shadow: 0 0 25px rgba(251,191,36,0.4) !important; } /* ── BADGE VERIFICACIÓN TIPOS ── */ .vbadge { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 20px; vertical-align: middle; } .vbadge-official { background: rgba(56,189,248,.15); color: #38bdf8; border: 1px solid rgba(56,189,248,.3); } .vbadge-creator { background: rgba(245,158,11,.15); color: #f59e0b; border: 1px solid rgba(245,158,11,.3); } .vbadge-admin { background: rgba(239,68,68,.15); color: #ef4444; border: 1px solid rgba(239,68,68,.3); } .vbadge-moderator { background: rgba(16,185,129,.15); color: #10b981; border: 1px solid rgba(16,185,129,.3); } .vbadge-celebrity { background: rgba(251,191,36,.15); color: #fbbf24; border: 1px solid rgba(251,191,36,.3); } .vbadge-og { background: rgba(249,115,22,.15); color: #f97316; border: 1px solid rgba(249,115,22,.3); } .vbadge-premium { background: rgba(168,85,247,.15); color: #a855f7; border: 1px solid rgba(168,85,247,.3); } .vbadge-dj { background: rgba(6,182,212,.15); color: #06b6d4; border: 1px solid rgba(6,182,212,.3); } /* ── PODIO ANIMADO ── */ .podium-glow-1 { box-shadow: 0 0 30px rgba(251,191,36,.6), 0 0 60px rgba(251,191,36,.3); animation: podium-pulse-gold 2s ease-in-out infinite; } .podium-glow-2 { box-shadow: 0 0 20px rgba(148,163,184,.5), 0 0 40px rgba(148,163,184,.2); animation: podium-pulse-silver 2.5s ease-in-out infinite; } .podium-glow-3 { box-shadow: 0 0 15px rgba(180,83,9,.4), 0 0 30px rgba(180,83,9,.2); animation: podium-pulse-bronze 3s ease-in-out infinite; } @keyframes podium-pulse-gold { 0%,100% { box-shadow: 0 0 30px rgba(251,191,36,.6); } 50% { box-shadow: 0 0 50px rgba(251,191,36,.9), 0 0 80px rgba(251,191,36,.4); } } @keyframes podium-pulse-silver { 0%,100% { box-shadow: 0 0 20px rgba(148,163,184,.5); } 50% { box-shadow: 0 0 35px rgba(148,163,184,.8), 0 0 60px rgba(148,163,184,.3); } } @keyframes podium-pulse-bronze { 0%,100% { box-shadow: 0 0 15px rgba(180,83,9,.4); } 50% { box-shadow: 0 0 30px rgba(180,83,9,.6), 0 0 50px rgba(180,83,9,.3); } } /* ── COINS BADGE ── */ .coins-badge { display: inline-flex; align-items: center; gap: 4px; background: linear-gradient(135deg,rgba(251,191,36,.15),rgba(245,158,11,.1)); border: 1px solid rgba(251,191,36,.3); border-radius: 20px; padding: 3px 10px; font-weight: 800; font-size: 13px; color: #fbbf24; } /* ── XP BAR ── */ .nk-xp-bar { background: rgba(0,0,0,.15); border-radius: 20px; height: 6px; overflow: hidden; } .nk-xp-fill { height: 100%; border-radius: 20px; background: linear-gradient(90deg, #38bdf8, #818cf8); transition: width .5s ease; position: relative; } .nk-xp-fill::after { content: ''; position: absolute; right: 0; top: 0; height: 100%; width: 20px; background: rgba(255,255,255,.4); filter: blur(4px); }