Spaces:
Running
Running
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap'); | |
| @import "tailwindcss"; | |
| @variant dark (&:where(.dark, .dark *)); | |
| @theme { | |
| --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif; | |
| --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; | |
| } | |
| @keyframes responseGlow { | |
| 0% { | |
| box-shadow: 0 0 0 1.5px rgba(168, 85, 247, 0.8), 0 0 25px 4px rgba(217, 70, 239, 0.6), 0 0 45px 10px rgba(236, 72, 153, 0.35); | |
| border-color: rgba(217, 70, 239, 0.8); | |
| background-color: rgba(250, 245, 255, 0.98); | |
| } | |
| 30% { | |
| box-shadow: 0 0 0 2px rgba(192, 132, 252, 0.9), 0 0 30px 6px rgba(236, 72, 153, 0.7), 0 0 50px 12px rgba(244, 114, 182, 0.4); | |
| border-color: rgba(236, 72, 153, 0.9); | |
| background-color: rgba(253, 242, 248, 0.98); | |
| } | |
| 60% { | |
| box-shadow: 0 0 0 1.5px rgba(168, 85, 247, 0.6), 0 0 20px 4px rgba(236, 72, 153, 0.4), 0 0 35px 8px rgba(244, 114, 182, 0.25); | |
| border-color: rgba(217, 70, 239, 0.6); | |
| background-color: rgba(250, 245, 255, 0.95); | |
| } | |
| 100% { | |
| box-shadow: 0 0 0 0 rgba(168, 85, 247, 0), 0 0 0 0 rgba(236, 72, 153, 0); | |
| border-color: inherit; | |
| background-color: inherit; | |
| } | |
| } | |
| @keyframes responseGlowDark { | |
| 0% { | |
| box-shadow: 0 0 0 1.5px rgba(192, 132, 252, 0.85), 0 0 30px 6px rgba(217, 70, 239, 0.7), 0 0 55px 12px rgba(236, 72, 153, 0.4); | |
| border-color: rgba(217, 70, 239, 0.85); | |
| background-color: rgba(30, 16, 45, 0.7); | |
| } | |
| 30% { | |
| box-shadow: 0 0 0 2px rgba(217, 70, 239, 0.95), 0 0 35px 8px rgba(236, 72, 153, 0.8), 0 0 60px 15px rgba(244, 114, 182, 0.5); | |
| border-color: rgba(236, 72, 153, 0.95); | |
| background-color: rgba(45, 18, 55, 0.75); | |
| } | |
| 60% { | |
| box-shadow: 0 0 0 1.5px rgba(192, 132, 252, 0.7), 0 0 25px 5px rgba(217, 70, 239, 0.5), 0 0 40px 10px rgba(236, 72, 153, 0.3); | |
| border-color: rgba(217, 70, 239, 0.7); | |
| background-color: rgba(30, 16, 45, 0.6); | |
| } | |
| 100% { | |
| box-shadow: 0 0 0 0 rgba(192, 132, 252, 0), 0 0 0 0 rgba(217, 70, 239, 0); | |
| border-color: inherit; | |
| background-color: inherit; | |
| } | |
| } | |
| .animate-response-glow { | |
| animation: responseGlow 4.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; | |
| } | |
| :is(.dark .animate-response-glow) { | |
| animation: responseGlowDark 4.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; | |
| } | |
| /* Aura AI dynamic gradient and hover color transitions (Purple -> Pink to Purple -> Pink -> Red -> Orange) */ | |
| .aura-chat-text { | |
| background: linear-gradient(90deg, #9333ea 0%, #d946ef 18%, #ec4899 35%, #ef4444 65%, #f97316 85%, #fb923c 100%); | |
| background-size: 320% 100%; | |
| background-position: 0% 50%; | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| transition: background-position 0.5s cubic-bezier(0.4, 0, 0.2, 1), filter 0.4s ease; | |
| display: inline-block; | |
| } | |
| .aura-chat-text:hover, | |
| .group:hover .aura-chat-text, | |
| .group\/aura:hover .aura-chat-text, | |
| .group\/auratitle:hover .aura-chat-text, | |
| .group\/aurastream:hover .aura-chat-text { | |
| background-position: 100% 50%; | |
| filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.65)); | |
| } | |
| .aura-ai-bubble { | |
| background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(250, 245, 255, 0.96) 50%, rgba(253, 242, 248, 0.96) 100%); | |
| border-color: rgba(217, 70, 239, 0.22); | |
| box-shadow: 0 4px 20px -2px rgba(217, 70, 239, 0.08); | |
| } | |
| :is(.dark .aura-ai-bubble) { | |
| background: linear-gradient(135deg, rgba(15, 12, 29, 0.96) 0%, rgba(26, 16, 42, 0.96) 50%, rgba(36, 16, 40, 0.96) 100%); | |
| border-color: rgba(217, 70, 239, 0.3); | |
| box-shadow: 0 4px 25px -2px rgba(168, 85, 247, 0.15); | |
| } | |