/* globals.css — Material Design 3 × Tailwind CSS Component Layer * ───────────────────────────────────────────────────────────────── * Design token reference → assets/js/tailwind.config.js * Fonts loaded via in page : * Roboto 300,400,500,700 + Roboto Mono 400,500 * ───────────────────────────────────────────────────────────────── */ /* Import the variables CSS file */ @import "variables.css"; :root { color-scheme: light; --background: 0 0% 100%; --foreground: 240 10% 3.9%; --card: 0 0% 100%; --card-foreground: 240 10% 3.9%; --popover: 0 0% 100%; --popover-foreground: 240 10% 3.9%; --primary: 262 80% 57%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 186 94% 53%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --success: 142 76% 36%; --success-foreground: 210 40% 98%; --warning: 38 92% 50%; --warning-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 270 91% 65%; --radius: 0.5rem; /* Tailwind gradient fallback (prevents missing --tw-gradient-stops) */ --tw-gradient-from: #7c3aed; --tw-gradient-to: #a855f7; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0)); } /* Dark mode variable overrides */ html.dark { color-scheme: dark; --background: 222 47% 5%; --foreground: 210 40% 98%; --card: 222 47% 8%; --card-foreground: 210 40% 98%; --popover: 222 47% 8%; --popover-foreground: 210 40% 98%; --primary: 262 80% 57%; --primary-foreground: 210 40% 98%; --secondary: 217 33% 17%; --secondary-foreground: 210 40% 98%; --muted: 217 33% 17%; --muted-foreground: 215 20% 65%; --accent: 186 94% 53%; --accent-foreground: 210 40% 98%; --destructive: 0 63% 31%; --destructive-foreground: 0 0% 98%; --success: 142 71% 45%; --success-foreground: 0 0% 98%; --warning: 38 92% 50%; --warning-foreground: 0 0% 98%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; --ring: 240 4.9% 83.9%; --chart-1: 220 70% 50%; --chart-2: 160 60% 45%; --chart-3: 30 80% 55%; --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; } /* * { border-color: hsl(var(--border)); } */ html, body { scroll-behavior: smooth; background-color: hsl(var(--background)); color: hsl(var(--foreground)); } /* Safe Area Utilities */ .pb-safe { padding-bottom: env(safe-area-inset-bottom, 0); } .pb-safe-or-2 { padding-bottom: max(env(safe-area-inset-bottom, 0), 0.5rem); } .h-screen-safe { height: calc( 100vh - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0) ); } .min-h-screen-safe { min-height: calc( 100vh - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0) ); } /* Mobile Viewport */ .h-screen-mobile { height: calc(var(--vh, 1vh) * 100); } .min-h-screen-mobile { min-height: calc(var(--vh, 1vh) * 100); } /* Animations */ @keyframes slideDownAndFade { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideUpAndFade { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } } /* Professional Trading Platform Styles */ body { min-height: 100vh; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; background-color: #f1f5f9; background-image: radial-gradient( circle at 10% 10%, rgba(168, 85, 247, 0.08), transparent 38% ), radial-gradient( circle at 90% 0%, rgba(34, 211, 238, 0.06), transparent 32% ), radial-gradient( circle at 55% 100%, rgba(34, 197, 94, 0.05), transparent 35% ), linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%); background-attachment: fixed; color: #1e293b; transition: background 0.3s ease, color 0.3s ease; /* padding-top: var(--member-header-offset, 64px); padding-bottom: var(--member-bottom-nav-offset, 0px); */ } .dark body, html.dark body { background-color: #0b0d14; background-image: radial-gradient( circle at 10% 10%, rgba(168, 85, 247, 0.14), transparent 38% ), radial-gradient(circle at 90% 0%, rgba(34, 211, 238, 0.1), transparent 32%), radial-gradient( circle at 55% 100%, rgba(34, 197, 94, 0.07), transparent 35% ), linear-gradient(135deg, #0b0d14 0%, #12141f 100%); background-attachment: fixed; color: #e2e8f0; } /* Home9 style layer (global member pages) */ .gradient-text { background: linear-gradient(90deg, #a855f7 0%, #22d3ee 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .btn-gradient { background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%); transition: all 0.3s ease; } .btn-gradient:hover { transform: translateY(-2px); box-shadow: 0 10px 40px -10px rgba(168, 85, 247, 0.5); } /* Primary buttons — color respects theme */ button, .btn, .btn-primary, a.btn-primary { /* background: linear-gradient(135deg, #7c3aed, #a855f7); */ /* border: 1px solid rgba(168, 85, 247, 0.3); */ /* color: #ffffff; — removed: let Tailwind text-* utilities control this */ /* box-shadow: 0 4px 24px rgba(168, 85, 247, 0.35); */ transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } /* Gradient buttons always have white text (dark bg) */ .btn-gradient, .btn-gradient-primary { color: #ffffff; } /* button:hover, input[type="submit"]:hover, input[type="button"]:hover, .btn:hover, .btn-primary:hover, a.btn-primary:hover { box-shadow: 0 6px 28px rgba(168, 85, 247, 0.45); } */ button:active, input[type="submit"]:active, input[type="button"]:active, .btn:active, .btn-primary:active, a.btn-primary:active { transform: scale(0.96); } .btn-outline { border: 1px solid rgba(255, 255, 255, 0.2); transition: all 0.3s ease; } .btn-outline:hover { border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.05); } .surface-card { background: linear-gradient( 180deg, rgba(21, 24, 35, 0.96) 0%, rgba(18, 20, 28, 0.98) 100% ); border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(8px); } html:not(.dark) .surface-card { background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); border: 1px solid rgba(148, 163, 184, 0.2); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06); } /* Card gradient — dual-theme */ .card-gradient { background: linear-gradient(145deg, rgba(30, 41, 59, 0.8), rgba(51, 65, 85, 0.6)); border: 1px solid rgba(148, 163, 184, 0.1); backdrop-filter: blur(8px); } html:not(.dark) .card-gradient { background: linear-gradient(145deg, #ffffff, #f8fafc); border: 1px solid rgba(148, 163, 184, 0.25); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06); } .hover-lift { transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .hover-lift:hover { transform: translateY(-4px); border-color: rgba(168, 85, 247, 0.35); box-shadow: 0 16px 40px -20px rgba(168, 85, 247, 0.45); } html:not(.dark) .hover-lift:hover { border-color: rgba(168, 85, 247, 0.25); box-shadow: 0 16px 40px -20px rgba(168, 85, 247, 0.2); } .stat-card, .trust-strip, .step-card { background: linear-gradient( 180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01) ); border: 1px solid rgba(255, 255, 255, 0.08); } html:not(.dark) .stat-card, html:not(.dark) .trust-strip, html:not(.dark) .step-card { background: linear-gradient(180deg, #ffffff, #f8fafc); border: 1px solid rgba(148, 163, 184, 0.2); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); } .section-title-gradient { background: linear-gradient(90deg, #ffffff 0%, #cbd5e1 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } html:not(.dark) .section-title-gradient { background: linear-gradient(90deg, #1e293b 0%, #475569 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .footer-link { color: #9ca3af; transition: color 0.2s ease; } .footer-link:hover { color: #ffffff; } html:not(.dark) .footer-link { color: #64748b; } html:not(.dark) .footer-link:hover { color: #1e293b; } .footer-social { border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.02); transition: all 0.2s ease; } .footer-social:hover { border-color: rgba(168, 85, 247, 0.35); background: rgba(168, 85, 247, 0.12); transform: translateY(-2px); } html:not(.dark) .footer-social { border: 1px solid rgba(148, 163, 184, 0.25); background: #f8fafc; } html:not(.dark) .footer-social:hover { border-color: rgba(168, 85, 247, 0.35); background: rgba(168, 85, 247, 0.08); } /* Light mode: public page text-gray-400 → darker for readability */ html:not(.dark) .text-gray-400 { color: #64748b !important; } /* Light mode: public page border-white/5 and border-white/10 → visible borders */ html:not(.dark) .border-white\/5 { border-color: rgba(148, 163, 184, 0.2) !important; } html:not(.dark) .border-white\/10 { border-color: rgba(148, 163, 184, 0.25) !important; } html:not(.dark) .border-white\/20 { border-color: rgba(148, 163, 184, 0.35) !important; } html:not(.dark) .hover\:border-white\/40:hover { border-color: rgba(148, 163, 184, 0.55) !important; } html:not(.dark) .border-purple-500\/30 { border-color: rgba(168, 85, 247, 0.35) !important; } /* Light mode: public nav */ html:not(.dark) nav .text-gray-300 { color: #475569 !important; } html:not(.dark) nav .text-gray-300:hover { color: #1e293b !important; } /* Light mode: bg-black/30 in footer → light gray */ html:not(.dark) .bg-black\/30 { background-color: rgba(241, 245, 249, 0.95) !important; } /* Light mode: bg-purple-500/20 blur glow → more subtle */ html:not(.dark) .bg-purple-500\/20 { background-color: rgba(168, 85, 247, 0.08) !important; } /* Light mode: purple/cyan badge text → slightly darker for contrast */ html:not(.dark) .text-purple-300 { color: #7c3aed !important; } html:not(.dark) .text-purple-400 { color: #7c3aed !important; } /* Layout utilities */ .page-container { width: 100%; max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; } .text-soft { color: rgb(156 163 175); } html:not(.dark) .text-soft { color: #64748b; } /* Card Styles */ .trading-card { background: linear-gradient(145deg, #ffffff, #f8fafc); border: 1px solid rgba(226, 232, 240, 0.8); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); backdrop-filter: blur(10px); border-radius: 0.75rem; padding: 1rem; transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .dark .trading-card { background: linear-gradient(145deg, #1e293b, #334155); border: 1px solid rgba(71, 85, 105, 0.3); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); } /* Input Styles */ .input-professional { background: #ffffff; border: 1px solid rgba(203, 213, 225, 0.8); color: #1e293b; padding: 0.75rem; border-radius: 0.5rem; transition: all 0.3s ease; } .dark .input-professional { background: rgba(15, 23, 42, 0.8); border: 1px solid rgba(71, 85, 105, 0.5); color: #e2e8f0; } .input-professional:focus { border-color: #a855f7; box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1); outline: none; } .dark .input-professional:focus { background: rgba(15, 23, 42, 0.95); } /* Button Styles */ .btn-professional { background: linear-gradient(135deg, #7c3aed, #a855f7); color: white; padding: 0.75rem 1.5rem; border-radius: 0.5rem; border: none; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(168, 85, 247, 0.3); } .btn-professional:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4); } /* Hidden Scrollbar — scrollable but no visible scrollbar */ * { scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge */ } ::-webkit-scrollbar { display: none; /* Chrome/Safari/Opera */ } /* Form Professional Button */ .form-professional { background: #f1f5f9; border: 1px solid rgba(203, 213, 225, 0.5); color: #475569; transition: all 0.3s ease; } .dark .form-professional { background: rgba(30, 41, 59, 0.8); border: 1px solid rgba(71, 85, 105, 0.5); color: #e2e8f0; } /* Form Input Dark - theme-aware */ .form-input-dark { background: #ffffff; border: 1px solid rgba(203, 213, 225, 0.8); color: #1e293b; transition: all 0.3s ease; } .dark .form-input-dark { background: rgba(15, 23, 42, 0.8); border: 1px solid rgba(71, 85, 105, 0.5); color: #e2e8f0; } .form-input-dark:focus { border-color: #a855f7; box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.15); outline: none; } /* Light theme text overrides (used by public pages with toggleTheme) */ html:not(.dark) .text-white { color: #1e293b !important; } html:not(.dark) .text-slate-400 { color: #64748b !important; } html:not(.dark) .text-slate-500 { color: #64748b !important; } /* Responsive Design */ @media (max-width: 768px) { .trading-card { margin: 0.5rem; border-radius: 1rem; } .page-section { padding-top: 3rem; padding-bottom: 3rem; } .page-container { padding-left: 0.875rem; padding-right: 0.875rem; } .footer-social { width: 2.25rem; height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 0.625rem; } } /* Legacy hardcoded dark-style harmonizer (light mode only) */ html:not(.dark) [class*="bg-[#0b0d14]"], html:not(.dark) [class*="bg-[#151823]"], html:not(.dark) [class*="bg-[#12141c]"], html:not(.dark) [class*="bg-[#1a1f2e]"] { background-color: #ffffff !important; } html:not(.dark) [class*="border-[#1a1f2e]"], html:not(.dark) [class*="border-[#2a2f3e]"], html:not(.dark) [class*="border-zinc-700"] { border-color: #dbe3ee !important; } html:not(.dark) [class*="text-zinc-300"], html:not(.dark) [class*="text-zinc-400"], html:not(.dark) [class*="text-zinc-500"] { color: #475569 !important; } html:not(.dark) [class*="hover:bg-[#1a1f2e]"]:hover, html:not(.dark) [class*="hover:bg-[#1e2433]"]:hover, html:not(.dark) [class*="hover:bg-zinc-700"]:hover { background-color: #f1f5f9 !important; } /* ===================================================== AUTH PAGE SHARED COMPONENTS Shared by login, register, forgot-password pages ===================================================== */ /* Page background (root-level auth pages) */ .auth-bg { background-color: #0b0d14; background-image: radial-gradient( circle at 10% 10%, rgba(168, 85, 247, 0.14), transparent 38% ), radial-gradient(circle at 90% 0%, rgba(34, 211, 238, 0.1), transparent 32%), radial-gradient( circle at 55% 100%, rgba(34, 197, 94, 0.07), transparent 35% ); background-attachment: fixed; } html:not(.dark) .auth-bg { background-color: #f1f5f9; background-image: radial-gradient( circle at 10% 10%, rgba(168, 85, 247, 0.06), transparent 38% ), radial-gradient( circle at 90% 0%, rgba(34, 211, 238, 0.04), transparent 32% ), radial-gradient( circle at 55% 100%, rgba(34, 197, 94, 0.03), transparent 35% ); } /* Glassmorphism card – auth pages */ .card-glass { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(226, 232, 240, 0.5); } .dark .card-glass { background: rgba(30, 41, 59, 0.8); border: 1px solid rgba(255, 255, 255, 0.1); } /* Auth input */ .input-dark { background: #f8fafc; border: 1px solid rgba(203, 213, 225, 0.8); color: #1e293b; transition: border-color 0.2s, box-shadow 0.2s; } .dark .input-dark { background: rgba(15, 23, 42, 0.8); border: 1px solid rgba(255, 255, 255, 0.1); color: #ffffff; } /* ===================================================== MEMBER PAGE STYLES (iHarvest) Used by dashboard, wallet, trading, profile pages ===================================================== */ /* Ion icon sizing */ ion-icon { font-size: 24px; } /* Hide TradingView ticker tape branding */ .tradingview-widget-copyright { display: none !important; } tv-ticker-tape::part(attribution), tv-ticker-tape .tv-ticker-tape__attribution { display: none !important; } /* Animations - member */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fadeIn 0.2s ease-out; } @keyframes slideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } } .sidebar-enter { animation: slideIn 0.3s ease-out; } @keyframes dropdownEnter { from { opacity: 0; transform: translateY(-8px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .dropdown-enter { animation: dropdownEnter 0.2s ease-out; } /* iHarvest Card */ .ih-card { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 1rem; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); backdrop-filter: blur(12px); } html:not(.dark) .ih-card { background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); } @media (max-width: 639px) { .ih-card-edge { border-radius: 0; border-left: 0; border-right: 0; margin-left: -1rem; margin-right: -1rem; } } /* iHarvest Buttons */ .ih-btn-blue { background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%); color: #fff; font-weight: 600; border-radius: 0.75rem; transition: all 0.2s ease; } .ih-btn-blue:hover { background: linear-gradient(135deg, #6d28d9 0%, #9333ea 100%); transform: translateY(-1px); box-shadow: 0 4px 20px rgba(168, 85, 247, 0.4); } .ih-btn-outline { border: 1.5px solid #a855f7; color: #a855f7; font-weight: 600; border-radius: 0.75rem; background: transparent; transition: all 0.2s ease; } .ih-btn-outline:hover { background: rgba(168, 85, 247, 0.1); } /* iHarvest Badges */ .ih-badge-green { background: rgba(34, 197, 94, 0.15); color: #22C55E; border: 1px solid rgba(34, 197, 94, 0.2); } .ih-badge-red { background: rgba(239, 68, 68, 0.15); color: #EF4444; border: 1px solid rgba(239, 68, 68, 0.2); } /* iHarvest Tabs */ .ih-tab-active { background: linear-gradient(135deg, #7c3aed, #a855f7); color: #fff; } .ih-tab { background: rgba(255, 255, 255, 0.06); color: #9CA3AF; transition: all 0.2s ease; } .ih-tab:hover { background: rgba(255, 255, 255, 0.1); color: #fff; } /* Coin row */ .ih-coin-row { transition: all 0.15s ease; border-radius: 0; padding: 0.875rem 1rem; -webkit-tap-highlight-color: transparent; } .ih-coin-row:active { background: rgba(255, 255, 255, 0.06); } /* Horizontal scroll helper */ .ih-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Quick action - mobile app style */ .ih-quick-action { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 0.875rem 0.25rem; border-radius: 1rem; transition: all 0.15s ease; cursor: pointer; -webkit-tap-highlight-color: transparent; } .ih-quick-action:active { transform: scale(0.92); opacity: 0.8; } .ih-quick-action .ih-icon { width: 3rem; height: 3rem; border-radius: 0.875rem; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; transition: all 0.15s ease; } /* TradingView widget */ .tradingview-widget-container { max-width: 100%; overflow: hidden; border-radius: 12px; } /* Language switcher */ .ih-lang-menu { position: absolute; right: 0; top: calc(100% + 0.5rem); min-width: 200px; background: #151823; border: 1px solid rgba(168, 85, 247, 0.15); border-radius: 0.75rem; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); z-index: 1000; display: none; } html:not(.dark) .ih-lang-menu { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12); } .ih-lang-menu.show { display: block; } .ih-lang-option { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; color: #9CA3AF; text-decoration: none; transition: all 0.2s ease; cursor: pointer; font-size: 0.875rem; } .ih-lang-option:hover { background: rgba(168, 85, 247, 0.1); color: #fff; } .ih-lang-option.active { background: rgba(168, 85, 247, 0.15); color: #a855f7; font-weight: 600; } /* Compatibility classes (used by member pages) */ .market-card { background: linear-gradient(180deg, rgb(21 24 35 / 50%) 0%, rgb(18 20 28 / 50%) 100%); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 1rem; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); backdrop-filter: blur(12px); } html:not(.dark) .market-card { background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); border: 1px solid rgba(148, 163, 184, 0.2); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05); } .price-positive { color: #10b981; background: rgba(16, 185, 129, 0.15); } .price-negative { color: #ef4444; background: rgba(239, 68, 68, 0.1); } .input-dark:focus { border-color: #a855f7; box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.2); outline: none; } .input-dark::placeholder { color: #94a3b8; } .dark .input-dark::placeholder { color: #64748b; } /* Primary gradient button */ .btn-gradient-primary { background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%); color: #ffffff; transition: transform 0.3s, box-shadow 0.3s; } .btn-gradient-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(168, 85, 247, 0.4); } /* Auth select */ .select-dark { background: #f8fafc; border: 1px solid rgba(203, 213, 225, 0.8); color: #1e293b; transition: border-color 0.2s, box-shadow 0.2s; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 9L1 4h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; } .dark .select-dark { background-color: rgba(15, 23, 42, 0.8); border: 1px solid rgba(255, 255, 255, 0.1); color: #ffffff; } .select-dark:focus { border-color: #a855f7; box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.2); outline: none; } /* Loader logo pulse */ @keyframes pulseLogo { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.8; } } .animate-pulse-logo { animation: pulseLogo 1.5s ease-in-out infinite; } /* Dot-pattern background */ .bg-pattern { background-image: 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'%3E%3Cg fill='%23a855f7' 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"); } /* ===================================================== Homepage & Landing Page Components =====================================================*/ /* Hero gradient text (3-color) */ .hero-gradient { background: linear-gradient(135deg, #a855f7 0%, #22d3ee 50%, #10b981 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Bottom menu active state */ .bottom-menu-item.active { color: #a855f7; } .bottom-menu-item.active .action-button-center { background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%); } /* Gradient button variants */ .btn-gradient-success { background: linear-gradient(135deg, #10b981 0%, #059669 100%); } .btn-gradient-danger { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); } /* Safe area padding */ .safe-area-top { padding-top: max(env(safe-area-inset-top), 0px); } /* Price badge variants */ .price-blue { color: #3b82f6; background: rgba(59, 130, 246, 0.1); } .price-yellow { color: #facc15; background: rgba(250, 204, 21, 0.1); } /* Market stats bar */ .market-stats { background: rgba(15, 23, 42, 0.9); border: 1px solid rgba(71, 85, 105, 0.2); } html:not(.dark) .market-stats { background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(148, 163, 184, 0.2); } /* Mobile navigation */ .mobile-nav { background: rgba(15, 23, 42, 0.95); backdrop-filter: blur(20px); border-top: 1px solid rgba(71, 85, 105, 0.2); } html:not(.dark) .mobile-nav { background: rgba(255, 255, 255, 0.95); border-top: 1px solid rgba(148, 163, 184, 0.2); } /* Loading shimmer */ .loading-shimmer { background: linear-gradient(90deg, rgba(30, 41, 59, 0.5) 25%, rgba(51, 65, 85, 0.8) 50%, rgba(30, 41, 59, 0.5) 75%); background-size: 200% 100%; animation: shimmer 2s infinite; } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* Text glow effects */ .text-glow { text-shadow: 0 0 10px rgba(168, 85, 247, 0.5); } .text-success-glow { text-shadow: 0 0 10px rgba(16, 185, 129, 0.5); } .text-danger-glow { text-shadow: 0 0 10px rgba(239, 68, 68, 0.5); } /* Modal/Sidebar backdrop */ .modal-backdrop { background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); } /* Trading buttons */ .btn-sell { background: linear-gradient(90deg, #f87171 0%, #dc2626 100%); } .btn-sell:hover { background: linear-gradient(90deg, #dc2626 0%, #b91c1c 100%); transform: translateY(-2px); } .btn-buy { background: linear-gradient(90deg, #34d399 0%, #059669 100%); } .btn-buy:hover { background: linear-gradient(90deg, #059669 0%, #065f46 100%); transform: translateY(-2px); } /* Slide up animation for modals */ .animate-slide-up { animation: slideUp 0.3s ease-out; } @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } /* Navbar blur */ .navbar-blur { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } /* ── Public Navigation — scrolled state ── */ #publicNav { transition: all 0.3s ease; } /* ── Sidebar & Language Panel ── */ .sidebar-scroll::-webkit-scrollbar { width: 4px; } .sidebar-scroll::-webkit-scrollbar-track { background: transparent; } .sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(113, 113, 122, 0.3); border-radius: 9999px; } .sidebar-scroll::-webkit-scrollbar-thumb:hover { background: rgba(113, 113, 122, 0.5); } .sidebar-scroll { scrollbar-width: thin; scrollbar-color: rgba(113,113,122,0.3) transparent; } #mobileMenu { box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15); } html.dark #mobileMenu { box-shadow: 4px 0 32px rgba(0, 0, 0, 0.5); } #langSidebar, #idxLangSidebar { box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15); } html.dark #langSidebar, html.dark #idxLangSidebar { box-shadow: -4px 0 32px rgba(0, 0, 0, 0.5); } /* Notification badge animation */ .badge-bounce { animation: badgeBounce 0.5s ease-out; } @keyframes badgeBounce { 0%, 20% { transform: scale(0); } 50% { transform: scale(1.2); } 80% { transform: scale(0.9); } 100% { transform: scale(1); } } /* Hover glow */ .hover-glow:hover { box-shadow: 0 0 20px rgba(168, 85, 247, 0.3); } /* Trading simulator */ .trading-sim-chart { background: #0b0d14; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.12); border: 1px solid rgba(168, 85, 247, 0.1); } .sim-btn-sell, .sim-btn-buy { min-width: 90px; padding: 0.75rem 1.5rem; border-radius: 8px; font-size: 1.25rem; font-weight: bold; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.10); border: none; cursor: pointer; transition: all 0.2s; } .sim-btn-sell { background: linear-gradient(90deg, #f87171 0%, #dc2626 100%); color: #fff; } .sim-btn-sell:hover { background: linear-gradient(90deg, #dc2626 0%, #b91c1c 100%); transform: translateY(-2px) scale(1.03); } .sim-btn-buy { background: linear-gradient(90deg, #34d399 0%, #059669 100%); color: #fff; } .sim-btn-buy:hover { background: linear-gradient(90deg, #059669 0%, #065f46 100%); } @media (max-width: 640px) { #sim-trade-form { flex-direction: column !important; align-items: center !important; text-align: center; } #sim-trade-form > div { width: 100%; align-items: center; } .sim-btn-sell, .sim-btn-buy { width: 100%; font-size: 1.1rem; padding: 0.75rem; } .navbar-mobile { padding: 0.75rem 1rem; } } /* Enhanced stat-card (detailed version) */ .stat-card { background: linear-gradient(180deg, rgba(21, 24, 35, 0.95) 0%, rgba(18, 20, 28, 0.98) 100%); border: 1px solid rgba(168, 85, 247, 0.15); backdrop-filter: blur(12px); position: relative; overflow: hidden; transition: all 0.3s ease; } html:not(.dark) .stat-card { background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); border: 1px solid rgba(148, 163, 184, 0.2); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06); } html:not(.dark) .stat-card:hover { box-shadow: 0 16px 56px rgba(168, 85, 247, 0.1); } .stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, #a855f7, #22d3ee); opacity: 0; transition: opacity 0.3s ease; } .stat-card:hover::before { opacity: 1; } .stat-card:hover { border-color: rgba(168, 85, 247, 0.35); transform: translateY(-4px); box-shadow: 0 16px 56px rgba(168, 85, 247, 0.2); } /* Balance card */ .balance-card { background: linear-gradient(135deg, rgba(168, 85, 247, 0.1) 0%, rgba(34, 211, 238, 0.05) 100%); border: 1px solid rgba(168, 85, 247, 0.2); backdrop-filter: blur(16px); position: relative; overflow: hidden; } html:not(.dark) .balance-card { background: linear-gradient(135deg, rgba(168, 85, 247, 0.06) 0%, rgba(34, 211, 238, 0.03) 100%); border: 1px solid rgba(168, 85, 247, 0.15); } .balance-card::after { content: ''; position: absolute; bottom: -50%; right: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(168, 85, 247, 0.1) 0%, transparent 70%); animation: pulse-glow 3s infinite; } @keyframes pulse-glow { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } } /* Action buttons */ .action-btn { background: linear-gradient(180deg, rgba(30, 41, 59, 0.9) 0%, rgba(51, 65, 85, 0.7) 100%); border: 1px solid rgba(148, 163, 184, 0.15); backdrop-filter: blur(8px); transition: all 0.3s ease; } .action-btn:hover { background: linear-gradient(180deg, rgba(168, 85, 247, 0.2) 0%, rgba(34, 211, 238, 0.15) 100%); border-color: rgba(168, 85, 247, 0.4); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(168, 85, 247, 0.25); } html:not(.dark) .action-btn { background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%); border: 1px solid rgba(148, 163, 184, 0.25); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); } html:not(.dark) .action-btn:hover { background: linear-gradient(180deg, rgba(168, 85, 247, 0.08) 0%, rgba(34, 211, 238, 0.06) 100%); box-shadow: 0 12px 32px rgba(168, 85, 247, 0.12); } /* Crypto icon gradient */ .crypto-icon-gradient { background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%); } /* Section title with underline */ .section-title { position: relative; display: inline-block; } .section-title::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 60%; height: 3px; background: linear-gradient(90deg, #a855f7, #22d3ee); border-radius: 2px; } /* Investment card */ .investment-card { background: linear-gradient(180deg, rgba(21, 24, 35, 0.95) 0%, rgba(18, 20, 28, 0.98) 100%); border: 1px solid rgba(148, 163, 184, 0.1); backdrop-filter: blur(12px); position: relative; overflow: hidden; transition: all 0.3s ease; } html:not(.dark) .investment-card { background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); border: 1px solid rgba(148, 163, 184, 0.2); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06); } html:not(.dark) .investment-card:hover { background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%); } .investment-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, #a855f7, #22d3ee); opacity: 0; transition: opacity 0.3s ease; } .investment-card:hover::before { opacity: 1; } .investment-card:hover { background: linear-gradient(180deg, rgba(21, 24, 35, 1) 0%, rgba(18, 20, 28, 1) 100%); border-color: rgba(168, 85, 247, 0.3); transform: translateX(4px); } /* Noise texture layer */ .noise-layer { position: absolute; inset: 0; pointer-events: none; opacity: 0.08; background-image: radial-gradient(rgba(255, 255, 255, 0.32) 0.4px, transparent 0.4px); background-size: 3px 3px; mix-blend-mode: overlay; } html:not(.dark) .noise-layer { opacity: 0.03; background-image: radial-gradient(rgba(0, 0, 0, 0.15) 0.4px, transparent 0.4px); } /* Bicrypto-inspired card */ .bicro-card { background: linear-gradient(165deg, rgba(18, 21, 35, 0.95) 0%, rgba(10, 12, 20, 0.96) 100%); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 24px 54px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.03); backdrop-filter: blur(14px); } html:not(.dark) .bicro-card { background: linear-gradient(165deg, #ffffff 0%, #f8fafc 100%); border: 1px solid rgba(148, 163, 184, 0.25); box-shadow: 0 24px 54px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8); } /* Bicrypto-inspired panel */ .bicro-panel { background: linear-gradient(165deg, rgba(16, 19, 32, 0.92) 0%, rgba(9, 11, 19, 0.95) 100%); border: 1px solid rgba(148, 163, 184, 0.16); border-radius: 1rem; } html:not(.dark) .bicro-panel { background: linear-gradient(165deg, #f8fafc 0%, #f1f5f9 100%); border: 1px solid rgba(148, 163, 184, 0.2); } /* Feature tile */ .feature-tile { background: linear-gradient(165deg, rgba(17, 21, 37, 0.84) 0%, rgba(11, 13, 22, 0.95) 100%); border: 1px solid rgba(168, 85, 247, 0.13); transition: all 0.25s ease; } html:not(.dark) .feature-tile { background: linear-gradient(165deg, #ffffff 0%, #f8fafc 100%); border: 1px solid rgba(148, 163, 184, 0.2); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); } .feature-tile:hover { border-color: rgba(34, 211, 238, 0.38); transform: translateY(-3px); box-shadow: 0 16px 35px rgba(7, 12, 34, 0.55); } html:not(.dark) .feature-tile:hover { border-color: rgba(168, 85, 247, 0.3); box-shadow: 0 16px 35px rgba(0, 0, 0, 0.08); } /* Journey card */ .journey-card { position: relative; background: linear-gradient(165deg, rgba(16, 19, 34, 0.92) 0%, rgba(9, 11, 20, 0.98) 100%); border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 1rem; overflow: hidden; } html:not(.dark) .journey-card { background: linear-gradient(165deg, #ffffff 0%, #f8fafc 100%); border: 1px solid rgba(148, 163, 184, 0.2); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06); } .journey-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, rgba(168, 85, 247, 0.75), rgba(34, 211, 238, 0.72)); opacity: 0; transition: opacity 0.25s ease; } .journey-card:hover::before { opacity: 1; } /* Phone mockup */ .fake-phone { width: min(320px, 90vw); border-radius: 2.5rem; background: linear-gradient(180deg, #18152a 0%, #100f1f 100%); border: 1px solid rgba(168, 85, 247, 0.28); box-shadow: 0 30px 70px rgba(13, 11, 30, 0.75); padding: 1rem; } html:not(.dark) .fake-phone { background: linear-gradient(180deg, #1e1b3a 0%, #18152e 100%); border: 1px solid rgba(168, 85, 247, 0.35); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.2); } .fake-phone-screen { border-radius: 2rem; background: linear-gradient(180deg, rgba(108, 67, 255, 0.24) 0%, rgba(10, 14, 31, 0.98) 75%); border: 1px solid rgba(255, 255, 255, 0.08); min-height: 540px; }