2569718930@qq.com
2b1d7c0b65
The dashboard had several oversized orchestration, component, and CSS files that made product-copy changes and mobile/performance work risky. This refactor preserves behavior while splitting scan terminal CSS, opportunity helpers, future forecast panels, history/detail charts, and probability/model sections into smaller ownership boundaries. Constraint: No user-visible version bump because this batch is architecture and performance cleanup, not a release announcement. Rejected: Rewrite dashboard state management in the same batch | too broad for a safe upload after CSS and component splitting. Confidence: high Scope-risk: moderate Reversibility: clean Directive: Keep new component/CSS boundaries instead of moving product copy back into the large dashboard files. Tested: npm run build; npm run test:business; git diff --check Not-tested: Browser visual smoke test after push
2249 lines
50 KiB
CSS
2249 lines
50 KiB
CSS
/* ── 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: #6FB7FF;
|
|
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: 650;
|
|
}
|
|
|
|
.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: #6FB7FF;
|
|
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: #4DA3FF;
|
|
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: #6FB7FF;
|
|
font-size: 12px;
|
|
font-weight: 850;
|
|
}
|
|
|
|
.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: 850;
|
|
}
|
|
|
|
.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: #4DA3FF;
|
|
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: 850;
|
|
}
|
|
|
|
.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: 750;
|
|
}
|
|
|
|
.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: #6FB7FF;
|
|
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: 850;
|
|
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: 860;
|
|
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: 760;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.root :global(.opportunity-tape-pill strong) {
|
|
color: #f8fafc;
|
|
font-size: 16px;
|
|
font-weight: 860;
|
|
line-height: 1;
|
|
}
|
|
|
|
.root :global(.opportunity-tape-pill.accent-cyan strong) {
|
|
color: #6FB7FF;
|
|
}
|
|
|
|
.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: #6FB7FF;
|
|
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: 880;
|
|
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: 720;
|
|
}
|
|
|
|
.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: 820;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.root :global(.opportunity-hero-tag.engine) {
|
|
border-color: rgba(34, 211, 238, 0.24);
|
|
color: #6FB7FF;
|
|
}
|
|
|
|
.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: 760;
|
|
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: 760;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.root :global(.opportunity-hero-metric strong) {
|
|
overflow: hidden;
|
|
color: #f8fafc;
|
|
font-size: 20px;
|
|
font-weight: 860;
|
|
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: 760;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.root :global(.opportunity-book-side strong) {
|
|
font-size: 26px;
|
|
font-weight: 880;
|
|
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: 760;
|
|
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: 790;
|
|
}
|
|
|
|
.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: 880;
|
|
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: 680;
|
|
}
|
|
|
|
.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: 840;
|
|
}
|
|
|
|
.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: 840;
|
|
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: 860;
|
|
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: 1240px) {
|
|
.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: 1020px) {
|
|
.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: 720px) {
|
|
.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;
|
|
}
|
|
}
|