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.
313 lines
7.4 KiB
313 lines
7.4 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;
|
|
}
|
|
|
|
/* AI Copilot Orb Real Vector Animations - Continuous & Fabric Motion */
|
|
|
|
/* 1. Orbiting Ring: Uninterrupted continuous 360-degree orbital rotation (No stops, constant velocity) */
|
|
@keyframes orbitRingMotion {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(-360deg);
|
|
}
|
|
}
|
|
|
|
/* 2. Contour Rings: Continuous silky spin around the orb */
|
|
@keyframes contourRingsMotion {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* 3. Color & Gradient Flow: Continuous fluid color transition through Figma states (Blue -> Purple -> Cyan -> Blue) */
|
|
@keyframes orbColorCycleMotion {
|
|
0% {
|
|
filter: hue-rotate(0deg) saturate(100%) brightness(1);
|
|
}
|
|
25% {
|
|
filter: hue-rotate(42deg) saturate(125%) brightness(1.06);
|
|
}
|
|
50% {
|
|
filter: hue-rotate(-20deg) saturate(115%) brightness(1.04);
|
|
}
|
|
75% {
|
|
filter: hue-rotate(20deg) saturate(110%) brightness(1.02);
|
|
}
|
|
100% {
|
|
filter: hue-rotate(0deg) saturate(100%) brightness(1);
|
|
}
|
|
}
|
|
|
|
/* 4. Refracting Starlight: Unbroken continuous circular orbit inside star */
|
|
@keyframes starSpotlightMotion {
|
|
0% {
|
|
transform: rotate(0deg) translate(38px, 0) rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg) translate(38px, 0) rotate(-360deg);
|
|
}
|
|
}
|
|
|
|
/* 5. Radiating Energy Waves: Smooth harmonic wave breathing */
|
|
@keyframes energyWavesMotion {
|
|
0%, 100% {
|
|
transform: translateY(0px) scaleY(1);
|
|
opacity: 0.9;
|
|
}
|
|
50% {
|
|
transform: translateY(-16px) scaleY(1.05);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* 6. Core Sphere subtle breath */
|
|
@keyframes spherePulseMotion {
|
|
0%, 100% {
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
transform: scale(1.02);
|
|
}
|
|
}
|
|
|
|
/* 7. Liquid Blob continuous drift */
|
|
@keyframes blobDriftMotion {
|
|
0% {
|
|
transform: rotate(0deg) translate(22px, 0) rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg) translate(22px, 0) rotate(-360deg);
|
|
}
|
|
}
|
|
|
|
/* 8. Ambient Backdrop Glow smooth pulse */
|
|
@keyframes ambientGlowMotion {
|
|
0%, 100% {
|
|
opacity: 0.75;
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
opacity: 0.95;
|
|
transform: scale(1.025);
|
|
}
|
|
}
|
|
|
|
/* 9. Particle Constellation A: Continuous smooth orbital drift around orb */
|
|
@keyframes particlesMotionA {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* 10. Particle Constellation B: Continuous counter-orbital drift with gentle shimmer */
|
|
@keyframes particlesMotionB {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(-360deg);
|
|
}
|
|
}
|
|
|
|
/* 11. Particle Constellation C: Continuous floating wave */
|
|
@keyframes particlesMotionC {
|
|
0%, 100% {
|
|
transform: translate(0px, 0px);
|
|
opacity: 0.7;
|
|
}
|
|
50% {
|
|
transform: translate(-8px, 10px);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Animation Utility Classes - Constant velocity & uninterrupted flow */
|
|
.animate-orbit-ring {
|
|
animation: orbitRingMotion 12s linear infinite;
|
|
will-change: transform;
|
|
}
|
|
|
|
.animate-contour-rings {
|
|
animation: contourRingsMotion 18s linear infinite;
|
|
will-change: transform;
|
|
}
|
|
|
|
.animate-orb-color-cycle {
|
|
animation: orbColorCycleMotion 12s linear infinite;
|
|
will-change: filter;
|
|
}
|
|
|
|
.animate-star-spotlight {
|
|
animation: starSpotlightMotion 8s linear infinite;
|
|
transform-origin: 636.929px 420.938px;
|
|
will-change: transform;
|
|
}
|
|
|
|
.animate-energy-waves {
|
|
animation: energyWavesMotion 6s ease-in-out infinite;
|
|
will-change: transform, opacity;
|
|
}
|
|
|
|
.animate-sphere-pulse {
|
|
animation: spherePulseMotion 6s ease-in-out infinite;
|
|
will-change: transform;
|
|
}
|
|
|
|
.animate-blob-drift {
|
|
animation: blobDriftMotion 10s linear infinite;
|
|
transform-origin: 637.492px 421.5px;
|
|
will-change: transform;
|
|
}
|
|
|
|
.animate-ambient-glow {
|
|
animation: ambientGlowMotion 6s ease-in-out infinite;
|
|
transform-origin: 637.492px 421.5px;
|
|
will-change: transform, opacity;
|
|
}
|
|
|
|
.animate-particles-a {
|
|
animation: particlesMotionA 24s linear infinite;
|
|
transform-origin: 637.492px 421.5px;
|
|
will-change: transform;
|
|
}
|
|
|
|
.animate-particles-b {
|
|
animation: particlesMotionB 30s linear infinite;
|
|
transform-origin: 637.492px 421.5px;
|
|
will-change: transform;
|
|
}
|
|
|
|
.animate-particles-c {
|
|
animation: particlesMotionC 6s ease-in-out infinite;
|
|
will-change: transform, opacity;
|
|
}
|
|
|
|
|
|
|
|
|