Skip to content

Commit bf7a7c3

Browse files
SCodeGitSCodeGit
authored
Update style.css
1 parent c71a30a commit bf7a7c3

File tree

1 file changed

+272
-53
lines changed

1 file changed

+272
-53
lines changed

‎style.css‎

Lines changed: 272 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,303 @@
1-
21
:root{
3-
--navy:#071235;
4-
--blue:#1e63d3;
5-
--silver:#f2f4f8;
6-
--accent:#f6b75e;
7-
--bg-dark:#061221;
8-
--bg-light:#f8fbff;
9-
--text-dark:#0b1c2e;
10-
--text-light:#e9f2ff;
2+
--navy:#102c54; /* Deep royal blue */
3+
--blue:#2f80ed; /* Bright vivid blue */
4+
--silver:#f9fafc; /* Light silver white */
5+
--accent:#ffca3a; /* Royal gold */
6+
--bg-dark:#eef3ff; /* Very light background */
7+
--bg-light:#ffffff; /* Pure white for light sections */
8+
--text-dark:#031a3d; /* Deep navy text */
9+
--text-light:#0b1c2e; /* Slightly darker for legibility */
1110
--radius:12px;
1211
}
13-
*{box-sizing:border-box;margin:0;padding:0}
14-
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg-dark);color:var(--text-light);-webkit-font-smoothing:antialiased}
15-
.container{max-width:1100px;margin:0 auto;padding:0 1rem}
12+
13+
/* Base Reset */
14+
*{
15+
box-sizing:border-box;
16+
margin:0;
17+
padding:0;
18+
}
19+
body{
20+
font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;
21+
background:var(--bg-dark);
22+
color:var(--text-dark);
23+
-webkit-font-smoothing:antialiased;
24+
}
25+
.container{
26+
max-width:1100px;
27+
margin:0 auto;
28+
padding:0 1rem;
29+
}
1630

1731
/* THEME TOGGLE */
18-
.theme-toggle{position:fixed;right:18px;top:18px;background:rgba(255,255,255,0.06);color:var(--text-light);width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:999;box-shadow:0 6px 20px rgba(0,0,0,0.3)}
32+
.theme-toggle{
33+
position:fixed;
34+
right:18px;
35+
top:18px;
36+
background:rgba(255,255,255,0.6);
37+
color:var(--text-dark);
38+
width:44px;
39+
height:44px;
40+
border-radius:50%;
41+
display:flex;
42+
align-items:center;
43+
justify-content:center;
44+
cursor:pointer;
45+
z-index:999;
46+
box-shadow:0 6px 20px rgba(0,0,0,0.2);
47+
}
1948

