Kubestronaut Golden Site

/* Outer ring glow effect */ .badge-container::before { content: ''; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; background: radial-gradient(circle, rgba(255,215,0,0.2), transparent); border-radius: 50%; z-index: -1; animation: pulseGlow 2s ease-in-out infinite; }

.badge-container:hover .tooltip { opacity: 1; } kubestronaut golden

/* Achievement text */ .achievement-text { text-align: center; margin-top: 80px; color: white; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; font-weight: 300; } /* Outer ring glow effect */

.badge-container:hover { transform: scale(1.05); filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.5)); } animation: pulseGlow 2s ease-in-out infinite

<!-- Outer ring --> <circle cx="100" cy="100" r="92" fill="none" stroke="url(#goldGradient)" stroke-width="6" filter="url(#glow)"/> <circle cx="100" cy="100" r="84" fill="none" stroke="url(#darkGold)" stroke-width="2"/> <!-- Decorative dots on outer ring --> <g fill="#FFD700"> <circle cx="100" cy="12" r="2.5"/> <circle cx="100" cy="188" r="2.5"/> <circle cx="12" cy="100" r="2.5"/> <circle cx="188" cy="100" r="2.5"/> <circle cx="38" cy="38" r="2"/> <circle cx="162" cy="38" r="2"/> <circle cx="38" cy="162" r="2"/> <circle cx="162" cy="162" r="2"/> </g>