| /* Base styles */ | |
| .hovered-element { | |
| transition: transform 0.3s ease; | |
| } | |
| .hovered-element:hover { | |
| transform: scale(1.05); | |
| } | |
| .text-indigo-600 { | |
| --tw-text-opacity: 1; | |
| color: rgb(79 70 229 / var(--tw-text-opacity)); | |
| } | |
| body { | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; | |
| line-height: 1.6; | |
| } | |
| /* Breadcrumb navigation */ | |
| .breadcrumb { | |
| padding: 1rem 0; | |
| font-size: 0.9rem; | |
| } | |
| .breadcrumb ol { | |
| display: flex; | |
| flex-wrap: wrap; | |
| list-style: none; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .breadcrumb li { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .breadcrumb li:not(:last-child)::after { | |
| content: '/'; | |
| margin: 0 0.5rem; | |
| color: #9ca3af; | |
| } | |
| .breadcrumb a { | |
| color: #4f46e5; | |
| text-decoration: none; | |
| } | |
| .breadcrumb a:hover { | |
| text-decoration: underline; | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #888; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #555; | |
| } | |
| /* Hero image styling */ | |
| .hero img { | |
| max-width: 100%; | |
| height: auto; | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .hero img:hover { | |
| transform: scale(1.02); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| /* Animation classes */ | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .slide-up { | |
| animation: slideUp 0.5s ease-out; | |
| } | |
| @keyframes slideUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } |