leumas-private-shared/src/styles/SolarSystemStyles.css

Private React JSX Package For Leumas Shared Components, Headers, Footers, Asides, Login Pages, API Key Manager and much more. Styles and everything reusable to avoid DRY code across all of our subdomains

.solar-system {
    position: relative;
    background: #141414;
    overflow: hidden;
    width: 100%;
    height: 100%;
}
  
  .sun {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(5px);
    box-shadow: 0 0 20px rgba(15, 206, 253, 0.7), inset 0 0 20px rgba(61, 95, 208, 0.7);
    z-index: 10;
  }

  @keyframes pulse-wave {
    0% {
      transform: scale(1);
      opacity: 0.7;
    }
    50% {
      transform: scale(1.2);
      opacity: 0.4;
    }
    100% {
      transform: scale(1.5);
      opacity: 0;
    }
  }

  .sun::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255,255,255,0.7), rgba(255,255,255,0));
    border-radius: 50%;
    z-index: -1; /* Ensure the pulse sits behind the image */
    animation: pulse-wave 1.5s infinite;
    opacity: 0; /* Hide the pulse by default */
  }
  
  .sun.pulse::before {
    opacity: 1; /* Show the pulse when the .pulse class is added */
  }
  
  
  .orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    animation: rotate 30s infinite linear;
    pointer-events: none;  /* The orbits themselves will not capture mouse events */
    z-index: 1;
}

.orbit::before {
    content: ""; 
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid #ddd;
    border-radius: inherit;
    pointer-events: auto;  /* This makes the border interactive */
}

.orbit:hover::before {
    border-color: blue;
}

.solar-system .orbit:not(:hover) {
    opacity: 0.7; 
}

.planet {
    position: absolute;
    top: 0;
    left: 50%;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #99b, #337);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    transition: background-color 0.3s, transform 0.3s;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(1turn); }
}

  
  .planet-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    animation: rotate 30s infinite linear;
    transition: border-color 0.3s;  /* Smooth transition for hover effect */
    pointer-events: auto; /* No pointer events for the rotating wrapper */
    z-index: 5; 
  }

  .hovered-link-name {
    z-index: 20;
    font-size: 18px;
    font-weight: bold;
  }

  .planet:hover {
    background-color: blue; /* Change the planet's color to blue on hover */
    transform: scale(1.1);  /* Slightly scale up the planet on hover */
  }


/* Add this to your CSS file */
@keyframes orbit {
    0% {
        transform: rotate(0deg) translateX(100px) rotate(0deg);
    }
    100% {
        transform: rotate(360deg) translateX(100px) rotate(-360deg);
    }
}
  
  .orbiting-planet {
    animation: orbit 10s infinite; /* You can adjust the 10s to change the speed */
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center;
  }