2049
/* HERO */
21-
.hero-outer{position:relative;padding:60px 0 40px;overflow:hidden}
22-
.hero-inner{display:flex;align-items:center;gap:24px}
23-
.logo-wrap{flex:0 0 140px}
24-
.hero-logo{width:140px;height:140px;object-fit:contain;border-radius:16px;box-shadow:0 8px 30px rgba(0,0,0,0.4);background:linear-gradient(135deg,var(--blue),var(--navy))}
25-
.hero-text .name{font-size:2rem;margin-bottom:6px}
26-
.hero-text .tagline{color:rgba(255,255,255,0.9);margin-bottom:12px}
27-
.hero-cta{display:flex;gap:12px}
28-
.btn{padding:10px 14px;border-radius:10px;border:0;cursor:pointer;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
29-
.primary{background:var(--accent);color:#041027}
30-
.ghost{background:transparent;color:var(--silver);border:1px solid rgba(255,255,255,0.06)}
50+
.hero-outer{
51+
position:relative;
52+
padding:60px 0 40px;
53+
overflow:hidden;
54+
background:linear-gradient(135deg,var(--blue),var(--accent));
55+
color:#fff;
56+
}
57+
.hero-inner{
58+
display:flex;
59+
align-items:center;
60+
gap:24px;
61+
}
62+
.logo-wrap{
63+
flex:0 0 140px;
64+
}
65+
.hero-logo{
66+
width:140px;
67+
height:140px;
68+
object-fit:contain;
69+
border-radius:16px;
70+
box-shadow:0 8px 30px rgba(0,0,0,0.25);
71+
background:linear-gradient(135deg,var(--accent),var(--blue));
72+
}
73+
.hero-text .name{
74+
font-size:2.3rem;
75+
margin-bottom:6px;
76+
font-weight:800;
77+
}
78+
.hero-text .tagline{
79+
color:#fff;
80+
font-size:1.1rem;
81+
margin-bottom:12px;
82+
}
83+
.hero-cta{
84+
display:flex;
85+
gap:12px;
86+
}
87+
.btn{
88+
padding:10px 14px;
89+
border-radius:10px;
90+
border:0;
91+
cursor:pointer;
92+
font-weight:700;
93+
text-decoration:none;
94+
display:inline-flex;
95+
align-items:center;
96+
gap:8px;
97+
transition:all 0.3s ease;
98+
}
99+
.primary{
100+
background:var(--accent);
101+
color:#041027;
102+
}
103+
.primary:hover{
104+
background:#ffd34d;
105+
}
106+
.ghost{
107+
background:transparent;
108+
color:#fff;
109+
border:1px solid rgba(255,255,255,0.6);
110+
}
111+
.ghost:hover{
112+
background:rgba(255,255,255,0.2);
113+
}
31114

32115
/* Watermark */
33-
.hero-watermark{position:absolute;right:-60px;top:10%;opacity:0.06;transform:rotate(-12deg);width:480px}
34-
.hero-watermark img{width:100%;display:block}
116+
.hero-watermark{
117+
position:absolute;
118+
right:-60px;
119+
top:10%;
120+
opacity:0.06;
121+
transform:rotate(-12deg);
122+
width:480px;
123+
}
124+
.hero-watermark img{
125+
width:100%;
126+
display:block;
127+
}
35128

36129
/* Sections */
37-
.section{padding:48px 0}
38-
.section h2{color:var(--accent);margin-bottom:12px}
39-
.section p{color:rgba(255,255,255,0.9)}
130+
.section{
131+
padding:60px 0;
132+
}
133+
.section h2{
134+
color:var(--accent);
135+
margin-bottom:12px;
136+
font-size:1.8rem;
137+
}
138+
.section p{
139+
color:var(--text-dark);
140+
font-size:1rem;
141+
line-height:1.6;
142+
}
40143

41144
/* About */
42-
.about p{max-width:820px}
145+
.about p{
146+
max-width:820px;
147+
}
43148

44149
/* Projects grid */
45-
.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
46-
.project-card{background:rgba(255,255,255,0.03);padding:0;border-radius:10px;overflow:hidden;display:block;border:1px solid rgba(255,255,255,0.03)}
47-
.project-card img{height:140px;width:100%;object-fit:cover}
48-
.project-body{padding:12px}
49-
.placeholder{display:flex;align-items:center;justify-content:center;min-height:140px}
150+
.projects-grid{
151+
display:grid;
152+
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
153+
gap:18px;
154+
}
155+
.project-card{
156+
background:#fff;
157+
padding:0;
158+
border-radius:10px;
159+
overflow:hidden;
160+
display:block;
161+
border:1px solid rgba(0,0,0,0.08);
162+
box-shadow:0 4px 14px rgba(0,0,0,0.05);
163+
transition:transform 0.3s ease;
164+
}
165+
.project-card:hover{
166+
transform:translateY(-6px);
167+
}
168+
.project-card img{
169+
height:140px;
170+
width:100%;
171+
object-fit:cover;
172+
}
173+
.project-body{
174+
padding:12px;
175+
color:var(--text-dark);
176+
}
177+
.placeholder{
178+
display:flex;
179+
align-items:center;
180+
justify-content:center;
181+
min-height:140px;
182+
}
50183

51184
/* Contact */
52-
.contact-grid{display:grid;grid-template-columns:1fr 420px;gap:18px}
53-
.contact-card{background:rgba(255,255,255,0.03);padding:18px;border-radius:10px;border:1px solid rgba(255,255,255,0.03)}
185+
.contact-grid{
186+
display:grid;
187+
grid-template-columns:1fr 420px;
188+
gap:18px;
189+
}
190+
.contact-card{
191+
background:#fff;
192+
padding:18px;
193+
border-radius:10px;
194+
border:1px solid rgba(0,0,0,0.08);
195+
box-shadow:0 4px 14px rgba(0,0,0,0.05);
196+
}
54197

55198
/* Footer */
56-
.footer{background:linear-gradient(90deg,var(--navy),var(--blue));padding:18px;margin-top:24px;color:var(--silver)}
57-
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:12px}
58-
.footer .dev-link{color:var(--silver);font-weight:700;text-decoration:none;position:relative}
59-
.dev-link::after{content:'';position:absolute;left:0;bottom:-4px;width:0;height:2px;background:linear-gradient(90deg,var(--blue),var(--navy));transition:width .35s ease;border-radius:2px}
60-
.dev-link:hover::after{width:100%}
61-
.social-links a{color:var(--silver);margin-left:12px}
199+
.footer{
200+
background:linear-gradient(90deg,var(--blue),var(--accent));
201+
padding:18px;
202+
margin-top:24px;
203+
color:var(--text-dark);
204+
}
205+
.footer-inner{
206+
display:flex;
207+
justify-content:space-between;
208+
align-items:center;
209+
gap:12px;
210+
flex-wrap:wrap;
211+
}
212+
.footer .dev-link{
213+
color:var(--text-dark);
214+
font-weight:700;
215+
text-decoration:none;
216+
position:relative;
217+
}
218+
.dev-link::after{
219+
content:'';
220+
position:absolute;
221+
left:0;
222+
bottom:-4px;
223+
width:0;
224+
height:2px;
225+
background:linear-gradient(90deg,var(--navy),var(--accent));
226+
transition:width .35s ease;
227+
border-radius:2px;
228+
}
229+
.dev-link:hover::after{
230+
width:100%;
231+
}
232+
.social-links a{
233+
color:var(--text-dark);
234+
margin-left:12px;
235+
}
62236

63237
/* Top button */
64-
#topBtn{position:fixed;right:18px;bottom:18px;width:48px;height:48px;border-radius:50%;background:var(--blue);color:#fff;border:none;display:none;align-items:center;justify-content:center;cursor:pointer;z-index:999}
238+
#topBtn{
239+
position:fixed;
240+
right:18px;
241+
bottom:18px;
242+
width:48px;
243+
height:48px;
244+
border-radius:50%;
245+
background:var(--accent);
246+
color:#041027;
247+
border:none;
248+
display:none;
249+
align-items:center;
250+
justify-content:center;
251+
cursor:pointer;
252+
z-index:999;
253+
box-shadow:0 4px 20px rgba(0,0,0,0.2);
254+
}
65255

