/* Yeh file aapko Tailwind CLI se generate karni hogi. Pehle, Tailwind ko import karein: */ @tailwind base; @tailwind components; @tailwind utilities; /* Aapke custom styles jo se move kiye gaye hain */ body { font-family: 'Poppins', sans-serif; background-color: #f7f8fa; /* Clean light gray background */ } .brand-gradient { background: linear-gradient(to right, #f97316, #ec4899); } /* Responsive Slider for Featured Editors on Mobile */ @media (max-width: 1023px) { #featured-editors-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1.5rem; padding-left: 1.5rem; padding-right: 1.5rem; padding-bottom: 1rem; } #featured-editors-grid > .bg-white { /* Assuming cards are bg-white */ flex: 0 0 280px; scroll-snap-align: start; } #featured-editors-grid::-webkit-scrollbar { height: 6px; } #featured-editors-grid::-webkit-scrollbar-track { background: #e2e8f0; border-radius: 10px; } #featured-editors-grid::-webkit-scrollbar-thumb { background-color: #fb923c; border-radius: 10px; } } /* Responsive Slider for Categories on Mobile */ @media (max-width: 1023px) { #categories-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1.5rem; padding-left: 1.5rem; padding-right: 1.5rem; padding-bottom: 1rem; } #categories-grid > .category-card { flex: 0 0 280px; scroll-snap-align: start; } #categories-grid::-webkit-scrollbar { height: 6px; } #categories-grid::-webkit-scrollbar-thumb { background-color: #fb923c; border-radius: 10px; } } /* Scroll Animation CSS */ .fade-in-element { opacity: 0; transform: translateY(40px); /* Element thoda neeche se aayega */ transition: opacity 0.8s ease-out, transform 0.8s ease-out; } .fade-in-element.is-visible { opacity: 1; transform: translateY(0); } /* Content fade transition */ .content-panel-fade-in { animation: fadeIn 0.5s ease-in-out forwards; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }