/* Sribuu Premium Custom Stylesheet */ .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; } .glass-card, .glass-panel { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.4); box-shadow: 0 8px 32px 0 rgba(0, 14, 53, 0.05); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease; } .glass-card:hover, .glass-panel:hover { transform: translateY(-4px); box-shadow: 0 16px 40px 0 rgba(0, 14, 53, 0.08); border-color: rgba(0, 107, 85, 0.25); } .metric-glow-green { box-shadow: 0 0 20px rgba(0, 107, 85, 0.1); } .metric-glow-red { box-shadow: 0 0 20px rgba(186, 26, 26, 0.1); } .metric-glow-blue { box-shadow: 0 0 20px rgba(0, 12, 55, 0.1); } .progress-ring { transition: stroke-dashoffset 0.35s; transform: rotate(-90deg); transform-origin: 50% 50%; } .luminous-shadow { box-shadow: 0 20px 40px -10px rgba(0, 14, 53, 0.1); } .premium-gradient { background: linear-gradient(135deg, #000e35 0%, #064E3B 100%); } @keyframes activeGlowPulse { 0% { box-shadow: 0 0 12px rgba(89, 252, 208, 0.2); } 50% { box-shadow: 0 0 20px rgba(89, 252, 208, 0.6); } 100% { box-shadow: 0 0 12px rgba(89, 252, 208, 0.2); } } .active-nav-glow { animation: activeGlowPulse 2.5s infinite ease-in-out; } .progress-glow { box-shadow: 0 0 12px rgba(89, 252, 208, 0.4); } @keyframes scaleIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } } .animate-scale-in { animation: scaleIn 0.2s ease-out; } body { background-color: #f7f9fb; color: #191c1e; font-family: 'Inter', sans-serif; opacity: 0; transition: opacity 0.15s ease-in; } body.app-ready { opacity: 1; } /* Anti-FOUC: Pre-hide views before JS init based on login state set in */ html.logged-in #login-view { display: none !important; } html.logged-out #app-view { display: none !important; } h1, h2, h3, h4, .font-lexend { font-family: 'Lexend', sans-serif; } .custom-scrollbar::-webkit-scrollbar { width: 4px; } .custom-scrollbar::-webkit-scrollbar-track { background: transparent; } .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; } /* Input field customization */ .input-glass { background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(0, 14, 53, 0.1); transition: all 0.3s ease; color: #191c1e; } .input-glass:focus { background: rgba(255, 255, 255, 0.95); border-color: #000e35; box-shadow: 0 0 15px rgba(0, 14, 53, 0.1); outline: none; } /* Floating animation elements */ @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-8px); } 100% { transform: translateY(0px); } } .floating-element { animation: float 6s ease-in-out infinite; } /* Premium Login Animations */ @keyframes floatSlow { 0% { transform: translate(0px, 0px) scale(1); } 33% { transform: translate(30px, -50px) scale(1.1); } 66% { transform: translate(-20px, 20px) scale(0.95); } 100% { transform: translate(0px, 0px) scale(1); } } @keyframes floatSlowReverse { 0% { transform: translate(0px, 0px) scale(1); } 33% { transform: translate(-25px, 40px) scale(0.9); } 66% { transform: translate(40px, -30px) scale(1.15); } 100% { transform: translate(0px, 0px) scale(1); } } .animate-float-slow { animation: floatSlow 15s ease-in-out infinite; } .animate-float-slow-reverse { animation: floatSlowReverse 18s ease-in-out infinite; } @keyframes loginCardFadeIn { 0% { opacity: 0; transform: translateY(40px) scale(0.97); } 100% { opacity: 1; transform: translateY(0) scale(1); } } .animate-login-card { animation: loginCardFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes elegantFadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } .animate-stagger-1 { opacity: 0; animation: elegantFadeIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: 0.15s; } .animate-stagger-2 { opacity: 0; animation: elegantFadeIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: 0.3s; } .animate-stagger-3 { opacity: 0; animation: elegantFadeIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: 0.45s; } .animate-stagger-4 { opacity: 0; animation: elegantFadeIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: 0.65s; } @keyframes logoPulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); filter: drop-shadow(0 0 8px rgba(0, 107, 85, 0.2)); } 100% { transform: scale(1); } } .animate-logo-pulse { animation: logoPulse 4s ease-in-out infinite; } /* Smooth transitions */ .fade-in { animation: fadeIn 0.4s ease-out forwards; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* SVG Chart Path Animations */ .chart-path { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: drawLine 2s ease-out forwards; } @keyframes drawLine { to { stroke-dashoffset: 0; } } /* Toast styles */ .toast { animation: slideIn 0.3s ease-out forwards, fadeOut 0.3s ease-in 2.7s forwards; } @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } /* Interactive button & icon effects */ button, .btn-interactive { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } button:hover, .btn-interactive:hover { filter: brightness(1.05); } button:active, .btn-interactive:active { transform: scale(0.97) !important; } button:hover .material-symbols-outlined, .btn-interactive:hover .material-symbols-outlined { transform: scale(1.1); transition: transform 0.2s ease; } .material-symbols-outlined { transition: transform 0.2s ease; } /* ================= DARK MODE COLOR OVERRIDES ================= */ .dark body { background-color: #0b0f19; color: #f3f4f6; } .dark .glass-card, .dark .glass-panel { background: rgba(17, 24, 39, 0.7); border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3); } .dark aside { background-color: #111827 !important; border-color: rgba(255, 255, 255, 0.08) !important; } .dark header, .dark nav { background-color: rgba(17, 24, 39, 0.8) !important; border-color: rgba(255, 255, 255, 0.08) !important; } .dark .input-glass { background: rgba(31, 41, 55, 0.5); border-color: rgba(255, 255, 255, 0.1); color: #f3f4f6; } .dark .input-glass:focus { background: rgba(17, 24, 39, 0.95); border-color: #59fcd0; } .dark select { background-color: #1f2937 !important; color: #f3f4f6 !important; border-color: rgba(255, 255, 255, 0.1) !important; } .dark .text-primary { color: #f3f4f6 !important; } .dark .text-on-surface-variant { color: #9ca3af !important; } .dark .bg-surface-container-low { background-color: #1f2937 !important; } .dark .bg-surface-container { background-color: #1f2937 !important; } .dark .bg-surface-container-high { background-color: #374151 !important; } .dark .bg-surface-container-lowest { background-color: #111827 !important; } .dark .bg-white { background-color: #1f2937 !important; color: #f3f4f6 !important; } .dark .text-on-surface { color: #f3f4f6 !important; } .dark .border-outline-variant { border-color: rgba(255, 255, 255, 0.1) !important; } .dark tr:hover { background-color: rgba(255, 255, 255, 0.03) !important; } /* Premium Toast Notification styling & animation */ @keyframes toastSlideIn { from { transform: translateY(-24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes toastSlideOut { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-16px); opacity: 0; } } .toast { background: rgba(255, 255, 255, 0.9) !important; color: #1e293b !important; border: 1px solid rgba(255, 255, 255, 0.4) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); animation: toastSlideIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } .dark .toast { background: rgba(15, 23, 42, 0.9) !important; color: #f8fafc !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; } .toast.removing { animation: toastSlideOut 0.25s cubic-bezier(0.25, 1, 0.50, 1) forwards !important; } .toast-success-glow { box-shadow: 0 10px 30px -10px rgba(0, 107, 85, 0.25), 0 1px 3px rgba(0, 107, 85, 0.1) !important; } .toast-error-glow { box-shadow: 0 10px 30px -10px rgba(186, 26, 26, 0.25), 0 1px 3px rgba(186, 26, 26, 0.1) !important; } .toast-info-glow { box-shadow: 0 10px 30px -10px rgba(0, 14, 53, 0.25), 0 1px 3px rgba(0, 14, 53, 0.1) !important; } /* Table Header Readability (slate-600 in light mode, slate-300 in dark mode) */ thead tr th { color: #475569 !important; font-weight: 700 !important; } .dark thead tr th { color: #cbd5e1 !important; } /* Anti-flicker display states for login and app views */ html.logged-in #login-view { display: none !important; } html.logged-in #app-view { display: flex !important; } html.logged-out #login-view { display: flex !important; } html.logged-out #app-view { display: none !important; }