.product-card { background: #141414; border-color: rgba(255, 255, 255, 0.05); color: white; text-decoration: none; } .product-card:hover { background: rgba(255, 255, 255, 0.05); color: white; text-decoration: none; } .text-t-primary { color: white; } .text-t-primary\/60 { color: rgba(255, 255, 255, 0.6); } .text-accent-400 { color: rgba(156, 163, 175, 1); } .text-accent-500 { color: #00ffff; } .bg-accent-500 { background-color: #00ffff; } .bg-accent-500\/25 { background-color: rgba(20, 20, 20, 0.25); } .text-t-accent { color: white; } .border-white\/5 { border-color: rgba(255, 255, 255, 0.05); } .border-white\/\[0\.025\] { border-color: rgba(255, 255, 255, 0.025); } .bg-white\/\[0\.025\] { background-color: rgba(255, 255, 255, 0.025); } .hover\:bg-white\/5:hover { background-color: rgba(255, 255, 255, 0.05); } /* Additional classes for larger sizing */ .col-4 { width: 33.333333%; padding: 0 15px; } .mb-6 { margin-bottom: 1.5rem; } .p-2 { padding: 0.5rem; } .mb-3 { margin-bottom: 0.75rem; } .top-3 { top: 0.75rem; } .right-3 { right: 0.75rem; } .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; } .py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; } .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } .pb-6 { padding-bottom: 1.5rem; } .pb-4 { padding-bottom: 1rem; } .mb-4 { margin-bottom: 1rem; } .text-lg { font-size: 1.125rem; line-height: 1.75rem; } .text-xl { font-size: 1.25rem; line-height: 1.75rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .size-2\.5 { width: 0.625rem; height: 0.625rem; } .gap-6 { gap: 1.5rem; } .p-1 { padding: 0.25rem; } .text-base { font-size: 1rem; line-height: 1.5rem; } .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; } .size-5 { width: 1.25rem; height: 1.25rem; } /* Tailwind-like utilities */ .aspect-video { aspect-ratio: 16 / 9; } .block { display: block; } .flex { display: flex; } .grid { display: grid; } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .items-center { align-items: center; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .gap-1 { gap: 0.25rem; } .gap-2 { gap: 0.5rem; } .gap-4 { gap: 1rem; } .rounded-xl { border-radius: 0.75rem; } .rounded-lg { border-radius: 0.5rem; } .rounded-md { border-radius: 0.375rem; } .rounded-full { border-radius: 9999px; } .border { border-width: 1px; } .border-b { border-bottom-width: 1px; } .border-dashed { border-style: dashed; } .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; } .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; } .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .text-xs { font-size: 0.75rem; line-height: 1rem; } .text-sm { font-size: 0.875rem; line-height: 1.25rem; } .font-light { font-weight: 300; } .font-semibold { font-weight: 600; } .text-left { text-align: left; } .w-full { width: 100%; } .flex-1 { flex: 1 1 0%; } .flex-grow-0 { flex-grow: 0; } .flex-shrink-0 { flex-shrink: 0; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .relative { position: relative; } .absolute { position: absolute; } .top-2 { top: 0.5rem; } .right-2 { right: 0.5rem; } .right-0 { right: 0px; } .-bottom-14 { bottom: -3.5rem; } .inset-0 { top: 0px; right: 0px; bottom: 0px; left: 0px; } .size-2 { width: 0.5rem; height: 0.5rem; } .size-4 { width: 1rem; height: 1rem; } .size-32 { width: 8rem; height: 8rem; } .size-full { width: 100%; height: 100%; } .min-h-32 { min-height: 8rem; } .overflow-hidden { overflow: hidden; } .object-cover { object-fit: cover; } .opacity-15 { opacity: 0.15; } .transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .duration-300 { transition-duration: 300ms; } .ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .translate-x-1\/2 { transform: translateX(50%); } .mx-auto { margin-left: auto; margin-right: auto; } .bg-cover { background-size: cover; } .inline-flex { display: inline-flex; } .flex-wrap { flex-wrap: wrap; } @media (min-width: 768px) { .md\:text-xl { font-size: 1.25rem; line-height: 1.75rem; } }