@@ -23,7 +23,27 @@ body {
2323 font-family : 'Inter' , 'Segoe UI' , Tahoma, Geneva, Verdana, sans-serif;
2424 line-height : 1.6 ;
2525 color : var (--text-color );
26- background-color : var (--background-dark );
26+ background : linear-gradient (180deg ,
27+ var (--background-dark ) 0% ,
28+ var (--background-light ) 40% ,
29+ var (--background-light ) 60% ,
30+ var (--background-dark ) 100%
31+ );
32+ min-height : 100vh ;
33+ display : flex;
34+ flex-direction : column;
35+ position : relative;
36+ }
37+
38+ body ::before {
39+ content : '' ;
40+ position : fixed;
41+ top : 0 ;
42+ left : 0 ;
43+ right : 0 ;
44+ bottom : 0 ;
45+ background : radial-gradient (circle at center, rgba (0 , 180 , 216 , 0.1 ) 0% , transparent 70% );
46+ pointer-events : none;
2747}
2848
2949.container {
@@ -94,30 +114,17 @@ body {
94114/* Main Content */
95115.site-content {
96116 margin-top : 60px ;
97- min-height : calc ( 100 vh - 120 px ) ;
117+ flex : 1 0 auto ;
98118}
99119
100120/* Hero Section */
101121.hero {
102122 text-align : center;
103123 padding : 5rem 0 ;
104- background : linear-gradient (to bottom, var (--background-dark ), var (--background-light ));
105- margin-bottom : 1rem ;
106124 position : relative;
107125 overflow : hidden;
108126}
109127
110- .hero ::before {
111- content : '' ;
112- position : absolute;
113- top : 0 ;
114- left : 0 ;
115- right : 0 ;
116- bottom : 0 ;
117- background : radial-gradient (circle at center, rgba (0 , 180 , 216 , 0.1 ) 0% , transparent 70% );
118- pointer-events : none;
119- }
120-
121128.hero h1 {
122129 font-size : 3rem ;
123130 color : var (--text-color );
@@ -162,12 +169,12 @@ body {
162169
163170/* Section Styles */
164171.section {
165- padding : 3 rem 0 ;
172+ padding : 1.5 rem 0 ;
166173}
167174
168175.section-title {
169176 text-align : center;
170- margin-bottom : 2 rem ;
177+ margin-bottom : 1.5 rem ;
171178}
172179
173180.section-title h2 {
@@ -196,7 +203,7 @@ body {
196203 border-radius : var (--border-radius );
197204 box-shadow : 0 4px 20px rgba (0 , 0 , 0 , 0.2 );
198205 padding : 1.5rem ;
199- margin-bottom : 1.5 rem ;
206+ margin-bottom : 1 rem ;
200207 border : 1px solid var (--border-color );
201208 transition : transform var (--transition-speed ) ease, box-shadow var (--transition-speed ) ease;
202209}
@@ -208,11 +215,27 @@ body {
208215
209216/* Footer Styles */
210217.site-footer {
211- background-color : var ( --primary-color ) ;
218+ background-color : transparent ;
212219 color : var (--text-color );
213220 padding : 2rem 0 ;
214221 text-align : center;
215- border-top : 1px solid var (--border-color );
222+ border-top : none;
223+ flex-shrink : 0 ;
224+ position : relative;
225+ }
226+
227+ .site-footer ::before {
228+ content : '' ;
229+ position : absolute;
230+ top : 0 ;
231+ left : 15% ;
232+ right : 15% ;
233+ height : 1px ;
234+ background : linear-gradient (90deg ,
235+ transparent 0% ,
236+ var (--border-color ) 50% ,
237+ transparent 100%
238+ );
216239}
217240
218241.social-links {
0 commit comments