/* Global MAS Technology - Enhanced Features */ /* Loading States */ .loading {position: relative;overflow: hidden} .loading::after {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);animation: loading-shimmer 1.2s infinite} @keyframes loading-shimmer {0% {transform: translateX(-100%)} 100% {transform: translateX(100%)} } /* Enhanced Hover Effects */ .hover-lift {transition: transform 0.3s ease, box-shadow 0.3s ease} .hover-lift:hover {transform: translateY(-4px);box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)} /* Notification Styles */ .notification {backdrop-filter: blur(16px);border-left: 4px solid} .notification.success {background: rgba(16, 185, 129, 0.9);border-color: #10b981} .notification.error {background: rgba(239, 68, 68, 0.9);border-color: #ef4444} .notification.warning {background: rgba(245, 158, 11, 0.9);border-color: #f59e0b} .notification.info {background: rgba(59, 130, 246, 0.9);border-color: #3b82f6} /* Tooltip Styles */ .tooltip {position: fixed;z-index: 50;padding: 0.5rem 0.75rem;font-size: 0.875rem;color: white;background: rgba(0, 0, 0, 0.9);border-radius: 0.5rem;box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);opacity: 0;pointer-events: none;transition: opacity 0.3s ease;backdrop-filter: blur(10px)} .tooltip.show {opacity: 1} /* Counter Animation */ .counter {font-variant-numeric: tabular-nums;transition: all 0.3s ease} /* Skeleton Loading */ .skeleton {background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);background-size: 200% 100%;animation: skeleton-loading 1.5s infinite} @keyframes skeleton-loading {0% {background-position: 200% 0} 100% {background-position: -200% 0} } [data-theme="dark"] .skeleton {background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);background-size: 200% 100%} /* Enhanced Form Styles */ .form-input {width: 100%;padding: 0.75rem 1rem;border: 2px solid var(--border-color);border-radius: 0.75rem;background: var(--bg-primary);color: var(--text-primary);font-size: 1rem;transition: all 0.3s ease} .form-input:focus {outline: none;border-color: var(--primary-500);box-shadow: 0 0 0 3px rgba(42, 82, 152, 0.1);transform: translateY(-2px)} .form-input:invalid {border-color: #ef4444;box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1)} .form-input:valid {border-color: #10b981;box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1)} /* Modal Styles */ .modal-backdrop {backdrop-filter: blur(8px);background: rgba(0, 0, 0, 0.5)} .modal-content {backdrop-filter: blur(16px);background: var(--bg-primary);border: 1px solid var(--border-color);box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25)} /* Progress Bar */ .progress-bar {width: 100%;height: 0.5rem;background: var(--bg-secondary);border-radius: 9999px;overflow: hidden} .progress-fill {height: 100%;background: var(--gradient-primary);border-radius: 9999px;transition: width 0.3s ease} /* Badge Styles */ .badge {display: inline-flex;align-items: center;padding: 0.25rem 0.75rem;font-size: 0.75rem;font-weight: 600;border-radius: 9999px;text-transform: uppercase;letter-spacing: 0.05em} .badge-primary {background: var(--primary-100);color: var(--primary-800)} .badge-secondary {background: var(--secondary-100);color: var(--secondary-800)} .badge-success {background: #dcfce7;color: #166534} .badge-warning {background: #fef3c7;color: #92400e} .badge-error {background: #fee2e2;color: #991b1b} /* Tab Styles */ .tab-list {display: flex;border-bottom: 2px solid var(--border-color)} .tab-button {padding: 0.75rem 1.5rem;font-weight: 600;color: var(--text-secondary);background: transparent;border: none;border-bottom: 2px solid transparent;cursor: pointer;transition: all 0.3s ease} .tab-button:hover {color: var(--text-primary);background: var(--bg-secondary)} .tab-button.active {color: var(--primary-600);border-bottom-color: var(--primary-600)} .tab-content {padding: 1.5rem 0} /* Accordion Styles */ .accordion-item {border: 1px solid var(--border-color);border-radius: 0.75rem;margin-bottom: 0.5rem;overflow: hidden} .accordion-header {padding: 1rem 1.5rem;background: var(--bg-secondary);cursor: pointer;display: flex;justify-content: between;align-items: center;transition: background 0.3s ease} .accordion-header:hover {background: var(--bg-primary)} .accordion-content {padding: 1.5rem;background: var(--bg-primary);max-height: 0;overflow: hidden;transition: max-height 0.3s ease} .accordion-content.open {max-height: 500px} /* Dropdown Styles */ .dropdown {position: relative;display: inline-block} .dropdown-menu {position: absolute;top: 100%;left: 0;min-width: 12rem;background: var(--bg-primary);border: 1px solid var(--border-color);border-radius: 0.75rem;box-shadow: var(--shadow-xl);opacity: 0;visibility: hidden;transform: translateY(-10px);transition: all 0.3s ease;z-index: 50} .dropdown-menu.show {opacity: 1;visibility: visible;transform: translateY(0)} .dropdown-item {display: block;padding: 0.75rem 1rem;color: var(--text-primary);text-decoration: none;transition: background 0.3s ease} .dropdown-item:hover {background: var(--bg-secondary)} /* Alert Styles */ .alert {padding: 1rem 1.5rem;border-radius: 0.75rem;border-left: 4px solid;margin-bottom: 1rem} .alert-success {background: #f0fdf4;border-color: #22c55e;color: #166534} .alert-warning {background: #fffbeb;border-color: #f59e0b;color: #92400e} .alert-error {background: #fef2f2;border-color: #ef4444;color: #991b1b} .alert-info {background: #eff6ff;border-color: #3b82f6;color: #1e40af} /* Dark mode alert styles */ [data-theme="dark"] .alert-success {background: rgba(34, 197, 94, 0.1);color: #4ade80} [data-theme="dark"] .alert-warning {background: rgba(245, 158, 11, 0.1);color: #fbbf24} [data-theme="dark"] .alert-error {background: rgba(239, 68, 68, 0.1);color: #f87171} [data-theme="dark"] .alert-info {background: rgba(59, 130, 246, 0.1);color: #60a5fa} /* Responsive Utilities */ @media (max-width: 640px) {.tab-button {padding: 0.5rem 1rem;font-size: 0.875rem} .accordion-header {padding: 0.75rem 1rem} .accordion-content {padding: 1rem} .dropdown-menu {min-width: 10rem} } /* Enhanced Navigation Button Styles */ .nav-button {display: inline-flex;align-items: center;justify-content: center;padding: 0.75rem 1.5rem;border-radius: 0.5rem;font-weight: 600;text-decoration: none;transition: all 0.3s ease;cursor: pointer;border: 2px solid transparent;position: relative;overflow: hidden;font-size: 0.95rem;text-transform: uppercase;letter-spacing: 0.025em;min-height: 2.75rem} .nav-button-primary {background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);color: white;box-shadow: 0 4px 15px rgba(30, 60, 114, 0.3)} .nav-button-primary:hover {background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);transform: translateY(-2px);box-shadow: 0 6px 20px rgba(30, 60, 114, 0.4)} .nav-button-secondary {background: linear-gradient(135deg, #4CAF50 0%, #22c55e 100%);color: white;box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3)} .nav-button-secondary:hover {background: linear-gradient(135deg, #16a34a 0%, #10b981 100%);transform: translateY(-2px);box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4)} .nav-button-outline {background: transparent;color: #1e3c72;border: 2px solid #1e3c72;box-shadow: 0 2px 8px rgba(30, 60, 114, 0.1)} .nav-button-outline:hover {background: #1e3c72;color: white;transform: translateY(-2px);box-shadow: 0 4px 15px rgba(30, 60, 114, 0.3)} .nav-button-outline.active {background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);color: white;border-color: #1e3c72;box-shadow: 0 4px 15px rgba(30, 60, 114, 0.3)} .nav-button-white {background: white;color: #1e3c72;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);border: 2px solid #e5e7eb} .nav-button-white:hover {background: #f8fafc;color: #1e40af;transform: translateY(-2px);box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);border-color: #d1d5db} /* Service Page Button Enhancements */ .service-btn {display: inline-flex;align-items: center;justify-content: center;padding: 1rem 2rem;border-radius: 0.75rem;font-weight: 700;text-decoration: none;transition: all 0.3s ease;cursor: pointer;border: none;position: relative;overflow: hidden;font-size: 1rem;text-transform: uppercase;letter-spacing: 0.05em;min-height: 3.5rem;box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15)} .service-btn-primary {background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #4CAF50 100%);color: white} .service-btn-primary:hover {background: linear-gradient(135deg, #1e40af 0%, #2563eb 50%, #16a34a 100%);transform: translateY(-3px);box-shadow: 0 10px 30px rgba(30, 60, 114, 0.4)} .service-btn-secondary {background: linear-gradient(135deg, #4CAF50 0%, #22c55e 50%, #fbbf24 100%);color: white} .service-btn-secondary:hover {background: linear-gradient(135deg, #16a34a 0%, #10b981 50%, #f59e0b 100%);transform: translateY(-3px);box-shadow: 0 10px 30px rgba(76, 175, 80, 0.4)} /* Floating Language Switcher Styles */ .floating-lang-btn {display: flex;align-items: center;justify-content: center;padding: 0.75rem;border-radius: 50%;font-weight: 600;text-decoration: none;transition: all 0.3s ease;cursor: pointer;border: 2px solid transparent;font-size: 0.875rem;width: 3.5rem;height: 3.5rem;background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);color: white;box-shadow: 0 4px 15px rgba(30, 60, 114, 0.3);position: relative;overflow: hidden} .floating-lang-btn:hover {background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);transform: translateY(-2px) scale(1.05);box-shadow: 0 8px 25px rgba(30, 60, 114, 0.4)} .floating-lang-btn.active {background: linear-gradient(135deg, #4CAF50 0%, #22c55e 100%);box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);transform: scale(1.1)} .floating-lang-btn .flag-icon {font-size: 1.25rem;margin-bottom: 0.125rem} .floating-lang-btn .lang-text {font-size: 0.75rem;font-weight: 700;text-transform: uppercase;letter-spacing: 0.05em} /* Hover effect for flag and text */ .floating-lang-btn:hover .flag-icon {transform: scale(1.1)} .floating-lang-btn:hover .lang-text {transform: scale(1.05)} /* Mobile adjustments for floating language switcher */ @media (max-width: 768px) {#floating-lang-switcher {right: 1rem;top: 50%;transform: translateY(-50%)} .floating-lang-btn {width: 3rem;height: 3rem;padding: 0.625rem} .floating-lang-btn .flag-icon {font-size: 1.125rem} .floating-lang-btn .lang-text {font-size: 0.6875rem} } /* Language Switcher Button Styles */ .lang-button {display: inline-flex;align-items: center;justify-content: center;padding: 0.5rem 1rem;border-radius: 0.5rem;font-weight: 600;text-decoration: none;transition: all 0.3s ease;cursor: pointer;border: 2px solid transparent;font-size: 0.875rem;min-height: 2.5rem;background: rgba(255, 255, 255, 0.1);color: white;backdrop-filter: blur(10px)} .lang-button:hover {background: rgba(255, 255, 255, 0.2);transform: translateY(-1px);box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2)} .lang-button.active {background: rgba(255, 255, 255, 0.25);border-color: rgba(255, 255, 255, 0.3);box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1)} /* Mobile Button Adjustments */ @media (max-width: 768px) {.btn {padding: 0.75rem 1.5rem;font-size: 0.9rem;min-height: 3rem} .nav-button {padding: 0.625rem 1.25rem;font-size: 0.875rem;min-height: 2.5rem} .service-btn {padding: 0.875rem 1.75rem;font-size: 0.95rem;min-height: 3.25rem} .lang-button {padding: 0.375rem 0.75rem;font-size: 0.8rem;min-height: 2.25rem} } /* High Contrast Mode */ @media (prefers-contrast: high) {.card, .modal-content, .dropdown-menu {border: 2px solid currentColor} .btn, .nav-button, .service-btn {border: 2px solid currentColor;font-weight: bold} }