11: root {
2- --bg-color : # 080808 ;
3- --light-bg : # 1a1a1a ;
2+ --bg-color : # 050505 ;
3+ --light-bg : # 111111 ;
44 --dark-bg : # 000000 ;
5- --text-color : # ffffff ;
6- --accent-color : # 97c8ff ;
7- --accent-hover : # 7eb5f5 ;
8- --btn-primary : # 1C47B3 ;
9- --font-main : 'Poppins ' , sans-serif;
5+ --text-color : # e0e0e0 ;
6+ --accent-color : # 3b82f6 ;
7+ --accent-hover : # 60a5fa ;
8+ --btn-primary : # 2563eb ;
9+ --font-main : 'Inter ' , sans-serif;
1010}
1111
1212* {
1919 background-color : var (--bg-color );
2020 color : var (--text-color );
2121 font-family : var (--font-main );
22- line-height : 1.6 ;
23- font-size : 16 px ;
22+ line-height : 1.7 ;
23+ font-size : 18 px ;
2424 -webkit-font-smoothing : antialiased;
2525}
2626
4848
4949.container {
5050 width : 100% ;
51- max-width : 1170 px ;
51+ max-width : 1200 px ;
5252 margin : 0 auto;
53- padding : 0 20 px ;
53+ padding : 0 24 px ;
5454}
5555
5656/* Header */
@@ -164,28 +164,226 @@ img {
164164 border : 2px solid var (--accent-color );
165165}
166166
167- /* Index / Welcome */
168- .welcome-section {
167+ /* Layout Utilities */
168+ .text-center { text-align : center; }
169+ .mt-3 { margin-top : 1.5rem ; }
170+ .mt-4 { margin-top : 2rem ; }
171+ .section-padding { padding : 120px 0 ; }
172+ .bg-alt { background-color : var (--light-bg ); }
173+ .bg-accent { background-color : rgba (28 , 71 , 179 , 0.1 ); }
174+ .lead-text { font-size : 1.15rem ; color : # ccc ; max-width : 800px ; margin : 0 auto; line-height : 1.8 ; }
175+
176+ .grid-2 { display : grid; grid-template-columns : repeat (2 , 1fr ); gap : 40px ; }
177+ .grid-3 { display : grid; grid-template-columns : repeat (3 , 1fr ); gap : 30px ; }
178+ .align-center { align-items : center; }
179+
180+ /* Buttons Enhancement */
181+ .btn-large { padding : 15px 35px ; font-size : 1.1rem ; }
182+ .link-with-arrow { color : var (--accent-color ); display : inline-flex; align-items : center; gap : 5px ; font-weight : 500 ; transition : gap 0.3s ease; }
183+ .link-with-arrow : hover { gap : 8px ; color : var (--accent-hover ); }
184+
185+ /* Hero Section */
186+ .hero-section {
187+ padding : 120px 0 100px ;
169188 text-align : center;
170- margin-bottom : 60px ;
171- padding : 40px 20px ;
172- background-color : var (--light-bg );
173- border-radius : 10px ;
189+ position : relative;
190+ overflow : hidden;
191+ }
192+ .gradient-bg {
193+ background : linear-gradient (135deg , rgba (37 , 99 , 235 , 0.15 ) 0% , rgba (5 , 5 , 5 , 1 ) 40% , rgba (5 , 5 , 5 , 1 ) 100% );
194+ background-size : 200% 200% ;
195+ animation : gradient-animation 10s ease infinite;
196+ }
197+ @keyframes gradient-animation {
198+ 0% { background-position : 0% 50% ; }
199+ 50% { background-position : 100% 50% ; }
200+ 100% { background-position : 0% 50% ; }
201+ }
202+ @media (prefers-reduced-motion : reduce) {
203+ .gradient-bg { animation : none; }
174204}
175205
176- .page-title {
177- color : var (--btn-primary );
178- font-size : 36px ;
206+ .hero-title {
207+ font-size : clamp (2.5rem , 5vw , 4rem );
208+ font-weight : 700 ;
209+ line-height : 1.2 ;
210+ margin-bottom : 20px ;
211+ background : linear-gradient (to right, # ffffff, # 93c5fd );
212+ -webkit-background-clip : text;
213+ -webkit-text-fill-color : transparent;
214+ }
215+ .hero-subtitle {
216+ font-size : clamp (1.1rem , 2vw , 1.3rem );
217+ color : # aaa ;
218+ max-width : 700px ;
219+ margin : 0 auto 40px ;
220+ }
221+
222+ .hero-actions {
223+ display : flex;
224+ gap : 15px ;
225+ justify-content : center;
226+ }
227+
228+ /* Feature Cards (Community Areas) */
229+ .feature-card {
230+ background : # 0a0a0a ;
231+ border : 1px solid rgba (255 , 255 , 255 , 0.08 );
232+ box-shadow : 0 4px 6px -1px rgba (0 , 0 , 0 , 0.1 ), 0 2px 4px -1px rgba (0 , 0 , 0 , 0.06 );
233+ border-radius : 16px ;
234+ padding : 30px ;
235+ transition : transform 0.3s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
236+ }
237+ .feature-card : hover {
238+ transform : translateY (-4px );
239+ background : rgba (255 , 255 , 255 , 0.03 );
240+ border-color : rgba (59 , 130 , 246 , 0.3 );
241+ box-shadow : 0 20px 25px -5px rgba (0 , 0 , 0 , 0.2 ), 0 10px 10px -5px rgba (0 , 0 , 0 , 0.1 );
242+ }
243+ .feature-icon {
244+ color : var (--accent-color );
245+ margin-bottom : 20px ;
246+ }
247+ .feature-card h3 {
248+ font-size : 1.4rem ;
179249 margin-bottom : 15px ;
180250}
251+ .feature-card p {
252+ color : # aaa ;
253+ font-size : 0.95rem ;
254+ }
181255
182- .page-description {
183- font-size : 18px ;
184- margin-bottom : 30px ;
185- color : # ddd ;
256+ /* How We Operate */
257+ .feature-list {
258+ list-style : none;
259+ text-align : left;
260+ }
261+ .feature-list li {
262+ display : flex;
263+ align-items : flex-start;
264+ margin-bottom : 20px ;
265+ font-size : 1.1rem ;
266+ color : # ccc ;
267+ }
268+ .list-icon {
269+ color : var (--accent-color );
270+ margin-right : 15px ;
271+ flex-shrink : 0 ;
272+ }
273+ .feature-list strong {
274+ color : # fff ;
186275}
187276
188- .hero-actions {
277+ /* Highlight Box */
278+ .highlight-box {
279+ background : linear-gradient (90deg , rgba (28 , 71 , 179 , 0.2 ) 0% , rgba (28 , 71 , 179 , 0 ) 100% );
280+ border-left : 4px solid var (--btn-primary );
281+ padding : 20px ;
282+ border-radius : 0 8px 8px 0 ;
283+ display : inline-block;
284+ }
285+ .highlight-text {
286+ font-size : 1.25rem ;
287+ font-style : italic;
288+ color : var (--accent-hover );
289+ }
290+
291+ /* Featured Project */
292+ .project-card-featured {
293+ background : # 0a0a0a ;
294+ border : 1px solid rgba (255 , 255 , 255 , 0.08 );
295+ box-shadow : 0 4px 6px -1px rgba (0 , 0 , 0 , 0.1 ), 0 2px 4px -1px rgba (0 , 0 , 0 , 0.06 );
296+ border-radius : 16px ;
297+ padding : 40px ;
298+ overflow : hidden;
299+ text-align : left;
300+ transition : transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
301+ }
302+ .project-card-featured : hover {
303+ transform : translateY (-4px );
304+ border-color : rgba (59 , 130 , 246 , 0.3 );
305+ box-shadow : 0 20px 25px -5px rgba (0 , 0 , 0 , 0.2 ), 0 10px 10px -5px rgba (0 , 0 , 0 , 0.1 );
306+ }
307+ .badge {
308+ display : inline-block;
309+ background : rgba (28 , 71 , 179 , 0.3 );
310+ color : var (--accent-color );
311+ padding : 5px 12px ;
312+ border-radius : 20px ;
313+ font-size : 0.85rem ;
314+ font-weight : 600 ;
315+ margin-bottom : 15px ;
316+ }
317+ .project-title {
318+ font-size : 2.5rem ;
319+ margin-bottom : 15px ;
320+ }
321+ .project-description {
322+ font-size : 1.1rem ;
323+ color : # aaa ;
324+ margin-bottom : 25px ;
325+ }
326+ .screenshot-placeholder {
327+ background : # 111 ;
328+ border : 1px solid # 333 ;
329+ border-radius : 8px ;
330+ overflow : hidden;
331+ box-shadow : 0 20px 40px rgba (0 , 0 , 0 , 0.4 );
332+ }
333+ .browser-top {
334+ background : # 222 ;
335+ padding : 10px 15px ;
336+ display : flex;
337+ gap : 8px ;
338+ }
339+ .dot {
340+ width : 12px ;
341+ height : 12px ;
342+ border-radius : 50% ;
343+ background : # 555 ;
344+ }
345+ .browser-content {
346+ height : 250px ;
347+ display : flex;
348+ flex-direction : column;
349+ align-items : center;
350+ justify-content : center;
351+ background : # 0a0a0a ;
352+ }
353+
354+ /* Partners */
355+ .partner-grid {
356+ display : flex;
357+ justify-content : center;
358+ gap : 40px ;
359+ flex-wrap : wrap;
360+ }
361+ .partner-logo {
362+ padding : 20px 40px ;
363+ background : # 0a0a0a ;
364+ border-radius : 16px ;
365+ border : 1px solid rgba (255 , 255 , 255 , 0.08 );
366+ box-shadow : 0 4px 6px -1px rgba (0 , 0 , 0 , 0.1 ), 0 2px 4px -1px rgba (0 , 0 , 0 , 0.06 );
367+ color : # 888 ;
368+ transition : color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
369+ }
370+ .partner-logo : hover {
371+ color : # fff ;
372+ transform : translateY (-4px );
373+ border-color : rgba (59 , 130 , 246 , 0.3 );
374+ box-shadow : 0 20px 25px -5px rgba (0 , 0 , 0 , 0.2 ), 0 10px 10px -5px rgba (0 , 0 , 0 , 0.1 );
375+ }
376+
377+ /* Final CTA */
378+ .cta-title {
379+ font-size : 2.5rem ;
380+ margin-bottom : 15px ;
381+ }
382+ .cta-text {
383+ font-size : 1.2rem ;
384+ color : # ccc ;
385+ }
386+ .cta-actions {
189387 display : flex;
190388 gap : 15px ;
191389 justify-content : center;
@@ -208,14 +406,18 @@ img {
208406}
209407
210408.post-card {
211- background-color : var (--light-bg );
212- border-radius : 8px ;
409+ background-color : # 0a0a0a ;
410+ border : 1px solid rgba (255 , 255 , 255 , 0.08 );
411+ border-radius : 16px ;
412+ box-shadow : 0 4px 6px -1px rgba (0 , 0 , 0 , 0.1 ), 0 2px 4px -1px rgba (0 , 0 , 0 , 0.06 );
213413 overflow : hidden;
214- transition : transform 0.3s ease;
414+ transition : transform 0.3s ease, border-color 0.3 s ease , box-shadow 0.3 s ease ;
215415}
216416
217417.post-card : hover {
218- transform : translateY (-5px );
418+ transform : translateY (-4px );
419+ border-color : rgba (59 , 130 , 246 , 0.3 );
420+ box-shadow : 0 20px 25px -5px rgba (0 , 0 , 0 , 0.2 ), 0 10px 10px -5px rgba (0 , 0 , 0 , 0.1 );
219421}
220422
221423.post-card-image img {
@@ -355,4 +557,19 @@ img {
355557 .single-post-container .entry-title {
356558 font-size : 28px ;
357559 }
560+ .grid-2 , .grid-3 {
561+ grid-template-columns : 1fr ;
562+ }
563+ .hero-actions , .cta-actions {
564+ flex-direction : column;
565+ }
566+ .project-card-featured {
567+ padding : 20px ;
568+ }
569+ .operate-image {
570+ margin-top : 30px ;
571+ }
572+ .section-padding {
573+ padding : 50px 0 ;
574+ }
358575}
0 commit comments