feat: enhance website model radar motion
This commit is contained in:
boos
+94
-11
@@ -364,23 +364,61 @@ a {
|
||||
}
|
||||
|
||||
.hero-console {
|
||||
--scan-y: 12%;
|
||||
--scan-opacity: 0.16;
|
||||
--grid-opacity: 0.16;
|
||||
position: relative;
|
||||
margin-top: 14px;
|
||||
min-height: 500px;
|
||||
min-height: 520px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 32px;
|
||||
background:
|
||||
radial-gradient(circle at 18% 18%, rgba(215, 255, 77, 0.15), transparent 32%),
|
||||
radial-gradient(circle at 86% 82%, rgba(139, 246, 255, 0.13), transparent 34%),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035)),
|
||||
rgba(10, 20, 18, 0.84);
|
||||
padding: 18px;
|
||||
overflow: hidden;
|
||||
transform-style: preserve-3d;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.16),
|
||||
0 34px 90px rgba(0, 0, 0, 0.36);
|
||||
}
|
||||
|
||||
.hero-console::before,
|
||||
.hero-console::after {
|
||||
position: absolute;
|
||||
inset-inline: 14px;
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.hero-console::before {
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
height: 124px;
|
||||
border-radius: 999px;
|
||||
background:
|
||||
linear-gradient(180deg, transparent, rgba(215, 255, 77, 0.18), rgba(139, 246, 255, 0.12), transparent);
|
||||
filter: blur(10px);
|
||||
opacity: var(--scan-opacity);
|
||||
transform: translate3d(0, var(--scan-y), 0);
|
||||
}
|
||||
|
||||
.hero-console::after {
|
||||
z-index: 0;
|
||||
inset-block: 72px 18px;
|
||||
background:
|
||||
linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
|
||||
background-size: 32px 32px;
|
||||
mask-image: linear-gradient(to bottom, transparent, black 12%, black 72%, transparent);
|
||||
opacity: var(--grid-opacity);
|
||||
}
|
||||
|
||||
.console-orbit {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
width: 420px;
|
||||
height: 420px;
|
||||
right: -120px;
|
||||
@@ -428,7 +466,7 @@ a {
|
||||
|
||||
.console-bar {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
z-index: 3;
|
||||
min-height: 54px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -457,21 +495,23 @@ a {
|
||||
|
||||
.route-list {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
z-index: 3;
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.route-row {
|
||||
position: relative;
|
||||
min-height: 58px;
|
||||
min-height: 50px;
|
||||
display: grid;
|
||||
grid-template-columns: 78px 1fr auto;
|
||||
grid-template-columns: 76px minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
gap: 12px;
|
||||
border-radius: 18px;
|
||||
padding: 0 14px 0 32px;
|
||||
overflow: hidden;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
.route-row::before {
|
||||
@@ -487,6 +527,19 @@ a {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.route-row strong {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
font-family: var(--font-geist-mono), monospace;
|
||||
font-size: 13px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.route-row em {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.route-row[data-tone="hot"] span {
|
||||
color: #ffec99;
|
||||
}
|
||||
@@ -500,6 +553,11 @@ a {
|
||||
color: var(--acid);
|
||||
}
|
||||
|
||||
.route-row[data-tone="lime"]::before {
|
||||
background: var(--acid);
|
||||
box-shadow: 0 0 20px rgba(215, 255, 77, 0.5);
|
||||
}
|
||||
|
||||
.route-row[data-tone="blue"] span {
|
||||
color: var(--blue);
|
||||
}
|
||||
@@ -509,6 +567,24 @@ a {
|
||||
box-shadow: 0 0 20px rgba(139, 246, 255, 0.5);
|
||||
}
|
||||
|
||||
.route-row[data-tone="cyan"] span {
|
||||
color: #71ffd2;
|
||||
}
|
||||
|
||||
.route-row[data-tone="cyan"]::before {
|
||||
background: #71ffd2;
|
||||
box-shadow: 0 0 20px rgba(113, 255, 210, 0.48);
|
||||
}
|
||||
|
||||
.route-row[data-tone="white"] span {
|
||||
color: var(--ice);
|
||||
}
|
||||
|
||||
.route-row[data-tone="white"]::before {
|
||||
background: var(--ice);
|
||||
box-shadow: 0 0 20px rgba(233, 247, 255, 0.42);
|
||||
}
|
||||
|
||||
.route-row strong,
|
||||
.console-metrics strong,
|
||||
.mini-grid strong,
|
||||
@@ -520,7 +596,7 @@ a {
|
||||
|
||||
.console-metrics {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
z-index: 3;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
@@ -528,7 +604,7 @@ a {
|
||||
}
|
||||
|
||||
.console-metrics > div {
|
||||
min-height: 70px;
|
||||
min-height: 66px;
|
||||
display: grid;
|
||||
align-content: center;
|
||||
gap: 7px;
|
||||
@@ -540,11 +616,12 @@ a {
|
||||
color: var(--acid);
|
||||
font-family: var(--font-geist-mono), monospace;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mini-grid {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
z-index: 3;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
@@ -552,7 +629,7 @@ a {
|
||||
}
|
||||
|
||||
.mini-grid > div {
|
||||
min-height: 88px;
|
||||
min-height: 80px;
|
||||
display: grid;
|
||||
align-content: end;
|
||||
gap: 8px;
|
||||
@@ -562,6 +639,7 @@ a {
|
||||
|
||||
.flow-glyph {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
right: -22px;
|
||||
bottom: -8px;
|
||||
width: 92%;
|
||||
@@ -1166,6 +1244,11 @@ a {
|
||||
gap: 6px;
|
||||
min-height: 72px;
|
||||
padding-block: 12px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
.route-row strong {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.route-row em {
|
||||
|
||||
Reference in New Issue
Block a user