| =================================================================== |
| ComSync Pro - Professional Styles |
| ========================================================================== */ |
|
|
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
|
|
| |
| :root { |
| --primary-blue: #3b82f6; |
| --primary-purple: #8b5cf6; |
| --primary-green: #10b981; |
| --primary-red: #ef4444; |
| --primary-yellow: #f59e0b; |
| --gray-50: #f9fafb; |
| --gray-100: #f3f4f6; |
| --gray-200: #e5e7eb; |
| --gray-300: #d1d5db; |
| --gray-400: #9ca3af; |
| --gray-500: #6b7280; |
| --gray-600: #4b5563; |
| --gray-700: #374151; |
| --gray-800: #1f2937; |
| --gray-900: #111827; |
| } |
|
|
| |
| * { |
| box-sizing: border-box; |
| } |
|
|
| body { |
| font-family: 'Inter', sans-serif; |
| background: var(--gray-900); |
| color: var(--gray-100); |
| line-height: 1.6; |
| } |
|
|
| |
| @keyframes pulse { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.5; } |
| } |
|
|
| @keyframes typing { |
| 0%, 60%, 100% { transform: translateY(0); } |
| 30% { transform: translateY(-5px); } |
| } |
|
|
| @keyframes slideIn { |
| from { opacity: 0; transform: translateY(20px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
|
|
| @keyframes fadeIn { |
| from { opacity: 0; } |
| to { opacity: 1; } |
| } |
|
|
| @keyframes bounce { |
| 0%, 20%, 53%, 80%, 100% { transform: translateY(0); } |
| 40%, 43% { transform: translateY(-10px); } |
| 70% { transform: translateY(-5px); } |
| 90% { transform: translateY(-2px); } |
| } |
|
|
| |
| .animate-pulse { animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite; } |
| .animate-typing { animation: typing 1.4s infinite ease-in-out; } |
| .animate-slide-in { animation: slideIn 0.3s ease-out; } |
| .animate-fade-in { animation: fadeIn 0.5s ease-out; } |
| .animate-bounce { animation: bounce 1s; } |
|
|
| .scrollbar-hide::-webkit-scrollbar { display: none; } |
| .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } |
|
|
| |
| .gradient-text-blue { |
| background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple)); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| } |
|
|
| .gradient-text-purple { |
| background: linear-gradient(135deg, var(--primary-purple), var(--primary-blue)); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| } |
|
|
| |
| .signal-bar { |
| width: 4px; |
| margin: 0 1px; |
| transition: all 0.3s ease; |
| } |
|
|
| |
| .glass-effect { |
| background: rgba(31, 41, 55, 0.8); |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(75, 85, 99, 0.5); |
| } |
|
|
| |
| .status-online { color: var(--primary-green); } |
| .status-offline { color: var(--primary-red); } |
| .status-warning { color: var(--primary-yellow); } |
| .status-info { color: var(--primary-blue); } |
|
|
| |
| .btn-primary { |
| background: var(--primary-blue); |
| color: white; |
| padding: 0.75rem 1.5rem; |
| border-radius: 0.5rem; |
| font-weight: 500; |
| transition: all 0.2s; |
| border: none; |
| cursor: pointer; |
| } |
|
|
| .btn-primary:hover { |
| background: #2563eb; |
| transform: translateY(-1px); |
| box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4); |
| } |
|
|
| .btn-secondary { |
| background: var(--gray-700); |
| color: var(--gray-100); |
| padding: 0.75rem 1.5rem; |
| border-radius: 0.5rem; |
| font-weight: 500; |
| transition: all 0.2s; |
| border: 1px solid var(--gray-600); |
| cursor: pointer; |
| } |
|
|
| .btn-secondary:hover { |
| background: var(--gray-600); |
| transform: translateY(-1px); |
| } |
|
|
| .btn-danger { |
| background: var(--primary-red); |
| color: white; |
| padding: 0.75rem 1.5rem; |
| border-radius: 0.5rem; |
| font-weight: 500; |
| transition: all 0.2s; |
| border: none; |
| cursor: pointer; |
| } |
|
|
| .btn-danger:hover { |
| background: #dc2626; |
| transform: translateY(-1px); |
| } |
|
|
| |
| .card { |
| background: var(--glass-effect); |
| backdrop-filter: blur(10px); |
| border-radius: 0.75rem; |
| border: 1px solid rgba(75, 85, 99, 0.5); |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
| transition: all 0.3s ease; |
| } |
|
|
| .card:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); |
| } |
|
|
| |
| .form-input { |
| width: 100%; |
| background: rgba(55, 65, 81, 0.5); |
| border: 1px solid var(--gray-600); |
| border-radius: 0.5rem; |
| padding: 0.75rem 1rem; |
| color: var(--gray-100); |
| transition: all 0.2s; |
| } |
|
|
| .form-input:focus { |
| outline: none; |
| border-color: var(--primary-blue); |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); |
| } |
|
|
| .form-input::placeholder { |
| color: var(--gray-400); |
| } |
|
|
| |
| .nav-link { |
| color: var(--gray-400); |
| text-decoration: none; |
| font-weight: 500; |
| transition: all 0.2s; |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| padding: 0.5rem 1rem; |
| border-radius: 0.5rem; |
| } |
|
|
| .nav-link:hover { |
| color: var(--gray-100); |
| background: rgba(55, 65, 81, 0.5); |
| } |
|
|
| .nav-link.active { |
| color: var(--primary-blue); |
| background: rgba(59, 130, 246, 0.1); |
| } |
|
|
| .nav-link.active i { |
| color: var(--primary-blue); |
| } |
|
|
| |
| .message-user { |
| background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple)); |
| border-radius: 12px 12px 0 12px; |
| align-self: flex-end; |
| animation: slideIn 0.3s ease-out; |
| } |
|
|
| .message-ai { |
| background: rgba(55, 65, 81, 0.8); |
| border-radius: 12px 12px 12px 0; |
| align-self: flex-start; |
| animation: slideIn 0.3s ease-out; |
| } |
|
|
| .typing-indicator span { |
| animation: typing 1.4s infinite ease-in-out; |
| } |
|
|
| .typing-indicator span:nth-child(1) { animation-delay: 0s; } |
| .typing-indicator span:nth-child(2) { animation-delay: 0.2s; } |
| .typing-indicator span:nth-child(3) { animation-delay: 0.4s; } |
|
|
| |
| .loading-spinner { |
| border: 2px solid var(--gray-600); |
| border-top: 2px solid var(--primary-blue); |
| border-radius: 50%; |
| width: 20px; |
| height: 20px; |
| animation: spin 1s linear infinite; |
| } |
|
|
| @keyframes spin { |
| 0% { transform: rotate(0deg); } |
| 100% { transform: rotate(360deg); } |
| } |
|
|
|
|
| .grid-responsive { |
| grid-template-columns: 1fr; |
| } |
| |
| .nav-container { |
| flex-direction: column; |
| gap: 1rem; |
| } |
| |
| .nav-links { |
| flex-wrap: wrap; |
| justify-content: center; |
| } |
| |
| .card { |
| margin-bottom: 1rem; |
| } |
| } |
|
|
| |
| .security-level-critical { color: var(--primary-red); } |
| .security-level-high { color: var(--primary-yellow); } |
| .security-level-medium { color: var(--primary-blue); } |
| .security-level-low { color: var(--primary-green); } |
| .security-level-info { color: var(--gray-500); } |
|
|
| |
| .fm-available { color: var(--primary-green); } |
| .fm-listening { color: var(--primary-yellow); } |
| .fm-unavailable { color: var(--primary-red); } |
|
|
| |
| .bluetooth-connected { color: var(--primary-green); } |
| .bluetooth-connecting { color: var(--primary-yellow); } |
| .bluetooth-disconnected { color: var(--primary-red); } |
| .bluetooth-available { color: var(--primary-blue); } |
|
|
| |
| .walkie-card { |
| transition: all 0.3s ease; |
| } |
|
|
| .walkie-card:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); |
| } |
|
|
| .bluetooth-wave { |
| position: relative; |
| overflow: hidden; |
| } |
|
|
| .bluetooth-wave::before { |
| content: ''; |
| position: absolute; |
| top: 50%; |
| left: 50%; |
| width: 100%; |
| height: 100%; |
| background: radial-gradient(circle, rgba(59, 130, 246, 0.3) 0%, transparent 70%); |
| border-radius: 50%; |
| transform: translate(-50%, -50%); |
| animation: bluetoothPulse 2s infinite; |
| } |
|
|
| @keyframes bluetoothPulse { |
| 0% { |
| width: 0%; |
| height: 0%; |
| opacity: 1; |
| } |
| 100% { |
| width: 100%; |
| height: 100%; |
| opacity: 0; |
| } |
| } |
|
|
| |
| .ai-insight-card { |
| background: rgba(139, 92, 246, 0.1); |
| border: 1px solid rgba(139, 92, 246, 0.3); |
| } |
|
|
| .prediction-badge { |
| background: rgba(16, 185, 129, 0.1); |
| border: 1px solid rgba(16, 185, 129, 0.3); |
| } |
|
|
| .anomaly-badge { |
| background: rgba(239, 68, 68, 0.1); |
| border: 1px solid rgba(239, 68, 68, 0.3); |
| } |
|
|
| |
| .gradient-map { |
| background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 50%, #80deea 100%); |
| } |
|
|
| |
| .shadow-professional { |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); |
| } |
|
|
| .shadow-professional-hover:hover { |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 8px 16px rgba(0, 0, 0, 0.1); |
| } |
|
|
|
|
| ========================================================================== |
| ComSync Pro - Professional Styles |
| ========================================================================== */ |
|
|
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
|
|
| |
| :root { |
| --primary-blue: #3b82f6; |
| --primary-purple: #8b5cf6; |
| --primary-green: #10b981; |
| --primary-red: #ef4444; |
| --primary-yellow: #f59e0b; |
| --gray-50: #f9fafb; |
| --gray-100: #f3f4f6; |
| --gray-200: #e5e7eb; |
| --gray-300: #d1d5db; |
| --gray-400: #9ca3af; |
| --gray-500: #6b7280; |
| --gray-600: #4b5563; |
| --gray-700: #374151; |
| --gray-800: #1f2937; |
| --gray-900: #111827; |
| } |
|
|
| |
| * { |
| box-sizing: border-box; |
| } |
|
|
| body { |
| font-family: 'Inter', sans-serif; |
| background: var(--gray-900); |
| color: var(--gray-100); |
| line-height: 1.6; |
| } |
|
|
| |
| @keyframes pulse { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.5; } |
| } |
|
|
| @keyframes typing { |
| 0%, 60%, 100% { transform: translateY(0); } |
| 30% { transform: translateY(-5px); } |
| } |
|
|
| @keyframes slideIn { |
| from { opacity: 0; transform: translateY(20px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
|
|
| @keyframes fadeIn { |
| from { opacity: 0; } |
| to { opacity: 1; } |
| } |
|
|
| @keyframes bounce { |
| 0%, 20%, 53%, 80%, 100% { transform: translateY(0); } |
| 40%, 43% { transform: translateY(-10px); } |
| 70% { transform: translateY(-5px); } |
| 90% { transform: translateY(-2px); } |
| } |
|
|
| |
| .animate-pulse { animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite; } |
| .animate-typing { animation: typing 1.4s infinite ease-in-out; } |
| .animate-slide-in { animation: slideIn 0.3s ease-out; } |
| .animate-fade-in { animation: fadeIn 0.5s ease-out; } |
| .animate-bounce { animation: bounce 1s; } |
|
|
| .scrollbar-hide::-webkit-scrollbar { display: none; } |
| .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } |
|
|
| |
| .gradient-text-blue { |
| background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple)); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| } |
|
|
| .gradient-text-purple { |
| background: linear-gradient(135deg, var(--primary-purple), var(--primary-blue)); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| } |
|
|
| |
| .signal-bar { |
| width: 4px; |
| margin: 0 1px; |
| transition: all 0.3s ease; |
| } |
|
|
| |
| .glass-effect { |
| background: rgba(31, 41, 55, 0.8); |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(75, 85, 99, 0.5); |
| } |
|
|
| |
| .status-online { color: var(--primary-green); } |
| .status-offline { color: var(--primary-red); } |
| .status-warning { color: var(--primary-yellow); } |
| .status-info { color: var(--primary-blue); } |
|
|
| |
| .btn-primary { |
| background: var(--primary-blue); |
| color: white; |
| padding: 0.75rem 1.5rem; |
| border-radius: 0.5rem; |
| font-weight: 500; |
| transition: all 0.2s; |
| border: none; |
| cursor: pointer; |
| } |
|
|
| .btn-primary:hover { |
| background: #2563eb; |
| transform: translateY(-1px); |
| box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4); |
| } |
|
|
| .btn-secondary { |
| background: var(--gray-700); |
| color: var(--gray-100); |
| padding: 0.75rem 1.5rem; |
| border-radius: 0.5rem; |
| font-weight: 500; |
| transition: all 0.2s; |
| border: 1px solid var(--gray-600); |
| cursor: pointer; |
| } |
|
|
| .btn-secondary:hover { |
| background: var(--gray-600); |
| transform: translateY(-1px); |
| } |
|
|
| .btn-danger { |
| background: var(--primary-red); |
| color: white; |
| padding: 0.75rem 1.5rem; |
| border-radius: 0.5rem; |
| font-weight: 500; |
| transition: all 0.2s; |
| border: none; |
| cursor: pointer; |
| } |
|
|
| .btn-danger:hover { |
| background: #dc2626; |
| transform: translateY(-1px); |
| } |
|
|
| |
| .card { |
| background: var(--glass-effect); |
| backdrop-filter: blur(10px); |
| border-radius: 0.75rem; |
| border: 1px solid rgba(75, 85, 99, 0.5); |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
| transition: all 0.3s ease; |
| } |
|
|
| .card:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); |
| } |
|
|
| |
| .form-input { |
| width: 100%; |
| background: rgba(55, 65, 81, 0.5); |
| border: 1px solid var(--gray-600); |
| border-radius: 0.5rem; |
| padding: 0.75rem 1rem; |
| color: var(--gray-100); |
| transition: all 0.2s; |
| } |
|
|
| .form-input:focus { |
| outline: none; |
| border-color: var(--primary-blue); |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); |
| } |
|
|
| .form-input::placeholder { |
| color: var(--gray-400); |
| } |
|
|
| |
| .nav-link { |
| color: var(--gray-400); |
| text-decoration: none; |
| font-weight: 500; |
| transition: all 0.2s; |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| padding: 0.5rem 1rem; |
| border-radius: 0.5rem; |
| } |
|
|
| .nav-link:hover { |
| color: var(--gray-100); |
| background: rgba(55, 65, 81, 0.5); |
| } |
|
|
| .nav-link.active { |
| color: var(--primary-blue); |
| background: rgba(59, 130, 246, 0.1); |
| } |
|
|
| .nav-link.active i { |
| color: var(--primary-blue); |
| } |
|
|
| |
| .message-user { |
| background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple)); |
| border-radius: 12px 12px 0 12px; |
| align-self: flex-end; |
| animation: slideIn 0.3s ease-out; |
| } |
|
|
| .message-ai { |
| background: rgba(55, 65, 81, 0.8); |
| border-radius: 12px 12px 12px 0; |
| align-self: flex-start; |
| animation: slideIn 0.3s ease-out; |
| } |
|
|
| .typing-indicator span { |
| animation: typing 1.4s infinite ease-in-out; |
| } |
|
|
| .typing-indicator span:nth-child(1) { animation-delay: 0s; } |
| .typing-indicator span:nth-child(2) { animation-delay: 0.2s; } |
| .typing-indicator span:nth-child(3) { animation-delay: 0.4s; } |
|
|
| |
| .loading-spinner { |
| border: 2px solid var(--gray-600); |
| border-top: 2px solid var(--primary-blue); |
| border-radius: 50%; |
| width: 20px; |
| height: 20px; |
| animation: spin 1s linear infinite; |
| } |
|
|
| @keyframes spin { |
| 0% { transform: rotate(0deg); } |
| 100% { transform: rotate(360deg); } |
| } |
|
|
| |
| @media (max-width: 768px) { |
| .grid-responsive { |
| grid-template-columns: 1fr; |
| } |
| |
| .nav-container { |
| flex-direction: column; |
| gap: 1rem; |
| } |
| |
| .nav-links { |
| flex-wrap: wrap; |
| justify-content: center; |
| } |
| |
| .card { |
| margin-bottom: 1rem; |
| } |
| } |
|
|
| |
| .security-level-critical { color: var(--primary-red); } |
| .security-level-high { color: var(--primary-yellow); } |
| .security-level-medium { color: var(--primary-blue); } |
| .security-level-low { color: var(--primary-green); } |
| .security-level-info { color: var(--gray-500); } |
|
|
| |
| .fm-available { color: var(--primary-green); } |
| .fm-listening { color: var(--primary-yellow); } |
| .fm-unavailable { color: var(--primary-red); } |
|
|
| |
| .bluetooth-connected { color: var(--primary-green); } |
| .bluetooth-connecting { color: var(--primary-yellow); } |
| .bluetooth-disconnected { color: var(--primary-red); } |
| .bluetooth-available { color: var(--primary-blue); } |
|
|
| |
| .walkie-card { |
| transition: all 0.3s ease; |
| } |
|
|
| .walkie-card:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); |
| } |
|
|
| .bluetooth-wave { |
| position: relative; |
| overflow: hidden; |
| } |
|
|
| .bluetooth-wave::before { |
| content: ''; |
| position: absolute; |
| top: 50%; |
| left: 50%; |
| width: 100%; |
| height: 100%; |
| background: radial-gradient(circle, rgba(59, 130, 246, 0.3) 0%, transparent 70%); |
| border-radius: 50%; |
| transform: translate(-50%, -50%); |
| animation: bluetoothPulse 2s infinite; |
| } |
|
|
| @keyframes bluetoothPulse { |
| 0% { |
| width: 0%; |
| height: 0%; |
| opacity: 1; |
| } |
| 100% { |
| width: 100%; |
| height: 100%; |
| opacity: 0; |
| } |
| } |
|
|
| |
| .ai-insight-card { |
| background: rgba(139, 92, 246, 0.1); |
| border: 1px solid rgba(139, 92, 246, 0.3); |
| } |
|
|
| .prediction-badge { |
| background: rgba(16, 185, 129, 0.1); |
| border: 1px solid rgba(16, 185, 129, 0.3); |
| } |
|
|
| .anomaly-badge { |
| background: rgba(239, 68, 68, 0.1); |
| border: 1px solid rgba(239, 68, 68, 0.3); |
| } |
|
|
| |
| .gradient-map { |
| background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 50%, #80deea 100%); |
| } |
|
|
| |
| .shadow-professional { |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); |
| } |
|
|
| .shadow-professional-hover:hover { |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 8px 16px rgba(0, 0, 0, 0.1); |
| } |
|
|
| |
| @media print { |
| .no-print { |
| display: none !important; |
| } |
| |
| body { |
| background: white !important; |
| color: black !important; |
| } |
| } |
|
|
