@import "tailwindcss"; :root { --background: #ffffff; --foreground: #171717; } @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --font-sans: var(--font-poppins); } @media (prefers-color-scheme: dark) { :root { --background: #0a0a0a; --foreground: #ededed; } } /* Explicit theme override via data-theme on */ :root[data-theme="light"] { --background: #ffffff; --foreground: #171717; } :root[data-theme="dark"] { --background: #0a0a0a; --foreground: #ededed; } html { scroll-behavior: smooth; } html, body { margin: 0; padding: 0; width: 100%; min-height: 100%; overflow-x: hidden; } body { background: var(--background); color: var(--foreground); font-family: var(--font-poppins), sans-serif; } /* iOS-style Smooth Scrollbar Styling */ * { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.2) transparent; } /* Webkit Scrollbar Styling - iOS Style (Chrome, Safari, Edge) */ *::-webkit-scrollbar { width: 3px; height: 3px; -webkit-appearance: none; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.2); border-radius: 10px; transition: opacity 0.3s ease, background-color 0.3s ease; opacity: 0; } *:hover::-webkit-scrollbar-thumb, *:active::-webkit-scrollbar-thumb { opacity: 1; } *::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.35); } /* Glass morphism effect */ .glass { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); } /* Smooth scrolling for overflow containers */ * { scroll-behavior: smooth; -webkit-overflow-scrolling: touch; } /* Toast animation */ @keyframes slide-down { from { opacity: 0; transform: translate(-50%, -20px); } to { opacity: 1; transform: translate(-50%, 0); } } .animate-slide-down { animation: slide-down 0.3s ease-out; } /* Hero section animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in-up { animation: fadeInUp 0.8s ease-out forwards; } .animation-delay-100 { animation-delay: 0.1s; } .animation-delay-200 { animation-delay: 0.2s; } .animation-delay-300 { animation-delay: 0.3s; } .animation-delay-400 { animation-delay: 0.4s; } .animation-delay-500 { animation-delay: 0.5s; } .animation-delay-600 { animation-delay: 0.6s; } /* Marquee animation */ @keyframes marquee { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } .animate-marquee { display: flex; animation: marquee 20s linear infinite; width: max-content; } @keyframes marqueeReverse { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .animate-marquee-reverse { display: flex; animation: marqueeReverse 20s linear infinite; width: max-content; } /* Line clamp for text truncation */ .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Marquee pause animation */ @keyframes marqueePause { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .animate-marquee-pause { display: flex; animation: marqueePause 25s linear infinite paused; width: max-content; } .animate-marquee-pause:hover { animation-play-state: running; } /* Rotating border animation */ @keyframes rotateBorder { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .rotating-border { position: relative; background: linear-gradient(90deg, #6366f1, #818cf8, #a5b4fc, #c7d2fe, #e0e7ff); background-size: 300% 300%; animation: rotateBorder 2s linear infinite; border-radius: 9999px; padding: 1px; } .rotating-border::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: inherit; border-radius: inherit; padding: 1px; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; z-index: -1; } /* Floating animation */ @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0px); } } .floating-badge { animation: float 3s ease-in-out infinite; } .hero-bg::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); opacity: 0.5; } /* Mobile-specific styles */ @media (max-width: 768px) { /* Improve tap targets for touch devices */ button, a, input, select, textarea { min-height: 44px; min-width: 44px; } /* Adjust font sizes for better readability on small screens */ body { font-size: 16px; } /* Ensure images are never larger than their container */ img { max-width: 100%; height: auto; } /* Improve form input accessibility on mobile */ input[type="text"], input[type="email"], input[type="password"], textarea { font-size: 16px; /* Prevents zoom on iOS Safari */ } }