77 lines
2.4 KiB
CSS
77 lines
2.4 KiB
CSS
/* ════════════════════════════════════════════════════════
|
|
* page-growth.css — Turn A
|
|
* 對應 growth_analysis.html 原 inline <style>
|
|
* 全部 token 化、scope 至 .growth-analysis-page
|
|
* ════════════════════════════════════════════════════════ */
|
|
|
|
.growth-analysis-page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--momo-space-3, 18px);
|
|
}
|
|
|
|
.growth-analysis-page .card {
|
|
border: 1px solid var(--momo-border-strong);
|
|
border-radius: var(--momo-radius-md, 8px);
|
|
box-shadow: var(--momo-shadow-soft);
|
|
margin-bottom: 1.5rem;
|
|
background: var(--momo-surface-1, rgba(255, 253, 248, 0.94));
|
|
}
|
|
|
|
.growth-analysis-page .card-header {
|
|
background: var(--momo-surface-2, rgba(250, 247, 240, 0.9));
|
|
border-bottom: 1px solid var(--momo-border-subtle);
|
|
font-weight: 800;
|
|
color: var(--momo-text-strong);
|
|
padding: 1rem 1.25rem;
|
|
}
|
|
|
|
/* ── KPI 卡片 ────────────────────────────────────────── */
|
|
.growth-analysis-page .kpi-card {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border: none;
|
|
}
|
|
.growth-analysis-page .kpi-card .icon-bg {
|
|
position: absolute;
|
|
right: -15px;
|
|
bottom: -15px;
|
|
font-size: 6rem;
|
|
opacity: 0.15;
|
|
transform: rotate(-15deg);
|
|
pointer-events: none;
|
|
}
|
|
.growth-analysis-page .kpi-value {
|
|
font-size: 2rem;
|
|
font-weight: 800;
|
|
letter-spacing: 0;
|
|
margin-bottom: 0.2rem;
|
|
}
|
|
.growth-analysis-page .kpi-label {
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* ── Bootstrap 覆寫：用 page palette 漸層取代原色 ─── */
|
|
.growth-analysis-page .bg-primary {
|
|
background: var(--momo-surface-raised) !important;
|
|
}
|
|
.growth-analysis-page .bg-success {
|
|
background: var(--momo-surface-raised) !important;
|
|
}
|
|
.growth-analysis-page .bg-info {
|
|
background: var(--momo-surface-raised) !important;
|
|
}
|
|
|
|
/* ── 趨勢色 ─────────────────────────────────────────── */
|
|
.growth-analysis-page .text-success,
|
|
.growth-analysis-page .trend-up {
|
|
color: var(--momo-warm-honey, #c89043) !important;
|
|
}
|
|
.growth-analysis-page .trend-down {
|
|
color: var(--momo-warm-rust, #b5342f) !important;
|
|
}
|