Refactor app architecture and clean local artifacts
This commit is contained in:
AzuTear
@@ -0,0 +1,275 @@
|
||||
.network-scene {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background:
|
||||
radial-gradient(circle at top, rgba(255, 255, 255, 0.22), transparent 28%),
|
||||
linear-gradient(180deg, #14091f 0%, #26113d 36%, #3e2266 72%, #1b0d2c 100%);
|
||||
color: #fff7ff;
|
||||
}
|
||||
|
||||
.network-scene__nebula,
|
||||
.network-scene__stars,
|
||||
.network-scene__orbital,
|
||||
.network-scene__comet {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.network-scene__nebula {
|
||||
border-radius: 999px;
|
||||
filter: blur(56px);
|
||||
mix-blend-mode: screen;
|
||||
opacity: 0.92;
|
||||
animation: drift 18s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.network-scene__nebula--violet {
|
||||
top: -10%;
|
||||
left: -6%;
|
||||
width: 34rem;
|
||||
height: 34rem;
|
||||
background: radial-gradient(circle, rgba(141, 111, 255, 0.72) 0%, rgba(141, 111, 255, 0.08) 60%, transparent 78%);
|
||||
}
|
||||
|
||||
.network-scene__nebula--rose {
|
||||
top: 18%;
|
||||
right: -10%;
|
||||
width: 28rem;
|
||||
height: 28rem;
|
||||
background: radial-gradient(circle, rgba(255, 182, 222, 0.58) 0%, rgba(255, 182, 222, 0.05) 60%, transparent 78%);
|
||||
animation-delay: -5s;
|
||||
}
|
||||
|
||||
.network-scene__nebula--gold {
|
||||
bottom: -16%;
|
||||
left: 18%;
|
||||
width: 30rem;
|
||||
height: 24rem;
|
||||
background: radial-gradient(circle, rgba(255, 213, 144, 0.35) 0%, rgba(255, 213, 144, 0.05) 54%, transparent 76%);
|
||||
animation-delay: -9s;
|
||||
}
|
||||
|
||||
.network-scene__stars {
|
||||
inset: -20%;
|
||||
background-repeat: repeat;
|
||||
}
|
||||
|
||||
.network-scene__stars--far {
|
||||
opacity: 0.5;
|
||||
background-image:
|
||||
radial-gradient(circle, rgba(255, 255, 255, 0.88) 0 1px, transparent 1.8px),
|
||||
radial-gradient(circle, rgba(208, 190, 255, 0.84) 0 1px, transparent 1.8px);
|
||||
background-size: 150px 150px, 240px 240px;
|
||||
animation: driftStars 44s linear infinite;
|
||||
}
|
||||
|
||||
.network-scene__stars--near {
|
||||
opacity: 0.72;
|
||||
background-image:
|
||||
radial-gradient(circle, rgba(255, 246, 223, 0.92) 0 1.6px, transparent 2.4px),
|
||||
radial-gradient(circle, rgba(255, 255, 255, 0.96) 0 1.4px, transparent 2.2px);
|
||||
background-size: 112px 112px, 164px 164px;
|
||||
animation: driftStarsNear 26s linear infinite;
|
||||
}
|
||||
|
||||
.network-scene__orbital {
|
||||
border: 1px solid rgba(248, 232, 255, 0.12);
|
||||
border-radius: 999px;
|
||||
animation: rotateRing 26s linear infinite;
|
||||
}
|
||||
|
||||
.network-scene__orbital--one {
|
||||
width: 38rem;
|
||||
height: 38rem;
|
||||
}
|
||||
|
||||
.network-scene__orbital--two {
|
||||
width: 28rem;
|
||||
height: 28rem;
|
||||
border-style: dashed;
|
||||
border-color: rgba(255, 219, 171, 0.24);
|
||||
animation-direction: reverse;
|
||||
animation-duration: 18s;
|
||||
}
|
||||
|
||||
.network-scene__comet {
|
||||
height: 2px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 241, 213, 0.92) 60%, rgba(255, 255, 255, 1) 100%);
|
||||
box-shadow: 0 0 16px rgba(255, 241, 213, 0.72);
|
||||
transform: rotate(-22deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.network-scene__comet--one {
|
||||
top: 18%;
|
||||
right: 18%;
|
||||
width: 16rem;
|
||||
animation: comet 5.8s ease-out infinite;
|
||||
}
|
||||
|
||||
.network-scene__comet--two {
|
||||
top: 34%;
|
||||
left: 14%;
|
||||
width: 12rem;
|
||||
animation: comet 6.5s ease-out infinite 1.8s;
|
||||
}
|
||||
|
||||
.network-scene__content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: min(44rem, calc(100% - 2.5rem));
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.network-scene__signal {
|
||||
position: relative;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 15rem;
|
||||
height: 15rem;
|
||||
margin: 0 auto 1.5rem;
|
||||
}
|
||||
|
||||
.network-scene__signal-ring {
|
||||
position: absolute;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(245, 231, 255, 0.16);
|
||||
}
|
||||
|
||||
.network-scene__signal-ring--outer {
|
||||
inset: 0;
|
||||
animation: rotateRing 22s linear infinite;
|
||||
}
|
||||
|
||||
.network-scene__signal-ring--mid {
|
||||
inset: 1.8rem;
|
||||
border-style: dashed;
|
||||
border-color: rgba(255, 214, 167, 0.28);
|
||||
animation: rotateRing 12s linear infinite reverse;
|
||||
}
|
||||
|
||||
.network-scene__signal-core {
|
||||
width: 8rem;
|
||||
height: 8rem;
|
||||
border-radius: 999px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background:
|
||||
radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.98), rgba(255, 239, 208, 0.94) 28%, rgba(255, 170, 176, 0.88) 58%, rgba(145, 111, 255, 0.84) 100%);
|
||||
color: #fff;
|
||||
box-shadow:
|
||||
0 0 44px rgba(255, 227, 181, 0.66),
|
||||
0 0 88px rgba(169, 134, 255, 0.42),
|
||||
0 24px 80px rgba(16, 6, 27, 0.36);
|
||||
animation: pulse 3.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.network-scene__eyebrow {
|
||||
margin: 0 0 0.75rem;
|
||||
font-size: 0.76rem;
|
||||
letter-spacing: 0.3em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 800;
|
||||
color: #d1b6ff;
|
||||
}
|
||||
|
||||
.network-scene__title {
|
||||
margin: 0;
|
||||
font-family: 'Cormorant Garamond', serif;
|
||||
font-size: clamp(2.8rem, 7vw, 5rem);
|
||||
line-height: 0.96;
|
||||
}
|
||||
|
||||
.network-scene__text {
|
||||
max-width: 38rem;
|
||||
margin: 1rem auto 0;
|
||||
color: rgba(247, 239, 255, 0.88);
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.network-scene__detail {
|
||||
max-width: 35rem;
|
||||
margin: 1rem auto 0;
|
||||
color: rgba(224, 206, 255, 0.76);
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.network-scene__actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.85rem;
|
||||
justify-content: center;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.network-scene__ghost {
|
||||
min-height: 2.85rem;
|
||||
padding: 0 1.2rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(239, 225, 255, 0.2);
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: #fff7ff;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
|
||||
}
|
||||
|
||||
.network-scene__ghost:hover {
|
||||
transform: translateY(-1px);
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border-color: rgba(255, 232, 201, 0.34);
|
||||
}
|
||||
|
||||
@keyframes drift {
|
||||
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
|
||||
50% { transform: translate3d(0.9rem, -1rem, 0) scale(1.06); }
|
||||
}
|
||||
|
||||
@keyframes driftStars {
|
||||
from { transform: translate3d(0, 0, 0); }
|
||||
to { transform: translate3d(-6rem, 4rem, 0); }
|
||||
}
|
||||
|
||||
@keyframes driftStarsNear {
|
||||
from { transform: translate3d(0, 0, 0); }
|
||||
to { transform: translate3d(5rem, 6rem, 0); }
|
||||
}
|
||||
|
||||
@keyframes rotateRing {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.05); }
|
||||
}
|
||||
|
||||
@keyframes comet {
|
||||
0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-22deg); }
|
||||
8% { opacity: 1; }
|
||||
32% { opacity: 1; transform: translate3d(-6rem, 5rem, 0) rotate(-22deg); }
|
||||
100% { opacity: 0; transform: translate3d(-10rem, 8rem, 0) rotate(-22deg); }
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.network-scene__signal {
|
||||
width: 12.5rem;
|
||||
height: 12.5rem;
|
||||
}
|
||||
|
||||
.network-scene__signal-core {
|
||||
width: 6.6rem;
|
||||
height: 6.6rem;
|
||||
}
|
||||
|
||||
.network-scene__text {
|
||||
font-size: 0.98rem;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user