helldivers-theme 1.0.0 → 1.2.1
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.
- checksums.yaml +4 -4
- data/_sass/_base.scss +106 -88
- data/_sass/_layout.scss +308 -205
- metadata +1 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 719eff878116dbf7e6fccc916361de5b92a79fee4e69d7dbdbdb077d1cb6d7de
|
|
4
|
+
data.tar.gz: d408b841eff41cc1375faa5998854535ec11cc5b110efb7a6adba47958c0ccf9
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: e1e43cc0a524be7540a0b7e10a3e2539ed2bf41b13d015fb070c81de7be93b30b3846d5834d187255caf999662b8aa051a7076d868a8f1ce32a7f0e74c4caf4f
|
|
7
|
+
data.tar.gz: c1a724c0145e23189e3ea13f2bfd36528a460095fc13b37a2633ec8171f707d67def7459f3dfaae5d1d14aedca4c365d899ff54d13e275ebf62a6c94d0acec1d
|
data/_sass/_base.scss
CHANGED
|
@@ -1,88 +1,106 @@
|
|
|
1
|
-
// _sass/_base.scss
|
|
2
|
-
|
|
3
|
-
* {
|
|
4
|
-
box-sizing: border-box;
|
|
5
|
-
margin: 0;
|
|
6
|
-
padding: 0;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
body {
|
|
10
|
-
background-color: $hd-blue-deep;
|
|
11
|
-
color: $hd-white;
|
|
12
|
-
font-family: $font-mono;
|
|
13
|
-
min-height: 100vh;
|
|
14
|
-
display: flex;
|
|
15
|
-
justify-content: center;
|
|
16
|
-
align-items: center;
|
|
17
|
-
padding: 20px;
|
|
18
|
-
overflow-x: hidden;
|
|
19
|
-
|
|
20
|
-
// SPACE BACKGROUND
|
|
21
|
-
// Using a deep space nebula image
|
|
22
|
-
background-size: cover;
|
|
23
|
-
background-position: center;
|
|
24
|
-
background-attachment: fixed; // Parallax effect
|
|
25
|
-
|
|
26
|
-
// Subtle animated stars could be added later, but this is a great start
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
// Optional: Add a subtle scanline overlay for that "screen" feel
|
|
30
|
-
body::after {
|
|
31
|
-
content: "";
|
|
32
|
-
position: fixed;
|
|
33
|
-
top: 0; left: 0; width: 100%; height: 100%;
|
|
34
|
-
background: repeating-linear-gradient(
|
|
35
|
-
0deg,
|
|
36
|
-
rgba(0, 0, 0, 0.1),
|
|
37
|
-
rgba(0, 0, 0, 0.1) 1px,
|
|
38
|
-
transparent 1px,
|
|
39
|
-
transparent 2px
|
|
40
|
-
);
|
|
41
|
-
pointer-events: none;
|
|
42
|
-
z-index: 9999;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
// =========================================
|
|
46
|
-
// PARTICLE SWIRL BACKGROUND
|
|
47
|
-
// =========================================
|
|
48
|
-
|
|
49
|
-
#particle-swirl {
|
|
50
|
-
position: fixed;
|
|
51
|
-
top: 0;
|
|
52
|
-
left: 0;
|
|
53
|
-
width: 100%;
|
|
54
|
-
height: 100%;
|
|
55
|
-
pointer-events: none; // Allows clicking through the particles
|
|
56
|
-
z-index: 0; // Behind the terminal card (which is z-index 10+)
|
|
57
|
-
overflow: hidden;
|
|
58
|
-
perspective: 1000px;
|
|
59
|
-
opacity: 0.6; // Adjust transparency so it doesn't distract from text
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
.wrap {
|
|
63
|
-
position: absolute;
|
|
64
|
-
top: 50%;
|
|
65
|
-
left: 50%;
|
|
66
|
-
width: 0;
|
|
67
|
-
height: 0;
|
|
68
|
-
transform-style: preserve-3d;
|
|
69
|
-
animation: rotate-swirl 14s infinite linear;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
@keyframes rotate-swirl {
|
|
73
|
-
100% {
|
|
74
|
-
transform: rotateY(360deg) rotateX(360deg);
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
.c {
|
|
79
|
-
position: absolute;
|
|
80
|
-
width: 3px;
|
|
81
|
-
height: 3px;
|
|
82
|
-
border-radius: 50%;
|
|
83
|
-
opacity: 0;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
.c {
|
|
87
|
-
will-change: transform, opacity;
|
|
88
|
-
}
|
|
1
|
+
// _sass/_base.scss
|
|
2
|
+
|
|
3
|
+
* {
|
|
4
|
+
box-sizing: border-box;
|
|
5
|
+
margin: 0;
|
|
6
|
+
padding: 0;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
body {
|
|
10
|
+
background-color: $hd-blue-deep;
|
|
11
|
+
color: $hd-white;
|
|
12
|
+
font-family: $font-mono;
|
|
13
|
+
min-height: 100vh;
|
|
14
|
+
display: flex;
|
|
15
|
+
justify-content: center;
|
|
16
|
+
align-items: center;
|
|
17
|
+
padding: 20px;
|
|
18
|
+
overflow-x: hidden;
|
|
19
|
+
|
|
20
|
+
// SPACE BACKGROUND
|
|
21
|
+
// Using a deep space nebula image
|
|
22
|
+
background-size: cover;
|
|
23
|
+
background-position: center;
|
|
24
|
+
background-attachment: fixed; // Parallax effect
|
|
25
|
+
|
|
26
|
+
// Subtle animated stars could be added later, but this is a great start
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
// Optional: Add a subtle scanline overlay for that "screen" feel
|
|
30
|
+
body::after {
|
|
31
|
+
content: "";
|
|
32
|
+
position: fixed;
|
|
33
|
+
top: 0; left: 0; width: 100%; height: 100%;
|
|
34
|
+
background: repeating-linear-gradient(
|
|
35
|
+
0deg,
|
|
36
|
+
rgba(0, 0, 0, 0.1),
|
|
37
|
+
rgba(0, 0, 0, 0.1) 1px,
|
|
38
|
+
transparent 1px,
|
|
39
|
+
transparent 2px
|
|
40
|
+
);
|
|
41
|
+
pointer-events: none;
|
|
42
|
+
z-index: 9999;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
// =========================================
|
|
46
|
+
// PARTICLE SWIRL BACKGROUND
|
|
47
|
+
// =========================================
|
|
48
|
+
|
|
49
|
+
#particle-swirl {
|
|
50
|
+
position: fixed;
|
|
51
|
+
top: 0;
|
|
52
|
+
left: 0;
|
|
53
|
+
width: 100%;
|
|
54
|
+
height: 100%;
|
|
55
|
+
pointer-events: none; // Allows clicking through the particles
|
|
56
|
+
z-index: 0; // Behind the terminal card (which is z-index 10+)
|
|
57
|
+
overflow: hidden;
|
|
58
|
+
perspective: 1000px;
|
|
59
|
+
opacity: 0.6; // Adjust transparency so it doesn't distract from text
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.wrap {
|
|
63
|
+
position: absolute;
|
|
64
|
+
top: 50%;
|
|
65
|
+
left: 50%;
|
|
66
|
+
width: 0;
|
|
67
|
+
height: 0;
|
|
68
|
+
transform-style: preserve-3d;
|
|
69
|
+
animation: rotate-swirl 14s infinite linear;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
@keyframes rotate-swirl {
|
|
73
|
+
100% {
|
|
74
|
+
transform: rotateY(360deg) rotateX(360deg);
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.c {
|
|
79
|
+
position: absolute;
|
|
80
|
+
width: 3px;
|
|
81
|
+
height: 3px;
|
|
82
|
+
border-radius: 50%;
|
|
83
|
+
opacity: 0;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.c {
|
|
87
|
+
will-change: transform, opacity;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
body {
|
|
91
|
+
font-size: 16px; // Base size for readability
|
|
92
|
+
line-height: 1.6;
|
|
93
|
+
|
|
94
|
+
@media (max-width: 768px) {
|
|
95
|
+
font-size: 15px; // Slightly smaller but still readable
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
// Ensure code/mono text doesn't get too tiny
|
|
100
|
+
code, pre, .font-mono {
|
|
101
|
+
font-size: 0.9em;
|
|
102
|
+
|
|
103
|
+
@media (max-width: 768px) {
|
|
104
|
+
font-size: 1em; // Scale up slightly on mobile
|
|
105
|
+
}
|
|
106
|
+
}
|
data/_sass/_layout.scss
CHANGED
|
@@ -1,205 +1,308 @@
|
|
|
1
|
-
// _sass/_layout.scss
|
|
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
|
-
font-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
span {
|
|
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
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
margin:
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
.
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
border
|
|
144
|
-
border-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
&::
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
//
|
|
176
|
-
&:has(> .enlist-container),
|
|
177
|
-
&:has(> .intel-container),
|
|
178
|
-
&:has(> .comms-container),
|
|
179
|
-
&:has(> .watch-container) {
|
|
180
|
-
grid-template-columns: 1fr;
|
|
181
|
-
justify-items: center;
|
|
182
|
-
}
|
|
183
|
-
}
|
|
184
|
-
|
|
185
|
-
// Force
|
|
186
|
-
.enlist-container,
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
1
|
+
// _sass/_layout.scss
|
|
2
|
+
|
|
3
|
+
// =========================================
|
|
4
|
+
// 1. MAIN WRAPPER & HEADER
|
|
5
|
+
// =========================================
|
|
6
|
+
|
|
7
|
+
.terminal-wrapper {
|
|
8
|
+
width: 100%;
|
|
9
|
+
max-width: 1200px;
|
|
10
|
+
display: flex;
|
|
11
|
+
flex-direction: column;
|
|
12
|
+
gap: 25px;
|
|
13
|
+
position: relative;
|
|
14
|
+
z-index: 10;
|
|
15
|
+
margin: 0 auto; // Center the wrapper itself
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.terminal-header {
|
|
19
|
+
display: flex;
|
|
20
|
+
justify-content: space-between;
|
|
21
|
+
align-items: center;
|
|
22
|
+
padding: 20px 30px;
|
|
23
|
+
background: rgba(2, 4, 10, 0.8);
|
|
24
|
+
backdrop-filter: blur(10px);
|
|
25
|
+
border-bottom: 2px solid $hd-gold;
|
|
26
|
+
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
|
|
27
|
+
clip-path: polygon(0 0, 100% 0, 100% 75%, 98% 100%, 2% 100%, 0 75%);
|
|
28
|
+
|
|
29
|
+
h1 {
|
|
30
|
+
font-family: $font-head;
|
|
31
|
+
font-size: 3.5rem;
|
|
32
|
+
color: $hd-white;
|
|
33
|
+
text-transform: uppercase;
|
|
34
|
+
margin: 0;
|
|
35
|
+
text-shadow: 0 0 10px rgba($hd-gold, 0.6);
|
|
36
|
+
letter-spacing: 2px;
|
|
37
|
+
span { color: $hd-gold; }
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.subtitle {
|
|
41
|
+
color: $hd-cyan;
|
|
42
|
+
font-size: 0.9rem;
|
|
43
|
+
letter-spacing: 3px;
|
|
44
|
+
text-shadow: 0 0 5px $hd-cyan;
|
|
45
|
+
display: block;
|
|
46
|
+
margin-top: 5px;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
// =========================================
|
|
51
|
+
// 2. NAVIGATION
|
|
52
|
+
// =========================================
|
|
53
|
+
|
|
54
|
+
.main-nav {
|
|
55
|
+
display: flex;
|
|
56
|
+
gap: 25px;
|
|
57
|
+
align-items: center;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.nav-link {
|
|
61
|
+
text-decoration: none;
|
|
62
|
+
color: $hd-white;
|
|
63
|
+
font-family: $font-head;
|
|
64
|
+
font-size: 1.4rem;
|
|
65
|
+
letter-spacing: 2px;
|
|
66
|
+
transition: all 0.3s ease;
|
|
67
|
+
text-transform: uppercase;
|
|
68
|
+
position: relative;
|
|
69
|
+
white-space: nowrap;
|
|
70
|
+
|
|
71
|
+
&:visited { color: $hd-white; }
|
|
72
|
+
|
|
73
|
+
&:hover {
|
|
74
|
+
color: $hd-cyan;
|
|
75
|
+
text-shadow: 0 0 12px $hd-cyan;
|
|
76
|
+
transform: translateY(-2px);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
&.active {
|
|
80
|
+
color: $hd-gold;
|
|
81
|
+
text-shadow: 0 0 15px $hd-gold;
|
|
82
|
+
&::after {
|
|
83
|
+
content: '';
|
|
84
|
+
position: absolute;
|
|
85
|
+
bottom: -5px;
|
|
86
|
+
left: 0;
|
|
87
|
+
width: 100%;
|
|
88
|
+
height: 2px;
|
|
89
|
+
background: $hd-gold;
|
|
90
|
+
box-shadow: 0 0 10px $hd-gold;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
// =========================================
|
|
96
|
+
// 3. LIVE DOT ANIMATION
|
|
97
|
+
// =========================================
|
|
98
|
+
|
|
99
|
+
.live-dot {
|
|
100
|
+
display: inline-block;
|
|
101
|
+
width: 8px;
|
|
102
|
+
height: 8px;
|
|
103
|
+
background-color: $hd-red;
|
|
104
|
+
border-radius: 50%;
|
|
105
|
+
margin-left: 6px;
|
|
106
|
+
box-shadow: 0 0 5px $hd-red;
|
|
107
|
+
animation: pulse-red 1.5s infinite;
|
|
108
|
+
transition: all 0.5s ease;
|
|
109
|
+
flex-shrink: 0;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.live-dot.is-live {
|
|
113
|
+
background-color: #0f0;
|
|
114
|
+
box-shadow: 0 0 8px #0f0;
|
|
115
|
+
animation: pulse-green 1.5s infinite;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
@keyframes pulse-red {
|
|
119
|
+
0% { opacity: 1; transform: scale(1); }
|
|
120
|
+
50% { opacity: 0.5; transform: scale(1.2); }
|
|
121
|
+
100% { opacity: 1; transform: scale(1); }
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
@keyframes pulse-green {
|
|
125
|
+
0% { opacity: 1; transform: scale(1); box-shadow: 0 0 5px #0f0; }
|
|
126
|
+
50% { opacity: 0.6; transform: scale(1.3); box-shadow: 0 0 15px #0f0; }
|
|
127
|
+
100% { opacity: 1; transform: scale(1); box-shadow: 0 0 5px #0f0; }
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
// =========================================
|
|
131
|
+
// 4. MAIN TERMINAL CARD (GRID SYSTEM)
|
|
132
|
+
// =========================================
|
|
133
|
+
|
|
134
|
+
.terminal-card {
|
|
135
|
+
display: grid;
|
|
136
|
+
// DEFAULT: Sidebar (280px) + Content (Rest)
|
|
137
|
+
grid-template-columns: 280px 1fr;
|
|
138
|
+
gap: 25px;
|
|
139
|
+
|
|
140
|
+
background: $glass-bg;
|
|
141
|
+
backdrop-filter: blur(12px);
|
|
142
|
+
-webkit-backdrop-filter: blur(12px);
|
|
143
|
+
border: 1px solid $glass-border;
|
|
144
|
+
border-top: 1px solid rgba($hd-gold, 0.6);
|
|
145
|
+
border-left: 1px solid rgba($hd-cyan, 0.3);
|
|
146
|
+
padding: 30px;
|
|
147
|
+
border-radius: 4px;
|
|
148
|
+
box-shadow: 0 20px 50px rgba(0,0,0,0.6), inset 0 0 30px rgba(0, 240, 255, 0.05);
|
|
149
|
+
position: relative;
|
|
150
|
+
min-height: 600px;
|
|
151
|
+
|
|
152
|
+
// Decorative Corners
|
|
153
|
+
&::before, &::after {
|
|
154
|
+
content: '';
|
|
155
|
+
position: absolute;
|
|
156
|
+
width: 20px;
|
|
157
|
+
height: 20px;
|
|
158
|
+
border: 2px solid $hd-cyan;
|
|
159
|
+
transition: all 0.3s ease;
|
|
160
|
+
z-index: 10;
|
|
161
|
+
}
|
|
162
|
+
&::before { top: -2px; left: -2px; border-right: none; border-bottom: none; }
|
|
163
|
+
&::after { bottom: -2px; right: -2px; border-left: none; border-top: none; }
|
|
164
|
+
|
|
165
|
+
&:hover {
|
|
166
|
+
box-shadow: 0 20px 60px rgba(0,0,0,0.7), inset 0 0 40px rgba(0, 240, 255, 0.1);
|
|
167
|
+
&::before, &::after {
|
|
168
|
+
width: 30px;
|
|
169
|
+
height: 30px;
|
|
170
|
+
border-color: $hd-gold;
|
|
171
|
+
box-shadow: 0 0 10px $hd-gold;
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
// EXCEPTION: Full Width for Specific Pages
|
|
176
|
+
&:has(> .enlist-container),
|
|
177
|
+
&:has(> .intel-container),
|
|
178
|
+
&:has(> .comms-container),
|
|
179
|
+
&:has(> .watch-container) {
|
|
180
|
+
grid-template-columns: 1fr;
|
|
181
|
+
justify-items: center;
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
// Force specific containers to span full width
|
|
186
|
+
.enlist-container,
|
|
187
|
+
.intel-container,
|
|
188
|
+
.comms-container,
|
|
189
|
+
.watch-container {
|
|
190
|
+
grid-column: 1 / -1;
|
|
191
|
+
width: 100%;
|
|
192
|
+
max-width: 1200px;
|
|
193
|
+
margin: 0 auto;
|
|
194
|
+
display: flex;
|
|
195
|
+
flex-direction: column;
|
|
196
|
+
align-items: center;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
// =========================================
|
|
200
|
+
// 5. MOBILE RESPONSIVENESS (CONSOLIDATED)
|
|
201
|
+
// =========================================
|
|
202
|
+
|
|
203
|
+
@media (max-width: 900px) {
|
|
204
|
+
// Switch Header to Column on very small screens
|
|
205
|
+
.terminal-header {
|
|
206
|
+
flex-direction: column;
|
|
207
|
+
text-align: center;
|
|
208
|
+
gap: 15px;
|
|
209
|
+
clip-path: none; // Remove angled cut on mobile for better space
|
|
210
|
+
border-radius: 0 0 10px 10px;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
.logo-area h1 {
|
|
214
|
+
font-size: 2.5rem;
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
.main-nav {
|
|
218
|
+
flex-wrap: wrap;
|
|
219
|
+
justify-content: center;
|
|
220
|
+
gap: 15px;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
.nav-link {
|
|
224
|
+
font-size: 1.1rem;
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
@media (max-width: 768px) {
|
|
229
|
+
// 1. FORCE SINGLE COLUMN GRID FOR HOME PAGE
|
|
230
|
+
.terminal-card {
|
|
231
|
+
display: grid !important; // Keep as Grid, just change columns
|
|
232
|
+
grid-template-columns: 1fr !important; // Stack sidebar on top of content
|
|
233
|
+
gap: 20px;
|
|
234
|
+
padding: 15px;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
// 2. SIDEBAR FULL WIDTH
|
|
238
|
+
.sidebar {
|
|
239
|
+
width: 100%;
|
|
240
|
+
margin-bottom: 25px;
|
|
241
|
+
// Optional: Add a bottom border to separate from content on mobile
|
|
242
|
+
border-bottom: 1px solid rgba($hd-cyan, 0.3);
|
|
243
|
+
padding-bottom: 20px;
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
// 3. CONTENT AREA FULL WIDTH
|
|
247
|
+
.content-area {
|
|
248
|
+
width: 100%;
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
// 4. FIX MARQUEE
|
|
252
|
+
.alert-marquee {
|
|
253
|
+
width: 100%;
|
|
254
|
+
overflow: hidden;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
// 5. FIX LEADER CARDS
|
|
258
|
+
.command-grid {
|
|
259
|
+
display: flex;
|
|
260
|
+
flex-direction: column;
|
|
261
|
+
gap: 20px;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
.leader-card {
|
|
265
|
+
width: 100%;
|
|
266
|
+
display: flex;
|
|
267
|
+
flex-direction: column; // Stack image above text
|
|
268
|
+
align-items: center;
|
|
269
|
+
text-align: center;
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
.octagon-mask {
|
|
273
|
+
width: 100px;
|
|
274
|
+
height: 100px;
|
|
275
|
+
margin: 0 auto 15px auto;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
// 6. FIX MODAL
|
|
279
|
+
.modal-terminal {
|
|
280
|
+
width: 95% !important;
|
|
281
|
+
max-height: 90vh !important;
|
|
282
|
+
padding: 15px !important;
|
|
283
|
+
clip-path: none; // Remove cut corner on mobile
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
.modal-stats-grid {
|
|
287
|
+
grid-template-columns: 1fr !important; // Stack stats
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
.modal-image-top {
|
|
291
|
+
width: 120px;
|
|
292
|
+
height: 120px;
|
|
293
|
+
margin: 0 auto 15px auto;
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
// 7. PREVENT HORIZONTAL SCROLL
|
|
297
|
+
body, html {
|
|
298
|
+
overflow-x: hidden;
|
|
299
|
+
width: 100%;
|
|
300
|
+
max-width: 100%;
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
img {
|
|
304
|
+
max-width: 100%;
|
|
305
|
+
height: auto;
|
|
306
|
+
display: block; // Removes tiny gap below images
|
|
307
|
+
}
|
|
308
|
+
}
|