Last active
September 21, 2023 23:50
-
-
Save Oyshoboy/8ee1b8c5c07e81edde5a48d9a2c2e8f7 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com | |
*//* | |
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) | |
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) | |
*/ | |
*, | |
::before, | |
::after { | |
box-sizing: border-box; /* 1 */ | |
border-width: 0; /* 2 */ | |
border-style: solid; /* 2 */ | |
border-color: #e5e7eb; /* 2 */ | |
} | |
::before, | |
::after { | |
--tw-content: ''; | |
} | |
/* | |
1. Use a consistent sensible line-height in all browsers. | |
2. Prevent adjustments of font size after orientation changes in iOS. | |
3. Use a more readable tab size. | |
4. Use the user's configured `sans` font-family by default. | |
5. Use the user's configured `sans` font-feature-settings by default. | |
6. Use the user's configured `sans` font-variation-settings by default. | |
*/ | |
html { | |
line-height: 1.5; /* 1 */ | |
-webkit-text-size-adjust: 100%; /* 2 */ | |
-moz-tab-size: 4; /* 3 */ | |
-o-tab-size: 4; | |
tab-size: 4; /* 3 */ | |
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */ | |
font-feature-settings: normal; /* 5 */ | |
font-variation-settings: normal; /* 6 */ | |
} | |
/* | |
1. Remove the margin in all browsers. | |
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. | |
*/ | |
body { | |
margin: 0; /* 1 */ | |
line-height: inherit; /* 2 */ | |
} | |
/* | |
1. Add the correct height in Firefox. | |
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) | |
3. Ensure horizontal rules are visible by default. | |
*/ | |
hr { | |
height: 0; /* 1 */ | |
color: inherit; /* 2 */ | |
border-top-width: 1px; /* 3 */ | |
} | |
/* | |
Add the correct text decoration in Chrome, Edge, and Safari. | |
*/ | |
abbr:where([title]) { | |
-webkit-text-decoration: underline dotted; | |
text-decoration: underline dotted; | |
} | |
/* | |
Remove the default font size and weight for headings. | |
*/ | |
h1, | |
h2, | |
h3, | |
h4, | |
h5, | |
h6 { | |
font-size: inherit; | |
font-weight: inherit; | |
} | |
/* | |
Reset links to optimize for opt-in styling instead of opt-out. | |
*/ | |
a { | |
color: inherit; | |
text-decoration: inherit; | |
} | |
/* | |
Add the correct font weight in Edge and Safari. | |
*/ | |
b, | |
strong { | |
font-weight: bolder; | |
} | |
/* | |
1. Use the user's configured `mono` font family by default. | |
2. Correct the odd `em` font sizing in all browsers. | |
*/ | |
code, | |
kbd, | |
samp, | |
pre { | |
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */ | |
font-size: 1em; /* 2 */ | |
} | |
/* | |
Add the correct font size in all browsers. | |
*/ | |
small { | |
font-size: 80%; | |
} | |
/* | |
Prevent `sub` and `sup` elements from affecting the line height in all browsers. | |
*/ | |
sub, | |
sup { | |
font-size: 75%; | |
line-height: 0; | |
position: relative; | |
vertical-align: baseline; | |
} | |
sub { | |
bottom: -0.25em; | |
} | |
sup { | |
top: -0.5em; | |
} | |
/* | |
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) | |
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) | |
3. Remove gaps between table borders by default. | |
*/ | |
table { | |
text-indent: 0; /* 1 */ | |
border-color: inherit; /* 2 */ | |
border-collapse: collapse; /* 3 */ | |
} | |
/* | |
1. Change the font styles in all browsers. | |
2. Remove the margin in Firefox and Safari. | |
3. Remove default padding in all browsers. | |
*/ | |
button, | |
input, | |
optgroup, | |
select, | |
textarea { | |
font-family: inherit; /* 1 */ | |
font-feature-settings: inherit; /* 1 */ | |
font-variation-settings: inherit; /* 1 */ | |
font-size: 100%; /* 1 */ | |
font-weight: inherit; /* 1 */ | |
line-height: inherit; /* 1 */ | |
color: inherit; /* 1 */ | |
margin: 0; /* 2 */ | |
padding: 0; /* 3 */ | |
} | |
/* | |
Remove the inheritance of text transform in Edge and Firefox. | |
*/ | |
button, | |
select { | |
text-transform: none; | |
} | |
/* | |
1. Correct the inability to style clickable types in iOS and Safari. | |
2. Remove default button styles. | |
*/ | |
button, | |
[type='button'], | |
[type='reset'], | |
[type='submit'] { | |
-webkit-appearance: button; /* 1 */ | |
background-color: transparent; /* 2 */ | |
background-image: none; /* 2 */ | |
} | |
/* | |
Use the modern Firefox focus style for all focusable elements. | |
*/ | |
:-moz-focusring { | |
outline: auto; | |
} | |
/* | |
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) | |
*/ | |
:-moz-ui-invalid { | |
box-shadow: none; | |
} | |
/* | |
Add the correct vertical alignment in Chrome and Firefox. | |
*/ | |
progress { | |
vertical-align: baseline; | |
} | |
/* | |
Correct the cursor style of increment and decrement buttons in Safari. | |
*/ | |
::-webkit-inner-spin-button, | |
::-webkit-outer-spin-button { | |
height: auto; | |
} | |
/* | |
1. Correct the odd appearance in Chrome and Safari. | |
2. Correct the outline style in Safari. | |
*/ | |
[type='search'] { | |
-webkit-appearance: textfield; /* 1 */ | |
outline-offset: -2px; /* 2 */ | |
} | |
/* | |
Remove the inner padding in Chrome and Safari on macOS. | |
*/ | |
::-webkit-search-decoration { | |
-webkit-appearance: none; | |
} | |
/* | |
1. Correct the inability to style clickable types in iOS and Safari. | |
2. Change font properties to `inherit` in Safari. | |
*/ | |
::-webkit-file-upload-button { | |
-webkit-appearance: button; /* 1 */ | |
font: inherit; /* 2 */ | |
} | |
/* | |
Add the correct display in Chrome and Safari. | |
*/ | |
summary { | |
display: list-item; | |
} | |
/* | |
Removes the default spacing and border for appropriate elements. | |
*/ | |
blockquote, | |
dl, | |
dd, | |
h1, | |
h2, | |
h3, | |
h4, | |
h5, | |
h6, | |
hr, | |
figure, | |
p, | |
pre { | |
margin: 0; | |
} | |
fieldset { | |
margin: 0; | |
padding: 0; | |
} | |
legend { | |
padding: 0; | |
} | |
ol, | |
ul, | |
menu { | |
list-style: none; | |
margin: 0; | |
padding: 0; | |
} | |
/* | |
Reset default styling for dialogs. | |
*/ | |
dialog { | |
padding: 0; | |
} | |
/* | |
Prevent resizing textareas horizontally by default. | |
*/ | |
textarea { | |
resize: vertical; | |
} | |
/* | |
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) | |
2. Set the default placeholder color to the user's configured gray 400 color. | |
*/ | |
input::-moz-placeholder, textarea::-moz-placeholder { | |
opacity: 1; /* 1 */ | |
color: #9ca3af; /* 2 */ | |
} | |
input::placeholder, | |
textarea::placeholder { | |
opacity: 1; /* 1 */ | |
color: #9ca3af; /* 2 */ | |
} | |
/* | |
Set the default cursor for buttons. | |
*/ | |
button, | |
[role="button"] { | |
cursor: pointer; | |
} | |
/* | |
Make sure disabled buttons don't get the pointer cursor. | |
*/ | |
:disabled { | |
cursor: default; | |
} | |
/* | |
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) | |
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) | |
This can trigger a poorly considered lint error in some tools but is included by design. | |
*/ | |
img, | |
svg, | |
video, | |
canvas, | |
audio, | |
iframe, | |
embed, | |
object { | |
display: block; /* 1 */ | |
vertical-align: middle; /* 2 */ | |
} | |
/* | |
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) | |
*/ | |
img, | |
video { | |
max-width: 100%; | |
height: auto; | |
} | |
/* Make elements with the HTML hidden attribute stay hidden by default */ | |
[hidden] { | |
display: none; | |
} | |
.container { | |
max-width: 1172px; | |
} | |
body { | |
overscroll-behavior: none; | |
} | |
html { | |
font-family: Roboto Mono, sans-serif; | |
font-size: 1rem; | |
line-height: 1.5rem; | |
font-weight: 300; | |
line-height: 1.5; | |
} | |
*, ::before, ::after { | |
--tw-border-spacing-x: 0; | |
--tw-border-spacing-y: 0; | |
--tw-translate-x: 0; | |
--tw-translate-y: 0; | |
--tw-rotate: 0; | |
--tw-skew-x: 0; | |
--tw-skew-y: 0; | |
--tw-scale-x: 1; | |
--tw-scale-y: 1; | |
--tw-pan-x: ; | |
--tw-pan-y: ; | |
--tw-pinch-zoom: ; | |
--tw-scroll-snap-strictness: proximity; | |
--tw-gradient-from-position: ; | |
--tw-gradient-via-position: ; | |
--tw-gradient-to-position: ; | |
--tw-ordinal: ; | |
--tw-slashed-zero: ; | |
--tw-numeric-figure: ; | |
--tw-numeric-spacing: ; | |
--tw-numeric-fraction: ; | |
--tw-ring-inset: ; | |
--tw-ring-offset-width: 0px; | |
--tw-ring-offset-color: #fff; | |
--tw-ring-color: rgb(59 130 246 / 0.5); | |
--tw-ring-offset-shadow: 0 0 #0000; | |
--tw-ring-shadow: 0 0 #0000; | |
--tw-shadow: 0 0 #0000; | |
--tw-shadow-colored: 0 0 #0000; | |
--tw-blur: ; | |
--tw-brightness: ; | |
--tw-contrast: ; | |
--tw-grayscale: ; | |
--tw-hue-rotate: ; | |
--tw-invert: ; | |
--tw-saturate: ; | |
--tw-sepia: ; | |
--tw-drop-shadow: ; | |
--tw-backdrop-blur: ; | |
--tw-backdrop-brightness: ; | |
--tw-backdrop-contrast: ; | |
--tw-backdrop-grayscale: ; | |
--tw-backdrop-hue-rotate: ; | |
--tw-backdrop-invert: ; | |
--tw-backdrop-opacity: ; | |
--tw-backdrop-saturate: ; | |
--tw-backdrop-sepia: ; | |
} | |
::backdrop { | |
--tw-border-spacing-x: 0; | |
--tw-border-spacing-y: 0; | |
--tw-translate-x: 0; | |
--tw-translate-y: 0; | |
--tw-rotate: 0; | |
--tw-skew-x: 0; | |
--tw-skew-y: 0; | |
--tw-scale-x: 1; | |
--tw-scale-y: 1; | |
--tw-pan-x: ; | |
--tw-pan-y: ; | |
--tw-pinch-zoom: ; | |
--tw-scroll-snap-strictness: proximity; | |
--tw-gradient-from-position: ; | |
--tw-gradient-via-position: ; | |
--tw-gradient-to-position: ; | |
--tw-ordinal: ; | |
--tw-slashed-zero: ; | |
--tw-numeric-figure: ; | |
--tw-numeric-spacing: ; | |
--tw-numeric-fraction: ; | |
--tw-ring-inset: ; | |
--tw-ring-offset-width: 0px; | |
--tw-ring-offset-color: #fff; | |
--tw-ring-color: rgb(59 130 246 / 0.5); | |
--tw-ring-offset-shadow: 0 0 #0000; | |
--tw-ring-shadow: 0 0 #0000; | |
--tw-shadow: 0 0 #0000; | |
--tw-shadow-colored: 0 0 #0000; | |
--tw-blur: ; | |
--tw-brightness: ; | |
--tw-contrast: ; | |
--tw-grayscale: ; | |
--tw-hue-rotate: ; | |
--tw-invert: ; | |
--tw-saturate: ; | |
--tw-sepia: ; | |
--tw-drop-shadow: ; | |
--tw-backdrop-blur: ; | |
--tw-backdrop-brightness: ; | |
--tw-backdrop-contrast: ; | |
--tw-backdrop-grayscale: ; | |
--tw-backdrop-hue-rotate: ; | |
--tw-backdrop-invert: ; | |
--tw-backdrop-opacity: ; | |
--tw-backdrop-saturate: ; | |
--tw-backdrop-sepia: ; | |
} | |
.container { | |
width: 100%; | |
margin-right: auto; | |
margin-left: auto; | |
padding-right: 10px; | |
padding-left: 10px; | |
} | |
.pointer-events-none { | |
pointer-events: none; | |
} | |
.invisible { | |
visibility: hidden; | |
} | |
.static { | |
position: static; | |
} | |
.fixed { | |
position: fixed; | |
} | |
.absolute { | |
position: absolute; | |
} | |
.relative { | |
position: relative; | |
} | |
.-bottom-\[45px\] { | |
bottom: -45px; | |
} | |
.-right-4 { | |
right: -1rem; | |
} | |
.-right-\[50px\] { | |
right: -50px; | |
} | |
.left-0 { | |
left: 0px; | |
} | |
.left-1\/2 { | |
left: 50%; | |
} | |
.right-0 { | |
right: 0px; | |
} | |
.top-0 { | |
top: 0px; | |
} | |
.top-\[110\%\] { | |
top: 110%; | |
} | |
.z-0 { | |
z-index: 0; | |
} | |
.z-50 { | |
z-index: 50; | |
} | |
.z-\[1\] { | |
z-index: 1; | |
} | |
.z-\[2\] { | |
z-index: 2; | |
} | |
.z-\[3\] { | |
z-index: 3; | |
} | |
.z-\[400\] { | |
z-index: 400; | |
} | |
.z-\[500\] { | |
z-index: 500; | |
} | |
.col-span-1 { | |
grid-column: span 1 / span 1; | |
} | |
.row-span-2 { | |
grid-row: span 2 / span 2; | |
} | |
.mx-auto { | |
margin-left: auto; | |
margin-right: auto; | |
} | |
.my-auto { | |
margin-top: auto; | |
margin-bottom: auto; | |
} | |
.mb-\[120px\] { | |
margin-bottom: 120px; | |
} | |
.mb-\[72px\] { | |
margin-bottom: 72px; | |
} | |
.mb-auto { | |
margin-bottom: auto; | |
} | |
.ml-\[100px\] { | |
margin-left: 100px; | |
} | |
.ml-\[250px\] { | |
margin-left: 250px; | |
} | |
.mr-auto { | |
margin-right: auto; | |
} | |
.mt-10 { | |
margin-top: 2.5rem; | |
} | |
.mt-11 { | |
margin-top: 2.75rem; | |
} | |
.mt-12 { | |
margin-top: 3rem; | |
} | |
.mt-2 { | |
margin-top: 0.5rem; | |
} | |
.mt-3 { | |
margin-top: 0.75rem; | |
} | |
.mt-4 { | |
margin-top: 1rem; | |
} | |
.mt-5 { | |
margin-top: 1.25rem; | |
} | |
.mt-6 { | |
margin-top: 1.5rem; | |
} | |
.mt-7 { | |
margin-top: 1.75rem; | |
} | |
.mt-8 { | |
margin-top: 2rem; | |
} | |
.mt-\[100px\] { | |
margin-top: 100px; | |
} | |
.mt-\[25px\] { | |
margin-top: 25px; | |
} | |
.mt-\[30px\] { | |
margin-top: 30px; | |
} | |
.mt-\[54px\] { | |
margin-top: 54px; | |
} | |
.mt-\[56px\] { | |
margin-top: 56px; | |
} | |
.mt-\[64px\] { | |
margin-top: 64px; | |
} | |
.mt-\[72px\] { | |
margin-top: 72px; | |
} | |
.mt-\[76px\] { | |
margin-top: 76px; | |
} | |
.mt-auto { | |
margin-top: auto; | |
} | |
.block { | |
display: block; | |
} | |
.inline-block { | |
display: inline-block; | |
} | |
.flex { | |
display: flex; | |
} | |
.grid { | |
display: grid; | |
} | |
.hidden { | |
display: none; | |
} | |
.h-1 { | |
height: 0.25rem; | |
} | |
.h-10 { | |
height: 2.5rem; | |
} | |
.h-11 { | |
height: 2.75rem; | |
} | |
.h-12 { | |
height: 3rem; | |
} | |
.h-\[1px\] { | |
height: 1px; | |
} | |
.h-\[204px\] { | |
height: 204px; | |
} | |
.h-\[369px\] { | |
height: 369px; | |
} | |
.h-\[550px\] { | |
height: 550px; | |
} | |
.h-\[64px\] { | |
height: 64px; | |
} | |
.h-auto { | |
height: auto; | |
} | |
.h-full { | |
height: 100%; | |
} | |
.h-screen { | |
height: 100vh; | |
} | |
.max-h-0 { | |
max-height: 0px; | |
} | |
.min-h-\[756px\] { | |
min-height: 756px; | |
} | |
.min-h-screen { | |
min-height: 100vh; | |
} | |
.w-10 { | |
width: 2.5rem; | |
} | |
.w-12 { | |
width: 3rem; | |
} | |
.w-20 { | |
width: 5rem; | |
} | |
.w-\[200px\] { | |
width: 200px; | |
} | |
.w-\[64px\] { | |
width: 64px; | |
} | |
.w-\[90\%\] { | |
width: 90%; | |
} | |
.w-full { | |
width: 100%; | |
} | |
.max-w-\[150px\] { | |
max-width: 150px; | |
} | |
.max-w-\[156px\] { | |
max-width: 156px; | |
} | |
.max-w-\[230px\] { | |
max-width: 230px; | |
} | |
.max-w-\[250px\] { | |
max-width: 250px; | |
} | |
.max-w-\[320px\] { | |
max-width: 320px; | |
} | |
.max-w-\[360px\] { | |
max-width: 360px; | |
} | |
.max-w-\[368px\] { | |
max-width: 368px; | |
} | |
.max-w-\[404px\] { | |
max-width: 404px; | |
} | |
.max-w-\[405px\] { | |
max-width: 405px; | |
} | |
.max-w-\[466px\] { | |
max-width: 466px; | |
} | |
.max-w-\[473px\] { | |
max-width: 473px; | |
} | |
.max-w-\[554px\] { | |
max-width: 554px; | |
} | |
.max-w-\[564px\] { | |
max-width: 564px; | |
} | |
.max-w-\[586px\] { | |
max-width: 586px; | |
} | |
.max-w-\[630px\] { | |
max-width: 630px; | |
} | |
.max-w-\[662px\] { | |
max-width: 662px; | |
} | |
.max-w-\[777px\] { | |
max-width: 777px; | |
} | |
.shrink-0 { | |
flex-shrink: 0; | |
} | |
.-translate-x-1\/2 { | |
--tw-translate-x: -50%; | |
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); | |
} | |
.-translate-x-full { | |
--tw-translate-x: -100%; | |
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); | |
} | |
.-translate-y-full { | |
--tw-translate-y: -100%; | |
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); | |
} | |
.-rotate-1 { | |
--tw-rotate: -1deg; | |
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); | |
} | |
.-rotate-\[30deg\] { | |
--tw-rotate: -30deg; | |
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); | |
} | |
.transform { | |
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); | |
} | |
.cursor-pointer { | |
cursor: pointer; | |
} | |
.appearance-none { | |
-webkit-appearance: none; | |
-moz-appearance: none; | |
appearance: none; | |
} | |
.grid-cols-2 { | |
grid-template-columns: repeat(2, minmax(0, 1fr)); | |
} | |
.grid-cols-3 { | |
grid-template-columns: repeat(3, minmax(0, 1fr)); | |
} | |
.grid-cols-4 { | |
grid-template-columns: repeat(4, minmax(0, 1fr)); | |
} | |
.flex-col { | |
flex-direction: column; | |
} | |
.items-start { | |
align-items: flex-start; | |
} | |
.items-center { | |
align-items: center; | |
} | |
.justify-center { | |
justify-content: center; | |
} | |
.justify-between { | |
justify-content: space-between; | |
} | |
.gap-1 { | |
gap: 0.25rem; | |
} | |
.gap-10 { | |
gap: 2.5rem; | |
} | |
.gap-2 { | |
gap: 0.5rem; | |
} | |
.gap-3 { | |
gap: 0.75rem; | |
} | |
.gap-4 { | |
gap: 1rem; | |
} | |
.gap-6 { | |
gap: 1.5rem; | |
} | |
.gap-8 { | |
gap: 2rem; | |
} | |
.gap-\[10px\] { | |
gap: 10px; | |
} | |
.gap-\[18px\] { | |
gap: 18px; | |
} | |
.gap-\[93px\] { | |
gap: 93px; | |
} | |
.gap-x-4 { | |
-moz-column-gap: 1rem; | |
column-gap: 1rem; | |
} | |
.gap-y-6 { | |
row-gap: 1.5rem; | |
} | |
.space-y-2 > :not([hidden]) ~ :not([hidden]) { | |
--tw-space-y-reverse: 0; | |
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); | |
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); | |
} | |
.space-y-3 > :not([hidden]) ~ :not([hidden]) { | |
--tw-space-y-reverse: 0; | |
margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); | |
margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); | |
} | |
.space-y-4 > :not([hidden]) ~ :not([hidden]) { | |
--tw-space-y-reverse: 0; | |
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); | |
margin-bottom: calc(1rem * var(--tw-space-y-reverse)); | |
} | |
.space-y-6 > :not([hidden]) ~ :not([hidden]) { | |
--tw-space-y-reverse: 0; | |
margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); | |
margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); | |
} | |
.space-y-8 > :not([hidden]) ~ :not([hidden]) { | |
--tw-space-y-reverse: 0; | |
margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse))); | |
margin-bottom: calc(2rem * var(--tw-space-y-reverse)); | |
} | |
.overflow-hidden { | |
overflow: hidden; | |
} | |
.rounded-2xl { | |
border-radius: 1rem; | |
} | |
.rounded-3xl { | |
border-radius: 1.5rem; | |
} | |
.rounded-\[100px\] { | |
border-radius: 100px; | |
} | |
.rounded-\[10px\] { | |
border-radius: 10px; | |
} | |
.rounded-\[16px\] { | |
border-radius: 16px; | |
} | |
.rounded-\[22px\] { | |
border-radius: 22px; | |
} | |
.rounded-\[40px\] { | |
border-radius: 40px; | |
} | |
.rounded-full { | |
border-radius: 9999px; | |
} | |
.rounded-lg { | |
border-radius: 0.5rem; | |
} | |
.rounded-bl-none { | |
border-bottom-left-radius: 0px; | |
} | |
.rounded-br-none { | |
border-bottom-right-radius: 0px; | |
} | |
.border { | |
border-width: 1px; | |
} | |
.border-b { | |
border-bottom-width: 1px; | |
} | |
.border-b-2 { | |
border-bottom-width: 2px; | |
} | |
.border-r { | |
border-right-width: 1px; | |
} | |
.border-t { | |
border-top-width: 1px; | |
} | |
.border-t-2 { | |
border-top-width: 2px; | |
} | |
.border-\[\#333333\] { | |
--tw-border-opacity: 1; | |
border-color: rgb(51 51 51 / var(--tw-border-opacity)); | |
} | |
.border-\[\#545454\] { | |
--tw-border-opacity: 1; | |
border-color: rgb(84 84 84 / var(--tw-border-opacity)); | |
} | |
.border-\[\#757575\] { | |
--tw-border-opacity: 1; | |
border-color: rgb(117 117 117 / var(--tw-border-opacity)); | |
} | |
.border-\[\#FFDEFD\] { | |
--tw-border-opacity: 1; | |
border-color: rgb(255 222 253 / var(--tw-border-opacity)); | |
} | |
.border-\[\#ccc\] { | |
--tw-border-opacity: 1; | |
border-color: rgb(204 204 204 / var(--tw-border-opacity)); | |
} | |
.border-\[\#d9d9d9\] { | |
--tw-border-opacity: 1; | |
border-color: rgb(217 217 217 / var(--tw-border-opacity)); | |
} | |
.border-white { | |
--tw-border-opacity: 1; | |
border-color: rgb(255 255 255 / var(--tw-border-opacity)); | |
} | |
.bg-\[\#070011\] { | |
--tw-bg-opacity: 1; | |
background-color: rgb(7 0 17 / var(--tw-bg-opacity)); | |
} | |
.bg-\[\#0D0D0D\] { | |
--tw-bg-opacity: 1; | |
background-color: rgb(13 13 13 / var(--tw-bg-opacity)); | |
} | |
.bg-\[\#0b0514\] { | |
--tw-bg-opacity: 1; | |
background-color: rgb(11 5 20 / var(--tw-bg-opacity)); | |
} | |
.bg-\[\#0d0d0d\] { | |
--tw-bg-opacity: 1; | |
background-color: rgb(13 13 13 / var(--tw-bg-opacity)); | |
} | |
.bg-\[\#141414\] { | |
--tw-bg-opacity: 1; | |
background-color: rgb(20 20 20 / var(--tw-bg-opacity)); | |
} | |
.bg-\[\#1F1F1F\] { | |
--tw-bg-opacity: 1; | |
background-color: rgb(31 31 31 / var(--tw-bg-opacity)); | |
} | |
.bg-\[\#1f1f1f\] { | |
--tw-bg-opacity: 1; | |
background-color: rgb(31 31 31 / var(--tw-bg-opacity)); | |
} | |
.bg-\[\#333333\] { | |
--tw-bg-opacity: 1; | |
background-color: rgb(51 51 51 / var(--tw-bg-opacity)); | |
} | |
.bg-\[\#333\] { | |
--tw-bg-opacity: 1; | |
background-color: rgb(51 51 51 / var(--tw-bg-opacity)); | |
} | |
.bg-\[\#545454\] { | |
--tw-bg-opacity: 1; | |
background-color: rgb(84 84 84 / var(--tw-bg-opacity)); | |
} | |
.bg-\[\#757575\] { | |
--tw-bg-opacity: 1; | |
background-color: rgb(117 117 117 / var(--tw-bg-opacity)); | |
} | |
.bg-\[\#f6f6f6\] { | |
--tw-bg-opacity: 1; | |
background-color: rgb(246 246 246 / var(--tw-bg-opacity)); | |
} | |
.bg-black { | |
--tw-bg-opacity: 1; | |
background-color: rgb(0 0 0 / var(--tw-bg-opacity)); | |
} | |
.bg-grey1 { | |
--tw-bg-opacity: 1; | |
background-color: rgb(246 246 246 / var(--tw-bg-opacity)); | |
} | |
.bg-white { | |
--tw-bg-opacity: 1; | |
background-color: rgb(255 255 255 / var(--tw-bg-opacity)); | |
} | |
.bg-\[url\(\'\.\.\/img\/hero-bg\.webp\'\)\] { | |
background-image: url('../img/hero-bg.webp'); | |
} | |
.bg-gradient-to-tr { | |
background-image: linear-gradient(to top right, var(--tw-gradient-stops)); | |
} | |
.from-\[\#B280F5\] { | |
--tw-gradient-from: #B280F5 var(--tw-gradient-from-position); | |
--tw-gradient-to: rgb(178 128 245 / 0) var(--tw-gradient-to-position); | |
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); | |
} | |
.from-\[\#B380F5\] { | |
--tw-gradient-from: #B380F5 var(--tw-gradient-from-position); | |
--tw-gradient-to: rgb(179 128 245 / 0) var(--tw-gradient-to-position); | |
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); | |
} | |
.to-\[\#A6E8FF\] { | |
--tw-gradient-to: #A6E8FF var(--tw-gradient-to-position); | |
} | |
.bg-cover { | |
background-size: cover; | |
} | |
.bg-center { | |
background-position: center; | |
} | |
.bg-no-repeat { | |
background-repeat: no-repeat; | |
} | |
.fill-\[\#F6F6F6\] { | |
fill: #F6F6F6; | |
} | |
.stroke-\[\#B280F5\] { | |
stroke: #B280F5; | |
} | |
.stroke-\[\#B380F5\] { | |
stroke: #B380F5; | |
} | |
.stroke-white { | |
stroke: #fff; | |
} | |
.p-3 { | |
padding: 0.75rem; | |
} | |
.p-6 { | |
padding: 1.5rem; | |
} | |
.p-\[10\.5px\] { | |
padding: 10.5px; | |
} | |
.p-\[10px\] { | |
padding: 10px; | |
} | |
.p-\[1px\] { | |
padding: 1px; | |
} | |
.px-4 { | |
padding-left: 1rem; | |
padding-right: 1rem; | |
} | |
.px-6 { | |
padding-left: 1.5rem; | |
padding-right: 1.5rem; | |
} | |
.px-8 { | |
padding-left: 2rem; | |
padding-right: 2rem; | |
} | |
.px-\[10px\] { | |
padding-left: 10px; | |
padding-right: 10px; | |
} | |
.px-\[30px\] { | |
padding-left: 30px; | |
padding-right: 30px; | |
} | |
.px-\[64px\] { | |
padding-left: 64px; | |
padding-right: 64px; | |
} | |
.px-\[82\.5px\] { | |
padding-left: 82.5px; | |
padding-right: 82.5px; | |
} | |
.px-\[88px\] { | |
padding-left: 88px; | |
padding-right: 88px; | |
} | |
.py-10 { | |
padding-top: 2.5rem; | |
padding-bottom: 2.5rem; | |
} | |
.py-2 { | |
padding-top: 0.5rem; | |
padding-bottom: 0.5rem; | |
} | |
.py-3 { | |
padding-top: 0.75rem; | |
padding-bottom: 0.75rem; | |
} | |
.py-4 { | |
padding-top: 1rem; | |
padding-bottom: 1rem; | |
} | |
.py-6 { | |
padding-top: 1.5rem; | |
padding-bottom: 1.5rem; | |
} | |
.py-7 { | |
padding-top: 1.75rem; | |
padding-bottom: 1.75rem; | |
} | |
.py-\[100px\] { | |
padding-top: 100px; | |
padding-bottom: 100px; | |
} | |
.py-\[10px\] { | |
padding-top: 10px; | |
padding-bottom: 10px; | |
} | |
.py-\[120px\] { | |
padding-top: 120px; | |
padding-bottom: 120px; | |
} | |
.py-\[13px\] { | |
padding-top: 13px; | |
padding-bottom: 13px; | |
} | |
.py-\[14\.5px\] { | |
padding-top: 14.5px; | |
padding-bottom: 14.5px; | |
} | |
.py-\[14px\] { | |
padding-top: 14px; | |
padding-bottom: 14px; | |
} | |
.py-\[16\.5px\] { | |
padding-top: 16.5px; | |
padding-bottom: 16.5px; | |
} | |
.py-\[18\.5px\] { | |
padding-top: 18.5px; | |
padding-bottom: 18.5px; | |
} | |
.py-\[18px\] { | |
padding-top: 18px; | |
padding-bottom: 18px; | |
} | |
.pb-20 { | |
padding-bottom: 5rem; | |
} | |
.pb-4 { | |
padding-bottom: 1rem; | |
} | |
.pb-5 { | |
padding-bottom: 1.25rem; | |
} | |
.pb-6 { | |
padding-bottom: 1.5rem; | |
} | |
.pb-8 { | |
padding-bottom: 2rem; | |
} | |
.pb-\[120px\] { | |
padding-bottom: 120px; | |
} | |
.pb-\[18px\] { | |
padding-bottom: 18px; | |
} | |
.pb-\[300px\] { | |
padding-bottom: 300px; | |
} | |
.pb-\[42px\] { | |
padding-bottom: 42px; | |
} | |
.pb-\[55px\] { | |
padding-bottom: 55px; | |
} | |
.pb-\[57px\] { | |
padding-bottom: 57px; | |
} | |
.pb-\[84px\] { | |
padding-bottom: 84px; | |
} | |
.pb-\[97px\] { | |
padding-bottom: 97px; | |
} | |
.pl-10 { | |
padding-left: 2.5rem; | |
} | |
.pl-8 { | |
padding-left: 2rem; | |
} | |
.pl-\[10px\] { | |
padding-left: 10px; | |
} | |
.pl-\[110px\] { | |
padding-left: 110px; | |
} | |
.pl-\[29px\] { | |
padding-left: 29px; | |
} | |
.pl-\[64px\] { | |
padding-left: 64px; | |
} | |
.pr-10 { | |
padding-right: 2.5rem; | |
} | |
.pr-6 { | |
padding-right: 1.5rem; | |
} | |
.pr-8 { | |
padding-right: 2rem; | |
} | |
.pt-10 { | |
padding-top: 2.5rem; | |
} | |
.pt-6 { | |
padding-top: 1.5rem; | |
} | |
.pt-8 { | |
padding-top: 2rem; | |
} | |
.pt-\[116px\] { | |
padding-top: 116px; | |
} | |
.pt-\[120px\] { | |
padding-top: 120px; | |
} | |
.pt-\[144px\] { | |
padding-top: 144px; | |
} | |
.pt-\[26px\] { | |
padding-top: 26px; | |
} | |
.pt-\[31px\] { | |
padding-top: 31px; | |
} | |
.pt-\[71px\] { | |
padding-top: 71px; | |
} | |
.pt-\[75px\] { | |
padding-top: 75px; | |
} | |
.text-center { | |
text-align: center; | |
} | |
.font-roboto { | |
font-family: Roboto, sans-serif; | |
} | |
.font-robotocondenced { | |
font-family: Roboto Condensed, sans-serif; | |
} | |
.font-robotomono { | |
font-family: Roboto Mono, sans-serif; | |
} | |
.font-syne { | |
font-family: Syne, sans-serif; | |
} | |
.text-\[20px\] { | |
font-size: 20px; | |
} | |
.text-\[24px\] { | |
font-size: 24px; | |
} | |
.text-\[32px\] { | |
font-size: 32px; | |
} | |
.text-\[40px\] { | |
font-size: 40px; | |
} | |
.text-\[48px\] { | |
font-size: 48px; | |
} | |
.text-\[72px\] { | |
font-size: 72px; | |
} | |
.text-\[96px\] { | |
font-size: 96px; | |
} | |
.text-base { | |
font-size: 1rem; | |
line-height: 1.5rem; | |
} | |
.text-sm { | |
font-size: 0.875rem; | |
line-height: 1.25rem; | |
} | |
.font-bold { | |
font-weight: 700; | |
} | |
.font-light { | |
font-weight: 300; | |
} | |
.font-medium { | |
font-weight: 500; | |
} | |
.font-normal { | |
font-weight: 400; | |
} | |
.font-semibold { | |
font-weight: 600; | |
} | |
.uppercase { | |
text-transform: uppercase; | |
} | |
.leading-none { | |
line-height: 1; | |
} | |
.leading-normal { | |
line-height: 1.5; | |
} | |
.leading-tight { | |
line-height: 1.25; | |
} | |
.-tracking-\[0\.24px\] { | |
letter-spacing: -0.24px; | |
} | |
.-tracking-\[0\.8px\] { | |
letter-spacing: -0.8px; | |
} | |
.-tracking-\[1\.2px\] { | |
letter-spacing: -1.2px; | |
} | |
.-tracking-\[1px\] { | |
letter-spacing: -1px; | |
} | |
.-tracking-\[3\.6px\] { | |
letter-spacing: -3.6px; | |
} | |
.-tracking-tight { | |
letter-spacing: 0.025em; | |
} | |
.-tracking-wide { | |
letter-spacing: -0.025em; | |
} | |
.-tracking-wider { | |
letter-spacing: -0.05em; | |
} | |
.text-\[\#141414\] { | |
--tw-text-opacity: 1; | |
color: rgb(20 20 20 / var(--tw-text-opacity)); | |
} | |
.text-\[\#1f1f1f\] { | |
--tw-text-opacity: 1; | |
color: rgb(31 31 31 / var(--tw-text-opacity)); | |
} | |
.text-\[\#757575\] { | |
--tw-text-opacity: 1; | |
color: rgb(117 117 117 / var(--tw-text-opacity)); | |
} | |
.text-\[\#999999\] { | |
--tw-text-opacity: 1; | |
color: rgb(153 153 153 / var(--tw-text-opacity)); | |
} | |
.text-\[\#E74720\] { | |
--tw-text-opacity: 1; | |
color: rgb(231 71 32 / var(--tw-text-opacity)); | |
} | |
.text-\[\#FFDEFD\] { | |
--tw-text-opacity: 1; | |
color: rgb(255 222 253 / var(--tw-text-opacity)); | |
} | |
.text-\[\#afafaf\] { | |
--tw-text-opacity: 1; | |
color: rgb(175 175 175 / var(--tw-text-opacity)); | |
} | |
.text-\[\#eee\] { | |
--tw-text-opacity: 1; | |
color: rgb(238 238 238 / var(--tw-text-opacity)); | |
} | |
.text-\[\#eeeeee\] { | |
--tw-text-opacity: 1; | |
color: rgb(238 238 238 / var(--tw-text-opacity)); | |
} | |
.text-\[\#ffdefd\] { | |
--tw-text-opacity: 1; | |
color: rgb(255 222 253 / var(--tw-text-opacity)); | |
} | |
.text-black { | |
--tw-text-opacity: 1; | |
color: rgb(0 0 0 / var(--tw-text-opacity)); | |
} | |
.text-grey1 { | |
--tw-text-opacity: 1; | |
color: rgb(246 246 246 / var(--tw-text-opacity)); | |
} | |
.text-white { | |
--tw-text-opacity: 1; | |
color: rgb(255 255 255 / var(--tw-text-opacity)); | |
} | |
.opacity-0 { | |
opacity: 0; | |
} | |
.outline-none { | |
outline: 2px solid transparent; | |
outline-offset: 2px; | |
} | |
.transition { | |
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; | |
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; | |
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; | |
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); | |
transition-duration: 150ms; | |
} | |
.transition-colors { | |
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; | |
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); | |
transition-duration: 150ms; | |
} | |
.transition-transform { | |
transition-property: transform; | |
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); | |
transition-duration: 150ms; | |
} | |
@font-face { | |
font-family: 'Roboto'; | |
src: url('../fonts/Roboto-Regular.woff2') format('woff2'); | |
font-weight: normal; | |
font-style: normal; | |
font-display: swap; | |
} | |
@font-face { | |
font-family: 'Roboto'; | |
src: url('../fonts/Roboto-Medium.woff2') format('woff2'); | |
font-weight: medium; | |
font-style: normal; | |
font-display: swap; | |
} | |
@font-face { | |
font-family: 'Roboto Condensed'; | |
src: url('../fonts/RobotoCondensed-Bold.woff2') format('woff2'); | |
font-weight: bold; | |
font-style: normal; | |
font-display: swap; | |
} | |
@font-face { | |
font-family: 'Roboto Condensed'; | |
src: url('../fonts/RobotoCondensed-Light.woff2') format('woff2'); | |
font-weight: 300; | |
font-style: normal; | |
font-display: swap; | |
} | |
@font-face { | |
font-family: 'Roboto Mono'; | |
src: url('../fonts/RobotoMono-Regular.woff2') format('woff2'); | |
font-weight: normal; | |
font-style: normal; | |
font-display: swap; | |
} | |
@font-face { | |
font-family: 'Roboto Mono'; | |
src: url('../fonts/RobotoMono-Light.woff2') format('woff2'); | |
font-weight: 300; | |
font-style: normal; | |
font-display: swap; | |
} | |
@font-face { | |
font-family: 'Roboto Condensed'; | |
src: url('../fonts/RobotoCondensed-Regular.woff2') format('woff2'); | |
font-weight: normal; | |
font-style: normal; | |
font-display: swap; | |
} | |
@font-face { | |
font-family: 'Syne'; | |
src: url('../fonts/Syne-Regular.woff2') format('woff2'); | |
font-weight: normal; | |
font-style: normal; | |
font-display: swap; | |
} | |
@font-face { | |
font-family: 'Syne'; | |
src: url('../fonts/Syne-Medium.woff2') format('woff2'); | |
font-weight: 500; | |
font-style: normal; | |
font-display: swap; | |
} | |
body.stop-scroll { | |
overflow: hidden; | |
} | |
/* HEADER */ | |
#header { | |
transform: translateY(-100%); | |
transition: 0.3s; | |
} | |
#header.is-visible { | |
transform: translateY(0); | |
transition: transform 0.3s; | |
} | |
#header.active { | |
background-color: #07000f; | |
transition: 0.3s; | |
} | |
.purple-btn { | |
background: linear-gradient(210deg, #A6E8FF 0%, #B280F5 100%); | |
transition: 0.2s; | |
} | |
.purple-btn:hover div { | |
background: linear-gradient(210deg, #A6E8FF 0%, #B280F5 100%); | |
} | |
.purple-btn:hover div span { | |
-webkit-text-fill-color: #000; | |
transition: 0.2s; | |
} | |
.purple-btn:hover div svg { | |
stroke: #000 !important; | |
} | |
.text-gradient { | |
background: linear-gradient(210deg, #A6E8FF 0%, #B280F5 100%); | |
background-clip: text; | |
-webkit-background-clip: text; | |
-webkit-text-fill-color: transparent; | |
} | |
/* FAQ SECTION */ | |
.acc-item.active .acc-question svg { | |
transform: rotate(45deg); | |
} | |
.acc-item .acc-question:hover h3 { | |
background: linear-gradient(210deg, #A6E8FF 0%, #B280F5 100%); | |
background-clip: text; | |
-webkit-background-clip: text; | |
-webkit-text-fill-color: transparent; | |
} | |
.acc-item.active .acc-answer { | |
max-height: 100%; | |
overflow: visible; | |
padding-bottom: 20px; | |
} | |
.q-radio input::before { | |
content: ""; | |
width: 20px; | |
height: 20px; | |
border: 2px solid #757575; | |
border-radius: 50%; | |
position: absolute; | |
left: 32px; | |
top: 50%; | |
transform: translateY(-50%); | |
} | |
.q-radio input::after { | |
content: ""; | |
width: 12px; | |
height: 12px; | |
border-radius: 50%; | |
background-color: #1f1f1f; | |
position: absolute; | |
left: 36px; | |
top: 50%; | |
transform: translateY(-50%); | |
opacity: 0; | |
visibility: hidden; | |
} | |
.q-radio input:checked { | |
background-color: #A6E8FF; | |
} | |
.q-radio input:checked::before { | |
border-color: #1f1f1f; | |
} | |
.q-radio input:checked::after { | |
opacity: 1; | |
visibility: visible; | |
} | |
.q-radio input:checked+span { | |
color: #1f1f1f; | |
} | |
.q-checkbox input::before { | |
content: ""; | |
width: 24px; | |
height: 24px; | |
border-radius: 4px; | |
border: 1px solid #757575; | |
background-color: #1f1f1f; | |
position: absolute; | |
left: 32px; | |
top: 50%; | |
transform: translateY(-50%); | |
} | |
.q-checkbox input::after { | |
content: ""; | |
width: 24px; | |
height: 24px; | |
border-radius: 4px; | |
background: url('../img/checked.svg') no-repeat; | |
position: absolute; | |
left: 32px; | |
top: 50%; | |
transform: translateY(-50%); | |
opacity: 0; | |
visibility: hidden; | |
} | |
.q-checkbox input:checked { | |
background-color: #A6E8FF; | |
} | |
.q-checkbox input:checked+span { | |
color: #1f1f1f; | |
} | |
.q-checkbox input:checked::before { | |
border: none; | |
} | |
.q-checkbox input:checked::after { | |
opacity: 1; | |
visibility: visible; | |
} | |
@media (max-width: 480px) { | |
.q-radio { | |
padding-top: 13px; | |
padding-bottom: 13px; | |
padding-left: 50px; | |
} | |
.q-radio span { | |
font-size: 14px; | |
} | |
.q-radio input::before { | |
width: 20px; | |
height: 20px; | |
left: 18px; | |
} | |
.q-radio input::after { | |
left: 22px; | |
} | |
.q-checkbox { | |
padding-top: 13px; | |
padding-bottom: 13px; | |
padding-left: 50px; | |
} | |
.q-checkbox span { | |
font-size: 14px; | |
} | |
.q-checkbox input::before { | |
width: 20px; | |
height: 20px; | |
left: 18px; | |
} | |
.q-checkbox input::after { | |
width: 20px; | |
height: 20px; | |
left: 18px; | |
background-size: contain; | |
} | |
} | |
.tab-btn svg { | |
stroke: #fff; | |
pointer-events: none; | |
} | |
.tab-btn span { | |
pointer-events: none; | |
} | |
.acc-btn svg { | |
fill: #fff; | |
} | |
.acc-btn:hover svg { | |
fill: #000; | |
} | |
.acc-btn:hover { | |
background-color: #333333; | |
} | |
.tab-btn:hover { | |
background-color: #333333; | |
} | |
.tab-btn.active { | |
background: linear-gradient(210deg, #A6E8FF 0%, #B280F5 100%); | |
color: #000; | |
} | |
.tab-btn.active svg { | |
stroke: #000; | |
} | |
.start-toggle { | |
transition: 0.2s; | |
} | |
.start-toggle::before { | |
content: ""; | |
width: 34px; | |
height: 34px; | |
border-radius: 50%; | |
background-color: #f6f6f6; | |
position: absolute; | |
left: 5px; | |
top: 5px; | |
bottom: 5px; | |
z-index: 2; | |
} | |
.start-toggle:disabled { | |
background-color: #cbcbcb; | |
} | |
.start-toggle:hover { | |
background-color: #333; | |
transition: 0.2s; | |
} | |
.start-toggle:checked { | |
background: linear-gradient(210deg, #A6E8FF 0%, #B280F5 100%); | |
} | |
.start-toggle:checked::before { | |
left: auto; | |
right: 5px; | |
background-color: #141414; | |
} | |
.dashlist-done input::before { | |
content: ""; | |
width: 20px; | |
height: 20px; | |
border-radius: 50%; | |
border: 2px solid #f6f6f6; | |
position: absolute; | |
left: 0; | |
top: 2px; | |
} | |
.dashlist-done input:checked+span { | |
color: #757575; | |
} | |
.dashlist-done input:checked::before { | |
border: none; | |
background-color: #757575; | |
} | |
.dashlist-done input:checked::after { | |
content: ""; | |
width: 20px; | |
height: 20px; | |
background: url('../img/dashlist-checked.svg') no-repeat center/contain; | |
position: absolute; | |
left: 0; | |
top: 2px; | |
} | |
.burger { | |
width: 22px; | |
height: 18px; | |
position: relative; | |
} | |
.burger span:nth-child(1) { | |
width: 100%; | |
height: 2px; | |
border-radius: 5px; | |
background-color: #fff; | |
position: absolute; | |
left: 0; | |
top: 0; | |
transition: 0.2s; | |
} | |
.burger span:nth-child(2) { | |
width: 100%; | |
height: 2px; | |
border-radius: 5px; | |
background-color: #fff; | |
position: absolute; | |
left: 0; | |
top: 50%; | |
transform: translateY(-50%); | |
transition: 0.2s; | |
} | |
.burger span:nth-child(3) { | |
width: 100%; | |
height: 2px; | |
border-radius: 5px; | |
background-color: #fff; | |
position: absolute; | |
left: 0; | |
bottom: 0; | |
transition: 0.2s; | |
} | |
.burger.active span:nth-child(1) { | |
transform: rotate(45deg); | |
top: 8px; | |
transition: 0.2s; | |
} | |
.burger.active span:nth-child(2) { | |
opacity: 0; | |
transition: 0.2s; | |
} | |
.burger.active span:nth-child(3) { | |
transform: rotate(-45deg); | |
transition: 0.2s; | |
bottom: 8px; | |
} | |
.menu.is-visible { | |
transform: translateX(0); | |
transition: transform 0.2s; | |
} | |
.profile-inner.active { | |
opacity: 1; | |
visibility: visible; | |
} | |
.placeholder\:font-roboto::-moz-placeholder { | |
font-family: Roboto, sans-serif; | |
} | |
.placeholder\:font-roboto::placeholder { | |
font-family: Roboto, sans-serif; | |
} | |
.placeholder\:text-\[\#999999\]::-moz-placeholder { | |
--tw-text-opacity: 1; | |
color: rgb(153 153 153 / var(--tw-text-opacity)); | |
} | |
.placeholder\:text-\[\#999999\]::placeholder { | |
--tw-text-opacity: 1; | |
color: rgb(153 153 153 / var(--tw-text-opacity)); | |
} | |
.hover\:border-\[\#999\]:hover { | |
--tw-border-opacity: 1; | |
border-color: rgb(153 153 153 / var(--tw-border-opacity)); | |
} | |
.hover\:border-white:hover { | |
--tw-border-opacity: 1; | |
border-color: rgb(255 255 255 / var(--tw-border-opacity)); | |
} | |
.hover\:bg-\[\#141414\]:hover { | |
--tw-bg-opacity: 1; | |
background-color: rgb(20 20 20 / var(--tw-bg-opacity)); | |
} | |
.hover\:bg-\[\#1f1f1f\]:hover { | |
--tw-bg-opacity: 1; | |
background-color: rgb(31 31 31 / var(--tw-bg-opacity)); | |
} | |
.hover\:bg-\[\#F9C3F5\]:hover { | |
--tw-bg-opacity: 1; | |
background-color: rgb(249 195 245 / var(--tw-bg-opacity)); | |
} | |
.hover\:bg-\[\#FFDEFD\]:hover { | |
--tw-bg-opacity: 1; | |
background-color: rgb(255 222 253 / var(--tw-bg-opacity)); | |
} | |
.hover\:bg-\[\#e2e2e2\]:hover { | |
--tw-bg-opacity: 1; | |
background-color: rgb(226 226 226 / var(--tw-bg-opacity)); | |
} | |
.hover\:text-\[\#B280F5\]:hover { | |
--tw-text-opacity: 1; | |
color: rgb(178 128 245 / var(--tw-text-opacity)); | |
} | |
.hover\:text-\[\#B380F5\]:hover { | |
--tw-text-opacity: 1; | |
color: rgb(179 128 245 / var(--tw-text-opacity)); | |
} | |
.hover\:text-black:hover { | |
--tw-text-opacity: 1; | |
color: rgb(0 0 0 / var(--tw-text-opacity)); | |
} | |
.hover\:text-purplmain:hover { | |
--tw-text-opacity: 1; | |
color: rgb(178 128 245 / var(--tw-text-opacity)); | |
} | |
.focus\:placeholder\:text-transparent:focus::-moz-placeholder { | |
color: transparent; | |
} | |
.focus\:placeholder\:text-transparent:focus::placeholder { | |
color: transparent; | |
} | |
.group:hover .group-hover\:fill-purplmain { | |
fill: #B280F5; | |
} | |
.group:hover .group-hover\:stroke-\[\#B280F5\] { | |
stroke: #B280F5; | |
} | |
@media (max-width: 1300px) { | |
.xxlg\:px-8 { | |
padding-left: 2rem; | |
padding-right: 2rem; | |
} | |
} | |
@media (max-width: 1150px) { | |
.xlg\:mx-\[10px\] { | |
margin-left: 10px; | |
margin-right: 10px; | |
} | |
.xlg\:ml-0 { | |
margin-left: 0px; | |
} | |
.xlg\:block { | |
display: block; | |
} | |
.xlg\:hidden { | |
display: none; | |
} | |
.xlg\:w-full { | |
width: 100%; | |
} | |
.xlg\:max-w-\[320px\] { | |
max-width: 320px; | |
} | |
.xlg\:max-w-\[520px\] { | |
max-width: 520px; | |
} | |
.xlg\:justify-center { | |
justify-content: center; | |
} | |
.xlg\:bg-\[\#141414\] { | |
--tw-bg-opacity: 1; | |
background-color: rgb(20 20 20 / var(--tw-bg-opacity)); | |
} | |
.xlg\:px-0 { | |
padding-left: 0px; | |
padding-right: 0px; | |
} | |
.xlg\:px-\[10px\] { | |
padding-left: 10px; | |
padding-right: 10px; | |
} | |
.xlg\:py-4 { | |
padding-top: 1rem; | |
padding-bottom: 1rem; | |
} | |
.xlg\:pb-0 { | |
padding-bottom: 0px; | |
} | |
.xlg\:pb-20 { | |
padding-bottom: 5rem; | |
} | |
.xlg\:pt-0 { | |
padding-top: 0px; | |
} | |
.xlg\:text-\[80px\] { | |
font-size: 80px; | |
} | |
} | |
@media (max-width: 992px) { | |
.lg\:right-0 { | |
right: 0px; | |
} | |
.lg\:col-span-3 { | |
grid-column: span 3 / span 3; | |
} | |
.lg\:ml-0 { | |
margin-left: 0px; | |
} | |
.lg\:block { | |
display: block; | |
} | |
.lg\:hidden { | |
display: none; | |
} | |
.lg\:min-h-full { | |
min-height: 100%; | |
} | |
.lg\:max-w-full { | |
max-width: 100%; | |
} | |
.lg\:grid-cols-2 { | |
grid-template-columns: repeat(2, minmax(0, 1fr)); | |
} | |
.lg\:grid-cols-3 { | |
grid-template-columns: repeat(3, minmax(0, 1fr)); | |
} | |
.lg\:flex-col { | |
flex-direction: column; | |
} | |
.lg\:flex-col-reverse { | |
flex-direction: column-reverse; | |
} | |
.lg\:items-center { | |
align-items: center; | |
} | |
.lg\:justify-center { | |
justify-content: center; | |
} | |
.lg\:gap-10 { | |
gap: 2.5rem; | |
} | |
.lg\:gap-12 { | |
gap: 3rem; | |
} | |
.lg\:py-20 { | |
padding-top: 5rem; | |
padding-bottom: 5rem; | |
} | |
.lg\:py-\[85px\] { | |
padding-top: 85px; | |
padding-bottom: 85px; | |
} | |
.lg\:pt-20 { | |
padding-top: 5rem; | |
} | |
.lg\:text-center { | |
text-align: center; | |
} | |
} | |
@media (max-width: 767.99px) { | |
.tbl\:block { | |
display: block; | |
} | |
.tbl\:hidden { | |
display: none; | |
} | |
.tbl\:max-w-full { | |
max-width: 100%; | |
} | |
.tbl\:flex-col { | |
flex-direction: column; | |
} | |
.tbl\:flex-col-reverse { | |
flex-direction: column-reverse; | |
} | |
.tbl\:gap-10 { | |
gap: 2.5rem; | |
} | |
.tbl\:gap-6 { | |
gap: 1.5rem; | |
} | |
.tbl\:text-center { | |
text-align: center; | |
} | |
} | |
@media (max-width: 650px) { | |
.md\:col-span-2 { | |
grid-column: span 2 / span 2; | |
} | |
.md\:mx-auto { | |
margin-left: auto; | |
margin-right: auto; | |
} | |
.md\:mt-10 { | |
margin-top: 2.5rem; | |
} | |
.md\:mt-5 { | |
margin-top: 1.25rem; | |
} | |
.md\:mt-8 { | |
margin-top: 2rem; | |
} | |
.md\:w-\[140px\] { | |
width: 140px; | |
} | |
.md\:w-auto { | |
width: auto; | |
} | |
.md\:max-w-\[80\%\] { | |
max-width: 80%; | |
} | |
.md\:max-w-\[80px\] { | |
max-width: 80px; | |
} | |
.md\:max-w-\[85px\] { | |
max-width: 85px; | |
} | |
.md\:max-w-full { | |
max-width: 100%; | |
} | |
.md\:max-w-none { | |
max-width: none; | |
} | |
.md\:shrink-0 { | |
flex-shrink: 0; | |
} | |
.md\:grid-cols-1 { | |
grid-template-columns: repeat(1, minmax(0, 1fr)); | |
} | |
.md\:grid-cols-2 { | |
grid-template-columns: repeat(2, minmax(0, 1fr)); | |
} | |
.md\:flex-col { | |
flex-direction: column; | |
} | |
.md\:items-start { | |
align-items: flex-start; | |
} | |
.md\:items-center { | |
align-items: center; | |
} | |
.md\:gap-2 { | |
gap: 0.5rem; | |
} | |
.md\:gap-4 { | |
gap: 1rem; | |
} | |
.md\:gap-\[10px\] { | |
gap: 10px; | |
} | |
.md\:border-b { | |
border-bottom-width: 1px; | |
} | |
.md\:border-none { | |
border-style: none; | |
} | |
.md\:border-\[\#333333\] { | |
--tw-border-opacity: 1; | |
border-color: rgb(51 51 51 / var(--tw-border-opacity)); | |
} | |
.md\:p-0 { | |
padding: 0px; | |
} | |
.md\:p-4 { | |
padding: 1rem; | |
} | |
.md\:px-5 { | |
padding-left: 1.25rem; | |
padding-right: 1.25rem; | |
} | |
.md\:px-\[10px\] { | |
padding-left: 10px; | |
padding-right: 10px; | |
} | |
.md\:py-10 { | |
padding-top: 2.5rem; | |
padding-bottom: 2.5rem; | |
} | |
.md\:py-3 { | |
padding-top: 0.75rem; | |
padding-bottom: 0.75rem; | |
} | |
.md\:py-\[10px\] { | |
padding-top: 10px; | |
padding-bottom: 10px; | |
} | |
.md\:py-\[60px\] { | |
padding-top: 60px; | |
padding-bottom: 60px; | |
} | |
.md\:pb-4 { | |
padding-bottom: 1rem; | |
} | |
.md\:pb-6 { | |
padding-bottom: 1.5rem; | |
} | |
.md\:pb-8 { | |
padding-bottom: 2rem; | |
} | |
.md\:pt-10 { | |
padding-top: 2.5rem; | |
} | |
.md\:pt-3 { | |
padding-top: 0.75rem; | |
} | |
.md\:text-\[24px\] { | |
font-size: 24px; | |
} | |
.md\:text-\[55px\] { | |
font-size: 55px; | |
} | |
.md\:text-\[60px\] { | |
font-size: 60px; | |
} | |
.md\:text-\[65px\] { | |
font-size: 65px; | |
} | |
.md\:text-base { | |
font-size: 1rem; | |
line-height: 1.5rem; | |
} | |
.md\:text-sm { | |
font-size: 0.875rem; | |
line-height: 1.25rem; | |
} | |
.md\:text-\[\#AFAFAF\] { | |
--tw-text-opacity: 1; | |
color: rgb(175 175 175 / var(--tw-text-opacity)); | |
} | |
} | |
@media (max-width: 480px) { | |
.sm\:mx-auto { | |
margin-left: auto; | |
margin-right: auto; | |
} | |
.sm\:mb-20 { | |
margin-bottom: 5rem; | |
} | |
.sm\:mt-0 { | |
margin-top: 0px; | |
} | |
.sm\:mt-12 { | |
margin-top: 3rem; | |
} | |
.sm\:mt-3 { | |
margin-top: 0.75rem; | |
} | |
.sm\:mt-4 { | |
margin-top: 1rem; | |
} | |
.sm\:mt-5 { | |
margin-top: 1.25rem; | |
} | |
.sm\:mt-8 { | |
margin-top: 2rem; | |
} | |
.sm\:mt-\[78px\] { | |
margin-top: 78px; | |
} | |
.sm\:h-10 { | |
height: 2.5rem; | |
} | |
.sm\:h-\[250px\] { | |
height: 250px; | |
} | |
.sm\:h-\[700px\] { | |
height: 700px; | |
} | |
.sm\:min-h-\[240px\] { | |
min-height: 240px; | |
} | |
.sm\:w-10 { | |
width: 2.5rem; | |
} | |
.sm\:w-full { | |
width: 100%; | |
} | |
.sm\:max-w-\[161px\] { | |
max-width: 161px; | |
} | |
.sm\:max-w-\[18px\] { | |
max-width: 18px; | |
} | |
.sm\:max-w-\[20px\] { | |
max-width: 20px; | |
} | |
.sm\:max-w-\[306px\] { | |
max-width: 306px; | |
} | |
.sm\:max-w-full { | |
max-width: 100%; | |
} | |
.sm\:flex-col { | |
flex-direction: column; | |
} | |
.sm\:justify-center { | |
justify-content: center; | |
} | |
.sm\:gap-2 { | |
gap: 0.5rem; | |
} | |
.sm\:gap-3 { | |
gap: 0.75rem; | |
} | |
.sm\:gap-4 { | |
gap: 1rem; | |
} | |
.sm\:gap-5 { | |
gap: 1.25rem; | |
} | |
.sm\:gap-8 { | |
gap: 2rem; | |
} | |
.sm\:space-y-2 > :not([hidden]) ~ :not([hidden]) { | |
--tw-space-y-reverse: 0; | |
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); | |
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); | |
} | |
.sm\:space-y-3 > :not([hidden]) ~ :not([hidden]) { | |
--tw-space-y-reverse: 0; | |
margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); | |
margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); | |
} | |
.sm\:space-y-5 > :not([hidden]) ~ :not([hidden]) { | |
--tw-space-y-reverse: 0; | |
margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse))); | |
margin-bottom: calc(1.25rem * var(--tw-space-y-reverse)); | |
} | |
.sm\:rounded-lg { | |
border-radius: 0.5rem; | |
} | |
.sm\:p-5 { | |
padding: 1.25rem; | |
} | |
.sm\:px-4 { | |
padding-left: 1rem; | |
padding-right: 1rem; | |
} | |
.sm\:px-\[10px\] { | |
padding-left: 10px; | |
padding-right: 10px; | |
} | |
.sm\:py-1 { | |
padding-top: 0.25rem; | |
padding-bottom: 0.25rem; | |
} | |
.sm\:py-2 { | |
padding-top: 0.5rem; | |
padding-bottom: 0.5rem; | |
} | |
.sm\:pb-11 { | |
padding-bottom: 2.75rem; | |
} | |
.sm\:pb-4 { | |
padding-bottom: 1rem; | |
} | |
.sm\:pb-\[100px\] { | |
padding-bottom: 100px; | |
} | |
.sm\:pt-20 { | |
padding-top: 5rem; | |
} | |
.sm\:pt-6 { | |
padding-top: 1.5rem; | |
} | |
.sm\:pt-8 { | |
padding-top: 2rem; | |
} | |
.sm\:pt-\[64px\] { | |
padding-top: 64px; | |
} | |
.sm\:text-center { | |
text-align: center; | |
} | |
.sm\:text-\[18px\] { | |
font-size: 18px; | |
} | |
.sm\:text-\[20px\] { | |
font-size: 20px; | |
} | |
.sm\:text-\[24px\] { | |
font-size: 24px; | |
} | |
.sm\:text-\[30px\] { | |
font-size: 30px; | |
} | |
.sm\:text-\[45px\] { | |
font-size: 45px; | |
} | |
.sm\:text-\[48px\] { | |
font-size: 48px; | |
} | |
.sm\:text-base { | |
font-size: 1rem; | |
line-height: 1.5rem; | |
} | |
.sm\:text-sm { | |
font-size: 0.875rem; | |
line-height: 1.25rem; | |
} | |
.sm\:-tracking-\[2px\] { | |
letter-spacing: -2px; | |
} | |
} | |
@media (max-width: 370px) { | |
.xs\:px-2 { | |
padding-left: 0.5rem; | |
padding-right: 0.5rem; | |
} | |
.xs\:text-xs { | |
font-size: 0.75rem; | |
line-height: 1rem; | |
} | |
}/** | |
* Swiper 10.2.0 | |
* Most modern mobile touch slider and framework with hardware accelerated transitions | |
* https://swiperjs.com | |
* | |
* Copyright 2014-2023 Vladimir Kharlampidi | |
* | |
* Released under the MIT License | |
* | |
* Released on: August 17, 2023 | |
*/ | |
/* FONT_START */ | |
@font-face { | |
font-family: 'swiper-icons'; | |
src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA'); | |
font-weight: 400; | |
font-style: normal; | |
} | |
/* FONT_END */ | |
:root { | |
--swiper-theme-color: #007aff; | |
/* | |
--swiper-preloader-color: var(--swiper-theme-color); | |
--swiper-wrapper-transition-timing-function: initial; | |
*/ | |
} | |
:host { | |
position: relative; | |
display: block; | |
margin-left: auto; | |
margin-right: auto; | |
z-index: 1; | |
} | |
.swiper { | |
margin-left: auto; | |
margin-right: auto; | |
position: relative; | |
overflow: hidden; | |
overflow: clip; | |
list-style: none; | |
padding: 0; | |
/* Fix of Webkit flickering */ | |
z-index: 1; | |
display: block; | |
} | |
.swiper-vertical > .swiper-wrapper { | |
flex-direction: column; | |
} | |
.swiper-wrapper { | |
position: relative; | |
width: 100%; | |
height: 100%; | |
z-index: 1; | |
display: flex; | |
transition-property: transform; | |
transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial); | |
box-sizing: content-box; | |
} | |
.swiper-android .swiper-slide, | |
.swiper-ios .swiper-slide, | |
.swiper-wrapper { | |
transform: translate3d(0px, 0, 0); | |
} | |
.swiper-horizontal { | |
touch-action: pan-y; | |
} | |
.swiper-vertical { | |
touch-action: pan-x; | |
} | |
.swiper-slide { | |
flex-shrink: 0; | |
width: 100%; | |
height: 100%; | |
position: relative; | |
transition-property: transform; | |
display: block; | |
} | |
.swiper-slide-invisible-blank { | |
visibility: hidden; | |
} | |
/* Auto Height */ | |
.swiper-autoheight, | |
.swiper-autoheight .swiper-slide { | |
height: auto; | |
} | |
.swiper-autoheight .swiper-wrapper { | |
align-items: flex-start; | |
transition-property: transform, height; | |
} | |
.swiper-backface-hidden .swiper-slide { | |
transform: translateZ(0); | |
backface-visibility: hidden; | |
} | |
/* 3D Effects */ | |
.swiper-3d.swiper-css-mode .swiper-wrapper { | |
perspective: 1200px; | |
} | |
.swiper-3d .swiper-wrapper { | |
transform-style: preserve-3d; | |
} | |
.swiper-3d { | |
perspective: 1200px; | |
} | |
.swiper-3d .swiper-slide, | |
.swiper-3d .swiper-cube-shadow { | |
transform-style: preserve-3d; | |
} | |
/* CSS Mode */ | |
.swiper-css-mode > .swiper-wrapper { | |
overflow: auto; | |
scrollbar-width: none; | |
/* For Firefox */ | |
-ms-overflow-style: none; | |
/* For Internet Explorer and Edge */ | |
} | |
.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar { | |
display: none; | |
} | |
.swiper-css-mode > .swiper-wrapper > .swiper-slide { | |
scroll-snap-align: start start; | |
} | |
.swiper-css-mode.swiper-horizontal > .swiper-wrapper { | |
scroll-snap-type: x mandatory; | |
} | |
.swiper-css-mode.swiper-vertical > .swiper-wrapper { | |
scroll-snap-type: y mandatory; | |
} | |
.swiper-css-mode.swiper-free-mode > .swiper-wrapper { | |
scroll-snap-type: none; | |
} | |
.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide { | |
scroll-snap-align: none; | |
} | |
.swiper-css-mode.swiper-centered > .swiper-wrapper::before { | |
content: ''; | |
flex-shrink: 0; | |
order: 9999; | |
} | |
.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide { | |
scroll-snap-align: center center; | |
scroll-snap-stop: always; | |
} | |
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child { | |
margin-inline-start: var(--swiper-centered-offset-before); | |
} | |
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before { | |
height: 100%; | |
min-height: 1px; | |
width: var(--swiper-centered-offset-after); | |
} | |
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child { | |
margin-block-start: var(--swiper-centered-offset-before); | |
} | |
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before { | |
width: 100%; | |
min-width: 1px; | |
height: var(--swiper-centered-offset-after); | |
} | |
/* Slide styles start */ | |
/* 3D Shadows */ | |
.swiper-3d .swiper-slide-shadow, | |
.swiper-3d .swiper-slide-shadow-left, | |
.swiper-3d .swiper-slide-shadow-right, | |
.swiper-3d .swiper-slide-shadow-top, | |
.swiper-3d .swiper-slide-shadow-bottom, | |
.swiper-3d .swiper-slide-shadow, | |
.swiper-3d .swiper-slide-shadow-left, | |
.swiper-3d .swiper-slide-shadow-right, | |
.swiper-3d .swiper-slide-shadow-top, | |
.swiper-3d .swiper-slide-shadow-bottom { | |
position: absolute; | |
left: 0; | |
top: 0; | |
width: 100%; | |
height: 100%; | |
pointer-events: none; | |
z-index: 10; | |
} | |
.swiper-3d .swiper-slide-shadow { | |
background: rgba(0, 0, 0, 0.15); | |
} | |
.swiper-3d .swiper-slide-shadow-left { | |
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); | |
} | |
.swiper-3d .swiper-slide-shadow-right { | |
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); | |
} | |
.swiper-3d .swiper-slide-shadow-top { | |
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); | |
} | |
.swiper-3d .swiper-slide-shadow-bottom { | |
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); | |
} | |
.swiper-lazy-preloader { | |
width: 42px; | |
height: 42px; | |
position: absolute; | |
left: 50%; | |
top: 50%; | |
margin-left: -21px; | |
margin-top: -21px; | |
z-index: 10; | |
transform-origin: 50%; | |
box-sizing: border-box; | |
border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); | |
border-radius: 50%; | |
border-top-color: transparent; | |
} | |
.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader, | |
.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader { | |
animation: swiper-preloader-spin 1s infinite linear; | |
} | |
.swiper-lazy-preloader-white { | |
--swiper-preloader-color: #fff; | |
} | |
.swiper-lazy-preloader-black { | |
--swiper-preloader-color: #000; | |
} | |
@keyframes swiper-preloader-spin { | |
0% { | |
transform: rotate(0deg); | |
} | |
100% { | |
transform: rotate(360deg); | |
} | |
} | |
/* Slide styles end */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment