Spaces:
Running
Running
| @import "tailwindcss"; | |
| @import "tw-animate-css"; | |
| @custom-variant dark (&:is(.dark *)); | |
| @theme inline { | |
| --radius-sm: calc(var(--radius) - 4px); | |
| --radius-md: calc(var(--radius) - 2px); | |
| --radius-lg: var(--radius); | |
| --radius-xl: calc(var(--radius) + 4px); | |
| --color-background: hsl(var(--background)); | |
| --color-foreground: hsl(var(--foreground)); | |
| --color-card: hsl(var(--card)); | |
| --color-card-foreground: hsl(var(--card-foreground)); | |
| --color-popover: hsl(var(--popover)); | |
| --color-popover-foreground: hsl(var(--popover-foreground)); | |
| --color-primary: hsl(var(--primary)); | |
| --color-primary-foreground: hsl(var(--primary-foreground)); | |
| --color-secondary: hsl(var(--secondary)); | |
| --color-secondary-foreground: hsl(var(--secondary-foreground)); | |
| --color-muted: hsl(var(--muted)); | |
| --color-muted-foreground: hsl(var(--muted-foreground)); | |
| --color-accent: hsl(var(--accent)); | |
| --color-accent-foreground: hsl(var(--accent-foreground)); | |
| --color-destructive: hsl(var(--destructive)); | |
| --color-destructive-foreground: hsl(var(--destructive-foreground)); | |
| --color-border: hsl(var(--border)); | |
| --color-input: hsl(var(--input)); | |
| --color-ring: hsl(var(--ring)); | |
| --color-sidebar: hsl(var(--sidebar)); | |
| --color-sidebar-foreground: hsl(var(--sidebar-foreground)); | |
| --color-sidebar-primary: hsl(var(--sidebar-primary)); | |
| --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground)); | |
| --color-sidebar-accent: hsl(var(--sidebar-accent)); | |
| --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground)); | |
| --color-sidebar-border: hsl(var(--sidebar-border)); | |
| --color-sidebar-ring: hsl(var(--sidebar-ring)); | |
| --font-sans: 'Inter', sans-serif; | |
| --font-mono: 'JetBrains Mono', monospace; | |
| --animate-in: fade-in 0.2s ease-out; | |
| --animate-out: fade-out 0.2s ease-in; | |
| } | |
| /* LUXURY GOLD & BLACK THEME */ | |
| :root { | |
| /* Deep Black Backgrounds */ | |
| --background: 240 10% 3.9%; /* Rich Black */ | |
| --foreground: 45 20% 90%; /* Soft Gold-White */ | |
| --card: 240 10% 5%; /* Slightly Lighter Black */ | |
| --card-foreground: 45 30% 90%; | |
| --popover: 240 10% 5%; | |
| --popover-foreground: 45 30% 90%; | |
| /* GOLD PRIMARY */ | |
| --primary: 45 90% 50%; /* Pure Gold */ | |
| --primary-foreground: 240 10% 3.9%; /* Black Text on Gold */ | |
| --secondary: 240 5% 15%; /* Dark Grey */ | |
| --secondary-foreground: 45 30% 90%; | |
| --muted: 240 5% 15%; | |
| --muted-foreground: 240 5% 60%; | |
| --accent: 45 90% 50%; | |
| --accent-foreground: 240 10% 3.9%; | |
| --destructive: 0 62.8% 30.6%; | |
| --destructive-foreground: 0 0% 98%; | |
| --border: 45 30% 20%; /* Subtle Gold Borders */ | |
| --input: 240 5% 15%; | |
| --ring: 45 90% 50%; | |
| --radius: 0.5rem; | |
| --sidebar: 240 10% 4%; | |
| --sidebar-foreground: 45 20% 80%; | |
| --sidebar-primary: 45 90% 50%; | |
| --sidebar-primary-foreground: 240 10% 3.9%; | |
| --sidebar-accent: 240 5% 12%; | |
| --sidebar-accent-foreground: 45 90% 50%; | |
| --sidebar-border: 45 20% 15%; | |
| --sidebar-ring: 45 90% 50%; | |
| } | |
| @layer base { | |
| * { | |
| @apply border-border; | |
| } | |
| body { | |
| @apply font-sans antialiased bg-background text-foreground; | |
| } | |
| } | |
| /* Luxury Grid Background */ | |
| .bg-grid-pattern { | |
| background-size: 50px 50px; | |
| background-image: | |
| linear-gradient(to right, rgba(212, 175, 55, 0.05) 1px, transparent 1px), | |
| linear-gradient(to bottom, rgba(212, 175, 55, 0.05) 1px, transparent 1px); | |
| } | |
| /* Custom Scrollbar for Webkit */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: hsl(var(--background)); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: hsl(var(--primary) / 0.3); | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: hsl(var(--primary) / 0.5); | |
| } | |
| /* ===== MOBILE RESPONSIVE UTILITIES ===== */ | |
| /* Mobile drawer backdrop */ | |
| @media (max-width: 767px) { | |
| .mobile-backdrop { | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(0, 0, 0, 0.6); | |
| backdrop-filter: blur(4px); | |
| z-index: 45; | |
| animation: fadeIn 0.2s ease-out; | |
| } | |
| /* Mobile drawer slide-in */ | |
| .mobile-drawer { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| bottom: 0; | |
| z-index: 50; | |
| animation: slideInLeft 0.3s ease-out; | |
| } | |
| } | |
| @keyframes slideInLeft { | |
| from { transform: translateX(-100%); } | |
| to { transform: translateX(0); } | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| @keyframes slideUp { | |
| from { transform: translateY(100%); } | |
| to { transform: translateY(0); } | |
| } | |
| /* Mobile bottom tab bar */ | |
| @media (max-width: 767px) { | |
| .mobile-tab-bar { | |
| position: fixed; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| z-index: 40; | |
| background: hsl(240 10% 4%); | |
| border-top: 1px solid hsl(var(--primary) / 0.2); | |
| display: flex; | |
| padding: 0.5rem 0; | |
| padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px)); | |
| } | |
| } | |
| @media (min-width: 768px) { | |
| .mobile-tab-bar { | |
| display: none ; | |
| } | |
| } | |
| /* Mobile menu dropdown */ | |
| .mobile-menu { | |
| animation: slideDown 0.2s ease-out; | |
| } | |
| @keyframes slideDown { | |
| from { opacity: 0; transform: translateY(-8px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| /* Touch-friendly scrolling */ | |
| @media (max-width: 767px) { | |
| .overflow-y-auto, | |
| .overflow-auto { | |
| -webkit-overflow-scrolling: touch; | |
| } | |
| /* Prevent horizontal overflow on mobile */ | |
| body { | |
| overflow-x: hidden; | |
| } | |
| } | |