Explore

/* Radial Menu Styles */ .radial-menu { position: relative; width: 300px; height: 300px; margin: 0 auto; display: flex; justify-content: center; align-items: center; } .radial-item { position: absolute; top: 50%; left: 50%; transform-origin: 0 0; text-decoration: none; color: red; font-weight: bold; font-size: 16px; padding: 12px 20px; background-color: rgba(0, 0, 0, 0.7); border: 2px dashed red; border-radius: 8px; text-align: center; transition: all 0.3s ease; cursor: url('https://rebecka.xyz/cursor/bug-normal.png'), auto !important; white-space: nowrap; } .radial-item:hover { color: lime; text-shadow: 0 0 10px lime, 0 0 20px lime; border-color: lime; background-color: rgba(0, 0, 0, 0.9); cursor: url('https://rebecka.xyz/cursor/bug-work.png'), auto !important; transform: scale(1.05); } .radial-item.featured:hover { animation: none; } /* Individual positions (like clock points) */ .radial-item.home { transform: rotate(0deg) translate(120px) rotate(0deg); } .radial-item.videos { transform: rotate(72deg) translate(120px) rotate(-72deg); } .radial-item.about { transform: rotate(144deg) translate(120px) rotate(-144deg); } .radial-item.contact { transform: rotate(216deg) translate(120px) rotate(-216deg); } .radial-item.photography { transform: rotate(288deg) translate(120px) rotate(-288deg); } /* Responsive Fallback */ @media (max-width: 768px) { .radial-menu { width: 100%; height: auto; display: flex; flex-direction: column; align-items: center; } .radial-item { position: relative; transform: none; margin: 10px 0; } }