Skip to content

Commit 5bcc643

Browse files
SCodeGitSCodeGit
authored
Update style.css
1 parent a55bfd0 commit 5bcc643

File tree

1 file changed

+111
-72
lines changed

1 file changed

+111
-72
lines changed

‎style.css‎

Lines changed: 111 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,124 @@
1+
12
/* Variables & base */
2-
:root {
3-
--bg: #000000; /* Tesla black background */
4-
--paper: #111111; /* slightly lighter cards */
5-
--primary: #ffffff; /* main text/white */
6-
--accent: #e82127; /* Tesla red accent */
7-
--muted: #aaaaaa; /* secondary text */
8-
--text: #ffffff; /* primary text color */
9-
--card: #1a1a1a; /* card background */
10-
--container: 1100px;
11-
--radius: 12px;
3+
:root{
4+
--bg:#0e1620; /* deep charcoal body background for sleek feel */
5+
--paper:#0f1720; /* darker cards */
6+
--primary:#1e90ff; /* sleek blue */
7+
--accent:#f6b75e; /* warm gold accent */
8+
--muted:#98a3b3;
9+
--text:#e6eef6;
10+
--card:#0b1116;
11+
--container:1100px;
12+
--radius:12px;
1213
}
13-
14-
* { box-sizing: border-box; }
15-
html, body { height: 100%; }
16-
body {
17-
margin: 0;
18-
font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
19-
color: var(--text);
20-
background: linear-gradient(180deg, #000000, #111111);
21-
-webkit-font-smoothing: antialiased;
22-
-moz-osx-font-smoothing: grayscale;
14+
*{box-sizing:border-box}
15+
html,body{height:100%}
16+
body{
17+
margin:0;
18+
font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
19+
color:var(--text);
20+
background:linear-gradient(180deg,#07101a, #0d1a26);
21+
-webkit-font-smoothing:antialiased;
22+
-moz-osx-font-smoothing:grayscale;
2323
}
2424

2525
/* Container */
26-
.container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }
26+
.container{max-width:var(--container);margin:0 auto;padding:0 20px}
2727

2828
/* Header */
29-
.site-header {
30-
background: rgba(0, 0, 0, 0.6);
31-
backdrop-filter: blur(6px);
32-
position: sticky;
33-
top: 0;
34-
z-index: 90;
35-
border-bottom: 1px solid rgba(255,255,255,0.03);
36-
}
29+
.site-header{background:rgba(6,10,18,0.6);backdrop-filter:blur(6px);position:sticky;top:0;z-index:90;border-bottom:1px solid rgba(255,255,255,0.03)}
30+
.header-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
31+
.brand{display:flex;gap:12px;align-items:center}
32+
.logo{width:48px;height:48px;border-radius:10px;background:linear-gradient(135deg,var(--primary),#156fe6);display:flex;align-items:center;justify-content:center;font-weight:800;color:#041027}
33+
.org-name{font-size:1rem;margin:0}
34+
.tagline{font-size:12px;color:var(--muted)}
3735

38-
.header-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
39-
.brand { display: flex; gap: 12px; align-items: center; }
40-
.logo {
41-
width: 48px;
42-
height: 48px;
43-
border-radius: 10px;
44-
background: linear-gradient(135deg, var(--accent), #c31c24);
45-
display: flex;
46-
align-items: center;
47-
justify-content: center;
48-
font-weight: 800;
49-
color: #000000;
50-
}
51-
.org-name { font-size: 1rem; margin: 0; }
52-
.tagline { font-size: 12px; color: var(--muted); }
36+
.nav{display:flex;gap:14px;align-items:center}
37+
.nav a{color:var(--muted);text-decoration:none;font-weight:600}
38+
.btn{padding:8px 12px;border-radius:10px;border:0;cursor:pointer;font-weight:700}
39+
.small{padding:6px 10px;font-size:13px}
40+
.primary{background:var(--primary);color:#041027}
41+
.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--text)}
42+
.nav-toggle{display:none;background:transparent;border:0;color:var(--text);font-size:18px}
5343

54-
.nav { display: flex; gap: 14px; align-items: center; }
55-
.nav a { color: var(--muted); text-decoration: none; font-weight: 600; }
44+
/* Hero */
45+
.hero{position:relative;height:55vh;display:flex;align-items:center;justify-content:center;overflow:hidden;border-bottom:1px solid rgba(255,255,255,0.02)}
46+
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.5) contrast(.95)}
47+
.hero-overlay{position:relative;z-index:2;text-align:center;padding:36px}
48+
.hero-overlay h2{font-size:2rem;margin:0 0 8px}
49+
.hero-overlay p{color:var(--muted);margin-bottom:12px}
50+
.hero-ctas{display:flex;gap:12px;justify-content:center}
5651

57-
.btn { padding: 8px 12px; border-radius: 10px; border: 0; cursor: pointer; font-weight: 700; }
58-
.small { padding: 6px 10px; font-size: 13px; }
59-
.primary { background: var(--accent); color: var(--text); }
60-
.ghost { background: transparent; border: 1px solid rgba(255,255,255,0.06); color: var(--text); }
52+
/* Sections */
53+
.section{padding:48px 0}
54+
.pale{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent)}
55+
.section h2, .section h3{color:var(--primary)}
56+
.lead{color:var(--muted);max-width:760px}
6157

62-
.nav-toggle { display: none; background: transparent; border: 0; color: var(--text); font-size: 18px; }
58+
/* Grids */
59+
.section-grid{display:grid;grid-template-columns:1fr 360px;gap:28px;align-items:start}
60+
@media(max-width:900px){.section-grid{grid-template-columns:1fr}}
61+
.grid.three{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
62+
@media(max-width:900px){.grid.three{grid-template-columns:1fr}}
63+
.programs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
64+
.card{background:rgba(255,255,255,0.02);padding:18px;border-radius:var(--radius);box-shadow:0 8px 30px rgba(2,6,12,0.6);border:1px solid rgba(255,255,255,0.02)}
6365

64-
/* Hero */
65-
.hero {
66-
position: relative;
67-
height: 55vh;
68-
display: flex;
69-
align-items: center;
70-
justify-content: center;
71-
overflow: hidden;
72-
border-bottom: 1px solid rgba(255,255,255,0.02);
73-
}
74-
.hero-img {
75-
position: absolute;
76-
inset: 0;
77-
width: 100%;
78-
height: 100%;
79-
object-fit: cover;
80-
filter: brightness(.5) contrast(.95);
66+
/* Stats */
67+
.stat-card{display:flex;flex-direction:column;align-items:center;padding:18px;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent)}
68+
.stat-card .num{font-size:2rem;color:var(--accent);font-weight:800}
69+
.stat-card .label{color:var(--muted)}
70+
71+
/* Profiles flight grid */
72+
.profiles-grid.flight{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;align-items:start}
73+
.profile-card{display:flex;gap:12px;align-items:center;background:rgba(255,255,255,0.02);padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.02)}
74+
.profile-card img{width:72px;height:72px;border-radius:8px;object-fit:cover}
75+
.profile-body strong{display:block}
76+
.profile-body small{color:var(--muted)}
77+
78+
/* Gallery */
79+
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
80+
.gallery-item{width:100%;height:160px;object-fit:cover;border-radius:10px;cursor:pointer;display:block}
81+
82+
/* Partners */
83+
.partners-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
84+
.partner-card img{border-radius:8px}
85+
86+
/* Donate tabs */
87+
.donate-tabs{display:flex;gap:8px;margin-bottom:12px}
88+
.tab-btn{padding:8px 12px;border-radius:8px;background:transparent;border:1px solid rgba(255,255,255,0.03);color:var(--muted);cursor:pointer}
89+
.tab-btn.active{background:var(--accent);color:#041027;border-color:transparent}
90+
.hidden{display:none}
91+
92+
/* Contact layout */
93+
.contact-grid{display:grid;grid-template-columns:1fr 360px;gap:24px}
94+
@media(max-width:880px){.contact-grid{grid-template-columns:1fr}}
95+
96+
/* Footer */
97+
.footer{background:linear-gradient(180deg,#041124,#051226);color:var(--muted);padding:20px 0}
98+
.footer-grid{display:flex;justify-content:space-between;align-items:center;gap:12px}
99+
.footer-nav a{color:var(--muted);margin-left:10px;text-decoration:none}
100+
101+
/* Lightbox */
102+
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,0.75);display:none;align-items:center;justify-content:center;z-index:999}
103+
.lightbox.active{display:flex}
104+
.lightbox-inner{max-width:90%;max-height:90%}
105+
.lightbox img{max-width:100%;max-height:85vh;border-radius:8px}
106+
107+
/* Back to top */
108+
#topBtn{position:fixed;right:18px;bottom:18px;width:50px;height:50px;border-radius:50%;background:var(--primary);color:#041027;border:0;font-size:20px;display:none;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 10px 30px rgba(30,144,255,0.14)}
109+
110+
/* Reveal animations */
111+
.reveal{opacity:0;transform:translateY(18px);transition:all .6s cubic-bezier(.2,.9,.3,1);will-change:opacity,transform}
112+
.reveal.visible{opacity:1;transform:none}
113+
.delay-1{transition-delay:.12s}
114+
.delay-2{transition-delay:.22s}
115+
.delay-3{transition-delay:.32s}
116+
117+
/* Small screens */
118+
@media(max-width:700px){
119+
.nav{display:none}
120+
.nav-toggle{display:block}
121+
.hero{height:40vh}
122+
.hero-overlay h2{font-size:1.25rem}
123+
.footer-grid{flex-direction:column;align-items:flex-start}
81124
}
82-
.hero-overlay { position: relative; z-index: 2; text-align: center; padding: 36px; }
83-
.hero-overlay h2 { font-size: 2rem; margin: 0 0 8px; color: var(--primary); }
84-
.hero-overlay p { color: var(--muted); margin-bottom: 12px; }
85-
.hero-ctas { display: flex; gap: 12px; justify-content: center;

0 commit comments

Comments
 (0)