/* Custom styles for Sentinel Hawk */ /* Smooth transitions */ * { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* Table row hover effect enhancement */ .table-row-hover { position: relative; } .table-row-hover::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%); opacity: 0; transition: opacity 0.2s ease; } .table-row-hover:hover::before { opacity: 1; } /* Status badge pulse animation */ .status-active { animation: pulse-subtle 2s ease-in-out infinite; } @keyframes pulse-subtle { 0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); } 50% { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0); } } /* Button press effect */ .btn-press:active { transform: scale(0.95); } /* Toast animation */ .toast-enter { transform: translateY(20px); opacity: 0; } .toast-enter-active { transform: translateY(0); opacity: 1; transition: all 0.3s ease-out; } .toast-exit { transform: translateY(0); opacity: 1; } .toast-exit-active { transform: translateY(20px); opacity: 0; transition: all 0.3s ease-in; } /* Loading spinner */ .spinner-ring { display: inline-block; position: relative; width: 80px; height: 80px; } .spinner-ring div { box-sizing: border-box; display: block; position: absolute; width: 64px; height: 64px; margin: 8px; border: 4px solid #f59e0b; border-radius: 50%; animation: spinner-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; border-color: #f59e0b transparent transparent transparent; } .spinner-ring div:nth-child(1) { animation-delay: -0.45s; } .spinner-ring div:nth-child(2) { animation-delay: -0.3s; } .spinner-ring div:nth-child(3) { animation-delay: -0.15s; } @keyframes spinner-ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Glass effect for cards */ .glass-card { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); } /* Gradient text */ .gradient-text { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Custom focus styles */ .custom-focus:focus { outline: none; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.3); } /* Platform icon colors */ .platform-twitter { color: #1da1f2; } .platform-whatsapp { color: #25d366; } /* Table cell alignment */ .table-cell-center { display: flex; align-items: center; } /* Badge styles */ .badge { display: inline-flex; align-items: center; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } /* Hover lift effect */ .hover-lift { transition: transform 0.2s ease, box-shadow 0.2s ease; } .hover-lift:hover { transform: translateY(-2px); box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.1); }