Skip to content

Commit 09189d7

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

File tree

1 file changed

+52
-273
lines changed

1 file changed

+52
-273
lines changed

‎style.css‎

Lines changed: 52 additions & 273 deletions
Original file line numberDiff line numberDiff line change
@@ -1,303 +1,82 @@
1-
:root{
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 */
1+
--navy:#071235;
2+
--blue:#1e63d3;
3+
--silver:#f2f4f8;
4+
--accent:#f6b75e;
5+
--bg-dark:#061221;
6+
--bg-light:#f8fbff;
7+
--text-dark:#0b1c2e;
8+
--text-light:#e9f2ff;
109
--radius:12px;
1110
}
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-
}
11+
*{box-sizing:border-box;margin:0;padding:0}
12+
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg-dark);color:var(--text-light);-webkit-font-smoothing:antialiased}
13+
.container{max-width:1100px;margin:0 auto;padding:0 1rem}
3014

3115
/* THEME TOGGLE */
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-
}
16+
.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)}
4817

4918
/* HERO */
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-
}
19+
.hero-outer{position:relative;padding:60px 0 40px;overflow:hidden}
20+
.hero-inner{display:flex;align-items:center;gap:24px}
21+
.logo-wrap{flex:0 0 140px}
22+
.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))}
23+
.hero-text .name{font-size:2rem;margin-bottom:6px}
24+
.hero-text .tagline{color:rgba(255,255,255,0.9);margin-bottom:12px}
25+
.hero-cta{display:flex;gap:12px}
26+
.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}
27+
.primary{background:var(--accent);color:#041027}
28+
.ghost{background:transparent;color:var(--silver);border:1px solid rgba(255,255,255,0.06)}
11429

11530
/* Watermark */
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-
}
31+
.hero-watermark{position:absolute;right:-60px;top:10%;opacity:0.06;transform:rotate(-12deg);width:480px}
32+
.hero-watermark img{width:100%;display:block}
12833

12934
/* Sections */
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-
}
35+
.section{padding:48px 0}
36+
.section h2{color:var(--accent);margin-bottom:12px}
37+
.section p{color:rgba(255,255,255,0.9)}
14338

14439
/* About */
145-
.about p{
146-
max-width:820px;
147-
}
40+
.about p{max-width:820px}
14841

14942
/* Projects grid */
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-
}
43+
.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
44+
.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)}
45+
.project-card img{height:140px;width:100%;object-fit:cover}
46+
.project-body{padding:12px}
47+
.placeholder{display:flex;align-items:center;justify-content:center;min-height:140px}
18348

18449
/* Contact */
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-
}
50+
.contact-grid{display:grid;grid-template-columns:1fr 420px;gap:18px}
51+
.contact-card{background:rgba(255,255,255,0.03);padding:18px;border-radius:10px;border:1px solid rgba(255,255,255,0.03)}
19752

19853
/* Footer */
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-
}
54+
.footer{background:linear-gradient(90deg,var(--navy),var(--blue));padding:18px;margin-top:24px;color:var(--silver)}
55+
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:12px}
56+
.footer .dev-link{color:var(--silver);font-weight:700;text-decoration:none;position:relative}
57+
.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}
58+
.dev-link:hover::after{width:100%}
59+
.social-links a{color:var(--silver);margin-left:12px}
23660

23761
/* Top button */
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-
}
62+
#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}
25563

25664
/* Reveal animation */
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-
}
65+
.reveal{opacity:0;transform:translateY(18px);transition:all .6s cubic-bezier(.2,.9,.3,1)}
66+
.reveal.visible{opacity:1;transform:none}
26667
.delay-1{transition-delay:.12s}
26768
.delay-2{transition-delay:.22s}
26869

26970
/* Light theme (switch) */
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-
}
71+
body.light{background:var(--bg-light);color:var(--text-dark)}
72+
body.light .hero-logo{background:linear-gradient(135deg,var(--navy),var(--blue));box-shadow:0 6px 18px rgba(0,0,0,0.06)}
73+
body.light .footer{background:linear-gradient(90deg,#f0f4fb,#eaf2ff);color:var(--text-dark)}
74+
body.light .dev-link{color:var(--text-dark)}
28575

28676
/* Responsive */
28777
@media(max-width:900px){
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-
}
78+
.hero-inner{flex-direction:column;align-items:center;text-align:center;padding:0 1rem}
79+
.hero-watermark{display:none}
80+
.contact-grid{grid-template-columns:1fr}
81+
.nav{display:none}
30382
}

0 commit comments

Comments
 (0)