diff --git a/src/components/home/DailyInsightCard/DailyInsightCard.css b/src/components/home/DailyInsightCard/DailyInsightCard.css index 5145a68..ba5d891 100644 --- a/src/components/home/DailyInsightCard/DailyInsightCard.css +++ b/src/components/home/DailyInsightCard/DailyInsightCard.css @@ -1,17 +1,42 @@ +/* Premium Daily Insight Card */ .daily-insight-card { - background: var(--glass-panel-bg); - backdrop-filter: blur(24px); - border: 1px solid var(--glass-border); + background: rgba(255, 255, 255, 0.7); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border: 1px solid rgba(255, 255, 255, 0.5); border-radius: var(--radius-xl); - padding: 1.25rem; + padding: 1.5rem; margin-bottom: 2rem; - box-shadow: var(--shadow-md); - animation: slideUp 0.5s ease-out; + box-shadow: + 0 10px 30px -5px rgba(245, 158, 11, 0.1), + 0 4px 6px -2px rgba(245, 158, 11, 0.05), + inset 0 0 0 1px rgba(255, 255, 255, 0.6); + animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; - gap: 1rem; + gap: 1.25rem; position: relative; overflow: hidden; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.daily-insight-card:hover { + transform: translateY(-2px); + box-shadow: + 0 20px 40px -5px rgba(245, 158, 11, 0.15), + 0 8px 10px -2px rgba(245, 158, 11, 0.05); +} + +/* AI Glowing Border Effect */ +.daily-insight-card--ai::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3px; + background: linear-gradient(90deg, #f59e0b, #fbbf24, #f59e0b); + opacity: 0.8; } .daily-insight-card--ai::after { @@ -21,8 +46,9 @@ left: 0; right: 0; height: 1px; - background: linear-gradient(90deg, transparent, rgba(var(--color-primary-rgb), 0.5), transparent); - animation: scan 3s infinite linear; + background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.8), transparent); + animation: scan 4s infinite ease-in-out; + filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.5)); } @keyframes scan { @@ -30,6 +56,7 @@ transform: translateX(-100%); } + 50%, 100% { transform: translateX(100%); } @@ -38,88 +65,90 @@ .daily-insight__header { display: flex; align-items: center; - gap: 0.5rem; - color: var(--color-primary); - font-weight: 700; - font-size: 0.9rem; + gap: 0.75rem; + color: #d97706; + /* Amber-600 */ + font-weight: 800; + font-size: 0.85rem; text-transform: uppercase; - letter-spacing: 0.5px; + letter-spacing: 1px; + padding-bottom: 0.75rem; + border-bottom: 1px dashed rgba(245, 158, 11, 0.2); } .daily-insight__content { display: grid; grid-template-columns: 1fr 1px 1fr; - gap: 1rem; - align-items: center; + gap: 2rem; + align-items: flex-start; } .daily-insight__divider { width: 1px; - height: 40px; - background: var(--color-border); + height: 100%; + min-height: 80px; + background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.06), transparent); } .daily-insight__section { display: flex; flex-direction: column; - gap: 0.5rem; + gap: 0.75rem; } .daily-insight__title { - font-size: 0.8rem; + font-size: 0.75rem; color: var(--color-text-secondary); - font-weight: 600; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.05em; + display: flex; + align-items: center; + gap: 0.5rem; +} + +.daily-insight__title::before { + content: ''; + display: block; + width: 6px; + height: 6px; + border-radius: 50%; + background: #fbbf24; } .daily-insight__text { - font-size: 0.95rem; + font-family: 'Outfit', sans-serif; + /* Fallback for numbers, Chinese font handles text */ + font-size: 1rem; color: var(--color-text); - line-height: 1.4; + line-height: 1.6; + letter-spacing: 0.01em; } -.daily-insight__highlight { - font-weight: 700; - color: var(--color-primary); -} - -.daily-insight__highlight--success { - color: var(--color-success); -} - -.daily-insight__highlight--warning { - color: #F59E0B; -} - -.daily-insight__highlight--danger { - color: #EF4444; -} - -@media (max-width: 640px) { +@media (max-width: 768px) { .daily-insight__content { grid-template-columns: 1fr; grid-template-rows: auto auto auto; - gap: 1rem; + gap: 1.5rem; } .daily-insight__divider { width: 100%; height: 1px; + min-height: 1px; + background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.06), transparent); } } -.daily-insight-card--ai { - border: 1px solid rgba(var(--color-primary-rgb), 0.3); - background: linear-gradient(145deg, rgba(var(--color-primary-rgb), 0.05), var(--glass-panel-bg)); -} - .daily-insight__loading-badge { font-size: 0.7rem; - color: var(--color-text-secondary); - background: rgba(0, 0, 0, 0.05); - padding: 2px 6px; - border-radius: 4px; + color: #d97706; + background: rgba(251, 191, 36, 0.1); + padding: 2px 8px; + border-radius: 12px; margin-left: auto; - animation: pulse 1.5s infinite; + font-weight: 600; + animation: pulse 2s infinite ease-in-out; } @keyframes pulse { @@ -135,7 +164,7 @@ } .animate-fade-in { - animation: fadeIn 0.5s ease; + animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .section-header-row { @@ -146,26 +175,30 @@ .week-diff-badge { font-size: 0.7rem; - padding: 1px 6px; - border-radius: 4px; - font-weight: 600; + padding: 2px 8px; + border-radius: 12px; + font-weight: 700; + letter-spacing: -0.01em; } .week-diff-badge.green { - background: rgba(16, 185, 129, 0.1); - color: #10B981; + background: rgba(16, 185, 129, 0.15); + color: #059669; + /* Emerald 600 */ } .week-diff-badge.red { background: rgba(239, 68, 68, 0.1); - color: #EF4444; + color: #DC2626; + /* Red 600 */ } -/* Emoji badge in header */ +/* Emoji badge */ .daily-insight__emoji { - font-size: 1.2rem; + font-size: 1.5rem; margin-left: auto; - animation: bounce 1s ease-in-out; + filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)); + animation: bounce 1s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes bounce { @@ -176,24 +209,31 @@ } 50% { - transform: scale(1.2); + transform: scale(1.2) rotate(10deg); } } /* Tip section at bottom */ .daily-insight__tip { display: flex; - align-items: center; - gap: 0.5rem; - padding: 0.75rem 1rem; - background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.08), rgba(var(--color-primary-rgb), 0.02)); + align-items: flex-start; + gap: 0.75rem; + padding: 1rem 1.25rem; + background: linear-gradient(135deg, #fffbeb, #fef3c7); border-radius: var(--radius-lg); - font-size: 0.85rem; - color: var(--color-text-secondary); + font-size: 0.9rem; + color: #92400e; + /* Amber 800 */ + font-weight: 500; grid-column: 1 / -1; + border: 1px solid rgba(251, 191, 36, 0.3); + box-shadow: 0 4px 6px -1px rgba(245, 158, 11, 0.05); } .daily-insight__tip svg { - color: var(--color-primary); + color: #d97706; + /* Amber 600 */ flex-shrink: 0; + margin-top: 2px; + filter: drop-shadow(0 2px 4px rgba(245, 158, 11, 0.2)); } \ No newline at end of file diff --git a/src/index.css b/src/index.css index d3c0d58..f37b37c 100644 --- a/src/index.css +++ b/src/index.css @@ -25,12 +25,12 @@ body { line-height: var(--leading-normal); background-color: var(--bg-primary); /* Global Subtle Mesh Gradient */ - /* Global Subtle Mesh Gradient (Premium Theme) */ + /* Global Subtle Mesh Gradient (Premium Warmth) */ background-image: - radial-gradient(at 0% 0%, rgba(217, 119, 6, 0.05) 0px, transparent 50%), - radial-gradient(at 100% 0%, rgba(30, 41, 59, 0.05) 0px, transparent 50%), - radial-gradient(at 100% 100%, rgba(5, 150, 105, 0.05) 0px, transparent 50%), - radial-gradient(at 0% 100%, rgba(251, 191, 36, 0.05) 0px, transparent 50%); + radial-gradient(at 0% 0%, rgba(217, 119, 6, 0.15) 0px, transparent 50%), + radial-gradient(at 100% 0%, rgba(30, 41, 59, 0.1) 0px, transparent 50%), + radial-gradient(at 100% 100%, rgba(16, 185, 129, 0.1) 0px, transparent 50%), + radial-gradient(at 0% 100%, rgba(251, 191, 36, 0.12) 0px, transparent 50%); background-attachment: fixed; color: var(--text-primary); transition: background-color var(--duration-normal) var(--ease-in-out), diff --git a/src/pages/Home/Home.css b/src/pages/Home/Home.css index 834a3ce..f9125e3 100644 --- a/src/pages/Home/Home.css +++ b/src/pages/Home/Home.css @@ -55,11 +55,12 @@ /* Reduced margin */ } +/* Dashboard Card - Premium Base */ .dashboard-card { - background: var(--glass-panel-bg); - backdrop-filter: blur(12px); - -webkit-backdrop-filter: blur(12px); - border: 1px solid var(--glass-border); + background: rgba(255, 255, 255, 0.65); + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); + border: 1px solid rgba(255, 255, 255, 0.4); border-radius: var(--radius-xl); padding: var(--spacing-lg); display: flex; @@ -67,43 +68,56 @@ position: relative; overflow: hidden; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03); - /* Softer base shadow */ + box-shadow: + 0 4px 6px -1px rgba(0, 0, 0, 0.02), + 0 2px 4px -1px rgba(0, 0, 0, 0.02), + inset 0 0 0 1px rgba(255, 255, 255, 0.5); } .dashboard-card:hover { transform: translateY(-4px); - box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08); + box-shadow: + 0 20px 25px -5px rgba(0, 0, 0, 0.05), + 0 10px 10px -5px rgba(0, 0, 0, 0.01); + background: rgba(255, 255, 255, 0.75); } /* Net Worth Card (Hero) */ .home-net-worth-card { grid-column: 1; - /* First column but spans depending on layout */ - background: linear-gradient(-45deg, var(--accent-primary-hover), var(--accent-secondary), #3b82f6, #06b6d4); - background-size: 400% 400%; - animation: meshGradient 15s ease infinite; - color: var(--text-inverse); + background: linear-gradient(120deg, #3b82f6, #6366f1, #8b5cf6, #ec4899); + background-size: 300% 300%; + animation: meshGradient 10s ease infinite; + color: white; border: none; - box-shadow: var(--shadow-glow-primary); + box-shadow: + 0 10px 15px -3px rgba(59, 130, 246, 0.3), + 0 4px 6px -2px rgba(59, 130, 246, 0.1); } +.home-net-worth-card:hover { + box-shadow: + 0 20px 25px -5px rgba(59, 130, 246, 0.4), + 0 10px 10px -5px rgba(59, 130, 246, 0.2); +} .home-net-worth-card .card-bg-decoration { position: absolute; - top: -50%; - right: -20%; - width: 300px; - height: 300px; - background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%); + top: -60%; + right: -30%; + width: 400px; + height: 400px; + background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%); border-radius: 50%; pointer-events: none; + filter: blur(40px); } .home-net-worth-card .card-label { color: rgba(255, 255, 255, 0.9); - font-size: 0.9rem; + font-size: 0.95rem; font-weight: 500; + letter-spacing: 0.02em; } .home-net-worth-card .card-value-group { @@ -113,32 +127,32 @@ } .home-net-worth-card .currency-symbol { - font-size: 1.5rem; + font-size: 2rem; font-weight: 500; - opacity: 0.9; - margin-right: 4px; + opacity: 0.95; + margin-right: 6px; } .home-net-worth-card .card-value-main { font-family: 'Outfit', sans-serif; - font-size: 3rem; - /* Larger hero text */ - font-weight: 700; + font-size: 3.5rem; + font-weight: 800; line-height: 1; - letter-spacing: -2px; - text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + letter-spacing: -3px; + text-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .home-net-worth-card .trend-neutral { - font-size: 0.8rem; + font-size: 0.85rem; opacity: 1; - background: rgba(255, 255, 255, 0.2); - padding: 6px 12px; + background: rgba(255, 255, 255, 0.15); + padding: 6px 14px; border-radius: var(--radius-full); - backdrop-filter: blur(8px); - -webkit-backdrop-filter: blur(8px); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); font-weight: 600; - border: 1px solid rgba(255, 255, 255, 0.2); + border: 1px solid rgba(255, 255, 255, 0.25); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } /* 金额单位后缀样式 (万/亿) */ @@ -209,39 +223,44 @@ grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md); margin-bottom: var(--spacing-lg); - /* Reduced margin */ } .action-card { display: flex; align-items: center; gap: var(--spacing-md); - padding: var(--spacing-md); - /* Reduced padding */ - border: 1px solid var(--glass-border); + padding: 1rem; + border: 1px solid rgba(255, 255, 255, 0.4); border-radius: var(--radius-xl); - background: var(--glass-panel-bg); + background: rgba(255, 255, 255, 0.6); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); cursor: pointer; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); text-align: left; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02); } .action-card:hover { - transform: translateY(-2px); - /* Softer hover lift */ - background: var(--bg-hover); - border-color: var(--color-primary-light); - box-shadow: var(--shadow-md); + transform: translateY(-3px); + background: rgba(255, 255, 255, 0.8); + border-color: var(--accent-primary); + box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08); } .action-icon { - width: 56px; - height: 56px; - border-radius: 18px; + width: 52px; + height: 52px; + border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; + transition: transform 0.3s ease; +} + +.action-card:hover .action-icon { + transform: scale(1.1) rotate(5deg); } .action-card.primary .action-icon { @@ -251,17 +270,19 @@ } .action-card.ai .action-icon { - background: linear-gradient(135deg, #10b981, #06b6d4); + background: linear-gradient(135deg, #f59e0b, #d97706); color: white; - box-shadow: 0 8px 16px rgba(16, 185, 129, 0.25); + box-shadow: 0 8px 16px rgba(245, 158, 11, 0.25); } .action-card.secondary .action-icon { - background: var(--bg-secondary); + background: white; color: var(--color-text); border: 1px solid var(--border-color); } + + .action-info { display: flex; flex-direction: column; @@ -385,75 +406,85 @@ box-shadow: var(--shadow-sm); } +/* Recent Transactions */ /* Recent Transactions */ .recent-transactions-section { - background: var(--glass-panel-bg); - border: 1px solid var(--glass-border); + background: rgba(255, 255, 255, 0.65); + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); + border: 1px solid rgba(255, 255, 255, 0.4); border-radius: var(--radius-xl); - padding: var(--spacing-lg); + padding: 1.5rem; display: flex; flex-direction: column; - max-height: 480px; + max-height: 540px; + box-shadow: + 0 10px 25px -5px rgba(0, 0, 0, 0.05), + 0 4px 6px -2px rgba(0, 0, 0, 0.01); } .section-header { display: flex; justify-content: space-between; align-items: center; - margin-bottom: var(--spacing-md); - padding-bottom: var(--spacing-sm); - border-bottom: 1px solid var(--divider-color); + margin-bottom: 1.25rem; + padding-bottom: 0.75rem; + border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .section-header h2 { - font-size: 1.125rem; + font-size: 1.1rem; font-weight: 700; color: var(--color-text); + letter-spacing: 0.01em; } .view-all-link { - color: var(--color-primary); - font-size: 0.875rem; + color: var(--accent-primary); + font-size: 0.85rem; font-weight: 600; - background: none; + background: rgba(99, 102, 241, 0.1); border: none; cursor: pointer; - padding: 4px 8px; - border-radius: 8px; - transition: background 0.2s; + padding: 6px 14px; + border-radius: 20px; + transition: all 0.2s ease; } .view-all-link:hover { - background: var(--color-primary-light); + background: rgba(99, 102, 241, 0.15); + transform: scale(1.05); } .transaction-list-compact { display: flex; flex-direction: column; - gap: 0; + gap: 10px; overflow-y: auto; - padding-right: 4px; - /* Space for scrollbar */ + padding-right: 6px; + padding-bottom: 4px; } .transaction-row { display: flex; align-items: center; - padding: 0.875rem 0.5rem; - border-bottom: 1px dashed var(--divider-color); + padding: 0.85rem; + border-radius: 16px; cursor: pointer; - transition: all 0.2s ease; - border-radius: var(--radius-md); + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + background: rgba(255, 255, 255, 0.4); + border: 1px solid transparent; } .transaction-row:last-child { - border-bottom: none; + border-bottom: 1px solid transparent; } .transaction-row:hover { - background: var(--bg-hover); - padding-left: 1rem; - /* Indent on hover */ + background: white; + border-color: rgba(0, 0, 0, 0.05); + transform: translateX(4px) scale(1.01); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); } .transaction-icon {