Skip to content

Commit 0ecb7b7

Browse files
ryan-sharpnackryan-sharpnack
authored
Create style.css
1 parent 83f3f60 commit 0ecb7b7

1 file changed

Lines changed: 287 additions & 0 deletions

File tree

‎style.css‎

Lines changed: 287 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,287 @@
1+
/* Matrix Theme - ICS Security Research */
2+
3+
:root {
4+
--matrix-green: #00ff41;
5+
--dark-bg: #0d0d0d;
6+
--darker-bg: #050505;
7+
--code-bg: #1a1a1a;
8+
--text-white: #ffffff;
9+
--text-grey: #a0a0a0;
10+
--border-color: #00ff41;
11+
}
12+
13+
* {
14+
margin: 0;
15+
padding: 0;
16+
box-sizing: border-box;
17+
}
18+
19+
body {
20+
background: var(--dark-bg);
21+
color: var(--text-white);
22+
font-family: 'Courier New', 'Courier', monospace;
23+
line-height: 1.6;
24+
overflow-x: hidden;
25+
}
26+
27+
.container {
28+
max-width: 900px;
29+
margin: 0 auto;
30+
padding: 40px 20px;
31+
}
32+
33+
/* Header */
34+
header {
35+
text-align: center;
36+
margin-bottom: 60px;
37+
padding: 40px 0;
38+
}
39+
40+
h1 {
41+
color: var(--matrix-green);
42+
font-size: 3em;
43+
margin-bottom: 10px;
44+
letter-spacing: 2px;
45+
text-shadow: 0 0 20px var(--matrix-green);
46+
position: relative;
47+
}
48+
49+
.cursor {
50+
animation: blink 1s infinite;
51+
}
52+
53+
@keyframes blink {
54+
0%, 50% { opacity: 1; }
55+
51%, 100% { opacity: 0; }
56+
}
57+
58+
.tagline {
59+
color: var(--matrix-green);
60+
font-size: 1.3em;
61+
margin-bottom: 10px;
62+
letter-spacing: 1px;
63+
}
64+
65+
.subtitle {
66+
color: var(--text-grey);
67+
font-size: 1em;
68+
}
69+
70+
/* Disclosure Notice */
71+
.disclosure-notice {
72+
background: var(--code-bg);
73+
border-left: 4px solid var(--matrix-green);
74+
padding: 20px;
75+
margin: 40px 0;
76+
color: var(--matrix-green);
77+
animation: pulse 2s infinite;
78+
}
79+
80+
@keyframes pulse {
81+
0%, 100% { opacity: 1; }
82+
50% { opacity: 0.8; }
83+
}
84+
85+
.notice-icon {
86+
margin-right: 10px;
87+
font-size: 1.2em;
88+
}
89+
90+
/* Sections */
91+
section {
92+
margin: 60px 0;
93+
}
94+
95+
.section-title {
96+
color: var(--matrix-green);
97+
font-size: 1.5em;
98+
margin-bottom: 20px;
99+
letter-spacing: 1px;
100+
text-shadow: 0 0 10px var(--matrix-green);
101+
}
102+
103+
/* About Section */
104+
.about p {
105+
margin-bottom: 15px;
106+
color: var(--text-white);
107+
}
108+
109+
/* Status Grid */
110+
.status-grid {
111+
display: grid;
112+
gap: 15px;
113+
}
114+
115+
.status-item {
116+
background: var(--code-bg);
117+
padding: 15px;
118+
border-left: 2px solid var(--matrix-green);
119+
transition: all 0.3s;
120+
}
121+
122+
.status-item:hover {
123+
border-left: 4px solid var(--matrix-green);
124+
transform: translateX(5px);
125+
}
126+
127+
.status-label {
128+
color: var(--matrix-green);
129+
margin-right: 10px;
130+
}
131+
132+
.status-value {
133+
color: var(--text-white);
134+
}
135+
136+
/* Research Areas Grid */
137+
.research-grid {
138+
display: grid;
139+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
140+
gap: 20px;
141+
margin-top: 20px;
142+
}
143+
144+
.research-item {
145+
background: var(--code-bg);
146+
padding: 20px;
147+
border: 1px solid var(--matrix-green);
148+
transition: all 0.3s;
149+
}
150+
151+
.research-item:hover {
152+
box-shadow: 0 0 20px rgba(0, 255, 65, 0.3);
153+
transform: translateY(-5px);
154+
}
155+
156+
.research-item h3 {
157+
color: var(--matrix-green);
158+
margin-bottom: 10px;
159+
font-size: 1.1em;
160+
}
161+
162+
.research-item p {
163+
color: var(--text-grey);
164+
font-size: 0.9em;
165+
}
166+
167+
/* Coming Soon */
168+
.coming-list {
169+
list-style: none;
170+
margin: 20px 0;
171+
}
172+
173+
.coming-list li {
174+
padding: 10px 0;
175+
color: var(--text-white);
176+
}
177+
178+
.bullet {
179+
color: var(--matrix-green);
180+
margin-right: 10px;
181+
}
182+
183+
.subscribe-note {
184+
margin-top: 30px;
185+
padding: 15px;
186+
background: var(--code-bg);
187+
border-left: 3px solid var(--matrix-green);
188+
}
189+
190+
/* Links */
191+
.links {
192+
display: grid;
193+
gap: 15px;
194+
margin-top: 20px;
195+
}
196+
197+
.link-item {
198+
display: block;
199+
color: var(--matrix-green);
200+
text-decoration: none;
201+
padding: 15px;
202+
background: var(--code-bg);
203+
border: 1px solid var(--matrix-green);
204+
transition: all 0.3s;
205+
font-size: 1.1em;
206+
}
207+
208+
.link-item:hover {
209+
background: rgba(0, 255, 65, 0.1);
210+
box-shadow: 0 0 20px rgba(0, 255, 65, 0.5);
211+
transform: translateX(10px);
212+
}
213+
214+
.link-arrow {
215+
margin-right: 10px;
216+
display: inline-block;
217+
transition: transform 0.3s;
218+
}
219+
220+
.link-item:hover .link-arrow {
221+
transform: translateX(5px);
222+
}
223+
224+
/* Links in text */
225+
a {
226+
color: var(--matrix-green);
227+
text-decoration: none;
228+
transition: all 0.3s;
229+
}
230+
231+
a:hover {
232+
text-shadow: 0 0 10px var(--matrix-green);
233+
}
234+
235+
/* Footer */
236+
footer {
237+
margin-top: 80px;
238+
padding-top: 40px;
239+
border-top: 1px solid var(--matrix-green);
240+
}
241+
242+
.legal {
243+
margin-bottom: 30px;
244+
}
245+
246+
.legal p {
247+
color: var(--text-grey);
248+
font-size: 0.9em;
249+
}
250+
251+
.copyright {
252+
text-align: center;
253+
color: var(--text-grey);
254+
font-size: 0.9em;
255+
}
256+
257+
/* Responsive */
258+
@media (max-width: 768px) {
259+
h1 {
260+
font-size: 2em;
261+
}
262+
263+
.tagline {
264+
font-size: 1em;
265+
}
266+
267+
.research-grid {
268+
grid-template-columns: 1fr;
269+
}
270+
}
271+
272+
/* Subtle matrix rain effect (optional) */
273+
body::before {
274+
content: "";
275+
position: fixed;
276+
top: 0;
277+
left: 0;
278+
width: 100%;
279+
height: 100%;
280+
background:
281+
linear-gradient(transparent 50%, rgba(0, 255, 65, 0.03) 50%),
282+
linear-gradient(90deg, transparent 50%, rgba(0, 255, 65, 0.03) 50%);
283+
background-size: 3px 3px;
284+
pointer-events: none;
285+
z-index: -1;
286+
opacity: 0.3;
287+
}

0 commit comments

Comments
 (0)