You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
122 lines
3.3 KiB
122 lines
3.3 KiB
@import "tailwindcss";
|
|
|
|
:root {
|
|
--background: #03070D;
|
|
--foreground: #ffffff;
|
|
--font-inter: var(--font-inter), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
--font-poppins: var(--font-poppins), "Poppins", sans-serif;
|
|
background-color: #03070D;
|
|
}
|
|
|
|
|
|
@theme inline {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--font-sans: var(--font-inter);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
background-color: #03070D !important;
|
|
color-scheme: dark;
|
|
}
|
|
|
|
body {
|
|
background-color: #03070D !important;
|
|
color: #ffffff;
|
|
font-family: var(--font-inter);
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow-x: hidden;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* Custom Gradients & Glass Styles from Figma Spec */
|
|
.btn-primary-gradient {
|
|
position: relative;
|
|
background: linear-gradient(180deg, #0029b2 0%, #0038bf 10%, #0e4acc 20%, #255cd9 30%, #3d6fe5 40%, #487eff 50%, #4b80ff 65%, #5d8bff 100%, #adbfff 100%);
|
|
isolation: isolate;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.btn-primary-gradient::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: inherit;
|
|
padding: 1px;
|
|
background: linear-gradient(74deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 50.46%, rgba(255, 255, 255, 0.6) 100%);
|
|
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
-webkit-mask-composite: xor;
|
|
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
mask-composite: exclude;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
.nav-bar-glass {
|
|
position: relative;
|
|
background: rgba(8, 15, 26, 0.4);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
|
|
border-radius: 48px;
|
|
isolation: isolate;
|
|
}
|
|
|
|
.nav-bar-glass::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: inherit;
|
|
padding: 1px;
|
|
background: linear-gradient(50deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.03) 10%, rgba(255, 255, 255, 0.03) 90%, rgba(255, 255, 255, 0.2) 100%);
|
|
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
-webkit-mask-composite: xor;
|
|
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
mask-composite: exclude;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
.tab-active-gradient {
|
|
position: relative;
|
|
background: linear-gradient(180deg, #0029b2 0%, #0038bf 10%, #0e4acc 20%, #255cd9 30%, #3d6fe5 40%, #487eff 62%, #4b80ff 75%, #5d8bff 100%);
|
|
box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.4);
|
|
border-radius: 24px;
|
|
isolation: isolate;
|
|
}
|
|
|
|
.tab-active-gradient::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: inherit;
|
|
padding: 1px;
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 43.27%, rgba(255, 255, 255, 0.8) 100%);
|
|
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
-webkit-mask-composite: xor;
|
|
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
mask-composite: exclude;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
.tab-active-text {
|
|
background: linear-gradient(180deg, #ffffff 0%, #d0deff 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
/* Hide scrollbar utility */
|
|
.no-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.no-scrollbar {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|