/* Design Tokens & Theme Variables */ :root { --primary-color: #008093; /* Primary Ocean Teal */ --primary-hover: #006778; /* Darker Ocean Teal */ --secondary-color: #be123c; /* Crimson Red accent */ --accent-color: #142c48; /* Midnight Navy */ --neutral-dark: #142c48; /* Midnight Navy */ --neutral-light: #f4f6f8; /* Silver/Light Slate */ --glass-bg: rgba(255, 255, 255, 0.7); --glass-border: rgba(255, 255, 255, 0.4); --glass-shadow: 0 8px 32px 0 rgba(0, 128, 147, 0.08); } /* Base Styles & Typography */ body { font-family: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif; background-color: #f1f5f9; color: var(--neutral-dark); scroll-behavior: smooth; } /* Custom Scrollbars */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: #f1f5f9; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* Modern Glassmorphic Utilities */ .glass-panel { background: var(--glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); } .glass-panel-dark { background: rgba(15, 23, 42, 0.75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); } /* Card Hover Animations */ .hover-card { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .hover-card:hover { transform: translateY(-4px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } /* Accent Gradients */ .gradient-text { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .gradient-btn { background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); transition: all 0.3s ease; } .gradient-btn:hover { opacity: 0.95; transform: translateY(-1px); } /* Animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes pulse-soft { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } .animate-pulse-soft { animation: pulse-soft 2s infinite ease-in-out; } /* Skeleton Loading Helpers */ .skeleton { background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%); background-size: 200% 100%; animation: loading-skeleton 1.5s infinite; } @keyframes loading-skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Navigation Link Underline Animation */ .nav-link { position: relative; } .nav-link::after { content: ''; position: absolute; width: 100%; transform: scaleX(0); height: 2px; bottom: -4px; left: 0; background-color: var(--primary-color); transform-origin: bottom right; transition: transform 0.25s ease-out; } .nav-link:hover::after { transform: scaleX(1); transform-origin: bottom left; } /* Vertical Marquee Animation */ @keyframes marquee-vertical { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } } .animate-marquee-vertical { animation: marquee-vertical 15s linear infinite; } .animate-marquee-vertical:hover { animation-play-state: paused; } /* Horizontal Marquee Animation */ @keyframes marquee-horizontal { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .animate-marquee-horizontal { animation: marquee-horizontal 20s linear infinite; } .animate-marquee-horizontal:hover { animation-play-state: paused; } /* ============================================ DARK MODE OVERRIDES Activated via .dark class on ============================================ */ /* Root dark theme variables */ .dark { --glass-bg: rgba(12, 17, 27, 0.8); --glass-border: rgba(255, 255, 255, 0.06); --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.35); color-scheme: dark; } /* Body & page backgrounds */ .dark body, html.dark body { background-color: #0c111b !important; color: #d1d5db !important; } /* White cards, panels, modals → elevated dark surfaces */ .dark .bg-white, .dark [class*="bg-white"] { background-color: #151c2c !important; } .dark .bg-slate-50, .dark [class*="bg-slate-50"] { background-color: #0e1525 !important; } .dark .bg-slate-100, .dark [class*="bg-slate-100"] { background-color: #1a2236 !important; } /* Text overrides — softer whites, better readability */ .dark .text-slate-900, .dark .text-slate-800 { color: #e5e7eb !important; } .dark .text-slate-700 { color: #b8bfca !important; } .dark .text-slate-600 { color: #8b95a5 !important; } .dark .text-slate-500 { color: #6b7688 !important; } .dark .text-slate-400 { color: #5a6475 !important; } /* Border overrides — subtle warm edges */ .dark .border-slate-200, .dark .border-slate-100 { border-color: #1e2740 !important; } .dark .border-slate-300 { border-color: #2a3550 !important; } /* Navbar dark treatment */ .dark nav.bg-white\/80, .dark nav[class*="bg-white"] { background-color: rgba(12, 17, 27, 0.88) !important; border-bottom-color: #1e2740 !important; } .dark .backdrop-blur-md { backdrop-filter: blur(14px) !important; } /* Dropdown panels */ .dark [class*="bg-white/90"] { background-color: rgba(21, 28, 44, 0.96) !important; } .dark .hover\:bg-slate-50:hover, .dark .hover\:bg-slate-100:hover { background-color: #1a2236 !important; } /* Input fields */ .dark input, .dark textarea, .dark select { background-color: #111827 !important; border-color: #2a3550 !important; color: #d1d5db !important; } .dark input::placeholder, .dark textarea::placeholder { color: #4b5563 !important; } .dark input:focus, .dark textarea:focus, .dark select:focus { border-color: #0a9aad !important; box-shadow: 0 0 0 2px rgba(10, 154, 173, 0.15) !important; } /* Disabled inputs */ .dark input:disabled, .dark input.cursor-not-allowed { background-color: #0e1525 !important; color: #4b5563 !important; } /* Sidebar overrides */ .dark .bg-slate-900 { background-color: #090e18 !important; } /* Shadow overrides — deeper for dark surfaces */ .dark .shadow-sm, .dark .shadow-md, .dark .shadow-lg, .dark .shadow-xl, .dark .shadow-2xl { --tw-shadow-color: rgba(0, 0, 0, 0.4) !important; } .dark .hover-card:hover { box-shadow: 0 20px 30px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2) !important; } /* Skeleton loading dark */ .dark .skeleton { background: linear-gradient(90deg, #1a2236 25%, #2a3550 50%, #1a2236 75%) !important; background-size: 200% 100%; } /* Scrollbar dark */ .dark ::-webkit-scrollbar-track { background: #0e1525; } .dark ::-webkit-scrollbar-thumb { background: #2a3550; } .dark ::-webkit-scrollbar-thumb:hover { background: #3b4a65; } /* Badge / pill background overrides — richer tints */ .dark .bg-indigo-50 { background-color: rgba(10, 154, 173, 0.12) !important; } .dark .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.10) !important; } .dark .bg-amber-50 { background-color: rgba(245, 158, 11, 0.10) !important; } .dark .bg-rose-50 { background-color: rgba(225, 29, 72, 0.10) !important; } .dark .bg-red-50 { background-color: rgba(225, 29, 72, 0.10) !important; } .dark .border-emerald-200 { border-color: rgba(16, 185, 129, 0.20) !important; } .dark .border-indigo-200 { border-color: rgba(10, 154, 173, 0.20) !important; } /* Hero & accent sections — slightly adjusted for dark contrast */ .dark .bg-indigo-600 { background-color: #005d6d !important; } .dark .bg-indigo-100 { background-color: rgba(10, 154, 173, 0.15) !important; } /* Theme toggle button active state */ .dark .theme-option.active { background-color: #1a2236; color: #e5e7eb; } /* Smooth color transitions for theme switching */ body, nav, .bg-white, input, textarea, select { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; }