Init
This commit is contained in:
@@ -0,0 +1,322 @@
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
font-family: Inter, "Segoe UI", system-ui, sans-serif;
|
||||
background: #000;
|
||||
color: #f8fafc;
|
||||
--wall-width: 14880px;
|
||||
--wall-height: 3510px;
|
||||
--scale: 1;
|
||||
--offset-x: 0px;
|
||||
--offset-y: 0px;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
.viewport {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.viewport {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: #020407;
|
||||
}
|
||||
|
||||
.wall {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: var(--wall-width);
|
||||
height: var(--wall-height);
|
||||
overflow: hidden;
|
||||
transform-origin: 0 0;
|
||||
transform: translate(var(--offset-x), var(--offset-y)) scale(var(--scale));
|
||||
background:
|
||||
linear-gradient(90deg, rgba(20, 184, 166, 0.14), transparent 34%, rgba(249, 115, 22, 0.12)),
|
||||
#071018;
|
||||
}
|
||||
|
||||
.motionCanvas,
|
||||
.gridLayer {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.gridLayer {
|
||||
background-image:
|
||||
linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
|
||||
background-size: 240px 240px;
|
||||
opacity: 0.72;
|
||||
}
|
||||
|
||||
.wallHeader {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
left: 360px;
|
||||
right: 360px;
|
||||
top: 180px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 120px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
p {
|
||||
margin: 0;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin-bottom: 36px;
|
||||
color: #5eead4;
|
||||
font-size: 58px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 178px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.metrics {
|
||||
display: grid;
|
||||
justify-items: end;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.metrics strong {
|
||||
font-size: 108px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.metrics span {
|
||||
color: #cbd5e1;
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.scene {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
inset: 620px 360px 240px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transform: translateY(50px);
|
||||
transition: opacity 360ms ease, transform 360ms ease;
|
||||
}
|
||||
|
||||
.scene.active {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.headline {
|
||||
max-width: 5900px;
|
||||
}
|
||||
|
||||
.headline h2 {
|
||||
font-size: 156px;
|
||||
line-height: 1.05;
|
||||
}
|
||||
|
||||
.headline p {
|
||||
margin-top: 42px;
|
||||
color: #cbd5e1;
|
||||
font-size: 62px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.kpiGrid {
|
||||
margin-top: 140px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
gap: 72px;
|
||||
}
|
||||
|
||||
.kpi,
|
||||
.sideStats article,
|
||||
.camera {
|
||||
border: 3px solid rgba(255,255,255,0.12);
|
||||
border-radius: 8px;
|
||||
background: rgba(255,255,255,0.055);
|
||||
}
|
||||
|
||||
.kpi {
|
||||
min-height: 500px;
|
||||
padding: 70px;
|
||||
}
|
||||
|
||||
.kpi span,
|
||||
.sideStats span {
|
||||
display: block;
|
||||
color: #aeb7c2;
|
||||
font-size: 58px;
|
||||
}
|
||||
|
||||
.kpi strong,
|
||||
.sideStats strong {
|
||||
display: block;
|
||||
margin-top: 46px;
|
||||
font-size: 130px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.bars {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 960px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(32, 1fr);
|
||||
gap: 24px;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.bar {
|
||||
min-height: 100px;
|
||||
border-radius: 8px 8px 0 0;
|
||||
background: linear-gradient(180deg, #14b8a6, #f97316);
|
||||
transform-origin: bottom;
|
||||
}
|
||||
|
||||
.energyMap {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 780px;
|
||||
width: 8600px;
|
||||
height: 1760px;
|
||||
}
|
||||
|
||||
.flowLine {
|
||||
position: absolute;
|
||||
height: 28px;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(90deg, #14b8a6, #facc15, #f97316);
|
||||
box-shadow: 0 0 80px rgba(20,184,166,0.42);
|
||||
}
|
||||
|
||||
.lineA {
|
||||
left: 1100px;
|
||||
top: 690px;
|
||||
width: 5200px;
|
||||
transform: rotate(7deg);
|
||||
}
|
||||
|
||||
.lineB {
|
||||
left: 2300px;
|
||||
top: 1050px;
|
||||
width: 4200px;
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
|
||||
.flowNode {
|
||||
position: absolute;
|
||||
width: 980px;
|
||||
height: 420px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 5px solid rgba(94,234,212,0.55);
|
||||
border-radius: 8px;
|
||||
background: rgba(8,20,28,0.92);
|
||||
font-size: 76px;
|
||||
font-weight: 760;
|
||||
}
|
||||
|
||||
.nodeA { left: 220px; top: 520px; }
|
||||
.nodeB { left: 3600px; top: 220px; }
|
||||
.nodeC { left: 7020px; top: 900px; }
|
||||
|
||||
.sideStats {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 690px;
|
||||
width: 4700px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 64px;
|
||||
}
|
||||
|
||||
.sideStats article {
|
||||
min-height: 610px;
|
||||
padding: 78px;
|
||||
}
|
||||
|
||||
.cameraGrid {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 760px;
|
||||
width: 9200px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 52px;
|
||||
}
|
||||
|
||||
.camera {
|
||||
height: 700px;
|
||||
padding: 52px;
|
||||
display: grid;
|
||||
align-content: space-between;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(20,184,166,0.22), rgba(249,115,22,0.14)),
|
||||
rgba(255,255,255,0.055);
|
||||
}
|
||||
|
||||
.camera strong {
|
||||
font-size: 72px;
|
||||
}
|
||||
|
||||
.camera span {
|
||||
color: #cbd5e1;
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.alertRail {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 740px;
|
||||
width: 4300px;
|
||||
display: grid;
|
||||
gap: 44px;
|
||||
}
|
||||
|
||||
.alert {
|
||||
padding: 54px 64px;
|
||||
border-left: 18px solid #f97316;
|
||||
border-radius: 8px;
|
||||
background: rgba(255,255,255,0.065);
|
||||
font-size: 60px;
|
||||
}
|
||||
|
||||
.pulse {
|
||||
animation: flash 650ms ease;
|
||||
}
|
||||
|
||||
@keyframes flash {
|
||||
0% { outline: 16px solid rgba(250,204,21,0.78); }
|
||||
100% { outline: 0 solid rgba(250,204,21,0); }
|
||||
}
|
||||
|
||||
.hud {
|
||||
position: fixed;
|
||||
right: 12px;
|
||||
bottom: 12px;
|
||||
z-index: 10;
|
||||
max-width: min(860px, calc(100vw - 24px));
|
||||
padding: 8px 10px;
|
||||
border-radius: 6px;
|
||||
background: rgba(0,0,0,0.68);
|
||||
color: rgba(255,255,255,0.78);
|
||||
font-size: 12px;
|
||||
pointer-events: none;
|
||||
}
|
||||
Reference in New Issue
Block a user