Spaces:
Sleeping
Sleeping
| @import "tailwindcss"; | |
| /* ═══════════════════════════════════════════════════════════════════════ | |
| MODELFORGE DESIGN SYSTEM · Cosmic Glass v2 | |
| Deep aurora dark × glassmorphism × neon glows × living animations | |
| ═══════════════════════════════════════════════════════════════════════ */ | |
| /* ─── Raw design tokens ──────────────────────────────────────────────── */ | |
| :root { | |
| /* Surfaces */ | |
| --bg: #060A10; | |
| --surface: #0C1420; | |
| --elevated: #121E2E; | |
| --elevated-2: #1A2840; | |
| --border-c: #1A2640; | |
| --border-soft: #131D2E; | |
| /* Primary — deep indigo */ | |
| --primary: #6366F1; | |
| --primary-hover: color-mix(in srgb, var(--primary) 86%, #000); | |
| --primary-light: color-mix(in srgb, var(--primary) 72%, #fff); | |
| --primary-lighter: color-mix(in srgb, var(--primary) 46%, #fff); | |
| --primary-05: color-mix(in srgb, var(--primary) 6%, transparent); | |
| --primary-10: color-mix(in srgb, var(--primary) 12%, transparent); | |
| --primary-15: color-mix(in srgb, var(--primary) 17%, transparent); | |
| --primary-30: color-mix(in srgb, var(--primary) 30%, transparent); | |
| --primary-50: color-mix(in srgb, var(--primary) 50%, transparent); | |
| /* Accent — purple */ | |
| --accent: #8B5CF6; | |
| --accent-dim: color-mix(in srgb, var(--accent) 12%, transparent); | |
| /* Spectrum */ | |
| --success: #10B981; | |
| --running: #38BDF8; | |
| --pending: #F59E0B; | |
| --error: #EF4444; | |
| --violet: #8B5CF6; | |
| --cyan: #06B6D4; | |
| --pink: #EC4899; | |
| /* Text hierarchy */ | |
| --muted: #64748B; | |
| --body: #CBD5E1; | |
| --heading: #F1F5F9; | |
| /* Radius system */ | |
| --radius-card: 12px; | |
| --radius-btn: 8px; | |
| --radius-badge: 6px; | |
| --radius-chip: 4px; | |
| } | |
| /* ─── Tailwind theme mapping ─────────────────────────────────────────── */ | |
| @theme inline { | |
| --color-background: var(--bg); | |
| --color-surface: var(--surface); | |
| --color-surface-elevated: var(--elevated); | |
| --color-surface-high: var(--elevated-2); | |
| --color-card: var(--surface); | |
| --color-card-foreground: var(--heading); | |
| --color-popover: var(--elevated); | |
| --color-popover-foreground: var(--heading); | |
| --color-foreground: var(--body); | |
| --color-muted-foreground: var(--muted); | |
| --color-primary: var(--primary); | |
| --color-primary-foreground: #ffffff; | |
| --color-secondary: var(--elevated); | |
| --color-secondary-foreground: var(--body); | |
| --color-muted: var(--elevated); | |
| --color-accent: var(--accent); | |
| --color-accent-foreground: #ffffff; | |
| --color-destructive: var(--error); | |
| --color-destructive-foreground: #ffffff; | |
| --color-border: var(--border-c); | |
| --color-border-bright: var(--elevated-2); | |
| --color-input: var(--elevated); | |
| --color-ring: var(--primary); | |
| --color-emerald: var(--success); | |
| --color-violet: var(--violet); | |
| --color-cyan: var(--cyan); | |
| --color-amber: var(--pending); | |
| --color-rose: var(--error); | |
| --font-sans: var(--font-geist-sans); | |
| --font-mono: var(--font-geist-mono); | |
| --radius: var(--radius-btn); | |
| } | |
| /* ════════════════════════════════════════════════════════════════════════ | |
| KEYFRAMES | |
| ════════════════════════════════════════════════════════════════════════ */ | |
| /* Existing */ | |
| @keyframes growBar { | |
| from { transform: scaleX(0); } | |
| to { transform: scaleX(1); } | |
| } | |
| @keyframes fadeUp { | |
| from { opacity: 0; transform: translateY(8px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes toastIn { | |
| from { opacity: 0; transform: translateX(20px) scale(.98); } | |
| to { opacity: 1; transform: translateX(0) scale(1); } | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| @keyframes shimmer { | |
| 0% { background-position: -400px 0; } | |
| 100% { background-position: 400px 0; } | |
| } | |
| @keyframes pulseDot { | |
| 0%, 100% { opacity: 1; transform: scale(1); } | |
| 50% { opacity: .45; transform: scale(.82); } | |
| } | |
| @keyframes status-ping { | |
| 75%, 100% { transform: scale(1.9); opacity: 0; } | |
| } | |
| @keyframes slide-up { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes fade-in { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| @keyframes neural-pulse { | |
| 0%, 100% { opacity: 0.5; transform: scale(1); } | |
| 50% { opacity: 1; transform: scale(1.12); } | |
| } | |
| @keyframes glow-breathe { | |
| 0%, 100% { box-shadow: 0 0 12px -2px color-mix(in srgb, var(--primary) 30%, transparent); } | |
| 50% { box-shadow: 0 0 28px 2px color-mix(in srgb, var(--primary) 60%, transparent); } | |
| } | |
| @keyframes count-up { | |
| from { opacity: 0; transform: translateY(4px) scale(0.95); } | |
| to { opacity: 1; transform: translateY(0) scale(1); } | |
| } | |
| @keyframes ring-fill { | |
| from { stroke-dashoffset: var(--ring-empty, 190); } | |
| to { stroke-dashoffset: var(--ring-offset, 0); } | |
| } | |
| /* ─── Aurora drift ───────────────────────────────────────────────────── */ | |
| @keyframes aurora-float-1 { | |
| 0%, 100% { transform: translate(0px, 0px) scale(1); } | |
| 25% { transform: translate(80px, -60px) scale(1.12); } | |
| 50% { transform: translate(-40px, 90px) scale(0.92); } | |
| 75% { transform: translate(60px, 40px) scale(1.06); } | |
| } | |
| @keyframes aurora-float-2 { | |
| 0%, 100% { transform: translate(0px, 0px) scale(1); } | |
| 30% { transform: translate(-80px, 50px) scale(1.1); } | |
| 60% { transform: translate(70px, -80px) scale(0.9); } | |
| } | |
| @keyframes aurora-float-3 { | |
| 0%, 100% { transform: translate(0px, 0px) scale(1); } | |
| 40% { transform: translate(50px, 60px) scale(1.08); } | |
| 70% { transform: translate(-30px, -40px) scale(0.96); } | |
| } | |
| @keyframes aurora-float-4 { | |
| 0%, 100% { transform: translate(0px, 0px) scale(1) rotate(0deg); } | |
| 50% { transform: translate(-60px, -40px) scale(1.15) rotate(10deg); } | |
| } | |
| /* ─── Float / lift ───────────────────────────────────────────────────── */ | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| @keyframes float-slow { | |
| 0%, 100% { transform: translateY(0px) rotate(0deg); } | |
| 33% { transform: translateY(-7px) rotate(0.8deg); } | |
| 66% { transform: translateY(4px) rotate(-0.4deg); } | |
| } | |
| @keyframes float-x { | |
| 0%, 100% { transform: translateX(0px); } | |
| 50% { transform: translateX(8px); } | |
| } | |
| /* ─── Glow pulse ─────────────────────────────────────────────────────── */ | |
| @keyframes glow-pulse { | |
| 0%, 100% { | |
| box-shadow: | |
| 0 0 20px -4px color-mix(in srgb, var(--primary) 45%, transparent), | |
| 0 0 60px -20px color-mix(in srgb, var(--primary) 20%, transparent); | |
| } | |
| 50% { | |
| box-shadow: | |
| 0 0 45px -2px color-mix(in srgb, var(--primary) 70%, transparent), | |
| 0 0 90px -8px color-mix(in srgb, var(--accent) 35%, transparent); | |
| } | |
| } | |
| /* ─── Shimmer sweep (button shine) ──────────────────────────────────── */ | |
| @keyframes shimmer-sweep { | |
| 0% { transform: translateX(-120%) skewX(-20deg); opacity: 0; } | |
| 10% { opacity: 1; } | |
| 90% { opacity: 1; } | |
| 100% { transform: translateX(300%) skewX(-20deg); opacity: 0; } | |
| } | |
| /* ─── Animated gradient text ─────────────────────────────────────────── */ | |
| @keyframes text-shimmer { | |
| 0% { background-position: 0% center; } | |
| 100% { background-position: 200% center; } | |
| } | |
| /* ─── Pipeline flow dot ──────────────────────────────────────────────── */ | |
| @keyframes flow-pulse { | |
| 0% { transform: translateX(-100%); opacity: 0; } | |
| 20% { opacity: 1; } | |
| 80% { opacity: 1; } | |
| 100% { transform: translateX(400%); opacity: 0; } | |
| } | |
| /* ─── Terminal typewriter lines ──────────────────────────────────────── */ | |
| @keyframes line-reveal { | |
| from { opacity: 0; transform: translateX(-4px); } | |
| to { opacity: 1; transform: translateX(0); } | |
| } | |
| @keyframes cursor-blink { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0; } | |
| } | |
| /* ─── Scan line (decorative) ─────────────────────────────────────────── */ | |
| @keyframes scan { | |
| 0% { transform: translateY(-100%); } | |
| 100% { transform: translateY(200vh); } | |
| } | |
| /* ─── Border gradient rotate ─────────────────────────────────────────── */ | |
| @keyframes border-rotate { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| /* ─── Particle rise ──────────────────────────────────────────────────── */ | |
| @keyframes particle-rise { | |
| 0% { transform: translateY(0) scale(1); opacity: 0.8; } | |
| 100% { transform: translateY(-80px) scale(0); opacity: 0; } | |
| } | |
| /* ─── Orbit ring ─────────────────────────────────────────────────────── */ | |
| @keyframes orbit { | |
| from { transform: rotate(0deg) translateX(20px) rotate(0deg); } | |
| to { transform: rotate(360deg) translateX(20px) rotate(-360deg); } | |
| } | |
| /* ─── Reveal on scroll ───────────────────────────────────────────────── */ | |
| @keyframes reveal-up { | |
| from { opacity: 0; transform: translateY(24px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes reveal-fade { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| /* ════════════════════════════════════════════════════════════════════════ | |
| BASE | |
| ════════════════════════════════════════════════════════════════════════ */ | |
| *, *::before, *::after { | |
| border-color: var(--border-c); | |
| box-sizing: border-box; | |
| } | |
| html { color-scheme: dark; } | |
| body { | |
| background: var(--bg); | |
| color: var(--body); | |
| font-family: var(--font-geist-sans, system-ui, sans-serif); | |
| font-size: 14px; | |
| line-height: 1.5; | |
| letter-spacing: -0.006em; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| input, textarea, select, button { font-family: inherit; font-size: inherit; } | |
| button { cursor: pointer; } | |
| ::selection { background: var(--primary-30); } | |
| ::placeholder { color: #3B4963; } | |
| /* ════════════════════════════════════════════════════════════════════════ | |
| BACKGROUND SYSTEM | |
| ════════════════════════════════════════════════════════════════════════ */ | |
| /* Fine dot grid — replaces line grid */ | |
| .bg-grid { | |
| background-image: radial-gradient(circle, rgba(99,102,241,0.15) 1px, transparent 1px); | |
| background-size: 28px 28px; | |
| } | |
| /* Dense line grid (legacy, keep for compat) */ | |
| .bg-grid-lines { | |
| background-image: | |
| linear-gradient(var(--border-c) 1px, transparent 1px), | |
| linear-gradient(90deg, var(--border-c) 1px, transparent 1px); | |
| background-size: 28px 28px; | |
| } | |
| /* Noise grain */ | |
| .grain::before { | |
| content: ''; | |
| position: fixed; | |
| inset: 0; | |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); | |
| background-size: 180px 180px; | |
| opacity: 0.018; | |
| pointer-events: none; | |
| z-index: 9998; | |
| } | |
| /* Aurora container */ | |
| .aurora-bg { | |
| position: fixed; | |
| inset: 0; | |
| overflow: hidden; | |
| pointer-events: none; | |
| z-index: 0; | |
| } | |
| /* Individual aurora orbs */ | |
| .aurora-orb { | |
| position: absolute; | |
| border-radius: 9999px; | |
| filter: blur(90px); | |
| mix-blend-mode: screen; | |
| will-change: transform; | |
| } | |
| .aurora-1 { | |
| width: 900px; | |
| height: 700px; | |
| background: radial-gradient(circle, rgba(99,102,241,0.22) 0%, transparent 70%); | |
| top: -200px; | |
| left: -200px; | |
| animation: aurora-float-1 26s ease-in-out infinite; | |
| } | |
| .aurora-2 { | |
| width: 700px; | |
| height: 700px; | |
| background: radial-gradient(circle, rgba(139,92,246,0.18) 0%, transparent 70%); | |
| top: 10%; | |
| right: -200px; | |
| animation: aurora-float-2 32s ease-in-out infinite; | |
| } | |
| .aurora-3 { | |
| width: 600px; | |
| height: 500px; | |
| background: radial-gradient(circle, rgba(6,182,212,0.12) 0%, transparent 70%); | |
| bottom: -100px; | |
| left: 30%; | |
| animation: aurora-float-3 22s ease-in-out infinite; | |
| } | |
| .aurora-4 { | |
| width: 400px; | |
| height: 400px; | |
| background: radial-gradient(circle, rgba(236,72,153,0.08) 0%, transparent 70%); | |
| top: 40%; | |
| left: 10%; | |
| animation: aurora-float-4 18s ease-in-out infinite; | |
| } | |
| /* ════════════════════════════════════════════════════════════════════════ | |
| GLASS MORPHISM SYSTEM | |
| ════════════════════════════════════════════════════════════════════════ */ | |
| .glass { | |
| background: rgba(12, 20, 32, 0.55); | |
| backdrop-filter: blur(24px) saturate(1.8); | |
| -webkit-backdrop-filter: blur(24px) saturate(1.8); | |
| border: 1px solid rgba(255, 255, 255, 0.055); | |
| box-shadow: | |
| 0 8px 32px rgba(0, 0, 0, 0.4), | |
| inset 0 1px 0 rgba(255, 255, 255, 0.07); | |
| } | |
| .glass-strong { | |
| background: rgba(8, 14, 24, 0.70); | |
| backdrop-filter: blur(48px) saturate(2.2); | |
| -webkit-backdrop-filter: blur(48px) saturate(2.2); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| box-shadow: | |
| 0 16px 48px rgba(0, 0, 0, 0.5), | |
| inset 0 1px 0 rgba(255, 255, 255, 0.09), | |
| inset 0 -1px 0 rgba(0, 0, 0, 0.2); | |
| } | |
| .glass-card { | |
| background: rgba(12, 20, 32, 0.45); | |
| backdrop-filter: blur(20px) saturate(1.6); | |
| -webkit-backdrop-filter: blur(20px) saturate(1.6); | |
| border: 1px solid rgba(255, 255, 255, 0.045); | |
| box-shadow: | |
| 0 4px 20px rgba(0, 0, 0, 0.3), | |
| inset 0 1px 0 rgba(255, 255, 255, 0.05); | |
| transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| .glass-card:hover { | |
| background: rgba(14, 24, 40, 0.60); | |
| border-color: rgba(255, 255, 255, 0.08); | |
| transform: translateY(-2px); | |
| box-shadow: | |
| 0 12px 40px rgba(0, 0, 0, 0.45), | |
| 0 0 0 1px rgba(99, 102, 241, 0.12), | |
| inset 0 1px 0 rgba(255, 255, 255, 0.07); | |
| } | |
| /* ════════════════════════════════════════════════════════════════════════ | |
| GLOW SYSTEM | |
| ════════════════════════════════════════════════════════════════════════ */ | |
| .glow-indigo { box-shadow: 0 0 30px -4px color-mix(in srgb, var(--primary) 55%, transparent); } | |
| .glow-violet { box-shadow: 0 0 30px -4px color-mix(in srgb, var(--accent) 55%, transparent); } | |
| .glow-emerald { box-shadow: 0 0 30px -4px color-mix(in srgb, var(--success) 55%, transparent); } | |
| .glow-amber { box-shadow: 0 0 30px -4px color-mix(in srgb, var(--pending) 55%, transparent); } | |
| .glow-rose { box-shadow: 0 0 30px -4px color-mix(in srgb, var(--error) 55%, transparent); } | |
| .glow-cyan { box-shadow: 0 0 30px -4px color-mix(in srgb, var(--cyan) 55%, transparent); } | |
| .glow-text-indigo { text-shadow: 0 0 20px color-mix(in srgb, var(--primary) 60%, transparent); } | |
| .glow-text-cyan { text-shadow: 0 0 20px color-mix(in srgb, var(--cyan) 60%, transparent); } | |
| /* ════════════════════════════════════════════════════════════════════════ | |
| TEXT EFFECTS | |
| ════════════════════════════════════════════════════════════════════════ */ | |
| .text-gradient { | |
| background: linear-gradient(135deg, var(--primary), var(--accent)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .text-gradient-wide { | |
| background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 40%, var(--cyan) 70%, var(--primary) 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .text-shimmer { | |
| background: linear-gradient(90deg, | |
| var(--primary) 0%, | |
| var(--accent) 25%, | |
| var(--cyan) 50%, | |
| var(--accent) 75%, | |
| var(--primary) 100% | |
| ); | |
| background-size: 200% auto; | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| animation: text-shimmer 5s linear infinite; | |
| } | |
| /* ════════════════════════════════════════════════════════════════════════ | |
| NEON BORDERS | |
| ════════════════════════════════════════════════════════════════════════ */ | |
| .neon-border { | |
| position: relative; | |
| } | |
| .neon-border::before { | |
| content: ''; | |
| position: absolute; | |
| inset: -1px; | |
| border-radius: inherit; | |
| padding: 1px; | |
| background: linear-gradient(135deg, | |
| color-mix(in srgb, var(--primary) 70%, transparent), | |
| color-mix(in srgb, var(--accent) 50%, transparent), | |
| color-mix(in srgb, var(--cyan) 40%, transparent) | |
| ); | |
| -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); | |
| mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); | |
| -webkit-mask-composite: destination-out; | |
| mask-composite: exclude; | |
| opacity: 0; | |
| transition: opacity 0.35s; | |
| pointer-events: none; | |
| } | |
| .neon-border:hover::before { opacity: 1; } | |
| /* Animated gradient border (always on) */ | |
| .border-glow-animated { | |
| position: relative; | |
| } | |
| .border-glow-animated::after { | |
| content: ''; | |
| position: absolute; | |
| inset: -1px; | |
| border-radius: inherit; | |
| background: linear-gradient(135deg, | |
| color-mix(in srgb, var(--primary) 50%, transparent) 0%, | |
| color-mix(in srgb, var(--accent) 40%, transparent) 50%, | |
| color-mix(in srgb, var(--primary) 50%, transparent) 100% | |
| ); | |
| background-size: 200% 200%; | |
| animation: border-rotate 4s ease infinite; | |
| -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); | |
| mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); | |
| -webkit-mask-composite: destination-out; | |
| mask-composite: exclude; | |
| pointer-events: none; | |
| } | |
| /* ════════════════════════════════════════════════════════════════════════ | |
| BUTTON EFFECTS | |
| ════════════════════════════════════════════════════════════════════════ */ | |
| .btn-shimmer { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .btn-shimmer::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 40%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent); | |
| animation: shimmer-sweep 3s ease-in-out infinite; | |
| border-radius: inherit; | |
| pointer-events: none; | |
| } | |
| /* ════════════════════════════════════════════════════════════════════════ | |
| SIDEBAR NAV | |
| ════════════════════════════════════════════════════════════════════════ */ | |
| .nav-active { | |
| position: relative; | |
| color: var(--heading) ; | |
| } | |
| .nav-active::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| border-radius: 10px; | |
| background: linear-gradient(135deg, | |
| color-mix(in srgb, var(--primary) 12%, transparent), | |
| color-mix(in srgb, var(--accent) 6%, transparent) | |
| ); | |
| border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent); | |
| pointer-events: none; | |
| } | |
| .nav-active::after { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| top: 20%; | |
| bottom: 20%; | |
| width: 2.5px; | |
| background: linear-gradient(180deg, transparent, var(--primary), var(--accent), transparent); | |
| border-radius: 0 3px 3px 0; | |
| box-shadow: 0 0 14px 2px color-mix(in srgb, var(--primary) 70%, transparent); | |
| } | |
| /* ════════════════════════════════════════════════════════════════════════ | |
| SCROLLBAR | |
| ════════════════════════════════════════════════════════════════════════ */ | |
| ::-webkit-scrollbar { width: 8px; height: 8px; } | |
| ::-webkit-scrollbar-track { background: transparent; } | |
| ::-webkit-scrollbar-thumb { | |
| background: linear-gradient(180deg, var(--elevated), var(--elevated-2)); | |
| border-radius: 8px; | |
| border: 2px solid var(--bg); | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: linear-gradient(180deg, var(--elevated-2), color-mix(in srgb, var(--primary) 25%, var(--elevated-2))); | |
| } | |
| /* ════════════════════════════════════════════════════════════════════════ | |
| UTILITY ANIMATIONS | |
| ════════════════════════════════════════════════════════════════════════ */ | |
| .animate-slide-up { animation: slide-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; } | |
| .animate-fade-in { animation: fade-in 0.35s ease-out both; } | |
| .animate-fade-up { animation: fadeUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; } | |
| .animate-neural-pulse { animation: neural-pulse 3s ease-in-out infinite; } | |
| .animate-glow-breathe { animation: glow-breathe 2.5s ease-in-out infinite; } | |
| .animate-count-up { animation: count-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; } | |
| .animate-spin { animation: spin 0.8s linear infinite; } | |
| .spin { animation: spin 0.8s linear infinite; } | |
| .animate-float { animation: float 5s ease-in-out infinite; } | |
| .animate-float-slow { animation: float-slow 8s ease-in-out infinite; } | |
| .animate-glow-pulse { animation: glow-pulse 3s ease-in-out infinite; } | |
| .animate-text-shimmer { animation: text-shimmer 5s linear infinite; } | |
| .animate-reveal-up { animation: reveal-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; } | |
| /* ════════════════════════════════════════════════════════════════════════ | |
| STATUS PING DOT | |
| ════════════════════════════════════════════════════════════════════════ */ | |
| .ping-dot { | |
| position: relative; | |
| display: inline-flex; | |
| } | |
| .ping-dot::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| border-radius: 9999px; | |
| background: currentColor; | |
| animation: status-ping 1.4s cubic-bezier(0, 0, 0.2, 1) infinite; | |
| } | |
| /* ════════════════════════════════════════════════════════════════════════ | |
| SKELETON SHIMMER | |
| ════════════════════════════════════════════════════════════════════════ */ | |
| .skeleton { | |
| background: linear-gradient(90deg, var(--elevated) 0px, var(--elevated-2) 200px, var(--elevated) 400px); | |
| background-size: 800px 100%; | |
| animation: shimmer 1.5s infinite linear; | |
| border-radius: 6px; | |
| } | |
| /* ════════════════════════════════════════════════════════════════════════ | |
| METRIC / CHART | |
| ════════════════════════════════════════════════════════════════════════ */ | |
| .bar-fill { | |
| transform-origin: left; | |
| animation: growBar 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; | |
| } | |
| .recharts-cartesian-grid-horizontal line, | |
| .recharts-cartesian-grid-vertical line { stroke: var(--border-c); } | |
| .recharts-text { | |
| fill: var(--muted); | |
| font-size: 11px; | |
| font-family: var(--font-geist-mono, monospace); | |
| letter-spacing: 0.02em; | |
| } | |
| /* ════════════════════════════════════════════════════════════════════════ | |
| PROSE / MISC UTILITIES | |
| ════════════════════════════════════════════════════════════════════════ */ | |
| .mono { font-family: var(--font-geist-mono, 'SF Mono', ui-monospace, monospace); } | |
| .scroll-y { overflow-y: auto; overflow-x: hidden; } | |
| /* ════════════════════════════════════════════════════════════════════════ | |
| GRADIENT BORDER CARD | |
| ════════════════════════════════════════════════════════════════════════ */ | |
| .border-gradient-primary { | |
| border: 1px solid transparent; | |
| background-clip: padding-box; | |
| position: relative; | |
| } | |
| .border-gradient-primary::after { | |
| content: ''; | |
| position: absolute; | |
| inset: -1px; | |
| border-radius: inherit; | |
| background: linear-gradient(135deg, | |
| color-mix(in srgb, var(--primary) 40%, transparent), | |
| color-mix(in srgb, var(--accent) 20%, transparent) | |
| ); | |
| -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); | |
| -webkit-mask-composite: destination-out; | |
| mask-composite: exclude; | |
| pointer-events: none; | |
| } | |
| /* ════════════════════════════════════════════════════════════════════════ | |
| TERMINAL COMPONENT | |
| ════════════════════════════════════════════════════════════════════════ */ | |
| .terminal-window { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .terminal-window::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: repeating-linear-gradient( | |
| 0deg, | |
| transparent, | |
| transparent 3px, | |
| rgba(0, 0, 0, 0.08) 3px, | |
| rgba(0, 0, 0, 0.08) 4px | |
| ); | |
| pointer-events: none; | |
| border-radius: inherit; | |
| z-index: 1; | |
| } | |
| .terminal-line-1 { animation: line-reveal 0.3s ease 0.4s both; } | |
| .terminal-line-2 { animation: line-reveal 0.3s ease 1.2s both; } | |
| .terminal-line-3 { animation: line-reveal 0.3s ease 2.1s both; } | |
| .terminal-line-4 { animation: line-reveal 0.3s ease 3.0s both; } | |
| .terminal-line-5 { animation: line-reveal 0.3s ease 3.8s both; } | |
| .terminal-cursor { | |
| display: inline-block; | |
| width: 8px; | |
| height: 14px; | |
| background: var(--cyan); | |
| box-shadow: 0 0 8px var(--cyan); | |
| animation: cursor-blink 1s step-end infinite; | |
| vertical-align: middle; | |
| border-radius: 1px; | |
| margin-left: 2px; | |
| } | |
| /* ════════════════════════════════════════════════════════════════════════ | |
| PIPELINE FLOW | |
| ════════════════════════════════════════════════════════════════════════ */ | |
| .pipeline-connector { | |
| position: relative; | |
| flex: 1; | |
| height: 2px; | |
| background: linear-gradient(90deg, var(--elevated-2), var(--border-c)); | |
| overflow: hidden; | |
| } | |
| .pipeline-connector::after { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient(90deg, transparent, var(--primary), var(--accent), transparent); | |
| animation: flow-pulse 2.5s ease-in-out infinite; | |
| } | |
| /* ════════════════════════════════════════════════════════════════════════ | |
| SCROLL REVEAL (JS-driven, class toggled by IntersectionObserver) | |
| ════════════════════════════════════════════════════════════════════════ */ | |
| .reveal-hidden { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| .reveal-visible { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| /* ════════════════════════════════════════════════════════════════════════ | |
| CARD HOVER LIFT | |
| ════════════════════════════════════════════════════════════════════════ */ | |
| .card-lift { | |
| transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s; | |
| } | |
| .card-lift:hover { | |
| transform: translateY(-3px); | |
| box-shadow: | |
| 0 16px 48px rgba(0,0,0,0.5), | |
| 0 0 0 1px rgba(99,102,241,0.15), | |
| 0 0 40px -12px color-mix(in srgb, var(--primary) 30%, transparent); | |
| } | |
| /* ════════════════════════════════════════════════════════════════════════ | |
| HERO SECTION | |
| ════════════════════════════════════════════════════════════════════════ */ | |
| .hero-glow { | |
| background: | |
| radial-gradient(ellipse 80% 50% at 50% -10%, color-mix(in srgb, var(--primary) 14%, transparent) 0%, transparent 70%), | |
| radial-gradient(ellipse 40% 30% at 80% 30%, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 60%); | |
| } | |
| .hero-mega-glow { | |
| background: | |
| radial-gradient(ellipse 100% 60% at 50% -5%, color-mix(in srgb, var(--primary) 20%, transparent) 0%, transparent 65%), | |
| radial-gradient(ellipse 50% 40% at 85% 20%, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 60%), | |
| radial-gradient(ellipse 40% 30% at 15% 40%, color-mix(in srgb, var(--cyan) 8%, transparent) 0%, transparent 60%); | |
| } | |