/* ===== 象栖智库 - Global Design System v3.0 ===== */ /* 融合Linear+Kraken+Sentry+金融看板 四大专业系统 */ /* === Google Fonts (CDN) — include in of each page === */ /* */ /* === CSS Variables === */ :root { /* Linear dark hierarchy */ --bg-deep: #08090a; --bg-surface: #0f1011; --bg-elevated: #191a1b; --bg-card: rgba(255,255,255,0.02); --bg-card-hover: rgba(255,255,255,0.04); --bg-input: rgba(255,255,255,0.02); /* Text (never pure white on dark — Linear precision) */ --text-primary: #f7f8f8; --text-secondary: #d0d6e0; --text-tertiary: #8a8f98; --text-quaternary: #62666d; /* Borders (semi-transparent white) */ --border-subtle: rgba(255,255,255,0.05); --border-default: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.12); /* Kraken Purple accent */ --accent: #7132f5; --accent-hover: #855bfb; --accent-muted: rgba(113,50,245,0.16); --accent-border: rgba(113,50,245,0.25); /* Market direction (Chinese: red=up, green=down) */ --red-up: #ff4466; --green-down: #44cc66; --gold: #fbbf24; /* Geometry (Kraken-inspired) */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-pill: 9999px; /* Shadows */ --shadow-card: 0 1px 2px rgba(0,0,0,0.3); --shadow-elevated: rgba(0,0,0,0.18) 0px 0.5rem 1.5rem; --shadow-inset: rgba(0,0,0,0.1) 0px 1px 3px 0px inset; /* 8px spacing grid */ --space-xs: 2px; --space-sm: 4px; --space-md: 8px; --space-lg: 12px; --space-xl: 16px; --space-2xl: 24px; } /* === Base Reset === */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 14px; } body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif; font-feature-settings: 'cv01', 'ss03'; background: var(--bg-deep); color: var(--text-primary); line-height: 1.5; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* === Typography === */ h1 { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.01em; } h2 { font-size: 1.1rem; font-weight: 500; } h3 { font-size: 1rem; font-weight: 500; } a { color: var(--accent); text-decoration: none; transition: color .12s; } a:hover { color: var(--accent-hover); } code, .mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } /* === Scrollbar === */ ::-webkit-scrollbar { width: 4px; height: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-quaternary); } /* === Selection === */ ::selection { background: var(--accent-muted); color: var(--text-primary); } /* === Navigation Bar === */ .nav { background: var(--bg-surface); border-bottom: 1px solid var(--border-default); padding: 1px 10px; display: flex; gap: 3px; align-items: center; flex-wrap: wrap; position: sticky; top: 0; z-index: 100; } .nav-links { display: inline; } .nav-hamburger { display: none; cursor: pointer; font-size: 16px; padding: 2px 6px; border-radius: 4px; color: var(--text-tertiary); user-select: none; margin-right: 2px; } .nav-hamburger:hover { background: var(--bg-card-hover); color: var(--text-primary); } .nav a { text-decoration: none; font-size: 10.5px; font-weight: 400; color: var(--text-tertiary); padding: 3px 4px; transition: color .12s; white-space: nowrap; } .nav a:hover { color: var(--accent); } .nav a.cur { color: var(--accent); font-weight: 500; } .nav .sep { color: var(--text-quaternary); font-size: 7px; opacity: 0.4; user-select: none; } .nav-r { margin-left: auto; display: flex; align-items: center; gap: 2px; } .nav-r .un { font-size: 13px; color: #a855f7; font-weight: 500; margin-right: 2px; } .nav-r .d-btn { cursor: pointer; font-size: 13px; padding: 2px 8px; display: inline-flex; align-items: center; gap: 2px; } .nav-r .login, .nav-r .logout { font-size: 13px; padding: 2px 8px; } /* === Container === */ .pg { max-width: 1140px; margin: 0 auto; padding: 4px 10px; } /* === Section Header === */ .sh { display: flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 500; color: var(--accent); padding: 5px 0 3px; margin: 4px 0 2px; } .sh .ct { font-size: 8px; color: var(--text-quaternary); font-weight: 400; margin-left: auto; } /* === Card Container (统一卡片) === */ .cd { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 4px; box-shadow: var(--shadow-card); } /* === Data Table (inside .cd) === */ .cd table { width: 100%; border-collapse: collapse; font-size: 11px; table-layout: fixed; } .cd th { text-align: left; padding: 5px 8px; font-weight: 500; color: var(--text-tertiary); font-size: 9px; text-transform: uppercase; letter-spacing: 0.3px; background: var(--bg-surface); border-bottom: 1px solid var(--border-default); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: sticky; top: 0; } .cd th.r { text-align: right; } .cd td { padding: 4px 8px; text-align: left; border-bottom: 1px solid var(--border-subtle); white-space: nowrap; vertical-align: middle; font-size: 11px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; } .cd td.r { text-align: right; font-variant-numeric: tabular-nums; } .cd tr:last-child td { border-bottom: none; } .cd tr:hover td { background: var(--bg-card-hover); } .cd .up { color: var(--red-up) !important; } .cd .dn { color: var(--green-down) !important; } .cd .fl { color: var(--text-tertiary) !important; } /* Code cell */ .cd .cd { font-size: 9px; color: var(--text-quaternary); font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; overflow: hidden; text-overflow: ellipsis; } /* === Top Index Cards (4 big cards) === */ .tp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 4px; } .tc { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 2px 4px; box-shadow: var(--shadow-card); } .tc-t { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0; } .tc-l { font-size: 9px; color: var(--text-tertiary); font-weight: 500; } .tc-p { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; } .tc-c { font-size: 11px; font-weight: 500; margin-top: 0; } /* === Tab System (Linear purple underline) === */ .tbs { display: flex; gap: 0; padding: 2px 6px; border-bottom: 1px solid var(--border-subtle); } .tb { padding: 4px 12px 3px; font-size: 10px; font-weight: 500; cursor: pointer; color: var(--text-tertiary); background: transparent; border: none; border-bottom: 2px solid transparent; transition: all .12s; font-family: inherit; } .tb:hover { color: var(--text-primary); } .tb.act { color: var(--accent); border-bottom-color: var(--accent); } .tb .cnt { font-size: 8px; color: var(--text-quaternary); margin-left: 2px; font-weight: 400; } .tg { display: none; } .tg.act { display: block; } /* === Quick Nav Grid === */ .qg { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 4px 0; } .qi { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 7px; text-decoration: none; color: var(--text-primary); text-align: center; transition: all .15s; box-shadow: var(--shadow-card); } .qi:hover { background: var(--bg-card-hover); border-color: var(--accent-border); transform: translateY(-1px); box-shadow: var(--shadow-elevated); } .qi-i { font-size: 15px; display: block; } .qi-l { font-size: 11px; font-weight: 500; } .qi-d { font-size: 8px; color: var(--text-quaternary); margin-top: 1px; line-height: 1.3; } /* === Stat Cards Grid === */ .cap { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: 4px; } .cp { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 4px 8px; text-align: center; } .cp-l { font-size: 9px; color: var(--text-tertiary); } .cp-v { font-size: 12px; font-weight: 600; } .cp-v.in { color: var(--red-up); } .cp-v.out { color: var(--green-down); } /* === Button === */ .btn { display: inline-flex; align-items: center; padding: 6px 14px; font-size: 12px; font-weight: 500; border-radius: var(--radius-xl); border: none; cursor: pointer; transition: all .12s; text-decoration: none; font-family: inherit; } .btn-primary { background: var(--accent); color: #fff !important; box-shadow: var(--shadow-inset); } .btn-primary:hover { background: var(--accent-hover); box-shadow: var(--shadow-elevated); } .btn-ghost { background: var(--bg-card); border: 1px solid var(--border-default); color: var(--text-secondary) !important; } .btn-ghost:hover { background: var(--bg-card-hover); border-color: var(--border-strong); } /* === Footer === */ .ftr { font-size: 9px; color: var(--text-quaternary); text-align: center; padding: 5px 0; border-top: 1px solid var(--border-subtle); margin-top: 4px; } /* === 🎨 Visualization Components === */ /* --- Mini Sparkline Bar Chart (for multi-period returns) --- */ .spk { display: flex; align-items: center; gap: 3px; height: 20px; } .spk-b { display: flex; align-items: flex-end; gap: 1px; height: 18px; } .spk-b svg { display: block; } .spk-l { font-size: 7px; color: var(--text-quaternary); writing-mode: vertical-lr; font-weight: 400; letter-spacing: 0; } /* Horizontal mini bar (for showing 3d/w/m as colored bars) */ .mbar { display: flex; align-items: center; gap: 2px; height: 14px; } .mbar-b { height: 10px; border-radius: 2px; min-width: 2px; transition: width .2s; } .mbar-b.up { background: var(--red-up); } .mbar-b.dn { background: var(--green-down); } .mbar-l { font-size: 8px; font-variant-numeric: tabular-nums; min-width: 32px; } /* Stacked mini bar for multi-period view */ .mbars { display: flex; gap: 2px; align-items: center; } .mbars-g { display: flex; gap: 1px; } .mbars-i { width: 14px; height: 6px; border-radius: 1px; } .mbars-i.up { background: var(--red-up); } .mbars-i.dn { background: var(--green-down); } .mbars-i.flat { background: var(--text-quaternary); opacity: 0.3; } /* --- Sparkline SVG (inline trend line) --- */ .sl { display: inline-block; vertical-align: middle; margin: 0 2px; } .sl svg { display: block; } /* --- Direction arrow (animated) --- */ .darr { display: inline-flex; align-items: center; gap: 1px; font-size: 10px; } .darr .u { color: var(--red-up); } .darr .d { color: var(--green-down); } .darr svg { width: 8px; height: 8px; } /* --- Heat Map Grid --- */ .hmg { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 2px; margin: 3px 0; } .hmi { display: flex; flex-direction: column; align-items: center; padding: 3px 2px; border-radius: 3px; font-size: 9px; cursor: default; transition: opacity .1s; } .hmi.up { background: rgba(255,68,102,0.12); } .hmi.dn { background: rgba(68,204,102,0.12); } .hmi.flat { background: var(--bg-card); } .hmi:hover { opacity: 0.8; } .hmi-n { font-size: 7px; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; max-width: 100%; white-space: nowrap; } .hmi-p { font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; } .hmi-c { font-size: 8px; } .hmi-c.up { color: var(--red-up); } .hmi-c.dn { color: var(--green-down); } /* --- Mini Price Card (compact data card) --- */ .mc { display: flex; align-items: center; gap: 6px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 4px 8px; box-shadow: var(--shadow-card); } .mc-info { flex: 1; min-width: 0; } .mc-label { font-size: 8px; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mc-price { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; } .mc-chg { font-size: 10px; font-weight: 500; } .mc-chg.up { color: var(--red-up); } .mc-chg.dn { color: var(--green-down); } /* --- Progress / Strength Bar --- */ .str { display: flex; align-items: center; gap: 4px; } .str-bar { flex: 1; height: 3px; background: var(--border-subtle); border-radius: 2px; overflow: hidden; } .str-fill { height: 100%; border-radius: 2px; transition: width .3s; } .str-fill.strong { background: var(--red-up); } .str-fill.mid { background: var(--gold); } .str-fill.weak { background: var(--green-down); } .str-l { font-size: 8px; color: var(--text-tertiary); min-width: 20px; text-align: right; font-variant-numeric: tabular-nums; } /* === Column width defaults for index tables === */ .col-idx-c { width: 10%; } .col-idx-n { width: 48%; } .col-idx-p { width: 21%; } .col-idx-cp { width: 21%; } .col-etf-c { width: 7%; } .col-etf-n { width: 18%; } .col-etf-p { width: 8%; } .col-etf-d1 { width: 7%; } .col-etf-d3 { width: 7%; } .col-etf-d5 { width: 7%; } .col-etf-w { width: 7%; } .col-etf-m { width: 7%; } .col-etf-v { width: 8%; } .col-etf-t { width: 7%; } .col-fut-c { width: 7%; } .col-fut-n { width: 15%; } .col-fut-p { width: 8%; } .col-fut-cg { width: 7%; } .col-fut-cgp { width: 7%; } .col-fut-3d { width: 6%; } .col-fut-5d { width: 6%; } .col-fut-w { width: 6%; } .col-fut-m { width: 6%; } .col-fut-vol { width: 7%; } .col-fut-oi { width: 7%; } .col-fut-oic { width: 6%; } .col-fut-t { width: 6%; } .col-opt-t { width: 12%; } .col-opt-n { width: 45%; } .col-opt-p { width: 21%; } .col-opt-cp { width: 22%; } /* === Responsive === */ /* 📱 Tablet: ≤900px — nav starts wrapping */ @media(max-width: 900px) { .qg { grid-template-columns: repeat(3, 1fr); } .cap { grid-template-columns: repeat(4, 1fr); } .nav a { font-size: 9.5px; } .hd { flex-wrap: wrap; gap: 2px; } .ht .slogan { display: none; } } /* 📱 Phone: ≤600px — main mobile breakpoint */ @media(max-width: 600px) { .pg { padding: 2px 4px; } .tp { grid-template-columns: repeat(2, 1fr); } .qg { grid-template-columns: repeat(2, 1fr); } .cap { grid-template-columns: repeat(3, 1fr); } .qi { padding: 5px 3px; } .qi-i { font-size: 13px; } .qi-l { font-size: 10px; } .qi-d { display: none; } .tc { padding: 1px 3px; } .tc-p { font-size: 13px; } .tc-c { font-size: 10px; } .cd th { font-size: 8px; padding: 3px 4px; } .cd td { font-size: 10px; padding: 2px 4px; } .cd table { table-layout: auto; } .sh { font-size: 9px; padding: 3px 0 2px; } .d-btn { font-size: 11px; padding: 1px 5px; } .nav-r .login, .nav-r .logout, .nav-r .un { font-size: 11px; } .ht { font-size: 12px; } .beta-badge { font-size: 8px; padding: 0 5px; } .hm { font-size: 8px; } .ann-bar { height: 16px; line-height: 16px; } .ann-bar span { font-size: 9px; animation: annScroll 50s linear infinite; } .egg-panel { width: 260px; right: 8px; bottom: 68px; } .golden-egg { bottom: 12px; right: 12px; } .col-idx-n { width: auto; } .dp-d { flex-direction: column; } .nav-r .sep { display: none; } /* 页面标题和slogan */ .hd { flex-wrap: wrap; } .ht .slogan { display: none; } /* 表格水平滚动容器 */ .cd table { min-width: 480px; } .cd { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* 衍生品双栏叠起来 */ .dp-d { flex-direction: column; } .dp-col { width: 100%; } /* 汉堡菜单 */ .nav-hamburger { display: inline-block; } .nav-links { display: none; } .nav-links.show { display: inline; } .nav { flex-wrap: wrap; row-gap: 0; } .nav-links { width: 100%; order: 2; padding: 2px 0 4px 0; border-top: 1px solid var(--border-subtle); margin-top: 2px; } .nav-links a { font-size: 11px; padding: 4px 8px; display: inline-block; } .nav-links .sep { display: none; } .nav-links a + a { margin-left: 0; } .nav-links a::after { content: ''; display: block; } .nav-links { display: none; } .nav-links.show { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px 4px; } .nav-links a { font-size: 11px; padding: 5px 7px; display: inline-block; border-radius: 4px; } } /* 📱 Small phone: ≤400px — extreme compact */ @media(max-width: 400px) { .pg { padding: 1px 3px; } .tp { grid-template-columns: repeat(2, 1fr); gap: 2px; } .qg { grid-template-columns: repeat(2, 1fr); gap: 2px; } .cap { grid-template-columns: repeat(2, 1fr); gap: 2px; } .qi { padding: 3px 2px; } .qi-i { font-size: 11px; } .qi-l { font-size: 9px; } .tc-p { font-size: 12px; } .cd th { font-size: 7px; padding: 2px 3px; } .cd td { font-size: 9px; padding: 2px 3px; } .egg-panel { width: 240px; max-height: 340px; } .ep-item { padding: 5px 8px; } .ep-name { font-size: 11px; } .beta-badge { font-size: 7px; } /* 手机免责声明 */ .disc-bar{padding:3px 6px;gap:4px} .disc-txt{font-size:9px} } /* === 通知铃铛按钮 === */ .bell-btn { font-size: 18px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; transition: background .2s; position: relative; } .bell-btn:hover { background: rgba(168,85,247,0.1); } .bell-badge { position: absolute; top: -2px; right: -4px; background: #ef4444; color: #fff; font-size: 9px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: none; align-items: center; justify-content: center; padding: 0 4px; border: 2px solid #080c18; } /* === 📱 手机端全站优化 === */ /* 横滑提示 */ .swipe-hint { display: none; font-size: 9px; color: #4a5578; text-align: center; padding: 2px 0; animation: swipePulse 2s ease-in-out infinite; } @keyframes swipePulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } } @media(max-width:600px) { .swipe-hint { display: block; } } /* 触摸区域 ≥36px */ @media(max-width:600px) { .nav a, .nav-r a, .d-btn, .pm-nav-btn, .tab, .tf-btn { min-height: 36px; display: inline-flex; align-items: center; } .nav a { padding: 8px 8px; } .d-btn { padding: 4px 10px !important; } .nav-r .login, .nav-r .logout, .nav-r .un { font-size: 12px; padding: 4px 6px; } .pm-nav-btn { font-size: 12px; padding: 4px 8px; } .tab { padding: 6px 10px; } .tf-btn { padding: 6px 10px; } .flt-select { font-size: 11px; padding: 6px 8px; } } /* 加载状态指示器 */ .page-loader { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999; text-align: center; } .page-loader .spinner { width: 28px; height: 28px; border: 3px solid rgba(168,85,247,0.1); border-top-color: #a855f7; border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto 6px; } .page-loader .spinner-txt { font-size: 10px; color: #64748b; } @keyframes spin { to { transform: rotate(360deg); } } body.loading .page-loader { display: block; } body.loading > .w, body.loading > .tv, body.loading > table { opacity: 0.3; pointer-events: none; } /* 手机端ETF表格横滑动画 */ .etf-wrap { position: relative; } @media(max-width:600px) { .etf-wrap::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 16px; background: linear-gradient(to left, rgba(7,11,22,0.6), transparent); pointer-events: none; } } /* 新页面表格手机端横滑 */ @media(max-width:600px) { table { min-width: 380px; } .sec { overflow-x: auto; -webkit-overflow-scrolling: touch; } .cat-panel .sec { overflow-x: visible; } .cat-panel table { min-width: 360px; } /* 考试页的学习计划表 */ .step-timeline { padding-left: 14px; } /* 手机端试卷内容区宽度 */ .w { padding: 0 6px 10px; } /* 考试页概述卡片 */ .overview { grid-template-columns: repeat(2, 1fr); } /* 核心优势卡片 */ .sec > [style*="grid-template-columns"] { grid-template-columns: repeat(2, 1fr); } } /* ===== 📱 手机端新页面通用适配 ===== */ /* 新页面通用卡片网格手机端 */ @media(max-width:600px) { .sess-grid, .chain-grid, .link-grid, .card-grid, .feat-grid, .ind-grid, .role-grid, .cat-tabs, .exam-tabs { grid-template-columns: 1fr !important; } /* 策略速查卡 */ .strat-table { font-size: 9px; } .strat-table th, .strat-table td { padding: 3px 4px; } .strat-table td .strat-when, .strat-table td .strat-goal { font-size: 9px; } /* 学习页策略导航 */ .cat-toggle { gap: 2px; } .cat-toggle .cat-btn { font-size: 9px; padding: 3px 7px; } /* 对比表 */ .comp-grid { grid-template-columns: 1fr; } /* 考点区块 */ .point-block .pb-body ul { padding-left: 10px; } .point-block .pb-body li { font-size: 10px; } /* 英语卡片 */ .en-card .en { font-size: 11px; word-break: break-word; } .en-card .zh, .en-card .use { font-size: 9px; } .word-grid { grid-template-columns: 1fr; } .abbrev-grid { grid-template-columns: 1fr 1fr; } /* 对话 */ .dialog .d-line { font-size: 10px; } /* 章节导航 */ .chapter-nav { gap: 3px; } .chapter-btn { font-size: 8px; padding: 2px 6px; } /* 进度条 */ .progress-wrap { flex-wrap: wrap; } /* P/L示意图 */ .pl-chart { min-width: 80px; } .pl-chart .pl-fill { height: 3px; } /* 面试卡片 */ .card-grid .card .cdesc ul { font-size: 9px; } /* 时间线 */ .step-item .step-body { font-size: 9px; } /* 考试页切换标签 */ .exam-tab { font-size: 10px; padding: 5px 10px; } /* 策略行 */ .strat-table .cat-row td { font-size: 10px; } /* 卡片内边距压缩 */ .card, .chain-card, .sess-card, .point-block, .en-card, .link-card, .role-item, .feat-item, .ind-item, .word-item, .dialog, .comp-item { padding: 5px 6px; } }