@@ -100,4 +100,189 @@ body.notfound{
100100 body .notfound.landing section {
101101 padding 50px 0 ;
102102 }
103+ }
104+
105+ /* * REDESIGNED 404 PAGE (notfoundv2) **/
106+
107+ body .notfoundv2 {
108+ background var (--main-body-background-color , #fafafa );
109+
110+ .notfoundv2 {
111+ display flex ;
112+ flex-direction column ;
113+ }
114+
115+ .notfoundv2-hero {
116+ display flex ;
117+ flex-direction column ;
118+ align-items flex-start ;
119+ gap 30px ;
120+ padding 65px 0 ;
121+ }
122+
123+ .notfoundv2-hero__title {
124+ font-size 36px ;
125+ font-weight 600 ;
126+ line-height 1.2 ;
127+ letter-spacing -0.045px ;
128+ color var (--main-text-primary-color , #0d0d0d );
129+ margin 0 ;
130+ }
131+
132+ .notfoundv2-hero__subtitle {
133+ font-size 16px ;
134+ font-weight 400 ;
135+ line-height 1.5 ;
136+ letter-spacing 0.04px ;
137+ color var (--main-text-primary-color , #0d0d0d );
138+ margin 0 ;
139+ }
140+
141+ .notfoundv2-search {
142+ display inline-flex ;
143+ align-items center ;
144+ gap 12px ;
145+ width 100% ;
146+ max-width 570px ;
147+ height 46px ;
148+ padding 13px 10px 13px 20px ;
149+ background var (--main-blogpost-background-color , #ffffff );
150+ border 1px solid var (--main-codebox-border-color , #0d0d0d14 );
151+ border-radius 60px ;
152+ cursor : pointer ;
153+ font : inherit ;
154+ text-align left ;
155+ transition border-color .2s ease , box-shadow .2s ease ;
156+ justify-content flex-start ;
157+
158+ svg .icon {
159+ width 14px ;
160+ height 14px ;
161+ flex-shrink 0 ;
162+ color var (--main-text-secondary-color , #666 );
163+ }
164+
165+ & :hover {
166+ border-color var (--interactive-installation-box-border , rgba (204 , 189 , 0 , 0.6 ));
167+ }
168+ }
169+
170+ .notfoundv2-search__placeholder {
171+ font-size 14px ;
172+ font-weight 400 ;
173+ letter-spacing -0.14px ;
174+ color var (--main-text-secondary-color , #666 );
175+ }
176+
177+ .notfoundv2-find {
178+ display flex ;
179+ flex-direction column ;
180+ gap 50px ;
181+ padding 55px 0 ;
182+ }
183+
184+ .notfoundv2-find__title {
185+ font-size 32px ;
186+ font-weight 600 ;
187+ line-height 1.2 ;
188+ color var (--main-text-primary-color , #0d0d0d );
189+ margin 0 ;
190+ }
191+
192+ .notfoundv2-find__grid {
193+ display grid ;
194+ grid-template-columns repeat (2 , minmax (0 , 1fr ));
195+ gap 20px ;
196+ max-width 770px ;
197+ }
198+
199+ .notfoundv2-card {
200+ display flex ;
201+ align-items center ;
202+ gap 16px ;
203+ text-decoration none ;
204+ color inherit ;
205+
206+ & :hover {
207+ .notfoundv2-card__icon {
208+ transform translateY (-2px );
209+ box-shadow 0 6px 16px rgba (204 , 189 , 0 , 0.25 );
210+ }
211+ }
212+ }
213+
214+ .notfoundv2-card__icon {
215+ flex-shrink 0 ;
216+ width 75px ;
217+ height 75px ;
218+ border 1px solid var (--interactive-installation-box-border , rgba (204 , 189 , 0 , 0.6 ));
219+ border-radius 15px ;
220+ background linear-gradient (180deg , #fdef00 0% , #fffaa3 94% );
221+ display flex ;
222+ align-items center ;
223+ justify-content center ;
224+ overflow hidden ;
225+ transition transform .2s ease , box-shadow .2s ease ;
226+ }
227+
228+ .notfoundv2-card__text {
229+ display flex ;
230+ flex-direction column ;
231+ gap 8px ;
232+ padding 0 3px ;
233+ min-width 0 ;
234+ }
235+
236+ .notfoundv2-card__title {
237+ font-size 22px ;
238+ font-weight 600 ;
239+ line-height 1.2 ;
240+ letter-spacing 0.022px ;
241+ color var (--main-text-primary-color , #0d0d0d );
242+ margin 0 ;
243+ }
244+
245+ .notfoundv2-card__description {
246+ font-size 14px ;
247+ font-weight 400 ;
248+ line-height 1.4 ;
249+ letter-spacing 0.07px ;
250+ color var (--main-text-primary-color , #0d0d0d );
251+ margin 0 ;
252+ }
253+ }
254+
255+ @media only screen and (max-width 900px ) {
256+ body .notfoundv2 {
257+ .notfoundv2-find__grid {
258+ grid-template-columns 1fr ;
259+ }
260+ }
261+ }
262+
263+ @media only screen and (max-width 650px ) {
264+ body .notfoundv2 {
265+ .notfoundv2-hero {
266+ padding 40px 0 ;
267+ gap 20px ;
268+ }
269+ .notfoundv2-hero__title {
270+ font-size 30px ;
271+ }
272+ .notfoundv2-find {
273+ padding 30px 0 ;
274+ gap 30px ;
275+ }
276+ .notfoundv2-find__title {
277+ font-size 26px ;
278+ }
279+ .notfoundv2-card__icon {
280+ width 60px ;
281+ height 60px ;
282+ border-radius 12px ;
283+ }
284+ .notfoundv2-card__title {
285+ font-size 19px ;
286+ }
287+ }
103288}
0 commit comments