.badge-container:hover .tooltip { opacity: 1; }
<radialGradient id="centerGlow" cx="50%" cy="50%" r="50%"> <stop offset="0%" style="stop-color:#FFD700;stop-opacity:0.3" /> <stop offset="100%" style="stop-color:#FFA500;stop-opacity:0" /> </radialGradient> 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; } .badge-container:hover .tooltip { opacity: 1
.badge-container:hover { transform: scale(1.05); filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.5)); } radialGradient id="centerGlow" cx="50%" cy="50%" r="50%">
<!-- 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>
/* 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; }
<!-- Golden laurel leaves (right side) --> <g fill="none" stroke="#DAA520" stroke-width="1.5"> <path d="M 140 85 Q 145 80 142 75"/> <path d="M 142 88 Q 148 83 145 78"/> <path d="M 144 91 Q 150 86 148 81"/> </g>