mirror of
https://github.com/sudosylabs/vnidrop.git
synced 2026-08-05 02:29:55 +02:00
103 lines
2.5 KiB
CSS
103 lines
2.5 KiB
CSS
/* Cross-platform orbit */
|
|
.platform-orbit {
|
|
position: relative;
|
|
width: min(100%, 610px);
|
|
aspect-ratio: 1;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.platform-ring {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
border: 1px solid #e2d8e7;
|
|
border-radius: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.platform-ring::before,
|
|
.platform-ring::after {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
background: var(--brand-400);
|
|
box-shadow: 0 0 0 7px rgba(168, 85, 247, 0.08);
|
|
content: "";
|
|
}
|
|
|
|
.platform-ring-outer {
|
|
width: 88%;
|
|
height: 88%;
|
|
animation: orbit-spin 35s linear infinite;
|
|
}
|
|
|
|
.platform-ring-outer::before { top: 13%; left: 10%; width: 7px; height: 7px; }
|
|
.platform-ring-outer::after { right: 7%; bottom: 23%; width: 5px; height: 5px; }
|
|
|
|
.platform-ring-inner {
|
|
width: 58%;
|
|
height: 58%;
|
|
border-style: dashed;
|
|
animation: orbit-spin 25s linear infinite reverse;
|
|
}
|
|
|
|
.platform-ring-inner::before { top: 48%; left: -4px; width: 7px; height: 7px; }
|
|
.platform-ring-inner::after { top: 4%; right: 23%; width: 5px; height: 5px; }
|
|
|
|
.platform-center {
|
|
position: absolute;
|
|
z-index: 2;
|
|
top: 50%;
|
|
left: 50%;
|
|
display: grid;
|
|
width: 145px;
|
|
height: 145px;
|
|
place-items: center;
|
|
border: 1px solid #e5d8eb;
|
|
border-radius: 38px;
|
|
background: white;
|
|
box-shadow: 0 30px 80px rgba(55, 29, 67, 0.16);
|
|
transform: translate(-50%, -50%) rotate(-3deg);
|
|
}
|
|
|
|
.platform-center img { position: relative; z-index: 2; width: 87px; height: 87px; }
|
|
|
|
.platform-center-glow {
|
|
position: absolute;
|
|
inset: -45px;
|
|
border-radius: 50%;
|
|
background: rgba(168, 85, 247, 0.18);
|
|
filter: blur(42px);
|
|
animation: platform-glow 5s ease-in-out infinite;
|
|
}
|
|
|
|
.platform-chip {
|
|
position: absolute;
|
|
z-index: 4;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 10px 14px;
|
|
border: 1px solid #e2d9e6;
|
|
border-radius: 999px;
|
|
background: rgba(255, 255, 255, 0.93);
|
|
box-shadow: 0 12px 35px rgba(53, 34, 61, 0.1);
|
|
color: #4b4350;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
animation: platform-chip-float 5s ease-in-out infinite;
|
|
}
|
|
|
|
.platform-chip i {
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 50%;
|
|
background: var(--brand-500);
|
|
box-shadow: 0 0 0 4px var(--brand-100);
|
|
}
|
|
|
|
.platform-chip-1 { top: 8%; left: 17%; animation-delay: -1s; }
|
|
.platform-chip-2 { top: 19%; right: 5%; animation-delay: -2.7s; }
|
|
.platform-chip-3 { right: 1%; bottom: 22%; animation-delay: -4s; }
|
|
.platform-chip-4 { bottom: 7%; left: 24%; animation-delay: -0.5s; }
|
|
.platform-chip-5 { top: 45%; left: 0; animation-delay: -3.2s; }
|