| |
|
|
| |
| html { |
| scroll-behavior: smooth; |
| } |
|
|
| |
| ::-webkit-scrollbar { |
| width: 10px; |
| } |
|
|
| ::-webkit-scrollbar-track { |
| background: #0f0f0f; |
| } |
|
|
| ::-webkit-scrollbar-thumb { |
| background: #2a2a2a; |
| border-radius: 5px; |
| } |
|
|
| ::-webkit-scrollbar-thumb:hover { |
| background: #00c8b3; |
| } |
|
|
| |
| .aspect-w-4 { |
| position: relative; |
| padding-bottom: 75%; |
| } |
|
|
| .aspect-h-3 { |
| position: absolute; |
| height: 100%; |
| width: 100%; |
| top: 0; |
| left: 0; |
| } |
|
|
| |
| .line-clamp-1 { |
| display: -webkit-box; |
| -webkit-line-clamp: 1; |
| -webkit-box-orient: vertical; |
| overflow: hidden; |
| } |
|
|
| |
| .glass { |
| background: rgba(26, 26, 26, 0.8); |
| backdrop-filter: blur(10px); |
| -webkit-backdrop-filter: blur(10px); |
| } |
|
|
| |
| .gradient-text { |
| background-size: 200% auto; |
| animation: gradient 3s ease infinite; |
| } |
|
|
| @keyframes gradient { |
| 0% { background-position: 0% 50%; } |
| 50% { background-position: 100% 50%; } |
| 100% { background-position: 0% 50%; } |
| } |
|
|
| |
| .img-loading { |
| background: linear-gradient(90deg, #1a1a1a 25%, #2a2a2a 50%, #1a1a1a 75%); |
| background-size: 200% 100%; |
| animation: shimmer 1.5s infinite; |
| } |
|
|
| @keyframes shimmer { |
| 0% { background-position: -200% 0; } |
| 100% { background-position: 200% 0; } |
| } |
|
|
| |
| .hover-lift { |
| transition: transform 0.3s ease, box-shadow 0.3s ease; |
| } |
|
|
| .hover-lift:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 30px rgba(0, 200, 179, 0.2); |
| } |
|
|
| |
| .ripple { |
| position: relative; |
| overflow: hidden; |
| } |
|
|
| .ripple::after { |
| content: ''; |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| top: 0; |
| left: 0; |
| pointer-events: none; |
| background-image: radial-gradient(circle, #fff 10%, transparent 10.01%); |
| background-repeat: no-repeat; |
| background-position: 50%; |
| transform: scale(10, 10); |
| opacity: 0; |
| transition: transform .5s, opacity 1s; |
| } |
|
|
| .ripple:active::after { |
| transform: scale(0, 0); |
| opacity: 0.3; |
| transition: 0s; |
| } |
|
|
| |
| .modal-enter { |
| animation: modalIn 0.3s ease-out; |
| } |
|
|
| @keyframes modalIn { |
| from { |
| opacity: 0; |
| transform: scale(0.95); |
| } |
| to { |
| opacity: 1; |
| transform: scale(1); |
| } |
| } |
|
|
| |
| .toast-enter { |
| animation: toastIn 0.3s ease-out forwards; |
| } |
|
|
| @keyframes toastIn { |
| from { |
| transform: translateY(100%); |
| opacity: 0; |
| } |
| to { |
| transform: translateY(0); |
| opacity: 1; |
| } |
| } |
|
|
| |
| .filter-btn.active { |
| box-shadow: 0 0 20px rgba(0, 200, 179, 0.4); |
| } |
|
|
| |
| .card-shine { |
| position: relative; |
| overflow: hidden; |
| } |
|
|
| .card-shine::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: -100%; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient( |
| 90deg, |
| transparent, |
| rgba(255, 255, 255, 0.1), |
| transparent |
| ); |
| transition: left 0.5s; |
| } |
|
|
| .card-shine:hover::before { |
| left: 100%; |
| } |
|
|
| |
| @media (max-width: 768px) { |
| .artwork-grid { |
| grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); |
| gap: 1rem; |
| } |
| } |
|
|
| @media (max-width: 480px) { |
| .artwork-grid { |
| grid-template-columns: 1fr; |
| } |
| } |
|
|
| |
| .dark .text-gray-100 { |
| color: #f3f4f6; |
| } |
|
|
| .dark .bg-card { |
| background-color: #1a1a1a; |
| } |
|
|
| |
| .light body { |
| background-color: #f3f4f6; |
| color: #111827; |
| } |
|
|
| .light .bg-dark { |
| background-color: #ffffff; |
| } |
|
|
| .light .bg-card { |
| background-color: #ffffff; |
| } |
|
|
| .light .border-gray-800 { |
| border-color: #e5e7eb; |
| } |
|
|
| .light .text-gray-400 { |
| color: #6b7280; |
| } |
|
|
| .light .text-gray-300 { |
| color: #374151; |
| } |
