/* * KekoFeed — name-effects.css * FUENTE ÚNICA DE VERDAD para todos los efectos visuales de nombre de usuario. * * CÓMO USAR (PHP): class="username " * CÓMO USAR (JS): class="username fx-" + effect.replace(/_/g,'-') * * Prefijo: fx-{nombre} * Compatible con: feed, widgets, comentarios, rankings, notificaciones, modales. * NO duplicar estilos de efecto en ningún otro archivo. */ /* ══════════════════════════════════════════════════════════════════ VARIABLES DE EFECTO — cambian por clase, el resto del CSS las usa ══════════════════════════════════════════════════════════════════ */ [class*="fx-"] { --fx-color: inherit; --fx-glow-color: transparent; --fx-glow-spread: 0px; transition: text-shadow .25s ease, color .25s ease, filter .25s ease; } /* ══════════════════════════════════════════════════════════════════ GLOW EFFECTS — color sólido + halo luminoso ══════════════════════════════════════════════════════════════════ */ /* 🔴 Glow Rojo */ .fx-glow-red, .fx-glow_red { color: #ef4444 !important; text-shadow: 0 0 6px rgba(239, 68, 68, .80), 0 0 18px rgba(239, 68, 68, .50), 0 0 40px rgba(239, 68, 68, .25); } /* 🔵 Glow Azul */ .fx-glow-blue, .fx-glow_blue { color: #38bdf8 !important; text-shadow: 0 0 6px rgba( 56, 189, 248, .80), 0 0 18px rgba( 56, 189, 248, .50), 0 0 40px rgba( 56, 189, 248, .25); } /* 🟢 Glow Verde */ .fx-glow-green, .fx-glow_green { color: #10b981 !important; text-shadow: 0 0 6px rgba( 16, 185, 129, .80), 0 0 18px rgba( 16, 185, 129, .50), 0 0 40px rgba( 16, 185, 129, .25); } /* 🟣 Glow Púrpura */ .fx-glow-purple, .fx-glow_purple { color: #a855f7 !important; text-shadow: 0 0 6px rgba(168, 85, 247, .80), 0 0 18px rgba(168, 85, 247, .50), 0 0 40px rgba(168, 85, 247, .25); } /* 🟡 Glow Oro */ .fx-glow-gold, .fx-glow_gold { color: #f59e0b !important; text-shadow: 0 0 6px rgba(245, 158, 11, .80), 0 0 18px rgba(245, 158, 11, .50), 0 0 40px rgba(245, 158, 11, .25); } /* 🩵 Glow Cian */ .fx-glow-cyan, .fx-glow_cyan { color: #06b6d4 !important; text-shadow: 0 0 6px rgba( 6, 182, 212, .80), 0 0 18px rgba( 6, 182, 212, .50), 0 0 40px rgba( 6, 182, 212, .25); } /* 🩷 Glow Rosa */ .fx-glow-pink, .fx-glow_pink { color: #ec4899 !important; text-shadow: 0 0 6px rgba(236, 72, 153, .80), 0 0 18px rgba(236, 72, 153, .50), 0 0 40px rgba(236, 72, 153, .25); } /* ⚪ Glow Blanco */ .fx-glow-white, .fx-glow_white { color: #f8fafc !important; text-shadow: 0 0 6px rgba(248, 250, 252, .90), 0 0 18px rgba(248, 250, 252, .60), 0 0 40px rgba(248, 250, 252, .30); } /* 🟠 Glow Naranja */ .fx-glow-orange, .fx-glow_orange { color: #f97316 !important; text-shadow: 0 0 6px rgba(249, 115, 22, .80), 0 0 18px rgba(249, 115, 22, .50), 0 0 40px rgba(249, 115, 22, .25); } /* ══════════════════════════════════════════════════════════════════ NEON — destello extremo tipo cyberpunk ══════════════════════════════════════════════════════════════════ */ .fx-neon { color: #00f0ff !important; text-shadow: 0 0 3px rgba( 0, 240, 255, 1 ), 0 0 8px rgba( 0, 240, 255, .90), 0 0 20px rgba( 0, 240, 255, .70), 0 0 50px rgba( 0, 240, 255, .40); animation: fx-neon-pulse 2.5s ease-in-out infinite alternate; } @keyframes fx-neon-pulse { from { text-shadow: 0 0 3px #00f0ff, 0 0 8px #00f0ff, 0 0 20px rgba(0,240,255,.7), 0 0 50px rgba(0,240,255,.4); } to { text-shadow: 0 0 5px #00f0ff, 0 0 14px #00f0ff, 0 0 35px rgba(0,240,255,.8), 0 0 80px rgba(0,240,255,.5); } } /* ══════════════════════════════════════════════════════════════════ GRADIENTES — texto con relleno en degradado ══════════════════════════════════════════════════════════════════ */ /* 🌈 Rainbow */ .fx-rainbow { background: linear-gradient(90deg, #ef4444 0%, #f97316 18%, #f59e0b 36%, #10b981 54%, #38bdf8 72%, #8b5cf6 84%, #ec4899 100%); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: fx-rainbow-move 3s linear infinite; color: transparent !important; } @keyframes fx-rainbow-move { 0% { background-position: 0% center; } 100% { background-position: 200% center; } } /* 🔥 Fire */ .fx-fire { background: linear-gradient(90deg, #dc2626, #ea580c, #f59e0b, #fbbf24); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: fx-rainbow-move 2s linear infinite; color: transparent !important; } /* 🧊 Ice */ .fx-ice { background: linear-gradient(90deg, #bae6fd, #38bdf8, #06b6d4, #e0f2fe); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: fx-rainbow-move 3s linear infinite; color: transparent !important; } /* 🌅 Sunset */ .fx-sunset { background: linear-gradient(90deg, #f43f5e, #f97316, #fbbf24); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: fx-rainbow-move 2.5s linear infinite; color: transparent !important; } /* 💜 Galaxy */ .fx-galaxy { background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899, #6366f1); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: fx-rainbow-move 3s linear infinite; color: transparent !important; } /* 💚 Matrix */ .fx-matrix { color: #22c55e !important; text-shadow: 0 0 4px rgba(34,197,94,.9), 0 0 12px rgba(34,197,94,.6), 0 0 30px rgba(34,197,94,.3); font-family: 'Courier New', monospace !important; letter-spacing: .05em; } /* ══════════════════════════════════════════════════════════════════ GLITCH — efecto de error digital ══════════════════════════════════════════════════════════════════ */ .fx-glitch { color: #fff !important; position: relative; animation: fx-glitch-text 3s steps(1) infinite; } @keyframes fx-glitch-text { 0%,93%,97%,100% { text-shadow: none; color: inherit; } 94% { text-shadow: -2px 0 #ef4444, 2px 0 #38bdf8; letter-spacing: 2px; } 95% { text-shadow: 2px 0 #ef4444,-2px 0 #38bdf8; letter-spacing:-1px; } 96% { text-shadow: -2px 0 #10b981, 2px 0 #8b5cf6; letter-spacing: 0; } } /* ══════════════════════════════════════════════════════════════════ SHADOW — sombra dramática ══════════════════════════════════════════════════════════════════ */ .fx-shadow { text-shadow: 1px 1px 0 rgba(0,0,0,.8), 2px 2px 6px rgba(0,0,0,.6), 0 0 20px rgba(0,0,0,.4); } /* ══════════════════════════════════════════════════════════════════ HOLOGRAM — shimmer holográfico ══════════════════════════════════════════════════════════════════ */ .fx-hologram { background: linear-gradient(45deg, #38bdf8, #a855f7, #ec4899, #f59e0b, #10b981, #38bdf8); background-size: 300% 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: fx-hologram-shift 4s ease infinite; filter: drop-shadow(0 0 3px rgba(56,189,248,.5)); color: transparent !important; } @keyframes fx-hologram-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* ══════════════════════════════════════════════════════════════════ ADMIN / STAFF — efecto especial de rango ══════════════════════════════════════════════════════════════════ */ .fx-admin, .fx-staff { color: #fbbf24 !important; text-shadow: 0 0 6px rgba(251,191,36,.8), 0 0 18px rgba(251,191,36,.5); letter-spacing: .02em; } .fx-vip { background: linear-gradient(90deg, #f59e0b, #fcd34d, #f59e0b); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: fx-rainbow-move 2s linear infinite; color: transparent !important; } /* ══════════════════════════════════════════════════════════════════ AVATAR HOVER — efecto premium en todos los avatares del sitio ══════════════════════════════════════════════════════════════════ */ .avatar-circle, .avatar-crop-container, .wf-item .avatar-circle, .wl-item .avatar-circle, .wfo-av-box, .nk-reactor-av, .cmt-item .avatar-circle { cursor: pointer; transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, filter .22s ease; will-change: transform, box-shadow; } .avatar-circle:hover, .avatar-crop-container:hover, .wf-item .avatar-circle:hover, .wl-item .avatar-circle:hover, .wfo-av-box:hover, .nk-reactor-av:hover, .cmt-item .avatar-circle:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 6px 20px rgba(56,189,248,.35), 0 0 0 2px rgba(56,189,248,.25); filter: brightness(1.08) saturate(1.1); z-index: 5; } /* Avatar pixelado de Habbo — mantener crisp */ .avatar-circle img, .avatar-crop-container img, .wfo-av-box img { image-rendering: pixelated; image-rendering: crisp-edges; } /* ══════════════════════════════════════════════════════════════════ POST TYPOGRAPHY — Twitter + Discord + Nitro AAA ══════════════════════════════════════════════════════════════════ */ /* Nombre de usuario en post */ .post-card .username { font-size: 15px; font-weight: 900; letter-spacing: -.25px; line-height: 1.2; color: var(--p-text); text-decoration: none; transition: color .18s, text-shadow .18s; } .post-card .username:hover { color: var(--p-primary) !important; text-decoration: none; } /* Texto del post — más legible, más premium */ .post-content { font-size: 15.5px !important; line-height: 1.65 !important; font-weight: 600 !important; color: var(--p-text) !important; letter-spacing: .01em; word-break: break-word; } /* Post con mucho texto: tamaño ligeramente menor */ .post-content.is-long { font-size: 14.5px !important; line-height: 1.7 !important; } /* Post corto (tweet style) — grande y bold */ .post-content.is-short { font-size: 18px !important; font-weight: 700 !important; line-height: 1.5 !important; } /* Meta info (tiempo, nivel) */ .post-time { font-size: 12.5px; color: var(--p-muted); font-weight: 600; letter-spacing: .01em; } /* Username de comentario */ .cmt-author.username { font-size: 13.5px !important; font-weight: 900 !important; letter-spacing: -.15px; } /* Nombres en widgets */ .wf-name .username, .wl-text .username, .wfo-name .username, .hover-name.username { font-weight: 900 !important; font-size: 14px !important; text-decoration: none; transition: color .18s, text-shadow .2s; } .wf-name .username:hover, .wl-text .username:hover, .wfo-name .username:hover { color: var(--p-primary) !important; } /* ══════════════════════════════════════════════════════════════════ POST CARD AAA — jerarquía visual mejorada ══════════════════════════════════════════════════════════════════ */ /* Header más integrado */ .post-header { margin-bottom: 8px; align-items: flex-start; gap: 8px; } /* Separador avatar → contenido */ .post-left-col { padding-top: 2px; } /* Hot post — borde izquierdo de acento */ .post-card.is-hot { border-left-color: #f59e0b !important; background: linear-gradient(to right, rgba(245,158,11,.04), transparent 80%); } body.dark-mode .post-card.is-hot { background: linear-gradient(to right, rgba(245,158,11,.06), transparent 80%); } /* ══════════════════════════════════════════════════════════════════ POWERS WIDGET — preview del efecto activo ══════════════════════════════════════════════════════════════════ */ .kf-active-effect-preview { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(0,0,0,.04); border: 1px solid var(--border-soft); border-radius: 10px; font-size: 13px; font-weight: 800; color: var(--p-muted); width: 100%; box-sizing: border-box; margin-bottom: 12px; } .kf-active-effect-preview .fx-name { font-weight: 900; font-size: 14px; /* el color y efecto se aplica via clase fx-* */ } body.dark-mode .kf-active-effect-preview { background: rgba(255,255,255,.04); } /* ══════════════════════════════════════════════════════════════════ UTILITY — apply effects on demand from JS ══════════════════════════════════════════════════════════════════ */ /* Usage: el JS agrega la clase fx-{effect} directamente al elemento */ .nk-name-fx { display: inline; vertical-align: baseline; }