vaxinx-stoplight-code/style.css at main · regislara-byte/vaxinx-stoplight-code · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; font-family: Arial, Helvetica, sans-serif; color: #eaf6ff;
  background: radial-gradient(circle at top left, rgba(0,209,255,.18), transparent 35%),
              radial-gradient(circle at top right, rgba(139,92,246,.16), transparent 35%),
              #05070d;
}
.bg-grid {
  position: fixed; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 34px 34px; mask-image: linear-gradient(to bottom, black, transparent 80%);
}
.hero {
  position: relative; display: flex; justify-content: space-between; gap: 24px; align-items: center;
  padding: 42px 7vw 28px; border-bottom: 1px solid rgba(0,220,255,.18);
}
.eyebrow { color: #00d8ff; text-transform: uppercase; letter-spacing: 2px; font-weight: bold; margin: 0 0 10px; }
h1 { margin: 0; font-size: clamp(34px, 5vw, 64px); }
.tagline { margin: 14px 0 0; opacity: .82; font-size: 18px; }
.guardian {
  width: 190px; text-align: center; padding: 18px; border: 1px solid rgba(0,220,255,.3);
  border-radius: 22px; background: rgba(255,255,255,.06); box-shadow: 0 0 24px rgba(0,220,255,.14);
}
.guardian-orb {
  display: grid; place-items: center; width: 92px; height: 92px; margin: auto; border-radius: 50%;
  font-size: 48px; font-weight: bold; color: #ff68ff; background: radial-gradient(circle, #161b36, #05070d);
  border: 2px solid #00d8ff; box-shadow: 0 0 30px rgba(0,216,255,.45);
}
main { position: relative; max-width: 1280px; margin: 0 auto; padding: 28px; }
.concept-card, .controls, .table-card, .stat-card {
  border: 1px solid rgba(0,220,255,.2); background: rgba(255,255,255,.06);
  border-radius: 20px; box-shadow: 0 0 20px rgba(0,0,0,.25);
}
.concept-card { padding: 22px; margin-bottom: 18px; }
.flow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 18px; margin: 16px 0; }
.flow span { padding: 10px 14px; background: rgba(0,0,0,.28); border-radius: 999px; }
.legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.legend-item { padding: 16px; border-radius: 16px; font-weight: bold; }
.legend-item small { display: block; margin-top: 6px; opacity: .75; }
.green { background: rgba(0,200,120,.18); }
.yellow { background: rgba(255,200,0,.18); }
.red { background: rgba(255,45,85,.18); }
.controls { padding: 18px; margin-bottom: 18px; }
button {
  border: 0; border-radius: 14px; padding: 12px 18px; margin: 6px 6px 6px 0;
  cursor: pointer; background: #00d8ff; color: #001018; font-weight: 800;
}
code { color: #8ff3ff; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat-card { padding: 18px; }
.stat-card h3 { margin: 0; opacity: .72; font-size: 15px; }
.stat-card strong { display: block; margin-top: 10px; font-size: 36px; }
.green-border { border-color: rgba(0,255,140,.45); }
.yellow-border { border-color: rgba(255,210,0,.55); }
.red-border { border-color: rgba(255,45,85,.55); }
.table-card { padding: 18px; }
.table-header { display: flex; justify-content: space-between; gap: 18px; align-items: end; }
.table-header h2, .table-header p { margin: 0; }
.table-header p { opacity: .7; }
.table-wrap { overflow-x: auto; margin-top: 16px; }
table { width: 100%; min-width: 1100px; border-collapse: collapse; }
th, td { padding: 14px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.12); vertical-align: top; }
th { color: #9defff; background: rgba(0,0,0,.25); }
.badge { display: inline-block; padding: 7px 11px; border-radius: 999px; font-weight: 900; color: #021014; }
.badge.GREEN { background: #27e69b; }
.badge.YELLOW { background: #ffd23f; }
.badge.RED { background: #ff335f; color: #fff; }
.hint { display: inline-block; margin: 2px; padding: 4px 7px; border-radius: 999px; background: rgba(0,216,255,.14); border: 1px solid rgba(0,216,255,.24); font-size: 12px; }
.alert-banner {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); padding: 16px 24px;
  border-radius: 16px; background: #ff335f; color: white; font-weight: 900; box-shadow: 0 0 30px rgba(255,45,85,.7);
  animation: pulse .8s infinite alternate;
}
.hidden { display: none; }
.red-alert { animation: redPulse .9s infinite alternate; }
@keyframes pulse { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-50%) scale(1.04); } }
@keyframes redPulse { from { box-shadow: inset 0 0 0 rgba(255,45,85,0); } to { box-shadow: inset 0 0 90px rgba(255,45,85,.33); } }
@media (max-width: 760px) { .hero { flex-direction: column; align-items: flex-start; } .guardian { width: 100%; } .table-header { flex-direction: column; align-items: flex-start; } }
.guardian {
  width: 230px;
  min-height: 260px;
  text-align: center;
  padding: 18px;
  border: 1px solid rgba(0, 220, 255, 0.35);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(0,216,255,0.08), rgba(255,104,255,0.06));
  box-shadow: 0 0 28px rgba(0, 220, 255, 0.18);
}

.doppio-img {
  width: 170px;
  height: 190px;
  object-fit: cover;
  object-position: center top;
  display: block;
  margin: 0 auto 12px;
  border-radius: 18px;
  filter: drop-shadow(0 0 20px rgba(0, 216, 255, 0.65));
  animation: doppioPulse 1.8s infinite alternate;
}