@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap'); @import "tailwindcss"; @theme { --font-sans: "Cairo", "Inter", ui-sans-serif, system-ui, sans-serif; } body { font-family: var(--font-sans); background: linear-gradient(135deg, #f0f4ff 0%, #e0f2fe 50%, #f5f3ff 100%); background-attachment: fixed; color: #0f172a; /* slate-905 deep high-contrast text color */ } /* 3D Visual Effects & Helpers */ .perspective-1000 { perspective: 1000px; } .preserve-3d { transform-style: preserve-3d; } .backface-hidden { backface-visibility: hidden; } .rotate-y-180 { transform: rotateY(180deg); } .card-persp { perspective: 1200px; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .card-persp-hover:hover { transform: translateY(-8px) rotateX(4deg) rotateY(-4deg) translateZ(12px); box-shadow: 0 15px 35px -10px rgba(99, 102, 241, 0.2), 0 25px 50px -15px rgba(139, 92, 246, 0.2), 0 35px 70px -25px rgba(6, 182, 212, 0.15); } .shadow-3d-flat { box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.05), 0 15px 25px -10px rgba(99, 102, 241, 0.08), 0 25px 40px -15px rgba(139, 92, 246, 0.08); } .shadow-3d-deep { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.04), 0 20px 40px -15px rgba(99, 102, 241, 0.15), 0 30px 60px -20px rgba(139, 92, 246, 0.15), 0 40px 100px -30px rgba(6, 182, 212, 0.12); } /* Scrollbar styling */ .scrollbar-none::-webkit-scrollbar { display: none; } .scrollbar-none { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } /* News ticker smooth scrolling */ @keyframes ticker-rtl { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } @keyframes ticker-ltr { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .animate-ticker-rtl { display: inline-block; white-space: nowrap; animation: ticker-rtl 32s linear infinite; } .animate-ticker-rtl:hover { animation-play-state: paused; } .animate-ticker-ltr { display: inline-block; white-space: nowrap; animation: ticker-ltr 32s linear infinite; } .animate-ticker-ltr:hover { animation-play-state: paused; }