1+ @import url ('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap' );
2+
3+ : root {
4+ --color-bg : # 1D1719 ;
5+ --color-accent : # 2ABFC4 ;
6+ --color-text : # F6F8EA ;
7+ --color-text-muted : rgba (246 , 248 , 234 , 0.6 );
8+
9+ --font-primary : 'Poppins' , sans-serif;
10+
11+ --ease-out-expo : cubic-bezier (0.16 , 1 , 0.3 , 1 );
12+ }
13+
14+ * {
15+ box-sizing : border-box;
16+ margin : 0 ;
17+ padding : 0 ;
18+ }
19+
20+ body {
21+ background-color : var (--color-bg );
22+ color : var (--color-text );
23+ font-family : var (--font-primary );
24+ min-height : 100vh ;
25+ display : flex;
26+ flex-direction : column;
27+ align-items : center;
28+ justify-content : center;
29+ overflow : hidden;
30+ position : relative;
31+ -webkit-font-smoothing : antialiased;
32+ -moz-osx-font-smoothing : grayscale;
33+ }
34+
35+ /* Background Ambient Glow */
36+ body ::before {
37+ content : '' ;
38+ position : absolute;
39+ width : 60vw ;
40+ height : 60vw ;
41+ background : radial-gradient (circle, rgba (42 , 191 , 196 , 0.08 ) 0% , transparent 70% );
42+ top : -20% ;
43+ left : 50% ;
44+ transform : translateX (-50% );
45+ z-index : -1 ;
46+ pointer-events : none;
47+ }
48+
49+ .main-container {
50+ text-align : center;
51+ z-index : 10 ;
52+ padding : 2rem ;
53+ max-width : 600px ;
54+ width : 100% ;
55+ animation : fadeUp 1s var (--ease-out-expo ) forwards;
56+ opacity : 0 ;
57+ transform : translateY (20px );
58+ }
59+
60+ .logo-wrapper {
61+ margin-bottom : 2.5rem ;
62+ display : inline-block;
63+ transition : transform 0.3s var (--ease-out-expo );
64+ }
65+
66+ .logo-wrapper : hover {
67+ transform : scale (1.05 );
68+ }
69+
70+ .logo-svg {
71+ width : 80px ;
72+ height : auto;
73+ }
74+
75+ /* Error Code Styling */
76+ .status-code {
77+ font-size : 8rem ;
78+ font-weight : 700 ;
79+ line-height : 1 ;
80+ margin-bottom : 0.5rem ;
81+ color : var (--color-accent );
82+ letter-spacing : -0.04em ;
83+ background : linear-gradient (135deg , var (--color-accent ) 0% , rgba (42 , 191 , 196 , 0.6 ) 100% );
84+ -webkit-background-clip : text;
85+ -webkit-text-fill-color : transparent;
86+ opacity : 0.9 ;
87+ }
88+
89+ .title {
90+ font-size : 2rem ;
91+ font-weight : 600 ;
92+ margin-bottom : 1rem ;
93+ color : var (--color-text );
94+ }
95+
96+ .description {
97+ font-size : 1.125rem ;
98+ line-height : 1.6 ;
99+ color : var (--color-text-muted );
100+ font-weight : 300 ;
101+ margin-bottom : 3rem ;
102+ max-width : 480px ;
103+ margin-left : auto;
104+ margin-right : auto;
105+ }
106+
107+ /* Primary Action Button */
108+ .btn-home {
109+ display : inline-flex;
110+ align-items : center;
111+ justify-content : center;
112+ padding : 0.75rem 2rem ;
113+ font-size : 1rem ;
114+ font-weight : 600 ;
115+ color : var (--color-bg );
116+ background-color : var (--color-accent );
117+ border : none;
118+ border-radius : 50px ;
119+ text-decoration : none;
120+ transition : all 0.2s ease;
121+ box-shadow : 0 4px 20px rgba (42 , 191 , 196 , 0.25 );
122+ }
123+
124+ .btn-home : hover {
125+ background-color : # fff ;
126+ color : var (--color-bg );
127+ transform : translateY (-2px );
128+ box-shadow : 0 8px 30px rgba (42 , 191 , 196 , 0.4 );
129+ }
130+
131+ .btn-home : active {
132+ transform : translateY (0 );
133+ }
134+
135+ /* Footer styling */
136+ .footer-link {
137+ margin-top : 4rem ;
138+ font-size : 0.875rem ;
139+ color : var (--color-text-muted );
140+ text-decoration : none;
141+ transition : color 0.2s ease;
142+ display : inline-block;
143+ opacity : 0.6 ;
144+ }
145+
146+ .footer-link : hover {
147+ color : var (--color-accent );
148+ opacity : 1 ;
149+ }
150+
151+ /* Animations */
152+ @keyframes fadeUp {
153+ to {
154+ opacity : 1 ;
155+ transform : translateY (0 );
156+ }
157+ }
158+
159+ /* Responsive adjustments */
160+ @media (max-width : 768px ) {
161+ .status-code {
162+ font-size : 6rem ;
163+ }
164+
165+ .title {
166+ font-size : 1.75rem ;
167+ }
168+ }
0 commit comments