/* MadCatChat — Shop username styles + badges + pack emojis Loaded on every page via Edit this one file to add/tweak styles site-wide. */ /* ── BADGES ─────────────────────────────────────────────────────────────── */ .user-badge{ display:inline-block; margin-left:4px; font-size:.9em; line-height:1; vertical-align:middle; filter:drop-shadow(0 0 2px rgba(0,0,0,.4)); } /* ── PACK EMOJIS (inline images from shop emoji packs) ─────────────────── */ .pack-emoji{ display:inline-block; width:1.5em; height:1.5em; vertical-align:-0.35em; margin:0 1px; object-fit:contain; /* iOS Safari wraps "address-like" text in invisible auto-detected links. Even though we serve for these tokens, any nearby text the regex missed could still get hijacked. Force pointer events to image only and strip any underline iOS might inject. */ pointer-events:auto; text-decoration:none !important; -webkit-user-modify:read-only; } /* Belt-and-braces: kill iOS data-detector styling on chat / feed / forum message bodies. They render real tags themselves where needed. */ .mg-text, .post-content, .comment-text, .thread-body, .reply-body{ -webkit-text-size-adjust:100%; } .mg-text a[x-apple-data-detectors], .post-content a[x-apple-data-detectors], .comment-text a[x-apple-data-detectors], .thread-body a[x-apple-data-detectors], .reply-body a[x-apple-data-detectors]{ color:inherit !important; text-decoration:none !important; pointer-events:none !important; } /* ── USERNAME STYLES — shared base ─────────────────────────────────────── */ .un-rainbow, .un-gold, .un-fire, .un-glow-cyan, .un-glitch, .un-sparkle, .un-galaxy, .un-mint, .un-sunset, .un-toxic, .un-ice, .un-rose, .un-vapor, .un-matrix, .un-ember, .un-neon, .un-lava, .un-ocean, .un-void, .un-holo, .un-glitch2, .un-aurora, .un-bubblegum, .un-blood, .un-festive { display:inline-block !important; font-size:1.05em !important; font-weight:900 !important; letter-spacing:.3px !important; } /* Helper mixin via repeat: gradient text background */ .un-rainbow, .un-gold, .un-fire, .un-galaxy, .un-mint, .un-sunset, .un-rose, .un-vapor, .un-ember, .un-lava, .un-ocean, .un-holo, .un-aurora, .un-bubblegum, .un-festive { -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; color:transparent !important; } /* ── Phase 1 styles ────────────────────────────────────────────────────── */ .un-rainbow{ background-image:linear-gradient(90deg,#ff4d4d,#ff8800,#ffd11a,#33cc33,#3399ff,#9b59b6) !important; background-size:300% 100% !important; animation:un-rainbow-shift 4s linear infinite !important; } @keyframes un-rainbow-shift{0%{background-position:0% 50%}100%{background-position:300% 50%}} .un-gold{ background-image:linear-gradient(90deg,#f5c842,#ffe082,#f5c842) !important; background-size:200% 100% !important; animation:un-gold-shimmer 3s linear infinite !important; } @keyframes un-gold-shimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}} .un-glow-cyan{ color:#00e0ff !important; text-shadow:0 0 6px rgba(0,224,255,.7), 0 0 14px rgba(0,224,255,.45); animation:un-cyan-pulse 2s ease-in-out infinite !important; } @keyframes un-cyan-pulse{ 0%,100%{text-shadow:0 0 6px rgba(0,224,255,.7), 0 0 14px rgba(0,224,255,.45)} 50%{text-shadow:0 0 10px rgba(0,224,255,.9), 0 0 24px rgba(0,224,255,.65)} } .un-fire{ background-image:linear-gradient(90deg,#ff3333,#ff8800,#ffd11a) !important; background-size:200% 100% !important; animation:un-gold-shimmer 1.5s linear infinite !important; } .un-glitch{ color:#ff00ff !important; text-shadow:1px 0 #00ffff, -1px 0 #ffff00; animation:un-glitch-shift .3s steps(2) infinite !important; } @keyframes un-glitch-shift{ 0%{text-shadow:1px 0 #00ffff, -1px 0 #ffff00} 50%{text-shadow:-1px 0 #00ffff, 1px 0 #ffff00} } /* ── Phase 4 NEW styles ────────────────────────────────────────────────── */ /* Sparkle — twinkling text shadows that move around the name */ .un-sparkle{ color:#ffe082 !important; text-shadow:0 0 6px rgba(255,224,130,.6), 0 0 12px rgba(245,200,66,.4); animation:un-sparkle-twinkle 1.8s ease-in-out infinite !important; position:relative; } @keyframes un-sparkle-twinkle{ 0%,100%{text-shadow:0 0 6px rgba(255,224,130,.6), 0 0 12px rgba(245,200,66,.4), 4px -4px 0 rgba(255,255,255,.3), -4px 4px 0 rgba(255,255,255,.0)} 25% {text-shadow:0 0 8px rgba(255,224,130,.8), 0 0 18px rgba(245,200,66,.6), -4px -4px 0 rgba(255,255,255,.5), 4px 4px 0 rgba(255,255,255,.0)} 50% {text-shadow:0 0 6px rgba(255,224,130,.6), 0 0 12px rgba(245,200,66,.4), 4px 4px 0 rgba(255,255,255,.0), -4px -4px 0 rgba(255,255,255,.5)} 75% {text-shadow:0 0 8px rgba(255,224,130,.8), 0 0 18px rgba(245,200,66,.6), -4px 4px 0 rgba(255,255,255,.3), 4px -4px 0 rgba(255,255,255,.0)} } /* Galaxy — purple-blue-pink cosmic drift */ .un-galaxy{ background-image:linear-gradient(90deg,#4a148c,#1976d2,#e91e63,#673ab7,#4a148c) !important; background-size:400% 100% !important; animation:un-galaxy-drift 8s linear infinite !important; } @keyframes un-galaxy-drift{0%{background-position:0% 50%}100%{background-position:400% 50%}} /* Mint Frost — cool teal-cyan icy gradient */ .un-mint{ background-image:linear-gradient(90deg,#26d0a8,#a8e6cf,#26d0a8) !important; background-size:200% 100% !important; animation:un-gold-shimmer 3.5s linear infinite !important; } /* Sunset — warm pink-orange-purple */ .un-sunset{ background-image:linear-gradient(90deg,#ff6b9d,#ff8800,#9b59b6,#ff6b9d) !important; background-size:300% 100% !important; animation:un-galaxy-drift 6s linear infinite !important; } /* Toxic — radioactive lime glow that pulses */ .un-toxic{ color:#39ff14 !important; text-shadow:0 0 6px rgba(57,255,20,.7), 0 0 18px rgba(57,255,20,.5); animation:un-toxic-pulse 1.4s ease-in-out infinite !important; } @keyframes un-toxic-pulse{ 0%,100%{text-shadow:0 0 6px rgba(57,255,20,.7), 0 0 14px rgba(57,255,20,.4)} 50% {text-shadow:0 0 12px rgba(57,255,20,1), 0 0 28px rgba(57,255,20,.8)} } /* Ice Crystal — frozen white-blue with sharp shadows */ .un-ice{ color:#e0f7ff !important; text-shadow: 0 0 4px rgba(173,216,230,.9), 1px 1px 0 rgba(135,206,235,.6), -1px -1px 0 rgba(255,255,255,.7), 0 0 12px rgba(100,180,255,.5); animation:un-ice-shimmer 3s ease-in-out infinite !important; } @keyframes un-ice-shimmer{ 0%,100%{filter:brightness(1)} 50% {filter:brightness(1.3)} } /* Rose Gold — elegant pink-copper-gold gradient */ .un-rose{ background-image:linear-gradient(90deg,#f4cccc,#e8a87c,#f5c842,#e8a87c,#f4cccc) !important; background-size:300% 100% !important; animation:un-galaxy-drift 5s linear infinite !important; } /* Vaporwave — pink-cyan 80s aesthetic */ .un-vapor{ background-image:linear-gradient(90deg,#ff71ce,#01cdfe,#b967ff,#ff71ce) !important; background-size:300% 100% !important; animation:un-galaxy-drift 5s linear infinite !important; } /* Matrix — bright green digital with flicker */ .un-matrix{ color:#00ff41 !important; text-shadow:0 0 4px rgba(0,255,65,.7), 0 0 10px rgba(0,255,65,.4); animation:un-matrix-flicker 2.5s steps(8) infinite !important; font-family:'Courier New', monospace !important; } @keyframes un-matrix-flicker{ 0%,30%,60%,100%{opacity:1; text-shadow:0 0 4px rgba(0,255,65,.7), 0 0 10px rgba(0,255,65,.4)} 10%,40% {opacity:.7; text-shadow:0 0 2px rgba(0,255,65,.5)} 20%,80% {opacity:1; text-shadow:0 0 6px rgba(0,255,65,.9), 0 0 14px rgba(0,255,65,.6)} } /* Ember — glowing orange-red with pulsing fire-shadow */ .un-ember{ background-image:linear-gradient(90deg,#ff5722,#ff9800,#ff5722) !important; background-size:200% 100% !important; animation:un-gold-shimmer 2s linear infinite !important; filter:drop-shadow(0 0 4px rgba(255,87,34,.6)) drop-shadow(0 0 8px rgba(255,152,0,.4)); } /* ── Phase 9 NEW styles ──────────────────────────────────────────────── */ /* Neon Sign — buzzing electric pink with bar-sign flicker */ .un-neon{ color:#ff1cf7 !important; text-shadow: 0 0 4px #ff1cf7, 0 0 8px #ff1cf7, 0 0 16px #ff1cf7, 0 0 24px rgba(255,28,247,.6); animation:un-neon-flicker 3s steps(20) infinite !important; } @keyframes un-neon-flicker{ 0%,8%,12%,80%,100%{opacity:1; text-shadow:0 0 4px #ff1cf7, 0 0 8px #ff1cf7, 0 0 16px #ff1cf7, 0 0 24px rgba(255,28,247,.6)} 9%,11% {opacity:.4; text-shadow:none} 81%,83% {opacity:.7} } /* Lava — molten orange-red with smoldering shimmer */ .un-lava{ background-image:linear-gradient(90deg,#b71c1c,#ff5722,#ff9800,#ff5722,#b71c1c) !important; background-size:300% 100% !important; animation:un-galaxy-drift 4s linear infinite !important; filter:drop-shadow(0 0 3px rgba(255,87,34,.7)); } /* Ocean Wave — blue-to-teal flowing gradient */ .un-ocean{ background-image:linear-gradient(90deg,#0277bd,#00acc1,#4dd0e1,#00acc1,#0277bd) !important; background-size:300% 100% !important; animation:un-galaxy-drift 7s linear infinite !important; } /* Void — dark cosmic purple with violet glow */ .un-void{ color:#1a0033 !important; text-shadow: 0 0 4px #6a0dad, 0 0 12px #9b59b6, 0 0 20px rgba(155,89,182,.6); animation:un-void-pulse 2.5s ease-in-out infinite !important; } @keyframes un-void-pulse{ 0%,100%{text-shadow:0 0 4px #6a0dad, 0 0 12px #9b59b6, 0 0 20px rgba(155,89,182,.6); filter:brightness(1)} 50% {text-shadow:0 0 8px #6a0dad, 0 0 20px #9b59b6, 0 0 30px rgba(155,89,182,.85); filter:brightness(1.3)} } /* Holographic — iridescent foil-sticker shimmer */ .un-holo{ background-image:linear-gradient(110deg,#ff61a6,#ffe082,#a8e6cf,#81d4fa,#ce93d8,#ff61a6) !important; background-size:400% 100% !important; animation:un-galaxy-drift 3.5s linear infinite !important; filter:drop-shadow(0 0 2px rgba(255,255,255,.5)); } /* Glitch 2.0 — RGB chromatic aberration with smoother offset */ .un-glitch2{ color:#fff !important; text-shadow: 1.5px 0 0 #ff0080, -1.5px 0 0 #00ffff; animation:un-glitch2-shift .8s steps(6) infinite !important; } @keyframes un-glitch2-shift{ 0%,100%{text-shadow: 1.5px 0 0 #ff0080, -1.5px 0 0 #00ffff} 20% {text-shadow:-1.5px 1px 0 #ff0080, 1.5px -1px 0 #00ffff} 40% {text-shadow: 1.5px -1px 0 #ff0080, -1.5px 1px 0 #00ffff} 60% {text-shadow: 0 1.5px 0 #ff0080, 0 -1.5px 0 #00ffff} 80% {text-shadow:-1.5px 0 0 #ff0080, 1.5px 0 0 #00ffff} } /* Aurora Borealis — green-blue-purple sky ripple */ .un-aurora{ background-image:linear-gradient(90deg,#00ff88,#00e5ff,#7c4dff,#00ff88,#00e5ff) !important; background-size:400% 100% !important; animation:un-galaxy-drift 8s linear infinite !important; filter:drop-shadow(0 0 6px rgba(0,229,255,.4)); } /* Bubblegum — sweet pink-to-baby-blue bobbing */ .un-bubblegum{ background-image:linear-gradient(90deg,#ff8fa3,#ffc8dd,#a0e7e5,#ffc8dd,#ff8fa3) !important; background-size:300% 100% !important; animation:un-galaxy-drift 5s linear infinite !important; } /* ── Phase 10 SEASONAL styles ────────────────────────────────────────── */ /* Blood Moon (Halloween) — deep blood-red with unsettling pulse */ .un-blood{ color:#8b0000 !important; text-shadow: 0 0 4px #b71c1c, 0 0 10px #d50000, 0 0 18px rgba(213,0,0,.5); animation:un-blood-pulse 2.4s ease-in-out infinite !important; } @keyframes un-blood-pulse{ 0%,100%{filter:brightness(1); text-shadow:0 0 4px #b71c1c, 0 0 10px #d50000, 0 0 18px rgba(213,0,0,.5)} 50% {filter:brightness(1.4); text-shadow:0 0 8px #b71c1c, 0 0 18px #d50000, 0 0 28px rgba(213,0,0,.8)} } /* Festive Lights (Christmas) — red and green twinkle */ .un-festive{ background-image:linear-gradient(90deg,#c41e3a,#0f8a3f,#c41e3a,#0f8a3f,#c41e3a) !important; background-size:400% 100% !important; animation:un-galaxy-drift 3s linear infinite !important; filter:drop-shadow(0 0 4px rgba(255,215,0,.5)); } /* Accessibility: keep animations going (they are paid features) but slow them down a bit if the user has prefers-reduced-motion. */ @media (prefers-reduced-motion: reduce) { .un-rainbow, .un-gold, .un-fire, .un-galaxy, .un-mint, .un-sunset, .un-rose, .un-vapor, .un-ember, .un-lava, .un-ocean, .un-holo, .un-aurora, .un-bubblegum, .un-festive { animation-duration: 12s !important; } .un-glow-cyan, .un-glitch, .un-sparkle, .un-toxic, .un-ice, .un-matrix, .un-neon, .un-void, .un-glitch2, .un-blood { animation: none !important; } }