.badge-container:hover { transform: scale(1.05); filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.5)); }
This design represents the highest tier of Kubernetes mastery - the Golden Kubestronaut status! kubestronaut golden
<!-- Stars decoration --> <g fill="#FFD700"> <polygon points="70,70 72,66 74,70 78,70 75,73 76,77 72,75 68,77 69,73 66,70" /> <polygon points="130,70 132,66 134,70 138,70 135,73 136,77 132,75 128,77 129,73 126,70" /> <polygon points="70,130 72,126 74,130 78,130 75,133 76,137 72,135 68,137 69,133 66,130" /> <polygon points="130,130 132,126 134,130 138,130 135,133 136,137 132,135 128,137 129,133 126,130" /> </g> .badge-container:hover { transform: scale(1.05)
<!-- Kubestronaut text --> <text x="100" y="145" text-anchor="middle" fill="url(#goldGradient)" font-size="8" font-weight="bold" font-family="monospace" letter-spacing="1"> KUBESTRONAUT </text> filter: drop-shadow(0 0 20px rgba(255
/* Main Badge Container */ .badge-container { position: relative; width: 320px; height: 320px; cursor: pointer; transition: transform 0.3s ease, filter 0.3s ease; }
<!-- Astronaut helmet (center) --> <circle cx="100" cy="100" r="32" fill="#2a2a3e" stroke="url(#goldGradient)" stroke-width="2.5"/> <circle cx="100" cy="100" r="28" fill="#1e1e2e" stroke="#DAA520" stroke-width="1"/> <!-- Visor --> <ellipse cx="100" cy="95" rx="18" ry="14" fill="#0a0a1e" stroke="url(#goldGradient)" stroke-width="1.5"/> <ellipse cx="100" cy="95" rx="15" ry="11" fill="url(#centerGlow)"/> <!-- Visor reflection --> <ellipse cx="94" cy="91" rx="4" ry="3" fill="rgba(255,255,255,0.3)"/>
.badge-container:hover .tooltip { opacity: 1; }