reaper-arcade-hub 2.7.0 → 2.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/css/styles.css +717 -187
- package/index.html +227 -57
- package/js/app.js +274 -133
- package/js/security-shield.js +35 -2
- package/main/css/styles.css +717 -187
- package/main/index.html +227 -57
- package/main/js/app.js +274 -133
- package/main/js/security-shield.js +35 -2
- package/package.json +1 -1
- package/verify/css/styles.css +717 -187
- package/verify/js/security-shield.js +35 -2
package/css/styles.css
CHANGED
|
@@ -47,123 +47,232 @@ body {
|
|
|
47
47
|
}
|
|
48
48
|
|
|
49
49
|
/* 10-Second Splash Loader with Dynamic Space Background */
|
|
50
|
-
|
|
50
|
+
/* ==========================================
|
|
51
|
+
ULTRA-MODERN CYBER REACTOR LOADER
|
|
52
|
+
========================================== */
|
|
53
|
+
.cyber-splash-screen {
|
|
51
54
|
position: fixed;
|
|
52
|
-
|
|
53
|
-
left: 0;
|
|
55
|
+
inset: 0;
|
|
54
56
|
width: 100vw;
|
|
55
57
|
height: 100vh;
|
|
56
|
-
background: radial-gradient(circle at 50%
|
|
57
|
-
z-index:
|
|
58
|
+
background: radial-gradient(circle at 50% 45%, #05142f 0%, #020713 55%, #000206 100%);
|
|
59
|
+
z-index: 999999;
|
|
58
60
|
display: flex;
|
|
59
61
|
align-items: center;
|
|
60
62
|
justify-content: center;
|
|
61
|
-
|
|
63
|
+
padding: 1.5rem;
|
|
62
64
|
overflow: hidden;
|
|
63
65
|
}
|
|
64
66
|
|
|
65
|
-
|
|
67
|
+
.cyber-splash-screen::before {
|
|
66
68
|
content: '';
|
|
67
69
|
position: absolute;
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
radial-gradient(circle at 50% 80%, rgba(80, 0, 255, 0.12) 0%, transparent 50%);
|
|
75
|
-
animation: splashAuraShift 12s ease-in-out infinite alternate;
|
|
70
|
+
width: 140vw;
|
|
71
|
+
height: 140vh;
|
|
72
|
+
background: radial-gradient(circle at 30% 30%, rgba(0, 240, 255, 0.12) 0%, transparent 45%),
|
|
73
|
+
radial-gradient(circle at 70% 70%, rgba(138, 43, 226, 0.14) 0%, transparent 50%),
|
|
74
|
+
radial-gradient(circle at 50% 50%, rgba(0, 255, 136, 0.08) 0%, transparent 60%);
|
|
75
|
+
animation: cyberAuraPulse 8s ease-in-out infinite alternate;
|
|
76
76
|
pointer-events: none;
|
|
77
77
|
}
|
|
78
78
|
|
|
79
|
-
@keyframes
|
|
80
|
-
0% { transform:
|
|
81
|
-
|
|
82
|
-
100% { transform: rotate(-8deg) scale(1.02); }
|
|
79
|
+
@keyframes cyberAuraPulse {
|
|
80
|
+
0% { transform: scale(1) rotate(0deg); opacity: 0.7; }
|
|
81
|
+
100% { transform: scale(1.12) rotate(10deg); opacity: 1; }
|
|
83
82
|
}
|
|
84
83
|
|
|
85
|
-
.
|
|
84
|
+
.cyber-reactor-card {
|
|
86
85
|
position: relative;
|
|
87
86
|
z-index: 10;
|
|
88
87
|
text-align: center;
|
|
89
|
-
max-width:
|
|
90
|
-
width:
|
|
91
|
-
padding: 2.
|
|
92
|
-
background: rgba(4,
|
|
93
|
-
border: 1.5px solid rgba(0,
|
|
94
|
-
border-radius:
|
|
95
|
-
box-shadow: 0
|
|
96
|
-
backdrop-filter: blur(
|
|
97
|
-
-webkit-backdrop-filter: blur(
|
|
88
|
+
max-width: 480px;
|
|
89
|
+
width: 92%;
|
|
90
|
+
padding: 2.6rem 2.2rem;
|
|
91
|
+
background: rgba(4, 10, 24, 0.85);
|
|
92
|
+
border: 1.5px solid rgba(0, 240, 255, 0.35);
|
|
93
|
+
border-radius: 20px;
|
|
94
|
+
box-shadow: 0 25px 70px rgba(0, 0, 0, 0.85), 0 0 45px rgba(0, 240, 255, 0.25), inset 0 0 25px rgba(0, 240, 255, 0.05);
|
|
95
|
+
backdrop-filter: blur(24px);
|
|
96
|
+
-webkit-backdrop-filter: blur(24px);
|
|
97
|
+
display: flex;
|
|
98
|
+
flex-direction: column;
|
|
99
|
+
align-items: center;
|
|
98
100
|
}
|
|
99
101
|
|
|
100
|
-
.
|
|
102
|
+
.reactor-core-box {
|
|
103
|
+
position: relative;
|
|
104
|
+
width: 90px;
|
|
105
|
+
height: 90px;
|
|
106
|
+
display: flex;
|
|
107
|
+
align-items: center;
|
|
108
|
+
justify-content: center;
|
|
109
|
+
margin-bottom: 1.25rem;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.reactor-ring-outer {
|
|
113
|
+
position: absolute;
|
|
114
|
+
inset: 0;
|
|
115
|
+
border-radius: 50%;
|
|
116
|
+
border: 2px dashed rgba(0, 240, 255, 0.6);
|
|
117
|
+
box-shadow: 0 0 25px rgba(0, 240, 255, 0.4);
|
|
118
|
+
animation: spinOuter 6s linear infinite;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.reactor-ring-inner {
|
|
122
|
+
position: absolute;
|
|
123
|
+
inset: 10px;
|
|
124
|
+
border-radius: 50%;
|
|
125
|
+
border: 2px solid transparent;
|
|
126
|
+
border-top-color: #ff007f;
|
|
127
|
+
border-bottom-color: #8a2be2;
|
|
128
|
+
box-shadow: 0 0 15px rgba(255, 0, 127, 0.5);
|
|
129
|
+
animation: spinInner 3.5s linear infinite reverse;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.reactor-pulse-orb {
|
|
133
|
+
width: 48px;
|
|
134
|
+
height: 48px;
|
|
135
|
+
border-radius: 50%;
|
|
136
|
+
background: linear-gradient(135deg, #00f0ff, #8a2be2);
|
|
137
|
+
display: flex;
|
|
138
|
+
align-items: center;
|
|
139
|
+
justify-content: center;
|
|
140
|
+
box-shadow: 0 0 25px rgba(0, 240, 255, 0.8);
|
|
141
|
+
animation: pulseCoreOrb 2s ease-in-out infinite alternate;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.reactor-symbol {
|
|
145
|
+
font-size: 1.5rem;
|
|
146
|
+
color: #fff;
|
|
147
|
+
filter: drop-shadow(0 0 6px #fff);
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
@keyframes spinOuter {
|
|
151
|
+
from { transform: rotate(0deg); }
|
|
152
|
+
to { transform: rotate(360deg); }
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
@keyframes spinInner {
|
|
156
|
+
from { transform: rotate(0deg); }
|
|
157
|
+
to { transform: rotate(360deg); }
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
@keyframes pulseCoreOrb {
|
|
161
|
+
from { transform: scale(0.92); box-shadow: 0 0 15px rgba(0, 240, 255, 0.6); }
|
|
162
|
+
to { transform: scale(1.08); box-shadow: 0 0 35px rgba(0, 255, 136, 0.9); }
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.loader-brand-title {
|
|
101
166
|
font-family: var(--font-logo);
|
|
102
|
-
font-size: 3.
|
|
167
|
+
font-size: 3.4rem;
|
|
103
168
|
font-weight: 900;
|
|
104
|
-
color: #
|
|
105
|
-
text-shadow: 0 0 30px var(--blue-glow);
|
|
169
|
+
color: #ffffff;
|
|
106
170
|
letter-spacing: 0.15em;
|
|
107
171
|
margin-bottom: 0.2rem;
|
|
108
172
|
line-height: 1;
|
|
173
|
+
text-shadow: 0 0 30px rgba(0, 240, 255, 0.8);
|
|
109
174
|
}
|
|
110
175
|
|
|
111
|
-
.
|
|
176
|
+
.loader-badge-tag {
|
|
177
|
+
display: inline-flex;
|
|
178
|
+
align-items: center;
|
|
179
|
+
gap: 0.45rem;
|
|
112
180
|
font-family: var(--font-heading);
|
|
113
|
-
|
|
114
|
-
font-size: 0.76rem;
|
|
181
|
+
font-size: 0.72rem;
|
|
115
182
|
font-weight: 800;
|
|
116
|
-
|
|
183
|
+
color: #00f0ff;
|
|
184
|
+
letter-spacing: 0.14em;
|
|
117
185
|
text-transform: uppercase;
|
|
118
|
-
|
|
186
|
+
background: rgba(0, 240, 255, 0.08);
|
|
187
|
+
border: 1px solid rgba(0, 240, 255, 0.25);
|
|
188
|
+
padding: 0.25rem 0.85rem;
|
|
189
|
+
border-radius: 20px;
|
|
190
|
+
margin-bottom: 1.15rem;
|
|
119
191
|
}
|
|
120
192
|
|
|
121
|
-
.
|
|
122
|
-
|
|
193
|
+
.badge-dot-live {
|
|
194
|
+
width: 6px;
|
|
195
|
+
height: 6px;
|
|
196
|
+
border-radius: 50%;
|
|
197
|
+
background: #00ff88;
|
|
198
|
+
box-shadow: 0 0 8px #00ff88;
|
|
199
|
+
animation: pulseDot 1s infinite alternate;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
.loader-terminal-strip {
|
|
203
|
+
width: 100%;
|
|
204
|
+
background: rgba(2, 6, 16, 0.92);
|
|
205
|
+
border: 1px solid rgba(0, 136, 255, 0.25);
|
|
206
|
+
border-radius: 8px;
|
|
207
|
+
padding: 0.45rem 0.85rem;
|
|
208
|
+
font-family: var(--font-mono);
|
|
209
|
+
font-size: 0.75rem;
|
|
210
|
+
color: #79a6d2;
|
|
211
|
+
display: flex;
|
|
212
|
+
align-items: center;
|
|
213
|
+
gap: 0.45rem;
|
|
214
|
+
margin-bottom: 0.75rem;
|
|
215
|
+
white-space: nowrap;
|
|
216
|
+
overflow: hidden;
|
|
217
|
+
text-overflow: ellipsis;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
.terminal-arrow {
|
|
221
|
+
color: #00ff88;
|
|
222
|
+
font-weight: 900;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
.loader-quote-box {
|
|
226
|
+
min-height: 40px;
|
|
123
227
|
display: flex;
|
|
124
228
|
align-items: center;
|
|
125
229
|
justify-content: center;
|
|
126
|
-
margin-bottom:
|
|
127
|
-
|
|
128
|
-
background: rgba(2, 6, 15, 0.6);
|
|
129
|
-
border: 1px solid rgba(0, 136, 255, 0.25);
|
|
130
|
-
border-radius: 8px;
|
|
230
|
+
margin-bottom: 1rem;
|
|
231
|
+
width: 100%;
|
|
131
232
|
}
|
|
132
233
|
|
|
133
|
-
.
|
|
134
|
-
font-
|
|
135
|
-
|
|
234
|
+
.loader-quote-text {
|
|
235
|
+
font-size: 0.8rem;
|
|
236
|
+
color: #c5dcf7;
|
|
136
237
|
font-style: italic;
|
|
137
|
-
font-weight:
|
|
138
|
-
color: #c5e3ff;
|
|
139
|
-
transition: opacity 0.3s ease, transform 0.3s ease;
|
|
238
|
+
font-weight: 500;
|
|
140
239
|
line-height: 1.4;
|
|
240
|
+
transition: opacity 0.25s ease, transform 0.25s ease;
|
|
141
241
|
}
|
|
142
242
|
|
|
143
|
-
.
|
|
243
|
+
.loader-progress-track {
|
|
144
244
|
width: 100%;
|
|
145
|
-
height:
|
|
146
|
-
background: #
|
|
245
|
+
height: 8px;
|
|
246
|
+
background: #020712;
|
|
247
|
+
border: 1px solid rgba(0, 240, 255, 0.35);
|
|
147
248
|
border-radius: 6px;
|
|
148
249
|
overflow: hidden;
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
box-shadow: inset 0 1px 3px rgba(0,0,0,0.8);
|
|
250
|
+
margin-bottom: 0.75rem;
|
|
251
|
+
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.9);
|
|
152
252
|
}
|
|
153
253
|
|
|
154
|
-
.
|
|
254
|
+
.loader-progress-fill {
|
|
155
255
|
width: 0%;
|
|
156
256
|
height: 100%;
|
|
157
|
-
background: linear-gradient(90deg, #
|
|
158
|
-
|
|
159
|
-
|
|
257
|
+
background: linear-gradient(90deg, #0088ff, #00f0ff, #00ff88);
|
|
258
|
+
border-radius: 6px;
|
|
259
|
+
box-shadow: 0 0 16px #00f0ff;
|
|
260
|
+
transition: width 0.08s linear;
|
|
160
261
|
}
|
|
161
262
|
|
|
162
|
-
.
|
|
263
|
+
.loader-bottom-meta {
|
|
264
|
+
width: 100%;
|
|
265
|
+
display: flex;
|
|
266
|
+
justify-content: space-between;
|
|
267
|
+
align-items: center;
|
|
163
268
|
font-family: var(--font-mono);
|
|
164
|
-
font-size: 0.
|
|
165
|
-
color:
|
|
166
|
-
|
|
269
|
+
font-size: 0.72rem;
|
|
270
|
+
color: #789bbd;
|
|
271
|
+
font-weight: 700;
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
.loader-latency-tag {
|
|
275
|
+
color: #00ff88;
|
|
167
276
|
}
|
|
168
277
|
|
|
169
278
|
/* App Header */
|
|
@@ -171,19 +280,21 @@ body {
|
|
|
171
280
|
position: sticky;
|
|
172
281
|
top: 0;
|
|
173
282
|
z-index: 100;
|
|
174
|
-
background: rgba(
|
|
175
|
-
border-bottom:
|
|
176
|
-
backdrop-filter: blur(
|
|
177
|
-
-webkit-backdrop-filter: blur(
|
|
283
|
+
background: rgba(3, 8, 20, 0.85);
|
|
284
|
+
border-bottom: 1.5px solid rgba(0, 210, 255, 0.18);
|
|
285
|
+
backdrop-filter: blur(24px);
|
|
286
|
+
-webkit-backdrop-filter: blur(24px);
|
|
287
|
+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
|
|
178
288
|
}
|
|
179
289
|
|
|
180
290
|
.nav-container {
|
|
181
291
|
max-width: 1700px;
|
|
182
292
|
margin: 0 auto;
|
|
183
|
-
padding: 0.
|
|
293
|
+
padding: 0.7rem 1.5rem;
|
|
184
294
|
display: flex;
|
|
185
295
|
align-items: center;
|
|
186
296
|
justify-content: space-between;
|
|
297
|
+
gap: 1rem;
|
|
187
298
|
}
|
|
188
299
|
|
|
189
300
|
.brand-logo {
|
|
@@ -192,49 +303,62 @@ body {
|
|
|
192
303
|
gap: 0.5rem;
|
|
193
304
|
cursor: pointer;
|
|
194
305
|
user-select: none;
|
|
306
|
+
transition: transform 0.2s ease;
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
.brand-logo:hover {
|
|
310
|
+
transform: scale(1.03);
|
|
195
311
|
}
|
|
196
312
|
|
|
197
313
|
.brand-logo span {
|
|
198
314
|
font-family: var(--font-logo);
|
|
199
|
-
font-size:
|
|
315
|
+
font-size: 2rem;
|
|
200
316
|
font-weight: 900;
|
|
201
317
|
color: #fff;
|
|
202
|
-
letter-spacing: 0.
|
|
203
|
-
text-shadow: 0 0
|
|
318
|
+
letter-spacing: 0.12em;
|
|
319
|
+
text-shadow: 0 0 25px rgba(0, 210, 255, 0.8), 0 0 50px rgba(0, 136, 255, 0.4);
|
|
204
320
|
}
|
|
205
321
|
|
|
206
|
-
/* Nav Tabs Pill */
|
|
322
|
+
/* Nav Tabs Pill - Futuristic Glass Dock */
|
|
207
323
|
.nav-tabs-pill {
|
|
208
324
|
display: flex;
|
|
209
|
-
background:
|
|
210
|
-
border:
|
|
325
|
+
background: rgba(5, 12, 28, 0.75);
|
|
326
|
+
border: 1.5px solid rgba(0, 210, 255, 0.25);
|
|
211
327
|
border-radius: 30px;
|
|
212
|
-
padding: 0.
|
|
213
|
-
gap: 0.
|
|
328
|
+
padding: 0.28rem 0.35rem;
|
|
329
|
+
gap: 0.25rem;
|
|
330
|
+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(0, 210, 255, 0.05);
|
|
331
|
+
backdrop-filter: blur(16px);
|
|
214
332
|
}
|
|
215
333
|
|
|
216
334
|
.nav-tab-btn {
|
|
217
335
|
background: transparent;
|
|
218
336
|
border: none;
|
|
219
|
-
color: #
|
|
220
|
-
padding: 0.45rem 1.
|
|
337
|
+
color: #a4c4e8;
|
|
338
|
+
padding: 0.45rem 1.2rem;
|
|
221
339
|
font-size: 0.84rem;
|
|
222
|
-
font-weight:
|
|
340
|
+
font-weight: 700;
|
|
223
341
|
font-family: var(--font-heading);
|
|
224
342
|
border-radius: 20px;
|
|
225
343
|
cursor: pointer;
|
|
226
|
-
transition: all 0.
|
|
344
|
+
transition: all 0.22s cubic-bezier(0.2, 0, 0.2, 1);
|
|
345
|
+
display: inline-flex;
|
|
346
|
+
align-items: center;
|
|
347
|
+
gap: 0.35rem;
|
|
227
348
|
}
|
|
228
349
|
|
|
229
350
|
.nav-tab-btn:hover {
|
|
230
|
-
color: #
|
|
231
|
-
background: rgba(0,
|
|
351
|
+
color: #ffffff;
|
|
352
|
+
background: rgba(0, 210, 255, 0.12);
|
|
353
|
+
transform: translateY(-1px);
|
|
232
354
|
}
|
|
233
355
|
|
|
234
356
|
.nav-tab-btn.active {
|
|
235
|
-
background: linear-gradient(135deg, #
|
|
236
|
-
color: #
|
|
237
|
-
box-shadow: 0 0
|
|
357
|
+
background: linear-gradient(135deg, #00d2ff 0%, #0066ff 100%);
|
|
358
|
+
color: #ffffff;
|
|
359
|
+
box-shadow: 0 0 20px rgba(0, 210, 255, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4);
|
|
360
|
+
font-weight: 800;
|
|
361
|
+
transform: translateY(-1px);
|
|
238
362
|
}
|
|
239
363
|
|
|
240
364
|
.header-right {
|
|
@@ -326,65 +450,362 @@ body {
|
|
|
326
450
|
max-width: calc(100% - 370px);
|
|
327
451
|
}
|
|
328
452
|
|
|
329
|
-
/*
|
|
330
|
-
|
|
331
|
-
|
|
453
|
+
/* ==========================================
|
|
454
|
+
CYBER HOME DASHBOARD & PORTAL
|
|
455
|
+
========================================== */
|
|
456
|
+
.cyber-home-dashboard {
|
|
457
|
+
max-width: 1300px;
|
|
458
|
+
margin: 0 auto;
|
|
459
|
+
padding: 1.5rem 0.5rem 3rem;
|
|
332
460
|
display: flex;
|
|
333
461
|
flex-direction: column;
|
|
334
|
-
|
|
462
|
+
gap: 2rem;
|
|
463
|
+
}
|
|
464
|
+
|
|
465
|
+
/* Telemetry Strip */
|
|
466
|
+
.home-telemetry-bar {
|
|
467
|
+
display: flex;
|
|
335
468
|
justify-content: center;
|
|
469
|
+
gap: 1rem;
|
|
470
|
+
flex-wrap: wrap;
|
|
471
|
+
}
|
|
472
|
+
|
|
473
|
+
.telemetry-pill {
|
|
474
|
+
display: inline-flex;
|
|
475
|
+
align-items: center;
|
|
476
|
+
gap: 0.45rem;
|
|
477
|
+
background: rgba(5, 14, 32, 0.7);
|
|
478
|
+
border: 1px solid rgba(0, 210, 255, 0.22);
|
|
479
|
+
border-radius: 20px;
|
|
480
|
+
padding: 0.3rem 0.85rem;
|
|
481
|
+
font-family: var(--font-mono);
|
|
482
|
+
font-size: 0.73rem;
|
|
483
|
+
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
|
|
484
|
+
backdrop-filter: blur(10px);
|
|
485
|
+
}
|
|
486
|
+
|
|
487
|
+
.telemetry-dot {
|
|
488
|
+
width: 7px;
|
|
489
|
+
height: 7px;
|
|
490
|
+
border-radius: 50%;
|
|
491
|
+
animation: pulseDot 1.5s infinite alternate;
|
|
492
|
+
}
|
|
493
|
+
|
|
494
|
+
.dot-green { background: #00ffaa; box-shadow: 0 0 8px #00ffaa; }
|
|
495
|
+
.dot-cyan { background: #00d2ff; box-shadow: 0 0 8px #00d2ff; }
|
|
496
|
+
.dot-purple { background: #a855f7; box-shadow: 0 0 8px #a855f7; }
|
|
497
|
+
|
|
498
|
+
.telemetry-label {
|
|
499
|
+
color: #79a6d2;
|
|
500
|
+
font-weight: 600;
|
|
501
|
+
}
|
|
502
|
+
|
|
503
|
+
.telemetry-val {
|
|
504
|
+
color: #ffffff;
|
|
505
|
+
font-weight: 800;
|
|
506
|
+
letter-spacing: 0.05em;
|
|
507
|
+
}
|
|
508
|
+
|
|
509
|
+
/* Hero Center */
|
|
510
|
+
.home-hero-center {
|
|
336
511
|
text-align: center;
|
|
337
|
-
padding: 2rem 1rem;
|
|
338
512
|
}
|
|
339
513
|
|
|
340
|
-
.
|
|
514
|
+
.home-hero-title {
|
|
341
515
|
font-family: var(--font-logo);
|
|
342
516
|
font-size: 5.5rem;
|
|
343
517
|
font-weight: 900;
|
|
344
|
-
color: #ffffff;
|
|
345
518
|
letter-spacing: 0.12em;
|
|
346
|
-
text-shadow: 0 0 45px var(--blue-glow);
|
|
347
|
-
margin-bottom: 0.5rem;
|
|
348
519
|
line-height: 1;
|
|
520
|
+
margin-bottom: 0.6rem;
|
|
521
|
+
background: linear-gradient(90deg, #ffffff 0%, #00d2ff 40%, #00ffaa 70%, #ffffff 100%);
|
|
522
|
+
background-size: 300% 300%;
|
|
523
|
+
-webkit-background-clip: text;
|
|
524
|
+
-webkit-text-fill-color: transparent;
|
|
525
|
+
animation: heroShimmer 6s ease-in-out infinite;
|
|
526
|
+
filter: drop-shadow(0 0 35px rgba(0, 210, 255, 0.6));
|
|
349
527
|
}
|
|
350
528
|
|
|
351
|
-
|
|
352
|
-
|
|
529
|
+
@keyframes heroShimmer {
|
|
530
|
+
0% { background-position: 0% 50%; }
|
|
531
|
+
50% { background-position: 100% 50%; }
|
|
532
|
+
100% { background-position: 0% 50%; }
|
|
533
|
+
}
|
|
534
|
+
|
|
535
|
+
.home-hero-desc {
|
|
353
536
|
font-family: var(--font-heading);
|
|
354
|
-
font-size:
|
|
537
|
+
font-size: 0.95rem;
|
|
538
|
+
color: #9ec2e8;
|
|
539
|
+
max-width: 680px;
|
|
540
|
+
margin: 0 auto;
|
|
541
|
+
line-height: 1.6;
|
|
355
542
|
font-weight: 600;
|
|
356
|
-
letter-spacing: 0.
|
|
357
|
-
margin-bottom: 2.25rem;
|
|
543
|
+
letter-spacing: 0.02em;
|
|
358
544
|
}
|
|
359
545
|
|
|
360
|
-
|
|
361
|
-
|
|
546
|
+
/* High-Tech Glowing Search Pod */
|
|
547
|
+
.home-search-pod {
|
|
548
|
+
max-width: 760px;
|
|
362
549
|
width: 100%;
|
|
363
|
-
|
|
364
|
-
border: 1.5px solid var(--blue-border);
|
|
365
|
-
border-radius: 40px;
|
|
550
|
+
margin: 0 auto;
|
|
366
551
|
display: flex;
|
|
367
|
-
|
|
368
|
-
padding: 0.75rem 1.5rem;
|
|
552
|
+
flex-direction: column;
|
|
369
553
|
gap: 0.85rem;
|
|
370
|
-
|
|
371
|
-
|
|
554
|
+
}
|
|
555
|
+
|
|
556
|
+
.search-pod-inner {
|
|
557
|
+
background: rgba(4, 12, 28, 0.85);
|
|
558
|
+
border: 1.5px solid rgba(0, 210, 255, 0.35);
|
|
559
|
+
border-radius: 50px;
|
|
560
|
+
padding: 0.5rem 0.65rem 0.5rem 1.4rem;
|
|
561
|
+
display: flex;
|
|
562
|
+
align-items: center;
|
|
563
|
+
gap: 0.75rem;
|
|
564
|
+
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7), 0 0 25px rgba(0, 210, 255, 0.2);
|
|
372
565
|
transition: all 0.25s ease;
|
|
566
|
+
backdrop-filter: blur(20px);
|
|
373
567
|
}
|
|
374
568
|
|
|
375
|
-
.
|
|
376
|
-
border-color:
|
|
377
|
-
box-shadow: 0
|
|
569
|
+
.search-pod-inner:focus-within {
|
|
570
|
+
border-color: #00d2ff;
|
|
571
|
+
box-shadow: 0 16px 50px rgba(0, 0, 0, 0.85), 0 0 35px rgba(0, 210, 255, 0.5);
|
|
572
|
+
background: rgba(5, 16, 38, 0.95);
|
|
573
|
+
transform: translateY(-2px);
|
|
574
|
+
}
|
|
575
|
+
|
|
576
|
+
.search-pod-icon {
|
|
577
|
+
font-size: 1.15rem;
|
|
578
|
+
color: #00d2ff;
|
|
378
579
|
}
|
|
379
580
|
|
|
380
|
-
.
|
|
581
|
+
.home-search-field {
|
|
582
|
+
flex: 1;
|
|
381
583
|
background: transparent;
|
|
382
584
|
border: none;
|
|
383
585
|
outline: none;
|
|
586
|
+
color: #ffffff;
|
|
587
|
+
font-size: 1rem;
|
|
588
|
+
font-family: var(--font-main);
|
|
589
|
+
font-weight: 500;
|
|
590
|
+
}
|
|
591
|
+
|
|
592
|
+
.home-search-field::placeholder {
|
|
593
|
+
color: #5d84ab;
|
|
594
|
+
}
|
|
595
|
+
|
|
596
|
+
.search-pod-btn {
|
|
597
|
+
border-radius: 30px;
|
|
598
|
+
padding: 0.65rem 1.4rem;
|
|
599
|
+
font-size: 0.82rem;
|
|
600
|
+
font-weight: 800;
|
|
601
|
+
letter-spacing: 0.08em;
|
|
602
|
+
}
|
|
603
|
+
|
|
604
|
+
/* Quick Trend Chips */
|
|
605
|
+
.home-quick-tags {
|
|
606
|
+
display: flex;
|
|
607
|
+
align-items: center;
|
|
608
|
+
justify-content: center;
|
|
609
|
+
gap: 0.5rem;
|
|
610
|
+
flex-wrap: wrap;
|
|
611
|
+
}
|
|
612
|
+
|
|
613
|
+
.quick-tag-chip {
|
|
614
|
+
background: rgba(5, 14, 32, 0.7);
|
|
615
|
+
border: 1px solid rgba(0, 210, 255, 0.22);
|
|
616
|
+
color: #a4c4e8;
|
|
617
|
+
padding: 0.3rem 0.75rem;
|
|
618
|
+
border-radius: 20px;
|
|
619
|
+
font-size: 0.75rem;
|
|
620
|
+
font-weight: 700;
|
|
621
|
+
font-family: var(--font-heading);
|
|
622
|
+
cursor: pointer;
|
|
623
|
+
transition: all 0.2s ease;
|
|
624
|
+
}
|
|
625
|
+
|
|
626
|
+
.quick-tag-chip:hover {
|
|
627
|
+
background: rgba(0, 210, 255, 0.18);
|
|
628
|
+
border-color: #00d2ff;
|
|
629
|
+
color: #ffffff;
|
|
630
|
+
transform: translateY(-2px);
|
|
631
|
+
box-shadow: 0 0 12px rgba(0, 210, 255, 0.4);
|
|
632
|
+
}
|
|
633
|
+
|
|
634
|
+
/* Spotlight Quick Launch Section */
|
|
635
|
+
.home-spotlight-section {
|
|
636
|
+
display: flex;
|
|
637
|
+
flex-direction: column;
|
|
638
|
+
gap: 1rem;
|
|
639
|
+
}
|
|
640
|
+
|
|
641
|
+
.spotlight-section-title {
|
|
642
|
+
display: flex;
|
|
643
|
+
justify-content: space-between;
|
|
644
|
+
align-items: center;
|
|
645
|
+
font-family: var(--font-heading);
|
|
646
|
+
font-weight: 800;
|
|
647
|
+
font-size: 0.85rem;
|
|
648
|
+
color: #00d2ff;
|
|
649
|
+
letter-spacing: 0.08em;
|
|
650
|
+
}
|
|
651
|
+
|
|
652
|
+
.home-spotlight-grid {
|
|
653
|
+
display: grid;
|
|
654
|
+
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
655
|
+
gap: 1.25rem;
|
|
656
|
+
}
|
|
657
|
+
|
|
658
|
+
.spotlight-card {
|
|
659
|
+
background: linear-gradient(150deg, rgba(8, 18, 38, 0.95) 0%, rgba(3, 8, 20, 0.98) 100%);
|
|
660
|
+
border: 1.5px solid rgba(0, 210, 255, 0.2);
|
|
661
|
+
border-radius: 14px;
|
|
662
|
+
overflow: hidden;
|
|
663
|
+
cursor: pointer;
|
|
664
|
+
position: relative;
|
|
665
|
+
transition: all 0.25s cubic-bezier(0.2, 0, 0.2, 1);
|
|
666
|
+
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
|
|
667
|
+
backdrop-filter: blur(12px);
|
|
668
|
+
}
|
|
669
|
+
|
|
670
|
+
.spotlight-card:hover {
|
|
671
|
+
transform: translateY(-6px);
|
|
672
|
+
border-color: #00d2ff;
|
|
673
|
+
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.85), 0 0 25px rgba(0, 210, 255, 0.5);
|
|
674
|
+
}
|
|
675
|
+
|
|
676
|
+
.spotlight-card-badge {
|
|
677
|
+
position: absolute;
|
|
678
|
+
top: 8px;
|
|
679
|
+
left: 8px;
|
|
680
|
+
z-index: 5;
|
|
681
|
+
background: #ff0055;
|
|
384
682
|
color: #fff;
|
|
385
|
-
font-size:
|
|
683
|
+
font-size: 0.6rem;
|
|
684
|
+
font-weight: 900;
|
|
685
|
+
font-family: var(--font-heading);
|
|
686
|
+
padding: 0.2rem 0.5rem;
|
|
687
|
+
border-radius: 4px;
|
|
688
|
+
box-shadow: 0 0 10px rgba(255, 0, 85, 0.8);
|
|
689
|
+
}
|
|
690
|
+
|
|
691
|
+
.spotlight-thumb-wrap {
|
|
386
692
|
width: 100%;
|
|
387
|
-
|
|
693
|
+
aspect-ratio: 16 / 10;
|
|
694
|
+
position: relative;
|
|
695
|
+
overflow: hidden;
|
|
696
|
+
background: #02060f;
|
|
697
|
+
}
|
|
698
|
+
|
|
699
|
+
.spotlight-thumb {
|
|
700
|
+
width: 100%;
|
|
701
|
+
height: 100%;
|
|
702
|
+
object-fit: cover;
|
|
703
|
+
transition: transform 0.35s ease;
|
|
704
|
+
}
|
|
705
|
+
|
|
706
|
+
.spotlight-card:hover .spotlight-thumb {
|
|
707
|
+
transform: scale(1.08);
|
|
708
|
+
}
|
|
709
|
+
|
|
710
|
+
.spotlight-play-overlay {
|
|
711
|
+
position: absolute;
|
|
712
|
+
inset: 0;
|
|
713
|
+
background: rgba(0, 10, 24, 0.65);
|
|
714
|
+
display: flex;
|
|
715
|
+
align-items: center;
|
|
716
|
+
justify-content: center;
|
|
717
|
+
color: #00ffaa;
|
|
718
|
+
font-family: var(--font-heading);
|
|
719
|
+
font-weight: 900;
|
|
720
|
+
font-size: 0.88rem;
|
|
721
|
+
letter-spacing: 0.15em;
|
|
722
|
+
opacity: 0;
|
|
723
|
+
transition: opacity 0.2s ease;
|
|
724
|
+
backdrop-filter: blur(2px);
|
|
725
|
+
}
|
|
726
|
+
|
|
727
|
+
.spotlight-card:hover .spotlight-play-overlay {
|
|
728
|
+
opacity: 1;
|
|
729
|
+
}
|
|
730
|
+
|
|
731
|
+
.spotlight-info {
|
|
732
|
+
padding: 0.85rem;
|
|
733
|
+
}
|
|
734
|
+
|
|
735
|
+
.spotlight-name {
|
|
736
|
+
font-size: 0.95rem;
|
|
737
|
+
font-weight: 800;
|
|
738
|
+
color: #ffffff;
|
|
739
|
+
margin-bottom: 0.25rem;
|
|
740
|
+
}
|
|
741
|
+
|
|
742
|
+
.spotlight-meta {
|
|
743
|
+
font-size: 0.72rem;
|
|
744
|
+
color: #7fa6cf;
|
|
745
|
+
}
|
|
746
|
+
|
|
747
|
+
/* 4 Portals Grid */
|
|
748
|
+
.home-portals-grid {
|
|
749
|
+
display: grid;
|
|
750
|
+
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|
751
|
+
gap: 1.25rem;
|
|
752
|
+
margin-top: 0.5rem;
|
|
753
|
+
}
|
|
754
|
+
|
|
755
|
+
.portal-card {
|
|
756
|
+
background: rgba(5, 12, 28, 0.75);
|
|
757
|
+
border: 1.5px solid rgba(0, 210, 255, 0.2);
|
|
758
|
+
border-radius: 16px;
|
|
759
|
+
padding: 1.35rem;
|
|
760
|
+
cursor: pointer;
|
|
761
|
+
transition: all 0.25s ease;
|
|
762
|
+
display: flex;
|
|
763
|
+
flex-direction: column;
|
|
764
|
+
gap: 0.85rem;
|
|
765
|
+
backdrop-filter: blur(14px);
|
|
766
|
+
}
|
|
767
|
+
|
|
768
|
+
.portal-card:hover {
|
|
769
|
+
background: rgba(7, 18, 42, 0.88);
|
|
770
|
+
border-color: #00d2ff;
|
|
771
|
+
transform: translateY(-5px);
|
|
772
|
+
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 25px rgba(0, 210, 255, 0.35);
|
|
773
|
+
}
|
|
774
|
+
|
|
775
|
+
.portal-icon-box {
|
|
776
|
+
width: 44px;
|
|
777
|
+
height: 44px;
|
|
778
|
+
border-radius: 12px;
|
|
779
|
+
display: flex;
|
|
780
|
+
align-items: center;
|
|
781
|
+
justify-content: center;
|
|
782
|
+
font-size: 1.3rem;
|
|
783
|
+
color: #fff;
|
|
784
|
+
box-shadow: 0 0 16px rgba(0, 210, 255, 0.4);
|
|
785
|
+
}
|
|
786
|
+
|
|
787
|
+
.portal-title {
|
|
788
|
+
font-family: var(--font-heading);
|
|
789
|
+
font-size: 1rem;
|
|
790
|
+
font-weight: 800;
|
|
791
|
+
color: #ffffff;
|
|
792
|
+
margin-bottom: 0.35rem;
|
|
793
|
+
}
|
|
794
|
+
|
|
795
|
+
.portal-desc {
|
|
796
|
+
font-size: 0.8rem;
|
|
797
|
+
color: #8cb1d9;
|
|
798
|
+
line-height: 1.5;
|
|
799
|
+
margin-bottom: 0.75rem;
|
|
800
|
+
}
|
|
801
|
+
|
|
802
|
+
.portal-link {
|
|
803
|
+
font-family: var(--font-heading);
|
|
804
|
+
font-size: 0.76rem;
|
|
805
|
+
font-weight: 800;
|
|
806
|
+
color: #00d2ff;
|
|
807
|
+
letter-spacing: 0.05em;
|
|
808
|
+
margin-top: auto;
|
|
388
809
|
}
|
|
389
810
|
|
|
390
811
|
/* Controls Bar */
|
|
@@ -444,45 +865,31 @@ body {
|
|
|
444
865
|
box-shadow: 0 0 12px rgba(0, 136, 255, 0.45);
|
|
445
866
|
}
|
|
446
867
|
|
|
447
|
-
/* Games Grid */
|
|
868
|
+
/* Games Grid - Modern Responsive Layout */
|
|
448
869
|
.games-grid {
|
|
449
870
|
display: grid;
|
|
450
|
-
grid-template-columns: repeat(auto-fill, minmax(
|
|
451
|
-
gap: 1.
|
|
871
|
+
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
|
|
872
|
+
gap: 1.25rem;
|
|
452
873
|
}
|
|
453
874
|
|
|
454
875
|
.game-card {
|
|
455
|
-
background: linear-gradient(
|
|
456
|
-
border: 1.5px solid
|
|
457
|
-
border-radius:
|
|
876
|
+
background: linear-gradient(150deg, rgba(8, 18, 38, 0.95) 0%, rgba(3, 8, 20, 0.98) 100%);
|
|
877
|
+
border: 1.5px solid rgba(0, 210, 255, 0.18);
|
|
878
|
+
border-radius: 14px;
|
|
458
879
|
overflow: hidden;
|
|
459
880
|
cursor: pointer;
|
|
460
|
-
transition: transform 0.
|
|
881
|
+
transition: transform 0.25s cubic-bezier(0.2, 0, 0.2, 1), box-shadow 0.25s ease, border-color 0.25s ease;
|
|
461
882
|
display: flex;
|
|
462
883
|
flex-direction: column;
|
|
463
884
|
position: relative;
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
}
|
|
467
|
-
|
|
468
|
-
.game-card::after {
|
|
469
|
-
content: '';
|
|
470
|
-
position: absolute;
|
|
471
|
-
inset: 0;
|
|
472
|
-
background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(0, 210, 255, 0.25) 0%, transparent 65%);
|
|
473
|
-
opacity: 0;
|
|
474
|
-
transition: opacity 0.3s ease;
|
|
475
|
-
pointer-events: none;
|
|
476
|
-
mix-blend-mode: screen;
|
|
477
|
-
}
|
|
478
|
-
|
|
479
|
-
.game-card:hover::after {
|
|
480
|
-
opacity: 1;
|
|
885
|
+
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
|
|
886
|
+
backdrop-filter: blur(12px);
|
|
481
887
|
}
|
|
482
888
|
|
|
483
889
|
.game-card:hover {
|
|
484
|
-
border-color:
|
|
485
|
-
box-shadow: 0
|
|
890
|
+
border-color: rgba(0, 240, 255, 0.75);
|
|
891
|
+
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.85), 0 0 25px rgba(0, 210, 255, 0.45);
|
|
892
|
+
transform: translateY(-6px);
|
|
486
893
|
}
|
|
487
894
|
|
|
488
895
|
.game-thumb-container {
|
|
@@ -497,42 +904,67 @@ body {
|
|
|
497
904
|
width: 100%;
|
|
498
905
|
height: 100%;
|
|
499
906
|
object-fit: cover;
|
|
500
|
-
transition: transform 0.
|
|
907
|
+
transition: transform 0.35s cubic-bezier(0.2, 0, 0.2, 1);
|
|
501
908
|
}
|
|
502
909
|
|
|
503
910
|
.game-card:hover .game-thumb {
|
|
504
|
-
transform: scale(1.
|
|
911
|
+
transform: scale(1.08);
|
|
912
|
+
}
|
|
913
|
+
|
|
914
|
+
.game-thumb-container::after {
|
|
915
|
+
content: '▶ PLAY';
|
|
916
|
+
position: absolute;
|
|
917
|
+
inset: 0;
|
|
918
|
+
background: rgba(0, 10, 24, 0.65);
|
|
919
|
+
display: flex;
|
|
920
|
+
align-items: center;
|
|
921
|
+
justify-content: center;
|
|
922
|
+
color: #00ffaa;
|
|
923
|
+
font-family: var(--font-heading);
|
|
924
|
+
font-weight: 900;
|
|
925
|
+
font-size: 0.88rem;
|
|
926
|
+
letter-spacing: 0.15em;
|
|
927
|
+
opacity: 0;
|
|
928
|
+
transition: opacity 0.2s ease, backdrop-filter 0.2s ease;
|
|
929
|
+
backdrop-filter: blur(2px);
|
|
930
|
+
}
|
|
931
|
+
|
|
932
|
+
.game-card:hover .game-thumb-container::after {
|
|
933
|
+
opacity: 1;
|
|
505
934
|
}
|
|
506
935
|
|
|
507
936
|
.game-badge-featured {
|
|
508
937
|
position: absolute;
|
|
509
938
|
top: 8px;
|
|
510
939
|
left: 8px;
|
|
511
|
-
|
|
940
|
+
z-index: 2;
|
|
941
|
+
background: linear-gradient(135deg, #00d2ff, #0055ff);
|
|
512
942
|
color: #fff;
|
|
513
943
|
font-size: 0.62rem;
|
|
514
944
|
font-weight: 800;
|
|
515
945
|
font-family: var(--font-heading);
|
|
516
|
-
padding: 0.2rem 0.
|
|
517
|
-
border-radius:
|
|
518
|
-
box-shadow: 0 0
|
|
946
|
+
padding: 0.2rem 0.55rem;
|
|
947
|
+
border-radius: 6px;
|
|
948
|
+
box-shadow: 0 0 12px rgba(0, 210, 255, 0.7);
|
|
949
|
+
letter-spacing: 0.05em;
|
|
519
950
|
}
|
|
520
951
|
|
|
521
952
|
.game-info {
|
|
522
|
-
padding: 0.
|
|
953
|
+
padding: 0.85rem;
|
|
523
954
|
display: flex;
|
|
524
955
|
flex-direction: column;
|
|
525
956
|
flex: 1;
|
|
526
957
|
}
|
|
527
958
|
|
|
528
959
|
.game-title {
|
|
529
|
-
font-size: 0.
|
|
960
|
+
font-size: 0.92rem;
|
|
530
961
|
font-weight: 700;
|
|
531
|
-
color: #
|
|
962
|
+
color: #ffffff;
|
|
532
963
|
white-space: nowrap;
|
|
533
964
|
overflow: hidden;
|
|
534
965
|
text-overflow: ellipsis;
|
|
535
|
-
margin-bottom: 0.
|
|
966
|
+
margin-bottom: 0.4rem;
|
|
967
|
+
letter-spacing: 0.01em;
|
|
536
968
|
}
|
|
537
969
|
|
|
538
970
|
.game-meta {
|
|
@@ -540,8 +972,8 @@ body {
|
|
|
540
972
|
justify-content: space-between;
|
|
541
973
|
align-items: center;
|
|
542
974
|
font-size: 0.72rem;
|
|
543
|
-
color:
|
|
544
|
-
margin-bottom: 0.
|
|
975
|
+
color: #8bb1d9;
|
|
976
|
+
margin-bottom: 0.75rem;
|
|
545
977
|
}
|
|
546
978
|
|
|
547
979
|
.btn-fav {
|
|
@@ -583,44 +1015,135 @@ body {
|
|
|
583
1015
|
|
|
584
1016
|
.btn-card-play {
|
|
585
1017
|
width: 100%;
|
|
586
|
-
background:
|
|
587
|
-
border: 1px solid
|
|
588
|
-
color:
|
|
589
|
-
padding: 0.
|
|
590
|
-
font-size: 0.
|
|
1018
|
+
background: rgba(0, 136, 255, 0.12);
|
|
1019
|
+
border: 1px solid rgba(0, 210, 255, 0.35);
|
|
1020
|
+
color: #00d2ff;
|
|
1021
|
+
padding: 0.5rem;
|
|
1022
|
+
font-size: 0.78rem;
|
|
591
1023
|
font-weight: 800;
|
|
592
1024
|
font-family: var(--font-heading);
|
|
593
|
-
border-radius:
|
|
1025
|
+
border-radius: 8px;
|
|
594
1026
|
cursor: pointer;
|
|
595
1027
|
transition: all 0.2s ease;
|
|
596
1028
|
margin-top: auto;
|
|
1029
|
+
letter-spacing: 0.06em;
|
|
597
1030
|
}
|
|
598
1031
|
|
|
599
1032
|
.game-card:hover .btn-card-play {
|
|
600
|
-
background:
|
|
1033
|
+
background: linear-gradient(135deg, #00d2ff, #0066ff);
|
|
1034
|
+
border-color: #00d2ff;
|
|
1035
|
+
color: #fff;
|
|
1036
|
+
box-shadow: 0 0 18px rgba(0, 210, 255, 0.6);
|
|
1037
|
+
}
|
|
1038
|
+
|
|
1039
|
+
/* Modern Chat Nav Dock */
|
|
1040
|
+
.chat-nav-dock {
|
|
1041
|
+
display: flex;
|
|
1042
|
+
border-bottom: 1.5px solid rgba(0, 210, 255, 0.2);
|
|
1043
|
+
background: rgba(2, 6, 16, 0.95);
|
|
1044
|
+
}
|
|
1045
|
+
|
|
1046
|
+
.chat-dock-btn {
|
|
1047
|
+
flex: 1;
|
|
1048
|
+
background: transparent;
|
|
1049
|
+
border: none;
|
|
1050
|
+
color: #8cb1d9;
|
|
1051
|
+
padding: 0.65rem 0.5rem;
|
|
1052
|
+
font-size: 0.78rem;
|
|
1053
|
+
font-weight: 800;
|
|
1054
|
+
font-family: var(--font-heading);
|
|
1055
|
+
cursor: pointer;
|
|
1056
|
+
transition: all 0.2s ease;
|
|
1057
|
+
letter-spacing: 0.05em;
|
|
1058
|
+
position: relative;
|
|
1059
|
+
}
|
|
1060
|
+
|
|
1061
|
+
.chat-dock-btn:hover {
|
|
601
1062
|
color: #fff;
|
|
602
|
-
|
|
1063
|
+
background: rgba(0, 210, 255, 0.08);
|
|
1064
|
+
}
|
|
1065
|
+
|
|
1066
|
+
.chat-dock-btn.active {
|
|
1067
|
+
color: #00d2ff;
|
|
1068
|
+
background: rgba(0, 210, 255, 0.12);
|
|
1069
|
+
}
|
|
1070
|
+
|
|
1071
|
+
.chat-dock-btn.active::after {
|
|
1072
|
+
content: '';
|
|
1073
|
+
position: absolute;
|
|
1074
|
+
bottom: 0;
|
|
1075
|
+
left: 15%;
|
|
1076
|
+
width: 70%;
|
|
1077
|
+
height: 2px;
|
|
1078
|
+
background: #00d2ff;
|
|
1079
|
+
box-shadow: 0 0 10px #00d2ff;
|
|
1080
|
+
}
|
|
1081
|
+
|
|
1082
|
+
.chat-live-pulse {
|
|
1083
|
+
width: 7px;
|
|
1084
|
+
height: 7px;
|
|
1085
|
+
border-radius: 50%;
|
|
1086
|
+
background: #00ffaa;
|
|
1087
|
+
box-shadow: 0 0 8px #00ffaa;
|
|
1088
|
+
animation: pulseDot 1s infinite alternate;
|
|
603
1089
|
}
|
|
604
1090
|
|
|
605
|
-
|
|
1091
|
+
.chat-online-counter {
|
|
1092
|
+
font-family: var(--font-mono);
|
|
1093
|
+
font-size: 0.7rem;
|
|
1094
|
+
color: #00ffaa;
|
|
1095
|
+
font-weight: 800;
|
|
1096
|
+
}
|
|
1097
|
+
|
|
1098
|
+
/* Quick Reactions Row */
|
|
1099
|
+
.chat-quick-reactions {
|
|
1100
|
+
display: flex;
|
|
1101
|
+
align-items: center;
|
|
1102
|
+
gap: 0.35rem;
|
|
1103
|
+
padding: 0.35rem 0.85rem;
|
|
1104
|
+
background: rgba(2, 6, 14, 0.92);
|
|
1105
|
+
border-top: 1px solid rgba(0, 210, 255, 0.12);
|
|
1106
|
+
overflow-x: auto;
|
|
1107
|
+
}
|
|
1108
|
+
|
|
1109
|
+
.btn-chat-emoji {
|
|
1110
|
+
background: rgba(5, 14, 32, 0.7);
|
|
1111
|
+
border: 1px solid rgba(0, 210, 255, 0.2);
|
|
1112
|
+
border-radius: 6px;
|
|
1113
|
+
padding: 0.2rem 0.45rem;
|
|
1114
|
+
font-size: 0.85rem;
|
|
1115
|
+
cursor: pointer;
|
|
1116
|
+
transition: all 0.15s ease;
|
|
1117
|
+
}
|
|
1118
|
+
|
|
1119
|
+
.btn-chat-emoji:hover {
|
|
1120
|
+
background: rgba(0, 210, 255, 0.25);
|
|
1121
|
+
border-color: #00d2ff;
|
|
1122
|
+
transform: scale(1.15);
|
|
1123
|
+
}
|
|
1124
|
+
|
|
1125
|
+
/* Side Chat Panel - Sleek Cyber Glass */
|
|
606
1126
|
.side-chat-panel {
|
|
607
1127
|
width: 370px;
|
|
608
|
-
background: rgba(4, 10,
|
|
609
|
-
border-left:
|
|
1128
|
+
background: rgba(4, 10, 22, 0.92);
|
|
1129
|
+
border-left: 1.5px solid rgba(0, 210, 255, 0.2);
|
|
610
1130
|
display: flex;
|
|
611
1131
|
flex-direction: column;
|
|
612
1132
|
height: calc(100vh - 65px);
|
|
613
1133
|
position: sticky;
|
|
614
1134
|
top: 65px;
|
|
1135
|
+
backdrop-filter: blur(20px);
|
|
1136
|
+
-webkit-backdrop-filter: blur(20px);
|
|
1137
|
+
box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
|
|
615
1138
|
}
|
|
616
1139
|
|
|
617
1140
|
.red-chat-header {
|
|
618
1141
|
padding: 0.85rem 1.15rem;
|
|
619
|
-
border-bottom:
|
|
1142
|
+
border-bottom: 1.5px solid rgba(0, 210, 255, 0.2);
|
|
620
1143
|
display: flex;
|
|
621
1144
|
justify-content: space-between;
|
|
622
1145
|
align-items: center;
|
|
623
|
-
background:
|
|
1146
|
+
background: rgba(2, 6, 16, 0.95);
|
|
624
1147
|
}
|
|
625
1148
|
|
|
626
1149
|
.red-chat-title {
|
|
@@ -648,7 +1171,7 @@ body {
|
|
|
648
1171
|
overflow-y: auto;
|
|
649
1172
|
display: flex;
|
|
650
1173
|
flex-direction: column;
|
|
651
|
-
gap: 0.
|
|
1174
|
+
gap: 0.85rem;
|
|
652
1175
|
}
|
|
653
1176
|
|
|
654
1177
|
/* Left / Right Chat Message Rows */
|
|
@@ -670,11 +1193,11 @@ body {
|
|
|
670
1193
|
}
|
|
671
1194
|
|
|
672
1195
|
.msg-self .red-msg-bubble {
|
|
673
|
-
background: linear-gradient(135deg,
|
|
1196
|
+
background: linear-gradient(135deg, rgba(0, 100, 230, 0.9), rgba(0, 160, 255, 0.9));
|
|
674
1197
|
color: #fff;
|
|
675
|
-
border: 1px solid rgba(0, 210, 255, 0.
|
|
676
|
-
border-radius:
|
|
677
|
-
box-shadow: 0
|
|
1198
|
+
border: 1px solid rgba(0, 210, 255, 0.45);
|
|
1199
|
+
border-radius: 14px 14px 2px 14px;
|
|
1200
|
+
box-shadow: 0 4px 15px rgba(0, 136, 255, 0.3);
|
|
678
1201
|
}
|
|
679
1202
|
|
|
680
1203
|
.msg-self .red-msg-meta {
|
|
@@ -686,17 +1209,18 @@ body {
|
|
|
686
1209
|
}
|
|
687
1210
|
|
|
688
1211
|
.msg-other .red-msg-bubble {
|
|
689
|
-
background:
|
|
1212
|
+
background: rgba(8, 18, 36, 0.85);
|
|
690
1213
|
color: #e0eeff;
|
|
691
|
-
border: 1px solid rgba(0,
|
|
692
|
-
border-radius:
|
|
1214
|
+
border: 1px solid rgba(0, 210, 255, 0.2);
|
|
1215
|
+
border-radius: 14px 14px 14px 2px;
|
|
1216
|
+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
|
|
693
1217
|
}
|
|
694
1218
|
|
|
695
1219
|
.red-msg-avatar {
|
|
696
1220
|
width: 28px;
|
|
697
1221
|
height: 28px;
|
|
698
1222
|
border-radius: 50%;
|
|
699
|
-
background: #
|
|
1223
|
+
background: linear-gradient(135deg, #00d2ff, #0055ff);
|
|
700
1224
|
color: #fff;
|
|
701
1225
|
display: flex;
|
|
702
1226
|
align-items: center;
|
|
@@ -704,6 +1228,7 @@ body {
|
|
|
704
1228
|
font-weight: 800;
|
|
705
1229
|
font-size: 0.72rem;
|
|
706
1230
|
flex-shrink: 0;
|
|
1231
|
+
box-shadow: 0 0 10px rgba(0, 210, 255, 0.4);
|
|
707
1232
|
}
|
|
708
1233
|
|
|
709
1234
|
.red-msg-body {
|
|
@@ -731,8 +1256,8 @@ body {
|
|
|
731
1256
|
}
|
|
732
1257
|
|
|
733
1258
|
.red-msg-bubble {
|
|
734
|
-
padding: 0.
|
|
735
|
-
font-size: 0.
|
|
1259
|
+
padding: 0.6rem 0.95rem;
|
|
1260
|
+
font-size: 0.84rem;
|
|
736
1261
|
line-height: 1.45;
|
|
737
1262
|
word-break: break-word;
|
|
738
1263
|
}
|
|
@@ -748,9 +1273,9 @@ body {
|
|
|
748
1273
|
.red-btn-del:hover { opacity: 1; }
|
|
749
1274
|
|
|
750
1275
|
.red-chat-input-bar {
|
|
751
|
-
padding: 0.
|
|
752
|
-
border-top:
|
|
753
|
-
background:
|
|
1276
|
+
padding: 0.85rem;
|
|
1277
|
+
border-top: 1.5px solid rgba(0, 210, 255, 0.2);
|
|
1278
|
+
background: rgba(2, 6, 16, 0.98);
|
|
754
1279
|
}
|
|
755
1280
|
|
|
756
1281
|
.timeout-warning-bar {
|
|
@@ -773,15 +1298,20 @@ body {
|
|
|
773
1298
|
|
|
774
1299
|
.red-chat-input {
|
|
775
1300
|
flex: 1;
|
|
776
|
-
background:
|
|
777
|
-
border:
|
|
778
|
-
border-radius:
|
|
779
|
-
padding: 0.
|
|
1301
|
+
background: rgba(4, 12, 28, 0.9);
|
|
1302
|
+
border: 1.5px solid rgba(0, 210, 255, 0.3);
|
|
1303
|
+
border-radius: 10px;
|
|
1304
|
+
padding: 0.65rem 0.9rem;
|
|
780
1305
|
color: #fff;
|
|
781
|
-
font-size: 0.
|
|
1306
|
+
font-size: 0.84rem;
|
|
782
1307
|
outline: none;
|
|
1308
|
+
transition: all 0.2s ease;
|
|
1309
|
+
}
|
|
1310
|
+
.red-chat-input:focus {
|
|
1311
|
+
border-color: #00d2ff;
|
|
1312
|
+
box-shadow: 0 0 14px rgba(0, 210, 255, 0.35);
|
|
1313
|
+
background: rgba(6, 16, 36, 0.95);
|
|
783
1314
|
}
|
|
784
|
-
.red-chat-input:focus { border-color: var(--blue-bright); }
|
|
785
1315
|
|
|
786
1316
|
/* Buttons */
|
|
787
1317
|
.btn-primary {
|