blob: 7cb33f1e7972616f017e30453053694ad93b784c [file] [log] [blame]
Lokesh Yadavba544372021-12-07 15:09:27 +05301:root {
2 --dl-color-gray-500: #595959;
3 --dl-color-gray-700: #999999;
4 --dl-color-gray-900: #D9D9D9;
5 --dl-size-size-large: 144px;
6 --dl-size-size-small: 48px;
7 --dl-color-danger-300: #A22020;
8 --dl-color-danger-500: #BF2626;
9 --dl-color-danger-700: #E14747;
10 --dl-color-gray-black: #000000;
11 --dl-color-gray-white: #FFFFFF;
12 --dl-size-size-medium: 96px;
13 --dl-size-size-xlarge: 192px;
14 --dl-size-size-xsmall: 16px;
15 --dl-space-space-unit: 16px;
16 --dl-color-primary-100: #003EB3;
17 --dl-color-primary-300: #0074F0;
18 --dl-color-primary-500: #14A9FF;
19 --dl-color-primary-700: #85DCFF;
20 --dl-color-success-300: #199033;
21 --dl-color-success-500: #32A94C;
22 --dl-color-success-700: #4CC366;
23 --dl-size-size-xxlarge: 288px;
24 --dl-size-size-maxwidth: 1400px;
25 --dl-radius-radius-round: 50%;
26 --dl-space-space-halfunit: 8px;
27 --dl-space-space-sixunits: 96px;
28 --dl-space-space-twounits: 32px;
29 --dl-radius-radius-radius2: 2px;
30 --dl-radius-radius-radius4: 4px;
31 --dl-radius-radius-radius8: 8px;
32 --dl-space-space-fiveunits: 80px;
33 --dl-space-space-fourunits: 64px;
34 --dl-space-space-threeunits: 48px;
35 --dl-space-space-oneandhalfunits: 24px;
36}
37.button {
38 color: var(--dl-color-gray-black);
39 display: inline-block;
40 padding: 0.5rem 1rem;
41 border-color: var(--dl-color-gray-black);
42 border-width: 1px;
43 border-radius: 500px;
44 background-color: var(--dl-color-gray-white);
45}
46
47.input {
48 color: var(--dl-color-gray-black);
49 cursor: auto;
50 padding: 0.5rem 1rem;
51 border-color: var(--dl-color-gray-black);
52 border-width: 1px;
53 border-radius: 4px;
54 background-color: var(--dl-color-gray-white);
55}
56.textarea {
57 color: var(--dl-color-gray-black);
58 cursor: auto;
59 padding: 0.5rem;
60 border-color: var(--dl-color-gray-black);
61 border-width: 1px;
62 border-radius: 4px;
63 background-color: var(--dl-color-gray-white);
64}
65
66.Navbar {
67 top: 0%;
68 width: auto;
69 display: flex;
70 z-index: 1;
71 position: fixed;
72 max-width: var(--dl-size-size-maxwidth);
73 align-items: center;
74 padding-top: var(--dl-space-space-unit);
75 padding-left: var(--dl-space-space-threeunits);
76 padding-right: var(--dl-space-space-threeunits);
77 padding-bottom: var(--dl-space-space-unit);
78 backdrop-filter: blur( 2px ); -webkit-backdrop-filter: blur( 8px );;
79 justify-content: space-between;
80}
81.navelement {
82 color: var(--dl-color-gray-white);
83 cursor: pointer;
84 transition: 0.3s;
85}
86.navelement:hover {
87 color: var(--dl-color-primary-500);
88}
89.Footerlink {
90 color: var(--dl-color-gray-900);
91 cursor: pointer;
92 transition: 0.3s;
93 margin-bottom: var(--dl-space-space-unit);
94}
95.Footerlink:hover {
96 color: var(--dl-color-primary-500);
97}
98.icons {
99 fill: #D9D9D9;
100 width: 24px;
101 cursor: pointer;
102 height: 24px;
103 transition: 0.3s;
104 margin-right: var(--dl-space-space-unit);
105 text-decoration: none;
106}
107.icons:hover {
108 fill: var(--dl-color-primary-500);
109}
110.mid-element-initial {
111 width: 200px;
112 height: 300px;
113 display: flex;
114 min-width: 200px;
115 transform: translateX(100%);
116 object-fit: cover;
117 transition: 0.3s;
118 border-radius: var(--dl-radius-radius-radius8);
119 background-size: cover;
120 background-image: url('https://images.unsplash.com/photo-1638176373124-28142ef16c5b?ixid=Mnw5MTMyMXwwfDF8YWxsfDE0fHx8fHx8Mnx8MTYzODE5NzE5OA&ixlib=rb-1.2.1&h=500');
121 background-position: center;
122}
123.left-element-initial {
124 width: 200px;
125 height: 300px;
126 margin: 0;
127 display: flex;
128 min-width: 300px;
129 transform: translateX(100%);
130 min-height: 500px;
131 object-fit: cover;
132 transition: 0.3s;
133 margin-left: var(--dl-space-space-twounits);
134 margin-right: var(--dl-space-space-twounits);
135 border-radius: var(--dl-radius-radius-radius8);
136 background-size: cover;
137 background-image: url('https://images.unsplash.com/photo-1638165212454-d92d3050351b?ixid=Mnw5MTMyMXwwfDF8YWxsfDE5fHx8fHx8Mnx8MTYzODE5ODA2Mg&ixlib=rb-1.2.1&h=300');
138 background-position: center;
139}
140.right-element-initial {
141 width: 200px;
142 height: 300px;
143 margin: 0;
144 display: flex;
145 min-width: 200px;
146 transform: translateX(125%);
147 object-fit: cover;
148 margin-left: var(--dl-space-space-twounits);
149 margin-right: var(--dl-space-space-twounits);
150 border-radius: var(--dl-radius-radius-radius8);
151 background-size: cover;
152 background-image: url('https://images.unsplash.com/photo-1638165212454-d92d3050351b?ixid=Mnw5MTMyMXwwfDF8YWxsfDE5fHx8fHx8Mnx8MTYzODE5ODA2Mg&ixlib=rb-1.2.1&h=300');
153 background-position: center;
154}
155.mid-element {
156 order: 2;
157 min-width: 300px !important;
158 transform: translateX(0) !important;
159 min-height: 500px !important;
160}
161.left-element {
162 order: 1;
163 min-width: 200px !important;
164 transform: translateX(0) !important;
165 min-height: 300px !important;
166 margin-left: var(--dl-space-space-twounits);
167 margin-right: var(--dl-space-space-twounits);
168}
169.right-element {
170 order: 3;
171 transform: translateX(0) !important;
172 margin-left: var(--dl-space-space-twounits);
173 margin-right: var(--dl-space-space-twounits);
174}
175.hidden-element {
176 display: none !important;
177}
178.join {
179 text-align: center;
180 border-width: 0px;
181 padding-left: var(--dl-space-space-twounits);
182 border-radius: var(--dl-radius-radius-radius8);
183 padding-right: var(--dl-space-space-twounits);
184 -backdrop-filter: blur(16px) saturate(180%);;
185 background-color: rgba(17, 25, 40, 0.75);
186 -background-color: rgba(17, 25, 40, 0.75);
187 -webkit-backdrop-filter: blur(16px) saturate(180%);
188}
189.navbar-fixed {
190 width: 100%;
191 max-width: 100%;
192 align-items: center;
193 padding-top: var(--dl-space-space-halfunit);
194 padding-left: var(--dl-space-space-threeunits);
195 padding-right: var(--dl-space-space-threeunits);
196 padding-bottom: var(--dl-space-space-halfunit);
197 justify-content: space-between;
198}
199.mb-12 {
200 margin-bottom: 12px;
201}
202
203
204.teleport-menu-mobile {
205 transform: translateX(100%);
206}
207
208.h3-36 {
209 font-size: 36px;
210 font-style: normal;
211 font-family: Poppins;
212 font-weight: 500;
213 line-height: 1.15;
214 text-transform: none;
215 text-decoration: none;
216}
217.h1-96 {
218 font-size: 96px;
219 font-family: Poppins;
220 font-weight: 300;
221 letter-spacing: -1.5%;
222 text-transform: none;
223 text-decoration: none;
224}
225.h3-48 {
226 font-size: 48px;
227 font-family: Poppins;
228 font-weight: 400;
229 text-transform: none;
230 text-decoration: none;
231}
232.heading {
233 font-size: 32px;
234 font-family: Inter;
235 font-weight: 700;
236 line-height: 1.15;
237 text-transform: none;
238 text-decoration: none;
239}
240.subtitle-14 {
241 font-size: 14px;
242 font-family: Arial;
243 font-weight: 500;
244 text-transform: none;
245 text-decoration: none;
246}
247.h5-24 {
248 font-size: 24px;
249 font-family: Poppins;
250 font-weight: 500;
251 text-transform: none;
252 text-decoration: none;
253}
254.h2-60 {
255 font-size: 60px;
256 font-family: Poppins;
257 font-weight: 300;
258 letter-spacing: -0.5%;
259 text-transform: none;
260 text-decoration: none;
261}
262.footer-Text-Style {
263 font-size: 16px;
264 font-family: Inter;
265 font-weight: 700;
266 line-height: 1.15;
267 text-transform: none;
268 text-decoration: none;
269}
270.h6-20 {
271 font-size: 20px;
272 font-family: Arial;
273 font-weight: 500;
274 text-transform: none;
275 text-decoration: none;
276}
277.caption {
278 font-size: 14px;
279 font-family: Poppins;
280 font-weight: 400;
281 text-transform: none;
282 text-decoration: none;
283}
284.body-16 {
285 font-size: 16px;
286 font-family: Arial;
287 font-weight: 500;
288 text-transform: none;
289 text-decoration: none;
290}
291.subtitle-16 {
292 font-size: 16px;
293 font-family: Poppins;
294 font-weight: 500;
295 text-transform: none;
296 text-decoration: none;
297}
298.content {
299 font-size: 16px;
300 font-family: Inter;
301 font-weight: 400;
302 line-height: 1.15;
303 text-transform: none;
304 text-decoration: none;
305}
306.h4-28 {
307 font-size: 28px;
308 font-family: Poppins;
309 font-weight: 400;
310 letter-spacing: 0.25%;
311 text-transform: none;
312 text-decoration: none;
313}
314.body-12 {
315 font-size: 12px;
316 font-family: Poppins;
317 font-weight: 400;
318 line-height: 18px;
319 letter-spacing: 0.25%;
320 text-transform: none;
321 text-decoration: none;
322}
323.button-14 {
324 font-size: 14px;
325 font-family: Poppins;
326 font-weight: 500;
327 letter-spacing: 1.25%;
328 text-transform: none;
329 text-decoration: none;
330}
331@media(max-width: 991px) {
332 .icons {
333 fill: var(--dl-color-gray-white);
334 color: var(--dl-color-primary-700);
335 }
336 .teleport-menu-mobile {
337 height: 100vh;
338 display: flex;
339 transition: 0.5s;
340 }
341 .teleport-menu-show {
342 display: flex !important;
343 transform: translateX(0);
344 }
345}
346@media(max-width: 767px) {
347 .Navbar {
348 padding-left: var(--dl-space-space-twounits);
349 padding-right: var(--dl-space-space-twounits);
350 }
351}
352@media(max-width: 479px) {
353 .Navbar {
354 padding: var(--dl-space-space-unit);
355 }
356 .icons {
357 fill: var(--dl-color-gray-white);
358 }
359 .join {
360 margin-top: var(--dl-space-space-unit);
361 margin-bottom: var(--dl-space-space-unit);
362 }
363 .navbar-fixed {
364 width: 100%;
365 padding-left: var(--dl-space-space-oneandhalfunits);
366 padding-right: var(--dl-space-space-oneandhalfunits);
367 }
368}