341 lines
8.1 KiB
CSS
341 lines
8.1 KiB
CSS
@import "tailwindcss";
|
|
|
|
/* Use class-based dark mode (html.dark) instead of media query */
|
|
@variant dark (&:where(.dark, .dark *));
|
|
|
|
@theme {
|
|
/* Custom colors */
|
|
--color-nifty-50: #f0f9ff;
|
|
--color-nifty-100: #e0f2fe;
|
|
--color-nifty-200: #bae6fd;
|
|
--color-nifty-300: #7dd3fc;
|
|
--color-nifty-400: #38bdf8;
|
|
--color-nifty-500: #0ea5e9;
|
|
--color-nifty-600: #0284c7;
|
|
--color-nifty-700: #0369a1;
|
|
--color-nifty-800: #075985;
|
|
--color-nifty-900: #0c4a6e;
|
|
|
|
--color-bull-light: #dcfce7;
|
|
--color-bull: #22c55e;
|
|
--color-bull-dark: #15803d;
|
|
|
|
--color-bear-light: #fee2e2;
|
|
--color-bear: #ef4444;
|
|
--color-bear-dark: #b91c1c;
|
|
|
|
--color-hold-light: #fef3c7;
|
|
--color-hold: #f59e0b;
|
|
--color-hold-dark: #b45309;
|
|
|
|
/* Custom fonts */
|
|
--font-sans: 'DM Sans', system-ui, -apple-system, sans-serif;
|
|
--font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
|
|
}
|
|
|
|
@layer base {
|
|
html {
|
|
scroll-behavior: smooth;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
html.dark {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
body {
|
|
@apply font-sans antialiased text-gray-900;
|
|
margin: 0;
|
|
background: linear-gradient(135deg, #f8fafc 0%, #f0f4f8 50%, #e8eef4 100%);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
html.dark body {
|
|
@apply text-gray-100;
|
|
background: linear-gradient(135deg, #0b1120 0%, #0f172a 40%, #131c31 100%);
|
|
}
|
|
|
|
/* Subtle dot grid background pattern */
|
|
body::before {
|
|
content: '';
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-image: radial-gradient(circle at 1px 1px, rgba(148, 163, 184, 0.08) 1px, transparent 0);
|
|
background-size: 32px 32px;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
html.dark body::before {
|
|
background-image: radial-gradient(circle at 1px 1px, rgba(148, 163, 184, 0.04) 1px, transparent 0);
|
|
}
|
|
|
|
#root {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Better default focus styles */
|
|
:focus-visible {
|
|
outline: 2px solid var(--color-nifty-500);
|
|
outline-offset: 2px;
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.card {
|
|
@apply bg-white/80 rounded-xl border border-gray-200/60 overflow-hidden;
|
|
backdrop-filter: blur(12px);
|
|
box-shadow:
|
|
0 1px 2px rgba(0, 0, 0, 0.04),
|
|
0 2px 8px rgba(0, 0, 0, 0.02);
|
|
}
|
|
|
|
html.dark .card {
|
|
@apply border-slate-700/60;
|
|
background: rgba(30, 41, 59, 0.7);
|
|
box-shadow:
|
|
0 1px 2px rgba(0, 0, 0, 0.2),
|
|
0 0 0 1px rgba(148, 163, 184, 0.04);
|
|
}
|
|
|
|
.card-hover {
|
|
@apply bg-white/80 rounded-xl border border-gray-200/60 overflow-hidden;
|
|
backdrop-filter: blur(12px);
|
|
box-shadow:
|
|
0 1px 2px rgba(0, 0, 0, 0.04),
|
|
0 2px 8px rgba(0, 0, 0, 0.02);
|
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.card-hover:hover {
|
|
@apply border-gray-300/80;
|
|
box-shadow:
|
|
0 4px 12px rgba(0, 0, 0, 0.06),
|
|
0 1px 3px rgba(0, 0, 0, 0.04);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.card-hover:focus-within {
|
|
@apply ring-2 ring-nifty-500 ring-offset-1;
|
|
}
|
|
|
|
html.dark .card-hover {
|
|
@apply border-slate-700/60;
|
|
background: rgba(30, 41, 59, 0.7);
|
|
box-shadow:
|
|
0 1px 2px rgba(0, 0, 0, 0.2),
|
|
0 0 0 1px rgba(148, 163, 184, 0.04);
|
|
}
|
|
|
|
html.dark .card-hover:hover {
|
|
@apply border-slate-600/80;
|
|
box-shadow:
|
|
0 4px 16px rgba(0, 0, 0, 0.3),
|
|
0 0 0 1px rgba(148, 163, 184, 0.08);
|
|
}
|
|
|
|
html.dark .card-hover:focus-within {
|
|
@apply ring-offset-slate-900;
|
|
}
|
|
|
|
.btn {
|
|
@apply inline-flex items-center justify-center px-4 py-2 rounded-lg font-medium;
|
|
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.btn-primary {
|
|
@apply inline-flex items-center justify-center px-4 py-2 rounded-lg font-semibold text-white;
|
|
background: linear-gradient(135deg, var(--color-nifty-600), var(--color-nifty-700));
|
|
box-shadow: 0 1px 3px rgba(2, 132, 199, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
|
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: linear-gradient(135deg, var(--color-nifty-700), var(--color-nifty-800));
|
|
box-shadow: 0 2px 8px rgba(2, 132, 199, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
|
transform: translateY(-0.5px);
|
|
}
|
|
|
|
.btn-primary:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
html.dark .btn-primary {
|
|
@apply focus:ring-offset-slate-900;
|
|
}
|
|
|
|
.btn-secondary {
|
|
@apply inline-flex items-center justify-center px-4 py-2 rounded-lg font-medium bg-gray-100 text-gray-700 hover:bg-gray-200;
|
|
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
html.dark .btn-secondary {
|
|
@apply bg-slate-700 text-gray-200 hover:bg-slate-600;
|
|
}
|
|
|
|
.badge {
|
|
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
.badge-buy {
|
|
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-bull-light text-bull-dark;
|
|
}
|
|
|
|
html.dark .badge-buy {
|
|
@apply bg-green-900/30 text-green-400;
|
|
}
|
|
|
|
.badge-sell {
|
|
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-bear-light text-bear-dark;
|
|
}
|
|
|
|
html.dark .badge-sell {
|
|
@apply bg-red-900/30 text-red-400;
|
|
}
|
|
|
|
.badge-hold {
|
|
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-hold-light text-hold-dark;
|
|
}
|
|
|
|
html.dark .badge-hold {
|
|
@apply bg-amber-900/30 text-amber-400;
|
|
}
|
|
|
|
.gradient-text {
|
|
@apply bg-clip-text text-transparent;
|
|
background-image: linear-gradient(135deg, var(--color-nifty-500), var(--color-nifty-700));
|
|
}
|
|
|
|
html.dark .gradient-text {
|
|
background-image: linear-gradient(135deg, var(--color-nifty-400), var(--color-nifty-500));
|
|
}
|
|
|
|
.section-title {
|
|
@apply text-2xl font-display font-bold text-gray-900;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
html.dark .section-title {
|
|
@apply text-gray-100;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.text-balance {
|
|
text-wrap: balance;
|
|
}
|
|
|
|
/* Mobile touch target - minimum 44px for accessibility */
|
|
.touch-target {
|
|
min-height: 44px;
|
|
min-width: 44px;
|
|
}
|
|
|
|
/* Entrance animation */
|
|
.animate-in {
|
|
animation: animate-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
.slide-in-from-top-2 {
|
|
--tw-enter-translate-y: -0.5rem;
|
|
}
|
|
|
|
@keyframes animate-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(var(--tw-enter-translate-y, 0));
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* Staggered fade-in for lists */
|
|
.fade-in-up {
|
|
animation: fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(8px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* Shimmer animation for stocks being analyzed */
|
|
.shimmer-effect {
|
|
background: linear-gradient(90deg, transparent 0%, rgba(59, 130, 246, 0.06) 50%, transparent 100%);
|
|
background-size: 200% 100%;
|
|
animation: shimmer 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% { background-position: 200% 0; }
|
|
100% { background-position: -200% 0; }
|
|
}
|
|
|
|
/* Subtle pulse glow for active elements */
|
|
.pulse-glow {
|
|
animation: pulseGlow 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes pulseGlow {
|
|
0%, 100% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0); }
|
|
50% { box-shadow: 0 0 12px 2px rgba(14, 165, 233, 0.15); }
|
|
}
|
|
|
|
/* Smooth scrollbar styling */
|
|
.scroll-smooth {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
/* Recharts dark mode fix */
|
|
.recharts-wrapper,
|
|
.recharts-surface {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
/* Premium scrollbar */
|
|
.overflow-y-auto::-webkit-scrollbar {
|
|
width: 5px;
|
|
}
|
|
|
|
.overflow-y-auto::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.overflow-y-auto::-webkit-scrollbar-thumb {
|
|
background: rgba(156, 163, 175, 0.4);
|
|
border-radius: 100px;
|
|
}
|
|
|
|
.overflow-y-auto::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(156, 163, 175, 0.6);
|
|
}
|
|
|
|
html.dark .overflow-y-auto::-webkit-scrollbar-thumb {
|
|
background: rgba(71, 85, 105, 0.5);
|
|
}
|
|
|
|
html.dark .overflow-y-auto::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(100, 116, 139, 0.6);
|
|
}
|
|
|
|
/* Number tabular for data alignment */
|
|
.tabular-nums {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
}
|