diff --git a/frontend/components/dashboard/DashboardHomeIntelligence.module.css b/frontend/components/dashboard/DashboardHomeIntelligence.module.css deleted file mode 100644 index 98d56a06..00000000 --- a/frontend/components/dashboard/DashboardHomeIntelligence.module.css +++ /dev/null @@ -1,2248 +0,0 @@ -/* ── Homepage Intelligence Layer ── */ -.root :global(.home-intelligence-panel) { - position: fixed; - top: calc(var(--header-height) + 16px); - right: 18px; - bottom: 20px; - width: min(360px, calc(100vw - var(--sidebar-width) - 56px)); - z-index: 890; - display: flex; - flex-direction: column; - gap: 16px; - padding: 18px; - overflow: hidden; - border: 1px solid rgba(34, 211, 238, 0.18); - border-radius: 24px; - background: - radial-gradient( - circle at 18% 0%, - rgba(34, 211, 238, 0.16), - transparent 32% - ), - radial-gradient( - circle at 100% 20%, - rgba(59, 130, 246, 0.18), - transparent 34% - ), - linear-gradient(155deg, rgba(5, 12, 25, 0.86), rgba(12, 19, 35, 0.78)); - backdrop-filter: blur(24px) saturate(130%); - box-shadow: - 0 28px 80px rgba(0, 0, 0, 0.42), - inset 0 1px 0 rgba(255, 255, 255, 0.06); - animation: home-panel-enter 520ms cubic-bezier(0.16, 1, 0.3, 1) both; -} - -.root :global(.home-panel-glow) { - position: absolute; - inset: -28% -30% auto auto; - width: 260px; - height: 260px; - border-radius: 999px; - background: radial-gradient( - circle, - rgba(34, 211, 238, 0.18), - transparent 62% - ); - pointer-events: none; -} - -.root :global(.home-panel-kicker), -.root :global(.home-panel-airport), -.root :global(.home-signal-label), -.root :global(.home-pro-card span), -.root :global(.opportunity-strip-heading span) { - color: rgba(148, 163, 184, 0.92); - font-size: 10px; - font-weight: 800; - letter-spacing: 0.16em; - text-transform: uppercase; -} - -.root :global(.home-panel-kicker) { - position: relative; - display: inline-flex; - align-items: center; - gap: 8px; -} - -.root :global(.home-panel-pulse) { - width: 8px; - height: 8px; - border-radius: 999px; - background: var(--accent-cyan); - box-shadow: 0 0 18px rgba(34, 211, 238, 0.7); - animation: pulse 2s ease-in-out infinite; -} - -.root :global(.home-panel-city) { - position: relative; - display: flex; - align-items: flex-start; - justify-content: space-between; - gap: 16px; -} - -.root :global(.home-panel-city h2) { - margin-top: 6px; - color: #f8fafc; - font-size: clamp(28px, 4vw, 42px); - font-weight: 900; - line-height: 0.92; - letter-spacing: -0.07em; -} - -.root :global(.home-risk-badge) { - flex-shrink: 0; - display: inline-flex; - align-items: center; - gap: 6px; - min-height: 26px; - border-radius: 999px; - padding: 5px 10px 5px 8px; - border: 1px solid rgba(148, 163, 184, 0.2); - background: rgba(9, 18, 36, 0.58); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); - color: rgba(226, 232, 240, 0.88); - font-size: 10px; - font-weight: 900; - letter-spacing: 0.01em; - white-space: nowrap; -} - -.root :global(.home-risk-badge::before) { - content: ""; - width: 6px; - height: 6px; - border-radius: 999px; - background: currentColor; - opacity: 0.88; - box-shadow: 0 0 8px color-mix(in srgb, currentColor 24%, transparent); -} - -.root :global(.home-risk-badge.high) { - border-color: rgba(248, 113, 113, 0.34); - color: #fda4af; - background: rgba(69, 10, 10, 0.32); -} - -.root :global(.home-risk-badge.medium) { - border-color: rgba(251, 191, 36, 0.3); - color: #fcd34d; - background: rgba(67, 36, 6, 0.28); -} - -.root :global(.home-risk-badge.low) { - border-color: rgba(52, 211, 153, 0.28); - color: #86efac; - background: rgba(7, 47, 35, 0.28); -} - -.root :global(.home-panel-subtitle) { - max-width: 310px; - color: rgba(203, 213, 225, 0.78); - font-size: 13px; - line-height: 1.6; -} - -.root :global(.home-metric-grid) { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 10px; -} - -.root :global(.home-metric-card) { - min-height: 86px; - display: flex; - flex-direction: column; - justify-content: space-between; - gap: 12px; - padding: 13px; - border: 1px solid rgba(148, 163, 184, 0.13); - border-radius: 18px; - background: rgba(2, 6, 23, 0.36); -} - -.root :global(.home-metric-card.primary) { - background: - linear-gradient(135deg, rgba(34, 211, 238, 0.2), rgba(59, 130, 246, 0.08)), - rgba(2, 6, 23, 0.42); - border-color: rgba(34, 211, 238, 0.24); -} - -.root :global(.home-metric-card span) { - color: rgba(148, 163, 184, 0.86); - font-size: 11px; - font-weight: 700; -} - -.root :global(.home-metric-card strong) { - color: #f8fafc; - font-size: 24px; - font-weight: 900; - letter-spacing: -0.06em; -} - -.root :global(.home-signal-card) { - display: grid; - grid-template-columns: 48px 1fr; - gap: 14px; - padding: 14px; - border: 1px solid rgba(34, 211, 238, 0.16); - border-radius: 20px; - background: rgba(8, 13, 27, 0.48); -} - -.root :global(.home-signal-line) { - display: flex; - align-items: flex-end; - justify-content: center; - gap: 5px; - height: 68px; -} - -.root :global(.home-signal-line span) { - width: 7px; - border-radius: 999px; - background: linear-gradient(180deg, #22d3ee, #3b82f6); - opacity: 0.88; - animation: home-signal-wave 1.8s ease-in-out infinite; -} - -.root :global(.home-signal-line span:nth-child(1)) { - height: 32px; -} - -.root :global(.home-signal-line span:nth-child(2)) { - height: 56px; - animation-delay: 180ms; -} - -.root :global(.home-signal-line span:nth-child(3)) { - height: 42px; - animation-delay: 360ms; -} - -.root :global(.home-signal-card strong) { - display: block; - margin: 5px 0 4px; - color: #e2e8f0; - font-size: 15px; -} - -.root :global(.home-signal-card p) { - color: rgba(148, 163, 184, 0.9); - font-size: 12px; - line-height: 1.55; -} - -.root :global(.home-pro-card) { - display: flex; - align-items: center; - justify-content: space-between; - gap: 14px; - padding: 14px; - border: 1px solid rgba(251, 191, 36, 0.26); - border-radius: 20px; - background: - linear-gradient(135deg, rgba(251, 191, 36, 0.1), transparent 60%), - rgba(15, 23, 42, 0.52); -} - -.root :global(.home-pro-card.active) { - border-color: rgba(34, 211, 238, 0.28); - background: - linear-gradient(135deg, rgba(34, 211, 238, 0.12), transparent 60%), - rgba(15, 23, 42, 0.52); -} - -.root :global(.home-pro-card strong) { - display: block; - margin-top: 5px; - color: #f8fafc; - font-size: 12px; - line-height: 1.45; -} - -.root :global(.home-pro-card a), -.root :global(.home-pro-card button) { - flex-shrink: 0; - border: 1px solid rgba(34, 211, 238, 0.32); - border-radius: 999px; - background: rgba(34, 211, 238, 0.1); - color: #a5f3fc; - cursor: pointer; - font: inherit; - font-size: 12px; - font-weight: 800; - padding: 8px 12px; - text-decoration: none; - transition: - transform 160ms ease, - border-color 160ms ease, - background 160ms ease; -} - -.root :global(.home-pro-card a:hover), -.root :global(.home-pro-card button:hover) { - transform: translateY(-1px); - border-color: rgba(34, 211, 238, 0.62); - background: rgba(34, 211, 238, 0.16); -} - -.root :global(.home-intelligence-panel.full) { - bottom: 18px; - width: min(372px, calc(100vw - var(--sidebar-width) - 56px)); - gap: 14px; - overflow-y: auto; - border-color: rgba(34, 211, 238, 0.22); - background: - radial-gradient( - circle at 100% 0%, - rgba(37, 99, 235, 0.18), - transparent 38% - ), - radial-gradient( - circle at 0% 100%, - rgba(34, 211, 238, 0.06), - transparent 32% - ), - linear-gradient(165deg, rgba(3, 10, 22, 0.96), rgba(5, 18, 38, 0.94)); - box-shadow: - inset 1px 0 0 rgba(255, 255, 255, 0.04), - -10px 0 34px rgba(0, 0, 0, 0.18); -} - -.root :global(.home-intelligence-panel.full::-webkit-scrollbar) { - width: 4px; -} - -.root :global(.home-intelligence-panel.full::-webkit-scrollbar-thumb) { - background: rgba(34, 211, 238, 0.28); - border-radius: 999px; -} - -/* Close button removed — panel always visible */ - -.root :global(.home-panel-header-left) { - display: inline-flex; - align-items: center; - gap: 8px; -} - -.root :global(.home-panel-live-indicator) { - width: 7px; - height: 7px; - border-radius: 999px; - background: #22c55e; - box-shadow: 0 0 10px rgba(34, 197, 94, 0.6); - animation: pulse 2s ease-in-out infinite; -} - -.root :global(.home-panel-header) { - display: flex; - align-items: center; - justify-content: space-between; - gap: 10px; - padding-bottom: 10px; - border-bottom: 1px solid rgba(115, 137, 161, 0.12); -} - -.root :global(.home-focus-title) { - color: rgba(226, 232, 240, 0.92); - font-size: 10px; - font-weight: 800; - letter-spacing: 0.14em; - text-transform: uppercase; -} - -.root :global(.home-why-link) { - border: 1px solid rgba(96, 165, 250, 0.22); - border-radius: 999px; - padding: 4px 10px; - background: rgba(96, 165, 250, 0.06); - color: #93c5fd; - cursor: pointer; - font: inherit; - font-size: 10px; - font-weight: 700; - transition: all 180ms ease; -} - -.root :global(.home-why-link:hover) { - border-color: rgba(96, 165, 250, 0.42); - background: rgba(96, 165, 250, 0.12); - color: #bfdbfe; -} - -.root :global(.home-top-opportunity-label) { - display: inline-flex; - align-self: flex-start; - align-items: center; - gap: 7px; - padding: 5px 8px; - border: 1px solid rgba(34, 211, 238, 0.18); - border-radius: 999px; - background: rgba(8, 145, 178, 0.1); - color: var(--color-accent-secondary); - font-size: 10px; - font-weight: 900; - letter-spacing: 0.12em; - text-transform: uppercase; -} - -.root :global(.home-top-opportunity-label::before) { - content: ""; - width: 6px; - height: 6px; - border-radius: 999px; - background: #22c55e; - box-shadow: 0 0 12px rgba(34, 197, 94, 0.72); -} - -.root :global(.home-card-titlebar) { - display: flex; - align-items: flex-start; - justify-content: space-between; - gap: 14px; -} - -.root :global(.home-card-titlebar h2) { - color: #f8fafc; - font-size: 22px; - font-weight: 900; - line-height: 1; - letter-spacing: -0.045em; -} - -.root :global(.home-card-titlebar p), -.root :global(.home-card-meta-row) { - color: rgba(148, 163, 184, 0.88); - font-size: 12px; - font-weight: 600; -} - -.root :global(.home-card-titlebar p) { - margin-top: 7px; -} - -.root :global(.home-card-meta-row) { - display: flex; - align-items: center; - gap: 8px; -} - -.root :global(.home-card-live-dot) { - width: 6px; - height: 6px; - border-radius: 999px; - background: #22c55e; - box-shadow: 0 0 12px rgba(34, 197, 94, 0.72); -} - -.root :global(.home-weather-hero) { - display: grid; - grid-template-columns: minmax(0, 1fr) 130px; - gap: 14px; - align-items: center; - padding: 16px; - border: 1px solid rgba(34, 211, 238, 0.14); - border-radius: 18px; - background: - radial-gradient( - circle at 88% 24%, - rgba(245, 158, 11, 0.12), - transparent 24% - ), - linear-gradient(180deg, rgba(8, 16, 30, 0.62), rgba(4, 10, 22, 0.36)); -} - -.root :global(.home-weather-main strong) { - display: block; - color: #f8fafc; - font-size: 62px; - font-weight: 900; - line-height: 0.96; - letter-spacing: -0.08em; -} - -.root :global(.home-weather-label), -.root :global(.home-weather-sub), -.root :global(.home-weather-stat span), -.root :global(.home-weather-stat small) { - display: block; - color: rgba(148, 163, 184, 0.88); - font-size: 12px; -} - -.root :global(.home-weather-label) { - margin-bottom: 8px; - color: var(--color-accent-secondary); - font-size: 10px; - font-weight: 900; - letter-spacing: 0.14em; - text-transform: uppercase; -} - -.root :global(.home-weather-sub) { - margin-top: 10px; -} - -.root :global(.home-weather-side) { - display: grid; - justify-items: end; - gap: 10px; -} - -.root :global(.home-weather-icon) { - position: relative; - width: 88px; - height: 76px; -} - -.root :global(.home-weather-stat) { - min-width: 118px; - padding: 9px 10px; - border: 1px solid rgba(148, 163, 184, 0.12); - border-radius: 12px; - background: rgba(2, 8, 18, 0.35); - text-align: right; -} - -.root :global(.home-weather-stat strong) { - display: block; - margin-top: 3px; - color: #f8fafc; - font-size: 18px; - font-weight: 900; -} - -.root :global(.home-weather-stat small) { - margin-top: 2px; - font-size: 10px; -} - -.root :global(.home-weather-icon .sun), -.root :global(.home-weather-icon .mist), -.root :global(.home-weather-icon .wind), -.root :global(.home-weather-icon .bolt) { - position: absolute; -} - -.root :global(.home-weather-icon .sun) { - top: 8px; - left: 6px; - width: 26px; - height: 26px; - border-radius: 999px; - background: radial-gradient(circle, #fde68a 0%, #f59e0b 70%, #f97316 100%); - box-shadow: - 0 0 0 7px rgba(251, 191, 36, 0.12), - 0 0 22px rgba(245, 158, 11, 0.26); -} - -.root :global(.home-weather-icon .cloud) { - position: absolute; - border-radius: 999px; - background: linear-gradient(180deg, #b8c4d2, #6B7A90); - filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.28)); -} - -.root :global(.home-weather-icon .cloud-a) { - left: 10px; - top: 24px; - width: 70px; - height: 30px; -} - -.root :global(.home-weather-icon .cloud-b) { - left: 31px; - top: 10px; - width: 37px; - height: 37px; -} - -.root :global(.home-weather-icon .rain) { - position: absolute; - top: 58px; - width: 4px; - height: 13px; - border-radius: 999px; - background: var(--color-accent-primary); - transform: rotate(18deg); -} - -.root :global(.home-weather-icon .rain-a) { - left: 29px; -} - -.root :global(.home-weather-icon .rain-b) { - left: 48px; -} - -.root :global(.home-weather-icon .rain-c) { - left: 67px; -} - -.root :global(.home-weather-icon .mist) { - left: 20px; - width: 46px; - height: 2px; - border-radius: 999px; - background: rgba(191, 219, 254, 0.85); - box-shadow: 0 0 10px rgba(148, 163, 184, 0.18); -} - -.root :global(.home-weather-icon .mist-a) { - top: 58px; -} - -.root :global(.home-weather-icon .mist-b) { - top: 64px; - left: 28px; - width: 38px; -} - -.root :global(.home-weather-icon .wind) { - left: 20px; - width: 44px; - height: 2px; - border-radius: 999px; - background: linear-gradient( - 90deg, - rgba(125, 211, 252, 0), - rgba(125, 211, 252, 0.92) - ); -} - -.root :global(.home-weather-icon .wind::after) { - content: ""; - position: absolute; - right: -3px; - top: -1px; - width: 9px; - height: 4px; - border-top: 2px solid rgba(125, 211, 252, 0.92); - border-right: 2px solid rgba(125, 211, 252, 0.92); - border-radius: 0 8px 0 0; -} - -.root :global(.home-weather-icon .wind-a) { - top: 28px; -} - -.root :global(.home-weather-icon .wind-b) { - top: 42px; - left: 30px; - width: 34px; -} - -.root :global(.home-weather-icon .bolt) { - top: 44px; - left: 20px; - width: 0; - height: 0; - border-left: 6px solid transparent; - border-right: 2px solid transparent; - border-top: 18px solid #fbbf24; - transform: skewX(-16deg); - filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.32)); -} - -.root :global(.home-weather-icon .bolt::after) { - content: ""; - position: absolute; - left: -5px; - top: -4px; - width: 0; - height: 0; - border-left: 5px solid transparent; - border-right: 2px solid transparent; - border-top: 12px solid #fde047; - transform: translateX(5px) translateY(8px); -} - -.root :global(.home-weather-icon.weather-clear .cloud), -.root :global(.home-weather-icon.weather-clear .rain), -.root :global(.home-weather-icon.weather-clear .mist), -.root :global(.home-weather-icon.weather-clear .wind), -.root :global(.home-weather-icon.weather-clear .bolt) { - display: none; -} - -.root :global(.home-weather-icon.weather-partly .rain), -.root :global(.home-weather-icon.weather-partly .mist), -.root :global(.home-weather-icon.weather-partly .wind), -.root :global(.home-weather-icon.weather-partly .bolt) { - display: none; -} - -.root :global(.home-weather-icon.weather-cloudy .sun), -.root :global(.home-weather-icon.weather-cloudy .rain), -.root :global(.home-weather-icon.weather-cloudy .mist), -.root :global(.home-weather-icon.weather-cloudy .wind), -.root :global(.home-weather-icon.weather-cloudy .bolt) { - display: none; -} - -.root :global(.home-weather-icon.weather-rain .sun), -.root :global(.home-weather-icon.weather-rain .mist), -.root :global(.home-weather-icon.weather-rain .wind), -.root :global(.home-weather-icon.weather-rain .bolt) { - display: none; -} - -.root :global(.home-weather-icon.weather-storm .sun), -.root :global(.home-weather-icon.weather-storm .mist), -.root :global(.home-weather-icon.weather-storm .wind) { - display: none; -} - -.root :global(.home-weather-icon.weather-mist .sun), -.root :global(.home-weather-icon.weather-mist .rain), -.root :global(.home-weather-icon.weather-mist .wind), -.root :global(.home-weather-icon.weather-mist .bolt) { - display: none; -} - -.root :global(.home-weather-icon.weather-wind .sun), -.root :global(.home-weather-icon.weather-wind .rain), -.root :global(.home-weather-icon.weather-wind .mist), -.root :global(.home-weather-icon.weather-wind .bolt) { - display: none; -} - -.root :global(.home-max-so-far) { - grid-column: 2; - color: rgba(203, 213, 225, 0.86); - font-size: 12px; - text-align: right; -} - -.root :global(.home-max-so-far strong) { - display: block; - margin-top: 4px; - font-size: 16px; - letter-spacing: -0.03em; -} - -.root :global(.home-max-so-far small) { - color: rgba(148, 163, 184, 0.9); - font-size: 11px; -} - -.root :global(.home-deb-card), -.root :global(.home-card-section) { - border-radius: 14px; - border: 1px solid rgba(115, 137, 161, 0.12); - background: linear-gradient( - 180deg, - rgba(8, 16, 30, 0.88), - rgba(6, 12, 24, 0.74) - ); - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.04), - 0 2px 8px rgba(0, 0, 0, 0.18); - transition: border-color 200ms ease; -} - -.root :global(.home-deb-card:hover), -.root :global(.home-card-section:hover) { - border-color: rgba(34, 211, 238, 0.18); -} - -.root :global(.home-deb-card) { - display: flex; - align-items: baseline; - justify-content: space-between; - gap: 10px; - padding: 12px 14px; -} - -.root :global(.home-deb-card span), -.root :global(.home-card-section h3) { - color: var(--color-accent-secondary); - font-size: 12px; - font-weight: 800; -} - -.root :global(.home-deb-card small), -.root :global(.home-card-section h3 small) { - color: rgba(148, 163, 184, 0.82); - font-weight: 700; -} - -.root :global(.home-deb-card strong) { - display: inline-block; - margin-top: 9px; - color: #f8fafc; - font-size: 26px; - font-weight: 900; - letter-spacing: -0.055em; -} - -.root :global(.home-deb-card em) { - margin-left: 10px; - color: #f87171; - font-size: 12px; - font-style: normal; - font-weight: 800; -} - -.root :global(.home-market-metrics svg) { - width: 100%; - height: 42px; -} - -.root :global(.home-market-metrics polyline) { - fill: none; - stroke: #18e6d4; - stroke-linecap: round; - stroke-linejoin: round; - stroke-width: 2.2; -} - -.root :global(.home-card-section) { - padding: 12px 14px; -} - -.root :global(.home-card-section h3) { - margin-bottom: 10px; - color: rgba(226, 232, 240, 0.94); -} - -.root :global(.home-card-section.intraday) { - border-color: rgba(34, 211, 238, 0.2); - background: - radial-gradient( - circle at 0% 35%, - rgba(34, 211, 238, 0.12), - transparent 44% - ), - linear-gradient(180deg, rgba(7, 14, 26, 0.94), rgba(9, 17, 30, 0.82)); -} - -.root :global(.home-intraday-chart) { - position: relative; - padding: 6px 0 18px 34px; -} - -.root :global(.home-intraday-chart svg) { - width: calc(100% - 34px); - margin-left: 34px; - height: 78px; -} - -.root :global(.home-intraday-y-axis) { - position: absolute; - inset: 0 auto 18px 0; - width: 30px; - pointer-events: none; -} - -.root :global(.home-intraday-y-label) { - position: absolute; - left: 0; - transform: translateY(-50%); - color: rgba(148, 163, 184, 0.72); - font-size: 10px; - font-weight: 700; -} - -.root :global(.home-intraday-x-axis) { - position: absolute; - left: 34px; - right: 10px; - bottom: 0; - height: 14px; - pointer-events: none; -} - -.root :global(.home-intraday-x-label) { - position: absolute; - bottom: 0; - transform: translateX(-50%); - color: rgba(148, 163, 184, 0.72); - font-size: 10px; - font-weight: 700; - white-space: nowrap; -} - -.root :global(.home-intraday-chart line) { - stroke: rgba(115, 137, 161, 0.14); - stroke-width: 0.9; -} - -.root :global(.home-intraday-chart polyline) { - fill: none; - stroke: #22d3ee; - stroke-width: 1.8; - stroke-linecap: round; - stroke-linejoin: round; - filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.22)); -} - -.root :global(.home-intraday-chart circle) { - fill: var(--color-accent-primary); - stroke: rgba(15, 23, 42, 0.92); - stroke-width: 1.6; - filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.28)); -} - -.root :global(.home-intraday-reports) { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 7px; - margin-top: 8px; -} - -.root :global(.home-intraday-reports span) { - min-width: 0; - display: flex; - align-items: center; - justify-content: space-between; - gap: 6px; - padding: 7px 8px; - border: 1px solid rgba(34, 211, 238, 0.12); - border-radius: 10px; - background: rgba(2, 8, 18, 0.55); -} - -.root :global(.home-intraday-reports b) { - color: rgba(148, 163, 184, 0.9); - font-size: 10px; - font-weight: 800; -} - -.root :global(.home-intraday-reports strong) { - color: #e0f2fe; - font-size: 11px; - font-weight: 900; -} - -.root :global(.home-card-section.forecast) { - border-color: rgba(99, 102, 241, 0.24); -} - -.root :global(.home-forecast-grid) { - display: grid; - grid-template-columns: repeat(4, minmax(0, 1fr)); - gap: 8px; -} - -.root :global(.home-forecast-item) { - min-width: 0; - padding: 10px 8px; - border: 1px solid rgba(148, 163, 184, 0.14); - border-radius: 12px; - background: rgba(15, 23, 42, 0.5); - text-align: center; -} - -.root :global(.home-forecast-item span) { - display: block; - color: rgba(148, 163, 184, 0.84); - font-size: 10px; - font-weight: 800; -} - -.root :global(.home-forecast-item strong) { - display: block; - margin-top: 6px; - color: #f8fafc; - font-size: 16px; - font-weight: 900; - letter-spacing: -0.04em; -} - -.root :global(.home-model-stack) { - display: flex; - flex-wrap: wrap; - gap: 7px; -} - -.root :global(.home-model-stack span) { - display: inline-flex; - align-items: center; - gap: 5px; - padding: 6px 8px; - border: 1px solid rgba(148, 163, 184, 0.18); - border-radius: 6px; - background: rgba(15, 23, 42, 0.72); - color: rgba(226, 232, 240, 0.92); - font-size: 11px; - font-weight: 800; -} - -.root :global(.home-model-stack i), -.root :global(.key-signals i.active) { - width: 6px; - height: 6px; - border-radius: 999px; - background: #22c55e; - box-shadow: 0 0 10px rgba(34, 197, 94, 0.62); -} - -.root :global(.home-card-section.probability) { - border-color: rgba(251, 113, 133, 0.18); - background: - radial-gradient( - circle at 100% 0%, - rgba(251, 113, 133, 0.08), - transparent 42% - ), - linear-gradient(180deg, rgba(7, 14, 26, 0.94), rgba(9, 17, 30, 0.82)); -} - -.root :global(.home-probability-list), -.root :global(.home-probability-ladder) { - display: grid; - gap: 8px; -} - -.root :global(.home-probability-row), -.root :global(.home-probability-ladder-row) { - display: grid; - grid-template-columns: 58px minmax(0, 1fr) 42px; - align-items: center; - gap: 9px; - color: rgba(226, 232, 240, 0.95); - font-size: 12px; - font-weight: 800; -} - -.root :global(.home-probability-row div), -.root :global(.home-probability-track) { - position: relative; - height: 14px; - overflow: hidden; - border-radius: 999px; - background: rgba(115, 137, 161, 0.12); -} - -.root :global(.home-probability-row i), -.root :global(.home-probability-track i) { - position: absolute; - inset: 0 auto 0 0; - border-radius: inherit; - background: linear-gradient(90deg, #3b82f6, #18e6d4); - box-shadow: 0 0 10px rgba(34, 211, 238, 0.14); -} - -.root :global(.home-probability-row strong), -.root :global(.home-probability-ladder-row strong) { - position: relative; - z-index: 1; - display: block; - color: #f8fafc; - font-size: 12px; - line-height: 1; - text-align: right; -} - -.root :global(.home-probability-threshold) { - color: rgba(226, 232, 240, 0.95); - font-size: 12px; - font-weight: 900; -} - -.root :global(.home-card-empty) { - color: rgba(148, 163, 184, 0.9); - font-size: 12px; - line-height: 1.5; -} - -.root :global(.home-card-section.market) { - position: relative; - border-color: rgba(34, 211, 238, 0.16); -} - -.root :global(.home-card-section.market.locked) { - border-color: rgba(251, 191, 36, 0.28); -} - -.root :global(.home-market-header), -.root :global(.home-market-ticket), -.root :global(.home-market-prices), -.root :global(.home-market-metrics) { - display: flex; - align-items: center; -} - -.root :global(.home-market-header), -.root :global(.home-market-ticket) { - justify-content: space-between; - gap: 10px; -} - -.root :global(.home-market-header span) { - color: rgba(148, 163, 184, 0.88); - font-size: 11px; - font-weight: 700; -} - -.root :global(.home-market-ticket) { - margin-top: 8px; -} - -.root :global(.home-market-question strong) { - display: block; - color: #f8fafc; - font-size: 15px; -} - -.root :global(.home-market-question span) { - display: block; - margin-top: 3px; - color: rgba(148, 163, 184, 0.8); - font-size: 11px; -} - -.root :global(.home-market-prices) { - gap: 6px; -} - -.root :global(.home-market-prices span) { - border-radius: 7px; - padding: 7px 9px; - font-size: 12px; - font-weight: 900; -} - -.root :global(.home-market-prices .yes) { - color: var(--color-accent-secondary); - background: rgba(8, 145, 178, 0.2); -} - -.root :global(.home-market-prices .no) { - color: #fca5a5; - background: rgba(127, 29, 29, 0.24); -} - -.root :global(.home-market-metrics) { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)) 94px; - gap: 8px; - margin-top: 10px; -} - -.root :global(.home-market-metrics span) { - color: rgba(148, 163, 184, 0.84); - font-size: 11px; -} - -.root :global(.home-market-metrics strong) { - display: block; - margin-top: 3px; - color: #22c55e; - font-size: 13px; -} - -.root :global(.home-market-lock) { - display: inline-flex; - margin-top: 10px; - color: #fde68a; - font-size: 12px; - font-weight: 800; - text-decoration: none; -} - -.root :global(.key-signals) { - border-color: transparent; - background: transparent; - padding: 0 4px; -} - -.root :global(.key-signals ul) { - display: grid; - gap: 7px; - list-style: none; -} - -.root :global(.key-signals li) { - display: flex; - align-items: center; - justify-content: space-between; - color: rgba(203, 213, 225, 0.88); - font-size: 12px; -} - -.root :global(.key-signals i) { - width: 8px; - height: 8px; - border-radius: 999px; - background: rgba(148, 163, 184, 0.42); -} - -.root :global(.key-signals i.amber.active) { - background: #f59e0b; - box-shadow: 0 0 10px rgba(245, 158, 11, 0.62); -} - -.root :global(.key-signals p) { - margin-top: 9px; - color: rgba(100, 116, 139, 0.9); - font-size: 11px; -} - -.root :global(.home-intelligence-panel.full .home-pro-card) { - margin-top: 0; -} - -.root :global(.home-opportunity-strip) { - position: fixed; - left: calc(var(--sidebar-width) + 22px); - right: 392px; - bottom: 18px; - z-index: 880; - display: flex; - flex-direction: column; - gap: 16px; - padding: 16px; - border: 1px solid rgba(148, 163, 184, 0.14); - border-radius: 24px; - background: - radial-gradient( - circle at 82% -10%, - rgba(59, 130, 246, 0.14), - transparent 34% - ), - radial-gradient( - circle at 8% 50%, - rgba(34, 211, 238, 0.12), - transparent 32% - ), - rgba(7, 13, 25, 0.76); - backdrop-filter: blur(20px) saturate(130%); - box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34); - animation: opportunity-strip-enter 580ms cubic-bezier(0.16, 1, 0.3, 1) 120ms - both; -} - -.root :global(.opportunity-strip-topline) { - display: flex; - align-items: flex-start; - justify-content: space-between; - gap: 18px; -} - -.root :global(.opportunity-strip-copy) { - display: flex; - flex-direction: column; - gap: 7px; - min-width: 0; - flex: 1; -} - -.root :global(.opportunity-strip-kicker) { - color: rgba(148, 163, 184, 0.8); - font-size: 11px; - font-weight: 800; - letter-spacing: 0.08em; - text-transform: uppercase; -} - -.root :global(.opportunity-strip-copy strong) { - color: #f8fafc; - font-size: 19px; - font-weight: 800; - line-height: 1.25; - letter-spacing: -0.02em; -} - -.root :global(.opportunity-strip-copy p) { - max-width: 620px; - color: rgba(191, 219, 254, 0.74); - font-size: 12px; - line-height: 1.6; -} - -.root :global(.opportunity-strip-tape) { - display: flex; - flex-wrap: wrap; - gap: 10px; - justify-content: flex-end; - max-width: 460px; -} - -.root :global(.opportunity-tape-pill) { - display: flex; - min-width: 92px; - flex-direction: column; - gap: 3px; - padding: 10px 12px; - border-radius: 14px; - border: 1px solid rgba(148, 163, 184, 0.16); - background: rgba(9, 16, 30, 0.7); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02); -} - -.root :global(.opportunity-tape-pill span) { - color: rgba(148, 163, 184, 0.82); - font-size: 10px; - font-weight: 700; - letter-spacing: 0.04em; - text-transform: uppercase; -} - -.root :global(.opportunity-tape-pill strong) { - color: #f8fafc; - font-size: 16px; - font-weight: 800; - line-height: 1; -} - -.root :global(.opportunity-tape-pill.accent-cyan strong) { - color: var(--color-accent-secondary); -} - -.root :global(.opportunity-tape-pill.accent-green strong) { - color: #4ade80; -} - -.root :global(.opportunity-tape-pill.accent-slate strong) { - color: rgba(226, 232, 240, 0.78); -} - -.root :global(.opportunity-tape-pill.accent-outline) { - min-width: auto; - justify-content: center; - padding: 9px 11px; - background: rgba(6, 11, 23, 0.62); -} - -.root :global(.opportunity-tape-pill.accent-outline span) { - color: rgba(191, 219, 254, 0.92); - font-size: 11px; - letter-spacing: 0; - text-transform: none; -} - -.root :global(.opportunity-strip-main) { - display: grid; - grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.92fr); - gap: 14px; -} - -.root :global(.opportunity-hero-card) { - position: relative; - overflow: hidden; - min-width: 0; - display: flex; - flex-direction: column; - gap: 16px; - min-height: 244px; - padding: 18px; - border: 1px solid rgba(56, 189, 248, 0.18); - border-radius: 22px; - background: - radial-gradient( - circle at 100% 0%, - rgba(14, 165, 233, 0.22), - transparent 28% - ), - radial-gradient( - circle at 12% 88%, - rgba(16, 185, 129, 0.1), - transparent 28% - ), - linear-gradient(135deg, rgba(7, 14, 28, 0.96), rgba(12, 27, 48, 0.92)); - color: inherit; - cursor: pointer; - font: inherit; - text-align: left; - box-shadow: - 0 18px 42px rgba(2, 6, 23, 0.28), - inset 0 1px 0 rgba(255, 255, 255, 0.04); - transition: - transform 160ms ease, - border-color 160ms ease, - box-shadow 160ms ease; -} - -.root :global(.opportunity-hero-card:hover) { - transform: translateY(-2px); - border-color: rgba(34, 211, 238, 0.36); - box-shadow: - 0 24px 52px rgba(2, 6, 23, 0.36), - 0 0 0 1px rgba(34, 211, 238, 0.08); -} - -.root :global(.opportunity-hero-header) { - display: flex; - align-items: flex-start; - justify-content: space-between; - gap: 18px; -} - -.root :global(.opportunity-hero-copy) { - display: flex; - min-width: 0; - flex: 1; - flex-direction: column; - gap: 6px; -} - -.root :global(.opportunity-hero-kicker) { - color: var(--color-accent-secondary); - font-size: 11px; - font-weight: 800; - letter-spacing: 0.08em; - text-transform: uppercase; -} - -.root :global(.opportunity-hero-title-row) { - display: flex; - align-items: baseline; - gap: 10px; - min-width: 0; -} - -.root :global(.opportunity-hero-title-row strong) { - overflow: hidden; - color: #f8fafc; - font-size: 28px; - font-weight: 800; - line-height: 1; - letter-spacing: -0.04em; - text-overflow: ellipsis; - white-space: nowrap; -} - -.root :global(.opportunity-hero-date) { - color: rgba(186, 230, 253, 0.76); - font-size: 12px; - font-weight: 700; -} - -.root :global(.opportunity-hero-copy p) { - max-width: 520px; - color: rgba(226, 232, 240, 0.82); - font-size: 13px; - line-height: 1.55; -} - -.root :global(.opportunity-hero-tags) { - display: flex; - flex-wrap: wrap; - justify-content: flex-end; - gap: 8px; -} - -.root :global(.opportunity-hero-tag) { - display: inline-flex; - align-items: center; - justify-content: center; - min-height: 30px; - padding: 0 11px; - border-radius: 999px; - border: 1px solid rgba(148, 163, 184, 0.16); - background: rgba(7, 13, 25, 0.58); - color: rgba(226, 232, 240, 0.92); - font-size: 11px; - font-weight: 800; - white-space: nowrap; -} - -.root :global(.opportunity-hero-tag.engine) { - border-color: rgba(34, 211, 238, 0.24); - color: var(--color-accent-secondary); -} - -.root :global(.opportunity-hero-tag.signal-yes) { - border-color: rgba(74, 222, 128, 0.26); - color: #86efac; -} - -.root :global(.opportunity-hero-tag.signal-no) { - border-color: rgba(251, 113, 133, 0.24); - color: #fda4af; -} - -.root :global(.opportunity-hero-tag.signal-neutral) { - color: rgba(191, 219, 254, 0.88); -} - -.root :global(.opportunity-hero-tag.risk.high) { - border-color: rgba(251, 113, 133, 0.24); - color: #fda4af; -} - -.root :global(.opportunity-hero-tag.risk.medium) { - border-color: rgba(251, 191, 36, 0.24); - color: #fcd34d; -} - -.root :global(.opportunity-hero-tag.risk.low) { - border-color: rgba(74, 222, 128, 0.24); - color: #86efac; -} - -.root :global(.opportunity-hero-body) { - display: grid; - gap: 14px; -} - -.root :global(.opportunity-hero-edgeblock) { - display: flex; - flex-direction: column; - gap: 6px; - padding: 14px 16px; - border-radius: 18px; - border: 1px solid rgba(34, 211, 238, 0.18); - background: linear-gradient( - 135deg, - rgba(8, 15, 28, 0.84), - rgba(13, 30, 52, 0.82) - ); -} - -.root :global(.opportunity-hero-edgeblock span) { - color: rgba(148, 163, 184, 0.8); - font-size: 11px; - font-weight: 700; - letter-spacing: 0.08em; - text-transform: uppercase; -} - -.root :global(.opportunity-hero-edgeblock strong) { - color: #4ade80; - font-size: 44px; - font-weight: 900; - line-height: 0.95; - letter-spacing: -0.05em; -} - -.root :global(.opportunity-hero-edgeblock em) { - color: rgba(191, 219, 254, 0.84); - font-size: 12px; - font-style: normal; - line-height: 1.5; -} - -.root :global(.opportunity-hero-metrics) { - display: grid; - grid-template-columns: repeat(4, minmax(0, 1fr)); - gap: 10px; -} - -.root :global(.opportunity-hero-metric) { - display: flex; - min-width: 0; - flex-direction: column; - gap: 5px; - padding: 12px 13px; - border-radius: 14px; - border: 1px solid rgba(148, 163, 184, 0.14); - background: rgba(9, 16, 30, 0.6); -} - -.root :global(.opportunity-hero-metric span) { - color: rgba(148, 163, 184, 0.8); - font-size: 10px; - font-weight: 700; - letter-spacing: 0.08em; - text-transform: uppercase; -} - -.root :global(.opportunity-hero-metric strong) { - overflow: hidden; - color: #f8fafc; - font-size: 20px; - font-weight: 800; - line-height: 1; - letter-spacing: -0.03em; - text-overflow: ellipsis; - white-space: nowrap; -} - -.root :global(.opportunity-hero-book) { - display: grid; - grid-template-columns: repeat(2, minmax(110px, 132px)) minmax(0, 1fr); - gap: 12px; - align-items: stretch; -} - -.root :global(.opportunity-book-side) { - display: flex; - flex-direction: column; - justify-content: center; - gap: 6px; - padding: 12px 14px; - border-radius: 16px; - border: 1px solid rgba(148, 163, 184, 0.16); - background: rgba(6, 11, 23, 0.62); -} - -.root :global(.opportunity-book-side span) { - font-size: 11px; - font-weight: 700; - letter-spacing: 0.08em; - text-transform: uppercase; -} - -.root :global(.opportunity-book-side strong) { - font-size: 26px; - font-weight: 800; - line-height: 1; - letter-spacing: -0.03em; -} - -.root :global(.opportunity-book-side.yes) { - border-color: rgba(34, 211, 238, 0.22); -} - -.root :global(.opportunity-book-side.yes span), -.root :global(.opportunity-book-side.yes strong) { - color: #22d3ee; -} - -.root :global(.opportunity-book-side.no) { - border-color: rgba(251, 113, 133, 0.22); -} - -.root :global(.opportunity-book-side.no span), -.root :global(.opportunity-book-side.no strong) { - color: #fda4af; -} - -.root :global(.opportunity-hero-sparkline-wrap) { - display: flex; - flex-direction: column; - gap: 8px; - padding: 12px 14px; - border-radius: 16px; - border: 1px solid rgba(148, 163, 184, 0.14); - background: - radial-gradient( - circle at 100% 0%, - rgba(59, 130, 246, 0.14), - transparent 32% - ), - rgba(8, 15, 28, 0.66); -} - -.root :global(.opportunity-hero-sparkline-wrap span) { - color: rgba(148, 163, 184, 0.8); - font-size: 10px; - font-weight: 700; - letter-spacing: 0.08em; - text-transform: uppercase; -} - -.root :global(.opportunity-hero-sparkline) { - width: 100%; - height: 44px; -} - -.root :global(.opportunity-hero-sparkline polyline) { - fill: none; - stroke: #18e6d4; - stroke-width: 2.4; - stroke-linecap: round; - stroke-linejoin: round; - filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.26)); -} - -.root :global(.opportunity-hero-footer) { - display: flex; - align-items: center; - justify-content: space-between; - gap: 12px; - color: rgba(191, 219, 254, 0.82); - font-size: 11px; - font-weight: 700; -} - -.root :global(.opportunity-side-grid) { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 12px; -} - -.root :global(.opportunity-side-tile) { - display: flex; - min-height: 116px; - flex-direction: column; - justify-content: space-between; - gap: 12px; - padding: 14px; - border-radius: 18px; - border: 1px solid rgba(148, 163, 184, 0.14); - background: - radial-gradient( - circle at 100% 0%, - rgba(30, 64, 175, 0.12), - transparent 30% - ), - rgba(9, 16, 30, 0.68); -} - -.root :global(.opportunity-side-tile-head span) { - color: rgba(241, 245, 249, 0.92); - font-size: 13px; - font-weight: 700; -} - -.root :global(.opportunity-side-tile-body) { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 8px; -} - -.root :global(.opportunity-side-stat) { - display: flex; - min-width: 0; - flex-direction: column; - gap: 4px; -} - -.root :global(.opportunity-side-stat b) { - overflow: hidden; - color: #f8fafc; - font-size: 24px; - font-weight: 800; - line-height: 1; - letter-spacing: -0.04em; - text-overflow: ellipsis; - white-space: nowrap; -} - -.root :global(.opportunity-side-stat span) { - color: rgba(148, 163, 184, 0.82); - font-size: 10px; - font-weight: 600; -} - -.root :global(.opportunity-side-stat b.accent-red) { - color: #fb7185; -} - -.root :global(.opportunity-side-stat b.accent-amber) { - color: #fbbf24; -} - -.root :global(.opportunity-side-stat b.accent-green) { - color: #4ade80; -} - -.root :global(.opportunity-side-stat b.accent-cyan) { - color: #22d3ee; -} - -.root :global(.opportunity-mini-grid) { - display: grid; - grid-template-columns: repeat(4, minmax(0, 1fr)); - gap: 12px; -} - -.root :global(.opportunity-empty-state) { - display: flex; - min-height: 168px; - align-items: center; - justify-content: center; - padding: 0 18px; - border: 1px dashed rgba(34, 211, 238, 0.2); - border-radius: 16px; - background: - radial-gradient( - circle at 50% 0%, - rgba(34, 211, 238, 0.08), - transparent 44% - ), - rgba(7, 12, 22, 0.72); -} - -.root :global(.opportunity-empty-copy) { - display: grid; - gap: 6px; - justify-items: center; - text-align: center; -} - -.root :global(.opportunity-empty-copy strong) { - color: rgba(241, 245, 249, 0.94); - font-size: 15px; - font-weight: 800; -} - -.root :global(.opportunity-empty-copy span) { - color: rgba(148, 163, 184, 0.88); - font-size: 12px; - line-height: 1.6; -} - -.root :global(.opportunity-mini-card) { - position: relative; - overflow: hidden; - min-width: 0; - display: flex; - flex-direction: column; - gap: 12px; - min-height: 152px; - padding: 14px; - border: 1px solid rgba(148, 163, 184, 0.14); - border-radius: 18px; - background: - radial-gradient( - circle at 100% 0%, - rgba(30, 64, 175, 0.12), - transparent 32% - ), - rgba(10, 16, 28, 0.84); - color: inherit; - cursor: pointer; - font: inherit; - text-align: left; - transition: - transform 160ms ease, - border-color 160ms ease, - background 160ms ease; -} - -.root :global(.opportunity-mini-card:hover) { - transform: translateY(-2px); - border-color: rgba(34, 211, 238, 0.32); - background: - radial-gradient( - circle at 100% 0%, - rgba(30, 64, 175, 0.18), - transparent 32% - ), - rgba(15, 23, 42, 0.92); -} - -.root :global(.opportunity-mini-head) { - display: flex; - align-items: flex-start; - justify-content: space-between; - gap: 8px; -} - -.root :global(.opportunity-mini-rank) { - width: 30px; - height: 30px; - border-radius: 12px; - border: 1px solid rgba(148, 163, 184, 0.2); - display: inline-flex; - align-items: center; - justify-content: center; - color: #f8fafc; - font-size: 13px; - font-weight: 800; - flex-shrink: 0; - background: rgba(6, 11, 23, 0.46); -} - -.root :global(.opportunity-mini-copy) { - display: flex; - min-width: 0; - flex: 1; - flex-direction: column; - gap: 6px; -} - -.root :global(.opportunity-pill) { - margin-left: auto; - padding: 4px 8px; - border-radius: 999px; - font-size: 10px; - font-weight: 800; - border: 1px solid rgba(148, 163, 184, 0.18); - color: rgba(226, 232, 240, 0.86); -} - -.root :global(.opportunity-pill.high) { - color: #fda4af; - border-color: rgba(251, 113, 133, 0.26); -} - -.root :global(.opportunity-pill.medium) { - color: #fbbf24; - border-color: rgba(251, 191, 36, 0.24); -} - -.root :global(.opportunity-pill.low) { - color: #4ade80; - border-color: rgba(74, 222, 128, 0.24); -} - -.root :global(.opportunity-mini-copy strong) { - overflow: hidden; - color: #f8fafc; - font-size: 15px; - font-weight: 800; - text-overflow: ellipsis; - white-space: nowrap; -} - -.root :global(.opportunity-mini-copy p) { - display: -webkit-box; - overflow: hidden; - color: rgba(203, 213, 225, 0.88); - font-size: 11px; - line-height: 1.45; - min-height: 32px; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; -} - -.root :global(.opportunity-mini-metrics) { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 10px; -} - -.root :global(.opportunity-yes) { - color: #22d3ee; - font-size: 12px; - font-weight: 800; -} - -.root :global(.opportunity-no) { - color: #fda4af; - font-size: 12px; - font-weight: 800; -} - -.root :global(.opportunity-edge) { - color: rgba(34, 211, 238, 0.9); - font-size: 18px; - font-weight: 800; -} - -.root :global(.opportunity-mini-sparkline) { - width: 100%; - height: 28px; - margin-top: auto; -} - -.root :global(.opportunity-mini-sparkline polyline) { - fill: none; - stroke: #18e6d4; - stroke-width: 2; - stroke-linecap: round; - stroke-linejoin: round; - filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.22)); -} - -/* ── Light Theme Dashboard Overrides ── */ -:global(html.light) .root { - background: - radial-gradient( - circle at 22% 12%, - rgba(14, 165, 233, 0.16), - transparent 28% - ), - radial-gradient( - circle at 78% 0%, - rgba(59, 130, 246, 0.12), - transparent 24% - ), - linear-gradient(180deg, #f8fbff 0%, #e7f1fb 100%); -} - -:global(html.light) .root :global(.map) { - background: #dfeefa; - border-color: rgba(36, 68, 104, 0.18); - filter: none; - box-shadow: - 0 28px 80px rgba(31, 64, 104, 0.18), - inset 0 1px 0 rgba(255, 255, 255, 0.86); -} - -:global(html.light) .root :global(.map .leaflet-tile) { - filter: saturate(1.08) contrast(0.98) brightness(1.02); -} - -:global(html.light) .weatherAura { - opacity: 0.22; - mix-blend-mode: multiply; -} - -:global(html.light) .weatherAuraScrim { - background: - linear-gradient( - 180deg, - rgba(248, 252, 255, 0.2) 0%, - rgba(248, 252, 255, 0.08) 42%, - rgba(226, 239, 250, 0.28) 100% - ), - radial-gradient( - circle at 50% 58%, - rgba(14, 165, 233, 0.08) 0%, - rgba(14, 165, 233, 0) 52% - ); -} - -:global(html.light) .root :global(.home-panel-city h2), -:global(html.light) .root :global(.home-weather-main strong), -:global(html.light) .root :global(.home-weather-stat strong), -:global(html.light) .root :global(.home-deb-card strong), -:global(html.light) .root :global(.home-card-section h3), -:global(html.light) .root :global(.opportunity-strip-copy strong), -:global(html.light) .root :global(.opportunity-hero-title-row strong), -:global(html.light) .root :global(.opportunity-hero-metric strong), -:global(html.light) .root :global(.opportunity-hero-edgeblock strong), -:global(html.light) .root :global(.opportunity-book-side strong), -:global(html.light) .root :global(.opportunity-side-stat b), -:global(html.light) .root :global(.opportunity-mini-copy strong), -:global(html.light) .root :global(.city-item .city-name-text) { - color: #0b1726; -} - -:global(html.light) .root :global(.home-panel-subtitle), -:global(html.light) .root :global(.home-weather-sub), -:global(html.light) .root :global(.home-weather-label), -:global(html.light) .root :global(.home-weather-stat span), -:global(html.light) .root :global(.home-weather-stat small), -:global(html.light) .root :global(.home-deb-card small), -:global(html.light) .root :global(.home-card-section h3 small), -:global(html.light) .root :global(.opportunity-strip-kicker), -:global(html.light) .root :global(.opportunity-strip-copy p), -:global(html.light) .root :global(.opportunity-tape-pill span), -:global(html.light) .root :global(.opportunity-hero-kicker), -:global(html.light) .root :global(.opportunity-hero-date), -:global(html.light) .root :global(.opportunity-hero-copy p), -:global(html.light) .root :global(.opportunity-hero-metric span), -:global(html.light) .root :global(.opportunity-hero-edgeblock span), -:global(html.light) .root :global(.opportunity-hero-edgeblock em), -:global(html.light) .root :global(.opportunity-hero-footer), -:global(html.light) .root :global(.opportunity-side-tile-head span), -:global(html.light) .root :global(.opportunity-side-stat span), -:global(html.light) .root :global(.opportunity-mini-copy p), -:global(html.light) .root :global(.city-group-title), -:global(html.light) .root :global(.home-panel-kicker), -:global(html.light) .root :global(.home-panel-airport) { - color: rgba(66, 84, 108, 0.86); -} - -:global(html.light) .root :global(.header) { - background: rgba(248, 252, 255, 0.9); - border-bottom-color: rgba(36, 68, 104, 0.14); - box-shadow: 0 12px 34px rgba(31, 64, 104, 0.08); -} - -:global(html.light) .root :global(.brand-mark) { - background: rgba(255, 255, 255, 0.82); - border-color: rgba(14, 165, 233, 0.24); - box-shadow: - inset 0 0 0 1px rgba(255, 255, 255, 0.72), - 0 10px 24px rgba(31, 64, 104, 0.12); -} - -:global(html.light) .root :global(.locale-switch) { - background: rgba(255, 255, 255, 0.82); - border-color: rgba(36, 68, 104, 0.16); - color: rgba(66, 84, 108, 0.78); -} - -:global(html.light) .root :global(.locale-switch span.active) { - color: #075985; - background: rgba(14, 165, 233, 0.14); - box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.22); -} - -:global(html.light) .root :global(.city-list), -:global(html.light) .root :global(.home-intelligence-panel), -:global(html.light) .root :global(.home-opportunity-strip) { - background: - radial-gradient( - circle at 12% 0%, - rgba(14, 165, 233, 0.08), - transparent 34% - ), - rgba(248, 252, 255, 0.9); - border-color: rgba(36, 68, 104, 0.16); - box-shadow: 0 28px 70px rgba(31, 64, 104, 0.14); - color: #0b1726; -} - -:global(html.light) .root :global(.home-summary-card), -:global(html.light) .root :global(.opportunity-hero-card), -:global(html.light) .root :global(.opportunity-side-tile), -:global(html.light) .root :global(.opportunity-mini-card), -:global(html.light) .root :global(.opportunity-tape-pill), -:global(html.light) .root :global(.opportunity-hero-metric), -:global(html.light) .root :global(.opportunity-book-side), -:global(html.light) .root :global(.opportunity-hero-sparkline-wrap), -:global(html.light) .root :global(.home-deb-card), -:global(html.light) .root :global(.home-card-section), -:global(html.light) .root :global(.home-metric-card), -:global(html.light) .root :global(.home-forecast-item), -:global(html.light) .root :global(.home-intraday-reports span) { - background: - radial-gradient( - circle at 100% 0%, - rgba(14, 165, 233, 0.08), - transparent 36% - ), - rgba(255, 255, 255, 0.92); - border-color: rgba(36, 68, 104, 0.14); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82); - color: #0b1726; -} - -:global(html.light) .root :global(.home-weather-hero) { - background: linear-gradient( - 135deg, - rgba(238, 246, 255, 0.98), - rgba(216, 233, 248, 0.92) - ); - border-color: rgba(36, 68, 104, 0.14); -} - -:global(html.light) .root :global(.home-card-section.intraday), -:global(html.light) .root :global(.home-card-section.probability) { - background: - radial-gradient(circle at 0% 25%, rgba(14, 165, 233, 0.1), transparent 42%), - rgba(255, 255, 255, 0.92); -} - -:global(html.light) .root :global(.home-intraday-chart line) { - stroke: rgba(66, 84, 108, 0.16); -} - -:global(html.light) .root :global(.home-intraday-reports strong), -:global(html.light) .root :global(.home-probability-threshold), -:global(html.light) .root :global(.home-market-question strong), -:global(html.light) .root :global(.home-market-metrics strong), -:global(html.light) .root :global(.home-forecast-item strong) { - color: #0b1726; -} - -:global(html.light) .root :global(.home-probability-row div), -:global(html.light) .root :global(.home-probability-track) { - background: rgba(37, 57, 82, 0.12); -} - -:global(html.light) .root :global(.city-group) { - background: rgba(255, 255, 255, 0.54); - border-color: rgba(36, 68, 104, 0.12); -} - -:global(html.light) .root :global(.city-group-header:hover), -:global(html.light) .root :global(.city-item:hover) { - background: rgba(221, 235, 250, 0.86); -} - -:global(html.light) .root :global(.city-item.active) { - background: - linear-gradient(90deg, rgba(14, 165, 233, 0.18), rgba(14, 165, 233, 0.06)), - rgba(255, 255, 255, 0.88); - border-color: rgba(14, 165, 233, 0.42); -} - -:global(html.light) .root :global(.leaflet-control-attribution), -:global(html.light) .root :global(.leaflet-control-zoom a) { - background: rgba(248, 252, 255, 0.86) !important; - border-color: rgba(36, 68, 104, 0.16) !important; - color: #0b1726 !important; -} - -@keyframes home-panel-enter { - from { - opacity: 0; - transform: translate3d(24px, 0, 0) scale(0.98); - } - to { - opacity: 1; - transform: translate3d(0, 0, 0) scale(1); - } -} - -@keyframes opportunity-strip-enter { - from { - opacity: 0; - transform: translate3d(0, 22px, 0); - } - to { - opacity: 1; - transform: translate3d(0, 0, 0); - } -} - -@keyframes home-signal-wave { - 0%, - 100% { - transform: scaleY(0.72); - opacity: 0.68; - } - 50% { - transform: scaleY(1); - opacity: 1; - } -} - -@media (max-width: 1360px) { - .root :global(.map) { - right: 18px; - } - - .root :global(.home-intelligence-panel) { - display: none; - } - - .root :global(.home-opportunity-strip) { - right: 18px; - } -} - -@media (max-width: 1280px) { - .root :global(.opportunity-strip-topline) { - flex-direction: column; - } - - .root :global(.opportunity-strip-tape) { - max-width: none; - justify-content: flex-start; - } - - .root :global(.opportunity-hero-metrics) { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - - .root :global(.opportunity-hero-book) { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - - .root :global(.opportunity-hero-sparkline-wrap) { - grid-column: 1 / -1; - } - - .root :global(.opportunity-mini-grid) { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } -} - -@media (max-width: 1024px) { - .root :global(.map) { - left: 18px; - bottom: 188px; - } - - .root :global(.home-opportunity-strip) { - left: 18px; - } - - .root :global(.opportunity-strip-main) { - grid-template-columns: 1fr; - } - - .root :global(.opportunity-side-grid) { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } -} - -@media (max-width: 768px) { - .root :global(.map) { - inset: var(--header-height) 0 0; - border-radius: 0; - border-left: 0; - border-right: 0; - } - - .root :global(.home-opportunity-strip) { - display: none; - } -} diff --git a/frontend/components/dashboard/DashboardMap.module.css b/frontend/components/dashboard/DashboardMap.module.css deleted file mode 100644 index a2edab6d..00000000 --- a/frontend/components/dashboard/DashboardMap.module.css +++ /dev/null @@ -1,840 +0,0 @@ -/* ── Map ── */ -.root :global(.map) { - position: absolute; - top: calc(var(--header-height) + 16px); - right: 392px; - bottom: 164px; - left: calc(var(--sidebar-width) + 22px); - z-index: 1; - overflow: hidden; - border: 1px solid rgba(115, 137, 161, 0.16); - border-radius: 24px; - background: #040912; - box-shadow: - 0 32px 100px rgba(0, 0, 0, 0.5), - inset 0 1px 0 rgba(255, 255, 255, 0.04), - inset 0 0 0 1px rgba(0, 224, 164, 0.04); -} - -.weatherAura { - position: absolute; - inset: 0; - z-index: 2; - pointer-events: none; - opacity: 0.96; - mix-blend-mode: screen; - overflow: hidden; -} - -.weatherAura :global(canvas) { - width: 100%; - height: 100%; - display: block; - opacity: 0.94; - filter: saturate(1.05) blur(0.3px); -} - -.weatherAuraScrim { - position: absolute; - inset: 0; - background: - linear-gradient( - 180deg, - rgba(3, 8, 19, 0.64) 0%, - rgba(5, 10, 20, 0.16) 24%, - rgba(4, 8, 18, 0.1) 54%, - rgba(3, 6, 14, 0.42) 100% - ), - radial-gradient( - circle at 50% 60%, - rgba(0, 224, 164, 0.08) 0%, - rgba(123, 97, 255, 0) 48% - ); -} - -.weatherAura[data-reduced-motion="true"] :global(canvas) { - display: none; -} - -.root :global(.map .leaflet-tile), -.root :global(.map .leaflet-marker-icon), -.root :global(.map .leaflet-marker-shadow), -.root :global(.map .leaflet-container img), -.root :global(.map .leaflet-container svg) { - max-width: none !important; - max-height: none !important; -} - -.root :global(.map .leaflet-tile) { - width: 256px !important; - height: 256px !important; -} - -/* Remove Leaflet default styling for cleaner look */ -.root :global(.leaflet-control-attribution) { - background: var(--bg-glass) !important; - color: var(--text-muted) !important; - backdrop-filter: blur(8px); - border: 1px solid var(--border-subtle) !important; - font-size: 10px !important; - border-radius: 6px !important; - padding: 2px 8px !important; -} -.root :global(.leaflet-control-attribution a) { - color: var(--text-secondary) !important; -} -.root :global(.leaflet-control-zoom) { - border: none !important; - box-shadow: var(--shadow-lg) !important; -} -.root :global(.leaflet-control-zoom a) { - background: var(--bg-glass) !important; - color: var(--text-primary) !important; - backdrop-filter: blur(12px) !important; - border: 1px solid var(--border-glass) !important; - width: 36px !important; - height: 36px !important; - line-height: 36px !important; - font-size: 16px !important; - border-radius: 8px !important; - transition: var(--transition); -} -.root :global(.leaflet-control-zoom a:hover) { - background: rgba(99, 102, 241, 0.2) !important; - border-color: var(--accent-blue) !important; -} - -/* ── Custom Map Markers ── */ -.root :global(.city-marker) { - position: relative; - display: flex; - flex-direction: column; - align-items: center; - cursor: pointer; - /* Remove transition: transform to avoid fighting with Leaflet's own positioning */ -} -.root :global(.city-marker:hover) { - transform: scale(1.15); - z-index: 1000 !important; -} - -.root :global(.marker-bubble) { - min-width: 44px; - padding: 4px 10px; - border-radius: 14px; - font-family: "Inter", sans-serif; - font-size: 13px; - font-weight: 700; - text-align: center; - color: white; - white-space: nowrap; - position: relative; - box-shadow: - 0 6px 18px rgba(0, 0, 0, 0.42), - 0 0 0 1px rgba(255, 255, 255, 0.04); - border: 1px solid rgba(255, 255, 255, 0.14); -} - -.root :global(.marker-bubble::after) { - content: ""; - position: absolute; - bottom: -6px; - left: 50%; - transform: translateX(-50%); - width: 0; - height: 0; - border-left: 6px solid transparent; - border-right: 6px solid transparent; - border-top: 6px solid; - border-top-color: inherit; -} - -.root :global(.marker-bubble.risk-high) { - background: linear-gradient(135deg, #991b1b, #fb7185); - border-color: rgba(251, 113, 133, 0.42); - box-shadow: - 0 6px 18px rgba(0, 0, 0, 0.42), - 0 0 22px rgba(251, 113, 133, 0.18); -} -.root :global(.marker-bubble.risk-high::after) { - border-top-color: var(--color-signal-danger); -} - -.root :global(.marker-bubble.risk-medium) { - background: linear-gradient(135deg, #9a3412, #f59e0b); - border-color: rgba(245, 158, 11, 0.42); - box-shadow: - 0 6px 18px rgba(0, 0, 0, 0.42), - 0 0 22px rgba(245, 158, 11, 0.16); -} -.root :global(.marker-bubble.risk-medium::after) { - border-top-color: var(--color-signal-warning); -} - -.root :global(.marker-bubble.risk-low) { - background: linear-gradient(135deg, #065f46, #22c55e); - border-color: rgba(74, 222, 128, 0.42); - box-shadow: - 0 6px 18px rgba(0, 0, 0, 0.42), - 0 0 22px rgba(74, 222, 128, 0.14); -} -.root :global(.marker-bubble.risk-low::after) { - border-top-color: var(--color-signal-success); -} - -.root :global(.marker-name) { - font-size: 10px; - font-weight: 600; - color: rgba(255, 255, 255, 0.85); - text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); - margin-top: 2px; - white-space: nowrap; -} - -/* Marker glow animation for selected city */ -.root :global(.city-marker.selected .marker-bubble) { - animation: markerGlow 2s ease-in-out infinite; -} -@keyframes markerGlow { - 0%, - 100% { - box-shadow: - 0 6px 18px rgba(0, 0, 0, 0.42), - 0 0 24px rgba(34, 211, 238, 0.12); - } - 50% { - box-shadow: - 0 6px 26px rgba(0, 0, 0, 0.46), - 0 0 20px rgba(34, 211, 238, 0.24), - 0 0 46px rgba(34, 211, 238, 0.14); - } -} - -/* ── Loading Overlay ── */ -.root :global(.loading-overlay) { - position: fixed; - inset: 0; - z-index: 2000; - background: radial-gradient( - circle at 50% 50%, - rgba(8, 14, 32, 0.76) 0%, - rgba(4, 8, 22, 0.9) 44%, - rgba(2, 6, 20, 0.96) 100% - ); - display: flex; - align-items: center; - justify-content: center; - backdrop-filter: blur(12px); -} - -.root :global(.loading-card) { - display: flex; - flex-direction: column; - align-items: center; - gap: 22px; - min-width: 240px; - padding: 28px 32px; - border-radius: 28px; - background: linear-gradient( - 180deg, - rgba(10, 18, 36, 0.78) 0%, - rgba(8, 14, 30, 0.62) 100% - ); - border: 1px solid rgba(92, 142, 255, 0.16); - box-shadow: - 0 24px 90px rgba(0, 0, 0, 0.42), - inset 0 1px 0 rgba(255, 255, 255, 0.04); -} - -.root :global(.loading-clouds) { - position: relative; - width: 220px; - height: 26px; - overflow: hidden; -} - -.root :global(.loading-cloud) { - position: absolute; - top: 0; - height: 18px; - border-radius: 999px; - background: - radial-gradient( - circle at 30% 50%, - rgba(186, 230, 253, 0.22), - transparent 54% - ), - linear-gradient( - 180deg, - rgba(148, 163, 184, 0.28) 0%, - rgba(71, 85, 105, 0.1) 100% - ); - filter: blur(0.3px); - box-shadow: - 0 6px 24px rgba(56, 189, 248, 0.06), - inset 0 1px 0 rgba(255, 255, 255, 0.08); - animation: cloud-drift 6.8s ease-in-out infinite; -} - -.root :global(.loading-cloud-1) { - left: 12px; - width: 76px; -} - -.root :global(.loading-cloud-2) { - right: 8px; - top: 7px; - width: 98px; - opacity: 0.75; - animation-delay: -2.6s; -} - -.root :global(.loading-windfield) { - position: relative; - width: 220px; - height: 30px; - overflow: hidden; - opacity: 0.9; -} - -.root :global(.loading-windline) { - position: absolute; - left: -28%; - height: 1px; - border-radius: 999px; - background: linear-gradient( - 90deg, - rgba(34, 211, 238, 0) 0%, - rgba(103, 232, 249, 0.5) 22%, - rgba(125, 211, 252, 0.9) 55%, - rgba(34, 211, 238, 0) 100% - ); - filter: blur(0.2px); - animation: wind-shift 2.8s linear infinite; -} - -.root :global(.loading-windline-1) { - top: 4px; - width: 124px; -} - -.root :global(.loading-windline-2) { - top: 13px; - width: 176px; - animation-delay: -0.9s; - opacity: 0.82; -} - -.root :global(.loading-windline-3) { - top: 22px; - width: 142px; - animation-delay: -1.6s; - opacity: 0.66; -} - -.root :global(.loading-copy) { - display: flex; - flex-direction: column; - align-items: center; - gap: 8px; - text-align: center; -} - -.root :global(.loading-copy strong) { - font-size: 13px; - font-weight: 700; - letter-spacing: 0.22em; - text-transform: uppercase; - color: rgba(103, 232, 249, 0.92); -} - -.root :global(.loading-copy span) { - max-width: 240px; - font-size: 13px; - font-weight: 500; - line-height: 1.55; - color: rgba(203, 213, 225, 0.82); -} - -.root :global(.loading-radar) { - position: relative; - width: 108px; - height: 108px; - border-radius: 50%; - background: radial-gradient( - circle, - rgba(22, 78, 99, 0.16) 0%, - rgba(7, 18, 36, 0.08) 48%, - rgba(5, 10, 22, 0.02) 76%, - transparent 100% - ); - box-shadow: - inset 0 0 0 1px rgba(56, 189, 248, 0.12), - 0 0 40px rgba(34, 211, 238, 0.08); -} - -.root :global(.loading-radar-core) { - position: absolute; - top: 50%; - left: 50%; - width: 14px; - height: 14px; - border-radius: 50%; - background: radial-gradient(circle, var(--color-accent-secondary) 0%, #0891b2 100%); - transform: translate(-50%, -50%); - box-shadow: - 0 0 12px rgba(34, 211, 238, 0.65), - 0 0 28px rgba(59, 130, 246, 0.25); -} - -.root :global(.loading-radar-ring) { - position: absolute; - inset: 0; - border-radius: 50%; - border: 1px solid rgba(56, 189, 248, 0.14); -} - -.root :global(.loading-radar-ring-1) { - transform: scale(0.62); -} - -.root :global(.loading-radar-ring-2) { - transform: scale(0.88); -} - -.root :global(.loading-radar-sweep) { - position: absolute; - inset: 6px; - border-radius: 50%; - background: conic-gradient( - from 90deg, - rgba(34, 211, 238, 0) 0deg, - rgba(34, 211, 238, 0) 260deg, - rgba(34, 211, 238, 0.3) 312deg, - rgba(96, 165, 250, 0.06) 360deg - ); - mask: radial-gradient(circle, transparent 0 22px, #000 23px); - animation: radar-sweep 2.4s linear infinite; -} - -.root :global(.loading-radar-blip) { - position: absolute; - width: 8px; - height: 8px; - border-radius: 50%; - background: rgba(253, 224, 71, 0.92); - box-shadow: 0 0 12px rgba(253, 224, 71, 0.45); - animation: radar-blip 1.8s ease-in-out infinite; -} - -.root :global(.loading-radar-blip-1) { - top: 26px; - right: 24px; - animation-delay: 0.15s; -} - -.root :global(.loading-radar-blip-2) { - bottom: 25px; - left: 20px; - background: rgba(74, 222, 128, 0.9); - box-shadow: 0 0 12px rgba(74, 222, 128, 0.4); - animation-delay: 0.9s; -} - -.root :global(.loading-thermals) { - display: flex; - align-items: end; - gap: 8px; - height: 28px; -} - -.root :global(.loading-thermal) { - width: 10px; - border-radius: 999px; - background: linear-gradient( - 180deg, - rgba(251, 191, 36, 0.15) 0%, - rgba(251, 146, 60, 0.8) 55%, - rgba(239, 68, 68, 0.9) 100% - ); - box-shadow: 0 0 18px rgba(251, 146, 60, 0.18); - animation: thermal-rise 1.5s ease-in-out infinite; - transform-origin: center bottom; -} - -.root :global(.loading-thermal-1) { - height: 11px; - animation-delay: 0s; -} - -.root :global(.loading-thermal-2) { - height: 22px; - animation-delay: 0.2s; -} - -.root :global(.loading-thermal-3) { - height: 16px; - animation-delay: 0.42s; -} - -.root :global(.loading-thermal-4) { - height: 25px; - animation-delay: 0.68s; -} - -.root :global(.loading-drizzle) { - position: relative; - width: 220px; - height: 26px; - overflow: hidden; - opacity: 0.88; -} - -.root :global(.loading-drizzle-drop) { - position: absolute; - top: -2px; - width: 2px; - height: 16px; - border-radius: 999px; - background: linear-gradient( - 180deg, - rgba(125, 211, 252, 0) 0%, - rgba(125, 211, 252, 0.9) 100% - ); - box-shadow: 0 0 8px rgba(56, 189, 248, 0.12); - animation: drizzle-fall 1.35s linear infinite; -} - -.root :global(.loading-drizzle-drop-1) { - left: 38px; - animation-delay: -0.1s; -} - -.root :global(.loading-drizzle-drop-2) { - left: 76px; - height: 18px; - animation-delay: -0.52s; -} - -.root :global(.loading-drizzle-drop-3) { - left: 112px; - height: 14px; - animation-delay: -0.92s; -} - -.root :global(.loading-drizzle-drop-4) { - left: 156px; - height: 17px; - animation-delay: -0.38s; -} - -.root :global(.loading-drizzle-drop-5) { - left: 192px; - height: 13px; - animation-delay: -0.74s; -} - -.root :global(.loading-overlay.hidden) { - display: none; -} - -.root :global(.loading-spinner) { - width: 48px; - height: 48px; - border: 2px solid rgba(34, 211, 238, 0.1); - border-top-color: var(--accent-cyan); - border-radius: 50%; - animation: spin 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite; - box-shadow: 0 0 15px rgba(34, 211, 238, 0.1); -} - - -@keyframes city-loading-pulse { - 0% { - transform: scale(0.92); - box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.44); - } - 70% { - transform: scale(1); - box-shadow: 0 0 0 10px rgba(34, 211, 238, 0); - } - 100% { - transform: scale(0.92); - box-shadow: 0 0 0 0 rgba(34, 211, 238, 0); - } -} - -@keyframes radar-sweep { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -@keyframes radar-blip { - 0%, - 100% { - opacity: 0.2; - transform: scale(0.72); - } - 40% { - opacity: 1; - transform: scale(1); - } - 60% { - opacity: 0.9; - transform: scale(1.18); - } -} - -@keyframes wind-shift { - from { - transform: translateX(0); - opacity: 0; - } - 18% { - opacity: 0.9; - } - 82% { - opacity: 0.78; - } - to { - transform: translateX(145%); - opacity: 0; - } -} - -@keyframes thermal-rise { - 0%, - 100% { - transform: scaleY(0.78); - opacity: 0.72; - } - 50% { - transform: scaleY(1.14); - opacity: 1; - } -} - -@keyframes cloud-drift { - 0%, - 100% { - transform: translateX(0); - opacity: 0.7; - } - 50% { - transform: translateX(12px); - opacity: 0.95; - } -} - -@keyframes drizzle-fall { - 0% { - transform: translateY(-3px); - opacity: 0; - } - 20% { - opacity: 0.9; - } - 100% { - transform: translateY(18px); - opacity: 0; - } -} - -/* ── Nearby Stations (Premium Glassmorphism) ── */ -.root :global(.nearby-marker-premium) { - display: flex; - align-items: center; - gap: 10px; - background: rgba(10, 14, 26, 0.75); - backdrop-filter: blur(12px); - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 999px; /* Pill shape */ - padding: 5px 14px 5px 10px; - box-shadow: - 0 8px 32px rgba(0, 0, 0, 0.4), - inset 0 1px 1px rgba(255, 255, 255, 0.05); - pointer-events: none; - white-space: nowrap; -} - -.root :global(.nearby-marker-shell) { - display: inline-block; - will-change: transform; -} - -@keyframes nearby-fade-in { - from { - opacity: 0; - transform: scale(0.9) translateY(4px); - } - to { - opacity: 1; - transform: scale(1) translateY(0); - } -} - -.root :global(.nearby-pulse) { - position: relative; - width: 12px; - height: 12px; - flex-shrink: 0; -} - -.root :global(.pulse-core) { - position: absolute; - top: 50%; - left: 50%; - width: 6px; - height: 6px; - background: var(--accent-cyan); - border-radius: 50%; - transform: translate(-50%, -50%); - box-shadow: 0 0 8px var(--accent-cyan); -} - -.root :global(.pulse-ring) { - position: absolute; - top: 50%; - left: 50%; - width: 100%; - height: 100%; - border: 1.5px solid var(--accent-cyan); - border-radius: 50%; - transform: translate(-50%, -50%); - opacity: 0.3; - box-shadow: 0 0 10px rgba(34, 211, 238, 0.18); -} - -.root :global(.nearby-content) { - display: flex; - flex-direction: column; - line-height: 1.1; -} - -.root :global(.nearby-label) { - font-size: 9px; - font-weight: 700; - text-transform: uppercase; - color: var(--text-muted); - letter-spacing: 0.05em; -} - -.root :global(.nearby-stats) { - display: flex; - align-items: baseline; - gap: 2px; -} - -.root :global(.nearby-temp-val) { - font-size: 13px; - font-weight: 800; - color: var(--text-primary); - text-shadow: 0 0 12px rgba(255, 255, 255, 0.1); -} - -.root :global(.nearby-temp-unit) { - font-size: 10px; - color: var(--text-muted); -} - -.root :global(.nearby-time) { - display: flex; - align-items: center; - gap: 4px; - margin-top: 3px; - font-size: 11px; - font-weight: 700; - color: rgba(203, 213, 225, 0.95); - white-space: nowrap; -} - -.root :global(.nearby-time span + span)::before { - content: "·"; - margin-right: 4px; - color: rgba(148, 163, 184, 0.55); -} - -.root :global(.nearby-time.is-stale) { - color: var(--color-signal-warning); -} - -.root :global(.nearby-wind) { - display: flex; - align-items: center; - gap: 4px; - padding-left: 10px; - margin-left: 2px; - border-left: 1px solid rgba(255, 255, 255, 0.1); -} - -.root :global(.nearby-wind .wind-arrow) { - font-size: 12px; - color: var(--accent-cyan); - text-shadow: 0 0 8px rgba(34, 211, 238, 0.4); -} - -.root :global(.nearby-wind .wind-val) { - font-size: 11px; - font-weight: 600; - color: var(--text-secondary); -} - -/* ── Trend badge ── */ -.root :global(.trend-badge) { - display: inline-flex; - align-items: center; - gap: 4px; - padding: 3px 10px; - border-radius: 6px; - font-size: 11px; - font-weight: 600; -} -.root :global(.trend-badge.rising) { - background: rgba(34, 197, 94, 0.12); - color: var(--accent-green); - border: 1px solid rgba(34, 197, 94, 0.25); -} -.root :global(.trend-badge.falling) { - background: rgba(248, 113, 113, 0.12); - color: var(--accent-red); - border: 1px solid rgba(248, 113, 113, 0.25); -} -.root :global(.trend-badge.stagnant) { - background: rgba(251, 191, 36, 0.12); - color: var(--accent-yellow); - border: 1px solid rgba(251, 191, 36, 0.25); -} -.root :global(.trend-badge.mixed) { - background: rgba(167, 139, 250, 0.12); - color: var(--accent-purple); - border: 1px solid rgba(167, 139, 250, 0.25); -} - -.root :global(.dead-market) { - display: inline-flex; - align-items: center; - gap: 4px; - padding: 3px 10px; - border-radius: 6px; - font-size: 11px; - font-weight: 700; - background: rgba(248, 113, 113, 0.15); - color: var(--accent-red); - border: 1px solid rgba(248, 113, 113, 0.3); - animation: deadPulse 2s ease-in-out infinite; -} -@keyframes deadPulse { - 0%, - 100% { - opacity: 1; - } - 50% { - opacity: 0.6; - } -} - -@keyframes spin { to { transform: rotate(360deg); } } diff --git a/frontend/components/dashboard/scan-root-styles.ts b/frontend/components/dashboard/scan-root-styles.ts index 7a1241ad..e7a67474 100644 --- a/frontend/components/dashboard/scan-root-styles.ts +++ b/frontend/components/dashboard/scan-root-styles.ts @@ -4,8 +4,6 @@ import clsx from "clsx"; -import dashboardHomeStyles from "./DashboardHomeIntelligence.module.css"; -import dashboardMapStyles from "./DashboardMap.module.css"; import dashboardModalGuideStyles from "./DashboardModalGuide.module.css"; import dashboardShellStyles from "./DashboardShell.module.css"; import detailChromeStyles from "./DetailPanelChrome.module.css"; @@ -26,8 +24,6 @@ import scanTerminalContinentStyles from "./ScanTerminalContinent.module.css"; import scanTerminalStateStyles from "./ScanTerminalState.module.css"; export const scanRootClass = clsx( - dashboardHomeStyles.root, - dashboardMapStyles.root, dashboardShellStyles.root, dashboardModalGuideStyles.root, scanTerminalStyles.root,