1+ html {
2+ box-sizing : border-box;
3+ min-height : 100% ;
4+ }
5+
6+ body {
7+ background-color : # f6f6f6 ;
8+ margin : 0 ;
9+ padding : 0 ;
10+ font-family : "Roboto" ;
11+ margin-top : 6% ;
12+ }
13+
14+ .mobile-header {
15+ display : none;
16+ }
17+
18+ * ,
19+ : after ,
20+ : before {
21+ box-sizing : inherit;
22+ }
23+
24+ a ,
25+ a : active ,
26+ a : visited {
27+ -webkit-tap-highlight-color : transparent;
28+ color : # 0d61bf ;
29+ cursor : pointer;
30+ outline : 0 ;
31+ text-decoration : underline;
32+ }
33+
34+ a : hover {
35+ color : # 097dce ;
36+ text-decoration : none;
37+ }
38+
39+ .action .skip {
40+ box-sizing : border-box;
41+ position : absolute;
42+ }
43+
44+ .action .skip : not (: focus ) {
45+ border : 0 ;
46+ clip : rect (0 , 0 , 0 , 0 );
47+ height : 1px ;
48+ margin : -1px ;
49+ overflow : hidden;
50+ padding : 0 ;
51+ }
52+
53+ .action .skip : focus {
54+ background : # f0f0f0 ;
55+ left : 0 ;
56+ padding : 10px ;
57+ text-align : center;
58+ top : 0 ;
59+ z-index : 15 ;
60+ }
61+
62+ .page-wrapper {
63+ display : flex;
64+ flex-direction : column;
65+ align-items : flex-start;
66+ gap : 8px ;
67+ margin : 0 auto;
68+ padding : 0 ;
69+ max-width : 600px ;
70+ }
71+
72+ .page-content {
73+ background-color : # fff ;
74+ border-radius : 8px ;
75+ box-shadow : 0px 1px 5px rgba (0 , 0 , 0 , 0.2 );
76+ display : flex;
77+ flex-direction : column;
78+ align-items : flex-start;
79+ padding : 40px 60px ;
80+ gap : 40px ;
81+ }
82+
83+ .header {
84+ display : flex;
85+ flex-direction : row;
86+ align-items : flex-start;
87+ padding : 0 ;
88+ gap : 24px ;
89+ }
90+
91+ .header-text-container {
92+ display : flex;
93+ flex-direction : column;
94+ align-items : flex-start;
95+ padding : 0 ;
96+ }
97+
98+ .header-icon {
99+ width : 84px ;
100+ height : 72px ;
101+ }
102+
103+ .header-text {
104+ font-weight : 700 ;
105+ font-size : 12px ;
106+ line-height : 16px ;
107+ letter-spacing : 1px ;
108+ text-transform : uppercase;
109+ color : # 2A2A2A ;
110+ }
111+
112+ .header-title {
113+ font-family : 'Barlow Condensed' ;
114+ font-weight : 500 ;
115+ font-size : 34px ;
116+ line-height : 32px ;
117+ text-transform : uppercase;
118+ color : # 26B3C5 ;
119+ }
120+
121+ .main {
122+ display : flex;
123+ flex-direction : column;
124+ align-items : flex-start;
125+ padding : 0 ;
126+ gap : 16px ;
127+ width : 100% ;
128+ }
129+
130+ .messages {
131+ width : 100% ;
132+ display : flex;
133+ flex-direction : column;
134+ gap : 12px ;
135+ }
136+
137+ .message-wrapper {
138+ display : none;
139+ }
140+
141+ .message {
142+ display : flex;
143+ flex-direction : row;
144+ align-items : center;
145+ justify-content : flex-start;
146+ border-radius : 5px ;
147+ font-size : 14px ;
148+ padding : 15px 10px ;
149+ color : # ffffff ;
150+ }
151+
152+ .message .error {
153+ background-color : # ea1900 ;
154+ }
155+
156+ .message .notify {
157+ background-color : # 079531b8 ;
158+ }
159+
160+ .message-icon {
161+ width : 20px ;
162+ height : 20px ;
163+ text-align : center;
164+ }
165+
166+ .message-content {
167+ margin-left : 10px ;
168+ flex : 1 ;
169+ }
170+
171+ .close-error {
172+ cursor : pointer;
173+ width : 20px ;
174+ height : 20px ;
175+ text-align : center;
176+ }
177+
178+ .input-text {
179+ height : 40px ;
180+ padding : 12px 10px ;
181+ background : # fff ;
182+ border : 1px solid # AAAAAA ;
183+ border-radius : 4px ;
184+ text-align : center;
185+ width : 100% ;
186+ font-size : 14px ;
187+ line-height : 22px ;
188+ color : # 767676 ;
189+ }
190+
191+ .continue-btn {
192+ background : # 137D60 ;
193+ border-radius : 50px ;
194+ padding : 12px 24px ;
195+ font-weight : 700 ;
196+ font-size : 16px ;
197+ line-height : 24px ;
198+ color : # FFFFFF ;
199+ text-transform : uppercase;
200+ letter-spacing : 0.008em ;
201+ border : none;
202+ width : 100% ;
203+ cursor : pointer;
204+ }
205+
206+ .continue-btn : disabled {
207+ background : # F4F4F4 ;
208+ color : # 767676 ;
209+ cursor : default;
210+ }
211+
212+ .page-description {
213+ padding-left : 18px ;
214+ margin : 0 ;
215+ font-weight : 400 ;
216+ font-size : 16px ;
217+ line-height : 26px ;
218+ color : # 2a2a2a ;
219+ }
220+
221+ .footer {
222+ display : flex;
223+ flex-direction : row;
224+ align-items : flex-start;
225+ padding : 0 ;
226+ justify-content : space-between;
227+ width : 100% ;
228+ font-size : 12px ;
229+ font-weight : 400 ;
230+ line-height : 16px ;
231+ }
232+
233+ .copyright-text {
234+ color : # 2A2A2A ;
235+ letter-spacing : 0.5px ;
236+ }
237+
238+ .privacy-policy {
239+ margin-right : 8px ;
240+ }
241+
242+ @media (max-width : 375px ) {
243+ body {
244+ margin-top : 0 ;
245+ }
246+
247+ .mobile-header {
248+ display : flex;
249+ flex-direction : row;
250+ align-items : center;
251+ justify-content : flex-start;
252+ gap : 6px ;
253+ height : 64px ;
254+ background : # 0C0C0C ;
255+ padding : 20px 24px ;
256+ }
257+
258+ .page-wrapper {
259+ padding : 24px ;
260+ }
261+
262+ .page-content {
263+ padding : 24px 24px 32px ;
264+ gap : 10px ;
265+ box-shadow : 0px 1px 5px rgba (0 , 0 , 0 , 0.2 );
266+ }
267+
268+ .header {
269+ flex-direction : column;
270+ padding : 0 0 8px ;
271+ }
272+
273+ .header-icon {
274+ align-self : center;
275+ width : 56px ;
276+ height : 48px ;
277+ }
278+
279+ .header-text {
280+ font-size : 10px ;
281+ line-height : 12px ;
282+ letter-spacing : 0.5px ;
283+ }
284+
285+ .header-title {
286+ font-size : 25px ;
287+ line-height : 28px ;
288+ }
289+
290+ .footer {
291+ flex-direction : column;
292+ gap : 4px ;
293+ }
294+ }
0 commit comments