Spaces:
Running
Running
| /* Custom Styles for Simcoe Connect Hub */ | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| line-height: 1.6; | |
| } | |
| /* Smooth scrolling */ | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| /* Custom animations */ | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .fade-in-up { | |
| animation: fadeInUp 0.6s ease-out; | |
| } | |
| /* Gradient text */ | |
| .gradient-text { | |
| background: linear-gradient(135deg, #3b82f6 0%, #22c55e 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| /* Floating animation */ | |
| @keyframes float { | |
| 0%, 100% { | |
| transform: translateY(0px); | |
| } | |
| 50% { | |
| transform: translateY(-10px); | |
| } | |
| } | |
| .float { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #3b82f6; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #2563eb; | |
| } | |
| /* Loading states */ | |
| .loading-shimmer { | |
| background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); | |
| background-size: 200% 100%; | |
| animation: shimmer 1.5s infinite; | |
| } | |
| @keyframes shimmer { | |
| 0% { | |
| background-position: -200% 0; | |
| } | |
| 100% { | |
| background-position: 200% 0; | |
| } | |
| } | |
| /* Responsive image containers */ | |
| .image-container { | |
| position: relative; | |
| overflow: hidden; | |
| border-radius: 12px; | |
| } | |
| .image-container img { | |
| transition: transform 0.3s ease; | |
| } | |
| .image-container:hover img { | |
| transform: scale(1.05); | |
| } | |
| /* Card hover effects */ | |
| .hover-lift { | |
| transition: transform 0.2s ease, box-shadow 0.2s 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); | |
| } | |
| /* Custom button styles */ | |
| .btn-primary { | |
| background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); | |
| transition: all 0.3s ease; | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 25px -3px rgba(59, 130, 246, 0.4); | |
| } | |
| .btn-secondary { | |
| background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); | |
| transition: all 0.3s ease; | |
| } | |
| .btn-secondary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 25px -3px rgba(34, 197, 94, 0.4); | |
| } | |
| /* Chat widget animations */ | |
| .chat-widget-enter { | |
| transform: translateY(100%); | |
| opacity: 0; | |
| } | |
| .chat-widget-enter-active { | |
| transform: translateY(0); | |
| opacity: 1; | |
| transition: all 0.3s ease; | |
| } | |
| /* Mobile menu transitions */ | |
| .mobile-menu-enter { | |
| transform: translateX(-100%); | |
| } | |
| .mobile-menu-enter-active { | |
| transform: translateX(0); | |
| transition: transform 0.3s ease; | |
| } | |
| /* Focus states for accessibility */ | |
| .focus-ring:focus { | |
| outline: 2px solid #3b82f6; | |
| outline-offset: 2px; | |
| } | |
| /* Print styles */ | |
| @media print { | |
| .no-print { | |
| display: none ; | |
| } | |
| } |