Spaces:
Sleeping
Sleeping
| @tailwind base; | |
| @tailwind components; | |
| @tailwind utilities; | |
| /* ─── Design System ─────────────────────────────────────────────── */ | |
| :root { | |
| font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; | |
| } | |
| /* ─── Scrollbar ─────────────────────────────────────────────────── */ | |
| ::-webkit-scrollbar { | |
| width: 6px; | |
| height: 6px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| .dark ::-webkit-scrollbar-thumb { | |
| background: rgba(255, 255, 255, 0.08); | |
| border-radius: 10px; | |
| } | |
| .dark ::-webkit-scrollbar-thumb:hover { | |
| background: rgba(255, 255, 255, 0.15); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: rgba(0, 0, 0, 0.12); | |
| border-radius: 10px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: rgba(0, 0, 0, 0.2); | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════ | |
| GLASS EFFECTS | |
| ═══════════════════════════════════════════════════════════════════ */ | |
| .glass { | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| } | |
| .dark .glass { | |
| background: rgba(22, 22, 31, 0.6); | |
| border: 1px solid rgba(255, 255, 255, 0.06); | |
| } | |
| .glass:not(.dark .glass) { | |
| background: rgba(255, 255, 255, 0.7); | |
| border: 1px solid rgba(0, 0, 0, 0.06); | |
| } | |
| .glass-strong { | |
| backdrop-filter: blur(30px); | |
| -webkit-backdrop-filter: blur(30px); | |
| } | |
| .dark .glass-strong { | |
| background: rgba(22, 22, 31, 0.85); | |
| border: 1px solid rgba(255, 255, 255, 0.06); | |
| } | |
| .glass-strong:not(.dark .glass-strong) { | |
| background: rgba(255, 255, 255, 0.85); | |
| border: 1px solid rgba(0, 0, 0, 0.06); | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════ | |
| GLOW EFFECTS | |
| ═══════════════════════════════════════════════════════════════════ */ | |
| .glow-indigo { | |
| box-shadow: 0 0 20px rgba(99, 102, 241, 0.15), 0 0 60px rgba(99, 102, 241, 0.05); | |
| } | |
| .glow-emerald { | |
| box-shadow: 0 0 20px rgba(16, 185, 129, 0.15), 0 0 60px rgba(16, 185, 129, 0.05); | |
| } | |
| .glow-violet { | |
| box-shadow: 0 0 20px rgba(139, 92, 246, 0.15), 0 0 60px rgba(139, 92, 246, 0.05); | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════ | |
| ANIMATED GRADIENT BACKGROUND | |
| ═══════════════════════════════════════════════════════════════════ */ | |
| .gradient-bg { | |
| position: relative; | |
| } | |
| .dark .gradient-bg { | |
| background: linear-gradient(135deg, #0a0a0f 0%, #111128 30%, #0a0a0f 60%, #0f1020 100%); | |
| } | |
| .gradient-bg:not(.dark .gradient-bg) { | |
| background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 30%, #f8fafc 60%, #f0f4ff 100%); | |
| } | |
| .gradient-bg::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| pointer-events: none; | |
| z-index: 0; | |
| } | |
| .dark .gradient-bg::before { | |
| background: | |
| radial-gradient(circle at 20% 20%, rgba(99, 102, 241, 0.08) 0%, transparent 50%), | |
| radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.06) 0%, transparent 50%), | |
| radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.04) 0%, transparent 60%); | |
| } | |
| .gradient-bg:not(.dark .gradient-bg)::before { | |
| background: | |
| radial-gradient(circle at 20% 20%, rgba(99, 102, 241, 0.06) 0%, transparent 50%), | |
| radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.04) 0%, transparent 50%); | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════ | |
| ANIMATED GRADIENT TEXT | |
| ═══════════════════════════════════════════════════════════════════ */ | |
| .gradient-text { | |
| background: linear-gradient(135deg, #818cf8 0%, #6366f1 30%, #a78bfa 60%, #818cf8 100%); | |
| background-size: 200% 200%; | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| animation: gradient-shift 6s ease-in-out infinite; | |
| } | |
| @keyframes gradient-shift { | |
| 0%, | |
| 100% { | |
| background-position: 0% 50%; | |
| } | |
| 50% { | |
| background-position: 100% 50%; | |
| } | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════ | |
| ANIMATIONS | |
| ═══════════════════════════════════════════════════════════════════ */ | |
| @keyframes float { | |
| 0%, | |
| 100% { | |
| transform: translateY(0); | |
| } | |
| 50% { | |
| transform: translateY(-6px); | |
| } | |
| } | |
| .animate-float { | |
| animation: float 5s ease-in-out infinite; | |
| } | |
| .animate-float-delayed { | |
| animation: float 5s ease-in-out 1s infinite; | |
| } | |
| .animate-float-slow { | |
| animation: float 7s ease-in-out 0.5s infinite; | |
| } | |
| @keyframes pulse-glow { | |
| 0%, | |
| 100% { | |
| opacity: 0.4; | |
| } | |
| 50% { | |
| opacity: 0.8; | |
| } | |
| } | |
| .animate-pulse-glow { | |
| animation: pulse-glow 3s ease-in-out infinite; | |
| } | |
| @keyframes slide-up { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .animate-slide-up { | |
| animation: slide-up 0.6s ease-out forwards; | |
| } | |
| .animate-slide-up-delay-1 { | |
| animation: slide-up 0.6s ease-out 0.1s forwards; | |
| opacity: 0; | |
| } | |
| .animate-slide-up-delay-2 { | |
| animation: slide-up 0.6s ease-out 0.2s forwards; | |
| opacity: 0; | |
| } | |
| .animate-slide-up-delay-3 { | |
| animation: slide-up 0.6s ease-out 0.3s forwards; | |
| opacity: 0; | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════ | |
| BUTTON STYLES | |
| ═══════════════════════════════════════════════════════════════════ */ | |
| .btn-primary { | |
| @apply inline-flex items-center justify-center gap-2 font-semibold rounded-xl transition-all duration-200; | |
| background: linear-gradient(135deg, #6366f1, #4f46e5); | |
| color: white; | |
| box-shadow: 0 4px 15px rgba(99, 102, 241, 0.25); | |
| } | |
| .btn-primary:hover { | |
| background: linear-gradient(135deg, #7c7ff5, #6366f1); | |
| box-shadow: 0 6px 25px rgba(99, 102, 241, 0.35); | |
| transform: translateY(-1px); | |
| } | |
| .btn-primary:active { | |
| transform: translateY(0); | |
| } | |
| .btn-primary:disabled { | |
| opacity: 0.5; | |
| transform: none; | |
| box-shadow: none; | |
| } | |
| .btn-secondary { | |
| @apply inline-flex items-center justify-center gap-2 font-semibold rounded-xl transition-all duration-200; | |
| } | |
| .dark .btn-secondary { | |
| background: rgba(255, 255, 255, 0.05); | |
| color: #9a9ab0; | |
| border: 1px solid rgba(255, 255, 255, 0.06); | |
| } | |
| .dark .btn-secondary:hover { | |
| background: rgba(255, 255, 255, 0.08); | |
| color: #f0f0f5; | |
| border-color: rgba(255, 255, 255, 0.12); | |
| } | |
| .btn-secondary:not(.dark .btn-secondary) { | |
| background: rgba(0, 0, 0, 0.03); | |
| color: #64748b; | |
| border: 1px solid rgba(0, 0, 0, 0.08); | |
| } | |
| .btn-secondary:not(.dark .btn-secondary):hover { | |
| background: rgba(0, 0, 0, 0.06); | |
| color: #1e293b; | |
| border-color: rgba(0, 0, 0, 0.15); | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════ | |
| INPUT STYLES | |
| ═══════════════════════════════════════════════════════════════════ */ | |
| .input-dark { | |
| @apply rounded-xl px-4 py-3 text-sm outline-none transition-all duration-200; | |
| } | |
| .dark .input-dark { | |
| background: rgba(255, 255, 255, 0.04); | |
| border: 1px solid rgba(255, 255, 255, 0.06); | |
| color: #f0f0f5; | |
| } | |
| .dark .input-dark::placeholder { | |
| color: #5a5a72; | |
| } | |
| .dark .input-dark:focus { | |
| border-color: rgba(99, 102, 241, 0.5); | |
| box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); | |
| background: rgba(255, 255, 255, 0.06); | |
| } | |
| .input-dark:not(.dark .input-dark) { | |
| background: #f8fafc; | |
| border: 1px solid #e2e8f0; | |
| color: #1e293b; | |
| } | |
| .input-dark:not(.dark .input-dark)::placeholder { | |
| color: #94a3b8; | |
| } | |
| .input-dark:not(.dark .input-dark):focus { | |
| border-color: rgba(99, 102, 241, 0.5); | |
| box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.08); | |
| background: white; | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════ | |
| CARD STYLES | |
| ═══════════════════════════════════════════════════════════════════ */ | |
| .card-dark { | |
| border-radius: 16px; | |
| transition: all 0.3s ease; | |
| } | |
| .dark .card-dark { | |
| background: #16161f; | |
| border: 1px solid rgba(255, 255, 255, 0.06); | |
| } | |
| .dark .card-dark:hover { | |
| border-color: rgba(255, 255, 255, 0.12); | |
| background: #1c1c28; | |
| } | |
| .card-dark:not(.dark .card-dark) { | |
| background: white; | |
| border: 1px solid #e2e8f0; | |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); | |
| } | |
| .card-dark:not(.dark .card-dark):hover { | |
| border-color: #cbd5e1; | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════ | |
| TIPTAP EDITOR | |
| ═══════════════════════════════════════════════════════════════════ */ | |
| .ProseMirror { | |
| min-height: 250px; | |
| padding: 20px 24px; | |
| outline: none; | |
| font-size: 14px; | |
| line-height: 1.75; | |
| } | |
| .dark .ProseMirror { | |
| color: #f0f0f5; | |
| } | |
| .ProseMirror:not(.dark .ProseMirror) { | |
| color: #1e293b; | |
| } | |
| .ProseMirror p { | |
| margin: 0.5em 0; | |
| } | |
| .ProseMirror a { | |
| color: #818cf8; | |
| text-decoration: underline; | |
| } | |
| .dark .ProseMirror strong { | |
| color: #f0f0f5; | |
| } | |
| .ProseMirror ul, | |
| .ProseMirror ol { | |
| padding-left: 24px; | |
| margin: 0.5em 0; | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════ | |
| BADGE STYLES | |
| ═══════════════════════════════════════════════════════════════════ */ | |
| .badge { | |
| @apply inline-flex items-center gap-1.5 text-xs font-medium px-3 py-1 rounded-full; | |
| } | |
| .dark .badge { | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.06); | |
| color: #9a9ab0; | |
| } | |
| .badge:not(.dark .badge) { | |
| background: rgba(99, 102, 241, 0.06); | |
| border: 1px solid rgba(99, 102, 241, 0.12); | |
| color: #6366f1; | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════ | |
| SEPARATOR | |
| ═══════════════════════════════════════════════════════════════════ */ | |
| .separator { | |
| height: 1px; | |
| } | |
| .dark .separator { | |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent); | |
| } | |
| .separator:not(.dark .separator) { | |
| background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.08), transparent); | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════ | |
| THEME-AWARE COLOR TOKENS (used in components via CSS variables) | |
| ═══════════════════════════════════════════════════════════════════ */ | |
| .dark { | |
| --c-bg-primary: #0a0a0f; | |
| --c-bg-sidebar: #0d0d14; | |
| --c-bg-card: #16161f; | |
| --c-bg-elevated: #1e1e2a; | |
| --c-bg-subtle: rgba(255, 255, 255, 0.03); | |
| --c-border: rgba(255, 255, 255, 0.06); | |
| --c-border-hover: rgba(255, 255, 255, 0.12); | |
| --c-text-primary: #f0f0f5; | |
| --c-text-secondary: #9a9ab0; | |
| --c-text-muted: #5a5a72; | |
| --c-editor-bg: #12121a; | |
| } | |
| :root:not(.dark) { | |
| --c-bg-primary: #ffffff; | |
| --c-bg-sidebar: #f8fafc; | |
| --c-bg-card: #ffffff; | |
| --c-bg-elevated: #f1f5f9; | |
| --c-bg-subtle: rgba(0, 0, 0, 0.02); | |
| --c-border: #e2e8f0; | |
| --c-border-hover: #cbd5e1; | |
| --c-text-primary: #0f172a; | |
| --c-text-secondary: #334155; | |
| --c-text-muted: #64748b; | |
| --c-editor-bg: #fafbfc; | |
| /* --- NEW PREMIUM UI ADDITIONS --- */ | |
| .btn-primary-new { | |
| @apply flex items-center justify-center gap-2 bg-gradient-to-r from-indigo-500 to-violet-600 hover:from-indigo-400 hover:to-violet-500 text-white font-bold py-3 px-6 rounded-2xl transition-all shadow-lg shadow-indigo-500/20 active:scale-95 disabled:opacity-50 disabled:pointer-events-none; | |
| } | |
| .btn-secondary-new { | |
| @apply flex items-center justify-center gap-2 bg-[var(--c-bg-subtle)] border border-[var(--c-border)] hover:border-indigo-500/30 text-[var(--c-text-primary)] font-bold py-3 px-6 rounded-2xl transition-all active:scale-95 disabled:opacity-50; | |
| } | |
| .nav-link-new { | |
| @apply flex items-center gap-2 px-4 py-2 text-xs font-bold text-[var(--c-text-muted)] hover:text-indigo-500 rounded-xl transition-all; | |
| } | |
| .nav-link-new.active { | |
| @apply text-indigo-500 bg-indigo-500/5; | |
| } | |
| .nav-item-new { | |
| @apply flex items-center gap-3 w-full px-4 py-3 rounded-xl text-sm font-bold transition-all text-[var(--c-text-secondary)] hover:bg-[var(--c-bg-subtle)] hover:text-[var(--c-text-primary)]; | |
| } | |
| .nav-item-new.active { | |
| @apply bg-indigo-500/10 text-indigo-500; | |
| } | |
| .card-dark { | |
| @apply bg-[var(--c-bg-primary)] border border-[var(--c-border)] rounded-3xl transition-all; | |
| } | |
| .gradient-bg { | |
| @apply min-h-screen bg-[var(--c-bg-primary)] text-[var(--c-text-primary)]; | |
| } | |
| /* Animated entrance */ | |
| @keyframes slideUp { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .animate-slide-up { animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; } | |
| .animate-slide-up-delay-1 { | |
| opacity: 0; | |
| animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards; | |
| } | |
| /* Glass hover effect */ | |
| .hover-glow:hover { | |
| @apply border-indigo-500/30 shadow-2xl shadow-indigo-500/10 -translate-y-1; | |
| } | |
| } | |