wehub-resource-sync
439 lines
18 KiB
CSS
439 lines
18 KiB
CSS
|
|
/*
|
|
* ════════════════════════════════════════════════════════════
|
|
* LRS TQQQ 策略研究 — Design System & Typography Rules v2
|
|
* ════════════════════════════════════════════════════════════
|
|
*
|
|
* TYPOGRAPHY SCALE
|
|
* ┌──────────────────────────────────────────────────────────┐
|
|
* │ 元素 │ Size │ Weight │ Color │
|
|
* ├──────────────────────────────────────────────────────────┤
|
|
* │ 页面主标题 │ 2.4rem │ 900 │ #0F172A │
|
|
* │ 卡片/面板标题 (H2) │ 1.05rem │ 700 │ #1E293B │
|
|
* │ 编号徽章 (ch-num) │ 0.58rem │ 800 │ 主题色 │
|
|
* │ 正文 / 要点 │ 0.95rem │ 400 │ #475569 │
|
|
* │ 重点结论 (hi) │ 0.95rem │ 700 │ #B45309 琥珀 │
|
|
* │ 注释 / 斜体 │ 0.78rem │ 400 │ #64748B │
|
|
* │ 数字英雄 (big-num) │ 3.4rem │ 900 │ 主题色 │
|
|
* │ 指标卡大数字 (mc-value)│ 1.6rem │ 900 │ 主题色 │
|
|
* └──────────────────────────────────────────────────────────┘
|
|
*
|
|
* SEMANTIC COLORS
|
|
* 绿色 #16A34A → 正收益、盈利、策略优势、"是"分支
|
|
* 红色 #DC2626 → 亏损、风险、"否"分支
|
|
* 琥珀 #D97706 → 最重要结论（每卡片 ≤2 条）
|
|
* 靛蓝 #4F46E5 → 主强调（标签/数字/链接）
|
|
* 紫色 #7C3AED → 辅助强调
|
|
* 加粗 → 章节标题、关键数字、关键结论
|
|
* 斜体 → 注释、脚注、补充说明
|
|
* ════════════════════════════════════════════════════════════
|
|
*/
|
|
|
|
/* ── Reset ─────────────────────────────────────── */
|
|
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
|
|
|
|
/* Base: at 1280px → ~19px */
|
|
html { font-size: clamp(15px, 1.5vw, 20px); }
|
|
|
|
body {
|
|
background: #F1F5F9;
|
|
min-height: 100vh;
|
|
font-family: 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', system-ui, sans-serif;
|
|
color: #1E293B;
|
|
line-height: 1.6;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* ── Top Nav ───────────────────────────────────── */
|
|
.top-nav {
|
|
height: 44px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 1.6rem;
|
|
background: #FFFFFF;
|
|
border-bottom: 1.5px solid #E2E8F0;
|
|
box-shadow: 0 1px 4px rgba(0,0,0,0.05);
|
|
flex-shrink: 0;
|
|
gap: 0.8rem;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
.nav-brand {
|
|
font-size: 0.78rem; font-weight: 700; color: #4F46E5;
|
|
letter-spacing: 0.03em; text-decoration: none; flex-shrink: 0;
|
|
}
|
|
.nav-brand:hover { color: #3730A3; }
|
|
.nav-divider { width: 1px; height: 18px; background: #E2E8F0; flex-shrink: 0; }
|
|
.nav-chapter {
|
|
font-size: 0.76rem; font-weight: 600; color: #1E293B;
|
|
flex: 1; letter-spacing: 0.01em;
|
|
}
|
|
.nav-btn {
|
|
padding: 0.28rem 0.9rem;
|
|
background: #F8FAFC; border: 1.5px solid #E2E8F0;
|
|
color: #64748B; border-radius: 6px; cursor: pointer;
|
|
font-size: 0.72rem; font-family: inherit; font-weight: 600;
|
|
letter-spacing: 0.03em; text-decoration: none; transition: all .18s; flex-shrink: 0;
|
|
}
|
|
.nav-btn:hover { background: #EEF2FF; border-color: #A5B4FC; color: #4338CA; }
|
|
.nav-counter {
|
|
font-size: 0.68rem; color: #94A3B8;
|
|
font-family: 'Inter', sans-serif; font-weight: 600;
|
|
letter-spacing: 0.08em; flex-shrink: 0;
|
|
}
|
|
|
|
/* ── Main canvas ────────────────────────────────── */
|
|
main {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 1.5% 2.2% 1.2%;
|
|
height: calc(100vh - 44px);
|
|
min-height: 0;
|
|
}
|
|
|
|
/* ── Page Header ─────────────────────────────────── */
|
|
.page-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.9rem;
|
|
margin-bottom: 1.2%;
|
|
padding-bottom: 1%;
|
|
border-bottom: 1.5px solid #E2E8F0;
|
|
flex-shrink: 0;
|
|
}
|
|
.page-num {
|
|
font-size: 0.64rem; font-weight: 700; letter-spacing: 0.14em;
|
|
text-transform: uppercase; color: #4F46E5;
|
|
background: #EEF2FF; border: 1px solid #C7D2FE;
|
|
padding: 0.22rem 0.65rem; border-radius: 5px;
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
/* ① 页面主标题 */
|
|
.page-title {
|
|
font-family: 'Inter', 'Noto Sans SC', sans-serif;
|
|
font-size: 2.4rem; font-weight: 900; color: #0F172A;
|
|
letter-spacing: -0.04em; line-height: 1;
|
|
}
|
|
.page-sub {
|
|
font-size: 0.72rem; color: #94A3B8; font-weight: 500;
|
|
text-transform: uppercase; letter-spacing: 0.08em; margin-left: auto;
|
|
}
|
|
|
|
/* ── Grids ──────────────────────────────────────── */
|
|
.g3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.2%; flex: 1; min-height: 0; }
|
|
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2%; flex: 1; min-height: 0; }
|
|
.g21 { display: grid; grid-template-columns: 1.45fr 1fr; gap: 1.2%; flex: 1; min-height: 0; }
|
|
|
|
/* ── Card / Panel ────────────────────────────────── */
|
|
.card, .panel {
|
|
background: #FFFFFF;
|
|
border: 1.5px solid #E2E8F0;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-shadow: 0 1px 4px rgba(0,0,0,0.04);
|
|
transition: border-color .2s, box-shadow .2s;
|
|
min-height: 0;
|
|
}
|
|
.card:hover, .panel:hover {
|
|
border-color: #C7D2FE;
|
|
box-shadow: 0 4px 20px rgba(99,102,241,0.10);
|
|
}
|
|
|
|
/* Accent strip — 4px top */
|
|
.strip { height: 4px; flex-shrink: 0; }
|
|
.strip-amber { background: linear-gradient(90deg, #D97706, #F59E0B, #D97706); }
|
|
.strip-indigo { background: linear-gradient(90deg, #4F46E5, #818CF8, #4F46E5); }
|
|
.strip-violet { background: linear-gradient(90deg, #7C3AED, #A78BFA, #7C3AED); }
|
|
.strip-green { background: linear-gradient(90deg, #059669, #34D399, #059669); }
|
|
|
|
/* ─── Card Header ── 统一高度 & 中性底色 ──────────
|
|
编号徽章 (ch-num) 保持主题色；标题 (ch-title) 统一深色
|
|
所有 label-* 变体仅影响 ch-num，不影响 header 底色
|
|
*/
|
|
.card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.65rem;
|
|
padding: 0 1.05rem;
|
|
height: 2.8rem; /* 固定高度：所有卡片标题行等高 */
|
|
background: #F8FAFC; /* 统一中性底色 */
|
|
border-bottom: 1px solid #F1F5F9;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* ③ 编号徽章 */
|
|
.ch-num {
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: 0.58rem; font-weight: 800;
|
|
letter-spacing: 0.14em; text-transform: uppercase;
|
|
flex-shrink: 0;
|
|
padding: 0.14rem 0.46rem;
|
|
border-radius: 4px;
|
|
border: 1.5px solid currentColor;
|
|
line-height: 1.6;
|
|
}
|
|
/* 各主题色 — 仅作用于 ch-num */
|
|
.label-amber .ch-num { color: #B45309; background: #FFFBEB; }
|
|
.label-indigo .ch-num { color: #4338CA; background: #EEF2FF; }
|
|
.label-violet .ch-num { color: #6D28D9; background: #F5F3FF; }
|
|
.label-green .ch-num { color: #166534; background: #F0FDF4; }
|
|
|
|
/* ② 卡片标题 */
|
|
.ch-title {
|
|
font-size: 1.05rem; font-weight: 700; color: #1E293B; line-height: 1.3;
|
|
}
|
|
|
|
/* ─── Panel Header (02/03 用) ────────────────────── */
|
|
.panel-header {
|
|
padding: 0 1.05rem;
|
|
height: 2.8rem; /* 与 card-header 等高 */
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
border-bottom: 1px solid #F1F5F9;
|
|
background: #F8FAFC;
|
|
flex-shrink: 0;
|
|
}
|
|
/* 标题+编号并排行 */
|
|
.ph-title-row {
|
|
display: flex; align-items: center; gap: 0.6rem;
|
|
}
|
|
/* panel 编号徽章 */
|
|
.ph-num {
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: 0.58rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
|
|
color: #4F46E5; background: #EEF2FF; border: 1.5px solid #C7D2FE;
|
|
padding: 0.14rem 0.46rem; border-radius: 4px; line-height: 1.6; flex-shrink: 0;
|
|
}
|
|
.panel-header h3 { font-size: 1.05rem; font-weight: 700; color: #1E293B; line-height: 1.25; }
|
|
.ph-sub { font-size: 0.64rem; color: #94A3B8; margin-top: 0.12rem; letter-spacing: 0.02em; }
|
|
|
|
/* panel header 有副标题时需要更高 */
|
|
.panel-header.has-sub { height: 3.6rem; }
|
|
|
|
/* ── Card / Panel Body ───────────────────────────── */
|
|
.card-body, .panel-body {
|
|
padding: 0.9rem 1.05rem;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* ⑩ 大数字 */
|
|
.big-num {
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: 3.4rem; font-weight: 900;
|
|
line-height: 1; letter-spacing: -0.05em;
|
|
}
|
|
.num-amber { color: #D97706; }
|
|
.num-green { color: #16A34A; }
|
|
.num-red { color: #DC2626; }
|
|
.num-indigo { color: #4F46E5; }
|
|
|
|
.big-cap {
|
|
font-size: 0.82rem; color: #64748B; margin-top: 0.4rem; line-height: 1.55;
|
|
}
|
|
|
|
.sep { height: 1px; background: #F1F5F9; margin: 0.65rem 0; flex-shrink: 0; }
|
|
|
|
/* ─── Section mini-heading ───────────────────────── */
|
|
.sec-h {
|
|
font-size: 0.88rem; font-weight: 700; color: #334155;
|
|
text-align: center; margin-bottom: 0.6rem;
|
|
padding: 0.3rem 0;
|
|
border-bottom: 1px dashed #E2E8F0;
|
|
}
|
|
|
|
/* ── ④ Bullet list ───────────────────────────────── */
|
|
ul.bl { list-style: none; flex: 1; }
|
|
ul.bl li {
|
|
font-size: 0.95rem; color: #475569;
|
|
padding: 0.28rem 0 0 1.1rem;
|
|
position: relative; line-height: 1.6;
|
|
}
|
|
ul.bl li + li { margin-top: 0.06rem; }
|
|
ul.bl li::before {
|
|
content: ''; position: absolute; left: 0; top: 0.65em;
|
|
width: 5px; height: 5px; border-radius: 50%; background: #C7D2FE;
|
|
}
|
|
/* ⑤ 重点 — 琥珀加粗 */
|
|
ul.bl li.hi { color: #B45309; font-weight: 700; }
|
|
ul.bl li.hi::before { background: #F59E0B; }
|
|
|
|
/* ⑥⑦ 语义色 */
|
|
.pos { color: #16A34A; font-weight: 600; }
|
|
.neg { color: #DC2626; font-weight: 600; }
|
|
/* ⑧ 注释斜体 */
|
|
.note { font-size: 0.78rem; font-style: italic; color: #64748B; }
|
|
|
|
/* ── Math comparison (01.html) ───────────────────── */
|
|
.mpair {
|
|
display: grid; grid-template-columns: 1fr auto 1fr;
|
|
align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;
|
|
}
|
|
.mbox { border-radius: 9px; padding: 0.8rem 0.55rem; text-align: center; }
|
|
.mbox-g { background: #F0FDF4; border: 1.5px solid #86EFAC; }
|
|
.mbox-r { background: #FFF1F2; border: 1.5px solid #FDA4AF; }
|
|
.mbox .tk {
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: 0.85rem; font-weight: 800; letter-spacing: 0.08em; margin-bottom: 0.28rem;
|
|
}
|
|
.mbox-g .tk { color: #166534; }
|
|
.mbox-r .tk { color: #9F1239; }
|
|
.mbox .eq { font-size: 0.75rem; color: #94A3B8; line-height: 1.55; }
|
|
.mbox .rs {
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: 1.28rem; font-weight: 900; margin-top: 0.26rem;
|
|
}
|
|
.mbox-g .rs { color: #16A34A; }
|
|
.mbox-r .rs { color: #DC2626; }
|
|
.mvs { font-size: 0.62rem; font-weight: 700; color: #CBD5E1; text-align: center; }
|
|
.mnote {
|
|
font-size: 0.80rem; color: #B45309; text-align: center;
|
|
font-style: italic; font-weight: 600;
|
|
background: #FFFBEB; border-radius: 6px; padding: 0.3rem 0.5rem; margin-bottom: 0.5rem;
|
|
}
|
|
|
|
/* ── Flow boxes (01.html) ────────────────────────── */
|
|
.flow { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.6rem; }
|
|
.fbox {
|
|
flex: 1; border-radius: 8px; padding: 0.7rem 0.55rem;
|
|
text-align: center; font-size: 0.9rem; font-weight: 600; line-height: 1.45;
|
|
}
|
|
.fp { background: #FFF1F2; border: 1px solid #FDA4AF; color: #BE123C; }
|
|
.fs { background: #F0FDF4; border: 1px solid #86EFAC; color: #15803D; }
|
|
.fa { font-size: 1.4rem; color: #6366F1; flex-shrink: 0; }
|
|
|
|
/* ── Flowchart (02.html) ─────────────────────────── */
|
|
.fc { display: flex; flex-direction: column; align-items: center; flex: 1; }
|
|
.fc-node {
|
|
width: 90%; border-radius: 9px; text-align: center;
|
|
font-size: 0.9rem; font-weight: 600; padding: 0.65rem 0.9rem;
|
|
}
|
|
.fc-start { background: #F8F8FF; border: 1.5px solid #C7D2FE; color: #3730A3; }
|
|
.fc-dec { background: #F8F8FF; border: 2px solid #6366F1; color: #1E1B4B; font-size: 0.9rem; padding: 0.72rem 0.9rem; }
|
|
.fc-dec .hl { color: #16A34A; font-weight: 900; }
|
|
.fc-arr { color: #CBD5E1; font-size: 0.88rem; padding: 0.22rem 0; }
|
|
.fc-split { display: grid; grid-template-columns: 1fr 1fr; gap: 5%; width: 100%; margin-top: 0.36rem; }
|
|
.fc-side { display: flex; flex-direction: column; align-items: center; gap: 0.26rem; }
|
|
.fc-lbl { font-size: 0.76rem; font-weight: 700; }
|
|
.fc-lbl.y { color: #16A34A; }
|
|
.fc-lbl.n { color: #DC2626; }
|
|
.fc-out {
|
|
width: 100%; border-radius: 9px; text-align: center;
|
|
font-size: 0.85rem; padding: 0.65rem 0.45rem;
|
|
}
|
|
.fc-out .fmain { font-weight: 700; font-size: 0.9rem; }
|
|
.fc-out .fsub { font-size: 0.78em; margin-top: 0.28rem; opacity: 0.88; }
|
|
.fc-buy { background: #F0FDF4; border: 1.5px solid #86EFAC; color: #166534; }
|
|
.fc-sell { background: #FFF1F2; border: 1.5px solid #FDA4AF; color: #9F1239; }
|
|
.fc-foot { margin-top: 0.5rem; font-size: 0.68rem; color: #94A3B8; text-align: center; line-height: 1.6; }
|
|
|
|
/* ── Right stacked panels ────────────────────────── */
|
|
.rstack { display: flex; flex-direction: column; gap: 1.2%; }
|
|
.rstack .panel { flex: 1; }
|
|
|
|
/* ── Assumption rows (02.html) ───────────────────── */
|
|
.ar { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.58rem 0; border-bottom: 1px solid #F8FAFC; }
|
|
.ar:last-child { border-bottom: none; }
|
|
.badge {
|
|
width: 1.55rem; height: 1.55rem; border-radius: 50%; flex-shrink: 0;
|
|
background: #EEF2FF; border: 1px solid #C7D2FE;
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 0.65rem; font-weight: 700; color: #4338CA;
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
.al { font-size: 0.95rem; font-weight: 700; color: #1E293B; line-height: 1.3; }
|
|
.ad { font-size: 0.82rem; color: #64748B; margin-top: 0.18rem; line-height: 1.5; }
|
|
|
|
/* ── Comparison table (02.html) ──────────────────── */
|
|
.cmp-tbl {
|
|
width: 100%; border-collapse: separate; border-spacing: 0;
|
|
border-radius: 9px; overflow: hidden; border: 1px solid #E2E8F0;
|
|
}
|
|
.cmp-tbl th { padding: 0.62rem; font-size: 0.82rem; font-weight: 700; text-align: center; }
|
|
.cmp-tbl th.rh { background: #FFF1F2; border-right: 1px solid #E2E8F0; color: #BE123C; }
|
|
.cmp-tbl th.gh { background: #F0FDF4; color: #166534; }
|
|
.cmp-tbl td {
|
|
padding: 0.56rem 0.68rem; font-size: 0.88rem;
|
|
text-align: center; border-top: 1px solid #F1F5F9;
|
|
}
|
|
.cmp-tbl tr:nth-child(odd) td { background: #FAFAFA; }
|
|
.cmp-tbl tr:nth-child(even) td { background: #FFFFFF; }
|
|
.cmp-tbl td.rc { color: #DC2626; font-weight: 500; }
|
|
.cmp-tbl td.gc { color: #16A34A; font-weight: 500; }
|
|
|
|
/* ── Metric card (03.html) ───────────────────────── */
|
|
.metric-card {
|
|
background: #FFFFFF; border: 1.5px solid #E2E8F0; border-radius: 11px;
|
|
padding: 0.72rem 1rem 0.8rem;
|
|
display: flex; flex-direction: column;
|
|
}
|
|
/* 标签在上 */
|
|
.mc-label {
|
|
font-size: 0.62rem; font-weight: 700;
|
|
letter-spacing: 0.09em; text-transform: uppercase; color: #94A3B8;
|
|
margin-bottom: 0.3rem;
|
|
}
|
|
/* 数字居中对齐，Inter 字体 */
|
|
.mc-value {
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: 1.65rem; font-weight: 900;
|
|
letter-spacing: -0.03em; line-height: 1;
|
|
margin-bottom: 0.28rem;
|
|
}
|
|
.mc-sub { font-size: 0.7rem; color: #94A3B8; }
|
|
|
|
/* 强调型指标卡 (带背景) */
|
|
.metric-card.accent-indigo { background: #F5F3FF; border-color: #C7D2FE; }
|
|
.metric-card.accent-red { background: #FFF1F2; border-color: #FECDD3; }
|
|
|
|
.c-green { color: #16A34A; }
|
|
.c-red { color: #DC2626; }
|
|
.c-indigo { color: #4F46E5; }
|
|
.c-amber { color: #D97706; }
|
|
|
|
/* ── Bar comparison (03.html) ────────────────────── */
|
|
.vs-bar { display: flex; flex-direction: column; gap: 0.82rem; }
|
|
.vs-label-row {
|
|
display: flex; justify-content: space-between;
|
|
font-size: 0.76rem; font-weight: 600; margin-bottom: 0.24rem;
|
|
}
|
|
.vs-track { height: 10px; background: #F1F5F9; border-radius: 5px; overflow: hidden; }
|
|
.vs-fill { height: 100%; border-radius: 5px; }
|
|
.vs-fill-lrs { background: linear-gradient(90deg, #6366F1, #818CF8); }
|
|
.vs-fill-qqq { background: linear-gradient(90deg, #A78BFA, #C4B5FD); }
|
|
|
|
/* ── Backtest trade table (03.html) ──────────────── */
|
|
.bt-tbl {
|
|
width: 100%; border-collapse: separate; border-spacing: 0;
|
|
font-size: 0.88rem; border-radius: 9px; overflow: hidden; border: 1px solid #E2E8F0;
|
|
}
|
|
.bt-tbl thead th {
|
|
padding: 0.58rem 0.7rem; background: #F8FAFC; font-weight: 700;
|
|
font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
|
|
color: #64748B; border-bottom: 1px solid #E2E8F0; text-align: center; white-space: nowrap;
|
|
}
|
|
.bt-tbl tbody td {
|
|
padding: 0.46rem 0.7rem; border-bottom: 1px solid #F1F5F9; text-align: center; color: #374151;
|
|
}
|
|
.bt-tbl tbody tr:hover td { background: #F8FAFF; }
|
|
.bt-tbl .win { color: #16A34A; font-weight: 700; }
|
|
.bt-tbl .loss { color: #DC2626; font-weight: 700; }
|
|
|
|
/* ── Chart image embed (03.html) ─────────────────── */
|
|
.chart-img-wrap {
|
|
flex: 1; min-height: 0; overflow: hidden; border-radius: 10px;
|
|
background: #0f172a;
|
|
display: flex; align-items: center; justify-content: center;
|
|
}
|
|
.chart-img-wrap img {
|
|
width: 100%; height: 100%; object-fit: contain;
|
|
}
|