66256
/* Reveal animation */
67-
.reveal{opacity:0;transform:translateY(18px);transition:all .6s cubic-bezier(.2,.9,.3,1)}
68-
.reveal.visible{opacity:1;transform:none}
257+
.reveal{
258+
opacity:0;
259+
transform:translateY(18px);
260+
transition:all .6s cubic-bezier(.2,.9,.3,1);
261+
}
262+
.reveal.visible{
263+
opacity:1;
264+
transform:none;
265+
}
69266
.delay-1{transition-delay:.12s}
70267
.delay-2{transition-delay:.22s}
71268

72269
/* Light theme (switch) */
73-
body.light{background:var(--bg-light);color:var(--text-dark)}
74-
body.light .hero-logo{background:linear-gradient(135deg,var(--navy),var(--blue));box-shadow:0 6px 18px rgba(0,0,0,0.06)}
75-
body.light .footer{background:linear-gradient(90deg,#f0f4fb,#eaf2ff);color:var(--text-dark)}
76-
body.light .dev-link{color:var(--text-dark)}
270+
body.light{
271+
background:var(--bg-light);
272+
color:var(--text-dark);
273+
}
274+
body.light .hero-logo{
275+
background:linear-gradient(135deg,var(--accent),var(--blue));
276+
box-shadow:0 6px 18px rgba(0,0,0,0.06);
277+
}
278+
body.light .footer{
279+
background:linear-gradient(90deg,var(--blue),var(--accent));
280+
color:var(--text-dark);
281+
}
282+
body.light .dev-link{
283+
color:var(--text-dark);
284+
}
77285

78286
/* Responsive */
79287
@media(max-width:900px){
80-
.hero-inner{flex-direction:column;align-items:center;text-align:center;padding:0 1rem}
81-
.hero-watermark{display:none}
82-
.contact-grid{grid-template-columns:1fr}
83-
.nav{display:none}
288+
.hero-inner{
289+
flex-direction:column;
290+
align-items:center;
291+
text-align:center;
292+
padding:0 1rem;
293+
}
294+
.hero-watermark{
295+
display:none;
296+
}
297+
.contact-grid{
298+
grid-template-columns:1fr;
299+
}
300+
.nav{
301+
display:none;
302+
}
84303
}

0 commit comments

Comments
 (0)