|
|
|
|
|
|
|
|
|
|
|
html { |
|
|
scroll-behavior: smooth; |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes gradient-shift { |
|
|
0% { |
|
|
background-position: 0% 50%; |
|
|
} |
|
|
50% { |
|
|
background-position: 100% 50%; |
|
|
} |
|
|
100% { |
|
|
background-position: 0% 50%; |
|
|
} |
|
|
} |
|
|
|
|
|
.animated-gradient { |
|
|
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); |
|
|
background-size: 400% 400%; |
|
|
animation: gradient-shift 15s ease infinite; |
|
|
} |
|
|
|
|
|
|
|
|
.card-hover { |
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
|
|
} |
|
|
|
|
|
.card-hover:hover { |
|
|
transform: translateY(-8px); |
|
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); |
|
|
} |
|
|
|
|
|
|
|
|
.btn-primary { |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.btn-primary:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3); |
|
|
} |
|
|
|
|
|
|
|
|
.loading-spinner { |
|
|
border: 4px solid #f3f4f6; |
|
|
border-top: 4px solid #3b82f6; |
|
|
border-radius: 50%; |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
animation: spin 1s linear infinite; |
|
|
} |
|
|
|
|
|
@keyframes spin { |
|
|
0% { transform: rotate(0deg); } |
|
|
100% { transform: rotate(360deg); } |
|
|
} |
|
|
|
|
|
|
|
|
::-webkit-scrollbar { |
|
|
width: 8px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-track { |
|
|
background: #f1f5f9; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb { |
|
|
background: #cbd5e1; |
|
|
border-radius: 4px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb:hover { |
|
|
background: #94a3b8; |
|
|
} |
|
|
|
|
|
|
|
|
.mobile-menu-enter { |
|
|
transform: translateX(-100%); |
|
|
} |
|
|
|
|
|
.mobile-menu-enter-active { |
|
|
transform: translateX(0%); |
|
|
transition: transform 300ms ease-in-out; |
|
|
} |
|
|
|
|
|
.mobile-menu-exit { |
|
|
transform: translateX(0%); |
|
|
} |
|
|
|
|
|
.mobile-menu-exit-active { |
|
|
transform: translateX(-100%); |
|
|
transition: transform 300ms ease-in-out; |
|
|
} |
|
|
|
|
|
|
|
|
.emulator-screen { |
|
|
box-shadow: 0 0 20px rgba(59, 130, 246, 0.1); |
|
|
transition: box-shadow 0.3s ease; |
|
|
} |
|
|
|
|
|
.emulator-screen:hover { |
|
|
box-shadow: 0 0 30px rgba(59, 130, 246, 0.2); |
|
|
} |