Skip to content

Commit 0c219e8

Browse files
SCodeGitSCodeGit
authored
Update style.css
1 parent 786b414 commit 0c219e8

File tree

1 file changed

+101
-104
lines changed

1 file changed

+101
-104
lines changed

‎style.css‎

Lines changed: 101 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,138 +1,129 @@
1-
/* Root theme colors — Dark Hacker Edition */
1+
/* Root Theme — Elegant Dark */
22
:root {
3-
--dark-bg: #050505;
4-
--deep-gray: #0e0e0e;
5-
--terminal-gray: #1a1a1a;
6-
--accent-purple: #7b61ff;
7-
--accent-gray: #c0c0c0;
8-
--white: #f5f5f5;
9-
--text-muted: #b0b0b0;
3+
--bg-main: #0b0b0c;
4+
--bg-surface: #141416;
5+
--bg-hover: #1f1f21;
6+
--accent: #b89cff; /* subtle violet accent */
7+
--text-main: #e0e0e0;
8+
--text-muted: #a0a0a0;
9+
--border-color: #242424;
1010
--radius: 12px;
11+
--transition: 0.3s ease;
1112
}
1213

13-
/* Reset and base */
14+
/* Reset */
1415
* {
1516
margin: 0;
1617
padding: 0;
1718
box-sizing: border-box;
1819
}
1920

2021
body {
21-
font-family: 'Poppins', system-ui, sans-serif;
22-
background: var(--dark-bg);
23-
color: var(--text-muted);
24-
transition: background 0.4s ease, color 0.4s ease;
22+
font-family: 'Inter', 'Poppins', system-ui, sans-serif;
23+
background: var(--bg-main);
24+
color: var(--text-main);
2525
line-height: 1.6;
26+
transition: var(--transition);
2627
}
2728

28-
/* Container */
29+
/* Layout container */
2930
.container {
3031
max-width: 1100px;
3132
margin: 0 auto;
32-
padding: 0 1rem;
33+
padding: 0 1.5rem;
3334
}
3435

3536
/* Theme toggle */
3637
.theme-toggle {
3738
position: fixed;
38-
right: 18px;
39-
top: 18px;
40-
width: 44px;
41-
height: 44px;
39+
top: 20px;
40+
right: 20px;
41+
background: var(--bg-hover);
42+
border: 1px solid var(--border-color);
43+
width: 42px;
44+
height: 42px;
4245
border-radius: 50%;
43-
background: var(--accent-purple);
44-
color: var(--white);
46+
color: var(--accent);
47+
font-size: 1.2rem;
48+
cursor: pointer;
4549
display: flex;
4650
align-items: center;
4751
justify-content: center;
48-
font-size: 1.3rem;
49-
cursor: pointer;
50-
z-index: 1000;
51-
box-shadow: 0 0 20px rgba(123, 97, 255, 0.5);
52+
transition: var(--transition);
5253
}
5354
.theme-toggle:hover {
54-
background: #9a84ff;
55-
box-shadow: 0 0 25px rgba(155, 130, 255, 0.7);
55+
background: var(--accent);
56+
color: #fff;
5657
}
5758

