Spaces:
Sleeping
Sleeping
| @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 <html> */ | |
| :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 */ | |
| } | |
| } |