|
|
@@ -0,0 +1,240 @@ |
|
|
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400&display=swap"); |
|
|
|
|
|
@tailwind base; |
|
|
@tailwind components; |
|
|
@tailwind utilities; |
|
|
|
|
|
* { |
|
|
font-family: "Poppins", sans-serif; |
|
|
} |
|
|
|
|
|
@layer utilities { |
|
|
.paddle-checkout { |
|
|
@apply min-h-screen w-full py-10 md:py-20 lg:w-1/2; |
|
|
} |
|
|
|
|
|
.hero-height { |
|
|
@apply min-h-[calc(100vh-100px)]; |
|
|
} |
|
|
|
|
|
.text-gradient { |
|
|
background: linear-gradient(90deg, #4ca5ff 2.34%, #b673f8 100.78%); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
background-clip: text; |
|
|
text-fill-color: transparent; |
|
|
} |
|
|
|
|
|
.heading1 { |
|
|
@apply text-[64px] leading-[67.2px] font-bold; |
|
|
} |
|
|
|
|
|
.heading2 { |
|
|
@apply font-bold text-[48px] leading-[50.4px]; |
|
|
} |
|
|
|
|
|
.heading3 { |
|
|
@apply font-bold sm:text-[32px] sm:leading-[33.6px] text-[28px] leading-[40px] tracking-[-0.25%]; |
|
|
} |
|
|
|
|
|
.base-regular { |
|
|
@apply text-[24px] font-normal leading-[31.2px]; |
|
|
} |
|
|
|
|
|
.base-bold { |
|
|
@apply text-[24px] font-semibold leading-[31.2px]; |
|
|
} |
|
|
|
|
|
.paragraph-regular { |
|
|
@apply text-[20px] font-normal leading-[26px]; |
|
|
} |
|
|
|
|
|
.paragraph-semibold { |
|
|
@apply text-[20px] font-semibold leading-[26px]; |
|
|
} |
|
|
|
|
|
.body-regular { |
|
|
@apply text-[16px] font-normal leading-[20.8px]; |
|
|
} |
|
|
|
|
|
.body-semibold { |
|
|
@apply text-[16px] font-semibold leading-[20.8px]; |
|
|
} |
|
|
|
|
|
.body-medium { |
|
|
@apply text-[16px] font-medium leading-[22.4px]; |
|
|
} |
|
|
|
|
|
.small-regular { |
|
|
@apply text-[14px] font-normal leading-[17.5px]; |
|
|
} |
|
|
|
|
|
.small-bold { |
|
|
@apply text-[14px] font-semibold leading-[17.5px]; |
|
|
} |
|
|
|
|
|
.heading4 { |
|
|
@apply font-semibold text-[20px] leading-[26px] tracking-[0.25%]; |
|
|
} |
|
|
|
|
|
.body-text { |
|
|
@apply text-[16px] leading-[22px] font-normal; |
|
|
} |
|
|
|
|
|
.nav-padding { |
|
|
@apply pt-[98px]; |
|
|
} |
|
|
|
|
|
.paddings { |
|
|
@apply sm:p-16 xs:p-8 px-6 py-12; |
|
|
} |
|
|
|
|
|
.y-paddings { |
|
|
@apply sm:py-16 py-12; |
|
|
} |
|
|
|
|
|
.x-paddings { |
|
|
@apply sm:px-16 px-6; |
|
|
} |
|
|
|
|
|
.career-paddings { |
|
|
@apply sm:p-28 xs:p-8 px-6 py-12; |
|
|
} |
|
|
|
|
|
.flex-between { |
|
|
@apply flex justify-between items-center; |
|
|
} |
|
|
|
|
|
.flex-center { |
|
|
@apply flex justify-center items-center; |
|
|
} |
|
|
|
|
|
.flex-start { |
|
|
@apply flex justify-start items-start; |
|
|
} |
|
|
|
|
|
.flex-end { |
|
|
@apply flex justify-end; |
|
|
} |
|
|
|
|
|
.inner-width { |
|
|
@apply 3xl:max-w-[1280px] w-full mx-auto; |
|
|
} |
|
|
|
|
|
.inter-width { |
|
|
@apply lg:w-[80%] w-[100%]; |
|
|
} |
|
|
|
|
|
.no-focus { |
|
|
@apply focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 !important; |
|
|
} |
|
|
} |
|
|
|
|
|
.frame { |
|
|
border-style: inset; |
|
|
border: 1px solid #40a0ff; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.sm-box { |
|
|
width: 25px; |
|
|
height: 25px; |
|
|
position: absolute; |
|
|
border: 1px solid #40a0ff; |
|
|
} |
|
|
|
|
|
.sm-box-1 { |
|
|
top: -15px; |
|
|
left: -15px; |
|
|
} |
|
|
|
|
|
.sm-box-2 { |
|
|
top: -15px; |
|
|
right: -15px; |
|
|
} |
|
|
|
|
|
.sm-box-3 { |
|
|
bottom: -15px; |
|
|
right: -15px; |
|
|
} |
|
|
|
|
|
.sm-box-4 { |
|
|
bottom: -15px; |
|
|
left: -15px; |
|
|
} |
|
|
|
|
|
.sm-box-5 { |
|
|
bottom: 50%; |
|
|
left: -15px; |
|
|
} |
|
|
|
|
|
.sm-box-6 { |
|
|
bottom: 50%; |
|
|
right: -15px; |
|
|
} |
|
|
|
|
|
.sm-box-7 { |
|
|
bottom: -15px; |
|
|
left: 50%; |
|
|
} |
|
|
|
|
|
.sm-box-8 { |
|
|
top: -15px; |
|
|
left: 50%; |
|
|
} |
|
|
|
|
|
@media screen and (max-width: 500px) { |
|
|
.sm-box-5, |
|
|
.sm-box-6, |
|
|
.sm-box-7, |
|
|
.sm-box-8 { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.frame { |
|
|
border-radius: 10px; |
|
|
} |
|
|
} |
|
|
|
|
|
.text-gradient_purple-blue { |
|
|
background: linear-gradient(90deg, #4c73ff 0%, #73e0f8 100%); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
background-clip: text; |
|
|
text-fill-color: transparent; |
|
|
} |
|
|
|
|
|
.gradient_blue-purple { |
|
|
background: linear-gradient(90deg, #4ca5ff 0%, #b573f8 100%); |
|
|
} |
|
|
|
|
|
.text-gradient_blue { |
|
|
background: linear-gradient(90deg, #4c73ff 2.34%, #389bff 100.78%); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
background-clip: text; |
|
|
text-fill-color: transparent; |
|
|
} |
|
|
|
|
|
.gradient_purple { |
|
|
background: linear-gradient(90deg, #854cff 0%, #b573f8 100%); |
|
|
} |
|
|
|
|
|
.text-gradient_blue-purple { |
|
|
background: linear-gradient(90deg, #4ca5ff 0%, #b573f8 100%); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
background-clip: text; |
|
|
text-fill-color: transparent; |
|
|
} |
|
|
|
|
|
/* Hide scrollbar for Chrome, Safari and Opera */ |
|
|
.no-scrollbar::-webkit-scrollbar { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
/* Hide scrollbar for IE, Edge and Firefox */ |
|
|
.no-scrollbar { |
|
|
-ms-overflow-style: none; /* IE and Edge */ |
|
|
scrollbar-width: none; /* Firefox */ |
|
|
} |