58-
/* Hero */
59+
/* Hero Section */
5960
.hero-outer {
60-
background: radial-gradient(circle at center, #0c0c0c, #000);
61-
color: var(--accent-gray);
62-
padding: 90px 0 60px;
6361
text-align: center;
64-
position: relative;
65-
overflow: hidden;
66-
}
67-
.hero-inner {
68-
display: flex;
69-
flex-direction: column;
70-
align-items: center;
71-
gap: 18px;
62+
padding: 100px 0 80px;
63+
background: linear-gradient(180deg, #0b0b0c, #111113);
7264
}
7365
.hero-logo {
7466
width: 130px;
7567
height: 130px;
7668
border-radius: 50%;
7769
object-fit: cover;
78-
box-shadow: 0 0 25px rgba(123, 97, 255, 0.3);
70+
box-shadow: 0 0 25px rgba(184, 156, 255, 0.2);
7971
}
8072
.name {
81-
font-size: 2.6rem;
73+
font-size: 2.8rem;
8274
font-weight: 700;
75+
color: var(--accent);
76+
margin-top: 20px;
8377
letter-spacing: 1px;
84-
color: var(--accent-purple);
85-
text-shadow: 0 0 18px rgba(123, 97, 255, 0.4);
8678
}
8779
.tagline {
88-
font-size: 1rem;
80+
font-size: 1.1rem;
8981
color: var(--text-muted);
82+
margin-top: 6px;
9083
opacity: 0.9;
91-
margin-bottom: 1rem;
9284
}
9385

9486
/* Buttons */
9587
.btn {
9688
display: inline-flex;
9789
align-items: center;
9890
justify-content: center;
99-
padding: 10px 16px;
91+
padding: 10px 18px;
10092
border-radius: var(--radius);
10193
font-weight: 600;
10294
text-decoration: none;
103-
border: none;
95+
border: 1px solid transparent;
10496
cursor: pointer;
105-
transition: all 0.3s ease;
97+
transition: var(--transition);
10698
}
10799
.btn.primary {
108-
background: var(--accent-purple);
109-
color: var(--white);
110-
box-shadow: 0 0 15px rgba(123, 97, 255, 0.4);
100+
background: var(--accent);
101+
color: #fff;
102+
box-shadow: 0 0 20px rgba(184, 156, 255, 0.25);
111103
}
112104
.btn.primary:hover {
113-
background: #9a84ff;
114-
box-shadow: 0 0 25px rgba(123, 97, 255, 0.6);
105+
background: #cbb7ff;
106+
box-shadow: 0 0 25px rgba(184, 156, 255, 0.4);
115107
}
116108
.btn.ghost {
117-
border: 1px solid var(--accent-purple);
118-
color: var(--accent-purple);
119109
background: transparent;
110+
color: var(--accent);
111+
border: 1px solid var(--accent);
120112
}
121113
.btn.ghost:hover {
122-
background: rgba(123, 97, 255, 0.1);
123-
box-shadow: 0 0 15px rgba(123, 97, 255, 0.3);
114+
background: rgba(184, 156, 255, 0.08);
124115
}
125116

126-
/* Sections */
117+
/* Section styling */
127118
.section {
128-
padding: 60px 0;
119+
padding: 70px 0;
129120
}
130121
.section h2 {
131-
font-size: 1.8rem;
132-
color: var(--accent-purple);
133-
margin-bottom: 20px;
134122
text-align: center;
135-
text-shadow: 0 0 15px rgba(123, 97, 255, 0.4);
123+
font-size: 1.9rem;
124+
color: var(--accent);
125+
margin-bottom: 25px;
126+
letter-spacing: 0.5px;
136127
}
137128
.section p {
138129
text-align: center;
@@ -143,97 +134,103 @@ body {
143134

144135
/* Project Cards */
145136
.projects-grid {
146-
margin-top: 30px;
137+
margin-top: 35px;
147138
display: grid;
148-
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
149-
gap: 20px;
139+
grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
140+
gap: 25px;
150141
}
151142
.project-card {
152-
background: var(--terminal-gray);
143+
background: var(--bg-surface);
153144
border-radius: var(--radius);
154145
overflow: hidden;
155-
box-shadow: 0 0 12px rgba(255, 255, 255, 0.05);
156-
transition: transform 0.3s ease, box-shadow 0.3s ease;
157-
color: var(--text-muted);
146+
border: 1px solid var(--border-color);
147+
transition: var(--transition);
158148
}
159149
.project-card:hover {
160150
transform: translateY(-6px);
161-
box-shadow: 0 0 25px rgba(123, 97, 255, 0.3);
151+
border-color: var(--accent);
152+
box-shadow: 0 0 20px rgba(184, 156, 255, 0.25);
162153
}
163154
.project-card img {
164155
width: 100%;
165-
height: 160px;
156+
height: 170px;
166157
object-fit: cover;
167158
}
168159
.project-body {
169-
padding: 15px;
160+
padding: 16px;
170161
}
171162
.project-body h3 {
172-
margin-bottom: 8px;
173-
color: var(--accent-purple);
163+
color: var(--accent);
164+
margin-bottom: 6px;
165+
font-size: 1.1rem;
166+
}
167+
.project-body p {
168+
font-size: 0.95rem;
169+
color: var(--text-muted);
174170
}
175171

176172
/* Contact */
173+
.contact-grid {
174+
display: grid;
175+
gap: 25px;
176+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
177+
margin-top: 30px;
178+
}
177179
.contact-card {
178-
background: var(--terminal-gray);
180+
background: var(--bg-surface);
179181
border-radius: var(--radius);
180182
padding: 20px;
181-
box-shadow: 0 0 10px rgba(255,255,255,0.05);
183+
border: 1px solid var(--border-color);
182184
}
183185
.contact-card h3 {
184-
color: var(--accent-purple);
186+
color: var(--accent);
187+
margin-bottom: 10px;
185188
}
186189
.contact-card a {
187-
color: var(--accent-gray);
190+
color: var(--text-main);
188191
text-decoration: none;
192+
transition: var(--transition);
189193
}
190194
.contact-card a:hover {
191-
color: var(--white);
195+
color: var(--accent);
192196
}
193197

194198
/* Footer */
195199
.footer {
196-
background: linear-gradient(90deg, #0e0e0e, #000);
197-
color: var(--accent-gray);
198-
padding: 20px 0;
199-
margin-top: 40px;
200-
border-top: 1px solid #222;
201-
}
202-
.footer-inner {
203-
display: flex;
204-
flex-wrap: wrap;
205-
justify-content: space-between;
206-
align-items: center;
207-
gap: 12px;
200+
background: var(--bg-surface);
201+
border-top: 1px solid var(--border-color);
202+
color: var(--text-muted);
203+
padding: 25px 0;
204+
text-align: center;
208205
}
209-
.footer .dev-link {
210-
color: var(--accent-purple);
211-
font-weight: 700;
206+
.footer a {
207+
color: var(--accent);
212208
text-decoration: none;
209+
font-weight: 600;
213210
}
214-
.footer .dev-link:hover {
215-
color: #a28eff;
211+
.footer a:hover {
212+
color: #cbb7ff;
216213
}
217214

218215
/* Back to top */
219216
#topBtn {
220217
position: fixed;
221-
right: 18px;
222-
bottom: 18px;
218+
right: 20px;
219+
bottom: 25px;
223220
width: 46px;
224221
height: 46px;
225222
border-radius: 50%;
226-
background: var(--accent-purple);
227-
color: var(--white);
223+
background: var(--accent);
224+
color: #fff;
228225
border: none;
229226
cursor: pointer;
230227
display: none;
231228
align-items: center;
232229
justify-content: center;
233230
font-size: 1.3rem;
234-
box-shadow: 0 0 15px rgba(123, 97, 255, 0.3);
231+
box-shadow: 0 0 15px rgba(184, 156, 255, 0.25);
235232
}
236233
#topBtn:hover {
237-
background: #9a84ff;
238-
box-shadow: 0 0 25px rgba(123, 97, 255, 0.6);
234+
background: #cbb7ff;
235+
box-shadow: 0 0 25px rgba(184, 156, 255, 0.4);
239236
}

0 commit comments

Comments
 (0)